Adapt svelte to new schema, add removed metric box

- Moved 'scope' field to parent jobMetric
- Implemented unit { prefix, base } where necessary
- SubCluster Metric Config 'remove' option implemented in Joblists

web/frontend/src/Metric.svelte

@@ -5,21 +5,36 @@
     import { fetchMetrics, minScope } from './utils'
 
     export let job
-    export let metric
+    export let metricName
     export let scopes
     export let width
+    export let rawData
 
     const dispatch = createEventDispatcher()
     const cluster = getContext('clusters').find(cluster => cluster.name == job.cluster)
     const subCluster = cluster.subClusters.find(subCluster => subCluster.name == job.subCluster)
-    const metricConfig = cluster.metricConfig.find(metricConfig => metricConfig.name == metric)
+    const metricConfig = cluster.metricConfig.find(metricConfig => metricConfig.name == metricName)
+    
+    let selectedHost = null, plot, fetching = false, error = null
+    let selectedScope = minScope(scopes)
+    let selectedScopeIndex = scopes.findIndex(s => s == selectedScope)
+    
+    // console.log('- Inputs -')
+    // console.log(metricName)
+    // console.log(scopes)
+    // console.log(rawData)
+    // console.log('- Prep Scopes -')
+    // console.log(selectedScope)
+    // console.log(selectedScopeIndex)
 
-    let selectedScope = minScope(scopes.map(s => s.scope)), selectedHost = null, plot, fetching = false, error = null
-
-    $: avaliableScopes = scopes.map(metric => metric.scope)
-    $: data = scopes.find(metric => metric.scope == selectedScope)
+    $: avaliableScopes = scopes
+    $: data = rawData[selectedScopeIndex]
     $: series = data?.series.filter(series => selectedHost == null || series.hostname == selectedHost)
 
+    // console.log('- Prep Data -')
+    // console.log(rawData[selectedScopeIndex])
+    // console.log(rawData[selectedScopeIndex].series.filter(series => selectedHost == null || series.hostname == selectedHost))
+
     let from = null, to = null
     export function setTimeRange(f, t) {
         from = f, to = t
@@ -29,7 +44,7 @@
 
     export async function loadMore() {
         fetching = true
-        let response = await fetchMetrics(job, [metric], ["core"])
+        let response = await fetchMetrics(job, [metricName], ["core"])
         fetching = false
 
         if (response.error) {
@@ -38,9 +53,9 @@
         }
 
         for (let jm of response.data.jobMetrics) {
-            if (jm.metric.scope != "node") {
+            if (jm.scope != "node") {
                 scopes.push(jm.metric)
-                selectedScope = jm.metric.scope
+                selectedScope = jm.scope
                 dispatch('more-loaded', jm)
                 if (!avaliableScopes.includes(selectedScope))
                     avaliableScopes = [...avaliableScopes, selectedScope]
@@ -52,7 +67,8 @@
 </script>
 <InputGroup>
     <InputGroupText style="min-width: 150px;">
-        {metric} ({metricConfig?.unit})
+        {metricName} ({(metricConfig?.unit?.prefix ? metricConfig.unit.prefix : '') +
+                       (metricConfig?.unit?.base   ? metricConfig.unit.base   : '')})
     </InputGroupText>
     <select class="form-select" bind:value={selectedScope}>
         {#each avaliableScopes as scope}
@@ -82,7 +98,7 @@
             width={width} height={300}
             cluster={cluster} subCluster={subCluster}
             timestep={data.timestep}
-            scope={selectedScope} metric={metric}
+            scope={selectedScope} metric={metricName}
             series={series} />
     {/if}
 {/key}