ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2025-09-08 01:32:59 +02:00
Code Issues Packages Releases Activity

Upgrade frontend dependencies

Browse Source 
Change to most recent @sveltestrap/sveltestrap
Reformat with Svelte LSP
This commit is contained in:
Jan Eitzinger
2024-03-09 10:30:40 +01:00
parent 5a4671b7b1
commit 32a57661fd
50 changed files with 8712 additions and 6995 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
web/frontend/src/StatsTableEntry.svelte
View File

@@ -1,82 +1,86 @@
<script>
import { Icon } from 'sveltestrap'
export let host
export let metric
export let scope
export let jobMetrics
import { Icon } from "@sveltestrap/sveltestrap";
function compareNumbers(a, b) {
return a.id - b.id;
export let host;
export let metric;
export let scope;
export let jobMetrics;
function compareNumbers(a, b) {
return a.id - b.id;
}
function sortByField(field) {
let s = sorting[field];
if (s.active) {
s.dir = s.dir == "up" ? "down" : "up";
} else {
for (let field in sorting) sorting[field].active = false;
s.active = true;
}
function sortByField(field) {
let s = sorting[field]
if (s.active) {
s.dir = s.dir == 'up' ? 'down' : 'up'
} else {
for (let field in sorting)
sorting[field].active = false
s.active = true
}
sorting = { ...sorting };
series = series.sort((a, b) => {
if (a == null || b == null) return -1;
sorting = {...sorting}
series = series.sort((a, b) => {
if (a == null || b == null)
return -1
if (field === "id") {
return s.dir != "up" ? a[field] - b[field] : b[field] - a[field];
} else {
return s.dir != "up"
? a.statistics[field] - b.statistics[field]
: b.statistics[field] - a.statistics[field];
}
});
}
if (field === 'id') {
return s.dir != 'up' ? a[field] - b[field] : b[field] - a[field]
} else {
return s.dir != 'up' ? a.statistics[field] - b.statistics[field] : b.statistics[field] - a.statistics[field]
}
})
}
let sorting = {
id: { dir: "down", active: true },
min: { dir: "up", active: false },
avg: { dir: "up", active: false },
max: { dir: "up", active: false },
};
let sorting = {
id: { dir: 'down', active: true },
min: { dir: 'up', active: false },
avg: { dir: 'up', active: false },
max: { dir: 'up', active: false },
}
$: series = jobMetrics
.find(jm => jm.name == metric && jm.scope == scope)
?.metric.series.filter(s => s.hostname == host && s.statistics != null)
?.sort(compareNumbers)
$: series = jobMetrics
.find((jm) => jm.name == metric && jm.scope == scope)
?.metric.series.filter((s) => s.hostname == host && s.statistics != null)
?.sort(compareNumbers);
</script>
{#if series == null || series.length == 0}
<td colspan={scope == 'node' ? 3 : 4}><i>No data</i></td>
{:else if series.length == 1 && scope == 'node'}
<td>
{series[0].statistics.min}
</td>
<td>
{series[0].statistics.avg}
</td>
<td>
{series[0].statistics.max}
</td>
<td colspan={scope == "node" ? 3 : 4}><i>No data</i></td>
{:else if series.length == 1 && scope == "node"}
<td>
{series[0].statistics.min}
</td>
<td>
{series[0].statistics.avg}
</td>
<td>
{series[0].statistics.max}
</td>
{:else}
<td colspan="4">
<table style="width: 100%;">
<tr>
{#each ['id', 'min', 'avg', 'max'] as field}
<th on:click={() => sortByField(field)}>
Sort
<Icon name="caret-{sorting[field].dir}{sorting[field].active ? '-fill' : ''}" />
</th>
{/each}
</tr>
{#each series as s, i}
<tr>
<th>{s.id ?? i}</th>
<td>{s.statistics.min}</td>
<td>{s.statistics.avg}</td>
<td>{s.statistics.max}</td>
</tr>
{/each}
</table>
</td>
<td colspan="4">
<table style="width: 100%;">
<tr>
{#each ["id", "min", "avg", "max"] as field}
<th on:click={() => sortByField(field)}>
Sort
<Icon
name="caret-{sorting[field].dir}{sorting[field].active
? '-fill'
: ''}"
/>
</th>
{/each}
</tr>
{#each series as s, i}
<tr>
<th>{s.id ?? i}</th>
<td>{s.statistics.min}</td>
<td>{s.statistics.avg}</td>
<td>{s.statistics.max}</td>
</tr>
{/each}
</table>
</td>
{/if}