resource updates page open details

bin/core/src/helpers/mod.rs

@@ -13,7 +13,7 @@ use monitor_client::entities::{
 };
 use mungos::{
   by_id::{find_one_by_id, update_one_by_id},
-  mongodb::bson::{doc, oid::ObjectId, to_bson, to_document},
+  mongodb::bson::{doc, oid::ObjectId, to_document},
 };
 use periphery_client::{api, PeripheryClient};
 use rand::{thread_rng, Rng};
@@ -201,20 +201,26 @@ pub async fn remove_from_recently_viewed(
   resource: impl Into<ResourceTarget>,
 ) -> anyhow::Result<()> {
   let resource: ResourceTarget = resource.into();
-  db_client().await
-      .users
-      .update_many(
-          doc! {},
-          doc! {
-            "$pull": {
-              "recently_viewed":
-                to_bson(&resource).context("failed to convert resource to bson")?
-            }
-          },
-          None
-      )
-      .await
-      .context("failed to remove resource from users recently viewed")?;
+  let (ty, id) = resource.extract_variant_id();
+  db_client()
+    .await
+    .users
+    .update_many(
+      doc! {},
+      doc! {
+        "$pull": {
+          "recently_viewed": {
+            "type": ty.to_string(),
+            "id": id,
+          }
+        }
+      },
+      None,
+    )
+    .await
+    .context(
+      "failed to remove resource from users recently viewed",
+    )?;
   Ok(())
 }
 

frontend/src/components/layouts.tsx

@@ -47,7 +47,7 @@ export const Page = ({
   actions,
   children,
 }: PageProps) => (
-  <div className="flex flex-col gap-8 container py-8">
+  <div className="flex flex-col gap-12 container py-8">
     {(title || subtitle || actions) && (
       <div className="flex flex-col gap-6 lg:flex-row lg:gap-0 lg:items-start justify-between">
         <div className="flex flex-col gap-2">

frontend/src/components/resources/deployment/config/index.tsx

@@ -83,8 +83,6 @@ export const DeploymentConfig = ({ id }: { id: string }) => {
                 onChange={(process_args) => set({ process_args })}
               />
             ),
-          },
-          network: {
             network: (value, set) => (
               <NetworkModeSelector
                 server_id={update.server_id ?? config.server_id}
@@ -94,16 +92,10 @@ export const DeploymentConfig = ({ id }: { id: string }) => {
             ),
             ports: (value, set) =>
               show_ports && <PortsConfig ports={value ?? []} set={set} />,
-          },
-          volumes: {
             volumes: (v, set) => <VolumesConfig volumes={v ?? []} set={set} />,
-          },
-          extra_args: {
             extra_args: (value, set) => (
               <ExtraArgs args={value ?? []} set={set} />
             ),
-          },
-          termination: {
             termination_signal: (value, set) => (
               <DefaultTerminationSignal arg={value} set={set} />
             ),

frontend/src/components/updates/details.tsx

@@ -35,7 +35,27 @@ export const UpdateDetails = ({
   children: ReactNode;
 }) => {
   const [open, setOpen] = useState(false);
+  return (
+    <UpdateDetailsInner
+      id={id}
+      children={children}
+      open={open}
+      setOpen={setOpen}
+    />
+  );
+};
 
+export const UpdateDetailsInner = ({
+  id,
+  children,
+  open,
+  setOpen,
+}: {
+  id: string;
+  children?: ReactNode;
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}) => {
   const update = useRead("GetUpdate", { id }).data;
   if (!update) return null;
 
@@ -64,8 +84,13 @@ export const UpdateDetails = ({
               <UpdateUser user_id={update.operator} />
             </div>
             <div className="flex gap-4">
-              <Link to={`/${update.target.type.toLowerCase()}s/${update.target.id}`}>
-                <div className="flex items-center gap-2" onClick={() => setOpen(false)}>
+              <Link
+                to={`/${update.target.type.toLowerCase()}s/${update.target.id}`}
+              >
+                <div
+                  className="flex items-center gap-2"
+                  onClick={() => setOpen(false)}
+                >
                   <Components.Icon id={update.target.id} />
                   <Components.Name id={update.target.id} />
                 </div>
@@ -139,4 +164,4 @@ export const UpdateDetails = ({
       </SheetContent>
     </Sheet>
   );
-};
+};

frontend/src/components/updates/table.tsx

@@ -2,6 +2,8 @@ import { fmt_date_with_minutes } from "@lib/formatting";
 import { Types } from "@monitor/client";
 import { ColumnDef } from "@tanstack/react-table";
 import { DataTable } from "@ui/data-table";
+import { useState } from "react";
+import { UpdateDetailsInner } from "./details";
 
 export const UpdatesTable = ({
   updates,
@@ -42,5 +44,15 @@ export const UpdatesTable = ({
       ...data,
     ];
   }
-  return <DataTable data={updates} columns={data} />;
+  const [id, setId] = useState("");
+  return (
+    <>
+      <DataTable
+        data={updates}
+        columns={data}
+        onRowClick={(row) => setId(row.id)}
+      />
+      <UpdateDetailsInner id={id} open={!!id} setOpen={() => setId("")} />
+    </>
+  );
 };

frontend/src/lib/hooks.ts

@@ -163,5 +163,5 @@ export const usePushRecentlyViewed = ({ type, id }: Types.ResourceTarget) => {
     !!type && !!id && push({ resource: { type, id } });
   }, [type, id, push]);
 
-  return push;
+  return () => push({ resource: { type, id } });
 };

frontend/src/pages/home/dashboard.tsx

@@ -1,17 +1,25 @@
 import { Page, Section } from "@components/layouts";
-import { Box, FolderTree } from "lucide-react";
-import { Link } from "react-router-dom";
-import { Card, CardDescription, CardHeader, CardTitle } from "@ui/card";
+import { Box, FolderTree, History } from "lucide-react";
+import { Link, useNavigate } from "react-router-dom";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@ui/card";
 import { TagsSummary } from "@components/dashboard/tags";
 import { ApiKeysSummary } from "@components/dashboard/api-keys";
 import { ResourceComponents } from "@components/resources";
 import { OpenAlerts } from "@components/alert";
+import { useUser } from "@lib/hooks";
+import { ResourceLink } from "@components/util";
 
 export const Dashboard = () => {
   return (
     <Page title="">
-      {/* <RecentlyViewed /> */}
       <OpenAlerts />
+      <RecentlyViewed />
       <Resources />
     </Page>
   );
@@ -64,21 +72,31 @@ const Resources = () => (
   </Section>
 );
 
-// const RecentlyViewed = () => (
-//   <Section
-//     title="Recently Viewed"
-//     icon={<History className="w-4 h-4" />}
-//     actions=""
-//   >
-//     <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
-//       {useRead("GetUser", {})
-//         .data?.recently_viewed?.slice(0, 6)
-//         .map(
-//           (target) =>
-//             target.type !== "System" && (
-//               <ResourceCard target={target} key={target.id} />
-//             )
-//         )}
-//     </div>
-//   </Section>
-// );
+const RecentlyViewed = () => {
+  const nav = useNavigate();
+  const recently_viewed = useUser().data?.recently_viewed;
+  return (
+    <Section
+      title="Recently Viewed"
+      icon={<History className="w-4 h-4" />}
+      actions=""
+    >
+      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {recently_viewed?.slice(0, 6).map(
+          ({ type, id }) =>
+            type !== "System" && (
+              <Card
+                onClick={() => nav(`/${type.toLowerCase()}s/${id}`)}
+                className="px-3 py-2 h-full hover:bg-accent/50 group-focus:bg-accent/50 transition-colors cursor-pointer"
+              >
+                <CardContent className="flex items-center justify-between gap-4 px-3 py-2 text-sm text-muted-foreground">
+                  <ResourceLink type={type} id={id} />
+                  {type}
+                </CardContent>
+              </Card>
+            )
+        )}
+      </div>
+    </Section>
+  );
+};