mgr/dashboard: fix cephadm e2e failure

- fix add host failure because of cds-tag migration
- fix draining issue where start/stop toggle was not working properly
- supress an undefined class error in cypress which is raised in
  different place from table component

Signed-off-by: Nizamudeen A <[email protected]>

Author: nizamial09

src/pybind/mgr/dashboard/frontend/cypress/e2e/cluster/hosts.po.ts

@@ -95,7 +95,7 @@ export class HostsPageHelper extends PageHelper {
     this.getTableCell(this.columnIndex.hostname, hostname, true).as('row').click();
     cy.get('@row')
       .parent()
-      .find(`[cdstabledata]:nth-child(${this.columnIndex.labels}) .tag`)
+      .find(`[cdstabledata]:nth-child(${this.columnIndex.labels}) cds-tag span`)
       .should(($ele) => {
         const newLabels = $ele.toArray().map((v) => v.innerText);
         for (const label of labels) {

src/pybind/mgr/dashboard/frontend/cypress/e2e/cluster/services.po.ts

@@ -155,6 +155,7 @@ export class ServicesPageHelper extends PageHelper {
       }
 
       cy.get('cd-service-daemon-list').within(() => {
+        cy.wait(1000); // wait for the status to be updated
         this.getTableCell(daemonNameIndex, daemon, true)
           .parent()
           .find(`[cdstabledata]:nth-child(${statusIndex}) cds-tag`)

src/pybind/mgr/dashboard/frontend/cypress/e2e/common/grafana.feature.po.ts

@@ -26,8 +26,10 @@ When('I view the grafana panel {string}', (panels: string) => {
       cy.get('.grafana-app')
         .wait(WAIT_TO_LOAD)
         .within(() => {
-          cy.get(`[data-testid="data-testid Panel header ${panel}"]`).click();
-          cy.get(`[aria-label="Menu for panel with title ${panel}"]`).click();
+          cy.contains('[data-testid="data-testid header-container"] h2', panel)
+            .closest('[data-testid="data-testid header-container"]')
+            .click();
+          cy.get(`[data-testid="data-testid Panel menu ${panel}"]`).click();
         });
 
       cy.get('[data-testid="data-testid Panel menu item View"]').click();

src/pybind/mgr/dashboard/frontend/cypress/e2e/common/table-helper.feature.po.ts

@@ -79,7 +79,7 @@ And('I should see row {string} have {string}', (row: string, options: string) =>
   if (options) {
     cy.get('.cds--search-input').first().clear().type(row);
     for (const option of options.split(',')) {
-      cy.contains(`[cdstablerow] [cdstabledata] .tag`, option).should('exist');
+      cy.contains(`[cdstablerow] [cdstabledata] cds-tag span`, option).should('exist');
     }
   }
 });

src/pybind/mgr/dashboard/frontend/cypress/e2e/orchestrator/grafana/grafana.feature

@@ -37,7 +37,6 @@ Feature: Grafana panels
             | Total Requests/sec by RGW Instance | foo.ceph-node-00, foo.ceph-node-01, foo.ceph-node-02 |
             | GET Latencies by RGW Instance | foo.ceph-node-00, foo.ceph-node-01, foo.ceph-node-02 |
             | Bandwidth by RGW Instance | foo.ceph-node-00, foo.ceph-node-01, foo.ceph-node-02 |
-            | PUT Latencies by RGW Instance | foo.ceph-node-00, foo.ceph-node-01, foo.ceph-node-02 |
             | Average GET/PUT Latencies by RGW Instance | GET, PUT |
             | Bandwidth Consumed by Type | GETs, PUTs |
 

src/pybind/mgr/dashboard/frontend/cypress/e2e/page-helper.po.ts

@@ -316,7 +316,7 @@ export abstract class PageHelper {
       .find('[cdstabledata] [data-testid="table-action-btn"]')
       .click({ force: true });
     cy.wait(waitTime);
-    cy.get(`button.${action}`).click({ force: true });
+    cy.get(`button.${action}`).should('not.be.disabled').click({ force: true });
   }
 
   /**

src/pybind/mgr/dashboard/frontend/cypress/support/e2e.ts

@@ -8,11 +8,13 @@ afterEach(() => {
 });
 
 Cypress.on('uncaught:exception', (err: Error) => {
-  if (
-    err.message.includes('ResizeObserver loop limit exceeded') ||
-    err.message.includes('api/prometheus/rules') ||
-    err.message.includes('NG0100: ExpressionChangedAfterItHasBeenCheckedError')
-  ) {
+  const ignoredErrors = [
+    'ResizeObserver loop limit exceeded',
+    'api/prometheus/rules',
+    'NG0100: ExpressionChangedAfterItHasBeenCheckedError',
+    'NgClass can only toggle CSS classes'
+  ];
+  if (ignoredErrors.some((error) => err.message.includes(error))) {
     return false;
   }
   return true;

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html

@@ -72,7 +72,7 @@
 
 <ng-template #hostNameTpl
              let-row="data.row">
-  <span [ngClass]="row">
+  <span>
     {{ row.hostname }}
   </span><br>
   <span class="text-muted fst-italic"

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.ts

@@ -97,7 +97,7 @@ export class HostsComponent extends ListWithDetails implements OnDestroy, OnInit
   isExecuting = false;
   errorMessage: string;
   enableMaintenanceBtn: boolean;
-  enableDrainBtn: boolean;
+  draining: boolean = false;
   bsModalRef: NgbModalRef;
 
   icons = Icons;
@@ -133,6 +133,9 @@ export class HostsComponent extends ListWithDetails implements OnDestroy, OnInit
   ) {
     super();
     this.permissions = this.authStorageService.getPermissions();
+  }
+
+  ngOnInit() {
     this.expandClusterActions = [
       {
         name: this.actionLabels.EXPAND_CLUSTER,
@@ -169,18 +172,14 @@ export class HostsComponent extends ListWithDetails implements OnDestroy, OnInit
         permission: 'update',
         icon: Icons.exit,
         click: () => this.hostDrain(),
-        disable: (selection: CdTableSelection) =>
-          this.getDisable('drain', selection) || !this.enableDrainBtn,
-        visible: () => !this.showGeneralActionsOnly && this.enableDrainBtn
+        visible: () => !this.showGeneralActionsOnly && !this.draining
       },
       {
         name: this.actionLabels.STOP_DRAIN,
         permission: 'update',
         icon: Icons.exit,
         click: () => this.hostDrain(true),
-        disable: (selection: CdTableSelection) =>
-          this.getDisable('drain', selection) || this.enableDrainBtn,
-        visible: () => !this.showGeneralActionsOnly && !this.enableDrainBtn
+        visible: () => !this.showGeneralActionsOnly && this.draining
       },
       {
         name: this.actionLabels.REMOVE,
@@ -212,9 +211,6 @@ export class HostsComponent extends ListWithDetails implements OnDestroy, OnInit
         visible: () => !this.showGeneralActionsOnly && this.enableMaintenanceBtn
       }
     ];
-  }
-
-  ngOnInit() {
     this.columns = [
       {
         name: $localize`Hostname`,
@@ -305,15 +301,14 @@ export class HostsComponent extends ListWithDetails implements OnDestroy, OnInit
   updateSelection(selection: CdTableSelection) {
     this.selection = selection;
     this.enableMaintenanceBtn = false;
-    this.enableDrainBtn = false;
     if (this.selection.hasSelection) {
       if (this.selection.first().status === 'maintenance') {
         this.enableMaintenanceBtn = true;
       }
 
-      if (!this.selection.first().labels.includes('_no_schedule')) {
-        this.enableDrainBtn = true;
-      }
+      this.selection.first().labels.includes('_no_schedule')
+        ? (this.draining = true)
+        : (this.draining = false);
     }
   }