@rancher/shell 3.0.7 → 3.0.8-rc.10

package/utils/dynamic-content/notification-handler.ts

@@ -0,0 +1,48 @@
+/**
+ * Notification handler for dynamic content announcements
+ *
+ * This provides custom handling for read/unread state using a single user preference
+ */
+import { Notification, NotificationHandler } from '@shell/types/notifications';
+import { READ_ANNOUNCEMENTS } from '@shell/store/prefs';
+import { ANNOUNCEMENT_PREFIX } from './announcement';
+
+// Global name for this handler that can be used when creating notifications to associate them with this handler
+export const DynamicContentAnnouncementHandlerName = 'dc-announcements';
+
+/**
+ * Create the dynamic content notification handler
+ *
+ * This is for announcements, where we need to manage an array of IDs of announcements that have been read, which
+ * is taken care of by this custom handler.
+ *
+ * When a notification is read/unread that specifies this handler, we will add or remove its ID from the list of
+ * read IDs that we maintain in the user preference value.
+ *
+ * This allows us to use a single user preference to track read announcements
+ */
+export function createHandler(store: any): NotificationHandler {
+  return {
+    async onReadUpdated(notification: Notification, read: boolean) {
+      if (!notification.id.startsWith(ANNOUNCEMENT_PREFIX)) {
+        return;
+      }
+
+      const id = notification.id.substring(ANNOUNCEMENT_PREFIX.length);
+      const announcements = store.getters['notifications/all'].filter((n: any) => n.id.startsWith(ANNOUNCEMENT_PREFIX));
+      const pref = store.getters['prefs/get'](READ_ANNOUNCEMENTS) || '';
+      const values = !pref.length ? [] : pref.split(',').filter((v: string) => !announcements.includes(v));
+      const valuesUnique = new Set(values);
+
+      if (read) {
+        valuesUnique.add(id);
+      } else {
+        valuesUnique.delete(id);
+      }
+
+      const newValues = Array.from(valuesUnique).sort();
+
+      await store.dispatch('prefs/set', { key: READ_ANNOUNCEMENTS, value: newValues.join(',') });
+    }
+  };
+}

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,153 @@
+/**
+ * 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;
+  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,
+  }
+};
+
+/**
+ * Call to action for an announcement
+ */
+export type CallToAction = {
+  action: string;
+  link: string;
+};
+
+/**
+ * Announcements to be shown in the notification center or on the home page
+ *
+ * Target determines where the notification will be shown, supported values:
+ *
+ * - `notification/announcement` - Shown with `Announcement` level in the Notification Center
+ * - `notification/info` - Shown with `Info` level in the Notification Center
+ * - `notification/warning` - Shown with `Warning` level in the Notification Center
+ * - `homepage/banner` - Shown on the home page as a banner beneath the main banner
+ * - `homepage/rhs` - Shown on the home page as a panel beneath the right-hand side links panel
+ *
+ */
+export type Announcement = {
+  id: string; // Unique id for this announcement
+  title: string; // Title to be shown
+  message: string; // Message/Body for the announcement
+  target: string; // Where the announcement should be shown
+  version?: string; // Version or semver expression for when to show this announcement
+  audience?: 'admin' | 'all'; // Audience - show for just Admins or for all users
+  icon?: string;
+  cta?: {
+    primary: CallToAction, // Must have a primary call to action, if we have a cta field
+    secondary?: CallToAction,
+  },
+  style?: string; // Styling information that will be interpreted by the rendering component
+};
+
+/**
+ * Icon information
+ */
+export type AnnouncementNotificationIconData = {
+  light: string; // Light mode icon/image
+  dark?: string; // Light mode icon/image
+};
+
+/**
+ * Custom data for announcements stored with the notification
+ */
+export type AnnouncementNotificationData = {
+  icon?: AnnouncementNotificationIconData; // Icon/Image to show
+  location: string; // Location of the announcement in the UI
+};
+
+/**
+ * Main type for the metadata that is retrieved from the dynamic content endpoint
+ */
+export type DynamicContent = {
+  version: string;
+  releases: ReleaseInfo[],
+  support: SupportInfo,
+  announcements: Announcement[],
+  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/favicon.js

@@ -9,17 +9,17 @@ export function haveSetFavIcon() {
 
 export function setFavIcon(store) {
   const res = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.FAVICON);
-  const brandSetting = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.BRAND);
+  const brandSetting = store.getters['management/brand'];
   const link = findIconLink(document.head.getElementsByTagName('link'));
 
   if (link) {
     let brandImage;
 
-    if (brandSetting?.value === 'suse') {
+    if (brandSetting === 'suse') {
       brandImage = require('~shell/assets/brand/suse/favicon.png');
-    } else if (brandSetting?.value === 'csp') {
+    } else if (brandSetting === 'csp') {
       brandImage = require('~shell/assets/brand/csp/favicon.png');
-    } else if (brandSetting?.value === 'harvester') {
+    } else if (brandSetting === 'harvester') {
       brandImage = require('~shell/assets/brand/harvester/favicon.png');
     }
 

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/object.js

@@ -205,7 +205,7 @@ export function definedKeys(obj) {
   return compact(flattenDeep(keys));
 }
 
-export function diff(from, to) {
+export function diff(from, to, preventNull = false) {
   from = from || {};
   to = to || {};
 
@@ -234,7 +234,25 @@ export function diff(from, to) {
   const missing = difference(fromKeys, toKeys);
 
   for ( const k of missing ) {
-    set(out, k, null);
+    // we need to gate this in order to prevent unforseen problems with addonConfig
+    if (preventNull) {
+    // keys that come from "definedKeys" method are strings with "" chars inside... We need to clean them up
+      // so that we can access the value of the obj property
+      let key = k;
+
+      if (!k.includes('.')) {
+        key = k.replaceAll('"', '');
+      }
+
+      // // if value exists in "from" but is missing in "to", let's add it, otherwise we just set it null as we did before
+      if (from[key] !== undefined && from[key] !== null) {
+        set(out, key, from[key]);
+      } else {
+        set(out, key, null);
+      }
+    } else {
+      set(out, k, null);
+    }
   }
 
   return out;