Merge branch 'dev' into useQuery-stale-time-cache

src/widgets/dashDot/DashDotGraph.tsx

@@ -5,9 +5,15 @@ interface DashDotGraphProps {
   graph: GraphType;
   isCompact: boolean;
   dashDotUrl: string;
+  usePercentages: boolean;
 }
 
-export const DashDotGraph = ({ graph, isCompact, dashDotUrl }: DashDotGraphProps) => {
+export const DashDotGraph = ({
+  graph,
+  isCompact,
+  dashDotUrl,
+  usePercentages,
+}: DashDotGraphProps) => {
   const { classes } = useStyles();
   return (
     <Stack
@@ -25,13 +31,18 @@ export const DashDotGraph = ({ graph, isCompact, dashDotUrl }: DashDotGraphProps
         className={classes.iframe}
         key={graph.name}
         title={graph.name}
-        src={useIframeSrc(dashDotUrl, graph, isCompact)}
+        src={useIframeSrc(dashDotUrl, graph, isCompact, usePercentages)}
       />
     </Stack>
   );
 };
 
-const useIframeSrc = (dashDotUrl: string, graph: GraphType, isCompact: boolean) => {
+const useIframeSrc = (
+  dashDotUrl: string,
+  graph: GraphType,
+  isCompact: boolean,
+  usePercentages: boolean
+) => {
   const { colorScheme, colors, radius } = useMantineTheme();
   const surface = (colorScheme === 'dark' ? colors.dark[7] : colors.gray[0]).substring(1); // removes # from hex value
 
@@ -45,7 +56,8 @@ const useIframeSrc = (dashDotUrl: string, graph: GraphType, isCompact: boolean)
     `&surface=${surface}` +
     `&gap=${isCompact ? 10 : 5}` +
     `&innerRadius=${radius.lg}` +
-    `&multiView=${graph.isMultiView}`
+    `&multiView=${graph.isMultiView}` +
+    `&showPercentage=${usePercentages ? 'true' : 'false'}`
   );
 };
 

src/widgets/dashDot/DashDotTile.tsx

@@ -25,6 +25,10 @@ const definition = defineWidget({
       type: 'switch',
       defaultValue: true,
     },
+    usePercentages: {
+      type: 'switch',
+      defaultValue: false,
+    },
     graphs: {
       type: 'multi-select',
       defaultValue: ['cpu', 'memory'],
@@ -88,6 +92,8 @@ function DashDotTile({ widget }: DashDotTileProps) {
 
   const isCompactNetworkVisible = graphs?.some((g) => g.id === 'network' && isCompact);
 
+  const usePercentages = widget?.properties.usePercentages ?? false;
+
   const displayedGraphs = graphs?.filter(
     (g) => !isCompact || !['network', 'storage'].includes(g.id)
   );
@@ -109,6 +115,7 @@ function DashDotTile({ widget }: DashDotTileProps) {
                 graph={graph}
                 dashDotUrl={dashDotUrl}
                 isCompact={isCompact}
+                usePercentages={usePercentages}
               />
             ))}
           </Group>

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,3 +1,4 @@
+import { TorrentState } from '@ctrl/shared-torrent';
 import {
   Badge,
   Center,
@@ -122,7 +123,14 @@ function TorrentTile({ widget }: TorrentTileProps) {
     );
   }
 
-  const torrents = data.apps.flatMap((app) => (app.type === 'torrent' ? app.torrents : []));
+  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');

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);