Implement faults page

client/components/device-faults.js

@@ -0,0 +1,71 @@
+"use strict";
+
+import m from "mithril";
+import * as store from "../store";
+import Filter from "../../common/filter";
+import * as notifications from "../notifications";
+
+const component = {
+  view: vnode => {
+    const device = vnode.attrs.device;
+    const deviceId = device["DeviceID.ID"].value[0];
+    const faults = store.fetch(
+      "faults",
+      new Filter([
+        "AND",
+        [">", "_id", `${deviceId}:`],
+        ["<", "_id", `${deviceId}:zzzz`]
+      ])
+    );
+
+    const headers = ["Channel", "Code", "Message", "Retries", "Timestamp"].map(
+      l => m("th", l)
+    );
+    const thead = m("thead", m("tr", headers));
+
+    const rows = [];
+    for (let f of faults.value)
+      rows.push([
+        m("td", f["channel"]),
+        m("td", f["code"]),
+        m("td", f["message"]),
+        m("td", f["retries"]),
+        m("td", f["timestamp"]),
+        m(
+          "td",
+          m(
+            "button",
+            {
+              title: "Delete fault",
+              onclick: e => {
+                e.redraw = false;
+                store
+                  .deleteResource("faults", f["_id"])
+                  .then(() => {
+                    notifications.push("success", "Fault deleted");
+                    store.fulfill(Date.now(), Date.now());
+                    m.redraw();
+                  })
+                  .catch(err => {
+                    notifications.push("error", err.message);
+                  });
+              }
+            },
+            "✕"
+          )
+        )
+      ]);
+
+    let tbody;
+    if (rows.length) tbody = m("tbody", rows.map(r => m("tr", r)));
+    else
+      tbody = m(
+        "tbody",
+        m("tr.empty", m("td", { colspan: headers.length }, "No faults"))
+      );
+
+    return [m("h2", "Faults"), m("table.table", thead, tbody)];
+  }
+};
+
+export default component;

client/components/parameter-table.js

@@ -43,8 +43,9 @@ const component = {
           m(
             "td",
             m(
-              "a.delete",
+              "button",
               {
+                title: "Delete this instance",
                 onclick: () => {
                   taskQueue.queueTask({
                     name: "deleteObject",
@@ -53,12 +54,18 @@ const component = {
                   });
                 }
               },
-              "−"
+              "✕"
             )
           )
         );
       rows.push(m("tr", row));
     }
+
+    if (!rows.length)
+      rows.push(
+        m("tr.empty", m("td", { colspan: headers.length }, "No instances"))
+      );
+
     if (device[object].writable === true)
       rows.push(
         m(
@@ -67,8 +74,9 @@ const component = {
           m(
             "td",
             m(
-              "a.add",
+              "button",
               {
+                title: "Create a new instance",
                 onclick: () => {
                   taskQueue.queueTask({
                     name: "addObject",
@@ -77,12 +85,12 @@ const component = {
                   });
                 }
               },
-              "+"
+              "🞢"
             )
           )
         )
       );
-    return m("table.parameter-table", thead, m("tbody", rows));
+    return m("table.table", thead, m("tbody", rows));
   }
 };
 

client/components/parameter.js

@@ -14,8 +14,9 @@ const component = {
     let edit;
     if (param.writable)
       edit = m(
-        "a.edit",
+        "button",
         {
+          title: "Edit parameter value",
           onclick: () => {
             taskQueue.stageSpv({
               name: "setParameterValues",

client/components/summon-button.js

@@ -8,9 +8,11 @@ import * as notifications from "../notifications";
 const component = {
   view: vnode => {
     return m(
-      "a.summon",
+      "button.primary",
       {
-        onclick: () => {
+        title: "Initiate session and refresh basic parameters",
+        onclick: e => {
+          e.target.disabled = true;
           const params = Object.values(vnode.attrs.parameters);
           const task = {
             name: "getParameterValues",
@@ -37,7 +39,8 @@ const component = {
               else notifications.push("success", `${deviceId}: Summoned`);
             })
             .then(() => {
-              store.fulfill(Date.now(), Date.now());
+              e.target.disabled = false;
+              store.fulfill(0, Date.now());
             });
         }
       },