@rancher/shell 2.0.1 → 3.0.0-rc.2

package/components/nav/WindowManager/ContainerLogs.vue

@@ -8,8 +8,10 @@ import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { Checkbox } from '@components/Form/Checkbox';
 import AsyncButton from '@shell/components/AsyncButton';
 import Select from '@shell/components/form/Select';
-import VirtualList from 'vue-virtual-scroll-list';
+import VirtualList from 'vue3-virtual-scroll-list';
 import LogItem from '@shell/components/LogItem';
+import { shallowRef } from 'vue';
+import { debounce } from 'lodash';
 
 import { escapeRegex } from '@shell/utils/string';
 import { HARVESTER_NAME as VIRTUAL } from '@shell/config/features';
@@ -130,18 +132,19 @@ export default {
 
   data() {
     return {
-      container:   this.initialContainer || this.pod?.defaultContainerName,
-      socket:      null,
-      isOpen:      false,
-      isFollowing: true,
-      timestamps:  this.$store.getters['prefs/get'](LOGS_TIME),
-      wrap:        this.$store.getters['prefs/get'](LOGS_WRAP),
-      previous:    false,
-      search:      '',
-      backlog:     [],
-      lines:       [],
-      now:         new Date(),
-      logItem:     LogItem
+      container:       this.initialContainer || this.pod?.defaultContainerName,
+      socket:          null,
+      isOpen:          false,
+      isFollowing:     true,
+      scrollThreshold: 80,
+      timestamps:      this.$store.getters['prefs/get'](LOGS_TIME),
+      wrap:            this.$store.getters['prefs/get'](LOGS_WRAP),
+      previous:        false,
+      search:          '',
+      backlog:         [],
+      lines:           [],
+      now:             new Date(),
+      logItem:         shallowRef(LogItem),
     };
   },
 
@@ -275,16 +278,27 @@ export default {
       this.connect();
     },
 
+    lines: {
+      handler() {
+        if (this.isFollowing) {
+          this.$nextTick(() => {
+            this.follow();
+          });
+        }
+      },
+      deep: true
+    }
+
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.cleanup();
   },
 
   async mounted() {
     await this.connect();
     this.boundFlush = this.flush.bind(this);
-    this.timerFlush = setInterval(this.boundFlush, 100);
+    this.timerFlush = setInterval(this.boundFlush, 200);
   },
 
   methods: {
@@ -417,21 +431,21 @@ export default {
           this.lines = this.lines.slice(-maxLines);
         }
       }
-
-      if ( this.isFollowing ) {
-        this.$nextTick(() => {
-          this.follow();
-        });
-      }
     },
 
-    updateFollowing() {
+    updateFollowing: debounce(function() {
       const virtualList = this.$refs.virtualList;
 
       if (virtualList) {
-        this.isFollowing = virtualList.getScrollSize() - virtualList.getClientSize() === virtualList.getOffset();
+        const scrollSize = virtualList.getScrollSize();
+        const clientSize = virtualList.getClientSize();
+        const offset = virtualList.getOffset();
+
+        const distanceFromBottom = scrollSize - clientSize - offset;
+
+        this.isFollowing = distanceFromBottom <= this.scrollThreshold;
       }
-    },
+    }, 100),
 
     parseRange(range) {
       range = `${ range }`.trim().toLowerCase();
@@ -503,7 +517,8 @@ export default {
       const virtualList = this.$refs.virtualList;
 
       if (virtualList) {
-        virtualList.$el.scrollTop = virtualList.getScrollSize();
+        virtualList.scrollToBottom();
+        this.isFollowing = true;
       }
     },
 
@@ -549,7 +564,7 @@ export default {
       <div class="wm-button-bar">
         <Select
           v-if="containerChoices.length > 0"
-          v-model="container"
+          v-model:value="container"
           :disabled="containerChoices.length === 1"
           class="containerPicker"
           :options="containerChoices"
@@ -599,13 +614,13 @@ export default {
             <Checkbox
               :label="t('wm.containerLogs.previous')"
               :value="previous"
-              @input="togglePrevious"
+              @update:value="togglePrevious"
             />
           </div>
         </div>
 
         <div class="log-action log-action-group ml-5">
-          <v-popover
+          <v-dropdown
             trigger="click"
             placement="top"
           >
@@ -614,34 +629,34 @@ export default {
               <i class="icon icon-chevron-up" />
             </button>
 
-            <template slot="popover">
+            <template #popper>
               <div class="filter-popup">
                 <LabeledSelect
-                  v-model="range"
+                  v-model:value="range"
                   class="range"
                   :label="t('wm.containerLogs.range.label')"
                   :options="rangeOptions"
                   :clearable="false"
                   placement="top"
-                  @input="toggleRange($event)"
+                  @update:value="toggleRange($event)"
                 />
                 <div>
                   <Checkbox
                     :label="t('wm.containerLogs.wrap')"
                     :value="wrap"
-                    @input="toggleWrap "
+                    @update:value="toggleWrap "
                   />
                 </div>
                 <div>
                   <Checkbox
                     :label="t('wm.containerLogs.timestamps')"
                     :value="timestamps"
-                    @input="toggleTimestamps"
+                    @update:value="toggleTimestamps"
                   />
                 </div>
               </div>
             </template>
-          </v-popover>
+          </v-dropdown>
         </div>
 
         <div class="log-action log-action-group ml-5">
@@ -669,11 +684,11 @@ export default {
         <VirtualList
           v-show="filtered.length"
           ref="virtualList"
+          class="virtual-list"
           data-key="id"
           :data-sources="filtered"
           :data-component="logItem"
           direction="vertical"
-          class="virtual-list"
           :keeps="200"
           @scroll="updateFollowing"
         />
@@ -716,11 +731,11 @@ export default {
       opacity: 0.25;
     }
 
-    &.wrap-lines ::v-deep .msg {
+    &.wrap-lines :deep() .msg {
       white-space: pre-wrap;
     }
 
-    &.show-times ::v-deep .time {
+    &.show-times :deep() .time {
       display: initial;
       width: auto;
     }
@@ -728,7 +743,7 @@ export default {
   }
 
   .containerPicker {
-    ::v-deep &.unlabeled-select {
+    :deep() &.unlabeled-select {
       display: inline-block;
       min-width: 200px;
       height: 30px;

package/components/nav/WindowManager/ContainerShell.vue

@@ -4,7 +4,7 @@ import { addParams } from '@shell/utils/url';
 import { base64Decode, base64Encode } from '@shell/utils/crypto';
 import Select from '@shell/components/form/Select';
 import { NODE } from '@shell/config/types';
-
+import { mapGetters } from 'vuex';
 import Socket, {
   EVENT_CONNECTED,
   EVENT_CONNECTING,
@@ -105,6 +105,7 @@ export default {
     containerChoices() {
       return this.pod?.spec?.containers?.map((x) => x.name) || [];
     },
+    ...mapGetters({ t: 'i18n/t' })
   },
 
   watch: {
@@ -121,7 +122,7 @@ export default {
     },
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     clearInterval(this.keepAliveTimer);
     this.cleanup();
   },
@@ -380,11 +381,12 @@ export default {
   <Window
     :active="active"
     :before-close="cleanup"
+    class="container-shell"
   >
     <template #title>
       <Select
         v-if="containerChoices.length > 0"
-        v-model="container"
+        v-model:value="container"
         :disabled="containerChoices.length === 1"
         class="containerPicker auto-width pull-left"
         :options="containerChoices"
@@ -404,7 +406,10 @@ export default {
           class="btn btn-sm bg-primary"
           @click="clear"
         >
-          <t k="wm.containerShell.clear" />
+          <t
+            data-testid="shell-clear-button-label"
+            k="wm.containerShell.clear"
+          />
         </button>
       </div>
       <div class="status pull-left">
@@ -423,6 +428,7 @@ export default {
           v-else
           k="wm.connection.disconnected"
           class="text-error"
+          data-testid="shell-status-disconnected"
         />
       </div>
     </template>
@@ -445,51 +451,51 @@ export default {
   .xterm-char-measure-element {
     position: static;
   }
-</style>
 
-<style lang="scss" scoped>
-.text-warning {
-  animation: flasher 2.5s linear infinite;
-}
+.container-shell {
+  .text-warning {
+    animation: flasher 2.5s linear infinite;
+  }
 
-@keyframes flasher {
-  50% {
-    opacity: 0;
+  @keyframes flasher {
+    50% {
+      opacity: 0;
+    }
   }
-}
 
-.shell-container {
-  height: 100%;
-  overflow: hidden;
-  .resize-observer {
-    display: none;
+  .shell-container {
+    height: 100%;
+    overflow: hidden;
+    .resize-observer {
+      display: none;
+    }
   }
-}
 
-.shell-body {
-  padding: calc(2 * var(--outline-width));
-  height: 100%;
+  .shell-body {
+    padding: calc(2 * var(--outline-width));
+    height: 100%;
 
-  & > .terminal.focus {
-    outline: var(--outline-width) solid var(--outline);
+    & > .terminal.focus {
+      outline: var(--outline-width) solid var(--outline);
+    }
   }
-}
 
-.containerPicker {
-  ::v-deep &.unlabeled-select {
-    display: inline-block;
-    min-width: 200px;
-    height: 30px;
-    min-height: 30px;
-    width: initial;
+  .containerPicker {
+    :deep() &.unlabeled-select {
+      display: inline-block;
+      min-width: 200px;
+      height: 30px;
+      min-height: 30px;
+      width: initial;
+    }
   }
-}
 
-.status {
-  align-items: center;
-  display: flex;
-  min-width: 80px;
-  height: 30px;
-  margin-left: 10px;
+  .status {
+    align-items: center;
+    display: flex;
+    min-width: 80px;
+    height: 30px;
+    margin-left: 10px;
+  }
 }
 </style>

package/components/nav/WindowManager/Window.vue

@@ -45,7 +45,7 @@ export default {
     }
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     if ( this.beforeClose ) {
       this.beforeClose.apply(this);
     }

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

@@ -1,10 +1,17 @@
+import { nextTick } from 'vue';
 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';
+// import VirtualList from 'vue3-virtual-scroll-list';
 
 jest.mock('@shell/utils/socket');
+// jest.mock(VirtualList, () => {});
+
+const mockMyMethod = jest.fn();
+
+jest.mock('vue3-virtual-scroll-list', () => ({ myMethod: () => mockMyMethod() }));
 
 const getDefaultOptions = () => {
   return {
@@ -21,18 +28,22 @@ const getDefaultOptions = () => {
     data() {
       return { range: '30 minute' };
     },
-    mocks: {
-      $store: {
-        getters: {
-          'prefs/get':    jest.fn(),
-          'i18n/t':       jest.fn(),
-          currentProduct: { inStore: 'cluster' }
+    global: {
+      mocks: {
+        $store: {
+          getters: {
+            'prefs/get':    jest.fn(),
+            'i18n/t':       jest.fn(),
+            currentProduct: { inStore: 'cluster' }
+          }
         }
       }
     }
+
   };
 };
 
+// eslint-disable-next-line jest/no-disabled-tests
 describe('component: ContainerLogs', () => {
   it('should receive messages correctly', async() => {
     jest.clearAllMocks();
@@ -43,13 +54,13 @@ describe('component: ContainerLogs', () => {
 
     messageCallback({ detail: { data: base64Encode(data1) } });
 
-    await wrapper.vm.$nextTick();
+    await 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();
+    await nextTick();
     expect(wrapper.vm.backlog).toHaveLength(2);
     expect(wrapper.vm.backlog[1].rawMsg).toBe(data2.trimEnd());
   });
@@ -62,7 +73,7 @@ describe('component: ContainerLogs', () => {
     const messageCallback = addEventListener.mock.calls.find(([e]) => e === 'message')[1];
 
     messageCallback({ detail: { data: base64Encode(data1) } });
-    await wrapper.vm.$nextTick();
+    await nextTick();
     expect(wrapper.vm.backlog).toHaveLength(0);
     expect(wrapper.vm.filtered).toHaveLength(0);
   });
@@ -74,13 +85,13 @@ describe('component: ContainerLogs', () => {
     const messageCallback = addEventListener.mock.calls.find(([e]) => e === 'message')[1];
 
     messageCallback({ detail: { data: base64Encode(part1) } });
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(wrapper.vm.backlog).toHaveLength(0);
     const part2 = 'container logs part2\n';
 
     messageCallback({ detail: { data: base64Encode(part2) } });
-    await wrapper.vm.$nextTick();
+    await nextTick();
     expect(wrapper.vm.backlog).toHaveLength(1);
     expect(wrapper.vm.backlog[0].rawMsg).toBe(`${ part1 }${ part2 }`.trimEnd());
   });
@@ -98,10 +109,10 @@ describe('component: ContainerLogs', () => {
     const messageCallback = addEventListener.mock.calls.find(([e]) => e === 'message')[1];
 
     messageCallback({ detail: { data: part1 } });
-    await wrapper.vm.$nextTick();
+    await nextTick();
     expect(wrapper.vm.backlog).toHaveLength(0);
     messageCallback({ detail: { data: part2 } });
-    await wrapper.vm.$nextTick();
+    await nextTick();
     expect(wrapper.vm.backlog).toHaveLength(1);
     expect(wrapper.vm.backlog[0].rawMsg).toBe(message.trimEnd());
   });
@@ -118,10 +129,10 @@ describe('component: ContainerLogs', () => {
     const messageCallback = addEventListener.mock.calls.find(([e]) => e === 'message')[1];
 
     messageCallback({ detail: { data: part1 } });
-    await wrapper.vm.$nextTick();
+    await nextTick();
     expect(wrapper.vm.backlog).toHaveLength(0);
     messageCallback({ detail: { data: part2 } });
-    await wrapper.vm.$nextTick();
+    await nextTick();
     expect(wrapper.vm.backlog).toHaveLength(1);
     expect(wrapper.vm.backlog[0].rawMsg).toBe(message.trimEnd());
 
@@ -130,10 +141,10 @@ describe('component: ContainerLogs', () => {
     const part4 = arr.slice(5).toString('base64');
 
     messageCallback({ detail: { data: part3 } });
-    await wrapper.vm.$nextTick();
+    await nextTick();
     expect(wrapper.vm.backlog).toHaveLength(1);
     messageCallback({ detail: { data: part4 } });
-    await wrapper.vm.$nextTick();
+    await nextTick();
     expect(wrapper.vm.backlog).toHaveLength(2);
     expect(wrapper.vm.backlog[1].rawMsg).toBe(message.trimEnd());
   });
@@ -152,10 +163,10 @@ describe('component: ContainerLogs', () => {
     const messageCallback = addEventListener.mock.calls.find(([e]) => e === 'message')[1];
 
     messageCallback({ detail: { data: part1 } });
-    await wrapper.vm.$nextTick();
+    await nextTick();
     expect(wrapper.vm.backlog).toHaveLength(0);
     messageCallback({ detail: { data: part2 } });
-    await wrapper.vm.$nextTick();
+    await nextTick();
     expect(wrapper.vm.backlog).toHaveLength(1);
     expect(wrapper.vm.backlog[0].rawMsg).toBe(message.trimEnd());
 
@@ -164,10 +175,10 @@ describe('component: ContainerLogs', () => {
     const part4 = arr.slice(6).toString('base64');
 
     messageCallback({ detail: { data: part3 } });
-    await wrapper.vm.$nextTick();
+    await nextTick();
     expect(wrapper.vm.backlog).toHaveLength(1);
     messageCallback({ detail: { data: part4 } });
-    await wrapper.vm.$nextTick();
+    await nextTick();
     expect(wrapper.vm.backlog).toHaveLength(2);
     expect(wrapper.vm.backlog[1].rawMsg).toBe(message.trimEnd());
 
@@ -176,10 +187,10 @@ describe('component: ContainerLogs', () => {
     const part6 = arr.slice(7).toString('base64');
 
     messageCallback({ detail: { data: part5 } });
-    await wrapper.vm.$nextTick();
+    await nextTick();
     expect(wrapper.vm.backlog).toHaveLength(2);
     messageCallback({ detail: { data: part6 } });
-    await wrapper.vm.$nextTick();
+    await nextTick();
     expect(wrapper.vm.backlog).toHaveLength(3);
     expect(wrapper.vm.backlog[2].rawMsg).toBe(message.trimEnd());
   });

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

@@ -1,8 +1,9 @@
-import { mount, Wrapper } from '@vue/test-utils';
+import { flushPromises, mount, Wrapper } from '@vue/test-utils';
 import ContainerShell from '@shell/components/nav/WindowManager/ContainerShell.vue';
 import Socket, {
   addEventListener, EVENT_CONNECTED, EVENT_CONNECTING, EVENT_DISCONNECTED, EVENT_MESSAGE, EVENT_CONNECT_ERROR
 } from '@shell/utils/socket';
+import Window from '@shell/components/nav/WindowManager/Window.vue';
 
 jest.mock('@shell/utils/socket');
 jest.mock('@shell/utils/crypto', () => {
@@ -63,16 +64,22 @@ describe('component: ContainerShell', () => {
       },
       initialContainer: 'containerId'
     },
-    stubs: ['resize-observer'],
-    mocks: {
-      $store: {
-        dispatch: action,
-        getters:  {
-          'i18n/t':            translate,
-          'cluster/schemaFor': schemaFor
+    global: {
+      stubs: {
+        'resize-observer': true,
+        Window:            { template: '<span><slot name="title"/><slot name="body"/></span>' }
+      },
+
+      mocks: {
+        $store: {
+          dispatch: action,
+          getters:  {
+            'i18n/t':            translate,
+            'cluster/schemaFor': schemaFor
+          }
         }
-      }
-    }
+      },
+    },
   };
 
   const resetMocks = () => {
@@ -84,11 +91,8 @@ describe('component: ContainerShell', () => {
   const wrapperPostMounted = async(params: Object) => {
     const wrapper = await mount(ContainerShell, params);
 
-    // these awaits are all associated with the various async dyamic imports on xterm
-    await wrapper.vm.$nextTick();
-    await wrapper.vm.$nextTick();
-    await wrapper.vm.$nextTick();
-    await wrapper.vm.$nextTick();
+    // await the various async dyamic imports on xterm
+    await flushPromises();
 
     return wrapper;
   };
@@ -98,22 +102,25 @@ describe('component: ContainerShell', () => {
   it('creates a window on the page', async() => {
     resetMocks();
     const wrapper: Wrapper<InstanceType<typeof ContainerShell> & { [key: string]: any }> = await wrapperPostMounted(defaultContainerShellParams);
-    const windowElement = wrapper.find('div.window');
+    const windowComponent = wrapper.findComponent(Window);
 
-    expect(windowElement.exists()).toBe(true);
+    expect(windowComponent.exists()).toBe(true);
+    expect(windowComponent.isVisible()).toBe(true);
   });
 
   it('the find action for the node is called if schemaFor finds a schema for NODE', async() => {
     resetMocks();
     const testSchemaFindsSchemaParams = {
       ...defaultContainerShellParams,
-      mocks: {
-        ...defaultContainerShellParams.mocks,
-        $store: {
-          ...defaultContainerShellParams.mocks.$store,
-          getters: {
-            ...defaultContainerShellParams.mocks.$store.getters,
-            'cluster/schemaFor': jest.fn().mockImplementation(() => true)
+      global: {
+        mocks: {
+          ...defaultContainerShellParams.global.mocks,
+          $store: {
+            ...defaultContainerShellParams.global.mocks.$store,
+            getters: {
+              ...defaultContainerShellParams.global.mocks.$store.getters,
+              'cluster/schemaFor': jest.fn().mockImplementation(() => true)
+            }
           }
         }
       }
@@ -133,15 +140,16 @@ describe('component: ContainerShell', () => {
 
   it('the translate getter for the ...', async() => {
     resetMocks();
-    await wrapperPostMounted(defaultContainerShellParams);
-    const firstTranslate = translate.mock.calls[0];
-    const secondTranslate = translate.mock.calls[1];
-
-    expect(translate.mock.calls).toHaveLength(2);
-    expect(firstTranslate[0]).toBe('wm.containerShell.clear');
-    expect(firstTranslate[1]).toStrictEqual({});
-    expect(secondTranslate[0]).toBe('wm.connection.disconnected');
-    expect(secondTranslate[1]).toStrictEqual({});
+    const wrapper = await wrapperPostMounted(defaultContainerShellParams);
+
+    const clearButton = wrapper.find('[data-testid="shell-clear-button-label"]');
+    const disconnectedStatus = wrapper.find('[data-testid="shell-status-disconnected"]');
+
+    expect(clearButton.exists()).toBe(true);
+    expect(clearButton.attributes().k).toBe('wm.containerShell.clear');
+
+    expect(disconnectedStatus.exists()).toBe(true);
+    expect(disconnectedStatus.attributes().k).toBe('wm.connection.disconnected');
   });
 
   it('the socket is instantiated', async() => {

package/components/nav/WindowManager/index.vue

@@ -321,8 +321,8 @@ export default {
         <i class="icon icon-code" />
       </div>
       <div
-        v-for="tab in tabs"
-        :key="tab.id"
+        v-for="(tab, i) in tabs"
+        :key="i"
         class="tab"
         :class="{'active': tab.id === active}"
         @click="switchTo(tab.id)"
@@ -358,8 +358,8 @@ export default {
       </div>
     </div>
     <div
-      v-for="tab in tabs"
-      :key="tab.id"
+      v-for="(tab, i) in tabs"
+      :key="i"
       class="body"
       :class="{'active': tab.id === active}"
       draggable="false"