@rancher/shell 0.1.0 → 0.1.1

package/mixins/chart.js

@@ -118,6 +118,7 @@ export default {
       return out;
     },
 
+    // Conditionally filter out prerelease versions of the chart.
     filteredVersions() {
       return this.showPreRelease ? this.mappedVersions : this.mappedVersions.filter(v => !v.isPre);
     },
@@ -144,12 +145,18 @@ export default {
       return this.$route.query[HIDDEN] === _FLAGGED;
     },
 
+    // If the user is installing the app for the first time,
+    // warn them about CPU and memory requirements.
     warnings() {
       const warnings = [];
 
       if ( this.existing ) {
         // Ignore the limits on upgrade (or if asked by query) and don't show any warnings
       } else {
+        // The UI will show warnings about CPU and memory if
+        // these annotations are added to Helm chart:
+        // - catalog.cattle.io/requests-cpu
+        // - catalog.cattle.io/requests-memory
         const needCpu = parseSi(this.version?.annotations?.[CATALOG_ANNOTATIONS.REQUESTS_CPU] || '0');
         const needMemory = parseSi(this.version?.annotations?.[CATALOG_ANNOTATIONS.REQUESTS_MEMORY] || '0');
 
@@ -238,7 +245,10 @@ export default {
       await this.$store.dispatch('catalog/load');
 
       if ( this.query.appNamespace && this.query.appName ) {
-        // Explicitly asking for edit
+        // First check the URL query for an app name and namespace.
+        // Use those values to check for a catalog app resource.
+        // If found, set the form to edit mode. If not, set the
+        // form to create mode.
 
         try {
           this.existing = await this.$store.dispatch('cluster/find', {
@@ -252,8 +262,11 @@ export default {
           this.existing = null;
         }
       } else if ( this.chart?.targetNamespace && this.chart?.targetName ) {
-        // Asking to install a special chart with fixed namespace/name
-        // so edit it if there's an existing install
+        // If the app name and namespace values are not provided in the
+        // query, fall back on target values defined in the Helm chart itself.
+
+        // Ask to install a special chart with fixed namespace/name
+        // or edit it if there's an existing install.
 
         try {
           this.existing = await this.$store.dispatch('cluster/find', {
@@ -275,6 +288,9 @@ export default {
         return;
       }
 
+      // If no version is given in the URL query,
+      // use the first version provided by the Helm chart
+      // as the default.
       if ( !this.query.versionName && this.chart.versions?.length ) {
         this.query.versionName = this.chart.versions[0].version;
       }
@@ -304,10 +320,26 @@ export default {
           chartName:     this.query.chartName,
           versionName: this.query.versionName
         });
+        // Here we set us versionInfo. The returned
+        // object contains everything all info
+        // about a currently installed app, and it has the
+        // following keys:
+        //
+        // - appReadme: A short overview of what the app does. This
+        //   forms the first few paragraphs of the chart info when
+        //   you install a Helm chart app through Rancher.
+        // - chart: Metadata about the Helm chart, including the
+        //   name and version.
+        // - readme: This is more detailed information that appears
+        //   under the heading "Chart Information (Helm README)" when
+        //   you install or upgrade a Helm chart app through Rancher,
+        //   below the app README.
+        // - values: All Helm chart values for the currently installed
+        //   app.
       } catch (e) {
         console.error('Unable to fetch VersionInfo: ', e); // eslint-disable-line no-console
       }
-    },
+    }, // End of fetchChart
 
     selectVersion({ id: version }) {
       this.$router.applyQuery({ [VERSION]: version });

package/mixins/{compact-input.js → compact-input.ts}

@@ -1,4 +1,6 @@
-export default {
+import Vue from 'vue';
+
+export default Vue.extend({
   props: {
     compact: {
       type:    Boolean,
@@ -16,9 +18,9 @@ export default {
   },
 
   computed: {
-    isCompact() {
+    isCompact(): boolean {
       // Compact if explicitly set - otherwise compact if there is no label
       return this.compact !== null ? this.compact : !(this.label || this.labelKey);
     }
   }
-};
+});

package/mixins/form-validation.js

@@ -0,0 +1,122 @@
+import { getAllValues } from '@shell/utils/object';
+import formRulesGenerator from '@shell/utils/validators/formRules';
+
+export default {
+  data() {
+    return {
+      fvFormRuleSets: [
+        /* fvFormRuleSets define the validation rules for the entire form. These should almost always be overridden in the form-component using the mixin
+        example:
+        {
+          path:  'container.image', // required: defines the path of the value to be tested against it's rules. Looks for the relevant path in `this.value` unless an is passed in via rootObject
+          rootObject: { container: { image: 'name' } } // optional: redirects the path to the object passed here,
+          rules: ['noSpaces', 'noPeriods'], // required: array of strings that match which validator functions to run against the value of the field defined by the path (and optionally the rulesets rootObject),
+          translationKey: 'Image Name', // optional: defines the displaykey, overrides displaykeys that may otherwise be passed into the translation
+        }
+        */
+      ],
+      fvReportedValidationPaths: [
+        // an array of strings that track which ruleset paths have been bound to a field for error reporting
+        // tracked in a seperate array from the actual rulesets since we want the option of keeping track of modelValidationRules without mutating the model itself
+        // you may place a path in here manually as part of your form's data props...
+        // ... or you may place a path in here programitcally by using the "fvGetAndReportPathRules" method
+      ]
+    };
+  },
+
+  methods: {
+    // returns an array of validator functions based off path property of the ruleset, use this if you want the array but you don't want the form to track that the rules have been bound to a field
+    fvGetPathRules(path) {
+      return this.fvRulesets.find(ruleset => ruleset.path === path)?.rules || [];
+    },
+    // returns an array of validator functions and pushes the path of the relevant ruleset into fvReportedValidationPaths so that we know any error messages are handled by the field using it
+    fvGetAndReportPathRules(path) {
+      const rules = this.fvGetPathRules(path);
+
+      if (rules.length > 0 && !this.fvReportedValidationPaths.includes(path)) {
+        this.fvReportedValidationPaths = [...this.fvReportedValidationPaths, path];
+      }
+
+      return rules;
+    },
+    fvGetPathValues(path) { // validates that the path is one that belongs to a ruleset (either a formRuleset or from the modelValidationRules) and returns its value(s) in an array
+      // returns even single values as an array to simplify validation logic since some fields may have multiple values
+      const relevantRuleset = this.fvRulesets.find(ruleset => ruleset.path === path);
+
+      if (!relevantRuleset) {
+        return [];
+      }
+
+      return getAllValues(relevantRuleset?.rootObject || this.value, relevantRuleset?.path);
+    },
+    fvGetPathErrors(paths = []) { // gets errors from multiple paths, usually used externally to check a single path but used within the mixin to check all paths for errors
+      const messages = paths.reduce((acc, path) => {
+        const pathErrors = [];
+        const relevantRules = this.fvGetPathRules(path);
+        const relevantValues = this.fvGetPathValues(path).map((val, idx, arr) => (arr.length > 1 && typeof val === 'object' && !Array.isArray(val) && val !== null ? { ...val, idx } : val));
+
+        relevantRules.forEach((rule) => {
+          relevantValues.forEach((value) => {
+            pathErrors.push(rule(value));
+          });
+        });
+
+        return [...acc, ...pathErrors].filter(error => !!error);
+      }, []);
+
+      return messages;
+    },
+  },
+  computed: {
+    // fvExtraRules allows you to create rules that might be specific to a form inside of that form component and pass them into the mixin's logic. fvExtraRules needs to return an object with a validation rule function in each key.
+    // This is a computed property as returning functions in the data props is not considered a best practice
+    fvExtraRules() {
+      return {};
+    },
+    // rulesets is a combination of the rules defined in the fvFormRuleSets array and the modelValidationRules in the model. Theoretically, a form could just use the rulesets defined in the model however in practice this can be limiting
+    fvRulesets() {
+      const nullValidator = () => undefined;
+
+      return [
+        ...this.fvFormRuleSets.map((ruleset) => {
+          const formRules = {
+            ...formRulesGenerator(this.$store.getters['i18n/t'], { displayKey: ruleset?.translationKey ? this.$store.getters['i18n/t'](ruleset.translationKey) : 'Value' }),
+            ...this.fvExtraRules
+          };
+
+          return {
+            ...ruleset,
+            rules:               ruleset.rules.map(rule => formRules[rule] || nullValidator),
+            formValidationRule: true
+          };
+        }),
+        ...(this?.value?.modelValidationRules || []).map(rule => ({
+          ...rule,
+          formValidationRule: false
+        }))
+      ];
+    },
+    fvUnreportedValidationErrors() { // if either the fvFormRuleSets or the modelValidationRules throw an error and the associated path isn't in the reportValidationPaths then it'll show up here.
+      // useful for throwing unreported errors into a generic banner
+      const paths = this.fvRulesets
+        .filter(ruleset => !!ruleset.formValidationRule && !this.fvReportedValidationPaths.includes(ruleset.path))
+        .map(ruleset => ruleset.path);
+
+      const formErrors = this.fvGetPathErrors(paths);
+
+      const modelErrors = this.value.customValidationErrors(this.value, this.fvReportedValidationPaths); // the model already has a means of producing errors, not reinventing the wheel... yet...
+
+      return [...formErrors, ...modelErrors, ...(this.errors || [])];
+    },
+    fvValidationErrors() { // checks for any and all errors, regardless of being bound, from the model, or from the form
+      const paths = this.fvRulesets.filter(ruleset => !!ruleset.formValidationRule).map(ruleset => ruleset.path);
+      const formErrors = this.fvGetPathErrors(paths);
+      const modelErrors = this.value.customValidationErrors(this.value); // the model already has a means of producing errors, not reinventing the wheel... yet...
+
+      return [...formErrors, ...modelErrors];
+    },
+    fvFormIsValid() {
+      return this.fvValidationErrors.length === 0;
+    }
+  }
+};

package/mixins/harvester-vm/index.js

@@ -1,10 +1,12 @@
+import YAML from 'yaml';
 import jsyaml from 'js-yaml';
 import isEqual from 'lodash/isEqual';
 import isEmpty from 'lodash/isEmpty';
 import difference from 'lodash/difference';
 
 import { sortBy } from '@shell/utils/sort';
-import { clone, set } from '@shell/utils/object';
+import { set } from '@shell/utils/object';
+
 import { allHash } from '@shell/utils/promise';
 import { randomStr } from '@shell/utils/string';
 import { base64Decode } from '@shell/utils/crypto';
@@ -131,7 +133,7 @@ export default {
       accessCredentials:  [],
       efiEnabled:         false,
       secureBoot:         false,
-      userDataTemplateId: ''
+      userDataTemplateId: '',
     };
   },
 
@@ -515,7 +517,7 @@ export default {
       }
 
       if (!disks.find( D => D.name === 'cloudinitdisk')) {
-        if (this.networkScript || this.userScript || this.sshKey.length > 0) {
+        if (!this.isWindows) {
           disks.push({
             name: 'cloudinitdisk',
             disk: { bus: 'virtio' }
@@ -697,44 +699,43 @@ export default {
 
     getInitUserData(config) {
       const _QGA_JSON = this.getMatchQGA(config.osType);
+
       const out = jsyaml.dump(_QGA_JSON);
 
-      return out.startsWith('#cloud-config') ? out : `#cloud-config\n${ out }`;
+      return `#cloud-config\n${ out }`;
     },
 
+    /**
+     * Generate user data yaml which is decide by the "Install guest agent",
+     * "OS type", "SSH Keys" and user input.
+     * @param config
+     */
     getUserData(config) {
-      const { returnType = 'string' } = config;
-
-      let userDataJson = this.convertToJson(this.userScript) || {};
-
-      const sshAuthorizedKeys = userDataJson?.ssh_authorized_keys || [];
-
-      if (userDataJson && sshAuthorizedKeys) {
-        const sshList = new Set([...this.getSSHListValue(this.sshKey), ...sshAuthorizedKeys]);
-
-        userDataJson.ssh_authorized_keys = [...sshList];
-      } else {
-        userDataJson.ssh_authorized_keys = this.getSSHListValue(this.sshKey);
-      }
-
-      if (userDataJson.ssh_authorized_keys && userDataJson.ssh_authorized_keys.length === 0) {
-        delete userDataJson.ssh_authorized_keys;
-      }
+      try {
+        // https://github.com/eemeli/yaml/issues/136
+        let userDataDoc = this.userScript ? YAML.parseDocument(this.userScript) : YAML.parseDocument({});
 
-      userDataJson = config.installAgent ? this.mergeQGA({ userDataJson: clone(userDataJson), ...config }) : this.deleteQGA({ userDataJson, ...config });
+        const allSSHAuthorizedKeys = this.mergeSSHAuthorizedKeys(this.userScript);
 
-      if (returnType === 'string') {
-        const out = jsyaml.dump(userDataJson);
+        if (allSSHAuthorizedKeys.length > 0) {
+          userDataDoc.setIn(['ssh_authorized_keys'], allSSHAuthorizedKeys);
+        } else if (YAML.isCollection(userDataDoc.getIn('ssh_authorized_keys'))) {
+          userDataDoc.deleteIn(['ssh_authorized_keys']);
+        }
 
-        const outValue = out.replace(/[\r\n]/g, '').replace(/\ +/g, '');
+        userDataDoc = config.installAgent ? this.mergeQGA({ userDataDoc, ...config }) : this.deleteQGA({ userDataDoc, ...config });
+        const userDataYaml = userDataDoc.toString();
 
-        if (outValue === "''") {
+        if (userDataYaml === '{}\n') {
+          // When the YAML parsed value is '{}\n', it means that the userData is empty, then undefined is returned.
           return undefined;
         }
 
-        return `#cloud-config\n${ out }`;
-      } else {
-        return userDataJson;
+        return userDataYaml;
+      } catch (e) {
+        console.error('Error: Unable to parse yaml document', e); // eslint-disable-line no-console
+
+        return this.userScript;
       }
     },
 
@@ -800,6 +801,8 @@ export default {
         if (image) {
           out.spec.storageClassName = `longhorn-${ image.metadata.name }`;
           out.metadata.annotations = { [HCI_ANNOTATIONS.IMAGE_ID]: image.id };
+        } else if (this.resource === HCI.VM_VERSION) {
+          out.metadata.annotations = { [HCI_ANNOTATIONS.IMAGE_ID]: '' };
         }
 
         break;
@@ -823,20 +826,6 @@ export default {
         _interface.macAddress = R.macAddress;
       }
 
-      // TODO: delete
-      if (R.ports && R.type === 'masquerade') {
-        const ports = [];
-
-        for (const item of R.ports) {
-          ports.push({
-            ...item,
-            port: parseInt(item.port)
-          });
-        }
-
-        _interface.ports = ports;
-      }
-
       _interface.model = R.model;
       _interface.name = R.name;
 
@@ -863,24 +852,62 @@ export default {
       this.networkScript = value;
     },
 
+    mergeSSHAuthorizedKeys(yaml) {
+      try {
+        const sshAuthorizedKeys = YAML.parseDocument(yaml)
+          .get('ssh_authorized_keys')
+          ?.toJSON() || [];
+
+        const sshList = this.getSSHListValue(this.sshKey);
+
+        return sshAuthorizedKeys.length ? [...new Set([...sshList, ...sshAuthorizedKeys])] : sshList;
+      } catch (e) {
+        return [];
+      }
+    },
+
+    /**
+     * @param paths A Object path, e.g. 'a.b.c' => ['a', 'b', 'c']. Refer to https://eemeli.org/yaml/#scalar-values
+     * @returns
+     */
+    deleteYamlDocProp(doc, paths) {
+      try {
+        const item = doc.getIn([])?.items[0];
+        const key = item?.key;
+        const hasCloudConfigComment = !!key?.commentBefore?.includes('cloud-config');
+        const isMatchProp = key.source === paths[paths.length - 1];
+
+        if (key && hasCloudConfigComment && isMatchProp) {
+          // Comments are mounted on the next node and we should not delete the node containing cloud-config
+        } else {
+          doc.deleteIn(paths);
+        }
+      } catch (e) {}
+    },
+
     mergeQGA(config) {
-      const { userDataJson, osType } = config;
+      const { osType, userDataDoc } = config;
       const _QGA_JSON = this.getMatchQGA(osType);
+      const userDataYAML = userDataDoc.toString();
+      const userDataJSON = YAML.parse(userDataYAML);
+      let packages = userDataJSON?.packages || [];
+      let runcmd = userDataJSON?.runcmd || [];
+
+      userDataDoc.setIn(['package_update'], true);
 
-      userDataJson.package_update = true;
-      if (Array.isArray(userDataJson.packages)) {
-        if (!userDataJson.packages.includes('qemu-guest-agent')) {
-          userDataJson.packages.push('qemu-guest-agent');
+      if (Array.isArray(packages)) {
+        if (!packages.includes('qemu-guest-agent')) {
+          packages.push('qemu-guest-agent');
         }
       } else {
-        userDataJson.packages = QGA_JSON.packages;
+        packages = QGA_JSON.packages;
       }
 
-      if (Array.isArray(userDataJson.runcmd)) {
+      if (Array.isArray(runcmd)) {
         let findIndex = -1;
-        const hasSameRuncmd = userDataJson.runcmd.find( S => Array.isArray(S) && S.join('-') === _QGA_JSON.runcmd[0].join('-'));
+        const hasSameRuncmd = runcmd.find( S => Array.isArray(S) && S.join('-') === _QGA_JSON.runcmd[0].join('-'));
 
-        const hasSimilarRuncmd = userDataJson.runcmd.find( (S, index) => {
+        const hasSimilarRuncmd = runcmd.find( (S, index) => {
           if (Array.isArray(S) && S.join('-') === this.getSimilarRuncmd(osType).join('-')) {
             findIndex = index;
 
@@ -891,61 +918,78 @@ export default {
         });
 
         if (hasSimilarRuncmd) {
-          userDataJson.runcmd[findIndex] = _QGA_JSON.runcmd[0];
+          runcmd[findIndex] = _QGA_JSON.runcmd[0];
         } else if (!hasSameRuncmd) {
-          userDataJson.runcmd.push(_QGA_JSON.runcmd[0]);
+          runcmd.push(_QGA_JSON.runcmd[0]);
         }
       } else {
-        userDataJson.runcmd = _QGA_JSON.runcmd;
+        runcmd = _QGA_JSON.runcmd;
       }
 
-      return userDataJson;
+      if (packages.length > 0) {
+        userDataDoc.setIn(['packages'], packages);
+      } else {
+        userDataDoc.setIn(['packages'], []); // It needs to be set empty first, as it is possible that cloud-init comments are mounted on this node
+        this.deleteYamlDocProp(userDataDoc, ['packages']);
+        this.deleteYamlDocProp(userDataDoc, ['package_update']);
+      }
+
+      if (runcmd.length > 0) {
+        userDataDoc.setIn(['runcmd'], runcmd);
+      } else {
+        this.deleteYamlDocProp(userDataDoc, ['runcmd']);
+      }
+
+      return userDataDoc;
     },
 
     deleteQGA(config) {
-      const { userDataJson, osType, deletePackage = false } = config;
+      const { osType, userDataDoc, deletePackage = false } = config;
 
       const userDataTemplateValue = this.$store.getters['harvester/byId'](CONFIG_MAP, this.userDataTemplateId)?.data?.cloudInit || '';
 
-      if (Array.isArray(userDataJson.packages) && deletePackage) {
+      const userDataYAML = userDataDoc.toString();
+      const userDataJSON = YAML.parse(userDataYAML);
+      const packages = userDataJSON?.packages || [];
+      const runcmd = userDataJSON?.runcmd || [];
+
+      if (Array.isArray(packages) && deletePackage) {
         const templateHasQGAPackage = this.convertToJson(userDataTemplateValue);
 
-        for (let i = 0; i < userDataJson.packages.length; i++) {
-          if (userDataJson.packages[i] === 'qemu-guest-agent') {
+        for (let i = 0; i < packages.length; i++) {
+          if (packages[i] === 'qemu-guest-agent') {
             if (!(Array.isArray(templateHasQGAPackage?.packages) && templateHasQGAPackage.packages.includes('qemu-guest-agent'))) {
-              userDataJson.packages.splice(i, 1);
+              packages.splice(i, 1);
             }
           }
         }
-
-        if (userDataJson.packages?.length === 0) {
-          delete userDataJson.packages;
-        }
       }
 
-      if (Array.isArray(userDataJson.runcmd)) {
+      if (Array.isArray(runcmd)) {
         const _QGA_JSON = this.getMatchQGA(osType);
 
-        for (let i = 0; i < userDataJson.runcmd.length; i++) {
-          if (Array.isArray(userDataJson.runcmd[i]) && userDataJson.runcmd[i].join('-') === _QGA_JSON.runcmd[0].join('-')) {
-            userDataJson.runcmd.splice(i, 1);
+        for (let i = 0; i < runcmd.length; i++) {
+          if (Array.isArray(runcmd[i]) && runcmd[i].join('-') === _QGA_JSON.runcmd[0].join('-')) {
+            runcmd.splice(i, 1);
           }
         }
-
-        if (userDataJson.runcmd.length === 0) {
-          delete userDataJson.runcmd;
-        }
       }
 
-      if (!userDataJson.packages) {
-        delete userDataJson.package_update;
+      if (packages.length > 0) {
+        userDataDoc.setIn(['packages'], packages);
+      } else {
+        userDataDoc.setIn(['packages'], []);
+        this.deleteYamlDocProp(userDataDoc, ['packages']);
+        this.deleteYamlDocProp(userDataDoc, ['package_update']);
       }
 
-      if (!Object.keys(userDataJson).length > 0) {
-        return '';
+      if (runcmd.length > 0) {
+        userDataDoc.setIn(['runcmd'], runcmd);
+      } else {
+        this.deleteYamlDocProp(userDataDoc, ['runcmd']);
       }
 
-      return userDataJson;
+      return userDataDoc;
     },
 
     generateSecretName(name) {
@@ -967,7 +1011,7 @@ export default {
     },
 
     async saveSecret(vm) {
-      if (!vm?.spec || !this.secretName) {
+      if (!vm?.spec || !this.secretName || this.isWindows) {
         return true;
       }
 
@@ -989,13 +1033,8 @@ export default {
 
       try {
         if (secret) {
-          if (userData) {
-            secret.setData('userdata', userData);
-          }
-
-          if (this.networkScript) {
-            secret.setData('networkdata', this.networkScript);
-          }
+          secret.setData('userdata', userData);
+          secret.setData('networkdata', this.networkScript);
 
           await secret.save();
         }
@@ -1211,7 +1250,13 @@ export default {
           }
         });
       }
-    }
+    },
+
+    updateReserved(value = {}) {
+      const { memory } = value;
+
+      this.$set(this, 'reservedMemory', memory);
+    },
   },
 
   watch: {
@@ -1224,7 +1269,7 @@ export default {
 
           const oldImageId = old[0]?.image;
 
-          if (this.isCreate && oldImageId === imageId) {
+          if (this.isCreate && oldImageId === imageId && imageId) {
             this.osType = osType;
           }
         }
@@ -1282,8 +1327,7 @@ export default {
         }
         this.deleteAgent = true;
         this.deletePackage = false;
-      },
-      immediate: true
+      }
     },
 
     osType(neu) {