change: implement topX query in jobsStatistics

web/frontend/src/Analysis.root.svelte

@@ -66,13 +66,26 @@
                     histDuration { count, value }
                     histNumNodes { count, value }
                 }
-
-                topUsers: jobsCount(filter: $jobFilters, groupBy: USER, weight: CORE_HOURS, limit: 5) { name, count }
             }
         `, 
         variables: { jobFilters }
     })
 
+    const paging = { itemsPerPage: 5, page: 1 }; // Top 5
+    // const sorting = { field: "totalCoreHours", order: "DESC" };
+    $: topQuery = queryStore({
+        client: client,
+        query: gql`
+            query($jobFilters: [JobFilter!]!, $paging: PageRequest!) {
+                jobsStatistics(filter: $jobFilters, page: $paging, sortBy: TOTALCOREHOURS, groupBy: USER) {
+                    id
+                    totalCoreHours
+                }
+            }
+        `, 
+        variables: { jobFilters, paging }
+    })
+
     $: footprintsQuery = queryStore({
         client: client,
         query: gql`
@@ -164,8 +177,8 @@
             <Pie
                 size={colWidth1}
                 sliceLabel='Core Hours'
-                quantities={$statsQuery.data.topUsers.sort((a, b) => b.count - a.count).map((tu) => tu.count)}
-                entities={$statsQuery.data.topUsers.sort((a, b) => b.count - a.count).map((tu) => tu.name)}
+                quantities={$topQuery.data.jobsStatistics.map((tu) => tu.totalCoreHours)}
+                entities={$topQuery.data.jobsStatistics.map((tu) => tu.id)}
             />
             {/key}
             </div>
@@ -173,11 +186,11 @@
         <Col>
             <Table>
                 <tr class="mb-2"><th>Legend</th><th>User Name</th><th>Core Hours</th></tr>
-                {#each $statsQuery.data.topUsers.sort((a, b) => b.count - a.count) as { name, count }, i}
+                {#each $topQuery.data.jobsStatistics as { id, totalCoreHours }, i}
                     <tr>
                         <td><Icon name="circle-fill" style="color: {colors[i]};"/></td>
-                        <th scope="col"><a href="/monitoring/user/{name}?cluster={cluster.name}">{name}</a></th>
-                        <td>{count}</td>
+                        <th scope="col"><a href="/monitoring/user/{id}?cluster={cluster.name}">{id}</a></th>
+                        <td>{totalCoreHours}</td>
                     </tr>
                 {/each}
             </Table>

web/frontend/src/Status.root.svelte

@@ -38,9 +38,7 @@
             histNumNodes { count, value }
         }
 
-        allocatedNodes(cluster: $cluster)                                                        { name, count }
-        topUsers:    jobsCount(filter: $filter, groupBy: USER,    weight: NODE_COUNT, limit: 10) { name, count }
-        topProjects: jobsCount(filter: $filter, groupBy: PROJECT, weight: NODE_COUNT, limit: 10) { name, count }
+        allocatedNodes(cluster: $cluster) { name, count }
     }`,
     variables: {
          cluster: cluster, metrics: ['flops_any', 'mem_bw'], from: from.toISOString(), to: to.toISOString(),
@@ -48,6 +46,36 @@
     }
     })
 
+    const paging = { itemsPerPage: 10, page: 1 }; // Top 10
+    // const sorting = { field: "totalCores", order: "DESC" };
+    $: topUserQuery = queryStore({
+        client: client,
+        query: gql`
+            query($filter: [JobFilter!]!, $paging: PageRequest!) {
+                topUser: jobsStatistics(filter: $filter, page: $paging, sortBy: TOTALCORES, groupBy: USER) {
+                    id
+                    totalNodes
+                    totalCores
+                }
+            }
+        `, 
+        variables: { filter: [{ state: ['running'] }, { cluster: { eq: cluster } }], paging }
+    })
+
+    $: topProjectQuery = queryStore({
+        client: client,
+        query: gql`
+            query($filter: [JobFilter!]!, $paging: PageRequest!) {
+                topProjects: jobsStatistics(filter: $filter, page: $paging, sortBy: TOTALCORES, groupBy: PROJECT) {
+                    id
+                    totalNodes
+                    totalCores
+                }
+            }
+        `, 
+        variables: { filter: [{ state: ['running'] }, { cluster: { eq: cluster } }], paging }
+    })
+
     const sumUp = (data, subcluster, metric) => data.reduce((sum, node) => node.subCluster == subcluster
         ? sum + (node.metrics.find(m => m.name == metric)?.metric.series.reduce((sum, series) => sum + series.data[series.data.length - 1], 0) || 0)
         : sum, 0)
@@ -161,48 +189,47 @@
         <Col class="p-2">
             <div bind:clientWidth={colWidth1}>
                 <h4 class="text-center">Top Users</h4>
-                {#key $mainQuery.data}
+                {#key $topUserQuery.data}
                     <Pie
                         size={colWidth1}
                         sliceLabel='Jobs'
-                        quantities={$mainQuery.data.topUsers.sort((a, b) => b.count - a.count).map((tu) => tu.count)}
-                        entities={$mainQuery.data.topUsers.sort((a, b) => b.count - a.count).map((tu) => tu.name)}
-                        
+                        quantities={$topUserQuery.data.topUser.map((tu) => tu.totalCores)}
+                        entities={$topUserQuery.data.topUser.map((tu) => tu.id)}
                     />
                 {/key}
             </div>
         </Col>
         <Col class="px-4 py-2">
             <Table>
-                <tr class="mb-2"><th>Legend</th><th>User Name</th><th>Number of Nodes</th></tr>
-                {#each $mainQuery.data.topUsers.sort((a, b) => b.count - a.count) as { name, count }, i}
+                <tr class="mb-2"><th>Legend</th><th>User Name</th><th>Number of Cores</th></tr>
+                {#each $topUserQuery.data.topUser as { id, totalCores, totalNodes }, i}
                     <tr>
                         <td><Icon name="circle-fill" style="color: {colors[i]};"/></td>
-                        <th scope="col"><a href="/monitoring/user/{name}?cluster={cluster}&state=running">{name}</a></th>
-                        <td>{count}</td>
+                        <th scope="col"><a href="/monitoring/user/{id}?cluster={cluster}&state=running">{id}</a></th>
+                        <td>{totalCores}</td>
                     </tr>
                 {/each}
             </Table>
         </Col>
         <Col class="p-2">
             <h4 class="text-center">Top Projects</h4>
-            {#key $mainQuery.data}
+            {#key $topProjectQuery.data}
                 <Pie
                     size={colWidth1}
                     sliceLabel='Jobs'
-                    quantities={$mainQuery.data.topProjects.sort((a, b) => b.count - a.count).map((tp) => tp.count)}
-                    entities={$mainQuery.data.topProjects.sort((a, b) => b.count - a.count).map((tp) => tp.name)}
+                    quantities={$topProjectQuery.data.topProjects.map((tp) => tp.totalCores)}
+                    entities={$topProjectQuery.data.topProjects.map((tp) => tp.id)}
                 />
             {/key}
         </Col>
         <Col class="px-4 py-2">
             <Table>
-                <tr class="mb-2"><th>Legend</th><th>Project Code</th><th>Number of Nodes</th></tr>
-                {#each $mainQuery.data.topProjects.sort((a, b) => b.count - a.count) as { name, count }, i}
+                <tr class="mb-2"><th>Legend</th><th>Project Code</th><th>Number of Cores</th></tr>
+                {#each $topProjectQuery.data.topProjects as { id, totalCores, totalNodes }, i}
                     <tr>
                         <td><Icon name="circle-fill" style="color: {colors[i]};"/></td>
-                        <th scope="col"><a href="/monitoring/jobs/?cluster={cluster}&state=running&project={name}&projectMatch=eq">{name}</a></th>
-                        <td>{count}</td>
+                        <th scope="col"><a href="/monitoring/jobs/?cluster={cluster}&state=running&project={id}&projectMatch=eq">{id}</a></th>
+                        <td>{totalCores}</td>
                     </tr>
                 {/each}
             </Table>