@rancher/shell 0.5.3 → 2.0.0

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/.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/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__/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.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>

package/detail/node.vue

@@ -11,7 +11,6 @@ import {
   VALUE
 } from '@shell/config/table-headers';
 import ResourceTabs from '@shell/components/form/ResourceTabs';
-import EmberPage from '@shell/components/EmberPage';
 import { METRIC, POD } from '@shell/config/types';
 import createEditView from '@shell/mixins/create-edit-view';
 import { formatSi, exponentNeeded, UNITS } from '@shell/utils/units';
@@ -20,7 +19,7 @@ import { mapGetters } from 'vuex';
 import { allDashboardsExist } from '@shell/utils/grafana';
 import Loading from '@shell/components/Loading';
 import metricPoller from '@shell/mixins/metric-poller';
-import { haveV1Monitoring } from '@shell/utils/monitoring';
+import { FilterArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
 
 const NODE_METRICS_DETAIL_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/rancher-node-detail-1/rancher-node-detail?orgId=1';
 const NODE_METRICS_SUMMARY_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/rancher-node-1/rancher-node?orgId=1';
@@ -36,7 +35,6 @@ export default {
     ResourceTabs,
     Tab,
     ResourceTable,
-    EmberPage,
   },
 
   mixins: [createEditView, metricPoller],
@@ -49,25 +47,32 @@ export default {
   },
 
   async fetch() {
-    this.showMetrics = await allDashboardsExist(this.$store, this.currentCluster.id, [NODE_METRICS_DETAIL_URL, NODE_METRICS_SUMMARY_URL]);
-
-    if (haveV1Monitoring(this.$store.getters)) {
-      const v3Nodes = await this.$store.dispatch('rancher/request', {
-        url:    '/v3/nodes',
-        method: 'get'
-      });
+    this.filterByApi = this.$store.getters[`cluster/paginationEnabled`](POD);
+
+    if (this.filterByApi) {
+      // Only get pods associated with this node. The actual values used are from a get all in node model `pods` getter (this works as it just gets all...)
+      const opt = { // Of type ActionFindPageArgs
+        pagination: new FilterArgs({
+          sort:    [{ field: 'metadata.name', asc: true }],
+          filters: PaginationParamFilter.createSingleField({
+            field: 'spec.nodeName',
+            value: this.value.id,
+          })
+        })
+      };
 
-      this.v3Nodes = v3Nodes;
+      this.$store.dispatch(`cluster/findPage`, { type: POD, opt });
+    } else {
+      this.$store.dispatch('cluster/findAll', { type: POD });
     }
 
-    return this.$store.dispatch('cluster/findAll', { type: POD });
+    this.showMetrics = await allDashboardsExist(this.$store, this.currentCluster.id, [NODE_METRICS_DETAIL_URL, NODE_METRICS_SUMMARY_URL]);
   },
 
   data() {
     const podSchema = this.$store.getters['cluster/schemaFor'](POD);
 
     return {
-      v3Nodes:          null,
       metrics:          { cpu: 0, memory: 0 },
       infoTableHeaders: [
         {
@@ -93,28 +98,13 @@ export default {
       podTableHeaders: this.$store.getters['type-map/headersFor'](podSchema),
       NODE_METRICS_DETAIL_URL,
       NODE_METRICS_SUMMARY_URL,
-      showMetrics:     false
+      showMetrics:     false,
+      filterByApi:     undefined,
     };
   },
 
   computed: {
     ...mapGetters(['currentCluster']),
-    v1MonitoringUrl() {
-      if (this.v3Nodes && this.v3Nodes.data) {
-        const node = this.v3Nodes.data.find((n) => {
-          return n.nodeName === this.value.metadata?.name;
-        });
-
-        if (node) {
-          // Custom page just with node metrics graphs
-          const id = this.currentCluster.id;
-
-          return `/k/${ id }/monitoring/${ node.id }/metrics`;
-        }
-      }
-
-      return null;
-    },
     memoryUnits() {
       const exponent = exponentNeeded(this.value.ramReserved, 1024);
 
@@ -320,19 +310,6 @@ export default {
           :search="false"
         />
       </Tab>
-      <Tab
-        v-if="v1MonitoringUrl"
-        name="v1Metrics"
-        :label="t('node.detail.tab.metrics')"
-        :weight="0"
-      >
-        <div id="ember-anchor">
-          <EmberPage
-            inline="ember-anchor"
-            :src="v1MonitoringUrl"
-          />
-        </div>
-      </Tab>
     </ResourceTabs>
   </div>
 </template>

package/detail/pod.vue

@@ -7,10 +7,8 @@ import { STATE, SIMPLE_NAME, IMAGE_NAME } from '@shell/config/table-headers';
 import { sortableNumericSuffix } from '@shell/utils/sort';
 import { findBy } from '@shell/utils/array';
 import DashboardMetrics from '@shell/components/DashboardMetrics';
-import V1WorkloadMetrics from '@shell/mixins/v1-workload-metrics';
 import { mapGetters } from 'vuex';
 import { allDashboardsExist } from '@shell/utils/grafana';
-import LabeledSelect from '@shell/components/form/LabeledSelect';
 import day from 'dayjs';
 import { DATE_FORMAT, TIME_FORMAT } from '@shell/store/prefs';
 import { escapeHtml } from '@shell/utils/string';
@@ -28,10 +26,9 @@ export default {
     ResourceTabs,
     Tab,
     SortableTable,
-    LabeledSelect,
   },
 
-  mixins: [CreateEditView, V1WorkloadMetrics],
+  mixins: [CreateEditView],
 
   async fetch() {
     this.showMetrics = await allDashboardsExist(this.$store, this.currentCluster.id, [POD_METRICS_DETAIL_URL, POD_METRICS_SUMMARY_URL]);
@@ -50,22 +47,13 @@ export default {
   },
 
   data() {
-    const t = this.$store.getters['i18n/t'];
-    const POD_OPTION = {
-      id:    '//POD//',
-      label: t('workload.metrics.pod'),
-    };
-
     return {
       POD_METRICS_DETAIL_URL,
       POD_METRICS_SUMMARY_URL,
       POD_PROJECT_METRICS_DETAIL_URL:  '',
       POD_PROJECT_METRICS_SUMMARY_URL: '',
-      POD_OPTION,
       showMetrics:                     false,
       showProjectMetrics:              false,
-      selection:                       POD_OPTION,
-      metricsID:                       null,
     };
   },
 
@@ -194,27 +182,6 @@ export default {
       };
     },
 
-    metricsOptions() {
-      const v = this.containers.map((c) => {
-        return {
-          id:    c.name,
-          label: c.name
-        };
-      });
-
-      v.unshift(this.POD_OPTION);
-
-      return v;
-    },
-
-    v1Metrics() {
-      if (!this.metricsID) {
-        return this.v1MonitoringUrl;
-      } else {
-        return `${ this.v1MonitoringContainerBaseUrl }/${ this.metricsID }`;
-      }
-    },
-
     dateTimeFormatString() {
       const dateFormat = escapeHtml( this.$store.getters['prefs/get'](DATE_FORMAT));
       const timeFormat = escapeHtml( this.$store.getters['prefs/get'](TIME_FORMAT));
@@ -224,13 +191,6 @@ export default {
   },
 
   methods: {
-    selectionChanged(c) {
-      const id = c === this.POD_OPTION ? null : c.id;
-
-      this.metricsID = id;
-      this.selection = c;
-    },
-
     dateTimeFormat(value) {
       return value ? day(value).format(this.dateTimeFormatString) : '';
     }
@@ -259,26 +219,6 @@ export default {
         :table-actions="false"
       />
     </Tab>
-    <Tab
-      v-if="v1MonitoringUrl"
-      name="v1Metrics"
-      :label="t('node.detail.tab.metrics')"
-      :weight="0"
-    >
-      <LabeledSelect
-        class="pod-metrics-chooser"
-        :value="selection"
-        label-key="workload.metrics.metricsView"
-        :options="metricsOptions"
-        @input="selectionChanged($event)"
-      />
-      <div id="ember-anchor">
-        <EmberPage
-          inline="ember-anchor"
-          :src="v1Metrics"
-        />
-      </div>
-    </Tab>
     <Tab
       v-if="showMetrics"
       :label="t('workload.container.titles.metrics')"
@@ -313,10 +253,3 @@ export default {
     </Tab>
   </ResourceTabs>
 </template>
-<style scoped>
-  .pod-metrics-chooser {
-    width: fit-content;
-    margin-bottom: 10px;
-    min-width: 300px;
-  }
-</style>

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

@@ -99,7 +99,8 @@ export default {
       this.extCustomParams = { provider: this.value.machineProvider };
     }
 
-    const fetchOne = {};
+    const schema = this.$store.getters[`management/schemaFor`](CAPI.RANCHER_CLUSTER);
+    const fetchOne = { schemaDefinitions: schema.fetchResourceFields() };
 
     if ( this.$store.getters['management/canList'](CAPI.MACHINE_DEPLOYMENT) ) {
       fetchOne.machineDeployments = this.$store.dispatch('management/findAll', { type: CAPI.MACHINE_DEPLOYMENT });