feat(docker/images): show used tag correctly [EE-5396] (#10305)

app/react/docker/proxy/queries/images/queryKeys.ts

@@ -0,0 +1,9 @@
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { queryKeys as proxyQueryKeys } from '../query-keys';
+
+export const queryKeys = {
+  base: (environmentId: EnvironmentId) =>
+    [proxyQueryKeys.base(environmentId), 'images'] as const,
+  list: (environmentId: EnvironmentId) => queryKeys.base(environmentId),
+};

app/react/docker/proxy/queries/images/useImages.ts

@@ -0,0 +1,36 @@
+import { useQuery } from 'react-query';
+import { ImageSummary } from 'docker-types/generated/1.41';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { buildUrl } from '../build-url';
+
+import { queryKeys } from './queryKeys';
+
+type ImagesListResponse = Array<ImageSummary>;
+
+export function useImages<T = ImagesListResponse>(
+  environmentId: EnvironmentId,
+  {
+    select,
+    enabled,
+  }: { select?(data: ImagesListResponse): T; enabled?: boolean } = {}
+) {
+  return useQuery(
+    queryKeys.list(environmentId),
+    () => getImages(environmentId),
+    { select, enabled }
+  );
+}
+
+async function getImages(environmentId: EnvironmentId) {
+  try {
+    const { data } = await axios.get<ImagesListResponse>(
+      buildUrl(environmentId, 'images', 'json')
+    );
+    return data;
+  } catch (err) {
+    throw parseAxiosError(err as Error, 'Unable to retrieve images');
+  }
+}