Feature: Wg-Easy Widget (#3476)

---------

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

src/widgets/wgeasy/component.jsx

@@ -0,0 +1,45 @@
+import Container from "components/services/widget/container";
+import Block from "components/services/widget/block";
+import useWidgetAPI from "utils/proxy/use-widget-api";
+
+export default function Component({ service }) {
+  const { widget } = service;
+
+  const { data: infoData, error: infoError } = useWidgetAPI(widget);
+
+  if (!widget.fields) {
+    widget.fields = ["connected", "enabled", "total"];
+  }
+
+  if (infoError) {
+    return <Container service={service} error={infoError} />;
+  }
+
+  if (!infoData) {
+    return (
+      <Container service={service}>
+        <Block label="wgeasy.connected" />
+        <Block label="wgeasy.enabled" />
+        <Block label="wgeasy.disabled" />
+        <Block label="wgeasy.total" />
+      </Container>
+    );
+  }
+
+  const enabled = infoData.filter((item) => item.enabled).length;
+  const disabled = infoData.length - enabled;
+  const connectionThreshold = widget.threshold ?? 2 * 60 * 1000;
+  const currentTime = new Date();
+  const connected = infoData.filter(
+    (item) => currentTime - new Date(item.latestHandshakeAt) < connectionThreshold,
+  ).length;
+
+  return (
+    <Container service={service}>
+      <Block label="wgeasy.connected" value={connected} />
+      <Block label="wgeasy.enabled" value={enabled} />
+      <Block label="wgeasy.diabled" value={disabled} />
+      <Block label="wgeasy.total" value={infoData.length} />
+    </Container>
+  );
+}