refactor(containers): migrate create view to react [EE-2307] (#9175)

app/react/docker/agent/NodeSelector.tsx

@@ -0,0 +1,48 @@
+import { useEffect } from 'react';
+
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+
+import { Option, PortainerSelect } from '@@/form-components/PortainerSelect';
+import { FormControl } from '@@/form-components/FormControl';
+
+import { useApiVersion } from './queries/useApiVersion';
+import { useAgentNodes } from './queries/useAgentNodes';
+
+export function NodeSelector({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  const environmentId = useEnvironmentId();
+
+  const apiVersionQuery = useApiVersion(environmentId);
+
+  const nodesQuery = useAgentNodes<Array<Option<string>>>(
+    environmentId,
+    apiVersionQuery.data || 1,
+    {
+      select: (data) =>
+        data.map((node) => ({ label: node.NodeName, value: node.NodeName })),
+      enabled: apiVersionQuery.data !== undefined,
+    }
+  );
+
+  useEffect(() => {
+    if (nodesQuery.data && !value && nodesQuery.data.length > 0) {
+      onChange(nodesQuery.data[0].value);
+    }
+  }, [nodesQuery.data, onChange, value]);
+
+  return (
+    <FormControl label="Node" inputId="node-selector">
+      <PortainerSelect
+        inputId="node-selector"
+        value={value}
+        onChange={onChange}
+        options={nodesQuery.data || []}
+      />
+    </FormControl>
+  );
+}

app/react/docker/agent/queries/build-url.ts

@@ -0,0 +1,17 @@
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+export function buildAgentUrl(
+  environmentId: EnvironmentId,
+  apiVersion: number,
+  action: string
+) {
+  let url = `/endpoints/${environmentId}/agent/docker`;
+
+  if (apiVersion > 1) {
+    url += `/v${apiVersion}`;
+  }
+
+  url += `/${action}`;
+
+  return url;
+}

app/react/docker/agent/queries/useAgentNodes.ts

@@ -0,0 +1,44 @@
+import { useQuery } from 'react-query';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { buildAgentUrl } from './build-url';
+
+interface Node {
+  IPAddress: string;
+  NodeName: string;
+  NodeRole: string;
+}
+
+export function useAgentNodes<T = Array<Node>>(
+  environmentId: EnvironmentId,
+  apiVersion: number,
+  {
+    select,
+    enabled,
+  }: {
+    select?: (data: Array<Node>) => T;
+    enabled?: boolean;
+  } = {}
+) {
+  return useQuery(
+    ['environment', environmentId, 'agent', 'nodes'],
+    () => getNodes(environmentId, apiVersion),
+    {
+      select,
+      enabled,
+    }
+  );
+}
+
+async function getNodes(environmentId: EnvironmentId, apiVersion: number) {
+  try {
+    const response = await axios.get<Array<Node>>(
+      buildAgentUrl(environmentId, apiVersion, 'agents')
+    );
+    return response.data;
+  } catch (error) {
+    throw parseAxiosError(error as Error, 'Unable to retrieve nodes');
+  }
+}

app/react/docker/agent/queries/useApiVersion.ts

@@ -0,0 +1,29 @@
+import { useQuery } from 'react-query';
+
+import axios, {
+  isAxiosError,
+  parseAxiosError,
+} from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { buildUrl } from '../../proxy/queries/build-url';
+
+export function useApiVersion(environmentId: EnvironmentId) {
+  return useQuery(['environment', environmentId, 'agent', 'ping'], () =>
+    getApiVersion(environmentId)
+  );
+}
+
+async function getApiVersion(environmentId: EnvironmentId) {
+  try {
+    const { headers } = await axios.get(buildUrl(environmentId, 'ping'));
+    return parseInt(headers['portainer-agent-api-version'], 10) || 1;
+  } catch (error) {
+    // 404 - agent is up - set version to 1
+    if (isAxiosError(error) && error.response?.status === 404) {
+      return 1;
+    }
+
+    throw parseAxiosError(error as Error, 'Unable to ping agent');
+  }
+}