refactor(kube/namespaces): migrate item apps table to react [EE-4693] (#11012)

app/react/kubernetes/namespaces/ItemView/NamespaceAppsDatatable.tsx

@@ -0,0 +1,55 @@
+import { Code } from 'lucide-react';
+
+import { Datatable, TableSettingsMenu } from '@@/datatables';
+import { useRepeater } from '@@/datatables/useRepeater';
+import { TableSettingsMenuAutoRefresh } from '@@/datatables/TableSettingsMenuAutoRefresh';
+import { useTableStateWithStorage } from '@@/datatables/useTableState';
+import {
+  BasicTableSettings,
+  refreshableSettings,
+  RefreshableTableSettings,
+} from '@@/datatables/types';
+
+import { NamespaceApp } from './types';
+import { columns } from './columns';
+
+interface TableSettings extends BasicTableSettings, RefreshableTableSettings {}
+
+export function NamespaceAppsDatatable({
+  dataset,
+  onRefresh,
+  isLoading,
+}: {
+  dataset: Array<NamespaceApp>;
+  onRefresh: () => void;
+  isLoading: boolean;
+}) {
+  const tableState = useTableStateWithStorage<TableSettings>(
+    'kube-namespace-apps',
+    'Name',
+    (set) => ({
+      ...refreshableSettings(set),
+    })
+  );
+  useRepeater(tableState.autoRefreshRate, onRefresh);
+
+  return (
+    <Datatable
+      dataset={dataset}
+      settingsManager={tableState}
+      columns={columns}
+      disableSelect
+      title="Applications running in this namespace"
+      titleIcon={Code}
+      isLoading={isLoading}
+      renderTableSettings={() => (
+        <TableSettingsMenu>
+          <TableSettingsMenuAutoRefresh
+            value={tableState.autoRefreshRate}
+            onChange={tableState.setAutoRefreshRate}
+          />
+        </TableSettingsMenu>
+      )}
+    />
+  );
+}

app/react/kubernetes/namespaces/ItemView/columns.tsx

@@ -0,0 +1,55 @@
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { humanize, truncate } from '@/portainer/filters/filters';
+
+import { Link } from '@@/Link';
+import { ExternalBadge } from '@@/Badge/ExternalBadge';
+
+import { isExternalApplication } from '../../applications/utils';
+import { cpuHumanValue } from '../../applications/utils/cpuHumanValue';
+
+import { NamespaceApp } from './types';
+
+const columnHelper = createColumnHelper<NamespaceApp>();
+
+export const columns = [
+  columnHelper.accessor('Name', {
+    header: 'Name',
+    cell: ({ row: { original: item } }) => (
+      <>
+        <Link
+          to="kubernetes.applications.application"
+          params={{ name: item.Name, namespace: item.ResourcePool }}
+        >
+          {item.Name}
+        </Link>
+        {isExternalApplication({ metadata: item.Metadata }) && (
+          <div className="ml-2">
+            <ExternalBadge />
+          </div>
+        )}
+      </>
+    ),
+  }),
+  columnHelper.accessor('StackName', {
+    header: 'Stack',
+    cell: ({ getValue }) => getValue() || '-',
+  }),
+  columnHelper.accessor('Image', {
+    header: 'Image',
+    cell: ({ row: { original: item } }) => (
+      <>
+        {truncate(item.Image, 64)}
+        {item.Containers?.length > 1 && <>+ {item.Containers.length - 1}</>}
+      </>
+    ),
+  }),
+  columnHelper.accessor('CPU', {
+    header: 'CPU',
+    cell: ({ getValue }) => cpuHumanValue(getValue()),
+  }),
+  columnHelper.accessor('Memory', {
+    header: 'Memory',
+    cell: ({ getValue }) => humanize(getValue()),
+  }),
+];

app/react/kubernetes/namespaces/ItemView/types.ts

@@ -0,0 +1,6 @@
+import { KubernetesApplication } from '@/kubernetes/models/application/models';
+
+export interface NamespaceApp extends KubernetesApplication {
+  CPU: number;
+  Memory: number;
+}