refactor(containers): migrate view to react [EE-2212] (#6577)

Co-authored-by: LP B <xAt0mZ@users.noreply.github.com>

app/react/docker/containers/queries/containers.ts

@@ -0,0 +1,50 @@
+import { useQuery } from 'react-query';
+
+import { EnvironmentId } from '@/portainer/environments/types';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+
+import { urlBuilder } from '../containers.service';
+import { DockerContainerResponse } from '../types/response';
+import { parseViewModel } from '../utils';
+
+import { Filters } from './types';
+import { queryKeys } from './query-keys';
+
+export function useContainers(
+  environmentId: EnvironmentId,
+  all = true,
+  filters?: Filters,
+  autoRefreshRate?: number
+) {
+  return useQuery(
+    queryKeys.filters(environmentId, all, filters),
+    () => getContainers(environmentId, all, filters),
+    {
+      meta: {
+        title: 'Failure',
+        message: 'Unable to retrieve containers',
+      },
+      refetchInterval() {
+        return autoRefreshRate ?? false;
+      },
+    }
+  );
+}
+
+async function getContainers(
+  environmentId: EnvironmentId,
+  all = true,
+  filters?: Filters
+) {
+  try {
+    const { data } = await axios.get<DockerContainerResponse[]>(
+      urlBuilder(environmentId, undefined, 'json'),
+      {
+        params: { all, filters: filters && JSON.stringify(filters) },
+      }
+    );
+    return data.map((c) => parseViewModel(c));
+  } catch (error) {
+    throw parseAxiosError(error as Error, 'Unable to retrieve containers');
+  }
+}

app/react/docker/containers/queries/gpus.tsx

@@ -0,0 +1,29 @@
+import { useQuery } from 'react-query';
+
+import { EnvironmentId } from '@/portainer/environments/types';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+
+import { queryKeys } from './query-keys';
+
+async function getContainerGpus(
+  environmentId: EnvironmentId,
+  containerId: string
+) {
+  try {
+    const { data } = await axios.get<{ gpus: string }>(
+      `/docker/${environmentId}/containers/${containerId}/gpus`
+    );
+    return data.gpus;
+  } catch (err) {
+    throw parseAxiosError(err as Error);
+  }
+}
+
+export function useContainerGpus(
+  environmentId: EnvironmentId,
+  containerId: string
+) {
+  return useQuery(queryKeys.gpus(environmentId, containerId), () =>
+    getContainerGpus(environmentId, containerId)
+  );
+}

app/react/docker/containers/queries/query-keys.ts

@@ -0,0 +1,19 @@
+import { EnvironmentId } from '@/portainer/environments/types';
+
+import { queryKeys as dockerQueryKeys } from '../../queries/utils';
+
+import { Filters } from './types';
+
+export const queryKeys = {
+  list: (environmentId: EnvironmentId) =>
+    [dockerQueryKeys.root(environmentId), 'containers'] as const,
+
+  filters: (environmentId: EnvironmentId, all?: boolean, filters?: Filters) =>
+    [...queryKeys.list(environmentId), { all, filters }] as const,
+
+  container: (environmentId: EnvironmentId, id: string) =>
+    [...queryKeys.list(environmentId), id] as const,
+
+  gpus: (environmentId: EnvironmentId, id: string) =>
+    [...queryKeys.container(environmentId, id), 'gpus'] as const,
+};

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

@@ -0,0 +1,6 @@
+import { NetworkId } from '../../networks/types';
+
+export interface Filters {
+  label?: string[];
+  network?: NetworkId[];
+}