cb3ebfea7c
Rename Java packages from com.cameleer3 to com.cameleer, module directories from cameleer3-* to cameleer-*, and all references throughout workflows, Dockerfiles, docs, migrations, and pom.xml. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1708 lines
76 KiB
HTML
1708 lines
76 KiB
HTML
<!--
|
|
============================================================================
|
|
CAMELEER v2 — Operations Dashboard (Dark Theme)
|
|
============================================================================
|
|
|
|
DESIGN NOTES — SYNTHESIS RATIONALE
|
|
===================================
|
|
|
|
What was taken from each expert:
|
|
|
|
FROM DESIGN EXPERT:
|
|
- Amber-gold accent (#D4940F) as the primary brand color, maintaining the
|
|
"Desert Dusk" identity even in dark mode. The camel silhouette SVG logo.
|
|
- Typography system: DM Sans + JetBrains Mono, four-level hierarchy.
|
|
- Card-based layouts with subtle borders and layered surfaces.
|
|
- Duration bar sparklines for quick visual comparison.
|
|
- Warm sidebar tone (not pure black, but warm obsidian).
|
|
|
|
FROM USABILITY EXPERT:
|
|
- Full information hierarchy: health strip -> filter bar -> results -> detail.
|
|
- Master-detail pattern with slide-in panel (45% width on row select).
|
|
- Status pills with live counts, time preset chips, removable filter tags.
|
|
- Relative timestamps ("2m ago") with absolute fallback.
|
|
- Keyboard shortcut hints bar.
|
|
- Failed/running row border accents for scan-ability.
|
|
- Processor Gantt timeline in detail panel.
|
|
- Tab-based progressive disclosure in detail (Overview/Processors/Exchange/Error).
|
|
|
|
FROM OPERATOR EXPERT:
|
|
- Business IDs (Order ID, Customer, Source) as first-class table columns.
|
|
- Inline error previews directly below failed rows — no click needed.
|
|
- SLA threshold indicators on metric charts and duration cells.
|
|
- Agent health panel (integrated into sidebar).
|
|
- Trend arrows on all metric cards (directional context).
|
|
- Top error pattern grouping with occurrence counts.
|
|
- Shift-aware labeling ("since 06:00", overnight vs. today split).
|
|
|
|
KEY DESIGN DECISIONS:
|
|
1. Dark palette uses refined obsidian (#0B0F18) not generic navy. Surfaces
|
|
layer from #0B0F18 -> #111827 -> #1A2332 -> #212D3F for depth.
|
|
2. Status colors are tuned for dark contrast: emerald (#10B981), amber
|
|
(#F0B429), rose (#F43F5E), sky blue (#3B82F6) with subtle glow effects.
|
|
3. The warm amber accent (#D4940F) provides brand continuity with the light
|
|
theme — both mocks are clearly the same product.
|
|
4. Glow effects on status indicators (box-shadow with colored alpha) give
|
|
the dark theme a polished, premium feel without being garish.
|
|
5. Chart palettes use semi-transparent fills that work on dark backgrounds,
|
|
with SLA threshold lines clearly visible.
|
|
|
|
WHAT MAKES THIS BETTER THAN EACH INDIVIDUAL:
|
|
- Design expert had the warm brand but was light-only. This proves the amber
|
|
brand works equally well on dark backgrounds.
|
|
- Usability expert had a dark theme but with generic navy colors and no
|
|
business context. This uses refined obsidian + business data.
|
|
- Operator expert had excellent data but a flat single-page layout with no
|
|
sidebar or detail panel. This adds proper navigation + drill-down.
|
|
- The synthesis creates a cohesive dark monitoring experience: professional
|
|
enough for a NOC wall display, detailed enough for incident response.
|
|
|
|
============================================================================
|
|
-->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=1920">
|
|
<title>Cameleer — Operations Dashboard (Dark)</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 (obsidian layers) */
|
|
--bg-deep: #0B0F18;
|
|
--bg-base: #0E1220;
|
|
--bg-surface: #141B2A;
|
|
--bg-raised: #1A2332;
|
|
--bg-hover: #212D3F;
|
|
|
|
/* Sidebar (warm obsidian) */
|
|
--sidebar-bg: #0E1118;
|
|
--sidebar-hover: #171D28;
|
|
--sidebar-active: #1D2636;
|
|
--sidebar-text: #94A3B8;
|
|
--sidebar-muted: #475569;
|
|
|
|
/* Text */
|
|
--text-primary: #E8ECF4;
|
|
--text-secondary: #94A3B8;
|
|
--text-muted: #5A6B83;
|
|
--text-faint: #3A4A5E;
|
|
|
|
/* Borders */
|
|
--border: #1E2D3D;
|
|
--border-subtle: #172030;
|
|
|
|
/* Brand accent (amber-gold) */
|
|
--amber: #D4940F;
|
|
--amber-light: #F0C060;
|
|
--amber-bg: rgba(212, 148, 15, 0.12);
|
|
--amber-deep: #A67200;
|
|
--amber-glow: rgba(212, 148, 15, 0.15);
|
|
|
|
/* Status colors (dark-optimized, brighter for contrast) */
|
|
--success: #10B981;
|
|
--success-bg: rgba(16, 185, 129, 0.10);
|
|
--success-border: rgba(16, 185, 129, 0.25);
|
|
--success-glow: rgba(16, 185, 129, 0.15);
|
|
|
|
--warning: #F0B429;
|
|
--warning-bg: rgba(240, 180, 41, 0.10);
|
|
--warning-border: rgba(240, 180, 41, 0.25);
|
|
|
|
--error: #F43F5E;
|
|
--error-bg: rgba(244, 63, 94, 0.08);
|
|
--error-border: rgba(244, 63, 94, 0.20);
|
|
--error-glow: rgba(244, 63, 94, 0.12);
|
|
|
|
--running: #3B82F6;
|
|
--running-bg: rgba(59, 130, 246, 0.10);
|
|
--running-border: rgba(59, 130, 246, 0.25);
|
|
|
|
--cyan: #22D3EE;
|
|
--cyan-bg: rgba(34, 211, 238, 0.10);
|
|
|
|
/* Typography */
|
|
--font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
|
|
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
|
|
|
/* Spacing & Radii */
|
|
--radius-sm: 6px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
|
|
/* Shadows (dark-optimized: deeper, colored) */
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35);
|
|
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);
|
|
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 1px var(--border-subtle);
|
|
}
|
|
|
|
html { font-size: 14px; }
|
|
body {
|
|
font-family: var(--font-body);
|
|
background: var(--bg-deep);
|
|
color: var(--text-primary);
|
|
line-height: 1.5;
|
|
min-height: 100vh;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* Subtle gradient background */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(ellipse 900px 450px at 15% 10%, rgba(212, 148, 15, 0.03), transparent),
|
|
radial-gradient(ellipse 700px 700px at 85% 85%, rgba(34, 211, 238, 0.015), transparent);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
::-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-muted); }
|
|
|
|
/* ==========================================================================
|
|
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(16, 185, 129, 0.4); }
|
|
50% { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); }
|
|
}
|
|
@keyframes errorPulse {
|
|
0%, 100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.2); }
|
|
50% { box-shadow: 0 0 0 4px rgba(244, 63, 94, 0); }
|
|
}
|
|
@keyframes slideIn {
|
|
from { opacity: 0; transform: translateX(20px); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
@keyframes glowPulse {
|
|
0%, 100% { opacity: 0.6; }
|
|
50% { opacity: 1; }
|
|
}
|
|
.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; }
|
|
|
|
/* ==========================================================================
|
|
LAYOUT: 3-column
|
|
========================================================================== */
|
|
.app {
|
|
display: flex;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
SIDEBAR (warm obsidian)
|
|
========================================================================== */
|
|
.sidebar {
|
|
width: 220px;
|
|
flex-shrink: 0;
|
|
background: var(--sidebar-bg);
|
|
border-right: 1px solid var(--border-subtle);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sidebar-logo {
|
|
padding: 16px 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
}
|
|
|
|
.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: var(--bg-raised);
|
|
border: 1px solid var(--border);
|
|
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: var(--amber); }
|
|
|
|
.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: var(--text-primary); }
|
|
.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: var(--success); box-shadow: 0 0 6px var(--success-glow); }
|
|
.health-stale { background: var(--warning); box-shadow: 0 0 6px rgba(240, 180, 41, 0.3); }
|
|
.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: var(--bg-raised);
|
|
padding: 1px 6px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.sidebar-item.active .item-count { background: var(--amber-bg); color: var(--amber-light); }
|
|
|
|
.sidebar-divider {
|
|
height: 1px;
|
|
background: var(--border-subtle);
|
|
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: var(--success-bg);
|
|
color: var(--success);
|
|
border: 1px solid var(--success-border);
|
|
}
|
|
|
|
.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; color: var(--text-secondary); }
|
|
.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 var(--border-subtle);
|
|
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: rgba(14, 18, 32, 0.85);
|
|
backdrop-filter: blur(16px);
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
}
|
|
|
|
.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-muted); }
|
|
|
|
.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-muted);
|
|
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(--cyan-bg);
|
|
color: var(--cyan);
|
|
border: 1px solid rgba(34, 211, 238, 0.2);
|
|
}
|
|
|
|
.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 rgba(212, 148, 15, 0.3);
|
|
}
|
|
|
|
/* 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
|
|
========================================================================== */
|
|
.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;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: border-color 0.2s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.stat-card:hover { border-color: var(--border); }
|
|
|
|
.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(--cyan), 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;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.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(--cyan); }
|
|
.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
|
|
========================================================================== */
|
|
.filter-section {
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-lg);
|
|
padding: 12px 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.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: transparent;
|
|
color: var(--text-secondary);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.12s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.filter-pill:hover { border-color: var(--text-muted); background: var(--bg-raised); }
|
|
|
|
.filter-pill.active {
|
|
background: var(--amber-bg);
|
|
border-color: rgba(212, 148, 15, 0.35);
|
|
color: var(--amber-light);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.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-muted);
|
|
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-muted); }
|
|
.filter-input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-bg); }
|
|
|
|
.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 rgba(212, 148, 15, 0.25);
|
|
border-radius: 20px;
|
|
font-size: 11px;
|
|
color: var(--amber-light);
|
|
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
|
|
========================================================================== */
|
|
.table-section {
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-lg);
|
|
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: rgba(16, 185, 129, 0.15); }
|
|
|
|
.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); }
|
|
|
|
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 with glow */
|
|
.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; }
|
|
|
|
/* Glow on status indicators */
|
|
.status-success .status-dot { box-shadow: 0 0 4px var(--success-glow); }
|
|
.status-error .status-dot { box-shadow: 0 0 4px var(--error-glow); }
|
|
|
|
.route-name { font-weight: 500; color: var(--text-primary); }
|
|
.route-name:hover { color: var(--amber); }
|
|
.route-group { font-size: 11px; color: var(--text-muted); }
|
|
|
|
.biz-id { font-family: var(--font-mono); font-weight: 500; color: var(--cyan); font-size: 12px; }
|
|
.biz-id-secondary { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
|
|
|
|
.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 { 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;
|
|
animation: glowPulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
.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 */
|
|
.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: rgba(244, 63, 94, 0.05);
|
|
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);
|
|
background: var(--bg-raised);
|
|
}
|
|
|
|
.pagination { display: flex; align-items: center; gap: 4px; }
|
|
|
|
.page-btn {
|
|
padding: 4px 10px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
background: transparent;
|
|
color: var(--text-secondary);
|
|
font-size: 12px;
|
|
font-family: var(--font-mono);
|
|
cursor: pointer;
|
|
transition: all 0.12s;
|
|
}
|
|
|
|
.page-btn:hover { background: var(--bg-hover); border-color: var(--text-muted); }
|
|
.page-btn.active { background: var(--amber-bg); border-color: rgba(212, 148, 15, 0.35); color: var(--amber-light); font-weight: 600; }
|
|
|
|
/* ==========================================================================
|
|
METRICS ROW
|
|
========================================================================== */
|
|
.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);
|
|
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.15; }
|
|
.chart-grid-line { stroke: var(--border-subtle); stroke-width: 0.5; }
|
|
.chart-label { font-family: var(--font-mono); font-size: 9px; fill: var(--text-muted); }
|
|
|
|
.sla-line { stroke: var(--error); stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.6; }
|
|
.sla-label-text { fill: var(--error); font-size: 8px; font-family: var(--font-mono); opacity: 0.7; }
|
|
|
|
/* ==========================================================================
|
|
DETAIL PANEL
|
|
========================================================================== */
|
|
.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-muted); }
|
|
|
|
.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 {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 16px;
|
|
background: var(--bg-deep);
|
|
}
|
|
|
|
.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 */
|
|
.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-raised);
|
|
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: rgba(255,255,255,0.8);
|
|
min-width: 20px;
|
|
}
|
|
|
|
.proc-ok { background: rgba(16, 185, 129, 0.45); }
|
|
.proc-slow { background: rgba(240, 180, 41, 0.45); }
|
|
.proc-fail { background: rgba(244, 63, 94, 0.45); }
|
|
|
|
.proc-dur { width: 42px; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); flex-shrink: 0; }
|
|
|
|
/* Error block */
|
|
.error-block {
|
|
background: rgba(244, 63, 94, 0.05);
|
|
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: var(--bg-deep); border: none; }
|
|
.action-btn.primary:hover { background: var(--amber-light); }
|
|
.action-btn.secondary { background: none; border: 1px solid var(--border); color: var(--text-secondary); }
|
|
.action-btn.secondary:hover { border-color: var(--text-muted); color: var(--text-primary); }
|
|
|
|
/* ==========================================================================
|
|
KEYBOARD SHORTCUTS BAR
|
|
========================================================================== */
|
|
.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;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.mono { font-family: var(--font-mono); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
|
|
<!-- SIDEBAR -->
|
|
<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:#D4940F" 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 -->
|
|
<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">
|
|
<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-muted);">🔎</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">
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<!-- 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>
|
|
<!-- ERROR 2 -->
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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">
|
|
<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="#22D3EE" 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="#22D3EE" 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>
|
|
<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"/>
|
|
<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(244, 63, 94, 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="#F0B429" 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="#F0B429" class="chart-line"/>
|
|
<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="#22D3EE" 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>
|
|
<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"/>
|
|
<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="rgba(244, 63, 94, 0.25)"/>
|
|
<rect x="24" y="56" width="18" height="9" rx="2" fill="rgba(244, 63, 94, 0.25)"/>
|
|
<rect x="46" y="58" width="18" height="7" rx="2" fill="rgba(244, 63, 94, 0.25)"/>
|
|
<rect x="68" y="55" width="18" height="10" rx="2" fill="rgba(244, 63, 94, 0.25)"/>
|
|
<rect x="90" y="52" width="18" height="13" rx="2" fill="rgba(244, 63, 94, 0.3)"/>
|
|
<rect x="112" y="56" width="18" height="9" rx="2" fill="rgba(244, 63, 94, 0.25)"/>
|
|
<rect x="134" y="59" width="18" height="6" rx="2" fill="rgba(244, 63, 94, 0.25)"/>
|
|
<rect x="156" y="50" width="18" height="15" rx="2" fill="rgba(244, 63, 94, 0.35)"/>
|
|
<rect x="178" y="45" width="18" height="20" rx="2" fill="rgba(244, 63, 94, 0.5)"/>
|
|
<rect x="200" y="42" width="18" height="23" rx="2" fill="rgba(244, 63, 94, 0.55)"/>
|
|
<rect x="222" y="38" width="18" height="27" rx="2" fill="rgba(244, 63, 94, 0.6)"/>
|
|
<rect x="244" y="36" width="18" height="29" rx="2" fill="rgba(244, 63, 94, 0.65)"/>
|
|
<rect x="266" y="34" width="18" height="31" rx="2" fill="rgba(244, 63, 94, 0.75)"/>
|
|
<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 -->
|
|
<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(--cyan);">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.3"></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>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|