Refactor svelte frontend

- Adapt to new metricConfig logic
- Footprint-Metrics generalized for bar card
- Footprint-Metrics in stats filter and sorting
- Frontend always uses GQL, except adminOptions
- Job View will load scopes for all metrics on request

web/frontend/src/Node.root.svelte

@@ -29,6 +29,8 @@
     from.setMinutes(from.getMinutes() - 30);
   }
 
+  const initialized = getContext("initialized")
+  const globalMetrics = getContext("globalMetrics")
   const ccconfig = getContext("cc-config");
   const clusters = getContext("clusters");
   const client = getContextClient();
@@ -74,15 +76,11 @@
   let itemsPerPage = ccconfig.plot_list_jobsPerPage;
   let page = 1;
   let paging = { itemsPerPage, page };
-  let sorting = { field: "startTime", order: "DESC" };
+  let sorting = { field: "startTime", type: "col", order: "DESC" };
   $: filter = [
     { cluster: { eq: cluster } },
     { node: { contains: hostname } },
     { state: ["running"] },
-    // {startTime: {
-    //     from: from.toISOString(),
-    //     to: to.toISOString()
-    // }}
   ];
 
   const nodeJobsQuery = gql`
@@ -92,10 +90,6 @@
       $paging: PageRequest!
     ) {
       jobs(filter: $filter, order: $sorting, page: $paging) {
-        # items {
-        #     id
-        #     jobId
-        # }
         count
       }
     }
@@ -107,26 +101,16 @@
     variables: { paging, sorting, filter },
   });
 
-  let metricUnits = {};
-  $: if ($nodeMetricsData.data) {
-    let thisCluster = clusters.find((c) => c.name == cluster);
-    if (thisCluster) {
-      for (let metric of thisCluster.metricConfig) {
-        if (metric.unit.prefix || metric.unit.base) {
-          metricUnits[metric.name] =
-            "(" +
-            (metric.unit.prefix ? metric.unit.prefix : "") +
-            (metric.unit.base ? metric.unit.base : "") +
-            ")";
-        } else {
-          // If no unit defined: Omit Unit Display
-          metricUnits[metric.name] = "";
-        }
-      }
+  let systemUnits = {};
+  function loadUnits(isInitialized) {
+    if (!isInitialized) return
+    const systemMetrics = [...globalMetrics.filter((gm) => gm?.availability.find((av) => av.cluster == cluster))]
+    for (let sm of systemMetrics) {
+      systemUnits[sm.name] = (sm?.unit?.prefix ? sm.unit.prefix : "") + (sm?.unit?.base ? sm.unit.base : "")
     }
   }
 
-  const dateToUnixEpoch = (rfc3339) => Math.floor(Date.parse(rfc3339) / 1000);
+  $: loadUnits($initialized)
 </script>
 
 <Row>
@@ -195,7 +179,7 @@
       >
         <h4 style="text-align: center; padding-top:15px;">
           {item.name}
-          {metricUnits[item.name]}
+          {systemUnits[item.name] ? "(" + systemUnits[item.name] + ")" : ""}
         </h4>
         {#if item.disabled === false && item.metric}
           <MetricPlot