64 lines
1.2 KiB
Markdown
64 lines
1.2 KiB
Markdown
# UI Information Architecture
|
|
|
|
## Page Structure
|
|
|
|
The page should contain:
|
|
|
|
1. header
|
|
2. snapshot metadata strip
|
|
3. compact section navigation
|
|
4. ordered content sections
|
|
|
|
## Header
|
|
|
|
Show only essential context:
|
|
|
|
- product name
|
|
- target host if present
|
|
- collected time if present
|
|
- source type and protocol if present
|
|
|
|
## Section Order
|
|
|
|
Preferred order:
|
|
|
|
1. `board`
|
|
2. `firmware`
|
|
3. `cpus`
|
|
4. `memory`
|
|
5. `storage`
|
|
6. `pcie_devices`
|
|
7. `power_supplies`
|
|
8. `sensors`
|
|
9. unknown sections
|
|
|
|
## Section Presentation
|
|
|
|
- singleton object sections render as key-value table
|
|
- array sections render as compact data tables
|
|
- sensors render as separate subtables for `fans`, `power`, `temperatures`, and `other`
|
|
|
|
## Visual Rules
|
|
|
|
- status badges:
|
|
- green for `OK`
|
|
- yellow/amber for `Warning`
|
|
- red for `Critical`
|
|
- gray for `Unknown`
|
|
- light gray for `Empty`
|
|
- do not color arbitrary non-status fields
|
|
- keep tables dense and scan-friendly
|
|
|
|
## Complexity Limits
|
|
|
|
- no multi-tab application shell
|
|
- no dashboard analytics
|
|
- no wizard-like workflow
|
|
- no collector controls
|
|
|
|
## Accessibility
|
|
|
|
- tables must remain readable on desktop and mobile
|
|
- section navigation must work without JavaScript
|
|
- color must not be the only status indicator; always show text
|