@rancher/shell 0.5.3 → 2.0.0

package/models/schema.js

@@ -1,17 +1,38 @@
 import Resource from '@shell/plugins/dashboard-store/resource-class';
 
+/**
+ * For types see schema.d.ts
+ */
 export default class Schema extends Resource {
   get groupName() {
     return this.attributes.namespaced ? 'ns' : 'cluster';
   }
 }
 
-export function parseType(str) {
-  if ( str.startsWith('array[') ) {
-    return ['array', ...parseType(str.slice(6, -1))];
-  } else if ( str.startsWith('map[') ) {
-    return ['map', ...parseType(str.slice(4, -1))];
-  } else {
-    return [str];
+/**
+ * Handles
+ * - no subtype { type: 'io.cattle.provisioning.v1.Cluster.status' }
+ * - traditional map/array's with sub type in type e.g `{ type: array[io.cattle.provisioning.v1.Cluster.status] }`
+ * - new schema definitions map/array's with sub type property e.g. `{ type: 'array', subtype: 'io.cattle.provisioning.v1.Cluster.status' }`
+ */
+const mapArrayTypeRegex = /([^[\s]*)(\[(.*)\])?/;
+
+/**
+ * For the given resourceField find the root type and, if a collection of types, it's subtype
+ *
+ * @param {String} str type, may contain sub type
+ * @param {ResourceField} field resourceField entry, may contain sub type
+ * @returns [type, subtype]
+ */
+export function parseType(str, field) {
+  const regexRes = mapArrayTypeRegex.exec(str);
+
+  const subtype = regexRes[3] || field?.subtype;
+  const res = [regexRes[1]];
+
+  if (subtype) {
+    res.push(subtype);
   }
+
+  return res;
 }

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/workload.js

@@ -647,6 +647,7 @@ 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);
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "0.5.3",
+  "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",
@@ -106,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",
@@ -119,15 +120,15 @@
     "typescript": "4.5.5",
     "url-parse": "1.5.10",
     "v-tooltip": "2.0.3",
-    "vue": "2.7.14",
+    "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",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.2",

package/pages/about.vue

@@ -7,10 +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 {
-  components: { BackLink, Loading },
-  mixins:     [BackRoute],
+  components: {
+    BackLink, Loading, TabTitle
+  },
+  mixins: [BackRoute],
   async fetch() {
     this.settings = await this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.SETTING });
   },
@@ -96,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/index.vue

@@ -11,12 +11,13 @@ import { mapGetters } from 'vuex';
 import { Banner } from '@components/Banner';
 import ResourceTable from '@shell/components/ResourceTable';
 import CopyToClipboardText from '@shell/components/CopyToClipboardText';
+import TabTitle from '@shell/components/TabTitle';
 
 const API_ENDPOINT = '/v3';
 
 export default {
   components: {
-    CopyToClipboardText, BackLink, Banner, PromptChangePassword, Loading, ResourceTable, Principal
+    CopyToClipboardText, BackLink, Banner, PromptChangePassword, Loading, ResourceTable, Principal, TabTitle
   },
   mixins: [BackRoute],
   async fetch() {
@@ -143,7 +144,11 @@ export default {
   <Loading v-if="$fetchState.pending" />
   <div v-else>
     <BackLink :link="backLink" />
-    <h1 v-t="'accountAndKeys.title'" />
+    <h1>
+      <TabTitle breadcrumb="vendor-only">
+        {{ t('accountAndKeys.title') }}
+      </TabTitle>
+    </h1>
 
     <h2 v-t="'accountAndKeys.account.title'" />
     <div class="account">