@rancher/shell 3.0.8-rc.1 → 3.0.8-rc.10

package/store/index.js

@@ -263,7 +263,7 @@ export const state = () => {
     $route:                  markRaw({}),
     $plugin:                 markRaw({}),
     showWorkspaceSwitcher:   true,
-
+    localCluster:            null,
   };
 };
 
@@ -272,10 +272,20 @@ export const getters = {
     return state.clusterReady === true;
   },
 
+  /**
+   * Cache of the mgmt cluster fetched at start up
+   *
+   * We cannot rely on the store to cache this as the store may contain a page without the local cluster
+   */
+  localCluster(state) {
+    return state.localCluster;
+  },
+
   isMultiCluster(state, getters) {
-    const clusters = getters['management/all'](MANAGEMENT.CLUSTER);
+    const clusterCount = getters['management/all'](COUNT)?.[0]?.counts?.[MANAGEMENT.CLUSTER]?.summary?.count || 0;
+    const localCluster = getters['localCluster'];
 
-    if (clusters.length === 1 && clusters[0].metadata?.name === 'local') {
+    if (clusterCount === 1 && !!localCluster) {
       return false;
     } else {
       return true;
@@ -592,10 +602,9 @@ export const getters = {
   },
 
   isStandaloneHarvester(state, getters) {
-    const clusters = getters['management/all'](MANAGEMENT.CLUSTER);
-    const cluster = clusters.find((c) => c.id === 'local') || {};
+    const localCluster = getters['localCluster'];
 
-    return getters['isSingleProduct'] && cluster.isHarvester && !getters['isRancherInHarvester'];
+    return getters['isSingleProduct'] && localCluster?.isHarvester && !getters['isRancherInHarvester'];
   },
 
   showTopLevelMenu(getters) {
@@ -640,9 +649,10 @@ export const mutations = {
   clearPageActionHandler(state) {
     state.pageActionHandler = null;
   },
-  managementChanged(state, { ready, isRancher }) {
+  managementChanged(state, { ready, isRancher, localCluster }) {
     state.managementReady = ready;
     state.isRancher = isRancher;
+    state.localCluster = localCluster;
   },
   clusterReady(state, ready) {
     state.clusterReady = ready;
@@ -846,11 +856,21 @@ export const actions = {
 
     res = await allHash(promises);
 
+    let localCluster = null;
+
     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 } });
+      await dispatch('management/findAll', { type: MANAGEMENT.CLUSTER, opt: { watch: false } });
       toWatch.push(MANAGEMENT.CLUSTER);
+
+      localCluster = getters['management/byId'](MANAGEMENT.CLUSTER, 'local');
+    } else {
+      try {
+        localCluster = await dispatch('management/find', {
+          type: MANAGEMENT.CLUSTER, id: 'local', opt: { watch: false }
+        });
+      } catch (e) { // we don't care about errors, specifically 404s
+      }
     }
 
     // See comment above. Now that we have feature flags we can watch resources
@@ -858,11 +878,7 @@ export const actions = {
       dispatch('management/watch', { type });
     });
 
-    const isMultiCluster = getters['isMultiCluster'];
-
     // If the local cluster is a Harvester cluster and 'rancher-manager-support' is true, it means that the embedded Rancher is being used.
-    const localCluster = res[MANAGEMENT.CLUSTER]?.find((c) => c.id === 'local');
-
     if (localCluster?.isHarvester) {
       const harvesterSetting = await dispatch('cluster/findAll', { type: HCI.SETTING, opt: { url: `/v1/harvester/${ HCI.SETTING }s` } });
       const rancherManagerSupport = harvesterSetting.find((setting) => setting.id === 'rancher-manager-support');
@@ -904,6 +920,7 @@ export const actions = {
     commit('managementChanged', {
       ready: true,
       isRancher,
+      localCluster
     });
 
     if ( res[FLEET.WORKSPACE] ) {
@@ -914,6 +931,8 @@ export const actions = {
       });
     }
 
+    const isMultiCluster = getters['isMultiCluster'];
+
     console.log(`Done loading management; isRancher=${ isRancher }; isMultiCluster=${ isMultiCluster }`); // eslint-disable-line no-console
   },
 
@@ -1232,10 +1251,10 @@ export const actions = {
     }
   },
 
-  nuxtClientInit({ dispatch, commit, rootState }, nuxt) {
-    commit('setRouter', nuxt.app.router);
-    commit('setRoute', nuxt.route);
-    commit('setPlugin', nuxt.app.$plugin);
+  dashboardClientInit({ dispatch, commit, rootState }, context) {
+    commit('setRouter', context.app.router);
+    commit('setRoute', context.route);
+    commit('setPlugin', context.app.$plugin);
 
     dispatch('management/rehydrateSubscribe');
     dispatch('cluster/rehydrateSubscribe');

package/store/notifications.ts

@@ -1,6 +1,12 @@
 import { md5 } from '@shell/utils/crypto';
 import { randomStr } from '@shell/utils/string';
-import { EncryptedNotification, Notification, StoredNotification } from '@shell/types/notifications';
+import {
+  EncryptedNotification,
+  Notification,
+  NotificationLevel,
+  NotificationHandlerExtensionName,
+  StoredNotification
+} from '@shell/types/notifications';
 import { encrypt, decrypt, deriveKey } from '@shell/utils/crypto/encryption';
 
 /**
@@ -65,6 +71,9 @@ async function saveEncryptedNotification(getters: any, notification: Notificatio
     level:           notification.level,
     primaryAction:   notification.primaryAction,
     secondaryAction: notification.secondaryAction,
+    preference:      notification.preference,
+    handlerName:     notification.handlerName,
+    data:            notification.data,
   };
 
   const localStorageKey = getters['localStorageKey'];
@@ -108,15 +117,23 @@ export const getters = {
     return state.notifications;
   },
 
+  visible: (state: NotificationsStore) => {
+    return state.notifications.filter((n) => n.level !== NotificationLevel.Hidden);
+  },
+
+  hidden: (state: NotificationsStore) => {
+    return state.notifications.filter((n) => n.level === NotificationLevel.Hidden);
+  },
+
   item: (state: NotificationsStore) => {
     return (id: string) => {
       return state.notifications.find((i) => i.id === id);
     };
   },
 
-  // Count of unread notifications
+  // Count of unread notifications - only considers visible notifications
   unreadCount: (state: NotificationsStore) => {
-    return state.notifications.filter((n) => !n.read).length;
+    return state.notifications.filter((n) => !n.read && n.level !== NotificationLevel.Hidden).length;
   },
 
   /**
@@ -192,9 +209,10 @@ export const mutations = {
     syncIndex(state);
   },
 
+  // Only mark visible notifications as read via mark all
   markAllRead(state: NotificationsStore) {
     state.notifications.forEach((notification) => {
-      if (!notification.read) {
+      if (!notification.read && notification.level !== NotificationLevel.Hidden) {
         notification.read = true;
       }
     });
@@ -252,6 +270,20 @@ export const mutations = {
   },
 };
 
+async function callNotifyHandler({ $extension }: any, notification: Notification, read: boolean) {
+  if (notification?.handlerName) {
+    const handler = $extension.getDynamic(NotificationHandlerExtensionName, notification.handlerName);
+
+    if (handler) {
+      try {
+        await handler.onReadUpdated(notification, read);
+      } catch (e) {
+        console.error('Error invoking notification handler', e); // eslint-disable-line no-console
+      }
+    }
+  }
+}
+
 export const actions = {
   async add( { commit, dispatch, getters }: any, notification: Notification) {
     // We encrypt the notification on add - this is the only time we will encrypt it
@@ -295,6 +327,10 @@ export const actions = {
     if (notification?.preference) {
       await dispatch('prefs/set', notification.preference, { root: true });
     }
+
+    if (notification?.handlerName) {
+      await callNotifyHandler({ $extension: (this as any).$extension }, notification, true);
+    }
   },
 
   async markUnread({ commit, dispatch, getters }: any, id: string) {
@@ -309,6 +345,10 @@ export const actions = {
         value: notification.preference.unsetValue || '',
       }, { root: true });
     }
+
+    if (notification?.handlerName) {
+      await callNotifyHandler({ $extension: (this as any).$extension }, notification, false);
+    }
   },
 
   async markAllRead({ commit, dispatch, getters }: any) {
@@ -321,6 +361,13 @@ export const actions = {
     for (let i = 0; i < withPreference.length; i++) {
       await dispatch('prefs/set', withPreference[i].preference, { root: true });
     }
+
+    // For all notifications that have a handler, call the handler
+    const withHandler = getters.all.filter((n: Notification) => !!n.handlerName);
+
+    for (let i = 0; i < withHandler.length; i++) {
+      await callNotifyHandler({ $extension: (this as any).$extension }, withHandler[i], true);
+    }
   },
 
   remove({ commit, getters }: any, id: string) {

package/store/plugins.js

@@ -43,7 +43,6 @@ export const rke1Supports = [
 // Map a credential driver name to a component name
 // e.g. ec2 and eks both use the 'aws' driver to share the same pool of creds.
 const driverMap = {
-  aks:                             'azure',
   amazonec2:                       'aws',
   amazoneks:                       'aws',
   amazonelasticcontainerservice:   'aws',
@@ -62,6 +61,9 @@ const driverToFieldMap = {
   aws:    'amazonec2',
   gcp:    'google',
   oracle: 'oci',
+  aks:    'azure',
+  eks:    'amazonec2',
+  gke:    'google'
 };
 
 // Machine driver fields that are probably a credential field
@@ -107,8 +109,10 @@ const driverToCloudProviderMap = {
   linode:              '', // Show restricted options
   vmwarevsphere:       'rancher-vsphere',
   ovhcloudpubliccloud: '',
-
-  custom: undefined // Show all options
+  aks:                 'azure',
+  eks:                 'aws',
+  gke:                 'google',
+  custom:              undefined // Show all options
 };
 
 // Dynamically loaded drivers can call this eventually to register their options

package/store/prefs.js

@@ -1,6 +1,7 @@
 import { SETTING } from '@shell/config/settings';
 import { MANAGEMENT, STEVE } from '@shell/config/types';
 import { clone } from '@shell/utils/object';
+import { getBrandMeta } from '@shell/utils/brand';
 
 const definitions = {};
 /**
@@ -119,6 +120,7 @@ export const SCALE_POOL_PROMPT = create('scale-pool-prompt', null, { parseJSON }
 export const READ_NEW_RELEASE = create('read-new-release', '', { parseJSON });
 export const READ_SUPPORT_NOTICE = create('read-support-notice', '', { parseJSON });
 export const READ_UPCOMING_SUPPORT_NOTICE = create('read-upcoming-support-notice', '', { parseJSON });
+export const READ_ANNOUNCEMENTS = create('read-announcements', '', { parseJSON });
 
 // --------------------
 
@@ -521,16 +523,14 @@ export const actions = {
   setBrandStyle({ rootState, rootGetters }, dark = false) {
     if (rootState.managementReady) {
       try {
-        const brandSetting = rootGetters['management/byId'](MANAGEMENT.SETTING, SETTING.BRAND);
+        const brandSetting = rootGetters['management/brand'];
 
-        if (brandSetting && brandSetting.value && brandSetting.value !== '') {
-          const brand = brandSetting.value;
-
-          const brandMeta = require(`~shell/assets/brand/${ brand }/metadata.json`);
+        if (brandSetting !== '') {
+          const brandMeta = getBrandMeta(brandSetting);
           const hasStylesheet = brandMeta.hasStylesheet === 'true';
 
           if (hasStylesheet) {
-            document.body.classList.add(brand);
+            document.body.classList.add(brandMeta);
           } else {
             // TODO option apply color at runtime
           }

package/store/type-map.js

@@ -1895,7 +1895,7 @@ function ifHave(getters, option) {
   case IF_HAVE.NOT_V1_ISTIO: {
     return !isV1Istio(getters);
   }
-  case IF_HAVE.MULTI_CLUSTER: {
+  case IF_HAVE.MULTI_CLUSTER: { // Used by harvester extension
     return getters.isMultiCluster;
   }
   case IF_HAVE.NEUVECTOR_NAMESPACE: {
@@ -1904,10 +1904,10 @@ function ifHave(getters, option) {
   case IF_HAVE.ADMIN: {
     return isAdminUser(getters);
   }
-  case IF_HAVE.MCM_DISABLED: {
+  case IF_HAVE.MCM_DISABLED: { // There's a general MCM ff, this is conflating it with a harvester concept
     return !getters['isRancherInHarvester'];
   }
-  case IF_HAVE.NOT_STANDALONE_HARVESTER: {
+  case IF_HAVE.NOT_STANDALONE_HARVESTER: { // Not used by harvester extension...
     return !getters['isStandaloneHarvester'];
   }
   default:

package/store/ui-context.ts

@@ -0,0 +1,86 @@
+interface Context {
+  tag: string;
+  value: any;
+  hookId?: string;
+  description?: string;
+  icon?: string;
+}
+
+interface Element {
+  id: number;
+  context: Context
+}
+
+interface State {
+  idCounter: number;
+  elements: Record<string, Element>;
+}
+
+export const state = function(): State {
+  return {
+    idCounter: 0,
+    elements:  {}
+  };
+};
+
+export const getters = {
+  all: (state: State) => {
+    return Object.values(state.elements)
+      .map((e) => e.context)
+      .sort((a, b) => (a.tag || '').localeCompare(b.tag || '') || 0);
+  },
+};
+
+export const mutations = {
+  add(state: State, element: Element) {
+    state.elements[element.id] = element;
+  },
+
+  update(state: State, element: Element) {
+    const existingElement = state.elements[element.id];
+
+    if (existingElement) {
+      existingElement.context = element.context;
+    }
+  },
+
+  remove(state: State, element: Element) {
+    delete state.elements[element.id];
+  }
+};
+
+let id = null;
+
+export const actions = {
+  add({ commit, state }: { commit: Function, state: State }, context: Context) {
+    if (context?.value === undefined || !context?.tag) {
+      throw new Error(`[ui-context] context {{${ JSON.stringify(context) }}} is not valid`);
+    }
+
+    id = `ctx-${ state.idCounter++ }`;
+
+    commit('add', { id, context });
+
+    return id;
+  },
+
+  update({ commit, state }: { commit: Function, state: State }, element: Element) {
+    const old = state.elements[element.id];
+
+    if (!old) {
+      throw new Error(`[ui-context] element with id {{${ element.id }}} not found`);
+    }
+
+    commit('update', element);
+  },
+
+  remove({ commit, state }: { commit: Function, state: State }, id: number) {
+    const element = state.elements[id];
+
+    if (!element) {
+      throw new Error(`[ui-context] element with id {{${ id }}} not found`);
+    }
+
+    commit('remove', element);
+  }
+};

package/store/wm.ts

@@ -0,0 +1,244 @@
+import { STORAGE_KEY } from '@shell/components/nav/WindowManager/constants';
+import { Layout, Position, Tab } from '@shell/types/window-manager';
+import { addObject, removeObject } from '@shell/utils/array';
+import { BOTTOM, LEFT, RIGHT } from '@shell/utils/position';
+
+/**
+ * This module defines the Vuex store for the window manager, managing tabs, their positions,
+ * active states, panel dimensions, and user preferences.
+ *
+ * The store can be used to add, switch, and close tabs, as well as manage panel dimensions and locked positions.
+ * The store can be accessed also by Rancher extensions to integrate to handle the window manager.
+ */
+export interface State {
+  tabs: Array<Tab>;
+  active: Record<Position | string, string>;
+  open: Record<Position | string, boolean>;
+  panelHeight: Record<Position | string, number | null>;
+  panelWidth: Record<Position | string, number | null>;
+  userPin: Position | string | null;
+  lockedPositions: Position[];
+}
+
+function moveTabByReference(tabs: Tab[], fromPosition: Position | undefined, toPosition: Position, tabId: string) {
+  const idx = tabs.findIndex((t) => t.id === tabId && t.position === fromPosition);
+
+  if (idx === -1) return;
+  const [tab] = tabs.splice(idx, 1);
+
+  tab.position = toPosition;
+
+  tabs.push(tab);
+}
+
+export const state = function() {
+  return {
+    tabs:        [],
+    active:      {},
+    open:        {},
+    panelHeight: { [BOTTOM]: window.localStorage.getItem(STORAGE_KEY[BOTTOM]) },
+    panelWidth:  {
+      [LEFT]:  window.localStorage.getItem(STORAGE_KEY[LEFT]),
+      [RIGHT]: window.localStorage.getItem(STORAGE_KEY[RIGHT]),
+    },
+    userPin:         null,
+    lockedPositions: [],
+  };
+};
+
+export const getters = {
+  byId:            (state: State) => (id: string) => state.tabs.find((x) => x.id === id),
+  tabs:            (state: State) => state.tabs,
+  isOpen:          (state: State) => (position: string) => state.open[position],
+  panelWidth:      (state: State) => state.panelWidth,
+  panelHeight:     (state: State) => state.panelHeight,
+  userPin:         (state: State) => state.userPin,
+  lockedPositions: (state: State) => state.lockedPositions,
+};
+
+export const mutations = {
+  /**
+   * Adds a new tab to the window manager.
+   *
+   * Usage:
+   *
+   * store.dispatch('wm/open', {
+   *   id:            PRODUCT_NAME,
+   *   extensionId:   PRODUCT_NAME,
+   *   label:         'Label',
+   *   component:     'LabelComponent',
+   *   position:      'bottom',
+   *   layouts:       [
+   *     Layout.default,
+   *     Layout.home
+   *   ],
+   *   showHeader: false,
+   * }, { root: true });
+   *
+   * This will add a new tab with the specified properties to the window manager and set it as active.
+   */
+  addTab(state: State, tab: Tab) {
+    const existing = state.tabs.find((x) => x.id === tab.id);
+
+    if (tab.position === undefined || tab.position as string === 'undefined') {
+      tab.position = (window.localStorage.getItem(STORAGE_KEY['pin']) || BOTTOM) as Position;
+    }
+
+    if (!existing) {
+      if (state.lockedPositions.includes(BOTTOM)) {
+        tab.position = BOTTOM;
+      }
+
+      if (tab.layouts === undefined) {
+        tab.layouts = [Layout.default];
+      }
+
+      if (tab.showHeader === undefined) {
+        tab.showHeader = true;
+      }
+
+      addObject(state.tabs, tab);
+    }
+
+    state.active[tab.position] = tab.id;
+    state.open = { ...state.open, [tab.position]: true };
+
+    state.userPin = tab.position;
+    window.localStorage.setItem(STORAGE_KEY['pin'], tab.position);
+  },
+
+  /**
+   * Switches a tab to a different position within the window manager.
+   *
+   * Usage:
+   * store.commit('wm/switchTab', { tabId: 'tab1', targetPosition: LEFT });
+   *
+   * This will move the tab with ID 'tab1' to the LEFT position and update the active tab accordingly.
+   */
+  switchTab(state: State, { tabId, targetPosition }: { tabId: string, targetPosition: Position }) {
+    const current = { ...(state.tabs.find((x) => x.id === tabId) || {}) };
+
+    if (current) {
+      moveTabByReference(state.tabs, current.position, targetPosition, tabId);
+
+      state.active[targetPosition] = tabId;
+      state.open = { ...state.open, [targetPosition]: true };
+
+      if (current.position !== targetPosition) {
+        const oldPositionTabs = state.tabs.filter((t) => t.position === current.position);
+
+        if (current.position) {
+          state.active[current.position] = oldPositionTabs[0]?.id || '';
+          state.open[current.position] = oldPositionTabs.length > 0;
+        }
+      }
+    }
+
+    state.userPin = targetPosition;
+    window.localStorage.setItem(STORAGE_KEY['pin'], targetPosition);
+  },
+
+  closeTab(state: State, { id }: { id: string }) {
+    const tab = state.tabs.find((x) => x.id === id);
+
+    if ( !tab ) {
+      return;
+    }
+
+    let idx = state.tabs.indexOf(tab);
+
+    removeObject(state.tabs, tab);
+    if ( idx >= state.tabs.length ) {
+      idx = state.tabs.length - 1;
+    }
+
+    if ( idx >= 0 ) {
+      state.active[tab.position] = state.tabs[idx].id;
+    } else {
+      state.open[tab.position] = false;
+    }
+
+    const oldPositionTabs = state.tabs.filter((t) => t.position === tab.position);
+
+    if (tab.position) {
+      state.active[tab.position] = oldPositionTabs[0]?.id || '';
+      state.open[tab.position] = oldPositionTabs.length > 0;
+    }
+  },
+
+  removeTab(state: State, tab: Tab) {
+    removeObject(state.tabs, tab);
+  },
+
+  setOpen(state: State, { position, open }: { position: string, open: boolean }) {
+    state.open = { ...state.open, [position]: open };
+  },
+
+  setActive(state: State, { position, id }: { position: string, id: string }) {
+    state.active[position] = id;
+  },
+
+  setPanelHeight(state: State, { position, height }: { position: string, height: number | null }) {
+    state.panelHeight[position] = height;
+    window.localStorage.setItem(STORAGE_KEY[BOTTOM], `${ height }`);
+
+    for (const tab of state.tabs) {
+      if (tab.position === position) {
+        tab.containerHeight = height;
+      }
+    }
+  },
+
+  setPanelWidth(state: State, { position, width }: { position: Position, width: number | null }) {
+    state.panelWidth[position] = width;
+    window.localStorage.setItem(STORAGE_KEY[position as keyof typeof STORAGE_KEY], `${ width }`);
+
+    for (const tab of state.tabs) {
+      if (tab.position === position) {
+        tab.containerWidth = width;
+      }
+    }
+  },
+
+  /**
+   * Sets the user's preferred pin position for tabs in the window manager.
+   *
+   * Usage:
+   * store.commit('wm/setUserPin', LEFT);
+   *
+   * This will set the user's preferred pin position to LEFT and store it in local storage.
+   */
+  setUserPin(state: State, pin: string) {
+    state.userPin = pin;
+    window.localStorage.setItem(STORAGE_KEY['pin'], pin);
+  },
+
+  /**
+   * Sets the locked positions for tabs in the window manager.
+   *
+   * Usage:
+   * store.commit('wm/setLockedPositions', [LEFT, RIGHT]);
+   *
+   * This will lock tabs to the specified positions, preventing them from being moved elsewhere.
+   */
+  setLockedPositions(state: State, positions: Position[]) {
+    state.lockedPositions = positions;
+  }
+};
+
+export const actions = {
+  close({ commit }: { state: State, getters: any, commit: any }, id: string) {
+    if ( !id ) {
+      throw new Error('[wm] id is not provided');
+    }
+    commit('closeTab', { id });
+  },
+
+  open({ commit }: { commit: any }, tab: Tab) {
+    if ( !tab.id ) {
+      throw new Error('[wm] id is not provided');
+    }
+
+    commit('addTab', tab);
+  }
+};