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

package/utils/dynamic-content/announcement.ts

@@ -0,0 +1,142 @@
+/**
+ *
+ * The code in this file is responsible for adding 'announcement 'notifications driven off of the dynamic content metadata
+ *
+ * Announcements will be able to be shown in different places in the UI
+ *
+ */
+
+import semver from 'semver';
+import { NotificationLevel, Notification } from '@shell/types/notifications';
+import { READ_ANNOUNCEMENTS } from '@shell/store/prefs';
+import { Context, VersionInfo, Announcement } from './types';
+import { DynamicContentAnnouncementHandlerName } from './notification-handler';
+
+// Prefixes used in the notifications IDs created here
+export const ANNOUNCEMENT_PREFIX = 'announcement-';
+
+const TARGET_NOTIFICATION_CENTER = 'notification';
+const TARGET_HOME_PAGE = 'homepage';
+const ALLOWED_TARGETS = [TARGET_NOTIFICATION_CENTER, TARGET_HOME_PAGE];
+
+const ALLOWED_NOTIFICATIONS: Record<string, NotificationLevel> = {
+  announcement: NotificationLevel.Announcement,
+  info:         NotificationLevel.Info,
+  warning:      NotificationLevel.Warning,
+  homepage:     NotificationLevel.Hidden,
+};
+
+/**
+ * Main exported function that will process the announcements
+ *
+ * @param context Context helper providing access to config, logger, store
+ * @param announcements Announcement information
+ * @param versionInfo Version information
+ */
+export async function processAnnouncements(context: Context, announcements: Announcement[] | undefined, versionInfo: VersionInfo): Promise<void> {
+  if (!announcements || !announcements.length || !versionInfo?.version) {
+    return;
+  }
+
+  const { dispatch, getters, logger } = context;
+
+  // Process each announcement
+  await Promise.all(announcements.map(async(announcement: Announcement) => {
+    // Check version
+    if (announcement.version && !semver.satisfies(versionInfo.version, announcement.version)) {
+      return;
+    }
+
+    // Check audience (currently only admin or all, but may add more in the future)
+    if (announcement.audience === 'admin' && !context.isAdmin) {
+      return;
+    }
+
+    if (!announcement.id) {
+      logger.error(`No ID For announcement - not going to add a notification for the announcement`);
+
+      return;
+    }
+
+    // Check type
+    const targetSplit = announcement.target.split('/');
+    const target = targetSplit[0];
+
+    // Make sure that the target is supported
+    if (ALLOWED_TARGETS.includes(target)) {
+      let level = NotificationLevel.Announcement;
+      let data: any = {};
+
+      if (target === TARGET_NOTIFICATION_CENTER) {
+        // Show a notification
+        const subType = targetSplit.length === 2 ? targetSplit[1] : 'announcement';
+
+        if (!(subType in ALLOWED_NOTIFICATIONS)) {
+          logger.error(`Announcement notification type ${ subType } is not supported`);
+
+          return;
+        }
+
+        level = ALLOWED_NOTIFICATIONS[subType];
+      } else if (target === TARGET_HOME_PAGE) {
+        level = NotificationLevel.Hidden;
+        data = {
+          icon:     announcement.icon,
+          location: targetSplit.length === 2 ? targetSplit[1] : 'banner',
+        };
+
+        if (announcement.style) {
+          data.style = announcement.style;
+        }
+      }
+
+      logger.info(`Going to add a notification for announcement ${ announcement.target }`);
+
+      // We should check if the notification already exists
+      const id = `${ ANNOUNCEMENT_PREFIX }${ announcement.id }`;
+      const existing = getters['notifications/item'](id);
+
+      // Check if the pref for 'read announcements' has the id
+      const pref = getters['prefs/get'](READ_ANNOUNCEMENTS) || '';
+      const prefExists = pref.split(',').includes(announcement.id);
+
+      if (existing || prefExists) {
+        logger.info(`Not adding announcement with ID ${ id } as it already exists or has been read previously (title: ${ announcement.title })`);
+
+        return;
+      }
+
+      const notification: Notification = {
+        id,
+        level,
+        title:       announcement.title,
+        message:     announcement.message,
+        handlerName: DynamicContentAnnouncementHandlerName,
+      };
+
+      if (data && Object.keys(data).length > 0) {
+        notification.data = data;
+      }
+
+      if (announcement.cta?.primary) {
+        notification.primaryAction = {
+          label:  announcement.cta.primary.action,
+          target: announcement.cta.primary.link,
+        };
+      }
+
+      if (announcement.cta?.secondary) {
+        notification.secondaryAction = {
+          label:  announcement.cta.secondary.action,
+          target: announcement.cta.secondary.link,
+        };
+      }
+
+      logger.info(`Adding announcement with ID ${ id } (title: ${ announcement.title }, target: ${ announcement.target })`);
+
+      await dispatch('notifications/add', notification);
+    } else {
+      logger.error(`Announcement type ${ announcement.target } is not supported`);
+    }
+  }));
+}

package/utils/dynamic-content/example.json

@@ -0,0 +1,40 @@
+{
+  "version": 1,
+  "releases": [
+    {
+      "name": "2.12.2"
+    },
+    {
+      "name": "2.11.3"
+    },
+    {
+      "name": "2.10.3"
+    }
+  ],
+  "announcements": [
+    {
+      "id": "security-update",
+      "target": "notification/announcement",
+      "title": "Important Security Update",
+      "message": "A critical security vulnerability has been discovered in version 2.10.1. Users are strongly advised to update to version 2.12.2 immediately to ensure their systems remain secure.",
+      "cta": {
+        "primary" : {
+          "action": "Update Now",
+          "link": "https://www.suse.com/"
+        }
+      }
+    },
+    {
+      "id": "suse-rocks",
+      "target": "homepage/banner",
+      "title": "Important Security Update",
+      "message": "A critical security vulnerability has been discovered in version 2.10.1. Users are strongly advised to update to version 2.12.2 immediately to ensure their systems remain secure.",
+      "cta": {
+        "primary" : {
+          "action": "Update Now",
+          "link": "https://www.suse.com/"
+        }
+      }
+    }
+  ]
+}

package/utils/dynamic-content/index.ts

@@ -15,6 +15,7 @@ import { Context, DynamicContent, VersionInfo } from './types';
 import { createLogger, LOCAL_STORAGE_CONTENT_DEBUG_LOG } from './util';
 import { getConfig } from './config';
 import { SystemInfoProvider } from './info';
+import { processAnnouncements } from './announcement';
 
 const FETCH_DELAY = 3 * 1000; // Short delay to let UI settle before we fetch the updates document
 const FETCH_REQUEST_TIMEOUT = 15000; // Time out the request after 15 seconds
@@ -83,7 +84,7 @@ export async function fetchAndProcessDynamicContent(dispatch: Function, getters:
     }
 
     const versionInfo: VersionInfo = {
-      version,
+      version: version as semver.SemVer, // Will be defined, can not be null here
       isPrime: config.prime,
     };
 
@@ -103,7 +104,7 @@ export async function fetchAndProcessDynamicContent(dispatch: Function, getters:
     // If the cached content has a debug version then use that as an override for the current version number
     // This is only for debug and testing purposes
     if (content.settings?.debugVersion) {
-      versionInfo.version = semver.coerce(content.settings.debugVersion);
+      versionInfo.version = semver.coerce(content.settings.debugVersion) || version;
       logger.debug(`Overriding version number to ${ content.settings.debugVersion }`);
     }
 
@@ -117,6 +118,9 @@ export async function fetchAndProcessDynamicContent(dispatch: Function, getters:
       // EOM, EOL notifications
       processSupportNotices(context, content.support, versionInfo);
     }
+
+    // Announcements - processed for all users
+    processAnnouncements(context, content.announcements, versionInfo);
   } catch (e) {
     logger.error('Error reading or processing dynamic content', e);
   }

package/utils/dynamic-content/info.ts

@@ -10,6 +10,7 @@ import {
 import { SETTING } from '@shell/config/settings';
 import { getVersionData } from '@shell/config/version';
 import { SettingsInfo } from '@shell/utils/dynamic-content/types';
+import { STEVE_CACHE } from '@shell/store/features';
 
 const QS_VERSION = 'v1'; // Include a version number in the query string in case we want to version the set of params we are sending
 const UNKNOWN = 'unknown';
@@ -26,6 +27,29 @@ const SUSE_EXTENSIONS = [
   'virtual-clusters'
 ];
 
+type FeatureFlagInfos = {
+  [id: string]: {
+    /**
+     * Query param, in format `ff-<param>`
+     */
+    param: string,
+    /**
+      * The actual value used by the UI, roughly spec.value || status.default
+      */
+    value: string,
+  }
+};
+
+/**
+ * Explicit ff's to send
+ */
+const ffs: FeatureFlagInfos = {
+  [STEVE_CACHE]: {
+    param: 'usc',
+    value: '',
+  }
+};
+
 /**
  * System information that is collected and which can then be encoded into a query string in the dyanmic content request
  */
@@ -47,6 +71,7 @@ type SystemInfo = {
   browserSize: string;
   screenSize: string;
   language: string;
+  featureFlags: FeatureFlagInfos
 };
 
 /**
@@ -107,8 +132,7 @@ export class SystemInfoProvider {
     // High-level information from clusters
     const counts = this.getAll(getters, COUNT)?.[0]?.counts || {};
     const clusterCount = counts[MANAGEMENT.CLUSTER] || {};
-    const all = this.getAll(getters, MANAGEMENT.CLUSTER);
-    const localCluster = all ? all.find((c: any) => c.isLocal) : undefined;
+    const localCluster = getters['localCluster'];
 
     // Stats for installed extensions
     const uiExtensionList = getters['uiplugins/plugins'];
@@ -132,6 +156,19 @@ export class SystemInfoProvider {
     const screenSize = `${ window.screen?.width || '?' }x${ window.screen?.height || '?' }`;
     const browserSize = `${ window.innerWidth }x${ window.innerHeight }`;
 
+    const safeFfs = Object.entries(ffs).reduce((res, [id, ff]) => {
+      try {
+        res[id] = {
+          param: ff.param,
+          value: getters['features/get'](id),
+        };
+      } catch (e) {
+        console.debug(`Cannot include Feature Flag "${ id }" in dynamic feature request: `, e); // eslint-disable-line no-console
+      }
+
+      return res;
+    }, {} as FeatureFlagInfos);
+
     return {
       systemUUID,
       userHash,
@@ -147,6 +184,7 @@ export class SystemInfoProvider {
       screenSize,
       browserSize,
       language:           window.navigator?.language,
+      featureFlags:       safeFfs,
     };
   }
 
@@ -214,6 +252,10 @@ export class SystemInfoProvider {
       params.push(`ss=${ systemData.screenSize }`);
     }
 
+    Object.values(systemData.featureFlags).forEach((ff) => {
+      params.push(`ff-` + `${ ff.param }=${ ff.value }`);
+    });
+
     return params.join('&');
   }
 }

package/utils/dynamic-content/new-release.ts

@@ -27,7 +27,7 @@ export async function processReleaseVersion(context: Context, releaseInfo: Relea
   const versions = releaseInfo.map((v: any) => semver.coerce(v.name));
 
   // Sort the versions, so that the newest is first in the list
-  versions.sort((a: any, b: any) => semver.gt(b, a) ? 1 : -1);
+  versions.sort((a: any, b: any) => semver.rcompare(a, b));
 
   // Find first newer version
   const newer = versions.find((v: any) => semver.gt(v, version));

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/types.d.ts

@@ -56,7 +56,7 @@ export type Context = {
  * Version information
  */
 export type VersionInfo = {
-  version: SemVer | null;
+  version: SemVer;
   isPrime: boolean;
 };
 
@@ -90,6 +90,57 @@ export type SupportInfo = {
   }
 };
 
+/**
+ * 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
  */
@@ -97,5 +148,6 @@ export type DynamicContent = {
   version: string;
   releases: ReleaseInfo[],
   support: SupportInfo,
+  announcements: Announcement[],
   settings?: Partial<SettingsInfo>,
 };

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/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;

package/utils/pagination-utils.ts

@@ -165,7 +165,7 @@ class PaginationUtils {
   /**
    * Is pagination enabled at a global level or for a specific resource
    */
-  isEnabled({ rootGetters, $plugin }: any, enabledFor: PaginationResourceContext) {
+  isEnabled({ rootGetters, $extension }: any, enabledFor: PaginationResourceContext) {
     // Cache must be enabled to support pagination api
     if (!this.isSteveCacheEnabled({ rootGetters })) {
       return false;
@@ -184,7 +184,7 @@ class PaginationUtils {
     }
 
     // Does an extension say this type is enabled?
-    const plugin = $plugin as ExtensionManager;
+    const plugin = $extension as ExtensionManager;
     const paginationExtensionPoints = plugin.getAll()[EXT_IDS.SERVER_SIDE_PAGINATION_RESOURCES];
 
     if (paginationExtensionPoints) {

package/utils/pagination-wrapper.ts

@@ -19,7 +19,7 @@ interface Args {
   /**
    * Callback called when the resource is changed (notified by socket)
    */
-  onChange?: () => void,
+  onChange?: STEVE_WATCH_EVENT_LISTENER_CALLBACK,
 
   formatResponse?: {
     /**
@@ -69,16 +69,16 @@ class PaginationWrapper<T extends object> {
     this.classify = formatResponse?.classify || false;
     this.reactive = formatResponse?.reactive || false;
 
-    this.isEnabled = paginationUtils.isEnabled({ rootGetters: $store.getters, $plugin: this.$store.$plugin }, enabledFor);
+    this.isEnabled = paginationUtils.isEnabled({ rootGetters: $store.getters, $extension: this.$store.$extension }, enabledFor);
   }
 
-  async request(args: {
-      pagination: PaginationArgs,
+  async request({ pagination, forceWatch }: {
+    forceWatch?: boolean,
+    pagination: PaginationArgs,
   }): Promise<Result<T>> {
     if (!this.isEnabled) {
       throw new Error(`Wrapper for type '${ this.enabledFor.store }/${ this.enabledFor.resource?.id }' in context '${ this.enabledFor.resource?.context }' not supported`);
     }
-    const { pagination } = args;
     const opt: ActionFindPageArgs = {
       watch:     false,
       pagination,
@@ -89,14 +89,18 @@ class PaginationWrapper<T extends object> {
     const out: ActionFindPageTransientResult<T> = await this.$store.dispatch(`${ this.enabledFor.store }/findPage`, { opt, type: this.enabledFor.resource?.id });
 
     // Watch
-    if (this.onChange && !this.steveWatchParams) {
+    const firstTime = !this.steveWatchParams;
+
+    if (this.onChange && (firstTime || forceWatch) ) { // && !this.steveWatchParams
       this.steveWatchParams = {
         event:  STEVE_WATCH_EVENT_TYPES.CHANGES,
         id:     this.id,
         params: {
-          type: this.enabledFor.resource?.id as string,
-          mode: STEVE_WATCH_MODE.RESOURCE_CHANGES,
-        }
+          type:  this.enabledFor.resource?.id as string,
+          mode:  STEVE_WATCH_MODE.RESOURCE_CHANGES,
+          force: forceWatch,
+        },
+
       };
 
       this.watch();

package/utils/provider.ts

@@ -0,0 +1,14 @@
+import { IClusterProvisioner, ClusterProvisionerContext } from '@shell/core/types';
+
+export function getHostedProviders(context: ClusterProvisionerContext) {
+  return context?.$extension?.getProviders(context)?.filter((p: IClusterProvisioner) => p.group === 'hosted') || [];
+}
+
+export function isHostedProvider(context: ClusterProvisionerContext, provisioner: string) {
+  if (!provisioner) {
+    return false;
+  }
+  const provisioners = new Set(getHostedProviders(context).map((p: IClusterProvisioner) => p.id.toLowerCase()));
+
+  return provisioners.has(provisioner.toLowerCase());
+}

package/utils/scroll.js

@@ -0,0 +1,7 @@
+export function scrollToBottom() {
+  const scrollable = document.getElementsByTagName('main')[0];
+
+  if (scrollable) {
+    scrollable.scrollTop = scrollable.scrollHeight;
+  }
+}

package/utils/selector-typed.ts

@@ -199,8 +199,12 @@ export function labelSelectorToSelector(labelSelector?: KubeLabelSelector): stri
   });
 
   (labelSelector?.matchExpressions || []).forEach((value: KubeLabelSelectorExpression) => {
-    if (value.operator === 'In' && value.values?.length === 1) {
-      res.push(`${ value.key }=${ value.values[0] }`);
+    if (value.operator === 'In' && value.values !== undefined) {
+      if (value.values?.length === 1) {
+        res.push(`${ value.key }=${ value.values[0] }`);
+      } else {
+        res.push(`${ value.key } in (${ value.values.join(',') })`);
+      }
     } else {
       throw new Error(`Unsupported matchExpression found when converting to selector string. ${ value }`);
     }

package/utils/settings.ts

@@ -3,6 +3,7 @@ import { Store } from 'vuex';
 import { DEFAULT_PERF_SETTING, PerfSettings, SETTING } from '@shell/config/settings';
 import { pluralize } from '@shell/utils/string';
 import { _MULTI } from '@shell/plugins/dashboard-store/actions';
+import { ClusterProvisionerContext } from '@shell/core/types';
 
 export const fetchOrCreateSetting = async(store: Store<any>, id: string, val: string, save = true): Promise<any> => {
   let setting;
@@ -109,3 +110,17 @@ export const getPerformanceSetting = (rootGetters: Record<string, (arg0: string,
 
   return Object.assign(safeDefaults, perfSetting || {});
 };
+
+export const isProviderEnabled = (context: ClusterProvisionerContext, provider: string): boolean => {
+  const providerTypesJSON = context.getters['management/byId'](MANAGEMENT.SETTING, SETTING.KEV2_OPERATORS )?.value;
+  const providerTypes = providerTypesJSON ? JSON.parse(providerTypesJSON) : [];
+
+  for ( let i = 0; i < providerTypes.length; i++) {
+    if ( providerTypes[i].name === provider) {
+      return providerTypes[i].active;
+    }
+  }
+
+  // We want to have providers enabled by default unless they are turned off by a setting
+  return true;
+};