@rancher/shell 3.0.7 → 3.0.8-rc.2

package/utils/dynamic-content/support-notice.ts

@@ -0,0 +1,169 @@
+/**
+ *
+ * The code in this file is responsible for adding Support notifications driven off of the dynamic content metadata
+ *
+ * This covers these cases:
+ *
+ * 1. Current release has reached  End of Maintenance (EOL)
+ * 2. Current release has reached End of Maintenance (EOM)
+ * 3. Current release is approaching End of Maintenance (EOL)
+ * 4. Current release is approaching End of Maintenance (EOM)
+ *
+ * Note that we process in the order to that shown above, and stop at the first one that is active - so reaching EOL will show a notification
+ * and we won't look at the others.
+ *
+ */
+
+import semver from 'semver';
+import day from 'dayjs';
+import { NotificationLevel } from '@shell/types/notifications';
+import { READ_SUPPORT_NOTICE, READ_UPCOMING_SUPPORT_NOTICE } from '@shell/store/prefs';
+import { removeMatchingNotifications } from './util';
+import { Context, VersionInfo, UpcomingSupportInfo, SupportInfo } from './types';
+import { UPDATE_DATE_FORMAT } from './index';
+
+// Number of days ahead of upcoming EOM or EOL that we will notify the user
+const DEFAULT_UPCOMING_WINDOW = 30;
+
+// Prefixes used in the notifications IDs created here
+const SUPPORT_NOTICE_PREFIX = 'support-notice-';
+const UPCOMING_SUPPORT_NOTICE_PREFIX = 'upcoming-support-notice-';
+
+// Prefixes used in the value of the user preference to track which notifications the user has read
+const PREFIX = {
+  EOM: 'eom',
+  EOL: 'eol',
+};
+
+// Internal type used with convenience functions
+type Config = {
+  prefValuePrefix?: string;
+  pref: any;
+  notificationPrefix: string;
+  titleKey: string;
+  messageKey: string;
+};
+
+/**
+ * Main exported function that will process the support (stateInfo)
+ *
+ * @param context Context helper providing access to config, logger, store
+ * @param statusInfo Support information
+ * @param versionInfo Version information
+ */
+
+export async function processSupportNotices(context: Context, statusInfo: SupportInfo | undefined, versionInfo: VersionInfo): Promise<void> {
+  if (!statusInfo || !versionInfo?.version) {
+    return;
+  }
+
+  const { version } = versionInfo;
+  const { logger } = context;
+
+  // TODO: ****************************************************************************************
+  // TODO: Check if the user is an admin if we are Prime - we only notify admins of EOM and EOL
+  // TODO: ****************************************************************************************
+
+  const status = statusInfo.status || {};
+  const majorMinor = `${ semver.major(version) }.${ semver.minor(version) }`;
+
+  // Check if this version is EOL - we warn of EOL
+  // If a version is EOL, then is has passed EOM, so we don't need to check that
+  if (status.eol && semver.satisfies(version, status.eol)) {
+    logger.info(`This version (${ version }) is End of Life`);
+
+    return await checkAndAddNotification(context, {
+      prefValuePrefix:    PREFIX.EOL,
+      pref:               READ_SUPPORT_NOTICE,
+      notificationPrefix: SUPPORT_NOTICE_PREFIX,
+      titleKey:           'dynamicContent.eol.title',
+      messageKey:         'dynamicContent.eol.message',
+    }, majorMinor);
+  }
+
+  if (status.eom && semver.satisfies(version, status.eom)) {
+    logger.info(`This version (${ version }) is End of Maintenance`);
+
+    return await checkAndAddNotification(context, {
+      prefValuePrefix:    PREFIX.EOM,
+      pref:               READ_SUPPORT_NOTICE,
+      notificationPrefix: SUPPORT_NOTICE_PREFIX,
+      titleKey:           'dynamicContent.eom.title',
+      messageKey:         'dynamicContent.eom.message',
+    }, majorMinor);
+  }
+
+  // Now check for upcoming EOL or EOM
+
+  // Upcoming EOL
+  if (statusInfo.upcoming?.eol && semver.satisfies(version, statusInfo.upcoming.eol.version)) {
+    if (await checkAndAddUpcomingNotification(context, statusInfo.upcoming.eol, {
+      prefValuePrefix:    PREFIX.EOL,
+      pref:               READ_UPCOMING_SUPPORT_NOTICE,
+      notificationPrefix: UPCOMING_SUPPORT_NOTICE_PREFIX,
+      titleKey:           'dynamicContent.upcomingEol.title',
+      messageKey:         'dynamicContent.upcomingEol.message',
+    }, majorMinor)) {
+      return;
+    }
+  }
+
+  // Upcoming EOM
+  if (statusInfo.upcoming?.eom && semver.satisfies(version, statusInfo.upcoming.eom.version)) {
+    await checkAndAddUpcomingNotification(context, statusInfo.upcoming.eom, {
+      prefValuePrefix:    PREFIX.EOM,
+      pref:               READ_UPCOMING_SUPPORT_NOTICE,
+      notificationPrefix: UPCOMING_SUPPORT_NOTICE_PREFIX,
+      titleKey:           'dynamicContent.upcomingEom.title',
+      messageKey:         'dynamicContent.upcomingEom.message',
+    }, majorMinor);
+  }
+}
+
+async function checkAndAddUpcomingNotification(context: Context, info: UpcomingSupportInfo, config: Config, majorMinor: string): Promise<boolean> {
+  const now = day(day().format(UPDATE_DATE_FORMAT));
+  const upcomingDate = day(day(info.date).format(UPDATE_DATE_FORMAT));
+  const distance = upcomingDate.diff(now, 'day');
+  const noticeWindow = info.noticeDays || DEFAULT_UPCOMING_WINDOW;
+
+  // If we've passed the upcoming date, then ignore, as this should have been covered by the eom status
+  if (distance > 0 && distance < noticeWindow) {
+    await checkAndAddNotification(context, config, majorMinor, distance);
+
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * Check if a notification already exists or has already been read and if not, add it
+ *
+ * @param context Context helper providing access to config, logger, store
+ * @param config Configuration for the notification
+ * @param majorMinor Major.Minor version number
+ * @param distance Number of days until the event occurs (for upcoming support events)
+ */
+async function checkAndAddNotification(context: Context, config: Config, majorMinor: string, distance?: number) {
+  const { dispatch, getters, logger } = context;
+  const t = getters['i18n/t'];
+  const lastReadNotice = getters['prefs/get'](config.pref) || '';
+  const prefValue = config.prefValuePrefix ? `${ config.prefValuePrefix }-${ majorMinor }` : majorMinor;
+
+  if (!await removeMatchingNotifications(context, config.notificationPrefix, prefValue) && lastReadNotice !== prefValue) {
+    const notification = {
+      id:         `${ config.notificationPrefix }${ prefValue }`,
+      level:      NotificationLevel.Warning,
+      title:      t(config.titleKey, { version: majorMinor, days: distance }),
+      message:    t(config.messageKey, { version: majorMinor, days: distance }),
+      preference: {
+        key:   config.pref,
+        value: prefValue
+      },
+    };
+
+    logger.info(`Adding support notification for ${ majorMinor } (${ config.notificationPrefix }${ config.prefValuePrefix })`);
+
+    await dispatch('notifications/add', notification);
+  }
+}

package/utils/dynamic-content/types.d.ts

@@ -0,0 +1,101 @@
+/**
+ * Shared types for Dynamic Content
+ */
+
+import { SemVer } from 'semver';
+
+/**
+ * Logger interface for dynamic content
+ */
+export interface Logger {
+  error: Function,
+  info: Function,
+  debug: Function,
+}
+
+/**
+ * Distribution type
+ */
+export type Distribution = 'community' | 'prime';
+
+/**
+ * Dynamic Content configuration
+ */
+export type Configuration = {
+  enabled: boolean;
+  debug: boolean;
+  log: boolean;
+  endpoint: string;
+  prime: boolean;
+  distribution: Distribution;
+};
+
+/**
+ * Settings configuration that can be supplied in the dynamic content package
+ */
+export type SettingsInfo = {
+  releaseNotesUrl: string; // URL format to use when generating release note links for new releases
+  suseExtensions: string[]; // Names of extra SUSE UI extensions on top of the list built-in
+  debugVersion?: string;
+};
+
+/**
+ * Common context passed through various functions
+ */
+export type Context = {
+  dispatch: Function,
+  getters: any,
+  axios: any,
+  logger: Logger,
+  isAdmin: boolean,
+  config: Configuration,
+  settings: SettingsInfo,
+};
+
+/**
+ * Version information
+ */
+export type VersionInfo = {
+  version: SemVer | null;
+  isPrime: boolean;
+};
+
+/**
+ * Information for a new release
+ */
+export type ReleaseInfo = {
+  name: string;
+};
+
+/**
+ * Information for an upcoming release
+ */
+export type UpcomingSupportInfo = {
+  version: string, // Version number: semver (e.g. '<= 2.12')
+  date: Date, // Date when the eom/eol takes place (note, only the day part is used, time is ignored)
+  noticeDays?: number, // Number of days in advance to notify the user (if not specified, the default is used)
+};
+
+/**
+ * Support information covering current EOM/EOL and upcoming EOM/EOL information
+ */
+export type SupportInfo = {
+  status: {
+    eom: string,
+    eol: string,
+  },
+  upcoming: {
+    eom: UpcomingSupportInfo,
+    eol: UpcomingSupportInfo,
+  }
+};
+
+/**
+ * Main type for the metadata that is retrieved from the dynamic content endpoint
+ */
+export type DynamicContent = {
+  version: string;
+  releases: ReleaseInfo[],
+  support: SupportInfo,
+  settings?: Partial<SettingsInfo>,
+};

package/utils/dynamic-content/util.ts

@@ -0,0 +1,122 @@
+/**
+ *
+ * The code in this file provides utility functions for dynamic content
+ *
+ * First up is a helper to remove notifications that match a given prefix
+ * Second up is a basic logging helper than will log to the console but can also log to local storage
+ * so that we have a persistent log of what the dynamic content code has been doing to help with debugging
+ *
+ */
+
+import { randomStr } from '@shell/utils/string';
+import { Configuration, Context } from './types';
+import { Notification } from '@shell/types/notifications';
+
+const MAX_LOG_MESSAGES = 50;
+
+export const LOCAL_STORAGE_CONTENT_DEBUG_LOG = 'rancher-updates-debug-log';
+
+/**
+ * Remove all notifications that have the given prefix, except the one that has the specified current id
+ *
+ * Returns whether a notification with the current id was found
+ *
+ * @param dispatch Store dispatcher
+ * @param getters Store getters
+ * @param prefix Prefix to look for and remove notifications whose IDs start with this prefix
+ * @param currentId  Current ID of notification to keep, if present
+ * @returns If a notification with the current ID was found
+ */
+export async function removeMatchingNotifications(context: Context, prefix: string, currentId: string): Promise<boolean> {
+  const { dispatch, getters, logger } = context;
+  const id = `${ prefix }${ currentId }`;
+  let found = false;
+  let removed = 0;
+  const all = getters['notifications/all'] || [];
+  const ids = all.map((n: Notification) => n.id);
+
+  for (let i = 0; i < ids.length; i++) {
+    const notificationId = ids[i];
+
+    if (notificationId.startsWith(prefix)) {
+      if (notificationId === id) {
+        found = true;
+      } else {
+        await dispatch('notifications/remove', notificationId);
+        removed++;
+
+        logger.debug(`Remove matching notifications ${ prefix }, ${ currentId } - removed notification ${ notificationId }`);
+      }
+    }
+  }
+
+  if (found) {
+    logger.debug(`Remove matching notifications ${ prefix }, ${ currentId } - found an existing notification (removed ${ removed })`);
+  } else {
+    logger.debug(`Remove matching notifications ${ prefix }, ${ currentId } - did not find an existing notification (removed ${ removed })`);
+  }
+
+  return found;
+}
+
+/**
+ * Create a logger interface that can be used to log messages and errors appropriately
+ * @param config Configuration to help us determine where and when to log
+ * @returns Logger interface with methods to log for error, info and debug
+ */
+export function createLogger(config: Configuration) {
+  return {
+    error: (message: string, ...args: any[]) => log(config, 'error', message, ...args),
+    info:  (message: string, ...args: any[]) => log(config, 'info', message, ...args),
+    debug: (message: string, ...args: any[]) => log(config, 'debug', message, ...args),
+  };
+}
+
+/**
+ * Actual logging function that logs appropriately
+ * @param config Configuration to help us determine where and when to log
+ * @param level Log level (error, info, debug)
+ * @param message Log message
+ * @param arg Optional argument to be logged
+ */
+function log(config: Configuration, level: string, message: string, ...args: any[]) {
+  // Log to the console when appropriate
+  if (level === 'error') {
+    console.error(message, ...args); // eslint-disable-line no-console
+  } else if (level === 'info' && config.log) {
+    console.info(message, ...args); // eslint-disable-line no-console
+  } else if (level === 'debug' && config.debug) {
+    console.debug(message, ...args); // eslint-disable-line no-console
+  }
+
+  // Only log to local storage if the configuration says we should
+  if (config.log) {
+    // Add the log message to the log we keep in local storage
+    try {
+      let data = [];
+
+      // If we can't parse the data in local storage, then we will reset to an emptry array
+      try {
+        data = JSON.parse(window.localStorage.getItem(LOCAL_STORAGE_CONTENT_DEBUG_LOG) || '[]');
+      } catch {}
+
+      const item = {
+        level,
+        message,
+        timestamp: new Date().toISOString(),
+        args,
+        uuid:      randomStr(),
+      };
+
+      data.unshift(item);
+
+      // Limit the number of log messages
+      window.localStorage.setItem(LOCAL_STORAGE_CONTENT_DEBUG_LOG, JSON.stringify(data.slice(0, MAX_LOG_MESSAGES)));
+
+      // Send an event so the UI can update if necessary
+      const event = new CustomEvent('dynamicContentLog', { detail: item });
+
+      window.dispatchEvent(event);
+    } catch {}
+  }
+}

package/utils/dynamic-importer.js

@@ -81,7 +81,7 @@ export function importWindowComponent(name) {
     throw new Error('Name required');
   }
 
-  return defineAsyncComponent(() => import(/* webpackChunkName: "components/nav" */ `@shell/components/nav/WindowManager/${name}`));
+  return defineAsyncComponent(() => import(/* webpackChunkName: "components" */ `@shell/components/Window/${name}`));
 }
 
 export function loadProduct(name) {
@@ -130,7 +130,7 @@ export function resolveDetail(key) {
 }
 
 export function resolveWindowComponent(key) {
-  return require.resolve(`@shell/components/nav/WindowManager/${ key }`);
+  return require.resolve(`@shell/components/Window/${ key }`);
 }
 
 export function resolveMachineConfigComponent(key) {

package/utils/inactivity.ts

@@ -0,0 +1,104 @@
+import { EXT } from '@shell/config/types';
+import { RancherKubeMetadata } from '@shell/types/kube/kube-api';
+
+interface UserActivityResponse {
+  metadata: RancherKubeMetadata,
+  status: {
+    expiresAt: string
+  }
+}
+
+interface ParsedInactivitySetting {
+  expiresAt: string | undefined,
+  sessionTokenName: string | undefined,
+  courtesyTimer: number | undefined,
+  courtesyCountdown: number | undefined,
+  showModalAfter: number | undefined
+}
+
+interface SpecData {
+  tokenId: string;
+  seenAt?: string;
+}
+
+export class Inactivity {
+  private sessionTokenName: string | undefined = undefined;
+
+  public getSessionTokenName(): string | undefined {
+    return this.sessionTokenName;
+  }
+
+  public setSessionTokenName(tokenName: string): void {
+    this.sessionTokenName = tokenName;
+  }
+
+  public async getUserActivity(store: any, sessionTokenName: string, force = true): Promise<UserActivityResponse> {
+    try {
+      const updatedData = await store.dispatch('management/find', {
+        type: EXT.USER_ACTIVITY,
+        id:   sessionTokenName,
+        opt:  {
+          force, watch: false, logoutOnError: false
+        }
+      });
+
+      return updatedData;
+    } catch (e: any) {
+      if (e._status === 401) {
+        return store.dispatch('auth/logout', { sessionIdle: true });
+      }
+
+      console.error(`Could not GET UserActivity for session token ${ sessionTokenName }`, e); // eslint-disable-line no-console
+      throw new Error(e);
+    }
+  }
+
+  public async updateUserActivity(userActivityResource: any, sessionTokenName: string, seenAt: string): Promise<UserActivityResponse> {
+    const spec: SpecData = { tokenId: sessionTokenName };
+
+    if (seenAt) {
+      spec.seenAt = seenAt;
+    }
+
+    userActivityResource.spec = spec;
+
+    try {
+      const savedData = await userActivityResource.save({ force: true });
+
+      return savedData;
+    } catch (e: any) {
+      console.error(`Could not update (POST) UserActivity for session token ${ sessionTokenName }`, e); // eslint-disable-line no-console
+      throw new Error(e);
+    }
+  }
+
+  public parseTTLData(userActivityData: UserActivityResponse): ParsedInactivitySetting {
+    const currDate = Date.now();
+    const endDate = new Date(userActivityData.status?.expiresAt).getTime();
+
+    // let's give this a 3 second buffer so that we can make sure the logout happens by the frontend
+    const thresholdSeconds = Math.floor((endDate - currDate) / 1000) - 3;
+
+    // Amount of time the user sees the inactivity warning
+    const courtesyTimerVal = Math.floor(thresholdSeconds * 0.2); // the modal is shown for 10% of the total time to display
+    const courtesyTimer = Math.min(courtesyTimerVal, 60 * 5); // Never show the modal more than 5 minutes
+
+    const courtesyCountdown = courtesyTimer;
+
+    // Amount of time before the user sees the inactivity warning
+    // Note - time before warning is shown + time warning is shown = settings threshold (total amount of time)
+    const showModalAfter = thresholdSeconds - courtesyTimer;
+
+    return {
+      expiresAt:        userActivityData.status?.expiresAt,
+      sessionTokenName: userActivityData.metadata?.name,
+      courtesyTimer,
+      courtesyCountdown,
+      showModalAfter
+    };
+  }
+}
+
+const instance = new Inactivity();
+
+export default instance;

package/utils/pagination-utils.ts

@@ -1,4 +1,6 @@
-import { PaginationFeature, PaginationSettings, PaginationSettingsStore, PaginationSettingsStores } from '@shell/types/resources/settings';
+import {
+  PaginationFeature, PaginationFeatureHomePageClusterConfig, PaginationFeatureName, PaginationSettings, PaginationSettingsFeatures, PaginationSettingsStore, PaginationSettingsStores
+} from '@shell/types/resources/settings';
 import {
   NAMESPACE_FILTER_ALL_USER as ALL_USER,
   NAMESPACE_FILTER_ALL as ALL,
@@ -22,6 +24,15 @@ import { EXT_IDS } from '@shell/core/plugin';
 import { ExtensionManager } from '@shell/types/extension-manager';
 import { DEFAULT_PERF_SETTING } from '@shell/config/settings';
 
+const homePageClusterFeature: PaginationFeature<PaginationFeatureHomePageClusterConfig> = {
+  version:       1,
+  enabled:       true,
+  configuration: {
+    threshold: 500, results: 250, pagesPerRow: 25
+  }
+};
+const PAGINATION_SETTINGS_FEATURE_DEFAULTS: PaginationSettingsFeatures = { homePageCluster: homePageClusterFeature };
+
 /**
  * Helper functions for server side pagination
  */
@@ -222,15 +233,19 @@ class PaginationUtils {
     return this.isFeatureEnabled({ rootGetters }, 'listManualRefresh');
   }
 
-  private isFeatureEnabled({ rootGetters }: any, featureName: PaginationFeature): boolean {
+  getFeature<Config = any>({ rootGetters }: any, featureName: PaginationFeatureName): PaginationFeature<Config> | undefined {
     // Cache must be enabled to support pagination api
     if (!this.isSteveCacheEnabled({ rootGetters })) {
-      return false;
+      return undefined;
     }
 
     const settings = this.getSettings({ rootGetters });
 
-    return !!settings.features?.[featureName]?.enabled;
+    return settings.features?.[featureName] || PAGINATION_SETTINGS_FEATURE_DEFAULTS[featureName];
+  }
+
+  private isFeatureEnabled({ rootGetters }: any, featureName: PaginationFeatureName): boolean {
+    return !!this.getFeature({ rootGetters }, featureName)?.enabled;
   }
 
   resourceChangesDebounceMs({ rootGetters }: any): number | undefined {

package/utils/release-notes.ts

@@ -20,7 +20,7 @@ export async function addReleaseNotesNotification(dispatch: any, getters: any) {
       if (notification.id === id) {
         found = true;
       } else {
-        await dispatch('notifications/delete', notification.id);
+        await dispatch('notifications/remove', notification.id);
       }
     }
   }

package/assets/images/icons/document.svg

@@ -1,3 +0,0 @@
-<svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.30594 4.11111H8.9726M4.30594 7.22222H8.9726M4.30594 10.3333H7.41705M1.19482 2.55556C1.19482 2.143 1.35871 1.74733 1.65044 1.45561C1.94216 1.16389 2.33782 1 2.75038 1H10.5282C10.9407 1 11.3364 1.16389 11.6281 1.45561C11.9198 1.74733 12.0837 2.143 12.0837 2.55556V13.4444C12.0837 13.857 11.9198 14.2527 11.6281 14.5444C11.3364 14.8361 10.9407 15 10.5282 15H2.75038C2.33782 15 1.94216 14.8361 1.65044 14.5444C1.35871 14.2527 1.19482 13.857 1.19482 13.4444V2.55556Z" stroke="white" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/store/wm.js

@@ -1,95 +0,0 @@
-import { addObject, removeObject } from '@shell/utils/array';
-
-export const state = function() {
-  return {
-    tabs:       [],
-    active:     null,
-    open:       false,
-    userHeight: null,
-    userWidth:  null,
-    userPin:    null,
-  };
-};
-
-export const getters = {
-  byId: (state) => (id) => {
-    return state.tabs.find((x) => x.id === id);
-  },
-  allTabs: (state) => state.tabs,
-};
-
-export const mutations = {
-  addTab(state, tab) {
-    const existing = state.tabs.find((x) => x.id === tab.id);
-
-    if ( !existing ) {
-      addObject(state.tabs, tab);
-    }
-
-    state.active = tab.id;
-    state.open = true;
-  },
-
-  removeTab(state, tab) {
-    removeObject(state.tabs, tab);
-  },
-
-  setOpen(state, open) {
-    state.open = open;
-  },
-
-  setActive(state, id) {
-    state.active = id;
-  },
-
-  setUserHeight(state, height) {
-    state.userHeight = height;
-  },
-
-  setUserWidth(state, width) {
-    state.userWidth = width;
-  },
-
-  setUserPin(state, pin) {
-    state.userPin = pin;
-  }
-};
-
-export const actions = {
-  close({ state, getters, commit }, id) {
-    const tab = getters.byId(id);
-
-    if ( !tab ) {
-      return;
-    }
-
-    let idx = state.tabs.indexOf(tab);
-
-    commit('removeTab', tab);
-    if ( idx >= state.tabs.length ) {
-      idx = state.tabs.length - 1;
-    }
-
-    if ( idx >= 0 ) {
-      commit('setActive', state.tabs[idx].id);
-    } else {
-      commit('setOpen', false);
-    }
-  },
-
-  // {
-  //   id:  shell-<pod id> -- A string that is be unique for this instance;
-  //                           if a window with this key exists it will be focused instead of creating another
-  //   label: Shown on the tab
-  //   icon:  Shown on the tab
-  //   component: 'ContainerShell',
-  //   attrs: { whateverTheComponent: wants }
-  // }
-  open({ commit }, tab) {
-    if ( !tab.id ) {
-      throw new Error('Window must have an id property');
-    }
-
-    commit('addTab', tab);
-  }
-};