refactor(k8s): namespace core logic (#12142)

Co-authored-by: testA113 <aliharriss1995@gmail.com>
Co-authored-by: Anthony Lapenna <anthony.lapenna@portainer.io>
Co-authored-by: James Carppe <85850129+jamescarppe@users.noreply.github.com>
Co-authored-by: Ali <83188384+testA113@users.noreply.github.com>

app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/NodeApplicationsDatatable.tsx

@@ -1,7 +1,10 @@
+import { useCurrentStateAndParams } from '@uirouter/react';
+
 import LaptopCode from '@/assets/ico/laptop-code.svg?c';
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+import { useApplications } from '@/react/kubernetes/applications/application.queries';
 
 import { Datatable, TableSettingsMenu } from '@@/datatables';
-import { useRepeater } from '@@/datatables/useRepeater';
 import { TableSettingsMenuAutoRefresh } from '@@/datatables/TableSettingsMenuAutoRefresh';
 import { useTableStateWithStorage } from '@@/datatables/useTableState';
 import {
@@ -11,19 +14,10 @@ import {
 } from '@@/datatables/types';
 
 import { useColumns } from './columns';
-import { NodeApplication } from './types';
 
 interface TableSettings extends BasicTableSettings, RefreshableTableSettings {}
 
-export function NodeApplicationsDatatable({
-  dataset,
-  onRefresh,
-  isLoading,
-}: {
-  dataset: Array<NodeApplication>;
-  onRefresh: () => void;
-  isLoading: boolean;
-}) {
+export function NodeApplicationsDatatable() {
   const tableState = useTableStateWithStorage<TableSettings>(
     'kube-node-apps',
     'Name',
@@ -31,19 +25,28 @@ export function NodeApplicationsDatatable({
       ...refreshableSettings(set),
     })
   );
-  useRepeater(tableState.autoRefreshRate, onRefresh);
+
+  const envId = useEnvironmentId();
+  const {
+    params: { nodeName },
+  } = useCurrentStateAndParams();
+  const applicationsQuery = useApplications(envId, {
+    nodeName,
+    refetchInterval: tableState.autoRefreshRate * 1000,
+  });
+  const applications = applicationsQuery.data ?? [];
 
   const columns = useColumns();
 
   return (
     <Datatable
-      dataset={dataset}
+      dataset={applications}
       settingsManager={tableState}
       columns={columns}
       disableSelect
       title="Applications running on this node"
       titleIcon={LaptopCode}
-      isLoading={isLoading}
+      isLoading={applicationsQuery.isLoading}
       renderTableSettings={() => (
         <TableSettingsMenu>
           <TableSettingsMenuAutoRefresh

app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/columns.helper.tsx

@@ -1,5 +1,5 @@
 import { createColumnHelper } from '@tanstack/react-table';
 
-import { NodeApplication } from './types';
+import { Application } from '@/react/kubernetes/applications/ListView/ApplicationsDatatable/types';
 
-export const helper = createColumnHelper<NodeApplication>();
+export const helper = createColumnHelper<Application>();

app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/columns.name.tsx

@@ -4,20 +4,18 @@ import { isExternalApplication } from '@/react/kubernetes/applications/utils';
 import { useIsSystemNamespace } from '@/react/kubernetes/namespaces/queries/useIsSystemNamespace';
 import { ExternalBadge } from '@/react/kubernetes/components/ExternalBadge';
 import { SystemBadge } from '@/react/kubernetes/components/SystemBadge';
+import { Application } from '@/react/kubernetes/applications/ListView/ApplicationsDatatable/types';
 
 import { Link } from '@@/Link';
 
 import { helper } from './columns.helper';
-import { NodeApplication } from './types';
 
 export const name = helper.accessor('Name', {
   header: 'Name',
   cell: Cell,
 });
 
-function Cell({
-  row: { original: item },
-}: CellContext<NodeApplication, string>) {
+function Cell({ row: { original: item } }: CellContext<Application, string>) {
   const isSystem = useIsSystemNamespace(item.ResourcePool);
   return (
     <div className="flex items-center gap-2">

app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/columns.tsx

@@ -41,22 +41,31 @@ export function useColumns() {
         }),
         helper.accessor('Image', {
           header: 'Image',
-          cell: ({ row: { original: item } }) => (
-            <>
-              {truncate(item.Image, 64)}
-              {item.Containers?.length > 1 && (
-                <>+ {item.Containers.length - 1}</>
-              )}
-            </>
-          ),
+          cell: ({ row: { original: item } }) => {
+            const containersLength = item.Containers?.length || 0;
+            return (
+              <>
+                {truncate(item.Image, 64)}
+                {containersLength > 1 && <>+ {containersLength - 1}</>}
+              </>
+            );
+          },
         }),
-        helper.accessor('CPU', {
+        helper.accessor((row) => row.Resource?.CpuRequest, {
           header: 'CPU reservation',
-          cell: ({ getValue }) => _.round(getValue(), 2),
+          cell: ({ getValue }) => <>{_.round(getValue() || 0, 2)}</>,
         }),
-        helper.accessor('Memory', {
+        helper.accessor((row) => row.Resource?.CpuLimit, {
+          header: 'CPU Limit',
+          cell: ({ getValue }) => <>{_.round(getValue() || 0, 2)}</>,
+        }),
+        helper.accessor((row) => row.Resource?.MemoryRequest, {
           header: 'Memory reservation',
-          cell: ({ getValue }) => humanize(getValue()),
+          cell: ({ getValue }) => <>{humanize(getValue() || 0)}</>,
+        }),
+        helper.accessor((row) => row.Resource?.MemoryLimit, {
+          header: 'Memory Limit',
+          cell: ({ getValue }) => <>{humanize(getValue() || 0)}</>,
         }),
       ]),
     [hideStacksQuery.data]