Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Consolidate policy types into a spoofed type for simplified list and creation #836

Closed
wants to merge 2 commits into from
Closed

Consolidate policy types into a spoofed type for simplified list and creation #836

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
58a9175
Add basic configuration for policy creation
jordojordo Jul 31, 2024
779f95c
Spoof policy type for consolidating policy list and creation
jordojordo Aug 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 6 additions & 7 deletions jest.setup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { config } from '@vue/test-utils';
import { directiveSsr as t } from '@shell/plugins/i18n';
import { VCleanTooltip } from '@shell/plugins/clean-tooltip-directive';
import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';

import Vue from 'vue';
import { config } from '@vue/test-utils';
import i18n from '@shell/plugins/i18n';
import cleanTooltipDirective from '@shell/directives/clean-tooltip';
import cleanHtmlDirective from '@shell/directives/clean-html';

Vue.config.productionTip = false;

Vue.directive('clean-tooltip', VCleanTooltip);
Vue.use(i18n);
Vue.directive('clean-tooltip', cleanTooltipDirective);
Vue.directive('clean-html', cleanHtmlDirective);

beforeAll(() => {});
Expand All @@ -16,7 +16,6 @@ beforeEach(() => {
jest.restoreAllMocks();

config.mocks['$store'] = { getters: { 'i18n/t': jest.fn() } };
config.directives = { t };
});

afterEach(() => {});
Expand Down
172 changes: 172 additions & 0 deletions pkg/kubewarden/chart/kubewarden/admission/Basic.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
<script>
import { _CREATE } from '@shell/config/query-params';
import { set } from '@shell/utils/object';

import LabeledSelect from '@shell/components/form/LabeledSelect';
import { LabeledInput } from '@components/Form/LabeledInput';
import { RadioGroup } from '@components/Form/Radio';

import { KUBEWARDEN, KUBEWARDEN_KIND } from '../../../types';
import NamespaceNameInput from '../../../components/NamespaceNameInput';

export default {
inject: ['chartType'],

props: {
mode: {
type: String,
default: _CREATE
},
value: {
type: Object,
required: true
}
},

components: {
LabeledSelect,
LabeledInput,
NamespaceNameInput,
RadioGroup
},

created() {
console.log('### chartType: ', this.chartType);
},

data() {
let policy = null;

if ( this.value?.policy ) {
policy = this.value.policy;
} else {
policy = this.value || {};
}
// fix for https://github.com/rancher/kubewarden-ui/issues/672
// enforce `default` as namespace for creation of AP's
if ( this.mode === _CREATE && this.chartType === KUBEWARDEN.ADMISSION_POLICY ) {
set(policy.metadata, 'namespace', 'default');
}

return {
policy,
namespaced: true,
isNamespaceNew: false
};
},

beforeMount() {
if ( this.chartType !== KUBEWARDEN.ADMISSION_POLICY ) {
this.namespaced = false;
}
},

watch: {
isNamespaceNew(neu) {
this.$set(this.value, 'isNamespaceNew', neu);
},

namespaced(neu) {
if ( !neu ) {
// ClusterAdmissionPolicy
this.$set(this.policy, 'kind', KUBEWARDEN_KIND.CLUSTER_ADMISSION_POLICY);
this.$set(this.policy.metadata, 'namespace', undefined);
this.$set(
this.policy.spec,
'namespaceSelector',
{
matchExpressions: [],
matchLabels: {}
}
);
} else {
// AdmissionPolicy
this.$set(this.policy, 'kind', KUBEWARDEN_KIND.ADMISSION_POLICY);
this.$set(this.policy.spec, 'namespaceSelector', undefined);
}
}
},

computed: {
isCreate() {
return this.mode === _CREATE;
},

isGlobal() {
return this.chartType === KUBEWARDEN.CLUSTER_ADMISSION_POLICY;
},

policyServers() {
return this.$store.getters['cluster/all'](KUBEWARDEN.POLICY_SERVER);
},

policyServerOptions() {
if ( this.policyServers?.length > 0 ) {
const out = [];

this.policyServers.map(p => out.push(p.id));

return out;
}

return this.policyServers || [];
},
}
};
</script>

<template>
<div class="mb-20">
<RadioGroup
v-if="isCreate"
v-model="namespaced"
data-testid="kw-policy-basic-namespaced-radio"
name="namespaced"
:options="[true, false]"
:mode="mode"
class="mb-10"
:labels="[t('kubewarden.policyConfig.basic.namespacedRadio.namespaced'), t('kubewarden.policyConfig.basic.namespacedRadio.cluster')]"
/>

<div class="row">
<template v-if="namespaced">
<div ref="nameNsDescriptionWrapper" class="col span-6 name-col">
<NamespaceNameInput
data-testid="kw-policy-basic-namespace-input"
:mode="mode"
:value="policy"
name-key="metadata.name"
namespace-key="metadata.namespace"
@isNamespaceNew="isNamespaceNew = $event"
/>
</div>
</template>

<template v-else>
<div class="col span-6 mb-20">
<LabeledInput
v-model="policy.metadata.name"
data-testid="kw-policy-basic-name-input"
:mode="mode"
:label="t('nameNsDescription.name.label')"
:placeholder="t('nameNsDescription.name.placeholder')"
:required="true"
/>
</div>
</template>

<div class="col span-6">
<LabeledSelect
v-model="policy.spec.policyServer"
data-testid="kw-policy-general-ps-input"
:value="value"
:mode="mode"
:options="policyServerOptions"
:disabled="!isCreate"
:label="t('kubewarden.policyConfig.serverSelect.label')"
:tooltip="t('kubewarden.policyConfig.serverSelect.tooltip')"
/>
</div>
</div>
</div>
</template>
97 changes: 0 additions & 97 deletions pkg/kubewarden/chart/kubewarden/admission/General.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,7 @@ import isEmpty from 'lodash/isEmpty';
import { _CREATE } from '@shell/config/query-params';
import { set } from '@shell/utils/object';

import LabeledSelect from '@shell/components/form/LabeledSelect';
import Loading from '@shell/components/Loading';
import NameNsDescription from '@shell/components/form/NameNsDescription';
import { Banner } from '@components/Banner';
import { LabeledInput } from '@components/Form/LabeledInput';
import { RadioGroup } from '@components/Form/Radio';
Expand All @@ -23,10 +21,6 @@ export default {
type: String,
default: _CREATE
},
targetNamespace: {
type: String,
required: true
},
isCustom: {
type: Boolean,
default: false
Expand All @@ -38,9 +32,7 @@ export default {
},

components: {
LabeledSelect,
Loading,
NameNsDescription,
Banner,
LabeledInput,
RadioGroup
Expand Down Expand Up @@ -73,62 +65,23 @@ export default {
policy = this.value || {};
}

// fix for https://github.com/rancher/kubewarden-ui/issues/672
// enforce `default` as namespace for creation of AP's
if ( this.mode === _CREATE && this.chartType === KUBEWARDEN.ADMISSION_POLICY ) {
set(policy.metadata, 'namespace', 'default');
}

return {
policy,
initialPolicyMode: null,
isNamespaceNew: false
};
},

watch: {
isNamespaceNew(neu) {
this.$set(this.value, 'isNamespaceNew', neu);
}
},

created() {
if ( this.policyMode ) {
this.initialPolicyMode = this.policyMode;
}
},

beforeUpdate() {
this.$nextTick(() => {
// In order to fix the layout of the NameNsDescription component
// we need to adjust the classes of the child elements
const wrapper = this.$refs?.nameNsDescriptionWrapper;

const children = wrapper?.querySelectorAll('.row.mb-20 > .col.span-3');

if ( this.isGlobal ) {
if ( children?.length === 1 ) {
children[0].classList.remove('span-3');
children[0].classList.add('span-12');
}
} else if ( children?.length === 2 ) {
children[0].classList.remove('span-3');
children[0].classList.add('span-4');
children[1].classList.remove('span-3');
children[1].classList.add('span-8');
}
});
},

computed: {
isCreate() {
return this.mode === _CREATE;
},

isGlobal() {
return this.chartType === KUBEWARDEN.CLUSTER_ADMISSION_POLICY;
},

modeDisabled() {
// Kubewarden doesn't allow switching a policy from 'protect' to 'monitor'
if ( !this.isCreate ) {
Expand All @@ -142,22 +95,6 @@ export default {
return this.value?.policy?.spec?.mode;
},

policyServers() {
return this.$store.getters['cluster/all'](KUBEWARDEN.POLICY_SERVER);
},

policyServerOptions() {
if ( this.policyServers?.length > 0 ) {
const out = [];

this.policyServers.map(p => out.push(p.id));

return out;
}

return this.policyServers || [];
},

showModeBanner() {
if ( !this.isCreate && ( this.initialPolicyMode === 'monitor' && this.policyMode === 'protect' ) ) {
return true;
Expand All @@ -172,33 +109,6 @@ export default {
<template>
<Loading v-if="$fetchState.pending" mode="relative" />
<div v-else>
<div class="row">
<div ref="nameNsDescriptionWrapper" class="col span-6 name-col">
<NameNsDescription
data-testid="kw-policy-general-name-input"
:mode="mode"
:value="policy"
:description-hidden="true"
:namespaced="!isGlobal"
:namespace-new-allowed="true"
name-key="metadata.name"
namespace-key="metadata.namespace"
@isNamespaceNew="isNamespaceNew = $event"
/>
</div>
<div class="col span-6">
<LabeledSelect
v-model="policy.spec.policyServer"
data-testid="kw-policy-general-ps-input"
:value="value"
:mode="mode"
:options="policyServerOptions"
:disabled="!isCreate"
:label="t('kubewarden.policyConfig.serverSelect.label')"
:tooltip="t('kubewarden.policyConfig.serverSelect.tooltip')"
/>
</div>
</div>
<template v-if="policy.spec">
<div class="row mb-20">
<div v-if="isCustom" class="col span-12">
Expand Down Expand Up @@ -249,10 +159,3 @@ export default {
</template>
</div>
</template>

<style lang="scss" scoped>
.name-col div:before, .name-col div:after {
content: unset;
display: unset;
}
</style>
Loading
Loading