Enhancement: support more fields for zabbix widget

docs/widgets/services/zabbix.md

@@ -3,13 +3,13 @@ title: Zabbix
 description: Zabbix Widget Configuration
 ---
 
-Learn more about [Zabbix](https://github.com/zabbix/zabbix).
+Learn more about [Zabbix](https://github.com/zabbix/zabbix). The widget supports (at least) Zibbax server version 7.0.
 
-See the [Zabbix documentation](https://www.zabbix.com/documentation/current/en/manual/web_interface/frontend_sections/users/api_tokens) for details on generating API tokens.
+---
 
-The widget supports (at least) Zibbax server version 7.0.
+Allowed fields: `["unclassified", "information", "warning", "average", "high", "disaster"]`.
 
-Allowed fields: `["warning", "average", "high", "disaster"]`.
+Only 4 fields can be shown at a time, with the default being: `["warning", "average", "high", "disaster"]`.
 
 ```yaml
 widget:
@@ -17,3 +17,5 @@ widget:
   url: http://zabbix.host.or.ip/zabbix
   key: your-api-key
 ```
+
+See the [Zabbix documentation](https://www.zabbix.com/documentation/current/en/manual/web_interface/frontend_sections/users/api_tokens) for details on generating API tokens.

public/locales/en/common.json

@@ -933,6 +933,8 @@
         "tags": "Tags"
     },
     "zabbix": {
+      "unclassified": "Not classified",
+      "information": "Information",
       "warning": "Warning",
       "average": "Average",
       "high": "High",

src/widgets/zabbix/component.jsx

@@ -4,6 +4,8 @@ import Container from "components/services/widget/container";
 import Block from "components/services/widget/block";
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
+const PriorityUnclassified = "0";
+const PriorityInformation = "1";
 const PriorityWarning = "2";
 const PriorityAverage = "3";
 const PriorityHigh = "4";
@@ -19,9 +21,17 @@ export default function Component({ service }) {
     return <Container service={service} error={zabbixError} />;
   }
 
+  if (!widget.fields) {
+    widget.fields = ["warning", "average", "high", "disaster"];
+  } else if (widget.fields?.length > 4) {
+    widget.fields = widget.fields.slice(0, 4);
+  }
+
   if (!zabbixData) {
     return (
       <Container service={service}>
+        <Block label="zabbix.unclassified" />
+        <Block label="zabbix.information" />
         <Block label="zabbix.warning" />
         <Block label="zabbix.average" />
         <Block label="zabbix.high" />
@@ -30,6 +40,8 @@ export default function Component({ service }) {
     );
   }
 
+  const unclassified = zabbixData.filter((item) => item.priority === PriorityUnclassified).length;
+  const information = zabbixData.filter((item) => item.priority === PriorityInformation).length;
   const warning = zabbixData.filter((item) => item.priority === PriorityWarning).length;
   const average = zabbixData.filter((item) => item.priority === PriorityAverage).length;
   const high = zabbixData.filter((item) => item.priority === PriorityHigh).length;
@@ -37,6 +49,8 @@ export default function Component({ service }) {
 
   return (
     <Container service={service}>
+      <Block label="zabbix.unclassified" value={t("common.number", { value: unclassified })} />
+      <Block label="zabbix.information" value={t("common.number", { value: information })} />
       <Block label="zabbix.warning" value={t("common.number", { value: warning })} />
       <Block label="zabbix.average" value={t("common.number", { value: average })} />
       <Block label="zabbix.high" value={t("common.number", { value: high })} />