feat: handle selected alert via query params (#17)

MattKetmo · Nov 13, 2024 · df24ec1 · df24ec1
1 parent 796362c
commit df24ec1
Show file tree

Hide file tree

Showing 7 changed files with 139 additions and 66 deletions.
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "lucide-react": "^0.454.0",
     "next": "15.0.2",
     "next-themes": "^0.4.1",
+    "nuqs": "^2.1.2",
     "react": "19.0.0-rc-02c0e824-20241028",
     "react-dom": "19.0.0-rc-02c0e824-20241028",
     "tailwind-merge": "^2.5.4",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,6 +3,7 @@ import localFont from "next/font/local";
 import "./globals.css";
 import { ConfigProvider } from "@/contexts/config";
 import { ThemeProvider } from "next-themes";
+import { NuqsAdapter } from 'nuqs/adapters/next/app'
 import { AppLayout } from "@/components/layout/app-layout";
 import { AlertsProvider } from "@/contexts/alerts";
 
@@ -34,20 +35,22 @@ export default async function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} font-sans antialiased`}
       >
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="system"
-          enableSystem
-          disableTransitionOnChange
-        >
-          <ConfigProvider>
-            <AlertsProvider>
-              <AppLayout>
-                {children}
-              </AppLayout>
-            </AlertsProvider>
-          </ConfigProvider>
-        </ThemeProvider>
+        <NuqsAdapter>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+            disableTransitionOnChange
+          >
+            <ConfigProvider>
+              <AlertsProvider>
+                <AppLayout>
+                  {children}
+                </AppLayout>
+              </AlertsProvider>
+            </ConfigProvider>
+          </ThemeProvider>
+        </NuqsAdapter>
       </body>
     </html>
   );

diff --git a/src/components/alerts/alert-groups.tsx b/src/components/alerts/alert-groups.tsx
@@ -14,19 +14,17 @@ import { Group } from "./types"
 
 type AlertGroupsProps = {
   alertGroups: Group[]
-  setSelectedAlert: (alert: Alert | null) => void
 }
 
 export function AlertGroups(props: AlertGroupsProps) {
-  const { alertGroups, setSelectedAlert } = props
+  const { alertGroups } = props
 
   return (
     <div>
       {alertGroups.map((alertGroup) => (
         <AlertGroup
           key={alertGroup.name}
           alertGroup={alertGroup}
-          setSelectedAlert={setSelectedAlert}
         />
       ))}
     </div>
@@ -35,11 +33,10 @@ export function AlertGroups(props: AlertGroupsProps) {
 
 type AlertGroupProps = {
   alertGroup: Group
-  setSelectedAlert: (alert: Alert | null) => void
 }
 
 function AlertGroup(props: AlertGroupProps) {
-  const { alertGroup, setSelectedAlert } = props
+  const { alertGroup } = props
   const { name, alerts } = alertGroup
   const [open, setOpen] = useState(true)
 
@@ -58,7 +55,6 @@ function AlertGroup(props: AlertGroupProps) {
           {alerts.map((alert: Alert) => (
             <li
               key={alert.fingerprint}
-              onClick={() => setSelectedAlert(alert)}
               className={cn({
                 'animate-highlight': new Date(alert.startsAt) > new Date(Date.now() - 30 * 60 * 1000)
               })}

diff --git a/src/components/alerts/alert-modal.tsx b/src/components/alerts/alert-modal.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { useMemo, useState } from "react"
 import {
   Drawer,
@@ -20,6 +22,7 @@ import { Alert } from "@/types/alertmanager"
 import { Check, ClipboardCopy, Square, SquareArrowOutUpRight } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { AlertSeverity } from "./alert-severity"
+import { useQueryState } from "nuqs"
 
 function isURL(string: string): boolean {
   try {
@@ -32,16 +35,19 @@ function isURL(string: string): boolean {
 
 type Props = {
   alert: Alert | null
-  setSelectedAlert: (alert: Alert | null) => void
-  close: () => void
 }
 
 export function AlertModal(props: Props) {
-  const { alert, close } = props
+  const { alert } = props
   const { summary } = alert?.annotations || {}
+  const [selectedAlertId, setSelectedAlertId] = useQueryState('alert', { defaultValue: '' })
+
+  const close = () => {
+    setSelectedAlertId(null)
+  }
 
   return (
-    <Sheet open={!!alert} onOpenChange={close}>
+    <Sheet open={!!selectedAlertId} onOpenChange={close}>
       {/* <SheetTrigger>Open</SheetTrigger> */}
       <SheetContent className="w-screen">
         <div className="flex flex-col h-screen">

diff --git a/src/components/alerts/alert-row.tsx b/src/components/alerts/alert-row.tsx
@@ -1,3 +1,5 @@
+import Link from "next/link"
+import { useRouter } from "next/navigation"
 import { Alert } from "@/types/alertmanager"
 import { formatDate } from "@/lib/date"
 import { stringToColor } from "./utils"
@@ -21,18 +23,27 @@ type Props = {
   alert: Alert
 }
 
+function paramsWithAlert(id: string) {
+  const params = new URLSearchParams(window.location.search)
+  params.set('alert', id)
+  return params.toString()
+}
+
 export function AlertRow(props: Props) {
   const { alert } = props
 
   return (
-    <div className="flex gap-2 xl:gap-4 items-center px-6 h-[45px] border-b group cursor-pointer">
+    <Link
+      href={`?${paramsWithAlert(alert.fingerprint)}`}
+      className="flex gap-2 xl:gap-4 items-center px-6 h-[45px] border-b group cursor-pointer"
+    >
       <AlertSeverity alert={alert} />
       <AlertTitle alert={alert} />
       <AlertSummary alert={alert} />
       <div className="grow" />
       <AlertLabels alert={alert} />
       <AlertTime alert={alert} />
-    </div>
+    </Link>
   )
 }