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

app/react/docker/components/ImageStatus/ImageStatus.tsx

@@ -1,17 +1,14 @@
-import { useQuery } from 'react-query';
 import { Loader } from 'lucide-react';
 
-import {
-  getContainerImagesStatus,
-  getServiceImagesStatus,
-} from '@/react/docker/images/image.service';
 import { useEnvironment } from '@/react/portainer/environments/queries';
 import { statusIcon } from '@/react/docker/components/ImageStatus/helpers';
-import { ResourceID, ResourceType } from '@/react/docker/images/types';
 import { EnvironmentId } from '@/react/portainer/environments/types';
 
 import { Icon } from '@@/Icon';
 
+import { ResourceID, ResourceType } from './types';
+import { useImageNotification } from './useImageNotification';
+
 export interface Props {
   environmentId: EnvironmentId;
   resourceId: ResourceID;
@@ -56,30 +53,3 @@ export function ImageStatus({
     <Icon icon={statusIcon(data)} size="sm" className="!mr-1 align-middle" />
   );
 }
-
-export function useImageNotification(
-  environmentId: number,
-  resourceId: ResourceID,
-  resourceType: ResourceType,
-  nodeName: string,
-  enabled = false
-) {
-  return useQuery(
-    [
-      'environments',
-      environmentId,
-      'docker',
-      'images',
-      resourceType,
-      resourceId,
-      'status',
-    ],
-    () =>
-      resourceType === ResourceType.SERVICE
-        ? getServiceImagesStatus(environmentId, resourceId)
-        : getContainerImagesStatus(environmentId, resourceId, nodeName),
-    {
-      enabled,
-    }
-  );
-}

app/react/docker/components/ImageStatus/helpers.ts

@@ -4,7 +4,7 @@ import UpdatesAvailable from '@/assets/ico/icon_updates-available.svg?c';
 import UpToDate from '@/assets/ico/icon_up-to-date.svg?c';
 import UpdatesUnknown from '@/assets/ico/icon_updates-unknown.svg?c';
 
-import { ImageStatus } from '../../images/types';
+import { ImageStatus } from './types';
 
 export function statusIcon(status: ImageStatus) {
   switch (status.Status) {

app/react/docker/components/ImageStatus/types.ts

@@ -0,0 +1,13 @@
+type Status = 'outdated' | 'updated' | 'inprocess' | string;
+
+export enum ResourceType {
+  CONTAINER,
+  SERVICE,
+}
+
+export interface ImageStatus {
+  Status: Status;
+  Message: string;
+}
+
+export type ResourceID = string;

app/react/docker/components/ImageStatus/useImageNotification.ts

@@ -0,0 +1,75 @@
+import { useQuery } from 'react-query';
+
+import { EnvironmentId } from '@/react/portainer/environments/types';
+import axios from '@/portainer/services/axios';
+import { ServiceId } from '@/react/docker/services/types';
+import { ContainerId } from '@/react/docker/containers/types';
+
+import { ImageStatus, ResourceID, ResourceType } from './types';
+
+export function useImageNotification(
+  environmentId: number,
+  resourceId: ResourceID,
+  resourceType: ResourceType,
+  nodeName: string,
+  enabled = false
+) {
+  return useQuery(
+    [
+      'environments',
+      environmentId,
+      'docker',
+      'images',
+      resourceType,
+      resourceId,
+      'status',
+    ],
+    () =>
+      resourceType === ResourceType.SERVICE
+        ? getServiceImagesStatus(environmentId, resourceId)
+        : getContainerImagesStatus(environmentId, resourceId, nodeName),
+    {
+      enabled,
+    }
+  );
+}
+
+async function getContainerImagesStatus(
+  environmentId: EnvironmentId,
+  containerID: ContainerId,
+  nodeName: string
+) {
+  try {
+    let headers = {};
+    if (nodeName !== '') {
+      headers = { 'X-PortainerAgent-Target': nodeName };
+    }
+    const { data } = await axios.get<ImageStatus>(
+      `/docker/${environmentId}/containers/${containerID}/image_status`,
+      { headers }
+    );
+    return data;
+  } catch (e) {
+    return {
+      Status: 'unknown',
+      Message: `Unable to retrieve image status for container: ${containerID}`,
+    };
+  }
+}
+
+async function getServiceImagesStatus(
+  environmentId: EnvironmentId,
+  serviceID: ServiceId
+) {
+  try {
+    const { data } = await axios.get<ImageStatus>(
+      `/docker/${environmentId}/services/${serviceID}/image_status`
+    );
+    return data;
+  } catch (e) {
+    return {
+      Status: 'unknown',
+      Message: `Unable to retrieve image status for service: ${serviceID}`,
+    };
+  }
+}