diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json index ad97ab109..4ea57bea3 100644 --- a/packages/translation/src/lang/en.json +++ b/packages/translation/src/lang/en.json @@ -5205,6 +5205,9 @@ "title": "Containers", "table": { "updated": "Updated {when}", + "refresh": { + "lastUpdated": "Last refresh {when}" + }, "search": "Seach {count} containers", "selected": "{selectCount} of {totalCount} containers selected", "footer": "Total {count} containers", diff --git a/packages/widgets/src/docker/component.tsx b/packages/widgets/src/docker/component.tsx index 72eb779b5..bbd961c1d 100644 --- a/packages/widgets/src/docker/component.tsx +++ b/packages/widgets/src/docker/component.tsx @@ -3,7 +3,7 @@ import { useMemo } from "react"; import { ActionIcon, Avatar, Badge, Center, Group, Stack, Text, Tooltip } from "@mantine/core"; import type { IconProps } from "@tabler/icons-react"; -import { IconBrandDocker, IconPlayerPlay, IconPlayerStop, IconRotateClockwise } from "@tabler/icons-react"; +import { IconBrandDocker, IconPlayerPlay, IconPlayerStop, IconRefresh, IconRotateClockwise } from "@tabler/icons-react"; import type { MRT_ColumnDef, MRT_VisibilityState } from "mantine-react-table"; import { MantineReactTable } from "mantine-react-table"; @@ -184,7 +184,11 @@ export default function DockerWidget({ options, width, isEditMode }: WidgetCompo const t = useScopedI18n("docker"); const isTiny = width <= 256; - const { data } = clientApi.docker.getContainers.useQuery(undefined, { + const { + data, + refetch, + isFetching, + } = clientApi.docker.getContainers.useQuery(undefined, { refetchInterval: 30_000, }); const containers = data?.containers ?? []; @@ -300,9 +304,20 @@ export default function DockerWidget({ options, width, isEditMode }: WidgetCompo {t("table.totalMemory", { memory: formatBytes(totals.memory) })} - - {t("table.updated", { when: relativeTime })} - + + void refetch()} + aria-label={t("table.refresh.lastUpdated", { when: relativeTime })} + > + + + )} diff --git a/packages/widgets/src/docker/index.ts b/packages/widgets/src/docker/index.ts index 76cdb97f3..4a988c779 100644 --- a/packages/widgets/src/docker/index.ts +++ b/packages/widgets/src/docker/index.ts @@ -25,6 +25,7 @@ const columnTranslationKeyMap = { export const { definition, componentLoader } = createWidgetDefinition("dockerContainers", { icon: IconBrandDocker, + queryKey: [["docker", "getContainers"]], createOptions() { return optionsBuilder.from((factory) => ({ columns: factory.multiSelect({