Skip to content

Commit

Permalink
Add basic configuration for policy creation
Browse files Browse the repository at this point in the history
  • Loading branch information
jordojordo committed Jul 31, 2024
1 parent c5f2c5b commit f27c942
Show file tree
Hide file tree
Showing 11 changed files with 698 additions and 163 deletions.
13 changes: 6 additions & 7 deletions jest.setup.js
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
155 changes: 155 additions & 0 deletions pkg/kubewarden/chart/kubewarden/admission/Basic.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
<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 } 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
},
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 ) {
this.$set(this.policy.metadata, 'namespace', 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
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

0 comments on commit f27c942

Please sign in to comment.