Footprint in jobList as selectable

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-->