dashboard-shell-shell 3.0.2-rc.105 → 3.0.5-test.1

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;
+}

package/utils/{time.js → time.ts}

@@ -1,4 +1,7 @@
 import day from 'dayjs';
+import { escapeHtml } from '@shell/utils/string';
+import { DATE_FORMAT, TIME_FORMAT } from '@shell/store/prefs';
+import { type Store } from 'vuex';
 
 const FACTORS = [60, 60, 24];
 const LABELS = ['sec', 'min', 'hour', 'day'];
@@ -6,7 +9,7 @@ const LABELS = ['sec', 'min', 'hour', 'day'];
 // Diff two dates and return an object with values for presentation
 // If 't' is also passed, 'string' property is set on the return object with the diff formatted as a string
 // e.g. formats a date difference to return '1 day', '20 hours' etc
-export function diffFrom(value, from, t) {
+export function diffFrom(value: any, from: any, t: any) {
   const now = day();
 
   from = from || now;
@@ -15,7 +18,7 @@ export function diffFrom(value, from, t) {
   let absDiff = Math.abs(diff);
 
   let next = 1;
-  let label = '?';
+  let label: any = '?';
 
   let i = 0;
 
@@ -30,7 +33,7 @@ export function diffFrom(value, from, t) {
   } else {
     label = Math.floor(absDiff);
   }
-  const ret = {
+  const ret: any = {
     diff,
     absDiff,
     label,
@@ -47,7 +50,7 @@ export function diffFrom(value, from, t) {
   return ret;
 }
 
-export function safeSetTimeout(timeout, callback, that) {
+export function safeSetTimeout(timeout: any, callback: any, that: any) {
   if (timeout <= 2147483647) {
     // Max value setTimeout can take is max 32 bit int (about 24.9 days)
     return setTimeout(() => {
@@ -56,7 +59,7 @@ export function safeSetTimeout(timeout, callback, that) {
   }
 }
 
-export function getSecondsDiff(startDate, endDate) {
+export function getSecondsDiff(startDate: any, endDate: any) {
   return Math.round(
     Math.abs(Date.parse(endDate) - Date.parse(startDate)) / 1000
   );
@@ -68,7 +71,7 @@ export function getSecondsDiff(startDate, endDate) {
  * diff:  update frequency in seconds
  * label: content of the cell's column
  */
-export function elapsedTime(seconds) {
+export function elapsedTime(seconds: any) {
   if (!seconds) {
     return {};
   }
@@ -119,3 +122,19 @@ export function elapsedTime(seconds) {
     label: `${ hours }h${ minutes - (hours * 60) }m`,
   };
 }
+
+/**
+   * Format date and time using user preferences
+   * @param value Date string to format
+   * @returns Formatted date string
+   */
+export const dateTimeFormat = (value: string | undefined, store: Store<any>): string => {
+  if (!value) return '';
+
+  const dateFormat = escapeHtml( store.getters['prefs/get'](DATE_FORMAT));
+  const timeFormat = escapeHtml( store.getters['prefs/get'](TIME_FORMAT));
+
+  const format = `${ dateFormat } ${ timeFormat }`;
+
+  return day(value).format(format);
+};

package/utils/uiplugins.ts

@@ -1,7 +1,7 @@
 import { matchesSomeRegex } from '@shell/utils/string';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { CATALOG } from '@shell/config/types';
-import { UI_PLUGIN_BASE_URL, isSupportedChartVersion } from '@shell/config/uiplugins';
+import { UI_PLUGIN_BASE_URL, isSupportedChartVersion, UI_PLUGIN_LABELS } from '@shell/config/uiplugins';
 
 const MAX_RETRIES = 10;
 const RETRY_WAIT = 2500;
@@ -44,9 +44,11 @@ export async function getLatestExtensionVersion(
  *
  * @param store Vue store
  * @param name Name of the extension
+ * @param maxRetries Number of times to check for availability
+ * @param retryWait Gap (in ms) between availability checks
  * @returns the extension object when available, null if timed out waiting for it to be available
  */
-export async function waitForUIExtension(store: any, name: string): Promise<any> {
+export async function waitForUIExtension(store: any, name: string, maxRetries = MAX_RETRIES, retryWait = RETRY_WAIT): Promise<any> {
   let tries = 0;
 
   while (true) {
@@ -69,11 +71,11 @@ export async function waitForUIExtension(store: any, name: string): Promise<any>
 
     tries++;
 
-    if (tries > MAX_RETRIES) {
+    if (tries > maxRetries) {
       return null;
     }
 
-    await new Promise((resolve) => setTimeout(resolve, RETRY_WAIT));
+    await new Promise((resolve) => setTimeout(resolve, retryWait));
   }
 }
 
@@ -82,9 +84,11 @@ export async function waitForUIExtension(store: any, name: string): Promise<any>
  *
  * @param store Vue store
  * @param extension Extension object
+ * @param maxRetries Number of times to check for availability
+ * @param retryWait Gap (in MS) between availability checks
  * @returns true when available, false if timed out waiting for it to be available
  */
-export async function waitForUIPackage(store: any, extension: any): Promise<boolean> {
+export async function waitForUIPackage(store: any, extension: any, maxRetries = MAX_RETRIES, retryWait = RETRY_WAIT): Promise<boolean> {
   let tries = 0;
 
   const { name, version } = extension;
@@ -104,11 +108,11 @@ export async function waitForUIPackage(store: any, extension: any): Promise<bool
 
     tries++;
 
-    if (tries > MAX_RETRIES) {
+    if (tries > maxRetries) {
       return false;
     }
 
-    await new Promise((resolve) => setTimeout(resolve, RETRY_WAIT));
+    await new Promise((resolve) => setTimeout(resolve, retryWait));
   }
 }
 
@@ -176,10 +180,17 @@ export async function getHelmRepositoryExact(store: any, url: string): Promise<H
  *
  * @param store Vue store
  * @param urlRegexes Regex to match a community repository
+ * @param catalogImages Catalog images to match against the repository's labels
  * @returns HelmRepository
  */
-export async function getHelmRepositoryMatch(store: any, urlRegexes: string[]): Promise<HelmRepository> {
+export async function getHelmRepositoryMatch(store: any, urlRegexes: string[], catalogImages: string[]): Promise<HelmRepository> {
   return await getHelmRepository(store, (repository: any) => {
+    // if installed from rancher/ui-plugin-catalog or rancher/ui-extension-harvester-ui-extension
+    const catalog = repository?.metadata?.labels?.[UI_PLUGIN_LABELS.CATALOG_IMAGE] || '';
+
+    if (catalogImages.includes(catalog)) {
+      return true;
+    }
     const target = repository.spec?.gitBranch ? repository.spec?.gitRepo : repository.spec?.url;
 
     return matchesSomeRegex(target, urlRegexes);
@@ -317,3 +328,25 @@ export async function getHelmChart(store: any, repository: any, chartName: strin
     await new Promise((resolve) => setTimeout(resolve, RETRY_WAIT));
   }
 }
+
+export async function onExtensionsReady(store: any) {
+  const alreadyReady = store.getters['uiplugins/ready'];
+
+  if (alreadyReady) {
+    return;
+  }
+
+  const extensions = store.getters['uiplugins/plugins'] || [];
+
+  for (let i = 0; i < extensions.length; i++) {
+    const ext = extensions[i];
+
+    try {
+      await ext.onLogIn(store);
+    } catch (e) {
+      console.error(`Exception caught in onReady for extension ${ ext.name }`, e); // eslint-disable-line no-console
+    }
+  }
+
+  await store.dispatch('uiplugins/setReady', true);
+}

package/utils/v-sphere.ts

@@ -40,7 +40,11 @@ class VSphereUtils {
       generateName, upstreamClusterName, upstreamNamespace, downstreamName, downstreamNamespace
     }: SecretDetails): Promise<SecretJson | undefined> {
     // Fetch secrets in a specific namespace and partially matching the name to the generate name
-    const secrets = await $store.dispatch('management/request', { url: `/v1/${ SECRET }/${ upstreamNamespace }?filter=metadata.name=${ generateName }` });
+    const url = $store.getters['management/urlOptions'](
+      `/v1/${ SECRET }/${ upstreamNamespace }`,
+      { filter: { 'metadata.name': generateName } }
+    );
+    const secrets = await $store.dispatch('management/request', { url });
 
     // Filter by specific annotations
     const applicableSecret = secrets.data?.filter((s: any) => {