chore(dw): workloadtable factor out columns

Signed-off-by: gitdallas <[email protected]>

frontend/src/pages/distributedWorkloads/global/workloadStatus/DWWorkloadsTable.tsx

@@ -1,15 +1,12 @@
 import * as React from 'react';
-import { Timestamp } from '@patternfly/react-core';
-import { Td, Tr } from '@patternfly/react-table';
 import EmptyStateErrorMessage from '~/components/EmptyStateErrorMessage';
 import { DistributedWorkloadsContext } from '~/concepts/distributedWorkloads/DistributedWorkloadsContext';
-import { SortableData, Table } from '~/components/table';
-import { WorkloadKind } from '~/k8sTypes';
+import { Table } from '~/components/table';
 import { getStatusInfo } from '~/concepts/distributedWorkloads/utils';
-import { WorkloadStatusLabel } from '~/pages/distributedWorkloads/components/WorkloadStatusLabel';
 import { NoWorkloadState } from '~/pages/distributedWorkloads/components/NoWorkloadState';
 import { LoadingState } from '~/pages/distributedWorkloads/components/LoadingState';
 import DWWorkloadsTableRow from './DWWorkloadsTableRow';
+import { DWWorkloadsTableColumns } from './columns';
 
 export const DWWorkloadsTable: React.FC = () => {
   const { workloads } = React.useContext(DistributedWorkloadsContext);
@@ -27,36 +24,6 @@ export const DWWorkloadsTable: React.FC = () => {
     return <LoadingState />;
   }
 
-  const columns: SortableData<WorkloadKind>[] = [
-    {
-      field: 'name',
-      label: 'Name',
-      sortable: (a, b) =>
-        (a.metadata?.name || 'Unnamed').localeCompare(b.metadata?.name || 'Unnamed'),
-    },
-    {
-      field: 'priority',
-      label: 'Priority',
-      sortable: (a, b) => (a.spec.priority || 0) - (b.spec.priority || 0),
-    },
-    {
-      field: 'status',
-      label: 'Status',
-      sortable: (a, b) => getStatusInfo(a).status.localeCompare(getStatusInfo(b).status),
-    },
-    {
-      field: 'created',
-      label: 'Created',
-      sortable: (a, b) =>
-        (a.metadata?.creationTimestamp || '').localeCompare(b.metadata?.creationTimestamp || ''),
-    },
-    {
-      field: 'latest-message',
-      label: 'Latest Message',
-      sortable: false,
-    },
-  ];
-
   if (!workloads.data.length) {
     return (
       <NoWorkloadState subTitle="Select another project or create a distributed workload in the selected project." />
@@ -66,13 +33,10 @@ export const DWWorkloadsTable: React.FC = () => {
     <Table
       enablePagination
       data={workloads.data}
-      columns={columns}
+      columns={DWWorkloadsTableColumns}
       data-id="workload-table"
       rowRenderer={(workload) => (
-        <DWWorkloadsTableRow
-          workload={workload}
-          statusInfo={getStatusInfo(workload)}
-        />
+        <DWWorkloadsTableRow workload={workload} statusInfo={getStatusInfo(workload)} />
       )}
     />
   );

frontend/src/pages/distributedWorkloads/global/workloadStatus/DWWorkloadsTableRow.tsx

@@ -1,33 +1,30 @@
 import * as React from 'react';
 import { Td, Tr } from '@patternfly/react-table';
+import { Timestamp } from '@patternfly/react-core';
 import { WorkloadKind } from '~/k8sTypes';
 import { WorkloadStatusInfo } from '~/concepts/distributedWorkloads/utils';
 import { WorkloadStatusLabel } from '~/pages/distributedWorkloads/components/WorkloadStatusLabel';
-import { Timestamp } from '@patternfly/react-core';
 
 type DWWorkloadsTableRowProps = {
-    workload: WorkloadKind;
-    statusInfo: WorkloadStatusInfo;
+  workload: WorkloadKind;
+  statusInfo: WorkloadStatusInfo;
 };
-const DWWorkloadsTableRow: React.FC<DWWorkloadsTableRowProps> = ({
-    workload,
-    statusInfo,
-}) => (
-    <Tr key={workload.metadata?.uid}>
-        <Td dataLabel="Name">{workload.metadata?.name || 'Unnamed'}</Td>
-        <Td dataLabel="Priority">{workload.spec.priority}</Td>
-        <Td dataLabel="Status">
-            <WorkloadStatusLabel workload={workload} />
-        </Td>
-        <Td dataLabel="Created">
-            {workload.metadata?.creationTimestamp ? (
-                <Timestamp date={new Date(workload.metadata.creationTimestamp)} />
-            ) : (
-                'Unknown'
-            )}
-        </Td>
-        <Td dataLabel="Latest Message">{statusInfo.message}</Td>
-    </Tr>
+const DWWorkloadsTableRow: React.FC<DWWorkloadsTableRowProps> = ({ workload, statusInfo }) => (
+  <Tr key={workload.metadata?.uid}>
+    <Td dataLabel="Name">{workload.metadata?.name || 'Unnamed'}</Td>
+    <Td dataLabel="Priority">{workload.spec.priority}</Td>
+    <Td dataLabel="Status">
+      <WorkloadStatusLabel workload={workload} />
+    </Td>
+    <Td dataLabel="Created">
+      {workload.metadata?.creationTimestamp ? (
+        <Timestamp date={new Date(workload.metadata.creationTimestamp)} />
+      ) : (
+        'Unknown'
+      )}
+    </Td>
+    <Td dataLabel="Latest Message">{statusInfo.message}</Td>
+  </Tr>
 );
 
 export default DWWorkloadsTableRow;

frontend/src/pages/distributedWorkloads/global/workloadStatus/columns.ts

@@ -0,0 +1,33 @@
+import { SortableData } from '~/components/table';
+import { getStatusInfo } from '~/concepts/distributedWorkloads/utils';
+import { WorkloadKind } from '~/k8sTypes';
+
+export const DWWorkloadsTableColumns: SortableData<WorkloadKind>[] = [
+  {
+    field: 'name',
+    label: 'Name',
+    sortable: (a, b) =>
+      (a.metadata?.name || 'Unnamed').localeCompare(b.metadata?.name || 'Unnamed'),
+  },
+  {
+    field: 'priority',
+    label: 'Priority',
+    sortable: (a, b) => (a.spec.priority || 0) - (b.spec.priority || 0),
+  },
+  {
+    field: 'status',
+    label: 'Status',
+    sortable: (a, b) => getStatusInfo(a).status.localeCompare(getStatusInfo(b).status),
+  },
+  {
+    field: 'created',
+    label: 'Created',
+    sortable: (a, b) =>
+      (a.metadata?.creationTimestamp || '').localeCompare(b.metadata?.creationTimestamp || ''),
+  },
+  {
+    field: 'latest-message',
+    label: 'Latest Message',
+    sortable: false,
+  },
+];