@rancher/shell 3.0.5 → 3.0.7

package/components/nav/Group.vue

@@ -381,21 +381,21 @@ export default {
       }
 
       &.active {
-        color: var(--primary-hover-text);
-        background-color: var(--primary-hover-bg);
+        color: var(--on-active, var(--primary-hover-text));
+        background-color: var(--active-nav, var(--primary-hover-bg));
 
         h6 {
           padding: 8px 0 8px 16px;
           font-weight: bold;
-          color: var(--primary-hover-text);
+          color: var(--on-active, var(--primary-hover-text));
         }
 
         &:hover {
-          background-color: var(--primary-hover-bg);
+          background-color: var(--nav-active-hover, var(--primary-hover-bg));
         }
 
         ~ I {
-          color: var(--primary-hover-text);
+          color: var(--on-active, var(--primary-hover-text));
         }
       }
       &:hover:not(.active) {
@@ -433,8 +433,24 @@ export default {
         margin-left: 0;
       }
 
+      .child:hover {
+        background: var(--nav-hover, var(--nav-active));
+      }
+
       &.group-highlight {
-        background: var(--nav-active);
+        background: var(--category-active, var(--nav-active));
+
+        .active.header {
+          &:hover {
+            background-color: var(--nav-active-hover)
+          }
+        }
+
+        .child, .header {
+          &:hover {
+            background: var(--category-active-hover, var(--primary));
+          }
+        }
       }
     }
 
@@ -480,13 +496,17 @@ export default {
     padding: 0;
 
     A, A I {
-      color: var(--primary-hover-text);
+      color: var(--on-active, var(--primary-hover-text));
     }
 
     A {
-      color: var(--primary-hover-text);
-      background-color: var(--primary-hover-bg);
+      color: var(--on-active, var(--primary-hover-text));
+      background-color: var(--active-nav, var(--primary-hover-bg));
       font-weight: bold;
+
+      &:hover {
+        background: var(--nav-active-hover);
+      }
     }
   }
 

package/components/nav/Header.vue

@@ -843,16 +843,14 @@ export default {
       align-items: center;
       display: flex;
       margin-right: 8px;
-      height: 55px;
-      margin-left: 5px;
       max-width: 200px;
       padding: 12px 0;
     }
 
     .side-menu-logo-img {
       object-fit: contain;
-      height: 21px;
       max-width: 200px;
+      height: 36px;
     }
 
     > * {
@@ -933,8 +931,8 @@ export default {
       :deep() div .btn.role-tertiary {
         border: 1px solid var(--header-btn-bg);
         border: none;
-        background: var(--header-btn-bg);
-        color: var(--header-btn-text);
+        background: var(--tertiary-header, var(--header-btn-bg));
+        color: var(--on-tertiary-header, var(--header-btn-text));
         padding: 0 10px;
         line-height: 32px;
         min-height: 32px;
@@ -945,8 +943,8 @@ export default {
         }
 
         &:hover {
-          background: var(--primary);
-          color: #fff;
+          background: var(--tertiary-header-hover, var(--primary));
+          color: var(--on-tertiary-header-hover, #fff);
         }
 
         &[disabled=disabled] {
@@ -1079,7 +1077,7 @@ export default {
   .user-name {
     display: flex;
     align-items: center;
-    color: var(--secondary);
+    color: var(--body-text, var(--secondary));
   }
 
   .user-menu {

package/components/nav/NamespaceFilter.vue

@@ -1069,7 +1069,7 @@ export default {
           &.ns-selected:not(:hover) {
             .ns-item {
               > * {
-                color: var(--primary);
+                color: var(--link);
               }
             }
 

package/components/nav/TopLevelMenu.helper.ts

@@ -139,12 +139,6 @@ export abstract class BaseTopLevelMenuHelper {
     this.$store = $store;
 
     this.hasProvCluster = this.$store.getters[`management/schemaFor`](CAPI.RANCHER_CLUSTER);
-
-    // Reduce flicker when component is recreated on a different layout
-    const { clustersPinned = [], clustersOthers = [] } = this.$store.getters['sideNavCache'] || {};
-
-    this.clustersPinned.push(...clustersPinned);
-    this.clustersOthers.push(...clustersOthers);
   }
 
   protected convertToCluster(mgmtCluster: MgmtCluster, provCluster: ProvCluster): TopLevelMenuCluster {
@@ -163,10 +157,6 @@ export abstract class BaseTopLevelMenuHelper {
       clusterRoute:    { name: 'c-cluster-explorer', params: { cluster: mgmtCluster.id } }
     };
   }
-
-  protected cacheClusters() {
-    this.$store.dispatch('setSideNavCache', { clustersPinned: this.clustersPinned, clustersOthers: this.clustersOthers });
-  }
 }
 
 /**
@@ -202,9 +192,9 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
     this.clustersOthersWrapper = new PaginationWrapper({
       $store,
       id:       'tlm-unpinned-clusters',
-      onChange: () => {
+      onChange: async() => {
         if (this.args) {
-          this.update(this.args);
+          await this.update(this.args);
         }
       },
       enabledFor: {
@@ -220,9 +210,9 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
     this.provClusterWrapper = new PaginationWrapper({
       $store,
       id:       'tlm-prov-clusters',
-      onChange: () => {
+      onChange: async() => {
         if (this.args) {
-          this.update(this.args);
+          await this.update(this.args);
         }
       },
       enabledFor: {
@@ -276,8 +266,6 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
 
     this.clustersPinned.push(..._clustersPinned);
     this.clustersOthers.push(..._clustersNotPinned);
-
-    this.cacheClusters();
   }
 
   async destroy() {
@@ -390,7 +378,6 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
   private async updateProvCluster(notPinned: MgmtCluster[], pinned: MgmtCluster[]): Promise<ProvCluster[]> {
     return this.provClusterWrapper.request({
       pagination: {
-
         filters: [
           PaginationParamFilter.createMultipleFields(
             [...notPinned, ...pinned]
@@ -399,7 +386,6 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
               }))
           )
         ],
-
         page:                 1,
         sort:                 [],
         projectsOrNamespaces: []
@@ -432,8 +418,6 @@ export class TopLevelMenuHelperLegacy extends BaseTopLevelMenuHelper implements
 
     this.clustersPinned.push(..._clustersPinned);
     this.clustersOthers.push(..._clustersNotPinned);
-
-    this.cacheClusters();
   }
 
   async destroy() {
@@ -581,3 +565,46 @@ export class TopLevelMenuHelperLegacy extends BaseTopLevelMenuHelper implements
     return sorted;
   }
 }
+
+/**
+ * Retain state of the side nav, no matter when the TopLevelMenu component is created/deleted (on layout change)
+ *
+ * This means there's no flickering when the user changes pages and the side nav component re-renders
+ *
+ * Also it means we're not unwatching then watching the clusters
+ */
+class TopLevelMenuHelperService {
+  private _helper?: TopLevelMenuHelper;
+  public init($store: VuexStore) {
+    if (this._helper) {
+      return;
+    }
+
+    const canPagination = $store.getters[`management/paginationEnabled`]({
+      id:      MANAGEMENT.CLUSTER,
+      context: 'side-bar',
+    }) && $store.getters[`management/paginationEnabled`]({
+      id:      CAPI.RANCHER_CLUSTER,
+      context: 'side-bar',
+    });
+
+    this._helper = canPagination ? new TopLevelMenuHelperPagination({ $store }) : new TopLevelMenuHelperLegacy({ $store });
+  }
+
+  public async reset() {
+    await this._helper?.destroy();
+    delete this._helper;
+  }
+
+  get helper(): TopLevelMenuHelper {
+    if (!this._helper) {
+      throw new Error('Unable to use the side nav cluster helper (not initialised)');
+    }
+
+    return this._helper;
+  }
+}
+
+const instance = new TopLevelMenuHelperService();
+
+export default instance;

package/components/nav/TopLevelMenu.vue

@@ -14,7 +14,7 @@ import { SETTING } from '@shell/config/settings';
 import { getProductFromRoute } from '@shell/utils/router';
 import { isRancherPrime } from '@shell/config/version';
 import Pinned from '@shell/components/nav/Pinned';
-import { TopLevelMenuHelperPagination, TopLevelMenuHelperLegacy } from '@shell/components/nav/TopLevelMenu.helper';
+import sideNavService from '@shell/components/nav/TopLevelMenu.helper';
 import { debounce } from 'lodash';
 import { sameContents } from '@shell/utils/array';
 
@@ -27,6 +27,8 @@ export default {
   },
 
   data() {
+    sideNavService.init(this.$store);
+
     const { displayVersion, fullVersion } = getVersionInfo(this.$store);
     const hasProvCluster = this.$store.getters[`management/schemaFor`](CAPI.RANCHER_CLUSTER);
 
@@ -37,7 +39,7 @@ export default {
       id:      CAPI.RANCHER_CLUSTER,
       context: 'side-bar',
     });
-    const helper = canPagination ? new TopLevelMenuHelperPagination({ $store: this.$store }) : new TopLevelMenuHelperLegacy({ $store: this.$store });
+    const helper = sideNavService.helper;
     const provClusters = !canPagination && hasProvCluster ? this.$store.getters[`management/all`](CAPI.RANCHER_CLUSTER) : [];
     const mgmtClusters = !canPagination ? this.$store.getters[`management/all`](MANAGEMENT.CLUSTER) : [];
 
@@ -327,7 +329,6 @@ export default {
 
   beforeUnmount() {
     document.removeEventListener('keyup', this.handler);
-    this.helper?.destroy();
   },
 
   methods: {
@@ -1073,6 +1074,14 @@ export default {
       width: 300px;
       overflow: auto;
 
+      & .category {
+        & a.router-link-active {
+          &:hover {
+            color: var(--on-active, var(--default));
+          }
+        }
+      }
+
       .option {
         align-items: center;
         cursor: pointer;
@@ -1119,6 +1128,15 @@ export default {
           }
         }
 
+        &:not(.active-menu-link) {
+          &:hover {
+            .pin {
+              display: block;
+              color: var(--body-text-hover);
+            }
+          }
+        }
+
         &:hover {
           text-decoration: none;
 
@@ -1178,19 +1196,31 @@ export default {
             outline-offset: -4px;
           }
 
-          background: var(--primary-hover-bg);
-          color: var(--primary-hover-text);
+          background: var(--active-nav, var(--primary-hover-bg));
+          color: var(--on-active, var(--primary-hover-text));
 
           svg {
-            fill: var(--primary-hover-text);
+            fill: var(--on-active, var(--primary-hover-text));
           }
 
           i {
-            color: var(--primary-hover-text);
+            color: var(--on-active, var(--primary-hover-text));
           }
 
           div .description {
-            color: var(--default);
+            color: var(--on-active, var(--default));
+          }
+
+          &:hover {
+            background: var(--active-hover, var(--primary-hover-bg));
+
+            div {
+              color: var(--on-active, var(--default));
+            }
+
+            svg {
+              fill: var(--on-active, var(--primary-hover-text));
+            }
           }
         }
 
@@ -1201,8 +1231,8 @@ export default {
         }
 
         &:hover {
-          color: var(--primary-hover-text);
-          background: var(--primary-hover-bg);
+          color: var(--tertiary-hover-app-bar, var(--primary-hover-text));
+          background: var(--nav-hover-top-level, var(--primary-hover-bg));
           > div {
             color: var(--primary-hover-text);
 
@@ -1211,10 +1241,10 @@ export default {
             }
           }
           svg {
-            fill: var(--primary-hover-text);
+            fill: var(--tertiary-hover-app-bar, var(--primary-hover-text));
           }
           div {
-            color: var(--primary-hover-text);
+            color: var(--tertiary-hover-app-bar, var(--primary-hover-text));
           }
           &.disabled {
             background: transparent;
@@ -1549,8 +1579,8 @@ export default {
     overflow: hidden;
     & IMG {
       object-fit: contain;
-      height: 21px;
       max-width: 200px;
+      height: 36px;
     }
   }
 
@@ -1592,7 +1622,7 @@ export default {
       padding: 8px 20px;
 
       &:hover {
-        background-color: var(--primary-hover-bg);
+        background-color: var(--active-hover, var(--primary-hover-bg));
         color: var(--primary-hover-text);
         text-decoration: none;
       }

package/components/nav/Type.vue

@@ -249,12 +249,7 @@ export default {
       height: 33px;
 
       &:hover {
-        background: var(--nav-hover);
         text-decoration: none;
-
-        :deep() .icon {
-          color: var(--body-text);
-        }
       }
     }
 

package/components/nav/__tests__/TopLevelMenu.test.ts

@@ -3,6 +3,7 @@ import { mount, Wrapper } from '@vue/test-utils';
 import { CAPI, COUNT, MANAGEMENT } from '@shell/config/types';
 import { PINNED_CLUSTERS } from '@shell/store/prefs';
 import { nextTick } from 'vue';
+import sideNavService from '@shell/components/nav/TopLevelMenu.helper';
 
 /**
  * `clusters` doubles up as both mgmt and prov clusters (don't shoot the messenger)
@@ -53,6 +54,7 @@ const waitForIt = async() => {
 describe('topLevelMenu', () => {
   beforeEach(() => {
     jest.useFakeTimers();
+    sideNavService.reset();
   });
 
   afterEach(() => {

package/config/pagination-table-headers.js

@@ -3,7 +3,8 @@ import {
   STATE, NAME as NAME_COL, NAMESPACE as NAMESPACE_COL, AGE, OBJECT,
   EVENT_LAST_SEEN_TIME,
   EVENT_TYPE,
-  SECRET_CLONE
+  SECRET_CLONE,
+  EVENT_FIRST_SEEN_TIME
 } from '@shell/config/table-headers';
 
 // This file contains table headers
@@ -56,10 +57,17 @@ export const STEVE_EVENT_OBJECT = {
   search: 'involvedObject.kind',
 };
 
+export const STEVE_EVENT_FIRST_SEEN = {
+  ...EVENT_FIRST_SEEN_TIME,
+
+  value: 'metadata.fields.7',
+  sort:  'metadata.fields.7:desc',
+};
+
 export const STEVE_EVENT_LAST_SEEN = {
   ...EVENT_LAST_SEEN_TIME,
   value: 'metadata.fields.0',
-  sort:  'metadata.fields.0',
+  sort:  'metadata.fields.0:desc',
 };
 
 export const STEVE_EVENT_TYPE = {

package/config/product/explorer.js

@@ -22,11 +22,12 @@ import {
   ACCESS_KEY, DESCRIPTION, EXPIRES, EXPIRY_STATE, LAST_USED, SUB_TYPE, AGE_NORMAN, SCOPE_NORMAN, PERSISTENT_VOLUME_CLAIM, RECLAIM_POLICY, PV_REASON, WORKLOAD_HEALTH_SCALE, POD_RESTARTS,
   DURATION, MESSAGE, REASON, EVENT_TYPE, OBJECT, ROLE, ROLES, VERSION, INTERNAL_EXTERNAL_IP, KUBE_NODE_OS, CPU, RAM, SECRET_DATA,
   EVENT_LAST_SEEN_TIME,
+  EVENT_FIRST_SEEN_TIME,
 } from '@shell/config/table-headers';
 
 import { DSL } from '@shell/store/type-map';
 import {
-  STEVE_AGE_COL, STEVE_EVENT_LAST_SEEN, STEVE_EVENT_OBJECT, STEVE_EVENT_TYPE, STEVE_LIST_GROUPS, STEVE_NAMESPACE_COL, STEVE_NAME_COL, STEVE_STATE_COL
+  STEVE_AGE_COL, STEVE_EVENT_FIRST_SEEN, STEVE_EVENT_LAST_SEEN, STEVE_EVENT_OBJECT, STEVE_EVENT_TYPE, STEVE_LIST_GROUPS, STEVE_NAMESPACE_COL, STEVE_NAME_COL, STEVE_STATE_COL
 } from '@shell/config/pagination-table-headers';
 
 import { COLUMN_BREAKPOINTS } from '@shell/types/store/type-map';
@@ -294,7 +295,7 @@ export function init(store) {
       STEVE_NAMESPACE_COL,
       {
         ...INGRESS_TARGET,
-        sort:   'spec.rules[0].host', // Pending API Support - BUG - https://github.com/rancher/rancher/issues/50526
+        sort:   'spec.rules[0].host',
         search: false, // This is broken in normal world, so disable here
       },
       {
@@ -337,7 +338,7 @@ export function init(store) {
   );
 
   headers(EVENT,
-    [STATE, EVENT_LAST_SEEN_TIME, EVENT_TYPE, REASON, OBJECT, 'Subobject', 'Source', MESSAGE, 'First Seen', 'Count', NAME_COL, NAMESPACE_COL],
+    [STATE, EVENT_LAST_SEEN_TIME, EVENT_TYPE, REASON, OBJECT, 'Subobject', 'Source', MESSAGE, EVENT_FIRST_SEEN_TIME, 'Count', NAME_COL, NAMESPACE_COL],
     [
       STEVE_STATE_COL,
       STEVE_EVENT_LAST_SEEN,
@@ -347,7 +348,7 @@ export function init(store) {
       'Subobject',
       'Source',
       MESSAGE,
-      'First Seen',
+      STEVE_EVENT_FIRST_SEEN,
       'Count',
       STEVE_NAME_COL,
       STEVE_NAMESPACE_COL,
@@ -359,10 +360,10 @@ export function init(store) {
       STEVE_STATE_COL,
       STEVE_NAME_COL,
       STEVE_NAMESPACE_COL,
-      HPA_REFERENCE, // Pending API Support - BUG - https://github.com/rancher/rancher/issues/50527
-      MIN_REPLICA, // Pending API Support - BUG - https://github.com/rancher/rancher/issues/50527
-      MAX_REPLICA, // Pending API Support - BUG - https://github.com/rancher/rancher/issues/50527
-      CURRENT_REPLICA, // Pending API Support - BUG - https://github.com/rancher/rancher/issues/50527
+      HPA_REFERENCE,
+      MIN_REPLICA,
+      MAX_REPLICA,
+      CURRENT_REPLICA,
       STEVE_AGE_COL
     ]
   );

package/config/table-headers.js

@@ -541,6 +541,15 @@ export const LAST_SEEN_TIME = {
   tooltip:  'tableHeaders.lastSeenTooltip'
 };
 
+export const EVENT_FIRST_SEEN_TIME = {
+  name:     'firstSeen',
+  labelKey: 'tableHeaders.firstSeen',
+  tooltip:  'tableHeaders.firstSeenTooltip',
+
+  value: 'firstSeen',
+  sort:  'firstSeen:desc',
+};
+
 export const EVENT_LAST_SEEN_TIME = {
   ...LAST_SEEN_TIME,
   defaultSort: true,

package/config/uiplugins.js

@@ -107,7 +107,7 @@ export function uiPluginAnnotation(chart, name) {
 /**
  * Parse the Rancher version string
  */
-function parseRancherVersion(v) {
+export function parseRancherVersion(v) {
   let parsedVersion = semver.coerce(v)?.version;
   const splitArr = parsedVersion?.split('.');
 

package/core/plugin.ts

@@ -16,24 +16,32 @@ import {
   ModelExtensionConstructor,
   PluginRouteRecordRaw, RegisterStore, UnregisterStore, CoreStoreSpecifics, CoreStoreConfig,
   NavHooks, OnNavToPackage, OnNavAwayFromPackage, OnLogIn, OnLogOut,
-  ExtensionEnvironment
+  PaginationTableColumn,
+  ExtensionEnvironment,
+  ServerSidePaginationExtensionConfig
 } from './types';
 import coreStore, { coreStoreModule, coreStoreState } from '@shell/plugins/dashboard-store';
 import { defineAsyncComponent, markRaw, Component } from 'vue';
 import { getVersionData, CURRENT_RANCHER_VERSION } from '@shell/config/version';
+import { ExtensionManagerTypes } from '@shell/types/extension-manager';
 
-// Registration IDs used for different extension points in the extensions catalog
+/** Registration IDs used for different extension points in the extensions catalog */
 export const EXT_IDS = {
-  MODELS:          'models',
-  MODEL_EXTENSION: 'model-extension',
-};
+  MODELS:                           'models',
+  MODEL_EXTENSION:                  'model-extension',
+  /**
+   * Extension can provide resources that use server-side-pagination
+   */
+  SERVER_SIDE_PAGINATION_RESOURCES: 'server-side-pagination',
+} as const;
+export type EXT_IDS_VALUES = (typeof EXT_IDS)[keyof typeof EXT_IDS];
 
 export type ProductFunction = (plugin: IPlugin, store: any) => void;
 
 export class Plugin implements IPlugin {
   public id: string;
   public name: string;
-  public types: any = {};
+  public types: ExtensionManagerTypes = {};
   public l10n: { [key: string]: Function[] } = {};
   public modelExtensions: { [key: string]: Function[] } = {};
   public locales: { locale: string, label: string}[] = [];
@@ -247,10 +255,21 @@ export class Plugin implements IPlugin {
   }
 
   /**
-   * Adds a new column to a table on the UI
+   * Adds a new column to a ResourceTable
+   *
+   * @param where
+   * @param when
+   * @param action
+   * @param column
+   *  The information required to show a header and values for a column in a table
+   * @param paginationColumn
+   *  As per `column`, but is used where server-side pagination is enabled
    */
-  addTableColumn(where: string, when: LocationConfig | string, column: TableColumn): void {
-    this._addUIConfig(ExtensionPoint.TABLE_COL, where, when, column);
+  addTableColumn(where: string, when: LocationConfig | string, column: TableColumn, paginationColumn?: PaginationTableColumn): void {
+    this._addUIConfig(ExtensionPoint.TABLE_COL, where, when, {
+      column,
+      paginationColumn
+    });
   }
 
   setHomePage(component: any) {
@@ -348,6 +367,11 @@ export class Plugin implements IPlugin {
     }
   }
 
+  public enableServerSidePagination(config: ServerSidePaginationExtensionConfig) {
+    console.info(`Extension "${ this.name || this.id }" is enabling server-side pagination for some resources`, config); // eslint-disable-line no-console
+    this.register(EXT_IDS.SERVER_SIDE_PAGINATION_RESOURCES, this.id, () => config);
+  }
+
   public async onLogOut(store: any) {
     await Promise.all(this.stores.map((s: any) => store.dispatch(`${ s.storeName }/onLogout`)));