@rancher/shell 0.4.0 → 0.5.0

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>

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

@@ -248,7 +248,10 @@ export default {
         v-if="clusterAndRouteReady"
         class="main-layout"
       >
-        <nuxt class="outlet" />
+        <router-view
+          :key="$route.path"
+          class="outlet"
+        />
         <ActionMenu />
         <PromptRemove />
         <PromptRestore />
@@ -282,7 +285,10 @@ export default {
         v-else-if="unmatchedRoute"
         class="main-layout"
       >
-        <nuxt class="outlet" />
+        <router-view
+          :key="$route.path"
+          class="outlet"
+        />
       </main>
       <div
         v-if="$refs.draggableZone"
@@ -304,99 +310,3 @@ export default {
     <DraggableZone ref="draggableZone" />
   </div>
 </template>
-<style lang="scss">
-  .dashboard-root {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-  }
-
-  .dashboard-content {
-    display: grid;
-    position: relative;
-    flex: 1 1 auto;
-    overflow-y: auto;
-    min-height: 0px;
-
-    &.dashboard-padding-left {
-    padding-left: $app-bar-collapsed-width;
-
-      .overlay-content-mode {
-        left: calc(var(--nav-width) + $app-bar-collapsed-width);
-      }
-   }
-
-    &.pin-right {
-      grid-template-areas:
-        "header  header  header"
-        "nav      main     wm";
-      grid-template-rows:    var(--header-height) auto;
-      grid-template-columns: var(--nav-width)     auto var(--wm-width, 0px);
-    }
-
-    &.pin-bottom {
-      grid-template-areas:
-        "header  header"
-        "nav       main"
-        "wm         wm";
-      grid-template-rows:    var(--header-height) auto  var(--wm-height, 0px);
-      grid-template-columns: var(--nav-width)     auto;
-    }
-
-    &.pin-left {
-      grid-template-areas:
-        "header  header  header"
-        "wm       nav     main";
-      grid-template-rows:    var(--header-height) auto;
-      grid-template-columns: var(--wm-width, 0px) var(--nav-width) auto;
-    }
-
-    > HEADER {
-      grid-area: header;
-    }
-
-    .default-side-nav {
-      grid-area: nav;
-    }
-  }
-
-  .wm {
-    grid-area: wm;
-    overflow-y: hidden;
-    z-index: 1;
-  }
-
-  .localeSelector {
-    ::v-deep .popover-inner {
-      padding: 50px 0;
-    }
-
-    ::v-deep .popover-arrow {
-      display: none;
-    }
-
-    ::v-deep .popover:focus {
-      outline: 0;
-    }
-
-    li {
-      padding: 8px 20px;
-
-      &:hover {
-        background-color: var(--primary-hover-bg);
-        color: var(--primary-hover-text);
-        text-decoration: none;
-      }
-    }
-  }
-
-  .drag-start {
-    z-index: 1000;
-    opacity: 0.5;
-    transition: opacity .3s ease;
-  }
-
-  .drag-end {
-    opacity: 1;
-  }
-</style>

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

@@ -5,18 +5,15 @@ export default {
   name:       'NuxtError',
   mixins:     [Brand],
   middleware: ['unauthenticated'],
-  props:      {
-    error: {
-      type:    Object,
-      default: null
-    }
-  },
 
   data() {
     return { ready: false };
   },
 
   computed: {
+    error() {
+      return window.$nuxt.nuxt.err || {};
+    },
     statusCode() {
       return (this.error && this.error.statusCode) || 599;
     },
@@ -24,6 +21,11 @@ export default {
       return this.error.message || '';
     }
   },
+  watch: {
+    message(neu) {
+      document.title = neu;
+    }
+  },
 
   mounted() {
     // If the page isn't a sub-path of the base url, redirect to it instead of saying not found.
@@ -40,19 +42,8 @@ export default {
     setTimeout(() => {
       this.ready = true;
     }, 1000);
+    document.title = this.message;
   },
-
-  head() {
-    return {
-      title: this.message,
-      meta:  [
-        {
-          name:    'viewport',
-          content: 'width=device-width,initial-scale=1.0,minimum-scale=1.0'
-        }
-      ]
-    };
-  }
 };
 </script>
 
@@ -112,7 +103,7 @@ export default {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
   -webkit-font-smoothing: antialiased;
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   right: 0;

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

@@ -68,7 +68,10 @@ export default {
       />
 
       <main class="main-layout">
-        <nuxt class="outlet" />
+        <router-view
+          :key="$route.path"
+          class="outlet"
+        />
       </main>
     </div>
     <FixedBanner :footer="true" />

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

@@ -70,7 +70,10 @@ export default {
       <Header :simple="true" />
       <main class="main-layout">
         <IndentedPanel class="pt-20">
-          <nuxt class="outlet" />
+          <router-view
+            :key="$route.path"
+            class="outlet"
+          />
         </IndentedPanel>
         <ActionMenu />
         <PromptRemove />

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

@@ -3,7 +3,7 @@ export default { middleware: ['unauthenticated'] };
 </script>
 
 <template>
-  <nuxt />
+  <router-view :key="$route.path" />
 </template>
 
 <style lang="scss">

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

@@ -14,7 +14,7 @@ export default {
     <div class="dashboard-root">
       <FixedBanner :header="true" />
       <FixedBanner :consent="true" />
-      <nuxt />
+      <router-view :key="$route.path" />
       <FixedBanner :footer="true" />
     </div>
   </main>