@rancher/shell 1.2.3 → 2.0.1

package/components/nav/Type.vue

@@ -1,13 +1,14 @@
 <script>
 import Favorite from '@shell/components/nav/Favorite';
-import { FAVORITE, USED } from '@shell/store/type-map';
-import { linkActiveClass } from '@shell/config/router';
+import { TYPE_MODES } from '@shell/store/type-map';
 
-const showFavoritesFor = [FAVORITE, USED];
+import TabTitle from '@shell/components/TabTitle';
+
+const showFavoritesFor = [TYPE_MODES.FAVORITE, TYPE_MODES.USED];
 
 export default {
 
-  components: { Favorite },
+  components: { Favorite, TabTitle },
 
   props: {
     type: {
@@ -27,77 +28,32 @@ export default {
   },
 
   data() {
-    return {
-      near:     false,
-      over:     false,
-      menuPath: this.type.route ? this.$router.resolve(this.type.route)?.route?.path : undefined,
-      linkActiveClass
-    };
+    return { near: false };
   },
 
   computed: {
-    isCurrent() {
-      // This is required to avoid scenarios where fragments break vue routers location matching
-      // For example, the following fails
-      // Curruent Path /c/c-m-hzqf4tqt/explorer/members#project-membership
-      // Menu Path /c/c-m-hzqf4tqt/explorer/members
-      // vue-router exact-path="true" fixes this (https://v3.router.vuejs.org/api/#exact-path),
-      // but fails when the the current path is a child (for instance a resource detail page)
-
-      // Scenarios to consider
-      // - Fragement world
-      //   Curruent Path /c/c-m-hzqf4tqt/explorer/members#project-membership
-      //   Menu Path /c/c-m-hzqf4tqt/explorer/members
-      // - Similar current paths
-      //   /c/c-m-hzqf4tqt/fleet/fleet.cattle.io.bundlenamespacemapping
-      //   /c/c-m-hzqf4tqt/fleet/fleet.cattle.io.bundle
-      // - Other menu items that appear in current menu item
-      //   /c/c-m-hzqf4tqt/fleet
-      //   /c/c-m-hzqf4tqt/fleet/management.cattle.io.fleetworkspace
-
-      // If there's no hash the n-link will determine it's linkActiveClass correctly, so avoid this faff
-      const invalidHash = !this.$route.hash;
-      // Lets be super safe
-      const invalidProps = !this.menuPath || !this.$route.path;
-
-      if (invalidHash || invalidProps) {
-        return false;
-      }
-
-      // We're kind of, but in a fixing way, copying n-link --> vue-router link see vue-router/src/components/link.js & vue-router/src/util/route.js
-      // We're only going to compare the path and ignore query and fragment
-
-      if (this.type.exact) {
-        return this.$route.path === this.menuPath;
-      }
-
-      const currentPath = this.$route.path.split('/');
-      const menuPath = this.menuPath.split('/');
-
-      if (menuPath.length > currentPath.length) {
-        return false;
-      }
-
-      for (let i = 0; i < menuPath.length; i++) {
-        if (menuPath[i] !== currentPath[i]) {
-          return false;
-        }
-      }
-
-      return true;
-    },
-
     showFavorite() {
       return ( this.type.mode && this.near && showFavoritesFor.includes(this.type.mode) );
     },
 
     showCount() {
-      return typeof this.type.count !== 'undefined';
+      return this.count !== undefined && this.count !== null;
     },
 
     namespaceIcon() {
       return this.type.namespaced;
     },
+
+    count() {
+      if (this.type.count !== undefined) {
+        return this.type.count;
+      }
+
+      const inStore = this.$store.getters['currentStore'](this.type.name);
+
+      return this.$store.getters[`${ inStore }/count`]({ name: this.type.name });
+    }
+
   },
 
   methods: {
@@ -105,14 +61,6 @@ export default {
       this.near = val;
     },
 
-    setOver(val) {
-      this.over = val;
-    },
-
-    removeFavorite() {
-      this.$store.dispatch('type-map/removeFavorite', this.type.name);
-    },
-
     selectType() {
       // Prevent issues if custom NavLink is used #5047
       if (this.type?.route) {
@@ -128,57 +76,74 @@ export default {
 </script>
 
 <template>
-  <n-link
+  <router-link
     v-if="type.route"
     :key="type.name"
+    v-slot="{ href, navigate, isActive, isExactActive }"
+    custom
     :to="type.route"
-    tag="li"
-    class="child nav-type"
-    :class="{'root': isRoot, [`depth-${depth}`]: true, [linkActiveClass]: isCurrent}"
     :exact="type.exact"
+    :exact-path="type['exact-path']"
   >
-    <a
-      @click="selectType"
-      @mouseenter="setNear(true)"
-      @mouseleave="setNear(false)"
+    <li
+      class="child nav-type"
+      :class="{'root': isRoot, [`depth-${depth}`]: true, 'router-link-active': isActive, 'router-link-exact-active': isExactActive}"
+      @click="navigate"
+      @keypress.enter="navigate"
     >
-      <span
-        v-if="type.labelKey"
-        class="label"
-      ><t :k="type.labelKey" /></span>
-      <span
-        v-else
-        v-clean-html="type.labelDisplay || type.label"
-        class="label"
-        :class="{'no-icon': !type.icon}"
-      />
-      <span
-        v-if="showFavorite || showCount"
-        class="count"
+      <TabTitle
+        v-if="isExactActive"
+        :show-child="false"
       >
-        <Favorite
-          v-if="showFavorite"
-          :resource="type.name"
-        />
-        <i
-          v-if="namespaceIcon"
-          class="icon icon-namespace namespaced"
+        {{ type.labelKey ? t(type.labelKey) : (type.labelDisplay || type.label) }}
+      </TabTitle>
+      <a
+        :href="href"
+        @click="selectType(); navigate($event);"
+        @mouseenter="setNear(true)"
+        @mouseleave="setNear(false)"
+      >
+        <span
+          v-if="type.labelKey"
+          class="label"
+        ><t :k="type.labelKey" /></span>
+        <span
+          v-else
+          v-clean-html="type.labelDisplay || type.label"
+          class="label"
+          :class="{'no-icon': !type.icon}"
         />
-        {{ type.count }}
-      </span>
-    </a>
-  </n-link>
+        <span
+          v-if="showFavorite || namespaceIcon || showCount"
+          class="count"
+        >
+          <Favorite
+            v-if="showFavorite"
+            :resource="type.name"
+          />
+          <i
+            v-if="namespaceIcon"
+            class="icon icon-namespace"
+            :class="{'ns-and-icon': showCount}"
+            data-testid="type-namespaced"
+          />
+          <span
+            v-if="showCount"
+            data-testid="type-count"
+          >{{ count }}</span>
+        </span>
+      </a>
+    </li>
+  </router-link>
   <li
     v-else-if="type.link"
     class="child nav-type"
+    data-testid="link-type"
   >
     <a
       :href="type.link"
       :target="type.target"
       rel="noopener noreferrer nofollow"
-      @click="selectType"
-      @mouseenter="setNear(true)"
-      @mouseleave="setNear(false)"
     >
       <span class="label">{{ type.label }}&nbsp;<i class="icon icon-external-link" /></span>
     </a>
@@ -189,7 +154,7 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-  .namespaced {
+  .ns-and-icon {
     margin-right: 4px;
   }
 

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,34 +328,80 @@ export default {
         console.error('Connect Error', e); // eslint-disable-line no-console
       });
 
+      let logBuffer = [];
+      let truncatedLog = '';
+
       this.socket.addEventListener(EVENT_MESSAGE, (e) => {
-        const line = base64Decode(e.detail.data);
+        const decodedData = e.detail?.data || '';
+        const replacedData = decodedData.replace(/[-_]/g, (char) => char === '-' ? '+' : '/');
+        const b = base64DecodeToBuffer(replacedData);
+        const isTruncated = isLogTruncated(b);
 
-        let msg = line;
-        let time = null;
+        if (isTruncated === true) {
+          logBuffer.push(...b);
+
+          return;
+        }
 
-        const idx = line.indexOf(' ');
+        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 ( idx > 0 ) {
-          const timeStr = line.substr(0, idx);
-          const date = new Date(timeStr);
+        if (!d.endsWith('\n')) {
+          const lines = data.split(/\n/);
 
-          if ( !isNaN(date.getSeconds()) ) {
-            time = date.toISOString();
-            msg = line.substr(idx + 1);
+          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').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);
 
-        const parsedLine = {
-          id:     lastId++,
-          msg:    ansiup.ansi_to_html(msg),
-          rawMsg: msg,
-          time,
-        };
+            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,
+          };
 
-        Object.freeze(parsedLine);
+          Object.freeze(parsedLine);
 
-        this.backlog.push(parsedLine);
+          this.backlog.push(parsedLine);
+        });
       });
 
       this.socket.connect();

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();

package/components/nav/WindowManager/__tests__/ContainerLogs.test.ts

@@ -0,0 +1,186 @@
+import { shallowMount } from '@vue/test-utils';
+import ContainerLogs from '@shell/components/nav/WindowManager/ContainerLogs.vue';
+import { base64Encode } from '@shell/utils/crypto';
+import { Buffer } from 'buffer';
+import { addEventListener } from '@shell/utils/socket';
+
+jest.mock('@shell/utils/socket');
+
+const getDefaultOptions = () => {
+  return {
+    propsData: {
+      tab:    {},
+      active: true,
+      height: 100,
+      pod:    {
+        spec:  { nodeName: 'nodeId' },
+        links: { view: 'url' },
+        os:    'linux'
+      },
+    },
+    data() {
+      return { range: '30 minute' };
+    },
+    mocks: {
+      $store: {
+        getters: {
+          'prefs/get':    jest.fn(),
+          'i18n/t':       jest.fn(),
+          currentProduct: { inStore: 'cluster' }
+        }
+      }
+    }
+  };
+};
+
+describe('component: ContainerLogs', () => {
+  it('should receive messages correctly', async() => {
+    jest.clearAllMocks();
+    const wrapper = await shallowMount(ContainerLogs, getDefaultOptions());
+
+    const data1 = 'container logs test1\n';
+    const messageCallback = addEventListener.mock.calls.find(([e]) => e === 'message')[1];
+
+    messageCallback({ detail: { data: base64Encode(data1) } });
+
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.backlog).toHaveLength(1);
+    expect(wrapper.vm.backlog[0].rawMsg).toBe(data1.trimEnd());
+    const data2 = 'container logs test2 中文日志内容测试\n';
+
+    messageCallback({ detail: { data: base64Encode(data2) } });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.backlog).toHaveLength(2);
+    expect(wrapper.vm.backlog[1].rawMsg).toBe(data2.trimEnd());
+  });
+
+  it('should not fail for an empty message/string', async() => {
+    jest.clearAllMocks();
+    const wrapper = await shallowMount(ContainerLogs, getDefaultOptions());
+
+    const data1 = '';
+    const messageCallback = addEventListener.mock.calls.find(([e]) => e === 'message')[1];
+
+    messageCallback({ detail: { data: base64Encode(data1) } });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.backlog).toHaveLength(0);
+    expect(wrapper.vm.filtered).toHaveLength(0);
+  });
+
+  it('should merge the message which be truncated line', async() => {
+    jest.clearAllMocks();
+    const wrapper = await shallowMount(ContainerLogs, getDefaultOptions());
+    const part1 = 'container logs part1';
+    const messageCallback = addEventListener.mock.calls.find(([e]) => e === 'message')[1];
+
+    messageCallback({ detail: { data: base64Encode(part1) } });
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.backlog).toHaveLength(0);
+    const part2 = 'container logs part2\n';
+
+    messageCallback({ detail: { data: base64Encode(part2) } });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.backlog).toHaveLength(1);
+    expect(wrapper.vm.backlog[0].rawMsg).toBe(`${ part1 }${ part2 }`.trimEnd());
+  });
+
+  it('should merge truncated 2-byte utf-8 character messages', async() => {
+    jest.clearAllMocks();
+    const wrapper = await shallowMount(ContainerLogs, getDefaultOptions());
+    // Contains 2-byte utf-8 character message with one character truncation
+    const message = '¡¢£¤¥\n';
+    const arr = Buffer.from(message);
+
+    const part1 = arr.slice(0, 3).toString('base64');
+    const part2 = arr.slice(3).toString('base64');
+
+    const messageCallback = addEventListener.mock.calls.find(([e]) => e === 'message')[1];
+
+    messageCallback({ detail: { data: part1 } });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.backlog).toHaveLength(0);
+    messageCallback({ detail: { data: part2 } });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.backlog).toHaveLength(1);
+    expect(wrapper.vm.backlog[0].rawMsg).toBe(message.trimEnd());
+  });
+  it('should merge truncated 3-byte utf-8 character messages', async() => {
+    jest.clearAllMocks();
+    const wrapper = await shallowMount(ContainerLogs, getDefaultOptions());
+    // Contains 3-byte utf-8 character message with one character truncation
+    const message = 'ࠀࠁࠂࠃ\n';
+    const arr = Buffer.from(message);
+    // Truncate at the fourth byte
+    const part1 = arr.slice(0, 4).toString('base64');
+    const part2 = arr.slice(4).toString('base64');
+
+    const messageCallback = addEventListener.mock.calls.find(([e]) => e === 'message')[1];
+
+    messageCallback({ detail: { data: part1 } });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.backlog).toHaveLength(0);
+    messageCallback({ detail: { data: part2 } });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.backlog).toHaveLength(1);
+    expect(wrapper.vm.backlog[0].rawMsg).toBe(message.trimEnd());
+
+    // Truncate at the fifth byte
+    const part3 = arr.slice(0, 5).toString('base64');
+    const part4 = arr.slice(5).toString('base64');
+
+    messageCallback({ detail: { data: part3 } });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.backlog).toHaveLength(1);
+    messageCallback({ detail: { data: part4 } });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.backlog).toHaveLength(2);
+    expect(wrapper.vm.backlog[1].rawMsg).toBe(message.trimEnd());
+  });
+
+  it('should merge truncated 4-byte utf-8 character messages', async() => {
+    jest.clearAllMocks();
+    const wrapper = await shallowMount(ContainerLogs, getDefaultOptions());
+    // Contains 4-byte utf-8 character message with one character truncation
+    const message = '𐀀𐀁𐀂𐀃\n';
+    const arr = Buffer.from(message);
+
+    // Truncate at the fifth byte
+    const part1 = arr.slice(0, 5).toString('base64');
+    const part2 = arr.slice(5).toString('base64');
+
+    const messageCallback = addEventListener.mock.calls.find(([e]) => e === 'message')[1];
+
+    messageCallback({ detail: { data: part1 } });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.backlog).toHaveLength(0);
+    messageCallback({ detail: { data: part2 } });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.backlog).toHaveLength(1);
+    expect(wrapper.vm.backlog[0].rawMsg).toBe(message.trimEnd());
+
+    // Truncate at the sixth byte
+    const part3 = arr.slice(0, 6).toString('base64');
+    const part4 = arr.slice(6).toString('base64');
+
+    messageCallback({ detail: { data: part3 } });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.backlog).toHaveLength(1);
+    messageCallback({ detail: { data: part4 } });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.backlog).toHaveLength(2);
+    expect(wrapper.vm.backlog[1].rawMsg).toBe(message.trimEnd());
+
+    // Truncate at the seventh byte
+    const part5 = arr.slice(0, 7).toString('base64');
+    const part6 = arr.slice(7).toString('base64');
+
+    messageCallback({ detail: { data: part5 } });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.backlog).toHaveLength(2);
+    messageCallback({ detail: { data: part6 } });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.backlog).toHaveLength(3);
+    expect(wrapper.vm.backlog[2].rawMsg).toBe(message.trimEnd());
+  });
+});

package/components/nav/WindowManager/index.vue

@@ -20,10 +20,6 @@ export default {
 
     height: {
       get() {
-        if ( process.server ) {
-          return 0;
-        }
-
         if ( this.userHeight ) {
           return this.userHeight;
         }
@@ -52,10 +48,6 @@ export default {
 
     width: {
       get() {
-        if ( process.server ) {
-          return 0;
-        }
-
         if (this.userWidth) {
           return this.userWidth;
         }
@@ -342,7 +334,8 @@ export default {
         />
         <span class="tab-label"> {{ tab.label }}</span>
         <i
-          class="closer icon icon-fw icon-x"
+          data-testid="wm-tab-close-button"
+          class="closer icon icon-fw icon-x wm-closer-button"
           @click.stop="close(tab.id)"
         />
       </div>
@@ -440,9 +433,16 @@ export default {
           margin-left: 5px;
           border: 1px solid var(--body-text);
           border-radius: var(--border-radius);
+          line-height: 12px;
+          font-size: 10px;
+          width: 14px;
+          align-self: center;
+          display: flex;
+          justify-content: center;
 
           &:hover {
-            background-color: var(--wm-closer-hover-bg);
+            border-color: var(--link-border);
+            color: var(--link-border);
           }
         }
       }
@@ -502,4 +502,5 @@ export default {
       border-right: var(--nav-border-size) solid var(--nav-border);
     }
   }
+
 </style>