feat: add refresh button to docker containers table (#913)

apps/nextjs/src/app/[locale]/manage/tools/docker/docker-table.tsx

@@ -2,7 +2,7 @@
 
 import type { MantineColor } from "@mantine/core";
 import { Avatar, Badge, Box, Button, Group, Text } from "@mantine/core";
-import { IconPlayerPlay, IconPlayerStop, IconRotateClockwise, IconTrash } from "@tabler/icons-react";
+import { IconPlayerPlay, IconPlayerStop, IconRefresh, IconRotateClockwise, IconTrash } from "@tabler/icons-react";
 import type { MRT_ColumnDef } from "mantine-react-table";
 import { MantineReactTable } from "mantine-react-table";
 
@@ -46,10 +46,12 @@ const createColumns = (
     accessorKey: "image",
     header: t("docker.field.containerImage.label"),
     maxSize: 200,
-    Cell({ renderedCellValue }) {
+    Cell({ renderedCellValue, cell }) {
       return (
         <Box maw={200}>
-          <Text truncate="end">{renderedCellValue}</Text>
+          <Text truncate="end" title={cell.row.original.image}>
+            {renderedCellValue}
+          </Text>
         </Box>
       );
     },
@@ -93,6 +95,35 @@ export function DockerTable(initialData: RouterOutputs["docker"]["getContainers"
     },
 
     initialState: { density: "xs", showGlobalFilter: true },
+    renderTopToolbarCustomActions: () => {
+      const utils = clientApi.useUtils();
+      const { mutate, isPending } = clientApi.docker.invalidate.useMutation({
+        async onSuccess() {
+          await utils.docker.getContainers.invalidate();
+          showSuccessNotification({
+            title: tDocker("action.refresh.notification.success.title"),
+            message: tDocker("action.refresh.notification.success.message"),
+          });
+        },
+        onError() {
+          showErrorNotification({
+            title: tDocker("action.refresh.notification.error.title"),
+            message: tDocker("action.refresh.notification.error.message"),
+          });
+        },
+      });
+
+      return (
+        <Button
+          variant="default"
+          rightSection={<IconRefresh size="1rem" />}
+          onClick={() => mutate()}
+          loading={isPending}
+        >
+          {tDocker("action.refresh.label")}
+        </Button>
+      );
+    },
     renderToolbarAlertBannerContent: ({ groupedAlert, table }) => {
       return (
         <Group gap={"sm"}>

packages/api/src/router/docker/docker-router.ts

@@ -59,6 +59,10 @@ export const dockerRouter = createTRPCRouter({
       timestamp,
     };
   }),
+  invalidate: permissionRequiredProcedure.requiresPermission("admin").mutation(async () => {
+    await dockerCache.invalidateAsync();
+    return;
+  }),
   startAll: permissionRequiredProcedure
     .requiresPermission("admin")
     .input(z.object({ ids: z.array(z.string()) }))

packages/translation/src/lang/en.ts

@@ -1656,6 +1656,19 @@ export default {
           },
         },
       },
+      refresh: {
+        label: "Refresh",
+        notification: {
+          success: {
+            title: "Containers refreshed",
+            message: "You are now viewing the most recent data",
+          },
+          error: {
+            title: "Containers not refreshed",
+            message: "Something went wrong while refreshing the containers",
+          },
+        },
+      },
     },
   },
   permission: {