@rancher/shell 2.0.0 → 3.0.0-rc.1

package/components/nav/TopLevelMenu.vue

@@ -318,7 +318,7 @@ export default {
     document.addEventListener('keyup', this.handler);
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     document.removeEventListener('keyup', this.handler);
   },
 
@@ -561,8 +561,8 @@ export default {
               </a>
             </div>
             <div
-              v-for="a in appBar.hciApps"
-              :key="a.label"
+              v-for="(a, i) in appBar.hciApps"
+              :key="i"
               @click="hide()"
             >
               <router-link
@@ -593,7 +593,7 @@ export default {
               >
                 <div
                   v-for="(c, index) in appBar.pinFiltered"
-                  :key="c.id"
+                  :key="index"
                   :data-testid="`pinned-ready-cluster-${index}`"
                   @click="hide()"
                 >
@@ -668,7 +668,7 @@ export default {
               <div class="clustersList">
                 <div
                   v-for="(c, index) in appBar.clustersFiltered"
-                  :key="c.id"
+                  :key="index"
                   :data-testid="`top-level-menu-cluster-${index}`"
                   @click="hide()"
                 >
@@ -773,8 +773,8 @@ export default {
                 </span>
               </div>
               <div
-                v-for="a in appBar.multiClusterApps"
-                :key="a.label"
+                v-for="(a, i) in appBar.multiClusterApps"
+                :key="i"
                 @click="hide()"
               >
                 <router-link
@@ -801,8 +801,8 @@ export default {
                 </span>
               </div>
               <div
-                v-for="a in appBar.legacyApps"
-                :key="a.label"
+                v-for="(a, i) in appBar.legacyApps"
+                :key="i"
                 @click="hide()"
               >
                 <router-link
@@ -831,8 +831,8 @@ export default {
                 </span>
               </div>
               <div
-                v-for="a in appBar.configurationApps"
-                :key="a.label"
+                v-for="(a, i) in appBar.configurationApps"
+                :key="i"
                 @click="hide()"
               >
                 <router-link
@@ -1090,7 +1090,7 @@ export default {
           }
         }
 
-        > i {
+        > i, > img {
           display: block;
           width: 42px;
           font-size: $icon-size;
@@ -1102,9 +1102,6 @@ export default {
           margin-right: 16px;
           fill: var(--link);
         }
-        img {
-          margin-right: 16px;
-        }
 
         &.router-link-active, &.active-menu-link {
           background: var(--primary-hover-bg);
@@ -1453,15 +1450,15 @@ export default {
   }
 
   .localeSelector {
-    ::v-deep .popover-inner {
+    :deep() .popover-inner {
       padding: 50px 0;
     }
 
-    ::v-deep .popover-arrow {
+    :deep() .popover-arrow {
       display: none;
     }
 
-    ::v-deep .popover:focus {
+    :deep() .popover:focus {
       outline: 0;
     }
 

package/components/nav/Type.vue

@@ -10,6 +10,8 @@ export default {
 
   components: { Favorite, TabTitle },
 
+  emits: ['selected'],
+
   props: {
     type: {
       type:     Object,
@@ -64,7 +66,7 @@ export default {
     selectType() {
       // Prevent issues if custom NavLink is used #5047
       if (this.type?.route) {
-        const typePath = this.$router.resolve(this.type.route)?.route?.fullPath;
+        const typePath = this.$router.resolve(this.type.route)?.fullPath;
 
         if (typePath !== this.$route.fullPath) {
           this.$emit('selected');
@@ -82,8 +84,6 @@ export default {
     v-slot="{ href, navigate, isActive, isExactActive }"
     custom
     :to="type.route"
-    :exact="type.exact"
-    :exact-path="type['exact-path']"
   >
     <li
       class="child nav-type"
@@ -171,13 +171,13 @@ export default {
         padding-left: 3px;
       }
 
-      ::v-deep .highlight {
+      :deep() .highlight {
         background: var(--diff-ins-bg);
         color: var(--body-text);
         padding: 2px;
       }
 
-      ::v-deep .icon {
+      :deep() .icon {
         position: relative;
         color: var(--muted);
       }
@@ -202,7 +202,7 @@ export default {
         background: var(--nav-hover);
         text-decoration: none;
 
-        ::v-deep .icon {
+        :deep() .icon {
           color: var(--body-text);
         }
       }
@@ -229,7 +229,7 @@ export default {
         padding-left: 16px;
       }
 
-      ::v-deep .label I {
+      :deep() .label I {
         padding-right: 2px;
       }
     }

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 #popover>
               <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

@@ -121,7 +121,7 @@ export default {
     },
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     clearInterval(this.keepAliveTimer);
     this.cleanup();
   },
@@ -380,11 +380,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"
@@ -445,51 +446,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);
     }