@rancher/shell 3.0.0 → 3.0.1-rc.2

package/list/harvesterhci.io.management.cluster.vue

@@ -0,0 +1,244 @@
+<script>
+import BrandImage from '@shell/components/BrandImage';
+import TypeDescription from '@shell/components/TypeDescription';
+import ResourceTable from '@shell/components/ResourceTable';
+import Masthead from '@shell/components/ResourceList/Masthead';
+import Loading from '@shell/components/Loading';
+import { HARVESTER_NAME as VIRTUAL } from '@shell/config/features';
+import { CAPI, HCI, MANAGEMENT } from '@shell/config/types';
+import { isHarvesterCluster } from '@shell/utils/cluster';
+import { allHash } from '@shell/utils/promise';
+
+export default {
+  components: {
+    BrandImage,
+    ResourceTable,
+    Masthead,
+    TypeDescription,
+    Loading
+  },
+
+  props: {
+    schema: {
+      type:     Object,
+      required: true,
+    },
+    useQueryParamsForSimpleFiltering: {
+      type:    Boolean,
+      default: false
+    }
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    const hash = await allHash({
+      hciClusters:  this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.CLUSTER }),
+      mgmtClusters: this.$store.dispatch(`${ inStore }/findAll`, { type: MANAGEMENT.CLUSTER })
+    });
+
+    this.hciClusters = hash.hciClusters;
+    this.mgmtClusters = hash.mgmtClusters;
+  },
+
+  data() {
+    const resource = CAPI.RANCHER_CLUSTER;
+
+    return {
+      navigating:   false,
+      VIRTUAL,
+      hciDashboard: HCI.DASHBOARD,
+      resource,
+      hResource:    HCI.CLUSTER,
+      hciClusters:  [],
+      mgmtClusters: []
+    };
+  },
+
+  computed: {
+    realSchema() {
+      return this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER);
+    },
+
+    importLocation() {
+      return {
+        name:   'c-cluster-product-resource-create',
+        params: {
+          product:  this.$store.getters['currentProduct'].name,
+          resource: this.schema.id,
+        },
+      };
+    },
+
+    canCreateCluster() {
+      const schema = this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER);
+
+      return !!schema?.collectionMethods.find((x) => x.toLowerCase() === 'post');
+    },
+
+    rows() {
+      return this.hciClusters.filter((c) => {
+        const cluster = this.mgmtClusters.find((cluster) => cluster?.metadata?.name === c?.status?.clusterName);
+
+        return isHarvesterCluster(cluster);
+      });
+    },
+
+    typeDisplay() {
+      return this.t(`typeLabel."${ HCI.CLUSTER }"`, { count: this.row?.length || 0 });
+    },
+  },
+
+  methods: {
+    async goToCluster(row) {
+      const timeout = setTimeout(() => {
+        // Don't show loading indicator for quickly fetched plugins
+        this.navigating = row.id;
+      }, 1000);
+
+      try {
+        await row.goToCluster();
+
+        clearTimeout(timeout);
+        this.navigating = false;
+      } catch {
+        // The error handling is carried out within goToCluster, but just in case something happens before the promise chain can catch it...
+        clearTimeout(timeout);
+        this.navigating = false;
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
+    <Masthead
+      :schema="realSchema"
+      :resource="resource"
+      :is-creatable="false"
+      :type-display="typeDisplay"
+    >
+      <template #typeDescription>
+        <TypeDescription :resource="hResource" />
+      </template>
+
+      <template
+        v-if="canCreateCluster"
+        slot="extraActions"
+      >
+        <n-link
+          :to="importLocation"
+          class="btn role-primary"
+        >
+          {{ t('cluster.importAction') }}
+        </n-link>
+      </template>
+    </Masthead>
+
+    <ResourceTable
+      v-if="rows && rows.length"
+      :schema="schema"
+      :rows="rows"
+      :is-creatable="true"
+      :namespaced="false"
+      :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+    >
+      <template #col:name="{row}">
+        <td>
+          <span class="cluster-link">
+            <a
+              v-if="row.isReady"
+              class="link"
+              :disabled="navigating"
+              @click="goToCluster(row)"
+            >{{ row.nameDisplay }}</a>
+            <span v-else>
+              {{ row.nameDisplay }}
+            </span>
+            <i
+              class="icon icon-spinner icon-spin ml-5"
+              :class="{'navigating': navigating === row.id}"
+            />
+          </span>
+        </td>
+      </template>
+
+      <template #cell:harvester="{row}">
+        <n-link
+          class="btn btn-sm role-primary"
+          :to="row.detailLocation"
+        >
+          {{ t('harvesterManager.manage') }}
+        </n-link>
+      </template>
+    </ResourceTable>
+    <div v-else>
+      <div class="no-clusters">
+        {{ t('harvesterManager.cluster.none') }}
+      </div>
+      <hr class="info-section">
+      <div class="logo">
+        <BrandImage
+          file-name="harvester.png"
+          height="64"
+        />
+      </div>
+      <div class="tagline">
+        <div>{{ t('harvesterManager.cluster.description') }}</div>
+      </div>
+      <div class="tagline sub-tagline">
+        <div v-clean-html="t('harvesterManager.cluster.learnMore', {}, true)" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .cluster-link {
+    display: flex;
+    align-items: center;
+
+    .icon {
+      // Use visibility to avoid the columns re-adjusting when the icon is shown
+      visibility: hidden;
+
+      &.navigating {
+        visibility: visible;
+      }
+    }
+
+  }
+  .no-clusters {
+    text-align: center;
+  }
+
+  .info-section {
+    margin-top: 60px;
+  }
+
+  .logo {
+    display: flex;
+    justify-content: center;
+    margin: 60px 0 40px 0;
+  }
+
+  .tagline {
+    display: flex;
+    justify-content: center;
+    margin-top: 30px;
+
+    > div {
+      font-size: 16px;
+      line-height: 22px;
+      max-width: 80%;
+      text-align: center;
+    }
+  }
+
+ .link {
+    cursor: pointer;
+  }
+
+</style>

package/list/namespace.vue

@@ -1,7 +1,8 @@
 <script>
 import { mapGetters } from 'vuex';
+import { NS_SNAPSHOT_QUOTA } from '../config/table-headers';
 import ResourceTable from '@shell/components/ResourceTable';
-
+import { HCI } from '@shell/config/types';
 export default {
   name:       'ListNamespace',
   components: { ResourceTable },
@@ -27,13 +28,23 @@ export default {
       default: false
     }
   },
-  data() {
-    return { asddsa: true };
-  },
 
   computed: {
     ...mapGetters(['currentProduct']),
+    hasHarvesterResourceQuotaSchema() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      return !!this.$store.getters[`${ inStore }/schemaFor`](HCI.RESOURCE_QUOTA);
+    },
+    headers() {
+      const headersFromSchema = this.$store.getters['type-map/headersFor'](this.schema);
 
+      if (this.hasHarvesterResourceQuotaSchema) {
+        headersFromSchema.splice(2, 0, NS_SNAPSHOT_QUOTA);
+      }
+
+      return headersFromSchema;
+    },
     filterRow() {
       if (this.currentProduct.hideSystemResources) {
         return this.rows.filter( (N) => {
@@ -56,6 +67,7 @@ export default {
     v-bind="$attrs"
     :rows="filterRow"
     :groupable="false"
+    :headers="headers"
     :schema="schema"
     key-field="_key"
     :loading="loading"

package/models/__tests__/management.cattle.io.cluster.test.ts

@@ -4,12 +4,34 @@ jest.mock('@shell/utils/clipboard', () => {
   return { copyTextToClipboard: jest.fn(() => Promise.resolve({})) };
 });
 
+const importedRKE2ClusterInfo = { status: { driver: 'rke2', provider: 'rke2' } };
+
+const provisionedRKE2ClusterInfo = { status: { driver: 'rke2', provider: 'imported' } };
+
+const importedK3sClusterInfo = { status: { driver: 'k3s', provider: 'k3s' } };
+
+const provisionedK3sClusterInfo = { status: { driver: 'k3s', provider: 'imported' } };
+
+const importedAksClusterInfo = { spec: { aksConfig: { imported: true } }, status: { provider: 'aks', driver: 'AKS' } };
+
+const provisionedAksClusterInfo = { spec: { aksConfig: { imported: false } }, status: { provider: 'aks', driver: 'AKS' } };
+
+const importedRKE1ClusterInfo = { status: { provider: 'rke', driver: 'imported' } };
+
+const provisionedRKE1ClusterInfo = { status: { provider: 'rke', driver: 'rancherKubernetesEngine' } };
+
+const localRKE1ClusterInfo = { status: { provider: 'rke', driver: 'imported' } };
+
+const localRKE2ClusterInfo = { status: { provider: 'rke2', driver: 'rke2' } };
+
+const localEKSClusterInfo = { status: { provider: 'eks', driver: 'imported' } };
+
 describe('class MgmtCluster', () => {
   describe('provisioner', () => {
     const testCases = [
-      [{ provider: 'rke', driver: 'imported' }, 'rke'],
-      [{ provider: 'k3s', driver: 'K3S' }, 'k3s'],
-      [{ provider: 'aks', driver: 'AKS' }, 'aks'],
+      [{ provider: 'rke', driver: 'imported' }, 'imported'],
+      [{ provider: 'k3s', driver: 'K3S' }, 'K3S'],
+      [{ provider: 'aks', driver: 'AKS' }, 'AKS'],
       [{}, 'imported'],
     ];
 
@@ -20,4 +42,24 @@ describe('class MgmtCluster', () => {
     }
     );
   });
+
+  describe('isImported', () => {
+    it.each([
+      [importedRKE2ClusterInfo, true],
+      [provisionedRKE2ClusterInfo, false],
+      [importedK3sClusterInfo, true],
+      [provisionedK3sClusterInfo, false],
+      [importedAksClusterInfo, true],
+      [provisionedAksClusterInfo, false],
+      [importedRKE1ClusterInfo, true],
+      [provisionedRKE1ClusterInfo, false],
+      [localRKE1ClusterInfo, true],
+      [localRKE2ClusterInfo, true],
+      [localEKSClusterInfo, true]
+    ])('should return isImported based on props data', (clusterData, expected) => {
+      const cluster = new MgmtCluster(clusterData);
+
+      expect(cluster.isImported).toBe(expected);
+    });
+  });
 });

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

@@ -1,31 +1,6 @@
 import ProvCluster from '@shell/models/provisioning.cattle.io.cluster';
 
 describe('class ProvCluster', () => {
-  const importedClusterInfo = {
-    clusterName: 'test', provisioner: 'imported', mgmt: { spec: { gkeConfig: {} } }, spec: {}
-  };
-  const importedGkeClusterInfo = {
-    clusterName: 'test', provisioner: 'rke2', mgmt: { spec: { gkeConfig: { imported: true } } }
-  };
-  const importedAksClusterInfo = {
-    clusterName: 'test', provisioner: 'rke2', mgmt: { spec: { aksConfig: { imported: true } } }
-  };
-  const importedEksClusterInfo = {
-    clusterName: 'test', provisioner: 'rke2', mgmt: { spec: { eksConfig: { imported: true } } }
-  };
-  const notImportedGkeClusterInfo = {
-    clusterName: 'test', provisioner: 'rke2', mgmt: { spec: { gkeConfig: { imported: false } }, rkeConfig: {} }
-  };
-  const importedClusterInfoWithProviderForEmberParam = {
-    clusterName: 'test', provisioner: 'rke2', mgmt: { providerForEmberParam: 'import' }
-  };
-  const localClusterInfo = {
-    clusterName: 'test', provisioner: 'imported', mgmt: { isLocal: true, spec: { gkeConfig: {} } }, spec: {}
-  };
-  const doRke2Info = {
-    clusterName: 'test', provisioner: 'rke2', mgmt: { isLocal: false, providerForEmberParam: 'import' }, spec: { rkeConfig: {} }
-  };
-
   const gkeClusterWithPrivateEndpoint = {
     clusterName: 'test',
     provisioner: 'GKE',
@@ -76,67 +51,6 @@ describe('class ProvCluster', () => {
     });
   });
 
-  describe('isImported', () => {
-    const testCases = [
-      [importedClusterInfo, true],
-      [importedGkeClusterInfo, true],
-      [importedAksClusterInfo, true],
-      [importedEksClusterInfo, true],
-      [notImportedGkeClusterInfo, false],
-      [importedClusterInfoWithProviderForEmberParam, true],
-      [localClusterInfo, false],
-      [doRke2Info, false],
-      [{}, false],
-    ];
-    const resetMocks = () => {
-      // Clear all mock function calls:
-      jest.clearAllMocks();
-    };
-
-    it.each(testCases)('should return the isImported value properly based on the props data', (clusterData: Object, expected: Boolean) => {
-      const cluster = new ProvCluster({ spec: clusterData.spec });
-
-      jest.spyOn(cluster, 'mgmt', 'get').mockReturnValue(
-        clusterData.mgmt
-      );
-      jest.spyOn(cluster, 'provisioner', 'get').mockReturnValue(
-        clusterData.provisioner
-      );
-
-      expect(cluster.isImported).toBe(expected);
-      resetMocks();
-    }
-    );
-  });
-
-  describe('mgmt', () => {
-    const testCases = [
-      [importedClusterInfo, importedClusterInfo.mgmt],
-      [importedGkeClusterInfo, importedGkeClusterInfo.mgmt],
-      [importedAksClusterInfo, importedAksClusterInfo.mgmt],
-      [importedEksClusterInfo, importedEksClusterInfo.mgmt],
-      [notImportedGkeClusterInfo, notImportedGkeClusterInfo.mgmt],
-      [importedClusterInfoWithProviderForEmberParam, importedClusterInfoWithProviderForEmberParam.mgmt],
-      [localClusterInfo, localClusterInfo.mgmt],
-      [doRke2Info, doRke2Info.mgmt],
-      [{}, null],
-    ];
-
-    const resetMocks = () => {
-      // Clear all mock function calls:
-      jest.clearAllMocks();
-    };
-
-    it.each(testCases)('should return the isImported value properly based on the props data', (clusterData: Object, expected: Object) => {
-      const clusterMock = jest.fn(() => clusterData.mgmt);
-      const ctx = { rootGetters: { 'management/byId': clusterMock } };
-      const cluster = new ProvCluster({ status: { clusterName: clusterData.clusterName } }, ctx);
-
-      expect(cluster.mgmt).toBe(expected);
-      resetMocks();
-    });
-  });
-
   describe('hasError', () => {
     const conditionsWithoutError = [
       {

package/models/fleet.cattle.io.bundle.js

@@ -30,7 +30,9 @@ export default class FleetBundle extends SteveModel {
   }
 
   get repoName() {
-    return this.metadata.labels['fleet.cattle.io/repo-name'];
+    const labels = this.metadata?.labels || {};
+
+    return labels['fleet.cattle.io/repo-name'];
   }
 
   get targetClusters() {

package/models/fleet.cattle.io.gitrepo.js

@@ -1,15 +1,16 @@
 import { convert, matching, convertSelectorObj } from '@shell/utils/selector';
 import jsyaml from 'js-yaml';
-import { escapeHtml, randomStr } from '@shell/utils/string';
+import { escapeHtml } from '@shell/utils/string';
 import { FLEET } from '@shell/config/types';
 import { FLEET as FLEET_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { addObject, addObjects, findBy, insertAt } from '@shell/utils/array';
 import { set } from '@shell/utils/object';
 import SteveModel from '@shell/plugins/steve/steve-class';
 import {
-  STATES_ENUM, colorForState, mapStateToEnum, primaryDisplayStatusFromCount, stateDisplay, stateSort
+  colorForState, mapStateToEnum, primaryDisplayStatusFromCount, stateDisplay, stateSort
 } from '@shell/plugins/dashboard-store/resource-class';
 import { NAME } from '@shell/config/product/explorer';
+import FleetUtils from '@shell/utils/fleet';
 
 function quacksLikeAHash(str) {
   if (str.match(/^[a-f0-9]{40,}$/i)) {
@@ -325,35 +326,29 @@ export default class GitRepo extends SteveModel {
   }
 
   get resourcesStatuses() {
-    const clusters = this.targetClusters || [];
-    const resources = this.status?.resources || [];
-    const conditions = this.status?.conditions || [];
+    const bundleDeployments = this.bundleDeployments || [];
+    const clusters = (this.targetClusters || []).reduce((res, c) => {
+      res[c.id] = c;
+
+      return res;
+    }, {});
 
     const out = [];
 
-    for (const c of clusters) {
-      const clusterBundleDeploymentResources = this.bundleDeployments
-        .find((bd) => bd.metadata?.labels?.[FLEET_ANNOTATIONS.CLUSTER] === c.metadata.name)
-        ?.status?.resources || [];
+    for (const bd of bundleDeployments) {
+      const clusterId = FleetUtils.clusterIdFromBundleDeploymentLabels(bd.metadata?.labels);
+      const c = clusters[clusterId];
 
-      resources.forEach((r, i) => {
-        let namespacedName = r.name;
+      if (!c) {
+        continue;
+      }
 
-        if (r.namespace) {
-          namespacedName = `${ r.namespace }:${ r.name }`;
-        }
+      const resources = FleetUtils.resourcesFromBundleDeploymentStatus(bd.status);
 
-        let state = r.state;
-        const perEntry = r.perClusterState?.find((x) => x.clusterId === c.id);
-        const tooMany = r.perClusterState?.length >= 10 || false;
-
-        if (perEntry) {
-          state = perEntry.state;
-        } else if (tooMany) {
-          state = STATES_ENUM.UNKNOWN;
-        } else {
-          state = STATES_ENUM.READY;
-        }
+      resources.forEach((r) => {
+        const id = FleetUtils.resourceId(r);
+        const type = FleetUtils.resourceType(r);
+        const state = r.state;
 
         const color = colorForState(state).replace('text-', 'bg-');
         const display = stateDisplay(state);
@@ -363,33 +358,38 @@ export default class GitRepo extends SteveModel {
           params: {
             product:   NAME,
             cluster:   c.metadata.labels[FLEET_ANNOTATIONS.CLUSTER_NAME],
-            resource:  r.type,
+            resource:  type,
             namespace: r.namespace,
             id:        r.name,
           }
         };
 
+        const key = `${ c.id }-${ type }-${ r.namespace }-${ r.name }`;
+
         out.push({
-          key:                    `${ r.id }-${ c.id }-${ r.type }-${ r.namespace }-${ r.name }`,
-          tableKey:               `${ r.id }-${ c.id }-${ r.type }-${ r.namespace }-${ r.name }-${ randomStr(8) }`,
-          kind:                   r.kind,
-          apiVersion:             r.apiVersion,
-          type:                   r.type,
-          id:                     r.id,
-          namespace:              r.namespace,
-          name:                   r.name,
-          clusterId:              c.id,
-          clusterLabel:           c.metadata.labels[FLEET_ANNOTATIONS.CLUSTER_NAME],
-          clusterName:            c.nameDisplay,
-          state:                  mapStateToEnum(state),
-          stateBackground:        color,
-          stateDisplay:           display,
-          stateSort:              stateSort(color, display),
-          namespacedName,
+          key,
+          tableKey: key,
+
+          // Needed?
+          id,
+          type,
+          clusterId: c.id,
+
+          // columns, see FleetResources.vue
+          state:             mapStateToEnum(state),
+          clusterName:       c.nameDisplay,
+          apiVersion:        r.apiVersion,
+          kind:              r.kind,
+          name:              r.name,
+          namespace:         r.namespace,
+          creationTimestamp: r.createdAt,
+
+          // other properties
+          clusterLabel:    c.metadata.labels[FLEET_ANNOTATIONS.CLUSTER_NAME],
+          stateBackground: color,
+          stateDisplay:    display,
+          stateSort:       stateSort(color, display),
           detailLocation,
-          conditions:             conditions[i],
-          bundleDeploymentStatus: clusterBundleDeploymentResources?.[i],
-          creationTimestamp:      clusterBundleDeploymentResources?.[i]?.createdAt
         });
       });
     }
@@ -410,9 +410,7 @@ export default class GitRepo extends SteveModel {
 
   get clusterResourceStatus() {
     const clusterStatuses = this.resourcesStatuses.reduce((prev, curr) => {
-      const { clusterId, clusterLabel } = curr;
-
-      const state = curr.state;
+      const { clusterId, clusterLabel, state } = curr;
 
       if (!prev[clusterId]) {
         prev[clusterId] = {

package/models/k8s.cni.cncf.io.networkattachmentdefinition.js

@@ -0,0 +1,88 @@
+import SteveModel from '@shell/plugins/steve/steve-class';
+import { HCI } from '@shell/config/labels-annotations';
+
+export default class NetworkAttachmentDef extends SteveModel {
+  applyDefaults() {
+    const spec = this.spec || {
+      config: JSON.stringify({
+        cniVersion:  '0.3.1',
+        name:        '',
+        type:        'bridge',
+        bridge:      '',
+        promiscMode: true,
+        vlan:        '',
+        ipam:        {}
+      })
+    };
+
+    this['spec'] = spec;
+  }
+
+  get parseConfig() {
+    try {
+      return JSON.parse(this.spec.config) || {};
+    } catch (err) {
+      return {};
+    }
+  }
+
+  get isIpamStatic() {
+    return this.parseConfig.ipam?.type === 'static';
+  }
+
+  get clusterNetwork() {
+    return this?.metadata?.labels?.[HCI.CLUSTER_NETWORK];
+  }
+
+  get vlanType() {
+    const labels = this.metadata?.labels || {};
+    const type = labels[HCI.NETWORK_TYPE];
+
+    return type;
+  }
+
+  get vlanId() {
+    return this.vlanType === 'UntaggedNetwork' ? 'N/A' : this.parseConfig.vlan;
+  }
+
+  get customValidationRules() {
+    const rules = [
+      {
+        nullable:       false,
+        path:           'metadata.name',
+        required:       true,
+        minLength:      1,
+        maxLength:      63,
+        translationKey: 'harvester.fields.name'
+      }
+    ];
+
+    return rules;
+  }
+
+  get connectivity() {
+    const annotations = this.metadata?.annotations || {};
+    const route = annotations[HCI.NETWORK_ROUTE];
+    let config = {};
+
+    if (this.vlanType === 'UntaggedNetwork') {
+      return 'N/A';
+    }
+
+    try {
+      config = JSON.parse(route || '{}');
+    } catch {
+      return 'invalid';
+    }
+
+    const connectivity = config.connectivity;
+
+    if (connectivity === 'false') {
+      return 'inactive';
+    } else if (connectivity === 'true') {
+      return 'active';
+    } else {
+      return connectivity;
+    }
+  }
+}