feat: system resources widget (#3538)

* feat: add system resources widget

* Update packages/widgets/src/system-resources/index.ts

Co-authored-by: Andre Silva <32734153+Aandree5@users.noreply.github.com>

* fix: system resources not updating

* refactor: improve logic in component

* fix: tooltip overflow

* feat: add label with last value

* feat: hide label when hovering

* fix: formatting

* fix: lint

* fix: formatting

* fix: wrong redis channel used for opnsense

---------

Co-authored-by: Andre Silva <32734153+Aandree5@users.noreply.github.com>
Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

packages/redis/src/index.ts

@@ -15,6 +15,8 @@ export {
   createGetSetChannel,
 } from "./lib/channel";
 
+export { createIntegrationHistoryChannel } from "./lib/channels/history-channel";
+
 export const exampleChannel = createSubPubChannel<{ message: string }>("example");
 export const pingChannel = createSubPubChannel<
   { url: string; statusCode: number; durationMs: number } | { url: string; error: string }

packages/redis/src/lib/channel.ts

@@ -226,7 +226,48 @@ export const createItemChannel = <TData>(itemId: string) => {
   return createChannelWithLatestAndEvents<TData>(`item:${itemId}`);
 };
 
-export const createChannelEventHistory = <TData>(channelName: string, maxElements = 15) => {
+export const createChannelEventHistory = <TData>(channelName: string, maxElements = 32) => {
+  return {
+    subscribe: (callback: (data: TData) => void) => {
+      return ChannelSubscriptionTracker.subscribe(channelName, (message) => {
+        callback(superjson.parse(message));
+      });
+    },
+    pushAsync: async (data: TData, options = { publish: false }) => {
+      if (options.publish) await publisher.publish(channelName, superjson.stringify(data));
+      await getSetClient.lpush(channelName, superjson.stringify({ data, timestamp: new Date() }));
+      await getSetClient.ltrim(channelName, 0, maxElements);
+    },
+    clearAsync: async () => {
+      await getSetClient.del(channelName);
+    },
+    /**
+     * Returns a slice of the available data in the channel.
+     * If any of the indexes are out of range (or -range), returned data will be clamped.
+     * @param startIndex Start index of the slice, negative values are counted from the end, defaults at beginning of range.
+     * @param endIndex End index of the slice, negative values are counted from the end, defaults at end of range.
+     */
+    getSliceAsync: async (startIndex = 0, endIndex = -1) => {
+      const range = await getSetClient.lrange(channelName, startIndex, endIndex);
+      return range.map((item) => superjson.parse<{ data: TData; timestamp: Date }>(item));
+    },
+    getSliceUntilTimeAsync: async (time: Date) => {
+      const itemsInCollection = await getSetClient.lrange(channelName, 0, -1);
+      return itemsInCollection
+        .map((item) => superjson.parse<{ data: TData; timestamp: Date }>(item))
+        .filter((item) => item.timestamp < time);
+    },
+    getLengthAsync: async () => {
+      return await getSetClient.llen(channelName);
+    },
+    name: channelName,
+  };
+};
+
+/**
+ * @deprecated This function should no longer be used, see history-channel functions.
+ */
+export const createChannelEventHistoryOld = <TData>(channelName: string, maxElements = 15) => {
   const popElementsOverMaxAsync = async () => {
     const length = await getSetClient.llen(channelName);
     if (length <= maxElements) {

packages/redis/src/lib/channels/history-channel.ts

@@ -0,0 +1,6 @@
+import { createChannelEventHistory } from "../channel";
+
+export const createIntegrationHistoryChannel = <TData>(integrationId: string, queryKey: string, maxElements = 32) => {
+  const channelName = `integration:${integrationId}:history:${queryKey}`;
+  return createChannelEventHistory<TData>(channelName, maxElements);
+};