Footprint in jobList as selectable

web/frontend/src/Job.root.svelte

@@ -27,7 +27,7 @@
     import TagManagement from "./TagManagement.svelte";
     import MetricSelection from "./MetricSelection.svelte";
     import StatsTable from "./StatsTable.svelte";
-    import JobFootprint from "./JobFootprint.svelte";
+    import JobFootprintBars from "./JobFootprintBars.svelte";
     import { getContext } from "svelte";
 
     export let dbid;
@@ -135,7 +135,7 @@
         jobTags,
         statsTable,
         jobFootprint;
-        
+
     $: document.title = $initq.fetching
         ? "Loading..."
         : $initq.error
@@ -206,7 +206,12 @@
     {#if $jobMetrics.data}
         {#key $jobMetrics.data}
             <Col>
-                <JobFootprint
+                <!-- <JobFootprint
+                    bind:this={jobFootprint}
+                    job={$initq.data.job}
+                    jobMetrics={$jobMetrics.data.jobMetrics}
+                /> -->
+                <JobFootprintBars
                     bind:this={jobFootprint}
                     job={$initq.data.job}
                     jobMetrics={$jobMetrics.data.jobMetrics}

web/frontend/src/JobFootprintBars.svelte

@@ -17,18 +17,19 @@
 
     export let job
     export let jobMetrics
+    export let view = 'job'
 
     // export let size = 200
 
     const footprintMetrics = ['cpu_load', 'flops_any', 'mem_used', 'mem_bw'] // 'acc_utilization' / missing: energy , move to central config before deployment
 
-    console.log('JMs', jobMetrics.filter((jm) => footprintMetrics.includes(jm.name)))
+    // console.log('JMs', jobMetrics.filter((jm) => footprintMetrics.includes(jm.name)))
 
     const footprintMetricConfigs = footprintMetrics.map((fm) => { 
         return getContext('metrics')(job.cluster, fm)
     }).filter( Boolean ) // Filter only "truthy" vals, see: https://stackoverflow.com/questions/28607451/removing-undefined-values-from-array
 
-    console.log("FMCs", footprintMetricConfigs)
+    // console.log("FMCs", footprintMetricConfigs)
 
     // const footprintMetricThresholds = footprintMetricConfigs.map((fmc) => { // Only required if scopes smaller than node required
     //     return {name: fmc.name, ...findThresholds(fmc, 'node', job?.subCluster ? job.subCluster : '')} // Merge 2 objects
@@ -149,16 +150,18 @@
         }
     }).filter( Boolean )
 
-    console.log("FPD", footprintData)
+    // console.log("FPD", footprintData)
 
 </script>
 
 <Card class="h-auto mt-1">
+    {#if view === 'job'}
     <CardHeader>
         <CardTitle class="mb-0 d-flex justify-content-center">
             Core Metrics Footprint
         </CardTitle>
     </CardHeader>
+    {/if}
     <CardBody>
         {#each footprintData as fpd}
             <div class="mb-1 d-flex justify-content-between">

web/frontend/src/Jobs.root.svelte

@@ -19,7 +19,7 @@
 
     let filterComponent; // see why here: https://stackoverflow.com/questions/58287729/how-can-i-export-a-function-from-a-svelte-component-that-changes-a-value-in-the
     let jobList, matchedJobs = null
-    let sorting = { field: 'startTime', order: 'DESC' }, isSortingOpen = false, isMetricsSelectionOpen = false
+    let sorting = { field: 'startTime', order: 'DESC' }, isSortingOpen = false, isMetricsSelectionOpen = false, showFootprint
     let metrics = filterPresets.cluster
         ? ccconfig[`plot_list_selectedMetrics:${filterPresets.cluster}`] || ccconfig.plot_list_selectedMetrics
         : ccconfig.plot_list_selectedMetrics
@@ -81,7 +81,8 @@
             bind:metrics={metrics}
             bind:sorting={sorting}
             bind:matchedJobs={matchedJobs}
-            bind:this={jobList} />
+            bind:this={jobList}
+            bind:showFootprint={showFootprint} />
     </Col>
 </Row>
 
@@ -93,4 +94,5 @@
     bind:cluster={selectedCluster}
     configName="plot_list_selectedMetrics"
     bind:metrics={metrics}
-    bind:isOpen={isMetricsSelectionOpen} />
+    bind:isOpen={isMetricsSelectionOpen}
+    bind:showFootprint={showFootprint}/>

web/frontend/src/MetricSelection.svelte

@@ -17,12 +17,14 @@
     export let configName
     export let allMetrics = null
     export let cluster = null
+    export let showFootprint
 
     const clusters = getContext('clusters'),
           onInit = getContext('on-init')
 
     let newMetricsOrder = []
     let unorderedMetrics = [...metrics]
+    let pendingShowFootprint = showFootprint || false
 
     onInit(() => {
         if (allMetrics == null) allMetrics = new Set()
@@ -90,6 +92,8 @@
         metrics = newMetricsOrder.filter(m => unorderedMetrics.includes(m))
         isOpen = false
 
+        showFootprint = pendingShowFootprint ? true : false
+
         updateConfigurationMutation({
             name: cluster == null ? configName : `${configName}:${cluster}`,
             value: JSON.stringify(metrics)
@@ -121,6 +125,10 @@
     </ModalHeader>
     <ModalBody>
         <ListGroup>
+            <li class="list-group-item">
+                <input type="checkbox" bind:checked={pendingShowFootprint}> Show Footprint
+            </li>
+            <hr/>
             {#each newMetricsOrder as metric, index (metric)}
                 <li class="cc-config-column list-group-item"
                     draggable={true} ondragover="return false"

web/frontend/src/joblist/JobList.svelte

@@ -28,6 +28,7 @@
     export let sorting = { field: "startTime", order: "DESC" };
     export let matchedJobs = 0;
     export let metrics = ccconfig.plot_list_selectedMetrics;
+    export let showFootprint;
 
     let itemsPerPage = ccconfig.plot_list_jobsPerPage;
     let page = 1;
@@ -160,6 +161,15 @@
                     >
                         Job Info
                     </th>
+                    {#if showFootprint}
+                        <th
+                            class="position-sticky top-0"
+                            scope="col"
+                            style="width: {jobInfoColumnWidth}px; padding-top: {headerPaddingTop}px"
+                        >
+                            Job Footprint
+                        </th>
+                    {/if}
                     {#each metrics as metric (metric)}
                         <th
                             class="position-sticky top-0 text-center"
@@ -212,7 +222,7 @@
                     </tr>
                 {:else if $jobs.data && $initialized}
                     {#each $jobs.data.jobs.items as job (job)}
-                        <JobListRow {job} {metrics} {plotWidth} />
+                        <JobListRow {job} {metrics} {plotWidth} {showFootprint}/>
                     {:else}
                         <tr>
                             <td colspan={metrics.length + 1}>

web/frontend/src/joblist/Row.svelte

@@ -14,16 +14,23 @@
     import { Card, Spinner } from "sveltestrap";
     import MetricPlot from "../plots/MetricPlot.svelte";
     import JobInfo from "./JobInfo.svelte";
+    import JobFootprint from "../JobFootprint.svelte";
+    import JobFootprintBars from "../JobFootprintBars.svelte";
     import { maxScope, checkMetricDisabled } from "../utils.js";
 
     export let job;
     export let metrics;
     export let plotWidth;
     export let plotHeight = 275;
+    export let showFootprint;
 
     let { id } = job;
     let scopes = [job.numNodes == 1 ? "core" : "node"];
 
+    function distinct(value, index, array) {
+        return array.indexOf(value) === index;
+    }
+
     const cluster = getContext("clusters").find((c) => c.name == job.cluster);
     const metricConfig = getContext("metrics"); // Get all MetricConfs which include subCluster-specific settings for this job
     const client = getContextClient();
@@ -64,6 +71,10 @@
         variables: { id, metrics, scopes }
     });
 
+    $: if (showFootprint) {
+        metrics = ['cpu_load', 'flops_any', 'mem_used', 'mem_bw', ...metrics].filter(distinct)
+    }
+
     export function refresh() {
         metricsQuery = queryStore({
             client: client,
@@ -122,6 +133,21 @@
             </Card>
         </td>
     {:else}
+        {#if showFootprint}
+            <!-- <td>
+                <JobFootprint
+                    job={job}
+                    jobMetrics={$metricsQuery.data.jobMetrics}
+                />
+            </td> -->
+            <td>
+                <JobFootprintBars
+                    job={job}
+                    jobMetrics={$metricsQuery.data.jobMetrics}
+                    view="list"
+                />
+            </td>
+        {/if}
         {#each sortAndSelectScope($metricsQuery.data.jobMetrics) as metric, i (metric || i)}
             <td>
                 <!-- Subluster Metricconfig remove keyword for jobtables (joblist main, user joblist, project joblist) to be used here as toplevel case-->