@rancher/shell 3.0.1-rc.3 → 3.0.1

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

@@ -38,5 +38,9 @@ export interface ActionFindPageArgs extends ActionCoreFindArgs {
    * The single namespace to filter by (used in url path, not part of pagination params)
    */
   namespaced?: string,
+  /**
+   * Result of request is transient and not persisted to store
+   */
+  transient?: boolean,
   hasManualRefresh?: boolean,
 }

package/types/store/pagination.types.ts

@@ -455,3 +455,16 @@ export interface StorePagination {
    */
   result: StorePaginationResult
 }
+
+/**
+ * The resource and context that the pagination request will be used
+ *
+ * Used to determine if the request is supported
+*/
+export interface PaginationResourceContext {
+  store: string,
+  resource?: {
+    id: string,
+    context?: string,
+  }
+}

package/types/store/vuex.d.ts

@@ -7,3 +7,11 @@
 export interface VuexStoreGetters {
   [name:string]: Function
 }
+
+export interface VuexStore {
+  getters: VuexStoreGetters,
+  dispatch: any,
+
+  // When we have exact properties above we can remove below
+  [name:string]: any
+}

package/types/vue-shim.d.ts

@@ -1,36 +1,13 @@
-// eslint-disable-next-line no-unused-vars
-import Vue, { ComponentCustomProperties } from 'vue';
-declare module '*.vue' {
-  export default Vue;
-}
+/* eslint-disable */
+import type { DefineComponent } from 'vue'
+import { ComponentCustomProperties } from 'vue';
 
-// This is required to keep typescript from complaining. It is required for
-// our i18n plugin. For more info see:
-// https://v2.vuejs.org/v2/guide/typescript.html?redirect=true#Augmenting-Types-for-Use-with-Plugins
-declare module 'vue/types/vue' {
-  // eslint-disable-next-line no-unused-vars
-  interface Vue {
-      /**
-       * Lookup a given string with the given arguments
-       * @param raw if set, do not do HTML escaping.
-       */
-      t: {
-        (key: string, args?: Record<string, any>, raw?: boolean): string;
-        (options: { k: string; raw?: boolean; tag?: string | Record<string, any>; escapehtml?: boolean }): string;
-      };
-  }
+declare module '*.vue' {
+  const component: DefineComponent<{}, {}, any>
+  export default component
 }
 
 declare module '@vue/runtime-core' {
-  // eslint-disable-next-line no-unused-vars
-  interface Vue {
-    t: {
-      (key: string, args?: Record<string, any>, raw?: boolean): string;
-      (options: { k: string; raw?: boolean; tag?: string | Record<string, any>; escapehtml?: boolean }): string;
-    }
-  }
-
-  // eslint-disable-next-line no-unused-vars
   interface ComponentCustomProperties {
     t: {
       (key: string, args?: Record<string, any>, raw?: boolean): string;
@@ -47,5 +24,3 @@ declare module '@vue/runtime-core' {
     }
   }
 }
-
-declare module 'js-yaml';

package/utils/cluster.js

@@ -3,8 +3,99 @@ import { camelToTitle } from '@shell/utils/string';
 import { CAPI } from '@shell/config/labels-annotations';
 import { MANAGEMENT, VIRTUAL_HARVESTER_PROVIDER } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
+import { PaginationFilterField, PaginationParamFilter } from '@shell/types/store/pagination.types';
 
-// Filter out any clusters that are not Kubernetes Clusters
+/**
+ * Combination of paginationFilterHiddenLocalCluster and paginationFilterOnlyKubernetesClusters
+ *
+ * @param {*} store
+ * @returns PaginationParam[]
+ */
+export function paginationFilterClusters(store, filterMgmtCluster = true) {
+  const paginationRequestFilters = [];
+
+  // Commenting out for the moment. This is broken for non-paginated world
+  // filterOnlyKubernetesClusters expects a mgmt cluster, however in the home page it's given a prov cluster
+  // note - filterHiddenLocalCluster works because it uses model isLocal which is on both cluster types
+  // const pFilterOnlyKubernetesClusters = paginationFilterOnlyKubernetesClusters(store);
+  // if (pFilterOnlyKubernetesClusters) {
+  //   paginationRequestFilters.push(pFilterOnlyKubernetesClusters);
+  // }
+  const pFilterHiddenLocalCluster = paginationFilterHiddenLocalCluster(store, filterMgmtCluster);
+
+  if (pFilterHiddenLocalCluster) {
+    paginationRequestFilters.push(pFilterHiddenLocalCluster);
+  }
+
+  return paginationRequestFilters;
+}
+
+/**
+ * The vai backed api's `filter` equivalent of `filterHiddenLocalCluster`
+ *
+ * @export
+ * @param {*} store
+ * @returns PaginationParam | null
+ */
+export function paginationFilterHiddenLocalCluster(store, filterMgmtCluster = true) {
+  const hideLocalSetting = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.HIDE_LOCAL_CLUSTER) || {};
+  const value = hideLocalSetting.value || hideLocalSetting.default || 'false';
+  const hideLocal = value === 'true';
+
+  if (!hideLocal) {
+    return null;
+  }
+
+  const filter = filterMgmtCluster ? [
+    new PaginationFilterField({
+      field: `spec.internal`,
+      value: false,
+    })
+  ] : [
+    new PaginationFilterField({
+      field:  `id`,
+      value:  'fleet-local/local',
+      exact:  true,
+      equals: false,
+    })
+  ];
+
+  return PaginationParamFilter.createMultipleFields(filter);
+}
+
+/**
+ * The vai backed api's `filter` equivalent of `filterOnlyKubernetesClusters`
+ *
+ * @export
+ * @param {*} store
+ * @returns PaginationParam | null
+ */
+export function paginationFilterOnlyKubernetesClusters(store) {
+  const openHarvesterContainerWorkload = store.getters['features/get']('harvester-baremetal-container-workload');
+
+  if (!openHarvesterContainerWorkload) {
+    return null;
+  }
+
+  return PaginationParamFilter.createMultipleFields([
+    new PaginationFilterField({
+      field:  `metadata.labels."${ CAPI.PROVIDER }"`, // Pending API Support - https://github.com/rancher/rancher/issues/48256
+      equals: false,
+      value:  VIRTUAL_HARVESTER_PROVIDER,
+      exact:  true
+    }),
+    new PaginationFilterField({
+      field:  `status.provider`, // Pending API Support - https://github.com/rancher/rancher/issues/48256
+      equals: false,
+      value:  VIRTUAL_HARVESTER_PROVIDER,
+      exact:  true
+    }),
+  ]);
+}
+
+/**
+ * Filter out any clusters that are not Kubernetes Clusters
+ **/
 export function filterOnlyKubernetesClusters(mgmtClusters, store) {
   const openHarvesterContainerWorkload = store.getters['features/get']('harvester-baremetal-container-workload');
 

package/utils/pagination-utils.ts

@@ -9,7 +9,7 @@ import {
   NAMESPACE_FILTER_NS_FULL_PREFIX,
   NAMESPACE_FILTER_P_FULL_PREFIX,
 } from '@shell/utils/namespace-filter';
-import { PaginationArgs, PaginationParam, PaginationSort } from '@shell/types/store/pagination.types';
+import { PaginationArgs, PaginationResourceContext, PaginationParam, PaginationSort } from '@shell/types/store/pagination.types';
 import { sameArrayObjects } from '@shell/utils/array';
 import { isEqual } from '@shell/utils/object';
 import { STEVE_CACHE } from '@shell/store/features';
@@ -40,12 +40,7 @@ class PaginationUtils {
   /**
    * Is pagination enabled at a global level or for a specific resource
    */
-  isEnabled({ rootGetters }: any, enabledFor: {
-    store: string,
-    resource?: {
-      id: string,
-    }
-  }) {
+  isEnabled({ rootGetters }: any, enabledFor: PaginationResourceContext) {
     // Cache must be enabled to support pagination api
     if (!this.isSteveCacheEnabled({ rootGetters })) {
       return false;
@@ -95,7 +90,21 @@ class PaginationUtils {
       return true;
     }
 
-    if (storeSettings.resources.enableSome.enabled.includes(enabledFor.resource.id)) {
+    if (storeSettings.resources.enableSome.enabled.find((setting) => {
+      if (typeof setting === 'string') {
+        return setting === enabledFor.resource?.id;
+      }
+
+      if (setting.resource === enabledFor.resource?.id) {
+        if (!!setting.context) {
+          return enabledFor.resource?.context ? setting.context.includes(enabledFor.resource.context) : false;
+        }
+
+        return true;
+      }
+
+      return false;
+    })) {
       return true;
     }
 

package/utils/pagination-wrapper.ts

@@ -0,0 +1,70 @@
+import paginationUtils from '@shell/utils/pagination-utils';
+import { PaginationArgs, PaginationResourceContext, StorePagination } from '@shell/types/store/pagination.types';
+import { VuexStore } from '@shell/types/store/vuex';
+import { ActionFindPageArgs } from '@shell/types/store/dashboard-store.types';
+
+interface Result<T> {
+  data: Array<T>
+  pagination: StorePagination
+}
+
+/**
+ * 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 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
+ */
+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;
+    }
+
+    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
+      };
+
+      const out: Result<T> = await this.$store.dispatch(`${ this.enabledFor.store }/findPage`, { opt, type: this.enabledFor.resource?.id });
+
+      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]);
+        }
+      }
+
+      return out;
+    }
+}
+
+export default PaginationWrapper;

package/utils/uiplugins.ts

@@ -0,0 +1,307 @@
+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';
+
+const MAX_RETRIES = 10;
+const RETRY_WAIT = 2500;
+
+type Action = 'install' | 'upgrade';
+export type HelmRepository = any;
+export type HelmChart = any;
+
+/**
+ *
+ * @param store Vue store
+ * @param chartName The chartName
+ * @param rancherVersion Rancher version
+ * @param kubeVersion K8s version
+ * @param opt Store options
+ * @returns The latest compatible version of the extension; return null If there are no compatible versions.
+ */
+export async function getLatestExtensionVersion(
+  store: any,
+  chartName: string,
+  rancherVersion: string,
+  kubeVersion: string,
+  opt = { reset: true, force: true },
+) {
+  await store.dispatch('catalog/load', opt);
+
+  const chart = store.getters['catalog/chart']({ chartName });
+
+  const versions = chart?.versions || [];
+
+  const compatibleVersions = versions.filter((version: any) => isSupportedChartVersion({
+    version, rancherVersion, kubeVersion
+  }));
+
+  return compatibleVersions[0]?.version;
+}
+
+/**
+ * Wait for a given UI Extension to be available
+ *
+ * @param store Vue store
+ * @param name Name of the extension
+ * @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> {
+  let tries = 0;
+
+  while (true) {
+    try {
+      const res = await store.dispatch('management/request', {
+        url:                  `${ UI_PLUGIN_BASE_URL }`,
+        method:               'GET',
+        headers:              { accept: 'application/json' },
+        redirectUnauthorized: false,
+      });
+
+      const entries = res.entries || res.Entries || {};
+      const extension = entries[name];
+
+      if (extension) {
+        return extension;
+      }
+    } catch (e) {
+    }
+
+    tries++;
+
+    if (tries > MAX_RETRIES) {
+      return null;
+    }
+
+    await new Promise((resolve) => setTimeout(resolve, RETRY_WAIT));
+  }
+}
+
+/**
+ * Wait for a given UI Extension package to be available
+ *
+ * @param store Vue store
+ * @param extension Extension object
+ * @returns true when available, false if timed out waiting for it to be available
+ */
+export async function waitForUIPackage(store: any, extension: any): Promise<boolean> {
+  let tries = 0;
+
+  const { name, version } = extension;
+
+  while (true) {
+    try {
+      await store.dispatch('management/request', {
+        url:                  `${ UI_PLUGIN_BASE_URL }/${ name }/${ version }/plugin/${ name }-${ version }.umd.min.js`,
+        method:               'GET',
+        headers:              { accept: 'application/json' },
+        redirectUnauthorized: false,
+      });
+
+      return true;
+    } catch (error) {
+    }
+
+    tries++;
+
+    if (tries > MAX_RETRIES) {
+      return false;
+    }
+
+    await new Promise((resolve) => setTimeout(resolve, RETRY_WAIT));
+  }
+}
+
+/**
+ * Install Helm Chart
+ *
+ * Note: This should really be provided via the shell rather than copied here
+ */
+export async function installHelmChart(repo: any, chart: any, values: any = {}, namespace = 'default', action: Action = 'install') {
+  /*
+    Refer to the developer docs at docs/developer/helm-chart-apps.md
+    for details on what values are injected and where they come from.
+  */
+  // TODO: This is needed in order to support system registry for air-gapped environments
+  // this.addGlobalValuesTo(values);
+
+  const chartInstall = {
+    chartName:   chart.name,
+    version:     chart.version,
+    releaseName: chart.name,
+    description: chart.name,
+    annotations: {
+      [CATALOG_ANNOTATIONS.SOURCE_REPO_TYPE]: chart.repoType,
+      [CATALOG_ANNOTATIONS.SOURCE_REPO_NAME]: chart.repoName
+    },
+    values,
+  };
+
+  /*
+    Configure Helm CLI options for doing the install or
+    upgrade operation.
+  */
+  const installRequest = {
+    charts:                   [chartInstall],
+    noHooks:                  false,
+    timeout:                  '1000s',
+    wait:                     true,
+    namespace,
+    projectId:                '',
+    disableOpenAPIValidation: false,
+    skipCRDs:                 false,
+  };
+
+  // Install the Chart
+  const res = await repo.doAction(action, installRequest);
+
+  return res;
+}
+
+/**
+ * Get the Helm repository object
+ *
+ * @param store Vue store
+ * @param url The url of the Helm repository
+ * @param branch The branch of the Helm repository
+ * @returns HelmRepository
+ */
+export async function getHelmRepository(store: any, url: string, branch?: string): Promise<HelmRepository> {
+  if (store.getters['management/schemaFor'](CATALOG.CLUSTER_REPO)) {
+    const repos = await store.dispatch('management/findAll', { type: CATALOG.CLUSTER_REPO, opt: { force: true, watch: false } });
+
+    return repos.find((r: any) => {
+      const target = branch ? r.spec?.gitRepo : r.spec?.url ;
+
+      return target === url;
+    });
+  } else {
+    throw new Error('No permissions');
+  }
+}
+
+/**
+ * Refresh the Helm repository
+ * Ensures that we find the latest extension versions
+ *
+ * @param store Vue store
+ * @param gitRepo Extension Repository url
+ * @param gitBranch Extension Repository branch
+ */
+export async function refreshHelmRepository(store: any, gitRepo: string, gitBranch: string): Promise<void> {
+  const repository = await getHelmRepository(store, gitRepo, gitBranch);
+
+  const now = (new Date()).toISOString().replace(/\.\d+Z$/, 'Z');
+
+  repository.spec.forceUpdate = now;
+
+  await repository.save();
+
+  await repository.waitForState('active', 10000, 1000);
+
+  await new Promise((resolve) => setTimeout(resolve, 2000));
+}
+
+/**
+ * Ensure the required Helm Repository exits, if it does not, add it with the specified name
+ *
+ * Wait until the newly added repository has been downloaded
+ *
+ * @param store Vue store
+ * @param url The url of the Helm repository
+ * @param name The name of the cluster repository
+ * @param branch The branch of the Helm repository
+ * @returns HelmRepository object
+ */
+export async function ensureHelmRepository(store: any, url: string, name: string, branch?: string): Promise<HelmRepository> {
+  let helmRepo = await getHelmRepository(store, url, branch);
+
+  // Add the Helm repository, if it is not there
+  if (!helmRepo) {
+    const data = {
+      type:     CATALOG.CLUSTER_REPO,
+      metadata: { name },
+      spec:     {} as any
+    };
+
+    if (branch) {
+      data.spec.gitBranch = branch;
+      data.spec.gitRepo = url;
+    } else {
+      data.spec.url = url;
+    }
+
+    // Create a model for the new repository and save it
+    const repo = await store.dispatch('management/create', data);
+
+    helmRepo = await repo.save();
+  }
+
+  // Poll the repository until it says it has been downloaded
+  let fetched = false;
+  let tries = 0;
+
+  while (!fetched) {
+    const repo = await store.dispatch('management/find', {
+      type: CATALOG.CLUSTER_REPO,
+      id:   helmRepo.id, // Get the ID from the Helm Repository
+      opt:  { force: true, watch: false }
+    });
+
+    tries++;
+
+    const downloaded = repo.status.conditions.find((s: any) => s.type === 'Downloaded');
+
+    if (downloaded) {
+      if (downloaded.status === 'True') {
+        fetched = true;
+      }
+    }
+
+    if (!fetched) {
+      tries++;
+
+      if (tries > MAX_RETRIES) {
+        throw new Error('Failed to add Helm Chart Repository');
+      }
+
+      await new Promise((resolve) => setTimeout(resolve, RETRY_WAIT));
+    }
+
+    fetched = true;
+  }
+
+  // Return the Helm Repository
+  return helmRepo;
+}
+
+/**
+ * Get the given Helm Chart from the specified Helm Repository
+ *
+ * @param store Vue store
+ * @param repository Helm Repository
+ * @param chartName Helm Chart name
+ * @returns Helm Chart
+ */
+export async function getHelmChart(store: any, repository: any, chartName: string): Promise<HelmChart | null> {
+  let tries = 0;
+
+  while (true) {
+    try {
+      const versionInfo = await store.dispatch('management/request', {
+        method: 'GET',
+        url:    `${ repository?.links?.info }&chartName=${ chartName }`,
+      });
+
+      return versionInfo.chart;
+    } catch (error) {
+    }
+
+    tries++;
+
+    if (tries > MAX_RETRIES) {
+      return null;
+    }
+
+    await new Promise((resolve) => setTimeout(resolve, RETRY_WAIT));
+  }
+}