@rancher/shell 3.0.6 → 3.0.7

package/plugins/subscribe-events.ts

@@ -0,0 +1,211 @@
+import { keyForSubscribe } from '@shell/plugins/steve/resourceWatcher';
+import {
+  SubscribeEventListener, SubscribeEventCallbackArgs, SubscribeEventListenerArgs, SubscribeEventWatch, SubscribeEventWatchArgs,
+  STEVE_WATCH_EVENT_LISTENER_CALLBACK
+} from '@shell/types/store/subscribe-events.types';
+import { STEVE_WATCH_EVENT_TYPES, STEVE_WATCH_PARAMS } from '@shell/types/store/subscribe.types';
+
+type SubscribeEventWatches = { [socketId: string]: SubscribeEventWatch};
+
+/**
+ * For a specific resource watch, listen for a specific event type and trigger callback when received
+ *
+ * For example, listen for provisioning.cattle.io clusters messages of type resource.changes and trigger callback when received
+ *
+ * Watch - UI is watching a resource type restricted by nothing/id/namespace/selector. For example
+ * - watch all pods
+ * - watch specific pod
+ * - watch pods with specific labels
+ * Event - Rancher socket messages TO the ui. For example
+ * - resource.started
+ * - resource.change
+ * - resource.changes
+ * Listener - listen to events, trigger when received. For example
+ * - listen for resource.changes messages for the all pods watch
+ * Callback - triggered when a listener has heard something
+ * - watch for all pods receives a resource.changes message, it has a listener, listener executes it's callback
+ *
+ * Watch 0:M Events 0:M Listeners 0:M Callbacks
+ */
+export class SteveWatchEventListenerManager {
+  private keyForSubscribe({ params }: {params: STEVE_WATCH_PARAMS}): string {
+    return keyForSubscribe(params);
+  }
+
+  /**
+   * collection of ui --> rancher watches. we keep state specific to this class here
+   */
+  private watches: SubscribeEventWatches = {};
+
+  /**
+   * Not all event types can be listened to are supported, only these
+   */
+  public readonly supportedEventTypes: STEVE_WATCH_EVENT_TYPES[] = [STEVE_WATCH_EVENT_TYPES.CHANGES];
+
+  /**
+   * Not all event types can be listened to are supported, check if one is
+   */
+  public isSupportedEventType(type: STEVE_WATCH_EVENT_TYPES): boolean {
+    return !!this.supportedEventTypes.includes(type);
+  }
+
+  /** **** Watches ***********************/
+
+  public getWatch({ params } : SubscribeEventWatchArgs): SubscribeEventWatch {
+    const socketId = this.keyForSubscribe({ params });
+
+    return this.watches[socketId];
+  }
+
+  private initialiseWatch({ params }: SubscribeEventWatchArgs): SubscribeEventWatch {
+    const socketId = this.keyForSubscribe({ params });
+
+    this.watches[socketId] = {
+      hasStandardWatch: false,
+      listeners:        []
+    };
+
+    return this.watches[socketId];
+  }
+
+  /**
+   * This is just tidying the entry
+   *
+   * All watches associated with this type should be unwatched
+   */
+  private deleteWatch({ params } : SubscribeEventWatchArgs) {
+    const socketId = this.keyForSubscribe({ params });
+
+    delete this.watches[socketId];
+  }
+
+  /**
+   * Is there a standard non-listener watch for this this type
+   */
+  public hasStandardWatch({ params } : SubscribeEventWatchArgs): boolean {
+    const socketId = this.keyForSubscribe({ params });
+
+    return this.watches[socketId]?.hasStandardWatch;
+  }
+
+  /**
+   * Set if this type has a standard non-listener watch associated with it
+   */
+  public setStandardWatch({ standardWatch, args }: { standardWatch: boolean, args: SubscribeEventWatchArgs}) {
+    const { params } = args;
+
+    let watch = this.getWatch({ params });
+
+    if (!watch) {
+      if (!standardWatch) {
+        // no point setting a non-existent watch as not started
+        return;
+      }
+      watch = this.initialiseWatch({ params });
+    }
+
+    watch.hasStandardWatch = standardWatch;
+
+    // if we've just set this to false and there's no listeners, tidy up the entry
+    if (!watch.hasStandardWatch && watch.listeners.length === 0) {
+      this.deleteWatch({ params });
+    }
+  }
+
+  /** **** Listeners ***********************/
+
+  public hasEventListeners({ params }: SubscribeEventWatchArgs): boolean {
+    const socketId = this.keyForSubscribe({ params });
+    const watch = this.watches[socketId];
+    const listener = watch?.listeners.find((l) => Object.values(l.callbacks).length > 0);
+
+    return !!listener;
+  }
+
+  public getEventListener({ entryOnly, args }: { entryOnly?: boolean, args: SubscribeEventListenerArgs}): SubscribeEventListener | null {
+    const { params, event } = args;
+    const socketId = this.keyForSubscribe({ params });
+    const watch = this.watches[socketId];
+
+    if (watch) {
+      const listener = watch.listeners.find((w) => w.event === event);
+
+      if (listener && (entryOnly || !!Object.keys(listener?.callbacks || {}).length)) {
+        return listener;
+      }
+    }
+
+    return null;
+  }
+
+  public addEventListener({ event, params }: SubscribeEventListenerArgs): SubscribeEventListener {
+    if (!event) {
+      throw new Error(`Cannot add a socket watch event listener if there's no event to listen to`);
+    }
+
+    let watch = this.getWatch({ params });
+
+    if (!watch) {
+      watch = this.initialiseWatch({ params });
+    }
+
+    let listener = this.getEventListener({ entryOnly: true, args: { event, params } });
+
+    if (!listener) {
+      listener = {
+        event,
+        callbacks: { },
+      };
+      watch.listeners.push(listener);
+    }
+
+    return listener;
+  }
+
+  public triggerEventListener({ event, params }: SubscribeEventListenerArgs) {
+    const eventWatcher = this.getEventListener({ entryOnly: false, args: { event, params } });
+
+    if (eventWatcher) {
+      Object.values(eventWatcher.callbacks).forEach((cb) => {
+        cb();
+      });
+    }
+  }
+
+  public triggerAllEventListeners({ params }: SubscribeEventWatchArgs) {
+    const watch = this.getWatch({ params });
+
+    watch.listeners.forEach((l) => {
+      Object.values(l.callbacks || {}).forEach((cb) => cb());
+    });
+  }
+
+  /** **** Callbacks ***********************/
+
+  public addEventListenerCallback({ callback, args }: {
+    callback: STEVE_WATCH_EVENT_LISTENER_CALLBACK,
+    args: SubscribeEventCallbackArgs
+  }): SubscribeEventListener {
+    const { params, event, id } = args;
+    const eventWatcher = this.addEventListener({ event, params });
+
+    if (!eventWatcher.callbacks[id]) {
+      eventWatcher.callbacks[id] = callback;
+    }
+
+    return eventWatcher;
+  }
+
+  /**
+   * This is just tidying the entry
+   *
+   * All watches associated with this type should be unwatched
+   */
+  public removeEventListenerCallback({ event, params, id }: SubscribeEventCallbackArgs) {
+    const existing = this.getEventListener({ args: { event, params } });
+
+    if (existing) {
+      delete existing.callbacks[id];
+    }
+  }
+}

package/rancher-components/BadgeState/BadgeState.vue

@@ -79,22 +79,24 @@ export default defineComponent({
     border-radius: 20px;
 
     &.bg-info {
-      border-color: var(--info);
+      color: var(--on-info-banner);
+      background: var(--info-badge, var(--info-banner));
     }
 
     &.bg-error {
-      border-color: var(--error);
+      color: var(--on-error-banner);
+      background: var(--error-badge, var(--error-banner));
     }
 
     &.bg-warning {
-      border-color: var(--warning);
+      color: var(--on-warning-banner);
+      background: var(--warning-badge, var(--warning-banner));
     }
 
     // Successful states are de-emphasized by using [text-]color instead of background-color
     &.bg-success {
-      color: var(--success);
-      background: transparent;
-      border-color: var(--success);
+      color: var(--on-success-banner, var(--success-text));
+      background: var(--success-badge, var(--success));
     }
 
     // Added badge-disabled instead of bg-disabled since bg-disabled is used in other places with !important styling, an investigation is needed to make the naming consistent

package/rancher-components/Banner/Banner.vue

@@ -231,12 +231,13 @@ $icon-size: 24px;
     .warning & {
       background: var(--warning-banner-bg);
       border-color: var(--warning);
+      color: var(--warning-banner-text, var(--body-text));
     }
 
     .error & {
       background: var(--error-banner-bg);
       border-color: var(--error);
-      color: var(--error);
+      color: var(--error-banner-text, var(--error));
     }
 
     &.stacked {

package/rancher-components/Form/Checkbox/Checkbox.vue

@@ -416,7 +416,7 @@ $fontColor: var(--input-label);
     width: 14px;
     background-color: var(--body-bg);
     border-radius: var(--border-radius);
-    border: 1px solid var(--border);
+    border: 1px solid var(--input-border);
     flex-shrink: 0;
 
     &:focus-visible {
@@ -440,12 +440,12 @@ $fontColor: var(--input-label);
   }
 
   input:checked ~ .checkbox-custom {
-    background-color:var(--primary);
+    background-color: var(--active, var(--primary));
     -webkit-transform: rotate(0deg) scale(1);
     -ms-transform: rotate(0deg) scale(1);
     transform: rotate(0deg) scale(1);
     opacity:1;
-    border: 1px solid var(--primary);
+    border: 1px solid var(--active, var(--primary));
   }
 
   // Custom Checkbox tick

package/rancher-components/Form/Radio/RadioButton.vue

@@ -274,7 +274,7 @@ $fontColor: var(--input-label);
     min-width: 14px;
     background-color: var(--input-bg);
     border-radius: 50%;
-    border: 1.5px solid var(--border);
+    border: 1.5px solid var(--input-border);
     margin-top: 5px;
   }
 
@@ -284,12 +284,12 @@ $fontColor: var(--input-label);
 
   .radio-custom {
     &[aria-checked="true"] {
-      background-color: var(--primary);
+      background-color: var(--active, var(--primary));
       -webkit-transform: rotate(0deg) scale(1);
       -ms-transform: rotate(0deg) scale(1);
       transform: rotate(0deg) scale(1);
       opacity:1;
-      border: 1.5px solid var(--primary);
+      border: 1.5px solid var(--active, var(--primary));
 
       // Ensure that checked radio buttons are muted but still visibly selected when muted
       &.text-muted {

package/store/index.js

@@ -40,6 +40,7 @@ import { isDevBuild } from '@shell/utils/version';
 import { markRaw } from 'vue';
 import paginationUtils from '@shell/utils/pagination-utils';
 import { addReleaseNotesNotification } from '@shell/utils/release-notes';
+import sideNavService from '@shell/components/nav/TopLevelMenu.helper';
 
 // Disables strict mode for all store instances to prevent warning about changing state outside of mutations
 // because it's more efficient to do that sometimes.
@@ -230,8 +231,8 @@ const updateActiveNamespaceCache = (state, activeNamespaceCache) => {
 /**
  * Are we in the vai enabled world where mgmt clusters are paginated?
  */
-const paginateClusters = (rootGetters) => {
-  return paginationUtils.isEnabled({ rootGetters }, { store: 'management', resource: { id: MANAGEMENT.CLUSTER, context: 'side-bar' } });
+const paginateClusters = ({ rootGetters, state }) => {
+  return paginationUtils.isEnabled({ rootGetters, $plugin: state.$plugin }, { store: 'management', resource: { id: MANAGEMENT.CLUSTER, context: 'side-bar' } });
 };
 
 export const state = () => {
@@ -260,11 +261,8 @@ export const state = () => {
     $router:                 markRaw({}),
     $route:                  markRaw({}),
     $plugin:                 markRaw({}),
-    /**
-     * Cache state of side nav clusters. This avoids flickering when the user changes pages and the side nav component re-renders
-     */
-    sideNavCache:            undefined,
     showWorkspaceSwitcher:   true,
+
   };
 };
 
@@ -629,10 +627,6 @@ export const getters = {
     return `${ base }/latest`;
   },
 
-  sideNavCache(state) {
-    return state.sideNavCache;
-  },
-
   ...gcGetters
 };
 
@@ -773,10 +767,6 @@ export const mutations = {
     state.$plugin = markRaw(pluginDefinition || {});
   },
 
-  setSideNavCache(state, sideNavCache) {
-    state.sideNavCache = sideNavCache;
-  },
-
   showWorkspaceSwitcher(state, value) {
     state.showWorkspaceSwitcher = value;
   },
@@ -855,7 +845,7 @@ export const actions = {
 
     res = await allHash(promises);
 
-    if (!res[MANAGEMENT.SETTING] || !paginateClusters(rootGetters)) {
+    if (!res[MANAGEMENT.SETTING] || !paginateClusters({ rootGetters, state })) {
       // This introduces a synchronous request, however we need settings to determine if SSP is enabled
       // Eventually it will be removed when SSP is always on
       res[MANAGEMENT.CLUSTER] = await dispatch('management/findAll', { type: MANAGEMENT.CLUSTER, opt: { watch: false } });
@@ -1033,7 +1023,7 @@ export const actions = {
     await dispatch('management/waitForSchema', { type: MANAGEMENT.CLUSTER });
 
     // If SSP is on we won't have requested all clusters
-    if (!paginateClusters(rootGetters)) {
+    if (!paginateClusters({ rootGetters, state })) {
       await dispatch('management/waitForHaveAll', { type: MANAGEMENT.CLUSTER });
     }
 
@@ -1132,8 +1122,10 @@ export const actions = {
     commit('updateNamespaces', { filters: ids, getters });
   },
 
-  async cleanNamespaces({ getters, dispatch, rootGetters }) {
-    if (paginateClusters(rootGetters)) {
+  async cleanNamespaces({
+    getters, dispatch, rootGetters, state
+  }) {
+    if (paginateClusters({ rootGetters, state })) {
       // See https://github.com/rancher/dashboard/issues/12864
       // old world...
       // - loadManagement makes a request to fetch all mgmt clusters
@@ -1187,6 +1179,8 @@ export const actions = {
       }
     });
 
+    sideNavService.reset();
+
     await dispatch('management/unsubscribe');
     commit('managementChanged', { ready: false });
     commit('management/reset');
@@ -1308,10 +1302,6 @@ export const actions = {
     });
   },
 
-  setSideNavCache({ commit }, sideNavCache) {
-    commit('setSideNavCache', sideNavCache);
-  },
-
   showWorkspaceSwitcher({ commit }, value) {
     commit('showWorkspaceSwitcher', value);
   },

package/types/extension-manager.ts

@@ -1,4 +1,11 @@
+import { EXT_IDS_VALUES } from '@shell/core/plugin';
 import { ClusterProvisionerContext } from '@shell/core/types';
+
+type ExtensionManagerType = { [name: string]: Function, }
+export type ExtensionManagerTypes =
+  { [type in EXT_IDS_VALUES]?: ExtensionManagerType } & // eslint-disable-line no-unused-vars
+  { [name: string]: ExtensionManagerType }
+
 export type ExtensionManager = {
   internal(): any;
   loadPluginAsync(plugin: any): Promise<void>;
@@ -12,7 +19,7 @@ export type ExtensionManager = {
   applyPlugin(plugin: any): void;
   register(type: string, name: string, fn: Function): void;
   unregister(type: string, name: string, fn: Function): void;
-  getAll(): any;
+  getAll(): ExtensionManagerTypes;
   getPlugins(): any;
   getDynamic(typeName: string, name: string): any;
   getValidator(name: string): any;

package/types/resources/settings.d.ts

@@ -1,25 +1,32 @@
-
 export interface PaginationSettingsStore {
-  [name: string]: {
-    resources: {
+  resources: {
+    /**
+     * Enable for all resources in this store
+     */
+    enableAll?: boolean,
+    /**
+     * Enable for only some resources in this store
+     */
+    enableSome?: {
       /**
-       * Enable for all resources in this store
+       * Specific resource type to enable
        */
-      enableAll: boolean,
-      enableSome: {
-        /**
-         * Specific resource type to enable
-         */
-        enabled: (string | { resource: string, context: string[]})[],
-        /**
-         * There's no hardcoded headers or custom list for the resource type, headers will be generated from schema attributes.columns
-         */
-        generic: boolean,
-      },
-    }
+      enabled?: (string | { resource: string, context: string[]})[],
+      /**
+       * Additional resource types that do not have any custom pagination settings (headers, lists, etc) but can be generated automatically (headers from CRD additionalPrinterColumns) can be enabled
+       */
+      generic?: boolean,
+    },
   }
 }
 
+/**
+ * Determine which resources can utilise server-side pagination
+ */
+export interface PaginationSettingsStores {
+  [store: string]: PaginationSettingsStore
+}
+
 export type PaginationFeature = 'listAutoRefreshToggle' | 'listManualRefresh'
 
 /**
@@ -33,7 +40,7 @@ export interface PaginationSettings {
   /**
    * Should pagination be enabled for resources in a store
    */
-  stores?: PaginationSettingsStore,
+  stores?: PaginationSettingsStores,
 
   /**
    * List of specific features that can be enabled / disabled