add mgmt cluster description to prov cluster description as fallback …

…in home cluster list and main side nav clusters (rancher#10782) * add mgmt cluster description to prov cluster description as fallbacks in home cluster list and main side nav clusters * address pr comments * add e2e to test description for rke1 cluster in home page * address pr comments
scures · Apr 20, 2024 · 7be2f2e · 7be2f2e
1 parent 75c595f
commit 7be2f2e
Show file tree

Hide file tree

Showing 7 changed files with 139 additions and 3 deletions.
diff --git a/cypress/e2e/po/components/ember/ember-textarea.po.ts b/cypress/e2e/po/components/ember/ember-textarea.po.ts
@@ -0,0 +1,33 @@
+import EmberComponentPo from '@/cypress/e2e/po/components/ember/ember-component.po';
+
+export default class EmberTextareaPo extends EmberComponentPo {
+  /**
+   * Type value in the input
+   * @param value Value to be typed
+   * @param secret Pass in true to hide sensitive data from logs
+   * @returns
+   */
+  set(value: string, secret?: boolean): Cypress.Chainable {
+    this.input().should('be.visible');
+    this.input().focus();
+    this.input().clear();
+
+    if (secret) {
+      return this.input().type(value, { log: false });
+    } else {
+      return this.input().type(value);
+    }
+  }
+
+  clear() {
+    return this.input().clear();
+  }
+
+  /**
+   * Return the input HTML element from given container
+   * @returns HTML Element
+   */
+  private input(): Cypress.Chainable {
+    return this.self();
+  }
+}
diff --git a/...ess/e2e/po/edit/provisioning.cattle.io.cluster/create/cluster-create-rke1-amazonec2.po.ts b/...ess/e2e/po/edit/provisioning.cattle.io.cluster/create/cluster-create-rke1-amazonec2.po.ts
@@ -6,6 +6,7 @@ import EmberAccordionPo from '@/cypress/e2e/po/components/ember/ember-accordion.
 import EmberFormMembersPo from '@/cypress/e2e/po/components/ember/ember-form-members.po';
 import EmberCheckboxInputPo from '@/cypress/e2e/po/components/ember/ember-checkbox-input.po';
 import EmberSelectPo from '@/cypress/e2e/po/components/ember/ember-select.po';
+import EmberTextareaPo from '@/cypress/e2e/po/components/ember/ember-textarea.po';
 import EmberModalAddNodeTemplateAwsPo from '@/cypress/e2e/po/components/ember/ember-modal-add-node-template-aws.po';
 import EmberFormNodePoolsPo from '@/cypress/e2e/po/components/ember/ember-form-node-pools.po';
 import EmberKubernetesOptionsPo from '@/cypress/e2e/po/components/ember/ember-kubernetes-options.po';
@@ -30,6 +31,14 @@ export default class ClusterManagerCreateRke1Amazonec2PagePo extends ClusterMana
     return new EmberInputPo('[data-testid="form-name-description__name"]');
   }
 
+  addDescriptionButtonClick() {
+    cy.iFrame().find('.pull-right.text-small a').contains('Add a Description').click();
+  }
+
+  clusterDescription():EmberTextareaPo {
+    return new EmberTextareaPo('.ember-text-area.description.ember-view');
+  }
+
   nodePoolTable(): EmberFormNodePoolsPo {
     return new EmberFormNodePoolsPo('div.ember-view');
   }

diff --git a/cypress/e2e/tests/pages/manager/cluster-provisioning-amazon-ec2-rke1.spec.ts b/cypress/e2e/tests/pages/manager/cluster-provisioning-amazon-ec2-rke1.spec.ts
@@ -14,6 +14,9 @@ describe('Provision Node driver RKE1 cluster with AWS', { testIsolation: 'off',
   let cloudcredentialId = '';
   let nodeTemplateId = '';
 
+  const homePage = new HomePagePo();
+  const homeClusterList = homePage.list();
+
   before(() => {
     cy.login();
     HomePagePo.goTo();
@@ -55,6 +58,7 @@ describe('Provision Node driver RKE1 cluster with AWS', { testIsolation: 'off',
   beforeEach(() => {
     cy.viewport(1440, 900);
     cy.createE2EResourceName('rke1ec2cluster').as('rke1Ec2ClusterName');
+    cy.createE2EResourceName('rke1ec2clusterdesc').as('rke1Ec2ClusterDescription');
     cy.createE2EResourceName('template').as('templateName');
     cy.createE2EResourceName('node').as('nodeName');
     cy.getRancherResource('v3', 'clusters', null, null).then((resp: Cypress.Response<any>) => {
@@ -113,6 +117,8 @@ describe('Provision Node driver RKE1 cluster with AWS', { testIsolation: 'off',
     createRKE1ClusterPage.waitForPage('type=amazonec2&rkeType=rke1');
     createRKE1ClusterPage.rke1PageTitle().should('contain', 'Add Cluster - Amazon EC2');
     createRKE1ClusterPage.clusterName().set(this.rke1Ec2ClusterName);
+    createRKE1ClusterPage.addDescriptionButtonClick();
+    createRKE1ClusterPage.clusterDescription().set(this.rke1Ec2ClusterDescription);
     createRKE1ClusterPage.nodePoolTable().name(1).set(this.nodeName);
     createRKE1ClusterPage.nodePoolTable().count(1).set('1');
     createRKE1ClusterPage.nodePoolTable().template(1).checkOptionSelected(this.templateName);
@@ -170,6 +176,13 @@ describe('Provision Node driver RKE1 cluster with AWS', { testIsolation: 'off',
         .next('tr.main-row')
         .should('contain', 'Active');
     });
+
+    // https://github.com/rancher/dashboard/issues/10441 - covering RKE1/ember world descriptions
+    HomePagePo.navTo();
+    const desc = homeClusterList.resourceTable().sortableTable().rowWithName(this.rke1Ec2ClusterName).column(1)
+      .get('.cluster-description');
+
+    desc.contains(this.rke1Ec2ClusterDescription);
   });
 
   it('can add a node to the cluster', function() {

diff --git a/shell/components/nav/TopLevelMenu.vue b/shell/components/nav/TopLevelMenu.vue
@@ -128,7 +128,7 @@ export default {
           isLocal:         x.isLocal,
           isHarvester:     x.isHarvester,
           pinned:          x.pinned,
-          description:     pCluster?.description,
+          description:     pCluster?.description || x.description,
           pin:             () => x.pin(),
           unpin:           () => x.unpin(),
           clusterRoute:    { name: 'c-cluster-explorer', params: { cluster: x.id } }

diff --git a/shell/components/nav/__tests__/TopLevelMenu.test.ts b/shell/components/nav/__tests__/TopLevelMenu.test.ts
@@ -45,6 +45,7 @@ describe('topLevelMenu', () => {
             // from which the "description" field comes from
             // This is triggered by the "hasProvCluster" above
             // (check all "management/all" getters on the component code)
+            // https://github.com/rancher/dashboard/issues/10441
             'management/all': () => [
               // pinned ready cluster
               {
@@ -101,6 +102,70 @@ describe('topLevelMenu', () => {
     expect(description4.text()).toStrictEqual('some-description4');
   });
 
+  it('should show description if it is available on the mgmt cluster (relevant for RKE1/ember world)', async() => {
+    const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+      data: () => {
+        return { hasProvCluster: false, showPinClusters: true };
+      },
+      mocks: {
+        $store: {
+          getters: {
+            // "hasProvCluster" as false will make this getter
+            // a mgmt cluster only return, therefore covering the
+            // scenario where descriptions come from RKE1/ember world clusters
+            // https://github.com/rancher/dashboard/issues/10441
+            'management/all': () => [
+              // pinned ready cluster
+              {
+                name:        'whatever',
+                id:          'an-id1',
+                description: 'some-description1',
+                nameDisplay: 'some-label',
+                isReady:     true,
+                pinned:      true
+              },
+              // pinned NOT ready cluster
+              {
+                name:        'whatever',
+                id:          'an-id2',
+                description: 'some-description2',
+                nameDisplay: 'some-label',
+                pinned:      true
+              },
+              // unpinned ready cluster
+              {
+                name:        'whatever',
+                id:          'an-id3',
+                description: 'some-description3',
+                nameDisplay: 'some-label',
+                isReady:     true
+              },
+              // unpinned NOT ready cluster
+              {
+                name:        'whatever',
+                id:          'an-id4',
+                description: 'some-description4',
+                nameDisplay: 'some-label'
+              },
+            ],
+            ...defaultStore
+          },
+        },
+      },
+      stubs: ['BrandImage', 'router-link']
+    });
+
+    const description1 = wrapper.find('[data-testid="pinned-menu-cluster-an-id1"] .description');
+    const description2 = wrapper.find('[data-testid="pinned-menu-cluster-disabled-an-id2"] .description');
+    const description3 = wrapper.find('[data-testid="menu-cluster-an-id3"] .description');
+    const description4 = wrapper.find('[data-testid="menu-cluster-disabled-an-id4"] .description');
+
+    expect(description1.text()).toStrictEqual('some-description1');
+    expect(description2.text()).toStrictEqual('some-description2');
+    expect(description3.text()).toStrictEqual('some-description3');
+    expect(description4.text()).toStrictEqual('some-description4');
+  });
+
   it('should not "crash" the component if the structure of banner settings is in an old format', () => {
     const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
       mocks: {

diff --git a/shell/pages/home.vue b/shell/pages/home.vue
@@ -91,6 +91,10 @@ export default {
     ...mapGetters(['currentCluster', 'defaultClusterId', 'releaseNotesUrl']),
     mcm: mapFeature(MULTI_CLUSTER),
 
+    mgmtClusters() {
+      return this.$store.getters['management/all'](MANAGEMENT.CLUSTER);
+    },
+
     provClusters() {
       return this.$store.getters['management/all'](CAPI.RANCHER_CLUSTER);
     },
@@ -207,7 +211,15 @@ export default {
     },
 
     kubeClusters() {
-      return filterHiddenLocalCluster(filterOnlyKubernetesClusters(this.provClusters || [], this.$store), this.$store);
+      const filteredClusters = filterHiddenLocalCluster(filterOnlyKubernetesClusters(this.provClusters || [], this.$store), this.$store);
+
+      return filteredClusters.map((provCluster) => {
+        const mgmtCluster = this.mgmtClusters?.find((c) => provCluster.mgmt?.id === c.id);
+
+        provCluster.description = provCluster.description || mgmtCluster?.description;
+
+        return provCluster;
+      });
     }
   },
 

diff --git a/shell/plugins/steve/hybrid-class.js b/shell/plugins/steve/hybrid-class.js
@@ -1,4 +1,4 @@
-import { ANNOTATIONS_TO_IGNORE_REGEX, LABELS_TO_IGNORE_REGEX } from '@shell/config/labels-annotations';
+import { ANNOTATIONS_TO_IGNORE_REGEX, LABELS_TO_IGNORE_REGEX, DESCRIPTION } from '@shell/config/labels-annotations';
 import omitBy from 'lodash/omitBy';
 import pickBy from 'lodash/pickBy';
 import Vue from 'vue';
@@ -100,4 +100,8 @@ export default class HybridModel extends Resource {
   get state() {
     return this.stateObj?.name || 'unknown';
   }
+
+  get description() {
+    return this.metadata?.annotations?.[DESCRIPTION] || this.spec?.description || this._description;
+  }
 }