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;

app/react/kubernetes/services/service.ts

@@ -1,16 +1,10 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { compact } from 'lodash';
 import { ServiceList } from 'kubernetes-types/core/v1';
 
-import { withError } from '@/react-tools/react-query';
+import { withGlobalError } from '@/react-tools/react-query';
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 import { EnvironmentId } from '@/react/portainer/environments/types';
-import { isFulfilled } from '@/portainer/helpers/promise-utils';
-import {
-  Service,
-  NodeMetrics,
-  NodeMetric,
-} from '@/react/kubernetes/services/types';
+import { Service } from '@/react/kubernetes/services/types';
 
 import { parseKubernetesAxiosError } from '../axiosError';
 
@@ -19,32 +13,28 @@ export const queryKeys = {
     ['environments', environmentId, 'kubernetes', 'services'] as const,
 };
 
-export function useServicesForCluster(
+/**
+ * Custom hook to fetch cluster services for a specific environment.
+ *
+ * @param environmentId - The ID of the environment.
+ * @param options - Additional options for fetching services.
+ * @param options.autoRefreshRate - The auto refresh rate for refetching services.
+ * @param options.withApplications - Whether to lookup applications for the services.
+ *
+ * @returns The result of the query.
+ */
+export function useClusterServices(
   environmentId: EnvironmentId,
-  namespaceNames?: string[],
-  options?: { autoRefreshRate?: number; lookupApplications?: boolean }
+  options?: { autoRefreshRate?: number; withApplications?: boolean }
 ) {
   return useQuery(
     queryKeys.clusterServices(environmentId),
-    async () => {
-      if (!namespaceNames?.length) {
-        return [];
-      }
-      const settledServicesPromise = await Promise.allSettled(
-        namespaceNames.map((namespace) =>
-          getServices(environmentId, namespace, options?.lookupApplications)
-        )
-      );
-      return compact(
-        settledServicesPromise.filter(isFulfilled).flatMap((i) => i.value)
-      );
-    },
+    async () => getClusterServices(environmentId, options?.withApplications),
     {
-      ...withError('Unable to get services.'),
+      ...withGlobalError('Unable to get services.'),
       refetchInterval() {
         return options?.autoRefreshRate ?? false;
       },
-      enabled: !!namespaceNames?.length,
     }
   );
 }
@@ -68,7 +58,7 @@ export function useServicesQuery<T extends Service | string = Service>(
       return services;
     },
     {
-      ...withError('Unable to retrieve services.'),
+      ...withGlobalError('Unable to retrieve services.'),
       enabled: !!serviceNames?.length,
     }
   );
@@ -79,7 +69,7 @@ export function useMutationDeleteServices(environmentId: EnvironmentId) {
   return useMutation(deleteServices, {
     onSuccess: () =>
       queryClient.invalidateQueries(queryKeys.clusterServices(environmentId)),
-    ...withError('Unable to delete service(s)'),
+    ...withGlobalError('Unable to delete service(s)'),
   });
 }
 
@@ -87,14 +77,33 @@ export function useMutationDeleteServices(environmentId: EnvironmentId) {
 export async function getServices(
   environmentId: EnvironmentId,
   namespace: string,
-  lookupApplications?: boolean
+  withApplications?: boolean
 ) {
   try {
     const { data: services } = await axios.get<Array<Service>>(
       `kubernetes/${environmentId}/namespaces/${namespace}/services`,
       {
         params: {
-          lookupapplications: lookupApplications,
+          withApplications,
+        },
+      }
+    );
+    return services;
+  } catch (e) {
+    throw parseAxiosError(e, 'Unable to retrieve services');
+  }
+}
+
+export async function getClusterServices(
+  environmentId: EnvironmentId,
+  withApplications?: boolean
+) {
+  try {
+    const { data: services } = await axios.get<Array<Service>>(
+      `kubernetes/${environmentId}/services`,
+      {
+        params: {
+          withApplications,
         },
       }
     );
@@ -158,70 +167,6 @@ export async function deleteServices({
       data
     );
   } catch (e) {
-    throw parseAxiosError(e as Error, 'Unable to delete service(s)');
-  }
-}
-
-export async function getMetricsForAllNodes(environmentId: EnvironmentId) {
-  try {
-    const { data: nodes } = await axios.get<NodeMetrics>(
-      `kubernetes/${environmentId}/metrics/nodes`,
-      {}
-    );
-    return nodes;
-  } catch (e) {
-    throw parseAxiosError(
-      e as Error,
-      'Unable to retrieve metrics for all nodes'
-    );
-  }
-}
-
-export async function getMetricsForNode(
-  environmentId: EnvironmentId,
-  nodeName: string
-) {
-  try {
-    const { data: node } = await axios.get<NodeMetric>(
-      `kubernetes/${environmentId}/metrics/nodes/${nodeName}`,
-      {}
-    );
-    return node;
-  } catch (e) {
-    throw parseAxiosError(e as Error, 'Unable to retrieve metrics for node');
-  }
-}
-
-export async function getMetricsForAllPods(
-  environmentId: EnvironmentId,
-  namespace: string
-) {
-  try {
-    const { data: pods } = await axios.get(
-      `kubernetes/${environmentId}/metrics/pods/namespace/${namespace}`,
-      {}
-    );
-    return pods;
-  } catch (e) {
-    throw parseAxiosError(
-      e as Error,
-      'Unable to retrieve metrics for all pods'
-    );
-  }
-}
-
-export async function getMetricsForPod(
-  environmentId: EnvironmentId,
-  namespace: string,
-  podName: string
-) {
-  try {
-    const { data: pod } = await axios.get(
-      `kubernetes/${environmentId}/metrics/pods/namespace/${namespace}/${podName}`,
-      {}
-    );
-    return pod;
-  } catch (e) {
-    throw parseAxiosError(e as Error, 'Unable to retrieve metrics for pod');
+    throw parseAxiosError(e, 'Unable to delete service(s)');
   }
 }

app/react/kubernetes/services/types.ts

@@ -12,9 +12,9 @@ type IngressStatus = {
 };
 
 type Application = {
-  UID: string;
+  Uid: string;
   Name: string;
-  Type: string;
+  Kind: string;
 };
 
 export type ServiceType =
@@ -30,35 +30,14 @@ export type Service = {
   Annotations?: Record<string, string>;
   Labels?: Record<string, string>;
   Type: ServiceType;
-  Ports: Array<ServicePort>;
+  Ports?: Array<ServicePort>;
   Selector?: Record<string, string>;
   ClusterIPs?: Array<string>;
   IngressStatus?: Array<IngressStatus>;
   ExternalName?: string;
   ExternalIPs?: Array<string>;
-  CreationTimestamp: string;
+  CreationDate: string;
   Applications?: Application[];
 
-  IsSystem?: boolean;
-};
-
-export type NodeMetrics = {
-  items: NodeMetric[];
-};
-
-export type NodeMetric = {
-  metadata: NodeMetricMetadata;
-  timestamp: Date;
-  usage: Usage;
-  window: string;
-};
-
-export type NodeMetricMetadata = {
-  creationTimestamp: Date;
-  name: string;
-};
-
-export type Usage = {
-  cpu: string;
-  memory: string;
+  IsSystem: boolean;
 };