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

Allow widget field visibility to be configurable
pull/326/head
Ben Phelps 2 years ago committed by GitHub
commit 931ffe4c84
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -1,6 +1,9 @@
import { useTranslation } from "next-i18next";
import classNames from "classnames"; import classNames from "classnames";
export default function Block({ value, label }) { export default function Block({ value, label }) {
const { t } = useTranslation();
return ( return (
<div <div
className={classNames( 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-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> </div>
); );
} }

@ -1,4 +1,4 @@
export default function Container({ error = false, children }) { export default function Container({ error = false, children, service }) {
if (error) { if (error) {
return ( 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"> <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>;
} }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Loading…
Cancel
Save