From 6d762f75df80e1cc1d8b844e1b9925be0e02baab Mon Sep 17 00:00:00 2001 From: Francesco Torchia Date: Mon, 7 Aug 2023 19:08:45 +0200 Subject: [PATCH 1/9] Fix Catalog Service value in edit mode, #296 Signed-off-by: Francesco Torchia --- dashboard/pkg/epinio/edit/services.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dashboard/pkg/epinio/edit/services.vue b/dashboard/pkg/epinio/edit/services.vue index faae808..ab12540 100644 --- a/dashboard/pkg/epinio/edit/services.vue +++ b/dashboard/pkg/epinio/edit/services.vue @@ -51,7 +51,7 @@ export default Vue.extend Date: Mon, 7 Aug 2023 19:09:58 +0200 Subject: [PATCH 2/9] Create generic ChartValues component to manage ChartValueSettings Signed-off-by: Francesco Torchia --- .../components/settings/ChartValues.vue | 148 ++++++++++++++++++ dashboard/pkg/epinio/utils/settings.ts | 11 ++ 2 files changed, 159 insertions(+) create mode 100644 dashboard/pkg/epinio/components/settings/ChartValues.vue create mode 100644 dashboard/pkg/epinio/utils/settings.ts diff --git a/dashboard/pkg/epinio/components/settings/ChartValues.vue b/dashboard/pkg/epinio/components/settings/ChartValues.vue new file mode 100644 index 0000000..2aff7c3 --- /dev/null +++ b/dashboard/pkg/epinio/components/settings/ChartValues.vue @@ -0,0 +1,148 @@ + + + + + diff --git a/dashboard/pkg/epinio/utils/settings.ts b/dashboard/pkg/epinio/utils/settings.ts new file mode 100644 index 0000000..73d01cc --- /dev/null +++ b/dashboard/pkg/epinio/utils/settings.ts @@ -0,0 +1,11 @@ +export function objValuesToString(obj: any) { + const copy = { ...obj }; + + for (const key in copy) { + if (typeof copy[key] !== 'string') { + copy[key] = String(copy[key]); + } + } + + return copy; +} From 81b0b6c0cd836e7de4cd02edf4bc75d6bc9e90f7 Mon Sep 17 00:00:00 2001 From: Francesco Torchia Date: Mon, 7 Aug 2023 19:10:38 +0200 Subject: [PATCH 3/9] import ChartValues component into AppInfo Signed-off-by: Francesco Torchia --- .../epinio/components/application/AppInfo.vue | 125 ++---------------- 1 file changed, 13 insertions(+), 112 deletions(-) diff --git a/dashboard/pkg/epinio/components/application/AppInfo.vue b/dashboard/pkg/epinio/components/application/AppInfo.vue index d422c57..c97e08b 100644 --- a/dashboard/pkg/epinio/components/application/AppInfo.vue +++ b/dashboard/pkg/epinio/components/application/AppInfo.vue @@ -7,14 +7,13 @@ import ArrayList from '@shell/components/form/ArrayList.vue'; import Loading from '@shell/components/Loading.vue'; import Banner from '@components/Banner/Banner.vue'; import { _EDIT } from '@shell/config/query-params'; -import Checkbox from '@components/Form/Checkbox/Checkbox.vue'; -import LabeledSelect from '@shell/components/form/LabeledSelect.vue'; -import formRulesGenerator from '@shell/utils/validators/formRules'; +import ChartValues from '../settings/ChartValues.vue'; import { sortBy } from '@shell/utils/sort'; import { validateKubernetesName } from '@shell/utils/validators/kubernetes-name'; import { EPINIO_TYPES, EpinioNamespace } from '../../types'; import Application from '../../models/applications'; +import { objValuesToString } from '../../utils/settings'; export interface EpinioAppInfo { meta: { @@ -46,8 +45,7 @@ export default Vue.extend({ KeyValue, Loading, Banner, - Checkbox, - LabeledSelect + ChartValues, }, props: { @@ -138,7 +136,7 @@ export default Vue.extend({ const validNamespace = nsErrors.length === 0; const validInstances = typeof this.values.configuration?.instances !== 'string' && this.values.configuration?.instances >= 0; - return validName && validNamespace && validInstances && Object.values(this.validSettings).every((v) => !!v) ; + return validName && validNamespace && validInstances && Object.values(this.validSettings).every((v) => !!v); }, showApplicationVariables() { @@ -156,7 +154,7 @@ export default Vue.extend({ meta: this.values.meta, configuration: { ...this.values.configuration, - settings: this.objValuesToString(this.values.configuration.settings) + settings: objValuesToString(this.values.configuration.settings) }, }); }, @@ -197,57 +195,6 @@ export default Vue.extend({ return Object.fromEntries(entries); }, - - objValuesToString(obj: any) { - const copy = { ...obj }; - - for (const key in copy) { - if (typeof copy[key] !== 'string') { - copy[key] = String(copy[key]); - } - } - - return copy; - }, - - validSettingsRule(key: string, min: any, max: any) { - const frg = formRulesGenerator(this.$store.getters['i18n/t'], { key }); - const minRule = frg.minValue(min); - const maxRule = frg.maxValue(max); - - return (value: string) => { - const messages = []; - - if (value) { - const minRes = minRule(value); - - if (minRes) { - messages.push(minRes); - } - - const maxRes = maxRule(value); - - if (maxRes) { - messages.push(maxRes); - } - } - Vue.set(this.validSettings, key, !messages.length); - - return messages.join(','); - }; - }, - - numericPlaceholder(setting: any) { - if (setting.maximum && setting.minimum) { - return `${ setting.minimum } to ${ setting.maximum }`; - } else if (setting.maximum) { - return `<= ${ setting.maximum }`; - } else if (setting.minimum) { - return `>= ${ setting.minimum }`; - } else { - return ''; - } - }, }, }); @@ -305,50 +252,15 @@ export default Vue.extend({
-

{{ t('epinio.applications.create.settingsVars.title') }}

-
- - - - -
+
@@ -365,14 +277,3 @@ export default Vue.extend({
- - From d2e1b3c49cfea201df966bfa9c29cceac6bc9b01 Mon Sep 17 00:00:00 2001 From: Francesco Torchia Date: Mon, 7 Aug 2023 19:11:12 +0200 Subject: [PATCH 4/9] Add ChartValues to Service form Signed-off-by: Francesco Torchia --- dashboard/pkg/epinio/edit/services.vue | 55 ++++++++++++++++++++++++- dashboard/pkg/epinio/l10n/en-us.yaml | 2 + dashboard/pkg/epinio/models/services.js | 10 ++++- 3 files changed, 64 insertions(+), 3 deletions(-) diff --git a/dashboard/pkg/epinio/edit/services.vue b/dashboard/pkg/epinio/edit/services.vue index ab12540..6801bfc 100644 --- a/dashboard/pkg/epinio/edit/services.vue +++ b/dashboard/pkg/epinio/edit/services.vue @@ -9,10 +9,13 @@ import LabeledSelect from '@shell/components/form/LabeledSelect.vue'; import { EPINIO_TYPES, EpinioNamespace, EpinioCompRecord, EpinioCatalogService } from '../types'; import { validateKubernetesName } from '@shell/utils/validators/kubernetes-name'; import NameNsDescription from '@shell/components/form/NameNsDescription.vue'; +import ChartValues from '../components/settings/ChartValues.vue'; import EpinioBindAppsMixin from './bind-apps-mixin.js'; import { mapGetters } from 'vuex'; import isEqual from 'lodash/isEqual'; import sortBy from 'lodash/sortBy'; +import EpinioCatalogServiceModel from '../models/catalogservices'; +import { objValuesToString } from '../utils/settings'; export const EPINIO_SERVICE_PARAM = 'service'; @@ -23,6 +26,7 @@ interface Data { export default Vue.extend({ components: { Loading, + ChartValues, CruResource, LabeledSelect, NameNsDescription, @@ -60,9 +64,19 @@ export default Vue.extend { + this.chartValues = details?.settings || {}; + }); + } + }, + computed: { ...mapGetters({ t: 'i18n/t' }), @@ -75,6 +89,10 @@ export default Vue.extend !!v)) { + return false; + } + const nameErrors = validateKubernetesName(this.value?.name || '', this.t('epinio.namespace.name'), this.$store.getters, undefined, []); const nsErrors = validateKubernetesName(this.value?.meta.namespace || '', '', this.$store.getters, undefined, []); @@ -93,19 +111,31 @@ export default Vue.extend n.metadata.name); }, + catalogServices(): EpinioCatalogServiceModel[] { + return this.$store.getters['epinio/all'](EPINIO_TYPES.CATALOG_SERVICE); + }, + catalogServiceOpts() { - return this.$store.getters['epinio/all'](EPINIO_TYPES.CATALOG_SERVICE).map((cs: EpinioCatalogService) => ({ + return this.catalogServices.map((cs: EpinioCatalogService) => ({ label: `${ cs.name } (${ cs.short_description })`, value: cs.name })); }, noCatalogServices() { - return this.catalogServiceOpts.length === 0; + return this.catalogServices.length === 0; + }, + + selectedCatalogService() { + return this.catalogServices?.find(({ name }: EpinioCatalogServiceModel) => name === this.value.catalog_service); }, newBinds() { return !isEqual(sortBy(this.selectedApps), sortBy(this.value.boundapps)); + }, + + showChartValues() { + return Object.keys(this.selectedCatalogService?.settings || []).length !== 0; } }, @@ -146,6 +176,12 @@ export default Vue.extend +
+
+
+ +
+
diff --git a/dashboard/pkg/epinio/l10n/en-us.yaml b/dashboard/pkg/epinio/l10n/en-us.yaml index 62fd273..5221ead 100644 --- a/dashboard/pkg/epinio/l10n/en-us.yaml +++ b/dashboard/pkg/epinio/l10n/en-us.yaml @@ -305,6 +305,8 @@ epinio: } promptRemove: attemptingToRemove: You are attempting to delete the Service Instance + chartValues: + title: Service Variables configurations: pairs: label: Config Data diff --git a/dashboard/pkg/epinio/models/services.js b/dashboard/pkg/epinio/models/services.js index 67e2214..7d84f0f 100644 --- a/dashboard/pkg/epinio/models/services.js +++ b/dashboard/pkg/epinio/models/services.js @@ -56,7 +56,8 @@ export default class EpinioServiceModel extends EpinioNamespacedResource { }, data: { name: this.name, - catalog_service: this.catalog_service + catalog_service: this.catalog_service, + settings: this.settings } }); } @@ -94,4 +95,11 @@ export default class EpinioServiceModel extends EpinioNamespacedResource { bulkRemove(items, opt) { return bulkRemove(items, opt); } + + async details() { + return await this.followLink('self', { + method: 'get', + headers: { accept: 'application/json' } + }); + } } From 09544ae456d8e840782f6a6626b0ede83fcbbd8d Mon Sep 17 00:00:00 2001 From: Francesco Torchia Date: Mon, 7 Aug 2023 19:21:29 +0200 Subject: [PATCH 5/9] Disable Chart Values in EDIT mode Signed-off-by: Francesco Torchia --- dashboard/pkg/epinio/components/settings/ChartValues.vue | 8 ++++++++ dashboard/pkg/epinio/edit/services.vue | 2 ++ 2 files changed, 10 insertions(+) diff --git a/dashboard/pkg/epinio/components/settings/ChartValues.vue b/dashboard/pkg/epinio/components/settings/ChartValues.vue index 2aff7c3..1fb3bdc 100644 --- a/dashboard/pkg/epinio/components/settings/ChartValues.vue +++ b/dashboard/pkg/epinio/components/settings/ChartValues.vue @@ -34,6 +34,10 @@ export default Vue.extend({ type: String, required: true }, + disabled: { + type: Boolean, + default: false + }, }, data() { @@ -108,6 +112,7 @@ export default Vue.extend({ :rules="[rules(key, setting.minimum, setting.maximum)]" :tooltip="numericPlaceholder(setting)" :mode="mode" + :disabled="disabled" /> ({ :value="value[key] === 'true'" :label="key" :mode="mode" + :disabled="disabled" @input="value[key] = $event ? 'true' : 'false'" /> ({ :label="key" :options="setting.enum" :mode="mode" + :disabled="disabled" /> ({ v-model="value[key]" :label="key" :mode="mode" + :disabled="disabled" />
diff --git a/dashboard/pkg/epinio/edit/services.vue b/dashboard/pkg/epinio/edit/services.vue index 6801bfc..a83aae7 100644 --- a/dashboard/pkg/epinio/edit/services.vue +++ b/dashboard/pkg/epinio/edit/services.vue @@ -248,11 +248,13 @@ export default Vue.extend
+
From 94f021a59038e8923147c3d3ad03b461551dee70 Mon Sep 17 00:00:00 2001 From: Francesco Torchia Date: Tue, 8 Aug 2023 10:36:22 +0200 Subject: [PATCH 6/9] Reset chart values when changing service catalog Signed-off-by: Francesco Torchia --- dashboard/pkg/epinio/edit/services.vue | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/dashboard/pkg/epinio/edit/services.vue b/dashboard/pkg/epinio/edit/services.vue index a83aae7..587cb0b 100644 --- a/dashboard/pkg/epinio/edit/services.vue +++ b/dashboard/pkg/epinio/edit/services.vue @@ -170,6 +170,11 @@ export default Vue.extend
From 602dd7e772c3480703243cacd0e2593c099ce7cf Mon Sep 17 00:00:00 2001 From: Francesco Torchia Date: Thu, 10 Aug 2023 15:30:39 +0200 Subject: [PATCH 7/9] Adress small change requests Signed-off-by: Francesco Torchia --- dashboard/pkg/epinio/components/settings/ChartValues.vue | 6 +++++- dashboard/pkg/epinio/edit/services.vue | 4 ++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/dashboard/pkg/epinio/components/settings/ChartValues.vue b/dashboard/pkg/epinio/components/settings/ChartValues.vue index 1fb3bdc..549de72 100644 --- a/dashboard/pkg/epinio/components/settings/ChartValues.vue +++ b/dashboard/pkg/epinio/components/settings/ChartValues.vue @@ -89,6 +89,10 @@ export default Vue.extend({ return ''; } }, + + onInputCheckbox(key: string, value: boolean) { + Vue.set(this.value, key, value ? 'true' : 'false'); + } }, }); @@ -121,7 +125,7 @@ export default Vue.extend({ :label="key" :mode="mode" :disabled="disabled" - @input="value[key] = $event ? 'true' : 'false'" + @input="onInputCheckbox(key, $event)" /> Date: Thu, 17 Aug 2023 10:50:43 +0200 Subject: [PATCH 8/9] Replace details() with epinio/find from store Signed-off-by: Francesco Torchia --- dashboard/pkg/epinio/edit/services.vue | 8 ++++++-- dashboard/pkg/epinio/models/services.js | 7 ------- 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/dashboard/pkg/epinio/edit/services.vue b/dashboard/pkg/epinio/edit/services.vue index 67473c0..45de9a7 100644 --- a/dashboard/pkg/epinio/edit/services.vue +++ b/dashboard/pkg/epinio/edit/services.vue @@ -71,9 +71,13 @@ export default Vue.extend { - this.chartValues = details?.settings || {}; + const serviceDetails = this.$store.dispatch('epinio/find', { + type: EPINIO_TYPES.SERVICE_INSTANCE, + id: `${ this.value.metadata?.namespace }/${ this.value.metadata?.name }`, + opt: { force: true } }); + + this.chartValues = serviceDetails?.settings || {}; } }, diff --git a/dashboard/pkg/epinio/models/services.js b/dashboard/pkg/epinio/models/services.js index 7d84f0f..e721a9a 100644 --- a/dashboard/pkg/epinio/models/services.js +++ b/dashboard/pkg/epinio/models/services.js @@ -95,11 +95,4 @@ export default class EpinioServiceModel extends EpinioNamespacedResource { bulkRemove(items, opt) { return bulkRemove(items, opt); } - - async details() { - return await this.followLink('self', { - method: 'get', - headers: { accept: 'application/json' } - }); - } } From e40e0befbfbb65dea7300452989964b540eecc68 Mon Sep 17 00:00:00 2001 From: Francesco Torchia Date: Mon, 21 Aug 2023 17:59:01 +0200 Subject: [PATCH 9/9] Get Chart Values from sevices list response Signed-off-by: Francesco Torchia --- dashboard/pkg/epinio/edit/services.vue | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/dashboard/pkg/epinio/edit/services.vue b/dashboard/pkg/epinio/edit/services.vue index 45de9a7..f1ed0b8 100644 --- a/dashboard/pkg/epinio/edit/services.vue +++ b/dashboard/pkg/epinio/edit/services.vue @@ -64,23 +64,11 @@ export default Vue.extend