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).

3.1 KiB Raw Blame History