NO-ISSUE: Show GPUs

libs/locales/lib/en/translation.json

@@ -67,6 +67,7 @@
   "ai:Adding...": "Adding...",
   "ai:Additional certificates": "Additional certificates",
   "ai:Additional NTP Sources": "Additional NTP sources",
+  "ai:Address": "Address",
   "ai:Address is the host/ip that the NodePort service is exposed over.": "Address is the host or IP address that exposes the NodePort service.",
   "ai:Admin credentials are not available.": "Admin credentials are not available.",
   "ai:Agent compatibility": "Agent compatibility",
@@ -238,6 +239,7 @@
   "ai:Developer Preview": "Developer Preview",
   "ai:Developer preview features are not intended to be used in production environments. The clusters deployed with the developer preview features are considered to be development clusters and are not supported through the Red Hat Customer Portal case management system.": "Developer preview features are not intended to be used in production environments. The clusters deployed with the developer preview features are considered to be development clusters and are not supported through the Red Hat Customer Portal case management system.",
   "ai:Developer preview release": "Developer preview release",
+  "ai:Device ID": "Device ID",
   "ai:DHCP only": "DHCP only",
   "ai:DHCP or static IP Addresses": "DHCP or static IP Addresses",
   "ai:Disable in cluster": "Disable in cluster",
@@ -350,6 +352,8 @@
   "ai:Go to cluster {{clusterName}}": "Go to cluster {{clusterName}}",
   "ai:Go to cluster configuration to start the installation": "Go to cluster configuration to start the installation.",
   "ai:Go to cluster list": "Go to cluster list",
+  "ai:GPU": "GPU",
+  "ai:GPU_plural": "GPUs",
   "ai:Guest": "Guest",
   "ai:Hardware": "Hardware",
   "ai:Hardware information": "Hardware information",
@@ -375,6 +379,7 @@
   "ai:Host SSH Public Key for troubleshooting after installation": "Host SSH Public Key for troubleshooting after installation",
   "ai:Host update failed.": "Host update failed.",
   "ai:Host validations": "Host validations",
+  "ai:Host's graphics processing units table": "Host's graphics processing units table",
   "ai:Host's network interfaces table": "Host's network interfaces table",
   "ai:Hostname": "Hostname",
   "ai:Hostname can not be localhost": "Hostname cannot be localhost",
@@ -892,6 +897,8 @@
   "ai:Valid network prefix": "Valid network prefix",
   "ai:Valid network type": "Valid network type",
   "ai:Validations are running. If they take more than 2 minutes, please attend to the alert below.": "Validations are running. If they take more than 2 minutes, resolve the alert that is displayed.",
+  "ai:Vendor": "Vendor",
+  "ai:Vendor ID": "Vendor ID",
   "ai:Verify that you can access your host machine using SSH, or a console such as BMC or virtual machine console. In the CLI, enter the following command:": "Verify that you can access your host machine using SSH, or a console such as BMC or virtual machine console. In the CLI, enter the following command:",
   "ai:View {{count}} affected host": "View {{count}} affected host",
   "ai:View {{count}} affected host_plural": "View {{count}} affected hosts",

libs/ui-lib/lib/common/components/hosts/HostRowDetail.tsx

@@ -2,7 +2,12 @@ import React from 'react';
 import { Grid, GridItem } from '@patternfly/react-core';
 import { TableVariant, Tbody, Thead, Table, Th, Tr, Td } from '@patternfly/react-table';
 import { DetailItem, DetailList, DetailListProps } from '../ui';
-import type { Disk, Host, Interface } from '@openshift-assisted/types/assisted-installer-service';
+import type {
+  Disk,
+  Host,
+  Interface,
+  Gpu,
+} from '@openshift-assisted/types/assisted-installer-service';
 import type { ValidationsInfo } from '../../types/hosts';
 import type { WithTestID } from '../../types/index';
 import { DASH } from '../constants';
@@ -107,6 +112,62 @@ const NicsTable: React.FC<NicsTableProps & WithTestID> = ({ interfaces, testId }
   );
 };
 
+type GpusTableProps = {
+  gpus: Gpu[];
+};
+
+const gpusColumns = (t: TFunction) => [
+  { title: t('ai:Vendor') },
+  { title: t('ai:Vendor ID') },
+  { title: t('ai:Model') },
+  { title: t('ai:Device ID') },
+  { title: t('ai:Address') },
+];
+
+const GpusTable: React.FC<GpusTableProps & WithTestID> = ({ gpus: gpus, testId }) => {
+  const { t } = useTranslation();
+  const rows = gpus
+    .sort((gpuA, gpuB) => gpuA.name?.localeCompare(gpuB.name || '') || 0)
+    .map((gpu) => ({
+      cells: [
+        { title: gpu.vendor, props: { 'data-testid': 'gpu-vendor' } },
+        { title: gpu.vendorId, props: { 'data-testid': 'gpu-vendor-id' } },
+        { title: gpu.name, props: { 'data-testid': 'gpu-name' } },
+        { title: gpu.deviceId, props: { 'data-testid': 'gpu-device-id' } },
+        { title: gpu.address, props: { 'data-testid': 'gpu-address' } },
+      ],
+      key: gpu.name,
+    })) as { cells: { title: string | React.ReactNode; props?: object }[]; key: string }[];
+
+  return (
+    <Table
+      data-testid={testId}
+      variant={TableVariant.compact}
+      aria-label={t("ai:Host's graphics processing units table")}
+      borders={false}
+    >
+      <Thead>
+        <Tr>
+          {gpusColumns(t).map((col, i) => (
+            <Th key={`col-${i}`}>{col.title}</Th>
+          ))}
+        </Tr>
+      </Thead>
+      <Tbody>
+        {rows.map((row, i) => (
+          <Tr key={`gpu-row:${row.key}`}>
+            {row.cells?.map((cell, j) => (
+              <Td key={`cell-${i}-${j}`} {...cell.props}>
+                {cell.title}
+              </Td>
+            ))}
+          </Tr>
+        ))}
+      </Tbody>
+    </Table>
+  );
+};
+
 export const HostDetail = ({
   host,
   canEditDisks,
@@ -124,6 +185,7 @@ export const HostDetail = ({
   );
   const rowInfo = getHostRowHardwareInfo(inventory);
   const nics = inventory.interfaces || [];
+  const gpus = inventory.gpus || [];
 
   let bmcAddress = inventory.bmcAddress;
   if (inventory.bmcV6address) {
@@ -218,6 +280,14 @@ export const HostDetail = ({
       <GridItem>
         <NicsTable interfaces={nics} testId={'nics-table'} />
       </GridItem>
+      {gpus.length > 0 && (
+        <div>
+          <SectionTitle testId={'gpus-section'} title={t('ai:GPU', { count: gpus.length })} />
+          <GridItem>
+            <GpusTable gpus={gpus} testId={'gpus-table'} />
+          </GridItem>
+        </div>
+      )}
     </Grid>
   );
 };