show all active alerts

Author: wesjdj

client/src/components/prometheusModal/prometheusModal.tsx

@@ -57,6 +57,7 @@ interface AlertDetails {
   alertName: string;
   severity: string;
   value: number;
+  description: string;
 }
 
 function usePrometheusWebSocket() {
@@ -318,14 +319,16 @@ export function PrometheusQueryBox({
   }, [executeQuery, hardcodedQuery, sessionName]);
 
   const getAlertDetails = useCallback(() => {
-    if (queryResults.length === 0) return null;
+    if (queryResults.length === 0) return [];
     const result = queryResults[0];
-    if (result.data.result.length === 0) return null;
-
-    const alertInfo = result.data.result[0].metric;
-    console.log("alertName: ", alertInfo.name);
-    const alertName = alertInfo.name;
-    return alertName;
+    if (result.data.result.length === 0) return [];
+
+    // Get all alert names from the ALERTS query results
+    const alertNames = result.data.result.map(
+      (alertResult) => alertResult.metric.name
+    );
+    console.log("Alert names from ALERTS query: ", alertNames);
+    return alertNames;
   }, [queryResults]);
 
   const handleCloseButton = useCallback(() => {
@@ -346,12 +349,17 @@ export function PrometheusQueryBox({
   }, [getAllQueryResults]);
 
   useEffect(() => {
-    let alertDetails = getAlertDetails();
-    console.log("🚨 Alert details:", alertDetails);
-    getAllAlertDetails(alertDetails);
-  }, [queryResults]);
+    const alertNames = getAlertDetails();
+    console.log("🚨 Alert names:", alertNames);
+    getAllAlertDetails(alertNames);
+  }, [queryResults, getAlertDetails]);
+
+  async function getAllAlertDetails(alertNames: string[]) {
+    if (!alertNames || alertNames.length === 0) {
+      setAlerts([]);
+      return;
+    }
 
-  async function getAllAlertDetails(alertName: string) {
     const detailsQuery = {
       label: "Alerts for this session",
       path: `http://prometheus-server.monitoring.svc.cluster.local/api/v1/alerts`,
@@ -362,24 +370,31 @@ export function PrometheusQueryBox({
     };
 
     const result = await executeQuery(detailsQuery);
-    console.log("📊 Alert details query result:", result?.data.alerts[0].value);
+    console.log("📊 Alert details query result:", result?.data.alerts);
+
     if (result?.data?.alerts?.length && result.data.alerts.length > 0) {
-      const alert = result.data.alerts.find((a) => a.labels.name === alertName);
-      if (alert) {
+      // Filter alerts to only include those from the ALERTS query
+      const relevantAlerts = result.data.alerts.filter((alert) =>
+        alertNames.includes(alert.labels.name)
+      );
+
+      const alertDetails: AlertDetails[] = relevantAlerts.map((alert) => {
         const severity = alert.labels.severity || "unknown";
         const value = parseFloat(alert.value) || 0;
         console.log(
           `🚨 Alert found - Name: ${alert.labels.alertname}, Severity: ${severity}, Value: ${value}`
         );
-        const newAlert: AlertDetails = {
+        return {
           alertName: alert.labels.alertname,
           severity,
           value,
+          description: alert.annotations?.description || "",
         };
-        setAlerts([newAlert]);
-      } else {
-        console.log(`ℹ️ No alert found with name: ${alertName}`);
-      }
+      });
+      setAlerts(alertDetails);
+    } else {
+      console.log(`ℹ️ No alerts found`);
+      setAlerts([]);
     }
   }
 
@@ -408,15 +423,16 @@ export function PrometheusQueryBox({
 
         {alerts.map((alert, idx) => (
           <div key={idx} className="mb-2">
-            <div className="fw-bold">{alert.alertName}</div>
-            <div className="mb-1">
-              <div
-                className={
-"text-warning"
-                }
-              >
-                Severity: {alert.severity}, Value: {alert.value}
-              </div>
+            <div className="fw-normal text-dark medium">
+              {alert.description || alert.alertName}
+            </div>
+            <div
+              className={cx(
+                "medium",
+                alert.severity === "warning" ? "text-warning" : "text-danger"
+              )}
+            >
+              {alert.value}
             </div>
           </div>
         ))}