import { Head, Link, router } from '@inertiajs/react'; import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'; import Heading from '@/components/heading'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { useAppliedTheme } from '@/hooks/use-applied-theme'; import { useFormatDate } from '@/hooks/use-format-date'; import { useTranslation } from '@/hooks/use-translation'; import AppLayout from '@/layouts/app-layout'; import { type BreadcrumbItem } from '@/types'; interface Summary { tokens: number; tokens_expired: number; requests_7d: number; failed_7d: number; median_ms: number | null; } interface DailyPoint { date: string; requests: number; failed: number; } interface TokenUsage { id: string; name: string; owner: string | null; abilities: string[]; last_used_at: string | null; expires_at: string | null; expired: boolean; requests_7d: number; failed_7d: number; } interface RecentAction { id: number; created_at: string; actor_name: string | null; token_name: string | null; template: string; replacements: Record; } interface Props { summary: Summary; daily: DailyPoint[]; tokens: TokenUsage[]; recent_actions: RecentAction[]; top_endpoints: { route: string; method: string; requests: number }[]; scope: { install_wide: boolean; can_view_install_wide: boolean }; retention_days: number; } // Categorical pair validated against the card surfaces of both modes, the // same approach as the transfers widget. // Succeeded and failed are stacked rather than drawn as two independent // series, because failures are a subset of requests โ€” plotting both totals // would count every failure twice and make a bad day look busy. const SERIES = { light: { succeeded: '#6247d1', failed: '#dc2626' }, dark: { succeeded: '#7c5ae2', failed: '#f87171' }, }; function StatTile({ label, value, hint }: { label: string; value: string; hint?: string }) { return (

{label}

{value}

{hint &&

{hint}

}
); } export default function ApiDashboard({ summary, daily, tokens, recent_actions, top_endpoints, scope, retention_days }: Props) { const { t } = useTranslation(); // The chart's x-axis is a day key (a bare YYYY-MM-DD), not an // instant โ€” see useFormatDate on why the two take different // functions. const { date, dateTime, calendarDateShort } = useFormatDate(); const theme = useAppliedTheme(); const colors = theme === 'dark' ? SERIES.dark : SERIES.light; const breadcrumbs: BreadcrumbItem[] = [{ title: t('API'), href: '/api' }]; const toggleScope = () => { router.get('/api', scope.install_wide ? {} : { all: '1' }, { preserveScroll: true }); }; // Failures are a subset of the total, so the stacked pair has to be // (total - failed, failed) rather than (total, failed). const series = daily.map((point) => ({ date: point.date, succeeded: point.requests - point.failed, failed: point.failed, })); return (
{scope.can_view_install_wide && ( )}
0 ? t(':count expired', { count: summary.tokens_expired }) : undefined} /> 0 ? `${Math.round((summary.failed_7d / summary.requests_7d) * 100)}%` : undefined} />

{t('Requests')}

calendarDateShort(String(value))} /> calendarDateShort(String(value))} />

{retention_days > 0 ? t('Request history is kept for :days days.', { days: retention_days }) : t('Request history is kept indefinitely.')}

{t('Tokens')}

{tokens.length === 0 ? (

{t('No tokens yet.')}

) : (
{scope.install_wide && } {tokens.map((token) => ( {scope.install_wide && } ))}
{t('Name')}{t('Owner')}{t('Last used')} {t('Requests')}
{token.name} {token.expired && {t('Expired')}}
{token.owner} {token.last_used_at ? date(token.last_used_at) : t('Never')} {token.requests_7d} {token.failed_7d > 0 && ( ({token.failed_7d}) )}
)}

{t('Busiest endpoints')}

{top_endpoints.length === 0 ? (

{t('No requests in the last 7 days.')}

) : (
    {top_endpoints.map((endpoint) => (
  • {endpoint.method} /{endpoint.route} {endpoint.requests}
    • ))}
)}

{t('Recent changes made through the API')}

{recent_actions.length === 0 ? (

{t('Nothing has been changed through the API yet.')}

) : (
    {recent_actions.map((action) => (
  • {t(action.template, action.replacements)} {action.token_name && {action.token_name}} {action.token_name && ' ยท '} {dateTime(action.created_at)}
    • ))}
)}
); }