Kevin L'Hereec
0c83a4ccb2
- MongoDB storage: cwmp_exchanges collection with indexes (deviceId+timestamp, deviceId+sequenceNumber unique, TTL 24h) - ExchangeStoreService: CWMP method extraction, per-device queue for ordering, retry logic, message cap (5000/device) - Exchange API: GET/DELETE/SSE stream endpoints with Last-Event-ID reconnection - CwmpLoggerMiddleware: dual-write (MongoDB + legacy files) with fire-and-forget - Frontend: SequenceViewer (CPE↔ACS lifelines, arrows, auto-scroll, virtual scroll) + InspectorPanel (formatted XML, copy, syntax highlighting) - Tr069Trace page: integrated new viewer with col-6/col-6 layout - DeviceDetail page: collapsible exchange section when device is traced - 14 property-based tests, 40+ unit tests, 5 integration tests - Health check includes index verification - Config: feature flags, SSE timeouts, retry policy
7.3 KiB
name, colors, typography, rounded, spacing
| name | colors | typography | rounded | spacing | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Precision Protocol System |
|
|
|
|
Brand & Style
This design system is engineered for high-performance network analysis and protocol monitoring. The brand personality is rooted in precision, neutrality, and clarity. It avoids decorative flourishes to prioritize the rapid interpretation of complex data structures.
The visual style is a blend of Minimalism and Modern Corporate aesthetics. It utilizes a spacious layout to reduce the cognitive load inherent in dense data environments. The interface conveys reliability through a systematic application of subtle borders and high-contrast typography, ensuring that critical network events are immediately visible.
Colors
The palette is anchored in Slate and Zinc neutrals to provide a professional, calm environment for long-term monitoring.
- Primary (Slate 950): Used for core navigation, high-level headers, and text to ensure maximum contrast.
- Neutral (Slate/Zinc): Used for structural elements, secondary text, and inactive states.
- Flow Accents: Semantic colors are reserved for directional data. Teal (ACS -> CPE) and Indigo (CPE -> ACS) allow engineers to visually parse the direction of TR-069 traffic at a glance without reading text labels.
- Success/Error: Traditional Green and Red are used sparingly for status indicators and connection states.
Typography
This design system utilizes a dual-font strategy. Inter is the workhorse for the UI, chosen for its exceptional legibility in small sizes and high-density layouts. JetBrains Mono is utilized exclusively for technical data, including XML, JSON payloads, and packet hex dumps.
Headlines use tighter letter spacing for a more authoritative look, while labels utilize uppercase styling and increased tracking for clear categorization in sidebars and table headers. Monospaced text is rendered with a slightly smaller font size than body text to accommodate long lines of code without excessive wrapping.
Layout & Spacing
The layout follows a Hybrid Grid model. Navigation and property inspectors use fixed-width sidebars, while the main content area—typically containing packet logs or traffic graphs—uses a Fluid Grid to maximize horizontal real estate.
Breakpoints
- Desktop (1280px+): 12-column fluid grid, 24px margins.
- Tablet (768px - 1279px): 8-column fluid grid, 16px margins. Sidebar collapses to icons.
- Mobile (<767px): 4-column fluid grid, 12px margins. Horizontal scrolling enabled for data tables.
Spacing is based on a 4px base unit. Component internals use 8px or 12px increments to maintain a compact, "instrumental" feel without appearing cluttered.
Elevation & Depth
To maintain a technical and minimalist aesthetic, this design system avoids heavy shadows. Instead, it relies on Tonal Layers and Low-Contrast Outlines.
- Background (Level 0): Slate-50. The base canvas.
- Surface (Level 1): White. Primary cards and panels.
- Active/Overlay (Level 2): White with a subtle 1px border in Slate-200 and a very soft, high-diffusion shadow (4px blur, 2% opacity) to indicate temporary elements like tooltips or dropdowns.
Visual separation between adjacent panels is achieved via 1px solid borders in Slate-200 rather than elevation, ensuring the UI remains crisp and "flat."
Shapes
The shape language is Soft (Level 1). A 4px radius is applied to buttons, input fields, and panels. This subtle rounding provides a modern touch without sacrificing the professional, rigid structure required for a technical tool.
Status indicators (pills) use a slightly larger 12px radius to distinguish them from interactive buttons, while data visualization bars use sharp 2px corners for maximum precision.
Components
Buttons
Primary buttons use the Slate-950 background with white text. Ghost buttons (transparent background with Slate-200 borders) are preferred for secondary actions to keep the focus on the data.
Packet Log Entries
Logs must use a zebra-stripe pattern (White / Slate-50) for horizontal tracking. The "Flow Direction" is indicated by a 4px vertical accent bar on the far left of the row (Teal or Indigo).
Input Fields
Fields use a 1px Slate-200 border. On focus, the border transitions to Slate-900. Labels are always positioned above the input in the label-md style for clarity.
Data Displays (Code Blocks)
XML/JSON payloads are wrapped in containers with a Slate-50 background and a 1px border. They use mono-md typography with syntax highlighting that mirrors the flow colors (Teal for tags, Indigo for values).
Chips & Badges
Used for protocol methods (e.g., Inform, GetParameterValues). These are small, low-contrast components (Slate-100 background) to avoid competing with the flow direction accents.