Merge pull request #205 from ClusterCockpit/166_add_scopes_analysis

166 add scopes analysis

web/frontend/src/Analysis.root.svelte

@@ -1,7 +1,7 @@
 <script>
     import { init, convert2uplot } from './utils.js'
     import { getContext, onMount } from 'svelte'
-    import { queryStore, gql, getContextClient  } from '@urql/svelte'
+    import { queryStore, gql, getContextClient, mutationStore } from '@urql/svelte'
     import { Row, Col, Spinner, Card, Table, Icon } from 'sveltestrap'
     import Filters from './filters/Filters.svelte'
     import PlotSelection from './PlotSelection.svelte'
@@ -42,6 +42,20 @@
 
     $: metrics = [...new Set([...metricsInHistograms, ...metricsInScatterplots.flat()])]
 
+    const sortOptions = [
+        {key: 'totalWalltime',  label: 'Walltime'},
+        {key: 'totalNodeHours', label: 'Node Hours'},
+        {key: 'totalCoreHours', label: 'Core Hours'},
+        {key: 'totalAccHours',  label: 'Accelerator Hours'}
+    ]
+    const groupOptions = [
+        {key: 'user',  label: 'User Name'},
+        {key: 'project', label: 'Project ID'}
+    ]
+
+    let sortSelection = sortOptions.find((option) => option.key == ccconfig[`analysis_view_selectedTopCategory:${filterPresets.cluster}`]) || sortOptions.find((option) => option.key == ccconfig.analysis_view_selectedTopCategory)
+    let groupSelection = groupOptions.find((option) => option.key == ccconfig[`analysis_view_selectedTopEntity:${filterPresets.cluster}`]) || groupOptions.find((option) => option.key == ccconfig.analysis_view_selectedTopEntity)
+
     getContext('on-init')(({ data }) => {
         if (data != null) {
             cluster = data.clusters.find(c => c.name == filterPresets.cluster)
@@ -62,23 +76,39 @@
                     totalJobs
                     shortJobs
                     totalWalltime
+                    totalNodeHours
                     totalCoreHours
+                    totalAccHours
                     histDuration { count, value }
-                    histNumNodes { count, value }
+                    histNumCores { count, value }
                 }
-
-                topUsers: jobsCount(filter: $jobFilters, groupBy: USER, weight: NODE_HOURS, limit: 5) { name, count }
             }
         `, 
         variables: { jobFilters }
     })
 
+    $: topQuery = queryStore({
+        client: client,
+        query: gql`
+            query($jobFilters: [JobFilter!]!, $paging: PageRequest!, $sortBy: SortByAggregate!, $groupBy: Aggregate!) {
+                topList: jobsStatistics(filter: $jobFilters, page: $paging, sortBy: $sortBy, groupBy: $groupBy) {
+                    id
+                    totalWalltime
+                    totalNodeHours
+                    totalCoreHours
+                    totalAccHours
+                }
+            }
+        `, 
+        variables: { jobFilters, paging: { itemsPerPage: 10, page: 1 }, sortBy: sortSelection.key.toUpperCase(), groupBy: groupSelection.key.toUpperCase() }
+    })
+
     $: footprintsQuery = queryStore({
         client: client,
         query: gql`
             query($jobFilters: [JobFilter!]!, $metrics: [String!]!) {
                 footprints: jobsFootprints(filter: $jobFilters, metrics: $metrics) {
-                    nodehours,
+                    timeWeights { nodeHours, accHours, coreHours },
                     metrics { metric, data }
                 }
             }`,
@@ -97,6 +127,53 @@
         variables: { jobFilters, rows: 50, cols: 50, minX: 0.01, minY: 1., maxX: 1000., maxY }
     })
 
+    const updateConfigurationMutation = ({ name, value }) => {
+        return mutationStore({
+            client: client,
+            query: gql`
+                mutation ($name: String!, $value: String!) {
+                    updateConfiguration(name: $name, value: $value)
+                }
+            `,
+            variables: { name, value }
+        });
+    }
+
+    function updateEntityConfiguration(select) {
+        if (ccconfig[`analysis_view_selectedTopEntity:${filterPresets.cluster}`] != select) {
+            updateConfigurationMutation({ name: `analysis_view_selectedTopEntity:${filterPresets.cluster}`, value: JSON.stringify(select) })
+            .subscribe(res => {
+                if (res.fetching === false && !res.error) {
+                    // console.log(`analysis_view_selectedTopEntity:${filterPresets.cluster}` + ' -> Updated!')
+                } else if (res.fetching === false && res.error) {
+                    throw res.error
+                }
+            })
+        } else {
+            // console.log('No Mutation Required: Entity')
+        }
+    };
+
+
+    function updateCategoryConfiguration(select) {
+        if (ccconfig[`analysis_view_selectedTopCategory:${filterPresets.cluster}`] != select) {
+            updateConfigurationMutation({ name: `analysis_view_selectedTopCategory:${filterPresets.cluster}`, value: JSON.stringify(select) })
+            .subscribe(res => {
+                if (res.fetching === false && !res.error) {
+                    // console.log(`analysis_view_selectedTopCategory:${filterPresets.cluster}` + ' -> Updated!')
+                } else if (res.fetching === false && res.error) {
+                    throw res.error
+                }
+            })
+        } else {
+            // console.log('No Mutation Required: Category')
+        }
+
+    };
+
+    $: updateEntityConfiguration(groupSelection.key)
+    $: updateCategoryConfiguration(sortSelection.key)
+
     onMount(() => filterComponent.update())
 </script>
 
@@ -151,36 +228,82 @@
                     <th scope="col">Total Walltime</th>
                     <td>{$statsQuery.data.stats[0].totalWalltime}</td>
                 </tr>
+                <tr>
+                    <th scope="col">Total Node Hours</th>
+                    <td>{$statsQuery.data.stats[0].totalNodeHours}</td>
+                </tr>
                 <tr>
                     <th scope="col">Total Core Hours</th>
                     <td>{$statsQuery.data.stats[0].totalCoreHours}</td>
                 </tr>
+                <tr>
+                    <th scope="col">Total Accelerator Hours</th>
+                    <td>{$statsQuery.data.stats[0].totalAccHours}</td>
+                </tr>
             </Table>
         </Col>
         <Col>
             <div bind:clientWidth={colWidth1}>
-            <h5>Top Users</h5>
-            {#key $statsQuery.data.topUsers}
-            <Pie
-                size={colWidth1}
-                sliceLabel='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)}
-            />
+            <h5>Top 
+                <select class="p-0" bind:value={groupSelection}>
+                    {#each groupOptions as option}
+                        <option value={option}>
+                            {option.key.charAt(0).toUpperCase() + option.key.slice(1)}s
+                        </option>
+                    {/each}
+                </select>
+            </h5>
+            {#key $topQuery.data}
+                {#if $topQuery.fetching}
+                    <Spinner/>
+                {:else if $topQuery.error}
+                    <Card body color="danger">{$topQuery.error.message}</Card>
+                {:else}                    
+                    <Pie
+                        size={colWidth1}
+                        sliceLabel={sortSelection.label}
+                        quantities={$topQuery.data.topList.map((t) => t[sortSelection.key])}
+                        entities={$topQuery.data.topList.map((t) => t.id)}
+                    />
+                {/if}
             {/key}
             </div>
         </Col>
         <Col>
-            <Table>
-                <tr class="mb-2"><th>Legend</th><th>User Name</th><th>Node Hours</th></tr>
-                {#each $statsQuery.data.topUsers.sort((a, b) => b.count - a.count) as { name, count }, 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>
-                    </tr>
-                {/each}
-            </Table>
+            {#key $topQuery.data}
+                {#if $topQuery.fetching}
+                    <Spinner/>
+                {:else if $topQuery.error}
+                    <Card body color="danger">{$topQuery.error.message}</Card>
+                {:else}
+                    <Table>
+                        <tr class="mb-2">
+                            <th>Legend</th>
+                            <th>{groupSelection.label}</th>
+                            <th>
+                                <select class="p-0" bind:value={sortSelection}>
+                                    {#each sortOptions as option}
+                                        <option value={option}>
+                                            {option.label}
+                                        </option>
+                                    {/each}
+                                </select>
+                            </th>
+                        </tr>
+                        {#each $topQuery.data.topList as te, i}
+                            <tr>
+                                <td><Icon name="circle-fill" style="color: {colors[i]};"/></td>
+                                {#if groupSelection.key == 'User'} 
+                                    <th scope="col"><a href="/monitoring/user/{te.id}?cluster={cluster.name}">{te.id}</a></th>
+                                {:else}
+                                    <th scope="col"><a href="/monitoring/jobs/?cluster={cluster.name}&project={te.id}&projectMatch=eq">{te.id}</a></th>
+                                {/if}
+                                <td>{te[sortSelection.key]}</td>
+                            </tr>
+                        {/each}
+                    </Table>
+                {/if}
+            {/key}
         </Col>
     </Row>
     <Row cols={3} class="mb-2">
@@ -217,13 +340,13 @@
         </Col>
         <Col>
             <div bind:clientWidth={colWidth4}>
-            {#key $statsQuery.data.stats[0].histNumNodes}
+            {#key $statsQuery.data.stats[0].histNumCores}
                 <Histogram
                     width={colWidth4} height={300}
-                    data={convert2uplot($statsQuery.data.stats[0].histNumNodes)}
-                    title="Number of Nodes Distribution"
-                    xlabel="Allocated Nodes"
-                    xunit="Nodes"
+                    data={convert2uplot($statsQuery.data.stats[0].histNumCores)}
+                    title="Number of Cores Distribution"
+                    xlabel="Allocated Cores"
+                    xunit="Cores"
                     ylabel="Number of Jobs"
                     yunit="Jobs"/>
             {/key}
@@ -244,8 +367,9 @@
     <Row>
         <Col>
             <Card body>
-                These histograms show the distribution of the averages of all jobs matching the filters. Each job/average is weighted by its node hours.
-                Note that some metrics could be disabled for specific subclusters as per metriConfig and thus could affect shown average values.
+                These histograms show the distribution of the averages of all jobs matching the filters. Each job/average is weighted by its node hours by default 
+                (Accelerator hours for native accelerator scope metrics, coreHours for native core scope metrics).
+                Note that some metrics could be disabled for specific subclusters as per metricConfig and thus could affect shown average values.
             </Card>
             <br/>
         </Col>
@@ -257,7 +381,8 @@
                 let:width
                 renderFor="analysis"
                 items={metricsInHistograms.map(metric => ({ metric, ...binsFromFootprint(
-                    $footprintsQuery.data.footprints.nodehours,
+                    $footprintsQuery.data.footprints.timeWeights,
+                    metricConfig(cluster.name, metric)?.scope,
                     $footprintsQuery.data.footprints.metrics.find(f => f.metric == metric).data, numBins) }))}
                 itemsPerRow={ccconfig.plot_view_plotsPerRow}>
 
@@ -265,11 +390,11 @@
                     data={convert2uplot(item.bins)}
                     width={width} height={250}
                     title="Average Distribution of '{item.metric}'"
-                    xlabel={`${item.metric} average [${(metricConfig(cluster.name, item.metric)?.unit?.prefix ? metricConfig(cluster.name, item.metric)?.unit?.prefix : '') +
+                    xlabel={`${item.metric} bin maximum [${(metricConfig(cluster.name, item.metric)?.unit?.prefix ? metricConfig(cluster.name, item.metric)?.unit?.prefix : '') +
                                                        (metricConfig(cluster.name, item.metric)?.unit?.base   ? metricConfig(cluster.name, item.metric)?.unit?.base   : '')}]`}
                     xunit={`${(metricConfig(cluster.name, item.metric)?.unit?.prefix ? metricConfig(cluster.name, item.metric)?.unit?.prefix : '') +
                               (metricConfig(cluster.name, item.metric)?.unit?.base   ? metricConfig(cluster.name, item.metric)?.unit?.base   : '')}`}
-                    ylabel="Node Hours"
+                    ylabel="Normalized Hours"
                     yunit="Hours"/>
             </PlotTable>
         </Col>
@@ -279,7 +404,7 @@
         <Col>
             <Card body>
                 Each circle represents one job. The size of a circle is proportional to its node hours. Darker circles mean multiple jobs have the same averages for the respective metrics.
-                Note that some metrics could be disabled for specific subclusters as per metriConfig and thus could affect shown average values.
+                Note that some metrics could be disabled for specific subclusters as per metricConfig and thus could affect shown average values.
             </Card>
             <br/>
         </Col>
@@ -301,7 +426,7 @@
                                            (metricConfig(cluster.name, item.m1)?.unit?.base   ? metricConfig(cluster.name, item.m1)?.unit?.base   : '')}]`}
                     yLabel={`${item.m2} [${(metricConfig(cluster.name, item.m2)?.unit?.prefix ? metricConfig(cluster.name, item.m2)?.unit?.prefix : '') + 
                                            (metricConfig(cluster.name, item.m2)?.unit?.base   ? metricConfig(cluster.name, item.m2)?.unit?.base   : '')}]`}
-                    X={item.f1} Y={item.f2} S={$footprintsQuery.data.footprints.nodehours} />
+                    X={item.f1} Y={item.f2} S={$footprintsQuery.data.footprints.timeWeights.nodeHours} />
             </PlotTable>
         </Col>
     </Row>

web/frontend/src/Status.root.svelte

@@ -1,4 +1,5 @@
 <script>
+    import { getContext } from 'svelte'
     import Refresher from './joblist/Refresher.svelte'
     import Roofline, { transformPerNodeData } from './plots/Roofline.svelte'
     import Pie, { colors } from './plots/Pie.svelte'
@@ -6,14 +7,24 @@
     import { Row, Col, Spinner, Card, CardHeader, CardTitle, CardBody, Table, Progress, Icon } from 'sveltestrap'
     import { init, convert2uplot } from './utils.js'
     import { scaleNumbers } from './units.js'
-    import { queryStore, gql, getContextClient  } from '@urql/svelte'
+    import { queryStore, gql, getContextClient, mutationStore } from '@urql/svelte'
 
     const { query: initq } = init()
+    const ccconfig = getContext("cc-config")
 
     export let cluster
 
     let plotWidths = [], colWidth1 = 0, colWidth2
     let from = new Date(Date.now() - 5 * 60 * 1000), to = new Date(Date.now())
+    const topOptions = [
+        {key: 'totalJobs',  label: 'Jobs'},
+        {key: 'totalNodes', label: 'Nodes'},
+        {key: 'totalCores', label: 'Cores'},
+        {key: 'totalAccs',  label: 'Accelerators'},
+    ]
+
+    let topProjectSelection = topOptions.find((option) => option.key == ccconfig[`status_view_selectedTopProjectCategory:${cluster}`]) || topOptions.find((option) => option.key == ccconfig.status_view_selectedTopProjectCategory)
+    let topUserSelection    = topOptions.find((option) => option.key == ccconfig[`status_view_selectedTopUserCategory:${cluster}`])    || topOptions.find((option) => option.key == ccconfig.status_view_selectedTopUserCategory)
 
     const client = getContextClient();
     $: mainQuery = queryStore({
@@ -36,11 +47,11 @@
         stats: jobsStatistics(filter: $filter) {
             histDuration { count, value }
             histNumNodes { count, value }
+            histNumCores { count, value }
+            histNumAccs { 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 +59,39 @@
     }
     })
 
+    const paging = { itemsPerPage: 10, page: 1 }; // Top 10
+    $: topUserQuery = queryStore({
+        client: client,
+        query: gql`
+            query($filter: [JobFilter!]!, $paging: PageRequest!, $sortBy: SortByAggregate!) {
+                topUser: jobsStatistics(filter: $filter, page: $paging, sortBy: $sortBy, groupBy: USER) {
+                    id
+                    totalJobs
+                    totalNodes
+                    totalCores
+                    totalAccs
+                }
+            }
+        `, 
+        variables: { filter: [{ state: ['running'] }, { cluster: { eq: cluster } }], paging, sortBy: topUserSelection.key.toUpperCase() }
+    })
+
+    $: topProjectQuery = queryStore({
+        client: client,
+        query: gql`
+            query($filter: [JobFilter!]!, $paging: PageRequest!, $sortBy: SortByAggregate!) {
+                topProjects: jobsStatistics(filter: $filter, page: $paging, sortBy: $sortBy, groupBy: PROJECT) {
+                    id
+                    totalJobs
+                    totalNodes
+                    totalCores
+                    totalAccs
+                }
+            }
+        `, 
+        variables: { filter: [{ state: ['running'] }, { cluster: { eq: cluster } }], paging, sortBy: topProjectSelection.key.toUpperCase() }
+    })
+
     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)
@@ -66,6 +110,51 @@
         }
     }
 
+    const updateConfigurationMutation = ({ name, value }) => {
+        return mutationStore({
+            client: client,
+            query: gql`
+                mutation ($name: String!, $value: String!) {
+                    updateConfiguration(name: $name, value: $value)
+                }
+            `,
+            variables: { name, value }
+        });
+    }
+
+    function updateTopUserConfiguration(select) {
+        if (ccconfig[`status_view_selectedTopUserCategory:${cluster}`] != select) {
+            updateConfigurationMutation({ name: `status_view_selectedTopUserCategory:${cluster}`, value: JSON.stringify(select) })
+            .subscribe(res => {
+                if (res.fetching === false && !res.error) {
+                    // console.log(`status_view_selectedTopUserCategory:${cluster}` + ' -> Updated!')
+                } else if (res.fetching === false && res.error) {
+                    throw res.error
+                }
+            })
+        } else {
+            // console.log('No Mutation Required: Top User')
+        }
+    }
+
+    function updateTopProjectConfiguration(select) {
+        if (ccconfig[`status_view_selectedTopProjectCategory:${cluster}`] != select) {
+            updateConfigurationMutation({ name: `status_view_selectedTopProjectCategory:${cluster}`, value: JSON.stringify(select) })
+            .subscribe(res => {
+                if (res.fetching === false && !res.error) {
+                    // console.log(`status_view_selectedTopProjectCategory:${cluster}` + ' -> Updated!')
+                } else if (res.fetching === false && res.error) {
+                    throw res.error
+                }
+            })
+        } else {
+            // console.log('No Mutation Required: Top Project')
+        }
+    };
+
+    $: updateTopUserConfiguration(topUserSelection.key)
+    $: updateTopProjectConfiguration(topProjectSelection.key)
+
 </script>
 
 <!-- Loading indicator & Refresh -->
@@ -160,52 +249,103 @@
     <Row cols={4}>
         <Col class="p-2">
             <div bind:clientWidth={colWidth1}>
-                <h4 class="text-center">Top Users</h4>
-                {#key $mainQuery.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)}
-                        
-                    />
+                <h4 class="text-center">Top Users on {cluster.charAt(0).toUpperCase() + cluster.slice(1)}</h4>
+                {#key $topUserQuery.data}
+                    {#if $topUserQuery.fetching}
+                        <Spinner/>
+                    {:else if $topUserQuery.error}
+                        <Card body color="danger">{$topUserQuery.error.message}</Card>
+                    {:else}                    
+                        <Pie
+                            size={colWidth1}
+                            sliceLabel={topUserSelection.label}
+                            quantities={$topUserQuery.data.topUser.map((tu) => tu[topUserSelection.key])}
+                            entities={$topUserQuery.data.topUser.map((tu) => tu.id)}
+                        />
+                    {/if}
                 {/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>
-                        <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>
-                    </tr>
-                {/each}
-            </Table>
+            {#key $topUserQuery.data}
+                {#if $topUserQuery.fetching}
+                    <Spinner/>
+                {:else if $topUserQuery.error}
+                    <Card body color="danger">{$topUserQuery.error.message}</Card>
+                {:else}                    
+                    <Table>
+                        <tr class="mb-2">
+                            <th>Legend</th>
+                            <th>User Name</th>
+                            <th>Number of
+                                <select class="p-0" bind:value={topUserSelection}>
+                                    {#each topOptions as option}
+                                        <option value={option}>
+                                            {option.label}
+                                        </option>
+                                    {/each}
+                                </select>
+                            </th>
+                        </tr>
+                        {#each $topUserQuery.data.topUser as tu, i}
+                            <tr>
+                                <td><Icon name="circle-fill" style="color: {colors[i]};"/></td>
+                                <th scope="col"><a href="/monitoring/user/{tu.id}?cluster={cluster}&state=running">{tu.id}</a></th>
+                                <td>{tu[topUserSelection.key]}</td>
+                            </tr>
+                        {/each}
+                    </Table>
+                {/if}
+            {/key}
         </Col>
         <Col class="p-2">
-            <h4 class="text-center">Top Projects</h4>
-            {#key $mainQuery.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)}
-                />
+            <h4 class="text-center">Top Projects on {cluster.charAt(0).toUpperCase() + cluster.slice(1)}</h4>
+            {#key $topProjectQuery.data}
+                {#if $topProjectQuery.fetching}
+                    <Spinner/>
+                {:else if $topProjectQuery.error}
+                    <Card body color="danger">{$topProjectQuery.error.message}</Card>
+                {:else}
+                    <Pie
+                        size={colWidth1}
+                        sliceLabel={topProjectSelection.label}
+                        quantities={$topProjectQuery.data.topProjects.map((tp) => tp[topProjectSelection.key])}
+                        entities={$topProjectQuery.data.topProjects.map((tp) => tp.id)}
+                    />
+                {/if}
             {/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>
-                        <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>
-                    </tr>
-                {/each}
-            </Table>
+            {#key $topProjectQuery.data}
+                {#if $topProjectQuery.fetching}
+                    <Spinner/>
+                {:else if $topProjectQuery.error}
+                    <Card body color="danger">{$topProjectQuery.error.message}</Card>
+                {:else}   
+                    <Table>
+                        <tr class="mb-2">
+                            <th>Legend</th>
+                            <th>Project Code</th>
+                            <th>Number of
+                                <select class="p-0" bind:value={topProjectSelection}>
+                                    {#each topOptions as option}
+                                        <option value={option}>
+                                            {option.label}
+                                        </option>
+                                    {/each}
+                                </select>
+                            </th>
+                        </tr>
+                        {#each $topProjectQuery.data.topProjects as tp, i}
+                            <tr>
+                                <td><Icon name="circle-fill" style="color: {colors[i]};"/></td>
+                                <th scope="col"><a href="/monitoring/jobs/?cluster={cluster}&state=running&project={tp.id}&projectMatch=eq">{tp.id}</a></th>
+                                <td>{tp[topProjectSelection.key]}</td>
+                            </tr>
+                        {/each}
+                    </Table>
+                {/if}
+            {/key}
         </Col>
     </Row>
     <hr class="my-2"/>
@@ -237,4 +377,32 @@
             {/key}
         </Col>
     </Row>
+    <Row cols={2}>
+        <Col class="p-2">
+            <div bind:clientWidth={colWidth2}>
+                {#key $mainQuery.data.stats}
+                    <Histogram
+                        data={convert2uplot($mainQuery.data.stats[0].histNumCores)}
+                        width={colWidth2 - 25}
+                        title="Number of Cores Distribution"
+                        xlabel="Allocated Cores"
+                        xunit="Cores" 
+                        ylabel="Number of Jobs"
+                        yunit="Jobs"/>
+                {/key}
+            </div>
+        </Col>
+        <Col class="p-2">
+            {#key $mainQuery.data.stats}
+                <Histogram
+                    data={convert2uplot($mainQuery.data.stats[0].histNumAccs)}
+                    width={colWidth2 - 25}
+                    title="Number of Accelerators Distribution"
+                    xlabel="Allocated Accs"
+                    xunit="Accs" 
+                    ylabel="Number of Jobs"
+                    yunit="Jobs"/>
+            {/key}
+        </Col>
+    </Row>
 {/if}

web/frontend/src/plots/Pie.svelte

@@ -43,14 +43,14 @@
     export let entities
     export let displayLegend = false
 
-    const data = {
+    $: data = {
         labels: entities,
         datasets: [
             {
                 label: sliceLabel,
                 data: quantities,
                 fill: 1,
-                backgroundColor: colors.slice(0, quantities.length),            
+                backgroundColor: colors.slice(0, quantities.length)
             }
         ]
     }

web/frontend/src/utils.js

@@ -325,7 +325,7 @@ export function convert2uplot(canvasData) {
     return uplotData
 }
 
-export function binsFromFootprint(weights, values, numBins) {
+export function binsFromFootprint(weights, scope, values, numBins) {
     let min = 0, max = 0
     if (values.length != 0) {
         for (let x of values) {
@@ -338,10 +338,23 @@ export function binsFromFootprint(weights, values, numBins) {
     if (numBins == null || numBins < 3)
         numBins = 3
 
+    let scopeWeights
+    switch (scope) {
+        case 'core':
+            scopeWeights = weights.coreHours
+            break
+        case 'accelerator':
+            scopeWeights = weights.accHours
+            break
+        default: // every other scope: use 'node'
+            scopeWeights = weights.nodeHours
+    }
+
     const bins = new Array(numBins).fill(0)
     for (let i = 0; i < values.length; i++)
-        bins[Math.floor(((values[i] - min) / (max - min)) * numBins)] += weights ? weights[i] : 1
+        bins[Math.floor(((values[i] - min) / (max - min)) * numBins)] += scopeWeights ? scopeWeights[i] : 1
 
+    // Manual Canvas Original
     // return {
     //     label: idx => {
     //         let start = min + (idx / numBins) * (max - min)
@@ -355,14 +368,13 @@ export function binsFromFootprint(weights, values, numBins) {
 
     return {
         bins: bins.map((count, idx) => ({ 
-            value: idx => { // Get rounded down next integer to bins' Start-Stop Mean Value
-                let start = min + (idx / numBins) * (max - min)
+            value: idx => { // Use bins' max value instead of mean
+                // let start = min + (idx / numBins) * (max - min)
                 let stop = min + ((idx + 1) / numBins) * (max - min)
-                return `${formatNumber(Math.floor((start+stop)/2))}`
+                // return `${formatNumber(Math.floor((start+stop)/2))}`
+                return Math.floor(stop)
             }, 
             count: count 
-        })),
-        min: min,
-        max: max
+        }))
     }
 }