@rancher/shell 0.3.28 → 0.4.0

package/assets/translations/en-us.yaml

@@ -691,6 +691,15 @@ asyncButton:
     successIcon: checkmark
     waiting: ''
     waitingIcon: refresh
+  manual-refresh:
+    action: ''
+    actionIcon: refresh
+    error: ''
+    errorIcon: error
+    success: ''
+    successIcon: checkmark
+    waiting: ''
+    waitingIcon: refresh
   remove:
     action: Remove
     success: Removed
@@ -865,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:
@@ -1525,6 +1534,9 @@ cluster:
         host:
           label: Host
           note: Specific host to create VM on (leave blank for standalone ESXi or for cluster with DRS)
+        gracefulShutdownTimeout:
+          label: Graceful Shutdown Timeout
+          note: The time in seconds to wait before forcing deleting VMs in the infrastructure. Zero means disable graceful shutdown.
       instanceOptions:
         label: Instance Options
         description: Choose the size and OS of the virtual machine
@@ -5858,7 +5870,9 @@ workload:
         exec:  Command run inside the container exits with status 0
     image: Container Image
     imagePullPolicy: Pull Policy
-    imagePullSecrets: Pull Secrets
+    imagePullSecrets:
+      label: Pull Secrets
+      tooltip: Must be of Type `kubernetes.io/dockercfg` or `kubernetes.io/dockerconfigjson`
     init: Init Container
     lifecycleHook:
       postStart:

package/assets/translations/zh-hans.yaml

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

package/chart/monitoring/grafana/index.vue

@@ -136,7 +136,7 @@ export default {
         newValsOut = {
           accessModes:      null,
           storageClassName: null,
-          size:             null,
+          size:             '10Gi',
           subPath:          null,
           type:             'pvc',
           annotations:      null,
@@ -148,7 +148,7 @@ export default {
         newValsOut = {
           accessModes:      null,
           storageClassName: null,
-          size:             null,
+          size:             '10Gi',
           subPath:          null,
           type:             'statefulset',
           enabled:          true,

package/components/AsyncButton.vue

@@ -273,6 +273,7 @@ export default Vue.extend<{ phase: string}, any, any, any>({
     :data-testid="componentTestid + '-async-button'"
     @click="clicked"
   >
+    <span v-if="mode === 'manual-refresh'">{{ t('action.refresh') }}</span>
     <i
       v-if="displayIcon"
       v-clean-tooltip="tooltip"
@@ -285,3 +286,11 @@ export default Vue.extend<{ phase: string}, any, any, any>({
     />
   </button>
 </template>
+
+<style lang="scss" scoped>
+// refresh mode has icon + text. We need to fix the positioning of the icon and sizing
+.manual-refresh i {
+  margin: 0 0 0 8px !important;
+  font-size: 1rem !important;
+}
+</style>

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/SortableTable/THead.vue

@@ -162,15 +162,13 @@ export default {
       const menu = document.querySelector('.table-options-container');
       const elem = document.querySelector('.table-options-btn');
 
-      if (!this.tableColsMenuPosition) {
-        this.tableColsMenuPosition = fitOnScreen(menu, ev || elem, {
-          overlapX:  true,
-          fudgeX:    26,
-          fudgeY:    -22,
-          positionX: CENTER,
-          positionY: AUTO,
-        });
-      }
+      this.tableColsMenuPosition = fitOnScreen(menu, ev || elem, {
+        overlapX:  true,
+        fudgeX:    326,
+        fudgeY:    -22,
+        positionX: CENTER,
+        positionY: AUTO,
+      });
 
       // toggle visibility
       this.tableColsOptionsVisibility = !this.tableColsOptionsVisibility;

package/components/SortableTable/index.vue

@@ -1026,9 +1026,8 @@ export default {
           <slot name="header-right" />
           <AsyncButton
             v-if="isTooManyItemsToAutoUpdate"
-            v-clean-tooltip="t('performance.manualRefresh.buttonTooltip')"
             class="manual-refresh"
-            mode="refresh"
+            mode="manual-refresh"
             :current-phase="currentPhase"
             @click="debouncedRefreshTableData"
           />

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/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>