feat: add sorting in sub-node scopes in statsTable

web/frontend/src/StatsTableEntry.svelte

@@ -1,17 +1,49 @@
 <script>
+    import { Icon } from 'sveltestrap'
+    
     export let host
     export let metric
     export let scope
     export let jobMetrics
 
-    function compareIds(a, b) {
+    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
+        }
+
+        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]
+            }
+        })    
+    }
+
+    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(compareIds)
+        ?.sort(compareNumbers)
 </script>
 
 {#if series == null || series.length == 0}
@@ -29,6 +61,14 @@
 {: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>