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>

web/static/js/app.js

@@ -140,72 +140,222 @@ function renderConfig(data) {
         return;
     }
 
-    // Handle both old format (direct hardware) and new format (with specification)
     const config = data.hardware || data;
     const spec = data.specification;
 
     let html = '';
 
-    // Specification summary (new section)
+    // Configuration sub-tabs
+    html += `<div class="config-tabs">
+        <button class="config-tab active" data-config-tab="spec">Спецификация</button>
+        <button class="config-tab" data-config-tab="cpu">CPU</button>
+        <button class="config-tab" data-config-tab="memory">Memory</button>
+        <button class="config-tab" data-config-tab="power">Power</button>
+        <button class="config-tab" data-config-tab="storage">Hard Drive</button>
+        <button class="config-tab" data-config-tab="gpu">GPU</button>
+        <button class="config-tab" data-config-tab="network">Network</button>
+        <button class="config-tab" data-config-tab="pcie">Device Inventory</button>
+    </div>`;
+
+    // Specification tab
+    html += '<div class="config-tab-content active" id="config-spec">';
     if (spec && spec.length > 0) {
-        html += '<div class="config-section spec-section"><h3>Спецификация сервера</h3><ul class="spec-list">';
+        html += '<div class="spec-section"><h3>Спецификация сервера</h3><ul class="spec-list">';
         spec.forEach(item => {
             html += `<li><span class="spec-category">${escapeHtml(item.category)}</span> ${escapeHtml(item.name)} <span class="spec-qty">- ${item.quantity} шт.</span></li>`;
         });
         html += '</ul></div>';
+    } else {
+        html += '<p class="no-data">Нет данных о спецификации</p>';
     }
+    html += '</div>';
 
-    // CPUs
+    // CPU tab
+    html += '<div class="config-tab-content" id="config-cpu">';
     if (config.cpus && config.cpus.length > 0) {
-        html += '<div class="config-section"><h3>Процессоры</h3>';
+        html += '<h3>Процессоры</h3><table class="config-table"><thead><tr><th>Socket</th><th>Модель</th><th>Ядра</th><th>Потоки</th><th>Частота</th><th>Max Turbo</th><th>TDP</th><th>L3 Cache</th><th>PPIN</th></tr></thead><tbody>';
         config.cpus.forEach(cpu => {
-            html += `<div class="card">
-                <strong>Socket ${cpu.socket}: ${escapeHtml(cpu.model)}</strong><br>
-                Ядра: ${cpu.cores}, Потоки: ${cpu.threads}<br>
-                Частота: ${cpu.frequency_mhz} MHz (Turbo: ${cpu.max_frequency_mhz} MHz)<br>
-                TDP: ${cpu.tdp_w}W, L3: ${Math.round(cpu.l3_cache_kb/1024)} MB
-            </div>`;
+            html += `<tr>
+                <td>CPU${cpu.socket}</td>
+                <td>${escapeHtml(cpu.model)}</td>
+                <td>${cpu.cores}</td>
+                <td>${cpu.threads}</td>
+                <td>${cpu.frequency_mhz} MHz</td>
+                <td>${cpu.max_frequency_mhz} MHz</td>
+                <td>${cpu.tdp_w}W</td>
+                <td>${Math.round(cpu.l3_cache_kb/1024)} MB</td>
+                <td><code>${escapeHtml(cpu.ppin || '-')}</code></td>
+            </tr>`;
         });
-        html += '</div>';
+        html += '</tbody></table>';
+    } else {
+        html += '<p class="no-data">Нет данных о процессорах</p>';
     }
+    html += '</div>';
 
-    // Memory summary
+    // Memory tab
+    html += '<div class="config-tab-content" id="config-memory">';
     if (config.memory && config.memory.length > 0) {
         const totalGB = config.memory.reduce((sum, m) => sum + m.size_mb, 0) / 1024;
-        html += `<div class="config-section"><h3>Память</h3>
-            <p>Всего: ${totalGB} GB (${config.memory.length} модулей ${config.memory[0].type} @ ${config.memory[0].speed_mhz} MHz)</p>
-            <p>Производитель: ${escapeHtml(config.memory[0].manufacturer)}</p>
-        </div>`;
+        const presentCount = config.memory.filter(m => m.present !== false).length;
+        const workingCount = config.memory.filter(m => m.size_mb > 0).length;
+        html += `<h3>Модули памяти</h3>
+            <div class="memory-overview">
+                <div class="stat-box"><span class="stat-value">${totalGB} GB</span><span class="stat-label">Всего</span></div>
+                <div class="stat-box"><span class="stat-value">${presentCount}</span><span class="stat-label">Установлено</span></div>
+                <div class="stat-box"><span class="stat-value">${workingCount}</span><span class="stat-label">Активно</span></div>
+            </div>
+            <table class="config-table memory-table"><thead><tr>
+                <th>Location</th><th>Наличие</th><th>Размер</th><th>Тип</th><th>Max частота</th><th>Текущая частота</th><th>Производитель</th><th>Артикул</th><th>Статус</th>
+            </tr></thead><tbody>`;
+        config.memory.forEach(mem => {
+            const present = mem.present !== false ? '✓' : '-';
+            const presentClass = mem.present !== false ? 'present-yes' : 'present-no';
+            const sizeGB = mem.size_mb / 1024;
+            const statusClass = (mem.status === 'OK' || !mem.status) ? '' : 'status-warning';
+            const rowClass = sizeGB === 0 ? 'row-warning' : '';
+            html += `<tr class="${rowClass}">
+                <td>${escapeHtml(mem.location || mem.slot)}</td>
+                <td class="${presentClass}">${present}</td>
+                <td>${sizeGB} GB</td>
+                <td>${escapeHtml(mem.type || '-')}</td>
+                <td>${mem.max_speed_mhz || '-'} MHz</td>
+                <td>${mem.current_speed_mhz || mem.speed_mhz || '-'} MHz</td>
+                <td>${escapeHtml(mem.manufacturer || '-')}</td>
+                <td><code>${escapeHtml(mem.part_number || '-')}</code></td>
+                <td class="${statusClass}">${escapeHtml(mem.status || 'OK')}</td>
+            </tr>`;
+        });
+        html += '</tbody></table>';
+    } else {
+        html += '<p class="no-data">Нет данных о памяти</p>';
     }
+    html += '</div>';
 
-    // Storage summary
+    // Power tab
+    html += '<div class="config-tab-content" id="config-power">';
+    if (config.power_supplies && config.power_supplies.length > 0) {
+        html += '<h3>Блоки питания</h3><table class="config-table"><thead><tr><th>Слот</th><th>Производитель</th><th>Модель</th><th>Мощность</th><th>Вход</th><th>Выход</th><th>Напряжение</th><th>Температура</th><th>Статус</th></tr></thead><tbody>';
+        config.power_supplies.forEach(psu => {
+            const statusClass = psu.status === 'OK' ? '' : 'status-warning';
+            html += `<tr>
+                <td>${escapeHtml(psu.slot)}</td>
+                <td>${escapeHtml(psu.vendor || '-')}</td>
+                <td>${escapeHtml(psu.model || '-')}</td>
+                <td>${psu.wattage_w || '-'}W</td>
+                <td>${psu.input_power_w || '-'}W</td>
+                <td>${psu.output_power_w || '-'}W</td>
+                <td>${psu.input_voltage ? psu.input_voltage.toFixed(0) : '-'}V</td>
+                <td>${psu.temperature_c || '-'}°C</td>
+                <td class="${statusClass}">${escapeHtml(psu.status || '-')}</td>
+            </tr>`;
+        });
+        html += '</tbody></table>';
+    } else {
+        html += '<p class="no-data">Нет данных о блоках питания</p>';
+    }
+    html += '</div>';
+
+    // Storage tab
+    html += '<div class="config-tab-content" id="config-storage">';
     if (config.storage && config.storage.length > 0) {
-        html += '<div class="config-section"><h3>Накопители</h3><table><thead><tr><th>Слот</th><th>Модель</th><th>Размер</th></tr></thead><tbody>';
+        html += '<h3>Накопители</h3><table class="config-table"><thead><tr><th>Слот</th><th>Тип</th><th>Интерфейс</th><th>Модель</th><th>Производитель</th><th>Размер</th><th>Серийный номер</th></tr></thead><tbody>';
         config.storage.forEach(s => {
             html += `<tr>
-                <td>${escapeHtml(s.slot || s.interface)}</td>
-                <td>${escapeHtml(s.model)}</td>
+                <td>${escapeHtml(s.slot || '-')}</td>
+                <td>${escapeHtml(s.type || '-')}</td>
+                <td>${escapeHtml(s.interface || '-')}</td>
+                <td>${escapeHtml(s.model || '-')}</td>
+                <td>${escapeHtml(s.manufacturer || '-')}</td>
                 <td>${s.size_gb} GB</td>
+                <td><code>${escapeHtml(s.serial_number || '-')}</code></td>
             </tr>`;
         });
-        html += '</tbody></table></div>';
+        html += '</tbody></table>';
+    } else {
+        html += '<p class="no-data">Нет данных о накопителях</p>';
     }
+    html += '</div>';
 
-    // PCIe summary
+    // GPU tab
+    html += '<div class="config-tab-content" id="config-gpu">';
+    if (config.gpus && config.gpus.length > 0) {
+        html += '<h3>Графические процессоры</h3><table class="config-table"><thead><tr><th>Слот</th><th>Модель</th><th>Производитель</th><th>BDF</th><th>PCIe</th><th>Серийный номер</th></tr></thead><tbody>';
+        config.gpus.forEach(gpu => {
+            html += `<tr>
+                <td>${escapeHtml(gpu.slot || '-')}</td>
+                <td>${escapeHtml(gpu.model || '-')}</td>
+                <td>${escapeHtml(gpu.manufacturer || '-')}</td>
+                <td><code>${escapeHtml(gpu.bdf || '-')}</code></td>
+                <td>x${gpu.link_width || '-'} ${escapeHtml(gpu.link_speed || '-')}</td>
+                <td><code>${escapeHtml(gpu.serial_number || '-')}</code></td>
+            </tr>`;
+        });
+        html += '</tbody></table>';
+    } else {
+        html += '<p class="no-data">Нет GPU</p>';
+    }
+    html += '</div>';
+
+    // Network tab
+    html += '<div class="config-tab-content" id="config-network">';
+    if (config.network_adapters && config.network_adapters.length > 0) {
+        html += '<h3>Сетевые адаптеры</h3><table class="config-table"><thead><tr><th>Слот</th><th>Модель</th><th>Производитель</th><th>Порты</th><th>Тип</th><th>MAC адреса</th><th>Статус</th></tr></thead><tbody>';
+        config.network_adapters.forEach(nic => {
+            const macs = nic.mac_addresses ? nic.mac_addresses.join(', ') : '-';
+            const statusClass = nic.status === 'OK' ? '' : 'status-warning';
+            html += `<tr>
+                <td>${escapeHtml(nic.location || nic.slot || '-')}</td>
+                <td>${escapeHtml(nic.model || '-')}</td>
+                <td>${escapeHtml(nic.vendor || '-')}</td>
+                <td>${nic.port_count || '-'}</td>
+                <td>${escapeHtml(nic.port_type || '-')}</td>
+                <td><code>${escapeHtml(macs)}</code></td>
+                <td class="${statusClass}">${escapeHtml(nic.status || '-')}</td>
+            </tr>`;
+        });
+        html += '</tbody></table>';
+    } else {
+        html += '<p class="no-data">Нет данных о сетевых адаптерах</p>';
+    }
+    html += '</div>';
+
+    // PCIe Device Inventory tab
+    html += '<div class="config-tab-content" id="config-pcie">';
     if (config.pcie_devices && config.pcie_devices.length > 0) {
-        html += '<div class="config-section"><h3>PCIe устройства</h3><table><thead><tr><th>Слот</th><th>Тип</th><th>Производитель</th><th>Скорость</th></tr></thead><tbody>';
+        html += '<h3>PCIe устройства</h3><table class="config-table"><thead><tr><th>Слот</th><th>BDF</th><th>Тип</th><th>Производитель</th><th>Vendor:Device ID</th><th>PCIe Link</th></tr></thead><tbody>';
         config.pcie_devices.forEach(p => {
             html += `<tr>
-                <td>${escapeHtml(p.slot)}</td>
-                <td>${escapeHtml(p.device_class)}</td>
+                <td>${escapeHtml(p.slot || '-')}</td>
+                <td><code>${escapeHtml(p.bdf || '-')}</code></td>
+                <td>${escapeHtml(p.device_class || '-')}</td>
                 <td>${escapeHtml(p.manufacturer || '-')}</td>
-                <td>x${p.link_width} ${escapeHtml(p.link_speed)}</td>
+                <td><code>${p.vendor_id ? p.vendor_id.toString(16) : '-'}:${p.device_id ? p.device_id.toString(16) : '-'}</code></td>
+                <td>x${p.link_width || '-'} ${escapeHtml(p.link_speed || '-')}</td>
             </tr>`;
         });
-        html += '</tbody></table></div>';
+        html += '</tbody></table>';
+    } else {
+        html += '<p class="no-data">Нет данных о PCIe устройствах</p>';
     }
+    html += '</div>';
 
     container.innerHTML = html;
+
+    // Initialize config sub-tabs
+    initConfigTabs();
+}
+
+function initConfigTabs() {
+    const tabs = document.querySelectorAll('.config-tab');
+    tabs.forEach(tab => {
+        tab.addEventListener('click', () => {
+            tabs.forEach(t => t.classList.remove('active'));
+            document.querySelectorAll('.config-tab-content').forEach(c => c.classList.remove('active'));
+            tab.classList.add('active');
+            document.getElementById('config-' + tab.dataset.configTab).classList.add('active');
+        });
+    });
 }
 
 async function loadFirmware() {