diff --git a/web/frontend/src/Systems.root.svelte b/web/frontend/src/Systems.root.svelte index cafcdf1..a8e2545 100644 --- a/web/frontend/src/Systems.root.svelte +++ b/web/frontend/src/Systems.root.svelte @@ -23,6 +23,7 @@ } from "@sveltestrap/sveltestrap"; import { gql, + getContextClient, mutationStore, } from "@urql/svelte"; @@ -49,6 +50,7 @@ /* Const Init */ const { query: initq } = init(); + const client = getContextClient(); const displayNodeOverview = (displayType === 'OVERVIEW'); const ccconfig = getContext("cc-config"); const initialized = getContext("initialized"); @@ -73,24 +75,41 @@ /* Derived States */ const systemMetrics = $derived($initialized ? [...globalMetrics.filter((gm) => gm?.availability.find((av) => av.cluster == cluster))] : []); const presetSystemUnits = $derived(loadUnits(systemMetrics)); - let selectedMetric = $derived(( - ccconfig[`nodeOverview_selectedMetric:${cluster}:${subCluster}`] || - ccconfig[`nodeOverview_selectedMetric:${cluster}`] - ) || - systemMetrics ? systemMetrics[0] : "" - ); - let selectedMetrics = $derived(( - ccconfig[`nodeList_selectedMetrics:${cluster}:${subCluster}`] || - ccconfig[`nodeList_selectedMetrics:${cluster}`] - ) || - systemMetrics ? [systemMetrics[0], systemMetrics[1], systemMetrics[2]] : [] - ); + let selectedMetric = $derived.by(() => { + let configKey = `nodeOverview_selectedMetric`; + if (cluster) configKey += `:${cluster}`; + if (subCluster) configKey += `:${subCluster}`; + + if ($initialized) { + if (ccconfig[configKey]) return ccconfig[configKey] + else if (systemMetrics.length !== 0) return systemMetrics[0].name + } + return "" + }); + let selectedMetrics = $derived.by(() => { + let configKey = `nodeList_selectedMetrics`; + if (cluster) configKey += `:${cluster}`; + if (subCluster) configKey += `:${subCluster}`; + + if ($initialized) { + if (ccconfig[configKey]) return ccconfig[configKey] + else if (systemMetrics.length >= 3) return [systemMetrics[0].name, systemMetrics[1].name, systemMetrics[2].name] + } + return [] + }); + + // $inspect('System', systemMetrics) + // $inspect('List', selectedMetrics) + // $inspect('Overview', selectedMetric) + // console.log('Config', ccconfig) + // console.log('Config List', ccconfig[`nodeOverview_selectedMetrics:${cluster}`], cluster) + // console.log('Config Overview', ccconfig[`nodeOverview_selectedMetric:${cluster}`], cluster) /* Effects */ $effect(() => { - // OnMount: Ping Var, without this, OVERVIEW metric select is empty (reason tbd) - // systemMetrics - updateOverviewMetric(selectedMetric) + if (displayNodeOverview) { + updateOverviewMetric(selectedMetric) + } }); /* Functions */ @@ -113,16 +132,13 @@ }; function updateOverviewMetric(newMetric) { - let configKey; - if (subCluster) { - configKey = `nodeOverview_selectedMetric:${cluster}:${subCluster}`; - } else { - configKey = `nodeOverview_selectedMetric:${cluster}`; - } + let configKey = `nodeOverview_selectedMetric`; + if (cluster) configKey += `:${cluster}`; + if (subCluster) configKey += `:${subCluster}`; updateConfigurationMutation({ name: configKey, - value: newMetric, + value: JSON.stringify(newMetric), }).subscribe((res) => { if (res.fetching === false && res.error) { throw res.error; diff --git a/web/frontend/src/generic/select/MetricSelection.svelte b/web/frontend/src/generic/select/MetricSelection.svelte index 718cd37..ba5a289 100644 --- a/web/frontend/src/generic/select/MetricSelection.svelte +++ b/web/frontend/src/generic/select/MetricSelection.svelte @@ -57,12 +57,12 @@ }; /* State Init */ - let pendingMetrics = $state(presetMetrics); let pendingShowFootprint = $state(!!showFootprint); let listedMetrics = $state([]); let columnHovering = $state(null); /* Derives States */ + let pendingMetrics = $derived(presetMetrics); const allMetrics = $derived(loadAvailable(preInitialized || $initialized)); /* Reactive Effects */