From 756912eeb196ed9ccf2e642d8b293f2cc02902b6 Mon Sep 17 00:00:00 2001
From: Zaid Humaimidi <zaid@genieacs.com>
Date: Mon, 22 Apr 2024 14:14:12 -0700
Subject: [PATCH] Fix dynamic evaluation of UI config expressions

---
 ui/components/overview-dot.ts |  8 ++++++--
 ui/device-page.ts             |  6 +++++-
 ui/devices-page.ts            | 11 +++++++++--
 ui/pie-chart-component.ts     |  7 ++++---
 4 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/ui/components/overview-dot.ts b/ui/components/overview-dot.ts
index 5f35ec2..6ecf554 100644
--- a/ui/components/overview-dot.ts
+++ b/ui/components/overview-dot.ts
@@ -27,10 +27,14 @@ const component: ClosureComponent = (): Component => {
               cx: "0.5em",
               cy: "0.5em",
               r: "0.4em",
-              fill: slice["color"],
+              fill: evaluateExpression(slice["color"], null),
             }),
           );
-          return m("span.overview-dot", dot, `${slice["label"]}`);
+          return m(
+            "span.overview-dot",
+            dot,
+            evaluateExpression(slice["label"], null),
+          );
         }
       }
       return null;
diff --git a/ui/device-page.ts b/ui/device-page.ts
index 998c3c0..55cf984 100644
--- a/ui/device-page.ts
+++ b/ui/device-page.ts
@@ -39,7 +39,11 @@ export const component: ClosureComponent = (): Component => {
 
       for (const c of Object.values(conf)) {
         cmps.push(
-          m.context({ device: dev.value[0], deviceQuery: dev }, c["type"], c),
+          m.context(
+            { device: dev.value[0], deviceQuery: dev },
+            store.evaluateExpression(c["type"], null) as string,
+            c,
+          ),
         );
       }
 
diff --git a/ui/devices-page.ts b/ui/devices-page.ts
index a7c697b..2882351 100644
--- a/ui/devices-page.ts
+++ b/ui/devices-page.ts
@@ -26,7 +26,10 @@ const memoizedGetSortable = memoize((p) => {
 
 const getDownloadUrl = memoize((filter, indexParameters) => {
   const columns = {};
-  for (const p of indexParameters) columns[p.label] = stringify(p.parameter);
+  for (const p of indexParameters)
+    columns[store.evaluateExpression(p.label, null) as string] = stringify(
+      p.parameter,
+    );
   return `api/devices.csv?${m.buildQueryString({
     filter: stringify(filter),
     columns: JSON.stringify(columns),
@@ -282,7 +285,11 @@ export const component: ClosureComponent = (): Component => {
       };
 
       const attrs = {};
-      attrs["attributes"] = attributes;
+      attrs["attributes"] = attributes.map((a) => ({
+        ...a,
+        label: store.evaluateExpression(a.label, null),
+        type: store.evaluateExpression(a.type, null),
+      }));
       attrs["data"] = devs.value;
       attrs["total"] = count.value;
       attrs["showMoreCallback"] = showMore;
diff --git a/ui/pie-chart-component.ts b/ui/pie-chart-component.ts
index e53d791..599f6aa 100644
--- a/ui/pie-chart-component.ts
+++ b/ui/pie-chart-component.ts
@@ -2,6 +2,7 @@ import { ClosureComponent, Component, Children } from "mithril";
 import { m } from "./components.ts";
 import { stringify } from "../lib/common/expression/parser.ts";
 import memoize from "../lib/common/memoize.ts";
+import * as store from "./store.ts";
 
 const memoizedStringify = memoize(stringify);
 
@@ -24,9 +25,9 @@ function drawChart(chartData): Children {
     legend.push(
       m(".legend-line", [
         m("span.color", {
-          style: `background-color: ${slice["color"]} !important;`,
+          style: `background-color: ${store.evaluateExpression(slice["color"], null)} !important;`,
         }),
-        `${slice["label"]}: `,
+        `${store.evaluateExpression(slice["label"], null)}: `,
         m(
           "a",
           {
@@ -57,7 +58,7 @@ function drawChart(chartData): Children {
       paths.push(
         m("path", {
           d: sketch,
-          fill: slice["color"],
+          fill: store.evaluateExpression(slice["color"], null),
         }),
       );