@rancher/shell 0.1.0 → 0.1.1

package/list/harvesterhci.io.dashboard/index.vue

@@ -375,50 +375,22 @@ export default {
     },
 
     cpuReserved() {
-      const useful = this.pods.filter((pod) => {
-        const nodeName = pod?.spec?.nodeName;
-
-        return this.availableNodes.includes(nodeName);
-      }).reduce((sum, pod) => {
-        const containers = pod?.spec?.containers || [];
-
-        const containerCpuReserved = containers.reduce((sum, c) => {
-          sum += parseSi(c?.resources?.requests?.cpu || '0m');
-
-          return sum;
-        }, 0);
-
-        sum += containerCpuReserved;
-
-        return sum;
+      const useful = this.nodes.reduce((total, node) => {
+        return total + node.cpuReserved;
       }, 0);
 
       return {
-        total:  this.cpusTotal,
-        useful: Number(formatSi(useful)),
+        total: this.cpusTotal,
+        useful,
       };
     },
 
     ramReserved() {
-      const useful = this.pods.filter((pod) => {
-        const nodeName = pod?.spec?.nodeName;
-
-        return this.availableNodes.includes(nodeName);
-      }).reduce((sum, pod) => {
-        const containers = pod?.spec?.containers || [];
-
-        const containerMemoryReserved = containers.reduce((sum, c) => {
-          sum += parseSi(c?.resources?.requests?.memory || '0m', { increment: 1024 });
-
-          return sum;
-        }, 0);
-
-        sum += containerMemoryReserved;
-
-        return sum;
+      const useful = this.nodes.reduce((total, node) => {
+        return total + node.memoryReserved;
       }, 0);
 
-      return this.createMemoryValues(this.memoryTotal, useful);
+      return createMemoryValues(this.memoryTotal, useful);
     },
 
     availableNodes() {
@@ -583,7 +555,12 @@ export default {
       <h3 class="mt-40">
         {{ t('clusterIndexPage.sections.capacity.label') }}
       </h3>
-      <div class="hardware-resource-gauges">
+      <div
+        class="hardware-resource-gauges"
+        :class="{
+          live: !storageTotal,
+        }"
+      >
         <HardwareResourceGauge
           :name="t('harvester.dashboard.hardwareResourceGauge.cpu')"
           :reserved="cpuReserved"
@@ -595,6 +572,7 @@ export default {
           :used="ramUsed"
         />
         <HardwareResourceGauge
+          v-if="storageTotal"
           :name="t('harvester.dashboard.hardwareResourceGauge.storage')"
           :used="storageUsed"
           :reserved="storageReserved"

package/list/harvesterhci.io.host/index.vue

@@ -44,6 +44,8 @@ export default {
 
     if (this.$store.getters['harvester/schemaFor'](LONGHORN.NODES)) {
       _hash.longhornNodes = this.$store.dispatch('harvester/findAll', { type: LONGHORN.NODES });
+    } else {
+      this.hasLonghornSchema = false;
     }
 
     if (this.$store.getters['harvester/schemaFor'](HCI.BLOCK_DEVICE)) {
@@ -57,8 +59,9 @@ export default {
 
   data() {
     return {
-      rows:            [],
-      hasMetricSchema: true
+      rows:              [],
+      hasMetricSchema:   true,
+      hasLonghornSchema: true,
     };
   },
 
@@ -86,33 +89,42 @@ export default {
       ];
 
       if (this.hasMetricSchema) {
+        const width = this.hasLonghornSchema ? '230' : '345';
         const metricCol = [
           {
             name:          'cpu',
             labelKey:      'node.detail.glance.consumptionGauge.cpu',
             value:         'id',
-            width:         '230',
+            width,
             formatter:     'HarvesterCPUUsed',
+            formatterOpts: { showUsed: true },
           },
           {
             name:          'memory',
             labelKey:      'node.detail.glance.consumptionGauge.memory',
             value:         'id',
-            width:         '230',
-            formatter:     'HarvesterMemoryUsed'
+            width,
+            formatter:     'HarvesterMemoryUsed',
+            formatterOpts: { showUsed: true },
           },
-          {
-            name:          'storage',
-            labelKey:      'tableHeaders.storage',
-            value:         'id',
-            width:         '230',
-            formatter:     'HarvesterStorageUsed',
-          }
         ];
 
         out.splice(-1, 0, ...metricCol);
       }
 
+      if (this.hasLonghornSchema) {
+        const storageHeader = {
+          name:          'storage',
+          labelKey:      'tableHeaders.storage',
+          value:         'id',
+          width:         '230',
+          formatter:     'HarvesterStorageUsed',
+          formatterOpts: { showReserved: true },
+        };
+
+        out.splice(-1, 0, storageHeader);
+      }
+
       out.push(AGE);
 
       return out;

package/list/harvesterhci.io.networkattachmentdefinition.vue

@@ -1,5 +1,5 @@
 <script>
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import Loading from '@shell/components/Loading';
 import MessageLink from '@shell/components/MessageLink';
 import ResourceTable from '@shell/components/ResourceTable';

package/list/harvesterhci.io.setting.vue

@@ -1,6 +1,6 @@
 <script>
 import { mapGetters } from 'vuex';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import Loading from '@shell/components/Loading';
 import { DEV } from '@shell/store/prefs';
 import { HCI, MANAGEMENT } from '@shell/config/types';

package/list/harvesterhci.io.virtualmachinebackup.vue

@@ -1,5 +1,5 @@
 <script>
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import Loading from '@shell/components/Loading';
 import MessageLink from '@shell/components/MessageLink';
 import Masthead from '@shell/components/ResourceList/Masthead';

package/list/harvesterhci.io.virtualmachineimage.vue

@@ -1,6 +1,8 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
+import FilterLabel from '@shell/components/FilterLabel';
+import { defaultTableSortGenerationFn } from '@shell/components/ResourceTable.vue';
 
 export default {
   name: 'ListHarvesterImage',
@@ -8,6 +10,7 @@ export default {
   components: {
     ResourceTable,
     Banner,
+    FilterLabel
   },
 
   props:      {
@@ -21,11 +24,36 @@ export default {
     },
   },
 
+  data() {
+    return {
+      searchLabels: [],
+      filterRows:   []
+    };
+  },
+
   computed: {
     uploadingImages() {
       return this.$store.getters['harvester-common/uploadingImages'] || [];
     },
   },
+
+  methods: {
+    changeRows(filterRows, searchLabels) {
+      this.$set(this, 'filterRows', filterRows);
+      this.$set(this, 'searchLabels', searchLabels);
+    },
+
+    sortGenerationFn() {
+      let base = defaultTableSortGenerationFn(this.schema, this.$store);
+
+      this.searchLabels.map((label) => {
+        base += label.key;
+        base += label.value;
+      });
+
+      return base;
+    },
+  }
 };
 </script>
 
@@ -38,10 +66,15 @@ export default {
     />
     <ResourceTable
       v-bind="$attrs"
-      :rows="rows"
+      :rows="filterRows"
       :schema="schema"
+      :sort-generation-fn="sortGenerationFn"
       key-field="_key"
       v-on="$listeners"
-    />
+    >
+      <template #more-header-middle>
+        <FilterLabel ref="filterLabel" :rows="rows" @changeRows="changeRows" />
+      </template>
+    </ResourceTable>
   </div>
 </template>

package/list/harvesterhci.io.virtualmachinetemplateversion.vue

@@ -87,10 +87,6 @@ export default {
 
     templateResource(group) {
       return group?.rows?.[0].template;
-    },
-
-    isDefaultVersion(row) {
-      return row.defaultVersion === row?.status?.version;
     }
   },
 };
@@ -131,7 +127,7 @@ export default {
     </template>
 
     <template #col:defaultVersion="{row}">
-      <td v-if="isDefaultVersion(row)">
+      <td v-if="row.isDefaultVersion">
         <i class="icon icon-lg icon-checkmark" />
       </td>
       <td v-else></td>

package/list/helm.cattle.io.projecthelmchart.vue

@@ -2,7 +2,7 @@
 import Loading from '@shell/components/Loading';
 import ResourceTable from '@shell/components/ResourceTable';
 import Masthead from '@shell/components/ResourceList/Masthead';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import { HELM } from '@shell/config/types';
 
 export default {

package/list/kubevirt.io.virtualmachine.vue

@@ -176,6 +176,10 @@ export default {
 }
 
 .name-console {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
   span {
     line-height: 26px;
     width:160px;
@@ -185,7 +189,5 @@ export default {
     -o-text-overflow:ellipsis;
   }
 
-  display: flex;
-  justify-content: space-around
 }
 </style>

package/list/management.cattle.io.feature.vue

@@ -1,11 +1,11 @@
 <script>
 import { mapState, mapGetters } from 'vuex';
 import AsyncButton from '@shell/components/AsyncButton';
-import Card from '@shell/components/Card';
+import { Card } from '@components/Card';
 import ResourceTable from '@shell/components/ResourceTable';
 import Loading from '@shell/components/Loading';
-import Banner from '@shell/components/Banner';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { Banner } from '@components/Banner';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import { MANAGEMENT } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
 

package/list/management.cattle.io.setting.vue

@@ -2,7 +2,7 @@
 import { mapGetters } from 'vuex';
 import { MANAGEMENT } from '@shell/config/types';
 import { ALLOWED_SETTINGS } from '@shell/config/settings';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import Loading from '@shell/components/Loading';
 import { DEV } from '@shell/store/prefs';
 
@@ -27,7 +27,7 @@ export default {
       const setting = settingsMap[id];
 
       if ( !setting ) {
-        return;
+        continue;
       }
 
       const readonly = !!ALLOWED_SETTINGS[id].readOnly;

package/list/monitoring.coreos.com.alertmanagerconfig.vue

@@ -1,7 +1,7 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
 import Loading from '@shell/components/Loading';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import { MONITORING } from '@shell/config/types';
 
 export default {

package/list/namespace.vue

@@ -22,7 +22,9 @@ export default {
     filterRow() {
       if (this.isVirtualCluster) {
         return this.rows.filter( (N) => {
-          return !N.isSystem && !N.isFleetManaged;
+          const isSettingSystemNamespace = this.$store.getters['systemNamespaces'].includes(N.metadata.name);
+
+          return !N.isSystem && !N.isFleetManaged && !isSettingSystemNamespace;
         });
       } else {
         return this.rows;

package/list/node.vue

@@ -2,7 +2,7 @@
 import ResourceTable from '@shell/components/ResourceTable';
 import Loading from '@shell/components/Loading';
 import Tag from '@shell/components/Tag';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import {
   STATE, NAME, ROLES, VERSION, INTERNAL_EXTERNAL_IP, CPU, RAM, PODS, AGE, KUBE_NODE_OS
 } from '@shell/config/table-headers';
@@ -54,8 +54,8 @@ export default {
     }
 
     if (this.canViewPods) {
-      // Used for running pods metrics
-      hash.pods = this.$store.dispatch('cluster/findAll', { type: POD });
+      // Used for running pods metrics - we don't need to block on this to show the list of nodes
+      this.$store.dispatch('cluster/findAll', { type: POD });
     }
 
     const res = await allHash(hash);
@@ -70,6 +70,13 @@ export default {
     };
   },
 
+  beforeDestroy() {
+    // Stop watching pods, nodes and node metrics
+    this.$store.dispatch('cluster/forgetType', POD);
+    this.$store.dispatch('cluster/forgetType', NODE);
+    this.$store.dispatch('cluster/forgetType', METRIC.NODE);
+  },
+
   computed: {
     hasWindowsNodes() {
       return (this.kubeNodes || []).some(node => node.status.nodeInfo.operatingSystem === 'windows');

package/list/persistentvolumeclaim.vue

@@ -0,0 +1,42 @@
+<script>
+import ResourceTable from '@shell/components/ResourceTable';
+import { STORAGE_CLASS } from '@shell/config/types';
+
+export default {
+  name:       'ListPersistentVolumeClaim',
+  components: { ResourceTable },
+
+  props: {
+    resource: {
+      type:     String,
+      required: true,
+    },
+
+    schema: {
+      type:     Object,
+      required: true,
+    },
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentStore']();
+
+    // Fetch storage classes so we can determine if a PVC can be expanded
+    this.$store.dispatch(`${ inStore }/findAll`, { type: STORAGE_CLASS });
+
+    this.rows = await this.$store.dispatch(`${ inStore }/findAll`, { type: this.resource });
+  },
+
+  data() {
+    return { rows: [] };
+  }
+};
+</script>
+
+<template>
+  <ResourceTable
+    :loading="$fetchState.pending"
+    :schema="schema"
+    :rows="rows"
+  />
+</template>

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

@@ -1,9 +1,9 @@
 <script>
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import ResourceTable from '@shell/components/ResourceTable';
 import Masthead from '@shell/components/ResourceList/Masthead';
 import { allHash } from '@shell/utils/promise';
-import { CAPI, MANAGEMENT, SNAPSHOT } from '@shell/config/types';
+import { CAPI, MANAGEMENT, SNAPSHOT, NORMAN } from '@shell/config/types';
 import { MODE, _IMPORT } from '@shell/config/query-params';
 import { filterOnlyKubernetesClusters, filterHiddenLocalCluster } from '@shell/utils/cluster';
 import { mapFeature, HARVESTER as HARVESTER_FEATURE } from '@shell/store/features';
@@ -16,8 +16,9 @@ export default {
 
   async fetch() {
     const hash = {
-      mgmtClusters:       this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER }),
-      rancherClusters:    this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER }),
+      normanClusters:  this.$store.dispatch('rancher/findAll', { type: NORMAN.CLUSTER }),
+      mgmtClusters:    this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER }),
+      rancherClusters: this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER }),
     };
 
     if ( this.$store.getters['management/canList'](SNAPSHOT) ) {
@@ -122,39 +123,40 @@ export default {
       :schema="schema"
       :resource="resource"
       :create-location="createLocation"
+      component-testid="cluster-manager-list"
     >
       <template v-if="canImport" slot="extraActions">
         <n-link
           :to="importLocation"
           class="btn role-primary"
+          data-testid="cluster-manager-list-import"
         >
           {{ t('cluster.importAction') }}
         </n-link>
       </template>
     </Masthead>
 
-    <ResourceTable :schema="schema" :rows="rows" :namespaced="false">
-      <template #cell:provider="{row}">
-        <template v-if="row.machineProvider">
-          {{ row.machineProviderDisplay }}
-          <div class="text-muted">
-            {{ row.provisionerDisplay }}
-          </div>
-        </template>
-        <template v-else>
-          {{ row.provisionerDisplay }}
-        </template>
-      </template>
+    <ResourceTable :schema="schema" :rows="rows" :namespaced="false" :loading="$fetchState.pending">
       <template #cell:summary="{row}">
         <span v-if="!row.stateParts.length">{{ row.nodes.length }}</span>
       </template>
       <template #cell:explorer="{row}">
         <span v-if="row.mgmt && row.mgmt.isHarvester"></span>
-        <n-link v-else-if="row.mgmt && row.mgmt.isReady" class="btn btn-sm role-primary" :to="{name: 'c-cluster', params: {cluster: row.mgmt.id}}">
-          Explore
+        <n-link
+          v-else-if="row.mgmt && row.mgmt.isReady"
+          data-testid="cluster-manager-list-explore-management"
+          class="btn btn-sm role-secondary"
+          :to="{name: 'c-cluster', params: {cluster: row.mgmt.id}}"
+        >
+          {{ t('cluster.exploreHarvester') }}
         </n-link>
-        <button v-else :disabled="true" class="btn btn-sm role-primary">
-          Explore
+        <button
+          v-else
+          data-testid="cluster-manager-list-explore"
+          :disabled="true"
+          class="btn btn-sm role-secondary"
+        >
+          {{ t('cluster.explore') }}
         </button>
       </template>
     </ResourceTable>

package/list/workload.vue

@@ -1,6 +1,7 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
 import { WORKLOAD_TYPES, SCHEMA, NODE, POD } from '@shell/config/types';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 const schema = {
   id:         'workload',
@@ -15,6 +16,7 @@ const schema = {
 export default {
   name:       'ListWorkload',
   components: { ResourceTable },
+  mixins:     [ResourceFetch],
 
   async fetch() {
     try {
@@ -30,19 +32,23 @@ export default {
     this.loadHeathResources();
 
     if ( this.allTypes ) {
-      resources = await Promise.all(Object.values(WORKLOAD_TYPES).map((type) => {
-      // You may not have RBAC to see some of the types
-        if ( !this.$store.getters['cluster/schemaFor'](type) ) {
-          return null;
+      const allowedResources = [];
+
+      Object.values(WORKLOAD_TYPES).forEach((type) => {
+        // You may not have RBAC to see some of the types
+        if (this.$store.getters['cluster/schemaFor'](type) ) {
+          allowedResources.push(type);
         }
+      });
 
-        return this.$store.dispatch('cluster/findAll', { type });
+      resources = await Promise.all(allowedResources.map((allowed) => {
+        return this.$fetchType(allowed, allowedResources);
       }));
     } else {
       const type = this.$route.params.resource;
 
       if ( this.$store.getters['cluster/schemaFor'](type) ) {
-        const resource = await this.$store.dispatch('cluster/findAll', { type });
+        const resource = await this.$fetchType(type);
 
         resources = [resource];
       }
@@ -89,6 +95,25 @@ export default {
     },
   },
 
+  // All of the resources that we will load that we need for the loading indicator
+  $loadingResources(route, store) {
+    const allTypes = route.params.resource === schema.id;
+
+    const allowedResources = [];
+
+    Object.values(WORKLOAD_TYPES).forEach((type) => {
+      // You may not have RBAC to see some of the types
+      if (store.getters['cluster/schemaFor'](type) ) {
+        allowedResources.push(type);
+      }
+    });
+
+    return {
+      loadResources:     allTypes ? allowedResources : [route.params.resource],
+      loadIndeterminate: allTypes,
+    };
+  },
+
   methods: {
     loadHeathResources() {
       // Fetch these in the background to populate workload health

package/machine-config/amazonec2.vue

@@ -1,13 +1,13 @@
 <script>
 import Loading from '@shell/components/Loading';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import KeyValue from '@shell/components/form/KeyValue';
 import UnitInput from '@shell/components/form/UnitInput';
-import RadioGroup from '@shell/components/form/RadioGroup';
-import Checkbox from '@shell/components/form/Checkbox';
+import { RadioGroup } from '@components/Form/Radio';
+import { Checkbox } from '@components/Form/Checkbox';
 import { NORMAN } from '@shell/config/types';
 import { allHash } from '@shell/utils/promise';
 import { addObject, addObjects, findBy } from '@shell/utils/array';
@@ -212,8 +212,11 @@ export default {
       const subnetsByVpc = {};
 
       for ( const obj of this.vpcInfo.Vpcs ) {
+        const name = obj.Tags && obj.Tags?.length ? obj.Tags.find(t => t.Key === 'Name')?.Value : null;
+
         vpcs.push({
-          label:     `${ obj.VpcId } (${ obj.CidrBlock })`,
+          label:     name || obj.VpcId,
+          subLabel:  name ? obj.VpcId : obj.CidrBlock,
           isDefault: obj.IsDefault || false,
           kind:      'vpc',
           value:     obj.VpcId,
@@ -234,8 +237,11 @@ export default {
           subnetsByVpc[obj.VpcId] = entry;
         }
 
+        const name = obj.Tags && obj.Tags?.length ? obj.Tags.find(t => t.Key === 'Name')?.Value : null;
+
         entry.push({
-          label:     `${ obj.SubnetId } (${ obj.CidrBlock } - ${ obj.AvailableIpAddressCount } available)`,
+          label:     name || obj.SubnetId,
+          subLabel:  name ? obj.SubnetId : obj.CidrBlock,
           kind:      'subnet',
           isDefault: obj.DefaultForAz || false,
           value:     obj.SubnetId,
@@ -468,15 +474,13 @@ export default {
               :disabled="disabled"
               :placeholder="t('cluster.machineConfig.amazonEc2.selectedNetwork.placeholder')"
               :label="t('cluster.machineConfig.amazonEc2.selectedNetwork.label')"
+              option-key="value"
               @input="updateNetwork($event)"
             >
               <template v-slot:option="opt">
-                <template v-if="opt.kind === 'vpc'">
-                  <b>{{ opt.label }}</b>
-                </template>
-                <template v-else>
-                  <span class="pl-10">{{ opt.label }}</span>
-                </template>
+                <div :class="{'vpc': opt.kind === 'vpc', 'vpc-subnet': opt.kind !== 'vpc'}">
+                  <span class="vpc-name">{{ opt.label }}</span><span class="vpc-info">{{ opt.subLabel }}</span>
+                </div>
               </template>
             </LabeledSelect>
           </div>
@@ -662,3 +666,24 @@ export default {
     </template>
   </div>
 </template>
+<style scoped lang="scss">
+  .vpc, .vpc-subnet {
+    display: flex;
+    line-height: 30px;
+
+    .vpc-name {
+      font-weight: bold;
+      flex: 1;
+    }
+
+    .vpc-info {
+      font-size: 12px;
+      opacity: 0.7;
+    }
+  }
+
+  .vpc-subnet .vpc-name {
+    font-weight: normal;
+    padding-left: 15px;
+  }
+</style>