diff --git a/.gitignore b/.gitignore index 3b658a0..098b849 100644 --- a/.gitignore +++ b/.gitignore @@ -65,3 +65,8 @@ Thumbs.db # Skaffold cache .skaffold/ + +# Playwright artifacts +.playwright-mcp/ +playwright-report/ +test-results/ diff --git a/README.md b/README.md index c155a18..e23370c 100644 --- a/README.md +++ b/README.md @@ -53,14 +53,87 @@ - **🔄 Real-time** - Track events as they happen - **🎨 Customizable** - Extend and adapt to your needs -### Use Cases +--- + +## 🖥️ Interface + +### Dashboard + +Real-time overview with event velocity chart, environment breakdown, and live activity stream. + +![Dashboard](./docs/assets/screenshots/dashboard.png) + +### Timeline + +Chronological list of all events with advanced filtering by type, environment, priority and status. + +![Timeline](./docs/assets/screenshots/timeline.png) + +### Streamline + +Gantt-style visualization to detect and manage scheduling conflicts across services. + +![Streamline](./docs/assets/screenshots/streamline.png) + +### Calendar + +Monthly calendar view with per-day event details and overlap detection. + +![Calendar](./docs/assets/screenshots/calendar.png) + +### Overlaps + +Dedicated page for resolving scheduling conflicts with team contact information. + +![Overlaps](./docs/assets/screenshots/overlaps.png) + +### Insights + +Analytics over a configurable period — event distribution, top projects, and trends. + +![Insights](./docs/assets/screenshots/insights.png) + +### Catalog -- **Deployment Tracking** - Monitor all deployments across environments -- **Incident Management** - Track incidents from detection to resolution -- **Configuration Drift** - Detect and manage infrastructure drifts -- **RPA Monitoring** - Track robotic process automation executions -- **Service Catalog** - Maintain inventory of services, libraries, and modules -- **Distributed Locking** - Coordinate operations across services +Inventory of all services, modules, libraries, and containers with version and owner tracking. + +![Catalog](./docs/assets/screenshots/catalog.png) + +### Architecture + +Interactive dependency graph of services registered in the catalog. + +![Architecture](./docs/assets/screenshots/architecture.png) + +### Compliance + +Version compliance tracking to identify projects using outdated deliverables. + +![Compliance](./docs/assets/screenshots/compliance.png) + +### Locks + +View and manage deployment locks across all services and environments. + +![Locks](./docs/assets/screenshots/locks.png) + +### Drifts + +Track and manage configuration drifts with Jira integration. + +![Drifts](./docs/assets/screenshots/drifts.png) + +### RPA Usage + +Monitor Robotic Process Automation executions. + +![RPA Usage](./docs/assets/screenshots/rpa.png) + +### Links + +Quick access portal to all your tools and resources, synced from Homer. + +![Links](./docs/assets/screenshots/links.png) --- @@ -73,27 +146,32 @@ - **Search & Filter**: Powerful search across all event attributes - **Timeline View**: Visualize events chronologically - **Calendar View**: See events in a calendar format +- **Insights**: Analytics and trend visualization over configurable periods ### 📦 Service Catalog - **Inventory Management**: Track modules, libraries, projects, containers - **Version Tracking**: Monitor versions across your infrastructure - **Multi-Language**: Support for Go, Java, Python, JavaScript, and more - **Repository Links**: Direct links to GitHub/GitLab repositories -- **Documentation**: Link to service documentation +- **Architecture View**: Interactive service dependency graph +- **Compliance Tracking**: Identify projects with outdated deliverables ### 🔒 Distributed Locking - **Exclusive Locks**: Prevent concurrent operations - **Lock Ownership**: Track who owns which locks - **Automatic Cleanup**: Locks expire automatically - **Coordination**: Synchronize deployments and operations +- **Lock Management UI**: View and release locks directly from the interface ### 🎨 Modern UI -- **Dashboard**: Overview of recent events and statistics -- **Timeline**: Chronological event view with filtering +- **Collapsible Sidebar**: Clean navigation organized by domain +- **Dashboard**: Live activity stream with charts and statistics +- **Streamline**: Gantt chart with automatic overlap detection - **Calendar**: Monthly calendar view of events -- **Dark Mode**: Beautiful dark theme support +- **Dark / Light / System mode**: Three theme options - **Responsive**: Works on desktop, tablet, and mobile -- **Real-time**: Auto-refresh and live updates +- **Global Search**: `Ctrl+K` instant search across all data +- **Quick Actions**: Header shortcuts to create events, locks, drifts, and more ### 🔌 API & Integration - **gRPC API**: High-performance native API @@ -102,6 +180,7 @@ - **OpenAPI Spec**: Standard API specification - **MCP Server**: Model Context Protocol for AI agents (Kiro, Claude, etc.) - **Prometheus**: Built-in metrics endpoint +- **Homer Integration**: Sync links from your Homer dashboard --- @@ -179,7 +258,6 @@ npm run dev - [📚 Swagger UI](http://localhost:8080/docs) - Interactive API docs (when running) - [🤖 MCP Server](./docs/MCP_SERVER.md) - Model Context Protocol server for AI agents - --- ## 🏗️ Architecture diff --git a/docs/USER_GUIDE.md b/docs/USER_GUIDE.md index 046a866..fe7ac76 100644 --- a/docs/USER_GUIDE.md +++ b/docs/USER_GUIDE.md @@ -6,10 +6,13 @@ 2. [Getting Started](#getting-started) 3. [Dashboard](#dashboard) 4. [Events Management](#events-management) -5. [Catalog](#catalog) -6. [Drifts Management](#drifts-management) -7. [RPA Usage](#rpa-usage) -8. [Advanced Features](#advanced-features) +5. [Insights](#insights) +6. [Catalog](#catalog) +7. [Drifts Management](#drifts-management) +8. [RPA Usage](#rpa-usage) +9. [Locks](#locks) +10. [Links](#links) +11. [Advanced Features](#advanced-features) --- @@ -36,60 +39,91 @@ Navigate to your Tracker instance URL (e.g., `https://tracker.your-domain.com`) ### Navigation -The main navigation bar at the top provides access to all features: +The interface uses a **collapsible sidebar** on the left with four sections: +#### Operations - **Dashboard** - Overview of today's activity -- **Events** - Dropdown menu with 4 views: - - Timeline - Chronological list - - Streamline - Gantt chart view - - Calendar - Monthly calendar - - Overlaps - Conflict management +- **Timeline** - Chronological list of events +- **Streamline** - Gantt chart view +- **Calendar** - Monthly calendar +- **Overlaps** - Conflict management +- **Insights** - Analytics and statistics over a configurable period + +#### Services - **Catalog** - Service inventory +- **Architecture** - Service dependency visualization +- **Compliance** - Version compliance tracking + +#### Infrastructure - **Drifts** - Configuration drift tracking - **RPA Usage** - Automation monitoring +- **Locks** - Deployment and operation locks + +#### Resources +- **Links** - Quick access portal to tools and resources +- **Docs** - In-app documentation + +### Sidebar Controls + +- **Collapse sidebar** button (top of sidebar) to hide/show the sidebar +- **Events Channel** Slack link at the bottom of the sidebar + +### Header Bar + +The top header provides: +- **Search bar** (`Ctrl+K` or `⌘K`) - Global search across all data +- **Quick action buttons**: New Lock, New Drift, New RPA, New Service, New Event ### Theme Toggle -Click the sun/moon icon in the top-right corner to switch between light and dark modes. +Three theme modes are available at the bottom of the sidebar: +- **Light mode** +- **Dark mode** +- **System mode** (follows OS preference) --- ## Dashboard -The Dashboard provides a quick overview of today's events and system health. +The Dashboard (`/dashboard`) provides a real-time overview of today's events and system health. ### Statistics Cards Four main metrics are displayed: -1. **Total Events** - All events created today -2. **Success** - Successfully completed events -3. **Failures** - Failed or errored events -4. **In Progress** - Currently running events -5. **Overlaps** - Number of scheduling conflicts (with alert indicator) +1. **Total Events** - All events created today (with in-progress count) +2. **Success Rate (%)** - Percentage of successfully completed events +3. **Critical Failures** - Failed or errored events (with active failure indicator) +4. **Overlaps** - Number of scheduling conflicts detected + +### Event Velocity Chart -### Overlap Alert +A 24-hour bar chart showing events per hour with a **Live** indicator. Allows quick identification of activity peaks throughout the day. -When events overlap, a prominent orange banner appears showing: -- Number of conflicts detected -- List of overlapping event pairs -- Quick access to detailed information +### Environment Breakdown -### Event Distribution Charts +A pie chart showing the distribution of today's events by environment (Production, Pré-production, UAT / Recette, Dev / Integration) with percentages and counts. -Visual breakdown by: -- **Event Type** - Deployments, Operations, Drifts, Incidents -- **Status** - Success, Failure, In Progress +### Live Activity Stream + +A filterable table showing recent events with the following columns: +- **Event ID** - Short hash identifier +- **Title** - Event description +- **Type** - Deployment, Operation, RPA Usage, etc. +- **Service** - Affected service +- **Environment** - Deployment environment - **Priority** - P1 (Critical) to P5 (Low) -- **Environment** - Development, Production, etc. +- **Status** - Planned, Success, Failed, Warning, etc. +- **Timestamp** - Creation time -### Recent Events List +#### Quick Filters -The 10 most recent events with: -- Event type icon and badge -- Service name -- Environment, Priority, and Status badges -- Click to view full details +Above the table, filter buttons let you narrow results instantly: +- **Type**: Deployment, Operation, Drift, Incident +- **Status**: Success, Failed, In Progress, Warning, Open, Planned +- **Env**: Prod, Preprod, Dev + +Click **"View Historical Data Archive"** to go to the full Timeline view. --- @@ -146,7 +180,7 @@ Click any event card to open the detailed modal. #### View Modes -**Grions:** +**Groups:** - **By Service** - Events grouped by project/service - **By Environment** - Events grouped by environment @@ -268,6 +302,31 @@ Use this page to: --- +## Insights + +**Purpose:** Analytics and statistics on event activity over a configurable period + +### Filters + +- **Environment** - Filter by a specific environment (default: All) +- **Service** - Filter by a specific service (default: All) +- **Period** - Configurable period (default: last 30 days) + +### Statistics Cards + +Four event type breakdowns with count and percentage: +- **Deployments** +- **Incidents** +- **Operations** +- **Drifts** + +### Charts + +- **Top Projects** - Most active projects during the period +- **Event Distribution** - Visual breakdown of event types and statuses + +--- + ## Catalog **Purpose:** Inventory of all modules, libraries, and projects @@ -325,7 +384,45 @@ Columns: ### Adding to Catalog -Click **"Add to Catalog"** button to register a new service. +Click **"New Service"** in the header to register a new service. + +--- + +### Architecture View + +**Purpose:** Visualize service dependencies and relationships + +Accessible at `/catalog/dependencies`. Displays an interactive dependency graph of services registered in the catalog, with a **Legend** explaining the visual indicators. + +--- + +### Compliance View + +**Purpose:** Track which projects use outdated versions of their declared deliverables + +Accessible at `/catalog/version-compliance`. + +#### Statistics Cards + +- **Total Projects** - All projects in the catalog +- **Compliant** - Projects using up-to-date deliverable versions +- **Non-Compliant** - Projects with at least one outdated deliverable +- **No Deliverables** - Projects without declared deliverables + +#### Filters + +- **Search** - Filter by project or deliverable name +- **Type** - Package, Chart, Container, Module + +#### Compliance Table + +Columns: +- **Project** - Project name +- **Status** - Compliant / Non-Compliant / No Deliverables +- **Compliance** - Percentage of up-to-date deliverables +- **Deliverables** - Total count of declared deliverables +- **Outdated** - Count of outdated deliverables +- **Actions** - View Details button --- @@ -383,6 +480,10 @@ Filter drifts by: - Status - Service (from catalog) +### Creating a Drift + +Click **"New Drift"** in the header bar to manually create a drift event. + --- ## RPA Usage @@ -410,6 +511,56 @@ Each RPA operation displays: Same filtering capabilities as other event views. +### Creating an RPA Event + +Click **"New RPA"** in the header bar to manually create an RPA event. + +--- + +## Locks + +**Purpose:** View and manage deployment and operation locks across services + +Accessible at `/locks`. + +### Statistics + +Three summary cards: +- **Total Locks** - All active locks +- **Unique Services** - Number of distinct services with locks +- **Environments** - Number of environments affected + +### Lock Table + +Columns: +- **Service** - Locked service name +- **Environment** - Environment where the lock applies +- **Resource** - Type of locked resource (deployment, operation, etc.) +- **Locked By** - Username or team that acquired the lock +- **Created At** - Date and time the lock was created +- **Duration** - Time elapsed since lock creation +- **Actions** - **Unlock** button to release the lock + +### Creating a Lock + +Click **"New Lock"** in the header bar to acquire a new lock. + +--- + +## Links + +**Purpose:** Quick access portal to all your tools and resources, synced from Homer + +Accessible at `/links`. + +### Features + +- **Filter** bar (`Ctrl+K`) - Filter links by name +- **Refresh** button - Reload links from Homer +- **Add Link** button - Manually add a local link + +Links are organized by **categories** (e.g., team names, tool groups). When Homer is unavailable, local links are shown instead. + --- ## Advanced Features @@ -456,6 +607,7 @@ Click any event to open a detailed modal showing: ### Keyboard Shortcuts +- **Ctrl+K / ⌘K** - Open global search - **Escape** - Close modals - **F5** - Refresh page - **Ctrl/Cmd + F** - Browser search (works in tables) @@ -521,11 +673,11 @@ Overlaps are detected when: ### For Managers -1. **Review statistics** for trends +1. **Review Insights** for trends over 30 days 2. **Check overlap page** for coordination issues 3. **Monitor drift resolution** times 4. **Use calendar view** for planning -5. **Export data** for reports (coming soon) +5. **Check Compliance** to track outdated deliverables ### For Teams @@ -534,6 +686,7 @@ Overlaps are detected when: 3. **Link tickets** for traceability 4. **Use consistent naming** for services 5. **Document in event messages** for context +6. **Use Locks** to prevent concurrent deployments --- @@ -566,10 +719,18 @@ Submit via: ## Glossary +**Architecture** - Interactive visualization of service dependencies and relationships + +**Compliance** - Tracking whether projects use up-to-date versions of their declared deliverables + **Drift** - Unintended configuration change detected in infrastructure **Event** - Any tracked activity (deployment, operation, incident, etc.) +**Insights** - Analytics view showing event distribution and trends over a configurable period + +**Lock** - A mechanism to prevent concurrent deployments or operations on a service + **Overlap** - Two or more events running simultaneously **RPA** - Robotic Process Automation @@ -582,6 +743,5 @@ Submit via: --- -**Last Updated:** November 2024 -**Version:** 1.0 - +**Last Updated:** April 2026 +**Version:** 2.0 diff --git a/docs/assets/screenshots/architecture.png b/docs/assets/screenshots/architecture.png new file mode 100644 index 0000000..39d3651 Binary files /dev/null and b/docs/assets/screenshots/architecture.png differ diff --git a/docs/assets/screenshots/calendar.png b/docs/assets/screenshots/calendar.png new file mode 100644 index 0000000..03ea805 Binary files /dev/null and b/docs/assets/screenshots/calendar.png differ diff --git a/docs/assets/screenshots/catalog.png b/docs/assets/screenshots/catalog.png new file mode 100644 index 0000000..0a85f78 Binary files /dev/null and b/docs/assets/screenshots/catalog.png differ diff --git a/docs/assets/screenshots/compliance.png b/docs/assets/screenshots/compliance.png new file mode 100644 index 0000000..cfb3201 Binary files /dev/null and b/docs/assets/screenshots/compliance.png differ diff --git a/docs/assets/screenshots/dashboard.png b/docs/assets/screenshots/dashboard.png new file mode 100644 index 0000000..b333497 Binary files /dev/null and b/docs/assets/screenshots/dashboard.png differ diff --git a/docs/assets/screenshots/drifts.png b/docs/assets/screenshots/drifts.png new file mode 100644 index 0000000..673210b Binary files /dev/null and b/docs/assets/screenshots/drifts.png differ diff --git a/docs/assets/screenshots/insights.png b/docs/assets/screenshots/insights.png new file mode 100644 index 0000000..cb95b21 Binary files /dev/null and b/docs/assets/screenshots/insights.png differ diff --git a/docs/assets/screenshots/links.png b/docs/assets/screenshots/links.png new file mode 100644 index 0000000..c0cf296 Binary files /dev/null and b/docs/assets/screenshots/links.png differ diff --git a/docs/assets/screenshots/locks.png b/docs/assets/screenshots/locks.png new file mode 100644 index 0000000..b721627 Binary files /dev/null and b/docs/assets/screenshots/locks.png differ diff --git a/docs/assets/screenshots/overlaps.png b/docs/assets/screenshots/overlaps.png new file mode 100644 index 0000000..0fc1d17 Binary files /dev/null and b/docs/assets/screenshots/overlaps.png differ diff --git a/docs/assets/screenshots/rpa.png b/docs/assets/screenshots/rpa.png new file mode 100644 index 0000000..6b3d377 Binary files /dev/null and b/docs/assets/screenshots/rpa.png differ diff --git a/docs/assets/screenshots/streamline.png b/docs/assets/screenshots/streamline.png new file mode 100644 index 0000000..dfebe16 Binary files /dev/null and b/docs/assets/screenshots/streamline.png differ diff --git a/docs/assets/screenshots/timeline.png b/docs/assets/screenshots/timeline.png new file mode 100644 index 0000000..4a68d8d Binary files /dev/null and b/docs/assets/screenshots/timeline.png differ