Merge pull request ceph#58485 from ivoalmeida/carbon-datatable

mgr/dashboard: replace ngx-datatable by carbon datatable

Reviewed-by: Ernesto Puerta <[email protected]>
Reviewed-by: Nizamudeen A <[email protected]>

Author: nizamial09

src/pybind/mgr/dashboard/frontend/cypress/e2e/block/images.po.ts

@@ -45,15 +45,15 @@ export class ImagesPageHelper extends PageHelper {
   // checks that it is present in the trash table
   moveToTrash(name: string) {
     // wait for image to be created
-    cy.get('.datatable-body').first().should('not.contain.text', '(Creating...)');
+    cy.get('cds-table table tbody').first().should('not.contain.text', '(Creating...)');
 
     this.getFirstTableCell(name).click();
 
     // click on the drop down and selects the move to trash option
-    cy.get('.table-actions button.dropdown-toggle').first().click();
-    cy.get('button.move-to-trash').click();
+    cy.get('[data-testid="table-action-btn"]').click({ multiple: true });
+    cy.get('button.move-to-trash').click({ force: true });
 
-    cy.get('[data-cy=submitBtn]').should('be.visible').click();
+    cy.get('[data-cy=submitBtn] button').should('be.visible').click({ force: true });
 
     // Clicks trash tab
     cy.contains('.nav-link', 'Trash').click();
@@ -68,7 +68,8 @@ export class ImagesPageHelper extends PageHelper {
 
     // wait for table to load
     this.getFirstTableCell(name).click();
-    cy.contains('button', 'Restore').click();
+    cy.get('[data-testid="table-action-btn"]').click({ multiple: true });
+    cy.get('button.restore').click({ force: true });
 
     // wait for pop-up to be visible (checks for title of pop-up)
     cy.get('cds-modal #name').should('be.visible');

src/pybind/mgr/dashboard/frontend/cypress/e2e/block/mirroring.e2e-spec.ts

@@ -71,7 +71,6 @@ describe('Mirroring page', () => {
           cy.get('cd-pool-list').should('exist');
 
           cy.visit('#/block/mirroring').wait(1000);
-          cy.get('.table-actions button.dropdown-toggle').first().click();
           cy.get('[aria-label="Import Bootstrap Token"]').click();
           cy.get('cd-bootstrap-import-modal').within(() => {
             cy.get(`input[name=${name}]`).click({ force: true });
@@ -101,13 +100,14 @@ describe('Mirroring page', () => {
 
     it('tests editing mode for pools', () => {
       mirroring.navigateTo();
-
-      mirroring.editMirror(poolName, 'Pool');
-      mirroring.getFirstTableCell('pool').should('be.visible');
-      mirroring.editMirror(poolName, 'Image');
-      mirroring.getFirstTableCell('image').should('be.visible');
-      mirroring.editMirror(poolName, 'Disabled');
-      mirroring.getFirstTableCell('disabled').should('be.visible');
+      cy.get('cd-mirroring-pools').within(() => {
+        mirroring.editMirror(poolName, 'Pool');
+        mirroring.getFirstTableCell('pool').should('be.visible');
+        mirroring.editMirror(poolName, 'Image');
+        mirroring.getFirstTableCell('image').should('be.visible');
+        mirroring.editMirror(poolName, 'Disabled');
+        mirroring.getFirstTableCell('disabled').should('be.visible');
+      });
     });
 
     afterEach(() => {

src/pybind/mgr/dashboard/frontend/cypress/e2e/block/mirroring.po.ts

@@ -19,10 +19,7 @@ export class MirroringPageHelper extends PageHelper {
   @PageHelper.restrictTo(pages.index.url)
   editMirror(name: string, option: string) {
     // Clicks the pool in the table
-    this.getFirstTableCell(name).click();
-
-    // Clicks the Edit Mode button
-    cy.contains('button', 'Edit Mode').click();
+    this.clickRowActionButton(name, 'edit-mode');
 
     // Clicks the drop down in the edit pop-up, then clicks the Update button
     cy.get('cds-modal').should('be.visible');
@@ -37,7 +34,7 @@ export class MirroringPageHelper extends PageHelper {
 
   @PageHelper.restrictTo(pages.index.url)
   generateToken(poolName: string) {
-    cy.get('[aria-label="Create Bootstrap Token"]').first().click();
+    cy.get('[aria-label="Create Bootstrap Token"]').click();
     cy.get('cd-bootstrap-create-modal').within(() => {
       cy.get(`input[name=${poolName}]`).click({ force: true });
       cy.get('button[type=submit]').click();
@@ -51,7 +48,7 @@ export class MirroringPageHelper extends PageHelper {
     cy.get('cd-mirroring-pools').within(() => {
       this.getTableCell(this.poolsColumnIndex.name, poolName)
         .parent()
-        .find(`datatable-body-cell:nth-child(${this.poolsColumnIndex.health}) .badge`)
+        .find(`[cdstabledata]:nth-child(${this.poolsColumnIndex.health}) .badge`)
         .should(($ele) => {
           const newLabels = $ele.toArray().map((v) => v.innerText);
           expect(newLabels).to.include(status);

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

@@ -10,9 +10,11 @@ export class ConfigurationPageHelper extends PageHelper {
    * Does not work for configs with checkbox only, possible future PR
    */
   configClear(name: string) {
+    this.navigateTo();
     const valList = ['global', 'mon', 'mgr', 'osd', 'mds', 'client']; // Editable values
 
-    this.navigateEdit(name);
+    this.getFirstTableCell(name).click();
+    cy.contains('button', 'Edit').click();
     // Waits for the data to load
     cy.contains('.card-header', `Edit ${name}`);
 
@@ -22,8 +24,10 @@ export class ConfigurationPageHelper extends PageHelper {
     // Clicks save button and checks that values are not present for the selected config
     cy.get('[data-cy=submitBtn]').click();
 
+    cy.wait(3 * 1000);
+
     // Enter config setting name into filter box
-    this.searchTable(name);
+    this.searchTable(name, 100);
 
     // Expand row
     this.getExpandCollapseElement(name).click();
@@ -45,7 +49,8 @@ export class ConfigurationPageHelper extends PageHelper {
    * Ex: [global, '2'] is the global value with an input of 2
    */
   edit(name: string, ...values: [string, string][]) {
-    this.navigateEdit(name);
+    this.getFirstTableCell(name).click();
+    cy.contains('button', 'Edit').click();
 
     // Waits for data to load
     cy.contains('.card-header', `Edit ${name}`);
@@ -58,9 +63,10 @@ export class ConfigurationPageHelper extends PageHelper {
     // Clicks save button then waits until the desired config is visible, clicks it,
     // then checks that each desired value appears with the desired number
     cy.get('[data-cy=submitBtn]').click();
+    cy.wait(3 * 1000);
 
     // Enter config setting name into filter box
-    this.searchTable(name);
+    this.searchTable(name, 100);
 
     // Checks for visibility of config in table
     this.getExpandCollapseElement(name).should('be.visible').click();

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

@@ -49,8 +49,8 @@ export class CreateClusterServicePageHelper extends ServicesPageHelper {
   columnIndex = {
     service_name: 1,
     placement: 2,
-    running: 0,
-    size: 0,
-    last_refresh: 0
+    running: 3,
+    size: 4,
+    last_refresh: 5
   };
 }

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

@@ -46,10 +46,13 @@ export class HostsPageHelper extends PageHelper {
     }
   }
 
-  checkExist(hostname: string, exist: boolean) {
+  checkExist(hostname: string, exist: boolean, shouldReload = false) {
+    if (shouldReload) {
+      cy.reload(true, { log: true, timeout: 5 * 1000 });
+    }
     this.getTableCell(this.columnIndex.hostname, hostname, true)
       .parent()
-      .find(`datatable-body-cell:nth-child(${this.columnIndex.hostname}) span`)
+      .find(`[cdstabledata]:nth-child(${this.columnIndex.hostname}) span`)
       .should(($elements) => {
         const hosts = $elements.toArray().map((v) => v.innerText);
         if (exist) {
@@ -61,13 +64,12 @@ export class HostsPageHelper extends PageHelper {
   }
 
   remove(hostname: string) {
-    super.delete(hostname, this.columnIndex.hostname, 'hosts', true);
+    super.delete(hostname, this.columnIndex.hostname, 'hosts', true, false, true);
   }
 
   // Add or remove labels on a host, then verify labels in the table
   editLabels(hostname: string, labels: string[], add: boolean) {
-    this.getTableCell(this.columnIndex.hostname, hostname, true).click();
-    this.clickActionButton('edit');
+    this.clickRowActionButton(hostname, 'edit');
 
     // add or remove label badges
     if (add) {
@@ -90,10 +92,10 @@ export class HostsPageHelper extends PageHelper {
   checkLabelExists(hostname: string, labels: string[], add: boolean) {
     // Verify labels are added or removed from Labels column
     // First find row with hostname, then find labels in the row
-    this.getTableCell(this.columnIndex.hostname, hostname, true)
-      .click()
+    this.getTableCell(this.columnIndex.hostname, hostname, true).as('row').click();
+    cy.get('@row')
       .parent()
-      .find(`datatable-body-cell:nth-child(${this.columnIndex.labels}) .badge`)
+      .find(`[cdstabledata]:nth-child(${this.columnIndex.labels}) .badge`)
       .should(($ele) => {
         const newLabels = $ele.toArray().map((v) => v.innerText);
         for (const label of labels) {
@@ -110,16 +112,15 @@ export class HostsPageHelper extends PageHelper {
   maintenance(hostname: string, exit = false, force = false) {
     this.clearTableSearchInput();
     if (force) {
-      this.getTableCell(this.columnIndex.hostname, hostname, true).click();
-      this.clickActionButton('enter-maintenance');
+      this.clickRowActionButton(hostname, 'enter-maintenance');
 
       cy.get('cds-modal').within(() => {
         cy.contains('button', 'Continue').click();
       });
 
       this.getTableCell(this.columnIndex.hostname, hostname, true)
         .parent()
-        .find(`datatable-body-cell:nth-child(${this.columnIndex.status}) .badge`)
+        .find(`[cdstabledata]:nth-child(${this.columnIndex.status}) .badge`)
         .should(($ele) => {
           const status = $ele.toArray().map((v) => v.innerText);
           expect(status).to.include('maintenance');
@@ -129,28 +130,27 @@ export class HostsPageHelper extends PageHelper {
       this.getTableCell(this.columnIndex.hostname, hostname, true)
         .click()
         .parent()
-        .find(`datatable-body-cell:nth-child(${this.columnIndex.status})`)
+        .find(`[cdstabledata]:nth-child(${this.columnIndex.status})`)
         .then(($ele) => {
           const status = $ele.toArray().map((v) => v.innerText);
           if (status[0].includes('maintenance')) {
-            this.clickActionButton('exit-maintenance');
+            this.clickRowActionButton(hostname, 'exit-maintenance');
           }
         });
 
       this.getTableCell(this.columnIndex.hostname, hostname, true)
         .parent()
-        .find(`datatable-body-cell:nth-child(${this.columnIndex.status})`)
+        .find(`[cdstabledata]:nth-child(${this.columnIndex.status})`)
         .should(($ele) => {
           const status = $ele.toArray().map((v) => v.innerText);
           expect(status).to.not.include('maintenance');
         });
     } else {
-      this.getTableCell(this.columnIndex.hostname, hostname, true).click();
-      this.clickActionButton('enter-maintenance');
+      this.clickRowActionButton(hostname, 'enter-maintenance');
 
       this.getTableCell(this.columnIndex.hostname, hostname, true)
         .parent()
-        .find(`datatable-body-cell:nth-child(${this.columnIndex.status}) .badge`)
+        .find(`[cdstabledata]:nth-child(${this.columnIndex.status}) .badge`)
         .should(($ele) => {
           const status = $ele.toArray().map((v) => v.innerText);
           expect(status).to.include('maintenance');
@@ -160,8 +160,7 @@ export class HostsPageHelper extends PageHelper {
 
   @PageHelper.restrictTo(pages.index.url)
   drain(hostname: string) {
-    this.getTableCell(this.columnIndex.hostname, hostname, true).click();
-    this.clickActionButton('start-drain');
+    this.clickRowActionButton(hostname, 'start-drain');
     cy.wait(1000);
     this.checkLabelExists(hostname, ['_no_schedule'], true);
 
@@ -175,7 +174,7 @@ export class HostsPageHelper extends PageHelper {
   checkServiceInstancesExist(hostname: string, instances: string[]) {
     this.getTableCell(this.columnIndex.hostname, hostname, true)
       .parent()
-      .find(`datatable-body-cell:nth-child(${this.columnIndex.services}) .badge`)
+      .find(`[cdstabledata]:nth-child(${this.columnIndex.services}) .badge`)
       .should(($ele) => {
         const serviceInstances = $ele.toArray().map((v) => v.innerText);
         for (const instance of instances) {

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

@@ -23,9 +23,10 @@ export class ManagerModulesPageHelper extends PageHelper {
     cy.contains('button', 'Update').click();
     // Checks if edits appear
     this.getExpandCollapseElement(name).should('be.visible').click();
-
     for (const input of inputs) {
-      cy.get('.datatable-body').last().contains(input.newValue);
+      cy.get('[data-testid="datatable-row-detail"] [cdstablerow] [cdstabledata] span').contains(
+        input.newValue
+      );
     }
 
     // Clear mgr module of all edits made to it
@@ -47,10 +48,10 @@ export class ManagerModulesPageHelper extends PageHelper {
     this.getExpandCollapseElement(name).should('be.visible').click();
     for (const input of inputs) {
       if (input.oldValue) {
-        cy.get('.datatable-body')
-          .eq(1)
-          .should('contain', input.id)
-          .and('not.contain', input.newValue);
+        cy.contains('[data-testid="datatable-row-detail"] [cdstablerow] [cdstabledata]', input.id)
+          .parent('[cdstablerow]')
+          .find('[cdstabledata]')
+          .should('not.contain', input.newValue);
       }
     }
   }

src/pybind/mgr/dashboard/frontend/cypress/e2e/cluster/monitors.e2e-spec.ts

@@ -42,20 +42,19 @@ describe('Monitors page', () => {
       monitors.getLegends().its(2).should('have.text', 'Not In Quorum');
 
       // verify correct columns on In Quorum table
-      monitors.getDataTableHeaders(0).contains('Name');
+      monitors.getDataTableHeaders().contains('Name');
 
-      monitors.getDataTableHeaders(0).contains('Rank');
+      monitors.getDataTableHeaders().contains('Rank');
 
-      monitors.getDataTableHeaders(0).contains('Public Address');
-
-      monitors.getDataTableHeaders(0).contains('Open Sessions');
+      monitors.getDataTableHeaders().contains('Public Address');
 
+      monitors.getDataTableHeaders().contains('Open Sessions');
       // verify correct columns on Not In Quorum table
-      monitors.getDataTableHeaders(1).contains('Name');
+      monitors.getDataTableHeaders().contains('Name');
 
-      monitors.getDataTableHeaders(1).contains('Rank');
+      monitors.getDataTableHeaders().contains('Rank');
 
-      monitors.getDataTableHeaders(1).contains('Public Address');
+      monitors.getDataTableHeaders().contains('Public Address');
     });
   });
 });

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

@@ -35,7 +35,7 @@ export class OSDsPageHelper extends PageHelper {
       if (expandCluster) {
         this.getTableCount('total').should('be.gte', 1);
       }
-      cy.get('@addButton').click();
+      cy.get('@addButton').click({ force: true });
     });
 
     if (!expandCluster) {
@@ -51,8 +51,9 @@ export class OSDsPageHelper extends PageHelper {
   @PageHelper.restrictTo(pages.index.url)
   checkStatus(id: number, status: string[]) {
     this.searchTable(`id:${id}`);
+    cy.wait(5 * 1000);
     this.expectTableCount('found', 1);
-    cy.get(`datatable-body-cell:nth-child(${this.columnIndex.status}) .badge`).should(($ele) => {
+    cy.get(`[cdstabledata]:nth-child(${this.columnIndex.status}) .badge`).should(($ele) => {
       const allStatus = $ele.toArray().map((v) => v.innerText);
       for (const s of status) {
         expect(allStatus).to.include(s);
@@ -71,8 +72,7 @@ export class OSDsPageHelper extends PageHelper {
   deleteByIDs(osdIds: number[], replace?: boolean) {
     this.getTableRows().each(($el) => {
       const rowOSD = Number(
-        $el.find('datatable-body-cell .datatable-body-cell-label').get(this.columnIndex.id - 1)
-          .textContent
+        $el.find('[cdstabledata][cdstablerow]').get(this.columnIndex.id - 1).textContent
       );
       if (osdIds.includes(rowOSD)) {
         cy.wrap($el).click();