refactor(docker/containers): migrate networks table to react [EE-4665] (#10069)

app/react/docker/networks/queries/buildUrl.ts

@@ -0,0 +1,20 @@
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { buildUrl as buildDockerUrl } from '../../proxy/queries/build-url';
+import { NetworkId } from '../types';
+
+export function buildUrl(
+  environmentId: EnvironmentId,
+  { id, action }: { id?: NetworkId; action?: string } = {}
+) {
+  let baseUrl = 'networks';
+  if (id) {
+    baseUrl += `/${id}`;
+  }
+
+  if (action) {
+    baseUrl += `/${action}`;
+  }
+
+  return buildDockerUrl(environmentId, baseUrl);
+}

app/react/docker/networks/queries/queryKeys.ts

@@ -0,0 +1,12 @@
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { queryKeys as dockerQueryKeys } from '../../queries/utils';
+
+import { NetworksQuery } from './types';
+
+export const queryKeys = {
+  base: (environmentId: EnvironmentId) =>
+    [...dockerQueryKeys.root(environmentId), 'networks'] as const,
+  list: (environmentId: EnvironmentId, query: NetworksQuery) =>
+    [...queryKeys.base(environmentId), 'list', query] as const,
+};

app/react/docker/networks/queries/types.ts

@@ -0,0 +1,23 @@
+interface Filters {
+  /* dangling=<boolean> When set to true (or 1), returns all networks that are not in use by a container. When set to false (or 0), only networks that are in use by one or more containers are returned. */
+  dangling?: boolean[];
+  // Matches a network's driver
+  driver?: string[];
+  // Matches all or part of a network ID
+  id?: string[];
+  // `label=<key>` or `label=<key>=<value>` of a network label.
+  label?: string[];
+  // Matches all or part of a network name.
+  name?: string[];
+  // Filters networks by scope (swarm, global, or local).
+  scope?: ('swarm' | 'global' | 'local')[];
+  //  Filters networks by type. The custom keyword returns all user-defined networks.
+  type?: ('custom' | 'builtin')[];
+}
+
+export interface NetworksQuery {
+  local?: boolean;
+  swarm?: boolean;
+  swarmAttachable?: boolean;
+  filters?: Filters;
+}

app/react/docker/networks/queries/useConnectContainer.ts

@@ -0,0 +1,73 @@
+import { EndpointSettings } from 'docker-types/generated/1.41';
+import { AxiosRequestHeaders } from 'axios';
+import { useMutation, useQueryClient } from 'react-query';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+import {
+  mutationOptions,
+  withError,
+  withInvalidate,
+} from '@/react-tools/react-query';
+
+import { queryKeys as dockerQueryKeys } from '../../queries/utils';
+
+import { buildUrl } from './buildUrl';
+
+interface ConnectContainerPayload {
+  Container: string;
+  EndpointConfig?: EndpointSettings;
+}
+
+export function useConnectContainerMutation(environmentId: EnvironmentId) {
+  const queryClient = useQueryClient();
+
+  return useMutation(
+    (params: Omit<ConnectContainer, 'environmentId'>) =>
+      connectContainer({ ...params, environmentId }),
+    mutationOptions(
+      withError('Failed connecting container to network'),
+      withInvalidate(queryClient, [dockerQueryKeys.containers(environmentId)])
+    )
+  );
+}
+
+interface ConnectContainer {
+  environmentId: EnvironmentId;
+  networkId: string;
+  containerId: string;
+  aliases?: EndpointSettings['Aliases'];
+  nodeName?: string;
+}
+
+export async function connectContainer({
+  environmentId,
+  containerId,
+  networkId,
+  aliases,
+  nodeName,
+}: ConnectContainer) {
+  const payload: ConnectContainerPayload = {
+    Container: containerId,
+  };
+  if (aliases) {
+    payload.EndpointConfig = {
+      Aliases: aliases,
+    };
+  }
+
+  const headers: AxiosRequestHeaders = {};
+
+  if (nodeName) {
+    headers['X-PortainerAgent-Target'] = nodeName;
+  }
+
+  try {
+    await axios.post(
+      buildUrl(environmentId, { id: networkId, action: 'connect' }),
+      payload
+    );
+  } catch (err) {
+    throw parseAxiosError(err as Error, 'Unable to connect container');
+  }
+}

app/react/docker/networks/queries/useNetworks.ts

@@ -0,0 +1,59 @@
+import { useQuery } from 'react-query';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { buildUrl } from '../../proxy/queries/build-url';
+import { DockerNetwork } from '../types';
+
+import { queryKeys } from './queryKeys';
+import { NetworksQuery } from './types';
+
+export function useNetworks<T = Array<DockerNetwork>>(
+  environmentId: EnvironmentId,
+  query: NetworksQuery,
+  {
+    enabled = true,
+    onSuccess,
+    select,
+  }: {
+    enabled?: boolean;
+    onSuccess?(networks: T): void;
+    select?(networks: Array<DockerNetwork>): T;
+  } = {}
+) {
+  return useQuery(
+    queryKeys.list(environmentId, query),
+    () => getNetworks(environmentId, query),
+    { enabled, onSuccess, select }
+  );
+}
+
+export async function getNetworks(
+  environmentId: EnvironmentId,
+  { local, swarm, swarmAttachable, filters }: NetworksQuery
+) {
+  try {
+    const { data } = await axios.get<Array<DockerNetwork>>(
+      buildUrl(environmentId, 'networks'),
+      filters && {
+        params: {
+          filters,
+        },
+      }
+    );
+
+    return !local && !swarm && !swarmAttachable
+      ? data
+      : data.filter(
+          (network) =>
+            (local && network.Scope === 'local') ||
+            (swarm && network.Scope === 'swarm') ||
+            (swarmAttachable &&
+              network.Scope === 'swarm' &&
+              network.Attachable === true)
+        );
+  } catch (err) {
+    throw parseAxiosError(err as Error, 'Unable to retrieve networks');
+  }
+}