@rancher/shell 3.0.5-rc.5 → 3.0.5-rc.7

package/store/growl.js

@@ -1,8 +1,11 @@
 import { clear, findBy, removeObject } from '@shell/utils/array';
 import { stringify } from '@shell/utils/error';
+import { NotificationLevel } from '@shell/types/notifications';
 
 const DEFAULT_TIMEOUT = 5000;
 
+const MAX_GROWLS = 5;
+
 export const state = function() {
   return {
     nextId: 1,
@@ -13,18 +16,28 @@ export const state = function() {
 export const getters = {
   find: (state) => ({ key, val }) => {
     return findBy(state.stack, key, val);
+  },
+
+  // findBy is slow, so more efficient getter for id
+  byId: (state) => (id) => {
+    return state.stack.find((item) => item.id === id);
   }
 };
 
 export const mutations = {
   add(state, data) {
+    if (state.stack.length === MAX_GROWLS) {
+      // Remove the last one
+      state.stack.pop();
+    }
+
     state.stack = [
-      ...state.stack,
       {
         id:      state.nextId++,
         started: (new Date().getTime()),
         ...data
-      }
+      },
+      ...state.stack
     ];
   },
 
@@ -50,11 +63,29 @@ export const actions = {
     commit('remove', id);
   },
 
-  success({ commit }, data) {
+  async close({ commit, dispatch, getters }, id ) {
+    const growl = getters.byId(id);
+
+    commit('remove', id);
+
+    // If the growl has a notification, mark it as read if the user dismisses the growl
+    if (growl.notification) {
+      await dispatch('notifications/markRead', growl.notification, { root: true });
+    }
+  },
+
+  async success({ commit, dispatch }, data) {
+    // Send a notification for the growl
+    const notification = await dispatch('notifications/fromGrowl', {
+      ...data,
+      level: NotificationLevel.Success
+    }, { root: true });
+
     commit('add', {
       color:   'success',
       icon:    'checkmark',
       timeout: DEFAULT_TIMEOUT,
+      notification,
       ...data
     });
   },
@@ -68,31 +99,89 @@ export const actions = {
     });
   },
 
-  warning({ commit }, data) {
+  async warning({ commit, dispatch }, data) {
+    // Send a notification for the growl
+    const notification = await dispatch('notifications/fromGrowl', {
+      ...data,
+      level: NotificationLevel.Warning
+    }, { root: true });
+
     commit('add', {
       color:   'warning',
       icon:    'warning',
       timeout: DEFAULT_TIMEOUT,
+      notification,
       ...data
     });
   },
 
-  error({ commit }, data) {
+  async error({ commit, dispatch }, data) {
+    // Send a notification for the growl
+    const notification = await dispatch('notifications/fromGrowl', {
+      ...data,
+      level: NotificationLevel.Error
+    }, { root: true });
+
     commit('add', {
       color:   'error',
       icon:    'error',
-      timeout: 0, // Errors don't timeout
+      timeout: DEFAULT_TIMEOUT, // Errors timeout since they will be available as a notification
+      notification,
       ...data
     });
   },
 
-  fromError({ commit }, { title, err }) {
+  async fromError({ commit, dispatch }, { title, err }) {
+    // Send a notification for the growl
+    const notification = await dispatch('notifications/fromGrowl', {
+      title,
+      message: stringify(err),
+      level:   NotificationLevel.Error
+    }, { root: true });
+
     commit('add', {
       color:   'error',
       icon:    'error',
-      timeout: 0, // Errors don't timeout
+      timeout: DEFAULT_TIMEOUT, // Errors timeout since they will be available as a notification
+      notification,
       title,
       message: stringify(err),
     });
+  },
+
+  /**
+   * Used to create a growl when a notification is sent
+   *
+   * Growls are only shown for Success, Warning and Error notifications
+   */
+  notification({ commit }, notification) {
+    const growl = {
+      title:        notification.title,
+      message:      notification.message,
+      notification: notification.id,
+      timeout:      DEFAULT_TIMEOUT,
+    };
+
+    switch (notification.level) {
+    case NotificationLevel.Success:
+      growl.color = 'success';
+      growl.icon = 'checkmark';
+      break;
+    case NotificationLevel.Warning:
+      growl.color = 'warning';
+      growl.icon = 'warning';
+      break;
+    case NotificationLevel.Error:
+      growl.color = 'error';
+      growl.icon = 'error';
+      break;
+    default:
+      growl.skip = true;
+    }
+
+    // We don't show growls for info, announcement, task
+    if (!growl.skip) {
+      commit('add', growl);
+    }
   }
 };

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.
@@ -896,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(',');
 

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

@@ -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: [

package/store/type-map.js

@@ -512,21 +512,22 @@ export const getters = {
 
   optionsFor(state, getters, rootState, rootGetters) {
     const def = {
-      isCreatable:            true,
-      isEditable:             true,
-      isRemovable:            true,
-      showState:              true,
-      showAge:                true,
-      canYaml:                true,
-      namespaced:             null,
-      listGroups:             [],
-      listGroupsWillOverride: false,
-      listMandatorySort:      null,
-      depaginate:             false,
-      customRoute:            undefined,
-      resourceEditMasthead:   true,
-      custom:                 {},
-      subTypes:               [],
+      listCreateButtonLabelKey: undefined,
+      isCreatable:              true,
+      isEditable:               true,
+      isRemovable:              true,
+      showState:                true,
+      showAge:                  true,
+      canYaml:                  true,
+      namespaced:               null,
+      listGroups:               [],
+      listGroupsWillOverride:   false,
+      listMandatorySort:        null,
+      depaginate:               false,
+      customRoute:              undefined,
+      resourceEditMasthead:     true,
+      custom:                   {},
+      subTypes:                 [],
     };
 
     return (schemaOrType, pagination) => {
@@ -754,11 +755,13 @@ export const getters = {
         let group = findBy(tree.children, 'name', name);
 
         if ( !group ) {
+          const groupDefaultTypeFor = getters.groupDefaultTypeFor(name);
+
           group = {
             name,
             label,
             weight:      getters.groupWeightFor(name, forBasic),
-            defaultType: getters.groupDefaultTypeFor(name),
+            defaultType: typeof groupDefaultTypeFor === 'function' ? groupDefaultTypeFor() : groupDefaultTypeFor,
           };
 
           tree.children.push(group);