@rancher/shell 0.1.0 → 0.1.1

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

@@ -1,7 +1,7 @@
 <script>
 import ResourceTabs from '@shell/components/form/ResourceTabs';
 import FleetSummary from '@shell/components/fleet/FleetSummary';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import FleetResources from '@shell/components/fleet/FleetResources';
 import Tab from '@shell/components/Tabbed/Tab';
 import { FLEET } from '@shell/config/types';
@@ -31,8 +31,8 @@ export default {
 
   data() {
     return {
-      allFleet:   [],
-      allBundles: [],
+      allFleet:      [],
+      allBundles:    []
     };
   },
 
@@ -95,11 +95,12 @@ export default {
       v-if="gitRepoHasClusters"
       :value="value"
       :bundles="bundles"
+      class="mb-20"
     />
     <Banner
       v-else
       color="info"
-      class="mb-40"
+      class="mb-20"
     >
       {{ t('fleet.fleetSummary.noClustersGitRepo') }}
     </Banner>

package/detail/harvesterhci.io.host/HarvesterHostBasic.vue

@@ -1,6 +1,6 @@
 <script>
 import LabelValue from '@shell/components/LabelValue';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import { formatSi, exponentNeeded, UNITS } from '@shell/utils/units';
 import { HCI as HCI_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { LONGHORN, METRIC, HCI } from '@shell/config/types';
@@ -208,6 +208,12 @@ export default {
 
       return !!this.$store.getters[`${ inStore }/schemaFor`](HCI.NODE_NETWORK);
     },
+
+    hasLonghornSchema() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      return !!this.$store.getters[`${ inStore }/schemaFor`](LONGHORN.NODES);
+    },
   },
 
   methods: {
@@ -294,21 +300,36 @@ export default {
       <hr class="divider" />
       <h3>{{ t('harvester.host.tabs.monitor') }}</h3>
       <div class="row mb-20">
-        <div class="col span-4">
+        <div
+          class="col"
+          :class="{
+            'span-4': hasLonghornSchema,
+            'span-6': !hasLonghornSchema,
+          }"
+        >
           <HarvesterCPUUsed
             :row="value"
             :resource-name="t('node.detail.glance.consumptionGauge.cpu')"
             :show-used="true"
           />
         </div>
-        <div class="col span-4">
+        <div
+          class="col"
+          :class="{
+            'span-4': hasLonghornSchema,
+            'span-6': !hasLonghornSchema,
+          }"
+        >
           <HarvesterMemoryUsed
             :row="value"
             :resource-name="t('node.detail.glance.consumptionGauge.memory')"
             :show-used="true"
           />
         </div>
-        <div class="col span-4">
+        <div
+          v-if="hasLonghornSchema"
+          class="col span-4"
+        >
           <HarvesterStorageUsed
             :row="value"
             :resource-name="t('harvester.host.detail.storage')"

package/detail/harvesterhci.io.host/HarvesterHostDisk.vue

@@ -1,7 +1,7 @@
 <script>
 import LabelValue from '@shell/components/LabelValue';
-import BadgeState from '@shell/components/BadgeState';
-import Banner from '@shell/components/Banner';
+import { BadgeState } from '@components/BadgeState';
+import { Banner } from '@components/Banner';
 
 export default {
   components: {

package/detail/harvesterhci.io.virtualmachinebackup/index.vue

@@ -3,7 +3,7 @@ import Tabbed from '@shell/components/Tabbed';
 import Tab from '@shell/components/Tabbed/Tab';
 import Loading from '@shell/components/Loading';
 import CruResource from '@shell/components/CruResource';
-import Checkbox from '@shell/components/form/Checkbox';
+import { Checkbox } from '@components/Form/Checkbox';
 import LabelValue from '@shell/components/LabelValue';
 import VM_MIXIN from '@shell/mixins/harvester-vm';
 import { allHash } from '@shell/utils/promise';

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

@@ -4,7 +4,7 @@ import Tabbed from '@shell/components/Tabbed';
 import Tab from '@shell/components/Tabbed/Tab';
 import DashboardMetrics from '@shell/components/DashboardMetrics';
 import AlertTable from '@shell/components/AlertTable';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import { parse as parseUrl } from '@shell/utils/url';
 import { ENDPOINTS } from '@shell/config/types';
 import { allHash } from '@shell/utils/promise';

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

@@ -5,6 +5,7 @@ import CreateEditView from '@shell/mixins/create-edit-view';
 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';
 
 export default {
   name:       'CRUIngress',
@@ -38,6 +39,13 @@ export default {
     firstTabLabel() {
       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) => {
+        const { id } = secret;
+
+        return id.slice(id.indexOf('/') + 1);
+      });
+    },
   },
   methods: {
     filterByCurrentResourceNamespace(resources) {
@@ -50,8 +58,8 @@ export default {
 </script>
 <template>
   <ResourceTabs v-model="value" mode="view" class="mt-20">
-    <Tab label="Rules" name="rules" :weight="1">
-      <Rules v-model="value" :mode="mode" :service-targets="serviceTargets" />
+    <Tab :label="t('ingress.rules.title')" name="rules" :weight="1">
+      <Rules v-model="value" :mode="mode" :service-targets="serviceTargets" :certificates="certificates" />
     </Tab>
   </ResourceTabs>
 </template>

package/detail/pod.vue

@@ -12,6 +12,9 @@ import { mapGetters } from 'vuex';
 import { allDashboardsExist } from '@shell/utils/grafana';
 import Loading from '@shell/components/Loading';
 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';
 
 const POD_METRICS_DETAIL_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/rancher-pod-containers-1/rancher-pod-containers?orgId=1';
 const POD_METRICS_SUMMARY_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/rancher-pod-1/rancher-pod?orgId=1';
@@ -60,12 +63,34 @@ export default {
       return (containers || []).map((container) => {
         const status = findBy(statuses, 'name', container.name);
         const state = status?.state || {};
+        const descriptions = [];
 
         // There can be only one member of a `ContainerState`
         const s = Object.values(state)[0] || {};
         const reason = s.reason || '';
         const message = s.message || '';
         const showBracket = s.reason && s.message;
+        const description = `${ reason }${ showBracket ? ' (' : '' }${ message }${ showBracket ? ')' : '' }`;
+
+        if (description) {
+          descriptions.push(description);
+        }
+
+        // add lastState to show termination reason
+        if (status?.lastState?.terminated) {
+          const ls = status?.lastState?.terminated;
+          const lsReason = ls.reason || '';
+          const lsMessage = ls.message || '';
+          const lsExitCode = ls.exitCode || '';
+          const lsStartedAt = this.dateTimeFormat(ls.startedAt);
+          const lsFinishedAt = this.dateTimeFormat(ls.finishedAt);
+          const lsShowBracket = ls.reason && ls.message;
+          const lsDescription = `${ lsReason }${ lsShowBracket ? ' (' : '' }${ lsMessage }${ lsShowBracket ? ')' : '' }`;
+
+          descriptions.push(this.t('workload.container.terminationState', {
+            lsDescription, lsExitCode, lsStartedAt, lsFinishedAt
+          }));
+        }
 
         return {
           ...container,
@@ -76,7 +101,7 @@ export default {
           readyIcon:        status?.ready ? 'icon-checkmark icon-2x text-success ml-5' : 'icon-x icon-2x text-error ml-5',
           availableActions: this.value.containerActions,
           stateObj:         status, // Required if there's a description
-          stateDescription: `${ reason }${ showBracket ? ' (' : '' }${ message }${ showBracket ? ')' : '' }`, // Required to display the description
+          stateDescription: descriptions.join(' | '), // Required to display the description
           initIcon:         this.value.containerIsInit(container) ? 'icon-checkmark icon-2x text-success ml-5' : 'icon-minus icon-2x text-muted ml-5',
 
           // Call openShell here so that opening the shell
@@ -173,6 +198,13 @@ export default {
       } 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));
+
+      return `${ dateFormat } ${ timeFormat }`;
     }
   },
 
@@ -183,6 +215,10 @@ export default {
       this.metricsID = id;
       this.selection = c;
     },
+
+    dateTimeFormat(value) {
+      return value ? day(value).format(this.dateTimeFormatString) : '';
+    }
   }
 };
 </script>

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

@@ -1,6 +1,6 @@
 <script>
 import Loading from '@shell/components/Loading';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import ResourceTable from '@shell/components/ResourceTable';
 import ResourceTabs from '@shell/components/form/ResourceTabs';
 import SortableTable from '@shell/components/SortableTable';
@@ -9,7 +9,7 @@ import Tab from '@shell/components/Tabbed/Tab';
 import { allHash } from '@shell/utils/promise';
 import { CAPI, MANAGEMENT, NORMAN, SNAPSHOT } from '@shell/config/types';
 import {
-  STATE, NAME as NAME_COL, AGE, AGE_NORMAN, STATE_NORMAN, ROLES, MACHINE_NODE_OS, MANAGEMENT_NODE_OS, NAME
+  STATE, NAME as NAME_COL, AGE, AGE_NORMAN, STATE_NORMAN, ROLES, MACHINE_NODE_OS, MANAGEMENT_NODE_OS, NAME, IP_ADDRESS
 } from '@shell/config/table-headers';
 import CustomCommand from '@shell/edit/provisioning.cattle.io.cluster/CustomCommand';
 import AsyncButton from '@shell/components/AsyncButton.vue';
@@ -19,7 +19,7 @@ import { addParams } from '@shell/utils/url';
 import { base64Decode } from '@shell/utils/crypto';
 import { DATE_FORMAT, TIME_FORMAT } from '@shell/store/prefs';
 import { escapeHtml } from '@shell/utils/string';
-
+import MachineSummaryGraph from '@shell/components/formatter/MachineSummaryGraph';
 import Socket, {
   EVENT_CONNECTED,
   EVENT_DISCONNECTED,
@@ -28,10 +28,32 @@ import Socket, {
   EVENT_CONNECT_ERROR
 } from '@shell/utils/socket';
 import { get } from '@shell/utils/object';
+import CapiMachineDeployment from '@shell/models/cluster.x-k8s.io.machinedeployment';
 
 let lastId = 1;
 const ansiup = new AnsiUp();
 
+/**
+ * Machine Deployment has a reference to the 'template' used to create that deployment
+ * For an empty machine pool, we (obviously) don't get any machine deployments for that pool.
+ *
+ * This class allows us to fake a machine deployment - when created, we set additional properties (_cluster etc)
+ * and use these in the getters.
+ **/
+class EmptyCapiMachineDeployment extends CapiMachineDeployment {
+  get inClusterSpec() {
+    return this._clusterSpec;
+  }
+
+  get cluster() {
+    return this._cluster;
+  }
+
+  get template() {
+    return this._template;
+  }
+}
+
 export default {
   components: {
     Loading,
@@ -43,6 +65,7 @@ export default {
     CopyCode,
     CustomCommand,
     AsyncButton,
+    MachineSummaryGraph,
   },
 
   props: {
@@ -70,12 +93,14 @@ export default {
       fetchOne.snapshots = this.$store.dispatch('management/findAll', { type: SNAPSHOT });
     }
 
-    if (this.value.isImported || this.value.isCustom) {
+    if ( this.value.isImported || this.value.isCustom || this.value.isAKS || this.value.isEKS ) {
       fetchOne.clusterToken = this.value.getOrCreateToken();
     }
+
     if ( this.value.isRke1 && this.$store.getters['isRancher'] ) {
       fetchOne.etcdBackups = this.$store.dispatch('rancher/findAll', { type: NORMAN.ETCD_BACKUP });
 
+      fetchOne.normanClusters = this.$store.dispatch('rancher/findAll', { type: NORMAN.CLUSTER });
       fetchOne.normanNodePools = this.$store.dispatch('rancher/findAll', { type: NORMAN.NODE_POOL });
     }
 
@@ -120,6 +145,7 @@ export default {
     this.haveNodes = !!fetchTwoRes.allNodes;
     this.allNodePools = fetchTwoRes.allNodePools || [];
     this.haveNodePools = !!fetchTwoRes.allNodePools;
+    this.machineTemplates = fetchTwoRes.mdtt || [];
   },
 
   created() {
@@ -187,16 +213,63 @@ export default {
       return '';
     },
 
+    // Used to show summary graph for each node pool group in the machine pool table
+    poolSummaryInfo() {
+      const info = {};
+
+      this.value?.pools.forEach((p) => {
+        const group = `[${ p.type }: ${ p.id }]`;
+
+        info[group] = p;
+      });
+
+      return info;
+    },
+
     fakeMachines() {
+      // When we scale up, the quantity will change to N+1 - so from 0 to 1, the quantity changes,
+      // but it takes tiem for the machine to appear, so the pool is empty, but if we just go off on a non-zero quqntity
+      // then the pool would be hidden - so we find empty pool by checking the machines
+      const emptyPools = (this.value.spec.rkeConfig?.machinePools || []).filter((mp) => {
+        const machinePrefix = `${ this.value.name }-${ mp.name }`;
+        const machines = this.value.machines.filter((machine) => {
+          return machine.spec?.infrastructureRef?.name.startsWith(machinePrefix);
+        });
+
+        return machines.length === 0;
+      });
+
       // When a deployment has no machines it's not shown.... so add a fake machine to it
       // This is a catch all scenario seen in older node pool world but not deployments
-      const emptyDeployments = this.allMachineDeployments.filter(x => x.spec.clusterName === this.value.metadata.name && x.spec.replicas === 0);
+      return emptyPools.map((mp, i) => {
+        const pool = new EmptyCapiMachineDeployment(
+          {
+            id:       i,
+            metadata: {
+              name:      `${ this.value.nameDisplay }-${ mp.name }`,
+              namespace: this.value.namespace,
+            },
+            spec: {}
+          },
+          {
+            getters:     this.$store.getters,
+            rootGetters: this.$root.$store.getters,
+          }
+        );
 
-      return emptyDeployments.map(d => ({
-        poolId:       d.id,
-        mainRowKey: 'isFake',
-        pool:       d,
-      }));
+        const templateNamePrefix = `${ pool.metadata.name }-`;
+
+        // All of these properties are needed to ensure the pool displays correctly and that we can scale up and down
+        pool._template = this.machineTemplates.find(t => t.metadata.name.startsWith(templateNamePrefix));
+        pool._cluster = this.value;
+        pool._clusterSpec = mp;
+
+        return {
+          poolId:     pool.id,
+          mainRowKey: 'isFake',
+          pool,
+        };
+      });
     },
 
     machines() {
@@ -248,8 +321,10 @@ export default {
           sort:          'status.nodeRef.name',
           value:         'status.nodeRef.name',
           formatter:     'LinkDetail',
-          formatterOpts: { reference: 'kubeNodeDetailLocation' }
+          formatterOpts: { reference: 'kubeNodeDetailLocation' },
+          dashIfEmpty:   true,
         },
+        IP_ADDRESS,
         MACHINE_NODE_OS,
         ROLES,
         AGE,
@@ -265,8 +340,10 @@ export default {
           sort:          'kubeNodeName',
           value:         'kubeNodeName',
           formatter:     'LinkDetail',
-          formatterOpts: { reference: 'kubeNodeDetailLocation' }
+          formatterOpts: { reference: 'kubeNodeDetailLocation' },
+          dashIfEmpty:   true,
         },
+        IP_ADDRESS,
         MANAGEMENT_NODE_OS,
         ROLES,
         AGE
@@ -352,6 +429,10 @@ export default {
         return true;
       }
 
+      if ( ( this.value.isAKS || this.value.isEKS ) && !this.isClusterReady ) {
+        return true;
+      }
+
       return false;
     },
 
@@ -378,7 +459,7 @@ export default {
     },
 
     snapshotsGroupBy() {
-      return `$['metadata']['annotations']['etcdsnapshot.rke.io/storage']`;
+      return 'backupLocation';
     }
   },
 
@@ -561,7 +642,7 @@ export default {
           <template #group-by="{group}">
             <div class="pool-row" :class="{'has-description':group.ref && group.ref.nodeTemplate}">
               <div v-trim-whitespace class="group-tab">
-                <div v-if="group.ref" v-html="t('resourceTable.groupLabel.nodePool', { name: group.ref.spec.hostnamePrefix, count: group.ref.scale}, true)">
+                <div v-if="group.ref" v-html="t('resourceTable.groupLabel.nodePool', { name: group.ref.spec.hostnamePrefix}, true)">
                 </div>
                 <div v-else v-html="t('resourceTable.groupLabel.notInANodePool')">
                 </div>
@@ -569,7 +650,8 @@ export default {
                   {{ group.ref.providerDisplay }} &ndash;  {{ group.ref.providerLocation }} / {{ group.ref.providerSize }} ({{ group.ref.providerName }})
                 </div>
               </div>
-              <div v-if="group.ref" class="right">
+              <div v-if="group.ref" class="right group-header-buttons">
+                <MachineSummaryGraph :row="poolSummaryInfo[group.ref]" :horizontal="true" class="mr-20" />
                 <template v-if="group.ref.hasLink('update')">
                   <button v-tooltip="t('node.list.scaleDown')" :disabled="group.ref.spec.quantity < 2" type="button" class="btn btn-sm role-secondary" @click="group.ref.scalePool(-1)">
                     <i class="icon icon-sm icon-minus" />
@@ -604,6 +686,7 @@ export default {
       </Tab>
 
       <Tab v-if="showRegistration" name="registration" :label="t('cluster.tabs.registration')" :weight="2">
+        <Banner color="warning" :label="t('cluster.import.warningBanner')" />
         <CustomCommand v-if="value.isCustom" :cluster-token="clusterToken" :cluster="value" @copied-windows="hasWindowsMachine ? null : showWindowsWarning = true" />
         <template v-else>
           <h4 v-html="t('cluster.import.commandInstructions', null, true)" />
@@ -680,6 +763,10 @@ export default {
       }
     }
   }
+  .group-header-buttons {
+    align-items: center;
+    display: flex;
+  }
 }
 
 .logs-container {