@rancher/shell 3.0.2-rc.2 → 3.0.2-rc.3

package/utils/ingress.ts

@@ -0,0 +1,64 @@
+import { SECRET, SERVICE } from '@shell/config/types';
+import { SECRET_TYPES as TYPES } from '@shell/config/secret';
+import { VuexStore } from '@shell/types/store/vuex';
+
+/**
+ * Helper class for common functionality shared between the detail and edit ingress pages
+ *
+ * This could be an untyped mixin.. but this setups up us better for the future
+ */
+class IngressDetailEditHelper {
+  private $store: VuexStore;
+  private namespace: string;
+
+  constructor({
+    $store,
+    namespace,
+  }: {
+    $store: VuexStore
+    namespace: string,
+  }) {
+    this.$store = $store;
+    this.namespace = namespace;
+  }
+
+  /**
+   * Fetch services that will either be used to show
+   * - Create - the possible rule's target service
+   * - Edit - the selected and possible rule's target service
+   * - Detail - the selected rule's target service
+   */
+  async fetchServices(args?: { namespace: string}): Promise<any[]> {
+    return this.$store.dispatch('cluster/findAll', { type: SERVICE, opt: { namespaced: args?.namespace || this.namespace } });
+  }
+
+  /**
+   * Fetch secrets that will either be used to show
+   * - Create - the possible secrets to use as a certificates
+   * - Edit - the selected and possible secrets to use as a certificates
+   * - Detail - the selected secrets to use as certificates
+   */
+  async fetchSecrets(args?: { namespace: string}): Promise<any[]> {
+    return this.$store.dispatch('cluster/findAll', { type: SECRET, opt: { namespaced: args?.namespace || this.namespace } });
+  }
+
+  findAndMapCerts(secrets: any[]) {
+    return secrets
+      .filter((secret) => secret._type === TYPES.TLS)
+      .map((secret) => {
+        const { id } = secret;
+
+        return id.slice(id.indexOf('/') + 1);
+      });
+  }
+
+  findAndMapServiceTargets(services: any[]) {
+    return services.map((service) => ({
+      label: service.metadata.name,
+      value: service.metadata.name,
+      ports: service.spec.ports?.map((p: any) => p.port)
+    }));
+  }
+}
+
+export default IngressDetailEditHelper;

package/utils/uiplugins.ts

@@ -1,3 +1,4 @@
+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';
@@ -158,37 +159,56 @@ export async function installHelmChart(repo: any, chart: any, values: any = {},
 }
 
 /**
- * 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
+ * @param url Repository Url
  * @returns HelmRepository
  */
-export async function getHelmRepository(store: any, url: string, branch?: string): Promise<HelmRepository> {
+export async function getHelmRepositoryExact(store: any, url: string): Promise<HelmRepository> {
+  return await getHelmRepository(store, (repository: any) => {
+    const target = repository.spec?.gitRepo || repository.spec?.url;
+
+    return target === url;
+  });
+}
+
+/**
+ *
+ * @param store Vue store
+ * @param urlRegexes Regex to match a community repository
+ * @returns HelmRepository
+ */
+export async function getHelmRepositoryMatch(store: any, urlRegexes: string[]): Promise<HelmRepository> {
+  return await getHelmRepository(store, (repository: any) => {
+    const target = repository.spec?.gitBranch ? repository.spec?.gitRepo : repository.spec?.url;
+
+    return matchesSomeRegex(target, urlRegexes);
+  });
+}
+
+/**
+ *
+ * @param store Vue store
+ * @param matchFn Match function for repository's urls
+ * @returns HelmRepository
+ */
+async function getHelmRepository(store: any, matchFn: (repository: any) => boolean): 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;
-    });
+    return repos.find(matchFn);
   } 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
+ * @param url Repository Url
  */
-export async function refreshHelmRepository(store: any, gitRepo: string, gitBranch: string): Promise<void> {
-  const repository = await getHelmRepository(store, gitRepo, gitBranch);
+export async function refreshHelmRepository(store: any, url: string): Promise<void> {
+  const repository = await getHelmRepositoryExact(store, url);
 
   const now = (new Date()).toISOString().replace(/\.\d+Z$/, 'Z');
 
@@ -202,40 +222,32 @@ export async function refreshHelmRepository(store: any, gitRepo: string, gitBran
 }
 
 /**
- * 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
+ * @param name Repository name
+ * @param url Repository Url
+ * @param branch Repository Branch
+ * @returns HelmRepository
  */
-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);
+export async function createHelmRepository(store: any, name: string, url: string, branch?: string): Promise<HelmRepository> {
+  const data = {
+    type:     CATALOG.CLUSTER_REPO,
+    metadata: { name },
+    spec:     {} as any
+  };
 
-    helmRepo = await repo.save();
+  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);
+
+  const helmRepo = await repo.save();
+
   // Poll the repository until it says it has been downloaded
   let fetched = false;
   let tries = 0;
@@ -278,7 +290,7 @@ export async function ensureHelmRepository(store: any, url: string, name: string
  * Get the given Helm Chart from the specified Helm Repository
  *
  * @param store Vue store
- * @param repository Helm Repository
+ * @param repository Repository Url
  * @param chartName Helm Chart name
  * @returns Helm Chart
  */

package/utils/validators/cron-schedule.js

@@ -2,8 +2,13 @@ import cronstrue from 'cronstrue';
 
 export function cronSchedule(schedule = '', getters, errors) {
   try {
-    cronstrue.toString(schedule, { verbose: true });
+    cronScheduleRule.validation(schedule);
   } catch (e) {
-    errors.push(getters['i18n/t']('validation.invalidCron'));
+    errors.push(getters['i18n/t'](cronScheduleRule.message));
   }
 }
+
+export const cronScheduleRule = {
+  validation: (text) => cronstrue.toString(text, { verbose: true }),
+  message:    'validation.invalidCron'
+};

package/utils/validators/formRules/__tests__/index.test.ts

@@ -27,22 +27,6 @@ describe('formRules', () => {
     expect(formRuleResult).toStrictEqual(expectedResult);
   });
 
-  it('"cronSchedule" : returns undefined when valid cron string value supplied', () => {
-    const testValue = '0 * * * *';
-    const formRuleResult = formRules.cronSchedule(testValue);
-
-    expect(formRuleResult).toBeUndefined();
-  });
-
-  it('"cronSchedule" : returns the correct message when invalid cron string value supplied', () => {
-    // specific logic of what constitutes a cron string is in the "cronstrue" function in an external library and not tested here
-    const testValue = '0 * * **';
-    const formRuleResult = formRules.cronSchedule(testValue);
-    const expectedResult = JSON.stringify({ message: 'validation.invalidCron' });
-
-    expect(formRuleResult).toStrictEqual(expectedResult);
-  });
-
   it('"https" : returns undefined when valid https url value is supplied', () => {
     const testValue = 'https://url.com';
     const formRuleResult = formRules.https(testValue);
@@ -103,6 +87,45 @@ describe('formRules', () => {
     );
   });
 
+  describe('gitRepository', () => {
+    const message = JSON.stringify({ message: 'validation.git.repository' });
+    const testCases = [
+      // Valid HTTP(s)
+      ['https://github.com/rancher/dashboard.git', undefined],
+      ['http://github.com/rancher/dashboard.git', undefined],
+      ['https://github.com/rancher/dashboard', undefined],
+      ['https://github.com/rancher/dashboard/', undefined],
+
+      // Valid SSH
+      ['git@github.com:rancher/dashboard.git', undefined],
+      ['git@github.com:rancher/dashboard', undefined],
+      ['git@github.com:rancher/dashboard/', undefined],
+
+      // Not valid HTTP(s)
+      ['https://github.com/rancher/  dashboard.git', message],
+      ['http://github.com/rancher/  dashboard.git', message],
+      ['https://github.com/rancher/dashboard ', message],
+      ['foo://github.com/rancher/dashboard/', message],
+      ['github.com/rancher/dashboard/', message],
+
+      // Not valid SSH
+      ['git@github.com:rancher/  dashboard.git', message],
+      ['git@github.com:rancher/dashboard  ', message],
+      ['git@github.comrancher/dashboard', message],
+
+      [undefined, undefined]
+    ];
+
+    it.each(testCases)(
+      'should return undefined or correct message based on the provided Git url: %p',
+      (url, expected) => {
+        const formRuleResult = formRules.gitRepository(url);
+
+        expect(formRuleResult).toStrictEqual(expected);
+      }
+    );
+  });
+
   describe('alphanumeric', () => {
     const message = JSON.stringify({ message: 'validation.alphanumeric', key: 'testDisplayKey' });
     const testCases = [
@@ -1112,6 +1135,13 @@ describe('formRules', () => {
     expect(formRuleResult).toStrictEqual(expectedResult);
   });
 
+  /**
+   * Test all factory validators
+   * @param rule - the name of the factory validator
+   * @param argument - the value to validate
+   * @param correctValues - an array of values that should pass the validation
+   * @param wrongValues - an array of values that should fail the validation
+   */
   describe.each([
     ['minValue', 2, [3], [1]],
     ['maxValue', 256, [1], [300]],
@@ -1133,12 +1163,18 @@ describe('formRules', () => {
     });
   });
 
+  /**
+   * Test all standard validators
+   * @param rule - the name of the standard validator
+   * @param correctValues - an array of values that should pass the validation
+   * @param wrongValues - an array of values that should fail the validation
+   */
   describe.each([
     ['requiredInt', [2, 2.2], ['e']],
     ['isInteger', ['2', 2, 0], [2.2, 'e', '1.0']],
     ['isPositive', ['0', 1], [-1]],
     ['isOctal', ['0', 0, 10], ['01']],
-
+    ['cronSchedule', ['0 * * * *', '@daily'], ['0 * * **']],
   ])('given validator %p', (rule, correctValues, wrongValues) => {
     it.each(wrongValues as [])('should return error for value %p', (wrong) => {
       const formRuleResult = (formRules as any)[rule](wrong);

package/utils/validators/formRules/index.ts

@@ -4,14 +4,26 @@ import isEmpty from 'lodash/isEmpty';
 import has from 'lodash/has';
 import isUrl from 'is-url';
 // import uniq from 'lodash/uniq';
-import cronstrue from 'cronstrue';
 import { Translation } from '@shell/types/t';
 import { isHttps, isLocalhost, hasTrailingForwardSlash } from '@shell/utils/validators/setting';
+import { cronScheduleRule } from '@shell/utils/validators/cron-schedule';
 
 // import uniq from 'lodash/uniq';
-export type Validator<T = undefined | string> = (val: any, arg?: any) => T;
 
-export type ValidatorFactory = (arg1: any, arg2?: any) => Validator
+/**
+ * Fixed validation rule which require only the value to be evaluated
+ * @param value
+ * @returns { string | undefined }
+ */
+export type Validator<T = undefined | string> = (value: any, arg?: any) => T;
+
+/**
+ * Factory function which returns a validation rule
+ * @param arg Argument used as part of the validation rule process, not necessarily as parameter of the validation rule
+ * @param value Value to be evaluated
+ * @returns { Validator }
+ */
+export type ValidatorFactory = (arg: any, value?: any) => Validator
 
 type ServicePort = {
   name?: string,
@@ -131,9 +143,9 @@ export default function(t: Translation, { key = 'Value' }: ValidationOptions): {
 
   const cronSchedule: Validator = (val: string) => {
     try {
-      cronstrue.toString(val, { verbose: true });
+      cronScheduleRule.validation(val);
     } catch (e) {
-      return t('validation.invalidCron');
+      return t(cronScheduleRule.message);
     }
   };
 
@@ -145,6 +157,8 @@ export default function(t: Translation, { key = 'Value' }: ValidationOptions): {
 
   const url: Validator = (val: string) => val && !isUrl(val) ? t('validation.setting.serverUrl.url') : undefined;
 
+  const gitRepository: Validator = (val: string) => val && !/^((http|git|ssh|http(s)|file|\/?)|(git@[\w\.]+))(:(\/\/)?)([\w\.@\:\/\-]+)([\d\/\w.-]+?)(.git){0,1}(\/)?$/gm.test(val) ? t('validation.git.repository') : undefined;
+
   const alphanumeric: Validator = (val: string) => val && !/^[a-zA-Z0-9]+$/.test(val) ? t('validation.alphanumeric', { key }) : undefined;
 
   const interval: Validator = (val: string) => !/^\d+[hms]$/.test(val) ? t('validation.monitoring.route.interval', { key }) : undefined;
@@ -474,6 +488,7 @@ export default function(t: Translation, { key = 'Value' }: ValidationOptions): {
     dnsLabelRestricted,
     externalName,
     fileRequired,
+    gitRepository,
     groupsAreValid,
     hostname,
     imageUrl,

package/vue.config.js

@@ -323,7 +323,7 @@ const getVirtualModules = (dir, includePkg) => {
 
         // Package file must have rancher field to be a plugin
         if (includePkg(name) && library.rancher) {
-          reqs += `$plugin.initPlugin('${ name }', require(\'~/pkg/${ name }\')); `;
+          reqs += `$plugin.registerBuiltinExtension('${ name }', require(\'~/pkg/${ name }\')); `;
         }
       });
   }

package/components/RelatedWorkloadsTable.vue

@@ -1,50 +0,0 @@
-<script>
-import {
-  STATE, NAME, WORKLOAD_IMAGES, WORKLOAD_ENDPOINTS, TYPE, AGE
-} from '@shell/config/table-headers';
-import { WORKLOAD_TYPES } from '@shell/config/types';
-import ResourceTable from '@shell/components/ResourceTable';
-
-export default {
-  components: { ResourceTable },
-  props:      {
-    filter: {
-      type:     Function,
-      required: true
-    }
-  },
-  async fetch() {
-    // Enumerating instead of using Object.values() because it looks like we don't want to include replica sets for this.
-    const types = [
-      WORKLOAD_TYPES.DEPLOYMENT,
-      WORKLOAD_TYPES.CRON_JOB,
-      WORKLOAD_TYPES.DAEMON_SET,
-      WORKLOAD_TYPES.JOB,
-      WORKLOAD_TYPES.STATEFUL_SET
-    ];
-    const allWorkloadsNested = await Promise.all(types.map((type) => this.$store.dispatch('cluster/findAll', { type })));
-    const allWorkloads = allWorkloadsNested.flat();
-
-    this.relatedWorkloadRows = allWorkloads.filter(this.filter);
-  },
-  data() {
-    const relatedWorkloadHeaders = [STATE, NAME, WORKLOAD_IMAGES, WORKLOAD_ENDPOINTS, TYPE, AGE];
-
-    return {
-      relatedWorkloadRows: [],
-      relatedWorkloadHeaders,
-      schema:              this.$store.getters['cluster/schemaFor'](WORKLOAD_TYPES.DEPLOYMENT)
-    };
-  },
-};
-</script>
-
-<template>
-  <div>
-    <ResourceTable
-      :schema="schema"
-      :rows="relatedWorkloadRows"
-      :headers="relatedWorkloadHeaders"
-    />
-  </div>
-</template>