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/services/ServicesView/ServicesDatatable/ServicesDatatable.tsx

@@ -1,76 +1,65 @@
+import { useMemo } from 'react';
 import { Shuffle } from 'lucide-react';
 import { useRouter } from '@uirouter/react';
 import clsx from 'clsx';
 import { Row } from '@tanstack/react-table';
-import { useMemo } from 'react';
 
-import { Namespaces } from '@/react/kubernetes/namespaces/types';
+import {
+  Namespaces,
+  PortainerNamespace,
+} from '@/react/kubernetes/namespaces/types';
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 import { Authorized, useAuthorizations } from '@/react/hooks/useUser';
 import { notifyError, notifySuccess } from '@/portainer/services/notifications';
 import { pluralize } from '@/portainer/helpers/strings';
-import {
-  DefaultDatatableSettings,
-  TableSettings as KubeTableSettings,
-} from '@/react/kubernetes/datatables/DefaultDatatableSettings';
-import { useKubeStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
+import { DefaultDatatableSettings } from '@/react/kubernetes/datatables/DefaultDatatableSettings';
 import { SystemResourceDescription } from '@/react/kubernetes/datatables/SystemResourceDescription';
 import { useNamespacesQuery } from '@/react/kubernetes/namespaces/queries/useNamespacesQuery';
 import { CreateFromManifestButton } from '@/react/kubernetes/components/CreateFromManifestButton';
 
 import { Datatable, Table, TableSettingsMenu } from '@@/datatables';
+import { useTableState } from '@@/datatables/useTableState';
 import { DeleteButton } from '@@/buttons/DeleteButton';
-import {
-  type FilteredColumnsTableSettings,
-  filteredColumnsSettings,
-} from '@@/datatables/types';
-import { mergeOptions } from '@@/datatables/extend-options/mergeOptions';
-import { withColumnFilters } from '@@/datatables/extend-options/withColumnFilters';
 
-import {
-  useMutationDeleteServices,
-  useServicesForCluster,
-} from '../../service';
+import { useMutationDeleteServices, useClusterServices } from '../../service';
 import { Service } from '../../types';
 
 import { columns } from './columns';
+import { createStore } from './datatable-store';
 
 const storageKey = 'k8sServicesDatatable';
-interface TableSettings
-  extends KubeTableSettings,
-    FilteredColumnsTableSettings {}
+const settingsStore = createStore(storageKey);
 
 export function ServicesDatatable() {
-  const tableState = useKubeStore<TableSettings>(
-    storageKey,
-    undefined,
-    (set) => ({
-      ...filteredColumnsSettings(set),
-    })
-  );
+  const tableState = useTableState(settingsStore, storageKey);
   const environmentId = useEnvironmentId();
-  const { data: namespaces, ...namespacesQuery } =
+  const { data: namespacesArray, ...namespacesQuery } =
     useNamespacesQuery(environmentId);
-  const namespaceNames = (namespaces && Object.keys(namespaces)) || [];
-  const { data: services, ...servicesQuery } = useServicesForCluster(
+  const { data: services, ...servicesQuery } = useClusterServices(
     environmentId,
-    namespaceNames,
     {
       autoRefreshRate: tableState.autoRefreshRate * 1000,
-      lookupApplications: true,
+      withApplications: true,
     }
   );
 
+  const namespaces: Record<string, PortainerNamespace> = {};
+  if (Array.isArray(namespacesArray)) {
+    for (let i = 0; i < namespacesArray.length; i++) {
+      const namespace = namespacesArray[i];
+      namespaces[namespace.Name] = namespace;
+    }
+  }
+
   const { authorized: canWrite } = useAuthorizations(['K8sServiceW']);
   const readOnly = !canWrite;
   const { authorized: canAccessSystemResources } = useAuthorizations(
     'K8sAccessSystemNamespaces'
   );
-
   const filteredServices = services?.filter(
     (service) =>
       (canAccessSystemResources && tableState.showSystemResources) ||
-      !namespaces?.[service.Namespace].IsSystem
+      !namespaces?.[service.Namespace]?.IsSystem
   );
 
   const servicesWithIsSystem = useServicesRowData(
@@ -84,10 +73,11 @@ export function ServicesDatatable() {
       columns={columns}
       settingsManager={tableState}
       isLoading={servicesQuery.isLoading || namespacesQuery.isLoading}
+      emptyContentLabel="No services found"
       title="Services"
       titleIcon={Shuffle}
       getRowId={(row) => row.UID}
-      isRowSelectable={(row) => !namespaces?.[row.original.Namespace].IsSystem}
+      isRowSelectable={(row) => !namespaces?.[row.original.Namespace]?.IsSystem}
       disableSelect={readOnly}
       renderTableActions={(selectedRows) => (
         <TableActions selectedItems={selectedRows} />
@@ -106,9 +96,6 @@ export function ServicesDatatable() {
       }
       renderRow={servicesRenderRow}
       data-cy="k8s-services-datatable"
-      extendTableOptions={mergeOptions(
-        withColumnFilters(tableState.columnFilters, tableState.setColumnFilters)
-      )}
     />
   );
 }
@@ -122,7 +109,9 @@ function useServicesRowData(
     () =>
       services.map((service) => ({
         ...service,
-        IsSystem: namespaces ? namespaces?.[service.Namespace].IsSystem : false,
+        IsSystem: namespaces
+          ? namespaces?.[service.Namespace]?.IsSystem
+          : false,
       })),
     [services, namespaces]
   );

app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/created.tsx

@@ -5,14 +5,14 @@ import { columnHelper } from './helper';
 export const created = columnHelper.accessor(
   (row) => {
     const owner = row.Labels?.['io.portainer.kubernetes.application.owner'];
-    const date = formatDate(row.CreationTimestamp);
+    const date = formatDate(row.CreationDate);
     return owner ? `${date} by ${owner}` : date;
   },
   {
     header: 'Created',
     id: 'created',
     cell: ({ row }) => {
-      const date = formatDate(row.original.CreationTimestamp);
+      const date = formatDate(row.original.CreationDate);
 
       const owner =
         row.original.Labels?.['io.portainer.kubernetes.application.owner'];

app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/ports.tsx

@@ -4,7 +4,7 @@ import { columnHelper } from './helper';
 
 export const ports = columnHelper.accessor(
   (row) =>
-    row.Ports.map(
+    row.Ports?.map(
       (port) =>
         `${port.Port}${port.NodePort !== 0 ? `:${port.NodePort}` : ''}/${
           port.Protocol
@@ -19,13 +19,13 @@ export const ports = columnHelper.accessor(
     ),
     id: 'ports',
     cell: ({ row }) => {
-      if (!row.original.Ports.length) {
+      if (!row.original.Ports?.length) {
         return '-';
       }
 
       return (
         <>
-          {row.original.Ports.map((port, index) => {
+          {row.original.Ports?.map((port, index) => {
             if (port.NodePort !== 0) {
               return (
                 <div key={index}>
@@ -44,8 +44,8 @@ export const ports = columnHelper.accessor(
       );
     },
     sortingFn: (rowA, rowB) => {
-      const a = rowA.original.Ports;
-      const b = rowB.original.Ports;
+      const a = rowA.original.Ports ?? [];
+      const b = rowB.original.Ports ?? [];
 
       if (!a.length && !b.length) return 0;
 

app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/targetPorts.tsx

@@ -1,12 +1,12 @@
 import { columnHelper } from './helper';
 
 export const targetPorts = columnHelper.accessor(
-  (row) => row.Ports.map((port) => port.TargetPort).join(','),
+  (row) => row.Ports?.map((port) => port.TargetPort).join(','),
   {
     header: 'Target Ports',
     id: 'targetPorts',
     cell: ({ row }) => {
-      const ports = row.original.Ports.map((port) => port.TargetPort);
+      const ports = row.original.Ports?.map((port) => port.TargetPort) ?? [];
       if (!ports.length) {
         return '-';
       }
@@ -14,8 +14,8 @@ export const targetPorts = columnHelper.accessor(
       return ports.map((port, index) => <div key={index}>{port}</div>);
     },
     sortingFn: (rowA, rowB) => {
-      const a = rowA.original.Ports;
-      const b = rowB.original.Ports;
+      const a = rowA.original.Ports ?? [];
+      const b = rowB.original.Ports ?? [];
 
       if (!a.length && !b.length) return 0;
       if (!a.length) return 1;