Skip to main content

​
Dashboard

The LogClaw Dashboard is a Next.js web application providing a complete operational UI for the LogClaw platform.

​
Features

Log Ingestion

Drag-and-drop file upload supporting JSON, NDJSON, CSV, and plain text formats. Automatically converts to OTLP format and sends via the OTel Collector proxy. Includes tabbed code examples for cURL, Python, Node.js, Go, and Java.

Pipeline Monitoring

Real-time throughput visualization: Ingest → Stream → Process → Index → Detect → ML → Orchestrate → Ticketing.

Incident Management

View, acknowledge, resolve, and escalate incidents. Bulk actions (acknowledge/resolve/escalate multiple), CSV export, full-text search, and auto-deduplication. Configure ticketing platforms and routing rules.

Anomaly Visualization

Time-series charts showing anomaly scores, affected services, error rate trends, and blast radius.

Dark Mode

System-aware dark mode with manual toggle (Light / Dark / System). Persisted via localStorage. Accessible from the navigation bar.

Error Resilience

Error boundaries catch component crashes and display retry UI. Loading skeletons provide visual feedback during data fetches. LLM fallback badge indicates when AI RCA is unavailable.

​
Architecture

The Dashboard acts as a proxy gateway to all backend services. Each backend gets its own API route:
Proxy RouteBackend ServiceEnvironment Variable
/api/otel/*OTel CollectorOTEL_COLLECTOR_ENDPOINT
/api/bridge/*BridgeBRIDGE_ENDPOINT
/api/opensearch/*OpenSearchOPENSEARCH_ENDPOINT
/api/ticketing/*Ticketing AgentTICKETING_ENDPOINT
/api/airflow/*AirflowAIRFLOW_ENDPOINT
/api/feast/*FeastFEAST_ENDPOINT
/api/agent/*Infrastructure AgentAGENT_ENDPOINT

​
Environment Variables

VariableRequiredDefaultDescription
OTEL_COLLECTOR_ENDPOINTYeshttp://localhost:4318OTel Collector HTTP endpoint
BRIDGE_ENDPOINTYeshttp://localhost:8080Bridge service endpoint
OPENSEARCH_ENDPOINTYeshttp://localhost:9200OpenSearch cluster URL
OPENSEARCH_USERNo—OpenSearch Basic Auth username
OPENSEARCH_PASSWORDNo—OpenSearch Basic Auth password
TICKETING_ENDPOINTNohttp://localhost:18081Ticketing Agent endpoint
AIRFLOW_ENDPOINTNohttp://localhost:28080Airflow webserver endpoint
FEAST_ENDPOINTNohttp://localhost:6567Feast feature server endpoint
AGENT_ENDPOINTNohttp://localhost:8080Infrastructure Agent endpoint

​
Log File Upload

The Dashboard supports drag-and-drop log file upload:
  1. Drag a file onto the upload area (or click to browse)
  2. The Dashboard parses each log entry based on file format
  3. Converts entries to OTLP format using the built-in logsToOtlp() converter
  4. Sends the OTLP payload to /api/otel/v1/logs (proxied to OTel Collector)
Supported formats:
FormatExtensionDescriptionExample
JSON.jsonArray or single log object[{"message": "...", "level": "ERROR"}]
NDJSON.ndjsonOne JSON object per line{"message": "..."}\n{"message": "..."}
CSV.csvHeader row required, auto-mapped columnsmessage,level,service\n"Error",ERROR,api
Text.txt, .logOne log message per line2024-03-01 ERROR Connection timeout
Recognized fields:
FieldMapping
message or msg or bodyOTLP body.stringValue
level or severityOTLP severityText
timestamp or time or @timestampOTLP timeUnixNano
service or service.nameOTLP resource attribute
trace_id or traceIdOTLP traceId
span_id or spanIdOTLP spanId

​
Incident Management Features

​
Bulk Actions

Select multiple incidents using checkboxes and perform batch operations:
  • Bulk Acknowledge — acknowledge all selected incidents at once
  • Bulk Resolve — resolve all selected incidents at once
  • Bulk Escalate — escalate all selected incidents at once
The selection toolbar appears when one or more incidents are checked, showing the count and available actions.

​
CSV Export

Export the current incident list as a CSV file. The export includes all visible columns: ID, title, severity, status, service, anomaly score, affected services, and timestamps. Click the download button in the incidents toolbar.

​
Full-Text Search

Filter incidents by typing in the search bar. Searches across incident title, service name, and affected services in real-time.

​
Incident Audit Trail

Each incident detail page shows a complete audit trail of state changes (created → acknowledged → escalated → resolved) with timestamps. View the audit log on the incident detail page under the “Audit Trail” section.

​
Auto-Deduplication

The Ticketing Agent automatically deduplicates incoming anomalies to prevent duplicate incidents. Anomalies with the same service and severity within the configured lookback window are merged into the existing incident.

​
LLM Fallback Badge

When the configured LLM provider is unreachable, incidents are created using rule-based fallback RCA. These incidents display a “Fallback” badge on the detail page to indicate that AI-generated root cause analysis was not available.

​
Dark Mode

The Dashboard supports three theme modes:
  • Light — default light theme
  • Dark — dark theme with adjusted surfaces, text colors, borders, and shadows
  • System — follows the operating system preference
Toggle the theme from the navigation bar using the Sun/Moon/Monitor dropdown. The preference is persisted in localStorage.

​
Loading Skeletons

All data-driven pages display animated skeleton placeholders while fetching data:
  • Home page — stat card skeletons, bar chart skeletons, pipeline flow skeletons
  • Incidents list — incident card skeletons
  • Incident detail — full-page skeleton with header, timeline, and analysis placeholders

​
Error Boundaries

React error boundaries wrap all major page sections. When a component crashes:
  • An error message with the component name is displayed
  • A Retry button allows the user to attempt re-rendering
  • The rest of the page continues to function normally

​
Pipeline Flow

The pipeline monitoring view shows real-time throughput across two rows: Data Pipeline:
  • Ingest (OTel Collector) → Stream (Kafka) → Process (Bridge/Flink) → Index (OpenSearch)
AI & Operations:
  • Detect (Anomaly Engine) → ML (Feast/KServe) → Orchestrate (Airflow) → Ticketing (AI Agent)
Each stage shows:
  • Current count (formatted with K/M suffixes)
  • Data size where applicable
  • Health status indicator (green/amber/red with animated ping)

​
Ticketing Configuration

The Dashboard provides a UI for configuring ticketing platforms:

​
Supported Platforms

PlatformRequired Fields
PagerDutyroutingKey
JirabaseUrl, apiToken, userEmail
ServiceNowinstanceUrl, username, password
OpsGenieapiKey
SlackwebhookUrl

​
Configuration Endpoints

All configuration changes are persisted via the Ticketing Agent’s runtime config API: 
# Update PagerDuty settings
PATCH /api/ticketing/api/v1/config/platforms
{
  "pagerduty": {
    "enabled": true,
    "routingKey": "your-pagerduty-routing-key"
  }
}

# Update severity routing
PATCH /api/ticketing/api/v1/config/routing
{
  "critical": ["pagerduty", "slack"],
  "high": ["jira", "slack"],
  "medium": ["jira"],
  "low": ["slack"]
}

​
Deployment

​
Helm Values

logclaw-dashboard:
  image:
    repository: "ghcr.io/logclaw/dashboard"
    tag: "latest"
  service:
    type: ClusterIP    # ClusterIP or LoadBalancer
    port: 3000

​
Docker

cd apps/dashboard
docker build -t logclaw/dashboard:latest .
docker run -p 3000:3000 \
  -e OTEL_COLLECTOR_ENDPOINT=http://otel:4318 \
  -e BRIDGE_ENDPOINT=http://bridge:8080 \
  -e OPENSEARCH_ENDPOINT=http://opensearch:9200 \
  logclaw/dashboard:latest