Dashboard Overview
Dashboard Overview
The gitlab-summary dashboard provides a comprehensive, real-time view of your GitLab CI/CD pipelines through an intuitive web interface.
Starting the Dashboard
Basic Usage
gitlab-summary serve --group my-org --open
This command:
- Starts the SSE server on
http://localhost:5100 - Opens your default browser automatically
- Begins streaming pipeline data in real-time
Without Auto-open
gitlab-summary serve --group my-org
Then manually navigate to http://localhost:5100
Dashboard Pages
The dashboard consists of four main pages accessible from the left navigation rail:
1. Overview (Home)
Purpose: High-level view of all pipeline activity
📸 Screenshot placeholder: dashboard-overview.png
Description: Dashboard overview page showing key metrics cards (total pipelines, success rate, in progress, duration), timeline chart, top contributors, and recent failures list
Key Metrics:
- Total Pipelines: Count of all pipelines in the selected time range
- Success Rate: Percentage of successful pipelines (color-coded)
- In Progress: Currently running pipelines
- Average Duration: Mean execution time across all pipelines
Timeline Chart:
- Visual representation of pipeline status over time
- Green bars = successful pipelines
- Red bars = failed pipelines
- Blue bars = running pipelines
- Hover to see exact counts
📸 Screenshot placeholder: dashboard-timeline-chart.png
Description: Close-up of timeline chart showing green (success), red (failed), and blue (running) bars representing pipeline status over time with hover tooltip
Top Contributors:
- Most active users ranked by pipeline count
- Shows avatar, name, and success rate
- Click any user to see detailed statistics
Recent Failures:
- Latest failed pipelines across all projects
- Shows project, branch, commit message
- Quick access to logs and AI analysis
2. Projects
Purpose: Project-level pipeline summaries
📸 Screenshot placeholder: dashboard-projects-list.png
Description: Projects page displaying list of projects with columns for name, total pipelines, success/failed/running counts, success rate percentage, and average duration
Information Displayed:
- Project name with fork indicator (if applicable)
- Total pipeline count
- Success/failed/running breakdown
- Success rate percentage
- Average duration
- AI analysis indicators (badge showing analyzed job count)
Interactions:
- Click project name to expand recent pipelines
- Click any pipeline to view full details
- Sort by various metrics
3. Contributors
Purpose: Team member statistics and activity
📸 Screenshot placeholder: dashboard-contributors.png
Description: Contributors page showing list of users with avatars, names, total pipeline counts, success rates, and activity timelines
Information Displayed:
- User avatar and display name
- Total pipelines triggered
- Success rate
- Average pipeline duration
- Recent activity timeline
Use Cases:
- Identify team members needing support (low success rates)
- Recognize high-performing contributors
- Track individual CI/CD impact
Pipeline Detail Dialog
Purpose: Comprehensive view of a single pipeline with all jobs, commits, and context
📸 Screenshot placeholder: dashboard-pipeline-jobs-graph.png
Description: Jobs tab showing horizontal pipeline graph with stage columns (VERSION, BUILD, TEST, PACKAGE, PUBLISH, TAG, RELEASE), purple bezier connector lines with arrowheads, and the Natural Order / Latest First toggle in the top right
Tabs:
Jobs Tab — Pipeline Dependency Graph
- Jobs displayed as a horizontal graph with each stage as a column
- SVG bezier connectors link jobs showing execution flow:
- Stage-to-stage connections (sequential pipeline flow)
needs-based connections (explicit job dependencies)
- Purple connector lines with arrowheads showing direction
- Stage order toggle in the top-right of the tab:
- Latest First — last stage appears on the left (default, saved to browser)
- Natural Order — first stage appears on the left
- Click any job node to view logs or trigger AI analysis
- AI analysis badges on previously analyzed jobs
Merge Requests Tab
- Associated MRs with branch info
- Author and merger details
- Labels and comment counts
- Expandable Commit Timeline:
- Commit title and message
- Author name with avatar
- Date/time of commit (formatted as “MM/dd HH:mm”)
- Clickable commit SHA - opens in GitLab
- Visual timeline connecting commits
- Expandable discussion comments
📸 Screenshot placeholder: dashboard-mr-commits.png
Description: Merge request commits expanded showing timeline with author, date/time, and clickable SHA links
- Commit Tab
- Full commit message
- Author information with avatar
- Commit date/time in header next to SHA
- Clickable commit SHA - opens in GitLab
- Email and timestamp details
📸 Screenshot placeholder: dashboard-commit-detail.png
Description: Commit tab showing header with clickable SHA, date/time, and full commit message
- People Tab
- All contributors to the pipeline
- Roles: trigger, author, merger
- Avatar and profile links
Header Information:
- Pipeline ID with status badge (success/partial success/failed)
- Project name and branch
- Clickable commit SHA in header - links to GitLab
- Duration and timing details
- “Open in GitLab” button to view full pipeline
4. AI History
Purpose: View all cached AI analyses
📸 Screenshot placeholder: dashboard-ai-history.png
Description: AI History page showing paginated list of expandable cards with cached AI analyses, project names, job details, and conversation histories
Features:
- Paginated list (20 per page)
- Expandable cards showing full analysis
- Project name and job details
- Conversation history (initial analysis + follow-ups)
- Quick actions: View pipeline details, View job logs
Navigation:
- Page through results
- Click any analysis to expand
- Access from any project/pipeline context
Real-time Updates
Server-Sent Events (SSE)
The dashboard uses SSE for live updates without manual refresh:
Update Frequency: Default 30 seconds (configurable with --interval)
What Updates:
- Pipeline status changes (success/failure/running)
- New pipelines
- Metric calculations
- Timeline chart
Connection Status:
- Visual indicator shows connection state
- Auto-reconnect on connection loss
- “Last updated” timestamp
Theme & Preferences
Dark/Light Mode
Toggle: Click sun/moon icon in top bar
Persistence: Saved in browser localStorage
Auto-detection: Respects system preference on first visit
Navigation Rail
States:
- Expanded: Shows icons + labels
- Collapsed: Icons only
Toggle: Click hamburger menu or arrow icon
Persistence: State saved across browser sessions
Top Bar Controls
Group Selector
Input Field: Type group ID or path, press Enter
Tree Browser: Click tree icon to navigate hierarchy
- Current group (highlighted)
- Parent group (if exists)
- Sibling groups
- Child groups (subgroups)
Dynamic Updates: Changing group refreshes data immediately
Time Period Selector
Dropdown Options:
- 1 day (24 hours)
- 3 days
- 7 days (default)
- 14 days
- 30 days
Dynamic Updates: Changing period refreshes data immediately
Settings
Click gear icon to access:
- AI system prompt customization
- Future settings options
Responsive Design
Desktop (>1200px)
- Full sidebar navigation
- Multi-column layouts
- All features visible
Tablet (768px - 1200px)
- Collapsible sidebar
- Hybrid layouts
- Touch-friendly interactions
Mobile (<768px)
- Stacked layouts
- Bottom navigation
- Simplified views
- Touch-optimized buttons
Browser Support
Recommended:
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
Required Features:
- ES2020 support
- Server-Sent Events (SSE)
- LocalStorage
- Flexbox/Grid
Performance
Optimization Features
Lazy Loading:
- Components load on demand
- Reduces initial load time
Virtual Scrolling:
- Large lists render only visible items
- Smooth performance with 1000+ pipelines
Efficient Updates:
- Only changed data re-renders
- Minimal DOM manipulation
Performance Tips
Reduce Time Range:
gitlab-summary serve --group my-org --since 1d
Increase Update Interval:
gitlab-summary serve --group my-org --interval 60
Filter to Specific Projects: Use dashboard filters to focus on relevant projects
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
g then o | Go to Overview page |
g then p | Go to Projects page |
g then c | Go to Contributors page |
g then h | Go to AI History page |
Esc | Close open dialogs |
? | Show keyboard shortcuts help |
Next Steps
- AI-Powered Analysis — Use Copilot for failure analysis
- Group Navigation — Navigate complex hierarchies
- API Reference — Integrate with other tools
- Troubleshooting — Common issues and solutions
See Also
- Getting Started — Quick start guide
- CLI Reference — Command-line options
- Dashboard AI Analysis — AI features deep dive