🔀 Merge branch 'dev' into next-13

src/widgets/download-speed/TorrentNetworkTrafficTile.tsx

@@ -0,0 +1,294 @@
+import {
+  Avatar,
+  Box,
+  Card,
+  Group,
+  Indicator,
+  Stack,
+  Text,
+  Title,
+  Tooltip,
+  useMantineTheme,
+} from '@mantine/core';
+import { useElementSize, useListState } from '@mantine/hooks';
+import { linearGradientDef } from '@nivo/core';
+import { Datum, ResponsiveLine, Serie } from '@nivo/line';
+import { IconArrowsUpDown, IconDownload, IconUpload } from '@tabler/icons';
+import { useTranslation } from 'next-i18next';
+import { useEffect } from 'react';
+import { useConfigContext } from '../../config/provider';
+import { useGetDownloadClientsQueue } from '../../hooks/widgets/download-speed/useGetNetworkSpeed';
+import { useColorTheme } from '../../tools/color';
+import { humanFileSize } from '../../tools/humanFileSize';
+import {
+  NormalizedDownloadQueueResponse,
+  TorrentTotalDownload,
+} from '../../types/api/downloads/queue/NormalizedDownloadQueueResponse';
+import { defineWidget } from '../helper';
+import { IWidget } from '../widgets';
+
+const definition = defineWidget({
+  id: 'dlspeed',
+  icon: IconArrowsUpDown,
+  options: {},
+
+  gridstack: {
+    minWidth: 2,
+    minHeight: 2,
+    maxWidth: 12,
+    maxHeight: 6,
+  },
+  component: TorrentNetworkTrafficTile,
+});
+
+export type ITorrentNetworkTraffic = IWidget<typeof definition['id'], typeof definition>;
+
+interface TorrentNetworkTrafficTileProps {
+  widget: ITorrentNetworkTraffic;
+}
+
+function TorrentNetworkTrafficTile({ widget }: TorrentNetworkTrafficTileProps) {
+  const { config } = useConfigContext();
+  const { ref: refRoot, height: heightRoot } = useElementSize();
+  const { ref: refTitle, height: heightTitle } = useElementSize();
+  const { ref: refFooter, height: heightFooter } = useElementSize();
+  const { primaryColor, secondaryColor } = useColorTheme();
+  const { t } = useTranslation(`modules/${definition.id}`);
+
+  const [clientDataHistory, setClientDataHistory] = useListState<NormalizedDownloadQueueResponse>();
+
+  const { data, dataUpdatedAt } = useGetDownloadClientsQueue();
+
+  useEffect(() => {
+    if (data) {
+      setClientDataHistory.append(data);
+    }
+
+    if (clientDataHistory.length < 30) {
+      return;
+    }
+    setClientDataHistory.remove(0);
+  }, [dataUpdatedAt]);
+
+  if (!data) {
+    return null;
+  }
+
+  const recoredAppsOverTime = clientDataHistory.flatMap((x) => x.apps.map((app) => app));
+
+  // removing duplicates the "naive" way: https://stackoverflow.com/a/9229821/15257712
+  const uniqueRecordedAppsOverTime = recoredAppsOverTime
+    .map((x) => x.appId)
+    .filter((item, position) => recoredAppsOverTime.map((y) => y.appId).indexOf(item) === position);
+
+  const lineChartData: Serie[] = uniqueRecordedAppsOverTime.flatMap((appId) => {
+    const records = recoredAppsOverTime.filter((x) => x.appId === appId);
+
+    const series: Serie[] = [
+      {
+        id: `download_${appId}`,
+        data: records.map((record, index) => ({
+          x: index,
+          y: record.totalDownload,
+        })),
+      },
+    ];
+
+    if (records.some((x) => x.type === 'torrent')) {
+      const torrentRecords = records.map((record, index): Datum | null => {
+        if (record.type !== 'torrent') {
+          return null;
+        }
+
+        return {
+          x: index,
+          y: record.totalUpload,
+        };
+      });
+      const filteredRecords = torrentRecords.filter((x) => x !== null) as Datum[];
+      series.push({
+        id: `upload_${appId}`,
+        data: filteredRecords,
+      });
+    }
+
+    return series;
+  });
+
+  const totalDownload = uniqueRecordedAppsOverTime
+    .map((appId) => {
+      const records = recoredAppsOverTime.filter((x) => x.appId === appId);
+      const lastRecord = records.at(-1);
+      return lastRecord?.totalDownload ?? 0;
+    })
+    .reduce((acc, n) => acc + n, 0);
+
+  const totalUpload = uniqueRecordedAppsOverTime
+    .map((appId) => {
+      const records = recoredAppsOverTime.filter((x) => x.appId === appId && x.type === 'torrent');
+      const lastRecord = records.at(-1) as TorrentTotalDownload;
+      return lastRecord?.totalUpload ?? 0;
+    })
+    .reduce((acc, n) => acc + n, 0);
+
+  const graphHeight = heightRoot - heightFooter - heightTitle;
+
+  const { colors } = useMantineTheme();
+
+  return (
+    <Stack ref={refRoot} style={{ height: '100%' }}>
+      <Group ref={refTitle}>
+        <IconDownload />
+        <Title order={4}>{t('card.lineChart.title')}</Title>
+      </Group>
+      <Box
+        style={{
+          height: graphHeight,
+          width: '100%',
+          position: 'relative',
+        }}
+      >
+        <Box style={{ height: '100%', width: '100%', position: 'absolute' }}>
+          <ResponsiveLine
+            isInteractive
+            enableSlices="x"
+            sliceTooltip={({ slice }) => {
+              const { points } = slice;
+
+              const recordsFromPoints = uniqueRecordedAppsOverTime.map((appId) => {
+                const records = recoredAppsOverTime.filter((x) => x.appId === appId);
+                const point = points.find((x) => x.id.includes(appId));
+                const pointIndex = Number(point?.data.x) ?? 0;
+                const color = point?.serieColor;
+                return {
+                  record: records[pointIndex],
+                  color,
+                };
+              });
+
+              return (
+                <Card p="xs" radius="md" withBorder>
+                  <Card.Section p="xs">
+                    <Stack spacing="xs">
+                      {recordsFromPoints.map((entry, index) => {
+                        const app = config?.apps.find((x) => x.id === entry.record.appId);
+
+                        if (!app) {
+                          return null;
+                        }
+
+                        return (
+                          <Group key={`download-client-tooltip-${index}`}>
+                            <AppAvatar iconUrl={app.appearance.iconUrl} />
+
+                            <Stack spacing={0}>
+                              <Text size="sm">{app.name}</Text>
+                              <Group>
+                                <Group spacing="xs">
+                                  <IconDownload opacity={0.6} size={14} />
+                                  <Text size="xs" color="dimmed">
+                                    {humanFileSize(entry.record.totalDownload, false)}
+                                  </Text>
+                                </Group>
+
+                                {entry.record.type === 'torrent' && (
+                                  <Group spacing="xs">
+                                    <IconUpload opacity={0.6} size={14} />
+                                    <Text size="xs" color="dimmed">
+                                      {humanFileSize(entry.record.totalUpload, false)}
+                                    </Text>
+                                  </Group>
+                                )}
+                              </Group>
+                            </Stack>
+                          </Group>
+                        );
+                      })}
+                    </Stack>
+                  </Card.Section>
+                </Card>
+              );
+            }}
+            data={lineChartData}
+            curve="monotoneX"
+            yFormat=" >-.2f"
+            axisLeft={null}
+            axisBottom={null}
+            axisRight={null}
+            enablePoints={false}
+            enableGridX={false}
+            enableGridY={false}
+            enableArea
+            defs={[
+              linearGradientDef('gradientA', [
+                { offset: 0, color: 'inherit' },
+                { offset: 100, color: 'inherit', opacity: 0 },
+              ]),
+            ]}
+            colors={lineChartData.flatMap((data) =>
+              data.id.toString().startsWith('upload_')
+                ? colors[secondaryColor][5]
+                : colors[primaryColor][5]
+            )}
+            fill={[{ match: '*', id: 'gradientA' }]}
+            margin={{ bottom: 5 }}
+            animate={false}
+          />
+        </Box>
+      </Box>
+
+      <Group position="apart" ref={refFooter}>
+        <Group>
+          <Group spacing="xs">
+            <IconDownload color={colors[primaryColor][5]} opacity={0.6} size={18} />
+            <Text color="dimmed" size="sm">
+              {humanFileSize(totalDownload, false)}
+            </Text>
+          </Group>
+          <Group spacing="xs">
+            <IconUpload color={colors[secondaryColor][5]} opacity={0.6} size={18} />
+            <Text color="dimmed" size="sm">
+              {humanFileSize(totalUpload, false)}
+            </Text>
+          </Group>
+        </Group>
+        <Avatar.Group>
+          {uniqueRecordedAppsOverTime.map((appId, index) => {
+            const app = config?.apps.find((x) => x.id === appId);
+
+            if (!app) {
+              return null;
+            }
+
+            return (
+              <Tooltip
+                label={app.name}
+                key={`download-client-app-tooltip-${index}`}
+                withArrow
+                withinPortal
+              >
+                <AppAvatar iconUrl={app.appearance.iconUrl} />
+              </Tooltip>
+            );
+          })}
+        </Avatar.Group>
+      </Group>
+    </Stack>
+  );
+}
+
+const AppAvatar = ({ iconUrl }: { iconUrl: string }) => {
+  const { colors, colorScheme } = useMantineTheme();
+
+  return (
+    <Avatar
+      src={iconUrl}
+      bg={colorScheme === 'dark' ? colors.gray[8] : colors.gray[2]}
+      size="sm"
+      radius="xl"
+      p={4}
+    />
+  );
+};
+
+export default definition;

src/widgets/index.ts

@@ -4,7 +4,7 @@ import dashdot from './dashDot/DashDotTile';
 import usenet from './useNet/UseNetTile';
 import weather from './weather/WeatherTile';
 import torrent from './torrent/TorrentTile';
-import torrentNetworkTraffic from './torrentNetworkTraffic/TorrentNetworkTrafficTile';
+import torrentNetworkTraffic from './download-speed/TorrentNetworkTrafficTile';
 
 export default {
   calendar,

src/widgets/torrent/TorrentQueueItem.tsx

@@ -24,7 +24,7 @@ import {
   IconUpload,
 } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';
-import { calculateETA } from '../../tools/calculateEta';
+import { calculateETA } from '../../tools/client/calculateEta';
 import { humanFileSize } from '../../tools/humanFileSize';
 import { AppType } from '../../types/app';
 

src/widgets/torrent/TorrentTile.tsx

@@ -1,4 +1,4 @@
-import { NormalizedTorrent } from '@ctrl/shared-torrent';
+import { TorrentState } from '@ctrl/shared-torrent';
 import {
   Badge,
   Center,
@@ -18,10 +18,8 @@ import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { useTranslation } from 'next-i18next';
-import { useEffect, useState } from 'react';
-import { useConfigContext } from '../../config/provider';
-import { useGetTorrentData } from '../../hooks/widgets/torrents/useGetTorrentData';
-import { NormalizedTorrentListResponse } from '../../types/api/NormalizedTorrentListResponse';
+import { useGetDownloadClientsQueue } from '../../hooks/widgets/download-speed/useGetNetworkSpeed';
+import { NormalizedDownloadQueueResponse } from '../../types/api/downloads/queue/NormalizedDownloadQueueResponse';
 import { AppIntegrationType } from '../../types/app';
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
@@ -44,13 +42,6 @@ const definition = defineWidget({
       type: 'switch',
       defaultValue: true,
     },
-    refreshInterval: {
-      type: 'slider',
-      defaultValue: 10,
-      min: 1,
-      max: 60,
-      step: 1,
-    },
   },
   gridstack: {
     minWidth: 2,
@@ -72,43 +63,17 @@ function TorrentTile({ widget }: TorrentTileProps) {
   const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
   const { width } = useElementSize();
 
-  const { config } = useConfigContext();
-  const downloadApps =
-    config?.apps.filter((x) => x.integration && downloadAppTypes.includes(x.integration.type)) ??
-    [];
-
-  const [selectedAppId, setSelectedApp] = useState<string | null>(downloadApps[0]?.id);
   const {
     data,
     isError,
     isInitialLoading,
     dataUpdatedAt,
   }: {
-    data: NormalizedTorrentListResponse | undefined;
+    data: NormalizedDownloadQueueResponse | undefined;
     isError: boolean;
     isInitialLoading: boolean;
     dataUpdatedAt: number;
-  } = useGetTorrentData({
-    appId: selectedAppId!,
-    refreshInterval: widget.properties.refreshInterval * 1000,
-  });
-
-  useEffect(() => {
-    if (!selectedAppId && downloadApps.length) {
-      setSelectedApp(downloadApps[0].id);
-    }
-  }, [downloadApps, selectedAppId]);
-
-  if (downloadApps.length === 0) {
-    return (
-      <Stack>
-        <Title order={3}>{t('card.errors.noDownloadClients.title')}</Title>
-        <Group>
-          <Text>{t('card.errors.noDownloadClients.text')}</Text>
-        </Group>
-      </Stack>
-    );
-  }
+  } = useGetDownloadClientsQueue();
 
   if (isError) {
     return (
@@ -121,7 +86,7 @@ function TorrentTile({ widget }: TorrentTileProps) {
     );
   }
 
-  if (isInitialLoading) {
+  if (isInitialLoading || !data) {
     return (
       <Stack
         align="center"
@@ -139,7 +104,18 @@ function TorrentTile({ widget }: TorrentTileProps) {
     );
   }
 
-  if (!data || Object.values(data.torrents).length < 1) {
+  if (data.apps.length === 0) {
+    return (
+      <Stack>
+        <Title order={3}>{t('card.errors.noDownloadClients.title')}</Title>
+        <Group>
+          <Text>{t('card.errors.noDownloadClients.text')}</Text>
+        </Group>
+      </Stack>
+    );
+  }
+
+  if (!data || Object.values(data.apps).length < 1) {
     return (
       <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
         <Title order={3}>{t('card.table.body.nothingFound')}</Title>
@@ -147,17 +123,14 @@ function TorrentTile({ widget }: TorrentTileProps) {
     );
   }
 
-  const filter = (torrent: NormalizedTorrent) => {
-    if (!widget.properties.displayCompletedTorrents && torrent.isCompleted) {
-      return false;
-    }
-
-    if (!widget.properties.displayStaleTorrents && !torrent.isCompleted && torrent.eta <= 0) {
-      return false;
-    }
-
-    return true;
-  };
+  const torrents = data.apps
+    .flatMap((app) => (app.type === 'torrent' ? app.torrents : []))
+    .filter((torrent) => (widget.properties.displayCompletedTorrents ? true : !torrent.isCompleted))
+    .filter((torrent) =>
+      widget.properties.displayStaleTorrents
+        ? true
+        : torrent.isCompleted || torrent.downloadSpeed > 0
+    );
 
   const difference = new Date().getTime() - dataUpdatedAt;
   const duration = dayjs.duration(difference, 'ms');
@@ -178,19 +151,14 @@ function TorrentTile({ widget }: TorrentTileProps) {
             </tr>
           </thead>
           <tbody>
-            {data.torrents.map((concatenatedTorrentList) => {
-              const app = config?.apps.find((x) => x.id === concatenatedTorrentList.appId);
-              return concatenatedTorrentList.torrents
-                .filter(filter)
-                .map((item: NormalizedTorrent, index: number) => (
-                  <BitTorrrentQueueItem key={index} torrent={item} app={app} />
-                ));
-            })}
+            {torrents.map((torrent, index) => (
+              <BitTorrrentQueueItem key={index} torrent={torrent} app={undefined} />
+            ))}
           </tbody>
         </Table>
       </ScrollArea>
       <Group spacing="sm">
-        {!data.allSuccess && (
+        {data.apps.some((x) => !x.success) && (
           <Badge variant="dot" color="red">
             {t('card.footer.error')}
           </Badge>

src/widgets/torrentNetworkTraffic/TorrentNetworkTrafficTile.tsx

@@ -1,198 +0,0 @@
-import { NormalizedTorrent } from '@ctrl/shared-torrent';
-import { Text, Title, Group, useMantineTheme, Box, Card, ColorSwatch, Stack } from '@mantine/core';
-import { useListState } from '@mantine/hooks';
-import { showNotification } from '@mantine/notifications';
-import { linearGradientDef } from '@nivo/core';
-import { Datum, ResponsiveLine } from '@nivo/line';
-import { IconArrowsUpDown } from '@tabler/icons';
-import axios from 'axios';
-import { useTranslation } from 'next-i18next';
-import { useEffect, useState } from 'react';
-import { useConfigContext } from '../../config/provider';
-import { useSetSafeInterval } from '../../hooks/useSetSafeInterval';
-import { humanFileSize } from '../../tools/humanFileSize';
-import { NormalizedTorrentListResponse } from '../../types/api/NormalizedTorrentListResponse';
-import { defineWidget } from '../helper';
-import { IWidget } from '../widgets';
-
-const definition = defineWidget({
-  id: 'dlspeed',
-  icon: IconArrowsUpDown,
-  options: {},
-
-  gridstack: {
-    minWidth: 2,
-    minHeight: 2,
-    maxWidth: 12,
-    maxHeight: 6,
-  },
-  component: TorrentNetworkTrafficTile,
-});
-
-export type ITorrentNetworkTraffic = IWidget<typeof definition['id'], typeof definition>;
-
-interface TorrentNetworkTrafficTileProps {
-  widget: ITorrentNetworkTraffic;
-}
-
-function TorrentNetworkTrafficTile({ widget }: TorrentNetworkTrafficTileProps) {
-  const { t } = useTranslation(`modules/${definition.id}`);
-  const { colors } = useMantineTheme();
-  const setSafeInterval = useSetSafeInterval();
-  const { configVersion, config } = useConfigContext();
-
-  const [torrentHistory, torrentHistoryHandlers] = useListState<TorrentHistory>([]);
-  const [torrents, setTorrents] = useState<NormalizedTorrent[]>([]);
-
-  const downloadServices =
-    config?.apps.filter(
-      (app) =>
-        app.integration.type === 'qBittorrent' ||
-        app.integration.type === 'transmission' ||
-        app.integration.type === 'deluge'
-    ) ?? [];
-  const totalDownloadSpeed = torrents.reduce((acc, torrent) => acc + torrent.downloadSpeed, 0);
-  const totalUploadSpeed = torrents.reduce((acc, torrent) => acc + torrent.uploadSpeed, 0);
-
-  useEffect(() => {
-    if (downloadServices.length === 0) return;
-    const interval = setSafeInterval(() => {
-      // Send one request with each download service inside
-      axios
-        .post('/api/modules/torrents')
-        .then((response) => {
-          const responseData: NormalizedTorrentListResponse = response.data;
-          setTorrents(responseData.torrents.flatMap((x) => x.torrents));
-        })
-        .catch((error) => {
-          if (error.status === 401) return;
-          setTorrents([]);
-          // eslint-disable-next-line no-console
-          console.error('Error while fetching torrents', error.response.data);
-          showNotification({
-            title: 'Torrent speed module failed to fetch torrents',
-            autoClose: 1000,
-            disallowClose: true,
-            id: 'fail-torrent-speed-module',
-            color: 'red',
-            message:
-              'Error fetching torrents, please check your config for any potential errors, check the console for more info',
-          });
-          clearInterval(interval);
-        });
-    }, 1000);
-  }, [configVersion]);
-
-  useEffect(() => {
-    torrentHistoryHandlers.append({
-      x: Date.now(),
-      down: totalDownloadSpeed,
-      up: totalUploadSpeed,
-    });
-  }, [totalDownloadSpeed, totalUploadSpeed]);
-
-  const history = torrentHistory.slice(-10);
-  const chartDataUp = history.map((load, i) => ({
-    x: load.x,
-    y: load.up,
-  })) as Datum[];
-  const chartDataDown = history.map((load, i) => ({
-    x: load.x,
-    y: load.down,
-  })) as Datum[];
-
-  return (
-    <Stack>
-      <Title order={4}>{t('card.lineChart.title')}</Title>
-      <Stack>
-        <Group>
-          <ColorSwatch size={12} color={colors.green[5]} />
-          <Text>
-            {t('card.lineChart.totalDownload', { download: humanFileSize(totalDownloadSpeed) })}
-          </Text>
-        </Group>
-        <Group>
-          <ColorSwatch size={12} color={colors.blue[5]} />
-          <Text>
-            {t('card.lineChart.totalUpload', { upload: humanFileSize(totalUploadSpeed) })}
-          </Text>
-        </Group>
-      </Stack>
-      <Box
-        style={{
-          height: 200,
-          width: '100%',
-        }}
-      >
-        <ResponsiveLine
-          isInteractive
-          enableSlices="x"
-          sliceTooltip={({ slice }) => {
-            const Download = slice.points[0].data.y as number;
-            const Upload = slice.points[1].data.y as number;
-            // Get the number of seconds since the last update.
-            const seconds = (Date.now() - (slice.points[0].data.x as number)) / 1000;
-            // Round to the nearest second.
-            const roundedSeconds = Math.round(seconds);
-            return (
-              <Card p="sm" radius="md" withBorder>
-                <Text size="md">{t('card.lineChart.timeSpan', { seconds: roundedSeconds })}</Text>
-                <Card.Section p="sm">
-                  <Stack>
-                    <Group>
-                      <ColorSwatch size={10} color={colors.green[5]} />
-                      <Text size="md">
-                        {t('card.lineChart.download', { download: humanFileSize(Download) })}
-                      </Text>
-                    </Group>
-                    <Group>
-                      <ColorSwatch size={10} color={colors.blue[5]} />
-                      <Text size="md">
-                        {t('card.lineChart.upload', { upload: humanFileSize(Upload) })}
-                      </Text>
-                    </Group>
-                  </Stack>
-                </Card.Section>
-              </Card>
-            );
-          }}
-          data={[
-            {
-              id: 'downloads',
-              data: chartDataUp,
-            },
-            {
-              id: 'uploads',
-              data: chartDataDown,
-            },
-          ]}
-          curve="monotoneX"
-          yFormat=" >-.2f"
-          axisTop={null}
-          axisRight={null}
-          enablePoints={false}
-          animate={false}
-          enableGridX={false}
-          enableGridY={false}
-          enableArea
-          defs={[
-            linearGradientDef('gradientA', [
-              { offset: 0, color: 'inherit' },
-              { offset: 100, color: 'inherit', opacity: 0 },
-            ]),
-          ]}
-          fill={[{ match: '*', id: 'gradientA' }]}
-          colors={[colors.blue[5], colors.green[5]]}
-        />
-      </Box>
-    </Stack>
-  );
-}
-
-export default definition;
-
-interface TorrentHistory {
-  x: number;
-  up: number;
-  down: number;
-}

src/widgets/useNet/UsenetHistoryList.tsx

@@ -20,7 +20,7 @@ import { useTranslation } from 'next-i18next';
 import { FunctionComponent, useState } from 'react';
 import { useGetUsenetHistory } from '../../hooks/widgets/dashDot/api';
 import { humanFileSize } from '../../tools/humanFileSize';
-import { parseDuration } from '../../tools/parseDuration';
+import { parseDuration } from '../../tools/client/parseDuration';
 
 dayjs.extend(duration);