diff --git a/svelte/src/admin_panel/HostMetrics.svelte b/svelte/src/admin_panel/HostMetrics.svelte index 8bfd789..c3d25e9 100644 --- a/svelte/src/admin_panel/HostMetrics.svelte +++ b/svelte/src/admin_panel/HostMetrics.svelte @@ -158,13 +158,9 @@ const load_metrics = async (window: number, interval: number) => { for (const host of Object.keys(metrics.metrics[graph.agg_base])) { metrics.metrics[graph.metric][host] = [] for (let i = 0; i < metrics.metrics[graph.agg_base][host].length; i++) { - if (metrics.metrics[graph.agg_divisor][host][i] > 0) { - metrics.metrics[graph.metric][host].push( - metrics.metrics[graph.agg_base][host][i] / metrics.metrics[graph.agg_divisor][host][i] - ) - } else { - metrics.metrics[graph.metric][host].push(0) - } + metrics.metrics[graph.metric][host].push( + metrics.metrics[graph.agg_base][host][i] / Math.max(metrics.metrics[graph.agg_divisor][host][i], 1) + ) } } } @@ -204,7 +200,7 @@ onDestroy(() => {
- Aggregate + Sum and Average {#each groups as group (group.title)} @@ -236,6 +232,6 @@ onDestroy(() => { } .grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); } diff --git a/svelte/src/admin_panel/HostMetricsGraph.svelte b/svelte/src/admin_panel/HostMetricsGraph.svelte index 9139336..4292db7 100644 --- a/svelte/src/admin_panel/HostMetricsGraph.svelte +++ b/svelte/src/admin_panel/HostMetricsGraph.svelte @@ -28,39 +28,49 @@ const update_chart = async (timestamps: string[], metrics: {[key: string]: numbe // there are in the response chart.data().datasets.length = Object.keys(metrics).length - let i = 0 if (aggregate === true) { - i = 1 + chart.data().datasets.length = 2 chart.data().datasets[0] = { - label: "aggregate", - data: create_aggregate_dataset(metrics), - borderWidth: 1, + label: "sum", + data: create_sum_dataset(metrics), + borderWidth: 1.5, pointRadius: 0, - borderColor: "#ffffff", - backgroundColor: "#ffffff", + borderColor: "#ff0000", + backgroundColor: "#ff0000", } - } - - for (const host of Object.keys(metrics).sort()) { - if (chart.data().datasets[i] === undefined) { - chart.data().datasets[i] = { - label: "", - data: [], - borderWidth: 1, - pointRadius: 0, + chart.data().datasets[1] = { + label: "average", + data: create_avg_dataset(metrics), + borderWidth: 1.5, + pointRadius: 0, + borderColor: "#00ff00", + backgroundColor: "#00ff00", + } + } else { + chart.data().datasets.length = Object.keys(metrics).length + let i = 0 + for (const host of Object.keys(metrics).sort()) { + if (chart.data().datasets[i] === undefined) { + chart.data().datasets[i] = { + label: "", + data: [], + borderWidth: 1, + pointRadius: 0, + } } + chart.data().datasets[i].label = await host_label(host) + chart.data().datasets[i].borderWidth = 1 + chart.data().datasets[i].borderColor = host_colour(host) + chart.data().datasets[i].backgroundColor = host_colour(host) + chart.data().datasets[i].data = [...metrics[host]] + i++ } - chart.data().datasets[i].label = await host_label(host) - chart.data().datasets[i].borderColor = host_colour(host) - chart.data().datasets[i].backgroundColor = host_colour(host) - chart.data().datasets[i].data = [...metrics[host]] - i++ } chart.update() } -const create_aggregate_dataset = (hosts: {[key:string]: number[]}): number[] => { +const create_sum_dataset = (hosts: {[key:string]: number[]}): number[] => { let data: number[] = [] for (const host of Object.keys(hosts)) { for (let idx = 0; idx < hosts[host].length; idx++) { @@ -72,6 +82,16 @@ const create_aggregate_dataset = (hosts: {[key:string]: number[]}): number[] => } return data } +const create_avg_dataset = (hosts: {[key:string]: number[]}): number[] => { + // The calculate the average, we take the sum and divide it by the number of + // hosts + let data: number[] = create_sum_dataset(hosts) + const num_hosts = Object.keys(hosts).length + for (let idx=0; idx < data.length; idx++) { + data[idx] /= num_hosts + } + return data +}