refactor(namespace): migrate namespace edit to react [r8s-125] (#38)

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

@@ -26,6 +26,7 @@ import { Service } from '../../types';
 
 import { columns } from './columns';
 import { createStore } from './datatable-store';
+import { ServiceRowData } from './types';
 
 const storageKey = 'k8sServicesDatatable';
 const settingsStore = createStore(storageKey);
@@ -104,7 +105,7 @@ export function ServicesDatatable() {
 function useServicesRowData(
   services: Service[],
   namespaces?: Namespaces
-): Service[] {
+): ServiceRowData[] {
   return useMemo(
     () =>
       services.map((service) => ({
@@ -119,9 +120,12 @@ function useServicesRowData(
 
 // needed to apply custom styling to the row cells and not globally.
 // required in the AC's for this ticket.
-function servicesRenderRow(row: Row<Service>, highlightedItemId?: string) {
+function servicesRenderRow(
+  row: Row<ServiceRowData>,
+  highlightedItemId?: string
+) {
   return (
-    <Table.Row<Service>
+    <Table.Row<ServiceRowData>
       cells={row.getVisibleCells()}
       className={clsx('[&>td]:!py-4 [&>td]:!align-top', {
         active: highlightedItemId === row.id,
@@ -136,7 +140,7 @@ interface SelectedService {
 }
 
 type TableActionsProps = {
-  selectedItems: Service[];
+  selectedItems: ServiceRowData[];
 };
 
 function TableActions({ selectedItems }: TableActionsProps) {

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

@@ -4,7 +4,7 @@ import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 
 import { Link } from '@@/Link';
 
-import { Service } from '../../../types';
+import { ServiceRowData } from '../types';
 
 import { columnHelper } from './helper';
 
@@ -17,7 +17,7 @@ export const application = columnHelper.accessor(
   }
 );
 
-function Cell({ row, getValue }: CellContext<Service, string>) {
+function Cell({ row, getValue }: CellContext<ServiceRowData, string>) {
   const appName = getValue();
   const environmentId = useEnvironmentId();
 

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

@@ -1,6 +1,6 @@
 import { CellContext } from '@tanstack/react-table';
 
-import { Service } from '../../../types';
+import { ServiceRowData } from '../types';
 
 import { ExternalIPLink } from './ExternalIPLink';
 import { columnHelper } from './helper';
@@ -46,7 +46,7 @@ export const externalIP = columnHelper.accessor(
   }
 );
 
-function Cell({ row }: CellContext<Service, string>) {
+function Cell({ row }: CellContext<ServiceRowData, string>) {
   if (row.original.Type === 'ExternalName') {
     if (row.original.ExternalName) {
       const linkTo = `http://${row.original.ExternalName}`;
@@ -106,7 +106,7 @@ function Cell({ row }: CellContext<Service, string>) {
 
 // calculate the scheme based on the ports of the service
 // favour https over http.
-function getSchemeAndPort(svc: Service): [string, number] {
+function getSchemeAndPort(svc: ServiceRowData): [string, number] {
   let scheme = '';
   let servicePort = 0;
 

app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/helper.ts

@@ -1,5 +1,5 @@
 import { createColumnHelper } from '@tanstack/react-table';
 
-import { Service } from '../../../types';
+import { ServiceRowData } from '../types';
 
-export const columnHelper = createColumnHelper<Service>();
+export const columnHelper = createColumnHelper<ServiceRowData>();

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

@@ -4,7 +4,7 @@ import { filterHOC } from '@/react/components/datatables/Filter';
 
 import { Link } from '@@/Link';
 
-import { Service } from '../../../types';
+import { ServiceRowData } from '../types';
 
 import { columnHelper } from './helper';
 
@@ -31,6 +31,9 @@ export const namespace = columnHelper.accessor('Namespace', {
     filter: filterHOC('Filter by namespace'),
   },
   enableColumnFilter: true,
-  filterFn: (row: Row<Service>, columnId: string, filterValue: string[]) =>
-    filterValue.length === 0 || filterValue.includes(row.original.Namespace),
+  filterFn: (
+    row: Row<ServiceRowData>,
+    columnId: string,
+    filterValue: string[]
+  ) => filterValue.length === 0 || filterValue.includes(row.original.Namespace),
 });

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

@@ -2,7 +2,7 @@ import { Row } from '@tanstack/react-table';
 
 import { filterHOC } from '@@/datatables/Filter';
 
-import { Service } from '../../../types';
+import { ServiceRowData } from '../types';
 
 import { columnHelper } from './helper';
 
@@ -13,6 +13,9 @@ export const type = columnHelper.accessor('Type', {
     filter: filterHOC('Filter by type'),
   },
   enableColumnFilter: true,
-  filterFn: (row: Row<Service>, columnId: string, filterValue: string[]) =>
-    filterValue.length === 0 || filterValue.includes(row.original.Type),
+  filterFn: (
+    row: Row<ServiceRowData>,
+    columnId: string,
+    filterValue: string[]
+  ) => filterValue.length === 0 || filterValue.includes(row.original.Type),
 });

app/react/kubernetes/services/ServicesView/ServicesDatatable/types.ts

@@ -0,0 +1,5 @@
+import { Service } from '../../types';
+
+export type ServiceRowData = Service & {
+  IsSystem: boolean;
+};

app/react/kubernetes/services/types.ts

@@ -26,18 +26,17 @@ export type ServiceType =
 export type Service = {
   Name: string;
   UID: string;
+  Type: ServiceType;
   Namespace: string;
   Annotations?: Record<string, string>;
+  CreationDate: string;
   Labels?: Record<string, string>;
-  Type: ServiceType;
+  AllocateLoadBalancerNodePorts?: boolean;
   Ports?: Array<ServicePort>;
   Selector?: Record<string, string>;
-  ClusterIPs?: Array<string>;
   IngressStatus?: Array<IngressStatus>;
+  Applications?: Application[];
+  ClusterIPs?: Array<string>;
   ExternalName?: string;
   ExternalIPs?: Array<string>;
-  CreationDate: string;
-  Applications?: Application[];
-
-  IsSystem: boolean;
 };

app/react/kubernetes/services/useNamespaceServices.ts

@@ -0,0 +1,43 @@
+import { useQuery, UseQueryOptions } from '@tanstack/react-query';
+
+import { EnvironmentId } from '@/react/portainer/environments/types';
+import { error as notifyError } from '@/portainer/services/notifications';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+
+import { Service } from './types';
+
+export function useNamespaceServices<T = Service[]>(
+  environmentId: EnvironmentId,
+  namespace: string,
+  queryOptions?: UseQueryOptions<Service[], unknown, T>
+) {
+  return useQuery({
+    queryKey: [
+      'environments',
+      environmentId,
+      'kubernetes',
+      'namespaces',
+      namespace,
+      'services',
+    ],
+    queryFn: () => getServices(environmentId, namespace),
+    onError: (err) => {
+      notifyError('Failure', err as Error, 'Unable to get services');
+    },
+    ...queryOptions,
+  });
+}
+
+export async function getServices(
+  environmentId: EnvironmentId,
+  namespace: string
+) {
+  try {
+    const { data: services } = await axios.get<Service[]>(
+      `kubernetes/${environmentId}/namespaces/${namespace}/services`
+    );
+    return services;
+  } catch (e) {
+    throw parseAxiosError(e as Error, 'Unable to retrieve services');
+  }
+}