@rancher/shell 1.2.0 → 2.0.0

package/models/secret.js

@@ -6,6 +6,10 @@ 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';
+import { steveCleanForDownload } from '@shell/plugins/steve/resource-utils';
 
 export const TYPES = {
   OPAQUE:           'Opaque',
@@ -23,7 +27,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 +55,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 +63,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 +71,7 @@ export default class Secret extends SteveModel {
 
   get cn() {
     if (this.isCertificate) {
-      return this.certInfo?.cn;
+      return this.cachedCertInfo?.cn;
     }
 
     return null;
@@ -80,14 +89,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 +256,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 +274,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 +290,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 +330,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 +392,77 @@ 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;
+  }
+
+  async cleanForDownload(yaml) {
+    // secret resource contains the type attribute
+    // ref: https://kubernetes.io/docs/reference/kubernetes-api/config-and-storage-resources/secret-v1/
+    // ref: https://kubernetes.io/docs/concepts/configuration/secret/#secret-types
+
+    return steveCleanForDownload(yaml, { rootKeys: ['id', 'links', 'actions'] });
+  }
 }

package/models/service.js

@@ -2,6 +2,8 @@ import find from 'lodash/find';
 import { POD } from '@shell/config/types';
 import SteveModel from '@shell/plugins/steve/steve-class';
 
+// i18n-uses servicesPage.serviceTypes.clusterIp.*, servicesPage.serviceTypes.externalName.*, servicesPage.serviceTypes.headless.*
+// i18n-uses servicesPage.serviceTypes.loadBalancer.*, servicesPage.serviceTypes.nodePort.*
 export const DEFAULT_SERVICE_TYPES = [
   {
     id:          'ClusterIP',

package/models/steve-schema.ts

@@ -0,0 +1,254 @@
+import { STEVE } from '@shell/config/types';
+import Schema from './schema';
+import { wait } from '@shell/utils/async';
+
+interface ResourceField {
+  type: string,
+  description: string,
+}
+type ResourceFields = { [id: string]: ResourceField }
+
+interface SchemaDefinition {
+  type: string,
+  description: string,
+  resourceFields: ResourceFields
+}
+type SchemaDefinitions = { [definitionId: string]: SchemaDefinition }
+
+type SchemaId = {
+  self: string;
+  others: string[];
+}
+type SchemaIds = { [schemaId: string]: SchemaId }
+
+interface SchemaDefinitionResponse {
+  definitions: SchemaDefinitions,
+  definitionType: string,
+}
+
+const SchemaDefinitionCache: { [store: string]: {
+  ids: SchemaIds,
+  definitions: SchemaDefinitions,
+} } = {};
+
+/**
+ * Steve Schema specific functionality
+ */
+export default class SteveSchema extends Schema {
+  static reset(store: string): void {
+    delete SchemaDefinitionCache[store];
+  }
+
+  _resourceFields?: ResourceFields;
+
+  /**
+   * If resourceFields have not been provided, they are required to be fetched aka schemaDefinition world
+   */
+  requiresResourceFields: boolean;
+
+  // These are just for typing, eventually we'll get them when Schema is fully converted to typescript
+  id?: string;
+  type?: string;
+  links?: any;
+  $ctx?: any;
+
+  /**
+   * This should match the root Schema ctor (...args throws ts error)
+   */
+  constructor(data: unknown, ctx: unknown, rehydrateNamespace?: null | undefined, setClone?: boolean) {
+    super(data, ctx, rehydrateNamespace, setClone);
+
+    if (!SchemaDefinitionCache[this.store]) {
+      SchemaDefinitionCache[this.store] = {
+        ids:         {},
+        definitions: {}
+      };
+    }
+
+    this.requiresResourceFields = this._resourceFields === null; // This is set pre ctor via `set'er, but TS complains that it's not initialised
+  }
+
+  // Notes on Schemas, resourceFields and schemaDefinitions
+  // - Schemas previously contained a `resourceFields` collection, which is now null
+  // - resourceFields now come from a new `schemaDefinitions` endpoint
+  // - for neatness / safety / compatibility with norman resources... we fetch schemaDefinitions and return their resourceFields in a resourceFields getter
+
+  /******************
+   * Resource Fields
+   ****************** /
+
+  /**
+   * Is the property `resourceFields` available
+   *
+   * If the schema definition is required and it hasn't been fetched this will be false
+   *
+   * This is a non-erroring request, unlike the resourceFields getter which will error if schema definition is required but missing
+   */
+  get hasResourceFields(): boolean {
+    if (this.requiresResourceFields) {
+      return !!this.schemaDefinition?.resourceFields;
+    }
+
+    return !!this._resourceFields;
+  }
+
+  /**
+   * Fields associated with instances of this schema
+   *
+   * This will either come directly from the schema or from the schema's definition
+   */
+  get resourceFields(): ResourceFields {
+    if (this.requiresResourceFields) {
+      if (!this.schemaDefinitionsIds) {
+        throw new Error(`Cannot find resourceFields for Schema ${ this.id } (schemaDefinitions have not been fetched) `);
+      }
+
+      if (!this.schemaDefinition) {
+        throw new Error(`No schemaDefinition for ${ this.id } found (not in schemaDefinition response) `);
+      }
+
+      return this.schemaDefinition.resourceFields;
+    }
+
+    return this._resourceFields as ResourceFields;
+  }
+
+  /**
+   * Apply the original `resourceFields` param (if it exists). If it does not then we'll need to fetch the schema definition
+   */
+  set resourceFields(resourceFields: ResourceFields) {
+    this._resourceFields = resourceFields;
+    this.requiresResourceFields = this._resourceFields === null;
+  }
+
+  /**
+   * Ensure this schema has a populated `resourceFields` property
+   *
+   * This happens via making a request to fetch the schema definition
+   */
+  async fetchResourceFields(depth = 0): Promise<SchemaDefinition | null | undefined> {
+    if (!this.requiresResourceFields) {
+      // Not needed, no-op
+      return;
+    }
+
+    if (this.schemaDefinition) {
+      // Already have it, no-op
+      return this.schemaDefinition;
+    }
+
+    const url = this.schemaDefinitionUrl;
+
+    if (!url) {
+      console.warn(`Unable to fetch schema definitions for ${ this.id } (failed to find url of schema definition)`); // eslint-disable-line no-console
+
+      return;
+    }
+
+    if (depth >= 4) {
+      console.warn(`Unable to fetch schema definitions for ${ this.id } (too many failed requests)`); // eslint-disable-line no-console
+
+      return;
+    }
+
+    let res;
+
+    try {
+      // Make a direct request to fetch the schema definition
+      res = await this.$dispatch('request', {
+        type: STEVE.SCHEMA_DEFINITION,
+        url
+      });
+    } catch (e: any) {
+      if ( e?._status === 500) {
+        // Rancher could be updating it's definition cache, attempt a few times
+        await wait(2000);
+
+        return this.fetchResourceFields(++depth);
+      }
+
+      console.warn(`Unable to fetch schema definitions for ${ this.id }`, e); // eslint-disable-line no-console
+
+      return;
+    }
+
+    this.cacheSchemaDefinitionResponse(res);
+
+    return this.schemaDefinition;
+  }
+
+  /**
+   * Convert collection of schema definitions for this schema into objects we can store
+   *
+   * Split out for unit testing purposes
+   */
+  private cacheSchemaDefinitionResponse(res: SchemaDefinitionResponse): void {
+    const { [res.definitionType]: self, ...others } = res.definitions;
+    const store = this.store;
+
+    SchemaDefinitionCache[store].ids[this.id as string] = { self: self.type, others: Object.keys(others) };
+    Object.entries(res.definitions).forEach(([type, sd]) => {
+      SchemaDefinitionCache[store].definitions[type] = sd;
+    });
+  }
+
+  /*********************
+   * Schema Definitions
+   ********************* /
+
+  /**
+   * Store this schema's definition and a collection of associated definitions (all ids)
+   */
+
+  /**
+   * The schema definition for this schema
+   */
+  get schemaDefinition(): SchemaDefinition | null {
+    if (!this.schemaDefinitionsIds) {
+      return null;
+    }
+
+    return SchemaDefinitionCache[this.store].definitions[this.schemaDefinitionsIds.self];
+  }
+
+  /**
+   * The schema definitions for this schema definition's resourceFields
+   */
+  get schemaDefinitions(): SchemaDefinitions | null {
+    if (!this.schemaDefinitionsIds) {
+      return null;
+    }
+
+    return this.schemaDefinitionsIds.others.reduce((res, d) => {
+      res[d] = SchemaDefinitionCache[this.store].definitions[d];
+
+      return res;
+    }, {} as SchemaDefinitions);
+  }
+
+  /**
+   * URL to fetch this schema's definition
+   */
+  get schemaDefinitionUrl(): string {
+    return this.links?.self?.replace('/schemas/', '/schemaDefinitions/');
+  }
+
+  /*********************
+   * Local Properties
+   *
+   * This could be set in the ctor, however are removed in `replaceResource` when there are socket updates..
+   * ... so use getters instead
+   *
+   *********************/
+
+  /**
+   * The name (namespace) of the vuex store this schema lives in (i.e. cluster, management, etc)
+   */
+  private get store(): string {
+    return this.$ctx.state?.config?.namespace;
+  }
+
+  private get schemaDefinitionsIds(): SchemaId | undefined {
+    return SchemaDefinitionCache[this.store]?.ids[this.id as string];
+  }
+}

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

@@ -84,7 +84,7 @@ export const PROVISIONER_OPTIONS = [
 export default class extends SteveModel {
   get provisionerDisplay() {
     const option = PROVISIONER_OPTIONS.find((o) => o.value === this.provisioner);
-    const fallback = `${ this.provisioner } ${ this.t('persistentVolume.csi.drivers.suffix') }`;
+    const fallback = `${ this.provisioner } ${ this.t('persistentVolume.csi.suffix') }`;
 
     return option ? this.t(option.labelKey) : this.$rootGetters['i18n/withFallback'](`persistentVolume.csi.drivers.${ this.provisioner.replaceAll('.', '-') }`, null, fallback);
   }

package/models/workload.js

@@ -647,6 +647,23 @@ export default class Workload extends WorkloadService {
 
     const selector = convertSelectorObj(this.spec.selector);
 
+    // See https://github.com/rancher/dashboard/issues/10417, all pods bad, need to replace local selector somehow
     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": "1.2.0",
+  "version": "2.0.0",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
@@ -30,6 +30,7 @@
     "@aws-sdk/client-ec2": "3.1.0",
     "@aws-sdk/client-eks": "3.1.0",
     "@aws-sdk/client-kms": "3.8.1",
+    "@aws-sdk/client-iam": "3.18.0",
     "@babel/plugin-proposal-optional-chaining": "7.14.5",
     "@babel/plugin-proposal-private-property-in-object": "7.14.5",
     "@babel/preset-typescript": "7.16.7",
@@ -41,6 +42,7 @@
     "@nuxtjs/eslint-config-typescript": "6.0.1",
     "@nuxtjs/webpack-profile": "0.1.0",
     "@popperjs/core": "2.4.4",
+    "@types/is-url": "1.2.30",
     "@types/node": "16.4.3",
     "@typescript-eslint/eslint-plugin": "4.33.0",
     "@typescript-eslint/parser": "4.33.0",
@@ -105,7 +107,7 @@
     "nyc": "15.1.0",
     "papaparse": "5.3.0",
     "portal-vue": "2.1.7",
-    "rancher-icons": "rancher/icons#v2.0.16",
+    "@rancher/icons": "2.0.29",
     "sass": "1.51.0",
     "sass-loader": "10.2.1",
     "serve-static": "1.14.1",
@@ -115,29 +117,29 @@
     "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",
-    "vue-clipboard2": "0.3.1",
+    "vue": "2.7.16",
+    "clipboard-polyfill": "4.0.1",
     "vue-codemirror": "4.0.6",
     "vue-js-modal": "1.3.35",
     "vue-resize": "0.4.5",
     "vue-select": "3.18.3",
-    "vue-server-renderer": "2.7.14",
+    "vue-server-renderer": "2.7.16",
     "vue-shortkey": "3.1.7",
-    "vue-template-compiler": "2.7.14",
+    "vue-template-compiler": "2.7.16",
     "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"
   },
@@ -150,7 +152,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

@@ -7,11 +7,13 @@ import { SETTING } from '@shell/config/settings';
 import { getVendor } from '@shell/config/private-label';
 import { downloadFile } from '@shell/utils/download';
 import { mapGetters } from 'vuex';
+import TabTitle from '@shell/components/TabTitle';
 
 export default {
-  layout:     'plain',
-  components: { BackLink, Loading },
-  mixins:     [BackRoute],
+  components: {
+    BackLink, Loading, TabTitle
+  },
+  mixins: [BackRoute],
   async fetch() {
     this.settings = await this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.SETTING });
   },
@@ -97,14 +99,18 @@ export default {
   >
     <BackLink :link="backLink" />
     <div class="title-block mt-20 mb-40">
-      <h1 v-t="'about.title'" />
-      <n-link
+      <h1>
+        <TabTitle breadcrumb="vendor-only">
+          {{ t('about.title') }}
+        </TabTitle>
+      </h1>
+      <router-link
         :to="{ name: 'diagnostic' }"
         class="btn role-primary"
         data-testid="about__diagnostics_button"
       >
         {{ t('about.diagnostic.title') }}
-      </n-link>
+      </router-link>
     </div>
     <h3>{{ t('about.versions.title') }}</h3>
     <table>

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>