@rancher/shell 0.3.0 → 0.3.2

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,7 +28,12 @@ const ansiup = new AnsiUp();
 
 export default {
   components: {
-    Window, Select, LabeledSelect, Checkbox, AsyncButton
+    Window,
+    Select,
+    LabeledSelect,
+    Checkbox,
+    AsyncButton,
+    VirtualList,
   },
 
   props: {
@@ -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: pre;
-
-      .highlight {
-        color: var(--logs-highlight);
-        background-color: var(--logs-highlight-bg);
-      }
-    }
-
-    &.wrap-lines .msg {
-      white-space: pre-wrap;
-    }
   }
 
   .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

@@ -82,9 +82,10 @@ export default {
   computed: {
     xtermConfig() {
       return {
-        cursorBlink: true,
-        useStyle:    true,
-        fontSize:    12,
+        allowProposedApi: true,
+        cursorBlink:      true,
+        useStyle:         true,
+        fontSize:         12,
       };
     },
 
@@ -157,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,
       });
@@ -440,6 +441,7 @@ export default {
     display: inline-block;
     min-width: 200px;
     height: 30px;
+    min-height: 30px;
     width: initial;
   }
 }

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 {

package/components/nav/WindowManager/index.vue

@@ -295,6 +295,10 @@ export default {
       }
 
       return this.component[tab.component];
+    },
+
+    emitDraggable(event) {
+      this.$emit('draggable', event);
     }
   }
 };
@@ -312,6 +316,8 @@ export default {
       :class="{
         'resizer-left': userPin == 'left',
       }"
+      @mousedown="emitDraggable(true)"
+      @mouseup="emitDraggable(false)"
     >
       <div
         v-if="userPin == 'right'"
@@ -362,6 +368,10 @@ export default {
       :key="tab.id"
       class="body"
       :class="{'active': tab.id === active}"
+      draggable="false"
+      @dragstart.prevent.stop
+      @dragend.prevent.stop
+      @mouseover="emitDraggable(false)"
     >
       <component
         :is="componentFor(tab)"

package/config/elemental-types.js

@@ -0,0 +1,9 @@
+export const ELEMENTAL_PRODUCT_NAME = 'elemental';
+export const ELEMENTAL_CLUSTER_PROVIDER = 'machineinventoryselectortemplate';
+
+export const ELEMENTAL_SCHEMA_IDS = {
+  MACHINE_INVENTORIES:            'elemental.cattle.io.machineinventory',
+  MACHINE_INV_SELECTOR_TEMPLATES: 'elemental.cattle.io.machineinventoryselectortemplate',
+};
+
+export const KIND = { MACHINE_INV_SELECTOR_TEMPLATES: 'MachineInventorySelectorTemplate' };

package/config/features.js

@@ -1,3 +1,5 @@
 export const ONE_WAY = [
   'token-hashing', 'multi-cluster-management'
 ];
+
+export const HARVESTER_NAME = 'harvester';

package/config/home-links.js

@@ -48,7 +48,10 @@ export async function fetchLinks(store, hasSupport, isSupportPage, t) {
   try {
     const uiLinksSetting = await store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.UI_CUSTOM_LINKS });
 
-    uiLinks = JSON.parse(uiLinksSetting.value);
+    // Don't try and parse empty string
+    if (uiLinksSetting.value) {
+      uiLinks = JSON.parse(uiLinksSetting.value);
+    }
   } catch (e) {
     console.warn('Could not parse custom link settings', e); // eslint-disable-line no-console
   }

package/config/pod-security-admission.ts

@@ -0,0 +1,82 @@
+import { PSADimension, PSALevel, PSAMode } from '@shell/types/pod-security-admission';
+
+/**
+ * All the PSA labels are created with this prefix, so we can use this to identify them
+ */
+export const PSALabelPrefix = 'pod-security.kubernetes.io/';
+
+/**
+ * Default modes of restrictions used for PSA
+ */
+export const PSAModes: PSAMode[] = ['enforce', 'audit', 'warn'];
+
+/**
+ * Levels of restrictions for the PSA
+ */
+export const PSALevels: PSALevel[] = ['privileged', 'baseline', 'restricted'];
+
+/**
+ * Used for restrictions in templates
+ */
+export const PSADimensions: PSADimension[] = ['usernames', 'runtimeClasses', 'namespaces'];
+
+/**
+ * For the UI, we prefer use this value as default one
+ */
+export const PSADefaultLevel = PSALevels[0];
+
+/**
+ * Default values for PSA should always be this one
+ */
+export const PSADefaultVersion = 'latest';
+
+/**
+ * PSA labels for namespaces.
+ * MODE must be one of `enforce`, `audit`, or `warn`.
+ * LEVEL must be one of `privileged`, `baseline`, or `restricted`.
+ * pod-security.kubernetes.io/<MODE>: <LEVEL>
+ *
+ * Optional: per-mode version label that can be used to pin the policy to the
+ * version that shipped with a given Kubernetes minor version (for example v1.25).
+ *
+ * https://kubernetes.io/docs/concepts/security/pod-security-admission/#pod-security-admission-labels-for-namespaces
+ */
+export const PSALabelsNamespaceMode = PSAModes.reduce((acc, mode) => [
+  ...acc,
+  `${ PSALabelPrefix }${ mode }`,
+], [] as string[]);
+
+/**
+ * PSA labels for namespaces.
+ * MODE must be one of `enforce`, `audit`, or `warn`.
+ * VERSION must be a valid Kubernetes minor version, or `latest`.
+ * pod-security.kubernetes.io/<MODE>-version: <VERSION>
+ *
+ * https://kubernetes.io/docs/concepts/security/pod-security-admission/#pod-security-admission-labels-for-namespaces
+ */
+export const PSALabelsNamespaceVersion = PSAModes.reduce((acc, mode) => [
+  ...acc,
+  `${ PSALabelPrefix }${ mode }-version`
+], [] as string[]);
+
+/**
+ * PSA labels for namespaces.
+ * MODE must be one of `enforce`, `audit`, or `warn`.
+ * LEVEL must be one of `privileged`, `baseline`, or `restricted`.
+ * pod-security.kubernetes.io/<MODE>: <LEVEL>
+ *
+ * Optional: per-mode version label that can be used to pin the policy to the
+ * version that shipped with a given Kubernetes minor version (for example v1.25).
+ *
+ * MODE must be one of `enforce`, `audit`, or `warn`.
+ * VERSION must be a valid Kubernetes minor version, or `latest`.
+ * pod-security.kubernetes.io/<MODE>-version: <VERSION>
+ *
+ * https://kubernetes.io/docs/concepts/security/pod-security-admission/#pod-security-admission-labels-for-namespaces
+ */
+export const PSALabelsNamespaces: string[] = [...PSALabelsNamespaceMode, ...PSALabelsNamespaceVersion];
+
+/**
+ * Generated table of icons with or hardcoded generated PSA labels
+ */
+export const PSAIconsDisplay: Record<string, string> = Object.assign({}, ...PSALabelsNamespaces.map(psa => ({ [psa]: 'icon-pod_security' })));

package/config/product/apps.js

@@ -32,7 +32,7 @@ export function init(store) {
   });
 
   virtualType({
-    label:      'Charts',
+    labelKey:   'catalog.charts.header',
     icon:       'compass',
     namespaced: false,
     name:       'charts',

package/config/product/auth.js

@@ -47,10 +47,10 @@ export function init(store) {
   });
 
   virtualType({
-    label:      store.getters['type-map/labelFor']({ id: MANAGEMENT.USER }, 2),
+    labelKey:   'typeLabel."management.cattle.io.user"',
     name:       USERS_VIRTUAL_TYPE,
     namespaced: false,
-    weight:     102,
+    weight:     103,
     icon:       'user',
     route:      {
       name:   'c-cluster-product-resource',
@@ -64,8 +64,9 @@ export function init(store) {
   configureType(MANAGEMENT.USER, { showListMasthead: false });
 
   spoofedType({
-    label:             store.getters['type-map/labelFor']({ id: NORMAN.SPOOFED.GROUP_PRINCIPAL }, 2),
+    labelKey:          'typeLabel."group.principal"',
     type:              NORMAN.SPOOFED.GROUP_PRINCIPAL,
+    weight:            101,
     ifHaveType:        MANAGEMENT.GLOBAL_ROLE_BINDING,
     collectionMethods: [],
     schemas:           [
@@ -142,11 +143,11 @@ export function init(store) {
   weightType(NORMAN.SPOOFED.GROUP_PRINCIPAL, 101, true);
 
   virtualType({
-    label:      store.getters['i18n/t']('rbac.roletemplate.label'),
+    labelKey:   'rbac.roletemplate.label',
     icon:       'user',
     namespaced: false,
     name:       ROLES_VIRTUAL_TYPE,
-    weight:     101,
+    weight:     102,
     route:      { name: 'c-cluster-auth-roles' },
     // There are two resource types shown on this page, MANAGEMENT.GLOBAL_ROLE and MANAGEMENT.ROLE_TEMPLATE
     // If there user can't see ROLE_TEMPLATE, they definitely can't see GLOBAL_ROLE

package/config/product/backup.js

@@ -43,7 +43,7 @@ export function init(store) {
       formatter: 'Date'
     },
     {
-      name:      'nextBackup',
+      name:      'lastBackup',
       labelKey:  'backupRestoreOperator.lastBackup',
       value:     'status.lastSnapshotTs',
       formatter: 'Date'