inventory - diffs & changes UI mockups #43
Description
Overview
Create UI/UX design mockups for visualizing inventory differences and changes over time within the system detail view. Each system periodically sends its inventory (hardware, software, network, security configuration, etc.). The backend compares each new inventory with the previous one and produces a list of "diffs" — field-level changes.
The goal is to let the user understand what changed on a system, when, and how severe the change is, at a glance.
Context
Each diff has three key dimensions:
- Severity (low, medium, high, critical) — how impactful the change is. For example, an OS version upgrade is "high", an uptime fluctuation is "low", removing a node is "critical"
- Category (os, hardware, network, security, backup, features, modules, cluster, nodes, system) — the domain the change belongs to
- Diff type (create, update, delete) — whether something was added, modified, or removed
Each diff also includes the path of the changed field (e.g. facts.distro.version), the previous value, and the current value.
In addition to individual diffs, there are aggregated summaries showing counts grouped by category and severity — useful for a high-level overview without diving into details.
Requirements
Main Components
- Summary card/section for changes overview (total changes, recent changes, presence of critical changes, presence of alerts)
- Distribution of changes by category and by severity (consider small charts, badge groups, or similar)
- "Latest batch" view — what changed in the most recent inventory submission, ordered by severity (critical first)
- Full diff list/table with pagination and filters for severity, category, diff type, and date range
- Single diff representation: operation type (create/update/delete), changed field path, previous vs current value. Values can be simple strings or complex JSON objects
- Inventory history — timeline or table of inventory collections with a "has changes" indicator and change count
Design System
Follow existing project design patterns and component library in Nethesis Design System
Technical reference: full schemas are documented in backend/openapi.yaml (schemas: InventoryRecord, InventoryDiff, InventoryChangesSummary)