feat: [ENHANCEMENT] Add setting upgrade-config to UI(#8369) (#347)

Signed-off-by: Nick Chung <nick.chung@suse.com>

pkg/harvester/components/SettingList.vue

@@ -3,7 +3,9 @@ import { mapGetters } from 'vuex';
 import ActionMenu from '@shell/components/ActionMenuShell';
 import { Banner } from '@components/Banner';
 import AsyncButton from '@shell/components/AsyncButton';
-import { HCI_ALLOWED_SETTINGS, HCI_SETTING } from '../config/settings';
+import { HCI_ALLOWED_SETTINGS, HCI_SINGLE_CLUSTER_ALLOWED_SETTING, HCI_SETTING } from '../config/settings';
+import { DOC } from '../config/doc-links';
+import { docLink } from '../utils/feature-flags';
 
 const CATEGORY = {
   ui: [
@@ -96,7 +98,7 @@ export default {
           return true;
         }
 
-        const description = this.t(setting.description, {}, true)?.toLowerCase() || '';
+        const description = this.t(setting.description, this.getDocLinkParams(setting) || {}, true)?.toLowerCase() || '';
 
         // filter by description
         if (description.includes(searchQuery)) {
@@ -193,6 +195,19 @@ export default {
         }
         buttonDone(false);
       }
+    },
+
+    getDocLinkParams(setting) {
+      const settingConfig = HCI_ALLOWED_SETTINGS[setting.id] || HCI_SINGLE_CLUSTER_ALLOWED_SETTING[setting.id];
+
+      if (settingConfig?.docPath) {
+        const version = this.$store.getters['harvester-common/getServerVersion']();
+        const url = docLink(DOC[settingConfig.docPath], version);
+
+        return { url };
+      }
+
+      return {};
     }
   },
 };
@@ -223,7 +238,7 @@ export default {
               Experimental
             </span>
           </h1>
-          <h2 v-clean-html="t(setting.description, {}, true)">
+          <h2 v-clean-html="t(setting.description, getDocLinkParams(setting) || {}, true)">
           </h2>
         </div>
         <div

pkg/harvester/components/settings/upgrade-config.vue

@@ -0,0 +1,163 @@
+<script>
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { RadioGroup } from '@components/Form/Radio';
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'HarvesterUpgradeConfig',
+
+  components: {
+    LabeledInput,
+    LabeledSelect,
+    RadioGroup
+  },
+  mixins: [CreateEditView],
+
+  data() {
+    let parseDefaultValue = {};
+
+    try {
+      parseDefaultValue = this.value.value ? JSON.parse(this.value.value) : JSON.parse(this.value.default);
+    } catch (error) {
+      parseDefaultValue = JSON.parse(this.value.default);
+    }
+    parseDefaultValue = this.normalizeValue(parseDefaultValue);
+
+    return {
+      parseDefaultValue,
+      errors: []
+    };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+    strategyOptions() {
+      return [
+        { value: 'sequential', label: 'sequential' },
+        { value: 'skip', label: 'skip' },
+        { value: 'parallel', label: 'parallel' }
+      ];
+    }
+  },
+
+  created() {
+    this.update();
+  },
+
+  methods: {
+    normalizeValue(obj) {
+      if (!obj.imagePreloadOption) {
+        obj.imagePreloadOption = { strategy: { type: 'sequential' } };
+      }
+      if (!obj.imagePreloadOption.strategy) {
+        obj.imagePreloadOption.strategy = { type: 'sequential' };
+      }
+      if (!obj.imagePreloadOption.strategy.type) {
+        obj.imagePreloadOption.strategy.type = 'sequential';
+      }
+      // Only set concurrency if type is 'parallel'
+      if (obj.imagePreloadOption.strategy.type === 'parallel') {
+        if (typeof obj.imagePreloadOption.strategy.concurrency !== 'number') {
+          obj.imagePreloadOption.strategy.concurrency = 0;
+        }
+      } else {
+        delete obj.imagePreloadOption.strategy.concurrency;
+      }
+      if (typeof obj.restoreVM !== 'boolean') {
+        obj.restoreVM = false;
+      }
+
+      return obj;
+    },
+    update() {
+      try {
+        // Clone to avoid mutating the form state
+        const valueToSave = JSON.parse(JSON.stringify(this.parseDefaultValue));
+
+        if (valueToSave.imagePreloadOption && valueToSave.imagePreloadOption.strategy) {
+          if (valueToSave.imagePreloadOption.strategy.type !== 'parallel') {
+            delete valueToSave.imagePreloadOption.strategy.concurrency;
+          }
+        }
+
+        this.value['value'] = JSON.stringify(valueToSave, null, 2);
+        this.errors = [];
+      } catch (e) {
+        this.errors = ['Invalid JSON'];
+      }
+    }
+  },
+
+  watch: {
+    value: {
+      handler(neu) {
+        let parseDefaultValue;
+
+        try {
+          parseDefaultValue = JSON.parse(neu.value);
+        } catch (err) {
+          parseDefaultValue = JSON.parse(this.value.default);
+        }
+        parseDefaultValue = this.normalizeValue(parseDefaultValue);
+        this['parseDefaultValue'] = parseDefaultValue;
+        this.update();
+      },
+      deep: true
+    }
+  }
+};
+</script>
+
+<template>
+  <div>
+    <div
+      class="row"
+      @input="update"
+    >
+      <div class="col span-12">
+        <label class="mb-5"><b>{{ t('harvester.setting.upgrade.imagePreloadStrategy') }}</b></label>
+        <LabeledSelect
+          v-model:value="parseDefaultValue.imagePreloadOption.strategy.type"
+          class="mb-20"
+          :mode="mode"
+          :label="t('harvester.setting.upgrade.strategyType')"
+          :options="strategyOptions"
+          @update:value="update"
+        />
+        <LabeledInput
+          v-if="parseDefaultValue.imagePreloadOption.strategy.type === 'parallel'"
+          v-model:value.number="parseDefaultValue.imagePreloadOption.strategy.concurrency"
+          class="mb-20"
+          :mode="mode"
+          :label="t('harvester.setting.upgrade.concurrency')"
+          min="0"
+          type="number"
+        />
+        <label class="mb-5"><b>{{ t('harvester.setting.upgrade.restoreVM') }}</b></label>
+        <RadioGroup
+          v-model:value="parseDefaultValue.restoreVM"
+          class="mb-20"
+          name="restoreVM"
+          :options="[true, false]"
+          :labels="[t('generic.enabled'), t('generic.disabled')]"
+          @update:value="update"
+        />
+        <div
+          v-if="errors.length"
+          class="error"
+        >
+          {{ errors[0] }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.error {
+  color: #d9534f;
+  margin-top: 5px;
+}
+</style>