@boundless-oss/atlas
Version:
Atlas - MCP Server for comprehensive startup project management
610 lines (566 loc) • 27.4 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atlas Dashboard</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/dashboard.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>
<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<div class="dashboard-container">
<!-- Header -->
<header class="dashboard-header">
<div class="header-left">
<h1><i class="fas fa-mountain"></i> Atlas Dashboard</h1>
<div class="connection-status" id="connectionStatus">
<i class="fas fa-circle"></i>
<span>Connecting...</span>
</div>
</div>
<div class="header-right">
<div class="last-updated" id="lastUpdated">
Last updated: --
</div>
<div class="auto-refresh-controls">
<button class="icon-btn active" id="autoRefreshToggle" title="Toggle auto-refresh">
<i class="fas fa-pause"></i>
</button>
<select id="refreshInterval" class="refresh-interval" title="Auto-refresh interval">
<option value="10">10s</option>
<option value="30" selected>30s</option>
<option value="60">1m</option>
<option value="300">5m</option>
</select>
</div>
<button class="refresh-btn" id="refreshBtn" title="Refresh now">
<i class="fas fa-sync-alt"></i>
</button>
</div>
</header>
<!-- Navigation -->
<nav class="dashboard-nav">
<button class="nav-btn active" data-section="overview">
<i class="fas fa-tachometer-alt"></i>
Overview
</button>
<button class="nav-btn" data-section="performance">
<i class="fas fa-chart-line"></i>
Performance
</button>
<button class="nav-btn" data-section="agile">
<i class="fas fa-project-diagram"></i>
Agile Board
</button>
<button class="nav-btn" data-section="epics">
<i class="fas fa-layer-group"></i>
Epics
</button>
<button class="nav-btn" data-section="timeline">
<i class="fas fa-calendar-alt"></i>
Timeline
</button>
<button class="nav-btn" data-section="security">
<i class="fas fa-shield-alt"></i>
Security
</button>
<button class="nav-btn" data-section="errors">
<i class="fas fa-bug"></i>
Errors
</button>
</nav>
<!-- Main Content -->
<main class="dashboard-main">
<!-- Overview Section -->
<section id="overview" class="dashboard-section active">
<div class="section-header">
<h2>System Overview</h2>
<div class="system-health" id="systemHealth">
<i class="fas fa-heart"></i>
<span>Checking...</span>
</div>
</div>
<div class="overview-grid">
<!-- System Metrics Cards -->
<div class="metric-card">
<div class="metric-header">
<h3>Performance</h3>
<i class="fas fa-tachometer-alt"></i>
</div>
<div class="metric-value" id="overviewPerformance">--</div>
<div class="metric-label">Success Rate</div>
<div class="metric-trend" id="performanceTrend">--</div>
</div>
<div class="metric-card">
<div class="metric-header">
<h3>Security</h3>
<i class="fas fa-shield-alt"></i>
</div>
<div class="metric-value" id="overviewSecurity">--</div>
<div class="metric-label">Security Score</div>
<div class="metric-trend" id="securityTrend">--</div>
</div>
<div class="metric-card">
<div class="metric-header">
<h3>Errors</h3>
<i class="fas fa-bug"></i>
</div>
<div class="metric-value" id="overviewErrors">--</div>
<div class="metric-label">Last 24h</div>
<div class="metric-trend" id="errorsTrend">--</div>
</div>
<div class="metric-card">
<div class="metric-header">
<h3>Sprint Progress</h3>
<i class="fas fa-project-diagram"></i>
</div>
<div class="metric-value" id="overviewSprint">--</div>
<div class="metric-label">Stories Complete</div>
<div class="metric-trend" id="sprintTrend">--</div>
</div>
<div class="metric-card">
<div class="metric-header">
<h3>Team Velocity</h3>
<i class="fas fa-tachometer-alt"></i>
</div>
<div class="metric-value" id="teamVelocity">--</div>
<div class="metric-label">Points/Sprint</div>
<div class="metric-trend" id="velocityTrend">--</div>
</div>
<div class="metric-card">
<div class="metric-header">
<h3>Cycle Time</h3>
<i class="fas fa-clock"></i>
</div>
<div class="metric-value" id="avgCycleTime">--</div>
<div class="metric-label">Days</div>
<div class="metric-trend" id="cycleTimeTrend">--</div>
</div>
</div>
<!-- Phase 2 Analytics Charts -->
<div class="analytics-section">
<div class="chart-container">
<h3>Team Velocity Trend</h3>
<canvas id="overviewVelocityChart"></canvas>
</div>
<div class="chart-container">
<h3>Cross-Sprint Analytics</h3>
<canvas id="overviewCrossSprintChart"></canvas>
</div>
</div>
<!-- Recent Activity -->
<div class="activity-section">
<h3>Recent Activity</h3>
<div class="activity-feed" id="activityFeed">
<div class="activity-item loading">
<i class="fas fa-spinner fa-spin"></i>
Loading recent activity...
</div>
</div>
</div>
</section>
<!-- Performance Section -->
<section id="performance" class="dashboard-section">
<div class="section-header">
<h2>Performance Analytics</h2>
<div class="section-controls">
<select id="performanceTimeRange">
<option value="1h">Last Hour</option>
<option value="24h" selected>Last 24 Hours</option>
<option value="7d">Last 7 Days</option>
<option value="30d">Last 30 Days</option>
</select>
</div>
</div>
<div class="performance-grid">
<div class="chart-container">
<h3>Tool Usage</h3>
<canvas id="toolUsageChart"></canvas>
</div>
<div class="chart-container">
<h3>Response Times</h3>
<canvas id="responseTimeChart"></canvas>
</div>
<div class="chart-container">
<h3>Success Rate Trends</h3>
<canvas id="successRateChart"></canvas>
</div>
<div class="chart-container">
<h3>Quality Scores</h3>
<canvas id="qualityChart"></canvas>
</div>
</div>
<!-- Performance Alerts -->
<div class="alerts-section">
<h3>Performance Alerts</h3>
<div class="alerts-container" id="performanceAlerts">
<div class="alert-item loading">
<i class="fas fa-spinner fa-spin"></i>
Loading alerts...
</div>
</div>
</div>
</section>
<!-- Agile Board Section -->
<section id="agile" class="dashboard-section">
<div class="section-header">
<h2>Sprint Board</h2>
<div class="section-controls">
<select id="sprintSelector">
<option value="">Loading sprints...</option>
</select>
<button id="createSprintBtn" class="primary-btn" title="Create new sprint">
<i class="fas fa-plus"></i> Sprint
</button>
<button id="createStoryBtn" class="primary-btn" title="Create new story">
<i class="fas fa-plus"></i> Story
</button>
<button id="refreshBoard" class="icon-btn" title="Refresh board">
<i class="fas fa-sync-alt"></i>
</button>
</div>
</div>
<!-- Sprint Info -->
<div class="sprint-info" id="sprintInfo">
<div class="sprint-details loading">
<i class="fas fa-spinner fa-spin"></i>
Loading sprint information...
</div>
</div>
<!-- Kanban Board -->
<div class="board-container" id="kanbanBoard">
<div class="board-column" data-status="backlog">
<div class="column-header">
<h3>Backlog</h3>
<span class="story-count">0</span>
</div>
<div class="cards-container" id="backlogCards">
<div class="loading-card">
<i class="fas fa-spinner fa-spin"></i>
Loading stories...
</div>
</div>
</div>
<div class="board-column" data-status="todo">
<div class="column-header">
<h3>To Do</h3>
<span class="story-count">0</span>
</div>
<div class="cards-container" id="todoCards">
<div class="loading-card">
<i class="fas fa-spinner fa-spin"></i>
Loading stories...
</div>
</div>
</div>
<div class="board-column" data-status="in-progress">
<div class="column-header">
<h3>In Progress</h3>
<span class="story-count">0</span>
</div>
<div class="cards-container" id="inProgressCards">
<div class="loading-card">
<i class="fas fa-spinner fa-spin"></i>
Loading stories...
</div>
</div>
</div>
<div class="board-column" data-status="done">
<div class="column-header">
<h3>Done</h3>
<span class="story-count">0</span>
</div>
<div class="cards-container" id="doneCards">
<div class="loading-card">
<i class="fas fa-spinner fa-spin"></i>
Loading stories...
</div>
</div>
</div>
</div>
<!-- Sprint Analytics -->
<div class="sprint-analytics">
<div class="chart-container">
<h3>Burndown Chart</h3>
<canvas id="burndownChart"></canvas>
</div>
<div class="chart-container">
<h3>Velocity Trends</h3>
<canvas id="velocityChart"></canvas>
</div>
</div>
</section>
<!-- Epics Section -->
<section id="epics" class="dashboard-section">
<div class="section-header">
<h2>Epic Overview</h2>
<div class="section-controls">
<button id="createEpicBtn" class="primary-btn">
<i class="fas fa-plus"></i>
Create Epic
</button>
<select id="epicFilter">
<option value="all">All Epics</option>
<option value="planned">Planned</option>
<option value="active">Active</option>
<option value="completed">Completed</option>
</select>
</div>
</div>
<!-- Epic Stats -->
<div class="epic-stats">
<div class="stat-card">
<div class="stat-icon">
<i class="fas fa-layer-group"></i>
</div>
<div class="stat-content">
<div class="stat-value" id="totalEpics">0</div>
<div class="stat-label">Total Epics</div>
</div>
</div>
<div class="stat-card">
<div class="stat-icon">
<i class="fas fa-clock"></i>
</div>
<div class="stat-content">
<div class="stat-value" id="activeEpics">0</div>
<div class="stat-label">Active</div>
</div>
</div>
<div class="stat-card">
<div class="stat-icon">
<i class="fas fa-tasks"></i>
</div>
<div class="stat-content">
<div class="stat-value" id="totalStories">0</div>
<div class="stat-label">Total Stories</div>
</div>
</div>
<div class="stat-card">
<div class="stat-icon">
<i class="fas fa-percentage"></i>
</div>
<div class="stat-content">
<div class="stat-value" id="avgProgress">0%</div>
<div class="stat-label">Avg Progress</div>
</div>
</div>
</div>
<!-- Epic Cards Grid -->
<div class="epics-grid" id="epicsGrid">
<div class="loading-state">
<i class="fas fa-spinner fa-spin"></i>
<p>Loading epics...</p>
</div>
</div>
<!-- Epic Progress Chart -->
<div class="epic-analytics">
<div class="chart-container">
<h3>Epic Progress Overview</h3>
<canvas id="epicProgressChart"></canvas>
</div>
<div class="chart-container">
<h3>Story Distribution</h3>
<canvas id="storyDistributionChart"></canvas>
</div>
</div>
</section>
<!-- Sprint & Epic Timeline Section -->
<section id="timeline" class="dashboard-section">
<div class="section-header">
<h2>Sprint & Epic Timeline</h2>
<div class="section-controls">
<select id="timelineRange">
<option value="current">Current Quarter</option>
<option value="next">Next Quarter</option>
<option value="year">Full Year</option>
</select>
<button id="refreshTimeline" class="icon-btn">
<i class="fas fa-sync-alt"></i>
</button>
</div>
</div>
<div class="timeline-container">
<div class="timeline-legend">
<div class="legend-item">
<span class="legend-color sprint-planning"></span>
<span>Sprint Planning</span>
</div>
<div class="legend-item">
<span class="legend-color sprint-active"></span>
<span>Sprint Active</span>
</div>
<div class="legend-item">
<span class="legend-color sprint-completed"></span>
<span>Sprint Completed</span>
</div>
<div class="legend-item">
<span class="legend-color epic-progress"></span>
<span>Epic Progress</span>
</div>
</div>
<div class="timeline-chart-container">
<canvas id="sprintEpicTimeline"></canvas>
</div>
<div class="timeline-details" id="timelineDetails">
<p class="text-muted">Hover over timeline items to see details</p>
</div>
</div>
</section>
<!-- Security Section -->
<section id="security" class="dashboard-section">
<div class="section-header">
<h2>Security Center</h2>
<div class="security-status" id="securityStatus">
<i class="fas fa-shield-alt"></i>
<span>Checking security status...</span>
</div>
</div>
<div class="security-grid">
<!-- Security Overview -->
<div class="security-card">
<h3>Security Overview</h3>
<div class="security-metrics" id="securityMetrics">
<div class="security-metric">
<span class="metric-label">Security Score</span>
<span class="metric-value" id="securityScore">--</span>
</div>
<div class="security-metric">
<span class="metric-label">Recent Events</span>
<span class="metric-value" id="recentEvents">--</span>
</div>
<div class="security-metric">
<span class="metric-label">Pending Approvals</span>
<span class="metric-value" id="pendingApprovals">--</span>
</div>
</div>
</div>
<!-- Security Alerts -->
<div class="security-card">
<h3>Security Alerts</h3>
<div class="alerts-list" id="securityAlerts">
<div class="alert-item loading">
<i class="fas fa-spinner fa-spin"></i>
Loading security alerts...
</div>
</div>
</div>
<!-- Approval Requests -->
<div class="security-card full-width">
<h3>Pending Approvals</h3>
<div class="approvals-list" id="approvalsList">
<div class="approval-item loading">
<i class="fas fa-spinner fa-spin"></i>
Loading approval requests...
</div>
</div>
</div>
</div>
</section>
<!-- Errors Section -->
<section id="errors" class="dashboard-section">
<div class="section-header">
<h2>Error Analysis</h2>
<div class="section-controls">
<select id="errorTimeRange">
<option value="1h">Last Hour</option>
<option value="24h" selected>Last 24 Hours</option>
<option value="7d">Last 7 Days</option>
</select>
</div>
</div>
<div class="errors-grid">
<!-- Error Statistics -->
<div class="error-stats" id="errorStats">
<div class="stat-card">
<h4>Total Errors</h4>
<span class="stat-value" id="totalErrors">--</span>
</div>
<div class="stat-card">
<h4>Error Rate</h4>
<span class="stat-value" id="errorRate">--</span>
</div>
<div class="stat-card">
<h4>Critical Errors</h4>
<span class="stat-value" id="criticalErrors">--</span>
</div>
<div class="stat-card">
<h4>Patterns Found</h4>
<span class="stat-value" id="errorPatterns">--</span>
</div>
</div>
<!-- Error Charts -->
<div class="chart-container">
<h3>Error Trends</h3>
<canvas id="errorTrendsChart"></canvas>
</div>
<div class="chart-container">
<h3>Error Types</h3>
<canvas id="errorTypesChart"></canvas>
</div>
</div>
<!-- Error Timeline -->
<div class="timeline-section">
<h3>Recent Errors</h3>
<div class="error-timeline" id="errorTimeline">
<div class="timeline-item loading">
<i class="fas fa-spinner fa-spin"></i>
Loading error timeline...
</div>
</div>
</div>
</section>
</main>
</div>
<!-- Unified Story Modal -->
<div id="storyDetailModal" class="modal" style="display: none;">
<div class="modal-backdrop"></div>
<div class="modal-container">
<div class="modal-header">
<h2 class="modal-title">Story Details</h2>
<div class="modal-header-actions">
<button class="btn-icon edit-mode-toggle" id="editModeToggle" title="Edit Story" style="display: none;">
<i class="fas fa-edit"></i>
</button>
<button class="modal-close" id="closeModal">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="modal-content" id="storyDetailContent">
<!-- Story details will be dynamically loaded here -->
</div>
<div class="modal-footer" id="storyModalFooter" style="display: none;">
<button class="btn btn-secondary" id="cancelEditBtn">Cancel</button>
<button class="btn btn-primary" id="saveStoryBtn">Save Changes</button>
</div>
</div>
</div>
<!-- Epic Detail Modal -->
<div id="epicDetailModal" class="modal" style="display: none;">
<div class="modal-backdrop"></div>
<div class="modal-container modal-large">
<div class="modal-header">
<h2 class="modal-title">Epic Details</h2>
<button class="modal-close" id="closeEpicModal">
<i class="fas fa-times"></i>
</button>
</div>
<div class="modal-content" id="epicDetailContent">
<!-- Epic details will be dynamically loaded here -->
</div>
</div>
</div>
<!-- Scripts -->
<script src="js/searchable-dropdown.js"></script>
<script src="js/dashboard.js"></script>
<script src="js/charts.js"></script>
<script src="js/agile-board.js"></script>
</body>
</html>