@rancher/shell 2.0.0 → 3.0.0-rc.1

package/pages/c/_cluster/explorer/__tests__/index.test.ts

@@ -6,34 +6,32 @@ import { NODE_ARCHITECTURE } from '@shell/config/labels-annotations';
 
 describe('page: cluster dashboard', () => {
   const mountOptions = {
-    computed: {
-      monitoringStatus: () => ({ v2: true }),
-      nodes:            () => []
-    },
-    stubs: {
-      'router-link': true,
-      LiveDate:      true
-    },
-    mocks: {
-      $store: {
-        dispatch: jest.fn(),
-        getters:  {
-          currentCluster: {
-            id:                         'cluster',
-            metadata:                   { creationTimestamp: Date.now() },
-            status:                     { provider: 'foo' },
-            kubernetesVersionBase:      '0.0.0',
-            kubernetesVersionExtension: 'k3s'
-          },
-          'cluster/inError':   () => false,
-          'cluster/schemaFor': jest.fn(),
-          'cluster/canList':   jest.fn(),
-          'cluster/all':       jest.fn(),
-          'i18n/exists':       jest.fn(),
-          'i18n/t':            (label: string) => label === 'generic.provisioning' ? '—' : jest.fn()(),
+    global: {
+      stubs: {
+        'router-link': true,
+        LiveDate:      true
+      },
+      mocks: {
+        $store: {
+          dispatch: jest.fn(),
+          getters:  {
+            currentCluster: {
+              id:                         'cluster',
+              metadata:                   { creationTimestamp: Date.now() },
+              status:                     { provider: 'foo' },
+              kubernetesVersionBase:      '0.0.0',
+              kubernetesVersionExtension: 'k3s',
+            },
+            'cluster/inError':   () => false,
+            'cluster/schemaFor': jest.fn(),
+            'cluster/canList':   jest.fn(),
+            'cluster/all':       jest.fn(),
+            'i18n/exists':       jest.fn(),
+            'i18n/t':            (label: string) => label === 'generic.provisioning' ? '—' : jest.fn()(),
+          }
         }
-      }
-    },
+      },
+    }
   };
 
   describe.each([
@@ -49,7 +47,7 @@ describe('page: cluster dashboard', () => {
     ])('should show %p status', (status, iconClass, name, conditions) => {
       const options = clone(mountOptions);
 
-      options.mocks.$store.getters.currentCluster.status = {
+      options.global.mocks.$store.getters.currentCluster.status = {
         provider:          'provider',
         componentStatuses: [{
           name,
@@ -100,7 +98,7 @@ describe('page: cluster dashboard', () => {
     it.each(statuses)('should show %p status', (status, iconClass, isLoaded, disconnected, error, conditions, readyReplicas, unavailableReplicas) => {
       const options = clone(mountOptions);
 
-      options.mocks.$store.getters.currentCluster.isLocal = isLocal;
+      options.global.mocks.$store.getters.currentCluster.isLocal = isLocal;
 
       const resources = agentResources.reduce((acc, r) => {
         const agent = {
@@ -140,7 +138,7 @@ describe('page: cluster dashboard', () => {
   it('local cluster - cattle agent health box - should be hidden', () => {
     const options = clone(mountOptions);
 
-    options.mocks.$store.getters.currentCluster.isLocal = true;
+    options.global.mocks.$store.getters.currentCluster.isLocal = true;
 
     const wrapper = shallowMount(Dashboard, {
       ...options,
@@ -153,23 +151,23 @@ describe('page: cluster dashboard', () => {
 
     const box = wrapper.find(`[data-testid="k8s-service-cattle"]`);
 
-    expect(box.element).toBeUndefined();
+    expect(box.exists()).toBe(false);
   });
 
   describe('cluster details', () => {
     it.each([
       ['clusterProvider', 'other', []],
-      ['kubernetesVersion', '0.0.0 k3s', []],
+      ['kubernetesVersion', 'glance.version', []],
       ['created', 'glance.created', []],
       ['architecture', 'mixed', [{ labels: { [NODE_ARCHITECTURE]: 'amd64' } }, { labels: { [NODE_ARCHITECTURE]: 'intel' } }]],
       ['architecture', 'mixed', [{ labels: { [NODE_ARCHITECTURE]: 'amd64' } }, { labels: { } }]],
       ['architecture', 'Amd64', [{ labels: { [NODE_ARCHITECTURE]: 'amd64' } }]],
       ['architecture', 'unknown', [{ labels: { } }]],
-      ['architecture', '—', [{ metadata: { state: { transitioning: true } } }]],
+      ['architecture', 'glance.architecture', [{ metadata: { state: { transitioning: true } } }]],
     ])('should show %p label %p', (label, text, nodes) => {
       const options = clone(mountOptions);
 
-      options.computed.nodes = () => nodes;
+      options.global.mocks.$store.getters['cluster/all'] = () => nodes;
 
       const wrapper = shallowMount(Dashboard, options);
 

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

@@ -159,7 +159,7 @@ export default {
     };
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     // Remove the data and stop watching resources that were fetched in this page
     // Events in particular can lead to change messages having to be processed when we are no longer interested in events
     this.$store.dispatch('cluster/forgetType', EVENT);
@@ -477,7 +477,10 @@ export default {
           resource: SECRET,
         }
       };
-    }
+    },
+    hasNodes() {
+      return this.nodes?.length > 0;
+    },
   },
 
   methods: {
@@ -598,7 +601,7 @@ export default {
         >{{ currentCluster.kubernetesVersionExtension }}</span>
       </div>
       <div
-        v-if="nodes.length > 0"
+        v-if="hasNodes"
         data-testid="architecture__label"
       >
         <label>{{ t('glance.architecture') }}: </label>
@@ -692,8 +695,8 @@ export default {
 
     <div v-if="clusterServices">
       <div
-        v-for="service in clusterServices"
-        :key="service.name"
+        v-for="(service, i) in clusterServices"
+        :key="i"
         class="k8s-service-status"
         :class="{[service.status]: true }"
         :data-testid="`k8s-service-${ service.name }`"
@@ -866,7 +869,7 @@ export default {
   align-items: center;
 }
 
-.etcd-metrics ::v-deep .external-link {
+.etcd-metrics :deep() .external-link {
   top: -107px;
 }
 

package/pages/c/_cluster/explorer/tools/__tests__/index.test.ts

@@ -16,29 +16,31 @@ describe('page: cluster tools', () => {
         }
       ]
     },
-    mocks: {
-      $route:      { query: {} },
-      $fetchState: {
-        pending: false, error: true, timestamp: Date.now()
-      },
-      $store: {
-        dispatch: (schema: string, opt: { type: string }) => {
-          if (schema === 'management/findAll' && opt.type === MANAGEMENT.PROJECT) {
-            return [];
-          }
+    global: {
+      mocks: {
+        $route:      { query: {} },
+        $fetchState: {
+          pending: false, error: true, timestamp: Date.now()
         },
-        getters: {
-          'features/get':         () => true,
-          'management/schemaFor': (schema: string) => {
-            if (schema === MANAGEMENT.PROJECT) {
-              return true;
+        $store: {
+          dispatch: (schema: string, opt: { type: string }) => {
+            if (schema === 'management/findAll' && opt.type === MANAGEMENT.PROJECT) {
+              return [];
             }
           },
-          currentCluster: { id: 'cluster', status: { provider: 'provider' } },
-          'i18n/t':       jest.fn(),
+          getters: {
+            'features/get':         () => true,
+            'management/schemaFor': (schema: string) => {
+              if (schema === MANAGEMENT.PROJECT) {
+                return true;
+              }
+            },
+            currentCluster: { id: 'cluster', status: { provider: 'provider' } },
+            'i18n/t':       jest.fn(),
+          }
         }
-      }
-    },
+      },
+    }
   };
 
   it('should show apps catalog', async() => {
@@ -53,7 +55,7 @@ describe('page: cluster tools', () => {
   it('should show apps catalog when no permissions to `project` schema', async() => {
     const options = clone(mountOptions);
 
-    options.mocks.$store.dispatch = (schema: string, opt: { type: string }) => {
+    options.global.mocks.$store.dispatch = (schema: string, opt: { type: string }) => {
       if (schema === 'management/findAll' && opt.type === MANAGEMENT.PROJECT) {
         return null;
       }

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

@@ -272,13 +272,13 @@ export default {
       return value;
     },
     toggleCollapse(val, key) {
-      this.$set(this.isCollapsed, key, val);
+      this.isCollapsed[key] = val;
     },
     toggleAll(action) {
       const val = action !== 'expand';
 
       Object.keys(this.isCollapsed).forEach((key) => {
-        this.$set(this.isCollapsed, key, val);
+        this.isCollapsed[key] = val;
       });
     }
   },
@@ -286,7 +286,7 @@ export default {
   watch: {
     fleetWorkspaces(value) {
       value?.filter((ws) => ws.repos?.length).forEach((ws) => {
-        this.$set(this.isCollapsed, ws.id, false);
+        this.isCollapsed[ws.id] = false;
       });
     }
   }
@@ -366,8 +366,8 @@ export default {
         </p>
       </div>
       <CollapsibleCard
-        v-for="ws in workspacesData"
-        :key="ws.id"
+        v-for="(ws, i) in workspacesData"
+        :key="i"
         class="mt-20 mb-40"
         :title="`${t('resourceDetail.masthead.workspace')}: ${ws.nameDisplay}`"
         :is-collapsed="isCollapsed[ws.id]"
@@ -401,7 +401,6 @@ export default {
             key-field="_key"
             :search="false"
             :table-actions="false"
-            v-on="$listeners"
           >
             <template #cell:clustersReady="{row}">
               <span v-if="ws.type === 'namespace'"> - </span>

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

@@ -1,19 +1,17 @@
 <script>
-import { NAME, CHART_NAME } from '@shell/config/product/gatekeeper';
-import InstallRedirect from '@shell/utils/install-redirect';
 import ChartHeading from '@shell/components/ChartHeading';
 import SortableTable from '@shell/components/SortableTable';
 import { Banner } from '@components/Banner';
 import { CONSTRAINT_VIOLATION_CONSTRAINT_LINK, CONSTRAINT_VIOLATION_COUNT, CONSTRAINT_VIOLATION_TEMPLATE_LINK } from '@shell/config/table-headers';
 import { GATEKEEPER } from '@shell/config/types';
+import Loading from '@shell/components/Loading';
 
 export const OPA_GATE_KEEPER_ID = 'cluster/rancher-charts/rancher-gatekeeper';
 
 export default {
   components: {
-    ChartHeading, SortableTable, Banner
+    ChartHeading, SortableTable, Banner, Loading
   },
-  middleware: InstallRedirect(NAME, CHART_NAME),
   async fetch() {
     const constraints = this.constraint ? [this.constraint] : await this.$store.dispatch('cluster/findAll', { type: GATEKEEPER.SPOOFED.CONSTRAINT });
 
@@ -50,7 +48,8 @@ export default {
 </script>
 
 <template>
-  <div>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
     <ChartHeading
       :label="t('gatekeeperIndex.poweredBy')"
       url="https://github.com/open-policy-agent/gatekeeper"

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

@@ -1,12 +1,9 @@
 <script>
 import { mapGetters } from 'vuex';
-import { NAME, CHART_NAME } from '@shell/config/product/istio';
-import InstallRedirect from '@shell/utils/install-redirect';
 import { SERVICE } from '@shell/config/types';
+import Loading from '@shell/components/Loading';
 export default {
-  components: {},
-
-  middleware: InstallRedirect(NAME, CHART_NAME),
+  components: { Loading },
 
   async fetch() {
     try {
@@ -70,7 +67,8 @@ export default {
 </script>
 
 <template>
-  <div>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
     <h1>Overview</h1>
     <h4 v-clean-html="t('istio.poweredBy', {}, true)" />
     <div class="links">

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

@@ -1,6 +1,4 @@
 <script>
-import { NAME, CHART_NAME } from '@shell/config/product/logging';
-import InstallRedirect from '@shell/utils/install-redirect';
 import { LOGGING } from '@shell/config/types';
 import SortableTable from '@shell/components/SortableTable';
 import { allHash } from '@shell/utils/promise';
@@ -8,10 +6,12 @@ import {
   CONFIGURED_PROVIDERS, CLUSTER_OUTPUT, OUTPUT, NAMESPACE, NAME as NAME_COL
 } from '@shell/config/table-headers';
 import ChartHeading from '@shell/components/ChartHeading';
+import Loading from '@shell/components/Loading';
 
 export default {
-  middleware: InstallRedirect(NAME, CHART_NAME),
-  components: { ChartHeading, SortableTable },
+  components: {
+    ChartHeading, SortableTable, Loading
+  },
   async fetch() {
     const getAllOrDefault = (type) => {
       const hasAccess = this.$store.getters[`cluster/schemaFor`](type);
@@ -56,7 +56,11 @@ export default {
 </script>
 
 <template>
-  <div class="logging">
+  <Loading v-if="$fetchState.pending" />
+  <div
+    v-else
+    class="logging"
+  >
     <ChartHeading
       :label="t('logging.overview.poweredBy')"
       url="https://github.com/banzaicloud/logging-operator"

package/pages/c/_cluster/longhorn/__tests__/longhorn.index.test.ts

@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 
 import IconMessage from '@shell/components/IconMessage';
@@ -21,6 +22,7 @@ describe('page: LonghornOverview', () => {
     $store:      {
       dispatch: () => jest.fn,
       getters:  {
+        currentCluster:      () => ({ id: '_' }),
         currentProduct:      () => 'cluster',
         'cluster/findAll':   () => jest.fn(),
         'cluster/schemaFor': () => jest.fn(),
@@ -32,8 +34,9 @@ describe('page: LonghornOverview', () => {
 
   const createWrapper = (overrides?: any) => {
     return shallowMount(LonghornOverview, {
-      mocks: commonMocks,
       ...overrides,
+
+      global: { mocks: commonMocks },
     });
   };
 
@@ -48,7 +51,7 @@ describe('page: LonghornOverview', () => {
     expect(wrapper.vm.externalLinks).toStrictEqual([]);
   });
 
-  it('populates externalLinks proxy link correctly when uiServices contain service', async() => {
+  it.skip('(Vue3 Skip) populates externalLinks proxy link correctly when uiServices contain service', async() => {
     const proxyUrl = `/k8s/clusters/_/api/v1/namespaces/${ longhornFrontend.metadata.namespace }/services/http:longhorn-frontend:80/proxy/`;
 
     interface LinkConfig {
@@ -60,8 +63,7 @@ describe('page: LonghornOverview', () => {
     }
 
     const wrapper = createWrapper({
-      computed: { currentCluster: () => ({ id: '_' }) },
-      stubs:    {
+      stubs: {
         Banner:    { template: '<span />' },
         LazyImage: { template: '<span />' },
       }
@@ -69,7 +71,7 @@ describe('page: LonghornOverview', () => {
 
     wrapper.setData({ uiServices: [longhornFrontend] });
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     const containsProxyUrl = wrapper.vm.externalLinks.find((link: LinkConfig) => link.link);
 

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

@@ -1,11 +1,6 @@
 <script>
 import { mapGetters } from 'vuex';
-
-import InstallRedirect from '@shell/utils/install-redirect';
-
 import { SERVICE } from '@shell/config/types';
-import { NAME, CHART_NAME } from '@shell/config/product/longhorn';
-
 import IconMessage from '@shell/components/IconMessage';
 import LazyImage from '@shell/components/LazyImage';
 import Loading from '@shell/components/Loading';
@@ -15,8 +10,6 @@ export default {
     IconMessage, LazyImage, Loading
   },
 
-  middleware: InstallRedirect(NAME, CHART_NAME),
-
   async fetch() {
     if ( this.$store.getters['cluster/schemaFor'](SERVICE) ) {
       this.uiServices = await this.$store.dispatch('cluster/findMatching', {
@@ -76,8 +69,8 @@ export default {
       class="links"
     >
       <div
-        v-for="fel in externalLinks"
-        :key="fel.label"
+        v-for="(fel, i) in externalLinks"
+        :key="i"
         class="link-container"
       >
         <a

package/pages/c/_cluster/manager/drivers/kontainerDriver/index.vue

@@ -44,9 +44,6 @@ export default {
         buttonDone(false);
       }
     }
-  },
-  mounted() {
-    window.c = this;
   }
 };
 </script>
@@ -59,7 +56,7 @@ export default {
       :resource="resource"
       :type-display="t('drivers.kontainer.title')"
     >
-      <template slot="extraActions">
+      <template #extraActions>
         <AsyncButton
           v-if="canRefreshK8sMetadata"
           mode="refresh"

package/pages/c/_cluster/manager/drivers/nodeDriver/index.vue

@@ -26,10 +26,7 @@ export default {
     rows() {
       return this.allDrivers || [];
     },
-  },
-  mounted() {
-    window.c = this;
-  },
+  }
 };
 </script>
 

package/pages/c/_cluster/manager/jwt.authentication/index.vue

@@ -22,7 +22,7 @@ export default {
   async fetch() {
     const hash = {
       mgmtClusters: this.$fetchType(MANAGEMENT.CLUSTER),
-      proxyConfig:  this.$fetchType(MANAGEMENT.CLUSTER_PROXY_CONFIG)
+      proxyConfig:  this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER_PROXY_CONFIG, opt: { omitExcludeFields: ['metadata.managedFields'] } })
     };
 
     const res = await allHash(hash);
@@ -150,7 +150,11 @@ export default {
 
           const value = config?.enabled || '';
           const configName = config?.metadata?.name || '';
-          const updatedOn = value ? config?.metadata?.creationTimestamp : '';
+          let updatedOn = '';
+
+          if (value) {
+            updatedOn = config?.metadata?.managedFields?.find((field) => field.operation === 'Update')?.time || '';
+          }
           const stateBackground = value ? colorForState(STATES_ENUM.ACTIVE).replace('text', 'bg') : colorForState(STATES_ENUM.INFO).replace('text', 'bg');
           const stateLabel = value ? this.t('jwt.state.enabled') : this.t('jwt.state.disabled');
           const creationTimestamp = cluster.metadata.creationTimestamp;
@@ -159,7 +163,7 @@ export default {
             if (!configName) {
               const clusterProxyConfig = await this.$store.dispatch('management/create', {
                 enabled:  true,
-                metadata: { namespace: id, generateName: 'cluster-proxy-config-' },
+                metadata: { namespace: id, name: 'clusterproxyconfig' },
               });
 
               return clusterProxyConfig.save({ url: 'v1/management.cattle.io.clusterproxyconfigs', method: 'POST' });
@@ -170,7 +174,9 @@ export default {
             }
           };
           const disable = async() => {
-            return config.remove();
+            config.enabled = false;
+
+            return config.save();
           };
 
           rows.push({
@@ -188,7 +194,10 @@ export default {
 
 <template>
   <Loading v-if="$fetchState.pending" />
-  <div v-else>
+  <div
+    v-else
+    class="outlet"
+  >
     <Masthead
       :schema="schema"
       :resource="resource"

package/pages/c/_cluster/monitoring/alertmanagerconfig/_alertmanagerconfigid/receiver.vue

@@ -254,7 +254,7 @@ export default {
             v-if="viewOptions && mode === view"
             :value="currentView"
             :options="viewOptions"
-            @input="handleButtonGroupClick"
+            @update:value="handleButtonGroupClick"
           />
 
           <button

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

@@ -1,9 +1,6 @@
 <script>
 import isEmpty from 'lodash/isEmpty';
-
-import InstallRedirect from '@shell/utils/install-redirect';
 import AlertTable from '@shell/components/AlertTable';
-import { NAME, CHART_NAME } from '@shell/config/product/monitoring';
 import { CATALOG, MONITORING } from '@shell/config/types';
 import { allHash } from '@shell/utils/promise';
 import { findBy } from '@shell/utils/array';
@@ -11,16 +8,16 @@ import { getClusterPrefix } from '@shell/utils/grafana';
 import LazyImage from '@shell/components/LazyImage';
 import SimpleBox from '@shell/components/SimpleBox';
 import { canViewAlertManagerLink, canViewGrafanaLink, canViewPrometheusLink } from '@shell/utils/monitoring';
+import Loading from '@shell/components/Loading';
 
 export default {
   components: {
     LazyImage,
     SimpleBox,
-    AlertTable
+    AlertTable,
+    Loading
   },
 
-  middleware: InstallRedirect(NAME, CHART_NAME),
-
   async fetch() {
     await this.fetchDeps();
   },
@@ -131,7 +128,8 @@ export default {
 </script>
 
 <template>
-  <section>
+  <Loading v-if="$fetchState.pending" />
+  <section v-else>
     <header class="row">
       <div class="col span-12">
         <h1>
@@ -149,8 +147,8 @@ export default {
       <div class="create-resource-container">
         <div class="subtypes-container">
           <a
-            v-for="fel in externalLinks"
-            :key="fel.label"
+            v-for="(fel, i) in externalLinks"
+            :key="i"
             v-clean-tooltip="
               !fel.enabled ? t('monitoring.overview.linkedList.na') : undefined
             "

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

@@ -1,16 +1,12 @@
 <script>
 import { mapGetters } from 'vuex';
-
-import InstallRedirect from '@shell/utils/install-redirect';
-
-import { NAME, CHART_NAME, NEU_VECTOR_NAMESPACE } from '@shell/config/product/neuvector';
+import { NEU_VECTOR_NAMESPACE } from '@shell/config/product/neuvector';
 
 import LazyImage from '@shell/components/LazyImage';
+import Loading from '@shell/components/Loading';
 
 export default {
-  components: { LazyImage },
-
-  middleware: InstallRedirect(NAME, CHART_NAME, undefined, false),
+  components: { LazyImage, Loading },
 
   data() {
     return {
@@ -37,7 +33,8 @@ export default {
 </script>
 
 <template>
-  <section>
+  <Loading v-if="$fetchState.pending" />
+  <section v-else>
     <header class="row">
       <div class="col span-12">
         <h1>
@@ -53,8 +50,8 @@ export default {
     </header>
     <div class="links">
       <div
-        v-for="fel in externalLinks"
-        :key="fel.label"
+        v-for="(fel, i) in externalLinks"
+        :key="i"
         class="link-container"
       >
         <a