Move component labels to containers

client/components/all-parameters.js

@@ -103,14 +103,11 @@ const component = {
         return m("tr", attrs, m("td.left", k), m("td.right", val));
       });
 
-    return [
+    return m(
-      m("h2", "Device parameters"),
+      ".all-parameters",
-      m(
+      search,
-        ".all-parameters",
+      m(".parameter-list", m("table", m("tbody", rows)))
-        search,
+    );
-        m(".parameter-list", m("table", m("tbody", rows)))
-      )
-    ];
   }
 };
 

client/components/container.js

@@ -2,10 +2,21 @@
 
 import m from "mithril";
 import * as components from "../components";
+import * as store from "../store";
+import Filter from "../../common/filter";
+import * as funcCache from "../../common/func-cache";
 
 const component = {
   view: vnode => {
+    if (vnode.attrs.filter) {
+      const filter = store.unpackFilter(
+        funcCache.get(Filter.parse, vnode.attrs.filter)
+      );
+      if (!filter.test(vnode.attrs.device)) return;
+    }
+
     let children = Object.values(vnode.attrs.components).map(c => {
+      if (typeof c !== "object") return `${c}`;
       const attrs = Object.assign({}, vnode.attrs, c);
       return m(components.get(attrs.type), attrs);
     });

client/components/device-faults.js

@@ -64,7 +64,7 @@ const component = {
         m("tr.empty", m("td", { colspan: headers.length }, "No faults"))
       );
 
-    return [m("h2", "Faults"), m("table.table", thead, tbody)];
+    return m("table.table", thead, tbody);
   }
 };
 

client/css/app.css

@@ -473,7 +473,6 @@ span.na {
 }
 
 .all-parameters {
-  clear: both;
   font-family: monospace;
   & > input {
     font-family: monospace;
@@ -511,6 +510,15 @@ span.na {
   }
 }
 
+.container-right {
+  float: right;
+  clear: right;
+}
+
+.container-full-width {
+  clear: both;
+}
+
 .device-actions {
   margin-top: 10px;
   & > button {

config.json

@@ -246,10 +246,28 @@
         ]
       },
       {
-        "type": "device-faults"
+        "type": "container",
+        "element": "div",
+        "components": [
+          {
+            "type": "container",
+            "element": "h3",
+            "components": ["Faults"]
+          },
+          {"type": "device-faults"}
+        ]
       },
       {
-        "type": "all-parameters"
+        "type": "container",
+        "element": "div.container-full-width",
+        "components": [
+          {
+            "type": "container",
+            "element": "h3",
+            "components": ["All parameters"]
+          },
+          {"type": "all-parameters"}
+        ]
       },
       {
         "type": "device-actions"