mirror of
https://github.com/ajnart/homarr.git
synced 2025-11-07 05:55:48 +01:00
✨ Add total downloads module
This commit is contained in:
ajnart
212
src/components/modules/downloads/TotalDownloadsModule.tsx
Normal file
212
src/components/modules/downloads/TotalDownloadsModule.tsx
Normal file
@@ -0,0 +1,212 @@
|
|||||||
|
import { Text, Title, Group, useMantineTheme, Box, Card, ColorSwatch } from '@mantine/core';
|
||||||
|
import { Download } from 'tabler-icons-react';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import axios from 'axios';
|
||||||
|
import { NormalizedTorrent } from '@ctrl/shared-torrent';
|
||||||
|
import { linearGradientDef } from '@nivo/core';
|
||||||
|
import { Datum, ResponsiveLine } from '@nivo/line';
|
||||||
|
import { useListState } from '@mantine/hooks';
|
||||||
|
import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem';
|
||||||
|
import { useConfig } from '../../../tools/state';
|
||||||
|
import { IModule } from '../modules';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format bytes as human-readable text.
|
||||||
|
*
|
||||||
|
* @param bytes Number of bytes.
|
||||||
|
* @param si True to use metric (SI) units, aka powers of 1000. False to use
|
||||||
|
* binary (IEC), aka powers of 1024.
|
||||||
|
* @param dp Number of decimal places to display.
|
||||||
|
*
|
||||||
|
* @return Formatted string.
|
||||||
|
*/
|
||||||
|
function humanFileSize(initialBytes: number, si = true, dp = 1) {
|
||||||
|
const thresh = si ? 1000 : 1024;
|
||||||
|
let bytes = initialBytes;
|
||||||
|
|
||||||
|
if (Math.abs(bytes) < thresh) {
|
||||||
|
return `${bytes} B`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const units = si
|
||||||
|
? ['kb', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
|
||||||
|
: ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
|
||||||
|
let u = -1;
|
||||||
|
const r = 10 ** dp;
|
||||||
|
|
||||||
|
do {
|
||||||
|
bytes /= thresh;
|
||||||
|
u += 1;
|
||||||
|
} while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
|
||||||
|
|
||||||
|
return `${bytes.toFixed(dp)} ${units[u]}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const TotalDownloadsModule: IModule = {
|
||||||
|
title: 'Download speed',
|
||||||
|
description: 'Show the current download speed of supported services',
|
||||||
|
icon: Download,
|
||||||
|
component: TotalDownloadsComponent,
|
||||||
|
};
|
||||||
|
|
||||||
|
interface torrentHistory {
|
||||||
|
x: number;
|
||||||
|
up: number;
|
||||||
|
down: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function TotalDownloadsComponent() {
|
||||||
|
const { config } = useConfig();
|
||||||
|
const qBittorrentService = config.services
|
||||||
|
.filter((service) => service.type === 'qBittorrent')
|
||||||
|
.at(0);
|
||||||
|
const delugeService = config.services.filter((service) => service.type === 'Deluge').at(0);
|
||||||
|
|
||||||
|
const [delugeTorrents, setDelugeTorrents] = useState<NormalizedTorrent[]>([]);
|
||||||
|
const [torrentHistory, torrentHistoryHandlers] = useListState<torrentHistory>([]);
|
||||||
|
const [qBittorrentTorrents, setqBittorrentTorrents] = useState<NormalizedTorrent[]>([]);
|
||||||
|
|
||||||
|
const torrents: NormalizedTorrent[] = [];
|
||||||
|
delugeTorrents.forEach((delugeTorrent) =>
|
||||||
|
torrents.push({ ...delugeTorrent, progress: delugeTorrent.progress / 100 })
|
||||||
|
);
|
||||||
|
qBittorrentTorrents.forEach((torrent) => torrents.push(torrent));
|
||||||
|
|
||||||
|
const totalDownloadSpeed = torrents.reduce((acc, torrent) => acc + torrent.downloadSpeed, 0);
|
||||||
|
const totalUploadSpeed = torrents.reduce((acc, torrent) => acc + torrent.uploadSpeed, 0);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
// Get the current download speed of qBittorrent.
|
||||||
|
if (qBittorrentService) {
|
||||||
|
axios
|
||||||
|
.post('/api/modules/downloads?dlclient=qbit', { ...qBittorrentService })
|
||||||
|
.then((res) => {
|
||||||
|
setqBittorrentTorrents(res.data.torrents);
|
||||||
|
});
|
||||||
|
if (delugeService) {
|
||||||
|
axios.post('/api/modules/downloads?dlclient=deluge', { ...delugeService }).then((res) => {
|
||||||
|
setDelugeTorrents(res.data.torrents);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
}, [config.modules]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
torrentHistoryHandlers.append({
|
||||||
|
x: Date.now(),
|
||||||
|
down: totalDownloadSpeed,
|
||||||
|
up: totalUploadSpeed,
|
||||||
|
});
|
||||||
|
}, [totalDownloadSpeed, totalUploadSpeed]);
|
||||||
|
|
||||||
|
if (!qBittorrentService && !delugeService) {
|
||||||
|
return (
|
||||||
|
<Group direction="column">
|
||||||
|
<Title order={3}>Critical: No qBittorrent/Deluge instance found in services.</Title>
|
||||||
|
<Group noWrap>
|
||||||
|
<Title order={5}>Add a qBittorrent/Deluge service to view current downloads</Title>
|
||||||
|
<AddItemShelfButton />
|
||||||
|
</Group>
|
||||||
|
</Group>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const theme = useMantineTheme();
|
||||||
|
// Load the last 10 values from the history
|
||||||
|
const history = torrentHistory.slice(-10);
|
||||||
|
console.log(history);
|
||||||
|
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 (
|
||||||
|
<Group noWrap direction="column" grow>
|
||||||
|
<Title order={4}>Current download speed</Title>
|
||||||
|
<Group direction="column">
|
||||||
|
<Group>
|
||||||
|
<ColorSwatch size={12} color={theme.colors.green[5]} />
|
||||||
|
<Text>Download: {humanFileSize(totalDownloadSpeed)}/s</Text>
|
||||||
|
</Group>
|
||||||
|
<Group>
|
||||||
|
<ColorSwatch size={12} color={theme.colors.blue[5]} />
|
||||||
|
<Text>Upload: {humanFileSize(totalUploadSpeed)}/s</Text>
|
||||||
|
</Group>
|
||||||
|
</Group>
|
||||||
|
<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">{roundedSeconds} seconds ago</Text>
|
||||||
|
<Card.Section p="sm">
|
||||||
|
<Group direction="column">
|
||||||
|
<Group>
|
||||||
|
<ColorSwatch size={10} color={theme.colors.green[5]} />
|
||||||
|
<Text size="md">Download: {humanFileSize(Download)}</Text>
|
||||||
|
</Group>
|
||||||
|
<Group>
|
||||||
|
<ColorSwatch size={10} color={theme.colors.blue[5]} />
|
||||||
|
<Text size="md">Upload: {humanFileSize(Upload)}</Text>
|
||||||
|
</Group>
|
||||||
|
</Group>
|
||||||
|
</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={[
|
||||||
|
// Blue
|
||||||
|
theme.colors.blue[5],
|
||||||
|
// Green
|
||||||
|
theme.colors.green[5],
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</Group>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user