genieacs/client/faults-page.js

"use strict";

import m from "mithril";

import filterComponent from "./filter-component";
import * as filterParser from "../common/filter-parser";
import Filter from "../common/filter";
import * as store from "./store";
import * as notifications from "./notifications";

function init(args) {
  return new Promise(resolve => {
    let filter = new Filter(args.filter);
    resolve({ filter: filter });
  });
}

function renderTable(faultsResponse, total, selected, showMoreCallback) {
  const faults = faultsResponse.value;
  const selectAll = m("input", {
    type: "checkbox",
    checked: faults.length && selected.size === faults.length,
    onchange: e => {
      for (let f of faults)
        if (e.target.checked) selected.add(f["_id"]);
        else selected.delete(f["_id"]);
    },
    disabled: !total
  });

  const labels = [
    selectAll,
    "Device",
    "Channel",
    "Code",
    "Message",
    "Retries",
    "Timestamp"
  ].map(l => m("th", l));

  let rows = [];
  for (let f of faults) {
    let checkbox = m("input", {
      type: "checkbox",
      checked: selected.has(f["_id"]),
      onchange: e => {
        if (e.target.checked) selected.add(f["_id"]);
        else selected.delete(f["_id"]);
      },
      onclick: e => {
        e.stopPropagation();
        e.redraw = false;
      }
    });

    const deviceHref = `#!/devices/${encodeURIComponent(f["device"])}`;

    rows.push(
      m(
        "tr",
        {
          onclick: e => {
            if (["INPUT", "BUTTON", "A"].includes(e.target.nodeName)) {
              e.redraw = false;
              return;
            }

            if (!selected.delete(f["_id"])) selected.add(f["_id"]);
          }
        },
        m("td", checkbox),
        m("td", m("a", { href: deviceHref }, f["device"])),
        m("td", f["channel"]),
        m("td", f["code"]),
        m("td", f["message"]),
        m("td", f["retries"]),
        m("td", f["timestamp"])
      )
    );
  }

  if (!rows.length)
    rows.push(m("tr.empty", m("td", { colspan: 7 }, "No faults")));

  let footerElements = [];
  if (total != null) footerElements.push(`${faults.length}/${total}`);
  else footerElements.push(`${faults.length}`);

  footerElements.push(
    m(
      "button",
      {
        title: "Show more faults",
        onclick: showMoreCallback,
        disabled: faults.length >= total || !faultsResponse.fulfilled
      },
      "More"
    )
  );

  let tfoot = m(
    "tfoot",
    m("tr", m("td", { colspan: labels.length }, footerElements))
  );

  const buttons = [
    m(
      "button.primary",
      {
        title: "Delete selected faults",
        disabled: !selected.size,
        onclick: e => {
          e.redraw = false;
          e.target.disabled = true;
          Promise.all(
            Array.from(selected).map(id => store.deleteResource("faults", id))
          )
            .then(res => {
              notifications.push("success", `${res.length} faults deleted`);
              store.fulfill(0, Date.now());
            })
            .catch(err => {
              notifications.push("error", err.message);
            });
        }
      },
      "Delete"
    )
  ];

  return [
    m(
      "table.table.highlight",
      m("thead", m("tr", labels)),
      m("tbody", rows),
      tfoot
    ),
    buttons
  ];
}

const component = {
  view: vnode => {
    document.title = "Faults - GenieACS";

    function showMore() {
      vnode.state.showCount = (vnode.state.showCount || 10) + 10;
      m.redraw();
    }

    function onFilterChanged(filter) {
      let params = {};
      if (filter) params.filter = filterParser.stringify(filter);
      m.route.set("/faults", params);
    }

    let faults = store.fetch(
      "faults",
      vnode.attrs.filter,
      vnode.state.showCount || 10
    );
    let count = store.count("faults", vnode.attrs.filter);

    let selected = new Set();
    if (vnode.state.selected)
      for (let f of faults.value)
        if (vnode.state.selected.has(f["_id"])) selected.add(f["_id"]);
    vnode.state.selected = selected;

    return [
      m("h1", "Listing faults"),
      m(filterComponent, {
        predefined: [
          { parameter: "device" },
          { parameter: "channel" },
          { parameter: "code" },
          { parameter: "retries" },
          { parameter: "timestamp" }
        ],
        filter: vnode.attrs.filter ? vnode.attrs.filter.ast : null,
        onChange: onFilterChanged
      }),
      renderTable(faults, count.value, selected, showMore)
    ];
  }
};

export { init, component };