Merge branch 'master' into MGMT-18925-add-hosts-from-cisco

openshift-assisted · Oct 30, 2024 · fe8725f · fe8725f
2 parents b5005cd + 5e4232d
commit fe8725f
Show file tree

Hide file tree

Showing 29 changed files with 532 additions and 478 deletions.
diff --git a/libs/ui-lib-tests/cypress/views/bareMetalDiscovery.ts b/libs/ui-lib-tests/cypress/views/bareMetalDiscovery.ts
@@ -37,7 +37,7 @@ export const bareMetalDiscoveryPage = {
     numWorkers: number = Cypress.env('NUM_WORKERS'),
     timeout = Cypress.env('HOST_REGISTRATION_TIMEOUT'),
   ) => {
-    cy.get('table.hosts-table > tbody', { timeout: timeout }).should(($els) => {
+    cy.get('table.hosts-table > tbody > tr:not([hidden])', { timeout: timeout }).should(($els) => {
       expect($els.length).to.be.eq(numMasters + numWorkers);
       if (numMasters + numWorkers === 1) {
         expect($els[0].textContent).not.to.contain('Waiting for host');

diff --git a/libs/ui-lib-tests/cypress/views/hostsTableSection.ts b/libs/ui-lib-tests/cypress/views/hostsTableSection.ts
@@ -24,7 +24,7 @@ export const hostsTableSection = {
       });
   },
   validateHostCpuCores: () => {
-    cy.get('td[data-label="CPU Cores"]')
+    cy.get('td[data-testid="host-cpu-cores"]')
       .should('have.length', numMasters() + numWorkers())
       .each((hostCpuCores, idx) => {
         const isMaster = idx <= numMasters() - 1;
@@ -36,7 +36,7 @@ export const hostsTableSection = {
       });
   },
   validateHostMemory: () => {
-    cy.get('td[data-label="Memory"]')
+    cy.get('td[data-testid="host-memory"]')
       .should('have.length', numMasters() + numWorkers())
       .each((hostMemory, idx) => {
         const isMaster = idx <= numMasters() - 1;
@@ -48,7 +48,7 @@ export const hostsTableSection = {
       });
   },
   validateHostDiskSize: (masterDiskTotalSize: number, workerDiskTotalSize: number) => {
-    cy.get('td[data-label="Total storage"]')
+    cy.get('td[data-testid="host-disks"]')
       .should('have.length', numMasters() + numWorkers())
       .each((hostDisk, idx) => {
         const isMaster = idx <= numMasters() - 1;
@@ -60,16 +60,15 @@ export const hostsTableSection = {
       });
   },
   waitForHardwareStatus: (status: string) => {
-    // Start at index 2 here because of selector
-    for (let i = 2; i <= numMasters() + numWorkers() + 1; i++) {
-      cy.hostDetailSelector(i, 'Status', Cypress.env('HOST_READY_TIMEOUT')).should(
-        'contain.text',
-        status,
-      );
-    }
+    cy.get('table.hosts-table > tbody > tr:not([hidden])').each((row) =>
+      cy
+        .wrap(row)
+        .find('td[data-testid="host-hw-status"]', { timeout: Cypress.env('HOST_READY_TIMEOUT') })
+        .should('contain.text', status),
+    );
   },
   getHostDisksExpander: (hostIndex: number) => {
-    return cy.get(`#expandable-toggle${hostIndex * 2}`);
+    return cy.get(`#expand-toggle${hostIndex}`);
   },
   getHostDetailsTitle: (hostIndex: number) => {
     return cy.get(`h3[data-testid="disks-section"]`).then((hostTables) => {
@@ -89,7 +88,7 @@ export const hostsTableSection = {
     });
   },
   validateGroupingByDiskHolders: (disks: ValidateDiskHoldersParams, message?: string) => {
-    cy.get('td[data-testid="disk-name"]').then(($diskNames) => {
+    cy.get('.pf-m-expanded td[data-testid="disk-name"]').then(($diskNames) => {
       disks.forEach((disk, index) => {
         cy.wrap($diskNames).eq(index).should('contain.text', disk.name);
         if (disk.indented || disk.warning) {

diff --git a/libs/ui-lib-tests/cypress/views/modals/EventsModal.ts b/libs/ui-lib-tests/cypress/views/modals/EventsModal.ts
@@ -30,7 +30,7 @@ export class EventsModal {
   }
 
   get contents() {
-    return this.body.find('.pf-v5-c-table tr');
+    return this.body.find('.pf-v5-c-table__tbody tr');
   }
 
   get hostFilter() {

diff --git a/libs/ui-lib-tests/cypress/views/networkingPage.ts b/libs/ui-lib-tests/cypress/views/networkingPage.ts
@@ -61,25 +61,15 @@ export const networkingPage = {
       .should('be.visible')
       .should('contain.text', Cypress.env('devPreviewSupportLevel'));
   },
-  waitForNetworkStatusToNotContain: (
-    text,
-    numMasters: number = Cypress.env('NUM_MASTERS'),
-    numWorkers: number = Cypress.env('NUM_WORKERS'),
-    timeout = Cypress.env('HOST_READY_TIMEOUT'),
-  ) => {
-    for (let i = 2; i <= numMasters + numWorkers + 1; i++) {
-      cy.hostDetailSelector(i, 'Status', timeout).should('not.contain', text);
-    }
-  },
-  waitForNetworkStatus: (
-    status,
-    numMasters: number = Cypress.env('NUM_MASTERS'),
-    numWorkers: number = Cypress.env('NUM_WORKERS'),
-    timeout = Cypress.env('HOST_READY_TIMEOUT'),
-  ) => {
-    for (let i = 2; i <= numMasters + numWorkers + 1; i++) {
-      cy.hostDetailSelector(i, 'Status', timeout).should('contain.text', status);
-    }
+  waitForNetworkStatusToNotContain: (text, timeout = Cypress.env('HOST_READY_TIMEOUT')) => {
+    cy.get('table.hosts-table > tbody > tr:not([hidden])').each((row) =>
+      cy.wrap(row).find('td[data-testid="nic-status"]', { timeout }).should('not.contain', text),
+    );
+  },
+  waitForNetworkStatus: (status, timeout = Cypress.env('HOST_READY_TIMEOUT')) => {
+    cy.get('table.hosts-table > tbody > tr:not([hidden])').each((row) =>
+      cy.wrap(row).find('td[data-testid="nic-status"]', { timeout }).should('contain.text', status),
+    );
   },
   waitForHostNetworkStatusInsufficient: (
     idx,

diff --git a/libs/ui-lib-tests/cypress/views/storagePage.ts b/libs/ui-lib-tests/cypress/views/storagePage.ts
@@ -3,7 +3,7 @@ export const storagePage = {
     numMasters: number = Cypress.env('NUM_MASTERS'),
     numWorkers: number = Cypress.env('NUM_WORKERS'),
   ) => {
-    cy.get('td[data-label="ODF Usage"]')
+    cy.get('td[data-testid="use-odf"]')
       .should('have.length', numMasters + numWorkers)
       .each((hostRole, idx) => {
         const isMaster = idx <= numMasters - 1;
@@ -18,7 +18,7 @@ export const storagePage = {
     numMasters: number = Cypress.env('NUM_MASTERS'),
     numWorkers: number = Cypress.env('NUM_WORKERS'),
   ) => {
-    cy.get('td[data-label="Number of disks"]')
+    cy.get('td[data-testid="disk-number"]')
       .should('have.length', numMasters + numWorkers)
       .each((hostDisk) => {
         expect(hostDisk).to.contain('3');
@@ -28,7 +28,7 @@ export const storagePage = {
     return cy.get(`input[id="select-formatted-${hostId}-${indexSelect}"]`);
   },
   validateSkipFormattingDisks: (hostId: string, numDisks: number) => {
-    cy.get("td[data-label='Format?']").should('have.length', numDisks);
+    cy.get("tr.pf-m-expanded td[data-testid='disk-formatted']").should('have.length', numDisks);
     //Checking if checkboxes are checked/unchecked
     storagePage.getSkipFormattingCheckbox(hostId, 0).should('not.be.checked');
     storagePage.getSkipFormattingCheckbox(hostId, 1).should('be.checked');

diff --git a/libs/ui-lib/lib/cim/components/Agent/tableUtils.tsx b/libs/ui-lib/lib/cim/components/Agent/tableUtils.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { sortable, expandable, breakWord } from '@patternfly/react-table';
 import { Link } from 'react-router-dom-v5-compat';
 
 import {
@@ -48,10 +47,9 @@ export const agentHostnameColumn = (
     title: t('ai:Hostname'),
     props: {
       id: 'col-header-hostname', // ACM jest tests require id over testId
+      modifier: 'breakWord',
     },
-    transforms: [sortable],
-    cellFormatters: [expandable],
-    cellTransforms: [breakWord],
+    sort: true,
   },
   cell: (host) => {
     const inventory = getInventory(host);
@@ -97,7 +95,7 @@ export const discoveryTypeColumn = (
       props: {
         id: 'col-header-discovery-type',
       },
-      transforms: [sortable],
+      sort: true,
     },
     cell: (host) => {
       const agent = agents.find((a) => a.metadata?.uid === host.id);
@@ -151,7 +149,7 @@ export const agentStatusColumn = ({
       props: {
         id: 'col-header-infraenvstatus',
       },
-      transforms: [sortable],
+      sort: true,
     },
     cell: (host) => {
       const agent = agents.find((a) => a.metadata?.uid === host.id);
@@ -199,7 +197,7 @@ export const clusterColumn = (
       props: {
         id: 'col-header-cluster',
       },
-      transforms: [sortable],
+      sort: true,
     },
     cell: (host) => {
       const agent = agents.find((a) => a.metadata?.uid === host.id);
@@ -239,7 +237,7 @@ export const infraEnvColumn = (agents: AgentK8sResource[], t: TFunction): TableR
       props: {
         id: 'col-header-infraenv',
       },
-      transforms: [sortable],
+      sort: true,
     },
     cell: (host) => {
       const agent = agents.find((a) => a.metadata?.uid === host.id) as AgentK8sResource;

diff --git a/libs/ui-lib/lib/cim/components/Hypershift/DetailsPage/NodePoolsTable.tsx b/libs/ui-lib/lib/cim/components/Hypershift/DetailsPage/NodePoolsTable.tsx
@@ -2,17 +2,7 @@ import * as React from 'react';
 import { Link } from 'react-router-dom-v5-compat';
 import { Button, Label, Popover, Stack, StackItem } from '@patternfly/react-core';
 import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
-import {
-  breakWord,
-  expandable,
-  sortable,
-  Table,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-} from '@patternfly/react-table';
+import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import classnames from 'classnames';
 
 import { TableRow } from '../../../../common/components/hosts/AITable';
@@ -61,10 +51,9 @@ export const nodePoolNameColumn = (): TableRow<NodePoolWithAgents> => {
       title: 'Nodepool',
       props: {
         id: 'col-header-hostname', // ACM jest tests require id over testId
+        modifier: 'breakWord',
       },
-      transforms: [sortable],
-      cellFormatters: [expandable],
-      cellTransforms: [breakWord],
+      sort: true,
     },
     cell: ({ nodePool }) => {
       return {

diff --git a/libs/ui-lib/lib/cim/components/modals/MassApproveAgentModal.tsx b/libs/ui-lib/lib/cim/components/modals/MassApproveAgentModal.tsx
@@ -9,7 +9,6 @@ import {
   Stack,
   StackItem,
 } from '@patternfly/react-core';
-import { sortable } from '@patternfly/react-table';
 import { getAIHosts } from '../helpers';
 import { AgentK8sResource } from '../../types';
 import HostsTable from '../../../common/components/hosts/HostsTable';
@@ -38,7 +37,7 @@ const hostnameColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host
       props: {
         id: 'col-header-hostname', // ACM jest tests require id over testId
       },
-      transforms: [sortable],
+      sort: true,
     },
     cell: (host) => {
       const agent = agents.find((a) => a.metadata?.uid === host.id);
@@ -63,7 +62,7 @@ const statusColumn = (
       props: {
         id: 'col-header-status', // ACM jest tests require id over testId
       },
-      transforms: [sortable],
+      sort: true,
     },
     cell: (host) => {
       const agent = agents.find((a) => a.metadata?.uid === host.id);

diff --git a/libs/ui-lib/lib/cim/components/modals/MassDeleteAgentModal.tsx b/libs/ui-lib/lib/cim/components/modals/MassDeleteAgentModal.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { Button, Flex, FlexItem, Popover } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { Link } from 'react-router-dom-v5-compat';
-import { sortable } from '@patternfly/react-table';
 import { global_palette_blue_300 as blueInfoColor } from '@patternfly/react-tokens/dist/js/global_palette_blue_300';
 import {
   getHostname,
@@ -35,7 +34,7 @@ const hostnameColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host
       props: {
         id: 'col-header-hostname', // ACM jest tests require id over testId
       },
-      transforms: [sortable],
+      sort: true,
     },
     cell: (host) => {
       const inventory = getInventory(host);
@@ -68,7 +67,7 @@ const statusColumn = (
       props: {
         id: 'col-header-status',
       },
-      transforms: [sortable],
+      sort: true,
     },
     cell: (host) => {
       const agent = agents.find((a) => a.metadata?.uid === host.id);

diff --git a/libs/ui-lib/lib/common/components/clusterWizard/ReviewHostsInventory.tsx b/libs/ui-lib/lib/common/components/clusterWizard/ReviewHostsInventory.tsx
@@ -1,10 +1,10 @@
-import { TableVariant } from '@patternfly/react-table';
-import { Table, TableBody } from '@patternfly/react-table/deprecated';
 import * as React from 'react';
+import { Table, TableVariant, Tbody, Td, Tr } from '@patternfly/react-table';
 import type { Inventory, Host } from '@openshift-assisted/types/assisted-installer-service';
 import { getEnabledHosts } from '../hosts';
 import { getSimpleHardwareInfo } from '../hosts/hardwareInfo';
 import { fileSize, stringToJSON } from '../../utils';
+import { genericTableRowKey } from '../ui';
 
 const ReviewHostsInventory = ({ hosts = [] }: { hosts?: Host[] }) => {
   const rows = React.useMemo(() => {
@@ -30,31 +30,41 @@ const ReviewHostsInventory = ({ hosts = [] }: { hosts?: Host[] }) => {
 
     return [
       {
-        cells: ['Hosts', summary.count],
+        cells: [{ title: 'Hosts' }, { title: summary.count }],
+        rowId: 'hosts',
       },
       {
-        cells: ['Total cores', summary.cores],
+        cells: [{ title: 'Total cores' }, { title: summary.cores }],
+        rowId: 'total-cores',
       },
       {
-        cells: ['Total memory', fileSize(summary.memory, 2, 'iec')],
+        cells: [{ title: 'Total memory' }, { title: fileSize(summary.memory, 2, 'iec') }],
+        rowId: 'total-memory',
       },
       {
-        cells: ['Total storage', fileSize(summary.fs, 2, 'si')],
+        cells: [{ title: 'Total storage' }, { title: fileSize(summary.fs, 2, 'si') }],
+        rowId: 'total-storage',
       },
     ];
   }, [hosts]);
 
   return (
     <Table
-      rows={rows}
       data-testid="review-host-inventory-table"
-      cells={['', '']}
       variant={TableVariant.compact}
       borders={false}
       aria-label="Cluster summary table"
       className="review-table"
     >
-      <TableBody />
+      <Tbody>
+        {rows.map((row, i) => (
+          <Tr key={genericTableRowKey(row.rowId)}>
+            {row.cells.map((cell, j) => (
+              <Td key={`cell-${i}-${j}`}>{cell.title}</Td>
+            ))}
+          </Tr>
+        ))}
+      </Tbody>
     </Table>
   );
 };