Service charts, complex types

dashboard/pkg/epinio/components/settings/ChartValues.vue

@@ -4,6 +4,9 @@
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+import KeyValue from '@shell/components/form/KeyValue.vue';
+import ArrayList from '@shell/components/form/ArrayList.vue';
+import { _VIEW } from '@shell/config/query-params';
 
 interface Data {
   valid: { [key: string]: boolean }
@@ -12,9 +15,11 @@
 // Data, Methods, Computed, Props
 export default Vue.extend<Data, any, any, any>({
   components: {
+    ArrayList,
     Checkbox,
     LabeledInput,
     LabeledSelect,
+    KeyValue
   },
 
   props: {
@@ -41,7 +46,10 @@
   },
 
   data() {
-    return { valid: {} };
+    return {
+      valid: {},
+      VIEW:  _VIEW,
+    };
   },
 
   watch: {
@@ -50,6 +58,30 @@
     }
   },
 
+  mounted() {
+    console.log(this.chart, this.value);
+  },
+
+  computed: {
+    orderedChart() {
+      const toArray = (value: any, type: string) => Object.keys(value)
+        .filter((k) => value[k].type === type)
+        .reduce((acc: any[], key: any) => {
+          return [
+            ...acc,
+            { name: key, type: value[key].type }
+          ];
+        }, []);
+
+      return [
+        ...toArray(this.chart, 'bool'),
+        ...toArray(this.chart, 'string'),
+        ...toArray(this.chart, 'map'),
+        ...toArray({ ...this.chart, 'example.array': { type: 'array' } }, 'array'),
+      ];
+    }
+  },
+
   methods: {
     rules(key: string, min: any, max: any) {
       const frg = formRulesGenerator(this.$store.getters['i18n/t'], { key });
@@ -92,6 +124,13 @@
 
     onInputCheckbox(key: string, value: boolean) {
       Vue.set(this.value, key, value ? 'true' : 'false');
+    },
+
+    setMapValue(v: any) {
+      console.log(v)
+    },
+    setArrayValue(v: any) {
+      console.log(v)
     }
   },
 });
@@ -101,49 +140,67 @@
   <div class="chart-values">
     <h3>{{ title }}</h3>
     <div
-      v-for="(setting, key) in chart"
-      :key="key"
+      v-for="setting in orderedChart"
+      :key="setting.name"
       class="chart-values-item"
     >
       <LabeledInput
         v-if="setting.type === 'number' || setting.type === 'integer'"
-        :id="key"
-        v-model="value[key]"
-        :label="key"
+        :id="setting.name"
+        v-model="value[setting.name]"
+        :label="setting.name"
         type="number"
         :min="setting.minimum"
         :max="setting.maximum"
-        :rules="[rules(key, setting.minimum, setting.maximum)]"
+        :rules="[rules(setting.name, setting.minimum, setting.maximum)]"
         :tooltip="numericPlaceholder(setting)"
         :mode="mode"
         :disabled="disabled"
       />
       <Checkbox
         v-else-if="setting.type === 'bool'"
-        :id="key"
-        :value="value[key] === 'true'"
-        :label="key"
+        :id="setting.name"
+        :value="value[setting.name] === 'true'"
+        :label="setting.name"
         :mode="mode"
         :disabled="disabled"
-        @input="onInputCheckbox(key, $event)"
+        @input="onInputCheckbox(setting.name, $event)"
       />
       <LabeledSelect
         v-else-if="setting.type === 'string' && setting.enum"
-        :id="key"
-        v-model="value[key]"
-        :label="key"
+        :id="setting.name"
+        v-model="value[setting.name]"
+        :label="setting.name"
         :options="setting.enum"
         :mode="mode"
         :disabled="disabled"
       />
       <LabeledInput
         v-else-if="setting.type === 'string'"
-        :id="key"
-        v-model="value[key]"
-        :label="key"
+        :id="setting.name"
+        v-model="value[setting.name]"
+        :label="setting.name"
         :mode="mode"
         :disabled="disabled"
       />
+      <KeyValue
+        v-else-if="setting.type === 'map'"
+        v-model="value[setting.name]"
+        :title="setting.name"
+        :initial-empty-row="mode !== VIEW"
+        :mode="mode"
+        :key-label="t('epinio.applications.create.envvar.keyLabel')"
+        :value-label="t('epinio.applications.create.envvar.valueLabel')"
+        :parse-lines-from-file="false"
+        @input="setMapValue($event)"
+      />
+      <ArrayList
+        v-else-if="setting.type === 'array'"
+        v-model="value[setting.name]"
+        :title="setting.name"
+        :mode="mode"
+        @input="setArrayValue($event)"
+      />
     </div>
   </div>
 </template>

dashboard/pkg/epinio/edit/services.vue

@@ -137,6 +137,10 @@
 
       const newSettings = !isEqual(objValuesToString(this.chartValues), objValuesToString(this.value.settings));
 
+      const ttt = objValuesToString(this.chartValues);
+
+      debugger;
+
       if (newSettings) {
         this.value.settings = objValuesToString(this.chartValues);
       }

dashboard/pkg/epinio/models/services.js

@@ -65,6 +65,8 @@
   }
 
   async create() {
+    const t = this.settings;
+    debugger;
     await this.followLink('create', {
       method:  'post',
       headers: {

dashboard/pkg/epinio/utils/settings.ts

@@ -1,8 +1,12 @@
+import isObject from 'lodash/isObject';
+
 export function objValuesToString(obj: any) {
   const copy = { ...obj };
 
   for (const key in copy) {
-    if (typeof copy[key] !== 'string') {
+    if (isObject(copy[key])) {
+      copy[key] = objValuesToString(copy[key]);
+    } else if (typeof copy[key] !== 'string') {
       copy[key] = String(copy[key]);
     }
   }