From f4b77598c3c2ca8e0a7f689abade2bab1e0f4c83 Mon Sep 17 00:00:00 2001
From: mbecker20 <becker.maxh@gmail.com>
Date: Mon, 25 Mar 2024 08:04:30 -0700
Subject: [PATCH] add updates page basic

---
 frontend/src/components/tags/index.tsx       | 15 ++++++-
 frontend/src/components/updates/resource.tsx |  2 +-
 frontend/src/components/updates/table.tsx    | 44 ++++++++++++++++++++
 frontend/src/pages/resource_update.tsx       | 31 ++++++++++++++
 frontend/src/router.tsx                      |  2 +
 5 files changed, 91 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/updates/table.tsx
 create mode 100644 frontend/src/pages/resource_update.tsx

diff --git a/frontend/src/components/tags/index.tsx b/frontend/src/components/tags/index.tsx
index 48d8665b9..aa57d0821 100644
--- a/frontend/src/components/tags/index.tsx
+++ b/frontend/src/components/tags/index.tsx
@@ -124,6 +124,8 @@ export const TagsWithBadge = ({
 };
 
 export const AddTags = ({ target }: { target: TargetExcludingSystem }) => {
+  const { toast } = useToast();
+
   const { type, id } = target;
   const resource = useRead(`List${type}s`, {}).data?.find((d) => d.id === id);
 
@@ -137,6 +139,7 @@ export const AddTags = ({ target }: { target: TargetExcludingSystem }) => {
   const { mutate: update } = useWrite("UpdateTagsOnResource", {
     onSuccess: () => {
       inv([`List${type}s`]);
+      toast({ title: `Added tag ${input}` });
       setOpen(false);
     },
   });
@@ -157,7 +160,6 @@ export const AddTags = ({ target }: { target: TargetExcludingSystem }) => {
     if (open) setInput("");
   }, [open]);
 
-  const { toast } = useToast();
   const create_tag = async () => {
     if (!input) return toast({ title: "Must provide tag name in input" });
     const tag = await create({ name: input });
@@ -180,10 +182,19 @@ export const AddTags = ({ target }: { target: TargetExcludingSystem }) => {
       <PopoverContent className="w-[200px] p-0" sideOffset={12}>
         <Command>
           <CommandInput
-            placeholder="Search Tags"
+            placeholder="Search / Create"
             className="h-9"
             value={input}
             onValueChange={setInput}
+            onKeyDown={(e) => {
+              if (
+                e.key === "Enter" &&
+                // check that no tags still match
+                all_tags?.every((tag) => !tag.name.includes(input))
+              ) {
+                create_tag();
+              }
+            }}
           />
           <CommandEmpty
             className="justify-between cursor-pointer hover:bg-accent m-1"
diff --git a/frontend/src/components/updates/resource.tsx b/frontend/src/components/updates/resource.tsx
index 699a2c5aa..ef611a47d 100644
--- a/frontend/src/components/updates/resource.tsx
+++ b/frontend/src/components/updates/resource.tsx
@@ -129,7 +129,7 @@ export const ResourceUpdates = ({ type, id }: Types.ResourceTarget) => {
       title="Updates"
       icon={<Bell className="w-4 h-4" />}
       actions={
-        <Link to={`/deployments/${id}/updates`}>
+        <Link to={`/${type.toLowerCase()}s/${id}/updates`}>
           <Button variant="secondary">
             <ExternalLink className="w-4 h-4" />
           </Button>
diff --git a/frontend/src/components/updates/table.tsx b/frontend/src/components/updates/table.tsx
new file mode 100644
index 000000000..34494cb3a
--- /dev/null
+++ b/frontend/src/components/updates/table.tsx
@@ -0,0 +1,44 @@
+import { fmt_date_with_minutes } from "@lib/utils";
+import { Types } from "@monitor/client";
+import { DataTable } from "@ui/data-table";
+
+export const UpdatesTable = ({
+  updates,
+	showTarget,
+}: {
+  updates: Types.UpdateListItem[];
+	showTarget?: boolean;
+}) => {
+  return (
+    <DataTable
+      data={updates}
+      columns={[
+        // showTarget ? {
+        // 	header: "Target",
+        // 	accessorKey: "target.id",
+        // } : undefined,
+        {
+          header: "Operation",
+          accessorKey: "operation",
+        },
+        {
+          header: "Status",
+          accessorKey: "status",
+        },
+        {
+          header: "Success",
+          accessorFn: ({ success }) => success ? "Ok" : "Fail",
+        },
+        {
+          header: "Start Time",
+          accessorFn: ({ start_ts }) =>
+            fmt_date_with_minutes(new Date(start_ts)),
+        },
+        {
+          header: "Operator",
+          accessorKey: "username",
+        },
+      ]}
+    />
+  );
+};
diff --git a/frontend/src/pages/resource_update.tsx b/frontend/src/pages/resource_update.tsx
new file mode 100644
index 000000000..e79fc6d46
--- /dev/null
+++ b/frontend/src/pages/resource_update.tsx
@@ -0,0 +1,31 @@
+import { Page } from "@components/layouts";
+import { ResourceComponents } from "@components/resources";
+import { AddTags, ResourceTags } from "@components/tags";
+import { UpdatesTable } from "@components/updates/table";
+import { useRead, useResourceParamType } from "@lib/hooks";
+import { useParams } from "react-router-dom";
+
+export const ResourceUpdates = () => {
+  const type = useResourceParamType();
+  const id = useParams().id as string;
+  const updates = useRead("ListUpdates", {
+    query: {
+      "target.type": type,
+      "target.id": id,
+    },
+  }).data;
+  const Components = ResourceComponents[type];
+  return (
+    <Page
+      title={<Components.Name id={id} />}
+      titleRight={
+        <div className="flex gap-2">
+          <ResourceTags target={{ id, type }} click_to_delete />
+          <AddTags target={{ id, type }} />
+        </div>
+      }
+    >
+      <UpdatesTable updates={updates?.updates ?? []} />
+    </Page>
+  );
+};
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
index ec0b18791..a0b8fcd9e 100644
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -8,6 +8,7 @@ import { Keys } from "@pages/keys";
 import { RouterProvider, createBrowserRouter } from "react-router-dom";
 import { Tree } from "@pages/tree";
 import { Tags } from "@pages/tags";
+import { ResourceUpdates } from "@pages/resource_update";
 
 const router = createBrowserRouter([
   {
@@ -23,6 +24,7 @@ const router = createBrowserRouter([
         children: [
           { path: "", element: <Resources /> },
           { path: ":id", element: <Resource /> },
+          { path: ":id/updates", element: <ResourceUpdates /> }
         ],
       },
     ],