@rancher/shell 3.0.5-rc.3 → 3.0.5-rc.5

package/types/store/dashboard-store.types.ts

@@ -1,4 +1,4 @@
-import { PaginationArgs } from '@shell/types/store/pagination.types';
+import { PaginationArgs, StorePagination } from '@shell/types/store/pagination.types';
 
 /**
  * Properties on all findX actions
@@ -47,6 +47,11 @@ export interface ActionFindAllArgs extends ActionCoreFindArgs {
   depaginate?: boolean,
 }
 
+export interface ActionFindPageTransientResult<T> {
+  pagination: StorePagination,
+  data: T[],
+}
+
 /**
  * Args used for findPage action
  */
@@ -62,8 +67,17 @@ export interface ActionFindPageArgs extends ActionCoreFindArgs {
    */
   namespaced?: string,
   /**
-   * Result of request is transient and not persisted to store
+   * Watch for changes
+   *
+   * false = no, all other values = yes
+   */
+  watch?: boolean,
+  /**
+   * Does this request stem from a list with manual refresh?
    */
-  transient?: boolean,
   hasManualRefresh?: boolean,
+  /**
+   * If true don't persist the http response to the store, just pass it back
+   */
+  transient?: boolean,
 }

package/types/store/pagination.types.ts

@@ -451,7 +451,12 @@ export interface StorePaginationRequest {
   /**
    * The set of pagination args used to create the request
    */
-  pagination: PaginationArgs
+  pagination: PaginationArgs,
+
+  /**
+   * Does this request stem from a list with manual refresh?
+   */
+  hasManualRefresh?: boolean,
 }
 
 /**

package/types/store/subscribe.types.ts

@@ -0,0 +1,50 @@
+/* eslint-disable no-unused-vars */
+export enum STEVE_WATCH_MODE {
+  DEFAULT = '',
+  RESOURCE_CHANGES = 'resource.changes'
+}
+/* eslint-enable no-unused-vars */
+
+/* eslint-disable no-unused-vars */
+export enum STEVE_WATCH_EVENT {
+  START = 'resource.start',
+  CREATE = 'resource.create',
+  CHANGE = 'resource.change',
+  CHANGES = 'resource.changes',
+  REMOVE = 'resource.resource.remove',
+  ERROR = 'resource.error',
+  STOP = 'resource.stop',
+}
+/* eslint-enable no-unused-vars */
+
+export interface STEVE_WATCH_PARAMS {
+  type: string,
+  selector?: string,
+  id?: string,
+  revision?: string,
+  namespace?: string,
+  stop?: boolean,
+  force?: boolean,
+  mode?: STEVE_WATCH_MODE
+}
+
+export type STEVE_WATCH_EVENT_LISTENER_CALLBACK = () => void
+export interface STEVE_WATCH_EVENT_LISTENER {
+  params: STEVE_WATCH_PARAMS,
+  callbacks: { [id: string]: STEVE_WATCH_EVENT_LISTENER_CALLBACK},
+}
+
+export interface STEVE_WATCH_EVENT_PARAMS_COMMON {
+  event: STEVE_WATCH_EVENT,
+  id: string,
+  /**
+   * of type @STEVE_WATCH_PARAMS
+   */
+  params: STEVE_WATCH_PARAMS,
+}
+
+export interface STEVE_WATCH_EVENT_PARAMS extends STEVE_WATCH_EVENT_PARAMS_COMMON {
+  callback: STEVE_WATCH_EVENT_LISTENER_CALLBACK,
+}
+
+export type STEVE_UNWATCH_EVENT_PARAMS = STEVE_WATCH_EVENT_PARAMS_COMMON

package/utils/auth.js

@@ -9,6 +9,8 @@ import { getProductFromRoute, getResourceFromRoute } from '@shell/utils/router';
 import { NAME as EXPLORER } from '@shell/config/product/explorer';
 import { findBy } from '@shell/utils/array';
 
+export const AUTH_BROADCAST_CHANNEL_NAME = 'rancher-auth-test-callback';
+
 export function openAuthPopup(url, provider) {
   const popup = new Popup(() => {
     popup.promise = new Promise((resolve, reject) => {
@@ -16,19 +18,46 @@ export function openAuthPopup(url, provider) {
       popup.reject = reject;
     });
 
+    const bc = new BroadcastChannel(AUTH_BROADCAST_CHANNEL_NAME);
+
     window.onAuthTest = (error, code) => {
       if (error) {
         popup.reject(error);
       }
 
+      bc.close();
       delete window.onAuthTest;
       popup.resolve(code);
     };
-  }, () => {
-    popup.reject(new Error('Access was not authorized'));
+
+    // Broadcast message listener for when the window can not invoke a method on the opener
+    bc.onmessage = (msgEvent) => {
+      try {
+        const obj = JSON.parse(msgEvent.data);
+        const { error, code } = obj;
+
+        window.onAuthTest(error, code);
+      } catch (e) {
+        window.onAuthTest(new Error(`Access was not authorized (invalid callback metadata)`));
+
+        console.error('Unable to process message from auth broadcast channel', e); // eslint-disable-line no-console
+      }
+    };
+  }, (e) => {
+    let detail = '';
+
+    // If there was an error and it has a message, add that to the message we send back via the promise
+    if (e?.type === 'error' && e?.message) {
+      detail = ` (${ e.message })`;
+    }
+
+    popup.reject(new Error(`Access was not authorized${ detail }`));
   });
 
-  popup.open(url, 'auth-test', popupWindowOptions());
+  // So far, only Amazon Cognito sets the origin policy that prevents us from detecting when the popup is closed
+  const doNotPollForClosure = provider === 'cognito';
+
+  popup.open(url, 'auth-test', popupWindowOptions(), doNotPollForClosure);
 
   return popup.promise;
 }

package/utils/fleet.ts

@@ -5,9 +5,11 @@ import {
   BundleDeploymentStatus,
   Condition,
 } from '@shell/types/resources/fleet';
-import { mapStateToEnum, STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
+import { mapStateToEnum, STATES_ENUM, STATES } from '@shell/plugins/dashboard-store/resource-class';
 import { FLEET as FLEET_LABELS } from '@shell/config/labels-annotations';
 import { NAME as EXPLORER_NAME } from '@shell/config/product/explorer';
+import { FleetDashboardState, FleetResourceState } from '@shell/types/fleet';
+import { FLEET } from '@shell/config/types';
 
 interface Resource extends BundleDeploymentResource {
   state: string,
@@ -17,6 +19,17 @@ type Labels = {
   [key: string]: string,
 }
 
+interface KeyRef {
+  key: string;
+  name: string;
+  namespace?: string;
+}
+
+interface ValueFrom {
+  configMapKeyRef?: KeyRef;
+  secretKeyRef?: KeyRef;
+}
+
 function resourceKey(r: BundleResourceKey): string {
   return `${ r.kind }/${ r.namespace }/${ r.name }`;
 }
@@ -29,7 +42,140 @@ function conditionIsTrue(conditions: Condition[] | undefined, type: string): boo
   return !!conditions.find((c) => c.type === type && c.status.toLowerCase() === 'true');
 }
 
+class HelmOp {
+  fromValuesFrom(data: ValueFrom[]): { valueFrom: ValueFrom }[] {
+    return (data || []).map((elem) => {
+      const out = {} as any;
+
+      const cm = elem.configMapKeyRef;
+
+      if (cm) {
+        out.valueFrom = {
+          configMapKeyRef: {
+            key:  cm.key || '',
+            name: cm.name || '',
+          }
+        };
+      }
+
+      const sc = elem.secretKeyRef;
+
+      if (sc) {
+        out.valueFrom = {
+          secretKeyRef: {
+            key:  sc.key || '',
+            name: sc.name || '',
+          }
+        };
+      }
+
+      return out;
+    });
+  }
+
+  toValuesFrom(data: { valueFrom: ValueFrom }[], namespace: string): ValueFrom[] {
+    return (data || [])
+      .filter((f) => f.valueFrom?.configMapKeyRef || f.valueFrom?.secretKeyRef)
+      .map(({ valueFrom }) => {
+        const cm = valueFrom.configMapKeyRef;
+        const sc = valueFrom.secretKeyRef;
+
+        const out = {} as ValueFrom;
+
+        if (cm?.name) {
+          out.configMapKeyRef = {
+            key:  cm.key,
+            name: cm.name,
+            namespace
+          };
+        }
+
+        if (sc?.name) {
+          out.secretKeyRef = {
+            key:  sc.key,
+            name: sc.name,
+            namespace
+          };
+        }
+
+        return out;
+      });
+  }
+}
+
 class Fleet {
+  resourceIcons = {
+    [FLEET.GIT_REPO]: 'icon icon-github',
+    [FLEET.HELM_OP]:  'icon icon-helm',
+  };
+
+  dashboardIcons = {
+    [FLEET.GIT_REPO]: 'icon icon-git',
+    [FLEET.HELM_OP]:  'icon icon-helm',
+  };
+
+  dashboardStates: FleetDashboardState[] = [
+    {
+      index:           0,
+      id:              'error',
+      label:           'Error',
+      color:           '#F64747',
+      icon:            'icon icon-error',
+      stateBackground: 'bg-error'
+    },
+    {
+      index:           1,
+      id:              'warning',
+      label:           'Warning',
+      color:           '#DAC342',
+      icon:            'icon icon-warning',
+      stateBackground: 'bg-warning'
+    },
+    {
+      index:           2,
+      id:              'success',
+      label:           'Active',
+      color:           '#5D995D',
+      icon:            'icon icon-checkmark',
+      stateBackground: 'bg-success'
+    },
+    {
+      index:           3,
+      id:              'info',
+      label:           'InProgress',
+      color:           '#3d98d3',
+      icon:            'icon icon-warning',
+      stateBackground: 'bg-info'
+    },
+  ];
+
+  HelmOp = new HelmOp();
+
+  GIT_HTTPS_REGEX = /^https?:\/\/github\.com\/(.*?)(\.git)?\/*$/;
+  GIT_SSH_REGEX = /^git@github\.com:.*\.git$/;
+  HTTP_REGEX = /^(https?:\/\/[^\s]+)$/;
+  OCI_REGEX = /^oci:\/\//;
+
+  quacksLikeAHash(str: string) {
+    if (str.match(/^[a-f0-9]{40,}$/i)) {
+      return true;
+    }
+
+    return false;
+  }
+
+  parseSSHUrl(url: string) {
+    const parts = (url || '').split(':');
+
+    const sshUserAndHost = parts[0];
+    const repoPath = parts[1]?.replace('.git', '');
+
+    return {
+      sshUserAndHost,
+      repoPath
+    };
+  }
+
   resourceId(r: BundleResourceKey): string {
     return r.namespace ? `${ r.namespace }/${ r.name }` : r.name;
   }
@@ -126,6 +272,59 @@ class Fleet {
       return STATES_ENUM.READY;
     }
   }
+
+  getResourcesDefaultState(labelGetter: (key: string, args: any, fallback: any) => Record<string, any>, stateKey: string): Record<string, FleetResourceState> {
+    return [
+      STATES_ENUM.READY,
+      STATES_ENUM.NOT_READY,
+      STATES_ENUM.WAIT_APPLIED,
+      STATES_ENUM.MODIFIED,
+      STATES_ENUM.MISSING,
+      STATES_ENUM.ORPHANED,
+      STATES_ENUM.UNKNOWN,
+    ].reduce((acc: Record<string, any>, state) => {
+      acc[state] = {
+        count:  0,
+        color:  STATES[state].color,
+        label:  labelGetter(`${ stateKey }.${ state }`, null, STATES[state].label ),
+        status: state
+      };
+
+      return acc;
+    }, {});
+  }
+
+  getBundlesDefaultState(labelGetter: (key: string, args: any, fallback: any) => Record<string, any>, stateKey: string): Record<string, FleetResourceState> {
+    return [
+      STATES_ENUM.READY,
+      STATES_ENUM.INFO,
+      STATES_ENUM.WARNING,
+      STATES_ENUM.NOT_READY,
+      STATES_ENUM.ERROR,
+      STATES_ENUM.ERR_APPLIED,
+      STATES_ENUM.WAIT_APPLIED,
+      STATES_ENUM.UNKNOWN,
+    ].reduce((acc: Record<string, any>, state) => {
+      acc[state] = {
+        count:  0,
+        color:  STATES[state].color,
+        label:  labelGetter(`${ stateKey }.${ state }`, null, STATES[state].label ),
+        status: state
+      };
+
+      return acc;
+    }, {});
+  }
+
+  getDashboardStateId(resource: { stateColor: string }): string {
+    return resource?.stateColor?.replace('text-', '') || 'warning';
+  }
+
+  getDashboardState(resource: { stateColor: string }): FleetDashboardState | {} {
+    const stateId = this.getDashboardStateId(resource);
+
+    return this.dashboardStates.find(({ id }) => stateId === id) || {};
+  }
 }
 
 const instance = new Fleet();

package/utils/pagination-utils.ts

@@ -1,4 +1,4 @@
-import { PaginationSettings, PaginationSettingsStore } from '@shell/types/resources/settings';
+import { PaginationFeature, PaginationSettings, PaginationSettingsStore } from '@shell/types/resources/settings';
 import {
   NAMESPACE_FILTER_ALL_USER as ALL_USER,
   NAMESPACE_FILTER_ALL as ALL,
@@ -128,6 +128,31 @@ class PaginationUtils {
     return false;
   }
 
+  listAutoRefreshToggleEnabled({ rootGetters }: any): boolean {
+    return this.isFeatureEnabled({ rootGetters }, 'listAutoRefreshToggle');
+  }
+
+  isListManualRefreshEnabled({ rootGetters }: any): boolean {
+    return this.isFeatureEnabled({ rootGetters }, 'listManualRefresh');
+  }
+
+  private isFeatureEnabled({ rootGetters }: any, featureName: PaginationFeature): boolean {
+    // Cache must be enabled to support pagination api
+    if (!this.isSteveCacheEnabled({ rootGetters })) {
+      return false;
+    }
+
+    const settings = this.getSettings({ rootGetters });
+
+    return !!settings.features?.[featureName]?.enabled;
+  }
+
+  resourceChangesDebounceMs({ rootGetters }: any): number | undefined {
+    const settings = this.getSettings({ rootGetters });
+
+    return settings.resourceChangesDebounceMs;
+  }
+
   validateNsProjectFilters(nsProjectFilters: string[]) {
     return nsProjectFilters?.every((f) => this.validateNsProjectFilter(f));
   }

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