0ct0pu5/homepage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #309 from JazzFisch/configurable-widget-fields

Browse source 
Allow widget field visibility to be configurable
This commit is contained in:
Ben Phelps 2022-09-30 21:51:34 +03:00 • committed by GitHub
commit 931ffe4c84
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
30 changed files with 242 additions and 219 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/services/widget/block.jsx
View file

@ -1,6 +1,9 @@
import { useTranslation } from "next-i18next";
import classNames from "classnames";
export default function Block({ value, label }) {
const { t } = useTranslation();
return (
<div
className={classNames(
@ -9,7 +12,7 @@ export default function Block({ value, label }) {
)}
>
<div className="font-thin text-sm">{value === undefined || value === null ? "-" : value}</div>
<div className="font-bold text-xs uppercase">{label}</div>
<div className="font-bold text-xs uppercase">{t(label)}</div>
</div>
);
}

11
src/components/services/widget/container.jsx
View file

@ -1,4 +1,4 @@
export default function Container({ error = false, children }) {
export default function Container({ error = false, children, service }) {
if (error) {
return (
<div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1">
@ -7,5 +7,12 @@ export default function Container({ error = false, children }) {
);
}
return <div className="relative flex flex-row w-full">{children}</div>;
let visibleChildren = children;
const fields = service?.widget?.fields;
const type = service?.widget?.type;
if (fields && type) {
visibleChildren = children.filter(child => fields.some(field => `${type}.${field}` === child.props?.label));
}
return <div className="relative flex flex-row w-full">{visibleChildren}</div>;
}

2
src/utils/config/service-helpers.js
View file

@ -113,6 +113,7 @@ export function cleanServiceGroups(groups) {
// whitelisted set of keys to pass to the frontend
const {
type, // all widgets
fields,
server, // docker widget
container,
currency, // coinmarketcap widget
@ -121,6 +122,7 @@ export function cleanServiceGroups(groups) {
cleanedService.widget = {
type,
fields: fields || null,
service_name: service.name,
service_group: serviceGroup.name,
};

20
src/widgets/adguard/component.jsx
View file

@ -17,11 +17,11 @@ export default function Component({ service }) {
if (!adguardData) {
return (
<Container>
<Block label={t("adguard.queries")} />
<Block label={t("adguard.blocked")} />
<Block label={t("adguard.filtered")} />
<Block label={t("adguard.latency")} />
<Container service={service}>
<Block label="adguard.queries" />
<Block label="adguard.blocked" />
<Block label="adguard.filtered" />
<Block label="adguard.latency" />
</Container>
);
}
@ -30,12 +30,12 @@ export default function Component({ service }) {
adguardData.num_replaced_safebrowsing + adguardData.num_replaced_safesearch + adguardData.num_replaced_parental;
return (
<Container>
<Block label={t("adguard.queries")} value={t("common.number", { value: adguardData.num_dns_queries })} />
<Block label={t("adguard.blocked")} value={t("common.number", { value: adguardData.num_blocked_filtering })} />
<Block label={t("adguard.filtered")} value={t("common.number", { value: filtered })} />
<Container service={service}>
<Block label="adguard.queries" value={t("common.number", { value: adguardData.num_dns_queries })} />
<Block label="adguard.blocked" value={t("common.number", { value: adguardData.num_blocked_filtering })} />
<Block label="adguard.filtered" value={t("common.number", { value: filtered })} />
<Block
label={t("adguard.latency")}
label="adguard.latency"
value={t("common.ms", { value: adguardData.avg_processing_time * 1000, style: "unit", unit: "millisecond" })}
/>
</Container>

16
src/widgets/authentik/component.jsx
View file

@ -19,10 +19,10 @@ export default function Component({ service }) {
if (!usersData || !loginsData || !failedLoginsData) {
return (
<Container>
<Block label={t("authentik.users")} />
<Block label={t("authentik.loginsLast24H")} />
<Block label={t("authentik.failedLoginsLast24H")} />
<Container service={service}>
<Block label="authentik.users" />
<Block label="authentik.loginsLast24H" />
<Block label="authentik.failedLoginsLast24H" />
</Container>
);
}
@ -38,10 +38,10 @@ export default function Component({ service }) {
);
return (
<Container>
<Block label={t("authentik.users")} value={t("common.number", { value: usersData.pagination.count })} />
<Block label={t("authentik.loginsLast24H")} value={t("common.number", { value: loginsLast24H })} />
<Block label={t("authentik.failedLoginsLast24H")} value={t("common.number", { value: failedLoginsLast24H })} />
<Container service={service}>
<Block label="authentik.users" value={t("common.number", { value: usersData.pagination.count })} />
<Block label="authentik.loginsLast24H" value={t("common.number", { value: loginsLast24H })} />
<Block label="authentik.failedLoginsLast24H" value={t("common.number", { value: failedLoginsLast24H })} />
</Container>
);
}

14
src/widgets/bazarr/component.jsx
View file

@ -13,22 +13,22 @@ export default function Component({ service }) {
const { data: moviesData, error: moviesError } = useWidgetAPI(widget, "movies");
if (episodesError || moviesError) {
return <Container error={t("widget.api_error")} />;
return <Container error="widget.api_error" />;
}
if (!episodesData || !moviesData) {
return (
<Container>
<Block label={t("bazarr.missingEpisodes")} />
<Block label={t("bazarr.missingMovies")} />
<Container service={service}>
<Block label="bazarr.missingEpisodes" />
<Block label="bazarr.missingMovies" />
</Container>
);
}
return (
<Container>
<Block label={t("bazarr.missingEpisodes")} value={t("common.number", { value: episodesData.total })} />
<Block label={t("bazarr.missingMovies")} value={t("common.number", { value: moviesData.total })} />
<Container service={service}>
<Block label="bazarr.missingEpisodes" value={t("common.number", { value: episodesData.total })} />
<Block label="bazarr.missingMovies" value={t("common.number", { value: moviesData.total })} />
</Container>
);
}

6
src/widgets/coinmarketcap/component.jsx
View file

@ -30,7 +30,7 @@ export default function Component({ service }) {
if (!symbols || symbols.length === 0) {
return (
<Container>
<Container service={service}>
<Block value={t("coinmarketcap.configure")} />
</Container>
);
@ -42,7 +42,7 @@ export default function Component({ service }) {
if (!statsData || !dateRange) {
return (
<Container>
<Container service={service}>
<Block value={t("coinmarketcap.configure")} />
</Container>
);
@ -51,7 +51,7 @@ export default function Component({ service }) {
const { data } = statsData;
return (
<Container>
<Container service={service}>
<div className={classNames(service.description ? "-top-10" : "-top-8", "absolute right-1")}>
<Dropdown options={dateRangeOptions} value={dateRange} setValue={setDateRange} />
</div>

20
src/widgets/docker/component.jsx
View file

@ -31,23 +31,23 @@ export default function Component({ service }) {
if (!statsData || !statusData) {
return (
<Container>
<Block label={t("docker.cpu")} />
<Block label={t("docker.mem")} />
<Block label={t("docker.rx")} />
<Block label={t("docker.tx")} />
<Container service={service}>
<Block label="docker.cpu" />
<Block label="docker.mem" />
<Block label="docker.rx" />
<Block label="docker.tx" />
</Container>
);
}
return (
<Container>
<Block label={t("docker.cpu")} value={t("common.percent", { value: calculateCPUPercent(statsData.stats) })} />
<Block label={t("docker.mem")} value={t("common.bytes", { value: statsData.stats.memory_stats.usage })} />
<Container service={service}>
<Block label="docker.cpu" value={t("common.percent", { value: calculateCPUPercent(statsData.stats) })} />
<Block label="docker.mem" value={t("common.bytes", { value: statsData.stats.memory_stats.usage })} />
{statsData.stats.networks && (
<>
<Block label={t("docker.rx")} value={t("common.bytes", { value: statsData.stats.networks.eth0.rx_bytes })} />
<Block label={t("docker.tx")} value={t("common.bytes", { value: statsData.stats.networks.eth0.tx_bytes })} />
<Block label="docker.rx" value={t("common.bytes", { value: statsData.stats.networks.eth0.rx_bytes })} />
<Block label="docker.tx" value={t("common.bytes", { value: statsData.stats.networks.eth0.tx_bytes })} />
</>
)}
</Container>

19
src/widgets/gotify/component.jsx
View file

@ -17,11 +17,22 @@ export default function Component({ service }) {
return <Container error={t("widget.api_error")} />;
}
if (!appsData || !messagesData || !clientsData) {
return (
<Container service={service}>
<Block label="gotify.apps" />
<Block label="gotify.clients" />
<Block label="gotify.messages" />
</Container>
);
}
return (
<Container>
<Block label={t("gotify.apps")} value={appsData?.length} />
<Block label={t("gotify.clients")} value={clientsData?.length} />
<Block label={t("gotify.messages")} value={messagesData?.messages?.length} />
<Container service={service}>
<Block label="gotify.apps" value={appsData?.length} />
<Block label="gotify.clients" value={clientsData?.length} />
<Block label="gotify.messages" value={messagesData?.messages?.length} />
</Container>
);
}

12
src/widgets/jackett/component.jsx
View file

@ -17,9 +17,9 @@ export default function Component({ service }) {
if (!indexersData) {
return (
<Container>
<Block label={t("jackett.configured")} />
<Block label={t("jackett.errored")} />
<Container service={service}>
<Block label="jackett.configured" />
<Block label="jackett.errored" />
</Container>
);
}
@ -27,9 +27,9 @@ export default function Component({ service }) {
const errored = indexersData.filter((indexer) => indexer.last_error);
return (
<Container>
<Block label={t("jackett.configured")} value={t("common.number", { value: indexersData.length })} />
<Block label={t("jackett.errored")} value={t("common.number", { value: errored.length })} />
<Container service={service}>
<Block label="jackett.configured" value={t("common.number", { value: indexersData.length })} />
<Block label="jackett.errored" value={t("common.number", { value: errored.length })} />
</Container>
);
}

16
src/widgets/jellyseerr/component.jsx
View file

@ -17,19 +17,19 @@ export default function Component({ service }) {
if (!statsData) {
return (
<Container>
<Block label={t("jellyseerr.pending")} />
<Block label={t("jellyseerr.approved")} />
<Block label={t("jellyseerr.available")} />
<Container service={service}>
<Block label="jellyseerr.pending" />
<Block label="jellyseerr.approved" />
<Block label="jellyseerr.available" />
</Container>
);
}
return (
<Container>
<Block label={t("jellyseerr.pending")} value={statsData.pending} />
<Block label={t("jellyseerr.approved")} value={statsData.approved} />
<Block label={t("jellyseerr.available")} value={statsData.available} />
<Container service={service}>
<Block label="jellyseerr.pending" value={statsData.pending} />
<Block label="jellyseerr.approved" value={statsData.approved} />
<Block label="jellyseerr.available" value={statsData.available} />
</Container>
);
}

16
src/widgets/lidarr/component.jsx
View file

@ -19,19 +19,19 @@ export default function Component({ service }) {
if (!albumsData || !wantedData || !queueData) {
return (
<Container>
<Block label={t("lidarr.wanted")} />
<Block label={t("lidarr.queued")} />
<Block label={t("lidarr.albums")} />
<Container service={service}>
<Block label="lidarr.wanted" />
<Block label="lidarr.queued" />
<Block label="lidarr.albums" />
</Container>
);
}
return (
<Container>
<Block label={t("lidarr.wanted")} value={t("common.number", { value: wantedData.totalRecords })} />
<Block label={t("lidarr.queued")} value={t("common.number", { value: queueData.totalCount })} />
<Block label={t("lidarr.albums")} value={t("common.number", { value: albumsData.have })} />
<Container service={service}>
<Block label="lidarr.wanted" value={t("common.number", { value: wantedData.totalRecords })} />
<Block label="lidarr.queued" value={t("common.number", { value: queueData.totalCount })} />
<Block label="lidarr.albums" value={t("common.number", { value: albumsData.have })} />
</Container>
);
}

16
src/widgets/mastodon/component.jsx
View file

@ -17,19 +17,19 @@ export default function Component({ service }) {
if (!statsData) {
return (
<Container>
<Block label={t("mastodon.user_count")} />
<Block label={t("mastodon.status_count")} />
<Block label={t("mastodon.domain_count")} />
<Container service={service}>
<Block label="mastodon.user_count" />
<Block label="mastodon.status_count" />
<Block label="mastodon.domain_count" />
</Container>
);
}
return (
<Container>
<Block label={t("mastodon.user_count")} value={t("common.number", { value: statsData.stats.user_count })} />
<Block label={t("mastodon.status_count")} value={t("common.number", { value: statsData.stats.status_count })} />
<Block label={t("mastodon.domain_count")} value={t("common.number", { value: statsData.stats.domain_count })} />
<Container service={service}>
<Block label="mastodon.user_count" value={t("common.number", { value: statsData.stats.user_count })} />
<Block label="mastodon.status_count" value={t("common.number", { value: statsData.stats.status_count })} />
<Block label="mastodon.domain_count" value={t("common.number", { value: statsData.stats.domain_count })} />
</Container>
);
}

16
src/widgets/npm/component.jsx
View file

@ -17,10 +17,10 @@ export default function Component({ service }) {
if (!infoData) {
return (
<Container>
<Block label={t("npm.enabled")} />
<Block label={t("npm.disabled")} />
<Block label={t("npm.total")} />
<Container service={service}>
<Block label="npm.enabled" />
<Block label="npm.disabled" />
<Block label="npm.total" />
</Container>
);
}
@ -30,10 +30,10 @@ export default function Component({ service }) {
const total = infoData.length;
return (
<Container>
<Block label={t("npm.enabled")} value={enabled} />
<Block label={t("npm.disabled")} value={disabled} />
<Block label={t("npm.total")} value={total} />
<Container service={service}>
<Block label="npm.enabled" value={enabled} />
<Block label="npm.disabled" value={disabled} />
<Block label="npm.total" value={total} />
</Container>
);
}

16
src/widgets/nzbget/component.jsx
View file

@ -17,23 +17,23 @@ export default function Component({ service }) {
if (!statusData) {
return (
<Container>
<Block label={t("nzbget.rate")} />
<Block label={t("nzbget.remaining")} />
<Block label={t("nzbget.downloaded")} />
<Container service={service}>
<Block label="nzbget.rate" />
<Block label="nzbget.remaining" />
<Block label="nzbget.downloaded" />
</Container>
);
}
return (
<Container>
<Block label={t("nzbget.rate")} value={t("common.bitrate", { value: statusData.DownloadRate })} />
<Container service={service}>
<Block label="nzbget.rate" value={t("common.bitrate", { value: statusData.DownloadRate })} />
<Block
label={t("nzbget.remaining")}
label="nzbget.remaining"
value={t("common.bytes", { value: statusData.RemainingSizeMB * 1024 * 1024 })}
/>
<Block
label={t("nzbget.downloaded")}
label="nzbget.downloaded"
value={t("common.bytes", { value: statusData.DownloadedSizeMB * 1024 * 1024 })}
/>
</Container>

16
src/widgets/ombi/component.jsx
View file

@ -17,19 +17,19 @@ export default function Component({ service }) {
if (!statsData) {
return (
<Container>
<Block label={t("ombi.pending")} />
<Block label={t("ombi.approved")} />
<Block label={t("ombi.available")} />
<Container service={service}>
<Block label="ombi.pending" />
<Block label="ombi.approved" />
<Block label="ombi.available" />
</Container>
);
}
return (
<Container>
<Block label={t("ombi.pending")} value={statsData.pending} />
<Block label={t("ombi.approved")} value={statsData.approved} />
<Block label={t("ombi.available")} value={statsData.available} />
<Container service={service}>
<Block label="ombi.pending" value={statsData.pending} />
<Block label="ombi.approved" value={statsData.approved} />
<Block label="ombi.available" value={statsData.available} />
</Container>
);
}

16
src/widgets/overseerr/component.jsx
View file

@ -17,19 +17,19 @@ export default function Component({ service }) {
if (!statsData) {
return (
<Container>
<Block label={t("overseerr.pending")} />
<Block label={t("overseerr.approved")} />
<Block label={t("overseerr.available")} />
<Container service={service}>
<Block label="overseerr.pending" />
<Block label="overseerr.approved" />
<Block label="overseerr.available" />
</Container>
);
}
return (
<Container>
<Block label={t("overseerr.pending")} value={statsData.pending} />
<Block label={t("overseerr.approved")} value={statsData.approved} />
<Block label={t("overseerr.available")} value={statsData.available} />
<Container service={service}>
<Block label="overseerr.pending" value={statsData.pending} />
<Block label="overseerr.approved" value={statsData.approved} />
<Block label="overseerr.available" value={statsData.available} />
</Container>
);
}

16
src/widgets/pihole/component.jsx
View file

@ -17,19 +17,19 @@ export default function Component({ service }) {
if (!piholeData) {
return (
<Container>
<Block label={t("pihole.queries")} />
<Block label={t("pihole.blocked")} />
<Block label={t("pihole.gravity")} />
<Container service={service}>
<Block label="pihole.queries" />
<Block label="pihole.blocked" />
<Block label="pihole.gravity" />
</Container>
);
}
return (
<Container>
<Block label={t("pihole.queries")} value={t("common.number", { value: piholeData.dns_queries_today })} />
<Block label={t("pihole.blocked")} value={t("common.number", { value: piholeData.ads_blocked_today })} />
<Block label={t("pihole.gravity")} value={t("common.number", { value: piholeData.domains_being_blocked })} />
<Container service={service}>
<Block label="pihole.queries" value={t("common.number", { value: piholeData.dns_queries_today })} />
<Block label="pihole.blocked" value={t("common.number", { value: piholeData.ads_blocked_today })} />
<Block label="pihole.gravity" value={t("common.number", { value: piholeData.domains_being_blocked })} />
</Container>
);
}

16
src/widgets/portainer/component.jsx
View file

@ -19,10 +19,10 @@ export default function Component({ service }) {
if (!containersData) {
return (
<Container>
<Block label={t("portainer.running")} />
<Block label={t("portainer.stopped")} />
<Block label={t("portainer.total")} />
<Container service={service}>
<Block label="portainer.running" />
<Block label="portainer.stopped" />
<Block label="portainer.total" />
</Container>
);
}
@ -36,10 +36,10 @@ export default function Component({ service }) {
const total = containersData.length;
return (
<Container>
<Block label={t("portainer.running")} value={running} />
<Block label={t("portainer.stopped")} value={stopped} />
<Block label={t("portainer.total")} value={total} />
<Container service={service}>
<Block label="portainer.running" value={running} />
<Block label="portainer.stopped" value={stopped} />
<Block label="portainer.total" value={total} />
</Container>
);
}

24
src/widgets/prowlarr/component.jsx
View file

@ -18,12 +18,12 @@ export default function Component({ service }) {
if (!indexersData || !grabsData) {
return (
<Container>
<Block label={t("prowlarr.enableIndexers")} />
<Block label={t("prowlarr.numberOfGrabs")} />
<Block label={t("prowlarr.numberOfQueries")} />
<Block label={t("prowlarr.numberOfFailGrabs")} />
<Block label={t("prowlarr.numberOfFailQueries")} />
<Container service={service}>
<Block label="prowlarr.enableIndexers" />
<Block label="prowlarr.numberOfGrabs" />
<Block label="prowlarr.numberOfQueries" />
<Block label="prowlarr.numberOfFailGrabs" />
<Block label="prowlarr.numberOfFailQueries" />
</Container>
);
}
@ -42,12 +42,12 @@ export default function Component({ service }) {
});
return (
<Container>
<Block label={t("prowlarr.enableIndexers")} value={indexers.length} />
<Block label={t("prowlarr.numberOfGrabs")} value={numberOfGrabs} />
<Block label={t("prowlarr.numberOfQueries")} value={numberOfQueries} />
<Block label={t("prowlarr.numberOfFailGrabs")} value={numberOfFailedGrabs} />
<Block label={t("prowlarr.numberOfFailQueries")} value={numberOfFailedQueries} />
<Container service={service}>
<Block label="prowlarr.enableIndexers" value={indexers.length} />
<Block label="prowlarr.numberOfGrabs" value={numberOfGrabs} />
<Block label="prowlarr.numberOfQueries" value={numberOfQueries} />
<Block label="prowlarr.numberOfFailGrabs" value={numberOfFailedGrabs} />
<Block label="prowlarr.numberOfFailQueries" value={numberOfFailedQueries} />
</Container>
);
}

20
src/widgets/qbittorrent/component.jsx
View file

@ -17,11 +17,11 @@ export default function Component({ service }) {
if (!torrentData) {
return (
<Container>
<Block label={t("qbittorrent.leech")} />
<Block label={t("qbittorrent.download")} />
<Block label={t("qbittorrent.seed")} />
<Block label={t("qbittorrent.upload")} />
<Container service={service}>
<Block label="qbittorrent.leech" />
<Block label="qbittorrent.download" />
<Block label="qbittorrent.seed" />
<Block label="qbittorrent.upload" />
</Container>
);
}
@ -42,11 +42,11 @@ export default function Component({ service }) {
const leech = torrentData.length - completed;
return (
<Container>
<Block label={t("qbittorrent.leech")} value={t("common.number", { value: leech })} />
<Block label={t("qbittorrent.download")} value={t("common.bitrate", { value: rateDl })} />
<Block label={t("qbittorrent.seed")} value={t("common.number", { value: completed })} />
<Block label={t("qbittorrent.upload")} value={t("common.bitrate", { value: rateUl })} />
<Container service={service}>
<Block label="qbittorrent.leech" value={t("common.number", { value: leech })} />
<Block label="qbittorrent.download" value={t("common.bitrate", { value: rateDl })} />
<Block label="qbittorrent.seed" value={t("common.number", { value: completed })} />
<Block label="qbittorrent.upload" value={t("common.bitrate", { value: rateUl })} />
</Container>
);
}

16
src/widgets/radarr/component.jsx
View file

@ -18,19 +18,19 @@ export default function Component({ service }) {
if (!moviesData || !queuedData) {
return (
<Container>
<Block label={t("radarr.wanted")} />
<Block label={t("radarr.queued")} />
<Block label={t("radarr.movies")} />
<Container service={service}>
<Block label="radarr.wanted" />
<Block label="radarr.queued" />
<Block label="radarr.movies" />
</Container>
);
}
return (
<Container>
<Block label={t("radarr.wanted")} value={moviesData.wanted} />
<Block label={t("radarr.queued")} value={queuedData.totalCount} />
<Block label={t("radarr.movies")} value={moviesData.have} />
<Container service={service}>
<Block label="radarr.wanted" value={moviesData.wanted} />
<Block label="radarr.queued" value={queuedData.totalCount} />
<Block label="radarr.movies" value={moviesData.have} />
</Container>
);
}

16
src/widgets/readarr/component.jsx
View file

@ -19,19 +19,19 @@ export default function Component({ service }) {
if (!booksData || !wantedData || !queueData) {
return (
<Container>
<Block label={t("readarr.wanted")} />
<Block label={t("readarr.queued")} />
<Block label={t("readarr.books")} />
<Container service={service}>
<Block label="readarr.wanted" />
<Block label="readarr.queued" />
<Block label="readarr.books" />
</Container>
);
}
return (
<Container>
<Block label={t("readarr.wanted")} value={t("common.number", { value: wantedData.totalRecords })} />
<Block label={t("readarr.queued")} value={t("common.number", { value: queueData.totalCount })} />
<Block label={t("readarr.books")} value={t("common.number", { value: booksData.have })} />
<Container service={service}>
<Block label="readarr.wanted" value={t("common.number", { value: wantedData.totalRecords })} />
<Block label="readarr.queued" value={t("common.number", { value: queueData.totalCount })} />
<Block label="readarr.books" value={t("common.number", { value: booksData.have })} />
</Container>
);
}

16
src/widgets/rutorrent/component.jsx
View file

@ -17,10 +17,10 @@ export default function Component({ service }) {
if (!statusData) {
return (
<Container>
<Block label={t("rutorrent.active")} />
<Block label={t("rutorrent.upload")} />
<Block label={t("rutorrent.download")} />
<Container service={service}>
<Block label="rutorrent.active" />
<Block label="rutorrent.upload" />
<Block label="rutorrent.download" />
</Container>
);
}
@ -32,10 +32,10 @@ export default function Component({ service }) {
const active = statusData.filter((torrent) => torrent["d.get_state"] === "1");
return (
<Container>
<Block label={t("rutorrent.active")} value={active.length} />
<Block label={t("rutorrent.upload")} value={t("common.bitrate", { value: upload })} />
<Block label={t("rutorrent.download")} value={t("common.bitrate", { value: download })} />
<Container service={service}>
<Block label="rutorrent.active" value={active.length} />
<Block label="rutorrent.upload" value={t("common.bitrate", { value: upload })} />
<Block label="rutorrent.download" value={t("common.bitrate", { value: download })} />
</Container>
);
}

16
src/widgets/sabnzbd/component.jsx
View file

@ -27,19 +27,19 @@ export default function Component({ service }) {
if (!queueData) {
return (
<Container>
<Block label={t("sabnzbd.rate")} />
<Block label={t("sabnzbd.queue")} />
<Block label={t("sabnzbd.timeleft")} />
<Container service={service}>
<Block label="sabnzbd.rate" />
<Block label="sabnzbd.queue" />
<Block label="sabnzbd.timeleft" />
</Container>
);
}
return (
<Container>
<Block label={t("sabnzbd.rate")} value={t("common.bitrate", { value: fromUnits(queueData.queue.speed) * 8 })} />
<Block label={t("sabnzbd.queue")} value={t("common.number", { value: queueData.queue.noofslots })} />
<Block label={t("sabnzbd.timeleft")} value={queueData.queue.timeleft} />
<Container service={service}>
<Block label="sabnzbd.rate" value={t("common.bitrate", { value: fromUnits(queueData.queue.speed) * 8 })} />
<Block label="sabnzbd.queue" value={t("common.number", { value: queueData.queue.noofslots })} />
<Block label="sabnzbd.timeleft" value={queueData.queue.timeleft} />
</Container>
);
}

16
src/widgets/sonarr/component.jsx
View file

@ -19,19 +19,19 @@ export default function Component({ service }) {
if (!wantedData || !queuedData || !seriesData) {
return (
<Container>
<Block label={t("sonarr.wanted")} />
<Block label={t("sonarr.queued")} />
<Block label={t("sonarr.series")} />
<Container service={service}>
<Block label="sonarr.wanted" />
<Block label="sonarr.queued" />
<Block label="sonarr.series" />
</Container>
);
}
return (
<Container>
<Block label={t("sonarr.wanted")} value={wantedData.totalRecords} />
<Block label={t("sonarr.queued")} value={queuedData.totalRecords} />
<Block label={t("sonarr.series")} value={seriesData.total} />
<Container service={service}>
<Block label="sonarr.wanted" value={wantedData.totalRecords} />
<Block label="sonarr.queued" value={queuedData.totalRecords} />
<Block label="sonarr.series" value={seriesData.total} />
</Container>
);
}

16
src/widgets/speedtest/component.jsx
View file

@ -17,26 +17,26 @@ export default function Component({ service }) {
if (!speedtestData) {
return (
<Container>
<Block label={t("speedtest.download")} />
<Block label={t("speedtest.upload")} />
<Block label={t("speedtest.ping")} />
<Container service={service}>
<Block label="speedtest.download" />
<Block label="speedtest.upload" />
<Block label="speedtest.ping" />
</Container>
);
}
return (
<Container>
<Container service={service}>
<Block
label={t("speedtest.download")}
label="speedtest.download"
value={t("common.bitrate", { value: speedtestData.data.download * 1024 * 1024 })}
/>
<Block
label={t("speedtest.upload")}
label="speedtest.upload"
value={t("common.bitrate", { value: speedtestData.data.upload * 1024 * 1024 })}
/>
<Block
label={t("speedtest.ping")}
label="speedtest.ping"
value={t("common.ms", {
value: speedtestData.data.ping,
style: "unit",

16
src/widgets/strelaysrv/component.jsx
View file

@ -17,24 +17,24 @@ export default function Component({ service }) {
if (!statsData) {
return (
<Container>
<Block label={t("strelaysrv.numActiveSessions")} />
<Block label={t("strelaysrv.numConnections")} />
<Block label={t("strelaysrv.bytesProxied")} />
<Container service={service}>
<Block label="strelaysrv.numActiveSessions" />
<Block label="strelaysrv.numConnections" />
<Block label="strelaysrv.bytesProxied" />
</Container>
);
}
return (
<Container>
<Container service={service}>
<Block
label={t("strelaysrv.numActiveSessions")}
label="strelaysrv.numActiveSessions"
value={t("common.number", { value: statsData.numActiveSessions })}
/>
<Block label={t("strelaysrv.numConnections")} value={t("common.number", { value: statsData.numConnections })} />
<Block label="strelaysrv.numConnections" value={t("common.number", { value: statsData.numConnections })} />
<Block label={t("strelaysrv.dataRelayed")} value={t("common.bytes", { value: statsData.bytesProxied })} />
<Block
label={t("strelaysrv.transferRate")}
label="strelaysrv.transferRate"
value={t("common.bitrate", { value: statsData.kbps10s1m5m15m30m60m[5] })}
/>
</Container>

16
src/widgets/traefik/component.jsx
View file

@ -17,19 +17,19 @@ export default function Component({ service }) {
if (!traefikData) {
return (
<Container>
<Block label={t("traefik.routers")} />
<Block label={t("traefik.services")} />
<Block label={t("traefik.middleware")} />
<Container service={service}>
<Block label="traefik.routers" />
<Block label="traefik.services" />
<Block label="traefik.middleware" />
</Container>
);
}
return (
<Container>
<Block label={t("traefik.routers")} value={traefikData.http.routers.total} />
<Block label={t("traefik.services")} value={traefikData.http.services.total} />
<Block label={t("traefik.middleware")} value={traefikData.http.middlewares.total} />
<Container service={service}>
<Block label="traefik.routers" value={traefikData.http.routers.total} />
<Block label="traefik.services" value={traefikData.http.services.total} />
<Block label="traefik.middleware" value={traefikData.http.middlewares.total} />
</Container>
);
}

20
src/widgets/transmission/component.jsx
View file

@ -17,11 +17,11 @@ export default function Component({ service }) {
if (!torrentData) {
return (
<Container>
<Block label={t("transmission.leech")} />
<Block label={t("transmission.download")} />
<Block label={t("transmission.seed")} />
<Block label={t("transmission.upload")} />
<Container service={service}>
<Block label="transmission.leech" />
<Block label="transmission.download" />
<Block label="transmission.seed" />
<Block label="transmission.upload" />
</Container>
);
}
@ -34,11 +34,11 @@ export default function Component({ service }) {
const leech = torrents.length - completed || 0;
return (
<Container>
<Block label={t("transmission.leech")} value={t("common.number", { value: leech })} />
<Block label={t("transmission.download")} value={t("common.bitrate", { value: rateDl * 8 })} />
<Block label={t("transmission.seed")} value={t("common.number", { value: completed })} />
<Block label={t("transmission.upload")} value={t("common.bitrate", { value: rateUl * 8 })} />
<Container service={service}>
<Block label="transmission.leech" value={t("common.number", { value: leech })} />
<Block label="transmission.download" value={t("common.bitrate", { value: rateDl * 8 })} />
<Block label="transmission.seed" value={t("common.number", { value: completed })} />
<Block label="transmission.upload" value={t("common.bitrate", { value: rateUl * 8 })} />
</Container>
);
}