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
180 lines
7.3 KiB
Markdown
180 lines
7.3 KiB
Markdown
---
|
|
name: Precision Protocol System
|
|
colors:
|
|
surface: '#f8f9ff'
|
|
surface-dim: '#cbdbf5'
|
|
surface-bright: '#f8f9ff'
|
|
surface-container-lowest: '#ffffff'
|
|
surface-container-low: '#eff4ff'
|
|
surface-container: '#e5eeff'
|
|
surface-container-high: '#dce9ff'
|
|
surface-container-highest: '#d3e4fe'
|
|
on-surface: '#0b1c30'
|
|
on-surface-variant: '#45464d'
|
|
inverse-surface: '#213145'
|
|
inverse-on-surface: '#eaf1ff'
|
|
outline: '#76777d'
|
|
outline-variant: '#c6c6cd'
|
|
surface-tint: '#565e74'
|
|
primary: '#000000'
|
|
on-primary: '#ffffff'
|
|
primary-container: '#131b2e'
|
|
on-primary-container: '#7c839b'
|
|
inverse-primary: '#bec6e0'
|
|
secondary: '#006a61'
|
|
on-secondary: '#ffffff'
|
|
secondary-container: '#86f2e4'
|
|
on-secondary-container: '#006f66'
|
|
tertiary: '#000000'
|
|
on-tertiary: '#ffffff'
|
|
tertiary-container: '#0f0069'
|
|
on-tertiary-container: '#7671ff'
|
|
error: '#ba1a1a'
|
|
on-error: '#ffffff'
|
|
error-container: '#ffdad6'
|
|
on-error-container: '#93000a'
|
|
primary-fixed: '#dae2fd'
|
|
primary-fixed-dim: '#bec6e0'
|
|
on-primary-fixed: '#131b2e'
|
|
on-primary-fixed-variant: '#3f465c'
|
|
secondary-fixed: '#89f5e7'
|
|
secondary-fixed-dim: '#6bd8cb'
|
|
on-secondary-fixed: '#00201d'
|
|
on-secondary-fixed-variant: '#005049'
|
|
tertiary-fixed: '#e2dfff'
|
|
tertiary-fixed-dim: '#c3c0ff'
|
|
on-tertiary-fixed: '#0f0069'
|
|
on-tertiary-fixed-variant: '#3323cc'
|
|
background: '#f8f9ff'
|
|
on-background: '#0b1c30'
|
|
surface-variant: '#d3e4fe'
|
|
typography:
|
|
headline-lg:
|
|
fontFamily: Inter
|
|
fontSize: 30px
|
|
fontWeight: '600'
|
|
lineHeight: 38px
|
|
letterSpacing: -0.02em
|
|
headline-md:
|
|
fontFamily: Inter
|
|
fontSize: 24px
|
|
fontWeight: '600'
|
|
lineHeight: 32px
|
|
letterSpacing: -0.01em
|
|
headline-sm:
|
|
fontFamily: Inter
|
|
fontSize: 18px
|
|
fontWeight: '600'
|
|
lineHeight: 26px
|
|
body-lg:
|
|
fontFamily: Inter
|
|
fontSize: 16px
|
|
fontWeight: '400'
|
|
lineHeight: 24px
|
|
body-md:
|
|
fontFamily: Inter
|
|
fontSize: 14px
|
|
fontWeight: '400'
|
|
lineHeight: 20px
|
|
body-sm:
|
|
fontFamily: Inter
|
|
fontSize: 13px
|
|
fontWeight: '400'
|
|
lineHeight: 18px
|
|
label-md:
|
|
fontFamily: Inter
|
|
fontSize: 12px
|
|
fontWeight: '500'
|
|
lineHeight: 16px
|
|
letterSpacing: 0.05em
|
|
mono-md:
|
|
fontFamily: JetBrains Mono
|
|
fontSize: 13px
|
|
fontWeight: '400'
|
|
lineHeight: 20px
|
|
mono-sm:
|
|
fontFamily: JetBrains Mono
|
|
fontSize: 11px
|
|
fontWeight: '400'
|
|
lineHeight: 16px
|
|
rounded:
|
|
sm: 0.125rem
|
|
DEFAULT: 0.25rem
|
|
md: 0.375rem
|
|
lg: 0.5rem
|
|
xl: 0.75rem
|
|
full: 9999px
|
|
spacing:
|
|
unit: 4px
|
|
container-padding: 24px
|
|
gutter: 16px
|
|
sidebar-width: 260px
|
|
stack-sm: 8px
|
|
stack-md: 16px
|
|
stack-lg: 32px
|
|
---
|
|
|
|
## 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. |