@rancher/shell 0.2.5 → 0.3.1

package/components/nav/WindowManager/ContainerLogs.vue

@@ -3,17 +3,16 @@ import { saveAs } from 'file-saver';
 import AnsiUp from 'ansi_up';
 import { addParams } from '@shell/utils/url';
 import { base64Decode } from '@shell/utils/crypto';
-import {
-  LOGS_RANGE, LOGS_TIME, LOGS_WRAP, DATE_FORMAT, TIME_FORMAT
-} from '@shell/store/prefs';
+import { LOGS_RANGE, LOGS_TIME, LOGS_WRAP } from '@shell/store/prefs';
 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 day from 'dayjs';
+import VirtualList from 'vue-virtual-scroll-list';
+import LogItem from '@shell/components/LogItem';
 
-import { escapeHtml, escapeRegex } from '@shell/utils/string';
-import { HARVESTER_NAME as VIRTUAL } from '@shell/config/product/harvester-manager';
+import { escapeRegex } from '@shell/utils/string';
+import { HARVESTER_NAME as VIRTUAL } from '@shell/config/features';
 
 import Socket, {
   EVENT_CONNECTED,
@@ -29,10 +28,15 @@ const ansiup = new AnsiUp();
 
 export default {
   components: {
-    Window, Select, LabeledSelect, Checkbox, AsyncButton
+    Window,
+    Select,
+    LabeledSelect,
+    Checkbox,
+    AsyncButton,
+    VirtualList,
   },
 
-  props:      {
+  props: {
     // The definition of the tab itself
     tab: {
       type:     Object,
@@ -82,6 +86,7 @@ export default {
       backlog:     [],
       lines:       [],
       now:         new Date(),
+      logItem:     LogItem
     };
   },
 
@@ -207,13 +212,6 @@ export default {
       }
 
       return out;
-    },
-
-    timeFormatStr() {
-      const dateFormat = escapeHtml( this.$store.getters['prefs/get'](DATE_FORMAT));
-      const timeFormat = escapeHtml( this.$store.getters['prefs/get'](TIME_FORMAT));
-
-      return `${ dateFormat } ${ timeFormat }`;
     }
   },
 
@@ -221,17 +219,15 @@ export default {
     container() {
       this.connect();
     },
+
   },
 
   beforeDestroy() {
-    this.$refs.body.removeEventListener('scroll', this.boundUpdateFollowing);
     this.cleanup();
   },
 
   async mounted() {
     await this.connect();
-    this.boundUpdateFollowing = this.updateFollowing.bind(this);
-    this.$refs.body.addEventListener('scroll', this.boundUpdateFollowing);
     this.boundFlush = this.flush.bind(this);
     this.timerFlush = setInterval(this.boundFlush, 100);
   },
@@ -244,7 +240,7 @@ export default {
         this.lines = [];
       }
 
-      const params = {
+      let params = {
         previous:   this.previous,
         follow:     true,
         timestamps: true,
@@ -255,36 +251,9 @@ export default {
         params.container = this.container;
       }
 
-      const range = `${ this.range }`.trim().toLowerCase();
-      const match = range.match(/^(\d+)?\s*(.*?)s?$/);
+      const rangeParams = this.parseRange(this.range);
 
-      if ( match ) {
-        const count = parseInt(match[1], 10) || 1;
-        const unit = match[2];
-
-        switch ( unit ) {
-        case 'all':
-          // Do nothing
-          break;
-        case 'line':
-          params.tailLines = count;
-          break;
-        case 'second':
-          params.sinceSeconds = count;
-          break;
-        case 'minute':
-          params.sinceSeconds = count * 60;
-          break;
-        case 'hour':
-          params.sinceSeconds = count * 60 * 60;
-          break;
-        case 'day':
-          params.sinceSeconds = count * 60 * 60 * 24;
-          break;
-        }
-      } else {
-        params.tailLines = 100;
-      }
+      params = { ...params, ...rangeParams };
 
       let url = this.url || `${ this.pod.links.view }/log`;
 
@@ -322,12 +291,16 @@ export default {
           }
         }
 
-        this.backlog.push({
+        const parsedLine = {
           id:     lastId++,
           msg:    ansiup.ansi_to_html(msg),
           rawMsg: msg,
           time,
-        });
+        };
+
+        Object.freeze(parsedLine);
+
+        this.backlog.push(parsedLine);
       });
 
       this.socket.connect();
@@ -337,6 +310,11 @@ export default {
       if ( this.backlog.length ) {
         this.lines.push(...this.backlog);
         this.backlog = [];
+        const maxLines = this.parseRange(this.range)?.tailLines;
+
+        if (maxLines && this.lines.length > maxLines) {
+          this.lines = this.lines.slice(-maxLines);
+        }
       }
 
       if ( this.isFollowing ) {
@@ -347,14 +325,17 @@ export default {
     },
 
     updateFollowing() {
-      const el = this.$refs.body;
+      const virtualList = this.$refs.virtualList;
 
-      this.isFollowing = el.scrollTop + el.clientHeight + 2 >= el.scrollHeight;
+      if (virtualList) {
+        this.isFollowing = virtualList.getScrollSize() - virtualList.getClientSize() === virtualList.getOffset();
+      }
     },
 
     parseRange(range) {
-      range = `${ range }`.toLowerCase();
-      const match = range.match(/^(\d+)?\s*(.*)s?$/);
+      range = `${ range }`.trim().toLowerCase();
+      const match = range.match(/^(\d+)?\s*(.*?)s?$/);
+
       const out = {};
 
       if ( match ) {
@@ -363,7 +344,6 @@ export default {
 
         switch ( unit ) {
         case 'all':
-          out.tailLines = -1;
           break;
         case 'line':
           out.tailLines = count;
@@ -419,9 +399,11 @@ export default {
     },
 
     follow() {
-      const el = this.$refs.body;
+      const virtualList = this.$refs.virtualList;
 
-      el.scrollTop = el.scrollHeight;
+      if (virtualList) {
+        virtualList.$el.scrollTop = virtualList.getScrollSize();
+      }
     },
 
     toggleWrap(on) {
@@ -446,20 +428,11 @@ export default {
       this.connect();
     },
 
-    format(time) {
-      if ( !time ) {
-        return '';
-      }
-
-      return day(time).format(this.timeFormatStr);
-    },
-
     cleanup() {
       if ( this.socket ) {
         this.socket.disconnect();
         this.socket = null;
       }
-
       clearInterval(this.timerFlush);
     },
   },
@@ -490,7 +463,7 @@ export default {
             />
           </template>
         </Select>
-        <div class="log-action ml-5">
+        <div class="log-action log-action-group ml-5">
           <button
             class="btn bg-primary wm-btn"
             :disabled="isFollowing"
@@ -530,7 +503,7 @@ export default {
           </div>
         </div>
 
-        <div class="log-action ml-5">
+        <div class="log-action log-action-group ml-5">
           <v-popover
             trigger="click"
             placement="top"
@@ -570,7 +543,7 @@ export default {
           </v-popover>
         </div>
 
-        <div class="log-action ml-5">
+        <div class="log-action log-action-group ml-5">
           <input
             v-model="search"
             class="input-sm"
@@ -592,44 +565,25 @@ export default {
         ref="body"
         :class="{'logs-container': true, 'open': isOpen, 'closed': !isOpen, 'show-times': timestamps && filtered.length, 'wrap-lines': wrap}"
       >
-        <table
-          class="fixed"
-          cellpadding="0"
-          cellspacing="0"
-        >
-          <tbody class="logs-body">
-            <template v-if="filtered.length">
-              <tr
-                v-for="line in filtered"
-                :key="line.id"
-              >
-                <td
-                  :key="line.id + '-time'"
-                  class="time"
-                  v-html="format(line.time)"
-                />
-                <td
-                  :key="line.id + '-msg'"
-                  class="msg"
-                  v-html="line.msg"
-                />
-              </tr>
-            </template>
-            <tr v-else-if="search">
-              <td
-                v-t="'wm.containerLogs.noMatch'"
-                colspan="2"
-                class="msg text-muted"
-              />
-            </tr>
-            <tr
-              v-else
-              v-t="'wm.containerLogs.noData'"
-              colspan="2"
-              class="msg text-muted"
-            />
-          </tbody>
-        </table>
+        <VirtualList
+          v-show="filtered.length"
+          ref="virtualList"
+          data-key="id"
+          :data-sources="filtered"
+          :data-component="logItem"
+          direction="vertical"
+          class="virtual-list"
+          :keeps="200"
+          @scroll="updateFollowing"
+        />
+        <template v-if="!filtered.length">
+          <div v-if="search">
+            <span class="msg text-muted">{{ t('wm.containerLogs.noMatch') }}</span>
+          </div>
+          <div v-else>
+            <span class="msg text-muted">{{ t('wm.containerLogs.noData') }}</span>
+          </div>
+        </template>
       </div>
     </template>
   </Window>
@@ -649,7 +603,7 @@ export default {
     }
   }
 
-  .logs-container {
+  .logs-container{
     height: 100%;
     overflow: auto;
     padding: 5px;
@@ -661,31 +615,15 @@ export default {
       opacity: 0.25;
     }
 
-    .time {
-      white-space: nowrap;
-      display: none;
-      width: 0;
-      padding-right: 15px;
-      user-select: none;
+    &.wrap-lines ::v-deep .msg {
+      white-space: pre-wrap;
     }
 
-    &.show-times .time {
+    &.show-times ::v-deep .time {
       display: initial;
       width: auto;
     }
 
-    .msg {
-      white-space: nowrap;
-
-      .highlight {
-        color: var(--logs-highlight);
-        background-color: var(--logs-highlight-bg);
-      }
-    }
-
-    &.wrap-lines .msg {
-      white-space: normal;
-    }
   }
 
   .containerPicker {
@@ -693,6 +631,7 @@ export default {
       display: inline-block;
       min-width: 200px;
       height: 30px;
+      min-height: 30px;
       width: initial;
     }
   }
@@ -716,10 +655,23 @@ export default {
     }
   }
 
+  .log-action-group {
+    display: flex;
+    gap: 3px;
+
+    .input-sm {
+      min-width: 180px;
+    }
+  }
+
   .log-previous {
     align-items: center;
     display: flex;
+    min-width: 175px;
     height: 30px;
+    text-overflow : ellipsis;
+    overflow      : hidden;
+    white-space   : nowrap;
   }
 
   .status {
@@ -736,6 +688,11 @@ export default {
     }
   }
 
+  .virtual-list {
+    overflow-y: auto;
+    height:100%;
+  }
+
   @media only screen and (max-width: 1060px) {
     .wm-button-bar {
       .wm-btn {

package/components/nav/WindowManager/ContainerShell.vue

@@ -44,6 +44,12 @@ export default {
       required: true,
     },
 
+    // The width of the window
+    width: {
+      type:    Number,
+      default: undefined,
+    },
+
     // The pod to connect to
     pod: {
       type:     Object,
@@ -76,9 +82,10 @@ export default {
   computed: {
     xtermConfig() {
       return {
-        cursorBlink: true,
-        useStyle:    true,
-        fontSize:    12,
+        allowProposedApi: true,
+        cursorBlink:      true,
+        useStyle:         true,
+        fontSize:         12,
       };
     },
 
@@ -95,6 +102,10 @@ export default {
     height() {
       this.fit();
     },
+
+    width() {
+      this.fit();
+    },
   },
 
   beforeDestroy() {
@@ -147,10 +158,10 @@ export default {
 
       const terminal = new xterm.Terminal({
         theme: {
-          background: docStyle.getPropertyValue('--terminal-bg').trim(),
-          cursor:     docStyle.getPropertyValue('--terminal-cursor').trim(),
-          selection:  docStyle.getPropertyValue('--terminal-selection').trim(),
-          foreground: docStyle.getPropertyValue('--terminal-text').trim(),
+          background:          docStyle.getPropertyValue('--terminal-bg').trim(),
+          foreground:          docStyle.getPropertyValue('--terminal-text').trim(),
+          cursor:              docStyle.getPropertyValue('--terminal-cursor').trim(),
+          selectionBackground: docStyle.getPropertyValue('--terminal-selection').trim(),
         },
         ...this.xtermConfig,
       });
@@ -391,6 +402,12 @@ export default {
   </Window>
 </template>
 
+<style lang="scss">
+  .xterm-char-measure-element {
+    position: static;
+  }
+</style>
+
 <style lang="scss" scoped>
 .text-warning {
   animation: flasher 2.5s linear infinite;
@@ -405,6 +422,9 @@ export default {
 .shell-container {
   height: 100%;
   overflow: hidden;
+  .resize-observer {
+    display: none;
+  }
 }
 
 .shell-body {
@@ -421,6 +441,7 @@ export default {
     display: inline-block;
     min-width: 200px;
     height: 30px;
+    min-height: 30px;
     width: initial;
   }
 }

package/components/nav/WindowManager/KubectlShell.vue

@@ -5,7 +5,7 @@ import ContainerShell from './ContainerShell';
 export default {
   extends: ContainerShell,
 
-  props:      {
+  props: {
     // The definition of the tab itself
     cluster: {
       type:     Object,
@@ -28,11 +28,11 @@ export default {
       }
 
       const url = addParams(`${ this.cluster.links.shell.replace(/^http/, 'ws') }`, {
-        stdout:    1,
-        stdin:     1,
-        stderr:    1,
-        tty:       1,
-        command:   cmd
+        stdout:  1,
+        stdin:   1,
+        stderr:  1,
+        tty:     1,
+        command: cmd
       });
 
       return url;

package/components/nav/WindowManager/MachineSsh.vue

@@ -4,7 +4,7 @@ import ContainerShell from './ContainerShell';
 export default {
   extends: ContainerShell,
 
-  props:      {
+  props: {
     // The definition of the tab itself
     machine: {
       type:     Object,

package/components/nav/WindowManager/Window.vue

@@ -93,6 +93,8 @@ export default {
     vertical-align: middle;
     // line-height: $title-height - 4px;
     padding: 10px;
+    overflow-x: auto;
+    overflow-y: hidden;
   }
 
   .body {