2077 lines
80 KiB
HTML
2077 lines
80 KiB
HTML
<!--
|
|
============================================================================
|
|
CAMELEER3 v2 — Operations Dashboard (Light Theme)
|
|
============================================================================
|
|
|
|
DESIGN NOTES — SYNTHESIS RATIONALE
|
|
===================================
|
|
|
|
What was taken from each expert:
|
|
|
|
FROM DESIGN EXPERT:
|
|
- "Desert Dusk" warm color palette: sandstone base (#F5F2ED), amber-gold
|
|
accent (#C6820E), warm charcoal sidebar (#2C2520). This is distinctive
|
|
and avoids the generic blue/gray of every other monitoring tool.
|
|
- Typography: DM Sans body + JetBrains Mono for data. Four-level hierarchy.
|
|
- The camel SVG silhouette logo and "cameleer" brand identity.
|
|
- Shadow system, card design with subtle borders, duration bar sparklines.
|
|
- Compact 40px rows for information density.
|
|
|
|
FROM USABILITY EXPERT:
|
|
- Information hierarchy: health strip -> filters -> results -> detail panel.
|
|
- Master-detail pattern: clicking a row opens a detail panel on the right
|
|
WITHOUT navigating away from the list. Tabs for progressive disclosure
|
|
(Overview / Processors / Exchange / Error).
|
|
- Filter interaction: status pills with live counts, time preset chips,
|
|
removable active filter tags so operator always knows what's filtered.
|
|
- Relative timestamps ("2 min ago") with absolute on second line.
|
|
- Keyboard shortcut hints bar at bottom.
|
|
- Failed row accent border (left-side colored strip).
|
|
- Processor Gantt timeline in detail panel.
|
|
|
|
FROM OPERATOR EXPERT:
|
|
- Business IDs as first-class columns (Order ID, Source System) — operators
|
|
get calls about "order OP-88421", not about correlation IDs.
|
|
- Inline error previews in table rows — no need to click each failed row.
|
|
- SLA threshold indicators on metrics (colored + "SLA 300ms" line on chart).
|
|
- Agent health panel in sidebar area.
|
|
- Trend direction arrows on all metric cards.
|
|
- Top error pattern grouping panel.
|
|
- Shift-aware context ("since 06:00", overnight vs today).
|
|
- Duration color-coded by SLA (fast/normal/slow/breach).
|
|
|
|
KEY DESIGN DECISIONS:
|
|
1. Three-column layout: narrow sidebar (220px, warm charcoal) for app/route
|
|
tree | main content (health + filters + table + metrics) | collapsible
|
|
detail panel (400px, slides in on row select).
|
|
2. Light theme uses warm parchment (#F5F2ED) not cold white. Status colors
|
|
are warm variants (olive green, burnt orange, terracotta, teal).
|
|
3. Table combines business context (Order ID) WITH technical context (Route,
|
|
Duration) in a single scannable row. Error rows show inline preview below.
|
|
4. Metrics charts at bottom with SLA threshold lines from operator expert.
|
|
5. Agent health integrated into sidebar bottom section.
|
|
|
|
WHAT MAKES THIS BETTER THAN EACH INDIVIDUAL:
|
|
- Design expert had beautiful visuals but lacked business context columns
|
|
and detail panel. No error previews, no SLA awareness.
|
|
- Usability expert had excellent interaction patterns but used a dark theme
|
|
that doesn't match the brand. No business IDs, no agent health.
|
|
- Operator expert had the best data model but lacked the sidebar navigation,
|
|
detail panel, and the warm brand identity.
|
|
- This synthesis combines all three: warm brand identity + master-detail UX
|
|
+ operator-grade data model with business context.
|
|
|
|
============================================================================
|
|
-->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=1920">
|
|
<title>Cameleer3 — Operations Dashboard</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
/* ==========================================================================
|
|
RESET & FOUNDATIONS
|
|
========================================================================== */
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root {
|
|
/* Surface palette (warm parchment) */
|
|
--bg-body: #F5F2ED;
|
|
--bg-surface: #FFFFFF;
|
|
--bg-raised: #FAF8F5;
|
|
--bg-inset: #F0EDE8;
|
|
--bg-hover: #F5F0EA;
|
|
|
|
/* Sidebar (warm charcoal) */
|
|
--sidebar-bg: #2C2520;
|
|
--sidebar-hover: #3A322C;
|
|
--sidebar-active: #4A3F38;
|
|
--sidebar-text: #BFB5A8;
|
|
--sidebar-muted: #7A6F63;
|
|
|
|
/* Text */
|
|
--text-primary: #1A1612;
|
|
--text-secondary: #5C5347;
|
|
--text-muted: #9C9184;
|
|
--text-faint: #C4BAB0;
|
|
|
|
/* Borders */
|
|
--border: #E4DFD8;
|
|
--border-subtle: #EDE9E3;
|
|
|
|
/* Brand accent (amber-gold) */
|
|
--amber: #C6820E;
|
|
--amber-light: #F0D9A8;
|
|
--amber-bg: #FDF6E9;
|
|
--amber-deep: #8B5A06;
|
|
|
|
/* Status colors (warm) */
|
|
--success: #3D7C47;
|
|
--success-bg: #EFF7F0;
|
|
--success-border: #C2DFC6;
|
|
--warning: #C27516;
|
|
--warning-bg: #FEF5E7;
|
|
--warning-border: #F0D9A8;
|
|
--error: #C0392B;
|
|
--error-bg: #FDF0EE;
|
|
--error-border: #F0C4BE;
|
|
--running: #1A7F8E;
|
|
--running-bg: #E8F5F7;
|
|
--running-border: #B0DDE4;
|
|
|
|
/* Typography */
|
|
--font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
|
|
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
|
|
|
/* Spacing & Radii */
|
|
--radius-sm: 5px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 1px 2px rgba(44, 37, 32, 0.06);
|
|
--shadow-md: 0 2px 8px rgba(44, 37, 32, 0.08);
|
|
--shadow-lg: 0 4px 16px rgba(44, 37, 32, 0.10);
|
|
--shadow-card: 0 1px 3px rgba(44, 37, 32, 0.04), 0 0 0 1px rgba(44, 37, 32, 0.04);
|
|
}
|
|
|
|
html { font-size: 14px; }
|
|
body {
|
|
font-family: var(--font-body);
|
|
background: var(--bg-body);
|
|
color: var(--text-primary);
|
|
line-height: 1.5;
|
|
min-height: 100vh;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
|
|
|
|
/* ==========================================================================
|
|
ANIMATIONS
|
|
========================================================================== */
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(6px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes pulse {
|
|
0%, 100% { box-shadow: 0 0 0 0 rgba(61, 124, 71, 0.35); }
|
|
50% { box-shadow: 0 0 0 5px rgba(61, 124, 71, 0); }
|
|
}
|
|
@keyframes errorPulse {
|
|
0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.2); }
|
|
50% { box-shadow: 0 0 0 4px rgba(192, 57, 43, 0); }
|
|
}
|
|
@keyframes slideIn {
|
|
from { opacity: 0; transform: translateX(20px); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
.animate-in { animation: fadeIn 0.3s ease-out both; }
|
|
.delay-1 { animation-delay: 0.04s; }
|
|
.delay-2 { animation-delay: 0.08s; }
|
|
.delay-3 { animation-delay: 0.12s; }
|
|
.delay-4 { animation-delay: 0.16s; }
|
|
.delay-5 { animation-delay: 0.20s; }
|
|
|
|
/* ==========================================================================
|
|
LAYOUT: 3-column (sidebar | main | detail)
|
|
========================================================================== */
|
|
.app {
|
|
display: flex;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
SIDEBAR (220px, warm charcoal)
|
|
========================================================================== */
|
|
.sidebar {
|
|
width: 220px;
|
|
flex-shrink: 0;
|
|
background: var(--sidebar-bg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sidebar-logo {
|
|
padding: 16px 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
border-bottom: 1px solid rgba(255,255,255,0.06);
|
|
}
|
|
|
|
.sidebar-logo .brand {
|
|
font-family: var(--font-mono);
|
|
font-weight: 600;
|
|
font-size: 15px;
|
|
color: var(--amber-light);
|
|
letter-spacing: -0.3px;
|
|
}
|
|
|
|
.sidebar-logo .version {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
color: var(--sidebar-muted);
|
|
margin-left: 2px;
|
|
}
|
|
|
|
.sidebar-search {
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.sidebar-search input {
|
|
width: 100%;
|
|
background: rgba(255,255,255,0.06);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
border-radius: var(--radius-sm);
|
|
padding: 6px 10px 6px 28px;
|
|
color: var(--sidebar-text);
|
|
font-family: var(--font-body);
|
|
font-size: 12px;
|
|
outline: none;
|
|
transition: border-color 0.15s;
|
|
}
|
|
|
|
.sidebar-search input::placeholder { color: var(--sidebar-muted); }
|
|
.sidebar-search input:focus { border-color: rgba(198, 130, 14, 0.4); }
|
|
|
|
.sidebar-search-wrap { position: relative; }
|
|
.sidebar-search-wrap .search-icon {
|
|
position: absolute;
|
|
left: 9px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: var(--sidebar-muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.sidebar-section {
|
|
padding: 14px 12px 5px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1.2px;
|
|
color: var(--sidebar-muted);
|
|
}
|
|
|
|
.sidebar-items {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 0 6px;
|
|
}
|
|
|
|
.sidebar-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 7px 12px;
|
|
border-radius: var(--radius-sm);
|
|
color: var(--sidebar-text);
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
transition: all 0.12s;
|
|
text-decoration: none;
|
|
border-left: 3px solid transparent;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
.sidebar-item:hover { background: var(--sidebar-hover); color: #E8DFD4; }
|
|
.sidebar-item.active { background: var(--sidebar-active); color: var(--amber-light); border-left-color: var(--amber); }
|
|
|
|
.sidebar-item .health {
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.health-live { background: #5DB866; box-shadow: 0 0 6px rgba(93, 184, 102, 0.4); }
|
|
.health-stale { background: var(--warning); }
|
|
.health-dead { background: var(--sidebar-muted); }
|
|
|
|
.sidebar-item .item-info { flex: 1; min-width: 0; }
|
|
.sidebar-item .item-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.sidebar-item .item-meta { font-size: 11px; color: var(--sidebar-muted); font-family: var(--font-mono); }
|
|
|
|
.sidebar-item .item-count {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--sidebar-muted);
|
|
background: rgba(255,255,255,0.06);
|
|
padding: 1px 6px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.sidebar-item.active .item-count { background: rgba(198, 130, 14, 0.2); color: var(--amber-light); }
|
|
|
|
.sidebar-divider {
|
|
height: 1px;
|
|
background: rgba(255,255,255,0.06);
|
|
margin: 6px 12px;
|
|
}
|
|
|
|
/* Agent health in sidebar */
|
|
.sidebar-agents-header {
|
|
padding: 14px 12px 6px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1.2px;
|
|
color: var(--sidebar-muted);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.sidebar-agent-badge {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
padding: 1px 6px;
|
|
border-radius: 10px;
|
|
background: rgba(93, 184, 102, 0.15);
|
|
color: #5DB866;
|
|
}
|
|
|
|
.agent-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 12px;
|
|
margin: 0 6px 2px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 11px;
|
|
color: var(--sidebar-text);
|
|
transition: background 0.1s;
|
|
}
|
|
|
|
.agent-item:hover { background: var(--sidebar-hover); }
|
|
|
|
.agent-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.agent-info { flex: 1; min-width: 0; }
|
|
.agent-name { font-family: var(--font-mono); font-size: 11px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.agent-detail { font-size: 10px; color: var(--sidebar-muted); }
|
|
|
|
.agent-stats-col {
|
|
text-align: right;
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
color: var(--sidebar-muted);
|
|
}
|
|
|
|
.agent-tps { color: var(--sidebar-text); }
|
|
|
|
.sidebar-bottom {
|
|
border-top: 1px solid rgba(255,255,255,0.06);
|
|
padding: 6px;
|
|
}
|
|
|
|
.sidebar-bottom .sidebar-item {
|
|
font-size: 12px;
|
|
color: var(--sidebar-muted);
|
|
border-left: 3px solid transparent;
|
|
}
|
|
|
|
.sidebar-bottom .sidebar-item:hover { color: var(--sidebar-text); }
|
|
|
|
/* ==========================================================================
|
|
MAIN CONTENT AREA
|
|
========================================================================== */
|
|
.main {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Top bar */
|
|
.topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 0 24px;
|
|
height: 48px;
|
|
flex-shrink: 0;
|
|
background: var(--bg-surface);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.topbar-breadcrumb {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.topbar-breadcrumb .crumb-active { color: var(--text-primary); font-weight: 600; }
|
|
.topbar-breadcrumb .crumb-sep { color: var(--text-faint); font-size: 11px; }
|
|
|
|
.topbar-search {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 5px 12px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--bg-raised);
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: border-color 0.15s;
|
|
min-width: 280px;
|
|
}
|
|
|
|
.topbar-search:hover { border-color: var(--text-faint); }
|
|
|
|
.topbar-kbd {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border);
|
|
padding: 0 4px;
|
|
border-radius: 3px;
|
|
color: var(--text-faint);
|
|
margin-left: auto;
|
|
}
|
|
|
|
.topbar-right {
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.topbar-env {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
padding: 3px 10px;
|
|
border-radius: 10px;
|
|
background: var(--success-bg);
|
|
color: var(--success);
|
|
border: 1px solid var(--success-border);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.topbar-shift {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
padding: 3px 10px;
|
|
border-radius: 10px;
|
|
background: var(--running-bg);
|
|
color: var(--running);
|
|
border: 1px solid var(--running-border);
|
|
}
|
|
|
|
.topbar-user {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.topbar-avatar {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
background: var(--amber-bg);
|
|
color: var(--amber);
|
|
font-weight: 600;
|
|
font-size: 11px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid var(--amber-light);
|
|
}
|
|
|
|
/* Content scroll container */
|
|
.content-wrap {
|
|
flex: 1;
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 20px 24px 40px;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
HEALTH STATUS BAR (from UX expert hierarchy + operator SLA awareness)
|
|
========================================================================== */
|
|
.health-strip {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 10px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.stat-card {
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-md);
|
|
padding: 12px 16px;
|
|
box-shadow: var(--shadow-card);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: box-shadow 0.15s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.stat-card:hover { box-shadow: var(--shadow-md); }
|
|
|
|
.stat-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
}
|
|
|
|
.stat-card.card-amber::before { background: linear-gradient(90deg, var(--amber), transparent); }
|
|
.stat-card.card-green::before { background: linear-gradient(90deg, var(--success), transparent); }
|
|
.stat-card.card-error::before { background: linear-gradient(90deg, var(--error), transparent); }
|
|
.stat-card.card-teal::before { background: linear-gradient(90deg, var(--running), transparent); }
|
|
.stat-card.card-warn::before { background: linear-gradient(90deg, var(--warning), transparent); }
|
|
|
|
.stat-card.has-errors { animation: errorPulse 2.5s ease-in-out infinite; }
|
|
|
|
.stat-label {
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.6px;
|
|
color: var(--text-muted);
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.stat-value-row {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 6px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-family: var(--font-mono);
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.stat-value.val-amber { color: var(--amber); }
|
|
.stat-value.val-green { color: var(--success); }
|
|
.stat-value.val-error { color: var(--error); }
|
|
.stat-value.val-teal { color: var(--running); }
|
|
.stat-value.val-warn { color: var(--warning); }
|
|
|
|
.stat-unit {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.stat-trend {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.trend-up-good { color: var(--success); }
|
|
.trend-up-bad { color: var(--error); }
|
|
.trend-down-good { color: var(--success); }
|
|
.trend-down-bad { color: var(--error); }
|
|
.trend-flat { color: var(--text-muted); }
|
|
|
|
.stat-detail {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.stat-detail strong { color: var(--text-secondary); }
|
|
|
|
/* ==========================================================================
|
|
FILTER BAR (from UX expert: pills + time presets + active tags)
|
|
========================================================================== */
|
|
.filter-section {
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-lg);
|
|
padding: 12px 16px;
|
|
margin-bottom: 16px;
|
|
box-shadow: var(--shadow-card);
|
|
}
|
|
|
|
.filter-row {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.filter-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.filter-label {
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
color: var(--text-muted);
|
|
white-space: nowrap;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.filter-sep {
|
|
width: 1px;
|
|
height: 22px;
|
|
background: var(--border);
|
|
margin: 0 6px;
|
|
}
|
|
|
|
.filter-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 4px 12px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 20px;
|
|
background: var(--bg-surface);
|
|
color: var(--text-secondary);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.12s;
|
|
white-space: nowrap;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.filter-pill:hover { border-color: var(--text-faint); background: var(--bg-raised); }
|
|
|
|
.filter-pill.active {
|
|
background: var(--amber-bg);
|
|
border-color: var(--amber-light);
|
|
color: var(--amber-deep);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.filter-pill.active-green { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
|
|
.filter-pill.active-error { background: var(--error-bg); border-color: var(--error-border); color: var(--error); }
|
|
.filter-pill.active-teal { background: var(--running-bg); border-color: var(--running-border); color: var(--running); }
|
|
|
|
.pill-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
}
|
|
|
|
.pill-count {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.filter-input-wrap {
|
|
position: relative;
|
|
flex: 1;
|
|
max-width: 360px;
|
|
}
|
|
|
|
.filter-input-wrap .fi-icon {
|
|
position: absolute;
|
|
left: 10px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: var(--text-faint);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.filter-input {
|
|
width: 100%;
|
|
padding: 6px 12px 6px 30px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--bg-raised);
|
|
color: var(--text-primary);
|
|
font-family: var(--font-body);
|
|
font-size: 12px;
|
|
outline: none;
|
|
transition: border-color 0.15s;
|
|
}
|
|
|
|
.filter-input::placeholder { color: var(--text-faint); }
|
|
.filter-input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-bg); }
|
|
|
|
/* Active filter tags */
|
|
.active-filters {
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.filter-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 3px 10px;
|
|
background: var(--amber-bg);
|
|
border: 1px solid var(--amber-light);
|
|
border-radius: 20px;
|
|
font-size: 11px;
|
|
color: var(--amber-deep);
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.filter-tag-remove {
|
|
cursor: pointer;
|
|
opacity: 0.5;
|
|
font-size: 13px;
|
|
line-height: 1;
|
|
background: none;
|
|
border: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.filter-tag-remove:hover { opacity: 1; }
|
|
|
|
.clear-all {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
padding: 3px 6px;
|
|
background: none;
|
|
border: none;
|
|
}
|
|
|
|
.clear-all:hover { color: var(--error); }
|
|
|
|
/* ==========================================================================
|
|
EXECUTION TABLE (business context from operator + design styling)
|
|
========================================================================== */
|
|
.table-section {
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-card);
|
|
overflow: hidden;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.table-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 10px 16px;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
}
|
|
|
|
.table-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
|
|
|
|
.table-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.table-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
|
|
|
|
.live-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 5px 12px;
|
|
border: 1px solid var(--success-border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--success-bg);
|
|
color: var(--success);
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.live-btn:hover { background: #E2F0E4; }
|
|
|
|
.live-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--success);
|
|
animation: pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
.table-scroll {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
thead {
|
|
background: var(--bg-raised);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
th {
|
|
padding: 9px 14px;
|
|
text-align: left;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.8px;
|
|
color: var(--text-muted);
|
|
white-space: nowrap;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
transition: color 0.12s;
|
|
}
|
|
|
|
th:hover { color: var(--text-secondary); }
|
|
th.sorted { color: var(--amber); }
|
|
.sort-arrow { font-size: 8px; margin-left: 3px; opacity: 0.4; }
|
|
th.sorted .sort-arrow { opacity: 1; }
|
|
|
|
tbody tr {
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
border-left: 3px solid transparent;
|
|
transition: background 0.08s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
tbody tr:last-child { border-bottom: none; }
|
|
tbody tr:hover { background: var(--bg-hover); }
|
|
tbody tr.selected { background: var(--amber-bg); }
|
|
|
|
/* Status-colored left border from usability expert */
|
|
tbody tr.row-success { border-left-color: transparent; }
|
|
tbody tr.row-error { border-left-color: var(--error); }
|
|
tbody tr.row-warning { border-left-color: var(--warning); }
|
|
tbody tr.row-running { border-left-color: var(--running); }
|
|
|
|
td {
|
|
padding: 9px 14px;
|
|
font-size: 13px;
|
|
vertical-align: top;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Status badge */
|
|
.status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 2px 10px;
|
|
border-radius: 12px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.2px;
|
|
}
|
|
|
|
.status-success { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
|
|
.status-warning { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }
|
|
.status-error { background: var(--error-bg); color: var(--error); border: 1px solid var(--error-border); }
|
|
.status-running { background: var(--running-bg); color: var(--running); border: 1px solid var(--running-border); }
|
|
|
|
.status-dot {
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
}
|
|
|
|
/* Route + group cell */
|
|
.route-name { font-weight: 500; color: var(--text-primary); }
|
|
.route-name:hover { color: var(--amber); }
|
|
.route-group { font-size: 11px; color: var(--text-muted); }
|
|
|
|
/* Business ID columns (from operator expert) */
|
|
.biz-id { font-family: var(--font-mono); font-weight: 500; color: var(--running); font-size: 12px; }
|
|
.biz-id-secondary { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
|
|
|
|
/* Time display (relative from operator + usability experts) */
|
|
.time-relative { color: var(--text-secondary); font-size: 13px; }
|
|
.time-absolute { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); display: block; }
|
|
|
|
/* Duration with SLA awareness */
|
|
.duration { font-family: var(--font-mono); font-size: 12px; }
|
|
.dur-fast { color: var(--success); }
|
|
.dur-normal { color: var(--text-primary); }
|
|
.dur-slow { color: var(--warning); }
|
|
.dur-breach { color: var(--error); font-weight: 600; }
|
|
|
|
.sla-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
color: var(--error);
|
|
font-size: 10px;
|
|
font-family: var(--font-mono);
|
|
font-weight: 600;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
/* Agent badge in table */
|
|
.agent-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.agent-badge-dot {
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* Error preview row (from operator expert) */
|
|
.error-preview-row td {
|
|
padding: 0 14px 8px 20px !important;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
}
|
|
|
|
.error-preview {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
padding: 8px 12px;
|
|
background: var(--error-bg);
|
|
border: 1px solid var(--error-border);
|
|
border-left: 3px solid var(--error);
|
|
border-radius: var(--radius-sm);
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--error);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.error-preview-icon { flex-shrink: 0; margin-top: 1px; }
|
|
|
|
.error-preview-text { white-space: normal; word-break: break-word; }
|
|
|
|
.error-expand-hint {
|
|
color: var(--text-muted);
|
|
font-size: 10px;
|
|
margin-top: 4px;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
/* Pagination */
|
|
.table-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 8px 16px;
|
|
border-top: 1px solid var(--border-subtle);
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.pagination { display: flex; align-items: center; gap: 4px; }
|
|
|
|
.page-btn {
|
|
padding: 4px 10px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--bg-surface);
|
|
color: var(--text-secondary);
|
|
font-size: 12px;
|
|
font-family: var(--font-mono);
|
|
cursor: pointer;
|
|
transition: all 0.12s;
|
|
}
|
|
|
|
.page-btn:hover { background: var(--bg-raised); border-color: var(--text-faint); }
|
|
.page-btn.active { background: var(--amber-bg); border-color: var(--amber-light); color: var(--amber-deep); font-weight: 600; }
|
|
|
|
/* ==========================================================================
|
|
METRICS ROW (charts with SLA lines from operator expert)
|
|
========================================================================== */
|
|
.metrics-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 14px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.metric-card {
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-card);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.metric-card-header {
|
|
padding: 12px 16px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.metric-card-title {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.metric-card-value {
|
|
font-family: var(--font-mono);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.metric-chart {
|
|
padding: 10px 16px 12px;
|
|
height: 90px;
|
|
position: relative;
|
|
}
|
|
|
|
.chart-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
|
|
.chart-area { opacity: 0.12; }
|
|
.chart-grid-line { stroke: var(--border-subtle); stroke-width: 1; stroke-dasharray: 3 3; }
|
|
.chart-label { font-family: var(--font-mono); font-size: 9px; fill: var(--text-faint); }
|
|
|
|
.sla-line { stroke: var(--error); stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.5; }
|
|
.sla-label-text { fill: var(--error); font-size: 8px; font-family: var(--font-mono); opacity: 0.6; }
|
|
|
|
/* ==========================================================================
|
|
DETAIL PANEL (from usability expert: master-detail pattern)
|
|
========================================================================== */
|
|
.detail-panel {
|
|
width: 0;
|
|
overflow: hidden;
|
|
transition: width 0.25s ease, opacity 0.2s ease;
|
|
opacity: 0;
|
|
border-left: 1px solid transparent;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--bg-surface);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.detail-panel.open {
|
|
width: 400px;
|
|
opacity: 1;
|
|
border-left-color: var(--border);
|
|
animation: slideIn 0.25s ease-out both;
|
|
}
|
|
|
|
.detail-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.detail-breadcrumb {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.detail-breadcrumb .bc-sep { color: var(--text-faint); font-size: 9px; }
|
|
.detail-breadcrumb .bc-current { color: var(--amber); font-weight: 500; }
|
|
|
|
.detail-close {
|
|
width: 26px;
|
|
height: 26px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: none;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.detail-close:hover { color: var(--text-primary); border-color: var(--text-faint); }
|
|
|
|
/* Detail tabs */
|
|
.detail-tabs {
|
|
display: flex;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.detail-tab {
|
|
padding: 9px 16px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
border-bottom: 2px solid transparent;
|
|
transition: all 0.15s;
|
|
background: none;
|
|
border-top: none;
|
|
border-left: none;
|
|
border-right: none;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.detail-tab:hover { color: var(--text-secondary); }
|
|
.detail-tab.active { color: var(--amber); border-bottom-color: var(--amber); }
|
|
|
|
/* Detail body */
|
|
.detail-body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 16px;
|
|
background: var(--bg-raised);
|
|
}
|
|
|
|
.detail-section { margin-bottom: 18px; }
|
|
|
|
.detail-section-title {
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.8px;
|
|
color: var(--text-muted);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.detail-grid {
|
|
display: grid;
|
|
grid-template-columns: 100px 1fr;
|
|
gap: 6px 10px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.detail-key { color: var(--text-muted); font-size: 11px; }
|
|
.detail-val { color: var(--text-primary); font-family: var(--font-mono); font-size: 11px; word-break: break-all; }
|
|
.detail-val.error-text { color: var(--error); }
|
|
.detail-val.link { color: var(--amber); cursor: pointer; }
|
|
|
|
/* Processor timeline (Gantt from usability expert) */
|
|
.processor-timeline { display: flex; flex-direction: column; gap: 5px; }
|
|
|
|
.proc-row { display: flex; align-items: center; gap: 8px; font-size: 11px; }
|
|
|
|
.proc-name {
|
|
width: 100px;
|
|
text-align: right;
|
|
color: var(--text-secondary);
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.proc-bar-bg {
|
|
flex: 1;
|
|
height: 16px;
|
|
background: var(--bg-inset);
|
|
border-radius: 3px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.proc-bar-fill {
|
|
position: absolute;
|
|
top: 0;
|
|
height: 100%;
|
|
border-radius: 3px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
padding-right: 5px;
|
|
font-family: var(--font-mono);
|
|
font-size: 8px;
|
|
color: white;
|
|
min-width: 20px;
|
|
}
|
|
|
|
.proc-ok { background: rgba(61, 124, 71, 0.5); }
|
|
.proc-slow { background: rgba(194, 117, 22, 0.5); }
|
|
.proc-fail { background: rgba(192, 57, 43, 0.5); }
|
|
|
|
.proc-dur {
|
|
width: 42px;
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
color: var(--text-muted);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Error block in detail */
|
|
.error-block {
|
|
background: var(--error-bg);
|
|
border: 1px solid var(--error-border);
|
|
border-left: 3px solid var(--error);
|
|
border-radius: var(--radius-sm);
|
|
padding: 12px 14px;
|
|
}
|
|
|
|
.error-class {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--error);
|
|
font-weight: 600;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.error-message-detail {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
color: var(--text-secondary);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.error-expand {
|
|
margin-top: 6px;
|
|
font-size: 10px;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
background: none;
|
|
border: none;
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.error-expand:hover { color: var(--amber); }
|
|
|
|
/* Detail actions */
|
|
.detail-actions {
|
|
display: flex;
|
|
gap: 6px;
|
|
padding: 10px 16px;
|
|
border-top: 1px solid var(--border-subtle);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.action-btn {
|
|
padding: 6px 14px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.action-btn.primary {
|
|
background: var(--amber);
|
|
color: white;
|
|
border: none;
|
|
}
|
|
|
|
.action-btn.primary:hover { background: var(--amber-deep); }
|
|
|
|
.action-btn.secondary {
|
|
background: none;
|
|
border: 1px solid var(--border);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.action-btn.secondary:hover { border-color: var(--text-faint); color: var(--text-primary); }
|
|
|
|
/* ==========================================================================
|
|
KEYBOARD SHORTCUTS BAR (from usability expert)
|
|
========================================================================== */
|
|
.shortcuts-bar {
|
|
position: fixed;
|
|
bottom: 12px;
|
|
right: 12px;
|
|
display: flex;
|
|
gap: 10px;
|
|
z-index: 50;
|
|
animation: fadeIn 0.5s ease-out 0.5s both;
|
|
}
|
|
|
|
.shortcut-hint {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: 10px;
|
|
color: var(--text-muted);
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-sm);
|
|
padding: 4px 8px;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.shortcut-hint kbd {
|
|
font-family: var(--font-mono);
|
|
font-size: 9px;
|
|
background: var(--bg-raised);
|
|
border: 1px solid var(--border);
|
|
border-radius: 3px;
|
|
padding: 0 4px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Utility */
|
|
.mono { font-family: var(--font-mono); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
|
|
<!-- ====================================================================
|
|
SIDEBAR (warm charcoal, from design expert + agent health from operator)
|
|
==================================================================== -->
|
|
<aside class="sidebar">
|
|
<div class="sidebar-logo">
|
|
<svg width="24" height="26" viewBox="940 300 900 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path style="fill:#C6820E" d="M 1385.2768,1205.0273 c -1.7727,-1.0809 -3.4419,-2.9917 -3.7093,-4.2463 -0.2674,-1.2545 -0.6851,-23.881 -0.9282,-50.281 -0.4544,-49.3389 -1.4003,-65.7355 -5.6645,-98.1921 -10.4552,-79.57719 -28.3441,-125.96796 -62.5438,-162.19311 -9.2529,-9.80096 -19.9748,-18.38696 -33.931,-27.17162 -12.6119,-7.93853 -24.8581,-13.73088 -49.5,-23.41316 -41.7081,-16.38789 -67.8677,-32.29827 -89.0588,-54.16599 -34.7586,-35.86827 -54.3653,-83.30392 -59.0504,-142.86402 -0.8357,-10.6245 -0.92,-22.5842 -0.2891,-41 0.4899,-14.3 0.8164,-35.225 0.7255,-46.5 -0.1983,-24.59199 -2.0251,-34.76973 -8.4617,-47.14159 -6.2021,-11.92135 -10.364,-15.10789 -36.2345,-27.74305 -25.4032,-12.40694 -27.7701,-13.30168 -35.4717,-13.40961 -4.63013,-0.0649 -7.47783,0.72754 -15.6593,4.35747 -9.86218,4.37563 -10.15161,4.43672 -21,4.43267 -10.86566,-0.004 -11.08917,-0.0517 -18.30169,-3.90103 -17.43524,-9.3052 -21.50075,-23.5772 -13.55784,-47.59486 2.73631,-8.27402 10.00732,-22.43593 14.69263,-28.61719 5.4984,-7.25394 10.89014,-11.83885 20.83968,-17.72117 15.06768,-8.90827 29.60254,-11.98884 63.90372,-13.54403 l 16.5765,-0.75156 14.9235,-7.05735 c 8.2079,-3.88154 17.1735,-7.76831 19.9235,-8.63727 7.7052,-2.43474 21.059,-4.67186 27.8605,-4.66741 8.0518,0.005 22.643,2.41202 30.0139,4.95066 l 5.8744,2.02321 4.8856,-4.09041 c 10.341,-8.65797 18.6496,-12.95738 28.96,-14.98583 6.9966,-1.37649 26.3532,-0.64631 32.1116,1.21134 4.5531,1.46885 5.4951,3.7902 6.3689,15.69592 1.5167,20.66426 -5.0112,40.44987 -18.1772,55.09363 -4.3065,4.78983 -4.5016,5.25488 -3.4977,8.33516 4.5184,13.86447 5.3154,38.07517 2.1537,65.42564 -5.169,44.71349 -5.0411,70.7797 0.5404,110.15637 6.8135,48.06863 22.3335,73.51874 48.2051,79.04779 24.1748,5.16643 45.2921,-5.78181 66.8353,-34.65077 4.809,-6.4442 11.1363,-14.93006 14.0608,-18.85747 7.3865,-9.91943 25.6102,-27.11708 35.952,-33.92766 12.5235,-8.24739 26.8808,-14.74833 42.8527,-19.40354 15.4108,-4.49168 26.7091,-9.74984 36.2432,-16.86731 3.4338,-2.56341 13.3338,-12.03104 22,-21.03916 26.2356,-27.27067 44.5755,-40.32368 66.9928,-47.68062 19.1052,-6.26998 35.4927,-7.73718 50.8681,-4.55427 37.0856,7.67726 63.5507,26.77589 100.2888,72.37362 16.6011,20.60463 29.9711,32.07977 51.6071,44.29313 39.3131,22.19195 50.1228,30.50985 68.8076,52.94655 5.4963,6.6 12.9187,14.91604 16.4941,18.4801 33.6796,33.57259 54.1965,72.51092 61.6587,117.0199 2.7315,16.29242 3.3374,26.62538 3.1861,54.33713 l -0.1465,26.83714 -2.7975,2.40572 c -3.9132,3.36522 -7.2806,3.99163 -11.2591,2.09442 -6.4731,-3.08682 -6.5715,-3.57833 -6.878,-34.36929 -0.2908,-29.2175 -2.0265,-46.13705 -6.6479,-64.80512 -3.2997,-13.32891 -12.2529,-34.61943 -17.0313,-40.5 l -2.0314,-2.5 0.5698,3.5 c 5.8574,35.97875 4.2855,72.40287 -5.3946,125 -8.4016,45.65054 -4.3665,69.39588 20.7318,122 11.4175,23.93009 12.5452,27.25907 12.4212,36.6684 -0.1018,7.7227 -2.5346,19.5162 -13.1674,63.8316 -1.0558,4.4 -3.5336,14.975 -5.5063,23.5 -1.9727,8.525 -4.2259,18.2 -5.0072,21.5 -0.7812,3.3 -3.4495,15.225 -5.9296,26.5 -9.1636,41.6596 -13.4372,59.8787 -14.5204,61.9027 -2.4994,4.6702 -5.2312,5.0973 -32.6024,5.0973 H 1765.8 l -3.4,-3.4 c -2.3518,-2.3518 -3.4,-4.3226 -3.4,-6.3925 0,-1.6458 2.2347,-12.1533 4.966,-23.35 8.6906,-35.6259 11.6969,-54.778 12.6921,-80.8575 1.3475,-35.3073 -4.6406,-62.7687 -18.7825,-86.137 -7.6672,-12.66954 -11.9163,-17.84148 -29.8756,-36.36415 -22.9362,-23.65574 -34.6222,-39.72583 -47.9268,-65.90697 -5.7294,-11.27448 -13.6061,-31.99995 -15.5051,-40.79778 -0.3212,-1.48824 -1.0176,-3.84619 -1.5475,-5.2399 l -0.9634,-2.534 -11.7786,7.15145 c -38.634,23.45687 -74.5513,34.71091 -124.1895,38.91257 -14.5402,1.23075 -58.2359,0.66344 -71.9142,-0.93369 -5.4419,-0.63542 -6.4542,-0.49723 -7.25,0.98972 -0.5545,1.03621 -0.9249,60.63835 -0.9249,148.84365 0,161.6262 0.4025,151.2052 -5.9673,154.4992 -2.3865,1.2341 -7.4633,1.5162 -27.233,1.5132 -22.3926,-0 -24.5527,-0.158 -27.5229,-1.969 z M 1424,1045.6452 c 0,-87.21053 0.3878,-144.17994 1.0365,-152.24998 1.8115,-22.53829 7.2373,-44.8067 16.1142,-66.13567 20.7842,-49.93942 66.8961,-95.01414 129.8493,-126.92865 14.9469,-7.57742 29.2834,-13.56192 41.5,-17.32336 3.85,-1.1854 7.9,-2.55654 9,-3.04699 6.0644,-2.70386 29.8837,-6.94397 39.0685,-6.95465 16.5354,-0.0192 29.4209,10.53866 32.4491,26.58755 1.5763,8.35375 1.0812,11.63345 -4.5147,29.90655 -10.1916,33.28037 -13.3229,61.96134 -10.0442,92 3.2262,29.55737 10.5673,53.87028 23.6898,78.45848 11.023,20.65405 21.7624,35.21113 38.7623,52.54152 17.2909,17.62693 24.0427,25.40931 30.3653,35 26.0619,39.5327 33.1081,82.6442 23.6173,144.5 -1.6936,11.0379 -7.1852,37.5413 -10.412,50.25 l -0.6982,2.75 h 11.041 c 9.6675,0 11.1002,-0.2177 11.5165,-1.75 0.2615,-0.9625 1.1691,-4.9 2.0169,-8.75 4.2214,-19.1689 6.8202,-30.513 8.1326,-35.5 1.361,-5.1717 9.3524,-39.8413 18.5555,-80.5 2.2408,-9.9 5.3554,-23.4 6.9213,-30 4.9646,-20.9246 5.3189,-23.3077 4.1531,-27.9371 -0.5856,-2.32595 -4.0498,-10.49161 -7.6981,-18.14594 -9.222,-19.34804 -12.2871,-26.05688 -14.0769,-30.8114 -5.3001,-14.07878 -9.5733,-27.65251 -11.9961,-38.10556 -2.5547,-11.02237 -2.7797,-13.62939 -2.7612,-32 0.019,-19.36303 0.1714,-20.85991 4.7729,-47 6.161,-34.99931 7.6003,-48.16042 7.6003,-69.5 -10e-5,-33.76835 -6.5703,-63.86472 -19.8286,-90.82854 -6.3511,-12.91659 -11.7543,-20.74668 -21.037,-30.48614 -12.8375,-13.46928 -22.9472,-20.76621 -47.0954,-33.9923 -11.7394,-6.42975 -28.8576,-17.82564 -36.5,-24.2987 -10.6672,-9.03504 -17.2351,-15.91058 -32.8553,-34.39432 -16.848,-19.93653 -31.9446,-35.04489 -42.6447,-42.67772 -10.3431,-7.37816 -15.6552,-10.10769 -28,-14.38707 -9.1747,-3.18048 -10.0479,-3.29466 -25.5,-3.33475 -15.5657,-0.0404 -16.2561,0.0478 -25.4354,3.24965 -23.091,8.0544 -33.3943,15.26018 -59.5646,41.65777 -30.5973,30.86299 -38.6661,35.8414 -77,47.50846 -16.2269,4.93872 -34.1287,15.69697 -44.617,26.81301 -10.992,11.6499 -13.307,14.35965 -22.3589,26.17065 -19.0735,24.88726 -27.0799,33.14259 -41.0241,42.29946 -10.0586,6.60527 -20.3327,9.75956 -33.9507,10.42334 -37.2243,1.81441 -62.5379,-17.55119 -76.1054,-58.2228 -11.652,-34.92922 -16.8948,-93.36051 -12.158,-135.5 5.892,-52.41494 5.8488,-63.62373 -0.3099,-80.57433 -4.7448,-13.05916 -4.7675,-12.96705 5.716,-23.17933 5.7642,-5.61509 9.7601,-10.45668 11.1613,-13.52373 2.7419,-6.00142 5.1126,-15.9207 5.1319,-21.47261 L 1198,352 l -5.9651,0 c -11.169,0 -21.7558,5.31928 -28.8986,14.51992 -5.5094,7.09667 -9.8889,9.41118 -14.4261,7.62413 -22.7413,-8.95689 -39.8334,-10.59845 -57.5511,-5.52733 -3.1125,0.89085 -11.6238,4.5155 -18.9141,8.05478 -15.4059,7.47927 -22.5958,9.28006 -37.245,9.32847 -31.9108,0.10543 -56.25892,6.94953 -67.17127,18.88141 -8.24539,9.01574 -18.57001,32.98439 -17.63456,40.9387 0.20038,1.70385 1.68501,3.56683 4.30583,5.40313 6.15036,4.30931 11.64453,4.02586 24.53725,-1.26587 9.37877,-3.84945 11.49879,-4.33904 20.46275,-4.7256 12.5127,-0.5396 16.1351,0.57224 41.5,12.73763 28.326,13.58558 38.6034,16.26339 54.7762,14.27212 10.7814,-1.32746 19.6601,-4.77604 26.9813,-10.47981 10.8957,-8.48862 12.7264,-9.11418 18.2752,-6.24475 3.4802,1.79966 5.9673,6.17527 5.9673,10.49833 0,5.2273 -12.3619,16.07427 -24.373,21.38616 -8.3575,3.69608 -19.5481,6.59858 -25.4408,6.59858 -2.8524,0 -5.1862,0.40847 -5.1862,0.90771 0,0.49925 1.1261,3.08675 2.5024,5.75 7.4849,14.48347 10.3469,40.93277 8.5814,79.30477 -1.8809,40.87852 -1.063,65.17107 3.0314,90.03752 1.9205,11.66347 7.4026,31.07934 11.5058,40.75 3.6541,8.61199 4.8919,11.32366 8.5592,18.75 7.5496,15.28823 16.3315,27.16362 30.7439,41.57393 20.487,20.48403 39.3629,32.17675 72.4974,44.90876 32.2544,12.39381 46.3332,19.15119 64.0627,30.7482 24.2965,15.89251 40.6199,31.86253 55.9811,54.76911 15.3367,22.87022 26.7091,49.93352 35.5759,84.66142 7.4833,29.30908 14.5942,79.14828 16.5733,116.15948 0.3771,7.0514 0.7727,14.0264 0.879,15.5 0.1064,1.4735 0.2639,17.1916 0.35,34.9291 L 1403,1185 h 10.5 10.5 z m 109.6148,-166.12974 c 32.3584,-3.61532 59.7448,-11.3892 85.9116,-24.38672 13.8501,-6.87965 33.6049,-18.83328 37.1094,-22.455 0.7986,-0.82533 0.878,-3.10315 0.2676,-7.67374 -0.4775,-3.575 -0.9114,-15.05 -0.9643,-25.5 -0.1555,-30.74924 3.0015,-49.74257 13.6751,-82.27105 3.3477,-10.20267 3.1984,-15.57022 -0.5373,-19.30587 -2.563,-2.563 -3.6408,-2.92269 -8.75,-2.91989 -17.9704,0.01 -50.057,9.8542 -78.4604,24.07205 -31.505,15.77045 -56.5528,33.57164 -78.5866,55.85076 -22.9969,23.25282 -37.4392,45.78809 -46.737,72.92624 -3.3375,9.74165 -8.0905,29.93345 -7.2451,30.77886 2.3874,2.38739 64.9877,3.04398 84.317,0.88436 z"/>
|
|
</svg>
|
|
<div>
|
|
<span class="brand">cameleer</span><span class="version">v3</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sidebar-search">
|
|
<div class="sidebar-search-wrap">
|
|
<span class="search-icon">◇</span>
|
|
<input type="text" placeholder="Filter applications...">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sidebar-section">Applications</div>
|
|
|
|
<div class="sidebar-items">
|
|
<div class="sidebar-item">
|
|
<span class="health health-live"></span>
|
|
<div class="item-info"><div class="item-name">All Applications</div></div>
|
|
<span class="item-count">4</span>
|
|
</div>
|
|
|
|
<div class="sidebar-divider"></div>
|
|
|
|
<div class="sidebar-item active">
|
|
<span class="health health-live"></span>
|
|
<div class="item-info">
|
|
<div class="item-name">order-service</div>
|
|
<div class="item-meta">2 agents</div>
|
|
</div>
|
|
<span class="item-count">1,847</span>
|
|
</div>
|
|
|
|
<div class="sidebar-item">
|
|
<span class="health health-live"></span>
|
|
<div class="item-info">
|
|
<div class="item-name">payment-gateway</div>
|
|
<div class="item-meta">2 agents</div>
|
|
</div>
|
|
<span class="item-count">923</span>
|
|
</div>
|
|
|
|
<div class="sidebar-item">
|
|
<span class="health health-live"></span>
|
|
<div class="item-info">
|
|
<div class="item-name">shipment-tracker</div>
|
|
<div class="item-meta">2 agents</div>
|
|
</div>
|
|
<span class="item-count">471</span>
|
|
</div>
|
|
|
|
<div class="sidebar-item">
|
|
<span class="health health-stale"></span>
|
|
<div class="item-info">
|
|
<div class="item-name">notification-hub</div>
|
|
<div class="item-meta">1 agent</div>
|
|
</div>
|
|
<span class="item-count">128</span>
|
|
</div>
|
|
|
|
<div class="sidebar-divider"></div>
|
|
<div class="sidebar-section">Routes</div>
|
|
|
|
<div class="sidebar-item" style="padding-left: 22px;">
|
|
<span style="color: var(--sidebar-muted); font-size: 10px;">▸</span>
|
|
<div class="item-info"><div class="item-name">order-intake</div></div>
|
|
<span class="item-count">892</span>
|
|
</div>
|
|
|
|
<div class="sidebar-item" style="padding-left: 22px;">
|
|
<span style="color: var(--sidebar-muted); font-size: 10px;">▸</span>
|
|
<div class="item-info"><div class="item-name">order-enrichment</div></div>
|
|
<span class="item-count">541</span>
|
|
</div>
|
|
|
|
<div class="sidebar-item" style="padding-left: 22px;">
|
|
<span style="color: var(--sidebar-muted); font-size: 10px;">▸</span>
|
|
<div class="item-info"><div class="item-name">payment-process</div></div>
|
|
<span class="item-count">414</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Agent health section (from operator expert, adapted to sidebar) -->
|
|
<div class="sidebar-agents-header">
|
|
<span>Agents</span>
|
|
<span class="sidebar-agent-badge">4/4 live</span>
|
|
</div>
|
|
|
|
<div style="padding: 0 0 6px; overflow-y: auto; max-height: 180px;">
|
|
<div class="agent-item">
|
|
<span class="agent-dot health-live"></span>
|
|
<div class="agent-info">
|
|
<div class="agent-name">prod-1</div>
|
|
<div class="agent-detail">order-service v3.2.1</div>
|
|
</div>
|
|
<div class="agent-stats-col">
|
|
<div class="agent-tps">14.2/s</div>
|
|
<div>12s ago</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="agent-item">
|
|
<span class="agent-dot health-live"></span>
|
|
<div class="agent-info">
|
|
<div class="agent-name">prod-2</div>
|
|
<div class="agent-detail">payment-svc v3.2.1</div>
|
|
</div>
|
|
<div class="agent-stats-col">
|
|
<div class="agent-tps">11.8/s</div>
|
|
<div style="color: var(--error);">3 err/h</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="agent-item">
|
|
<span class="agent-dot health-live"></span>
|
|
<div class="agent-info">
|
|
<div class="agent-name">prod-3</div>
|
|
<div class="agent-detail">shipment-svc v3.2.0</div>
|
|
</div>
|
|
<div class="agent-stats-col">
|
|
<div class="agent-tps">12.1/s</div>
|
|
<div>5s ago</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="agent-item">
|
|
<span class="agent-dot health-live"></span>
|
|
<div class="agent-info">
|
|
<div class="agent-name">prod-4</div>
|
|
<div class="agent-detail">shipment-svc v3.2.0</div>
|
|
</div>
|
|
<div class="agent-stats-col">
|
|
<div class="agent-tps">9.1/s</div>
|
|
<div>3s ago</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sidebar-bottom">
|
|
<div class="sidebar-item"><span style="font-size: 13px; width: 18px; text-align: center;">⚙</span><div class="item-info"><div class="item-name">Admin</div></div></div>
|
|
<div class="sidebar-item"><span style="font-size: 13px; width: 18px; text-align: center;">☰</span><div class="item-info"><div class="item-name">API Docs</div></div></div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- ====================================================================
|
|
MAIN CONTENT
|
|
==================================================================== -->
|
|
<div class="main">
|
|
<!-- Top bar -->
|
|
<div class="topbar">
|
|
<div class="topbar-breadcrumb">
|
|
<span>Applications</span>
|
|
<span class="crumb-sep">/</span>
|
|
<span class="crumb-active">order-service</span>
|
|
</div>
|
|
|
|
<div class="topbar-search">
|
|
<span style="font-size: 12px; color: var(--text-faint);">🔎</span>
|
|
<span>Search by Order ID, route, error...</span>
|
|
<span class="topbar-kbd">Ctrl+K</span>
|
|
</div>
|
|
|
|
<div class="topbar-right">
|
|
<span class="topbar-env">PRODUCTION</span>
|
|
<span class="topbar-shift">Shift: Day (06:00-18:00)</span>
|
|
<div class="topbar-user">
|
|
<span>hendrik</span>
|
|
<div class="topbar-avatar">H</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-wrap">
|
|
<!-- Scrollable content area -->
|
|
<div class="content">
|
|
|
|
<!-- Health strip -->
|
|
<div class="health-strip animate-in">
|
|
<div class="stat-card card-amber">
|
|
<div class="stat-label">Executions (shift)</div>
|
|
<div class="stat-value-row">
|
|
<span class="stat-value">3,241</span>
|
|
<span class="stat-trend trend-up-good">+12%</span>
|
|
</div>
|
|
<div class="stat-detail"><strong>97.1%</strong> success since 06:00</div>
|
|
</div>
|
|
|
|
<div class="stat-card card-green">
|
|
<div class="stat-label">Success Rate</div>
|
|
<div class="stat-value-row">
|
|
<span class="stat-value val-green">97.1%</span>
|
|
<span class="stat-trend trend-down-bad">-0.4%</span>
|
|
</div>
|
|
<div class="stat-detail">3,147 ok / 56 warn / 38 error</div>
|
|
</div>
|
|
|
|
<div class="stat-card card-error has-errors">
|
|
<div class="stat-label">Errors (shift)</div>
|
|
<div class="stat-value-row">
|
|
<span class="stat-value val-error">38</span>
|
|
<span class="stat-trend trend-up-bad">+5</span>
|
|
</div>
|
|
<div class="stat-detail"><strong>23</strong> overnight · <strong>15</strong> since 06:00</div>
|
|
</div>
|
|
|
|
<div class="stat-card card-teal">
|
|
<div class="stat-label">Throughput</div>
|
|
<div class="stat-value-row">
|
|
<span class="stat-value">47.2</span>
|
|
<span class="stat-unit">msg/s</span>
|
|
<span class="stat-trend trend-flat">↔</span>
|
|
</div>
|
|
<div class="stat-detail">Capacity: 120 msg/s · <strong>39%</strong></div>
|
|
</div>
|
|
|
|
<div class="stat-card card-warn">
|
|
<div class="stat-label">Latency p99</div>
|
|
<div class="stat-value-row">
|
|
<span class="stat-value val-warn">287</span>
|
|
<span class="stat-unit">ms</span>
|
|
<span class="stat-trend trend-up-bad">+23ms</span>
|
|
</div>
|
|
<div class="stat-detail">SLA: <300ms · <strong style="color: var(--warning);">CLOSE</strong></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filter bar -->
|
|
<div class="filter-section animate-in delay-1">
|
|
<div class="filter-row">
|
|
<div class="filter-input-wrap">
|
|
<span class="fi-icon">🔎</span>
|
|
<input class="filter-input" type="text" placeholder="Search by Order ID, correlation ID, error message...">
|
|
</div>
|
|
|
|
<div class="filter-sep"></div>
|
|
|
|
<div class="filter-group">
|
|
<span class="filter-label">Status</span>
|
|
<span class="filter-pill active">All <span class="pill-count">3,241</span></span>
|
|
<span class="filter-pill"><span class="pill-dot" style="background: var(--success);"></span> OK <span class="pill-count">3,147</span></span>
|
|
<span class="filter-pill"><span class="pill-dot" style="background: var(--warning);"></span> Warn <span class="pill-count">56</span></span>
|
|
<span class="filter-pill"><span class="pill-dot" style="background: var(--error);"></span> Error <span class="pill-count">38</span></span>
|
|
<span class="filter-pill"><span class="pill-dot" style="background: var(--running);"></span> Running <span class="pill-count">9</span></span>
|
|
</div>
|
|
|
|
<div class="filter-sep"></div>
|
|
|
|
<div class="filter-group">
|
|
<span class="filter-label">Time</span>
|
|
<span class="filter-pill">15m</span>
|
|
<span class="filter-pill">1h</span>
|
|
<span class="filter-pill active">Shift</span>
|
|
<span class="filter-pill">24h</span>
|
|
<span class="filter-pill">7d</span>
|
|
</div>
|
|
</div>
|
|
<div class="active-filters">
|
|
<span class="filter-tag">time: since 06:00 (shift) <button class="filter-tag-remove">×</button></span>
|
|
<span class="filter-tag">app: order-service <button class="filter-tag-remove">×</button></span>
|
|
<span class="filter-tag">sort: newest first <button class="filter-tag-remove">×</button></span>
|
|
<button class="clear-all">Clear all</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Execution table -->
|
|
<div class="table-section animate-in delay-2">
|
|
<div class="table-header">
|
|
<span class="table-title">Recent Executions</span>
|
|
<div class="table-right">
|
|
<span class="table-meta">Showing 1-20 of 3,241</span>
|
|
<button class="live-btn"><span class="live-dot"></span> LIVE</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 85px">Status</th>
|
|
<th>Route</th>
|
|
<th>Order ID</th>
|
|
<th>Customer</th>
|
|
<th class="sorted">Started <span class="sort-arrow">▼</span></th>
|
|
<th>Duration</th>
|
|
<th>Agent</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Row 1: Success -->
|
|
<tr class="row-success">
|
|
<td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
|
|
<td><div class="route-name">order-intake</div><div class="route-group">order-flow</div></td>
|
|
<td><div class="biz-id">OP-92184</div><div class="biz-id-secondary">SAP-DE</div></td>
|
|
<td><span class="biz-id-secondary">CUST-44210</span></td>
|
|
<td><span class="time-relative">2 min ago</span><span class="time-absolute">09:12:04</span></td>
|
|
<td><span class="duration dur-fast">87ms</span></td>
|
|
<td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-1</span></td>
|
|
</tr>
|
|
|
|
<!-- Row 2: Success -->
|
|
<tr class="row-success">
|
|
<td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
|
|
<td><div class="route-name">payment-validate</div><div class="route-group">payment-flow</div></td>
|
|
<td><div class="biz-id">OP-92183</div><div class="biz-id-secondary">WEB-EU</div></td>
|
|
<td><span class="biz-id-secondary">CUST-18773</span></td>
|
|
<td><span class="time-relative">3 min ago</span><span class="time-absolute">09:11:22</span></td>
|
|
<td><span class="duration dur-normal">164ms</span></td>
|
|
<td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-2</span></td>
|
|
</tr>
|
|
|
|
<!-- Row 3: Running -->
|
|
<tr class="row-running">
|
|
<td><span class="status-badge status-running"><span class="status-dot" style="animation: pulse 1.5s ease-in-out infinite;"></span>RUN</span></td>
|
|
<td><div class="route-name">order-enrichment</div><div class="route-group">order-flow</div></td>
|
|
<td><div class="biz-id">OP-92185</div><div class="biz-id-secondary">EDI-US</div></td>
|
|
<td><span class="biz-id-secondary">CUST-67501</span></td>
|
|
<td><span class="time-relative">30s ago</span><span class="time-absolute">09:13:44</span></td>
|
|
<td><span class="duration" style="color: var(--running);">~30s</span></td>
|
|
<td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-1</span></td>
|
|
</tr>
|
|
|
|
<!-- Row 4: Warning (SLA close) -->
|
|
<tr class="row-warning">
|
|
<td><span class="status-badge status-warning"><span class="status-dot"></span>WARN</span></td>
|
|
<td><div class="route-name">shipment-dispatch</div><div class="route-group">shipment-flow</div></td>
|
|
<td><div class="biz-id">OP-92180</div><div class="biz-id-secondary">SAP-DE</div></td>
|
|
<td><span class="biz-id-secondary">CUST-55019</span></td>
|
|
<td><span class="time-relative">5 min ago</span><span class="time-absolute">09:09:47</span></td>
|
|
<td><span class="duration dur-slow">248ms</span> <span class="sla-tag">SLA</span></td>
|
|
<td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-3</span></td>
|
|
</tr>
|
|
|
|
<!-- Row 5: ERROR with inline preview -->
|
|
<tr class="row-error selected">
|
|
<td><span class="status-badge status-error"><span class="status-dot"></span>ERR</span></td>
|
|
<td><div class="route-name">payment-process</div><div class="route-group">payment-flow</div></td>
|
|
<td><div class="biz-id">OP-88421</div><div class="biz-id-secondary">WEB-EU</div></td>
|
|
<td><span class="biz-id-secondary">CUST-31094</span></td>
|
|
<td><span class="time-relative">8 min ago</span><span class="time-absolute">09:06:11</span></td>
|
|
<td><span class="duration dur-breach">412ms</span></td>
|
|
<td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-2</span></td>
|
|
</tr>
|
|
<tr class="error-preview-row">
|
|
<td colspan="7">
|
|
<div class="error-preview">
|
|
<span class="error-preview-icon">⚠</span>
|
|
<div>
|
|
<div class="error-preview-text">org.apache.camel.CamelExecutionException: Payment gateway timeout after 5000ms — POST https://pay.provider.com/v2/charge returned HTTP 504. Retry exhausted (3/3).</div>
|
|
<div class="error-expand-hint">Click to view full stack trace and exchange snapshot</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Row 6: ERROR -->
|
|
<tr class="row-error">
|
|
<td><span class="status-badge status-error"><span class="status-dot"></span>ERR</span></td>
|
|
<td><div class="route-name">order-enrichment</div><div class="route-group">order-flow</div></td>
|
|
<td><div class="biz-id">OP-88419</div><div class="biz-id-secondary">EDI-US</div></td>
|
|
<td><span class="biz-id-secondary">CUST-72841</span></td>
|
|
<td><span class="time-relative">12 min ago</span><span class="time-absolute">09:02:38</span></td>
|
|
<td><span class="duration dur-breach">1,247ms</span></td>
|
|
<td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-1</span></td>
|
|
</tr>
|
|
<tr class="error-preview-row">
|
|
<td colspan="7">
|
|
<div class="error-preview">
|
|
<span class="error-preview-icon">⚠</span>
|
|
<div>
|
|
<div class="error-preview-text">java.sql.SQLTransientConnectionException: HikariPool-1 - Connection not available, request timed out after 1000ms. (pool: 10, active: 10, idle: 0, waiting: 3)</div>
|
|
<div class="error-expand-hint">Click to view full stack trace and exchange snapshot</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Row 7: Success -->
|
|
<tr class="row-success">
|
|
<td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
|
|
<td><div class="route-name">order-intake</div><div class="route-group">order-flow</div></td>
|
|
<td><div class="biz-id">OP-92179</div><div class="biz-id-secondary">WEB-EU</div></td>
|
|
<td><span class="biz-id-secondary">CUST-90123</span></td>
|
|
<td><span class="time-relative">14 min ago</span><span class="time-absolute">09:00:15</span></td>
|
|
<td><span class="duration dur-fast">62ms</span></td>
|
|
<td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-3</span></td>
|
|
</tr>
|
|
|
|
<!-- Row 8: Success -->
|
|
<tr class="row-success">
|
|
<td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
|
|
<td><div class="route-name">payment-validate</div><div class="route-group">payment-flow</div></td>
|
|
<td><div class="biz-id">OP-92178</div><div class="biz-id-secondary">SAP-DE</div></td>
|
|
<td><span class="biz-id-secondary">CUST-44210</span></td>
|
|
<td><span class="time-relative">16 min ago</span><span class="time-absolute">08:58:33</span></td>
|
|
<td><span class="duration dur-normal">131ms</span></td>
|
|
<td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-1</span></td>
|
|
</tr>
|
|
|
|
<!-- Row 9: Success -->
|
|
<tr class="row-success">
|
|
<td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
|
|
<td><div class="route-name">shipment-track</div><div class="route-group">shipment-flow</div></td>
|
|
<td><div class="biz-id">OP-92175</div><div class="biz-id-secondary">EDI-US</div></td>
|
|
<td><span class="biz-id-secondary">CUST-67892</span></td>
|
|
<td><span class="time-relative">21 min ago</span><span class="time-absolute">08:53:07</span></td>
|
|
<td><span class="duration dur-fast">94ms</span></td>
|
|
<td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-4</span></td>
|
|
</tr>
|
|
|
|
<!-- Row 10: Success -->
|
|
<tr class="row-success">
|
|
<td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
|
|
<td><div class="route-name">order-intake</div><div class="route-group">order-flow</div></td>
|
|
<td><div class="biz-id">OP-92174</div><div class="biz-id-secondary">WEB-EU</div></td>
|
|
<td><span class="biz-id-secondary">CUST-15293</span></td>
|
|
<td><span class="time-relative">24 min ago</span><span class="time-absolute">08:50:41</span></td>
|
|
<td><span class="duration dur-fast">73ms</span></td>
|
|
<td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-1</span></td>
|
|
</tr>
|
|
|
|
<!-- Row 11: Success -->
|
|
<tr class="row-success">
|
|
<td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
|
|
<td><div class="route-name">payment-process</div><div class="route-group">payment-flow</div></td>
|
|
<td><div class="biz-id">OP-92173</div><div class="biz-id-secondary">SAP-DE</div></td>
|
|
<td><span class="biz-id-secondary">CUST-88104</span></td>
|
|
<td><span class="time-relative">28 min ago</span><span class="time-absolute">08:46:19</span></td>
|
|
<td><span class="duration dur-normal">198ms</span></td>
|
|
<td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-2</span></td>
|
|
</tr>
|
|
|
|
<!-- Row 12: Warning -->
|
|
<tr class="row-warning">
|
|
<td><span class="status-badge status-warning"><span class="status-dot"></span>WARN</span></td>
|
|
<td><div class="route-name">order-enrichment</div><div class="route-group">order-flow</div></td>
|
|
<td><div class="biz-id">OP-92170</div><div class="biz-id-secondary">EDI-US</div></td>
|
|
<td><span class="biz-id-secondary">CUST-50321</span></td>
|
|
<td><span class="time-relative">35 min ago</span><span class="time-absolute">08:39:52</span></td>
|
|
<td><span class="duration dur-slow">267ms</span> <span class="sla-tag">SLA</span></td>
|
|
<td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-1</span></td>
|
|
</tr>
|
|
|
|
<!-- Row 13: Success -->
|
|
<tr class="row-success">
|
|
<td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
|
|
<td><div class="route-name">shipment-dispatch</div><div class="route-group">shipment-flow</div></td>
|
|
<td><div class="biz-id">OP-92168</div><div class="biz-id-secondary">WEB-EU</div></td>
|
|
<td><span class="biz-id-secondary">CUST-29104</span></td>
|
|
<td><span class="time-relative">42 min ago</span><span class="time-absolute">08:32:28</span></td>
|
|
<td><span class="duration dur-fast">55ms</span></td>
|
|
<td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-3</span></td>
|
|
</tr>
|
|
|
|
<!-- Row 14: Success -->
|
|
<tr class="row-success">
|
|
<td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
|
|
<td><div class="route-name">order-intake</div><div class="route-group">order-flow</div></td>
|
|
<td><div class="biz-id">OP-92165</div><div class="biz-id-secondary">SAP-DE</div></td>
|
|
<td><span class="biz-id-secondary">CUST-77618</span></td>
|
|
<td><span class="time-relative">51 min ago</span><span class="time-absolute">08:23:14</span></td>
|
|
<td><span class="duration dur-fast">81ms</span></td>
|
|
<td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-4</span></td>
|
|
</tr>
|
|
|
|
<!-- Row 15: Overnight error -->
|
|
<tr class="row-error">
|
|
<td><span class="status-badge status-error"><span class="status-dot"></span>ERR</span></td>
|
|
<td><div class="route-name">payment-process</div><div class="route-group">payment-flow</div></td>
|
|
<td><div class="biz-id">OP-91844</div><div class="biz-id-secondary">WEB-EU</div></td>
|
|
<td><span class="biz-id-secondary">CUST-10082</span></td>
|
|
<td><span class="time-relative">5 hours ago</span><span class="time-absolute">04:12:55</span></td>
|
|
<td><span class="duration dur-breach">timeout</span></td>
|
|
<td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-2</span></td>
|
|
</tr>
|
|
|
|
<!-- Row 16: Success -->
|
|
<tr class="row-success">
|
|
<td><span class="status-badge status-success"><span class="status-dot"></span>OK</span></td>
|
|
<td><div class="route-name">order-intake</div><div class="route-group">order-flow</div></td>
|
|
<td><div class="biz-id">OP-91840</div><div class="biz-id-secondary">EDI-US</div></td>
|
|
<td><span class="biz-id-secondary">CUST-38291</span></td>
|
|
<td><span class="time-relative">5 hours ago</span><span class="time-absolute">04:10:22</span></td>
|
|
<td><span class="duration dur-fast">78ms</span></td>
|
|
<td><span class="agent-badge"><span class="agent-badge-dot health-live"></span>prod-1</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="table-footer">
|
|
<span class="mono" style="font-size: 11px;">20 rows per page</span>
|
|
<div class="pagination">
|
|
<button class="page-btn active">1</button>
|
|
<button class="page-btn">2</button>
|
|
<button class="page-btn">3</button>
|
|
<button class="page-btn">...</button>
|
|
<button class="page-btn">162</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Metrics panel -->
|
|
<div class="metrics-row animate-in delay-3">
|
|
<!-- Throughput chart -->
|
|
<div class="metric-card">
|
|
<div class="metric-card-header">
|
|
<span class="metric-card-title">Throughput (1h)</span>
|
|
<span class="metric-card-value">47.2<span style="font-size:11px; font-weight:400; color: var(--text-muted)"> msg/s</span></span>
|
|
</div>
|
|
<div class="metric-chart">
|
|
<svg width="100%" height="100%" viewBox="0 0 300 65" preserveAspectRatio="none">
|
|
<line x1="0" y1="16" x2="300" y2="16" class="chart-grid-line"/>
|
|
<line x1="0" y1="32" x2="300" y2="32" class="chart-grid-line"/>
|
|
<line x1="0" y1="48" x2="300" y2="48" class="chart-grid-line"/>
|
|
<path d="M0,50 L25,47 50,43 75,45 100,40 125,37 150,39 175,35 200,33 225,35 250,37 275,34 300,33 L300,65 L0,65 Z" fill="#1A7F8E" class="chart-area"/>
|
|
<path d="M0,50 L25,47 50,43 75,45 100,40 125,37 150,39 175,35 200,33 225,35 250,37 275,34 300,33" stroke="#1A7F8E" class="chart-line"/>
|
|
<text x="0" y="63" class="chart-label">08:15</text>
|
|
<text x="145" y="63" class="chart-label">08:45</text>
|
|
<text x="282" y="63" class="chart-label">09:14</text>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Latency chart with SLA -->
|
|
<div class="metric-card">
|
|
<div class="metric-card-header">
|
|
<span class="metric-card-title">Latency p99 (1h)</span>
|
|
<span class="metric-card-value" style="color: var(--warning);">287<span style="font-size:11px; font-weight:400; color: var(--text-muted)">ms</span> <span style="font-size:12px; color: var(--error);">↗</span></span>
|
|
</div>
|
|
<div class="metric-chart">
|
|
<svg width="100%" height="100%" viewBox="0 0 300 65" preserveAspectRatio="none">
|
|
<line x1="0" y1="16" x2="300" y2="16" class="chart-grid-line"/>
|
|
<line x1="0" y1="32" x2="300" y2="32" class="chart-grid-line"/>
|
|
<line x1="0" y1="48" x2="300" y2="48" class="chart-grid-line"/>
|
|
<!-- SLA threshold at 300ms -->
|
|
<line x1="0" y1="10" x2="300" y2="10" class="sla-line"/>
|
|
<text x="4" y="8" class="sla-label-text">SLA 300ms</text>
|
|
<rect x="0" y="0" width="300" height="10" fill="rgba(192, 57, 43, 0.04)"/>
|
|
<path d="M0,42 L25,40 50,37 75,35 100,33 125,30 150,27 175,23 200,20 225,18 250,16 275,14 300,13 L300,65 L0,65 Z" fill="#C27516" class="chart-area"/>
|
|
<path d="M0,42 L25,40 50,37 75,35 100,33 125,30 150,27 175,23 200,20 225,18 250,16 275,14 300,13" stroke="#C27516" class="chart-line"/>
|
|
<!-- p50 reference -->
|
|
<path d="M0,52 L25,53 50,52 75,50 100,52 125,51 150,50 175,52 200,50 225,49 250,50 275,48 300,47" stroke="#1A7F8E" stroke-width="1" opacity="0.4" fill="none" stroke-dasharray="4 3"/>
|
|
<text x="0" y="63" class="chart-label">08:15</text>
|
|
<text x="145" y="63" class="chart-label">08:45</text>
|
|
<text x="282" y="63" class="chart-label">09:14</text>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error rate chart -->
|
|
<div class="metric-card">
|
|
<div class="metric-card-header">
|
|
<span class="metric-card-title">Error Rate (1h)</span>
|
|
<span class="metric-card-value" style="color: var(--error);">2.9<span style="font-size:11px; font-weight:400; color: var(--text-muted)">%</span> <span style="font-size:12px;">↗</span></span>
|
|
</div>
|
|
<div class="metric-chart">
|
|
<svg width="100%" height="100%" viewBox="0 0 300 65" preserveAspectRatio="none">
|
|
<line x1="0" y1="16" x2="300" y2="16" class="chart-grid-line"/>
|
|
<line x1="0" y1="32" x2="300" y2="32" class="chart-grid-line"/>
|
|
<line x1="0" y1="48" x2="300" y2="48" class="chart-grid-line"/>
|
|
<!-- SLA at 5% -->
|
|
<line x1="0" y1="16" x2="300" y2="16" class="sla-line"/>
|
|
<text x="4" y="14" class="sla-label-text">SLA 5%</text>
|
|
<rect x="2" y="54" width="18" height="11" rx="2" fill="var(--error-border)"/>
|
|
<rect x="24" y="56" width="18" height="9" rx="2" fill="var(--error-border)"/>
|
|
<rect x="46" y="58" width="18" height="7" rx="2" fill="var(--error-border)"/>
|
|
<rect x="68" y="55" width="18" height="10" rx="2" fill="var(--error-border)"/>
|
|
<rect x="90" y="52" width="18" height="13" rx="2" fill="var(--error-border)"/>
|
|
<rect x="112" y="56" width="18" height="9" rx="2" fill="var(--error-border)"/>
|
|
<rect x="134" y="59" width="18" height="6" rx="2" fill="var(--error-border)"/>
|
|
<rect x="156" y="50" width="18" height="15" rx="2" fill="var(--error-border)"/>
|
|
<rect x="178" y="45" width="18" height="20" rx="2" fill="var(--error)" opacity="0.5"/>
|
|
<rect x="200" y="42" width="18" height="23" rx="2" fill="var(--error)" opacity="0.6"/>
|
|
<rect x="222" y="38" width="18" height="27" rx="2" fill="var(--error)" opacity="0.7"/>
|
|
<rect x="244" y="36" width="18" height="29" rx="2" fill="var(--error)" opacity="0.7"/>
|
|
<rect x="266" y="34" width="18" height="31" rx="2" fill="var(--error)" opacity="0.8"/>
|
|
<text x="0" y="63" class="chart-label">08:15</text>
|
|
<text x="145" y="63" class="chart-label">08:45</text>
|
|
<text x="282" y="63" class="chart-label">09:14</text>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /content -->
|
|
|
|
<!-- ==================================================================
|
|
DETAIL PANEL (from usability expert, slides in on row select)
|
|
================================================================== -->
|
|
<div class="detail-panel open">
|
|
<div class="detail-header">
|
|
<div class="detail-breadcrumb">
|
|
<span>order-service</span>
|
|
<span class="bc-sep">▸</span>
|
|
<span>payment-process</span>
|
|
<span class="bc-sep">▸</span>
|
|
<span class="bc-current">OP-88421</span>
|
|
</div>
|
|
<button class="detail-close" title="Close (Esc)">×</button>
|
|
</div>
|
|
|
|
<div class="detail-tabs">
|
|
<button class="detail-tab active">Overview</button>
|
|
<button class="detail-tab">Processors</button>
|
|
<button class="detail-tab">Exchange</button>
|
|
<button class="detail-tab">Error</button>
|
|
</div>
|
|
|
|
<div class="detail-body">
|
|
<div class="detail-section">
|
|
<div class="detail-section-title">Execution Details</div>
|
|
<div class="detail-grid">
|
|
<span class="detail-key">Status</span>
|
|
<span class="detail-val"><span class="status-badge status-error" style="font-size:10px"><span class="status-dot"></span>FAILED</span></span>
|
|
<span class="detail-key">Order ID</span>
|
|
<span class="detail-val" style="color: var(--running);">OP-88421</span>
|
|
<span class="detail-key">Customer</span>
|
|
<span class="detail-val">CUST-31094</span>
|
|
<span class="detail-key">Source</span>
|
|
<span class="detail-val">WEB-EU</span>
|
|
<span class="detail-key">Correlation ID</span>
|
|
<span class="detail-val">c7e2a1f0-9b3d-4e1a-8f2c-5d6e7f8a9b0c</span>
|
|
<span class="detail-key">Application</span>
|
|
<span class="detail-val">order-service</span>
|
|
<span class="detail-key">Route</span>
|
|
<span class="detail-val link">payment-process</span>
|
|
<span class="detail-key">Agent</span>
|
|
<span class="detail-val">prod-2</span>
|
|
<span class="detail-key">Started</span>
|
|
<span class="detail-val">2026-03-17T09:06:11.341Z</span>
|
|
<span class="detail-key">Duration</span>
|
|
<span class="detail-val error-text">412ms</span>
|
|
<span class="detail-key">Processors</span>
|
|
<span class="detail-val">7 (5 ok, 1 failed, 1 skipped)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detail-section">
|
|
<div class="detail-section-title">Processor Timeline</div>
|
|
<div class="processor-timeline">
|
|
<div class="proc-row">
|
|
<span class="proc-name">unmarshal</span>
|
|
<div class="proc-bar-bg"><div class="proc-bar-fill proc-ok" style="left:0;width:8%">12ms</div></div>
|
|
<span class="proc-dur">12ms</span>
|
|
</div>
|
|
<div class="proc-row">
|
|
<span class="proc-name">validate</span>
|
|
<div class="proc-bar-bg"><div class="proc-bar-fill proc-ok" style="left:8%;width:5%">8ms</div></div>
|
|
<span class="proc-dur">8ms</span>
|
|
</div>
|
|
<div class="proc-row">
|
|
<span class="proc-name">enrich(inventory)</span>
|
|
<div class="proc-bar-bg"><div class="proc-bar-fill proc-slow" style="left:13%;width:20%">85ms</div></div>
|
|
<span class="proc-dur">85ms</span>
|
|
</div>
|
|
<div class="proc-row">
|
|
<span class="proc-name">transform</span>
|
|
<div class="proc-bar-bg"><div class="proc-bar-fill proc-ok" style="left:33%;width:3%">5ms</div></div>
|
|
<span class="proc-dur">5ms</span>
|
|
</div>
|
|
<div class="proc-row">
|
|
<span class="proc-name">to(payment-api)</span>
|
|
<div class="proc-bar-bg"><div class="proc-bar-fill proc-fail" style="left:36%;width:58%">280ms</div></div>
|
|
<span class="proc-dur">280ms</span>
|
|
</div>
|
|
<div class="proc-row">
|
|
<span class="proc-name">log</span>
|
|
<div class="proc-bar-bg"><div class="proc-bar-fill proc-ok" style="left:94%;width:2%">2ms</div></div>
|
|
<span class="proc-dur">2ms</span>
|
|
</div>
|
|
<div class="proc-row">
|
|
<span class="proc-name" style="color: var(--text-faint);">marshal</span>
|
|
<div class="proc-bar-bg" style="opacity:0.4"></div>
|
|
<span class="proc-dur" style="color: var(--text-faint);">skip</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detail-section">
|
|
<div class="detail-section-title">Error</div>
|
|
<div class="error-block">
|
|
<div class="error-class">org.apache.camel.http.base.HttpOperationFailedException</div>
|
|
<div class="error-message-detail">
|
|
HTTP operation failed invoking https://pay.provider.com/v2/charge<br>
|
|
with statusCode: 504 Gateway Timeout<br>
|
|
Retry exhausted (3/3 attempts)<br>
|
|
at processor: to(payment-api) [step 5/7]
|
|
</div>
|
|
<button class="error-expand">▸ Show full stack trace</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detail-actions">
|
|
<button class="action-btn primary">View Route Diagram</button>
|
|
<button class="action-btn secondary">Copy ID</button>
|
|
<button class="action-btn secondary">Re-process</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /content-wrap -->
|
|
</div><!-- /main -->
|
|
</div><!-- /app -->
|
|
|
|
<!-- Keyboard shortcuts bar -->
|
|
<div class="shortcuts-bar">
|
|
<div class="shortcut-hint"><kbd>Ctrl</kbd>+<kbd>K</kbd> Search</div>
|
|
<div class="shortcut-hint"><kbd>↑</kbd><kbd>↓</kbd> Navigate</div>
|
|
<div class="shortcut-hint"><kbd>Enter</kbd> Detail</div>
|
|
<div class="shortcut-hint"><kbd>Esc</kbd> Close</div>
|
|
<div class="shortcut-hint"><kbd>?</kbd> Shortcuts</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|