From ed056b065e49f4ecd6fa65f8b33938e94ac7886e Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Wed, 9 Aug 2023 17:24:01 +0200
Subject: [PATCH] feat: add sorting in sub-node scopes in statsTable

---
 web/frontend/src/StatsTableEntry.svelte | 44 +++++++++++++++++++++++--
 1 file changed, 42 insertions(+), 2 deletions(-)

diff --git a/web/frontend/src/StatsTableEntry.svelte b/web/frontend/src/StatsTableEntry.svelte
index 8871681..5e497d4 100644
--- a/web/frontend/src/StatsTableEntry.svelte
+++ b/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>