feat(archived-instances): allow instances (jobs/apps) to be archived such that they won't be deleted automatically deleted

Author: OliverDudgeon

components/instances/ArchiveInstance.tsx

@@ -0,0 +1,42 @@
+import { useState } from "react";
+import { useQueryClient } from "react-query";
+
+import type { InstanceSummary } from "@squonk/data-manager-client";
+import {
+  getGetInstanceQueryKey,
+  getGetInstancesQueryKey,
+  usePatchInstance,
+} from "@squonk/data-manager-client/instance";
+
+import { Button, Tooltip } from "@mui/material";
+
+export interface ArchiveInstanceProps {
+  instanceId: InstanceSummary["id"];
+  archived: boolean;
+}
+
+export const ArchiveInstance = ({ instanceId, archived }: ArchiveInstanceProps) => {
+  const { mutateAsync: patchInstance } = usePatchInstance();
+  const queryClient = useQueryClient();
+  const [archiving, setArchiving] = useState(false);
+
+  const archiveInstance = async () => {
+    setArchiving(true);
+    await patchInstance({ instanceId, params: { archive: !archived } });
+    await Promise.allSettled([
+      queryClient.invalidateQueries(getGetInstanceQueryKey(instanceId)),
+      queryClient.invalidateQueries(getGetInstancesQueryKey()),
+    ]);
+    setArchiving(false);
+  };
+
+  return (
+    <Tooltip title="Toggle whether an instance will be deleted automatically">
+      <span>
+        <Button disabled={archiving} onClick={archiveInstance}>
+          {archived ? "Unarchive" : "Archive"}
+        </Button>
+      </span>
+    </Tooltip>
+  );
+};

components/instances/ArchivedStatus.tsx

@@ -0,0 +1,18 @@
+import InventoryIcon from "@mui/icons-material/Inventory";
+import { ListItem, ListItemIcon, Tooltip } from "@mui/material";
+
+export interface ArchivedStatusProps {
+  archived: boolean;
+}
+
+export const ArchivedStatus = ({ archived }: ArchivedStatusProps) => {
+  return archived ? (
+    <Tooltip title="This instance won't be deleted automatically">
+      <ListItem>
+        <ListItemIcon sx={{ minWidth: "40px" }}>
+          <InventoryIcon />
+        </ListItemIcon>
+      </ListItem>
+    </Tooltip>
+  ) : null;
+};

components/instances/ResultApplicationCard.tsx

@@ -9,6 +9,8 @@ import { useProjectFromId } from "../../hooks/projectHooks";
 import { ProjectListItem } from "../projects/ProjectListItem";
 import { ResultCard } from "../results/ResultCard";
 import { ApplicationDetails } from "./ApplicationDetails";
+import { ArchivedStatus } from "./ArchivedStatus";
+import { ArchiveInstance } from "./ArchiveInstance";
 import { TerminateInstance } from "./TerminateInstance";
 import { useInstanceRouterQuery } from "./useInstanceRouterQuery";
 
@@ -62,6 +64,7 @@ export const ResultApplicationCard = ({
               Open
             </HrefButton>
           )}
+          <ArchiveInstance archived={instance.archived} instanceId={instanceId} />
         </>
       )}
       collapsed={
@@ -82,6 +85,7 @@ export const ResultApplicationCard = ({
         <ListItemText primary={instance.name} />
       </ListItem>
       <ProjectListItem projectName={associatedProject?.name || "loading..."} />
+      <ArchivedStatus archived={instance.archived} />
     </ResultCard>
   );
 };

components/instances/ResultJobCard.tsx

@@ -7,6 +7,8 @@ import { RerunJobButton } from "../../components/results/RerunJobButton";
 import { ResultCard } from "../../components/results/ResultCard";
 import { useProjectFromId } from "../../hooks/projectHooks";
 import { ProjectListItem } from "../projects/ProjectListItem";
+import { ArchivedStatus } from "./ArchivedStatus";
+import { ArchiveInstance } from "./ArchiveInstance";
 import { JobDetails } from "./JobDetails";
 import { TerminateInstance } from "./TerminateInstance";
 import { useInstanceRouterQuery } from "./useInstanceRouterQuery";
@@ -54,6 +56,7 @@ export const ResultJobCard = ({
           />
           <RerunJobButton instance={instance} />
           <LogsButton instance={instance} instanceId={instanceId} />
+          <ArchiveInstance archived={instance.archived} instanceId={instanceId} />
         </>
       )}
       collapsed={
@@ -74,6 +77,7 @@ export const ResultJobCard = ({
         <ListItemText primary={instance.name} secondary={instance.job_name} />
       </ListItem>
       <ProjectListItem projectName={associatedProject?.name || "loading..."} />
+      <ArchivedStatus archived={instance.archived} />
     </ResultCard>
   );
 };