@rancher/shell 0.3.29 → 0.5.0

package/components/form/KeyValue.vue

@@ -343,6 +343,7 @@ export default {
 
         for ( const row of input ) {
           let value = row[this.valueName] || '';
+
           const decodedValue = base64Decode(row[this.valueName]);
           const asciiValue = asciiLike(decodedValue);
 
@@ -644,6 +645,7 @@ export default {
               :clearable="false"
               :taggable="keyTaggable"
               :options="calculateOptions(row[keyName])"
+              :data-testid="`select-kv-item-key-${i}`"
               @input="queueUpdate"
             />
             <input
@@ -652,6 +654,7 @@ export default {
               v-model="row[keyName]"
               :disabled="isView || disabled || !keyEditable || isProtected(row.key)"
               :placeholder="keyPlaceholder"
+              :data-testid="`input-kv-item-key-${i}`"
               @input="queueUpdate"
               @paste="onPaste(i, $event)"
             >
@@ -661,6 +664,7 @@ export default {
         <!-- Value -->
         <div
           :key="i+'value'"
+          :data-testid="`kv-item-value-${i}`"
           class="kv-item value"
         >
           <slot

package/components/form/LabeledSelect.vue

@@ -88,6 +88,10 @@ export default {
       default: null,
       type:    [String, Object, Number, Array, Boolean]
     },
+    options: {
+      type:     Array,
+      required: true
+    },
     closeOnSelect: {
       type:    Boolean,
       default: true

package/components/form/Password.vue

@@ -2,6 +2,7 @@
 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 },
@@ -75,6 +76,7 @@ export default {
     }
   },
   methods: {
+    copyTextToClipboard,
     generatePassword() {
       this.password = randomStr(16, CHARSET.ALPHA_NUM);
     },
@@ -109,7 +111,7 @@ export default {
         >
           <a
             href="#"
-            @click.prevent.stop="$copyText(password)"
+            @click.prevent.stop="copyTextToClipboard(password)"
           >{{ t('action.copy') }}</a>
         </div>
         <div

package/components/formatter/Checked.vue

@@ -2,16 +2,24 @@
 
 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:    Boolean,
+      type:    [String, Boolean],
       default: true
     },
-  }
+  },
+
+  computed: {
+    checked() {
+      return this.value === true || this.value === 'true';
+    }
+  },
 };
 </script>
 
 <template>
-  <span v-if="value">
+  <span v-if="checked">
     <i class="icon icon-checkmark" />
   </span>
   <span

package/components/formatter/FleetClusterSummaryGraph.vue

@@ -0,0 +1,27 @@
+<script>
+import FleetSummaryGraph from '@shell/components/formatter/FleetSummaryGraph';
+
+export default {
+  name:       'FleetClusterSummaryGraph',
+  components: { FleetSummaryGraph },
+
+  props: {
+    row: {
+      type:     Object,
+      required: true
+    },
+
+    clusterLabel: {
+      type:     String,
+      required: true
+    }
+  },
+};
+</script>
+
+<template>
+  <FleetSummaryGraph
+    :row="row"
+    :clusterLabel="clusterLabel"
+  />
+</template>

package/components/formatter/FleetSummaryGraph.vue

@@ -12,10 +12,22 @@ 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 || {};
     },
 
@@ -73,7 +85,7 @@ export default {
           >
             <td
               class="text-left pr-20"
-              :class="{[obj.textColor]: true}"
+              :class="{ [obj.textColor]: true }"
             >
               {{ obj.label }}
             </td>
@@ -94,17 +106,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/LiveDuration.vue

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

package/components/formatter/PercentageBar.vue

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

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

@@ -0,0 +1,19 @@
+import { mount } from '@vue/test-utils';
+import Checked from '@shell/components/formatter/Checked.vue';
+
+describe('component: Checked', () => {
+  it.each([true, 'true'])('should display a checkmark when the value is true or "true"', (value: any) => {
+    const wrapper = mount(Checked, { propsData: { value } });
+    const checkmark = wrapper.find('.icon-checkmark');
+
+    expect(checkmark.exists()).toBe(true);
+  });
+
+  it.each([false, '', 'abc'])('should not display a checkmark when the value is anything other than true or "true"', (value: any) => {
+    const wrapper = mount(Checked, { propsData: { value } });
+
+    const checkmark = wrapper.find('.icon-checkmark');
+
+    expect(checkmark.exists()).toBe(false);
+  });
+});

package/components/nav/Group.vue

@@ -390,8 +390,8 @@ export default {
     }
   }
 
-  .body ::v-deep > .child.nuxt-link-active,
-  .header ::v-deep > .child.nuxt-link-exact-active {
+  .body ::v-deep > .child.router-link-active,
+  .header ::v-deep > .child.router-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, [opts]) : true;
+      const enabled = action.enabled ? action.enabled.apply(this, [this.ctx]) : true;
 
       if (fn && enabled) {
         fn.apply(this, [opts, [], { $route: this.$route }]);
@@ -441,7 +441,6 @@ export default {
 
     <div class="rd-header-right">
       <component :is="navHeaderRight" />
-
       <div
         v-if="showFilter"
         class="top"

package/components/nav/TopLevelMenu.vue

@@ -13,6 +13,7 @@ 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';
 
@@ -72,12 +73,17 @@ export default {
       if (bannerSettings) {
         const parsed = JSON.parse(bannerSettings.value);
         const {
-          showFooter, showHeader, bannerFooter, bannerHeader
+          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';
+        const bannerFooterFontSize = bannerFooter?.fontSize || banner?.fontSize || '14px';
+
         return {
-          headerFont: showHeader === 'true' ? this.pxToEm(bannerHeader.fontSize) : '0px',
-          footerFont: showFooter === 'true' ? this.pxToEm(bannerFooter.fontSize) : '0px'
+          headerFont: showHeader === 'true' ? this.pxToEm(bannerHeaderFontSize) : '0px',
+          footerFont: showFooter === 'true' ? this.pxToEm(bannerFooterFontSize) : '0px'
         };
       }
 
@@ -242,7 +248,15 @@ 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: {
@@ -273,6 +287,16 @@ 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();
@@ -435,6 +459,7 @@ export default {
               <nuxt-link
                 class="option"
                 :to="a.to"
+                :class="{'active-menu-link': checkActiveRoute(a) }"
               >
                 <IconOrSvg
                   :icon="a.icon"
@@ -466,6 +491,7 @@ 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
@@ -515,6 +541,7 @@ 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
@@ -592,6 +619,7 @@ export default {
               >
                 <nuxt-link
                   class="option"
+                  :class="{'active-menu-link': checkActiveRoute(a) }"
                   :to="a.to"
                 >
                   <IconOrSvg
@@ -619,6 +647,7 @@ export default {
               >
                 <nuxt-link
                   class="option"
+                  :class="{'active-menu-link': checkActiveRoute(a) }"
                   :to="a.to"
                 >
                   <IconOrSvg
@@ -648,6 +677,7 @@ export default {
               >
                 <nuxt-link
                   class="option"
+                  :class="{'active-menu-link': checkActiveRoute(a) }"
                   :to="a.to"
                 >
                   <IconOrSvg
@@ -867,7 +897,7 @@ export default {
           margin-right: 16px;
         }
 
-        &.nuxt-link-active {
+        &.router-link-active, &.active-menu-link {
           background: var(--primary-hover-bg);
           color: var(--primary-hover-text);
 
@@ -991,7 +1021,7 @@ export default {
               font-size: 14px;
             }
 
-            .nuxt-link-active {
+            .router-link-active {
               &:hover {
                 text-decoration: none;
               }

package/components/nav/Type.vue

@@ -1,7 +1,6 @@
 <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];
 
@@ -31,7 +30,6 @@ export default {
       near:     false,
       over:     false,
       menuPath: this.type.route ? this.$router.resolve(this.type.route)?.route?.path : undefined,
-      linkActiveClass
     };
   },
 
@@ -134,7 +132,7 @@ export default {
     :to="type.route"
     tag="li"
     class="child nav-type"
-    :class="{'root': isRoot, [`depth-${depth}`]: true, [linkActiveClass]: isCurrent}"
+    :class="{'root': isRoot, [`depth-${depth}`]: true, 'router-link-active': 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 { base64Decode } from '@shell/utils/crypto';
+import { base64DecodeToBuffer } 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,6 +25,61 @@ 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: {
@@ -273,11 +328,54 @@ export default {
         console.error('Connect Error', e); // eslint-disable-line no-console
       });
 
+      let logBuffer = [];
+      let truncatedLog = '';
+
       this.socket.addEventListener(EVENT_MESSAGE, (e) => {
-        const data = base64Decode(e.detail.data);
+        const decodedData = e.detail?.data || '';
+        const replacedData = decodedData.replace(/[-_]/g, (char) => char === '-' ? '+' : '/');
+        const b = base64DecodeToBuffer(replacedData);
+        const isTruncated = isLogTruncated(b);
+
+        if (isTruncated === true) {
+          logBuffer.push(...b);
+
+          return;
+        }
+
+        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 = '';
+        }
+
+        if (!d.endsWith('\n')) {
+          const lines = data.split(/\n/);
+
+          if (lines.length === 1) {
+            truncatedLog = data;
+
+            return;
+          }
+          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').forEach((line) => {
+        data.split('\n').filter((line) => line).forEach((line) => {
           let msg = line;
           let time = null;
 

package/components/nav/WindowManager/ContainerShell.vue

@@ -79,6 +79,7 @@ export default {
       fitAddon:       null,
       searchAddon:    null,
       webglAddon:     null,
+      canvasAddon:    null,
       isOpen:         false,
       isOpening:      false,
       backlog:        [],
@@ -155,6 +156,7 @@ 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({
@@ -171,10 +173,11 @@ 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);
@@ -184,6 +187,8 @@ export default {
 
       if (this.webglAddon) {
         terminal.loadAddon(this.webglAddon);
+      } else {
+        terminal.loadAddon(this.canvasAddon);
       }
 
       this.fit();