feat(podman): support add podman envs in the wizard [r8s-20] (#12056)

app/react/docker/containers/StatsView/ProcessesDatatable.tsx

@@ -1,58 +1,83 @@
 import { ColumnDef } from '@tanstack/react-table';
 import { List } from 'lucide-react';
-import { useMemo } from 'react';
+import { useCurrentStateAndParams } from '@uirouter/react';
+
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 
 import { Datatable } from '@@/datatables';
 import { createPersistedStore } from '@@/datatables/types';
 import { useTableState } from '@@/datatables/useTableState';
 
+import { useContainerTop } from '../queries/useContainerTop';
+import { ContainerProcesses } from '../queries/types';
+
 const tableKey = 'container-processes';
 const store = createPersistedStore(tableKey);
 
-export function ProcessesDatatable({
-  dataset,
-  headers,
-}: {
-  dataset?: Array<Array<string | number>>;
-  headers?: Array<string>;
-}) {
-  const tableState = useTableState(store, tableKey);
-  const rows = useMemo(() => {
-    if (!dataset || !headers) {
-      return [];
-    }
+type ProcessRow = {
+  id: number;
+};
 
-    return dataset.map((row, index) => ({
-      id: index,
-      ...Object.fromEntries(
-        headers.map((header, index) => [header, row[index]])
-      ),
-    }));
-  }, [dataset, headers]);
+type ProcessesDatatableProps = {
+  rows: Array<ProcessRow>;
+  columns: Array<ColumnDef<ProcessRow>>;
+};
 
-  const columns = useMemo(
-    () =>
-      headers
-        ? headers.map(
-            (header) =>
-              ({ header, accessorKey: header }) satisfies ColumnDef<{
-                [k: string]: string;
-              }>
-          )
-        : [],
-    [headers]
+export function ProcessesDatatable() {
+  const {
+    params: { id: containerId },
+  } = useCurrentStateAndParams();
+  const environmentId = useEnvironmentId();
+  const topQuery = useContainerTop(
+    environmentId,
+    containerId,
+    (containerProcesses: ContainerProcesses) =>
+      parseContainerProcesses(containerProcesses)
   );
+  const tableState = useTableState(store, tableKey);
 
   return (
     <Datatable
       title="Processes"
       titleIcon={List}
-      dataset={rows}
-      columns={columns}
+      dataset={topQuery.data?.rows ?? []}
+      columns={topQuery.data?.columns ?? []}
       settingsManager={tableState}
       disableSelect
-      isLoading={!dataset}
+      isLoading={topQuery.isLoading}
       data-cy="docker-container-stats-processes-datatable"
     />
   );
 }
+
+// transform the data from the API into the format expected by the datatable
+function parseContainerProcesses(
+  containerProcesses: ContainerProcesses
+): ProcessesDatatableProps {
+  const { Processes: processes, Titles: titles } = containerProcesses;
+  const rows = processes?.map((row, index) => {
+    // docker has the row data as an array of many strings
+    // podman has the row data as an array with a single string separated by one or many spaces
+    const processArray = row.length === 1 ? row[0].split(/\s+/) : row;
+    return {
+      id: index,
+      ...Object.fromEntries(
+        titles.map((header, index) => [header, processArray[index]])
+      ),
+    };
+  });
+
+  const columns = titles
+    ? titles.map(
+        (header) =>
+          ({ header, accessorKey: header }) satisfies ColumnDef<{
+            [k: string]: string;
+          }>
+      )
+    : [];
+
+  return {
+    rows,
+    columns,
+  };
+}