943 lines
34 KiB
TypeScript
943 lines
34 KiB
TypeScript
"use client";
|
|
|
|
import "../widgets-common.css";
|
|
|
|
import { useCallback, useMemo, useState } from "react";
|
|
import type { MantineStyleProp } from "@mantine/core";
|
|
import {
|
|
ActionIcon,
|
|
Avatar,
|
|
AvatarGroup,
|
|
Button,
|
|
Center,
|
|
Chip,
|
|
Divider,
|
|
Group,
|
|
Modal,
|
|
Paper,
|
|
Popover,
|
|
Progress,
|
|
Space,
|
|
Stack,
|
|
Text,
|
|
Title,
|
|
Tooltip,
|
|
} from "@mantine/core";
|
|
import { useDisclosure } from "@mantine/hooks";
|
|
import {
|
|
IconAlertTriangle,
|
|
IconCirclesRelation,
|
|
IconFilter,
|
|
IconInfinity,
|
|
IconInfoCircle,
|
|
IconPlayerPause,
|
|
IconPlayerPlay,
|
|
IconTrash,
|
|
IconX,
|
|
} from "@tabler/icons-react";
|
|
import dayjs from "dayjs";
|
|
import type { MRT_ColumnDef, MRT_VisibilityState } from "mantine-react-table";
|
|
import { MantineReactTable, useMantineReactTable } from "mantine-react-table";
|
|
|
|
import { clientApi } from "@homarr/api/client";
|
|
import { useIntegrationsWithInteractAccess } from "@homarr/auth/client";
|
|
import { humanFileSize, useIntegrationConnected } from "@homarr/common";
|
|
import { getIconUrl, getIntegrationKindsByCategory } from "@homarr/definitions";
|
|
import type { ExtendedClientStatus, ExtendedDownloadClientItem } from "@homarr/integrations";
|
|
import { useScopedI18n } from "@homarr/translation/client";
|
|
|
|
import type { WidgetComponentProps } from "../definition";
|
|
|
|
interface QuickFilter {
|
|
integrationKinds: string[];
|
|
statuses: ExtendedDownloadClientItem["state"][];
|
|
}
|
|
|
|
//Ratio table for relative width between columns
|
|
const columnsRatios: Record<keyof ExtendedDownloadClientItem, number> = {
|
|
actions: 2,
|
|
added: 4,
|
|
category: 1,
|
|
downSpeed: 3,
|
|
id: 1,
|
|
index: 1,
|
|
integration: 1,
|
|
name: 8,
|
|
progress: 4,
|
|
ratio: 2,
|
|
received: 3,
|
|
sent: 3,
|
|
size: 3,
|
|
state: 3,
|
|
time: 4,
|
|
type: 2,
|
|
upSpeed: 3,
|
|
};
|
|
|
|
export default function DownloadClientsWidget({
|
|
isEditMode,
|
|
integrationIds,
|
|
options,
|
|
setOptions,
|
|
}: WidgetComponentProps<"downloads">) {
|
|
const integrationsWithInteractions = useIntegrationsWithInteractAccess().flatMap(({ id }) =>
|
|
integrationIds.includes(id) ? [id] : [],
|
|
);
|
|
|
|
const [currentItems] = clientApi.widget.downloads.getJobsAndStatuses.useSuspenseQuery(
|
|
{
|
|
integrationIds,
|
|
limitPerIntegration: options.limitPerIntegration,
|
|
},
|
|
{
|
|
refetchOnMount: false,
|
|
refetchOnWindowFocus: false,
|
|
refetchOnReconnect: false,
|
|
retry: false,
|
|
},
|
|
);
|
|
const utils = clientApi.useUtils();
|
|
|
|
//Translations
|
|
const t = useScopedI18n("widget.downloads");
|
|
const tCommon = useScopedI18n("common");
|
|
|
|
//Item modal state and selection
|
|
const [clickedIndex, setClickedIndex] = useState<number>(0);
|
|
const [opened, { open, close }] = useDisclosure(false);
|
|
|
|
//User quick settings for filters
|
|
const [quickFilters, setQuickFilters] = useState<QuickFilter>({ integrationKinds: [], statuses: [] });
|
|
const availableStatuses = useMemo<QuickFilter["statuses"]>(() => {
|
|
//Redefine list of available statuses from current items
|
|
const statuses = Array.from(new Set(currentItems.flatMap(({ data }) => data.items.map(({ state }) => state))));
|
|
//Reset user filters accordingly to remove unavailable statuses
|
|
setQuickFilters(({ integrationKinds: names, statuses: prevStatuses }) => {
|
|
return { integrationKinds: names, statuses: prevStatuses.filter((status) => statuses.includes(status)) };
|
|
});
|
|
return statuses;
|
|
}, [currentItems]);
|
|
|
|
//Get API mutation functions
|
|
const { mutate: mutateResumeItem } = clientApi.widget.downloads.resumeItem.useMutation();
|
|
const { mutate: mutatePauseItem } = clientApi.widget.downloads.pauseItem.useMutation();
|
|
const { mutate: mutateDeleteItem } = clientApi.widget.downloads.deleteItem.useMutation();
|
|
|
|
//Subscribe to dynamic data changes
|
|
clientApi.widget.downloads.subscribeToJobsAndStatuses.useSubscription(
|
|
{
|
|
integrationIds,
|
|
limitPerIntegration: options.limitPerIntegration,
|
|
},
|
|
{
|
|
onData: (data) => {
|
|
utils.widget.downloads.getJobsAndStatuses.setData(
|
|
{ integrationIds, limitPerIntegration: options.limitPerIntegration },
|
|
(prevData) => {
|
|
return prevData?.map((item) => {
|
|
if (item.integration.id !== data.integration.id) return item;
|
|
|
|
return {
|
|
data: data.data,
|
|
integration: {
|
|
...data.integration,
|
|
updatedAt: new Date(),
|
|
},
|
|
};
|
|
});
|
|
},
|
|
);
|
|
},
|
|
},
|
|
);
|
|
|
|
//Flatten Data array for which each element has it's integration, data (base + calculated) and actions. Memoized on data subscription
|
|
const data = useMemo<ExtendedDownloadClientItem[]>(
|
|
() =>
|
|
currentItems
|
|
//Insure it is only using selected integrations
|
|
.filter(({ integration }) => integrationIds.includes(integration.id))
|
|
//Construct normalized items list
|
|
.flatMap((pair) =>
|
|
//Apply user white/black list
|
|
pair.data.items
|
|
.filter(
|
|
({ category }) =>
|
|
options.filterIsWhitelist ===
|
|
options.categoryFilter.some((filter) =>
|
|
(Array.isArray(category) ? category : [category]).includes(filter),
|
|
),
|
|
)
|
|
//Filter completed items following widget option
|
|
.filter(
|
|
({ type, progress, upSpeed }) =>
|
|
(type === "torrent" &&
|
|
((progress === 1 &&
|
|
options.showCompletedTorrent &&
|
|
(upSpeed ?? 0) >= Number(options.activeTorrentThreshold) * 1024) ||
|
|
progress !== 1)) ||
|
|
(type === "usenet" && ((progress === 1 && options.showCompletedUsenet) || progress !== 1)) ||
|
|
(type === "miscellaneous" && ((progress === 1 && options.showCompletedHttp) || progress !== 1)),
|
|
)
|
|
//Filter following user quick setting
|
|
.filter(
|
|
({ state }) =>
|
|
(quickFilters.integrationKinds.length === 0 ||
|
|
quickFilters.integrationKinds.includes(pair.integration.name)) &&
|
|
(quickFilters.statuses.length === 0 || quickFilters.statuses.includes(state)),
|
|
)
|
|
//Add extrapolated data and actions if user is allowed interaction
|
|
.map((item): ExtendedDownloadClientItem => {
|
|
const received = Math.floor(item.size * item.progress);
|
|
const integrationIds = [pair.integration.id];
|
|
return {
|
|
integration: pair.integration,
|
|
...item,
|
|
category: item.category !== undefined && item.category.length > 0 ? item.category : undefined,
|
|
received,
|
|
ratio: item.sent !== undefined ? item.sent / (received || 1) : undefined,
|
|
//Only add if permission to use mutations
|
|
actions: integrationsWithInteractions.includes(pair.integration.id)
|
|
? {
|
|
resume: () => mutateResumeItem({ integrationIds, item }),
|
|
pause: () => mutatePauseItem({ integrationIds, item }),
|
|
delete: ({ fromDisk }) => mutateDeleteItem({ integrationIds, item, fromDisk }),
|
|
}
|
|
: undefined,
|
|
};
|
|
}),
|
|
)
|
|
//flatMap already sorts by integration by nature, add sorting by integration type (usenet | torrent)
|
|
.sort(({ type: typeA }, { type: typeB }) => typeA.length - typeB.length),
|
|
[
|
|
currentItems,
|
|
integrationIds,
|
|
integrationsWithInteractions,
|
|
mutateDeleteItem,
|
|
mutatePauseItem,
|
|
mutateResumeItem,
|
|
options.activeTorrentThreshold,
|
|
options.categoryFilter,
|
|
options.filterIsWhitelist,
|
|
options.showCompletedTorrent,
|
|
options.showCompletedUsenet,
|
|
options.showCompletedHttp,
|
|
quickFilters,
|
|
],
|
|
);
|
|
|
|
//Flatten Clients Array for which each elements has the integration and general client infos.
|
|
const clients = useMemo<ExtendedClientStatus[]>(
|
|
() =>
|
|
currentItems
|
|
.filter(({ integration }) => integrationIds.includes(integration.id))
|
|
.flatMap(({ integration, data }): ExtendedClientStatus => {
|
|
const interact = integrationsWithInteractions.includes(integration.id);
|
|
const isTorrent = getIntegrationKindsByCategory("torrent").some((kind) => kind === integration.kind);
|
|
/** Derived from current items */
|
|
const { totalUp, totalDown } = data.items
|
|
.filter(
|
|
({ category }) =>
|
|
!options.applyFilterToRatio ||
|
|
!data.status.types.includes("torrent") ||
|
|
options.filterIsWhitelist ===
|
|
options.categoryFilter.some((filter) =>
|
|
(Array.isArray(category) ? category : [category]).includes(filter),
|
|
),
|
|
)
|
|
.reduce(
|
|
({ totalUp, totalDown }, { sent, size, progress }) => ({
|
|
totalUp: isTorrent ? (totalUp ?? 0) + (sent ?? 0) : undefined,
|
|
totalDown: totalDown + size * progress,
|
|
}),
|
|
{ totalDown: 0, totalUp: isTorrent ? 0 : undefined },
|
|
);
|
|
return {
|
|
integration,
|
|
interact,
|
|
status: {
|
|
totalUp,
|
|
totalDown,
|
|
ratio: totalUp === undefined ? undefined : totalUp / totalDown,
|
|
...data.status,
|
|
},
|
|
};
|
|
})
|
|
.sort(
|
|
({ status: statusA }, { status: statusB }) =>
|
|
(statusA?.types.length ?? Infinity) - (statusB?.types.length ?? Infinity),
|
|
),
|
|
[
|
|
currentItems,
|
|
integrationIds,
|
|
integrationsWithInteractions,
|
|
options.applyFilterToRatio,
|
|
options.categoryFilter,
|
|
options.filterIsWhitelist,
|
|
],
|
|
);
|
|
|
|
//Check existing types between torrents and usenet
|
|
const integrationTypes: ExtendedDownloadClientItem["type"][] = [];
|
|
|
|
if (data.some(({ type }) => type === "torrent")) integrationTypes.push("torrent");
|
|
if (data.some(({ type }) => type === "usenet")) integrationTypes.push("usenet");
|
|
if (data.some(({ type }) => type === "miscellaneous")) integrationTypes.push("miscellaneous");
|
|
|
|
//Set the visibility of columns depending on widget settings and available data/integrations.
|
|
const columnVisibility: MRT_VisibilityState = {
|
|
id: options.columns.includes("id"),
|
|
actions: options.columns.includes("actions") && integrationsWithInteractions.length > 0,
|
|
added: options.columns.includes("added"),
|
|
category: options.columns.includes("category"),
|
|
downSpeed: options.columns.includes("downSpeed"),
|
|
index: options.columns.includes("index"),
|
|
integration: options.columns.includes("integration") && clients.length > 1,
|
|
name: options.columns.includes("name"),
|
|
progress: options.columns.includes("progress"),
|
|
ratio: options.columns.includes("ratio") && integrationTypes.includes("torrent"),
|
|
received: options.columns.includes("received"),
|
|
sent: options.columns.includes("sent") && integrationTypes.includes("torrent"),
|
|
size: options.columns.includes("size"),
|
|
state: options.columns.includes("state"),
|
|
time: options.columns.includes("time"),
|
|
type: options.columns.includes("type") && integrationTypes.length > 1,
|
|
upSpeed: options.columns.includes("upSpeed") && integrationTypes.includes("torrent"),
|
|
} satisfies Record<keyof ExtendedDownloadClientItem, boolean>;
|
|
|
|
//Default styling behavior for stopping interaction when editing. (Applied everywhere except the table header)
|
|
const editStyle: MantineStyleProp = {
|
|
pointerEvents: isEditMode ? "none" : undefined,
|
|
};
|
|
|
|
//Base element in common with all columns
|
|
const columnsDefBase = useCallback(
|
|
({
|
|
key,
|
|
showHeader,
|
|
}: {
|
|
key: keyof ExtendedDownloadClientItem;
|
|
showHeader: boolean;
|
|
}): MRT_ColumnDef<ExtendedDownloadClientItem> => {
|
|
return {
|
|
id: key,
|
|
accessorKey: key,
|
|
header: key,
|
|
size: columnsRatios[key],
|
|
Header: () =>
|
|
showHeader ? (
|
|
<Text fz="xs" fw={700}>
|
|
{t(`items.${key}.columnTitle`)}
|
|
</Text>
|
|
) : null,
|
|
};
|
|
},
|
|
[t],
|
|
);
|
|
|
|
//Make columns and cell elements, Memoized to data with deps on data and EditMode
|
|
const columns = useMemo<MRT_ColumnDef<ExtendedDownloadClientItem>[]>(
|
|
() => [
|
|
{
|
|
...columnsDefBase({ key: "actions", showHeader: false }),
|
|
enableSorting: false,
|
|
Cell: ({ cell, row }) => {
|
|
const actions = cell.getValue<ExtendedDownloadClientItem["actions"]>();
|
|
const pausedAction = row.original.state === "paused" ? "resume" : "pause";
|
|
const [opened, { open, close }] = useDisclosure(false);
|
|
|
|
return actions ? (
|
|
<Group wrap="nowrap" gap="xs">
|
|
<Tooltip label={t(`actions.item.${pausedAction}`)}>
|
|
<ActionIcon size="xs" variant="light" radius="100%" onClick={actions[pausedAction]}>
|
|
{pausedAction === "resume" ? <IconPlayerPlay /> : <IconPlayerPause />}
|
|
</ActionIcon>
|
|
</Tooltip>
|
|
<Tooltip label={t("actions.item.delete.title")}>
|
|
<ActionIcon size="xs" color="red" radius="100%" onClick={open}>
|
|
<IconTrash />
|
|
</ActionIcon>
|
|
</Tooltip>
|
|
<Modal opened={opened} onClose={close} title={t("actions.item.delete.modalTitle")} size="auto" centered>
|
|
<Group>
|
|
<Button
|
|
color="red"
|
|
onClick={() => {
|
|
close();
|
|
actions.delete({ fromDisk: false });
|
|
}}
|
|
>
|
|
{t("actions.item.delete.entry")}
|
|
</Button>
|
|
<Button
|
|
color="red"
|
|
onClick={() => {
|
|
close();
|
|
actions.delete({ fromDisk: true });
|
|
}}
|
|
leftSection={<IconAlertTriangle />}
|
|
>
|
|
{t("actions.item.delete.entryAndFiles")}
|
|
</Button>
|
|
<Button color="green" onClick={close}>
|
|
{tCommon("action.cancel")}
|
|
</Button>
|
|
</Group>
|
|
</Modal>
|
|
</Group>
|
|
) : (
|
|
<ActionIcon size="xs" radius="100%" disabled>
|
|
<IconX />
|
|
</ActionIcon>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
...columnsDefBase({ key: "added", showHeader: true }),
|
|
sortUndefined: "last",
|
|
Cell: ({ cell }) => {
|
|
const added = cell.getValue<ExtendedDownloadClientItem["added"]>();
|
|
return <Text size="xs">{added !== undefined ? dayjs(added).fromNow() : "unknown"}</Text>;
|
|
},
|
|
},
|
|
{
|
|
...columnsDefBase({ key: "category", showHeader: false }),
|
|
sortUndefined: "last",
|
|
Cell: ({ cell }) => {
|
|
const category = cell.getValue<ExtendedDownloadClientItem["category"]>();
|
|
return (
|
|
category !== undefined && (
|
|
<Tooltip label={category}>
|
|
<IconInfoCircle size={16} />
|
|
</Tooltip>
|
|
)
|
|
);
|
|
},
|
|
},
|
|
{
|
|
...columnsDefBase({ key: "downSpeed", showHeader: true }),
|
|
sortUndefined: "last",
|
|
Cell: ({ cell }) => {
|
|
const downSpeed = cell.getValue<ExtendedDownloadClientItem["downSpeed"]>();
|
|
return downSpeed ? <Text size="xs">{humanFileSize(downSpeed, "/s")}</Text> : null;
|
|
},
|
|
},
|
|
{
|
|
...columnsDefBase({ key: "id", showHeader: false }),
|
|
enableSorting: false,
|
|
Cell: ({ cell }) => {
|
|
const id = cell.getValue<ExtendedDownloadClientItem["id"]>();
|
|
return (
|
|
<Tooltip label={id}>
|
|
<IconCirclesRelation size={16} />
|
|
</Tooltip>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
...columnsDefBase({ key: "index", showHeader: true }),
|
|
Cell: ({ cell }) => {
|
|
const index = cell.getValue<ExtendedDownloadClientItem["index"]>();
|
|
return <Text size="xs">{index}</Text>;
|
|
},
|
|
},
|
|
{
|
|
...columnsDefBase({ key: "integration", showHeader: false }),
|
|
Cell: ({ cell }) => {
|
|
const integration = cell.getValue<ExtendedDownloadClientItem["integration"]>();
|
|
return (
|
|
<Tooltip label={integration.name}>
|
|
<Avatar size="xs" radius={0} src={getIconUrl(integration.kind)} />
|
|
</Tooltip>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
...columnsDefBase({ key: "name", showHeader: true }),
|
|
Cell: ({ cell }) => {
|
|
const name = cell.getValue<ExtendedDownloadClientItem["name"]>();
|
|
return (
|
|
<Text size="xs" lineClamp={1} style={{ wordBreak: "break-all" }}>
|
|
{name}
|
|
</Text>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
...columnsDefBase({ key: "progress", showHeader: true }),
|
|
Cell: ({ cell, row }) => {
|
|
const progress = cell.getValue<ExtendedDownloadClientItem["progress"]>();
|
|
return (
|
|
<Group align="center" gap="xs" wrap="nowrap" w="100%">
|
|
<Text size="xs">
|
|
{new Intl.NumberFormat("en", { style: "percent", notation: "compact", unitDisplay: "narrow" }).format(
|
|
progress,
|
|
)}
|
|
</Text>
|
|
<Progress
|
|
w="100%"
|
|
value={progress * 100}
|
|
color={row.original.state === "paused" ? "yellow" : progress === 1 ? "green" : "blue"}
|
|
radius="lg"
|
|
/>
|
|
</Group>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
...columnsDefBase({ key: "ratio", showHeader: true }),
|
|
sortUndefined: "last",
|
|
Cell: ({ cell }) => {
|
|
const ratio = cell.getValue<ExtendedDownloadClientItem["ratio"]>();
|
|
return ratio !== undefined && <Text size="xs">{ratio.toFixed(ratio >= 100 ? 0 : ratio >= 10 ? 1 : 2)}</Text>;
|
|
},
|
|
},
|
|
{
|
|
...columnsDefBase({ key: "received", showHeader: true }),
|
|
Cell: ({ cell }) => {
|
|
const received = cell.getValue<ExtendedDownloadClientItem["received"]>();
|
|
return <Text size="xs">{humanFileSize(received)}</Text>;
|
|
},
|
|
},
|
|
{
|
|
...columnsDefBase({ key: "sent", showHeader: true }),
|
|
sortUndefined: "last",
|
|
Cell: ({ cell }) => {
|
|
const sent = cell.getValue<ExtendedDownloadClientItem["sent"]>();
|
|
return sent && <Text size="xs">{humanFileSize(sent)}</Text>;
|
|
},
|
|
},
|
|
{
|
|
...columnsDefBase({ key: "size", showHeader: true }),
|
|
Cell: ({ cell }) => {
|
|
const size = cell.getValue<ExtendedDownloadClientItem["size"]>();
|
|
return <Text size="xs">{humanFileSize(size)}</Text>;
|
|
},
|
|
},
|
|
{
|
|
...columnsDefBase({ key: "state", showHeader: true }),
|
|
enableSorting: false,
|
|
Cell: ({ cell }) => {
|
|
const state = cell.getValue<ExtendedDownloadClientItem["state"]>();
|
|
return <Text size="xs">{t(`states.${state}`)}</Text>;
|
|
},
|
|
},
|
|
{
|
|
...columnsDefBase({ key: "time", showHeader: true }),
|
|
Cell: ({ cell }) => {
|
|
const time = cell.getValue<ExtendedDownloadClientItem["time"]>();
|
|
return time === 0 ? <IconInfinity size={16} /> : <Text size="xs">{dayjs().add(time).fromNow()}</Text>;
|
|
},
|
|
},
|
|
{
|
|
...columnsDefBase({ key: "type", showHeader: true }),
|
|
Cell: ({ cell }) => {
|
|
const type = cell.getValue<ExtendedDownloadClientItem["type"]>();
|
|
return <Text size="xs">{type}</Text>;
|
|
},
|
|
},
|
|
{
|
|
...columnsDefBase({ key: "upSpeed", showHeader: true }),
|
|
sortUndefined: "last",
|
|
Cell: ({ cell }) => {
|
|
const upSpeed = cell.getValue<ExtendedDownloadClientItem["upSpeed"]>();
|
|
return upSpeed && <Text size="xs">{humanFileSize(upSpeed, "/s")}</Text>;
|
|
},
|
|
},
|
|
],
|
|
[columnsDefBase, t, tCommon],
|
|
);
|
|
|
|
//Table build and config
|
|
const table = useMantineReactTable({
|
|
columns,
|
|
data,
|
|
enablePagination: false,
|
|
enableTopToolbar: false,
|
|
enableBottomToolbar: false,
|
|
enableColumnActions: false,
|
|
enableSorting: options.enableRowSorting && !isEditMode,
|
|
enableMultiSort: true,
|
|
enableStickyHeader: false,
|
|
enableColumnOrdering: isEditMode,
|
|
enableRowVirtualization: true,
|
|
rowVirtualizerOptions: { overscan: 5 },
|
|
mantinePaperProps: { flex: 1, withBorder: false, shadow: undefined },
|
|
mantineTableContainerProps: { style: { height: "100%" } },
|
|
mantineTableProps: {
|
|
className: "downloads-widget-table",
|
|
},
|
|
mantineTableBodyProps: { style: editStyle },
|
|
mantineTableHeadCellProps: {
|
|
p: 4,
|
|
},
|
|
mantineTableBodyCellProps: ({ cell, row }) => ({
|
|
onClick: () => {
|
|
setClickedIndex(row.index);
|
|
if (cell.column.id !== "actions") open();
|
|
},
|
|
p: 4,
|
|
}),
|
|
onColumnOrderChange: (order) => {
|
|
//Order has a tendency to add the disabled column at the end of the the real ordered array
|
|
const columnOrder = (order as typeof options.columns).filter((column) => options.columns.includes(column));
|
|
setOptions({ newOptions: { columns: columnOrder } });
|
|
},
|
|
initialState: {
|
|
sorting: [{ id: options.defaultSort, desc: options.descendingDefaultSort }],
|
|
columnVisibility: {
|
|
actions: false,
|
|
added: false,
|
|
category: false,
|
|
downSpeed: false,
|
|
id: false,
|
|
index: false,
|
|
integration: false,
|
|
name: false,
|
|
progress: false,
|
|
ratio: false,
|
|
received: false,
|
|
sent: false,
|
|
size: false,
|
|
state: false,
|
|
time: false,
|
|
type: false,
|
|
upSpeed: false,
|
|
} satisfies Record<keyof ExtendedDownloadClientItem, boolean>,
|
|
columnOrder: options.columns,
|
|
},
|
|
state: {
|
|
columnVisibility,
|
|
columnOrder: options.columns,
|
|
},
|
|
});
|
|
|
|
//Used for Global Torrent Ratio
|
|
const globalTraffic = clients
|
|
.filter(({ integration: { kind } }) =>
|
|
getIntegrationKindsByCategory("torrent").some((integrationKind) => integrationKind === kind),
|
|
)
|
|
.reduce(
|
|
({ up, down }, { status }) => ({
|
|
up: up + (status?.totalUp ?? 0),
|
|
down: down + (status?.totalDown ?? 0),
|
|
}),
|
|
{ up: 0, down: 0 },
|
|
);
|
|
|
|
if (options.columns.length === 0)
|
|
return (
|
|
<Center h="100%">
|
|
<Text>{t("errors.noColumns")}</Text>
|
|
</Center>
|
|
);
|
|
|
|
//The actual widget
|
|
return (
|
|
<Stack gap={0} h="100%" display="flex">
|
|
<MantineReactTable table={table} />
|
|
<Group
|
|
p={4}
|
|
justify={integrationTypes.includes("torrent") ? "space-between" : "end"}
|
|
style={{
|
|
borderTop: "0.0625rem solid var(--border-color)",
|
|
}}
|
|
>
|
|
{integrationTypes.includes("torrent") && (
|
|
<Group>
|
|
<Text size="xs" fw="bold">{`${t("globalRatio")}:`}</Text>
|
|
<Text size="xs">{(globalTraffic.up / globalTraffic.down).toFixed(2)}</Text>
|
|
</Group>
|
|
)}
|
|
<ClientsControl
|
|
clients={clients}
|
|
filters={quickFilters}
|
|
setFilters={setQuickFilters}
|
|
availableStatuses={availableStatuses}
|
|
/>
|
|
</Group>
|
|
<ItemInfoModal items={data} currentIndex={clickedIndex} opened={opened} onClose={close} />
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
interface ItemInfoModalProps {
|
|
items: ExtendedDownloadClientItem[];
|
|
currentIndex: number;
|
|
opened: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
const ItemInfoModal = ({ items, currentIndex, opened, onClose }: ItemInfoModalProps) => {
|
|
const item = useMemo<ExtendedDownloadClientItem | undefined>(() => items[currentIndex], [items, currentIndex]);
|
|
const t = useScopedI18n("widget.downloads.states");
|
|
//The use case for "No item found" should be impossible, hence no translation
|
|
return (
|
|
<Modal opened={opened} onClose={onClose} centered title={item?.id ?? "ERROR"} size="auto">
|
|
{item === undefined ? (
|
|
<Center>{"No item found"}</Center>
|
|
) : (
|
|
<Stack align="center">
|
|
<Title>{item.name}</Title>
|
|
<Group>
|
|
<Avatar src={getIconUrl(item.integration.kind)} />
|
|
<Text>{`${item.integration.name} (${item.integration.kind})`}</Text>
|
|
</Group>
|
|
<NormalizedLine itemKey="index" values={item.index} />
|
|
<NormalizedLine itemKey="type" values={item.type} />
|
|
<NormalizedLine itemKey="state" values={t(item.state)} />
|
|
{item.type !== "miscellaneous" && (
|
|
<NormalizedLine
|
|
itemKey="upSpeed"
|
|
values={item.upSpeed === undefined ? undefined : humanFileSize(item.upSpeed, "/s")}
|
|
/>
|
|
)}
|
|
|
|
<NormalizedLine
|
|
itemKey="downSpeed"
|
|
values={item.downSpeed === undefined ? undefined : humanFileSize(item.downSpeed, "/s")}
|
|
/>
|
|
|
|
{item.type !== "miscellaneous" && (
|
|
<NormalizedLine itemKey="sent" values={item.sent === undefined ? undefined : humanFileSize(item.sent)} />
|
|
)}
|
|
|
|
<NormalizedLine itemKey="received" values={humanFileSize(item.received)} />
|
|
<NormalizedLine itemKey="size" values={humanFileSize(item.size)} />
|
|
<NormalizedLine
|
|
itemKey="progress"
|
|
values={new Intl.NumberFormat("en", {
|
|
style: "percent",
|
|
notation: "compact",
|
|
unitDisplay: "narrow",
|
|
}).format(item.progress)}
|
|
/>
|
|
{item.type !== "miscellaneous" && <NormalizedLine itemKey="ratio" values={item.ratio} />}
|
|
<NormalizedLine itemKey="added" values={item.added === undefined ? "unknown" : dayjs(item.added).format()} />
|
|
<NormalizedLine itemKey="time" values={item.time !== 0 ? dayjs().add(item.time).format() : "∞"} />
|
|
<NormalizedLine itemKey="category" values={item.category} />
|
|
</Stack>
|
|
)}
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
const NormalizedLine = ({
|
|
itemKey,
|
|
values,
|
|
}: {
|
|
itemKey: Exclude<keyof ExtendedDownloadClientItem, "integration" | "actions" | "name" | "id">;
|
|
values?: number | string | string[];
|
|
}) => {
|
|
const t = useScopedI18n("widget.downloads.items");
|
|
if (typeof values !== "number" && (values === undefined || values.length === 0)) return null;
|
|
return (
|
|
<Group w="100%" display="flex" align="top" justify="space-between" wrap="nowrap">
|
|
<Text>{`${t(`${itemKey}.detailsTitle`)}:`}</Text>
|
|
{Array.isArray(values) ? (
|
|
<Stack>
|
|
{values.map((value) => (
|
|
<Text key={value}>{value}</Text>
|
|
))}
|
|
</Stack>
|
|
) : (
|
|
<Text>{values}</Text>
|
|
)}
|
|
</Group>
|
|
);
|
|
};
|
|
|
|
interface ClientsControlProps {
|
|
clients: ExtendedClientStatus[];
|
|
filters: QuickFilter;
|
|
setFilters: (filters: QuickFilter) => void;
|
|
availableStatuses: QuickFilter["statuses"];
|
|
}
|
|
|
|
const ClientsControl = ({ clients, filters, setFilters, availableStatuses }: ClientsControlProps) => {
|
|
const integrationsStatuses = clients.reduce(
|
|
(acc, { status, integration: { id }, interact }) =>
|
|
status && interact ? (acc[status.paused ? "paused" : "active"].push(id), acc) : acc,
|
|
{ paused: [] as string[], active: [] as string[] },
|
|
);
|
|
const someInteract = clients.some(({ interact }) => interact);
|
|
const totalSpeed = humanFileSize(
|
|
clients.reduce((count, { status }) => count + (status?.rates.down ?? 0), 0),
|
|
"/s",
|
|
);
|
|
|
|
const { mutate: mutateResumeQueue } = clientApi.widget.downloads.resume.useMutation();
|
|
const { mutate: mutatePauseQueue } = clientApi.widget.downloads.pause.useMutation();
|
|
const [opened, { open, close }] = useDisclosure(false);
|
|
const t = useScopedI18n("widget.downloads");
|
|
return (
|
|
<Group gap={5}>
|
|
<Popover withinPortal={false} offset={0}>
|
|
<Popover.Target>
|
|
<ActionIcon size="xs" radius="lg" variant="light">
|
|
<IconFilter />
|
|
</ActionIcon>
|
|
</Popover.Target>
|
|
<Popover.Dropdown>
|
|
<Stack gap="md" align="center">
|
|
<Text fw="700">{t("items.integration.columnTitle")}</Text>
|
|
<Chip.Group
|
|
multiple
|
|
value={filters.integrationKinds}
|
|
onChange={(names) => setFilters({ ...filters, integrationKinds: names })}
|
|
>
|
|
{clients.map(({ integration }) => (
|
|
<Chip key={integration.id} value={integration.name}>
|
|
{integration.name}
|
|
</Chip>
|
|
))}
|
|
</Chip.Group>
|
|
<Text fw="700">{t("items.state.columnTitle")}</Text>
|
|
<Chip.Group
|
|
multiple
|
|
value={filters.statuses}
|
|
onChange={(statuses) => setFilters({ ...filters, statuses: statuses as typeof filters.statuses })}
|
|
>
|
|
{availableStatuses.map((status) => (
|
|
<Chip key={status} value={status}>
|
|
{t(`states.${status}`)}
|
|
</Chip>
|
|
))}
|
|
</Chip.Group>
|
|
</Stack>
|
|
</Popover.Dropdown>
|
|
</Popover>
|
|
<AvatarGroup>
|
|
{clients.map((client) => (
|
|
<ClientAvatar key={client.integration.id} client={client} />
|
|
))}
|
|
</AvatarGroup>
|
|
{someInteract && (
|
|
<Tooltip label={t("actions.clients.resume")}>
|
|
<ActionIcon
|
|
size="xs"
|
|
radius="lg"
|
|
disabled={integrationsStatuses.paused.length === 0}
|
|
variant="light"
|
|
onClick={() => mutateResumeQueue({ integrationIds: integrationsStatuses.paused })}
|
|
>
|
|
<IconPlayerPlay />
|
|
</ActionIcon>
|
|
</Tooltip>
|
|
)}
|
|
<Button
|
|
h={20}
|
|
size="xs"
|
|
variant="light"
|
|
radius="lg"
|
|
fw="500"
|
|
onClick={open}
|
|
styles={{ label: { height: "fit-content" } }}
|
|
>
|
|
{totalSpeed}
|
|
</Button>
|
|
{someInteract && (
|
|
<Tooltip label={t("actions.clients.pause")}>
|
|
<ActionIcon
|
|
size="xs"
|
|
radius="xl"
|
|
disabled={integrationsStatuses.active.length === 0}
|
|
variant="light"
|
|
onClick={() => mutatePauseQueue({ integrationIds: integrationsStatuses.active })}
|
|
>
|
|
<IconPlayerPause />
|
|
</ActionIcon>
|
|
</Tooltip>
|
|
)}
|
|
<Modal opened={opened} onClose={close} title={t("actions.clients.modalTitle")} centered size="auto">
|
|
<Stack gap="10px">
|
|
{clients.map((client) => (
|
|
<Stack key={client.integration.id} gap="10px">
|
|
<Divider />
|
|
<Group wrap="nowrap" w="100%">
|
|
<Paper withBorder radius={999}>
|
|
<Group gap={5} pl={10} pr={15} fz={16} w={275} justify="space-between" wrap="nowrap">
|
|
<Avatar radius={0} src={getIconUrl(client.integration.kind)} />
|
|
{client.status ? (
|
|
<Tooltip disabled={client.status.ratio === undefined} label={client.status.ratio?.toFixed(2)}>
|
|
<Stack gap={0} pt={5} h={60} justify="center" flex={1}>
|
|
{client.status.rates.up !== undefined ? (
|
|
<Group display="flex" justify="center" c="green" w="100%" gap={5}>
|
|
<Text flex={1} ta="right">
|
|
{`↑ ${humanFileSize(client.status.rates.up, "/s")}`}
|
|
</Text>
|
|
<Text>{"-"}</Text>
|
|
<Text flex={1} ta="left">
|
|
{humanFileSize(client.status.totalUp ?? 0)}
|
|
</Text>
|
|
</Group>
|
|
) : undefined}
|
|
<Group display="flex" justify="center" c="blue" w="100%" gap={5}>
|
|
<Text flex={1} ta="right">
|
|
{`↓ ${humanFileSize(client.status.rates.down, "/s")}`}
|
|
</Text>
|
|
<Text>{"-"}</Text>
|
|
<Text flex={1} ta="left">
|
|
{humanFileSize(Math.floor(client.status.totalDown ?? 0))}
|
|
</Text>
|
|
</Group>
|
|
</Stack>
|
|
</Tooltip>
|
|
) : (
|
|
<Text c="red" ta="center">
|
|
{t("errors.noCommunications")}
|
|
</Text>
|
|
)}
|
|
</Group>
|
|
</Paper>
|
|
<Text lineClamp={1} fz={22}>
|
|
{client.integration.name}
|
|
</Text>
|
|
<Space flex={1} />
|
|
{client.status && client.interact ? (
|
|
<Tooltip label={t(`actions.client.${client.status.paused ? "resume" : "pause"}`)}>
|
|
<ActionIcon
|
|
radius={999}
|
|
variant="light"
|
|
size="lg"
|
|
onClick={() => {
|
|
(client.status?.paused ? mutateResumeQueue : mutatePauseQueue)({
|
|
integrationIds: [client.integration.id],
|
|
});
|
|
}}
|
|
>
|
|
{client.status.paused ? <IconPlayerPlay /> : <IconPlayerPause />}
|
|
</ActionIcon>
|
|
</Tooltip>
|
|
) : (
|
|
<ActionIcon radius={999} variant="light" size="lg" disabled>
|
|
<IconX />
|
|
</ActionIcon>
|
|
)}
|
|
</Group>
|
|
</Stack>
|
|
))}
|
|
</Stack>
|
|
</Modal>
|
|
</Group>
|
|
);
|
|
};
|
|
|
|
interface ClientAvatarProps {
|
|
client: ExtendedClientStatus;
|
|
}
|
|
|
|
const ClientAvatar = ({ client }: ClientAvatarProps) => {
|
|
const isConnected = useIntegrationConnected(client.integration.updatedAt, { timeout: 30000 });
|
|
|
|
return (
|
|
<Avatar
|
|
key={client.integration.id}
|
|
src={getIconUrl(client.integration.kind)}
|
|
style={{ filter: !isConnected ? "grayscale(100%)" : undefined }}
|
|
size="sm"
|
|
p={5}
|
|
/>
|
|
);
|
|
};
|