@rancher/shell 0.1.0 → 0.1.1

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

@@ -7,21 +7,33 @@ import { ucFirst } from '@shell/utils/string';
 import { compare } from '@shell/utils/version';
 import { AS, MODE, _VIEW, _YAML } from '@shell/config/query-params';
 
+/**
+ * Class representing Cluster resource.
+ * @extends SteveModal
+ */
 export default class ProvCluster extends SteveModel {
   get details() {
     const out = [
       {
-        label:   'Provisioner',
+        label:   this.t('cluster.detail.provisioner'),
         content: this.provisionerDisplay || this.t('generic.none'),
       },
       {
-        label:   'Machine Provider',
+        label:   this.t('cluster.detail.machineProvider'),
         content: this.machineProvider ? this.machineProviderDisplay : null,
       },
       {
-        label:   'Kubernetes Version',
+        label:   this.t('cluster.detail.kubernetesVersion'),
         content: this.kubernetesVersion,
       },
+      {
+        label:   this.t('cluster.detail.machinePools'),
+        content: this.pools.length,
+      },
+      {
+        label:   this.t('cluster.detail.machines'),
+        content: this.desired,
+      },
     ].filter(x => !!x.content);
 
     if (!this.machineProvider) {
@@ -33,13 +45,19 @@ export default class ProvCluster extends SteveModel {
     return out;
   }
 
-  get availableActions() {
-    // No actions for Harvester clusters
-    if (this.isHarvester) {
-      return [];
+  // using this computed because on the provisioning cluster we are
+  // displaying the oldest age between provisioning.cluster and management.cluster
+  // so that on a version upgrade of Rancher (ex: 2.5.x to 2.6.x)
+  // we can have the correct age of the cluster displayed on the UI side
+  get creationTimestamp() {
+    const provCreationTimestamp = Date.parse(this.metadata?.creationTimestamp);
+    const mgmtCreationTimestamp = Date.parse(this.mgmt?.metadata?.creationTimestamp);
+
+    if (mgmtCreationTimestamp && mgmtCreationTimestamp < provCreationTimestamp) {
+      return this.mgmt?.metadata?.creationTimestamp;
     }
 
-    return this._availableActions;
+    return super.creationTimestamp;
   }
 
   get _availableActions() {
@@ -60,6 +78,17 @@ export default class ProvCluster extends SteveModel {
 
     const canSnapshot = ready && ((this.isRke2 && this.canUpdate) || (this.isRke1 && this.mgmt?.hasAction('backupEtcd')));
 
+    const clusterTemplatesSchema = this.$getters['schemaFor']('management.cattle.io.clustertemplate');
+    let canUpdateClusterTemplate = false;
+
+    if (clusterTemplatesSchema && (clusterTemplatesSchema.resourceMethods.includes('blocked-PUT') || clusterTemplatesSchema.resourceMethods.includes('PUT'))) {
+      canUpdateClusterTemplate = true;
+    }
+
+    const normanClusterSaveTemplateAction = !!this.normanCluster?.actions?.saveAsTemplate;
+
+    const canSaveRKETemplate = this.isRke1 && this.mgmt?.status?.driver === 'rancherKubernetesEngine' && !this.mgmt?.spec?.clusterTemplateName && this.hasLink('update') && canUpdateClusterTemplate && normanClusterSaveTemplateAction;
+
     const actions = [
       // Note: Actions are not supported in the Steve API, so we check
       // available actions for RKE1 clusters, but not RKE2 clusters.
@@ -75,6 +104,12 @@ export default class ProvCluster extends SteveModel {
         icon:       'icon icon-download',
         bulkable:   true,
         enabled:    this.mgmt?.hasAction('generateKubeconfig') && ready,
+      }, {
+        action:     'copyKubeConfig',
+        label:      this.t('cluster.copyConfig'),
+        bulkable:   false,
+        enabled:    this.mgmt?.hasAction('generateKubeconfig') && ready,
+        icon:       'icon icon-copy',
       }, {
         action:     'snapshotAction',
         label:      this.$rootGetters['i18n/t']('nav.takeSnapshot'),
@@ -96,18 +131,29 @@ export default class ProvCluster extends SteveModel {
         action:     'rotateEncryptionKey',
         label:      this.$rootGetters['i18n/t']('nav.rotateEncryptionKeys'),
         icon:       'icon icon-refresh',
-        // Disabling encryption key rotation for RKE2 for now because it was removed from v2.6.5
-        enabled:    (this.isRke1 && this.mgmt?.hasAction('rotateEncryptionKey') && ready) // || canEditRKE2cluster
+        enabled:    canEditRKE2cluster || (this.isRke1 && this.mgmt?.hasAction('rotateEncryptionKey') && ready)
       }, {
         action:     'saveAsRKETemplate',
         label:      this.$rootGetters['i18n/t']('nav.saveAsRKETemplate'),
         icon:       'icon icon-folder',
-        enabled:    this.isRke1 && this.mgmt?.status?.driver === 'rancherKubernetesEngine' && !this.mgmt?.spec?.clusterTemplateName && this.hasLink('update'),
+        enabled:    canSaveRKETemplate,
       }, { divider: true }];
 
     return actions.concat(out);
   }
 
+  get normanCluster() {
+    const name = this.status?.clusterName;
+
+    if ( !name ) {
+      return null;
+    }
+
+    const out = this.$rootGetters['rancher/byId'](NORMAN.CLUSTER, name);
+
+    return out;
+  }
+
   goToViewYaml() {
     let location;
 
@@ -128,6 +174,10 @@ export default class ProvCluster extends SteveModel {
     this.currentRouter().push(location);
   }
 
+  get canDelete() {
+    return super.canDelete && this.stateObj.name !== 'removing';
+  }
+
   get canEditYaml() {
     if (!this.isRke2) {
       return false;
@@ -136,7 +186,17 @@ export default class ProvCluster extends SteveModel {
     return super.canEditYaml;
   }
 
+  get isAKS() {
+    return this.provisioner === 'AKS';
+  }
+
+  get isEKS() {
+    return this.provisioner === 'EKS';
+  }
+
   get isImported() {
+    // As of Rancher v2.6.7, this returns false for imported K3s clusters,
+    // in which this.provisioner is `k3s`.
     return this.provisioner === 'imported';
   }
 
@@ -152,7 +212,13 @@ export default class ProvCluster extends SteveModel {
     return false;
   }
 
+  get confirmRemove() {
+    return true;
+  }
+
   get isImportedK3s() {
+    // As of Rancher v2.6.7, this returns false for imported K3s clusters,
+    // in which this.provisioner is `k3s`.
     return this.isImported && this.mgmt?.status?.provider === 'k3s';
   }
 
@@ -188,13 +254,17 @@ export default class ProvCluster extends SteveModel {
     return out;
   }
 
+  get isReady() {
+    return !!this.mgmt?.isReady;
+  }
+
   waitForProvisioner(timeout, interval) {
     return this.waitForTestFn(() => {
       return !!this.provisioner;
     }, `set provisioner`, timeout, interval);
   }
 
-  waitForMgmt(timeout, interval) {
+  waitForMgmt(timeout = 60000, interval) {
     return this.waitForTestFn(() => {
       // `this` instance isn't getting updated with `status.clusterName`
       // Workaround - Get fresh copy from the store
@@ -202,7 +272,7 @@ export default class ProvCluster extends SteveModel {
       const name = this.status?.clusterName || pCluster?.status?.clusterName;
 
       return name && !!this.$rootGetters['management/byId'](MANAGEMENT.CLUSTER, name);
-    }, `mgmt cluster create`, timeout, interval);
+    }, this.$rootGetters['i18n/t']('cluster.managementTimeout'), timeout, interval);
   }
 
   get provisioner() {
@@ -406,6 +476,15 @@ export default class ProvCluster extends SteveModel {
     return this.mgmt?.generateKubeConfig();
   }
 
+  async copyKubeConfig() {
+    await this.mgmt?.copyKubeConfig();
+
+    this.$dispatch('growl/success', {
+      title:   this.t('cluster.copiedConfig'),
+      timeout: 3000,
+    }, { root: true });
+  }
+
   downloadKubeConfig() {
     return this.mgmt?.downloadKubeConfig();
   }

package/models/rke.cattle.io.etcdsnapshot.js

@@ -66,4 +66,8 @@ export default class EtcdBackup extends NormanModel {
 
     return trans || error ? fileMessage || ucFirst(message) : '';
   }
+
+  get backupLocation() {
+    return this.metadata?.annotations?.['etcdsnapshot.rke.io/storage'];
+  }
 }

package/models/service.js

@@ -98,11 +98,17 @@ export default class extends SteveModel {
       });
     }
 
-    if (loadBalancerIP && this.serviceType === 'LoadBalancer') {
-      out.push({
-        label:   this.t('servicesPage.ips.loadBalancerIp.label'),
-        content: loadBalancerIP
-      });
+    if (this.serviceType === 'LoadBalancer') {
+      const statusIps = this.status.loadBalancer?.ingress?.map(ingress => ingress.hostname || ingress.ip).join(', ');
+
+      const loadbalancerInfo = loadBalancerIP || statusIps || '';
+
+      if (loadbalancerInfo) {
+        out.push({
+          label:   this.t('servicesPage.ips.loadBalancer.label'),
+          content: loadbalancerInfo
+        });
+      }
     }
 
     if (externalName) {

package/models/storage.k8s.io.storageclass.js

@@ -79,9 +79,22 @@ export default class extends SteveModel {
   }
 
   updateDefault(value) {
+    // Update model so that the list reflects the change straight away
     this.setAnnotation(STORAGE.DEFAULT_STORAGE_CLASS, value.toString());
     this.setAnnotation(STORAGE.BETA_DEFAULT_STORAGE_CLASS, value.toString());
-    this.save();
+
+    // Patch the annotations rather than saving the whole object, as ssome storage classes
+    // won't allow the complete object to be saved again
+    const data = {
+      metadata: {
+        annotations: {
+          [STORAGE.DEFAULT_STORAGE_CLASS]:      value.toString(),
+          [STORAGE.BETA_DEFAULT_STORAGE_CLASS]: value.toString()
+        }
+      }
+    };
+
+    return this.patch(data, {}, true, true);
   }
 
   setDefault() {

package/models/workload.js

@@ -7,7 +7,7 @@ import { clone, get, set } from '@shell/utils/object';
 import day from 'dayjs';
 import SteveModel from '@shell/plugins/steve/steve-class';
 import { shortenedImage } from '@shell/utils/string';
-import { convertSelectorObj, matching } from '@shell/utils/selector';
+import { convertSelectorObj, matching, matches } from '@shell/utils/selector';
 import { SEPARATOR } from '@shell/components/DetailTop';
 
 export default class Workload extends SteveModel {
@@ -272,6 +272,7 @@ export default class Workload extends SteveModel {
         required:       true,
         type:           'string',
         validators:     ['cronSchedule'],
+        translationKey: 'workload.cronSchedule'
       });
     }
 
@@ -770,7 +771,11 @@ export default class Workload extends SteveModel {
     const podRelationship = relationships.filter(relationship => relationship.toType === POD)[0];
 
     if (podRelationship) {
-      return this.$getters['matching'](POD, podRelationship.selector).filter(pod => pod?.metadata?.namespace === this.metadata.namespace);
+      const pods = this.$getters['podsByNamespace'](this.metadata.namespace);
+
+      return pods.filter((obj) => {
+        return matches(obj, podRelationship.selector);
+      });
     } else {
       return [];
     }

package/nuxt.config.js

@@ -2,10 +2,11 @@ import fs from 'fs';
 import path from 'path';
 import serveStatic from 'serve-static';
 import webpack from 'webpack';
+
 import { STANDARD } from './config/private-label';
+import { generateDynamicTypeImport } from './pkg/auto-import';
 import { directiveSsr as t } from './plugins/i18n';
 import { trimWhitespaceSsr as trimWhitespace } from './plugins/trim-whitespace';
-import { generateDynamicTypeImport } from './pkg/auto-import';
 
 const createProxyMiddleware = require('http-proxy-middleware');
 
@@ -21,6 +22,8 @@ export default function(dir, _appConfig) {
   let SHELL = 'node_modules/@rancher/shell';
   let SHELL_ABS = path.join(dir, 'node_modules/@rancher/shell');
   let NUXT_SHELL = '~~node_modules/@rancher/shell';
+  let COMPONENTS_DIR = path.join(SHELL_ABS, 'rancher-components');
+  let typescript = {};
 
   // If we have a local folder named 'shell' then use that rather than the one in node_modules
   // This will be the case in the main dashboard repository.
@@ -28,6 +31,9 @@ export default function(dir, _appConfig) {
     SHELL = './shell';
     SHELL_ABS = path.join(dir, 'shell');
     NUXT_SHELL = '~~/shell';
+    COMPONENTS_DIR = path.join(dir, 'pkg', 'rancher-components', 'src', 'components');
+
+    typescript = { typeCheck: { eslint: { files: './shell/**/*.{ts,js,vue}' } } };
   }
 
   // ===============================================================================================
@@ -42,7 +48,8 @@ export default function(dir, _appConfig) {
   const autoLoadPackages = [];
   const watcherIgnores = [
     /.shell/,
-    /dist-pkg/
+    /dist-pkg/,
+    /scripts\/standalone/
   ];
 
   autoLoad.forEach((pkg) => {
@@ -303,9 +310,10 @@ export default function(dir, _appConfig) {
     },
 
     alias: {
-      '~shell': SHELL_ABS,
-      '@shell': SHELL_ABS,
-      '@pkg':   path.join(dir, 'pkg'),
+      '~shell':      SHELL_ABS,
+      '@shell':      SHELL_ABS,
+      '@pkg':        path.join(dir, 'pkg'),
+      '@components': COMPONENTS_DIR,
     },
 
     modulesDir: [
@@ -351,7 +359,10 @@ export default function(dir, _appConfig) {
         useShortDoctype:            !dev
       },
 
-      filenames: { chunk: ({ isDev }) => isDev ? '[name].js' : '[name].[contenthash].js' },
+      // Don't include `[name]` in prod file names
+      // This flattens out the folder structure (avoids crazy paths like `_nuxt/pages/account/create-key/pages/c/_cluster/_product/_resource/_id/pages/c/_cluster/_product/_resource`)
+      // and uses nuxt's workaround to address issues with filenames containing `//` (see https://github.com/nuxt/nuxt.js/issues/8274)
+      filenames: { chunk: ({ isDev }) => isDev ? '[name].js' : '[contenthash].js' },
       // @TODO figure out how to split chunks up better, by product
       // optimization: {
       //   splitChunks: {
@@ -443,6 +454,13 @@ export default function(dir, _appConfig) {
           },
         });
 
+        // Ensure there is a fallback for browsers that don't support web workers
+        config.module.rules.unshift({
+          test:    /web-worker.[a-z-]+.js/i,
+          loader:  'worker-loader',
+          options: { inline: 'fallback' },
+        });
+
         // Prevent warning in log with the md files in the content folder
         config.module.rules.push({
           test:    /\.md$/,
@@ -553,6 +571,7 @@ export default function(dir, _appConfig) {
       path.join(NUXT_SHELL, 'plugins/trim-whitespace'),
       { src: path.join(NUXT_SHELL, 'plugins/extend-router') },
       { src: path.join(NUXT_SHELL, 'plugins/lookup'), ssr: false },
+      { src: path.join(NUXT_SHELL, 'plugins/console'), ssr: false },
       { src: path.join(NUXT_SHELL, 'plugins/int-number'), ssr: false },
       { src: path.join(NUXT_SHELL, 'plugins/nuxt-client-init'), ssr: false },
       path.join(NUXT_SHELL, 'plugins/replaceall'),
@@ -607,7 +626,8 @@ export default function(dir, _appConfig) {
       ]
     },
 
-    typescript: { typeCheck: { eslint: { files: './**/*.{ts,js,vue}' } } },
+    // Typescript eslint
+    typescript,
 
     ssr: false,
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
@@ -55,13 +55,15 @@
     "@vue/cli-plugin-babel": "^4.5.15",
     "@vue/cli-plugin-typescript": "^4.5.15",
     "@vue/cli-service": "^4.5.13",
-    "@vue/test-utils": "^1.0.0-beta.27",
+    "@vue/test-utils": "1.2.1",
+    "@vue/vue2-jest": "^27.0.0",
     "add": "^2.0.6",
     "ansi_up": "^5.0.0",
     "babel-eslint": "^10.0.1",
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-preset-vue": "^2.0.2",
     "browser-env": "^3.2.6",
+    "comlink": "^4.3.1",
     "cookie": "^0.4.0",
     "cookie-universal-nuxt": "^2.0.17",
     "core-js": "^3.20.3",
@@ -81,17 +83,20 @@
     "eslint-config-standard": ">=12.0.0",
     "eslint-import-resolver-node": "0.3.4",
     "eslint-module-utils": "2.6.1",
-    "eslint-plugin-ava": "^9.0.0",
     "eslint-plugin-cypress": "^2.11.3",
+    "eslint-plugin-jest": "^23.6.0",    
     "eslint-plugin-import": "2.23.4",
-    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-n": "^15.2.0",
     "eslint-plugin-vue": "7.14.0",
     "event-target-shim": "^5.0.1",
     "express": "^4.17.1",
     "file-saver": "^2.0.2",
+    "frontmatter-markdown-loader": "^3.6.3",
     "identicon.js": "^2.3.3",
     "intl-messageformat": "^7.7.2",
     "is-url": "^1.2.4",
+    "jest": "^27.5.1",
+    "jest-serializer-vue": "^2.0.2",
     "jexl": "^2.2.2",
     "jquery": "^3.5.0",
     "js-cookie": "^2.2.0",
@@ -144,18 +149,9 @@
     "xterm-addon-search": "^0.7.0",
     "xterm-addon-web-links": "^0.4.0",
     "xterm-addon-webgl": "^0.9.0",
+    "worker-loader": "^3.0.8",
     "yarn": "^1.22.11"
   },
-  "ava": {
-    "files": [
-      "test/**/*"
-    ],
-    "require": [
-      "./test/_setup.js"
-    ],
-    "tap": true,
-    "verbose": true
-  },
   "nyc": {
     "extension": [
       ".js",

package/pages/about.vue

@@ -90,7 +90,15 @@ export default {
   <Loading v-if="!settings" />
   <div v-else class="about">
     <BackLink :link="backLink" />
-    <h1 v-t="'about.title'" />
+    <div class="title-block mt-20 mb-40">
+      <h1 v-t="'about.title'" />
+      <n-link
+        :to="{ name: 'diagnostic' }"
+        class="btn role-primary"
+      >
+        {{ t('about.diagnostic.title') }}
+      </n-link>
+    </div>
     <h3>{{ t('about.versions.title') }}</h3>
     <table>
       <thead>
@@ -174,6 +182,12 @@ export default {
 
 <style lang="scss" scoped>
 .about {
+  .title-block {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
   table {
     border-collapse: collapse;
     overflow: hidden;

package/pages/account/index.vue

@@ -8,7 +8,7 @@ import Principal from '@shell/components/auth/Principal';
 import BackRoute from '@shell/mixins/back-link';
 import { mapGetters } from 'vuex';
 
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import ResourceTable from '@shell/components/ResourceTable';
 import CopyToClipboardText from '@shell/components/CopyToClipboardText';
 

package/pages/auth/login.vue

@@ -1,14 +1,14 @@
 <script>
 import { removeObject } from '@shell/utils/array';
 import { USERNAME } from '@shell/config/cookies';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import AsyncButton from '@shell/components/AsyncButton';
 import BrandImage from '@shell/components/BrandImage';
 import InfoBox from '@shell/components/InfoBox';
 import CopyCode from '@shell/components/CopyCode';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import { LOCAL, LOGGED_OUT, TIMED_OUT, _FLAGGED } from '@shell/config/query-params';
-import Checkbox from '@shell/components/form/Checkbox';
+import { Checkbox } from '@components/Form/Checkbox';
 import Password from '@shell/components/form/Password';
 import { sortBy } from '@shell/utils/sort';
 import { configType } from '@shell/models/management.cattle.io.authconfig';
@@ -291,7 +291,11 @@ export default {
             {{ t('login.loginAgain') }}
           </h4>
         </div>
-        <div v-if="firstLogin" class="first-login-message">
+        <div
+          v-if="firstLogin"
+          class="first-login-message"
+          data-testid="first-login-message"
+        >
           <InfoBox color="info">
             <t k="setup.defaultPassword.intro" :raw="true" />
 
@@ -340,6 +344,7 @@ export default {
                   id="username"
                   ref="username"
                   v-model.trim="username"
+                  data-testid="local-login-username"
                   :label="t('login.username')"
                   autocomplete="username"
                 />
@@ -349,6 +354,7 @@ export default {
                   id="password"
                   ref="password"
                   v-model="password"
+                  data-testid="local-login-password"
                   :label="t('login.password')"
                   autocomplete="password"
                 />
@@ -358,6 +364,7 @@ export default {
               <div class="col span-12 text-center">
                 <AsyncButton
                   id="submit"
+                  data-testid="login-submit"
                   type="submit"
                   :action-label="t('login.loginWithLocal')"
                   :waiting-label="t('login.loggingIn')"
@@ -372,7 +379,12 @@ export default {
             </div>
           </form>
           <div v-if="hasLocal && !showLocal" class="mt-20 text-center">
-            <a id="login-useLocal" role="button" @click="toggleLocal">
+            <a
+              id="login-useLocal"
+              data-testid="login-useLocal"
+              role="button"
+              @click="toggleLocal"
+            >
               {{ t('login.useLocal') }}
             </a>
           </div>