imrpove tags config

frontend/src/components/config/index.tsx

@@ -68,11 +68,13 @@ export const Config = <T,>({
   set,
   onSave,
   components,
+  selector,
 }: {
   config: T;
   update: Partial<T>;
   set: React.Dispatch<SetStateAction<Partial<T>>>;
   onSave: () => void;
+  selector?: ReactNode;
   components: Record<
     string,
     Record<
@@ -85,6 +87,7 @@ export const Config = <T,>({
     >
   >;
 }) => {
+  console.log(selector);
   const [show, setShow] = useState(keys(components)[0]);
 
   return (
@@ -93,18 +96,21 @@ export const Config = <T,>({
       onConfirm={onSave}
       onReset={() => set({})}
       selector={
-        <Select value={show} onValueChange={setShow}>
-          <SelectTrigger className="w-32 capitalize lg:hidden">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent className="w-32">
-            {keys(components).map((key) => (
-              <SelectItem value={key} key={key} className="capitalize">
-                {key}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
+        <div className="flex gap-4 items-center">
+          {selector}
+          <Select value={show} onValueChange={setShow}>
+            <SelectTrigger className="w-32 capitalize lg:hidden">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent className="w-32">
+              {keys(components).map((key) => (
+                <SelectItem value={key} key={key} className="capitalize">
+                  {key}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
       }
     >
       <div className="flex gap-4">

frontend/src/components/resources/alerter/config.tsx

@@ -1,17 +1,22 @@
 import { Config } from "@components/config";
 import { useRead, useWrite } from "@lib/hooks";
 import { Types } from "@monitor/client";
-import { useState } from "react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@ui/select";
+import { useEffect, useState } from "react";
 
 export const AlerterConfig = ({ id }: { id: string }) => {
   const config = useRead("GetAlerter", { alerter: id }).data?.config;
-  if (config?.type === "Slack") return <SlackAlerterConfig id={id} />;
-  if (config?.type === "Custom") return <CustomAlerterConfig id={id} />;
-};
-
-const SlackAlerterConfig = ({ id }: { id: string }) => {
-  const config = useRead("GetAlerter", { alerter: id }).data?.config;
-  const [update, set] = useState<Partial<Types.SlackAlerterConfig>>({});
+  const [type, setType] = useState<Types.AlerterConfig["type"]>();
+  useEffect(() => config?.type && setType(config.type), [config?.type]);
+  const [update, setConfig] = useState<
+    Partial<Types.SlackAlerterConfig | Types.CustomAlerterConfig>
+  >({});
   const { mutate } = useWrite("UpdateAlerter");
   if (!config) return null;
 
@@ -19,32 +24,8 @@ const SlackAlerterConfig = ({ id }: { id: string }) => {
     <Config
       config={config.params}
       update={update}
-      set={set}
-      onSave={() => mutate({ id, config: { type: "Slack", params: update } })}
-      components={{
-        general: {
-          general: {
-            url: true,
-            enabled: true,
-          },
-        },
-      }}
-    />
-  );
-};
-
-const CustomAlerterConfig = ({ id }: { id: string }) => {
-  const config = useRead("GetAlerter", { alerter: id }).data?.config;
-  const [update, set] = useState<Partial<Types.CustomAlerterConfig>>({});
-  const { mutate } = useWrite("UpdateAlerter");
-  if (!config) return null;
-
-  return (
-    <Config
-      config={config.params}
-      update={update}
-      set={set}
-      onSave={() => mutate({ id, config: { type: "Custom", params: update } })}
+      set={setConfig}
+      onSave={() => type && mutate({ id, config: { type, params: update } })}
       components={{
         general: {
           general: {
@@ -53,6 +34,32 @@ const CustomAlerterConfig = ({ id }: { id: string }) => {
           },
         },
       }}
+      selector={
+        <div className="flex gap-2 items-center text-sm">
+          Alerter Type:
+          <Select
+            value={type}
+            onValueChange={(type) => {
+              setType(type as any);
+              setConfig({
+                url: update.url || "",
+                enabled: update.enabled === undefined ? true : update.enabled,
+              });
+            }}
+          >
+            <SelectTrigger className="w-32 capitalize">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent className="w-32">
+              {["Slack", "Custom"].map((key) => (
+                <SelectItem value={key} key={key} className="capitalize">
+                  {key}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      }
     />
   );
 };

frontend/src/components/resources/alerter/index.tsx

@@ -27,8 +27,13 @@ export const AlerterComponents: RequiredResourceComponents = {
   Name: ({ id }: { id: string }) => <>{useAlerter(id)?.name}</>,
   Icon: () => <AlarmClock className="w-4 h-4" />,
   Link: ({ id }) => <ResourceLink type="Alerter" id={id} />,
-  Info: [],
-  Status: () => <></>,
+  Info: [
+    ({ id }) => {
+      const alerter = useAlerter(id);
+      return <div className="capitalize">Type: {alerter?.info.alerter_type}</div>;
+    },
+  ],
+  Status: () => <>Alerter</>,
   Page: {
     Config: AlerterConfig,
     Danger: ({ id }) => (