dashboard-shell-shell 3.0.2-test.20250913 → 3.0.5-logTest.2

package/utils/pagination-wrapper.ts

@@ -1,70 +1,152 @@
 import paginationUtils from '@shell/utils/pagination-utils';
-import { PaginationArgs, PaginationResourceContext, StorePagination } from '@shell/types/store/pagination.types';
+import { PaginationArgs, PaginationResourceContext } from '@shell/types/store/pagination.types';
 import { VuexStore } from '@shell/types/store/vuex';
-import { ActionFindPageArgs } from '@shell/types/store/dashboard-store.types';
+import { ActionFindPageArgs, ActionFindPageTransientResult } from '@shell/types/store/dashboard-store.types';
+import {
+  STEVE_WATCH_EVENT_LISTENER_CALLBACK, STEVE_UNWATCH_EVENT_PARAMS, STEVE_WATCH_EVENT, STEVE_WATCH_EVENT_PARAMS, STEVE_WATCH_EVENT_PARAMS_COMMON, STEVE_WATCH_MODE
+} from '@shell/types/store/subscribe.types';
+import { Reactive, reactive } from 'vue';
 
-interface Result<T> {
-  data: Array<T>
-  pagination: StorePagination
+interface Args {
+  $store: VuexStore,
+  /**
+   * Unique ID for this request. Used for watch purposes
+   */
+  id: string,
+  /**
+   * Args used when determining if this resource type supports SSP
+   */
+  enabledFor: PaginationResourceContext,
+  /**
+   * Callback called when the resource is changed (notified by socket)
+   */
+  onChange?: () => void,
+
+  formatResponse?: {
+    /**
+     * Convert the response into a model class instance
+     */
+    classify?: boolean,
+    reactive?: boolean,
+  }
+}
+
+interface Result<T> extends Omit<ActionFindPageTransientResult<T>, 'data'> {
+  data: Reactive<T[]>
 }
 
 /**
- * This is a helper class that will assist in fetching a resource
- * - Handle if the resource can be fetched by the new pagination api
- * - Make a request to get a page (including classify)
- * - Provide updates when the resource changes
+ * This is a helper class that will assist in fetching a resource via the new Server-Side Pagination API
  *
  * This is designed to work in places where we don't/can't store the resource in the store
  * - There already exists a resource we don't want to overwrite
- * - We're transient and want something nicer than just cluster/request
+ * - We're transient and want something nicer than just `cluster/request` + all the trimmings
+ *
+ * It ...
+ * - Handles if the resource can be fetched by the new pagination api
+ * - Makes a request to get a page (including optional classify & reactive)
+ * - Provide updates when the resource changes
  */
-class PaginationWrapper<T = any> {
-    private $store: VuexStore;
-    private enabledFor: PaginationResourceContext;
-
-    // Blocked on https://github.com/rancher/rancher/issues/40773 / https://github.com/rancher/dashboard/issues/12734
-    private onUpdate: (out: Result<T>) => void;
-
-    public isEnabled: boolean;
-
-    constructor({
-      $store,
-      enabledFor,
-      onUpdate,
-    }: {
-        $store: VuexStore,
-        onUpdate: (res: Result<T>) => void,
-        enabledFor: PaginationResourceContext,
-    }) {
-      this.$store = $store;
-      this.isEnabled = paginationUtils.isEnabled({ rootGetters: $store.getters }, enabledFor);
-      this.enabledFor = enabledFor;
-      this.onUpdate = onUpdate;
+class PaginationWrapper<T extends object> {
+  private $store: VuexStore;
+  private enabledFor: PaginationResourceContext;
+  private onChange?: STEVE_WATCH_EVENT_LISTENER_CALLBACK;
+  private id: string;
+  private classify: boolean;
+  private reactive: boolean;
+
+  public isEnabled: boolean;
+  private steveWatchParams: STEVE_WATCH_EVENT_PARAMS_COMMON | undefined;
+
+  constructor(args: Args) {
+    const {
+      $store, id, enabledFor, onChange, formatResponse
+    } = args;
+
+    this.$store = $store;
+    this.id = id;
+    this.enabledFor = enabledFor;
+    this.onChange = onChange;
+    this.classify = formatResponse?.classify || false;
+    this.reactive = formatResponse?.reactive || false;
+
+    this.isEnabled = paginationUtils.isEnabled({ rootGetters: $store.getters }, enabledFor);
+  }
+
+  async request(args: {
+      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,
+      transient: true,
+    };
+
+    // Fetch
+    const out: ActionFindPageTransientResult<T> = await this.$store.dispatch(`${ this.enabledFor.store }/findPage`, { opt, type: this.enabledFor.resource?.id });
+
+    // Watch
+    if (this.onChange && !this.steveWatchParams) {
+      this.steveWatchParams = {
+        event:  STEVE_WATCH_EVENT.CHANGES,
+        id:     this.id,
+        params: {
+          type: this.enabledFor.resource?.id as string,
+          mode: STEVE_WATCH_MODE.RESOURCE_CHANGES,
+        }
+      };
+
+      this.watch();
     }
 
-    async request(args: {
-        pagination: PaginationArgs,
-        classify?: boolean,
-    }): 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, classify: doClassify } = args;
-      const opt: ActionFindPageArgs = {
-        transient: true,
-        pagination
+    // Convert Response
+    if (this.classify) {
+      out.data = await this.$store.dispatch(`${ this.enabledFor.store }/createMany`, out.data);
+    }
+
+    if (this.reactive) {
+      return {
+        ...out,
+        data: reactive(out.data)
       };
+    }
 
-      const out: Result<T> = await this.$store.dispatch(`${ this.enabledFor.store }/findPage`, { opt, type: this.enabledFor.resource?.id });
+    return out;
+  }
 
-      if (doClassify) {
-        for (let i = 0; i < out.data.length; i++) {
-          out.data[i] = await this.$store.dispatch(`${ this.enabledFor.store }/create`, out.data[i]);
-        }
-      }
+  private async watch() {
+    if (!this.steveWatchParams) {
+      console.error('Calling watch but no watch params created'); // eslint-disable-line no-console
 
-      return out;
+      return;
     }
+    const watchParams: STEVE_WATCH_EVENT_PARAMS = {
+      ...this.steveWatchParams,
+      callback: this.onChange as STEVE_WATCH_EVENT_LISTENER_CALLBACK, // we must have it by now
+    };
+
+    await this.$store.dispatch(`${ this.enabledFor.store }/watchEvent`, watchParams);
+  }
+
+  private async unWatch() {
+    if (!this.steveWatchParams) {
+      console.error('Calling unWatch but no watch params created'); // eslint-disable-line no-console
+
+      return;
+    }
+
+    const unWatchParams: STEVE_UNWATCH_EVENT_PARAMS = { ...this.steveWatchParams };
+
+    await this.$store.dispatch(`${ this.enabledFor.store }/unwatchEvent`, unWatchParams);
+  }
+
+  async onDestroy() {
+    await this.unWatch();
+  }
 }
 
 export default PaginationWrapper;

package/utils/perf-setting.utils.ts

@@ -0,0 +1,28 @@
+import { PerfSettings } from '@shell/config/settings';
+
+type PaginationSupersedesSettings = 'incrementalLoading' | 'manualRefresh'
+
+class _Utils {
+  private setting: PaginationSupersedesSettings;
+  constructor(setting: PaginationSupersedesSettings) {
+    this.setting = setting;
+  }
+
+  /**
+   * This is a centralised point to ensure SSP takes precedence over the performance setting
+   */
+  isEnabled(paginationEnabled: boolean, perfSettings: PerfSettings): boolean {
+    return !paginationEnabled && perfSettings[this.setting].enabled;
+  }
+}
+
+export default {
+  /**
+   * Helper functions for the 'incremental loading indicator' performance settings
+   */
+  incrementalLoadingUtils: new _Utils('incrementalLoading'),
+  /**
+   * Helper functions for the 'manual refresh' performance settings
+   */
+  manualRefreshUtils:      new _Utils('manualRefresh'),
+};

package/utils/release-notes.ts

@@ -0,0 +1,48 @@
+import { getVersionData } from '@shell/config/version';
+import { READ_WHATS_NEW } from '@shell/store/prefs';
+import { NotificationLevel } from '@shell/types/notifications';
+
+export async function addReleaseNotesNotification(dispatch: any, getters: any) {
+  const rancherVersion = getVersionData().Version.split('-')[0];
+  const prefix = 'release-notes-';
+  const id = `${ prefix }${ rancherVersion }`;
+  let found = false;
+  const all = getters['notifications/all'];
+  const lastReadVersion = getters['prefs/get'](READ_WHATS_NEW) || '';
+  const t = getters['i18n/t'];
+  const releaseNotesUrl = getters['releaseNotesUrl'];
+
+  // Delete notification(s) for old release notes
+  for (let i = 0; i < all.length; i++) {
+    const notification = all[i];
+
+    if (notification.id.startsWith(prefix)) {
+      if (notification.id === id) {
+        found = true;
+      } else {
+        await dispatch('notifications/delete', notification.id);
+      }
+    }
+  }
+
+  // Also use pref, so if we expired it, we don't add it back
+  if (!found && lastReadVersion !== rancherVersion) {
+    // Register notification
+    const notification = {
+      id,
+      level:      NotificationLevel.Info,
+      title:      t('landing.whatsNew.title', { version: rancherVersion }),
+      message:    t('landing.whatsNew.message'),
+      preference: {
+        key:   READ_WHATS_NEW,
+        value: rancherVersion
+      },
+      primaryAction: {
+        label:  t('landing.whatsNew.link'),
+        target: releaseNotesUrl
+      }
+    };
+
+    await dispatch('notifications/add', notification);
+  }
+}

package/utils/roleFiltering.js

@@ -0,0 +1,33 @@
+export function globalRoleFilteringfn (ary) {
+  const roleList = ['admin', 'tenant', 'safe-admin']
+  if (ary && ary.length > 0) {
+    return ary.filter(item => { return roleList.includes(item.id) })
+  }
+  return []
+}
+
+export function clusterRoleFilteringfn (ary) {
+  const roleList = ['cluster-tenant']
+  if (ary && ary.length > 0) {
+    ary.map(m => {
+      if (m.id === 'cluster-tenant') {
+        m['displayName'] = '租户'
+      }
+    })
+    return ary.filter(item => { return roleList.includes(item.id) })
+  }
+  return []
+}
+
+export function projectRoleFilteringfn (ary) {
+  const roleList = ['project-tenant']
+  ary.map(m => {
+    if (m.id === 'project-tenant') {
+      m['displayName'] = '租户'
+    }
+  })
+  if (ary && ary.length > 0) {
+    return ary.filter(item => { return roleList.includes(item.id) })
+  }
+  return []
+}

package/utils/selector-typed.ts

@@ -0,0 +1,210 @@
+import { COUNT } from '@shell/config/types';
+import { KubeLabelSelector, KubeLabelSelectorExpression } from '@shell/types/kube/kube-api';
+import { ActionFindPageArgs } from '@shell/types/store/dashboard-store.types';
+import { FilterArgs, PaginationFilterField, PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { isEmpty } from '@shell/utils/object';
+import { convert, matching as rootMatching } from '@shell/utils/selector';
+
+type MatchingResponse = {
+  matched: number,
+  matches: any[],
+  none: boolean,
+  sample: any,
+  total: number,
+}
+
+/**
+ * Find resources that match a labelSelector. This behaves differently if vai based pagination is on
+ * a) Pagination Enabled - fetch matching resources filtered on backend - findPage
+ * b) Pagination Disabled - fetch all resources and then filter locally - findAll --> root `matching` fn
+ *
+ * This is a much smarter version of root matching fn `matching` from shell/utils/selector.js  (which just does local filtering)
+ *
+  * If fetching all of a resource should be avoided or we don't want to mess around with the cache the action `findLabelSelector` should be used
+ * - sometimes some legacy code expects all resources are fetched
+ * - sometimes we want to fetch a resource but not override the cache
+ *   - already have a pods list cached, don't want to overwrite that when finding pods associated with a service
+ *
+ * Resources are returned in a common format which includes metadata
+ */
+export async function matching({
+  labelSelector,
+  type,
+  inStore,
+  $store,
+  inScopeCount = undefined,
+  namespace = undefined,
+  transient = true,
+}: {
+  /**
+   * Standard kube label selector object.
+   *
+   * If this is 'empty' (no matchLabels or matchExpressions) it will return all results
+   *
+   * If this is 'null' it will return no results
+   */
+  labelSelector: KubeLabelSelector,
+  /**
+   * Resource type
+   */
+  type: string,
+  /**
+   * Store in which resources will be cached
+   */
+  inStore: string,
+  /**
+   * Standard vuex store object
+   */
+  $store: any,
+  /**
+   * Number of resources that are applicable when filtering.
+   *
+   * Used to skip any potential http request if we know the result will be zero
+   *
+   * If this property is not supplied we'll try and discover it from the COUNTS resource.
+   */
+  inScopeCount?: number
+  /**
+   * Optional namespace or namespaces to apply selector to
+   *
+   * If this is undefined then namespaces will totally be ignored
+   *
+   * If this is provided all resources must be within them. If an empty array is provided then no resources will be matched
+   *
+   */
+  namespace?: string | string[],
+  /**
+   * Should the result bypass the store?
+   */
+  transient?: boolean,
+}): Promise<MatchingResponse> {
+  const isNamespaced = $store.getters[`${ inStore }/schemaFor`](type)?.attributes.namespaced;
+  const safeNamespaces = Array.isArray(namespace) ? namespace : !!namespace ? [namespace] : [];
+  const filterByNamespaces = isNamespaced && !!namespace ; // Result set must come from a resource in a namespace
+
+  // Determine if there's actually anything to filter on
+  if (typeof inScopeCount === 'undefined') {
+    const counts = $store.getters[`${ inStore }/all`](COUNT)?.[0]?.counts || {};
+
+    if (filterByNamespaces) {
+      inScopeCount = 0;
+      safeNamespaces.forEach((n) => {
+        inScopeCount += counts?.[type]?.namespaces[n]?.count || 0;
+      });
+    } else {
+      inScopeCount = counts?.[type]?.summary?.count || 0;
+    }
+  }
+
+  // Exit early if there are any situations that always return nothing
+  const noCandidates = (inScopeCount || 0) === 0;
+  const filterByNamespaceButNoNamespace = isNamespaced && !!namespace && (!safeNamespaces || safeNamespaces.length === 0);
+  const explicityNullLabelSelector = labelSelector === null || (labelSelector?.matchLabels === null && !labelSelector.matchExpressions === null);
+
+  // If we have matchLabels or matchExpression entries they must have a key
+  const matchLabelKeys = Object.keys(labelSelector.matchLabels || {});
+  const invalidMatchLabelKeys = matchLabelKeys.length && matchLabelKeys.filter((k) => !k).length;
+  const invalidMatchExpressionKeys = labelSelector?.matchExpressions?.length && labelSelector.matchExpressions.filter((me) => !me.key).length;
+
+  if (noCandidates || filterByNamespaceButNoNamespace || explicityNullLabelSelector || invalidMatchLabelKeys || invalidMatchExpressionKeys) {
+    return generateMatchingResponse([], inScopeCount || 0);
+  }
+
+  if ($store.getters[`${ inStore }/paginationEnabled`]?.({ id: type })) {
+    if (isLabelSelectorEmpty(labelSelector) && (!!namespace && !safeNamespaces?.length)) {
+      // no namespaces - ALL resources are candidates
+      // no labels - return all candidates
+      // too many to fetch...
+      throw new Error('Either populated labelSelector or namespace/s must be supplied in order to call findPage');
+    }
+
+    const findPageArgs: ActionFindPageArgs = {
+      pagination: new FilterArgs({
+        labelSelector,
+        filters: PaginationParamFilter.createMultipleFields(
+          safeNamespaces.map(
+            (n) => new PaginationFilterField({
+              field: 'metadata.namespace', // API only compatible with steve atm...
+              value: n,
+            })
+          )
+        ),
+      }),
+      transient,
+    };
+
+    let match = await $store.dispatch(`${ inStore }/findPage`, { type, opt: findPageArgs });
+
+    if (transient) {
+      match = match.data;
+    }
+
+    return generateMatchingResponse(match, inScopeCount || 0);
+  } else {
+    // Start off with everything as a candidate
+    let candidates = await $store.dispatch(`${ inStore }/findAll`, { type });
+
+    inScopeCount = candidates.length;
+
+    // Filter out namespace specific stuff
+    if (isNamespaced && safeNamespaces?.length > 0) {
+      candidates = candidates.filter((e: any) => safeNamespaces.includes(e.metadata?.namespace));
+      inScopeCount = candidates.length;
+    }
+
+    // Apply labelSelector
+    if (labelSelector.matchLabels || labelSelector.matchExpressions) {
+      candidates = matches(candidates, labelSelector, 'metadata.labels');
+    }
+
+    return generateMatchingResponse(candidates, inScopeCount || 0);
+  }
+}
+
+const generateMatchingResponse = <T extends { [key: string]: any, nameDisplay: string}>(match: T[], inScopeCount: number): MatchingResponse => {
+  const matched = match.length || 0;
+  const sample = match[0]?.nameDisplay;
+
+  return {
+    matched,
+    matches: match,
+    none:    matched === 0,
+    sample,
+    total:   inScopeCount || 0,
+  };
+};
+
+/**
+ * This is similar to shell/utils/selector.js `matches`, but accepts a kube labelSelector
+ */
+function matches<T = any>(candidates: T[], labelSelector: KubeLabelSelector, labelKey: string): T[] {
+  const convertedObject = convert(labelSelector.matchLabels, labelSelector.matchExpressions);
+
+  return rootMatching(candidates, convertedObject, labelKey);
+}
+
+export function isLabelSelectorEmpty(labelSelector?: KubeLabelSelector): boolean {
+  return !labelSelector?.matchExpressions?.length && isEmpty(labelSelector?.matchLabels);
+}
+
+export function labelSelectorToSelector(labelSelector?: KubeLabelSelector): string {
+  if (isLabelSelectorEmpty(labelSelector)) {
+    return '';
+  }
+
+  const res: string[] = [];
+
+  Object.entries(labelSelector?.matchLabels || {}).forEach(([key, value]) => {
+    res.push(`${ key }=${ value }`);
+  });
+
+  (labelSelector?.matchExpressions || []).forEach((value: KubeLabelSelectorExpression) => {
+    if (value.operator === 'In' && value.values?.length === 1) {
+      res.push(`${ value.key }=${ value.values[0] }`);
+    } else {
+      throw new Error(`Unsupported matchExpression found when converting to selector string. ${ value }`);
+    }
+  });
+
+  return res.join(',');
+}

package/utils/selector.js

@@ -11,7 +11,14 @@ const OP_MAP = {
   '>':  'Gt',
 };
 
-// Parse a labelSelector string
+/**
+ * Convert a string to a matchExpression object
+ *
+ * *string* is from https://github.com/kubernetes/apimachinery/blob/master/pkg/labels/selector.go#L1010.
+ * However... it seems to contain more operators than just `=` which the labels.Selector `String` does not use
+ *
+ * matchExpression is an array of 'key' 'operator' 'values'
+ */
 export function parse(labelSelector) {
   // matchLabels:
   // comma-separated list, all rules ANDed together
@@ -32,6 +39,10 @@ export function parse(labelSelector) {
   // operator: In, NotIn, Exists, or DoesNotExist
   // values:  [array, of, values, even, if, only, one]
 
+  if (!labelSelector) {
+    return [];
+  }
+
   labelSelector = labelSelector.replace(/\+/g, ' ');
 
   if ( parseCache[labelSelector] ) {
@@ -101,13 +112,17 @@ export function parse(labelSelector) {
   return out;
 }
 
-// Convert a Selector object to matchExpressions
+/**
+ * Convert a Selector object to matchExpressions
+ */
 export function convertSelectorObj(obj) {
   return convert(obj.matchLabels || {}, obj.matchExpressions || []);
 }
 
-// Convert matchLabels to matchExpressions
-// Optionally combining with an existing set of matchExpressions
+/**
+ * Convert matchLabels to matchExpressions
+ * Optionally combining with an existing set of matchExpressions
+ */
 export function convert(matchLabelsObj, matchExpressions) {
   const keys = Object.keys(matchLabelsObj || {});
   const out = matchExpressions || [];
@@ -130,8 +145,10 @@ export function convert(matchLabelsObj, matchExpressions) {
   return out;
 }
 
-// Convert matchExpressions to matchLabels when possible,
-// returning the simplest combination of them.
+/**
+ * Convert matchExpressions to matchLabels when possible,
+ * returning the simplest combination of them.
+ */
 export function simplify(matchExpressionsInput) {
   const matchLabels = {};
   const matchExpressions = [];
@@ -163,6 +180,12 @@ export function simplify(matchExpressionsInput) {
   return { matchLabels, matchExpressions };
 }
 
+/**
+ *
+ * For a fn that accepts a kube labelSelector object see shell/utils/selector-typed.ts `matches`
+ *
+ * @param {*} selector Is NOT a labelSelector object
+ */
 export function matches(obj, selector, labelKey = 'metadata.labels') {
   let rules = [];
 

package/utils/settings.ts

@@ -59,7 +59,10 @@ export const fetchInitialSettings = async(store: Store<any>): Promise<any> => {
     // We're authed, we will always get the full list
     return await store.dispatch('management/findAll', {
       type: MANAGEMENT.SETTING,
-      opt:  { url: `/v1/${ pluralize(MANAGEMENT.SETTING) }` }
+      opt:  {
+        url:   `/v1/${ pluralize(MANAGEMENT.SETTING) }`,
+        watch: false, // Watch requires FF and Settings, see `loadManagement` to see how this is handled
+      }
     } );
   }
 

package/utils/string.js

@@ -361,3 +361,27 @@ export function isBase64(value) {
 export function generateRandomAlphaString(length) {
   return Array.from({ length }, () => String.fromCharCode(97 + Math.random() * 26 | 0)).join('');
 }
+
+/**
+ * Generate a key-value nested object from a list of paths that represents a directory tree.
+ *
+ * Each key is a subpath
+ * Each value contains the children of the subpath
+ */
+export function pathArrayToTree(paths) {
+  const result = [];
+  const level = { result };
+
+  paths.forEach((path) => {
+    path?.split('/').reduce((r, name) => {
+      if (!r[name]) {
+        r[name] = { result: [] };
+        r.result.push({ name, children: r[name].result });
+      }
+
+      return r[name];
+    }, level);
+  });
+
+  return result;
+}

package/utils/style.ts

@@ -0,0 +1,39 @@
+export type StateColor = 'success' | 'warning' | 'error' | 'info' | 'disabled';
+export const ALL_STATE_COLORS: StateColor[] = ['success', 'warning', 'error', 'info', 'disabled'];
+
+export function stateColorCssVar(color: StateColor) {
+  return `var(--${ color })`;
+}
+
+export function toBgColor(color?: StateColor) {
+  const withDefaultColor = color || 'info';
+
+  return `bg-${ withDefaultColor }`;
+}
+
+/**
+ * Checks if 'a' is considered a higher alert than 'b'
+ * @param a target
+ * @param b comparison
+ * @returns true if 'a' is a higher alert than 'b' and false otherwise.
+ */
+export function isHigherAlert(a: StateColor, b: StateColor) {
+  const order: StateColor[] = ['info', 'success', 'warning', 'error'];
+
+  const aIndex = order.indexOf(a);
+  const bIndex = order.indexOf(b);
+
+  return aIndex > bIndex;
+}
+
+export function getHighestAlertColor(colors: StateColor[]) {
+  let highestAlert: StateColor = 'info';
+
+  for (const color of colors) {
+    if (isHigherAlert(color, highestAlert)) {
+      highestAlert = color;
+    }
+  }
+
+  return highestAlert;
+}