47 lines
3.1 KiB
Markdown
47 lines
3.1 KiB
Markdown
|
# 6-Week MVP UX Specification
|
||
|
|
|
||
|
|
**Goal:** Modernize the nJAMS paradigm to deliver a slick, fast, and highly intuitive User Experience for Day 2 operations of Apache Camel solutions.
|
||
|
|
|
||
|
|
## Core Philosophy
|
||
|
|
- **Speed & Navigation:** Zero full-page reloads for drill-downs. Keyboard-centric navigation.
|
||
|
|
- **Context over Clatter:** Present information progressively. Give operators the high-level business context first, then allow seamless deep dives into technical execution.
|
||
|
|
- **Visual Clarity:** Replace static tables with visual topologies where relationships and flows matter.
|
||
|
|
|
||
|
|
## 1. Global "Business-Entity First" Dashboard
|
||
|
|
**The Old Paradigm:** A list of servers, nodes, or integration processes with green/red status lights.
|
||
|
|
**The New Paradigm:** An aggregated view of the business objects flowing through the system.
|
||
|
|
- **Key Elements:**
|
||
|
|
- High-level KPI cards (e.g., "Orders Processed", "Invoices Failed").
|
||
|
|
- A timeline or heatmap of activity spikes.
|
||
|
|
- Global Search prominently displayed, defaulting to Business Correlation IDs (e.g., "Order #12345").
|
||
|
|
- **MVP Scope:** A single dashboard page showing the health of the top 3-5 configured business flows and recent critical alerts.
|
||
|
|
|
||
|
|
## 2. Route Topology View
|
||
|
|
**The Old Paradigm:** A static, paginated table listing steps in an integration route.
|
||
|
|
**The New Paradigm:** A visual, interactive map of the Camel route.
|
||
|
|
- **Key Elements:**
|
||
|
|
- Nodes representing Camel components (Endpoints, Processors, EIPs).
|
||
|
|
- Edges showing the message flow, with color-coding for success/failure rates.
|
||
|
|
- Selecting a node highlights its metrics (throughput, error rate) without leaving the view.
|
||
|
|
- **MVP Scope:** Auto-generated Directed Acyclic Graph (DAG) visualizations for individual Camel routes, utilizing standard libraries (e.g., React Flow).
|
||
|
|
|
||
|
|
## 3. Trace/Payload Drill-down Drawer
|
||
|
|
**The Old Paradigm:** Clicking a trace opens a new page. Clicking a payload downloads a file or opens yet another page. Losing context is easy.
|
||
|
|
**The New Paradigm:** Contextual slide-outs (Drawers).
|
||
|
|
- **Key Elements:**
|
||
|
|
- When investigating a specific failed exchange from the Topology or Dashboard, a side drawer slides in from the right.
|
||
|
|
- The drawer contains tabs: **Headers**, **Properties**, **Payload**, **Stacktrace**.
|
||
|
|
- Users can view JSON/XML payloads with syntax highlighting directly in the drawer.
|
||
|
|
- Closing the drawer instantly returns the user to the exact context they were in (Dashboard or Topology).
|
||
|
|
- **MVP Scope:** Right-side slide-out component with basic syntax highlighting for standard payload types, preventing context loss during troubleshooting.
|
||
|
|
|
||
|
|
## The Power User Enabler: Cmd+K Command Palette
|
||
|
|
To tie it all together and ensure lightning-fast navigation for power users (IT Ops, Developers):
|
||
|
|
- A globally accessible `Cmd+K` (or `Ctrl+K`) modal.
|
||
|
|
- **Actions supported in MVP:**
|
||
|
|
- Search by Correlation ID: "Find Order 998877"
|
||
|
|
- Jump to Route: "Go to Route: SAP-to-Salesforce"
|
||
|
|
- Change environments: "Switch to Staging"
|
||
|
|
- Quick filters: "Show recent failures"
|
||
|
|
- **Why?** It drastically reduces click-depth and mouse travel, aligning with modern developer tool expectations (e.g., Linear, Raycast, Vscode).
|