@rancher/shell 0.4.0 → 0.5.0

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

@@ -8,6 +8,7 @@ import { insertAt } from '@shell/utils/array';
 import { downloadUrl } from '@shell/utils/download';
 import findLast from 'lodash/findLast';
 import HybridModel from '@shell/plugins/steve/hybrid-class';
+import { notOnlyOfRole } from '@shell/models/cluster.x-k8s.io.machine';
 
 export default class MgmtNode extends HybridModel {
   get _availableActions() {
@@ -21,11 +22,12 @@ export default class MgmtNode extends HybridModel {
     };
 
     const scaleDown = {
-      action:   'scaleDown',
-      enabled:  !!this.canScaleDown,
-      icon:     'icon icon-minus icon-fw',
-      label:    this.t('node.actions.scaleDown'),
-      bulkable: true,
+      action:     'scaleDown',
+      bulkAction: 'scaleDown',
+      enabled:    !!this.canScaleDown,
+      icon:       'icon icon-minus icon-fw',
+      label:      this.t('node.actions.scaleDown'),
+      bulkable:   true,
     };
 
     insertAt(out, 0, { divider: true });
@@ -105,12 +107,12 @@ export default class MgmtNode extends HybridModel {
     }
   }
 
-  async scaleDown(resources) {
-    const safeResources = Array.isArray(resources) ? resources : [this];
-
-    await Promise.all(safeResources.map((node) => {
-      return node.norman?.doAction('scaledown');
-    }));
+  async scaleDown(resources = this) {
+    this.$dispatch('promptModal', {
+      resources,
+      component:  'ScaleMachineDownDialog',
+      modalWidth: '450px'
+    });
   }
 
   get provisioningCluster() {
@@ -166,10 +168,12 @@ export default class MgmtNode extends HybridModel {
   }
 
   get canScaleDown() {
-    const isInOnlyPool = this.pool?.provisioningCluster?.pools?.length === 1;
-    const isOnlyNode = this.pool?.nodes?.length === 1;
+    if (!this.isEtcd && !this.isControlPlane) {
+      return true;
+    }
+
     const hasAction = this.norman?.actions?.scaledown;
 
-    return hasAction && (!isInOnlyPool || !isOnlyNode);
+    return hasAction && notOnlyOfRole(this, this.provisioningCluster?.nodes);
   }
 }

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

@@ -1,6 +1,7 @@
 import { CAPI, MANAGEMENT, NORMAN } from '@shell/config/types';
 import { sortBy } from '@shell/utils/sort';
 import HybridModel from '@shell/plugins/steve/hybrid-class';
+import { notOnlyOfRole } from '@shell/models/cluster.x-k8s.io.machine';
 
 export default class MgmtNodePool extends HybridModel {
   get nodeTemplate() {
@@ -161,6 +162,22 @@ export default class MgmtNodePool extends HybridModel {
     return this.norman?.hasLink('update');
   }
 
+  get isControlPlane() {
+    return this.spec?.controlPlane === true;
+  }
+
+  get isEtcd() {
+    return this.spec?.etcd === true;
+  }
+
+  canScaleDownPool() {
+    if (!this.isEtcd && !this.isControlPlane) {
+      return true;
+    }
+
+    return notOnlyOfRole(this, this?.provisioningCluster?.nodes);
+  }
+
   remove() {
     return this.norman?.remove();
   }

package/models/namespace.js

@@ -87,7 +87,7 @@ export default class Namespace extends SteveModel {
       return true;
     }
 
-    if ( this.metadata.name.endsWith('-system') ) {
+    if ( this.metadata.name.startsWith('cattle-') && this.metadata.name.endsWith('-system') ) {
       return true;
     }
 

package/models/pod.js

@@ -3,6 +3,7 @@ import { colorForState, stateDisplay } from '@shell/plugins/dashboard-store/reso
 import { NODE, WORKLOAD_TYPES } from '@shell/config/types';
 import { escapeHtml, shortenedImage } from '@shell/utils/string';
 import WorkloadService from '@shell/models/workload.service';
+import { deleteProperty } from '@shell/utils/object';
 
 export const WORKLOAD_PRIORITY = {
   [WORKLOAD_TYPES.DEPLOYMENT]:             1,
@@ -256,4 +257,23 @@ export default class Pod extends WorkloadService {
       return Promise.reject(e);
     });
   }
+
+  cleanForSave(data) {
+    const val = super.cleanForSave(data);
+
+    // remove fields from containers
+    val.spec?.containers?.forEach((container) => {
+      this.cleanContainerForSave(container);
+    });
+
+    // remove fields from initContainers
+    val.spec?.initContainers?.forEach((container) => {
+      this.cleanContainerForSave(container);
+    });
+
+    // This is probably added by generic workload components that shouldn't be added to pods
+    deleteProperty(val, 'spec.selector');
+
+    return val;
+  }
 }

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

@@ -180,6 +180,16 @@ export default class ProvCluster extends SteveModel {
     return out;
   }
 
+  async findNormanCluster() {
+    const name = this.status?.clusterName;
+
+    if ( !name ) {
+      return null;
+    }
+
+    return await this.$dispatch('rancher/find', { type: NORMAN.CLUSTER, id: name }, { root: true });
+  }
+
   explore() {
     const location = {
       name:   'c-cluster',
@@ -284,7 +294,7 @@ export default class ProvCluster extends SteveModel {
   }
 
   get isK3s() {
-    return this.mgmt?.status?.provider === 'k3s';
+    return this.mgmt?.status ? this.mgmt?.status.provider === 'k3s' : (this.spec?.kubernetesVersion || '').includes('k3s') ;
   }
 
   get isRke2() {
@@ -827,11 +837,11 @@ export default class ProvCluster extends SteveModel {
   get agentConfig() {
     // The one we want is the first one with no selector.
     // If there are multiple with no selector, that will fall under the unsupported message below.
-    return this.spec.rkeConfig.machineSelectorConfig.find((x) => !x.machineLabelSelector).config;
+    return this.spec.rkeConfig.machineSelectorConfig.find((x) => !x.machineLabelSelector)?.config;
   }
 
   get cloudProvider() {
-    return this.agentConfig['cloud-provider-name'];
+    return this.agentConfig?.['cloud-provider-name'];
   }
 
   get canClone() {
@@ -901,4 +911,11 @@ export default class ProvCluster extends SteveModel {
 
     return null;
   }
+
+  // JSON Paths that should be folded in the YAML editor by default
+  get yamlFolding() {
+    return [
+      'spec.rkeConfig.machinePools.dynamicSchemaSpec',
+    ];
+  }
 }

package/models/secret.js

@@ -6,6 +6,9 @@ import { SERVICE_ACCOUNT } from '@shell/config/types';
 import { set } from '@shell/utils/object';
 import { NAME as MANAGER } from '@shell/config/product/manager';
 import SteveModel from '@shell/plugins/steve/steve-class';
+import { colorForState, stateDisplay, STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
+import { diffFrom } from '@shell/utils/time';
+import day from 'dayjs';
 
 export const TYPES = {
   OPAQUE:           'Opaque',
@@ -23,7 +26,12 @@ export const TYPES = {
   RKE_AUTH_CONFIG:  'rke.cattle.io/auth-config'
 };
 
+/** Class a cert as expiring if in eight days */
+const certExpiringPeriod = 1000 * 60 * 60 * 24 * 8;
+
 export default class Secret extends SteveModel {
+  _cachedCertInfo;
+
   get hasSensitiveData() {
     return true;
   }
@@ -46,7 +54,7 @@ export default class Secret extends SteveModel {
     if (annotations[CERTMANAGER.ISSUER]) {
       return annotations[CERTMANAGER.ISSUER];
     } else if (this.isCertificate) {
-      return this.certInfo?.issuer;
+      return this.cachedCertInfo?.issuer;
     } else {
       return null;
     }
@@ -54,7 +62,7 @@ export default class Secret extends SteveModel {
 
   get notAfter() {
     if (this.isCertificate) {
-      return this.certInfo?.notAfter;
+      return this.cachedCertInfo?.notAfter;
     } else {
       return null;
     }
@@ -62,7 +70,7 @@ export default class Secret extends SteveModel {
 
   get cn() {
     if (this.isCertificate) {
-      return this.certInfo?.cn;
+      return this.cachedCertInfo?.cn;
     }
 
     return null;
@@ -80,14 +88,13 @@ export default class Secret extends SteveModel {
   // use text-warning' or 'text-error' if cert is expiring within 8 days or is expired
   get dateClass() {
     if (this.isCertificate) {
-      const eightDays = 691200000;
-
-      if (this.timeTilExpiration > eightDays ) {
-        return '';
-      } else if (this.timeTilExpiration > 0) {
+      switch (this.certState) {
+      case STATES_ENUM.EXPIRING:
         return 'text-warning';
-      } else {
+      case STATES_ENUM.EXPIRED:
         return 'text-error';
+      default:
+        return '';
       }
     }
 
@@ -248,7 +255,7 @@ export default class Secret extends SteveModel {
   // parse TLS certs and return issuer, notAfter, cn, sans
   get certInfo() {
     const pem = base64Decode(this.data['tls.crt']);
-    let issuer, notAfter, cn, sans, x;
+    let issuer, notBefore, notAfter, cn, sans, x;
     const END_MARKER = '-----END CERTIFICATE-----';
 
     if (pem) {
@@ -266,6 +273,7 @@ export default class Secret extends SteveModel {
         const issuerString = x.getIssuerString();
 
         issuer = issuerString.slice(issuerString.indexOf('CN=') + 3);
+        notBefore = r.zulutodate(x.getNotBefore());
         notAfter = r.zulutodate(x.getNotAfter());
 
         const cnString = x.getSubjectString();
@@ -281,25 +289,39 @@ export default class Secret extends SteveModel {
         sans = [];
       }
 
-      return {
-        issuer, notAfter, cn, sans
+      const certInfo = {
+        issuer, notBefore, notAfter, cn, sans
       };
+
+      return certInfo;
     }
 
     return null;
   }
 
+  get cachedCertInfo() {
+    if (!this._cachedCertInfo) {
+      this._cachedCertInfo = this.certInfo;
+    }
+
+    return this._cachedCertInfo;
+  }
+
   // use for + n more name display
   get unrepeatedSans() {
     if (this._type === TYPES.TLS ) {
-      if (this.certInfo?.sans?.filter) {
-        const commonBases = this.certInfo?.sans.filter((name) => name.indexOf('*.') === 0 || name.indexOf('www.') === 0).map((name) => name.substr(name.indexOf('.')));
-        const displaySans = removeObjects(this.certInfo?.sans, commonBases);
+      const certInfo = this.cachedCertInfo;
+
+      if (certInfo?.sans?.filter) {
+        const commonBases = certInfo?.sans
+          .filter((name) => name.indexOf('*.') === 0 || name.indexOf('www.') === 0)
+          .map((name) => name.substr(name.indexOf('.')));
+        const displaySans = removeObjects(certInfo?.sans, commonBases);
 
         return displaySans;
       }
 
-      return this.certInfo?.sans || [];
+      return certInfo?.sans?.array || certInfo?.sans || [];
     }
 
     return null;
@@ -307,16 +329,28 @@ export default class Secret extends SteveModel {
 
   get timeTilExpiration() {
     if (this._type === TYPES.TLS) {
-      const expiration = this.certInfo.notAfter;
+      const certInfo = this.cachedCertInfo;
+
+      if (!certInfo?.notAfter) {
+        return null;
+      }
+
+      const expiration = certInfo.notAfter;
       const timeThen = expiration.valueOf();
       const timeNow = Date.now();
 
-      return timeThen - timeNow;
+      const timeTilExpiration = timeThen - timeNow;
+
+      return timeTilExpiration < 0 ? 0 : timeTilExpiration;
     }
 
     return null;
   }
 
+  get timeTilExpirationDate() {
+    return this.timeTilExpiration > 0 ? this.cachedCertInfo?.notAfter?.valueOf() : null;
+  }
+
   get decodedData() {
     const out = {};
 
@@ -357,4 +391,69 @@ export default class Secret extends SteveModel {
       return 'c-cluster-product-resource';
     }
   }
+
+  get certLifetime() {
+    if (this._type === TYPES.TLS) {
+      const certInfo = this.cachedCertInfo;
+
+      if (certInfo) {
+        return diffFrom(day(certInfo.notBefore), day(certInfo.notAfter), (key, args) => this.t(key, args)).string;
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * Get the model `state` for secrets of type cert
+   */
+  get certState() {
+    if (this._type !== TYPES.TLS) {
+      return undefined;
+    }
+
+    if (typeof this.timeTilExpiration !== 'number' || this.timeTilExpiration > certExpiringPeriod ) {
+      return '';
+    } else if (this.timeTilExpiration > 0) {
+      return STATES_ENUM.EXPIRING;
+    } else {
+      return STATES_ENUM.EXPIRED;
+    }
+  }
+
+  /**
+   * Get the model `state display` for secrets of type cert
+   */
+  get certStateDisplay() {
+    if (this._type !== TYPES.TLS) {
+      return undefined;
+    }
+
+    return stateDisplay(this.certState);
+  }
+
+  /**
+   * Get the model `state background` for secrets of type cert
+   */
+  get certStateBackground() {
+    if (this._type !== TYPES.TLS) {
+      return undefined;
+    }
+
+    const color = colorForState(this.certState);
+
+    return color.replace('text-', 'bg-');
+  }
+
+  cleanForSave(data, forNew) {
+    const val = super.cleanForSave(data, forNew);
+
+    // Secrets on create with _type will return validation error
+    // Secrets on edit without _type will return http error
+    if (forNew) {
+      delete val._type;
+    }
+
+    return val;
+  }
 }

package/models/workload.js

@@ -649,4 +649,20 @@ export default class Workload extends WorkloadService {
 
     return matching(allInNamespace, selector);
   }
+
+  cleanForSave(data) {
+    const val = super.cleanForSave(data);
+
+    // remove fields from containers
+    val.spec?.template?.spec?.containers?.forEach((container) => {
+      this.cleanContainerForSave(container);
+    });
+
+    // remove fields from initContainers
+    val.spec?.template?.spec?.initContainers?.forEach((container) => {
+      this.cleanContainerForSave(container);
+    });
+
+    return val;
+  }
 }

package/models/workload.service.js

@@ -320,4 +320,22 @@ export default class WorkloadService extends SteveModel {
 
     return { toSave, toRemove };
   }
+
+  cleanForSave(data) {
+    const val = super.cleanForSave(data);
+
+    delete val.__active;
+    delete val.type;
+
+    return val;
+  }
+
+  cleanContainerForSave(container) {
+    delete container.__active;
+    delete container.active;
+    delete container._init;
+    delete container.error;
+
+    return container;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
@@ -116,7 +116,7 @@
     "start-server-and-test": "1.13.1",
     "style-loader": "1.2.1",
     "ts-node": "8.10.2",
-    "typescript": "4.1.6",
+    "typescript": "4.5.5",
     "url-parse": "1.5.10",
     "v-tooltip": "2.0.3",
     "vue": "2.7.14",
@@ -129,16 +129,16 @@
     "vue-shortkey": "3.1.7",
     "vue-template-compiler": "2.7.14",
     "vue-virtual-scroll-list": "^2.3.4",
-    "vue2-transitions": "0.3.0",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.2",
     "webpack-bundle-analyzer": "4.5.0",
     "webpack-virtual-modules": "0.4.3",
-    "xterm": "5.0.0",
-    "xterm-addon-fit": "0.6.0",
-    "xterm-addon-search": "0.10.0",
-    "xterm-addon-web-links": "0.7.0",
-    "xterm-addon-webgl": "0.13.0",
+    "xterm": "5.2.1",
+    "xterm-addon-canvas": "^0.5.0",
+    "xterm-addon-fit": "0.8.0",
+    "xterm-addon-search": "0.13.0",
+    "xterm-addon-web-links": "0.9.0",
+    "xterm-addon-webgl": "0.16.0",
     "worker-loader": "3.0.8",
     "yarn": "1.22.18"
   },
@@ -151,7 +151,8 @@
     "qs": ">=6.7.3",
     "nth-check": ">=2.0.1",
     "follow-redirects": ">=1.14.7",
-    "merge": ">=2.1.1"
+    "merge": ">=2.1.1",
+    "semver": ">=7.5.2"
   },
   "nyc": {
     "extension": [

package/pages/about.vue

@@ -9,7 +9,6 @@ import { downloadFile } from '@shell/utils/download';
 import { mapGetters } from 'vuex';
 
 export default {
-  layout:     'plain',
   components: { BackLink, Loading },
   mixins:     [BackRoute],
   async fetch() {

package/pages/account/create-key.vue

@@ -3,7 +3,6 @@ import ResourceDetail from '@shell/components/ResourceDetail';
 
 export default {
   name:       'APIKeyCreate',
-  layout:     'plain',
   components: { ResourceDetail },
 };
 </script>

package/pages/account/index.vue

@@ -15,7 +15,6 @@ import CopyToClipboardText from '@shell/components/CopyToClipboardText';
 const API_ENDPOINT = '/v3';
 
 export default {
-  layout:     'plain',
   components: {
     CopyToClipboardText, BackLink, Banner, PromptChangePassword, Loading, ResourceTable, Principal
   },

package/pages/auth/login.vue

@@ -29,7 +29,6 @@ import loadPlugins from '@shell/plugins/plugin';
 
 export default {
   name:       'Login',
-  layout:     'unauthenticated',
   components: {
     LabeledInput, AsyncButton, Checkbox, BrandImage, Banner, InfoBox, CopyCode, Password, LocaleSelector
   },

package/pages/auth/logout.vue

@@ -1,8 +1,6 @@
 <script>
 
 export default {
-  layout: 'unauthenticated',
-
   async asyncData({ redirect, store, router }) {
     await store.dispatch('auth/logout', null, { root: true });
   }

package/pages/auth/setup.vue

@@ -38,8 +38,6 @@ const calcMustChangePassword = async(store) => {
 };
 
 export default {
-  layout: 'unauthenticated',
-
   mixins: [FormValidation],
 
   data() {
@@ -146,8 +144,6 @@ export default {
 
     if (serverUrlSetting?.value) {
       serverUrl = serverUrlSetting.value;
-    } else if ( process.server ) {
-      serverUrl = req.headers.host;
     } else {
       serverUrl = window.location.origin;
     }

package/pages/auth/verify.vue

@@ -17,9 +17,14 @@ function reply(err, code) {
   }
 }
 
-export default {
-  layout: 'unauthenticated',
+function isSaml($route) {
+  const { query } = $route;
+  const configQuery = get(query, 'config');
+
+  return samlProviders.includes(configQuery);
+}
 
+export default {
   async fetch({ store, route, redirect }) {
     const code = route.query[GITHUB_CODE];
     const stateStr = route.query[GITHUB_NONCE];
@@ -43,9 +48,14 @@ export default {
     try {
       parsed = JSON.parse(base64Decode((stateStr)));
     } catch (err) {
+      if (isSaml(route)) {
+        // This is an ok failure. SAML has no state string so a failure is fine (see similar check in mounted).
+        // This whole file could be re-written with that in mind, but this change keeps things simple and fixes a breaking addition
+        return;
+      }
       const out = store.getters['i18n/t'](`login.error`);
 
-      console.error('Failed to parse nonce'); // eslint-disable-line no-console
+      console.error('Failed to parse nonce', stateStr, err); // eslint-disable-line no-console
 
       redirect(`/auth/login?err=${ escape(out) }`);
 
@@ -117,12 +127,8 @@ export default {
         window.close();
       }
     } else {
-      const { query } = this.$route;
-
       if ( window.opener ) {
-        const configQuery = get(query, 'config');
-
-        if ( samlProviders.includes(configQuery) ) {
+        if (isSaml(this.$route)) {
           if ( window.opener.window.onAuthTest ) {
             reply(null, null);
           } else {

package/pages/c/_cluster/apps/charts/install.vue

@@ -248,7 +248,7 @@ export default {
       return;
     }
 
-    if ( this.version && process.client ) {
+    if ( this.version ) {
       /*
         Check if the Helm chart has provided the name
         of a Vue component to use for configuring
@@ -857,11 +857,9 @@ export default {
         }
 
         if (provCluster?.isRke2) { // isRke2 returns true for both RKE2 and K3s clusters.
-          const agentConfig = provCluster.spec?.rkeConfig?.machineSelectorConfig?.find((x) => !x.machineLabelSelector).config;
-
           // If a cluster scoped registry exists,
           // it should be used by default.
-          const clusterRegistry = agentConfig?.['system-default-registry'] || '';
+          const clusterRegistry = provCluster.agentConfig?.['system-default-registry'] || '';
 
           if (clusterRegistry) {
             return clusterRegistry;
@@ -1603,6 +1601,7 @@ export default {
                 v-if="componentHasTabs"
                 ref="tabs"
                 :side-tabs="true"
+                :hide-single-tab="true"
                 :class="{'with-name': showNameEditor}"
                 class="step__values__content"
                 @changed="tabChanged($event)"
@@ -1647,6 +1646,7 @@ export default {
               v-else-if="hasQuestions && showQuestions"
               ref="tabs"
               :side-tabs="true"
+              :hide-single-tab="true"
               :class="{'with-name': showNameEditor}"
               class="step__values__content"
               @changed="tabChanged($event)"

package/pages/c/_cluster/apps/index.vue

@@ -2,8 +2,6 @@
 import { NAME as APPS } from '@shell/config/product/apps';
 
 export default {
-  layout: 'plain',
-
   middleware({ redirect, route } ) {
     return redirect({
       name:   'c-cluster-apps-charts',

package/pages/c/_cluster/auth/index.vue

@@ -3,8 +3,6 @@ import { NAME as AUTH } from '@shell/config/product/auth';
 import { MANAGEMENT } from '@shell/config/types';
 
 export default {
-  layout: 'plain',
-
   middleware({ redirect, route } ) {
     return redirect({
       name:   'c-cluster-product-resource',