New simple implementation for YAML serialization

Tiny in size so we don't need to fetch the 80KB yaml package for simple
YAML serializaiton needs in various pages. It's also 8x faster than
yaml package so that's a big plus for debug logging.

ui/components/device-faults.ts

@@ -22,6 +22,7 @@ import { m } from "../components";
 import * as store from "../store";
 import * as notifications from "../notifications";
 import { getIcon } from "../icons";
+import { stringify } from "../../lib/common/yaml";
 
 const component: ClosureComponent = (): Component => {
   return {
@@ -38,6 +39,7 @@ const component: ClosureComponent = (): Component => {
         "Channel",
         "Code",
         "Message",
+        "Detail",
         "Retries",
         "Timestamp",
       ].map((l) => m("th", l));
@@ -48,7 +50,9 @@ const component: ClosureComponent = (): Component => {
         rows.push([
           m("td", f["channel"]),
           m("td", f["code"]),
-          m("td", f["message"]),
+          m("td", m("long-text", { text: f["message"] })),
+          m("td", m("long-text", { text: stringify(f["detail"]) })),
+
           m("td", f["retries"]),
           m("td", new Date(f["timestamp"]).toLocaleString()),
           m(

ui/faults-page.ts

@@ -27,7 +27,7 @@ import * as notifications from "./notifications";
 import memoize from "../lib/common/memoize";
 import * as smartQuery from "./smart-query";
 import { map, parse, stringify } from "../lib/common/expression-parser";
-import { loadYaml, yaml } from "./dynamic-loader";
+import { stringify as yamlStringify } from "../lib/common/yaml";
 
 const PAGE_SIZE = config.ui.pageSize || 10;
 
@@ -76,13 +76,7 @@ export function init(
 
   const sort = args.hasOwnProperty("sort") ? "" + args["sort"] : "";
   const filter = args.hasOwnProperty("filter") ? "" + args["filter"] : "";
-  return new Promise((resolve, reject) => {
-    loadYaml()
-      .then(() => {
-        resolve({ filter, sort });
-      })
-      .catch(reject);
-  });
+  return Promise.resolve({ filter, sort });
 }
 
 export const component: ClosureComponent = (): Component => {
@@ -147,8 +141,11 @@ export const component: ClosureComponent = (): Component => {
           return m("a", { href: deviceHref }, fault["device"]);
         }
 
+        if (attr.id === "message")
+          return m("long-text", { text: fault["message"] });
+
         if (attr.id === "detail")
-          return m("long-text", { text: yaml.stringify(fault["detail"]) });
+          return m("long-text", { text: yamlStringify(fault["detail"]) });
 
         if (attr.id === "timestamp")
           return new Date(fault["timestamp"]).toLocaleString();