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

package/utils/auth.js

@@ -8,6 +8,9 @@ import { allHash } from '@shell/utils/promise';
 import { getProductFromRoute, getResourceFromRoute } from '@shell/utils/router';
 import { NAME as EXPLORER } from '@shell/config/product/explorer';
 import { findBy } from '@shell/utils/array';
+import { onExtensionsReady } from '@shell/utils/uiplugins';
+
+export const AUTH_BROADCAST_CHANNEL_NAME = 'rancher-auth-test-callback';
 
 export function openAuthPopup(url, provider) {
   const popup = new Popup(() => {
@@ -16,19 +19,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;
 }
@@ -304,9 +334,15 @@ export async function tryInitialSetup(store, password = 'admin') {
 /**
  * Record in our state management that we're indeed logged in
  */
-export function isLoggedIn(store, me) {
+export async function isLoggedIn(store, userData) {
   store.commit('auth/hasAuth', true);
-  store.commit('auth/loggedInAs', me.id);
+  store.commit('auth/loggedInAs', userData.id);
+
+  // Init the notification center now that we know who the user is
+  await store.dispatch('notifications/init', userData);
+
+  // Let the extensions know that the user is logged in
+  await onExtensionsReady(store);
 }
 
 /**

package/utils/crypto/encryption.ts

@@ -0,0 +1,103 @@
+/**
+ * Helpers for string encryption and decryption
+ */
+
+// We just use a static salt
+const SALT = new TextEncoder().encode('rancher-dashboard');
+
+/**
+ * Type for the result of encryption
+ */
+export type EncryptedString = {
+  cipher: string;
+  iv: string;
+};
+
+/**
+ * Generate an encryption key from a password
+ *
+ * @param password Password to use for the key
+ * @returns Encryption key
+ */
+export async function deriveKey(password: string): Promise<CryptoKey> {
+  const passwordBytes = stringToBytes(password);
+
+  const initialKey = await crypto.subtle.importKey(
+    'raw',
+    passwordBytes,
+    { name: 'PBKDF2' },
+    false,
+    ['deriveKey']
+  );
+
+  return await crypto.subtle.deriveKey(
+    {
+      name:       'PBKDF2',
+      salt:       SALT,
+      iterations: 100000,
+      hash:       'SHA-256'
+    },
+    initialKey,
+    {
+      name:   'AES-GCM',
+      length: 256
+    },
+    false,
+    [
+      'encrypt',
+      'decrypt'
+    ]
+  );
+}
+
+/**
+ * Encrypt data
+ *
+ * @param content String to be encrypted
+ * @param key Encryption key
+ * @returns Encrypted data
+ */
+export async function encrypt(content: string, key: CryptoKey): Promise<EncryptedString> {
+  const iv = crypto.getRandomValues(new Uint8Array(12));
+  const contentBytes = stringToBytes(content);
+  const cipher = new Uint8Array(
+    await crypto.subtle.encrypt({ name: 'AES-GCM', iv }, key, contentBytes)
+  );
+
+  return {
+    iv:     bytesToBase64(iv),
+    cipher: bytesToBase64(cipher),
+  };
+}
+
+/**
+ * Decrypt encrypted data
+ * @param encryptedData Encrypted data with `cipher` and `iv` field
+ * @param key Key to use for decryption
+ * @returns Decrypted value as a string
+ */
+export async function decrypt(encryptedData: EncryptedString, key: CryptoKey): Promise<string> {
+  const iv = base64ToBytes(encryptedData.iv);
+  const cipher = base64ToBytes(encryptedData.cipher);
+  const contentBytes = new Uint8Array(
+    await crypto.subtle.decrypt({ name: 'AES-GCM', iv }, key, cipher)
+  );
+
+  return bytesToString(contentBytes);
+}
+
+function bytesToString(bytes: any): string {
+  return new TextDecoder().decode(bytes);
+}
+
+function stringToBytes(str: string): Uint8Array {
+  return new TextEncoder().encode(str);
+}
+
+function bytesToBase64(arr: Uint8Array) {
+  return btoa(Array.from(arr, (b: number) => String.fromCharCode(b)).join(''));
+}
+
+function base64ToBytes(base64: string): Uint8Array {
+  return Uint8Array.from(atob(base64), (c) => c.charCodeAt(0));
+}

package/utils/cspAdaptor.ts

@@ -0,0 +1,51 @@
+// For testing these could be changed to something like...
+
+import { CATALOG } from '@shell/config/types';
+import { FilterArgs, PaginationFilterField, PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { VuexStore } from '@shell/types/store/vuex';
+
+const CSP_ADAPTER_APPS = ['rancher-csp-adapter', 'rancher-csp-billing-adapter'];
+// For testing above line could be replaced with below line...
+// const cspAdaptorApp = ['rancher-webhooka', 'rancher-webhook'];
+
+/**
+ * Helpers in order to
+ */
+class CspAdapterUtils {
+  static canPagination($store: VuexStore): boolean {
+    return $store.getters[`management/paginationEnabled`]({ id: CATALOG.APP, context: 'branding' });
+  }
+
+  static fetchCspAdaptorApp($store: VuexStore): Promise<any> {
+    // For the login page, the schemas won't be loaded - we don't need the apps in this case
+    if ($store.getters['management/canList'](CATALOG.APP)) {
+      if (CspAdapterUtils.canPagination($store)) {
+        // Restrict the amount of apps we need to fetch
+        return $store.dispatch('management/findPage', {
+          type: CATALOG.APP,
+          opt:  { // Of type ActionFindPageArgs
+            pagination: new FilterArgs({
+              filters: PaginationParamFilter.createMultipleFields(CSP_ADAPTER_APPS.map(
+                (t) => new PaginationFilterField({
+                  field: 'metadata.name',
+                  value: t,
+                })
+              )),
+            })
+          }
+        });
+      }
+
+      return $store.dispatch('management/findAll', { type: CATALOG.APP });
+    }
+
+    return Promise.resolve([]);
+  }
+
+  static hasCspAdapter({ $store, apps }: { $store: VuexStore, apps: any[]}): Object {
+    // In theory this should contain the filtered apps when pagination is on, and all apps when off. Keep filtering though in both cases just in case
+    return apps?.find((a) => CSP_ADAPTER_APPS.includes(a.metadata?.name));
+  }
+}
+
+export default CspAdapterUtils;

package/utils/fleet.ts

@@ -1,3 +1,4 @@
+import { isEmpty, isEqual } from 'lodash';
 import {
   BundleDeploymentResource,
   BundleResourceKey,
@@ -5,9 +6,11 @@ import {
   BundleDeploymentStatus,
   Condition,
 } from '@shell/types/resources/fleet';
-import { mapStateToEnum, STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
-import { FLEET as FLEET_LABELS } from '@shell/config/labels-annotations';
+import { mapStateToEnum, STATES_ENUM, STATES } from '@shell/plugins/dashboard-store/resource-class';
+import { FLEET as FLEET_LABELS, CAPI } from '@shell/config/labels-annotations';
 import { NAME as EXPLORER_NAME } from '@shell/config/product/explorer';
+import { FleetDashboardState, FleetResourceState, Target, TargetMode } from '@shell/types/fleet';
+import { FLEET, VIRTUAL_HARVESTER_PROVIDER } from '@shell/config/types';
 
 interface Resource extends BundleDeploymentResource {
   state: string,
@@ -29,7 +32,139 @@ function conditionIsTrue(conditions: Condition[] | undefined, type: string): boo
   return !!conditions.find((c) => c.type === type && c.status.toLowerCase() === 'true');
 }
 
+class Application {
+  excludeHarvesterRule = {
+    clusterSelector: {
+      matchExpressions: [{
+        key:      CAPI.PROVIDER,
+        operator: 'NotIn',
+        values:   [
+          VIRTUAL_HARVESTER_PROVIDER
+        ],
+      }],
+    },
+  };
+
+  getTargetMode(targets: Target[], namespace: string): TargetMode {
+    if (namespace === 'fleet-local') {
+      return 'local';
+    }
+
+    if (!targets.length) {
+      return 'none';
+    }
+
+    let mode: TargetMode = 'all';
+
+    for (const target of targets) {
+      const {
+        clusterName,
+        clusterSelector,
+        clusterGroup,
+        clusterGroupSelector,
+      } = target;
+
+      if (clusterGroup || clusterGroupSelector) {
+        return 'advanced';
+      }
+
+      if (clusterName) {
+        mode = 'clusters';
+      }
+
+      if (!isEmpty(clusterSelector)) {
+        mode = 'clusters';
+      }
+    }
+
+    const normalized = [...targets].map((target) => {
+      delete target.name;
+
+      return target;
+    });
+
+    // Check if targets contains only harvester rule after name normalizing
+    if (isEqual(normalized, [this.excludeHarvesterRule])) {
+      mode = 'all';
+    }
+
+    return mode;
+  }
+}
+
 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:           'Pending',
+      color:           '#3d98d3',
+      icon:            'icon icon-warning',
+      stateBackground: 'bg-info'
+    },
+  ];
+
+  Application = new Application();
+
+  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 +261,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/object.js

@@ -527,3 +527,39 @@ export function mergeWithReplace(
     }
   });
 }
+/**
+ * Converts Object into a string of a format "key1, val1, key2, val2"
+ * @param {Object} input - KV object to convert
+ * @returns string
+ */
+export const convertKVToString = (input) => {
+  if (!input || typeof input !== 'object') return '';
+
+  return Object.entries(input)
+    .flatMap(([key, value]) => [key, String(value)])
+    .join(',');
+};
+
+/**
+ * Converts kv string into object
+ * @param {string} input - a string of a format "key1, val1, key2, val2"
+ * @returns
+ */
+export const convertStringToKV = ( input ) => {
+  if (!input?.trim()) return {};
+
+  const parts = input.split(',').map((part) => part.trim());
+  const result = {};
+
+  for (let i = 0; i < parts.length - 1; i += 2) {
+    const key = parts[i];
+    const value = parts[i + 1];
+
+    // Accept empty keys but ignore undefined values
+    if (typeof key === 'string') {
+      result[key] = value ?? '';
+    }
+  }
+
+  return result;
+};

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,
@@ -23,7 +23,7 @@ class PaginationUtils {
   /**
    * In places where we're using paginated features but not in a page... this is what the max results should be
    */
-  readonly defaultPageSize = 10000;
+  readonly defaultPageSize = 100000;
   /**
    * When a ns filter isn't one or more projects/namespaces... what are the valid values?
    *
@@ -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));
   }