init alerters

frontend/src/components/updates/resource.tsx

@@ -31,8 +31,8 @@ const UpdatePlaceHolder = () => (
   </Card>
 );
 
-const UpdateCard = ({ update }: { update: Types.Update }) => (
-  <UpdateDetails update={update}>
+const UpdateCard = ({ update }: { update: Types.UpdateListItem }) => (
+  <UpdateDetails id={update.id}>
     <Card hoverable>
       <CardHeader className="flex-row justify-between">
         <CardTitle>{update.operation}</CardTitle>
@@ -76,7 +76,7 @@ export const ResourceUpdates = ({ type, id }: ResourceTarget) => {
       <div className="grid md:grid-cols-3 mt-2 gap-4">
         {isLoading && <UpdatePlaceHolder />}
         {data?.updates.slice(0, 3).map((update) => (
-          <UpdateCard update={update} key={update._id?.$oid} />
+          <UpdateCard update={update} key={update.id} />
         ))}
       </div>
     </Section>

frontend/src/hooks.ts

@@ -7,8 +7,6 @@ import {
   UseMutationOptions,
   useQueryClient,
 } from "@tanstack/react-query";
-import { useAtomValue, useSetAtom } from "jotai";
-import { atomWithStorage } from "jotai/utils";
 import { useNavigate } from "react-router-dom";
 import {
   ExecuteResponses,
@@ -16,7 +14,7 @@ import {
   WriteResponses,
 } from "@monitor/client/dist/responses";
 import { useEffect, useState } from "react";
-import { ReadRequest, ResourceTarget } from "@monitor/client/dist/types";
+import { ReadRequest } from "@monitor/client/dist/types";
 
 export const useRead = <
   T extends Types.ReadRequest["type"],

frontend/src/resources/alerter/index.tsx

@@ -0,0 +1,35 @@
+import { useRead, useWrite } from "@hooks";
+import { Resource } from "@layouts/resource";
+import { useEffect } from "react";
+import { useParams } from "react-router-dom";
+
+const AlerterName = ({ id }: { id: string }) => {
+  const alerters = useRead("ListAlerters", {}).data;
+  const alerter = alerters?.find((a) => a._id?.$oid === id);
+  if (!alerter) return null;
+  return <>{alerter.name}</>;
+};
+
+const AlerterInfo = ({ id }: { id: string }) => {
+  const alerters = useRead("ListAlerters", {}).data;
+  const alerter = alerters?.find((a) => a._id?.$oid === id);
+  if (!alerter) return null;
+  return <>some description</>;
+};
+
+export const Alerter = () => {
+  const id = useParams().alerterId;
+  const push = useWrite("PushRecentlyViewed").mutate;
+
+  if (!id) return null;
+  useEffect(() => {
+    push({ resource: { type: "Deployment", id } });
+  }, []);
+
+  return (
+    <Resource
+      title={<AlerterName id={id} />}
+      info={<AlerterInfo id={id} />}
+    ></Resource>
+  );
+};