The Dashboard

Sentinel ships with a fully embedded React security dashboard that gives you real-time visibility into every aspect of your application's security posture. The dashboard is built with React 19, Vite, TailwindCSS 4, Recharts, and React Router, and is served directly from your Go binary at /sentinel/ui — no separate frontend deployment required.

The entire UI uses a dark theme optimized for security operations. All assets are compiled into your Go binary via go:embed, so the dashboard works out of the box with zero external dependencies at runtime.

Authentication

The dashboard is protected by JWT-based authentication. When you access the UI, you are presented with a login screen that accepts a username and password. These credentials are configured in the DashboardConfig struct.

1sentinel.Mount(r, nil, sentinel.Config{
2    Dashboard: sentinel.DashboardConfig{
3        Username:  "admin",
4        Password:  "s3cur3-p4ss!",
5        SecretKey: "my-jwt-secret-change-in-production",
6    },
7})

On successful login, the server returns a JWT token. The React app stores this token exclusively in React state (via useState inside an AuthContextprovider) — it is never written to localStorage, sessionStorage, or cookies. This means the token is automatically cleared when the browser tab is closed or the page is refreshed, providing a secure session model that is immune to XSS-based token theft from persistent storage.

Every subsequent API call includes the token in the Authorization: Bearer header. If the token expires or becomes invalid, the API responds with HTTP 401 and the dashboard automatically redirects to the login page.

Pages Overview

The dashboard contains 13 pages, each focused on a specific aspect of your security operations. All pages are accessible from the sidebar navigation after logging in.

Dashboard (Overview)

The main Dashboard page is the landing page after login. It provides a high-level snapshot of your security posture with four key components:

• Security Score Ring — A donut chart that displays your overall security score (0-100). The score is computed from WAF coverage, rate limiting configuration, threat resolution rate, and other factors.
• Stat Cards — Summary cards showing total threats in the last 24 hours, blocked vs. logged counts, active threat actors, and requests per minute.
• Threat Timeline — A table of the most recent threat events with IP, route, threat type, severity, timestamp, and blocked status.
• Live WebSocket Feed — New threat events appear in real time via a WebSocket connection. The page refreshes its data automatically when a new threat arrives.

Threats

The Threats page is a paginated, searchable log of every threat event Sentinel has recorded. You can filter by severity, threat type, IP address, time range, and blocked status. Clicking a row opens a detail modal showing the full request metadata, matched WAF rule, payload, and geographic information.

Actions available on each threat:

• Resolve — Mark the threat as reviewed and resolved.
• False Positive — Flag the detection as a false positive for tuning.

Actors

The Actors page aggregates threat data by source IP to build threat actor profiles. Each profile includes a computed risk score, total event count, severity breakdown, first and last seen timestamps, and geographic location. You can block an actor directly from this page, which adds their IP to the blacklist immediately.

IP Management

The IP Management page provides a unified interface for managing your whitelist and blacklist. You can add individual IP addresses or CIDR ranges (e.g., 10.0.0.0/8, 192.168.1.0/24). Each entry supports an optional note describing why the IP was listed. Whitelisted IPs bypass all security checks including the WAF and rate limiting.

WAF

The WAF page provides full rule management. You can view all built-in rules with their current strictness levels, toggle individual rules on or off, create new custom rules with regex patterns, and test arbitrary input against the active rule set to see which rules would match before deploying changes.

Rate Limits

The Rate Limits page shows the current rate limiting configuration and live counter states. Counters auto-refresh to show real-time usage for each IP, user, route, and global limit. You can reset individual counters from the UI — useful for unblocking a legitimate user who hit a limit.

Analytics

The Analytics page provides six visualization panels:

• Attack Trends — A stacked area chart showing threat volume over time, broken down by attack type. Supports configurable time windows and intervals.
• Threat Distribution — A pie chart showing the proportion of each attack type (SQLi, XSS, Path Traversal, etc.) over the selected period.
• Top Targeted Routes — A horizontal bar chart ranking the most attacked routes in your application.
• Geographic Origin — A breakdown of threat sources by country, showing which geographic regions generate the most attack traffic.
• Time Patterns — Analysis of when attacks occur by hour of day and day of week, helping identify automated attack campaigns.
• Security Score Breakdown — A component-level view of your security score showing how each factor (WAF, rate limiting, threat resolution, etc.) contributes to the overall number.

AI Insights

The AI Insights page requires an AI provider to be configured (Claude, OpenAI, or Gemini). It offers five capabilities:

• Daily Summary — An AI-generated summary of the past 24 hours of security activity, highlighting notable trends and recommendations.
• Natural Language Query — Ask questions about your security data in plain English (e.g., "What were the most common attack types this week?").
• Threat Analysis — Select a specific threat event for AI-powered deep analysis of the attack vector, potential impact, and recommended mitigations.
• Actor Assessment — Generate an AI assessment of a threat actor's behavior pattern, risk level, and recommended response.
• WAF Recommendations — Get AI-generated suggestions for WAF rule improvements based on your recent threat data.

Reports

The Reports page generates compliance reports for three frameworks:

Reports are generated on demand and can be exported as JSON for ingestion into external compliance tooling or record-keeping systems.

Alerts

The Alerts page has two sections: configuration and history. The configuration panel shows the current alert settings (minimum severity threshold and configured channels). The history panel displays a log of all dispatched alerts with timestamps, severity, the triggering event, the delivery channel (Slack, email, webhook), and delivery status.

Audit Log

The Audit Log page provides a complete trail of all administrative and security actions. This includes dashboard logins, IP whitelist/blacklist changes, threat resolutions, WAF rule modifications, rate limit resets, and report generations. Each entry records the action, the actor (dashboard user or system), a timestamp, and relevant metadata.

Performance

The Performance page displays route-level latency metrics. For each route in your application, it shows:

• p50 (median) — The 50th percentile response time.
• p95 — The 95th percentile response time (tail latency).
• p99 — The 99th percentile response time (worst-case latency).
• Error Rate — The percentage of responses with non-2xx status codes.

Routes exceeding the SlowRequestThreshold (default 2 seconds) are highlighted. This page helps you correlate security events with performance degradation — for example, identifying routes under active attack that are experiencing elevated latency.

Users

The Users page tracks authenticated user activity. It shows each user extracted by your UserExtractor function, their total request count, last active timestamp, associated security events, and any anomaly flags. This page requires a UserExtractor to be configured in order to display user-level data.

Customizing the Prefix

By default, the dashboard is served at /sentinel/ui and the API at /sentinel/api/*. You can change this by setting DashboardConfig.Prefix:

1sentinel.Mount(r, nil, sentinel.Config{
2    Dashboard: sentinel.DashboardConfig{
3        Prefix:   "/admin/security",
4        Username: "secops",
5        Password: "change-me-in-production",
6    },
7})

With this configuration:

Building the Dashboard

The React dashboard source code lives in the ui/dashboard/ directory of the Sentinel repository. It is a standard Vite project with React and TailwindCSS. The production build output goes into ui/dist/, which is embedded into the Go binary via go:embed.

# Install dependencies
npm install

# Run development server (with hot reload)
npm run dev

# Build for production
npm run build

The Go embedding is handled by ui/frontend.go:

1package ui
2
3import (
4    "embed"
5    "io/fs"
6)
7
8//go:embed dist
9var distFS embed.FS
10
11// DistFS returns a sub-filesystem rooted at the dist directory.
12func DistFS() (fs.FS, error) {
13    return fs.Sub(distFS, "dist")
14}

When you build your Go application with go build, the compiled React assets in ui/dist/ are automatically included in the binary. There is no need for a separate static file server or CDN — the dashboard is fully self-contained.

WebSocket Streams

The dashboard uses two WebSocket endpoints for real-time data. Both require a valid JWT token passed as a token query parameter. The connections automatically reconnect with a 5-second backoff if disconnected.

The WebSocket connection URL is constructed dynamically based on the current page protocol and host:

// Protocol is auto-detected (ws: for http, wss: for https)
const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const url = `${proto}//${window.location.host}/sentinel/ws/threats?token=${jwt}`;

Next Steps

• Dashboard Configuration — Full reference for DashboardConfig fields
• WAF Deep Dive — Advanced WAF configuration and custom rules
• Rate Limiting — Configure rate limits visible in the dashboard
• Anomaly Detection — Behavioral analysis feeding dashboard insights
• Threat Intelligence — IP reputation data displayed in actor profiles