Dashboard UI¶

Path: services/dashboard-ui/ · Type: UI · Port: 5173

The Dashboard UI is a React + TypeScript single-page application that provides operators and reviewers with a visual interface for monitoring access decay, managing reviews, and exploring principals and assets.

Technology Stack¶

Architecture¶

graph LR
    UI[Dashboard UI :5173] -->|REST API| AG[API Gateway :8000]
    AG --> PG[(PostgreSQL)]
    AG --> CH[(ClickHouse)]

The UI communicates exclusively with the API Gateway — it has no direct access to databases or Kafka.

Pages¶

1. Dashboard¶

The landing page provides an at-a-glance view of the platform's access health:

• Score distribution chart — histogram of decay scores across all grants.
• Risk level breakdown — count of grants per risk level (CRITICAL / HIGH / MEDIUM / LOW).
• Pending reviews — number of open reviews by risk level and SLA status.
• Recent activity feed — latest score changes, review decisions, and remediations.

2. Principals¶

Browse and search all known principals (users, service accounts, groups):

• Principal list with search, filter by platform, and sort by score.
• Principal detail — profile, associated grants, decay scores over time, review history.

3. Assets¶

Browse and search data assets:

• Asset list with search, filter by type and sensitivity.
• Asset detail — metadata, classification, grants linked to this asset, decay trend.

4. Reviews¶

Manage the access-review queue:

• Review queue — filterable by risk level, SLA status, and assigned reviewer.
• Review detail — full evidence packet, approve/revoke action buttons, justification input.
• Review history — past decisions with audit trail.

5. Settings¶

Platform configuration:

• Connector status — health and last-sync time for each connector.
• Decay parameters — view (and in dev mode, override) scoring weights and thresholds.
• Notification settings — configure email, Teams, and Slack channels.
• User management — manage reviewer roles and permissions.

Key Components¶

ScoreGauge¶

A circular gauge component that visualises a single decay score with colour-coded risk level:

DecayChart¶

A time-series line chart showing how a grant's decay score has evolved over time. Built with a charting library (e.g., Recharts) and supports zoom and date-range selection.

ReviewQueue¶

A sortable, filterable table of pending review packets. Supports:

• Column sorting (score, SLA deadline, risk level).
• Bulk actions (assign, escalate).
• Inline status badges.

SearchBar¶

A global search component with typeahead that searches across principals, assets, and reviews. Results are grouped by entity type.

Layout¶

The application shell providing:

• Top navigation bar with user context and logout.
• Side navigation with page links.
• Responsive design for desktop and tablet.

Component Hierarchy¶

graph TD
    App[App] --> Layout
    Layout --> Nav[TopNav]
    Layout --> Side[SideNav]
    Layout --> Router[React Router Outlet]
    Router --> Dashboard
    Router --> Principals
    Router --> Assets
    Router --> Reviews
    Router --> Settings
    Dashboard --> ScoreGauge
    Dashboard --> DecayChart
    Dashboard --> ReviewQueue
    Principals --> SearchBar
    Assets --> SearchBar
    Reviews --> ReviewQueue

Development¶

# Install dependencies
cd services/dashboard-ui
npm install

# Start dev server (port 5173)
npm run dev

# Build for production
npm run build

# Run linting
npm run lint

The dev server proxies API requests to http://localhost:8000 by default. Override with VITE_API_BASE_URL.

Configuration¶