-
}
- label={t("summary.routers")}
- value={totalRouters}
- />
-
}
- label={t("summary.entryPoints")}
- value={dedupe(combined.entryPoints).length}
- />
+ const summary = (
+
+
+
+ {data.length === 1 ? data[0]?.integrationName : t("instances")}
+ {combined.version ? `v${combined.version}` : t("versionUnknown")}
+
+
-
- {protocolKeys.map((protocol) => (
-
- ))}
-
-
- {options.showEntryPoints && combined.entryPoints.length > 0 && (
-
- {dedupe(combined.entryPoints)
- .slice(0, getEntryPointLimit(width))
- .map((entryPoint) => (
-
- {entryPoint}
-
- ))}
-
- )}
+
+ }
+ label={t("summary.routers")}
+ value={totalRouters}
+ />
+ }
+ label={t("summary.entryPoints")}
+ value={dedupe(combined.entryPoints).length}
+ />
-
+
+
+ {protocolKeys.map((protocol) => (
+
+ ))}
+
+
+ {options.showEntryPoints && combined.entryPoints.length > 0 && (
+
+ {dedupe(combined.entryPoints)
+ .slice(0, getEntryPointLimit(width))
+ .map((entryPoint) => (
+
+ {entryPoint}
+
+ ))}
+
+ )}
+
+ );
+
+ if (displayMode === "compact") return
{summary};
+
+ const resources = [...combined.resources].toSorted(
+ (left, right) =>
+ resourceStatusOrder[left.status] - resourceStatusOrder[right.status] || left.name.localeCompare(right.name),
+ );
+ return (
+
= 900 ? 2 : 1} spacing="md" h="100%" p="md">
+ {summary}
+
+
+ {combined.failedEndpoints.map((endpoint) => (
+
+ {t("failedEndpoint", { endpoint })}
+
+ ))}
+ {resources.map((resource, index) => (
+
+
+
+ {resource.name}
+
+
+ {resource.protocol.toUpperCase()} · {t(`resourceType.${resource.type}`)} · {resource.provider ?? "—"}
+
+
+
+ {t(`resourceStatus.${resource.status}`)}
+
+
+ ))}
+
+
+
);
}
+const resourceStatusOrder = { error: 0, warning: 1, disabled: 2, unknown: 3, enabled: 4 } as const;
+
function ProtocolCard({ protocol, data }: { protocol: ProtocolKey; data: TraefikDashboardData[ProtocolKey] }) {
const t = useScopedI18n("widget.traefik");
const rows: { key: ResourceKey; icon: typeof IconRoute; summary: TraefikResourceSummary }[] = [
diff --git a/packages/widgets/src/traefik/index.ts b/packages/widgets/src/traefik/index.ts
index 854075121..a45686578 100644
--- a/packages/widgets/src/traefik/index.ts
+++ b/packages/widgets/src/traefik/index.ts
@@ -5,6 +5,7 @@ import { optionsBuilder } from "../options";
export const { definition, componentLoader } = createWidgetDefinition("traefik", {
icon: IconRoute,
+ queryKey: [["widget", "traefik"]],
createOptions() {
return optionsBuilder.from((factory) => ({
showTcp: factory.switch({
diff --git a/packages/widgets/src/umami/component.tsx b/packages/widgets/src/umami/component.tsx
index 2aec3b46e..73ccaf679 100644
--- a/packages/widgets/src/umami/component.tsx
+++ b/packages/widgets/src/umami/component.tsx
@@ -7,7 +7,12 @@ import { useScopedI18n } from "@homarr/translation/client";
import type { WidgetComponentProps } from "../definition";
import { UmamiContent } from "./umami-content";
-export default function UmamiWidget({ options, integrationIds }: WidgetComponentProps<"umami">) {
+export default function UmamiWidget({
+ options,
+ integrationIds,
+ width,
+ displayMode = "compact",
+}: WidgetComponentProps<"umami">) {
if (!options.websiteId || options.websiteId.trim() === "") {
return
;
}
@@ -23,6 +28,8 @@ export default function UmamiWidget({ options, integrationIds }: WidgetComponent
chartType={options.chartType}
viewMode={options.viewMode}
topCount={options.topCount}
+ width={width}
+ displayMode={displayMode}
/>
);
}
diff --git a/packages/widgets/src/umami/index.ts b/packages/widgets/src/umami/index.ts
index badbef369..90861eab1 100644
--- a/packages/widgets/src/umami/index.ts
+++ b/packages/widgets/src/umami/index.ts
@@ -8,8 +8,11 @@ export const timeFrameValues = ["today", "24h", "7d", "30d", "month", "lastMonth
export const { definition, componentLoader } = createWidgetDefinition("umami", {
icon: IconChartBar,
+ queryKey: [["widget", "umami"]],
refetchInterval: null,
supportedIntegrations: ["umami"],
+ integrationsRequired: true,
+ maxIntegrations: 1,
createOptions() {
return optionsBuilder.from(
(factory) => ({
diff --git a/packages/widgets/src/umami/umami-content.tsx b/packages/widgets/src/umami/umami-content.tsx
index 2a187c3d5..17422a3a1 100644
--- a/packages/widgets/src/umami/umami-content.tsx
+++ b/packages/widgets/src/umami/umami-content.tsx
@@ -1,7 +1,7 @@
"use client";
import { BarChart, LineChart } from "@mantine/charts";
-import { Box, Group, Stack, Text, useMantineColorScheme } from "@mantine/core";
+import { Box, Group, SimpleGrid, Stack, Text, useMantineColorScheme } from "@mantine/core";
import { clientApi } from "@homarr/api/client";
import { formatDuration } from "@homarr/common";
@@ -23,6 +23,8 @@ interface UmamiContentProps {
chartType: string;
viewMode: string;
topCount: number;
+ width: number;
+ displayMode: "compact" | "advanced";
}
export function UmamiContent({
@@ -35,6 +37,8 @@ export function UmamiContent({
chartType,
viewMode,
topCount,
+ width,
+ displayMode,
}: UmamiContentProps) {
const t = useScopedI18n("widget.umami");
const { colorScheme } = useMantineColorScheme();
@@ -88,6 +92,63 @@ export function UmamiContent({
const isOverlay = chartStyle === "overlay" && hasEventSeries;
const overlayBarSize = 16;
+ const selectedView =
+ viewMode === "events" ? (
+
+ ) : viewMode === "topPages" ? (
+
+ ) : viewMode === "topReferrers" ? (
+
+ ) : chartType === "sparkline" ? (
+
+ ) : (
+
+ );
+
return (
@@ -140,74 +201,38 @@ export function UmamiContent({
{visitorStats.totalVisits.toLocaleString()} {t("visits")}
-
- {visitorStats.bounceRate}% {t("bounceRate")}
-
-
- {formatDuration(visitorStats.avgDuration * 1000)} {t("avgDuration")}
-
+ {(displayMode === "advanced" || width >= 260) && (
+ <>
+
+ {visitorStats.bounceRate}% {t("bounceRate")}
+
+
+ {formatDuration(visitorStats.avgDuration * 1000)} {t("avgDuration")}
+
+
+ )}
- {viewMode === "events" ? (
-
- ) : viewMode === "topPages" ? (
-
- ) : viewMode === "topReferrers" ? (
-
- ) : chartType === "sparkline" ? (
-
+ {displayMode === "advanced" ? (
+ = 900 ? 2 : 1} spacing="md" h="100%">
+ {selectedView}
+
+
+
+
+
) : (
-
+ selectedView
)}
diff --git a/packages/widgets/src/ups/component.tsx b/packages/widgets/src/ups/component.tsx
index 2b3d93bd9..a7d140ce7 100644
--- a/packages/widgets/src/ups/component.tsx
+++ b/packages/widgets/src/ups/component.tsx
@@ -1,6 +1,18 @@
"use client";
-import { Badge, Box, Card, Group, Progress, RingProgress, ScrollArea, Stack, Text } from "@mantine/core";
+import {
+ Badge,
+ Box,
+ Card,
+ Group,
+ Progress,
+ RingProgress,
+ ScrollArea,
+ SimpleGrid,
+ Stack,
+ Text,
+ VisuallyHidden,
+} from "@mantine/core";
import { clientApi } from "@homarr/api/client";
import { formatDuration } from "@homarr/common";
@@ -22,29 +34,47 @@ const statusColors: Record
= {
type UpsLayout = "mini" | "compact" | "full";
-export default function UpsWidget({ options, integrationIds, width }: WidgetComponentProps<"ups">) {
+export default function UpsWidget({
+ options,
+ integrationIds,
+ width,
+ height,
+ displayMode = "compact",
+}: WidgetComponentProps<"ups">) {
if (integrationIds.length === 0) {
throw new NoIntegrationSelectedError();
}
- return ;
+ return (
+
+ );
}
interface UpsContentProps {
integrationIds: string[];
options: WidgetComponentProps<"ups">["options"];
width: number;
+ height: number;
+ displayMode: "compact" | "advanced";
}
-function UpsContent({ integrationIds, options, width }: UpsContentProps) {
+function UpsContent({ integrationIds, options, width, height, displayMode }: UpsContentProps) {
const t = useScopedI18n("widget.ups");
const { data } = clientApi.widget.ups.getSummaries.useQuery({ integrationIds });
if (!data) return ;
- const devices = data.flatMap((instance) =>
- instance.summaries.map((summary) => ({ key: `${instance.integrationId}:${summary.id}`, summary })),
- );
+ const devices = data
+ .flatMap((instance) =>
+ instance.summaries.map((summary) => ({ key: `${instance.integrationId}:${summary.id}`, summary })),
+ )
+ .toSorted((left, right) => statusPriority[left.summary.status] - statusPriority[right.summary.status]);
if (devices.length === 0) {
return ;
@@ -55,27 +85,52 @@ function UpsContent({ integrationIds, options, width }: UpsContentProps) {
// - full: ring beside a column of stats (runtime, load, voltage)
// - compact (~2 columns): ring beside the name and a status badge
// - mini (~1 column): a text badge no longer fits, so status becomes a colour dot next to the name
- const layout: UpsLayout = width < 150 ? "mini" : width < 256 ? "compact" : "full";
+ const layout: UpsLayout =
+ displayMode === "advanced" ? "full" : width < 150 || height < 110 ? "mini" : width < 256 ? "compact" : "full";
+
+ const cards = devices.map(({ key, summary }) => (
+
+ ));
return (
-
- {devices.map(({ key, summary }) => (
-
- ))}
-
+ {displayMode === "advanced" ? (
+ = 760 ? 2 : 1} spacing="md" p="md">
+ {cards}
+
+ ) : (
+
+ {cards}
+
+ )}
);
}
+const statusPriority: Record = {
+ lowBattery: 0,
+ onBattery: 1,
+ charging: 2,
+ unknown: 3,
+ online: 4,
+};
+
interface UpsDeviceCardProps {
summary: UpsSummary;
options: WidgetComponentProps<"ups">["options"];
layout: UpsLayout;
+ advanced: boolean;
t: ScopedTranslationFunction<"widget.ups">;
}
-function UpsDeviceCard({ summary, options, layout, t }: UpsDeviceCardProps) {
+function UpsDeviceCard({ summary, options, layout, advanced, t }: UpsDeviceCardProps) {
const showRing = options.showBattery && summary.batteryCharge !== null;
const statusBadge = (
+ {t(`status.${summary.status}`)}
{summary.name}
@@ -205,6 +262,20 @@ function UpsDeviceCard({ summary, options, layout, t }: UpsDeviceCardProps) {
)}
+ {advanced && (
+
+ {summary.batteryVoltage !== null && (
+
+ )}
+ {summary.power !== null && }
+ {summary.temperature !== null && (
+
+ )}
+ {summary.manufacturer && }
+ {summary.model && }
+ {summary.serial && }
+
+ )}
);
}
diff --git a/packages/widgets/src/ups/index.ts b/packages/widgets/src/ups/index.ts
index 681daf417..c9d535dd0 100644
--- a/packages/widgets/src/ups/index.ts
+++ b/packages/widgets/src/ups/index.ts
@@ -7,6 +7,7 @@ import { optionsBuilder } from "../options";
export const { definition, componentLoader } = createWidgetDefinition("ups", {
icon: IconBatteryCharging,
+ queryKey: [["widget", "ups"]],
createOptions() {
return optionsBuilder.from((factory) => ({
showBattery: factory.switch({
diff --git a/packages/widgets/src/uptime-kuma/aggregate.spec.ts b/packages/widgets/src/uptime-kuma/aggregate.spec.ts
new file mode 100644
index 000000000..c4aaf9f18
--- /dev/null
+++ b/packages/widgets/src/uptime-kuma/aggregate.spec.ts
@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vitest";
+
+import { aggregateUptimeKumaDashboards } from "./aggregate";
+
+describe("aggregateUptimeKumaDashboards", () => {
+ it("weights uptime by monitors instead of integrations", () => {
+ const combined = aggregateUptimeKumaDashboards([
+ {
+ totalMonitors: 1,
+ upCount: 1,
+ downCount: 0,
+ pausedCount: 0,
+ averageUptimePercent: 100,
+ monitors: [{ id: 1, name: "one", status: "up", uptimePercent24h: 100 }],
+ },
+ {
+ totalMonitors: 3,
+ upCount: 0,
+ downCount: 3,
+ pausedCount: 0,
+ averageUptimePercent: 0,
+ monitors: [
+ { id: 2, name: "two", status: "down", uptimePercent24h: 0 },
+ { id: 3, name: "three", status: "down", uptimePercent24h: 0 },
+ { id: 4, name: "four", status: "down", uptimePercent24h: 0 },
+ ],
+ },
+ ]);
+ expect(combined.averageUptimePercent).toBe(25);
+ });
+});
diff --git a/packages/widgets/src/uptime-kuma/aggregate.ts b/packages/widgets/src/uptime-kuma/aggregate.ts
new file mode 100644
index 000000000..f7e6650be
--- /dev/null
+++ b/packages/widgets/src/uptime-kuma/aggregate.ts
@@ -0,0 +1,30 @@
+import type { UptimeKumaDashboardData } from "@homarr/integrations/types";
+
+const emptyDashboard: UptimeKumaDashboardData = {
+ totalMonitors: 0,
+ upCount: 0,
+ downCount: 0,
+ pausedCount: 0,
+ averageUptimePercent: 0,
+ monitors: [],
+};
+
+export function aggregateUptimeKumaDashboards(dashboards: UptimeKumaDashboardData[]): UptimeKumaDashboardData {
+ const combined = dashboards.reduce(
+ (acc, dashboard) => ({
+ totalMonitors: acc.totalMonitors + dashboard.totalMonitors,
+ upCount: acc.upCount + dashboard.upCount,
+ downCount: acc.downCount + dashboard.downCount,
+ pausedCount: acc.pausedCount + dashboard.pausedCount,
+ averageUptimePercent: 0,
+ monitors: [...acc.monitors, ...dashboard.monitors],
+ }),
+ emptyDashboard,
+ );
+ const uptimeValues = combined.monitors
+ .map((monitor) => monitor.uptimePercent24h)
+ .filter((value): value is number => value !== null);
+ combined.averageUptimePercent =
+ uptimeValues.reduce((total, value) => total + value, 0) / Math.max(uptimeValues.length, 1);
+ return combined;
+}
diff --git a/packages/widgets/src/uptime-kuma/component.tsx b/packages/widgets/src/uptime-kuma/component.tsx
index 5719f2f13..b77d66afb 100644
--- a/packages/widgets/src/uptime-kuma/component.tsx
+++ b/packages/widgets/src/uptime-kuma/component.tsx
@@ -1,27 +1,18 @@
"use client";
import type { CSSProperties } from "react";
-import { RingProgress, Text } from "@mantine/core";
+import { Badge, Group, RingProgress, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
import { IconArrowDown, IconArrowUp, IconClockPause, IconServer } from "@tabler/icons-react";
import { clientApi } from "@homarr/api/client";
import { formatNumber } from "@homarr/common";
-import type { UptimeKumaDashboardData } from "@homarr/integrations/types";
import { useScopedI18n } from "@homarr/translation/client";
import { WidgetEmptyState } from "../common/empty-state";
import type { WidgetComponentProps } from "../definition";
import { NoIntegrationDataError } from "../errors/no-data-integration";
import classes from "./component.module.css";
-
-const emptyDashboard: UptimeKumaDashboardData = {
- totalMonitors: 0,
- upCount: 0,
- downCount: 0,
- pausedCount: 0,
- averageUptimePercent: 0,
- monitors: [],
-};
+import { aggregateUptimeKumaDashboards } from "./aggregate";
const statVisibilityByOption = {
showTotalMonitors: "totalMonitors",
@@ -85,41 +76,51 @@ const heroVariantByRing = {
false: classes.heroTextOnly,
} as const;
-export default function UptimeKumaWidget({ integrationIds, options, width }: WidgetComponentProps<"uptimeKuma">) {
+export default function UptimeKumaWidget({
+ integrationIds,
+ options,
+ width,
+ height,
+ displayMode = "compact",
+}: WidgetComponentProps<"uptimeKuma">) {
if (integrationIds.length === 0) {
throw new NoIntegrationDataError();
}
- return ;
+ return (
+
+ );
}
interface UptimeKumaContentProps {
integrationIds: string[];
options: WidgetComponentProps<"uptimeKuma">["options"];
width: number;
+ height: number;
+ displayMode: "compact" | "advanced";
}
-function UptimeKumaContent({ integrationIds, options, width }: UptimeKumaContentProps) {
+function UptimeKumaContent({ integrationIds, options, width, height, displayMode }: UptimeKumaContentProps) {
const t = useScopedI18n("widget.uptimeKuma");
const { data: dashboardData } = clientApi.widget.uptimeKuma.getDashboard.useQuery({ integrationIds });
if (!dashboardData) return ;
- const combined = dashboardData.reduce(
- (acc, item) => ({
- totalMonitors: acc.totalMonitors + item.dashboard.totalMonitors,
- upCount: acc.upCount + item.dashboard.upCount,
- downCount: acc.downCount + item.dashboard.downCount,
- pausedCount: acc.pausedCount + item.dashboard.pausedCount,
- averageUptimePercent: acc.averageUptimePercent + item.dashboard.averageUptimePercent,
- monitors: [...acc.monitors, ...item.dashboard.monitors],
- }),
- emptyDashboard,
+ const combined = aggregateUptimeKumaDashboards(dashboardData.map((item) => item.dashboard));
+ const monitors = dashboardData.flatMap((result) =>
+ result.dashboard.monitors.map((monitor) => ({
+ ...monitor,
+ key: `${result.integrationId}:${monitor.id}`,
+ integrationName: result.integrationName,
+ })),
);
-
- const instanceCount = dashboardData.length;
- const averageUptime = combined.averageUptimePercent / Math.max(instanceCount, 1);
- const uptimeValue = clampPercent(averageUptime);
+ const uptimeValue = clampPercent(combined.averageUptimePercent);
const uptimeColor = getUptimeColor(uptimeValue);
const ringSize = getRingSize(width);
const iconSize = getIconSize(width);
@@ -136,7 +137,7 @@ function UptimeKumaContent({ integrationIds, options, width }: UptimeKumaContent
heroLayoutBySecondaryStats[String(visibleStatKeys.length > 0) as keyof typeof heroLayoutBySecondaryStats];
const heroRingClass = heroVariantByRing[String(options.showUptimeRing) as keyof typeof heroVariantByRing];
- return (
+ const summaryContent = (
{showHero && (
@@ -189,10 +190,61 @@ function UptimeKumaContent({ integrationIds, options, width }: UptimeKumaContent
})}
)}
+ {displayMode === "compact" && height >= 240 && combined.downCount > 0 && (
+
+ {monitors
+ .filter((monitor) => monitor.status === "down")
+ .slice(0, 3)
+ .map((monitor) => (
+
+
+ {monitor.name}
+
+
+ {t("status.down")} · {formatNumber(monitor.uptimePercent24h ?? 0, 1)}%
+
+
+ ))}
+
+ )}