Add detailed hardware configuration view with sub-tabs

- Redesign config page with tabs: Spec, CPU, Memory, Power, Storage, GPU, Network, PCIe
- Parse detailed memory info from component.log with all fields:
  Location, Present, Size, Type, Max/Current Speed, Manufacturer, Part Number, Status
- Add GPU model extraction from PCIe devices
- Add NetworkAdapter model with detailed fields from RESTful API
- Update PSU model with power metrics (input/output power, voltage, temperature)
- Memory modules with 0GB size (failed) highlighted in warning color
- Add memory overview stats (total GB, installed count, active count)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-25 09:11:44 +03:00
parent 24b722df6c
commit c243b4e141
6 changed files with 689 additions and 95 deletions

View File

@@ -389,6 +389,130 @@ footer {
padding: 2rem;
}
/* Configuration tabs */
.config-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
margin-bottom: 1rem;
background: #f0f0f0;
padding: 0.25rem;
border-radius: 6px;
}
.config-tab {
padding: 0.5rem 1rem;
background: none;
border: none;
cursor: pointer;
font-size: 0.875rem;
color: #666;
border-radius: 4px;
transition: all 0.2s;
}
.config-tab:hover {
color: #333;
background: #e0e0e0;
}
.config-tab.active {
color: white;
background: #3498db;
}
.config-tab-content {
display: none;
}
.config-tab-content.active {
display: block;
}
.config-tab-content h3 {
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #e0e0e0;
color: #2c3e50;
}
/* Config tables */
.config-table {
font-size: 0.875rem;
}
.config-table th {
background: #2c3e50;
color: white;
font-weight: 500;
padding: 0.5rem 0.75rem;
white-space: nowrap;
}
.config-table td {
padding: 0.5rem 0.75rem;
vertical-align: middle;
}
.config-table tbody tr:nth-child(even) {
background: #f8f9fa;
}
.config-table tbody tr:hover {
background: #e8f4fc;
}
/* Memory table specific */
.memory-table .row-warning {
background: #fff3cd !important;
}
.memory-table .row-warning:hover {
background: #ffe8a1 !important;
}
.memory-table .present-yes {
color: #27ae60;
font-weight: bold;
}
.memory-table .present-no {
color: #95a5a6;
}
.memory-table .status-warning {
color: #e74c3c;
font-weight: bold;
}
/* Memory overview stats */
.memory-overview {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
}
.stat-box {
background: #f8f9fa;
padding: 1rem 1.5rem;
border-radius: 8px;
text-align: center;
border-left: 4px solid #3498db;
}
.stat-value {
display: block;
font-size: 1.5rem;
font-weight: bold;
color: #2c3e50;
}
.stat-label {
font-size: 0.75rem;
color: #666;
text-transform: uppercase;
}
/* Responsive */
@media (max-width: 768px) {
.sensor-grid {
@@ -402,4 +526,25 @@ footer {
th, td {
padding: 0.5rem;
}
.config-tabs {
flex-direction: column;
}
.config-tab {
text-align: left;
}
.memory-overview {
flex-direction: column;
}
.config-table {
font-size: 0.75rem;
}
.config-table th,
.config-table td {
padding: 0.25rem 0.5rem;
}
}