Merge pull request #1528 from DanaOrr/fixing-hardware-devices-table

CNV-32568: Fixing Hardware Devices table in Compute -> Hardware devices

locales/en/plugin__kubevirt-plugin.json

@@ -935,6 +935,7 @@
   "Select workloads that must have all the following expressions.": "Select workloads that must have all the following expressions.",
   "Selected StorageClass is different from StorageClass of the source": "Selected StorageClass is different from StorageClass of the source",
   "Selected sysprep": "Selected sysprep",
+  "Selector": "Selector",
   "selector key": "selector key",
   "selector value": "selector value",
   "Send key": "Send key",

src/utils/components/HardwareDevices/HardwareDevicesPage.tsx

@@ -1,44 +1,57 @@
 import React from 'react';
 
+import { V1PciHostDevice } from '@kubevirt-ui/kubevirt-api/kubevirt';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
 import { HorizontalNav } from '@openshift-console/dynamic-plugin-sdk';
 import { Bullseye, Button, Popover } from '@patternfly/react-core';
 import { HelpIcon } from '@patternfly/react-icons';
 
 import useHCPermittedHostDevices from './hooks/useHCPermittedHostDevices';
-import HardwareDevicesTable from './HardwareDevicesTable';
+import HardwareDevicesPageTable from './HardwareDevicesPageTable';
 
 export const HardwareDevicesPage: React.FC<any> = (props) => {
   const { t } = useKubevirtTranslation();
-  const permittedHostDevices = useHCPermittedHostDevices();
+  const { errorHcList, loadedHcList, permittedHostDevices } = useHCPermittedHostDevices();
 
   const pages = [
     {
       component: (pageProps) => (
         <div className="co-m-pane__body">
           <Bullseye>
-            <HardwareDevicesTable {...pageProps} />
+            <HardwareDevicesPageTable {...pageProps} />
           </Bullseye>
         </div>
       ),
       href: '',
       name: t('PCI Host devices'),
       pageData: {
-        devices: permittedHostDevices?.pciHostDevices,
+        devices: permittedHostDevices?.pciHostDevices?.map(
+          (device: V1PciHostDevice & { pciDeviceSelector: string }) => ({
+            ...device,
+            selector: device?.pciVendorSelector || device?.pciDeviceSelector,
+          }),
+        ),
+        error: errorHcList,
+        loaded: loadedHcList,
       },
     },
     {
       component: (pageProps) => (
         <div className="co-m-pane__body">
           <Bullseye>
-            <HardwareDevicesTable {...pageProps} />
+            <HardwareDevicesPageTable {...pageProps} />
           </Bullseye>
         </div>
       ),
       href: 'mediated',
       name: t('Mediated devices'),
       pageData: {
-        devices: permittedHostDevices?.mediatedDevices,
+        devices: permittedHostDevices?.mediatedDevices?.map((device) => ({
+          ...device,
+          selector: device?.mdevNameSelector,
+        })),
+        error: errorHcList,
+        loaded: loadedHcList,
       },
     },
   ];

src/utils/components/HardwareDevices/HardwareDevicesPageRow.tsx

@@ -0,0 +1,24 @@
+import React, { FC } from 'react';
+
+import { NO_DATA_DASH } from '@kubevirt-utils/resources/vm/utils/constants';
+import { RowProps, TableData } from '@openshift-console/dynamic-plugin-sdk';
+
+import { HardwareDevicePageRow } from './utils/constants';
+
+const HardwareDevicesPageRow: FC<RowProps<HardwareDevicePageRow>> = ({
+  activeColumnIDs,
+  obj: device,
+}) => {
+  return (
+    <>
+      <TableData activeColumnIDs={activeColumnIDs} id="resourceName">
+        {device?.resourceName || NO_DATA_DASH}
+      </TableData>
+      <TableData activeColumnIDs={activeColumnIDs} id="selector">
+        {device?.selector || NO_DATA_DASH}
+      </TableData>
+    </>
+  );
+};
+
+export default HardwareDevicesPageRow;

src/utils/components/HardwareDevices/HardwareDevicesPageTable.tsx

@@ -0,0 +1,39 @@
+import React, { FC } from 'react';
+
+import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
+import { VirtualizedTable } from '@openshift-console/dynamic-plugin-sdk';
+
+import MutedTextSpan from '../MutedTextSpan/MutedTextSpan';
+
+import useHardwareDevicesPageColumns from './list/hooks/useHardwareDevicesPageColumns ';
+import { HardwareDevicePageRow } from './utils/constants';
+import HardwareDevicesPageRow from './HardwareDevicesPageRow';
+
+type HardwareDevicesPageTableProps = {
+  devices: HardwareDevicePageRow[];
+  error: Error;
+  loaded: boolean;
+};
+
+const HardwareDevicesPageTable: FC<HardwareDevicesPageTableProps> = ({
+  devices,
+  error,
+  loaded,
+}) => {
+  const { t } = useKubevirtTranslation();
+  const columns = useHardwareDevicesPageColumns();
+
+  return (
+    <VirtualizedTable
+      columns={columns}
+      data={devices}
+      EmptyMsg={() => <MutedTextSpan text={t('Not available')} />}
+      loaded={loaded}
+      loadError={error}
+      Row={HardwareDevicesPageRow}
+      unfilteredData={devices}
+    />
+  );
+};
+
+export default HardwareDevicesPageTable;

src/utils/components/HardwareDevices/hooks/useHCPermittedHostDevices.ts

@@ -5,15 +5,21 @@ import {
 import { HyperConvergedModelGroupVersionKind } from '@kubevirt-utils/models';
 import { useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk';
 
-const useHCPermittedHostDevices = (): V1PermittedHostDevices => {
-  const [hcList] = useK8sWatchResource({
+type UseHCPermittedHostDevicesType = () => {
+  errorHcList: Error;
+  loadedHcList: boolean;
+  permittedHostDevices: V1PermittedHostDevices;
+};
+
+const useHCPermittedHostDevices: UseHCPermittedHostDevicesType = () => {
+  const [hcList, loadedHcList, errorHcList] = useK8sWatchResource({
     groupVersionKind: HyperConvergedModelGroupVersionKind,
     isList: true,
   });
 
   const { permittedHostDevices }: V1KubeVirtConfiguration = hcList?.[0]?.spec || {};
 
-  return permittedHostDevices;
+  return { errorHcList, loadedHcList, permittedHostDevices };
 };
 
 export default useHCPermittedHostDevices;

src/utils/components/HardwareDevices/list/hooks/useHardwareDevicesPageColumns .tsx

@@ -0,0 +1,29 @@
+import { useMemo } from 'react';
+
+import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
+import { TableColumn } from '@openshift-console/dynamic-plugin-sdk';
+
+import { HardwareDevicePageRow } from '../../utils/constants';
+
+const useHardwareDevicesPageColumns = () => {
+  const { t } = useKubevirtTranslation();
+
+  const columns: TableColumn<HardwareDevicePageRow>[] = useMemo(
+    () => [
+      {
+        id: 'resourceName',
+        props: { className: 'pf-m-width-20' },
+        title: t('Resource name'),
+      },
+      {
+        id: 'selector',
+        props: { className: 'pf-m-width-20' },
+        title: t('Selector'),
+      },
+    ],
+    [t],
+  );
+  return columns;
+};
+
+export default useHardwareDevicesPageColumns;

src/utils/components/HardwareDevices/modal/HardwareDevicesModal.tsx

@@ -49,7 +49,7 @@ const HardwareDevicesModal: React.FC<HardwareDevicesModalProps> = ({
   const [devices, setDevices] = React.useState<HardwareDeviceModalRow[]>(
     getInitialDevices(initialDevices),
   );
-  const permittedHostDevices = useHCPermittedHostDevices();
+  const { permittedHostDevices } = useHCPermittedHostDevices();
 
   const onAddDevice = () => {
     setDevices((listDevices) => [

src/utils/components/HardwareDevices/utils/constants.ts

@@ -8,3 +8,8 @@ export type HardwareDeviceModalRow = {
   deviceName: string;
   name: string;
 };
+
+export type HardwareDevicePageRow = {
+  resourceName: string;
+  selector: string;
+};