@rancher/shell 1.2.3 → 2.0.1

package/components/__tests__/TabTitle.test.ts

@@ -0,0 +1,129 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import TabTitle from '@shell/components/TabTitle.vue';
+import * as privateLabel from '@shell/config/private-label';
+import * as title from '@shell/utils/title';
+
+const localVue = createLocalVue();
+
+localVue.use(Vuex);
+
+describe('component: TabTitle', () => {
+  function createMocks(): any {
+    const mocks = {
+      isExplorer:     false,
+      isHarvester:    false,
+      currentCluster: {
+        nameDisplay: 'Cluster',
+        isHarvester: false
+      },
+      currentProduct:      { name: 'Product' },
+      withFallback:        null,
+      vendor:              'Vendor',
+      child:               'Child',
+      updatePageTitleArgs: null
+    };
+
+    privateLabel.getVendor = () => mocks.vendor;
+    title.updatePageTitle = (...args: any[]) => (mocks.updatePageTitleArgs = args);
+
+    return mocks;
+  }
+
+  function mockStore(mocks: any) {
+    return new Vuex.Store({
+      getters: {
+        isExplorer() {
+          return mocks.isExplorer;
+        },
+        currentCluster() {
+          return mocks.currentCluster;
+        },
+        currentProduct() {
+          return mocks.currentProduct;
+        },
+        'i18n/withFallback'() {
+          return () => mocks.withFallback;
+        }
+      },
+    });
+  }
+
+  it('should set a title including vendor, cluster and child(default slot) for explorer cluster', () => {
+    const mocks = createMocks();
+
+    mocks.isExplorer = true;
+    const store = mockStore(mocks);
+
+    shallowMount(TabTitle, {
+      slots: { default: mocks.child }, store, localVue
+    });
+
+    expect(mocks.updatePageTitleArgs).toStrictEqual([mocks.vendor, mocks.currentCluster.nameDisplay, mocks.child]);
+  });
+
+  it('should set a title including vendor, cluster and child(default slot) for harvester cluster', () => {
+    const mocks = createMocks();
+
+    mocks.currentCluster.isHarvester = true;
+    const store = mockStore(mocks);
+
+    shallowMount(TabTitle, {
+      slots: { default: mocks.child }, store, localVue
+    });
+
+    expect(mocks.updatePageTitleArgs).toStrictEqual([mocks.vendor, mocks.currentCluster.nameDisplay, mocks.child]);
+  });
+
+  it('should set a title including vendor and child(default slot) for product', () => {
+    const mocks = createMocks();
+
+    mocks.currentCluster = null;
+    mocks.withFallback = 'product';
+    const store = mockStore(mocks);
+
+    shallowMount(TabTitle, {
+      slots: { default: mocks.child }, store, localVue
+    });
+
+    expect(mocks.updatePageTitleArgs).toStrictEqual([mocks.vendor, mocks.withFallback, mocks.child]);
+  });
+
+  it('should call console error when not passed a string as a child', () => {
+    const mocks = createMocks();
+    const store = mockStore(mocks);
+
+    global.console = { error: jest.fn() };
+
+    shallowMount(TabTitle, {
+      slots: { }, store, localVue
+    });
+
+    expect(console.error).toHaveBeenCalledWith('The <TabTitle> component only supports text as the child.'); // eslint-disable-line no-console
+  });
+
+  it('should only show child', () => {
+    const mocks = createMocks();
+    const store = mockStore(mocks);
+
+    shallowMount(TabTitle, {
+      slots: { default: mocks.child }, propsData: { breadcrumb: false }, store, localVue
+    });
+
+    expect(mocks.updatePageTitleArgs).toStrictEqual([mocks.child]);
+  });
+
+  it('should exclude vendor', () => {
+    const mocks = createMocks();
+
+    mocks.isExplorer = true;
+
+    const store = mockStore(mocks);
+
+    shallowMount(TabTitle, {
+      slots: { default: mocks.child }, propsData: { includeVendor: false }, store, localVue
+    });
+
+    expect(mocks.updatePageTitleArgs).toStrictEqual([mocks.currentCluster.nameDisplay, mocks.child]);
+  });
+});

package/components/auth/AzureWarning.vue

@@ -56,9 +56,9 @@ export default {
   >
     <p>
       {{ t('authConfig.azuread.updateEndpoint.banner.message') }}
-      <n-link :to="authConfigRoute">
+      <router-link :to="authConfigRoute">
         {{ t('authConfig.azuread.updateEndpoint.banner.linkText') }}
-      </n-link>
+      </router-link>
     </p>
   </div>
 </template>

package/components/auth/RoleDetailEdit.vue

@@ -230,6 +230,16 @@ export default {
             apiGroupLabel = scope.includes('cluster') ? labelForNoApiGroup : labelForNamespacedResourcesWithNoApiGroup;
             apiGroupValue = '';
           }
+
+          if (apiGroup === 'neuvectorApi') {
+            // Some NeuVector resources are namespaced, in which case they go under a different heading
+            const labelForClusterScoped = this.t('rbac.roletemplate.tabs.grantResources.neuvector.labelClusterScoped');
+            const labelForNamespaceScoped = this.t('rbac.roletemplate.tabs.grantResources.neuvector.labelNamespaceScoped');
+
+            apiGroupLabel = scope.includes('cluster') ? labelForClusterScoped : labelForNamespaceScoped;
+            apiGroupValue = 'api.neuvector.com';
+          }
+
           options.push({
             kind:      'group',
             optionKey: apiGroupLabel,

package/components/auth/__tests__/RoleDetailEdit.test.ts

@@ -24,8 +24,9 @@ describe('component: RoleDetailEdit', () => {
         $fetchState: { pending: false },
         $route:      { name: 'anything' },
         $store:      {
-          getters: {
-            currentStore: () => 'store', 'i18n/t': jest.fn(), 'store/schemaFor': jest.fn()
+          dispatch: jest.fn(),
+          getters:  {
+            currentStore: () => 'store', 'i18n/t': jest.fn(), 'store/schemaFor': jest.fn(), 'store/customisation/': jest.fn()
           }
         }
       },

package/components/auth/login/oidc.vue

@@ -4,6 +4,12 @@ import Login from '@shell/mixins/login';
 export default {
   mixins: [Login],
 
+  computed: {
+    uniqueDisplayName() {
+      return this.t('model.authConfig.description.oidc');
+    },
+  },
+
   methods: {
     login() {
       this.$store.dispatch('auth/redirectTo', { provider: this.name });
@@ -20,7 +26,7 @@ export default {
       style="font-size: 18px;"
       @click="login"
     >
-      {{ t('login.loginWithProvider', {provider: displayName}) }}
+      {{ t('login.loginWithProvider', {provider: uniqueDisplayName}) }}
     </button>
   </div>
 </template>

package/components/fleet/FleetBundles.vue

@@ -37,8 +37,8 @@ export default {
 
   computed: {
 
-    allBundles() {
-      // gitrepo model has getter for bundles.
+    allBundlesInRepo() {
+      // gitrepo model has getter for its bundles.
       return this.value.bundles || [];
     },
 
@@ -65,13 +65,7 @@ export default {
     bundles() {
       const harvester = this.harvesterClusters;
 
-      return this.allBundles.filter((bundle) => {
-        const isRepoBundle = bundle.metadata.name.startsWith(`${ this.value.metadata.name }-`);
-
-        if (!isRepoBundle) {
-          return false;
-        }
-
+      return this.allBundlesInRepo.filter((bundle) => {
         const targets = bundle.spec?.targets || [];
 
         // Filter out any bundle that has one target whose cluster is a harvester cluster
@@ -84,7 +78,7 @@ export default {
     },
 
     hidden() {
-      return this.allBundles.length - this.bundles.length;
+      return this.allBundlesInRepo.length - this.bundles.length;
     },
 
     headers() {
@@ -105,7 +99,6 @@ export default {
       return out;
     },
   },
-
   methods: {
     displayWarning(row) {
       return !!row.status?.summary && (row.status.summary.desiredReady !== row.status.summary.ready);
@@ -113,6 +106,7 @@ export default {
   }
 };
 </script>
+
 <template>
   <div>
     <Loading v-if="$fetchState.pending" />

package/components/fleet/FleetClusters.vue

@@ -37,8 +37,8 @@ export default {
         STATE,
         NAME,
         {
-          name:     'nodesReady',
-          labelKey: 'tableHeaders.nodesReady',
+          name:     'bundlesReady',
+          labelKey: 'tableHeaders.bundlesReady',
           value:    'status.display.readyBundles',
           sort:     'status.summary.ready',
           search:   false,
@@ -47,7 +47,7 @@ export default {
         {
           name:     'reposReady',
           labelKey: 'tableHeaders.reposReady',
-          value:    'status.display.readyBundles',
+          value:    'status.readyGitRepos',
           sort:     'status.summary.ready',
           search:   false,
           align:    'center',
@@ -113,19 +113,19 @@ export default {
       <span v-else>{{ row.repoInfo.total }}</span>
     </template>
 
-    <template #cell:nodesReady="{row}">
+    <template #cell:bundlesReady="{row}">
       <span
-        v-if="!row.nodeInfo"
+        v-if="row.bundleInfo.noValidData"
         class="text-muted"
       >&mdash;</span>
       <span
-        v-else-if="row.nodeInfo.unready"
+        v-else-if="row.bundleInfo.ready !== row.bundleInfo.total"
         class="text-warning"
-      >{{ row.nodeInfo.ready }}/{{ row.nodeInfo.total }}</span>
+      >{{ row.bundleInfo.ready }}/{{ row.bundleInfo.total }}</span>
       <span
         v-else
-        :class="{'text-error': !row.nodeInfo.total}"
-      >{{ row.nodeInfo.total }}</span>
+        :class="{'text-error': !row.bundleInfo.total}"
+      >{{ row.bundleInfo.total }}</span>
     </template>
   </ResourceTable>
 </template>

package/components/fleet/FleetIntro.vue

@@ -1,31 +1,25 @@
 <script>
-import { AS, _YAML } from '@shell/config/query-params';
 import { FLEET } from '@shell/config/types';
+import { NAME } from '@shell/config/product/fleet';
 
 export default {
 
   name: 'FleetIntro',
 
   data() {
-    const params = { ...this.$route.params };
-
-    const formRoute = { name: `${ this.$route.name }-create`, params };
-
-    const hasEditComponent = this.$store.getters['type-map/hasCustomEdit'](this.resource);
-
-    const yamlRoute = {
-      name:  `${ this.$route.name }-create`,
-      params,
-      query: { [AS]: _YAML },
+    const gitRepoRoute = {
+      name:   'c-cluster-product-resource-create',
+      params: {
+        product:  NAME,
+        resource: FLEET.GIT_REPO
+      },
     };
 
     const gitRepoSchema = this.$store.getters['management/schemaFor'](FLEET.GIT_REPO);
     const canCreateRepos = gitRepoSchema && gitRepoSchema.resourceMethods.includes('PUT');
 
     return {
-      formRoute,
-      yamlRoute,
-      hasEditComponent,
+      gitRepoRoute,
       canCreateRepos
     };
   },
@@ -41,12 +35,12 @@ export default {
       v-if="canCreateRepos"
       class="actions"
     >
-      <n-link
-        :to="formRoute"
+      <router-link
+        :to="gitRepoRoute"
         class="btn role-secondary"
       >
         {{ t('fleet.gitRepo.repo.addRepo') }}
-      </n-link>
+      </router-link>
     </div>
   </div>
 </template>

package/components/fleet/FleetNoWorkspaces.vue

@@ -31,12 +31,12 @@ export default {
       v-if="canView"
       class="actions"
     >
-      <n-link
+      <router-link
         :to="formRoute"
         class="btn role-secondary"
       >
         {{ t('fleet.gitRepo.workspace.addWorkspace') }}
-      </n-link>
+      </router-link>
     </div>
   </div>
 </template>

package/components/fleet/FleetRepos.vue

@@ -8,9 +8,18 @@ import {
   AGE,
   STATE,
   NAME,
-  FLEET_SUMMARY
+  FLEET_SUMMARY,
+  FLEET_REPO,
+  FLEET_REPO_TARGET,
+  FLEET_REPO_CLUSTERS_READY,
+  FLEET_REPO_CLUSTER_SUMMARY,
+  FLEET_REPO_PER_CLUSTER_STATE
+
 } from '@shell/config/table-headers';
+import { FLEET } from '@shell/config/labels-annotations';
+import { STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
 
+// i18n-ignore repoDisplay
 export default {
 
   name: 'FleetRepos',
@@ -19,6 +28,11 @@ export default {
     ResourceTable, Link, Shortened, FleetIntro
   },
   props: {
+    clusterId: {
+      type:     String,
+      required: false,
+      default:  null,
+    },
     rows: {
       type:     Array,
       required: true,
@@ -54,35 +68,46 @@ export default {
       });
     },
 
+    isClusterView() {
+      return !!this.clusterId;
+    },
+
     noRows() {
       return !this.filteredRows.length;
     },
 
     headers() {
-      const out = [
-        STATE,
-        NAME,
-        {
-          name:     'repo',
-          labelKey: 'tableHeaders.repo',
-          value:    'repoDisplay',
-          sort:     'repoDisplay',
-          search:   ['spec.repo', 'status.commit'],
+      // Cluster summary is only shown in the cluster view
+      const fleetClusterSummary = {
+        ...FLEET_REPO_CLUSTER_SUMMARY,
+        formatterOpts: {
+          // Fleet uses labels to identify clusters
+          clusterLabel: this.clusterId
         },
-        {
-          name:     'target',
-          labelKey: 'tableHeaders.target',
-          value:    'targetInfo.modeDisplay',
-          sort:     ['targetInfo.modeDisplay', 'targetInfo.cluster', 'targetInfo.clusterGroup'],
-        },
-        {
-          name:     'clustersReady',
-          labelKey: 'tableHeaders.clustersReady',
-          value:    'status.readyClusters',
-          sort:     'status.readyClusters',
-          search:   false,
+      };
+
+      // if hasPerClusterState then use the repo state
+      const fleetPerClusterState = {
+        ...FLEET_REPO_PER_CLUSTER_STATE,
+        value: (row) => {
+          const statePerCluster = row.clusterResourceStatus?.find((c) => {
+            return c.clusterLabel === this.clusterId;
+          });
+
+          return statePerCluster ? statePerCluster?.status?.displayStatus : STATES_ENUM.ACTIVE;
         },
-        FLEET_SUMMARY,
+      };
+
+      const summary = this.isClusterView ? [fleetClusterSummary] : [FLEET_REPO_CLUSTERS_READY, FLEET_SUMMARY];
+
+      const state = this.isClusterView ? fleetPerClusterState : STATE;
+
+      const out = [
+        state,
+        NAME,
+        FLEET_REPO,
+        FLEET_REPO_TARGET,
+        ...summary,
         AGE
       ];
 
@@ -92,6 +117,12 @@ export default {
   methods: {
     parseTargetMode(row) {
       return row.targetInfo?.mode === 'clusterGroup' ? this.t('fleet.gitRepo.warningTooltip.clusterGroup') : this.t('fleet.gitRepo.warningTooltip.cluster');
+    },
+
+    clusterViewResourceStatus(row) {
+      return row.clusterResourceStatus.find((c) => {
+        return c.metadata?.labels[FLEET.CLUSTER_NAME] === this.clusterId;
+      });
     }
   },
 };
@@ -111,7 +142,7 @@ export default {
       key-field="_key"
       v-on="$listeners"
     >
-      <template #cell:repo="{row}">
+      <template #cell:repo="{ row }">
         <Link
           :row="row"
           :value="row.spec.repo"
@@ -119,6 +150,7 @@ export default {
           before-icon-key="repoIcon"
           url-key="spec.repo"
         />
+        {{ row.cluster }}
         <template v-if="row.commitDisplay">
           <div class="text-muted">
             <Shortened
@@ -130,7 +162,10 @@ export default {
         </template>
       </template>
 
-      <template #cell:clustersReady="{row}">
+      <template
+        v-if="!isClusterView"
+        #cell:clustersReady="{ row }"
+      >
         <span
           v-if="!row.clusterInfo"
           class="text-muted"
@@ -138,7 +173,8 @@ export default {
         <span
           v-else-if="row.clusterInfo.unready"
           class="text-warning"
-        >{{ row.clusterInfo.ready }}/{{ row.clusterInfo.total }}</span>
+        >{{ row.clusterInfo.ready }}/{{
+          row.clusterInfo.total }}</span>
         <span
           v-else
           class="cluster-count-info"
@@ -152,7 +188,7 @@ export default {
         </span>
       </template>
 
-      <template #cell:target="{row}">
+      <template #cell:target="{ row }">
         {{ row.targetInfo.modeDisplay }}
       </template>
     </ResourceTable>

package/components/fleet/FleetResources.vue

@@ -11,7 +11,12 @@ export default {
     value: {
       type:     Object,
       required: true,
-    }
+    },
+    clusterId: {
+      type:     String,
+      required: false,
+      default:  null,
+    },
   },
 
   computed: {

package/components/fleet/FleetStatus.vue

@@ -1,7 +1,7 @@
 <script>
 import { sortBy } from '@shell/utils/sort';
 import { get } from '@shell/utils/object';
-import { stateSort } from '@shell/plugins/dashboard-store/resource-class';
+import { stateSort, STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
 
 export default {
 
@@ -50,8 +50,8 @@ export default {
   computed: {
     meta() {
       return {
-        total:      this.values.map((x) => x.value).reduce((a, b) => a + b),
-        readyCount: this.values.filter((x) => x.label === 'Success' || x.label === 'Ready').map((x) => x.value).reduce((a, b) => a + b)
+        total:      this.values.map((x) => x.value).reduce((a, b) => a + b, 0),
+        readyCount: this.values.filter((x) => x.status === STATES_ENUM.SUCCESS || x.status === STATES_ENUM.READY).map((x) => x.value).reduce((a, b) => a + b, 0)
       };
     },
 

package/components/fleet/FleetSummary.vue

@@ -1,52 +1,56 @@
 <script>
-import capitalize from 'lodash/capitalize';
 import { STATES, STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
 import FleetStatus from '@shell/components/fleet/FleetStatus';
 
 const getResourceDefaultState = (labelGetter, stateKey) => {
   return {
     ready: {
-      count: 0,
-      color: STATES[STATES_ENUM.READY].color,
-      label: labelGetter(`${ stateKey }.${ STATES_ENUM.READY }`, null, STATES[STATES_ENUM.READY].label )
+      count:  0,
+      color:  STATES[STATES_ENUM.READY].color,
+      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.READY }`, null, STATES[STATES_ENUM.READY].label ),
+      status: STATES_ENUM.READY
     },
     info: {
-      count: 0,
-      color: STATES[STATES_ENUM.INFO].color,
-      label: labelGetter(`${ stateKey }.${ STATES_ENUM.INFO }`, null, STATES[STATES_ENUM.INFO].label )
+      count:  0,
+      color:  STATES[STATES_ENUM.INFO].color,
+      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.INFO }`, null, STATES[STATES_ENUM.INFO].label ),
+      status: STATES_ENUM.INFO
     },
     warning: {
-      count: 0,
-      color: STATES[STATES_ENUM.WARNING].color,
-      label: labelGetter(`${ stateKey }.${ STATES_ENUM.WARNING }`, null, STATES[STATES_ENUM.WARNING].label )
+      count:  0,
+      color:  STATES[STATES_ENUM.WARNING].color,
+      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.WARNING }`, null, STATES[STATES_ENUM.WARNING].label ),
+      status: STATES_ENUM.WARNING
     },
     notready: {
-      count: 0,
-      color: STATES[STATES_ENUM.NOT_READY].color,
-      label: labelGetter(`${ stateKey }.${ STATES_ENUM.NOT_READY }`, null, STATES[STATES_ENUM.NOT_READY].label )
+      count:  0,
+      color:  STATES[STATES_ENUM.NOT_READY].color,
+      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.NOT_READY }`, null, STATES[STATES_ENUM.NOT_READY].label ),
+      status: STATES_ENUM.NOT_READY
     },
     error: {
-      count: 0,
-      color: STATES[STATES_ENUM.ERROR].color,
-      label: labelGetter(`${ stateKey }.${ STATES_ENUM.ERROR }`, null, STATES[STATES_ENUM.ERROR].label )
-
+      count:  0,
+      color:  STATES[STATES_ENUM.ERROR].color,
+      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.ERROR }`, null, STATES[STATES_ENUM.ERROR].label ),
+      status: STATES_ENUM.ERROR
     },
     errapplied: {
-      count: 0,
-      color: STATES[STATES_ENUM.ERR_APPLIED].color,
-      label: labelGetter(`${ stateKey }.${ STATES_ENUM.ERR_APPLIED }`, null, STATES[STATES_ENUM.ERR_APPLIED].label )
-
+      count:  0,
+      color:  STATES[STATES_ENUM.ERR_APPLIED].color,
+      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.ERR_APPLIED }`, null, STATES[STATES_ENUM.ERR_APPLIED].label ),
+      status: STATES_ENUM.ERR_APPLIED,
     },
     waitapplied: {
-      count: 0,
-      color: STATES[STATES_ENUM.WAIT_APPLIED].color,
-      label: labelGetter(`${ stateKey }.${ STATES_ENUM.WAIT_APPLIED }`, null, STATES[STATES_ENUM.WAIT_APPLIED].label )
-
+      count:  0,
+      color:  STATES[STATES_ENUM.WAIT_APPLIED].color,
+      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.WAIT_APPLIED }`, null, STATES[STATES_ENUM.WAIT_APPLIED].label ),
+      status: STATES_ENUM.WAIT_APPLIED
     },
     unknown: {
-      count: 0,
-      color: STATES[STATES_ENUM.UNKNOWN].color,
-      label: labelGetter(`${ stateKey }.${ STATES_ENUM.UNKNOWN }`, null, STATES[STATES_ENUM.UNKNOWN].label )
+      count:  0,
+      color:  STATES[STATES_ENUM.UNKNOWN].color,
+      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.UNKNOWN }`, null, STATES[STATES_ENUM.UNKNOWN].label ),
+      status: STATES_ENUM.UNKNOWN
     }
   };
 };
@@ -80,7 +84,7 @@ export default {
     },
 
     bundleCounts() {
-      const resources = this.bundles.filter((item) => item.metadata.name.startsWith(`${ this.repoName }-`));
+      const resources = this.bundles.filter((item) => item.repoName === this.repoName);
 
       if (!resources.length) {
         return [];
@@ -174,7 +178,6 @@ export default {
 
   },
 
-  methods: { capitalize },
 };
 </script>
 
@@ -185,11 +188,13 @@ export default {
       title="Bundles"
       :values="bundleCounts"
       value-key="count"
+      data-testid="gitrepo-bundle-summary"
     />
     <FleetStatus
       title="Resources"
       :values="resourceCounts"
       value-key="count"
+      data-testid="gitrepo-deployment-summary"
     />
   </div>
 </template>