Evaluate component attrs before use

ui/components/all-parameters.ts

@@ -23,6 +23,7 @@ import * as taskQueue from "../task-queue";
 import { parse } from "../../lib/common/expression-parser";
 import memoize from "../../lib/common/memoize";
 import { getIcon } from "../icons";
+import { evaluateExpression } from "../store";
 
 const memoizedParse = memoize(parse);
 
@@ -55,7 +56,7 @@ const component: ClosureComponent = (): Component => {
     view: (vnode) => {
       const device = vnode.attrs["device"];
 
-      const limit = vnode.attrs["limit"] > 0 ? vnode.attrs["limit"] : 100;
+      const limit = evaluateExpression(vnode.attrs["limit"], device) || 100;
 
       const search = m("input", {
         type: "text",

ui/components/device-link.ts

@@ -19,18 +19,22 @@
 
 import { ClosureComponent, Component } from "mithril";
 import { m } from "../components";
+import { evaluateExpression } from "../store";
 
 const component: ClosureComponent = (): Component => {
   return {
     view: (vnode) => {
       let deviceId;
-      if (vnode.attrs["device"])
+      const device = vnode.attrs["device"];
-        deviceId = vnode.attrs["device"]["DeviceID.ID"].value[0];
+      if (device) deviceId = device["DeviceID.ID"].value[0];
 
       const children = Object.values(vnode.attrs["components"]).map((c) => {
+        if (Array.isArray(c)) c = evaluateExpression(c, device || {});
         if (typeof c !== "object") return `${c}`;
+        const type = evaluateExpression(c["type"], device || {});
+        if (!type) return null;
         const attrs = Object.assign({}, vnode.attrs, c);
-        return m(attrs["type"], attrs);
+        return m(type as string, attrs);
       });
       if (deviceId) {
         return m(

ui/components/overview-dot.ts

@@ -20,7 +20,7 @@
 import { ClosureComponent, Component } from "mithril";
 import { m } from "../components";
 import config from "../config";
-import * as store from "../store";
+import { evaluateExpression } from "../store";
 
 const CHARTS = config.ui.overview.charts;
 
@@ -28,11 +28,12 @@ const component: ClosureComponent = (): Component => {
   return {
     view: (vnode) => {
       const device = vnode.attrs["device"];
-      const chart = CHARTS[vnode.attrs["chart"]] as Record<string, unknown>;
+      const chartName = evaluateExpression(vnode.attrs["chart"], device || {});
+      const chart = CHARTS[chartName as string] as Record<string, unknown>;
       if (!chart) return null;
       for (const slice of Object.values(chart.slices)) {
         const filter = slice["filter"];
-        if (store.evaluateExpression(filter, device)) {
+        if (evaluateExpression(filter, device || {})) {
           const dot = m(
             "svg",
             {

ui/components/parameter-list.ts

@@ -19,6 +19,7 @@
 
 import { ClosureComponent, Component, VnodeDOM } from "mithril";
 import { m } from "../components";
+import { evaluateExpression } from "../store";
 
 const component: ClosureComponent = (): Component => {
   return {
@@ -26,12 +27,13 @@ const component: ClosureComponent = (): Component => {
       const device = vnode.attrs["device"];
 
       const rows = Object.values(vnode.attrs["parameters"]).map((parameter) => {
+        const type = evaluateExpression(parameter["type"], device);
         const p = m.context(
           {
             device: device,
             parameter: parameter["parameter"],
           },
-          parameter["type"] || "parameter",
+          (type as string) || "parameter",
           parameter
         );
 

ui/components/parameter-table.ts

@@ -20,7 +20,7 @@
 import { ClosureComponent, Component } from "mithril";
 import { m } from "../components";
 import * as taskQueue from "../task-queue";
-import * as store from "../store";
+import { evaluateExpression } from "../store";
 import * as expressionParser from "../../lib/common/expression-parser";
 import { getIcon } from "../icons";
 
@@ -35,7 +35,7 @@ const component: ClosureComponent = (): Component => {
     },
     view: (vnode) => {
       const device = vnode.attrs["device"];
-      const object = store.evaluateExpression(vnode.state["object"], device);
+      const object = evaluateExpression(vnode.state["object"], device);
       const parameters = vnode.state["parameters"];
 
       if (typeof object !== "string" || !device[object]) return null;
@@ -56,8 +56,7 @@ const component: ClosureComponent = (): Component => {
 
       const rows = [];
       for (const i of instances) {
-        let filter =
+        let filter = "filter" in vnode.attrs ? vnode.attrs["filter"] : true;
-          vnode.attrs["filter"] != null ? vnode.attrs["filter"] : true;
 
         filter = expressionParser.map(filter, (e) => {
           if (Array.isArray(e) && e[0] === "PARAM")
@@ -65,7 +64,7 @@ const component: ClosureComponent = (): Component => {
           return e;
         });
 
-        if (!store.evaluateExpression(filter, device)) continue;
+        if (!evaluateExpression(filter, device)) continue;
 
         const row = parameters.map((p) => {
           const param = expressionParser.map(p.parameter, (e) => {
@@ -147,7 +146,9 @@ const component: ClosureComponent = (): Component => {
       }
 
       let label;
-      if (vnode.attrs["label"]) label = m("h2", vnode.attrs["label"]);
+
+      const l = evaluateExpression(vnode.attrs["label"], device);
+      if (l != null) label = m("h2", l);
 
       return [
         label,

ui/components/parameter.ts

@@ -77,7 +77,7 @@ const component: ClosureComponent = (): Component => {
 
       const { value, timestamp, parameter } = evaluateParam(
         vnode.attrs["parameter"],
-        vnode.attrs["device"],
+        device,
         store.getTimestamp() + store.getClockSkew()
       );
 

ui/components/tags.ts

@@ -29,7 +29,8 @@ const component: ClosureComponent = (): Component => {
     view: (vnode) => {
       const device = vnode.attrs["device"];
       let writable = true;
-      if (vnode.attrs["writable"] != null) writable = vnode.attrs["writable"];
+      if ("writable" in vnode.attrs)
+        writable = !!store.evaluateExpression(vnode.attrs["writable"], device);
 
       const tags = [];
       for (const p of Object.keys(device))