fix alerts usage

config_example/core.config.example.toml

@@ -48,6 +48,11 @@ passkey = "a_random_passkey"
 ## default: 0 (pruning disabled)
 # keep_stats_for_days = 14
 
+## number of days to keep alerts around, or 0 to disable pruning. 
+## alerts older than this number of days are deleted daily
+## default: 0 (pruning disabled)
+# keep_alerts_for_days = 14
+
 ## token that has to be given to github during repo webhook config as the secret
 ## default: empty (none)
 # github_webhook_secret = "your_random_webhook_secret"

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

@@ -1,7 +1,7 @@
 import { useRead } from "@lib/hooks";
 import { Types } from "@monitor/client";
 import { RequiredResourceComponents } from "@types";
-import { HardDrive, Rocket, Server } from "lucide-react";
+import { AlertTriangle, HardDrive, Rocket, Server } from "lucide-react";
 import { cn } from "@lib/utils";
 import { useServer } from "../server";
 import {
@@ -26,6 +26,7 @@ import { RunBuild } from "../build/actions";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@ui/tabs";
 import { DeploymentConfig } from "./config";
 import { useState } from "react";
+import { Link } from "react-router-dom";
 
 // const configOrLog = atomWithStorage("config-or-log-v1", "Config");
 
@@ -161,6 +162,17 @@ export const DeploymentComponents: RequiredResourceComponents = {
         </div>
       );
     },
+    Alerts: ({ id }) => {
+      return (
+        <Link
+          to={`/deployments/${id}/alerts`}
+          className="flex gap-2 items-center"
+        >
+          <AlertTriangle className="w-4 h-4" />
+          Alerts
+        </Link>
+      );
+    },
   },
 
   Actions: {

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

@@ -11,6 +11,7 @@ import {
   XOctagon,
   AreaChart,
   Milestone,
+  AlertTriangle,
 } from "lucide-react";
 import { Section } from "@components/layouts";
 import { RenameServer } from "./actions";
@@ -205,6 +206,14 @@ export const ServerComponents: RequiredResourceComponents = {
         </Link>
       );
     },
+    Alerts: ({ id }) => {
+      return (
+        <Link to={`/servers/${id}/alerts`} className="flex gap-2 items-center">
+          <AlertTriangle className="w-4 h-4" />
+          Alerts
+        </Link>
+      );
+    },
   },
 
   Actions: {

frontend/src/components/topbar.tsx

@@ -289,7 +289,7 @@ const ResourcesDropdown = ({ type }: { type: UsableResource }) => {
       <PopoverTrigger asChild>
         <Button
           variant="ghost"
-          className="hidden sm:flex justify-start items-center gap-2 w-48 px-3"
+          className="hidden sm:flex lg:hidden justify-start items-center gap-2 w-48 px-3"
         >
           <Components.Icon id={selected?.id} />
           {selected ? selected.name : `All ${type}s`}
@@ -362,7 +362,7 @@ const UserGroupDropdown = ({ group_id }: { group_id: string | undefined }) => {
       <PopoverTrigger asChild>
         <Button
           variant="ghost"
-          className="hidden sm:flex justify-start items-center gap-2 w-48 px-3"
+          className="hidden sm:flex lg:hidden justify-start items-center gap-2 w-48 px-3"
         >
           <Users className="w-4 h-4" />
           {selected ? selected.name : "All User Groups"}
@@ -442,7 +442,7 @@ const UsersDropdown = ({ user_id }: { user_id: string | undefined }) => {
       <PopoverTrigger asChild>
         <Button
           variant="ghost"
-          className="hidden sm:flex justify-start items-center gap-2 w-48 px-3"
+          className="hidden sm:flex lg:hidden justify-start items-center gap-2 w-48 px-3"
         >
           <UserAvatar avatar={avatar} />
           {selected ? selected.username : "All Users"}

frontend/src/pages/alerts.tsx

@@ -16,14 +16,16 @@ import { AlertTriangle } from "lucide-react";
 import { useState } from "react";
 import { useParams } from "react-router";
 
-const ALERT_TYPES = {
+const ALERT_TYPES: { [key: string]: Types.AlertData["type"][] } = {
   Server: ["ServerUnreachable", "ServerCpu", "ServerMem", "ServerDisk"],
   Deployment: ["ContainerStateChange"],
+  Build: ["BuildFailed"],
 };
 
 const FALLBACK_ALERT_TYPES = [
   ...ALERT_TYPES.Server,
   ...ALERT_TYPES.Deployment,
+  ...ALERT_TYPES.Build,
   "AwsBuilderTerminationFailed",
 ];
 
@@ -43,7 +45,7 @@ export const Alerts = () => {
     query: {
       "target.type": type,
       "target.id": id,
-      variant: variant === "All" ? undefined : variant,
+      "data.type": variant === "All" ? undefined : variant,
       resolved: onlyOpen ? false : undefined,
     },
     page,

frontend/src/pages/resource.tsx

@@ -16,7 +16,7 @@ import {
 import { has_minimum_permissions } from "@lib/utils";
 import { Types } from "@monitor/client";
 import { AlertTriangle, Clapperboard } from "lucide-react";
-import { Fragment } from "react";
+import { Fragment, ReactNode } from "react";
 import { useParams } from "react-router-dom";
 
 export const Resource = () => {
@@ -57,7 +57,7 @@ export const Resource = () => {
           {infoEntries.map(([key, Info], i) => (
             <Fragment key={key}>
               {i !== 0 && "| "}
-              <Info key={i} id={id} />
+              <Info id={id} />
             </Fragment>
           ))}
           {infoEntries.length ? "| " : ""}