Improve machine pools when there are a large number of machines (#6132)

* Improve cluster details machne pools information

* Remove unused code

shell/assets/translations/en-us.yaml

@@ -1447,6 +1447,13 @@ cluster:
     os: 'You are attemping to add a {newOS} worker node to a cluster with one or more {existingOS} worker nodes: some installed apps may need to be upgraded or removed.'
     rke2-k3-reprovisioning: 'Making changes to cluster configuration may result in nodes reprovisioning. For more information see the <a target="blank" href="{docsBase}/cluster-provisioning/rke-clusters/behavior-differences-between-rke1-and-rke2/" target="_blank" rel="noopener nofollow">documentation</a>.'
 
+  detail:
+    provisioner: Provisioner
+    kubernetesVersion: Kubernetes Version
+    machineProvider: Machine Provider
+    machinePools: Machine Pools
+    machines: Machines
+
   machinePool:
     name:
       label: Pool Name
@@ -4024,7 +4031,7 @@ resourceTable:
     notInAWorkspace: Not in a Workspace
     workspace: "<span>Workspace:</span> {name}"
     notInANodePool: "Not in a Pool"
-    nodePool: "<span>Pool:</span> {name} ({count})"
+    nodePool: "<span>Pool:</span> {name}"
     node: "<span>Node:</span> {name}"
 
 resourceTabs:

shell/components/formatter/Capitalize.vue

@@ -4,6 +4,10 @@ export default {
     value: {
       type:    String,
       default: ''
+    },
+    col: {
+      type:    Object,
+      default: () => {}
     }
   },
   computed: {
@@ -17,5 +21,8 @@ export default {
 <template>
   <span>
     {{ capitalized }}
+    <template v-if="!capitalized && col.dashIfEmpty">
+      <span class="text-muted">&mdash;</span>
+    </template>
   </span>
 </template>

shell/components/formatter/LinkDetail.vue

@@ -11,6 +11,10 @@ export default {
       type:     Object,
       required: true
     },
+    col: {
+      type:     Object,
+      default:  () => {}
+    },
     reference: {
       type:    String,
       default: null,
@@ -31,7 +35,7 @@ export default {
       }
 
       return this.row?.detailLocation;
-    },
+    }
   }
 };
 </script>
@@ -41,6 +45,11 @@ export default {
     <n-link v-if="to" :to="to">
       {{ value }}
     </n-link>
-    <span v-else>{{ value }}</span>
+    <span v-else>
+      {{ value }}
+      <template v-if="!value && col.dashIfEmpty">
+        <span class="text-muted">&mdash;</span>
+      </template>
+    </span>
   </span>
 </template>

shell/components/formatter/MachineSummaryGraph.vue

@@ -9,22 +9,22 @@ export default {
       type:     Object,
       required: true
     },
+    horizontal: {
+      type:    Boolean,
+      default: false
+    }
   },
 };
 </script>
 
 <template>
   <v-popover
-    class="text-center hand"
+    class="text-center hand machine-summary-graph"
     placement="top"
     :open-group="row.id"
     trigger="click"
     offset="1"
   >
-    <ProgressBarMulti v-if="row.stateParts" :values="row.stateParts" class="mb-5" />
-    <span v-if="row.desired === row.ready">{{ row.ready }}</span>
-    <span v-else>{{ row.ready }} of {{ row.desired }}</span>
-
     <template #popover>
       <table class="fixed">
         <tbody>
@@ -39,5 +39,40 @@ export default {
         </tbody>
       </table>
     </template>
+
+    <div class="content" :class="{ horizontal }">
+      <ProgressBarMulti v-if="row.stateParts" :values="row.stateParts" class="progress-bar" />
+      <span v-if="row.desired === row.ready" class="count">{{ row.ready }}</span>
+      <span v-else class="count">{{ row.ready }} of {{ row.desired }}</span>
+    </div>
   </v-popover>
 </template>
+
+<style lang="scss" scoped>
+  .machine-summary-graph {
+    display: flex;
+    align-items: center;
+
+    .content {
+      .progress-bar {
+        margin-bottom: 5px;
+      }
+
+      &.horizontal {
+        // When horizontal, put the number before the graph
+        align-items: center;
+        direction: rtl;
+        display: flex;
+
+        > * {
+          direction: ltr;
+        }
+
+        .progress-bar {
+          margin-bottom: 0;
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+</style>

shell/config/table-headers.js

@@ -879,19 +879,21 @@ export const KUBE_NODE_OS = {
 };
 
 export const MACHINE_NODE_OS = {
-  name:      'operating-system',
-  labelKey:  'tableHeaders.operatingSystem',
-  value:     'operatingSystem',
-  sort:      ['operatingSystem'],
-  formatter: 'Capitalize'
+  name:        'operating-system',
+  labelKey:    'tableHeaders.operatingSystem',
+  value:       'operatingSystem',
+  sort:        ['operatingSystem'],
+  formatter:   'Capitalize',
+  dashIfEmpty: true,
 };
 
 export const MANAGEMENT_NODE_OS = {
-  name:      'operating-system',
-  labelKey:  'tableHeaders.operatingSystem',
-  value:     'status.internalNodeStatus.nodeInfo.operatingSystem',
-  sort:      ['status.internalNodeStatus.nodeInfo.operatingSystem'],
-  formatter: 'Capitalize'
+  name:        'operating-system',
+  labelKey:    'tableHeaders.operatingSystem',
+  value:       'status.internalNodeStatus.nodeInfo.operatingSystem',
+  sort:        ['status.internalNodeStatus.nodeInfo.operatingSystem'],
+  formatter:   'Capitalize',
+  dashIfEmpty: true,
 };
 
 // FLEET
@@ -917,5 +919,4 @@ export const IP_ADDRESS = {
   name:          'ipaddress',
   value:         'ipaddress',
   labelKey:      'tableHeaders.ipaddress',
-
 };

shell/detail/provisioning.cattle.io.cluster.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,
@@ -43,6 +43,7 @@ export default {
     CopyCode,
     CustomCommand,
     AsyncButton,
+    MachineSummaryGraph,
   },
 
   props: {
@@ -188,6 +189,19 @@ 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 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
@@ -249,7 +263,8 @@ 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,
@@ -267,7 +282,8 @@ export default {
           sort:          'kubeNodeName',
           value:         'kubeNodeName',
           formatter:     'LinkDetail',
-          formatterOpts: { reference: 'kubeNodeDetailLocation' }
+          formatterOpts: { reference: 'kubeNodeDetailLocation' },
+          dashIfEmpty:   true,
         },
         IP_ADDRESS,
         MANAGEMENT_NODE_OS,
@@ -564,7 +580,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>
@@ -572,7 +588,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" />
@@ -683,6 +700,10 @@ export default {
       }
     }
   }
+  .group-header-buttons {
+    align-items: center;
+    display: flex;
+  }
 }
 
 .logs-container {

shell/models/provisioning.cattle.io.cluster.js

@@ -15,17 +15,25 @@ export default class ProvCluster extends SteveModel {
   get details() {
     const out = [
       {
-        label:   'Provisioner',
+        label:   this.t('cluster.detail.provisioner'),
         content: this.provisionerDisplay || this.t('generic.none'),
       },
       {
-        label:   'Machine Provider',
+        label:   this.t('cluster.detail.machineProvider'),
         content: this.machineProvider ? this.machineProviderDisplay : null,
       },
       {
-        label:   'Kubernetes Version',
+        label:   this.t('cluster.detail.kubernetesVersion'),
         content: this.kubernetesVersion,
       },
+      {
+        label:   this.t('cluster.detail.machinePools'),
+        content: this.pools.length,
+      },
+      {
+        label:   this.t('cluster.detail.machines'),
+        content: this.desired,
+      },
     ].filter(x => !!x.content);
 
     if (!this.machineProvider) {