@rancher/shell 3.0.0-rc.7 → 3.0.0-rc.8

package/components/nav/__tests__/TopLevelMenu.test.ts

@@ -5,7 +5,7 @@ import { mount, Wrapper } from '@vue/test-utils';
 // DISCLAIMER: This should not be added here, although we have several store requests which are irrelevant
 const defaultStore = {
   'management/byId':         jest.fn(),
-  'management/schemaFor':    jest.fn(),
+  'management/schemaFor':    () => ({}),
   'i18n/t':                  jest.fn(),
   'features/get':            jest.fn(),
   'prefs/theme':             jest.fn(),
@@ -21,7 +21,11 @@ describe('topLevelMenu', () => {
         mocks: {
           $store: {
             getters: {
-              'management/all': () => [{ name: 'whatever' }],
+              'management/all': () => [{
+                name: 'whatever',
+                id:   'an-id1',
+                mgmt: { id: 'an-id1' },
+              }],
               ...defaultStore
             },
           },
@@ -53,21 +57,21 @@ describe('topLevelMenu', () => {
               'management/all': () => [
                 {
                   name:        'x32-cwf5-name',
-                  id:          'x32-cwf5-id',
+                  id:          'an-id1',
                   mgmt:        { id: 'an-id1' },
                   nameDisplay: 'c-cluster',
                   isReady:     true
                 },
                 {
                   name:        'x33-cwf5-name',
-                  id:          'x33-cwf5-id',
+                  id:          'an-id2',
                   mgmt:        { id: 'an-id2' },
                   nameDisplay: 'a-cluster',
                   isReady:     true
                 },
                 {
                   name:        'x34-cwf5-name',
-                  id:          'x34-cwf5-id',
+                  id:          'an-id3',
                   mgmt:        { id: 'an-id3' },
                   nameDisplay: 'b-cluster',
                   isReady:     true
@@ -75,7 +79,7 @@ describe('topLevelMenu', () => {
                 {
                   name:        'local-name',
                   id:          'local',
-                  mgmt:        { id: 'an-id4' },
+                  mgmt:        { id: 'local' },
                   nameDisplay: 'local',
                   isReady:     true
                 },
@@ -112,21 +116,21 @@ describe('topLevelMenu', () => {
               'management/all': () => [
                 {
                   name:        'x32-cwf5-name',
-                  id:          'x32-cwf5-id',
+                  id:          'an-id1',
                   mgmt:        { id: 'an-id1' },
                   nameDisplay: 'c-cluster',
                   isReady:     true
                 },
                 {
                   name:        'x33-cwf5-name',
-                  id:          'x33-cwf5-id',
+                  id:          'an-id2',
                   mgmt:        { id: 'an-id2' },
                   nameDisplay: 'a-cluster',
                   isReady:     false
                 },
                 {
                   name:        'x34-cwf5-name',
-                  id:          'x34-cwf5-id',
+                  id:          'an-id3',
                   mgmt:        { id: 'an-id3' },
                   nameDisplay: 'b-cluster',
                   isReady:     true
@@ -134,7 +138,7 @@ describe('topLevelMenu', () => {
                 {
                   name:        'local-name',
                   id:          'local',
-                  mgmt:        { id: 'an-id4' },
+                  mgmt:        { id: 'local' },
                   nameDisplay: 'local',
                   isReady:     true
                 },
@@ -171,7 +175,7 @@ describe('topLevelMenu', () => {
               'management/all': () => [
                 {
                   name:        'x32-cwf5-name',
-                  id:          'x32-cwf5-id',
+                  id:          'an-id1',
                   mgmt:        { id: 'an-id1' },
                   nameDisplay: 'c-cluster',
                   isReady:     true,
@@ -179,7 +183,7 @@ describe('topLevelMenu', () => {
                 },
                 {
                   name:        'x33-cwf5-name',
-                  id:          'x33-cwf5-id',
+                  id:          'an-id2',
                   mgmt:        { id: 'an-id2' },
                   nameDisplay: 'a-cluster',
                   isReady:     true,
@@ -187,7 +191,7 @@ describe('topLevelMenu', () => {
                 },
                 {
                   name:        'x34-cwf5-name',
-                  id:          'x34-cwf5-id',
+                  id:          'an-id3',
                   mgmt:        { id: 'an-id3' },
                   nameDisplay: 'b-cluster',
                   isReady:     true,
@@ -196,7 +200,7 @@ describe('topLevelMenu', () => {
                 {
                   name:        'local-name',
                   id:          'local',
-                  mgmt:        { id: 'an-id4' },
+                  mgmt:        { id: 'local' },
                   nameDisplay: 'local',
                   isReady:     true,
                   pinned:      true
@@ -234,7 +238,7 @@ describe('topLevelMenu', () => {
               'management/all': () => [
                 {
                   name:        'x32-cwf5-name',
-                  id:          'x32-cwf5-id',
+                  id:          'an-id1',
                   mgmt:        { id: 'an-id1' },
                   nameDisplay: 'c-cluster',
                   isReady:     true,
@@ -242,7 +246,7 @@ describe('topLevelMenu', () => {
                 },
                 {
                   name:        'x33-cwf5-name',
-                  id:          'x33-cwf5-id',
+                  id:          'an-id2',
                   mgmt:        { id: 'an-id2' },
                   nameDisplay: 'a-cluster',
                   isReady:     true,
@@ -250,7 +254,7 @@ describe('topLevelMenu', () => {
                 },
                 {
                   name:        'x34-cwf5-name',
-                  id:          'x34-cwf5-id',
+                  id:          'an-id3',
                   mgmt:        { id: 'an-id3' },
                   nameDisplay: 'b-cluster',
                   isReady:     false,
@@ -259,7 +263,7 @@ describe('topLevelMenu', () => {
                 {
                   name:        'local-name',
                   id:          'local',
-                  mgmt:        { id: 'an-id4' },
+                  mgmt:        { id: 'local' },
                   nameDisplay: 'local',
                   isReady:     true,
                   pinned:      true
@@ -356,7 +360,7 @@ describe('topLevelMenu', () => {
   it('should show description if it is available on the mgmt cluster (relevant for RKE1/ember world)', async() => {
     const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
       data: () => {
-        return { hasProvCluster: false, showPinClusters: true };
+        return { hasProvCluster: true, showPinClusters: true };
       },
 
       global: {
@@ -372,6 +376,7 @@ describe('topLevelMenu', () => {
                 {
                   name:        'whatever',
                   id:          'an-id1',
+                  mgmt:        { id: 'an-id1' },
                   description: 'some-description1',
                   nameDisplay: 'some-label',
                   isReady:     true,
@@ -381,6 +386,7 @@ describe('topLevelMenu', () => {
                 {
                   name:        'whatever',
                   id:          'an-id2',
+                  mgmt:        { id: 'an-id2' },
                   description: 'some-description2',
                   nameDisplay: 'some-label',
                   pinned:      true
@@ -389,6 +395,7 @@ describe('topLevelMenu', () => {
                 {
                   name:        'whatever',
                   id:          'an-id3',
+                  mgmt:        { id: 'an-id3' },
                   description: 'some-description3',
                   nameDisplay: 'some-label',
                   isReady:     true
@@ -397,6 +404,7 @@ describe('topLevelMenu', () => {
                 {
                   name:        'whatever',
                   id:          'an-id4',
+                  mgmt:        { id: 'an-id4' },
                   description: 'some-description4',
                   nameDisplay: 'some-label'
                 },
@@ -466,7 +474,11 @@ describe('topLevelMenu', () => {
             mocks: {
               $store: {
                 getters: {
-                  'management/all': () => [{ nameDisplay: 'something else' }],
+                  'management/all': () => [{
+                    id:          'an-id1',
+                    mgmt:        { id: 'an-id1' },
+                    nameDisplay: 'something else'
+                  }],
                   ...defaultStore
                 },
               },
@@ -489,7 +501,12 @@ describe('topLevelMenu', () => {
             mocks: {
               $store: {
                 getters: {
-                  'management/all': () => [{ nameDisplay: 'something else', pinned: true }],
+                  'management/all': () => [{
+                    id:          'an-id1',
+                    mgmt:        { id: 'an-id1' },
+                    nameDisplay: 'something else',
+                    pinned:      true
+                  }],
                   ...defaultStore
                 },
               },
@@ -515,7 +532,11 @@ describe('topLevelMenu', () => {
             mocks: {
               $store: {
                 getters: {
-                  'management/all': () => [{ nameDisplay: search }],
+                  'management/all': () => [{
+                    id:          'an-id1',
+                    mgmt:        { id: 'an-id1' },
+                    nameDisplay: search
+                  }],
                   ...defaultStore
                 },
               },
@@ -540,7 +561,12 @@ describe('topLevelMenu', () => {
             mocks: {
               $store: {
                 getters: {
-                  'management/all': () => [{ nameDisplay: search, pinned: true }],
+                  'management/all': () => [{
+                    nameDisplay: search,
+                    pinned:      true,
+                    id:          'an-id1',
+                    mgmt:        { id: 'an-id1' },
+                  }],
                   ...defaultStore
                 },
               },

package/config/labels-annotations.js

@@ -11,6 +11,7 @@ export const CATTLE_PUBLIC_ENDPOINTS = 'field.cattle.io/publicEndpoints';
 export const TARGET_WORKLOADS = 'field.cattle.io/targetWorkloadIds';
 export const UI_MANAGED = 'management.cattle.io/ui-managed';
 export const CREATOR_ID = 'field.cattle.io/creatorId';
+export const CREATOR_PRINCIPAL_ID = 'field.cattle.io/creator-principal-name';
 export const RESOURCE_QUOTA = 'field.cattle.io/resourceQuota';
 export const AZURE_MIGRATED = 'auth.cattle.io/azuread-endpoint-migrated';
 export const WORKSPACE_ANNOTATION = 'objectset.rio.cattle.io/id';
@@ -90,11 +91,12 @@ export const CATALOG = {
   _CLUSTER_TPL:  'cluster-template',
   _CLUSTER_TOOL: 'cluster-tool',
 
-  COMPONENT:        'catalog.cattle.io/ui-component',
-  SOURCE_REPO_TYPE: 'catalog.cattle.io/ui-source-repo-type',
-  SOURCE_REPO_NAME: 'catalog.cattle.io/ui-source-repo',
-  COLOR:            'catalog.cattle.io/ui-color',
-  DISPLAY_NAME:     'catalog.cattle.io/display-name',
+  COMPONENT:         'catalog.cattle.io/ui-component',
+  SOURCE_REPO_TYPE:  'catalog.cattle.io/ui-source-repo-type',
+  SOURCE_REPO_NAME:  'catalog.cattle.io/ui-source-repo',
+  COLOR:             'catalog.cattle.io/ui-color',
+  DISPLAY_NAME:      'catalog.cattle.io/display-name',
+  CLUSTER_REPO_NAME: 'catalog.cattle.io/cluster-repo-name',
 
   SUPPORTED_OS: 'catalog.cattle.io/os',
   PERMITTED_OS: 'catalog.cattle.io/permits-os',
@@ -172,3 +174,5 @@ export const SYSTEM_LABELS = [
   'node.kubernetes.io',
   'egress.rke2.io'
 ];
+
+export const CLOUD_CREDENTIALS = { EXPIRATION: 'rancher.io/expiration-timestamp' };

package/core/types.ts

@@ -235,7 +235,7 @@ export interface ProductOptions {
   /**
    * The route that the product will lead to if click on in navigation.
    */
-  to?: Location;
+  to?: PluginRouteRecordRaw;
 
   /**
    * Leaving these here for completeness but I don't think these should be advertised as useable to plugin creators.

package/detail/provisioning.cattle.io.cluster.vue

@@ -573,10 +573,6 @@ export default {
     }
   },
 
-  mounted() {
-    window.c = this;
-  },
-
   methods: {
     toggleScaleDownModal( event, resources ) {
       // Check if the user held alt key when an action is clicked.

package/edit/management.cattle.io.project.vue

@@ -14,7 +14,7 @@ import { MANAGEMENT } from '@shell/config/types';
 import { NAME } from '@shell/config/product/explorer';
 import { PROJECT_ID, _VIEW, _CREATE, _EDIT } from '@shell/config/query-params';
 import ProjectMembershipEditor, { canViewProjectMembershipEditor } from '@shell/components/form/Members/ProjectMembershipEditor';
-
+import { CREATOR_PRINCIPAL_ID } from '@shell/config/labels-annotations';
 import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 import { Banner } from '@components/Banner';
 
@@ -103,6 +103,9 @@ export default {
     this.value.metadata['namespace'] = this.$store.getters['currentCluster'].id;
     this.value['spec'] = this.value.spec || {};
     this.value.spec['containerDefaultResourceLimit'] = this.value.spec.containerDefaultResourceLimit || {};
+    if (!this.$store.getters['auth/principalId'].includes('local://')) {
+      this.value.metadata.annotations[CREATOR_PRINCIPAL_ID] = this.$store.getters['auth/principalId'];
+    }
   },
   methods: {
     async save(saveCb) {

package/edit/provisioning.cattle.io.cluster/index.vue

@@ -86,10 +86,15 @@ export default {
       // These aren't explicitly used, but need to be listening for change events
       mgmtClusters: this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER }),
       provClusters: this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER }),
-
-      catalog: this.$store.dispatch('catalog/load'),
     };
 
+    // No need to fetch charts when editing an RKE1 cluster
+    // The computed property `isRke1` in this file is based on the RKE1/RKE2 toggle, which is not applicable in this case
+    // Instead, we should rely on the value from the model: `this.value.isRke1`
+    if (!this.value.isRke1 || (this.value.isRke1 && this.mode !== 'edit')) {
+      hash['catalog'] = this.$store.dispatch('catalog/load');
+    }
+
     if (this.$store.getters[`management/canList`](MANAGEMENT.NODE_DRIVER)) {
       hash.nodeDrivers = this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE_DRIVER });
     }

package/edit/provisioning.cattle.io.cluster/rke2.vue

@@ -42,6 +42,7 @@ import Tabbed from '@shell/components/Tabbed';
 import { canViewClusterMembershipEditor } from '@shell/components/form/Members/ClusterMembershipEditor';
 import semver from 'semver';
 
+import { CLOUD_CREDENTIAL_OVERRIDE } from '@shell/models/nodedriver';
 import { SETTING } from '@shell/config/settings';
 import { base64Encode } from '@shell/utils/crypto';
 import { CAPI as CAPI_ANNOTATIONS, CLUSTER_BADGE } from '@shell/config/labels-annotations';
@@ -413,11 +414,22 @@ export default {
     },
 
     needCredential() {
-      if (this.provider === 'custom' || this.provider === 'import' || this.isElementalCluster || this.mode === _VIEW || (this.providerConfig?.spec?.builtin === false && this.providerConfig?.spec?.addCloudCredential === false)) {
+      // Check non-provider specific config
+      if (
+        this.provider === 'custom' ||
+        this.provider === 'import' ||
+        this.isElementalCluster || // Elemental cluster can make use of `cloud-credential`: false
+        this.mode === _VIEW
+      ) {
         return false;
       }
 
-      if (this.customCredentialComponentRequired === false) {
+      // Check provider specific config
+      if (this.cloudCredentialsOverride === true || this.cloudCredentialsOverride === false) {
+        return this.cloudCredentialsOverride;
+      }
+
+      if (this.providerConfig?.spec?.builtin === false && this.providerConfig?.spec?.addCloudCredential === false) {
         return false;
       }
 
@@ -425,10 +437,21 @@ export default {
     },
 
     /**
-     * Only for extensions - extension can register a 'false' cloud credential to indicate that a cloud credential is not needed
+     * Override the native way of determining if cloud credentials are required (builtin ++ node driver spec.addCloudCredentials)
+     *
+     * 1) Override via extensions
+     *    - `true` or actual component - return true
+     *    - `false` - return false
+     * 2) Override via hardcoded setting
      */
-    customCredentialComponentRequired() {
-      return this.$plugin.getDynamic('cloud-credential', this.provider);
+    cloudCredentialsOverride() {
+      const cloudCredential = this.$plugin.getDynamic('cloud-credential', this.provider);
+
+      if (cloudCredential === undefined) {
+        return CLOUD_CREDENTIAL_OVERRIDE[this.provider];
+      }
+
+      return !!cloudCredential;
     },
 
     hasMachinePools() {

package/list/provisioning.cattle.io.cluster.vue

@@ -10,10 +10,11 @@ import { mapFeature, HARVESTER as HARVESTER_FEATURE } from '@shell/store/feature
 import { NAME as EXPLORER } from '@shell/config/product/explorer';
 import ResourceFetch from '@shell/mixins/resource-fetch';
 import { BadgeState } from '@components/BadgeState';
+import CloudCredExpired from '@shell/components/formatter/CloudCredExpired';
 
 export default {
   components: {
-    Banner, ResourceTable, Masthead, BadgeState
+    Banner, ResourceTable, Masthead, BadgeState, CloudCredExpired
   },
   mixins: [ResourceFetch],
   props:  {
@@ -41,6 +42,8 @@ export default {
       mgmtClusters:    this.$fetchType(MANAGEMENT.CLUSTER),
     };
 
+    this.$store.dispatch('rancher/findAll', { type: NORMAN.CLOUD_CREDENTIAL });
+
     if ( this.$store.getters['management/canList'](SNAPSHOT) ) {
       hash.etcdSnapshots = this.$fetchType(SNAPSHOT);
     }
@@ -141,17 +144,36 @@ export default {
       // This will be used when there's clusters from extension based provisioners
       // We should re-visit this for scaling reasons
       return this.filteredRows.some((c) => c.metadata.namespace !== 'fleet-local' && c.metadata.namespace !== 'fleet-default');
+    },
+
+    tokenExpiredData() {
+      const counts = this.rows.reduce((res, provCluster) => {
+        const expireData = provCluster.cloudCredential?.expireData;
+
+        if (expireData?.expiring) {
+          res.expiring++;
+        }
+        if (expireData?.expired) {
+          res.expired++;
+        }
+
+        return res;
+      }, {
+        expiring: 0,
+        expired:  0
+      });
+
+      return {
+        expiring: counts.expiring ? this.t('cluster.cloudCredentials.banners.expiring', { count: counts.expiring }) : '',
+        expired:  counts.expired ? this.t('cluster.cloudCredentials.banners.expired', { count: counts.expired }) : '',
+      };
     }
   },
 
   $loadingResources() {
     // results are filtered so we wouldn't get the correct count on indicator...
     return { loadIndeterminate: true };
-  },
-
-  mounted() {
-    window.c = this;
-  },
+  }
 };
 </script>
 
@@ -186,6 +208,17 @@ export default {
       </template>
     </Masthead>
 
+    <Banner
+      v-if="tokenExpiredData.expiring"
+      color="warning"
+      :label="tokenExpiredData.expiring"
+    />
+    <Banner
+      v-if="tokenExpiredData.expired"
+      color="error"
+      :label="tokenExpiredData.expired"
+    />
+
     <ResourceTable
       :schema="schema"
       :rows="filteredRows"
@@ -194,6 +227,7 @@ export default {
       :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
       :data-testid="'cluster-list'"
       :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
+      :sub-rows="true"
     >
       <!-- Why are state column and subrow overwritten here? -->
       <!-- for rke1 clusters, where they try to use the mgmt cluster stateObj instead of prov cluster stateObj,  -->
@@ -207,19 +241,32 @@ export default {
       </template>
       <template #sub-row="{fullColspan, row, keyField, componentTestid, i, onRowMouseEnter, onRowMouseLeave}">
         <tr
-          v-if="row.stateDescription"
           :key="row[keyField] + '-description'"
           :data-testid="componentTestid + '-' + i + '-row-description'"
           class="state-description sub-row"
           @mouseenter="onRowMouseEnter"
           @mouseleave="onRowMouseLeave"
         >
-          <td>&nbsp;</td>
+          <td v-if="row.cloudCredentialWarning || row.stateDescription">
+&nbsp;
+          </td>
           <td
+            v-if="row.cloudCredentialWarning || row.stateDescription"
             :colspan="fullColspan - 1"
-            :class="{ 'text-error' : row.stateObj.error }"
           >
-            {{ row.stateDescription }}
+            <CloudCredExpired
+              v-if="row.cloudCredentialWarning"
+              :value="row.cloudCredential.expires"
+              :row="row.cloudCredential"
+              :verbose="true"
+              :class="{'mb-10': row.stateDescription}"
+            />
+            <div
+              v-if="row.stateDescription"
+              :class="{ 'text-error' : row.stateObj.error }"
+            >
+              {{ row.stateDescription }}
+            </div>
           </td>
         </tr>
       </template>