feat: add Insecure Skip TLS Verify checkbox in cluster-registration-url setting (#716)

* feat: add Insecure Skip TLS Verify checkbox

Signed-off-by: Andy Lee <andy.lee@suse.com>

* refactor: set insecureSkipTLSVerify default to false

Signed-off-by: Andy Lee <andy.lee@suse.com>

* fix: conflict

Signed-off-by: Andy Lee <andy.lee@suse.com>

* refactor: remove unneeded change

Signed-off-by: Andy Lee <andy.lee@suse.com>

* fix: get the feature flag in data()

Signed-off-by: Andy Lee <andy.lee@suse.com>

* refactor: make data logic simpler

Signed-off-by: Andy Lee <andy.lee@suse.com>

* refactor: put tip in info banner

Signed-off-by: Andy Lee <andy.lee@suse.com>

---------

Signed-off-by: Andy Lee <andy.lee@suse.com>

pkg/harvester/components/settings/cluster-registration-url.vue

@@ -0,0 +1,123 @@
+<script>
+import MessageLink from '@shell/components/MessageLink';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { HCI_SETTING } from '../../config/settings';
+import { Checkbox } from '@components/Form/Checkbox';
+import { Banner } from '@components/Banner';
+
+export default {
+  name: 'HarvesterEditClusterRegistrationURL',
+
+  components: {
+    LabeledInput, MessageLink, Checkbox, Banner
+  },
+
+  mixins: [CreateEditView],
+
+  data() {
+    let parseDefaultValue = {};
+
+    try {
+      parseDefaultValue = JSON.parse(this.value.value);
+    } catch (error) {
+      parseDefaultValue.url = this.value.value;
+      parseDefaultValue.insecureSkipTLSVerify = true;
+    }
+
+    return {
+      parseDefaultValue,
+      errors: []
+    };
+  },
+
+  computed: {
+    toCA() {
+      return `${ HCI_SETTING.ADDITIONAL_CA }?mode=edit`;
+    },
+    clusterRegistrationTLSVerifyEnabled() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('clusterRegistrationTLSVerify');
+    },
+    registrationURL: {
+      get() {
+        return this.clusterRegistrationTLSVerifyEnabled ? this.parseDefaultValue.url : this.parseDefaultValue;
+      },
+
+      set(value) {
+        if (this.clusterRegistrationTLSVerifyEnabled) {
+          this.parseDefaultValue.url = value;
+        } else {
+          this.parseDefaultValue = value;
+        }
+      }
+    }
+  },
+
+  methods: {
+    getDefaultValue() {
+      if (this.clusterRegistrationTLSVerifyEnabled) {
+        return { url: '', insecureSkipTLSVerify: false };
+      } else {
+        return '';
+      }
+    },
+
+    updateUrl() {
+      this.update();
+    },
+
+    update() {
+      if (this.clusterRegistrationTLSVerifyEnabled) {
+        this.value['value'] = JSON.stringify(this.parseDefaultValue);
+      } else {
+        this.value['value'] = this.parseDefaultValue;
+      }
+    },
+
+    useDefault() {
+      this.parseDefaultValue = this.getDefaultValue();
+    },
+
+    updateInsecureSkipTLSVerify(newValue) {
+      const { url = '' } = this.parseDefaultValue;
+
+      this.parseDefaultValue = { url, insecureSkipTLSVerify: newValue };
+      this.update();
+    },
+  }
+};
+</script>
+
+<template>
+  <div
+    class="row"
+  >
+    <div class="col span-12">
+      <Banner color="info">
+        <MessageLink
+          :to="toCA"
+          target="_blank"
+          prefix-label="harvester.setting.clusterRegistrationUrl.tip.prefix"
+          middle-label="harvester.setting.clusterRegistrationUrl.tip.middle"
+          suffix-label="harvester.setting.clusterRegistrationUrl.tip.suffix"
+        />
+      </Banner>
+      <LabeledInput
+        v-model:value="registrationURL"
+        class="mb-20"
+        :mode="mode"
+        :label="t('harvester.setting.clusterRegistrationUrl.url')"
+        @update:value="updateUrl"
+      />
+      <div v-if="clusterRegistrationTLSVerifyEnabled">
+        <Checkbox
+          v-model:value="parseDefaultValue.insecureSkipTLSVerify"
+          class="check mb-5"
+          type="checkbox"
+          :label="t('harvester.setting.clusterRegistrationUrl.insecureSkipTLSVerify')"
+          @update:value="updateInsecureSkipTLSVerify"
+        />
+      </div>
+    </div>
+  </div>
+</template>

pkg/harvester/config/feature-flags.js

@@ -61,6 +61,7 @@ const FEATURE_FLAGS = {
   'v1.8.0': [
     'hotplugCdRom',
     'supportBundleFileNameSetting',
+    'clusterRegistrationTLSVerify'
   ],
 };
 

pkg/harvester/config/settings.ts

@@ -127,7 +127,8 @@ export const HCI_ALLOWED_SETTINGS = {
 
 export const HCI_SINGLE_CLUSTER_ALLOWED_SETTING = {
   [HCI_SETTING.CLUSTER_REGISTRATION_URL]: {
-    kind:     'url',
+    kind:     'custom',
+    from:     'import',
     canReset: true,
   },
   [HCI_SETTING.UI_PL]: {

pkg/harvester/l10n/en-us.yaml

@@ -1351,6 +1351,12 @@ harvester:
         retention: How long to retain metrics
         retentionSize: Maximum size of metrics
     clusterRegistrationUrl:
+      url: URL
+      insecureSkipTLSVerify: Insecure Skip TLS Verify
+      tip: 
+        prefix: Harvester secures cluster registration via TLS by default. If opt out "Insecure SKip TLS Verify", you must provide custom CA certificates using the
+        middle: 'additional-ca'
+        suffix: setting.
       message: To completely unset the imported Harvester cluster, please also remove it on the Rancher Dashboard UI via the <code> Virtualization Management </code> page.
     ntpServers:
       isNotIPV4: The address you entered is not IPv4 or host. Please enter a valid IPv4 address or a host address.

pkg/harvester/models/harvesterhci.io.setting.js

@@ -52,11 +52,19 @@ export default class HciSetting extends HarvesterResource {
     });
   }
 
+  get clusterRegistrationTLSVerifyFeatureEnabled() {
+    return this.$rootGetters['harvester-common/getFeatureEnabled']('clusterRegistrationTLSVerify');
+  }
+
   get customValue() {
     if (this.metadata.name === HCI_SETTING.STORAGE_NETWORK) {
       try {
         return JSON.stringify(JSON.parse(this.value), null, 2);
       } catch (e) {}
+    } else if (this.metadata.name === HCI_SETTING.CLUSTER_REGISTRATION_URL) {
+      try {
+        return this.clusterRegistrationTLSVerifyFeatureEnabled ? JSON.stringify(JSON.parse(this.value), null, 2) : this.value;
+      } catch (e) {}
     }
 
     return false;