Add LOGPile BMC diagnostic log analyzer
Features: - Modular parser architecture for vendor-specific formats - Inspur/Kaytus parser supporting asset.json, devicefrusdr.log, component.log, idl.log, and syslog files - PCI Vendor/Device ID lookup for hardware identification - Web interface with tabs: Events, Sensors, Config, Serials, Firmware - Server specification summary with component grouping - Export to CSV, JSON, TXT formats - BMC alarm parsing from IDL logs (memory errors, PSU events, etc.) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
443
web/static/js/app.js
Normal file
443
web/static/js/app.js
Normal file
@@ -0,0 +1,443 @@
|
||||
// LOGPile Frontend Application
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initUpload();
|
||||
initTabs();
|
||||
initFilters();
|
||||
});
|
||||
|
||||
// Upload handling
|
||||
function initUpload() {
|
||||
const dropZone = document.getElementById('drop-zone');
|
||||
const fileInput = document.getElementById('file-input');
|
||||
|
||||
dropZone.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
dropZone.classList.add('dragover');
|
||||
});
|
||||
|
||||
dropZone.addEventListener('dragleave', () => {
|
||||
dropZone.classList.remove('dragover');
|
||||
});
|
||||
|
||||
dropZone.addEventListener('drop', (e) => {
|
||||
e.preventDefault();
|
||||
dropZone.classList.remove('dragover');
|
||||
const files = e.dataTransfer.files;
|
||||
if (files.length > 0) {
|
||||
uploadFile(files[0]);
|
||||
}
|
||||
});
|
||||
|
||||
fileInput.addEventListener('change', () => {
|
||||
if (fileInput.files.length > 0) {
|
||||
uploadFile(fileInput.files[0]);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function uploadFile(file) {
|
||||
const status = document.getElementById('upload-status');
|
||||
status.textContent = 'Загрузка и анализ...';
|
||||
status.className = '';
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('archive', file);
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/upload', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
status.innerHTML = `<strong>${escapeHtml(result.vendor)}</strong><br>` +
|
||||
`${result.stats.sensors} сенсоров, ${result.stats.fru} компонентов, ${result.stats.events} событий`;
|
||||
status.className = 'success';
|
||||
loadData(result.vendor);
|
||||
} else {
|
||||
status.textContent = result.error || 'Ошибка загрузки';
|
||||
status.className = 'error';
|
||||
}
|
||||
} catch (err) {
|
||||
status.textContent = 'Ошибка соединения';
|
||||
status.className = 'error';
|
||||
}
|
||||
}
|
||||
|
||||
// Tab navigation
|
||||
function initTabs() {
|
||||
const tabs = document.querySelectorAll('.tab');
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
tabs.forEach(t => t.classList.remove('active'));
|
||||
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
|
||||
tab.classList.add('active');
|
||||
document.getElementById(tab.dataset.tab).classList.add('active');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Filters
|
||||
function initFilters() {
|
||||
document.getElementById('sensor-filter').addEventListener('change', (e) => {
|
||||
filterSensors(e.target.value);
|
||||
});
|
||||
document.getElementById('severity-filter').addEventListener('change', (e) => {
|
||||
filterEvents(e.target.value);
|
||||
});
|
||||
document.getElementById('serial-filter').addEventListener('change', (e) => {
|
||||
filterSerials(e.target.value);
|
||||
});
|
||||
}
|
||||
|
||||
let allSensors = [];
|
||||
let allEvents = [];
|
||||
let allSerials = [];
|
||||
|
||||
let currentVendor = '';
|
||||
|
||||
// Load data from API
|
||||
async function loadData(vendor) {
|
||||
currentVendor = vendor || '';
|
||||
document.getElementById('upload-section').classList.add('hidden');
|
||||
document.getElementById('data-section').classList.remove('hidden');
|
||||
document.getElementById('clear-btn').classList.remove('hidden');
|
||||
|
||||
// Update vendor badge if exists
|
||||
const vendorBadge = document.getElementById('vendor-badge');
|
||||
if (vendorBadge && currentVendor) {
|
||||
vendorBadge.textContent = currentVendor;
|
||||
vendorBadge.classList.remove('hidden');
|
||||
}
|
||||
|
||||
await Promise.all([
|
||||
loadConfig(),
|
||||
loadFirmware(),
|
||||
loadSensors(),
|
||||
loadSerials(),
|
||||
loadEvents()
|
||||
]);
|
||||
}
|
||||
|
||||
async function loadConfig() {
|
||||
try {
|
||||
const response = await fetch('/api/config');
|
||||
const config = await response.json();
|
||||
renderConfig(config);
|
||||
} catch (err) {
|
||||
console.error('Failed to load config:', err);
|
||||
}
|
||||
}
|
||||
|
||||
function renderConfig(data) {
|
||||
const container = document.getElementById('config-content');
|
||||
|
||||
if (!data || Object.keys(data).length === 0) {
|
||||
container.innerHTML = '<p class="no-data">Нет данных о конфигурации</p>';
|
||||
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)
|
||||
if (spec && spec.length > 0) {
|
||||
html += '<div class="config-section 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>';
|
||||
}
|
||||
|
||||
// CPUs
|
||||
if (config.cpus && config.cpus.length > 0) {
|
||||
html += '<div class="config-section"><h3>Процессоры</h3>';
|
||||
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 += '</div>';
|
||||
}
|
||||
|
||||
// Memory summary
|
||||
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>`;
|
||||
}
|
||||
|
||||
// Storage summary
|
||||
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>';
|
||||
config.storage.forEach(s => {
|
||||
html += `<tr>
|
||||
<td>${escapeHtml(s.slot || s.interface)}</td>
|
||||
<td>${escapeHtml(s.model)}</td>
|
||||
<td>${s.size_gb} GB</td>
|
||||
</tr>`;
|
||||
});
|
||||
html += '</tbody></table></div>';
|
||||
}
|
||||
|
||||
// PCIe summary
|
||||
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>';
|
||||
config.pcie_devices.forEach(p => {
|
||||
html += `<tr>
|
||||
<td>${escapeHtml(p.slot)}</td>
|
||||
<td>${escapeHtml(p.device_class)}</td>
|
||||
<td>${escapeHtml(p.manufacturer || '-')}</td>
|
||||
<td>x${p.link_width} ${escapeHtml(p.link_speed)}</td>
|
||||
</tr>`;
|
||||
});
|
||||
html += '</tbody></table></div>';
|
||||
}
|
||||
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
async function loadFirmware() {
|
||||
try {
|
||||
const response = await fetch('/api/firmware');
|
||||
const firmware = await response.json();
|
||||
renderFirmware(firmware);
|
||||
} catch (err) {
|
||||
console.error('Failed to load firmware:', err);
|
||||
}
|
||||
}
|
||||
|
||||
function renderFirmware(firmware) {
|
||||
const tbody = document.querySelector('#firmware-table tbody');
|
||||
tbody.innerHTML = '';
|
||||
|
||||
if (!firmware || firmware.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="3" class="no-data">Нет данных о прошивках</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
firmware.forEach(fw => {
|
||||
const row = document.createElement('tr');
|
||||
row.innerHTML = `
|
||||
<td>${escapeHtml(fw.device_name)}</td>
|
||||
<td><code>${escapeHtml(fw.version)}</code></td>
|
||||
<td>${escapeHtml(fw.build_date || '-')}</td>
|
||||
`;
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
async function loadSensors() {
|
||||
try {
|
||||
const response = await fetch('/api/sensors');
|
||||
allSensors = await response.json();
|
||||
renderSensors(allSensors);
|
||||
} catch (err) {
|
||||
console.error('Failed to load sensors:', err);
|
||||
}
|
||||
}
|
||||
|
||||
function renderSensors(sensors) {
|
||||
const container = document.getElementById('sensors-content');
|
||||
|
||||
if (!sensors || sensors.length === 0) {
|
||||
container.innerHTML = '<p class="no-data">Нет данных о сенсорах</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
// Group by type
|
||||
const byType = {};
|
||||
sensors.forEach(s => {
|
||||
if (!byType[s.type]) byType[s.type] = [];
|
||||
byType[s.type].push(s);
|
||||
});
|
||||
|
||||
const typeNames = {
|
||||
temperature: 'Температура',
|
||||
voltage: 'Напряжение',
|
||||
power: 'Мощность',
|
||||
fan_speed: 'Вентиляторы',
|
||||
fan_status: 'Статус вентиляторов',
|
||||
psu_status: 'Статус БП',
|
||||
cpu_status: 'Статус CPU',
|
||||
storage_status: 'Статус накопителей',
|
||||
other: 'Прочее'
|
||||
};
|
||||
|
||||
let html = '';
|
||||
for (const [type, items] of Object.entries(byType)) {
|
||||
html += `<div class="sensor-group" data-type="${type}">
|
||||
<h3>${typeNames[type] || type}</h3>
|
||||
<div class="sensor-grid">`;
|
||||
|
||||
items.forEach(s => {
|
||||
let valueStr = '';
|
||||
let statusClass = s.status === 'ok' ? 'ok' : (s.status === 'ns' ? 'ns' : 'warn');
|
||||
|
||||
if (s.value) {
|
||||
valueStr = `${s.value} ${s.unit}`;
|
||||
} else if (s.raw_value) {
|
||||
valueStr = s.raw_value;
|
||||
} else {
|
||||
valueStr = s.status;
|
||||
}
|
||||
|
||||
html += `<div class="sensor-card ${statusClass}">
|
||||
<span class="sensor-name">${escapeHtml(s.name)}</span>
|
||||
<span class="sensor-value">${escapeHtml(valueStr)}</span>
|
||||
</div>`;
|
||||
});
|
||||
|
||||
html += '</div></div>';
|
||||
}
|
||||
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
function filterSensors(type) {
|
||||
if (!type) {
|
||||
renderSensors(allSensors);
|
||||
return;
|
||||
}
|
||||
const filtered = allSensors.filter(s => s.type === type);
|
||||
renderSensors(filtered);
|
||||
}
|
||||
|
||||
async function loadSerials() {
|
||||
try {
|
||||
const response = await fetch('/api/serials');
|
||||
allSerials = await response.json();
|
||||
renderSerials(allSerials);
|
||||
} catch (err) {
|
||||
console.error('Failed to load serials:', err);
|
||||
}
|
||||
}
|
||||
|
||||
function renderSerials(serials) {
|
||||
const tbody = document.querySelector('#serials-table tbody');
|
||||
tbody.innerHTML = '';
|
||||
|
||||
if (!serials || serials.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="5" class="no-data">Нет серийных номеров</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
const categoryNames = {
|
||||
'Board': 'Мат. плата',
|
||||
'CPU': 'Процессор',
|
||||
'Memory': 'Память',
|
||||
'Storage': 'Накопитель',
|
||||
'PCIe': 'PCIe',
|
||||
'Network': 'Сеть',
|
||||
'PSU': 'БП',
|
||||
'FRU': 'FRU'
|
||||
};
|
||||
|
||||
serials.forEach(item => {
|
||||
if (!item.serial_number) return;
|
||||
const row = document.createElement('tr');
|
||||
row.innerHTML = `
|
||||
<td><span class="category-badge ${item.category.toLowerCase()}">${categoryNames[item.category] || item.category}</span></td>
|
||||
<td>${escapeHtml(item.component)}</td>
|
||||
<td><code>${escapeHtml(item.serial_number)}</code></td>
|
||||
<td>${escapeHtml(item.manufacturer || '-')}</td>
|
||||
<td>${escapeHtml(item.part_number || '-')}</td>
|
||||
`;
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
function filterSerials(category) {
|
||||
if (!category) {
|
||||
renderSerials(allSerials);
|
||||
return;
|
||||
}
|
||||
const filtered = allSerials.filter(s => s.category === category);
|
||||
renderSerials(filtered);
|
||||
}
|
||||
|
||||
async function loadEvents() {
|
||||
try {
|
||||
const response = await fetch('/api/events');
|
||||
allEvents = await response.json();
|
||||
renderEvents(allEvents);
|
||||
} catch (err) {
|
||||
console.error('Failed to load events:', err);
|
||||
}
|
||||
}
|
||||
|
||||
function renderEvents(events) {
|
||||
const tbody = document.querySelector('#events-table tbody');
|
||||
tbody.innerHTML = '';
|
||||
|
||||
if (!events || events.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="4" class="no-data">Нет событий</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
events.forEach(event => {
|
||||
const row = document.createElement('tr');
|
||||
row.innerHTML = `
|
||||
<td>${formatDate(event.timestamp)}</td>
|
||||
<td>${escapeHtml(event.source)}</td>
|
||||
<td>${escapeHtml(event.description)}</td>
|
||||
<td><span class="severity ${event.severity}">${event.severity}</span></td>
|
||||
`;
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
function filterEvents(severity) {
|
||||
if (!severity) {
|
||||
renderEvents(allEvents);
|
||||
return;
|
||||
}
|
||||
const filtered = allEvents.filter(e => e.severity === severity);
|
||||
renderEvents(filtered);
|
||||
}
|
||||
|
||||
// Export functions
|
||||
function exportData(format) {
|
||||
window.location.href = `/api/export/${format}`;
|
||||
}
|
||||
|
||||
// Clear data
|
||||
async function clearData() {
|
||||
try {
|
||||
await fetch('/api/clear', { method: 'DELETE' });
|
||||
document.getElementById('upload-section').classList.remove('hidden');
|
||||
document.getElementById('data-section').classList.add('hidden');
|
||||
document.getElementById('clear-btn').classList.add('hidden');
|
||||
document.getElementById('upload-status').textContent = '';
|
||||
allSensors = [];
|
||||
allEvents = [];
|
||||
allSerials = [];
|
||||
} catch (err) {
|
||||
console.error('Failed to clear data:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// Utilities
|
||||
function formatDate(isoString) {
|
||||
if (!isoString) return '-';
|
||||
const date = new Date(isoString);
|
||||
return date.toLocaleString('ru-RU');
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
if (!text) return '';
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
Reference in New Issue
Block a user