Enhancement: support for new grafana alerting api (#5476)

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

docs/widgets/services/grafana.md

@@ -5,11 +5,18 @@ description: Grafana Widget Configuration
 
 Learn more about [Grafana](https://github.com/grafana/grafana).
 
+| Grafana Version | Homepage Widget Version |
+| --------------- | ----------------------- |
+| <= v10.4        | 1 (default)             |
+| > v10.4         | 2                       |
+
 Allowed fields: `["dashboards", "datasources", "totalalerts", "alertstriggered"]`.
 
 ```yaml
 widget:
   type: grafana
+  version: 2 # optional, default is 1
+  alerts: alertmanager # optional, default is grafana
   url: http://grafana.host.or.ip:port
   username: username
   password: password

src/utils/config/service-helpers.js

@@ -407,6 +407,9 @@ export function cleanServiceGroups(groups) {
 
           // spoolman
           spoolIds,
+
+          // grafana
+          alerts,
         } = widgetData;
 
         let fieldsList = fields;
@@ -514,7 +517,18 @@ export function cleanServiceGroups(groups) {
           if (snapshotPath) widget.snapshotPath = snapshotPath;
         }
         if (
-          ["beszel", "glances", "immich", "komga", "mealie", "pfsense", "pihole", "speedtest", "wgeasy"].includes(type)
+          [
+            "beszel",
+            "glances",
+            "immich",
+            "komga",
+            "mealie",
+            "pfsense",
+            "pihole",
+            "speedtest",
+            "wgeasy",
+            "grafana",
+          ].includes(type)
         ) {
           if (version) widget.version = parseInt(version, 10);
         }
@@ -593,6 +607,9 @@ export function cleanServiceGroups(groups) {
         if (type === "jellystat") {
           if (days !== undefined) widget.days = parseInt(days, 10);
         }
+        if (type === "grafana") {
+          if (alerts) widget.alerts = alerts;
+        }
         return widget;
       });
       return cleanedService;

src/widgets/grafana/component.jsx

@@ -6,27 +6,51 @@ import useWidgetAPI from "utils/proxy/use-widget-api";
 
 export default function Component({ service }) {
   const { t } = useTranslation();
-
   const { widget } = service;
+
+  const { version = 1, alerts = "grafana" } = widget;
+
   const { data: statsData, error: statsError } = useWidgetAPI(widget, "stats");
-  const { data: alertsData, error: alertsError } = useWidgetAPI(widget, "alerts");
-  const { data: alertmanagerData, error: alertmanagerError } = useWidgetAPI(widget, "alertmanager");
 
-  let alertsInt = 0;
+  let primaryAlertsEndpoint = "alerts";
-
+  let secondaryAlertsEndpoint = "grafana";
-  if (alertsError || !alertsData || alertsData.length === 0) {
+  if (version === 2) {
-    if (alertmanagerData) {
+    primaryAlertsEndpoint = alerts;
-      alertsInt = alertmanagerData.length;
+    secondaryAlertsEndpoint = "";
-    }
-  } else {
-    alertsInt = alertsData.filter((a) => a.state === "alerting").length;
   }
 
-  if (statsError || (alertsError && alertmanagerError)) {
+  const { data: primaryAlertsData, error: primaryAlertsError } = useWidgetAPI(widget, primaryAlertsEndpoint);
+  const { data: secondaryAlertsData, error: secondaryAlertsError } = useWidgetAPI(widget, secondaryAlertsEndpoint);
+
+  let alertsInt = 0;
+  let alertsError = null;
+  if (version === 1) {
+    if (primaryAlertsError || !primaryAlertsData || primaryAlertsData.length === 0) {
+      if (secondaryAlertsData) {
+        alertsInt = secondaryAlertsData.length;
+      }
+    } else {
+      alertsInt = primaryAlertsData.filter((a) => a.state === "alerting").length;
+    }
+
+    if (primaryAlertsError && secondaryAlertsError) {
+      alertsError = primaryAlertsError ?? secondaryAlertsError;
+    }
+  } else if (version === 2) {
+    if (primaryAlertsData) {
+      alertsInt = primaryAlertsData.length;
+    }
+
+    if (primaryAlertsError) {
+      alertsError = primaryAlertsError;
+    }
+  }
+
+  if (statsError || alertsError) {
     return <Container service={service} error={statsError ?? alertsError} />;
   }
 
-  if (!statsData || (!alertsData && !alertmanagerData)) {
+  if (!statsData) {
     return (
       <Container service={service}>
         <Block label="grafana.dashboards" />

src/widgets/grafana/widget.js

@@ -9,6 +9,9 @@ const widget = {
       endpoint: "alerts",
     },
     alertmanager: {
+      endpoint: "alertmanager/alertmanager/api/v2/alerts",
+    },
+    grafana: {
       endpoint: "alertmanager/grafana/api/v2/alerts",
     },
     stats: {