alex/manage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Authentik access widgets

Browse Source
This commit is contained in:
Developer
2026-07-14 21:41:24 +00:00
parent 4562a9dfca
commit 17976eab80
21 changed files with 1082 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/api/authentik.ts
+78 -1
View File
@@ -1,4 +1,4 @@
/** API client for the Authentik service (directory + messaging). */
/** API client for Authentik directory, access metadata, and messaging. */
import { get, post } from "./shared";
export interface AuthentikUser {
@@ -19,6 +19,49 @@ export interface AuthentikUsersResponse {
error?: string;
}
export interface AuthentikGroupReference {
id: string;
name: string;
known: boolean;
}
export interface AuthentikAccessSummary {
id: string;
username: string;
name: string;
email: string;
is_active: boolean;
is_superuser: boolean;
is_staff: boolean;
groups: AuthentikGroupReference[];
}
export interface AuthentikAccessSummaryResponse {
items: AuthentikAccessSummary[];
total: number;
page: number;
page_size: number;
error?: string;
}
export interface AuthentikGroup {
id: string;
name: string;
}
export interface AuthentikApplication {
id: string;
name: string;
slug: string;
launch_url: string;
}
export interface AuthentikCollectionResponse<T> {
items: T[];
total: number;
error?: string;
}
export async function fetchAuthentikUsers(
serviceId: string,
params: { search?: string; page?: number; page_size?: number },
@@ -33,6 +76,40 @@ export async function fetchAuthentikUsers(
);
}
export async function fetchAuthentikAccessSummary(
serviceId: string,
params: { search?: string; page?: number; page_size?: number },
): Promise<AuthentikAccessSummaryResponse> {
return get<AuthentikAccessSummaryResponse>(
`/api/services/authentik/${serviceId}/access-summary`,
{
search: params.search ?? "",
page: String(params.page ?? 1),
page_size: String(params.page_size ?? 50),
},
);
}
export async function fetchAuthentikGroups(
serviceId: string,
limit = 100,
): Promise<AuthentikCollectionResponse<AuthentikGroup>> {
return get<AuthentikCollectionResponse<AuthentikGroup>>(
`/api/services/authentik/${serviceId}/groups`,
{ limit: String(limit) },
);
}
export async function fetchAuthentikApplications(
serviceId: string,
limit = 100,
): Promise<AuthentikCollectionResponse<AuthentikApplication>> {
return get<AuthentikCollectionResponse<AuthentikApplication>>(
`/api/services/authentik/${serviceId}/applications`,
{ limit: String(limit) },
);
}
export interface AuthentikMessageInput {
recipient_emails: string[];
subject: string;
frontend/src/hooks/useAuthentik.ts
+31 -1
View File
@@ -1,6 +1,9 @@
/** Hooks for the Authentik directory + messaging tabs. */
/** Hooks for Authentik directory, access metadata, and messaging tabs. */
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
fetchAuthentikAccessSummary,
fetchAuthentikApplications,
fetchAuthentikGroups,
fetchAuthentikMessageStatus,
fetchAuthentikUsers,
sendAuthentikMessage,
@@ -17,6 +20,33 @@ export function useAuthentikUsers(
});
}
export function useAuthentikAccessSummary(
serviceId: string,
params: { search?: string; page?: number; page_size?: number },
) {
return useQuery({
queryKey: ["authentik", "access-summary", serviceId, params],
queryFn: () => fetchAuthentikAccessSummary(serviceId, params),
staleTime: 10_000,
});
}
export function useAuthentikGroups(serviceId: string, limit = 100) {
return useQuery({
queryKey: ["authentik", "groups", serviceId, limit],
queryFn: () => fetchAuthentikGroups(serviceId, limit),
staleTime: 30_000,
});
}
export function useAuthentikApplications(serviceId: string, limit = 100) {
return useQuery({
queryKey: ["authentik", "applications", serviceId, limit],
queryFn: () => fetchAuthentikApplications(serviceId, limit),
staleTime: 30_000,
});
}
export function useSendAuthentikMessage(serviceId: string) {
const queryClient = useQueryClient();
return useMutation({
frontend/src/integrations/registry.test.ts
+17 -4
View File
@@ -12,6 +12,7 @@ describe("service registry", () => {
it("registers the backend service types", () => {
expect(Object.keys(SERVICE_REGISTRY).sort()).toEqual([
"alertmanager",
"authentik",
"jellyfin",
"nextcloud",
"prometheus",
@@ -30,6 +31,11 @@ describe("service registry", () => {
expect(SERVICE_REGISTRY.alertmanager.widgets.map((w) => w.kind)).toEqual([
"active_alerts",
]);
expect(SERVICE_REGISTRY.authentik.widgets.map((w) => w.kind)).toEqual([
"access_summary",
"groups",
"applications",
]);
expect(SERVICE_REGISTRY.remote_machine.widgets.map((w) => w.kind)).toEqual([
"task_output",
]);
@@ -41,10 +47,17 @@ describe("service registry", () => {
});
it("exposes unit/scale options on graph widget kinds", () => {
const propsOf = (binding: { configSchema: Record<string, unknown> } | undefined) =>
(binding?.configSchema as { properties?: Record<string, { enum?: string[] }> } | undefined)
?.properties ?? {};
const chart = getServiceBinding("prometheus")?.widgets.find((w) => w.kind === "chart");
const propsOf = (
binding: { configSchema: Record<string, unknown> } | undefined,
) =>
(
binding?.configSchema as
| { properties?: Record<string, { enum?: string[] }> }
| undefined
)?.properties ?? {};
const chart = getServiceBinding("prometheus")?.widgets.find(
(w) => w.kind === "chart",
);
const speed = getServiceBinding("qbittorrent")?.widgets.find(
(w) => w.kind === "speed",
);
frontend/src/integrations/registry.ts
+50
View File
@@ -1,5 +1,8 @@
import type { ComponentType } from "react";
import { AlertmanagerAlertsWidget } from "../widgets/AlertmanagerAlertsWidget";
import { AuthentikAccessSummaryWidget } from "../widgets/AuthentikAccessSummaryWidget";
import { AuthentikApplicationsWidget } from "../widgets/AuthentikApplicationsWidget";
import { AuthentikGroupsWidget } from "../widgets/AuthentikGroupsWidget";
import { BackupsWidget } from "../widgets/BackupsWidget";
import { MetricChartWidget } from "../widgets/MetricChartWidget";
import { MetricGaugeWidget } from "../widgets/MetricGaugeWidget";
@@ -76,6 +79,53 @@ const AXIS_FORMAT_PROPERTIES = {
};
export const SERVICE_REGISTRY: Record<string, ServiceBinding> = {
authentik: {
serviceType: "authentik",
name: "Authentik",
description: "Read-only user directory, group, and application metadata.",
widgets: [
{
kind: "access_summary",
name: "User access summary",
description:
"Group membership and explicit privileged flags; not effective authorization.",
refreshIntervalMs: 60_000,
defaultConfig: { limit: 10 },
configSchema: {
type: "object",
properties: { limit: { type: "integer", minimum: 1, maximum: 50 } },
required: [],
},
component: AuthentikAccessSummaryWidget,
},
{
kind: "groups",
name: "Groups",
description: "Read-only Authentik group list.",
refreshIntervalMs: 60_000,
defaultConfig: { limit: 10 },
configSchema: {
type: "object",
properties: { limit: { type: "integer", minimum: 1, maximum: 50 } },
required: [],
},
component: AuthentikGroupsWidget,
},
{
kind: "applications",
name: "Applications",
description: "Read-only Authentik application list.",
refreshIntervalMs: 60_000,
defaultConfig: { limit: 10 },
configSchema: {
type: "object",
properties: { limit: { type: "integer", minimum: 1, maximum: 50 } },
required: [],
},
component: AuthentikApplicationsWidget,
},
],
},
alertmanager: {
serviceType: "alertmanager",
name: "Alertmanager",
frontend/src/pages/service-tabs/ApplicationsTab.tsx
+80
View File
@@ -0,0 +1,80 @@
/** ApplicationsTab — read-only Authentik application directory. */
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Skeleton } from "@/components/ui/skeleton";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { useAuthentikApplications } from "../../hooks/useAuthentik";
import type { ServiceInstance } from "../../types";
export function ApplicationsTab({ instance }: { instance: ServiceInstance }) {
const { data, isLoading } = useAuthentikApplications(instance.id);
const applications = data?.items ?? [];
return (
<div className="flex flex-col gap-3">
<Alert>
<AlertDescription>
Application metadata only; providers, outposts, policies, and
effective access evaluation are not shown.
</AlertDescription>
</Alert>
{data?.error ? (
<Alert variant="destructive">
<AlertDescription>{data.error}</AlertDescription>
</Alert>
) : null}
<div className="rounded-lg border">
<Table>
<TableHeader>
<TableRow>
<TableHead>Application</TableHead>
<TableHead>Slug</TableHead>
<TableHead>Launch URL</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{isLoading && applications.length === 0 ? (
<TableRow>
<TableCell colSpan={3}>
<Skeleton className="h-5 w-full" />
</TableCell>
</TableRow>
) : null}
{!isLoading && applications.length === 0 ? (
<TableRow>
<TableCell colSpan={3} className="text-muted-foreground">
No applications found.
</TableCell>
</TableRow>
) : null}
{applications.map((application) => (
<TableRow
key={application.id || application.slug || application.name}
>
<TableCell className="font-medium">
{application.name}
</TableCell>
<TableCell className="font-mono text-xs text-muted-foreground">
{application.slug || "—"}
</TableCell>
<TableCell className="max-w-sm truncate text-muted-foreground">
{application.launch_url || "—"}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
{data && data.total > applications.length ? (
<p className="text-sm text-muted-foreground">
Showing the first {applications.length} of {data.total} applications.
</p>
) : null}
</div>
);
}
frontend/src/pages/service-tabs/GroupsTab.tsx
+66
View File
@@ -0,0 +1,66 @@
/** GroupsTab — read-only Authentik group directory. */
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Skeleton } from "@/components/ui/skeleton";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { useAuthentikGroups } from "../../hooks/useAuthentik";
import type { ServiceInstance } from "../../types";
export function GroupsTab({ instance }: { instance: ServiceInstance }) {
const { data, isLoading } = useAuthentikGroups(instance.id);
const groups = data?.items ?? [];
return (
<div className="flex flex-col gap-3">
{data?.error ? (
<Alert variant="destructive">
<AlertDescription>{data.error}</AlertDescription>
</Alert>
) : null}
<div className="rounded-lg border">
<Table>
<TableHeader>
<TableRow>
<TableHead>Group</TableHead>
<TableHead>ID</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{isLoading && groups.length === 0 ? (
<TableRow>
<TableCell colSpan={2}>
<Skeleton className="h-5 w-full" />
</TableCell>
</TableRow>
) : null}
{!isLoading && groups.length === 0 ? (
<TableRow>
<TableCell colSpan={2} className="text-muted-foreground">
No groups found.
</TableCell>
</TableRow>
) : null}
{groups.map((group) => (
<TableRow key={group.id}>
<TableCell className="font-medium">{group.name}</TableCell>
<TableCell className="font-mono text-xs text-muted-foreground">
{group.id}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
{data && data.total > groups.length ? (
<p className="text-sm text-muted-foreground">
Showing the first {groups.length} of {data.total} groups.
</p>
) : null}
</div>
);
}
frontend/src/pages/service-tabs/UsersTab.tsx
+67 -39
View File
@@ -1,4 +1,4 @@
/** UsersTab — Authentik user directory for the Authentik service page. */
/** UsersTab — Authentik access metadata, not an effective-permissions calculation. */
import { useState } from "react";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Badge } from "@/components/ui/badge";
@@ -13,7 +13,7 @@ import {
TableRow,
} from "@/components/ui/table";
import type { ServiceInstance } from "../../types";
import { useAuthentikUsers } from "../../hooks/useAuthentik";
import { useAuthentikAccessSummary } from "../../hooks/useAuthentik";
const PAGE_SIZE = 25;
@@ -21,14 +21,11 @@ export function UsersTab({ instance }: { instance: ServiceInstance }) {
const [search, setSearch] = useState("");
const [page, setPage] = useState(1);
const [committedSearch, setCommittedSearch] = useState("");
const { data, isLoading } = useAuthentikUsers(instance.id, {
const { data, isLoading } = useAuthentikAccessSummary(instance.id, {
search: committedSearch,
page,
page_size: PAGE_SIZE,
});
const error = data?.error;
const users = data?.items ?? [];
const total = data?.total ?? 0;
const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
@@ -40,19 +37,25 @@ export function UsersTab({ instance }: { instance: ServiceInstance }) {
return (
<div className="flex flex-col gap-3">
{error ? (
<Alert>
<AlertDescription>
Shows Authentik group membership and explicit staff/superuser flags.
This is access metadata, not a complete effective-authorization
calculation.
</AlertDescription>
</Alert>
{data?.error ? (
<Alert variant="destructive">
<AlertDescription>{error}</AlertDescription>
<AlertDescription>{data.error}</AlertDescription>
</Alert>
) : null}
<div className="flex items-center gap-2">
<Input
placeholder="Search users…"
value={search}
onChange={(e) => setSearch(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter") handleSearch();
onChange={(event) => setSearch(event.target.value)}
onKeyDown={(event) => {
if (event.key === "Enter") handleSearch();
}}
className="max-w-xs"
/>
@@ -60,52 +63,75 @@ export function UsersTab({ instance }: { instance: ServiceInstance }) {
Search
</Button>
</div>
<div className="rounded-lg border">
<Table>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Username</TableHead>
<TableHead>Email</TableHead>
<TableHead className="w-24">Status</TableHead>
<TableHead>Groups</TableHead>
<TableHead>Privileges</TableHead>
<TableHead>Status</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{isLoading && users.length === 0 ? (
<TableRow>
<TableCell colSpan={4} className="text-muted-foreground">
<TableCell colSpan={5} className="text-muted-foreground">
Loading…
</TableCell>
</TableRow>
) : users.length === 0 ? (
) : null}
{!isLoading && users.length === 0 ? (
<TableRow>
<TableCell colSpan={4} className="text-muted-foreground">
<TableCell colSpan={5} className="text-muted-foreground">
No users found.
</TableCell>
</TableRow>
) : (
users.map((user) => (
<TableRow key={user.pk}>
<TableCell className="font-medium">
{user.name || "—"}
</TableCell>
<TableCell>{user.username}</TableCell>
<TableCell className="text-muted-foreground">
{user.email || "—"}
</TableCell>
<TableCell>
<Badge variant={user.is_active ? "default" : "secondary"}>
{user.is_active ? "Active" : "Inactive"}
</Badge>
</TableCell>
</TableRow>
))
)}
) : null}
{users.map((user) => (
<TableRow key={user.id || user.username}>
<TableCell className="font-medium">
{user.name || "—"}
</TableCell>
<TableCell>{user.username || "—"}</TableCell>
<TableCell>
<div className="flex max-w-sm flex-wrap gap-1">
{user.groups.length ? (
user.groups.map((group) => (
<Badge
key={group.id}
variant={group.known ? "secondary" : "destructive"}
>
{group.name}
</Badge>
))
) : (
<span className="text-muted-foreground">None</span>
)}
</div>
</TableCell>
<TableCell>
<div className="flex flex-wrap gap-1">
{user.is_superuser ? (
<Badge variant="destructive">Superuser</Badge>
) : null}
{user.is_staff ? <Badge>Staff</Badge> : null}
{!user.is_superuser && !user.is_staff ? (
<span className="text-muted-foreground">None</span>
) : null}
</div>
</TableCell>
<TableCell>
<Badge variant={user.is_active ? "default" : "secondary"}>
{user.is_active ? "Active" : "Inactive"}
</Badge>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
{total > 0 ? (
<div className="flex items-center justify-between text-sm text-muted-foreground">
<span>
@@ -115,7 +141,7 @@ export function UsersTab({ instance }: { instance: ServiceInstance }) {
<Button
variant="outline"
size="sm"
onClick={() => setPage((p) => Math.max(1, p - 1))}
onClick={() => setPage((current) => Math.max(1, current - 1))}
disabled={page <= 1}
>
Previous
@@ -123,7 +149,9 @@ export function UsersTab({ instance }: { instance: ServiceInstance }) {
<Button
variant="outline"
size="sm"
onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
onClick={() =>
setPage((current) => Math.min(totalPages, current + 1))
}
disabled={page >= totalPages}
>
Next
frontend/src/pages/service-tabs/__tests__/UsersTab.test.tsx
+17 -7
View File
@@ -15,22 +15,28 @@ const instance: ServiceInstance = {
};
vi.mock("../../../hooks/useAuthentik", () => ({
useAuthentikUsers: vi.fn(() => ({
useAuthentikAccessSummary: vi.fn(() => ({
data: {
items: [
{
pk: 1,
id: "1",
username: "alice",
name: "Alice",
email: "alice@example.com",
is_active: true,
is_superuser: true,
is_staff: false,
groups: [{ id: "admins", name: "Admins", known: true }],
},
{
pk: 2,
id: "2",
username: "bob",
name: "Bob",
email: "bob@example.com",
is_active: false,
is_superuser: false,
is_staff: true,
groups: [{ id: "gone", name: "Unknown group (gone)", known: false }],
},
],
total: 2,
@@ -42,13 +48,17 @@ vi.mock("../../../hooks/useAuthentik", () => ({
}));
describe("UsersTab", () => {
it("renders the directory table with users", () => {
it("renders group membership and explicit privilege metadata", () => {
render(<UsersTab instance={instance} />);
expect(screen.getByText("Alice")).toBeInTheDocument();
expect(screen.getByText("bob")).toBeInTheDocument();
expect(screen.getByText("alice@example.com")).toBeInTheDocument();
expect(screen.getByText("Active")).toBeInTheDocument();
expect(screen.getByText("Inactive")).toBeInTheDocument();
expect(screen.getByText("Admins")).toBeInTheDocument();
expect(screen.getByText("Unknown group (gone)")).toBeInTheDocument();
expect(screen.getByText("Superuser")).toBeInTheDocument();
expect(screen.getByText("Staff")).toBeInTheDocument();
expect(
screen.getByText(/not a complete effective-authorization calculation/i),
).toBeInTheDocument();
});
it("renders search input and pagination", () => {
frontend/src/pages/service-tabs/index.ts
+4
View File
@@ -15,6 +15,8 @@ import { FilesTab } from "./FilesTab";
import { ActionsTab } from "./ActionsTab";
import { JobsTab } from "./JobsTab";
import { UsersTab } from "./UsersTab";
import { GroupsTab } from "./GroupsTab";
import { ApplicationsTab } from "./ApplicationsTab";
import { MessagingTab } from "./MessagingTab";
import { QbittorrentTab } from "./QbittorrentTab";
@@ -52,6 +54,8 @@ export function serviceContentTabs(serviceType: string): ContentTab[] {
case "authentik":
return [
{ label: "Users", Component: UsersTab },
{ label: "Groups", Component: GroupsTab },
{ label: "Applications", Component: ApplicationsTab },
{ label: "Messaging", Component: MessagingTab },
];
case "alertmanager":
frontend/src/widgets/AuthentikAccessSummaryWidget.tsx
+77
View File
@@ -0,0 +1,77 @@
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Badge } from "@/components/ui/badge";
import { Skeleton } from "@/components/ui/skeleton";
import { SectionCard } from "../components/SectionCard";
import { useWidgetData } from "../hooks/useWidgets";
import type { AuthentikAccessSummary } from "../api/authentik";
import type { WidgetInstance } from "../types";
interface Props {
widget: WidgetInstance;
refreshIntervalMs: number;
description?: string;
}
export function AuthentikAccessSummaryWidget({
widget,
refreshIntervalMs,
description,
}: Props) {
const { data, isLoading } = useWidgetData(widget.id, refreshIntervalMs);
const payload = data?.data as
| { items?: AuthentikAccessSummary[] }
| undefined;
const users = payload?.items ?? [];
return (
<SectionCard title={widget.title} description={description}>
{isLoading && !data ? (
<Skeleton className="h-16 w-full" />
) : data?.error ? (
<Alert variant="destructive">
<AlertDescription>{data.error}</AlertDescription>
</Alert>
) : users.length ? (
<ul className="space-y-2">
{users.map((user) => (
<li
key={user.id || user.username}
className="rounded-md border px-3 py-2 text-sm"
>
<div className="flex items-center justify-between gap-2">
<span className="font-medium">
{user.name || user.username || "Unknown user"}
</span>
<span className="flex gap-1">
{user.is_superuser ? (
<Badge variant="destructive">Superuser</Badge>
) : null}
{user.is_staff ? <Badge>Staff</Badge> : null}
</span>
</div>
<div className="mt-1 flex flex-wrap gap-1">
{user.groups.length ? (
user.groups.map((group) => (
<Badge
key={group.id}
variant={group.known ? "secondary" : "destructive"}
>
{group.name}
</Badge>
))
) : (
<span className="text-xs text-muted-foreground">
No group references
</span>
)}
</div>
</li>
))}
</ul>
) : (
<p className="text-sm text-muted-foreground">
No user access metadata found.
</p>
)}
</SectionCard>
);
}
frontend/src/widgets/AuthentikApplicationsWidget.tsx
+51
View File
@@ -0,0 +1,51 @@
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Skeleton } from "@/components/ui/skeleton";
import { SectionCard } from "../components/SectionCard";
import { useWidgetData } from "../hooks/useWidgets";
import type { AuthentikApplication } from "../api/authentik";
import type { WidgetInstance } from "../types";
interface Props {
widget: WidgetInstance;
refreshIntervalMs: number;
description?: string;
}
export function AuthentikApplicationsWidget({
widget,
refreshIntervalMs,
description,
}: Props) {
const { data, isLoading } = useWidgetData(widget.id, refreshIntervalMs);
const payload = data?.data as { items?: AuthentikApplication[] } | undefined;
const applications = payload?.items ?? [];
return (
<SectionCard title={widget.title} description={description}>
{isLoading && !data ? (
<Skeleton className="h-16 w-full" />
) : data?.error ? (
<Alert variant="destructive">
<AlertDescription>{data.error}</AlertDescription>
</Alert>
) : applications.length ? (
<ul className="space-y-1">
{applications.map((application) => (
<li
key={application.id || application.slug || application.name}
className="rounded-md border px-2 py-1 text-sm"
>
<span className="font-medium">{application.name}</span>
{application.slug ? (
<span className="ml-2 text-xs text-muted-foreground">
{application.slug}
</span>
) : null}
</li>
))}
</ul>
) : (
<p className="text-sm text-muted-foreground">No applications found.</p>
)}
</SectionCard>
);
}
frontend/src/widgets/AuthentikGroupsWidget.tsx
+43
View File
@@ -0,0 +1,43 @@
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Skeleton } from "@/components/ui/skeleton";
import { SectionCard } from "../components/SectionCard";
import { useWidgetData } from "../hooks/useWidgets";
import type { AuthentikGroup } from "../api/authentik";
import type { WidgetInstance } from "../types";
interface Props {
widget: WidgetInstance;
refreshIntervalMs: number;
description?: string;
}
export function AuthentikGroupsWidget({
widget,
refreshIntervalMs,
description,
}: Props) {
const { data, isLoading } = useWidgetData(widget.id, refreshIntervalMs);
const payload = data?.data as { items?: AuthentikGroup[] } | undefined;
const groups = payload?.items ?? [];
return (
<SectionCard title={widget.title} description={description}>
{isLoading && !data ? (
<Skeleton className="h-16 w-full" />
) : data?.error ? (
<Alert variant="destructive">
<AlertDescription>{data.error}</AlertDescription>
</Alert>
) : groups.length ? (
<ul className="space-y-1">
{groups.map((group) => (
<li key={group.id} className="rounded-md border px-2 py-1 text-sm">
{group.name}
</li>
))}
</ul>
) : (
<p className="text-sm text-muted-foreground">No groups found.</p>
)}
</SectionCard>
);
}
frontend/src/widgets/index.ts
+3
View File
@@ -1,4 +1,7 @@
export { AlertmanagerAlertsWidget } from "./AlertmanagerAlertsWidget";
export { AuthentikAccessSummaryWidget } from "./AuthentikAccessSummaryWidget";
export { AuthentikApplicationsWidget } from "./AuthentikApplicationsWidget";
export { AuthentikGroupsWidget } from "./AuthentikGroupsWidget";
export { BackupsWidget } from "./BackupsWidget";
export { MetricChartWidget } from "./MetricChartWidget";
export { MetricGaugeWidget } from "./MetricGaugeWidget";