@rancher/shell 0.2.3 → 0.2.4

package/mixins/form-validation.js

@@ -4,32 +4,54 @@ import formRulesGenerator from '@shell/utils/validators/formRules/index';
 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
-      ]
+      /**
+       * Define the validation rules for the entire form.
+       * These should almost always be overridden in the form-component using the mixin
+       *
+       * path (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
+       * rules (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),
+       * rootObject (optional): redirects the path to the object passed here,
+       * translationKey (optional): defines the displaykey, overrides displaykeys that may otherwise be passed into the translation
+       *
+       * NOTE: path of type 'value.value' will be only 'value'
+       *
+       * Example:
+       * {
+       *   path:  'container.image',
+       *   rules: ['noSpaces', 'noPeriods'],
+       *   rootObject: { container: { image: 'name' } },
+       *   translationKey: 'Image Name',
+       * }
+       */
+      fvFormRuleSets:            [],
+      /**
+       * An array of strings that track which ruleset paths have been bound to a field for error
+       * reporting tracked in a separate 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 programmatically by using the "fvGetAndReportPathRules" method
+       */
+      fvReportedValidationPaths: []
     };
   },
 
   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
+    /**
+     * 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
+     * @param {*} path
+     * @returns
+     */
     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
+
+    /**
+     * 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
+     * @param {*} path
+     * @returns
+     */
     fvGetAndReportPathRules(path) {
       const rules = this.fvGetPathRules(path);
 
@@ -39,8 +61,16 @@ export default {
 
       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
+
+    /**
+     * 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
+     * @param {*} path
+     * @returns
+     */
+    fvGetPathValues(path) { //
+      // 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) {
@@ -49,11 +79,26 @@ export default {
 
       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
+
+    fvGetValues(val, idx, arr) {
+      return (arr.length > 1 &&
+        typeof val === 'object' &&
+        !Array.isArray(val) &&
+        val !== null ? { ...val, idx } : val
+      );
+    },
+
+    /**
+     * Gets errors from multiple paths, usually used externally to check a single path but used
+     * within the mixin to check all paths for errors
+     * @param {*} paths
+     * @returns
+     */
+    fvGetPathErrors(paths = []) {
       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));
+        const relevantValues = this.fvGetPathValues(path).map(this.fvGetValues);
 
         relevantRules.forEach((rule) => {
           relevantValues.forEach((value) => {
@@ -61,26 +106,41 @@ export default {
           });
         });
 
-        return [...acc, ...pathErrors].filter(error => !!error);
+        return [...acc, ...pathErrors].filter(Boolean);
       }, []);
 
       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 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
+     * @returns
+     */
     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
+
+    /**
+     * 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
+     * @returns
+     */
     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' }),
+            ...formRulesGenerator(
+              this.$store.getters['i18n/t'],
+              { displayKey: ruleset?.translationKey ? this.$store.getters['i18n/t'](ruleset.translationKey) : 'Value' }),
             ...this.fvExtraRules
           };
 
@@ -96,25 +156,40 @@ export default {
         }))
       ];
     },
-    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
+
+    /**
+     * 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
+     * @returns
+     */
+    fvUnreportedValidationErrors() { //
       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...
+      // the model already has a means of producing errors, not reinventing the wheel... yet...
+      const modelErrors = this.value.customValidationErrors ? this.value.customValidationErrors(this.value, this.fvReportedValidationPaths) : [];
 
       return [...formErrors, ...modelErrors, ...(this.errors || [])];
     },
-    fvValidationErrors() { // checks for any and all errors, regardless of being bound, from the model, or from the form
+
+    /**
+     * Checks for any and all errors, regardless of being bound, from the model, or from the form
+     * @returns
+     */
+    fvValidationErrors() {
       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...
+
+      // the model already has a means of producing errors, not reinventing the wheel... yet...
+      const modelErrors = this.value.customValidationErrors ? this.value.customValidationErrors(this.value) : [];
 
       return [...formErrors, ...modelErrors];
     },
+
     fvFormIsValid() {
       return this.fvValidationErrors.length === 0;
     }

package/models/clusterroletemplatebinding.js

@@ -18,10 +18,7 @@ export default class CRTB extends NormanModel {
     return this.$rootGetters['management/byId'](MANAGEMENT.ROLE_TEMPLATE, this.roleTemplateId);
   }
 
-  get steve() {
-    return this.$dispatch(`management/find`, {
-      type: MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING,
-      id:   this.id?.replace(':', '/')
-    }, { root: true });
+  get clusterroletemplatebinding() {
+    return this.$rootGetters[`management/byId`](MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING, this.id?.replace(':', '/'));
   }
 }

package/models/management.cattle.io.cluster.js

@@ -247,6 +247,12 @@ export default class MgmtCluster extends HybridModel {
     return isHarvesterCluster(this);
   }
 
+  get isHostedKubernetesProvider() {
+    const providers = ['AKS', 'EKS', 'GKE'];
+
+    return providers.includes(this.provisioner);
+  }
+
   get providerLogo() {
     const provider = this.status?.provider || 'kubernetes';
     // Only interested in the part before the period
@@ -437,7 +443,7 @@ export default class MgmtCluster extends HybridModel {
     // RKE2 cluster IDs include the name - fleet-default/cluster-name - whereas an RKE1
     // cluster has the less human readable management cluster ID in it: fleet-default/c-khk48
 
-    const verb = this.isLocal || isRKE1 ? 'to' : 'from';
+    const verb = this.isLocal || isRKE1 || this.isHostedKubernetesProvider ? 'to' : 'from';
     const from = `${ verb }Type`;
     const id = `${ verb }Id`;
 

package/models/secret.js

@@ -249,12 +249,20 @@ export default class Secret extends SteveModel {
   get certInfo() {
     const pem = base64Decode(this.data['tls.crt']);
     let issuer, notAfter, cn, sans, x;
+    const END_MARKER = '-----END CERTIFICATE-----';
 
     if (pem) {
+      const certs = pem.split(END_MARKER);
+      let first = pem;
+
+      if (certs.length > 1) {
+        first = `${ certs[0] }${ END_MARKER }`;
+      }
+
       try {
         x = new r.X509();
 
-        x.readCertPEM(pem);
+        x.readCertPEM(first);
         const issuerString = x.getIssuerString();
 
         issuer = issuerString.slice(issuerString.indexOf('CN=') + 3);

package/models/workload.js

@@ -499,7 +499,7 @@ export default class Workload extends WorkloadService {
     return ports;
   }
 
-  get showAsWorkload() {
+  get ownedByWorkload() {
     const types = Object.values(WORKLOAD_TYPES);
 
     if (this.metadata?.ownerReferences) {
@@ -507,12 +507,12 @@ export default class Workload extends WorkloadService {
         const have = (`${ owner.apiVersion.replace(/\/.*/, '') }.${ owner.kind }`).toLowerCase();
 
         if ( types.includes(have) ) {
-          return false;
+          return true;
         }
       }
     }
 
-    return true;
+    return false;
   }
 
   get isFromNorman() {

package/nuxt.config.js

@@ -33,6 +33,13 @@ const pl = process.env.PL || STANDARD;
 const commit = process.env.COMMIT || 'head';
 const perfTest = (process.env.PERF_TEST === 'true'); // Enable performance testing when in dev
 
+// Allow skipping of eslint check
+// 0 = Skip browser and console checks
+// 1 = Skip browser check
+// 2 = Do not skip any checks
+const skipEsLintCheckStr = (process.env.SKIP_ESLINT || '');
+const skipEsLintCheck = parseInt(skipEsLintCheckStr, 10) || 2;
+
 // ===============================================================================================
 // Nuxt configuration
 // ===============================================================================================
@@ -56,7 +63,10 @@ export default function(dir, _appConfig) {
     NUXT_SHELL = '~~/shell';
     COMPONENTS_DIR = path.join(dir, 'pkg', 'rancher-components', 'src', 'components');
 
-    typescript = { typeCheck: { eslint: { files: './shell/**/*.{ts,js,vue}' } } };
+    // Skip eslint check that runs as part of nuxt build in the console
+    if (skipEsLintCheck > 0) {
+      typescript = { typeCheck: { eslint: { files: './shell/**/*.{ts,js,vue}' } } };
+    }
   }
 
   // ===============================================================================================
@@ -259,6 +269,22 @@ export default function(dir, _appConfig) {
 
   console.log(`API: '${ api }'. Env: '${ rancherEnv }'`); // eslint-disable-line no-console
 
+  // Nuxt modules
+  let nuxtModules = [
+    '@nuxtjs/proxy',
+    '@nuxtjs/axios',
+    '@nuxtjs/eslint-module',
+    '@nuxtjs/webpack-profile',
+    'cookie-universal-nuxt',
+    'portal-vue/nuxt',
+    path.join(NUXT_SHELL, 'plugins/dashboard-store/rehydrate-all'),
+  ];
+
+  // Remove es-lint nuxt module if env var configures this
+  if (skipEsLintCheck < 2) {
+    nuxtModules = nuxtModules.filter(s => !s.includes('eslint-module'));
+  }
+
   const config = {
     dev,
 
@@ -545,15 +571,7 @@ export default function(dir, _appConfig) {
     },
 
     // Nuxt modules
-    modules: [
-      '@nuxtjs/proxy',
-      '@nuxtjs/axios',
-      '@nuxtjs/eslint-module',
-      '@nuxtjs/webpack-profile',
-      'cookie-universal-nuxt',
-      'portal-vue/nuxt',
-      path.join(NUXT_SHELL, 'plugins/dashboard-store/rehydrate-all'),
-    ],
+    modules: nuxtModules,
 
     // Vue plugins
     plugins: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
@@ -113,7 +113,7 @@
     "nyc": "15.1.0",
     "papaparse": "5.3.0",
     "portal-vue": "2.1.7",
-    "rancher-icons": "rancher/icons#v2.0.3",
+    "rancher-icons": "rancher/icons#v2.0.8",
     "require-extension-hooks": "0.3.3",
     "require-extension-hooks-babel": "1.0.0",
     "require-extension-hooks-vue": "3.0.0",

package/pages/about.vue

@@ -88,7 +88,10 @@ export default {
 
 <template>
   <Loading v-if="!settings" />
-  <div v-else class="about">
+  <div
+    v-else
+    class="about"
+  >
     <BackLink :link="backLink" />
     <div class="title-block mt-20 mb-40">
       <h1 v-t="'about.title'" />
@@ -109,28 +112,44 @@ export default {
       </thead>
       <tr v-if="rancherVersion">
         <td>
-          <a href="https://github.com/rancher/rancher" target="_blank" rel="nofollow noopener noreferrer">
+          <a
+            href="https://github.com/rancher/rancher"
+            target="_blank"
+            rel="nofollow noopener noreferrer"
+          >
             {{ appName }}
           </a>
         </td><td>{{ rancherVersion.value }}</td>
       </tr>
       <tr v-if="cliVersion">
         <td>
-          <a href="https://github.com/rancher/cli" target="_blank" rel="nofollow noopener noreferrer">
+          <a
+            href="https://github.com/rancher/cli"
+            target="_blank"
+            rel="nofollow noopener noreferrer"
+          >
             {{ appName }} {{ t("about.versions.cli") }}
           </a>
         </td><td>{{ cliVersion.value }}</td>
       </tr>
       <tr v-if="helmVersion">
         <td>
-          <a href="https://github.com/rancher/helm" target="_blank" rel="nofollow noopener noreferrer">
+          <a
+            href="https://github.com/rancher/helm"
+            target="_blank"
+            rel="nofollow noopener noreferrer"
+          >
             {{ t("about.versions.helm") }}
           </a>
         </td><td>{{ helmVersion.value }}</td>
       </tr>
       <tr v-if="dockerMachineVersion">
         <td>
-          <a href="https://github.com/rancher/machine" target="_blank" rel="nofollow noopener noreferrer">
+          <a
+            href="https://github.com/rancher/machine"
+            target="_blank"
+            rel="nofollow noopener noreferrer"
+          >
             {{ t("about.versions.machine") }}
           </a>
         </td><td>{{ dockerMachineVersion.value }}</td>
@@ -146,14 +165,20 @@ export default {
         {{ t('about.downloadImageList.title') }}
       </h3>
       <table>
-        <tr v-for="d in downloadImageList" :key="d.icon">
+        <tr
+          v-for="d in downloadImageList"
+          :key="d.icon"
+        >
           <td>
             <div class="os">
               <i :class="`icon ${d.icon} mr-5`" /> {{ t(d.label) }}
             </div>
           </td>
           <td>
-            <a v-if="d.imageList" @click="d.imageList">
+            <a
+              v-if="d.imageList"
+              @click="d.imageList"
+            >
               {{ t('asyncButton.download.action') }}
             </a>
           </td>
@@ -165,14 +190,21 @@ export default {
         {{ t('about.downloadCLI.title') }}
       </h3>
       <table>
-        <tr v-for="d in downloadCli" :key="d.icon" class="link">
+        <tr
+          v-for="d in downloadCli"
+          :key="d.icon"
+          class="link"
+        >
           <td>
             <div class="os">
               <i :class="`icon ${d.icon} mr-5`" /> {{ t(d.label) }}
             </div>
           </td>
           <td>
-            <a v-if="d.cliLink" :href="d.cliLink">{{ d.cliFile }}</a>
+            <a
+              v-if="d.cliLink"
+              :href="d.cliLink"
+            >{{ d.cliFile }}</a>
           </td>
         </tr>
       </table>

package/pages/account/index.vue

@@ -148,7 +148,12 @@ export default {
 
     <h2 v-t="'accountAndKeys.account.title'" />
     <div class="account">
-      <Principal :key="principal.id" :value="principal.id" :use-muted="false" :show-labels="true" />
+      <Principal
+        :key="principal.id"
+        :value="principal.id"
+        :use-muted="false"
+        :show-labels="true"
+      />
       <div>
         <button
           v-if="canChangePassword"
@@ -162,7 +167,7 @@ export default {
     </div>
     <PromptChangePassword ref="promptChangePassword" />
 
-    <hr />
+    <hr>
     <div class="keys-header">
       <div>
         <h2 v-t="'accountAndKeys.apiKeys.title'" />
@@ -171,11 +176,18 @@ export default {
           <CopyToClipboardText :text="apiUrl" />
         </div>
       </div>
-      <button v-if="apiKeySchema" class="btn role-primary add mb-20" @click="addKey">
+      <button
+        v-if="apiKeySchema"
+        class="btn role-primary add mb-20"
+        @click="addKey"
+      >
         {{ t('accountAndKeys.apiKeys.add.label') }}
       </button>
     </div>
-    <div v-if="apiKeySchema" class="keys">
+    <div
+      v-if="apiKeySchema"
+      class="keys"
+    >
       <ResourceTable
         :schema="apiKeySchema"
         :rows="apiKeys"
@@ -187,7 +199,10 @@ export default {
       />
     </div>
     <div v-else>
-      <Banner color="warning" :label="t('accountAndKeys.apiKeys.notAllowed')" />
+      <Banner
+        color="warning"
+        :label="t('accountAndKeys.apiKeys.notAllowed')"
+      />
     </div>
   </div>
 </template>