Migrate single node view, fix route condition

internal/routerConfig/routes.go

@@ -161,7 +161,7 @@ func setupNodeRoute(i InfoType, r *http.Request) InfoType {
 	i["hostname"] = vars["hostname"]
 	i["id"] = fmt.Sprintf("%s (%s)", vars["cluster"], vars["hostname"])
 	from, to := r.URL.Query().Get("from"), r.URL.Query().Get("to")
-	if from != "" || to != "" {
+	if from != "" && to != "" {
 		i["from"] = from
 		i["to"] = to
 	}

web/frontend/src/Node.root.svelte

@@ -9,7 +9,9 @@
  -->
 
 <script>
-  import { getContext } from "svelte";
+  import { 
+    getContext,
+  } from "svelte";
   import {
     Row,
     Col,
@@ -34,23 +36,28 @@
   import TimeSelection from "./generic/select/TimeSelection.svelte";
   import Refresher from "./generic/helper/Refresher.svelte";
 
-  export let cluster;
+  /* Svelte 5 Props */
-  export let hostname;
+  let {
-  export let from = null;
+    cluster,
-  export let to = null;
+    hostname,
+    presetFrom = null,
+    presetTo = null,
+  } = $props();
 
+  /* Const Init */
   const { query: initq } = init();
-
-  if (from == null || to == null) {
-    to = new Date(Date.now());
-    from = new Date(to.getTime());
-    from.setHours(from.getHours() - 4);
-  }
-
   const initialized = getContext("initialized")
   const globalMetrics = getContext("globalMetrics")
   const ccconfig = getContext("cc-config");
   const clusters = getContext("clusters");
+  const nowEpoch = Date.now();
+  const paging = { itemsPerPage: 50, page: 1 };
+  const sorting = { field: "startTime", type: "col", order: "DESC" };
+  const filter = [
+    { cluster: { eq: cluster } },
+    { node: { contains: hostname } },
+    { state: ["running"] },
+  ];
   const client = getContextClient();
   const nodeMetricsQuery = gql`
     query ($cluster: String!, $nodes: [String!], $from: Time!, $to: Time!) {
@@ -79,27 +86,6 @@
       }
     }
   `;
-
-  $: nodeMetricsData = queryStore({
-    client: client,
-    query: nodeMetricsQuery,
-    variables: {
-      cluster: cluster,
-      nodes: [hostname],
-      from: from.toISOString(),
-      to: to.toISOString(),
-    },
-  });
-
-
-  const paging = { itemsPerPage: 50, page: 1 };
-  const sorting = { field: "startTime", type: "col", order: "DESC" };
-  const filter = [
-    { cluster: { eq: cluster } },
-    { node: { contains: hostname } },
-    { state: ["running"] },
-  ];
-
   const nodeJobsQuery = gql`
     query (
       $filter: [JobFilter!]!
@@ -112,13 +98,37 @@
     }
   `;
 
-  $: nodeJobsData = queryStore({
+  /* State Init */
+  let from = $state(presetFrom ? presetFrom : new Date(nowEpoch - (4 * 3600 * 1000)));
+  let to = $state(presetTo ? presetTo : new Date(nowEpoch));
+  let systemUnits = $state({});
+
+  /* Derived */
+  const nodeMetricsData = $derived(queryStore({
+      client: client,
+      query: nodeMetricsQuery,
+      variables: {
+        cluster: cluster,
+        nodes: [hostname],
+        from: from?.toISOString(),
+        to: to?.toISOString(),
+      },
+    })
+  );
+
+  const nodeJobsData = $derived(queryStore({
       client: client,
       query: nodeJobsQuery,
       variables: { paging, sorting, filter },
+    })
+  );
+
+  /* Effect */
+  $effect(() => {
+    loadUnits($initialized);
   });
 
-  let systemUnits = {};
+  /* Functions */
   function loadUnits(isInitialized) {
     if (!isInitialized) return
     const systemMetrics = [...globalMetrics.filter((gm) => gm?.availability.find((av) => av.cluster == cluster))]
@@ -126,8 +136,6 @@
       systemUnits[sm.name] = (sm?.unit?.prefix ? sm.unit.prefix : "") + (sm?.unit?.base ? sm.unit.base : "")
     }
   }
-
-  $: loadUnits($initialized)
 </script>
 
 <Row cols={{ xs: 2, lg: 4 }}>

web/frontend/src/node.entrypoint.js

@@ -7,8 +7,8 @@ mount(Node, {
     props: {
         cluster: infos.cluster,
         hostname: infos.hostname,
-        from: infos.from,
+        presetFrom: infos.from,
-        to: infos.to
+        presetTo: infos.to
     },
     context: new Map([
             ['cc-config', clusterCockpitConfig]