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/applications/ListView/ApplicationsDatatable/ApplicationsDatatable.tsx

@@ -9,6 +9,7 @@ import { useNamespacesQuery } from '@/react/kubernetes/namespaces/queries/useNam
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 import { useCurrentEnvironment } from '@/react/hooks/useCurrentEnvironment';
 import { useAuthorizations } from '@/react/hooks/useUser';
+import { isSystemNamespace } from '@/react/kubernetes/namespaces/queries/useIsSystemNamespace';
 
 import { TableSettingsMenu } from '@@/datatables';
 import { useRepeater } from '@@/datatables/useRepeater';
@@ -18,6 +19,7 @@ import { ExpandableDatatable } from '@@/datatables/ExpandableDatatable';
 
 import { NamespaceFilter } from '../ApplicationsStacksDatatable/NamespaceFilter';
 import { Namespace } from '../ApplicationsStacksDatatable/types';
+import { useApplications } from '../../application.queries';
 
 import { Application, ConfigKind } from './types';
 import { useColumns } from './useColumns';
@@ -26,9 +28,7 @@ import { SubRow } from './SubRow';
 import { HelmInsightsBox } from './HelmInsightsBox';
 
 export function ApplicationsDatatable({
-  dataset,
   onRefresh,
-  isLoading,
   onRemove,
   namespace = '',
   namespaces,
@@ -37,9 +37,7 @@ export function ApplicationsDatatable({
   onShowSystemChange,
   hideStacks,
 }: {
-  dataset: Array<Application>;
   onRefresh: () => void;
-  isLoading: boolean;
   onRemove: (selectedItems: Application[]) => void;
   namespace?: string;
   namespaces: Array<Namespace>;
@@ -50,7 +48,7 @@ export function ApplicationsDatatable({
 }) {
   const envId = useEnvironmentId();
   const envQuery = useCurrentEnvironment();
-  const namespaceMetaListQuery = useNamespacesQuery(envId);
+  const namespaceListQuery = useNamespacesQuery(envId);
 
   const tableState = useKubeStore('kubernetes.applications', 'Name');
   useRepeater(tableState.autoRefreshRate, onRefresh);
@@ -58,7 +56,7 @@ export function ApplicationsDatatable({
   const hasWriteAuthQuery = useAuthorizations(
     'K8sApplicationsW',
     undefined,
-    true
+    false
   );
 
   const { setShowSystemResources } = tableState;
@@ -67,27 +65,34 @@ export function ApplicationsDatatable({
     setShowSystemResources(showSystem || false);
   }, [showSystem, setShowSystemResources]);
 
-  const columns = useColumns(hideStacks);
+  const applicationsQuery = useApplications(envId, {
+    refetchInterval: tableState.autoRefreshRate * 1000,
+    namespace,
+    withDependencies: true,
+  });
+  const applications = applicationsQuery.data ?? [];
+  const filteredApplications = showSystem
+    ? applications
+    : applications.filter(
+        (application) =>
+          !isSystemNamespace(application.ResourcePool, namespaceListQuery.data)
+      );
 
-  const filteredDataset = !showSystem
-    ? dataset.filter(
-        (item) => !namespaceMetaListQuery.data?.[item.ResourcePool]?.IsSystem
-      )
-    : dataset;
+  const columns = useColumns(hideStacks);
 
   return (
     <ExpandableDatatable
       data-cy="k8sApp-appTable"
       noWidget
-      dataset={filteredDataset}
+      dataset={filteredApplications ?? []}
       settingsManager={tableState}
       columns={columns}
       title="Applications"
       titleIcon={BoxIcon}
-      isLoading={isLoading}
+      isLoading={applicationsQuery.isLoading}
       disableSelect={!hasWriteAuthQuery.authorized}
       isRowSelectable={(row) =>
-        !namespaceMetaListQuery.data?.[row.original.ResourcePool]?.IsSystem
+        !isSystemNamespace(row.original.ResourcePool, namespaceListQuery.data)
       }
       getRowCanExpand={(row) => isExpandable(row.original)}
       renderSubRow={(row) => (

app/react/kubernetes/applications/ListView/ApplicationsDatatable/columns.tsx

@@ -1,5 +1,12 @@
-import { isoDate, truncate } from '@/portainer/filters/filters';
+import { CellContext } from '@tanstack/react-table';
 
+import { isoDate, truncate } from '@/portainer/filters/filters';
+import { useIsSystemNamespace } from '@/react/kubernetes/namespaces/queries/useIsSystemNamespace';
+
+import { Link } from '@@/Link';
+import { SystemBadge } from '@@/Badge/SystemBadge';
+
+import { Application } from './types';
 import { helper } from './columns.helper';
 
 export const stackName = helper.accessor('StackName', {
@@ -9,9 +16,26 @@ export const stackName = helper.accessor('StackName', {
 
 export const namespace = helper.accessor('ResourcePool', {
   header: 'Namespace',
-  cell: ({ getValue }) => getValue() || '-',
+  cell: NamespaceCell,
 });
 
+function NamespaceCell({ row, getValue }: CellContext<Application, string>) {
+  const value = getValue();
+  const isSystem = useIsSystemNamespace(value);
+  return (
+    <div className="flex gap-2">
+      <Link
+        to="kubernetes.resourcePools.resourcePool"
+        params={{ id: value }}
+        data-cy={`app-namespace-link-${row.original.Name}`}
+      >
+        {value}
+      </Link>
+      {isSystem && <SystemBadge />}
+    </div>
+  );
+}
+
 export const image = helper.accessor('Image', {
   header: 'Image',
   cell: ({ row: { original: item } }) => (

app/react/kubernetes/applications/ListView/ApplicationsDatatable/types.ts

@@ -39,6 +39,12 @@ export interface Application {
     }>;
     Port: number;
   }>;
+  Resource?: {
+    CpuLimit?: number;
+    CpuRequest?: number;
+    MemoryLimit?: number;
+    MemoryRequest?: number;
+  };
 }
 
 export enum ConfigKind {