Incident Analysis Dashboard

Interactive visualization tool for analyzing incident patterns and service impacts using Sankey diagrams and network graphs.

Features

• Upload and analyze incident data and service impact relationships
• Interactive Sankey diagram showing incident flow across multiple dimensions
• Force-directed network graph displaying service dependencies
• Duration-based filtering with visual feedback
• Dark/light theme support
• Responsive design
• Filter data by Area, Shift, Team, and Service
• AI-powered incident analysis and recommendations
• Service Chainflow visualization for understanding service relationships

Usage

1. Upload incidents and service impact CSV files. Authorized users can download a sample here.
2. Use the filters to narrow down the data
3. Use the Sankey diagram to understand incident flow
4. Use the network graph to understand service dependencies
5. Use the AI-powered analysis and recommendations to guide improvements

Incidents CSV

Required columns:

• Service: Service name
• Shift: Shift name
• Area: Geographic/functional area
• Team: Team name
• Count: Number of incidents
• Hours: Resolution time in hours

Service Impact CSV

Required columns:

• Source: Source service name
• Target: Target service name

Service Chainflow CSV

Required columns for nodes:

• Service: Service name
• Stage: Stage number (0-4)
• Position: Vertical position within stage
• Value: Node size value

Required columns for links:

• Source: Source service name
• Target: Target service name
• Value: Link weight value

Setup

Prerequisites

• Modern web browser with ES Modules support
• Web server for local development

Local Setup

1. Clone this repository:

git clone https://github.com/gramener/incidents.git
cd incidents

2. Serve the files using any static web server. For example, using Python:

python -m http.server

3. Open http://localhost:8000 in your web browser

Deployment

On Cloudflare DNS, proxy CNAME incidents.straive.app to gramener.github.io.

On this repository's page settings, set

• Source: Deploy from a branch
• Branch: main
• Folder: /

Technical Details

Architecture

• Frontend: Vanilla JavaScript with lit-html for rendering
• LLM Integration: LLM Foundry API for query processing, specifically the /openai/v1/chat/completions endpoint with gpt-4o-mini model
• Styling: Bootstrap 5.3.3 with dark mode support
• Data Processing: D3.js for data transformation and analysis

Dependencies

All dependencies are loaded via CDN:

• D3.js v7 - Visualization
• Bootstrap v5.3.3 - UI components
• @gramex/sankey v1 - Sankey diagram
• @gramex/network v2 - Network visualization
• @gramex/ui v0.3 - Utilities
• marked v13 - Markdown parsing
• asyncllm v1 - AI integration
• PapaParse v5.3 - CSV parsing

License

MIT