@rancher/shell 0.5.2 → 1.2.0

package/components/form/Password.vue

@@ -2,7 +2,6 @@
 import { mapGetters } from 'vuex';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { CHARSET, randomStr } from '@shell/utils/string';
-import { copyTextToClipboard } from '@shell/utils/clipboard';
 
 export default {
   components: { LabeledInput },
@@ -76,7 +75,6 @@ export default {
     }
   },
   methods: {
-    copyTextToClipboard,
     generatePassword() {
       this.password = randomStr(16, CHARSET.ALPHA_NUM);
     },
@@ -111,7 +109,7 @@ export default {
         >
           <a
             href="#"
-            @click.prevent.stop="copyTextToClipboard(password)"
+            @click.prevent.stop="$copyText(password)"
           >{{ t('action.copy') }}</a>
         </div>
         <div

package/components/form/Select.vue

@@ -246,7 +246,7 @@ export default {
     >
       <template #option="option">
         <div @mousedown="(e) => onClickOption(option, e)">
-          {{ option.label }}
+          {{ getOptionLabel(option.label) }}
         </div>
       </template>
       <!-- Pass down templates provided by the caller -->

package/components/form/SelectOrCreateAuthSecret.vue

@@ -207,7 +207,7 @@ export default {
         types.push(SECRET_TYPES.RKE_AUTH_CONFIG);
       }
 
-      const out = this.allSecrets
+      let out = this.allSecrets
         .filter((x) => this.namespace && this.limitToNamespace ? x.metadata.namespace === this.namespace : true)
         .filter((x) => {
           // Must match one of the types if given
@@ -254,7 +254,7 @@ export default {
       }
 
       if ( !this.limitToNamespace ) {
-        sortBy(out, 'group');
+        out = sortBy(out, 'group');
         if ( out.length ) {
           let lastGroup = '';
 
@@ -509,7 +509,7 @@ export default {
         <div :class="moreCols">
           <LabeledInput
             v-model="publicKey"
-            data-testid="auth-secret-basic-public-key"
+            data-testid="auth-secret-basic-username"
             :mode="mode"
             label-key="selectOrCreateAuthSecret.basic.username"
           />
@@ -517,7 +517,7 @@ export default {
         <div :class="moreCols">
           <LabeledInput
             v-model="privateKey"
-            data-testid="auth-secret-basic-private-key"
+            data-testid="auth-secret-basic-password"
             :mode="mode"
             type="password"
             label-key="selectOrCreateAuthSecret.basic.password"

package/components/form/__tests__/KeyValue.test.ts

@@ -47,7 +47,7 @@ describe('component: KeyValue', () => {
       stubs:      { CodeMirror: true }
     });
 
-    const inputFieldTextArea = wrapper.find('[data-testid="text-area-auto-grow"]');
+    const inputFieldTextArea = wrapper.find('[data-testid="value-multiline"]');
 
     inputFieldTextArea.setValue('bar\n');
 

package/components/formatter/Checked.vue

@@ -2,24 +2,16 @@
 
 export default {
   props: {
-    // When sortabletable calculates these values it converts null and undefined to ''
-    // passing '' to a prop typed as Boolean coerces it to true
     value: {
-      type:    [String, Boolean],
+      type:    Boolean,
       default: true
     },
-  },
-
-  computed: {
-    checked() {
-      return this.value === true || this.value === 'true';
-    }
-  },
+  }
 };
 </script>
 
 <template>
-  <span v-if="checked">
+  <span v-if="value">
     <i class="icon icon-checkmark" />
   </span>
   <span

package/components/formatter/ClusterProvider.vue

@@ -6,6 +6,23 @@ export default {
       required: true
     },
   },
+  data(props) {
+    const mgmt = props.row?.mgmt;
+
+    return {
+      // The isImported getter on the provisioning cluster
+      // model doesn't work for imported K3s clusters, in
+      // which case it returns 'k3s' instead of 'imported.'
+      // This is the workaround.
+      isImported: mgmt?.providerForEmberParam === 'import' ||
+        // when imported cluster is GKE
+        !!mgmt?.spec?.gkeConfig?.imported ||
+        // or AKS
+        !!mgmt?.spec?.aksConfig?.imported ||
+        // or EKS
+        !!mgmt?.spec?.eksConfig?.imported
+    };
+  },
 };
 </script>
 
@@ -28,7 +45,7 @@ export default {
     <template v-else-if="row.isCustom">
       {{ t('cluster.provider.custom') }}
     </template>
-    <template v-else-if="row.isImported">
+    <template v-else-if="isImported">
       {{ t('cluster.provider.imported') }}
     </template>
     <div class="text-muted">

package/components/formatter/FleetSummaryGraph.vue

@@ -12,22 +12,10 @@ export default {
       type:     Object,
       required: true
     },
-
-    clusterLabel: {
-      type:     String,
-      required: false,
-      default:  null,
-    }
   },
 
   computed: {
     summary() {
-      if (this.clusterLabel) {
-        return this.row.clusterResourceStatus.find((x) => {
-          return x.clusterLabel === this.clusterLabel;
-        })?.status.resourceCounts || {};
-      }
-
       return this.row.status?.resourceCounts || {};
     },
 
@@ -85,7 +73,7 @@ export default {
           >
             <td
               class="text-left pr-20"
-              :class="{ [obj.textColor]: true }"
+              :class="{[obj.textColor]: true}"
             >
               {{ obj.label }}
             </td>
@@ -106,17 +94,17 @@ export default {
 </template>
 
 <style lang="scss">
-.col-scale {
-  position: relative;
+  .col-scale {
+    position: relative;
 
-  .trigger {
-    width: 100%;
+    .trigger {
+      width: 100%;
+    }
   }
-}
 
-.scale {
-  margin: 0;
-  padding: 0;
-  line-height: initial;
-}
+  .scale {
+    margin: 0;
+    padding: 0;
+    line-height: initial;
+  }
 </style>

package/components/formatter/LiveDate.vue

@@ -34,6 +34,16 @@ export default {
     showTooltip: {
       type:    Boolean,
       default: true
+    },
+
+    /**
+     * Determines if the live date should behave like a countdown by comparing
+     * the provided value and the current date. When the countdown reaches 0, a
+     * "-" is rendered.
+     */
+    isCountdown: {
+      type:    Boolean,
+      default: false,
     }
   },
 
@@ -104,6 +114,12 @@ export default {
         return 300;
       }
 
+      if (this.isCountdown && now.valueOf() > this.dayValue?.valueOf()) {
+        this.label = '-';
+
+        return 300;
+      }
+
       const diff = diffFrom(this.dayValue, now);
       const prefix = (diff.diff < 0 || !this.addPrefix ? '' : '-');
 

package/components/formatter/LiveDuration.vue

@@ -57,7 +57,7 @@ export default {
       const now = day();
 
       from = from || now;
-      const seconds = Math.abs(value.diff(from, 'seconds'));
+      const seconds = Math.abs(value.diff(now, 'seconds'));
 
       return elapsedTime(seconds);
     },

package/components/formatter/PercentageBar.vue

@@ -30,7 +30,7 @@ export default {
 </script>
 
 <template>
-  <p v-if="!value || value === '0' || isNaN(value)">
+  <p v-if="!value || value === '0'">
     {{ t('generic.na') }}
   </p>
   <PercentageBarComponent

package/components/formatter/__tests__/ClusterProvider.test.ts

@@ -0,0 +1,28 @@
+import { mount } from '@vue/test-utils';
+import ClusterProvider from '@shell/components/formatter/ClusterProvider.vue';
+
+describe('component: ClusterProvider', () => {
+  const importedGkeClusterInfo = { mgmt: { spec: { gkeConfig: { imported: true } } } };
+  const importedAksClusterInfo = { mgmt: { spec: { aksConfig: { imported: true } } } };
+  const importedEksClusterInfo = { mgmt: { spec: { eksConfig: { imported: true } } } };
+  const notImportedGkeClusterInfo = { mgmt: { spec: { gkeConfig: { imported: false } } } };
+  const importedClusterInfoWithProviderForEmberParam = { mgmt: { providerForEmberParam: 'import' } };
+
+  describe('isImported', () => {
+    const testCases = [
+      [importedGkeClusterInfo, true],
+      [importedAksClusterInfo, true],
+      [importedEksClusterInfo, true],
+      [notImportedGkeClusterInfo, false],
+      [importedClusterInfoWithProviderForEmberParam, true],
+      [{}, false],
+    ];
+
+    it.each(testCases)('should return the isImported value properly based on the props data', (row, expected) => {
+      const wrapper = mount(ClusterProvider, { propsData: { row } });
+
+      expect(wrapper.vm.$data.isImported).toBe(expected);
+    }
+    );
+  });
+});

package/components/nav/Group.vue

@@ -390,8 +390,8 @@ export default {
     }
   }
 
-  .body ::v-deep > .child.router-link-active,
-  .header ::v-deep > .child.router-link-exact-active {
+  .body ::v-deep > .child.nuxt-link-active,
+  .header ::v-deep > .child.nuxt-link-exact-active {
     padding: 0;
 
     A, A I {

package/components/nav/Header.vue

@@ -311,7 +311,7 @@ export default {
         product: this.currentProduct.name,
         cluster: this.currentCluster,
       };
-      const enabled = action.enabled ? action.enabled.apply(this, [this.ctx]) : true;
+      const enabled = action.enabled ? action.enabled.apply(this, [opts]) : true;
 
       if (fn && enabled) {
         fn.apply(this, [opts, [], { $route: this.$route }]);
@@ -441,6 +441,7 @@ export default {
 
     <div class="rd-header-right">
       <component :is="navHeaderRight" />
+
       <div
         v-if="showFilter"
         class="top"

package/components/nav/TopLevelMenu.vue

@@ -13,7 +13,6 @@ import { getVersionInfo } from '@shell/utils/version';
 import { LEGACY } from '@shell/store/features';
 import { SETTING } from '@shell/config/settings';
 import { filterOnlyKubernetesClusters, filterHiddenLocalCluster } from '@shell/utils/cluster';
-import { getProductFromRoute } from '@shell/middleware/authenticated';
 import { isRancherPrime } from '@shell/config/version';
 import Pinned from '@shell/components/nav/Pinned';
 
@@ -75,7 +74,6 @@ export default {
         const {
           showFooter, showHeader, bannerFooter, bannerHeader, banner
         } = parsed;
-
         // add defaults to accomodate older JSON structures for banner definitions without breaking the UI
         // https://github.com/rancher/dashboard/issues/10140
         const bannerHeaderFontSize = bannerHeader?.fontSize || banner?.fontSize || '14px';
@@ -248,15 +246,7 @@ export default {
 
     hasSupport() {
       return isRancherPrime() || this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.SUPPORTED )?.value === 'true';
-    },
-
-    isCurrRouteClusterExplorer() {
-      return this.$route?.name?.startsWith('c-cluster');
-    },
-
-    productFromRoute() {
-      return getProductFromRoute(this.$route);
-    },
+    }
   },
 
   watch: {
@@ -287,16 +277,6 @@ export default {
       return `${ lineHeightInEm }em`;
     },
 
-    checkActiveRoute(obj, isClusterRoute) {
-      // for Cluster links in main nav: check if route is a cluster explorer one + check if route cluster matches cluster obj id + check if curr product matches route product
-      if (isClusterRoute) {
-        return this.isCurrRouteClusterExplorer && this.$route?.params?.cluster === obj?.id && this.productFromRoute === this.currentProduct?.name;
-      }
-
-      // for remaining main nav items, check if curr product matches route product is enough
-      return this.productFromRoute === obj?.value;
-    },
-
     handler(e) {
       if (e.keyCode === KEY.ESCAPE ) {
         this.hide();
@@ -459,7 +439,6 @@ export default {
               <nuxt-link
                 class="option"
                 :to="a.to"
-                :class="{'active-menu-link': checkActiveRoute(a) }"
               >
                 <IconOrSvg
                   :icon="a.icon"
@@ -491,7 +470,6 @@ export default {
                     v-if="c.ready"
                     :data-testid="`menu-cluster-${ c.id }`"
                     class="cluster selector option"
-                    :class="{'active-menu-link': checkActiveRoute(c, true) }"
                     :to="{ name: 'c-cluster-explorer', params: { cluster: c.id } }"
                   >
                     <ClusterIconMenu
@@ -541,7 +519,6 @@ export default {
                     v-if="c.ready"
                     :data-testid="`menu-cluster-${ c.id }`"
                     class="cluster selector option"
-                    :class="{'active-menu-link': checkActiveRoute(c, true) }"
                     :to="{ name: 'c-cluster-explorer', params: { cluster: c.id } }"
                   >
                     <ClusterIconMenu
@@ -619,7 +596,6 @@ export default {
               >
                 <nuxt-link
                   class="option"
-                  :class="{'active-menu-link': checkActiveRoute(a) }"
                   :to="a.to"
                 >
                   <IconOrSvg
@@ -647,7 +623,6 @@ export default {
               >
                 <nuxt-link
                   class="option"
-                  :class="{'active-menu-link': checkActiveRoute(a) }"
                   :to="a.to"
                 >
                   <IconOrSvg
@@ -677,7 +652,6 @@ export default {
               >
                 <nuxt-link
                   class="option"
-                  :class="{'active-menu-link': checkActiveRoute(a) }"
                   :to="a.to"
                 >
                   <IconOrSvg
@@ -897,7 +871,7 @@ export default {
           margin-right: 16px;
         }
 
-        &.router-link-active, &.active-menu-link {
+        &.nuxt-link-active {
           background: var(--primary-hover-bg);
           color: var(--primary-hover-text);
 
@@ -1021,7 +995,7 @@ export default {
               font-size: 14px;
             }
 
-            .router-link-active {
+            .nuxt-link-active {
               &:hover {
                 text-decoration: none;
               }

package/components/nav/Type.vue

@@ -1,6 +1,7 @@
 <script>
 import Favorite from '@shell/components/nav/Favorite';
 import { FAVORITE, USED } from '@shell/store/type-map';
+import { linkActiveClass } from '@shell/config/router';
 
 const showFavoritesFor = [FAVORITE, USED];
 
@@ -30,6 +31,7 @@ export default {
       near:     false,
       over:     false,
       menuPath: this.type.route ? this.$router.resolve(this.type.route)?.route?.path : undefined,
+      linkActiveClass
     };
   },
 
@@ -132,7 +134,7 @@ export default {
     :to="type.route"
     tag="li"
     class="child nav-type"
-    :class="{'root': isRoot, [`depth-${depth}`]: true, 'router-link-active': isCurrent}"
+    :class="{'root': isRoot, [`depth-${depth}`]: true, [linkActiveClass]: isCurrent}"
     :exact="type.exact"
   >
     <a

package/components/nav/WindowManager/ContainerLogs.vue

@@ -2,7 +2,7 @@
 import { saveAs } from 'file-saver';
 import AnsiUp from 'ansi_up';
 import { addParams } from '@shell/utils/url';
-import { base64DecodeToBuffer } from '@shell/utils/crypto';
+import { base64Decode } from '@shell/utils/crypto';
 import { LOGS_RANGE, LOGS_TIME, LOGS_WRAP } from '@shell/store/prefs';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { Checkbox } from '@components/Form/Checkbox';
@@ -25,61 +25,6 @@ import Window from './Window';
 
 let lastId = 1;
 const ansiup = new AnsiUp();
-// Convert arrayBuffer(Uint8Array) to string
-// ref: https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder
-// ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/of
-const ab2str = (input, outputEncoding = 'utf8') => {
-  const decoder = new TextDecoder(outputEncoding);
-
-  return decoder.decode(input);
-};
-
-// The utf-8 encoded messages pushed by websocket may truncate multi-byte utf-8 characters,
-// which causes the front-end to be unable to parse the truncated multi-byte utf-8 characters in the previous and next messages when decoding.
-// Therefore, we need to determine whether the last 4 bytes of the current pushed message contain incomplete utf-8 encoded characters.
-// ref: https://en.wikipedia.org/wiki/UTF-8#Encoding
-const isLogTruncated = (uint8ArrayBuffer) => {
-  const len = uint8ArrayBuffer.length;
-  const count = Math.min(4, len);
-  let isTruncated = false;
-
-  // Parses the last ${count} bytes of the array to determine if there are any truncated utf-8 characters.
-  for ( let i = 0; i < count; i++ ) {
-    const a = uint8ArrayBuffer[len - (1 + i)];
-
-    // 1 byte utf-8 character in binary form: 0xxxxxxxxx
-    if ((a & 0b10000000) === 0b00000000) {
-      break;
-    }
-    // Multi-byte utf-8 character, intermediate binary form: 10xxxxxx
-    if ((a & 0b11000000) === 0b10000000) {
-      continue;
-    }
-    // 2 byte utf-8 character in binary form: 110xxxxx 10xxxxxx
-    if ((a & 0b11100000) === 0b11000000) {
-      if ( i !== 1) {
-        isTruncated = true;
-      }
-      break;
-    }
-    // 3 byte utf-8 character in binary form: 1110xxxx 10xxxxxx 10xxxxxx
-    if ((a & 0b11110000) === 0b11100000) {
-      if (i !== 2) {
-        isTruncated = true;
-      }
-      break;
-    }
-    // 4 byte utf-8 character in binary form: 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx
-    if ((a & 0b11111000) === 0b11110000) {
-      if (i !== 3) {
-        isTruncated = true;
-      }
-      break;
-    }
-  }
-
-  return isTruncated;
-};
 
 export default {
   components: {
@@ -328,80 +273,34 @@ export default {
         console.error('Connect Error', e); // eslint-disable-line no-console
       });
 
-      let logBuffer = [];
-      let truncatedLog = '';
-
       this.socket.addEventListener(EVENT_MESSAGE, (e) => {
-        const decodedData = e.detail?.data || '';
-        const replacedData = decodedData.replace(/[-_]/g, (char) => char === '-' ? '+' : '/');
-        const b = base64DecodeToBuffer(replacedData);
-        const isTruncated = isLogTruncated(b);
+        const line = base64Decode(e.detail.data);
 
-        if (isTruncated === true) {
-          logBuffer.push(...b);
-
-          return;
-        }
+        let msg = line;
+        let time = null;
 
-        let d;
-
-        // If the logBuffer is not empty,
-        // there are truncated utf-8 characters in the previous message
-        // that need to be merged with the current message before decoding.
-        if (logBuffer.length > 0) {
-          // Convert arrayBuffer(Uint8Array) to string
-          // ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/of
-          d = ab2str(Uint8Array.of(...logBuffer, ...b));
-          logBuffer = [];
-        } else {
-          d = b.toString();
-        }
-        let data = d;
-
-        if (truncatedLog) {
-          data = `${ truncatedLog }${ d }`;
-          truncatedLog = '';
-        }
+        const idx = line.indexOf(' ');
 
-        if (!d.endsWith('\n')) {
-          const lines = data.split(/\n/);
+        if ( idx > 0 ) {
+          const timeStr = line.substr(0, idx);
+          const date = new Date(timeStr);
 
-          if (lines.length === 1) {
-            truncatedLog = data;
-
-            return;
+          if ( !isNaN(date.getSeconds()) ) {
+            time = date.toISOString();
+            msg = line.substr(idx + 1);
           }
-          data = lines.slice(0, -1).join('\n');
-          truncatedLog = lines.slice(-1);
         }
-        // Websocket message may contain multiple lines - loop through each line, one by one
-        data.split('\n').filter((line) => line).forEach((line) => {
-          let msg = line;
-          let time = null;
-
-          const idx = line.indexOf(' ');
-
-          if ( idx > 0 ) {
-            const timeStr = line.substr(0, idx);
-            const date = new Date(timeStr);
 
-            if ( !isNaN(date.getSeconds()) ) {
-              time = date.toISOString();
-              msg = line.substr(idx + 1);
-            }
-          }
-
-          const parsedLine = {
-            id:     lastId++,
-            msg:    ansiup.ansi_to_html(msg),
-            rawMsg: msg,
-            time,
-          };
+        const parsedLine = {
+          id:     lastId++,
+          msg:    ansiup.ansi_to_html(msg),
+          rawMsg: msg,
+          time,
+        };
 
-          Object.freeze(parsedLine);
+        Object.freeze(parsedLine);
 
-          this.backlog.push(parsedLine);
-        });
+        this.backlog.push(parsedLine);
       });
 
       this.socket.connect();

package/components/nav/WindowManager/ContainerShell.vue

@@ -79,7 +79,6 @@ export default {
       fitAddon:       null,
       searchAddon:    null,
       webglAddon:     null,
-      canvasAddon:    null,
       isOpen:         false,
       isOpening:      false,
       backlog:        [],
@@ -156,7 +155,6 @@ export default {
         webgl:    import(/* webpackChunkName: "xterm" */ 'xterm-addon-webgl'),
         weblinks: import(/* webpackChunkName: "xterm" */ 'xterm-addon-web-links'),
         search:   import(/* webpackChunkName: "xterm" */ 'xterm-addon-search'),
-        canvas:   import(/* webpackChunkName: "xterm" */ 'xterm-addon-canvas')
       });
 
       const terminal = new xterm.Terminal({
@@ -173,11 +171,10 @@ export default {
       this.searchAddon = new addons.search.SearchAddon();
 
       try {
-        this.webglAddon = new addons.webgl.WebglAddon();
+        this.webglAddon = new addons.webgl.WebGlAddon();
       } catch (e) {
         // Some browsers (Safari) don't support the webgl renderer, so don't use it.
         this.webglAddon = null;
-        this.canvasAddon = new addons.canvas.CanvasAddon();
       }
 
       terminal.loadAddon(this.fitAddon);
@@ -187,8 +184,6 @@ export default {
 
       if (this.webglAddon) {
         terminal.loadAddon(this.webglAddon);
-      } else {
-        terminal.loadAddon(this.canvasAddon);
       }
 
       this.fit();