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;