Better parsing for a cluster provider info

rancher/dashboard#478

assets/translations/en-us.yaml

@@ -23,15 +23,39 @@ nav:
 
 cluster:
   provider:
-    aliyunengineconfig: Alibaba ACK
-    amazonelasticcontainerserviceconfig: Amazon EKS
-    azurekubernetesserviceconfig: Azure AKS
-    googlekubernetesengineconfig: Google GKE
-    huaweiengineconfig: Huawei CCE
-    importedconfig: Import
-    rancherkubernetesengineconfig: Rancher RKE
-    tencentengineconfig: Tencent TKE
-    baiduengineconfig: Baidu CCE
+    amazonelasticcontainerservice:
+      label: Amazon Elastic Container Service for Kubernetes
+      shortLabel: Amazon EKS
+    tencentengine:
+      label: Tencent Kubernetes Engine
+      shortLabel: Tencent TKE
+    azurekubernetesservice:
+      label: Azure Container Service
+      shortLabel: Azure AKS
+    aliyunengine:
+      label: Aliyun Kubernetes Container Service
+      shortLabel: Alibaba ACK
+    googlekubernetesengine:
+      label: Google Kubernetes Engine
+      shortLabel: Google GKE
+    k3simport:
+      label: Rancher K3S
+      shortLabel: K3S
+    huaweiengine:
+      label: Huawei Cloud Container Engine
+      shortLabel: Huawei CCE
+    oracleokeengine:
+      label: Oracle Container Engine long
+      shortLabel: Oracle OKE
+    rancherkubernetesengine:
+      label: Rancher Kubernetes Engine
+      shortLabel: Custom
+    custom:
+      label: From existing nodes (Custom)
+      shortLabel: Custom
+    imported:
+      label: Import an existing cluster
+      shortLabel: Imported
 
 footer:
   docs: Docs

components/ClusterDisplayProvider.vue

@@ -0,0 +1,70 @@
+<script>
+import { capitalize } from 'lodash';
+
+export default {
+  props: {
+    /**
+     * The cluster for info
+     */
+    cluster: {
+      type:     Object,
+      required: true,
+    },
+    /**
+     * The node pools belonging to this cluster.
+     * Node pools gives us the node template id use to launch the node pool
+     */
+    nodePools: {
+      type:     Array,
+      default:  () => [],
+    },
+    /**
+     * The node templates used to launch node pools for this cluster.
+     * Node Templates give us the provider name if the cluster is RKE based.
+     */
+    nodeTemplates: {
+      type:     Array,
+      default:  () => [],
+    },
+  },
+
+  computed: {
+    displayProvider() {
+      const cluster = this.cluster;
+      const driver = cluster.status?.driver.toLowerCase();
+
+      if (driver && this.$store.getters['i18n/exists'](`cluster.provider.${ driver }.shortLabel`)) {
+        if (driver === 'rancherkubernetesengine') {
+          const pools = this.nodePools;
+          const firstNodePool = pools[0];
+
+          if (firstNodePool) {
+            const nodeTemplateId = firstNodePool?.spec?.nodeTemplateName;
+            const normalizedId = nodeTemplateId.split(':').join('/');
+            const nodeTemplate = this.nodeTemplates.find(nt => nt.id === normalizedId);
+
+            if (nodeTemplate?.spec?.driver) {
+              return capitalize( nodeTemplate.spec.driver );
+            } else {
+              // things are not good if we get here
+              return this.$store.getters['i18n/t']('cluster.provider.rancherkubernetesengine.shortLabel');
+            }
+          }
+        }
+
+        return this.$store.getters['i18n/t'](`cluster.provider.${ driver }.shortLabel`);
+      } else if (driver) {
+        return capitalize(driver);
+      } else {
+        return this.$store.getters['i18n/t']('cluster.provider.imported.shortLabel');
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <span>
+    {{ displayProvider }}
+  </span>
+</template>

components/InfoBoxCluster.vue

@@ -2,6 +2,7 @@
 import { isEmpty } from 'lodash';
 import InfoBox from '@/components/InfoBox';
 import PercentageBar from '@/components/PercentageBar';
+import ClusterDisplayProvider from '@/components/ClusterDisplayProvider';
 import { parseSi, formatSi, exponentNeeded } from '@/utils/units';
 
 const PARSE_RULES = {
@@ -21,23 +22,47 @@ const PARSE_RULES = {
 
 export default {
   components: {
+    ClusterDisplayProvider,
     InfoBox,
     PercentageBar,
   },
 
   props: {
+    /**
+     * The cluster for info
+     */
     cluster: {
       type:     Object,
       required: true,
     },
+    /**
+     * The node metrics used for parsing CPU/MEM graphs
+     */
     metrics: {
       type:     Array,
       required: true,
     },
+    /**
+     * The nodes belonging to this cluster
+     */
     nodes: {
       type:     Array,
       required: true,
       default:  () => [],
+    },
+    /**
+     * The node pools belonging to this cluster
+     */
+    nodePools: {
+      type:     Array,
+      default:  () => [],
+    },
+    /**
+     * The node templates used to launch node pools for this cluster.
+     */
+    nodeTemplates: {
+      type:     Array,
+      default:  () => [],
     }
   },
 
@@ -160,7 +185,11 @@ export default {
           <t k="infoBoxCluster.provider" />:
         </label>
         <span class="info-row-data">
-          {{ cluster.displayProvider }}
+          <ClusterDisplayProvider
+            :cluster="cluster"
+            :node-templates="nodeTemplates"
+            :node-pools="nodePools"
+          />
         </span>
       </div>
       <div class="info-row">

config/types.js

@@ -45,11 +45,13 @@ export const NORMAN = {
 
 // Rancher Management API via Steve, /v1
 export const MANAGEMENT = {
-  // CATALOG:          'management.cattle.io.catalog',
+  CATALOG:          'management.cattle.io.catalog',
   CATALOG_TEMPLATE: 'management.cattle.io.catalogtemplate',
   CLUSTER:          'management.cattle.io.cluster',
-  // USER:             'management.cattle.io.user',
-  PREFERENCE:       'userpreference'
+  USER:             'management.cattle.io.user',
+  PREFERENCE:       'userpreference',
+  NODE_POOL:        'management.cattle.io.nodepool',
+  NODE_TEMPLATE:    'management.cattle.io.nodetemplate',
 };
 
 // Rancher cluster-scoped things that actually live in management plane

models/management.cattle.io.cluster.js

@@ -30,20 +30,6 @@ export default {
     return day(this.metadata.creationTimestamp).format(`${ dateFormat }`);
   },
 
-  displayProvider() {
-    const configName = this.configName?.toLowerCase();
-    const driver = this.status?.driver;
-    const key = `cluster.provider.${ configName }`;
-
-    if ( this.$rootGetters['i18n/exists'](key) ) {
-      return this.$rootGetters['i18n/t'](key);
-    } else if (driver && configName) {
-      return capitalize(driver);
-    } else {
-      return this.$rootGetters['i18n/t']('cluster.provider.importedconfig');
-    }
-  },
-
   canDelete() {
     return this.hasLink('remove') && !this?.spec?.internal;
   },

pages/c/_cluster/index.vue

@@ -134,9 +134,11 @@ export default {
 
     return {
       constraints:       [],
-      nodes:             [],
       events:            [],
       nodeMetrics:       [],
+      nodePools:         [],
+      nodeTemplates:     [],
+      nodes:             [],
       pollingErrorCount: 0,
       cluster,
       gatekeeperEnabled,
@@ -145,14 +147,18 @@ export default {
 
   async created() {
     const resourcesHash = await allHash({
-      allNodes:       this.fetchClusterResources(NODE),
-      allEvents:      this.fetchClusterResources(EVENT),
-      rawConstraints: this.fetchConstraints(),
+      allNodes:         this.fetchClusterResources(NODE),
+      allEvents:        this.fetchClusterResources(EVENT),
+      rawConstraints:   this.fetchConstraints(),
+      allNodeTemplates: this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE_TEMPLATE }),
+      allNodePools:     this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE_POOL }),
     });
 
     this.constraints = resourcesHash.rawConstraints;
     this.events = resourcesHash.allEvents;
     this.nodes = resourcesHash.allNodes;
+    this.nodePools = resourcesHash.allNodePools;
+    this.nodeTemplates = resourcesHash.allNodeTemplates;
   },
 
   mounted() {
@@ -260,6 +266,8 @@ export default {
       :cluster="cluster"
       :metrics="nodeMetrics"
       :nodes="nodes"
+      :node-templates="nodeTemplates"
+      :node-pools="nodePools"
     />
     <div class="row">
       <div class="col span-6 equal-height">