@@ -82,7 +80,7 @@ function SortWrapper({
);
}
-interface TableColumnHeaderAngularProps {
+export interface TableColumnHeaderAngularProps {
colTitle: string;
canSort: boolean;
isSorted?: boolean;
@@ -94,7 +92,8 @@ export function TableColumnHeaderAngular({
isSorted,
colTitle,
isSortedDesc = true,
-}: TableColumnHeaderAngularProps) {
+ children,
+}: PropsWithChildren
) {
return (
{colTitle}
+ {children}
);
diff --git a/app/react/components/datatables/extend-options/withGlobalFilter.ts b/app/react/components/datatables/extend-options/withGlobalFilter.ts
index 22090838e..cce2ec24b 100644
--- a/app/react/components/datatables/extend-options/withGlobalFilter.ts
+++ b/app/react/components/datatables/extend-options/withGlobalFilter.ts
@@ -3,9 +3,12 @@ import { TableOptions } from '@tanstack/react-table';
import { defaultGlobalFilterFn } from '../Datatable';
import { DefaultType } from '../types';
-export function withGlobalFilter(
- filterFn: typeof defaultGlobalFilterFn
-) {
+export function withGlobalFilter<
+ D extends DefaultType,
+ TFilter extends {
+ search: string;
+ },
+>(filterFn: typeof defaultGlobalFilterFn) {
return function extendOptions(options: TableOptions) {
return {
...options,
diff --git a/app/react/components/datatables/useRepeater.ts b/app/react/components/datatables/useRepeater.ts
index f2fb7d8d6..03a8c4661 100644
--- a/app/react/components/datatables/useRepeater.ts
+++ b/app/react/components/datatables/useRepeater.ts
@@ -2,7 +2,7 @@ import { useEffect, useCallback, useState } from 'react';
export function useRepeater(
refreshRate: number,
- onRefresh?: () => Promise
+ onRefresh?: () => Promise | void
) {
const [intervalId, setIntervalId] = useState(null);
diff --git a/app/react/docker/components/ImageStatus/ImageStatus.tsx b/app/react/docker/components/ImageStatus/ImageStatus.tsx
new file mode 100644
index 000000000..eabc8213c
--- /dev/null
+++ b/app/react/docker/components/ImageStatus/ImageStatus.tsx
@@ -0,0 +1,85 @@
+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';
+
+export interface Props {
+ environmentId: EnvironmentId;
+ resourceId: ResourceID;
+ resourceType?: ResourceType;
+ nodeName?: string;
+}
+
+export function ImageStatus({
+ environmentId,
+ resourceId,
+ resourceType = ResourceType.CONTAINER,
+ nodeName = '',
+}: Props) {
+ const enableImageNotificationQuery = useEnvironment(
+ environmentId,
+ (environment) => environment?.EnableImageNotification
+ );
+
+ const { data, isLoading, isError } = useImageNotification(
+ environmentId,
+ resourceId,
+ resourceType,
+ nodeName,
+ enableImageNotificationQuery.data
+ );
+
+ if (!enableImageNotificationQuery.data || isError) {
+ return null;
+ }
+
+ if (isLoading || !data) {
+ return (
+
+ );
+ }
+
+ return (
+
+ );
+}
+
+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,
+ }
+ );
+}
diff --git a/app/react/docker/components/ImageStatus/helpers.ts b/app/react/docker/components/ImageStatus/helpers.ts
new file mode 100644
index 000000000..bc7238967
--- /dev/null
+++ b/app/react/docker/components/ImageStatus/helpers.ts
@@ -0,0 +1,20 @@
+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 UpdatesUnknown from '@/assets/ico/icon_updates-unknown.svg?c';
+
+import { ImageStatus } from '../../images/types';
+
+export function statusIcon(status: ImageStatus) {
+ switch (status.Status) {
+ case 'outdated':
+ return UpdatesAvailable;
+ case 'updated':
+ return UpToDate;
+ case 'processing':
+ return Loader;
+ default:
+ return UpdatesUnknown;
+ }
+}
diff --git a/app/react/docker/components/ImageStatus/index.js b/app/react/docker/components/ImageStatus/index.js
new file mode 100644
index 000000000..a2045252b
--- /dev/null
+++ b/app/react/docker/components/ImageStatus/index.js
@@ -0,0 +1 @@
+export { ImageStatus } from './ImageStatus';
diff --git a/app/react/docker/components/datatable/TableColumnHeaderImageUpToDate.tsx b/app/react/docker/components/datatable/TableColumnHeaderImageUpToDate.tsx
new file mode 100644
index 000000000..670bf2525
--- /dev/null
+++ b/app/react/docker/components/datatable/TableColumnHeaderImageUpToDate.tsx
@@ -0,0 +1,65 @@
+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 { useEnvironment } from '@/react/portainer/environments/queries';
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+
+import { Icon } from '@@/Icon';
+import { Tooltip } from '@@/Tip/Tooltip';
+import {
+ TableColumnHeaderAngular,
+ TableColumnHeaderAngularProps,
+} from '@@/datatables/TableHeaderCell';
+
+export function TableColumnHeaderImageUpToDate({
+ canSort,
+ isSorted,
+ colTitle,
+ isSortedDesc = true,
+}: TableColumnHeaderAngularProps) {
+ return (
+
+
+
+ );
+}
+
+export function ImageUpToDateTooltip() {
+ const environmentId = useEnvironmentId();
+
+ const enableImageNotificationQuery = useEnvironment(
+ environmentId,
+ (environment) => environment?.EnableImageNotification
+ );
+
+ if (!enableImageNotificationQuery.data) {
+ return null;
+ }
+
+ return (
+
+
+
+ Images are up to date
+
+
+
+ Updates are available
+
+
+
+ Updates availability unknown
+
+