feat(app): limit the docker API version supported by the frontend (#12295)

app/react/docker/DashboardView/ContainerStatus.tsx

@@ -3,15 +3,17 @@ import { Heart, Power } from 'lucide-react';
 import { Icon } from '@/react/components/Icon';
 
 import {
-  DockerContainer,
+  ContainerListViewModel,
   ContainerStatus as Status,
 } from '../containers/types';
 
 interface Props {
-  containers: DockerContainer[];
+  containers: ContainerListViewModel[];
 }
 
-export function useContainerStatusComponent(containers: DockerContainer[]) {
+export function useContainerStatusComponent(
+  containers: ContainerListViewModel[]
+) {
   return <ContainerStatus containers={containers} />;
 }
 
@@ -42,23 +44,23 @@ export function ContainerStatus({ containers }: Props) {
   );
 }
 
-function runningContainersFilter(containers: DockerContainer[]) {
+function runningContainersFilter(containers: ContainerListViewModel[]) {
   return containers.filter(
     (container) =>
       container.Status === Status.Running || container.Status === Status.Healthy
   ).length;
 }
-function stoppedContainersFilter(containers: DockerContainer[]) {
+function stoppedContainersFilter(containers: ContainerListViewModel[]) {
   return containers.filter(
     (container) =>
       container.Status === Status.Exited || container.Status === Status.Stopped
   ).length;
 }
-function healthyContainersFilter(containers: DockerContainer[]) {
+function healthyContainersFilter(containers: ContainerListViewModel[]) {
   return containers.filter((container) => container.Status === Status.Healthy)
     .length;
 }
-function unhealthyContainersFilter(containers: DockerContainer[]) {
+function unhealthyContainersFilter(containers: ContainerListViewModel[]) {
   return containers.filter((container) => container.Status === Status.Unhealthy)
     .length;
 }

app/react/docker/DashboardView/useDashboard.ts

@@ -0,0 +1,41 @@
+import { useQuery } from 'react-query';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { queryKeys } from '../queries/utils';
+import { buildDockerUrl } from '../queries/utils/buildDockerUrl';
+
+interface DashboardResponse {
+  containers: {
+    total: number;
+    running: number;
+    stopped: number;
+    healthy: number;
+    unhealthy: number;
+  };
+  services: number;
+  images: {
+    total: number;
+    size: number;
+  };
+  volumes: number;
+  networks: number;
+  stacks: number;
+}
+
+export function useDashboard(envId: EnvironmentId) {
+  return useQuery({
+    queryFn: async () => {
+      try {
+        const res = await axios.get<DashboardResponse>(
+          buildDockerUrl(envId, 'dashboard')
+        );
+        return res.data;
+      } catch (error) {
+        throw parseAxiosError(error);
+      }
+    },
+    queryKey: [...queryKeys.root(envId), 'dashboard'] as const,
+  });
+}