Fixes #14: Lazy load additional metrics

configs/README.md

@@ -49,6 +49,8 @@ All security relevant configuration. e.g., keys and passwords, are set using env
    - `plot_view_showStatTable`: Type bool. Option to toggle the node statistic table in single job view. Default `true`.
    - `system_view_selectedMetric`: Type string. Initial metric shown in system view. Default `cpu_load`.
 
+Some of the `ui-defaults` values can be appended by `:<clustername>` in order to have different settings depending on the current cluster. Those are notably `job_view_nodestats_selectedMetrics`, `job_view_polarPlotMetrics`, `job_view_selectedMetrics` and `plot_list_selectedMetrics`.
+
 ## Environment Variables
 
 An example env file is found in this directory. Copy it to `.env` in the project root and adapt it for your needs.

web/frontend/src/Job.root.svelte

@@ -31,26 +31,42 @@
     const ccconfig = getContext('cc-config'),
           clusters = getContext('clusters')
 
-    let isMetricsSelectionOpen = false, selectedMetrics = []
+    let isMetricsSelectionOpen = false, selectedMetrics = [], isFetched = new Set()
     const [jobMetrics, startFetching] = fetchMetricsStore()
     getContext('on-init')(() => {
         let job = $initq.data.job
         if (!job)
             return
 
-        startFetching(job, null, job.numNodes > 2 ? ["node"] : ["node", "core"])
-
-        // TODO: Do not even fetch metrics that are not one of the following: flops_any, mem_bw, job_view_selectedMetrics, job_view_nodestats_selectedMetrics
         selectedMetrics = ccconfig[`job_view_selectedMetrics:${job.cluster}`]
             || clusters.find(c => c.name == job.cluster).metricConfig.map(mc => mc.name)
 
+        let toFetch = new Set([
+            'flops_any', 'mem_bw',
+            ...selectedMetrics,
+            ...(ccconfig[`job_view_polarPlotMetrics:${job.cluster}`] || ccconfig[`job_view_polarPlotMetrics`]),
+            ...(ccconfig[`job_view_nodestats_selectedMetrics:${job.cluster}`] || ccconfig[`job_view_nodestats_selectedMetrics`])])
 
-        // selectedMetrics = ccconfig[`job_view_selectedMetrics:${job.cluster}`]
-        //     || clusters.find(c => c.name == job.cluster).metricConfig.map(mc => mc.name)
-
-        // let toFetch = new Set(['flops_any', 'mem_bw', ])
+        startFetching(job, [...toFetch], job.numNodes > 2 ? ["node"] : ["node", "core"])
+        isFetched = toFetch
     })
 
+    const lazyFetchMoreMetrics = () => {
+        let notYetFetched = new Set()
+        for (let m of selectedMetrics) {
+            if (!isFetched.has(m)) {
+                notYetFetched.add(m)
+                isFetched.add(m)
+            }
+        }
+
+        if (notYetFetched.size > 0)
+            startFetching($initq.data.job, [...notYetFetched], $initq.data.job.numNodes > 2 ? ["node"] : ["node", "core"])
+    }
+
+    // Fetch more data once required:
+    $: if ($initq.data && $jobMetrics.data && selectedMetrics) lazyFetchMoreMetrics();
+
     let plots = {}, jobTags, fullWidth, statsTable
     $: polarPlotSize = Math.min(fullWidth / 3 - 10, 300)
     $: document.title = $initq.fetching ? 'Loading...' : ($initq.error ? 'Error' : `Job ${$initq.data.job.jobId} - ClusterCockpit`)
@@ -88,7 +104,7 @@
         <Col>
             <PolarPlot
                 width={polarPlotSize} height={polarPlotSize}
-                metrics={ccconfig[`job_view_polarPlotMetrics:${$initq.data.job.cluster}`] || ccconfig.job_view_polarPlotMetrics}
+                metrics={ccconfig[`job_view_polarPlotMetrics:${$initq.data.job.cluster}`] || ccconfig[`job_view_polarPlotMetrics`]}
                 cluster={$initq.data.job.cluster}
                 jobMetrics={$jobMetrics.data.jobMetrics} />
         </Col>

web/frontend/src/PlotTable.svelte

@@ -12,7 +12,7 @@
     export let padding = 10
 
     let tableWidth = 0
-    const PLACEHOLDER = { magic: 'object' }
+    const isPlaceholder = x => x._is_placeholder === true
 
     function tile(items, itemsPerRow) {
         const rows = []
@@ -22,7 +22,7 @@
                 if (ri + ci < items.length)
                     row.push(items[ri + ci])
                 else
-                    row.push(PLACEHOLDER)
+                    row.push({ _is_placeholder: true, ri, ci })
             }
 
             rows.push(row)
@@ -40,7 +40,7 @@
         <tr>
             {#each row as item (item)}
                 <td>
-                    {#if item != PLACEHOLDER && plotWidth > 0}
+                    {#if !isPlaceholder(item) && plotWidth > 0}
                         <slot item={item} width={plotWidth}></slot>
                     {/if}
                 </td>