Files
portainer/app/react/docker/containers/components/UpdateStatusBadge/UpdateStatusBadge.tsx
T
claude code agent f69eb3f9eb feat(automation): CE container image update detection endpoint + badge (#9, epic #3 M2)
Add native CE detection of "a newer image is available" for running
containers, surfaced as a read-only HTTP endpoint and a containers-list
badge/column. No applying of updates (M3/M4), no auto-heal (M1).

Backend:
- New CE handler GET /docker/{id}/containers/{containerId}/image_status
  backed by the existing zlib/CE digest engine
  (images.NewClientWithRegistry + ContainerImageStatus). Honors nodeName,
  authz, and routes registry calls through the credential store / SSRF
  AllowList. Engine failures degrade to a 200 {Status:"error"} so the UI
  stays graceful. Response shape: {Status, Message?}.

Frontend (CE-only, no isBE gating; the EE ImageStatus component is left
untouched):
- useContainerImageStatus TanStack Query hook (5min staleTime, no
  refetch-on-focus; backend caches 24h) calling the non-proxied endpoint.
- UpdateStatusBadge component (own assets, neutral on skipped/error).
- "Update available" column in the containers datatable; one cached,
  non-blocking query per visible row.

Tests: Go response-shape unit test; vitest for the badge (all statuses)
and the hook (url + nodeName query param via msw).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-29 08:59:54 +03:00

53 lines
1.5 KiB
TypeScript

import { Loader } from 'lucide-react';
import UpdatesAvailable from '@/assets/ico/icon_updates-available.svg?c';
import UpToDate from '@/assets/ico/icon_up-to-date.svg?c';
import { Icon } from '@@/Icon';
import { ContainerImageStatusValue } from '../../queries/useContainerImageStatus';
export interface Props {
status?: ContainerImageStatusValue;
isLoading?: boolean;
}
/**
* CE container image update badge.
*
* Renders "Update available" when the image is outdated, an up-to-date indicator
* when it matches the registry, a spinner while the status is being fetched, and
* nothing for neutral states (skipped/error/processing/preparing) so that
* undetectable images don't clutter the UI.
*/
export function UpdateStatusBadge({ status, isLoading }: Props) {
if (isLoading) {
return (
<span role="status" aria-label="Checking for image updates">
<Icon icon={Loader} size="sm" spin className="!mr-1 align-middle" />
</span>
);
}
if (status === 'outdated') {
return (
<span className="inline-flex items-center gap-1 whitespace-nowrap text-warning">
<Icon icon={UpdatesAvailable} size="sm" className="align-middle" />
Update available
</span>
);
}
if (status === 'updated') {
return (
<span className="inline-flex items-center gap-1 whitespace-nowrap text-muted">
<Icon icon={UpToDate} size="sm" className="align-middle" />
Up to date
</span>
);
}
// skipped / error / processing / preparing / undefined -> neutral, nothing to show.
return null;
}