Fleet: Add CLusters labels

cypress/e2e/po/lists/fleet/fleet.cattle.io.cluster.po.ts

@@ -7,4 +7,8 @@ export default class FleetClusterList extends BaseResourceList {
   details(name: string, index: number) {
     return this.resourceTable().sortableTable().rowWithName(name).column(index);
   }
+
+  subRows() {
+    return this.resourceTable().sortableTable().subRows();
+  }
 }

cypress/e2e/tests/pages/fleet/fleet-clusters.spec.ts

@@ -70,7 +70,8 @@ describe('Fleet Clusters', { tags: ['@fleet', '@adminUser'] }, () => {
           rke2ClusterAmazon: {
             clusterName: name,
             namespace,
-          }
+          },
+          metadata: { labels: { foo: 'bar' } }
         }).then(() => {
           removeCluster = true;
         });
@@ -123,6 +124,8 @@ describe('Fleet Clusters', { tags: ['@fleet', '@adminUser'] }, () => {
       fleetClusterListPage.clusterList().details(clusterName, 4).should('have.text', '1');
       // check resources: testing https://github.com/rancher/dashboard/issues/11154
       fleetClusterListPage.clusterList().details(clusterName, 5).contains( ' 1 ', MEDIUM_TIMEOUT_OPT);
+      // check cluster labels
+      fleetClusterListPage.clusterList().subRows().should('contain.text', 'foo=bar');
 
       const fleetClusterDetailsPage = new FleetClusterDetailsPo(namespace, clusterName);
 

cypress/globals.d.ts

@@ -29,7 +29,7 @@ export type CreateAmazonRke2ClusterParams = {
     type: string,
     clusterName: string,
     namespace: string
-},
+  },
   cloudCredentialsAmazon: {
     workspace: string,
     name: string,
@@ -40,7 +40,11 @@ export type CreateAmazonRke2ClusterParams = {
   rke2ClusterAmazon: {
     clusterName: string,
     namespace: string,
-  }
+  },
+  metadata?: {
+    labels?: { [key: string]: string },
+    annotations?: { [key: string]: string },
+  },
 }
 export type CreateAmazonRke2ClusterWithoutMachineConfigParams = {
   cloudCredentialsAmazon: {

cypress/support/commands/rancher-api-commands.ts

@@ -602,7 +602,9 @@ Cypress.Commands.add('deleteNodeTemplate', (nodeTemplateId, timeout = 30000, fai
  * Create RKE2 cluster with Amazon EC2 cloud provider
  */
 Cypress.Commands.add('createAmazonRke2Cluster', (params: CreateAmazonRke2ClusterParams) => {
-  const { machineConfig, rke2ClusterAmazon, cloudCredentialsAmazon } = params;
+  const {
+    machineConfig, rke2ClusterAmazon, cloudCredentialsAmazon, metadata
+  } = params;
 
   return cy.createAwsCloudCredentials(cloudCredentialsAmazon.workspace, cloudCredentialsAmazon.name, cloudCredentialsAmazon.region, cloudCredentialsAmazon.accessKey, cloudCredentialsAmazon.secretKey)
     .then((resp: Cypress.Response<any>) => {
@@ -625,8 +627,12 @@ Cypress.Commands.add('createAmazonRke2Cluster', (params: CreateAmazonRke2Cluster
               type:     'provisioning.cattle.io.cluster',
               metadata: {
                 namespace:   rke2ClusterAmazon.namespace,
-                annotations: { 'field.cattle.io/description': `${ rke2ClusterAmazon.clusterName }-description` },
-                name:        rke2ClusterAmazon.clusterName
+                annotations: {
+                  'field.cattle.io/description': `${ rke2ClusterAmazon.clusterName }-description`,
+                  ...(metadata?.annotations || {}),
+                },
+                labels: metadata?.labels || {},
+                name:   rke2ClusterAmazon.clusterName
               },
               spec: {
                 rkeConfig: {

shell/assets/translations/en-us.yaml

@@ -2385,6 +2385,9 @@ fleet:
   cluster:
     summary: Resource Summary
     nonReady: Non-Ready Bundles
+    labels: Labels
+    hideLabels: Show less
+    showLabels: Show more
   clusters:
     harvester: |-
       There {count, plural,

shell/components/fleet/FleetClusters.vue

@@ -1,10 +1,11 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
+import Tag from '@shell/components/Tag.vue';
 import { STATE, NAME, AGE, FLEET_SUMMARY } from '@shell/config/table-headers';
 import { FLEET, MANAGEMENT } from '@shell/config/types';
 
 export default {
-  components: { ResourceTable },
+  components: { ResourceTable, Tag },
 
   props: {
     rows: {
@@ -75,6 +76,12 @@ export default {
         pluralLabel:   this.$store.getters['type-map/labelFor'](schema, 99),
       };
     },
+  },
+
+  methods: {
+    toggleCustomLabels(row) {
+      row['displayCustomLabels'] = !row.displayCustomLabels;
+    }
   }
 };
 </script>
@@ -85,6 +92,7 @@ export default {
     :schema="schema"
     :headers="headers"
     :rows="rows"
+    :sub-rows="true"
     :loading="loading"
     :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
     key-field="_key"
@@ -123,5 +131,78 @@ export default {
         :class="{'text-error': !row.bundleInfo.total}"
       >{{ row.bundleInfo.total }}</span>
     </template>
+
+    <template #sub-row="{fullColspan, row, onRowMouseEnter, onRowMouseLeave}">
+      <tr
+        class="labels-row sub-row"
+        @mouseenter="onRowMouseEnter"
+        @mouseleave="onRowMouseLeave"
+      >
+        <template v-if="row.customLabels.length">
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+          <td :colspan="fullColspan-2">
+            <span
+              v-if="row.customLabels.length"
+              class="mt-5"
+            > {{ t('fleet.cluster.labels') }}:
+              <span
+                v-for="(label, i) in row.customLabels"
+                :key="i"
+                class="mt-5 labels"
+              >
+                <Tag
+                  v-if="i < 7"
+                  class="mr-5 label"
+                >
+                  {{ label }}
+                </Tag>
+                <Tag
+                  v-else-if="i > 6 && row.displayCustomLabels"
+                  class="mr-5 label"
+                >
+                  {{ label }}
+                </Tag>
+              </span>
+              <a
+                v-if="row.customLabels.length > 7"
+                href="#"
+                @click.prevent="toggleCustomLabels(row)"
+              >
+                {{ t(`fleet.cluster.${row.displayCustomLabels? 'hideLabels' : 'showLabels'}`) }}
+              </a>
+            </span>
+          </td>
+        </template>
+        <td
+          v-else
+          :colspan="fullColspan"
+        >
+&nbsp;
+        </td>
+      </tr>
+    </template>
   </ResourceTable>
 </template>
+
+<style lang='scss' scoped>
+  .labels-row {
+    td {
+      padding-top:0;
+      .tag {
+        margin-right: 5px;
+        display: inline-block;
+        margin-top: 2px;
+      }
+    }
+  }
+  .labels {
+    display: inline;
+    flex-wrap: wrap;
+
+    .label {
+      display: inline-block;
+      margin-top: 2px;
+    }
+  }
+</style>

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

@@ -1,5 +1,5 @@
 import { LOCAL_CLUSTER, MANAGEMENT, NORMAN } from '@shell/config/types';
-import { CAPI, FLEET as FLEET_LABELS } from '@shell/config/labels-annotations';
+import { CAPI, FLEET as FLEET_LABELS, SYSTEM_LABELS } from '@shell/config/labels-annotations';
 import { _RKE2 } from '@shell/store/prefs';
 import SteveModel from '@shell/plugins/steve/steve-class';
 import { escapeHtml } from '@shell/utils/string';
@@ -190,6 +190,22 @@ export default class FleetCluster extends SteveModel {
     }
   }
 
+  get customLabels() {
+    const parsedLabels = [];
+
+    if (this.labels) {
+      for (const k in this.labels) {
+        const [prefix] = k.split('/');
+
+        if (!SYSTEM_LABELS.includes(prefix) && k !== CAPI.PROVIDER) {
+          parsedLabels.push(`${ k }=${ this.labels[k] }`);
+        }
+      }
+    }
+
+    return parsedLabels;
+  }
+
   async saveYaml(yaml) {
     await this._saveYaml(yaml);