feat: Add Traefik Integration with dedicated widget and Add optional Icons for Gotify/Notifcation Widget (ONLY GOTIFY) (#6206)
Co-authored-by: Thomas <thomas@ajnart.fr>
This commit is contained in:
Nerdy TechnicianandThomas authored and 
GitHub committed
1 parent
bcd36b1b27
commit
9864fed775
33 files changed
+998
-46
No files matched your search
@@ -0,0 +1,259 @@
|
||||
"use client";
|
||||
|
||||
import type { ReactNode } from "react";
|
||||
import { Badge, Group, ScrollArea, Text } from "@mantine/core";
|
||||
import {
|
||||
IconAlertTriangle,
|
||||
IconCircleCheck,
|
||||
IconDoorEnter,
|
||||
IconRoute,
|
||||
IconServer,
|
||||
IconStack2,
|
||||
} from "@tabler/icons-react";
|
||||
|
||||
import { clientApi } from "@homarr/api/client";
|
||||
import type { TraefikDashboardData, TraefikProtocolSummary, TraefikResourceSummary } 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 emptySummary: TraefikResourceSummary = {
|
||||
total: 0,
|
||||
enabled: 0,
|
||||
warnings: 0,
|
||||
errors: 0,
|
||||
};
|
||||
|
||||
const emptyProtocol: TraefikProtocolSummary = {
|
||||
routers: emptySummary,
|
||||
services: emptySummary,
|
||||
middlewares: emptySummary,
|
||||
};
|
||||
|
||||
const emptyDashboard: TraefikDashboardData = {
|
||||
version: null,
|
||||
entryPoints: [],
|
||||
http: emptyProtocol,
|
||||
tcp: emptyProtocol,
|
||||
udp: {
|
||||
routers: emptySummary,
|
||||
services: emptySummary,
|
||||
},
|
||||
};
|
||||
|
||||
type ProtocolKey = "http" | "tcp" | "udp";
|
||||
type ResourceKey = "routers" | "services" | "middlewares";
|
||||
|
||||
export default function TraefikWidget({ integrationIds, options, width }: WidgetComponentProps<"traefik">) {
|
||||
if (integrationIds.length === 0) {
|
||||
throw new NoIntegrationDataError();
|
||||
}
|
||||
|
||||
const t = useScopedI18n("widget.traefik");
|
||||
const { data } = clientApi.widget.traefik.getDashboard.useQuery({ integrationIds });
|
||||
|
||||
if (!data) return <WidgetEmptyState />;
|
||||
|
||||
const combined = data.reduce<TraefikDashboardData>(
|
||||
(acc, item) => ({
|
||||
version: acc.version ?? item.dashboard.version,
|
||||
entryPoints: [...acc.entryPoints, ...item.dashboard.entryPoints],
|
||||
http: combineProtocol(acc.http, item.dashboard.http),
|
||||
tcp: combineProtocol(acc.tcp, item.dashboard.tcp),
|
||||
udp: {
|
||||
routers: combineSummary(acc.udp.routers, item.dashboard.udp.routers),
|
||||
services: combineSummary(acc.udp.services, item.dashboard.udp.services),
|
||||
},
|
||||
}),
|
||||
emptyDashboard,
|
||||
);
|
||||
|
||||
const totalRouters = combined.http.routers.total + combined.tcp.routers.total + combined.udp.routers.total;
|
||||
const totalErrors = getProtocolErrors(combined.http) + getProtocolErrors(combined.tcp) + getUdpErrors(combined.udp);
|
||||
const totalWarnings =
|
||||
getProtocolWarnings(combined.http) + getProtocolWarnings(combined.tcp) + getUdpWarnings(combined.udp);
|
||||
const protocolKeys: ProtocolKey[] = ["http"];
|
||||
if (options.showTcp) protocolKeys.push("tcp");
|
||||
if (options.showUdp) protocolKeys.push("udp");
|
||||
|
||||
return (
|
||||
<ScrollArea h="100%">
|
||||
<div className={classes.root}>
|
||||
<Group justify="space-between" gap="xs" wrap="nowrap">
|
||||
<div className={classes.titleBlock}>
|
||||
<Text className={classes.title}>{data.length === 1 ? data[0]?.integrationName : t("instances")}</Text>
|
||||
<Text className={classes.subtitle}>{combined.version ? `v${combined.version}` : t("versionUnknown")}</Text>
|
||||
</div>
|
||||
<HealthBadge errors={totalErrors} warnings={totalWarnings} />
|
||||
</Group>
|
||||
|
||||
<div className={classes.hero}>
|
||||
<SummaryMetric
|
||||
icon={<IconRoute size={getHeroIconSize(width)} />}
|
||||
label={t("summary.routers")}
|
||||
value={totalRouters}
|
||||
/>
|
||||
<SummaryMetric
|
||||
icon={<IconDoorEnter size={getHeroIconSize(width)} />}
|
||||
label={t("summary.entryPoints")}
|
||||
value={dedupe(combined.entryPoints).length}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={classes.protocolGrid}>
|
||||
{protocolKeys.map((protocol) => (
|
||||
<ProtocolCard key={protocol} protocol={protocol} data={combined[protocol]} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{options.showEntryPoints && combined.entryPoints.length > 0 && (
|
||||
<div className={classes.entryPoints}>
|
||||
{dedupe(combined.entryPoints)
|
||||
.slice(0, getEntryPointLimit(width))
|
||||
.map((entryPoint) => (
|
||||
<Badge key={entryPoint} variant="light" size="sm" radius="sm">
|
||||
{entryPoint}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
|
||||
function ProtocolCard({ protocol, data }: { protocol: ProtocolKey; data: TraefikDashboardData[ProtocolKey] }) {
|
||||
const t = useScopedI18n("widget.traefik");
|
||||
const rows: { key: ResourceKey; icon: typeof IconRoute; summary: TraefikResourceSummary }[] = [
|
||||
{ key: "routers", icon: IconRoute, summary: data.routers },
|
||||
{ key: "services", icon: IconServer, summary: data.services },
|
||||
];
|
||||
if ("middlewares" in data) {
|
||||
rows.push({ key: "middlewares", icon: IconStack2, summary: data.middlewares });
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classes.protocolCard}>
|
||||
<Text className={classes.protocolTitle}>{t(`protocol.${protocol}`)}</Text>
|
||||
<div className={classes.protocolRows}>
|
||||
{rows.map(({ key, icon: Icon, summary }) => (
|
||||
<div key={key} className={classes.protocolRow}>
|
||||
<Group gap={4} wrap="nowrap" className={classes.protocolLabel}>
|
||||
<Icon size={14} />
|
||||
<Text>{t(`resource.${key}`)}</Text>
|
||||
</Group>
|
||||
<StatusCount summary={summary} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatusCount({ summary }: { summary: TraefikResourceSummary }) {
|
||||
return (
|
||||
<Group gap={4} wrap="nowrap" className={classes.counts}>
|
||||
<Text fw={700}>{summary.total}</Text>
|
||||
{summary.errors > 0 && (
|
||||
<Text c="red" fw={700}>
|
||||
{summary.errors}
|
||||
</Text>
|
||||
)}
|
||||
{summary.warnings > 0 && (
|
||||
<Text c="yellow" fw={700}>
|
||||
{summary.warnings}
|
||||
</Text>
|
||||
)}
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
|
||||
function SummaryMetric({ icon, label, value }: { icon: ReactNode; label: string; value: number }) {
|
||||
return (
|
||||
<div className={classes.metric}>
|
||||
<div className={classes.metricIcon}>{icon}</div>
|
||||
<div className={classes.metricText}>
|
||||
<Text className={classes.metricValue}>{value}</Text>
|
||||
<Text className={classes.metricLabel}>{label}</Text>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function HealthBadge({ errors, warnings }: { errors: number; warnings: number }) {
|
||||
const t = useScopedI18n("widget.traefik");
|
||||
|
||||
if (errors > 0) {
|
||||
return (
|
||||
<Badge color="red" variant="light" leftSection={<IconAlertTriangle size={12} />} radius="sm">
|
||||
{t("status.errors", { count: errors })}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
||||
if (warnings > 0) {
|
||||
return (
|
||||
<Badge color="yellow" variant="light" leftSection={<IconAlertTriangle size={12} />} radius="sm">
|
||||
{t("status.warnings", { count: warnings })}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Badge color="green" variant="light" leftSection={<IconCircleCheck size={12} />} radius="sm">
|
||||
{t("status.healthy")}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
||||
function combineProtocol(left: TraefikProtocolSummary, right: TraefikProtocolSummary): TraefikProtocolSummary {
|
||||
return {
|
||||
routers: combineSummary(left.routers, right.routers),
|
||||
services: combineSummary(left.services, right.services),
|
||||
middlewares: combineSummary(left.middlewares, right.middlewares),
|
||||
};
|
||||
}
|
||||
|
||||
function combineSummary(left: TraefikResourceSummary, right: TraefikResourceSummary): TraefikResourceSummary {
|
||||
return {
|
||||
total: left.total + right.total,
|
||||
enabled: left.enabled + right.enabled,
|
||||
warnings: left.warnings + right.warnings,
|
||||
errors: left.errors + right.errors,
|
||||
};
|
||||
}
|
||||
|
||||
function getProtocolErrors(protocol: TraefikProtocolSummary) {
|
||||
return protocol.routers.errors + protocol.services.errors + protocol.middlewares.errors;
|
||||
}
|
||||
|
||||
function getProtocolWarnings(protocol: TraefikProtocolSummary) {
|
||||
return protocol.routers.warnings + protocol.services.warnings + protocol.middlewares.warnings;
|
||||
}
|
||||
|
||||
function getUdpErrors(protocol: TraefikDashboardData["udp"]) {
|
||||
return protocol.routers.errors + protocol.services.errors;
|
||||
}
|
||||
|
||||
function getUdpWarnings(protocol: TraefikDashboardData["udp"]) {
|
||||
return protocol.routers.warnings + protocol.services.warnings;
|
||||
}
|
||||
|
||||
function dedupe(values: string[]) {
|
||||
return Array.from(new Set(values));
|
||||
}
|
||||
|
||||
function getHeroIconSize(width: number) {
|
||||
if (width < 220) return 16;
|
||||
if (width < 340) return 18;
|
||||
return 22;
|
||||
}
|
||||
|
||||
function getEntryPointLimit(width: number) {
|
||||
if (width < 220) return 2;
|
||||
if (width < 360) return 4;
|
||||
return 8;
|
||||
}
|
||||
Reference in new issue
Block a user