@rancher/shell 0.4.0 → 0.5.1

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

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>

package/components/nav/__tests__/TopLevelMenu.test.ts

@@ -1,5 +1,6 @@
 import { mount, Wrapper } from '@vue/test-utils';
 import TopLevelMenu from '@shell/components/nav/TopLevelMenu';
+import { SETTING } from '@shell/config/settings';
 
 // DISCLAIMER: This should not be added here, although we have several store requests which are irrelevant
 const defaultStore = {
@@ -32,6 +33,38 @@ describe('topLevelMenu', () => {
     expect(cluster.exists()).toBe(true);
   });
 
+  it('should not "crash" the component if the structure of banner settings is in an old format', () => {
+    const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+      mocks: {
+        $store: {
+          getters: {
+            'management/all': () => [{ name: 'whatever' },
+              // object based on https://github.com/rancher/dashboard/issues/10140#issuecomment-1883252402
+              {
+                id:    SETTING.BANNERS,
+                value: JSON.stringify({
+                  banner: {
+                    color:      '#78c9cf',
+                    background: '#27292e',
+                    text:       'Hello World!'
+                  },
+                  showHeader: 'true',
+                  showFooter: 'true'
+                })
+              }],
+            ...defaultStore
+          },
+        },
+      },
+      stubs: ['BrandImage', 'nuxt-link']
+    });
+
+    expect(wrapper.vm.globalBannerSettings).toStrictEqual({
+      headerFont: '2em',
+      footerFont: '2em'
+    });
+  });
+
   describe('searching a term', () => {
     describe('should displays a no results message if have clusters but', () => {
       it('given no matching clusters', () => {

package/components/nav/__tests__/Type.test.ts

@@ -5,7 +5,7 @@ import Type from '@shell/components/nav/Type.vue';
 jest.mock('vue-router');
 
 // Configuration text
-const className = 'nuxt-link-active';
+const className = 'router-link-active';
 
 describe('component: Type', () => {
   describe('should not use highlight class', () => {

package/components/nuxt/nuxt-child.js

@@ -18,10 +18,8 @@ export default {
 
     data.nuxtChild = true
     const _parent = parent
-    const transitions = parent.$nuxt.nuxt.transitions
-    const defaultTransition = parent.$nuxt.nuxt.defaultTransition
-
     let depth = 0
+
     while (parent) {
       if (parent.$vnode && parent.$vnode.data.nuxtChild) {
         depth++
@@ -29,48 +27,18 @@ export default {
       parent = parent.$parent
     }
     data.nuxtChildDepth = depth
-    const transition = transitions[depth] || defaultTransition
-    const transitionProps = {}
-    transitionsKeys.forEach((key) => {
-      if (typeof transition[key] !== 'undefined') {
-        transitionProps[key] = transition[key]
-      }
-    })
 
     const listeners = {}
-    listenersKeys.forEach((key) => {
-      if (typeof transition[key] === 'function') {
-        listeners[key] = transition[key].bind(_parent)
-      }
-    })
-    if (process.client) {
-      // Add triggerScroll event on beforeEnter (fix #1376)
-      const beforeEnter = listeners.beforeEnter
-      listeners.beforeEnter = (el) => {
-        // Ensure to trigger scroll event after calling scrollBehavior
-        window.$nuxt.$nextTick(() => {
-          window.$nuxt.$emit('triggerScroll')
-        })
-        if (beforeEnter) {
-          return beforeEnter.call(_parent, el)
-        }
-      }
-    }
-
-    // make sure that leave is called asynchronous (fix #5703)
-    if (transition.css === false) {
-      const leave = listeners.leave
-
-      // only add leave listener when user didnt provide one
-      // or when it misses the done argument
-      if (!leave || leave.length < 2) {
-        listeners.leave = (el, done) => {
-          if (leave) {
-            leave.call(_parent, el)
-          }
-
-          _parent.$nextTick(done)
-        }
+    
+    // Add triggerScroll event on beforeEnter (fix #1376)
+    const beforeEnter = listeners.beforeEnter
+    listeners.beforeEnter = (el) => {
+      // Ensure to trigger scroll event after calling scrollBehavior
+      window.$nuxt.$nextTick(() => {
+        window.$nuxt.$emit('triggerScroll')
+      })
+      if (beforeEnter) {
+        return beforeEnter.call(_parent, el)
       }
     }
 
@@ -80,43 +48,11 @@ export default {
       routerView = h('keep-alive', { props: props.keepAliveProps }, [routerView])
     }
 
+    // this needs to be a "transition" or another non-rendering component, 
+    // otherwise we will break pages like the charts wizard or the extensions main screen (DOM would render an additional element and break CSS)
+    // we can deal with this later once we remove this component and <nuxt /> component
     return h('transition', {
-      props: transitionProps,
       on: listeners
     }, [routerView])
   }
 }
-
-const transitionsKeys = [
-  'name',
-  'mode',
-  'appear',
-  'css',
-  'type',
-  'duration',
-  'enterClass',
-  'leaveClass',
-  'appearClass',
-  'enterActiveClass',
-  'enterActiveClass',
-  'leaveActiveClass',
-  'appearActiveClass',
-  'enterToClass',
-  'leaveToClass',
-  'appearToClass'
-]
-
-const listenersKeys = [
-  'beforeEnter',
-  'enter',
-  'afterEnter',
-  'enterCancelled',
-  'beforeLeave',
-  'leave',
-  'afterLeave',
-  'leaveCancelled',
-  'beforeAppear',
-  'appear',
-  'afterAppear',
-  'appearCancelled'
-]

package/components/nuxt/nuxt.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import { compile } from '../../utils/nuxt'
 
-import NuxtError from '../../layouts/error.vue'
+import NuxtError from '../../components/templates/error.vue'
 
 import NuxtChild from './nuxt-child'
 

package/{layouts → components/templates}/blank.vue

@@ -11,7 +11,7 @@ export default {
 
 <template>
   <main class="main-layout">
-    <nuxt />
+    <router-view :key="$route.path" />
 
     <Inactivity />
   </main>