@rancher/shell 0.3.29 → 0.4.0

package/assets/translations/en-us.yaml

@@ -874,7 +874,7 @@ catalog:
     versionWindowsIncompatible: Linux only version
     header: Charts
     featuredCharts: Featured Charts
-    noCharts: 'There are no charts available, have you added any repos?'
+    noCharts: 'There are no charts available, have you added any repos or set filters?'
     noWindows: Your repos do not contain any charts capable of being deployed on a cluster with Windows nodes.
     noWindowsAndLinux: Your repos do not contain any charts capable of being deployed on a cluster with both Windows and Linux worker nodes.
     operatingSystems:

package/assets/translations/zh-hans.yaml

@@ -2080,7 +2080,7 @@ drainNode:
 etcdInfoBanner:
   hasLeader: "ETCD 有一个 Leader："
   leaderChanges: "Leader 变化的次数："
-  failedProposals: "失败的 proposal 数量"
+  failedProposals: "失败的 proposal 数量："
 
 fleet:
   dashboard:

package/components/CopyCode.vue

@@ -1,5 +1,7 @@
 <script>
 import { isArray } from '@shell/utils/array';
+import { copyTextToClipboard } from '@shell/utils/clipboard';
+import { exceptionToErrorsArray } from '@shell/utils/error';
 
 function flatten(node) {
   if ( node.text ) {
@@ -27,14 +29,16 @@ export default {
 
       const content = flatten(this.$slots.default).trim();
 
-      this.$copyText(content).then(() => {
+      copyTextToClipboard(content).then(() => {
         this.copied = true;
 
         setTimeout(() => {
           this.copied = false;
         }, 2000);
+        this.$emit('copied');
+      }).catch((e) => {
+        this.$emit('error', exceptionToErrorsArray(e));
       });
-      this.$emit('copied');
     },
   },
 

package/components/CopyToClipboard.vue

@@ -1,5 +1,6 @@
 <script>
 import AsyncButton from '@shell/components/AsyncButton';
+import { copyTextToClipboard } from '@shell/utils/clipboard';
 
 export default {
   components: { AsyncButton },
@@ -18,7 +19,7 @@ export default {
 
   methods: {
     clicked(buttonCb) {
-      this.$copyText(this.text).then(() => {
+      copyTextToClipboard(this.text).then(() => {
         buttonCb(true);
       }).catch(() => {
         buttonCb(false);

package/components/CopyToClipboardText.vue

@@ -1,4 +1,6 @@
 <script>
+import { copyTextToClipboard } from '@shell/utils/clipboard';
+import { exceptionToErrorsArray } from '@shell/utils/error';
 export default {
   props: {
     text: {
@@ -20,17 +22,20 @@ export default {
     clicked(event) {
       if (!this.copied) {
         event.preventDefault();
-        this.$copyText(this.text);
-        this.copied = true;
+        copyTextToClipboard(this.text).then(() => {
+          this.copied = true;
 
-        let t = event.target;
+          let t = event.target;
 
-        if (t.tagName === 'I') {
-          t = t.parentElement || t;
-        }
-        setTimeout(() => {
-          this.copied = false;
-        }, 500);
+          if (t.tagName === 'I') {
+            t = t.parentElement || t;
+          }
+          setTimeout(() => {
+            this.copied = false;
+          }, 500);
+        }).catch((e) => {
+          this.$emit('error', exceptionToErrorsArray(e));
+        });
       }
     },
   }

package/components/EtcdInfoBanner.vue

@@ -23,13 +23,13 @@ export default {
 
     const leader = await hasLeader(monitoringVersion, this.$store.dispatch, this.currentCluster.id);
 
-    this.hasLeader = leader ? this.t('generic.yes') : this.t('generic.no');
+    this.hasLeader = leader ? 'Yes' : 'No';
     this.leaderChanges = await leaderChanges(monitoringVersion, this.$store.dispatch, this.currentCluster.id);
     this.failedProposals = await failedProposals(monitoringVersion, this.$store.dispatch, this.currentCluster.id);
   },
   data() {
     return {
-      hasLeader:       this.t('generic.no'),
+      hasLeader:       'No',
       leaderChanges:   0,
       failedProposals: 0
     };
@@ -46,10 +46,10 @@ export default {
     color="info"
   >
     <div class="datum">
-      <label>{{ t('etcdInfoBanner.hasLeader') }}</label> {{ hasLeader }}
+      <label>{{ t('etcdInfoBanner.hasLeader') }}</label> {{ hasLeader }},
     </div>
     <div class="datum">
-      <label>{{ t('etcdInfoBanner.leaderChanges') }}</label> {{ leaderChanges }}
+      <label>{{ t('etcdInfoBanner.leaderChanges') }}</label> {{ leaderChanges }},
     </div>
     <div class="datum">
       <label>{{ t('etcdInfoBanner.failedProposals') }}</label> {{ failedProposals }}

package/components/Markdown.vue

@@ -13,9 +13,8 @@ export default {
 
   data() {
     return {
-      loaded:    false,
-      marked:    null,
-      dompurify: null,
+      loaded: false,
+      marked: null,
     };
   },
 
@@ -26,15 +25,10 @@ export default {
         breaks:   true
       });
     },
-
-    sanitized() {
-      return this.dompurify.sanitize(this.html);
-    },
   },
 
   async mounted() {
     const marked = (await import(/* webpackChunkName: "markdown" */ 'marked'));
-    const dompurify = (await import(/* webpackChunkName: "markdown" */ 'dompurify')).default;
 
     const renderer = new marked.Renderer();
     const linkRenderer = renderer.link;
@@ -63,11 +57,8 @@ export default {
       return rendered;
     };
 
-    dompurify.setConfig({ ADD_ATTR: ['target'] });
-
     this.marked = marked;
     this.markedRenderer = renderer;
-    this.dompurify = dompurify;
     this.loaded = true;
     this.$emit('loaded', true);
   }
@@ -77,7 +68,7 @@ export default {
 <template>
   <div
     v-if="loaded"
-    v-clean-html="sanitized"
+    v-clean-html="html"
     class="markdown"
   />
   <Loading v-else />
@@ -96,8 +87,20 @@ export default {
 }
 
 .markdown {
+    blockquote {
+      color: rgb(101, 109, 118);
+      border-left: 0.25em solid rgb(208, 215, 222);
+      padding: 0 1em;
+      margin-bottom: 16px;
+    }
+
+    table {
+      border-collapse: collapse;
+    }
+
     TH {
       text-align: left;
+      border: 1px solid #e3e7eb;
     }
 
     table tr th {
@@ -118,6 +121,7 @@ export default {
       text-align: left;
       margin: 0;
       padding: 6px 13px;
+      border: 1px solid #e3e7eb;
     }
 
     table tr th :first-child, table tr td :first-child {

package/components/ResourceDetail/Masthead.vue

@@ -177,13 +177,16 @@ export default {
 
     project() {
       if (this.isNamespace) {
-        const id = (this.value?.metadata?.labels || {})[PROJECT];
-        const clusterId = this.$store.getters['currentCluster'].id;
+        const cluster = this.$store.getters['currentCluster'];
 
-        return this.$store.getters['management/byId'](MANAGEMENT.PROJECT, `${ clusterId }/${ id }`);
-      } else {
-        return null;
+        if (cluster) {
+          const id = (this.value?.metadata?.labels || {})[PROJECT];
+
+          return this.$store.getters['management/byId'](MANAGEMENT.PROJECT, `${ cluster.id }/${ id }`);
+        }
       }
+
+      return null;
     },
 
     banner() {
@@ -370,7 +373,7 @@ export default {
     },
 
     hideNamespaceLocation() {
-      return this.$store.getters['currentProduct'].hideNamespaceLocation;
+      return this.$store.getters['currentProduct'].hideNamespaceLocation || this.value.namespaceLocation === null;
     },
   },
 

package/components/StatusTable.vue

@@ -3,6 +3,8 @@ import {
   LAST_UPDATED, TYPE, REASON, MESSAGE, STATUS
 } from '@shell/config/table-headers';
 import SortableTable from '@shell/components/SortableTable';
+import { copyTextToClipboard } from '@shell/utils/clipboard';
+import { exceptionToErrorsArray } from '@shell/utils/error';
 export default {
   components: { SortableTable },
   props:      {
@@ -31,12 +33,14 @@ export default {
       $event.stopPropagation();
       $event.preventDefault();
 
-      this.$copyText(this.$slots.default[0].text).then(() => {
+      copyTextToClipboard(this.$slots.default[0].text).then(() => {
         this.copied = true;
 
         setTimeout(() => {
           this.copied = false;
         }, 2000);
+      }).catch((e) => {
+        this.$emit('error', exceptionToErrorsArray(e));
       });
     },
   }

package/components/__tests__/CopyCode.test.ts

@@ -1,12 +1,13 @@
 import { mount } from '@vue/test-utils';
 import CopyCode from '@shell/components/CopyCode.vue';
 
+jest.mock('@shell/utils/clipboard', () => {
+  return { copyTextToClipboard: jest.fn(() => Promise.resolve({})) };
+});
+
 describe('component: CopyCode', () => {
   it('should emit copied after click', async() => {
-    const wrapper = mount(CopyCode, {
-      mocks: { $copyText: () => new Promise(() => undefined) },
-      slots: { default: '<div></div>' }
-    });
+    const wrapper = mount(CopyCode, { slots: { default: '<div></div>' } });
 
     await wrapper.find('code').trigger('click');
 

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/FleetSummary.vue

@@ -1,5 +1,4 @@
 <script>
-import capitalize from 'lodash/capitalize';
 import { STATES, STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
 import FleetStatus from '@shell/components/fleet/FleetStatus';
 
@@ -85,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 [];
@@ -179,7 +178,6 @@ export default {
 
   },
 
-  methods: { capitalize },
 };
 </script>
 
@@ -190,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>

package/components/fleet/__tests__/FleetSummary.test.ts

@@ -0,0 +1,316 @@
+import { mount } from '@vue/test-utils';
+import FleetSummary from '@shell/components/fleet/FleetSummary.vue';
+
+const REPO_NAME = 'testrepo';
+
+const REPO_NAME_VARIANT = 'testrepo-again';
+
+const CLUSTER_NAME = 'testcluster';
+
+const mockedBundlesInRepo = [{
+  id:         `fleet-default/${ REPO_NAME }-${ CLUSTER_NAME }-1234`,
+  type:       'fleet.cattle.io.bundle',
+  apiVersion: 'fleet.cattle.io/v1alpha1',
+  kind:       'Bundle',
+  repoName:   REPO_NAME,
+  metadata:   {
+    labels: {
+      'fleet.cattle.io/commit':    '3640888439d1b7b6a53dbeee291a533eea2632ab',
+      'fleet.cattle.io/repo-name': REPO_NAME
+    },
+
+    name:      `${ REPO_NAME }-${ CLUSTER_NAME }-1234`,
+    namespace: 'fleet-default',
+    state:     {
+      error:         false,
+      message:       'Resource is Ready',
+      name:          'active',
+      transitioning: false
+    },
+  },
+  spec: {
+    correctDrift:        { },
+    forceSyncGeneration: 2,
+    ignore:              { },
+    namespace:           'custom-namespace-name',
+    resources:           [
+      {
+        content: 'apiVersion: v1\nkind: ConfigMap\nmetadata:\n  name: configmap-test\n  annotations:\n    {}\n#    key: string\n  labels:\n    {}\n#    key: string\ndata:\n  key1: val1\n  key2: val2\n  key3: val3',
+        name:    'test-configmap.yaml'
+      }
+    ],
+    targets: [
+      {
+        clusterName: 'nb-cluster0-28',
+        namespace:   'custom-namespace-name'
+      }
+    ]
+  }
+},
+{
+  id:         `fleet-default/${ REPO_NAME }-${ CLUSTER_NAME }-5678`,
+  type:       'fleet.cattle.io.bundle',
+  apiVersion: 'fleet.cattle.io/v1alpha1',
+  kind:       'Bundle',
+  repoName:   REPO_NAME,
+  metadata:   {
+    labels: {
+      'fleet.cattle.io/commit':    '3640888439d1b7b6a53dbeee291a533eea2632ab',
+      'fleet.cattle.io/repo-name': REPO_NAME
+    },
+
+    name:      `${ REPO_NAME }-${ CLUSTER_NAME }-5678`,
+    namespace: 'fleet-default',
+    state:     {
+      error:         false,
+      message:       'Resource is Ready',
+      name:          'active',
+      transitioning: false
+    },
+  },
+  spec: {
+    correctDrift:        { },
+    forceSyncGeneration: 2,
+    ignore:              { },
+    namespace:           'custom-namespace-name',
+    resources:           [
+      {
+        content: 'apiVersion: apps/v1\nkind: Deployment\nmetadata:\n  name: nginx-cluster0\n  labels:\n    app: nginx\nspec:\n  replicas: 1\n  selector:\n    matchLabels:\n      app: nginx\n  template:\n    metadata:\n      labels:\n        app: nginx\n    spec:\n      containers:\n      - name: nginx\n        image: nginx:latest\n        ports:\n        - containerPort: 80',
+        name:    'nginx.yml'
+      },
+    ],
+    targets: [
+      {
+        clusterName: 'nb-cluster0-28',
+        namespace:   'custom-namespace-name'
+      }
+    ]
+  }
+}];
+
+const mockedBundlesOutOfRepo = [{
+  id:         `fleet-default/${ REPO_NAME_VARIANT }-${ CLUSTER_NAME }-1234`,
+  type:       'fleet.cattle.io.bundle',
+  apiVersion: 'fleet.cattle.io/v1alpha1',
+  kind:       'Bundle',
+  repoName:   REPO_NAME_VARIANT,
+  metadata:   {
+    labels: {
+      'fleet.cattle.io/commit':    '3640888439d1b7b6a53dbeee291a533eea2632ab',
+      'fleet.cattle.io/repo-name': REPO_NAME_VARIANT
+    },
+
+    name:      `${ REPO_NAME_VARIANT }-${ CLUSTER_NAME }-1234`,
+    namespace: 'fleet-default',
+    state:     {
+      error:         false,
+      message:       'Resource is Ready',
+      name:          'active',
+      transitioning: false
+    },
+  },
+  spec: {
+    correctDrift:        { },
+    forceSyncGeneration: 2,
+    ignore:              { },
+    namespace:           'custom-namespace-name',
+    resources:           [
+      {
+        content: 'apiVersion: v1\nkind: ConfigMap\nmetadata:\n  name: configmap-test\n  annotations:\n    {}\n#    key: string\n  labels:\n    {}\n#    key: string\ndata:\n  key1: val1\n  key2: val2\n  key3: val3',
+        name:    'test-configmap.yaml'
+      }
+    ],
+    targets: [
+      {
+        clusterName: 'nb-cluster0-28',
+        namespace:   'custom-namespace-name'
+      }
+    ]
+  }
+},
+{
+  id:         `fleet-default/${ REPO_NAME_VARIANT }-${ CLUSTER_NAME }-5678`,
+  type:       'fleet.cattle.io.bundle',
+  apiVersion: 'fleet.cattle.io/v1alpha1',
+  kind:       'Bundle',
+  repoName:   REPO_NAME_VARIANT,
+  metadata:   {
+    labels: {
+      'fleet.cattle.io/commit':    '3640888439d1b7b6a53dbeee291a533eea2632ab',
+      'fleet.cattle.io/repo-name': REPO_NAME_VARIANT
+    },
+
+    name:      `${ REPO_NAME_VARIANT }-${ CLUSTER_NAME }-5678`,
+    namespace: 'fleet-default',
+    state:     {
+      error:         false,
+      message:       'Resource is Ready',
+      name:          'active',
+      transitioning: false
+    },
+  },
+  spec: {
+    correctDrift:        { },
+    forceSyncGeneration: 2,
+    ignore:              { },
+    namespace:           'custom-namespace-name',
+    resources:           [
+      {
+        content: 'apiVersion: apps/v1\nkind: Deployment\nmetadata:\n  name: nginx-cluster0\n  labels:\n    app: nginx\nspec:\n  replicas: 1\n  selector:\n    matchLabels:\n      app: nginx\n  template:\n    metadata:\n      labels:\n        app: nginx\n    spec:\n      containers:\n      - name: nginx\n        image: nginx:latest\n        ports:\n        - containerPort: 80',
+        name:    'nginx.yml'
+      },
+    ],
+    targets: [
+      {
+        clusterName: 'nb-cluster0-28',
+        namespace:   'custom-namespace-name'
+      }
+    ]
+  }
+}];
+
+const mockRepo = {
+  id:         `fleet-default/${ REPO_NAME }`,
+  type:       'fleet.cattle.io.gitrepo',
+  apiVersion: 'fleet.cattle.io/v1alpha1',
+  kind:       'GitRepo',
+  metadata:   {
+
+    name:      `${ REPO_NAME }`,
+    namespace: 'fleet-default',
+    state:     {
+      error:         false,
+      message:       'Resource is Ready',
+      name:          'active',
+      transitioning: false
+    },
+  },
+  spec: {
+    branch:                'main',
+    correctDrift:          { enabled: false },
+    forceSyncGeneration:   2,
+    insecureSkipTLSVerify: false,
+    paths:                 [
+      './cluster0'
+    ],
+    repo:            'https://github.com/testuser/testrepo.git',
+    targetNamespace: 'custom-namespace-name',
+    targets:         [
+      { clusterName: `${ CLUSTER_NAME }` }
+    ]
+  },
+  status: {
+    commit:     '3640888439d1b7b6a53dbeee291a533eea2632ab',
+    conditions: [
+      {
+        error:          false,
+        lastUpdateTime: '2023-10-05T18:06:27Z',
+        status:         'True',
+        transitioning:  false,
+        type:           'Ready'
+      },
+      {
+        error:          false,
+        lastUpdateTime: '2023-10-05T20:35:07Z',
+        status:         'True',
+        transitioning:  false,
+        type:           'Accepted'
+      },
+      {
+        error:          false,
+        lastUpdateTime: '2023-10-05T18:05:09Z',
+        status:         'True',
+        transitioning:  false,
+        type:           'ImageSynced'
+      },
+      {
+        error:          false,
+        lastUpdateTime: '2023-10-05T18:06:22Z',
+        status:         'False',
+        transitioning:  false,
+        type:           'Reconciling'
+      },
+      {
+        error:          false,
+        lastUpdateTime: '2023-10-05T18:05:09Z',
+        status:         'False',
+        transitioning:  false,
+        type:           'Stalled'
+      },
+      {
+        error:          false,
+        lastUpdateTime: '2023-10-05T20:35:07Z',
+        status:         'True',
+        transitioning:  false,
+        type:           'Synced'
+      }
+    ],
+    desiredReadyClusters:    1,
+    display:                 { readyBundleDeployments: '2/2' },
+    gitJobStatus:            'Current',
+    lastSyncedImageScanTime: null,
+    observedGeneration:      2,
+    readyClusters:           1,
+    resourceCounts:          {
+      desiredReady: 2,
+      missing:      0,
+      modified:     0,
+      notReady:     0,
+      orphaned:     0,
+      ready:        2,
+      unknown:      0,
+      waitApplied:  0
+    },
+    resources: [
+      {
+        apiVersion: 'apps/v1',
+        id:         'custom-namespace-name/nginx-cluster0',
+        kind:       'Deployment',
+        name:       'nginx-cluster0',
+        namespace:  'custom-namespace-name',
+        state:      'Ready',
+        type:       'apps.deployment'
+      },
+      {
+        apiVersion: 'v1',
+        id:         'custom-namespace-name/configmap-test',
+        kind:       'ConfigMap',
+        name:       'configmap-test',
+        namespace:  'custom-namespace-name',
+        state:      'Ready',
+        type:       'configmap'
+      }
+    ],
+    summary: {
+      desiredReady: 1,
+      ready:        1
+    }
+  }
+};
+
+const mockStore = { getters: { 'i18n/withFallback': (key, opt, fallback) => fallback } };
+
+describe('component: FleetSummary', () => {
+  it.each([
+    [[...mockedBundlesInRepo, ...mockedBundlesOutOfRepo], '2'],
+    [mockedBundlesInRepo, '2'],
+  ])('displays the number of bundles associated with the current gitrepo', (bundles: any[], bundleCount: string) => {
+    const wrapper = mount(FleetSummary, { propsData: { bundles, value: mockRepo }, mocks: { $store: mockStore } });
+
+    const bundleCountEl = wrapper.find('[data-testid="gitrepo-bundle-summary"] .count');
+
+    expect(bundleCountEl.text()).toBe(bundleCount);
+  });
+
+  it.each([
+    [[...mockedBundlesInRepo, ...mockedBundlesOutOfRepo], '2'],
+    [mockedBundlesInRepo, '2'],
+
+  ])('displays the number of deployments associated with the current gitrepo', (bundles: any[], bundleCount: string) => {
+    const wrapper = mount(FleetSummary, { propsData: { bundles, value: mockRepo }, mocks: { $store: mockStore } });
+
+    const bundleCountEl = wrapper.find('[data-testid="gitrepo-deployment-summary"] .count');
+
+    expect(bundleCountEl.text()).toBe(bundleCount);
+  });
+});