@rancher/shell 1.2.3 → 2.0.1

package/core/types-provisioning.ts

@@ -60,6 +60,7 @@ export interface IClusterProvisioner {
 
   /**
    * Unique ID of the Cluster Provisioner
+   * If this overlaps with the name of an existing provisioner (seen in the type query param while creating a cluster) this provisioner will overwrite the built-in ui
    */
   id: string;
 
@@ -115,6 +116,12 @@ export interface IClusterProvisioner {
    */
   tag?: string;
 
+  /**
+   * Also show the provider card in the cluster importing flow
+   * If not set, the card will only be shown in the cluster creation page
+   */
+  showImport?: boolean
+
   /* --------------------------------------------------------------------------------------
    * Custer Details View
    * --------------------------------------------------------------------------------------- */

package/creators/app/app.package.json

@@ -8,6 +8,7 @@
   "dependencies": {},
   "resolutions": {
     "**/webpack": "4",
-    "@types/node": "^16"
+    "@types/node": "^16",
+    "glob": "7.2.3"
   }  
 }

package/creators/app/files/.eslintignore

@@ -7,12 +7,10 @@ node_modules/
 .env
 .cache
 .next
-.nuxt
 dist
 dist-pkg
 .DS_Store
 dynamic-importer.js
 ksconfig.json
-nuxt.config.js
 shell/utils/dynamic-importer.js
 shell/assets/fonts

package/creators/app/files/.gitlab-ci.yml

@@ -0,0 +1,14 @@
+image: registry.suse.com/bci/bci-base:latest
+
+stages:
+  - check_version
+  - build_catalog
+
+variables:
+  REGISTRY: $CI_REGISTRY
+  REGISTRY_USER: $CI_REGISTRY_USER
+  REGISTRY_PASSWORD: $CI_REGISTRY_PASSWORD
+  IMAGE_NAMESPACE: $CI_PROJECT_NAMESPACE/$CI_PROJECT_NAME
+
+include:
+  - remote: 'https://raw.githubusercontent.com/rancher/dashboard/master/shell/scripts/.gitlab/workflows/build-extension-catalog.gitlab-ci.yml'

package/creators/app/files/.vscode/settings.json

@@ -8,7 +8,6 @@
     ".eslintignore": true,
     ".eslintrc.js": true,
     ".gitignore": true,
-    ".nuxt*": true,
     ".nyc_output": true,
     ".vscode": true,
     "LICENSE": true,

package/creators/app/init

@@ -34,6 +34,25 @@ if (args.length === 3) {
   fs.ensureDirSync(appFolder);
 }
 
+let addGitlabWorkflow = false;
+
+// Check for Gitlab integration option
+if ( args.length > 3 ) {
+  for (let i = 3; i < args.length; i++) {
+    switch (args[i]) {
+    case '-l':
+      addGitlabWorkflow = true;
+      break;
+    default:
+      break;
+    }
+  }
+}
+
+if ( addGitlabWorkflow ) {
+  files.push('.gitlab-ci.yml');
+}
+
 // Check that there is a package file
 
 let setName = false;

package/creators/pkg/files/.github/workflows/build-extension-catalog.yml

@@ -2,12 +2,8 @@ name: Build and Release Extension Catalog
 
 on:
   workflow_dispatch:
-  push:
-    branches:
-      - main
-  pull_request:
-    branches:
-      - main
+  release:
+    types: [released]
 
 defaults:
   run:

package/creators/pkg/files/.github/workflows/build-extension-charts.yml

@@ -2,12 +2,8 @@ name: Build and Release Extension Charts
 
 on:
   workflow_dispatch:
-  push:
-    branches:
-      - main
-  pull_request:
-    branches:
-      - main
+  release:
+    types: [released]
 
 defaults:
   run:

package/creators/pkg/init

@@ -31,6 +31,8 @@ const typeFolders = [
   'detail'
 ];
 
+const shellPkgPath = 'node_modules/@rancher/shell';
+
 console.log('');
 console.log('Creating Skeleton UI Package');
 
@@ -46,6 +48,7 @@ const pkgFolder = path.join(folder, 'pkg', name);
 
 let addTypeFolders = false;
 let addWorkflowFolder = false;
+let ignoreShellPkgPathCheck = false;
 
 if (args.length > 3) {
   for (let i = 3; i < args.length; i++) {
@@ -56,12 +59,22 @@ if (args.length > 3) {
     case '-w':
       addWorkflowFolder = true;
       break;
+    case '-i':
+    ignoreShellPkgPathCheck = true;
+      break;
     default:
       break;
     }
   }
 }
 
+
+if (!ignoreShellPkgPathCheck && !fs.existsSync(path.join(pkgFolder, `../../${ shellPkgPath }/package.json`))) {
+  console.log('');
+  console.log('@rancher/shell not found in node_modules! Please do "yarn install" and make sure you run this command from the base folder of your app');
+  process.exit(1);
+}
+
 const isNodeModulesShell = !fs.existsSync(path.join(folder, 'shell'));
 
 if (!isNodeModulesShell) {
@@ -131,6 +144,25 @@ function fetchLatestVersion() {
           console.log(`  Adding rancher-version annotation '>= ${ release.tag_name }' to package.json`);
 
           pkg.rancher = { annotations: { 'catalog.cattle.io/rancher-version': `>= ${ release.tag_name }` } };
+
+          // read shell version from node_modules/@rancher/shell/package.json
+          const shellPkgRawData = fs.readFileSync(path.join(pkgFolder, `../../${ shellPkgPath }/package.json`));
+          const shellPkg = JSON.parse(shellPkgRawData);
+          const latestShellVersion = shellPkg.version || null;
+
+          if (!latestShellVersion) {
+            console.log('Could not get a shell version from node_modules/@rancher/shell/package.json in app');
+          } else {
+            const splitShellVersion = latestShellVersion.split('.');
+            const majorVersion = splitShellVersion[0];
+            const minorVersion = splitShellVersion[1];
+            const parsedShellVersion = `${majorVersion}.${minorVersion}.0`;
+            
+            console.log(`  Adding catalog.cattle.io/ui-extensions-version '>= ${parsedShellVersion }' to package.json`);
+            
+            pkg.rancher.annotations['catalog.cattle.io/ui-extensions-version'] = `>= ${ parsedShellVersion }`;
+          }
+
           writePackageJson();
         }
       } catch (e) {

package/detail/__tests__/provisioning.cattle.io.cluster.test.ts

@@ -0,0 +1,119 @@
+import { shallowMount } from '@vue/test-utils';
+import ProvisioningCattleIoCluster from '@shell/detail/provisioning.cattle.io.cluster.vue';
+
+jest.mock('@shell/utils/clipboard', () => {
+  return { copyTextToClipboard: jest.fn(() => Promise.resolve({})) };
+});
+
+describe('view: provisioning.cattle.io.cluster', () => {
+  const mockStore = {
+    getters: {
+      'management/canList':      () => true,
+      'management/schemaFor':    jest.fn(),
+      'i18n/t':                  (text: string) => text,
+      t:                         (text: string) => text,
+      currentStore:              () => 'current_store',
+      'current_store/schemaFor': jest.fn(),
+      'current_store/all':       jest.fn(),
+      workspace:                 jest.fn(),
+    },
+  };
+
+  const mocks = {
+    $store:      mockStore,
+    $fetchState: { pending: false },
+    $route:      {
+      query: { AS: '' },
+      name:  {
+        endsWith: () => {
+          return false;
+        },
+      },
+    },
+  };
+
+  describe('registration tab visibility', () => {
+    it('a hosted Kubernetes Provider with a private endpoint (network config) and cluster not ready should SHOW the registration tab', async() => {
+      const value = {
+        isHostedKubernetesProvider: true,
+        isPrivateHostedProvider:    true,
+        mgmt:                       {
+          hasLink: () => jest.fn(),
+          linkFor: () => '',
+          isReady: false
+        }
+      };
+
+      const wrapper = shallowMount(ProvisioningCattleIoCluster, {
+        mocks,
+        propsData: { value },
+      });
+
+      await wrapper.setData({ clusterToken: {} });
+
+      expect(wrapper.vm.showRegistration).toStrictEqual(true);
+    });
+
+    it('a hosted Kubernetes Provider WITHOUT a private endpoint (network config) and cluster not ready should NOT SHOW the registration tab', async() => {
+      const value = {
+        isHostedKubernetesProvider: true,
+        mgmt:                       {
+          hasLink: () => jest.fn(),
+          linkFor: () => '',
+          isReady: false
+        }
+      };
+
+      const wrapper = shallowMount(ProvisioningCattleIoCluster, {
+        mocks,
+        propsData: { value },
+      });
+
+      await wrapper.setData({ clusterToken: {} });
+
+      expect(wrapper.vm.showRegistration).toStrictEqual(false);
+    });
+
+    it('should SHOW if custom/imported cluster and the cluster is active', async() => {
+      const value = {
+        isCustom:   true,
+        isImported: true,
+        mgmt:       {
+          hasLink: () => jest.fn(),
+          linkFor: () => '',
+          isReady: true
+        }
+      };
+
+      const wrapper = shallowMount(ProvisioningCattleIoCluster, {
+        mocks,
+        propsData: { value },
+      });
+
+      await wrapper.setData({ clusterToken: {} });
+
+      expect(wrapper.vm.showRegistration).toStrictEqual(true);
+    });
+
+    it('should NOT show if imported cluster and the cluster is active', async() => {
+      const value = {
+        isCustom:   false,
+        isImported: true,
+        mgmt:       {
+          hasLink: () => jest.fn(),
+          linkFor: () => '',
+          isReady: true
+        }
+      };
+
+      const wrapper = shallowMount(ProvisioningCattleIoCluster, {
+        mocks,
+        propsData: { value },
+      });
+
+      await wrapper.setData({ clusterToken: {} });
+
+      expect(wrapper.vm.showRegistration).toStrictEqual(false);
+    });
+  });
+});

package/detail/__tests__/service.test.ts

@@ -0,0 +1,62 @@
+import service from '@shell/detail/service.vue';
+import { shallowMount } from '@vue/test-utils';
+
+describe('view: service', () => {
+  const mockStore = {
+    getters: {
+      'cluster/schemaFor':   () => {},
+      'type-map/headersFor': jest.fn(),
+      'i18n/t':              (text: string) => text,
+    },
+  };
+
+  const mocks = { $store: mockStore };
+
+  it('should return default empty array of ports if the ports are not configured', () => {
+    const wrapper = shallowMount(service, {
+      mocks,
+      propsData: {
+        value: {
+          spec: {}, metadata: {}, pods: []
+        }
+      },
+    });
+
+    expect(wrapper.vm.ports).toStrictEqual([]);
+  });
+
+  it('should return empty array of ports if ports are set to empty array', () => {
+    const wrapper = shallowMount(service, {
+      mocks,
+      propsData: {
+        value: {
+          spec: { ports: [] }, metadata: {}, pods: []
+        }
+      },
+    });
+
+    expect(wrapper.vm.ports).toStrictEqual([]);
+  });
+
+  it('should return the correct array of ports if the ports are configured', () => {
+    const ports = [
+      {
+        name: 'test1', port: 80, protocol: 'TCP', targetPort: 80
+      },
+      {
+        name: 'test2', port: 81, protocol: 'TCP', targetPort: 81
+      }
+    ];
+
+    const wrapper = shallowMount(service, {
+      mocks,
+      propsData: {
+        value: {
+          spec: { ports }, metadata: {}, pods: []
+        }
+      },
+    });
+
+    expect(wrapper.vm.ports).toStrictEqual(ports.map((p) => ({ ...p, publicPorts: [] })));
+  });
+});

package/detail/catalog.cattle.io.app.vue

@@ -30,7 +30,7 @@ export default {
   },
 
   async fetch() {
-    await this.$store.dispatch('catalog/load', { force: true, reset: true });
+    await this.$store.dispatch('catalog/load');
 
     this.allOperations = await this.$store.dispatch('cluster/findAll', { type: CATALOG.OPERATION });
   },

package/detail/cis.cattle.io.clusterscan.vue

@@ -10,6 +10,8 @@ import { escapeHtml, randomStr } from '@shell/utils/string';
 import { CIS } from '@shell/config/types';
 import { STATE } from '@shell/config/table-headers';
 import { get } from '@shell/utils/object';
+import { allHash } from '@shell/utils/promise';
+import { fetchSpecsScheduledScanConfig } from '@shell/models/cis.cattle.io.clusterscan';
 
 export default {
   components: {
@@ -30,7 +32,16 @@ export default {
   },
 
   async fetch() {
-    this.clusterReports = await this.value.getReports();
+    const inStore = this.$store.getters['currentProduct'].inStore;
+    const schema = this.$store.getters[`${ inStore }/schemaFor`](this.value);
+
+    const hash = await allHash({
+      clusterReports:         this.value.getReports(),
+      // Ensure the clusterscan model has everything it needs
+      hasScheduledScanConfig: fetchSpecsScheduledScanConfig(schema),
+    });
+
+    this.clusterReports = hash.clusterReports;
   },
 
   data() {
@@ -261,12 +272,12 @@ export default {
           v-if="item.component"
           :value="item.value"
         />
-        <nuxt-link
+        <router-link
           v-else-if="item.to"
           :to="item.to"
         >
           {{ item.value }}
-        </nuxt-link>
+        </router-link>
         <span v-else>{{ item.value }}</span>
       </div>
     </div>

package/detail/fleet.cattle.io.bundle.vue

@@ -38,7 +38,7 @@ export default {
       if (this.hasRepoLabel) {
         const bundleResourceIds = this.bundleResourceIds;
 
-        return this.repo?.status?.resources.filter((resource) => {
+        return this.repo?.status?.resources?.filter((resource) => {
           return bundleResourceIds.includes(resource.name);
         });
       } else if (this.value?.spec?.resources?.length) {

package/detail/fleet.cattle.io.cluster.vue

@@ -8,7 +8,7 @@ import { MANAGEMENT, FLEET } from '@shell/config/types';
 import { FLEET as FLEET_LABELS } from '@shell/config/labels-annotations';
 
 export default {
-  name: 'DetailCluster',
+  name: 'FleetDetailCluster',
 
   components: {
     Loading,
@@ -36,6 +36,8 @@ export default {
     this.allRepos = await this.$store.dispatch('management/findAll', { type: FLEET.GIT_REPO });
 
     await this.$store.dispatch('management/findAll', { type: FLEET.WORKSPACE });
+
+    await this.$store.dispatch('management/findAll', { type: FLEET.BUNDLE_DEPLOYMENT });
   },
 
   data() {
@@ -43,6 +45,13 @@ export default {
   },
 
   computed: {
+    allBundleDeployments() {
+      return this.value.bundleDeployments;
+    },
+    clusterId() {
+      return this.value?.metadata?.labels[FLEET_LABELS.CLUSTER_NAME];
+    },
+
     repos() {
       return this.allRepos.filter((x) => {
         return x.targetClusters.includes(this.value);
@@ -76,6 +85,7 @@ export default {
         :weight="19"
       >
         <FleetRepos
+          :clusterId="clusterId"
           :rows="repos"
           :schema="repoSchema"
           :paging="true"

package/detail/fleet.cattle.io.gitrepo.vue

@@ -1,4 +1,5 @@
 <script>
+import Loading from '@shell/components/Loading';
 import ResourceTabs from '@shell/components/form/ResourceTabs';
 import FleetSummary from '@shell/components/fleet/FleetSummary';
 import { Banner } from '@components/Banner';
@@ -14,6 +15,7 @@ export default {
   name: 'DetailGitRepo',
 
   components: {
+    Loading,
     FleetResources,
     FleetSummary,
     Banner,
@@ -31,21 +33,22 @@ export default {
 
   data() {
     return {
-      allFleet:             [],
+      allFleetClusters:     [],
       allBundles:           [],
       allBundleDeployments: [],
     };
   },
-
   computed: {
-
     gitRepoHasClusters() {
-      return this.value.status.desiredReadyClusters;
+      return this.value?.clusterResourceStatus?.length;
+    },
+    clusterSchema() {
+      return this.$store.getters['management/schemaFor'](FLEET.CLUSTER);
     },
     harvesterClusters() {
       const harvester = {};
 
-      this.allFleet.forEach((c) => {
+      this.allFleetClusters.forEach((c) => {
         if (isHarvesterCluster(c)) {
           harvester[c.metadata.name] = c;
         }
@@ -53,7 +56,6 @@ export default {
 
       return harvester;
     },
-
     bundleCounts() {
       return resourceCounts(this.$store, FLEET.BUNDLE);
     },
@@ -86,7 +88,7 @@ export default {
         type:        FLEET.BUNDLE_DEPLOYMENT
       },
 
-      allFleet: {
+      allFleetClusters: {
         inStoreType: 'management',
         type:        FLEET.CLUSTER
       },
@@ -98,14 +100,18 @@ export default {
 
     this.allBundleDeployments = allDispatches.allBundleDeployments || [];
     this.allBundles = allDispatches.allBundles || [];
-    this.allFleet = allDispatches.allFleet || [];
+    this.allFleetClusters = allDispatches.allFleetClusters || [];
   },
 
 };
 </script>
 
 <template>
-  <div class="mt-20">
+  <Loading v-if="$fetchState.pending" />
+  <div
+    v-else
+    class="mt-20"
+  >
     <FleetSummary
       v-if="gitRepoHasClusters"
       :value="value"

package/detail/namespace.vue

@@ -245,12 +245,12 @@ export default {
         >
           <template #col:type="{row}">
             <td>
-              <n-link
+              <router-link
                 v-if="typeListLocation(row.schema)"
                 :to="typeListLocation(row.schema)"
               >
                 {{ row.schema.pluralName }}
-              </n-link>
+              </router-link>
               <span v-else>{{ row.schema.pluralName }}</span>
             </td>
           </template>

package/detail/networking.k8s.io.ingress.vue

@@ -6,6 +6,7 @@ import Rules from '@shell/edit/networking.k8s.io.ingress/Rules';
 import ResourceTabs from '@shell/components/form/ResourceTabs';
 import Tab from '@shell/components/Tabbed/Tab';
 import { SECRET_TYPES as TYPES } from '@shell/config/secret';
+import { FilterArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
 
 export default {
   name:       'CRUIngress',
@@ -16,16 +17,38 @@ export default {
   },
   mixins: [CreateEditView],
   async fetch() {
-    const hash = await allHash({
-      secrets:  this.$store.dispatch('cluster/findAll', { type: SECRET }),
-      services: this.$store.dispatch('cluster/findAll', { type: SERVICE }),
-    });
+    const promises = {
+      services:       this.$store.dispatch('cluster/findAll', { type: SERVICE }),
+      resourceFields: this.schema.fetchResourceFields(),
+    };
+
+    if (this.$store.getters[`cluster/paginationEnabled`](SECRET)) {
+      const findPageArgs = { // Of type ActionFindPageArgs
+        namespaced: this.value.metadata.namespace,
+        pagination: new FilterArgs({
+          filters: PaginationParamFilter.createSingleField({
+            field: 'metadata.fields.1',
+            value: TYPES.TLS
+          })
+        }),
+      };
+
+      promises.filteredSecrets = this.$store.dispatch(`cluster/findPage`, { type: SECRET, opt: findPageArgs });
+    } else {
+      promises.secrets = this.$store.dispatch('cluster/findAll', { type: SECRET });
+    }
+    const hash = await allHash(promises);
 
     this.allServices = hash.services;
     this.allSecrets = hash.secrets;
+    this.filteredSecrets = hash.filteredSecrets;
   },
   data() {
-    return { allSecrets: [], allServices: [] };
+    return {
+      allSecrets:      null,
+      filteredSecrets: null,
+      allServices:     [],
+    };
   },
   computed: {
     serviceTargets() {
@@ -40,7 +63,17 @@ export default {
       return this.isView ? this.t('ingress.rulesAndCertificates.title') : this.t('ingress.rules.title');
     },
     certificates() {
-      return this.filterByCurrentResourceNamespace(this.allSecrets.filter((secret) => secret._type === TYPES.TLS)).map((secret) => {
+      let filteredSecrets;
+
+      if (this.filteredSecrets) {
+        filteredSecrets = this.filteredSecrets;
+      } else if (this.allSecrets ) {
+        filteredSecrets = this.filterByCurrentResourceNamespace(this.allSecrets.filter((secret) => secret._type === TYPES.TLS));
+      } else {
+        return [];
+      }
+
+      return filteredSecrets.map((secret) => {
         const { id } = secret;
 
         return id.slice(id.indexOf('/') + 1);
@@ -57,21 +90,21 @@ export default {
 };
 </script>
 <template>
-  <ResourceTabs
-    v-model="value"
-    mode="view"
-    class="mt-20"
+  <ResourceTabs
+    v-model="value"
+    mode="view"
+    class="mt-20"
   >
-    <Tab
-      :label="t('ingress.rules.title')"
-      name="rules"
-      :weight="1"
+    <Tab
+      :label="t('ingress.rules.title')"
+      name="rules"
+      :weight="1"
     >
-      <Rules
-        v-model="value"
-        :mode="mode"
-        :service-targets="serviceTargets"
-        :certificates="certificates"
+      <Rules
+        v-model="value"
+        :mode="mode"
+        :service-targets="serviceTargets"
+        :certificates="certificates"
       />
     </Tab>
   </ResourceTabs>