95 lines
No EOL
2.5 KiB
JavaScript
95 lines
No EOL
2.5 KiB
JavaScript
"use strict";
|
|
|
|
/**
|
|
* Initialisiert die App, lädt Ergebnisse und rendert Diagramme.
|
|
* @module app
|
|
*/
|
|
|
|
/** @typedef {Object} ResultEntry
|
|
* @property {string} run_id
|
|
* @property {number} parallelism
|
|
* @property {number} band_width
|
|
* @property {number} retry_tail_p99
|
|
* @property {string} timestamp
|
|
*/
|
|
|
|
/**
|
|
* Ruft Daten von der /results API ab.
|
|
* @param {Object} [filters]
|
|
* @returns {Promise<ResultEntry[]>}
|
|
*/
|
|
async function fetchResults(filters = {}) {
|
|
const params = new URLSearchParams(filters);
|
|
const res = await fetch(`/results?${params.toString()}`, {
|
|
method: 'GET',
|
|
headers: { 'Accept': 'application/json' }
|
|
});
|
|
if (!res.ok) throw new Error(`Fehler beim Laden der Ergebnisse: ${res.status}`);
|
|
return res.json();
|
|
}
|
|
|
|
/**
|
|
* Rendert Diagramme basierend auf Resultaten.
|
|
* @param {ResultEntry[]} data
|
|
*/
|
|
function renderCharts(data) {
|
|
const container = document.getElementById('chart-container');
|
|
if (!container) return;
|
|
|
|
container.innerHTML = '';
|
|
const chart = document.createElement('div');
|
|
chart.className = 'chart';
|
|
|
|
const summary = document.createElement('p');
|
|
summary.textContent = `Anzahl Ergebnisse: ${data.length}`;
|
|
chart.appendChild(summary);
|
|
|
|
// Beispielhafte Darstellung von Trends
|
|
const list = document.createElement('ul');
|
|
data.forEach(entry => {
|
|
const item = document.createElement('li');
|
|
item.textContent = `Parallelität: ${entry.parallelism}, Bandbreite: ${entry.band_width}, Retry p99: ${entry.retry_tail_p99}`;
|
|
list.appendChild(item);
|
|
});
|
|
chart.appendChild(list);
|
|
container.appendChild(chart);
|
|
}
|
|
|
|
/**
|
|
* Wendet aktuelle Filter an und aktualisiert Diagramme.
|
|
*/
|
|
export async function applyFilters() {
|
|
const parallelismSelect = document.getElementById('filter-parallelism');
|
|
const parallelism = parallelismSelect?.value || '';
|
|
|
|
const filters = {};
|
|
if (parallelism) filters.parallelism = parallelism;
|
|
|
|
try {
|
|
const results = await fetchResults(filters);
|
|
renderCharts(results);
|
|
} catch (err) {
|
|
console.error(err);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Initialisiert die Anwendung und bindet Eventlistener.
|
|
*/
|
|
export async function initApp() {
|
|
try {
|
|
const initialData = await fetchResults();
|
|
renderCharts(initialData);
|
|
|
|
const filterForm = document.getElementById('filter-form');
|
|
if (filterForm) {
|
|
filterForm.addEventListener('change', () => {
|
|
applyFilters();
|
|
});
|
|
}
|
|
} catch (err) {
|
|
console.error('Fehler bei Initialisierung:', err);
|
|
}
|
|
}
|
|
|
|
window.addEventListener('load', initApp); |