Skip to content

Components

The frontend reuses a small set of shared components. Most live in admin/src/components/ and follow a consistent design contract.

Shared UI

Component Purpose
DataTable TanStack Table wrapper: sorting, filtering, pagination
DatePicker Date/time range selection for filters
ConfirmDialog Destructive-action confirmation
ConfigDrawer Side drawer for object detail/edit
CommandPalette Cmd/Ctrl + K global search/navigation
ComingSoon Placeholder for unimplemented pages
Layout Sidebar + topbar shell

DataTable

The workhorse of log, source, alert and incident pages:

  • Server-side sorting/filtering wired to TanStack Query
  • URL state sync via useTableUrlState (filters survive refresh)
  • Cursor (keyset) pagination integration
  • Column visibility and density controls
  • Row selection + bulk actions
<DataTable
  columns={eventColumns}
  data={query.data?.items}
  pageInfo={{ hasMore, nextCursor }}
  onCursorChange={setCursor}
/>

Feature Components

Feature Key Components
Dashboard DashboardV2, DashboardViewSelector, KPI cards, charts
Logs Filters bar, event table, detail drawer, priority badge
Sources Source list, toggle switch, ephemeral upload dialog
Monitoring Health cards, collector status table
Alerts/Incidents Rule editor, incident timeline, status flow

Severity & Priority Badges

Colors come from CSS variables:

Level Variable Visual
DEBUG --sev-debug muted blue
INFO --sev-info blue
WARNING --sev-warning amber
ERROR --sev-error orange/red
CRITICAL --sev-critical deep red
P1 priority chip red
P2 priority chip orange
P3 priority chip amber
P4 priority chip green

State & Data Fetching

  • TanStack Query — every REST call is a typed query/mutation with stale-time + cache
  • Zustand — client-side state (theme, user prefs, auth session)
  • Hooks
  • useKpiStream — WebSocket lifecycle
  • usePermissions — RBAC checks
  • useTableUrlState — table state in URL
  • useDialogState — dialog open/close

Conventions

  • Components are typed with TypeScript (strict)
  • Styling via Tailwind utilities + CSS variables (no inline magic numbers)
  • Testable pieces use test-utils with React Testing Library
  • New shared UI goes in components/; feature-specific in features/<name>/components/