dashboard-shell-shell 1.0.10000011122 → 1.6.0-alpha.2

package/store/index.js

@@ -39,6 +39,7 @@ import { STORE, BLANK_CLUSTER } from '@shell/store/store-types';
 import { isDevBuild } from '@shell/utils/version';
 import { markRaw } from 'vue';
 import paginationUtils from '@shell/utils/pagination-utils';
+import { addReleaseNotesNotification } from '@shell/utils/release-notes';
 
 // 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.
@@ -263,6 +264,7 @@ export const state = () => {
      * 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,
   };
 };
 
@@ -601,6 +603,16 @@ export const getters = {
     return getters['isRancherInHarvester'] || getters['isMultiCluster'] || !getters['isSingleProduct'];
   },
 
+  showWorkspaceSwitcher(state, getters) {
+    const product = getters['currentProduct'];
+
+    if (!product) {
+      return false;
+    }
+
+    return product.showWorkspaceSwitcher && state.showWorkspaceSwitcher;
+  },
+
   targetRoute(state) {
     return state.targetRoute;
   },
@@ -763,7 +775,11 @@ export const mutations = {
 
   setSideNavCache(state, sideNavCache) {
     state.sideNavCache = sideNavCache;
-  }
+  },
+
+  showWorkspaceSwitcher(state, value) {
+    state.showWorkspaceSwitcher = value;
+  },
 };
 
 export const actions = {
@@ -801,7 +817,7 @@ export const actions = {
 
     const promises = {
       // Features checks on its own if they are available
-      features: dispatch('features/loadServer'),
+      [MANAGEMENT.FEATURE]: dispatch('features/loadServer'),
     };
 
     const toWatch = [
@@ -816,33 +832,33 @@ export const actions = {
     }
 
     if ( getters['management/schemaFor'](COUNT) ) {
-      promises['counts'] = dispatch('management/findAll', { type: COUNT, opt: { watch: false } });
+      promises[COUNT] = dispatch('management/findAll', { type: COUNT, opt: { watch: false } });
       toWatch.push(COUNT);
     }
 
     if ( getters['management/canList'](MANAGEMENT.SETTING) ) {
-      promises['settings'] = dispatch('management/findAll', { type: MANAGEMENT.SETTING, opt: { watch: false } });
+      promises[MANAGEMENT.SETTING] = dispatch('management/findAll', { type: MANAGEMENT.SETTING, opt: { watch: false } });
       toWatch.push(MANAGEMENT.SETTING);
     }
 
     if ( getters['management/schemaFor'](NAMESPACE) ) {
-      promises['namespaces'] = dispatch('management/findAll', { type: NAMESPACE, opt: { watch: false } });
+      promises[NAMESPACE] = dispatch('management/findAll', { type: NAMESPACE, opt: { watch: false } });
       toWatch.push(NAMESPACE);
     }
 
     const fleetSchema = getters['management/schemaFor'](FLEET.WORKSPACE);
 
     if (fleetSchema?.links?.collection) {
-      promises['workspaces'] = dispatch('management/findAll', { type: FLEET.WORKSPACE, opt: { watch: false } });
+      promises[FLEET.WORKSPACE] = dispatch('management/findAll', { type: FLEET.WORKSPACE, opt: { watch: false } });
       toWatch.push(FLEET.WORKSPACE);
     }
 
     res = await allHash(promises);
 
-    if (!res.settings || !paginateClusters(rootGetters)) {
+    if (!res[MANAGEMENT.SETTING] || !paginateClusters(rootGetters)) {
       // 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.clusters = await dispatch('management/findAll', { type: MANAGEMENT.CLUSTER, opt: { watch: false } });
+      res[MANAGEMENT.CLUSTER] = await dispatch('management/findAll', { type: MANAGEMENT.CLUSTER, opt: { watch: false } });
       toWatch.push(MANAGEMENT.CLUSTER);
     }
 
@@ -854,7 +870,7 @@ export const actions = {
     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.clusters?.find((c) => c.id === 'local');
+    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` } });
@@ -862,11 +878,16 @@ export const actions = {
       const isRancherInHarvester = (rancherManagerSupport?.value || rancherManagerSupport?.default) === 'true';
 
       commit('isRancherInHarvester', isRancherInHarvester);
+
+      if (getters['isSingleProduct']) {
+        console.log('Detect standalone harvester, subscribe Rancher socket'); // eslint-disable-line no-console
+        await dispatch('rancher/subscribe');
+      }
     }
 
-    const pl = res.settings?.find((x) => x.id === 'ui-pl')?.value;
-    const brand = res.settings?.find((x) => x.id === SETTING.BRAND)?.value;
-    const systemNamespaces = res.settings?.find((x) => x.id === SETTING.SYSTEM_NAMESPACES);
+    const pl = res[MANAGEMENT.SETTING]?.find((x) => x.id === 'ui-pl')?.value;
+    const brand = res[MANAGEMENT.SETTING]?.find((x) => x.id === SETTING.BRAND)?.value;
+    const systemNamespaces = res[MANAGEMENT.SETTING]?.find((x) => x.id === SETTING.SYSTEM_NAMESPACES);
 
     if ( pl ) {
       setVendor(pl);
@@ -876,6 +897,11 @@ export const actions = {
       setBrand(brand);
     }
 
+    // Add the notification for the release notes
+    if (isRancher) {
+      await addReleaseNotesNotification(dispatch, getters);
+    }
+
     if (systemNamespaces) {
       const namespace = (systemNamespaces.value || systemNamespaces.default)?.split(',');
 
@@ -887,10 +913,10 @@ export const actions = {
       isRancher,
     });
 
-    if ( res.workspaces ) {
+    if ( res[FLEET.WORKSPACE] ) {
       commit('updateWorkspace', {
         value: getters['prefs/get'](WORKSPACE),
-        all:   res.workspaces,
+        all:   res[FLEET.WORKSPACE],
         getters
       });
     }
@@ -1286,5 +1312,9 @@ export const actions = {
     commit('setSideNavCache', sideNavCache);
   },
 
+  showWorkspaceSwitcher({ commit }, value) {
+    commit('showWorkspaceSwitcher', value);
+  },
+
   ...gcActions
 };

package/store/notifications.ts

@@ -0,0 +1,426 @@
+import { md5 } from '@shell/utils/crypto';
+import { randomStr } from '@shell/utils/string';
+import { EncryptedNotification, Notification, StoredNotification } from '@shell/types/notifications';
+import { encrypt, decrypt, deriveKey } from '@shell/utils/crypto/encryption';
+
+/**
+ * Key used to store notifications in the browser's local storage
+ */
+const LOCAL_STORAGE_KEY_PREFIX = 'rancher-notifications-';
+
+/**
+ * Expire notifications in seconds (14 days)
+*/
+const EXPIRY = 14 * 24 * 60 * 60;
+
+/**
+ * Maximum number of notifications that will be kept
+ */
+const MAX_NOTIFICATIONS = 50;
+
+/**
+ * Broadcast channel name to send changes across tabs
+ */
+const NOTIFICATION_CHANNEL_NAME = 'rancher-notification-sync';
+
+/**
+ * Store for the UI Notification Centre
+ */
+interface NotificationsStore {
+  localStorageKey: string,
+  userId: string;
+  notifications: StoredNotification[],
+  encryptionKey: CryptoKey | undefined,
+}
+
+export const state = function(): NotificationsStore {
+  const notifications: StoredNotification[] = [];
+
+  return {
+    localStorageKey: '',
+    userId:          '',
+    encryptionKey:   undefined,
+    notifications,
+  };
+};
+
+let bc: BroadcastChannel;
+
+/**
+ * Sync notifications to other tabs using the broadcast channel. Send the user id, to cover corner case
+ * where a stale login exists for a different user in another tab.
+ */
+function sync(userId: string, operation: string, param?: any) {
+  bc?.postMessage({
+    userId,
+    operation,
+    param
+  });
+}
+
+async function saveEncryptedNotification(getters: any, notification: Notification) {
+  const toEncrypt: EncryptedNotification = {
+    title:           notification.title,
+    message:         notification.message,
+    level:           notification.level,
+    primaryAction:   notification.primaryAction,
+    secondaryAction: notification.secondaryAction,
+  };
+
+  const localStorageKey = getters['localStorageKey'];
+  const encryptionKey = getters['encryptionKey'];
+
+  try {
+    const data = JSON.stringify(toEncrypt);
+    const enc = await encrypt(data, encryptionKey);
+
+    window.localStorage.setItem(`${ localStorageKey }-${ notification.id }`, JSON.stringify(enc));
+  } catch (e) {
+    console.error('Unable to save notification to local storage', e); // eslint-disable-line no-console
+  }
+}
+
+/**
+ * Sync the notifications index to local storage.
+ *
+ * We only store the non-sensitive data about the notifications in the index - the other data is stored in individual entries which are encrypted.
+ */
+function syncIndex(state: NotificationsStore) {
+  const localStorageKey = state.localStorageKey;
+
+  // We just want the id, created, read and progress properties for the index
+  const index = state.notifications.map((n) => ({
+    id:       n.id,
+    created:  n.created,
+    read:     n.read,
+    progress: n.progress,
+  }));
+
+  try {
+    window.localStorage.setItem(localStorageKey, JSON.stringify(index));
+  } catch (e) {
+    console.error('Unable to save notifications index to local storage', e); // eslint-disable-line no-console
+  }
+}
+
+export const getters = {
+  all: (state: NotificationsStore) => {
+    return state.notifications;
+  },
+
+  item: (state: NotificationsStore) => {
+    return (id: string) => {
+      return state.notifications.find((i) => i.id === id);
+    };
+  },
+
+  // Count of unread notifications
+  unreadCount: (state: NotificationsStore) => {
+    return state.notifications.filter((n) => !n.read).length;
+  },
+
+  /**
+   * Local storage key includes the user key
+   */
+  localStorageKey: (state: NotificationsStore) => {
+    return state.localStorageKey;
+  },
+
+  userId: (state: NotificationsStore) => {
+    return state.userId;
+  },
+
+  encryptionKey: (state: NotificationsStore) => {
+    return state.encryptionKey;
+  },
+};
+
+export const mutations = {
+  add(state: NotificationsStore, notification: Notification) {
+    if (!notification.id) {
+      notification.id = randomStr();
+    } else {
+      // Check that there is not already a notification with this id
+      const index = state.notifications.findIndex((n) => n.id === notification.id);
+
+      if (index !== -1) {
+        console.error(`Can not add a notification with the same id as an existing notification (${ notification.id })`); // eslint-disable-line no-console
+
+        return;
+      }
+    }
+
+    const stored = {
+      ...notification,
+      read:    false,
+      created: new Date()
+    };
+
+    // Add to top of list
+    state.notifications.unshift(stored);
+
+    // Check that we have not exceeded the maximum number of notifications
+    if (state.notifications.length > MAX_NOTIFICATIONS) {
+      const removed = state.notifications.pop();
+
+      if (removed) {
+        // Remove the encrypted data for the notification that we just removed
+        window.localStorage.removeItem(`${ state.localStorageKey }-${ removed.id }`);
+      }
+    }
+
+    syncIndex(state);
+  },
+
+  markRead(state: NotificationsStore, id: string) {
+    const notification = state.notifications.find((n) => n.id === id);
+
+    if (notification && !notification.read) {
+      notification.read = true;
+    }
+
+    syncIndex(state);
+  },
+
+  markUnread(state: NotificationsStore, id: string) {
+    const notification = state.notifications.find((n) => n.id === id);
+
+    if (notification && notification.read) {
+      notification.read = false;
+    }
+
+    syncIndex(state);
+  },
+
+  markAllRead(state: NotificationsStore) {
+    state.notifications.forEach((notification) => {
+      if (!notification.read) {
+        notification.read = true;
+      }
+    });
+
+    syncIndex(state);
+  },
+
+  update(state: NotificationsStore, notification: Partial<Notification>) {
+    if (notification?.id) {
+      const index = state.notifications.findIndex((n) => n.id === notification.id);
+
+      if (index >= 0) {
+        state.notifications[index] = {
+          ...state.notifications[index],
+          ...notification
+        };
+      }
+    }
+
+    syncIndex(state);
+  },
+
+  clearAll(state: NotificationsStore) {
+    // Remove the encrypted data for each notification
+    state.notifications.forEach((n) => {
+      window.localStorage.removeItem(`${ state.localStorageKey }-${ n.id }`);
+    });
+
+    state.notifications = [];
+    syncIndex(state);
+  },
+
+  remove(state: NotificationsStore, id: string) {
+    // Remove the encrypted data for the notification
+    window.localStorage.removeItem(`${ state.localStorageKey }-${ id }`);
+
+    state.notifications = state.notifications.filter((n) => n.id !== id);
+    syncIndex(state);
+  },
+
+  load(state: NotificationsStore, notifications: StoredNotification[]) {
+    state.notifications = notifications;
+  },
+
+  localStorageKey(state: NotificationsStore, userKey: string) {
+    state.localStorageKey = `${ LOCAL_STORAGE_KEY_PREFIX }${ userKey }`;
+  },
+
+  userId(state: NotificationsStore, userId: string) {
+    state.userId = userId;
+  },
+
+  encryptionKey(state: NotificationsStore, encryptionKey: CryptoKey) {
+    state.encryptionKey = encryptionKey;
+  },
+};
+
+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
+    if (!notification.id) {
+      notification.id = randomStr();
+    }
+
+    // Need to save the encrypted notification to local storage
+    await saveEncryptedNotification(getters, notification);
+
+    commit('add', notification);
+    sync(getters['userId'], 'add', notification);
+
+    // Show a growl for the notification if necessary
+    dispatch('growl/notification', notification, { root: true });
+  },
+
+  async fromGrowl( { commit, getters }: any, notification: Notification) {
+    notification.id = randomStr();
+
+    // Need to save the encrypted notification to local storage
+    await saveEncryptedNotification(getters, notification);
+
+    commit('add', notification);
+    sync(getters['userId'], 'add', notification);
+
+    return notification.id;
+  },
+
+  update({ commit, getters }: any, notification: Notification) {
+    commit('update', notification);
+    sync(getters['userId'], 'update', notification);
+  },
+
+  async markRead({ commit, dispatch, getters }: any, id: string) {
+    commit('markRead', id);
+    sync(getters['userId'], 'markRead', id);
+
+    const notification = getters.item(id);
+
+    if (notification?.preference) {
+      await dispatch('prefs/set', notification.preference, { root: true });
+    }
+  },
+
+  async markUnread({ commit, dispatch, getters }: any, id: string) {
+    commit('markUnread', id);
+    sync(getters['userId'], 'markUnread', id);
+
+    const notification = getters.item(id) as Notification;
+
+    if (notification?.preference) {
+      await dispatch('prefs/set', {
+        key:   notification.preference.key,
+        value: notification.preference.unsetValue || '',
+      }, { root: true });
+    }
+  },
+
+  async markAllRead({ commit, dispatch, getters }: any) {
+    commit('markAllRead');
+    sync(getters['userId'], 'markAllRead');
+
+    // For all notifications that have a preference, set the preference, since they are now read
+    const withPreference = getters.all.filter((n: Notification) => !!n.preference);
+
+    for (let i = 0; i < withPreference.length; i++) {
+      await dispatch('prefs/set', withPreference[i].preference, { root: true });
+    }
+  },
+
+  remove({ commit, getters }: any, id: string) {
+    commit('remove', id);
+    sync(getters['userId'], 'remove', id);
+  },
+
+  clearAll({ commit, getters }: any) {
+    commit('clearAll');
+    sync(getters['userId'], 'clearAll');
+  },
+
+  /**
+   * Initialize the notifications store and load the notifications from local storage
+   */
+  async init({ commit, getters } : any, userData: any) {
+    const userKey = userData.id;
+    const userId = userData.v3User?.uuid;
+
+    if (!userKey || !userId) {
+      console.error('Unable to initialize notifications - required user info not available'); // eslint-disable-line no-console
+
+      return;
+    }
+
+    // Notifications are stored under a key for the current user, so set the local storage key based on the user id
+    commit('localStorageKey', md5(userKey, 'hex'));
+    commit('userId', userId);
+
+    let index: StoredNotification[] = [];
+    let notifications: StoredNotification[] = [];
+    const localStorageKey = getters['localStorageKey'];
+
+    let encryptionKey;
+
+    try {
+      encryptionKey = await deriveKey(userId);
+    } catch (e) {
+      console.error('Unable to generate encryption key for notifications', e); // eslint-disable-line no-console
+
+      return;
+    }
+
+    // Store the encryption key
+    commit('encryptionKey', encryptionKey);
+
+    // Load the notifications from local storage
+    // We store the index of notifications in local storage, and the actual notification data is stored in individual entries which are encrypted
+    try {
+      const data = window.localStorage.getItem(localStorageKey) || '[]';
+
+      index = JSON.parse(data) as StoredNotification[];
+    } catch (e) {
+      console.error('Unable to read notifications from local storage', e); // eslint-disable-line no-console
+    }
+
+    for (let i = 0; i < index.length; i++) {
+      const n = index[i];
+
+      try {
+        const data = window.localStorage.getItem(`${ localStorageKey }-${ n.id }`);
+        const parsedData = data ? JSON.parse(data) : '{}';
+        const decryptedString = await decrypt(parsedData, encryptionKey);
+        const decrypted = JSON.parse(decryptedString) as EncryptedNotification;
+
+        // Overlay the decrypted data onto the notification
+        notifications.push({
+          ...n,
+          ...decrypted
+        });
+      } catch (e) {
+        console.error('Unable to decrypt notification data', e); // eslint-disable-line no-console
+      }
+    }
+
+    // Expire old notifications
+    const now = new Date();
+
+    notifications = notifications.filter((n: StoredNotification) => {
+      // Try ... catch in case the date parsing fails
+      try {
+        const created = new Date(n.created);
+        const diff = (now.getTime() - created.getTime()) / 1000; // Diff in seconds
+
+        return diff < EXPIRY;
+      } catch (e) {}
+
+      return true;
+    });
+
+    commit('load', notifications);
+
+    // Set up broadcast listener to listen for updates from other tabs
+    bc = new BroadcastChannel(NOTIFICATION_CHANNEL_NAME);
+
+    bc.onmessage = (msgEvent: any) => {
+      // Ignore events where the user id does not match (corner case of stale login in another tab)
+      if (msgEvent?.data?.operation && msgEvent?.data?.userId === userId) {
+        commit(msgEvent.data.operation, msgEvent.data.param);
+      }
+    };
+  }
+};

package/store/prefs.js

@@ -57,14 +57,14 @@ export const PINNED_CLUSTERS = create('pinned-clusters', [], { parseJSON });
 export const GROUP_RESOURCES = create('group-by', 'namespace');
 export const DIFF = create('diff', 'unified', { options: ['unified', 'split'] });
 export const THEME = create('theme', 'auto', {
-  options:     ['light', 'auto', 'dark'],
+  options:     ['light'],
   asCookie,
   parseJSON,
   mangleRead:  (x) => x.replace(/^ui-/, ''),
-  mangleWrite: (x) => `ui-${ x }`,
+  mangleWrite: (x) => `ui-light`, // 接口同时修改为 白色
 });
 export const PREFERS_SCHEME = create('pcs', '', { asCookie, asUserPreference: false });
-export const LOCALE = create('locale', 'en-us', { asCookie });
+export const LOCALE = create('locale', 'zh-hans', { asCookie });
 export const KEYMAP = create('keymap', 'sublime', { options: ['sublime', 'emacs', 'vim'] });
 export const ROWS_PER_PAGE = create('per-page', 100, { options: [10, 25, 50, 100], parseJSON });
 export const LOGS_WRAP = create('logs-wrap', true, { parseJSON });
@@ -74,7 +74,6 @@ export const HIDE_REPOS = create('hide-repos', [], { parseJSON });
 export const HIDE_DESC = create('hide-desc', [], { parseJSON });
 export const HIDE_SENSITIVE = create('hide-sensitive', true, { options: [true, false], parseJSON });
 export const SHOW_PRE_RELEASE = create('show-pre-release', false, { options: [false, true], parseJSON });
-export const SHOW_CHART_MODE = create('chart-mode', 'featured', { parseJSON });
 
 export const DATE_FORMAT = create('date-format', 'ddd, MMM D YYYY', {
   options: [
@@ -150,6 +149,11 @@ export const getters = {
 
     const def = clone(definition.def);
 
+    if (key === THEME) {
+      // 无论 state 里存的是什么，都强制返回 light
+      return 'light';
+    }
+
     return def;
   },
 
@@ -471,7 +475,9 @@ export const actions = {
         try {
           value = JSON.parse(value);
         } catch (err) {
-          console.error('Error parsing server pref', key, value, err); // eslint-disable-line no-console
+          // 容错处理：如果后端返回 map[...] 这样的字符串，直接忽略或重置为空
+          console.warn(`Pref ${ key } has invalid JSON, resetting`, value);
+          value = definition.defaultValue || null;
           continue;
         }
       }

package/store/slideInPanel.ts

@@ -3,18 +3,21 @@ import { MutationTree, GetterTree, ActionTree } from 'vuex';
 
 export interface SlideInPanelState {
   isOpen: boolean;
+  isClosing: boolean;
   component: Component | null;
   componentProps: Record<string, any>;
 }
 
 const state = (): SlideInPanelState => ({
   isOpen:         false,
+  isClosing:      false,
   component:      null,
   componentProps: {}
 });
 
 const getters: GetterTree<SlideInPanelState, any> = {
   isOpen:         (state) => state.isOpen,
+  isClosing:      (state) => state.isClosing,
   component:      (state) => state.component,
   componentProps: (state) => state.componentProps
 };
@@ -26,12 +29,15 @@ const mutations: MutationTree<SlideInPanelState> = {
     state.componentProps = payload.componentProps || {};
   },
   close(state) {
+    state.isClosing = true;
     state.isOpen = false;
 
     // Delay clearing component/props for 500ms (same as transition duration)
     setTimeout(() => {
       state.component = null;
       state.componentProps = {};
+
+      state.isClosing = false;
     }, 500);
   }
 };