More cleanup and history added

2025-11-09 23:15:46 +01:00 · 2022-08-25 21:07:41 +02:00
parent 4afa09fd7a
commit c44a01fbc3
10 changed files with 357 additions and 226 deletions
--- a/package.json
+++ b/package.json
@@ -1,101 +1,102 @@
 {
-	"name": "homarr",
-	"version": "0.9.2",
-	"description": "Homarr - A homepage for your server.",
-	"license": "MIT",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/ajnart/homarr"
-	},
-	"scripts": {
-		"dev": "next dev",
-		"build": "next build",
-		"analyze": "ANALYZE=true next build",
-		"start": "next start",
-		"typecheck": "tsc --noEmit",
-		"export": "next build && next export",
-		"lint": "next lint",
-		"jest": "jest",
-		"jest:watch": "jest --watch",
-		"prettier:check": "prettier --check \"**/*.{ts,tsx}\"",
-		"prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
-		"test": "npm run prettier:check && npm run lint && npm run typecheck && npm run jest",
-		"ci": "yarn test && yarn lint --fix && yarn typecheck && yarn prettier:write"
-	},
-	"dependencies": {
-		"@ctrl/deluge": "^4.1.0",
-		"@ctrl/qbittorrent": "^4.1.0",
-		"@ctrl/shared-torrent": "^4.1.1",
-		"@ctrl/transmission": "^4.1.1",
-		"@dnd-kit/core": "^6.0.5",
-		"@dnd-kit/sortable": "^7.0.1",
-		"@dnd-kit/utilities": "^3.2.0",
-		"@emotion/react": "^11.10.0",
-		"@emotion/server": "^11.10.0",
-		"@mantine/carousel": "^5.1.0",
-		"@mantine/core": "^5.2.3",
-		"@mantine/dates": "^5.2.3",
-		"@mantine/dropzone": "^5.2.3",
-		"@mantine/form": "^5.2.3",
-		"@mantine/hooks": "^5.2.3",
-		"@mantine/modals": "^5.2.3",
-		"@mantine/next": "^5.2.3",
-		"@mantine/notifications": "^5.2.3",
-		"@mantine/prism": "^5.0.0",
-		"@nivo/core": "^0.79.0",
-		"@nivo/line": "^0.79.1",
-		"@tabler/icons": "^1.78.0",
-		"add": "^2.0.6",
-		"axios": "^0.27.2",
-		"consola": "^2.15.3",
-		"cookies-next": "^2.1.1",
-		"country-flag-icons": "^1.5.5",
-		"dayjs": "^1.11.5",
-		"dockerode": "^3.3.2",
-		"embla-carousel-react": "^7.0.0",
-		"framer-motion": "^6.5.1",
-		"i18next": "^21.9.1",
-		"i18next-browser-languagedetector": "^6.1.5",
-		"i18next-http-backend": "^1.4.1",
-		"js-file-download": "^0.4.12",
-		"next": "12.1.6",
-		"next-i18next": "^11.3.0",
-		"prism-react-renderer": "^1.3.5",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
-		"sabnzbd-api": "^1.5.0",
-		"sharp": "^0.30.7",
-		"systeminformation": "^5.12.1",
-		"uuid": "^8.3.2",
-		"yarn": "^1.22.19"
-	},
-	"devDependencies": {
-		"@next/bundle-analyzer": "^12.1.4",
-		"@next/eslint-plugin-next": "^12.1.4",
-		"@types/dockerode": "^3.3.9",
-		"@types/node": "17.0.1",
-		"@types/react": "17.0.1",
-		"@types/uuid": "^8.3.4",
-		"@typescript-eslint/eslint-plugin": "^5.30.7",
-		"@typescript-eslint/parser": "^5.30.7",
-		"eslint": "^8.20.0",
-		"eslint-config-airbnb": "^19.0.4",
-		"eslint-config-airbnb-typescript": "^17.0.0",
-		"eslint-config-mantine": "^2.0.0",
-		"eslint-plugin-import": "^2.26.0",
-		"eslint-plugin-jest": "^26.6.0",
-		"eslint-plugin-jsx-a11y": "^6.6.1",
-		"eslint-plugin-react": "^7.30.1",
-		"eslint-plugin-react-hooks": "^4.6.0",
-		"eslint-plugin-testing-library": "^5.5.1",
-		"eslint-plugin-unused-imports": "^2.0.0",
-		"jest": "^28.1.3",
-		"prettier": "^2.7.1",
-		"typescript": "^4.7.4"
-	},
-	"resolutions": {
-		"@types/react": "17.0.2",
-		"@types/react-dom": "17.0.2"
-	},
-	"packageManager": "yarn@3.2.1"
+  "name": "homarr",
+  "version": "0.9.2",
+  "description": "Homarr - A homepage for your server.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ajnart/homarr"
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "analyze": "ANALYZE=true next build",
+    "start": "next start",
+    "typecheck": "tsc --noEmit",
+    "export": "next build && next export",
+    "lint": "next lint",
+    "jest": "jest",
+    "jest:watch": "jest --watch",
+    "prettier:check": "prettier --check \"**/*.{ts,tsx}\"",
+    "prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
+    "test": "npm run prettier:check && npm run lint && npm run typecheck && npm run jest",
+    "ci": "yarn test && yarn lint --fix && yarn typecheck && yarn prettier:write"
+  },
+  "dependencies": {
+    "@ctrl/deluge": "^4.1.0",
+    "@ctrl/qbittorrent": "^4.1.0",
+    "@ctrl/shared-torrent": "^4.1.1",
+    "@ctrl/transmission": "^4.1.1",
+    "@dnd-kit/core": "^6.0.5",
+    "@dnd-kit/sortable": "^7.0.1",
+    "@dnd-kit/utilities": "^3.2.0",
+    "@emotion/react": "^11.10.0",
+    "@emotion/server": "^11.10.0",
+    "@mantine/carousel": "^5.1.0",
+    "@mantine/core": "^5.2.3",
+    "@mantine/dates": "^5.2.3",
+    "@mantine/dropzone": "^5.2.3",
+    "@mantine/form": "^5.2.3",
+    "@mantine/hooks": "^5.2.3",
+    "@mantine/modals": "^5.2.3",
+    "@mantine/next": "^5.2.3",
+    "@mantine/notifications": "^5.2.3",
+    "@mantine/prism": "^5.0.0",
+    "@nivo/core": "^0.79.0",
+    "@nivo/line": "^0.79.1",
+    "@tabler/icons": "^1.78.0",
+    "@tanstack/react-query": "^4.2.1",
+    "add": "^2.0.6",
+    "axios": "^0.27.2",
+    "consola": "^2.15.3",
+    "cookies-next": "^2.1.1",
+    "country-flag-icons": "^1.5.5",
+    "dayjs": "^1.11.5",
+    "dockerode": "^3.3.2",
+    "embla-carousel-react": "^7.0.0",
+    "framer-motion": "^6.5.1",
+    "i18next": "^21.9.1",
+    "i18next-browser-languagedetector": "^6.1.5",
+    "i18next-http-backend": "^1.4.1",
+    "js-file-download": "^0.4.12",
+    "next": "12.1.6",
+    "next-i18next": "^11.3.0",
+    "prism-react-renderer": "^1.3.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sabnzbd-api": "^1.5.0",
+    "sharp": "^0.30.7",
+    "systeminformation": "^5.12.1",
+    "uuid": "^8.3.2",
+    "yarn": "^1.22.19"
+  },
+  "devDependencies": {
+    "@next/bundle-analyzer": "^12.1.4",
+    "@next/eslint-plugin-next": "^12.1.4",
+    "@types/dockerode": "^3.3.9",
+    "@types/node": "17.0.1",
+    "@types/react": "17.0.1",
+    "@types/uuid": "^8.3.4",
+    "@typescript-eslint/eslint-plugin": "^5.30.7",
+    "@typescript-eslint/parser": "^5.30.7",
+    "eslint": "^8.20.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-config-mantine": "^2.0.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest": "^26.6.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-testing-library": "^5.5.1",
+    "eslint-plugin-unused-imports": "^2.0.0",
+    "jest": "^28.1.3",
+    "prettier": "^2.7.1",
+    "typescript": "^4.7.4"
+  },
+  "resolutions": {
+    "@types/react": "17.0.2",
+    "@types/react-dom": "17.0.2"
+  },
+  "packageManager": "yarn@3.2.1"
 }
--- a/src/modules/usenet/UsenetHistoryList.tsx
+++ b/src/modules/usenet/UsenetHistoryList.tsx
@@ -0,0 +1,71 @@
+import { Center, Table, Text, Title, Tooltip, useMantineTheme } from '@mantine/core';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import { FunctionComponent } from 'react';
+import { humanFileSize } from '../../tools/humanFileSize';
+import { UsenetHistoryItem } from './types';
+
+dayjs.extend(duration);
+
+interface UsenetHistoryListProps {
+  items: UsenetHistoryItem[];
+}
+
+export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ items }) => {
+  const theme = useMantineTheme();
+
+  if (items.length <= 0) {
+    return (
+      <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <Title order={3}>Queue is empty</Title>
+      </Center>
+    );
+  }
+
+  return (
+    <Table highlightOnHover style={{ tableLayout: 'fixed' }}>
+      <colgroup>
+        <col span={1} />
+        <col span={1} style={{ width: 100 }} />
+        <col span={1} style={{ width: 200 }} />
+      </colgroup>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Size</th>
+          <th>Download Duration</th>
+        </tr>
+      </thead>
+      <tbody>
+        {items.map((history) => (
+          <tr key={history.id}>
+            <td>
+              <Tooltip position="top" label={history.name}>
+                <Text
+                  size="xs"
+                  style={{
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                  }}
+                >
+                  {history.name}
+                </Text>
+              </Tooltip>
+            </td>
+            <td>
+              <Text size="xs">{humanFileSize(history.size)}</Text>
+            </td>
+            <td>
+              <Text size="xs">
+                {dayjs
+                  .duration(history.time, 's')
+                  .format(history.time < 60 ? 's [seconds]' : 'm [minutes] s [seconds] ')}
+              </Text>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </Table>
+  );
+};
--- a/src/modules/usenet/UsenetModule.tsx
+++ b/src/modules/usenet/UsenetModule.tsx
@@ -1,115 +1,16 @@
-import {
-  Center,
-  Progress,
-  ScrollArea,
-  Skeleton,
-  Table,
-  Tabs,
-  Text,
-  Title,
-  Tooltip,
-} from '@mantine/core';
-import { showNotification } from '@mantine/notifications';
-import { IconDownload, IconPlayerPause, IconPlayerPlay } from '@tabler/icons';
-import axios from 'axios';
-import dayjs from 'dayjs';
-import { FunctionComponent, useEffect, useState } from 'react';
-import duration from 'dayjs/plugin/duration';
-import { humanFileSize } from '../../tools/humanFileSize';
-import { DownloadItem } from '../../tools/types';
-import { IModule } from '../ModuleTypes';
+import { Skeleton, Tabs, useMantineTheme } from '@mantine/core';
+import { IconDownload } from '@tabler/icons';
+import { FunctionComponent } from 'react';

-dayjs.extend(duration);
+import { IModule } from '../ModuleTypes';
+import { useGetUsenetDownloads, useGetUsenetHistory } from '../../tools/hooks/api';
+import { UsenetQueueList } from './UsenetQueueList';
+import { UsenetHistoryList } from './UsenetHistoryList';

 export const UsenetComponent: FunctionComponent = () => {
-  const [nzbs, setNzbs] = useState<DownloadItem[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    setIsLoading(true);
-
-    const getData = async () => {
-      try {
-        const response = await axios.get('/api/modules/usenet');
-        setNzbs(response.data);
-      } catch (error) {
-        setNzbs([]);
-        showNotification({
-          title: 'Error fetching torrents',
-          autoClose: 1000,
-          disallowClose: true,
-          id: 'fail-torrent-downloads-module',
-          color: 'red',
-          message:
-            'Please check your config for any potential errors, check the console for more info',
-        });
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    const interval = setInterval(getData, 5000);
-    getData();
-
-    () => {
-      clearInterval(interval);
-    };
-  }, []);
-
-  const ths = (
-    <tr>
-      <th />
-      <th>Name</th>
-      <th>Size</th>
-      <th>ETA</th>
-      <th>Progress</th>
-    </tr>
-  );
-
-  const rows = nzbs.map((nzb) => (
-    <tr key={nzb.id}>
-      <td>
-        {nzb.state === 'paused' ? (
-          <IconPlayerPause fill="grey" stroke={0} />
-        ) : (
-          <IconPlayerPlay fill="black" stroke={0} />
-        )}
-      </td>
-      <td>
-        <Tooltip position="top" label={nzb.name}>
-          <Text
-            style={{
-              maxWidth: '30vw',
-            }}
-            size="xs"
-          >
-            {nzb.name}
-          </Text>
-        </Tooltip>
-      </td>
-      <td>
-        <Text size="xs">{humanFileSize(nzb.size * 1000 * 1000)}</Text>
-      </td>
-      <td>
-        {nzb.eta <= 0 ? (
-          <Text size="xs" color="dimmed">
-            Paused
-          </Text>
-        ) : (
-          <Text size="xs">{dayjs.duration(nzb.eta, 's').format('H:mm:ss')}</Text>
-        )}
-      </td>
-      <td>
-        <Text>{nzb.progress.toFixed(1)}%</Text>
-        <Progress
-          radius="lg"
-          color={nzb.progress === 1 ? 'green' : nzb.state === 'downloading' ? 'blue' : 'lightgrey'}
-          value={nzb.progress}
-          size="lg"
-        />
-      </td>
-    </tr>
-  ));
+  const theme = useMantineTheme();
+  const { isLoading, data: nzbs = [] } = useGetUsenetDownloads();
+  const { data: history = [] } = useGetUsenetHistory();

  if (isLoading) {
    return (
@@ -128,18 +29,10 @@ export const UsenetComponent: FunctionComponent = () => {
        <Tabs.Tab value="history">History</Tabs.Tab>
      </Tabs.List>
      <Tabs.Panel value="queue">
-        <ScrollArea sx={{ maxHeight: 300, width: '100%' }}>
-          {rows.length > 0 ? (
-            <Table highlightOnHover>
-              <thead>{ths}</thead>
-              <tbody>{rows}</tbody>
-            </Table>
-          ) : (
-            <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-              <Title order={3}>Queue is empty</Title>
-            </Center>
-          )}
-        </ScrollArea>
+        <UsenetQueueList items={nzbs} />
+      </Tabs.Panel>
+      <Tabs.Panel value="history">
+        <UsenetHistoryList items={history} />
      </Tabs.Panel>
    </Tabs>
  );
--- a/src/modules/usenet/UsenetQueueList.tsx
+++ b/src/modules/usenet/UsenetQueueList.tsx
@@ -0,0 +1,87 @@
+import { Center, Progress, Table, Text, Title, Tooltip, useMantineTheme } from '@mantine/core';
+import { IconPlayerPause, IconPlayerPlay } from '@tabler/icons';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import { FunctionComponent } from 'react';
+import { humanFileSize } from '../../tools/humanFileSize';
+import { UsenetQueueItem } from './types';
+
+dayjs.extend(duration);
+interface UsenetQueueListProps {
+  items: UsenetQueueItem[];
+}
+
+export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ items }) => {
+  const theme = useMantineTheme();
+
+  if (items.length <= 0) {
+    return (
+      <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <Title order={3}>Queue is empty</Title>
+      </Center>
+    );
+  }
+
+  return (
+    <Table highlightOnHover style={{ tableLayout: 'fixed' }}>
+      <thead>
+        <tr>
+          <th style={{ width: 40 }} />
+          <th style={{ width: '75%' }}>Name</th>
+          <th style={{ width: 100 }}>Size</th>
+          <th style={{ width: 100 }}>ETA</th>
+          <th style={{ width: 200 }}>Progress</th>
+        </tr>
+      </thead>
+      <tbody>
+        {items.map((nzb) => (
+          <tr key={nzb.id}>
+            <td>
+              {nzb.state === 'paused' ? (
+                <IconPlayerPause fill="grey" stroke={0} size="16" />
+              ) : (
+                <IconPlayerPlay fill="black" stroke={0} size="16" />
+              )}
+            </td>
+            <td>
+              <Tooltip position="top" label={nzb.name}>
+                <Text
+                  style={{
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                  }}
+                  size="xs"
+                >
+                  {nzb.name}
+                </Text>
+              </Tooltip>
+            </td>
+            <td>
+              <Text size="xs">{humanFileSize(nzb.size)}</Text>
+            </td>
+            <td>
+              {nzb.eta <= 0 ? (
+                <Text size="xs" color="dimmed">
+                  Paused
+                </Text>
+              ) : (
+                <Text size="xs">{dayjs.duration(nzb.eta, 's').format('H:mm:ss')}</Text>
+              )}
+            </td>
+            <td style={{ display: 'flex', alignItems: 'center' }}>
+              <Text mr="sm">{nzb.progress.toFixed(1)}%</Text>
+              <Progress
+                radius="lg"
+                color={nzb.eta > 0 ? theme.primaryColor : 'lightgrey'}
+                value={nzb.progress}
+                size="lg"
+                style={{ width: '100%' }}
+              />
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </Table>
+  );
+};
--- a/src/modules/usenet/types.ts
+++ b/src/modules/usenet/types.ts
@@ -1,6 +1,9 @@
 export interface UsenetQueueItem {
  name: string;
  progress: number;
+  /**
+   * Size in bytes
+   */
  size: number;
  id: string;
  state: 'paused' | 'downloading' | 'queued';
@@ -8,6 +11,10 @@ export interface UsenetQueueItem {
 }
 export interface UsenetHistoryItem {
  name: string;
+  /**
+   * Size in bytes
+   */
  size: number;
  id: string;
+  time: number;
 }
--- a/src/pages/api/modules/usenet/history.ts
+++ b/src/pages/api/modules/usenet/history.ts
@@ -28,7 +28,8 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
          history.push({
            id: slot.nzo_id,
            name: slot.name,
-            size: slot.bytes * 1000,
+            size: slot.bytes,
+            time: slot.download_time,
          });
        });
      })
--- a/src/pages/api/modules/usenet/index.ts
+++ b/src/pages/api/modules/usenet/index.ts
@@ -36,7 +36,7 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
            eta: eta.asSeconds(),
            name: slot.filename,
            progress: parseFloat(slot.percentage),
-            size: parseFloat(slot.mb),
+            size: parseFloat(slot.mb) * 1000 * 1000,
            state: slot.status.toLowerCase() as any,
          });
        });
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -3,6 +3,8 @@ import { GetServerSidePropsContext } from 'next';
 import { useEffect } from 'react';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
 import AppShelf from '../components/AppShelf/AppShelf';
 import LoadConfigComponent from '../components/Config/LoadConfig';
 import { Config } from '../tools/types';
@@ -62,6 +64,8 @@ export async function getServerSideProps({
  return getConfig(configName as string, translations);
 }

+const queryClient = new QueryClient();
+
 export default function HomePage(props: any) {
  const { config: initialConfig }: { config: Config } = props;
  const { setConfig } = useConfig();
@@ -73,9 +77,11 @@ export default function HomePage(props: any) {
    setConfig(migratedConfig);
  }, [initialConfig]);
  return (
-    <Layout>
-      <AppShelf />
-      <LoadConfigComponent />
-    </Layout>
+    <QueryClientProvider client={queryClient}>
+      <Layout>
+        <AppShelf />
+        <LoadConfigComponent />
+      </Layout>
+    </QueryClientProvider>
  );
 }
--- a/src/tools/hooks/api.ts
+++ b/src/tools/hooks/api.ts
@@ -0,0 +1,21 @@
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { UsenetHistoryItem, UsenetQueueItem } from '../../modules';
+
+export const useGetUsenetDownloads = () =>
+  useQuery(
+    ['usenetDownloads'],
+    async () => (await axios.get<UsenetQueueItem[]>('/api/modules/usenet')).data,
+    {
+      refetchInterval: 1000,
+    }
+  );
+
+export const useGetUsenetHistory = () =>
+  useQuery(
+    ['usenetHistory'],
+    async () => (await axios.get<UsenetHistoryItem[]>('/api/modules/usenet/history')).data,
+    {
+      refetchInterval: 1000,
+    }
+  );
--- a/yarn.lock
+++ b/yarn.lock
@@ -1918,6 +1918,33 @@ __metadata:
  languageName: node
  linkType: hard

+"@tanstack/query-core@npm:^4.0.0-beta.1":
+  version: 4.2.1
+  resolution: "@tanstack/query-core@npm:4.2.1"
+  checksum: f71854969e02de6c2cfbe25e8b11e275b61e1297a902e0d5c4beac580a87db99555c1c21d536d838ce5e0664bc49da7b60a3c6b8de334c7004c5005fe2a48030
+  languageName: node
+  linkType: hard
+
+"@tanstack/react-query@npm:^4.2.1":
+  version: 4.2.1
+  resolution: "@tanstack/react-query@npm:4.2.1"
+  dependencies:
+    "@tanstack/query-core": ^4.0.0-beta.1
+    "@types/use-sync-external-store": ^0.0.3
+    use-sync-external-store: ^1.2.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-native: "*"
+  peerDependenciesMeta:
+    react-dom:
+      optional: true
+    react-native:
+      optional: true
+  checksum: bbf3a808645c26c649971dc182bb9a7ed7a1d89f6456b60685c6081b8be6ae84ae83b39c7eacb96c4f3b6677ca001d8114037329951987b7a8d65de53b28c862
+  languageName: node
+  linkType: hard
+
 "@tootallnate/once@npm:2":
  version: 2.0.0
  resolution: "@tootallnate/once@npm:2.0.0"
@@ -2163,6 +2190,13 @@ __metadata:
  languageName: node
  linkType: hard

+"@types/use-sync-external-store@npm:^0.0.3":
+  version: 0.0.3
+  resolution: "@types/use-sync-external-store@npm:0.0.3"
+  checksum: 161ddb8eec5dbe7279ac971531217e9af6b99f7783213566d2b502e2e2378ea19cf5e5ea4595039d730aa79d3d35c6567d48599f69773a02ffcff1776ec2a44e
+  languageName: node
+  linkType: hard
+
 "@types/uuid@npm:^8.3.4":
  version: 8.3.4
  resolution: "@types/uuid@npm:8.3.4"
@@ -4775,6 +4809,7 @@ __metadata:
    "@nivo/core": ^0.79.0
    "@nivo/line": ^0.79.1
    "@tabler/icons": ^1.78.0
+    "@tanstack/react-query": ^4.2.1
    "@types/dockerode": ^3.3.9
    "@types/node": 17.0.1
    "@types/react": 17.0.1
@@ -8164,6 +8199,15 @@ __metadata:
  languageName: node
  linkType: hard

+"use-sync-external-store@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "use-sync-external-store@npm:1.2.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 5c639e0f8da3521d605f59ce5be9e094ca772bd44a4ce7322b055a6f58eeed8dda3c94cabd90c7a41fb6fa852210092008afe48f7038792fd47501f33299116a
+  languageName: node
+  linkType: hard
+
 "util-deprecate@npm:^1.0.1, util-deprecate@npm:~1.0.1":
  version: 1.0.2
  resolution: "util-deprecate@npm:1.0.2"