monitor: add some monitor web files

c6b9b5ef · Tristan Cavelier · b065b850 · c6b9b5ef · c6b9b5ef · c6b9b5ef
Commit c6b9b5ef authored Sep 01, 2015 by Tristan Cavelier
Showing with 203 additions and 0 deletions

stack/monitor/index.html stack/monitor/index.html +10 -0

stack/monitor/monitor.css stack/monitor/monitor.css +50 -0

stack/monitor/monitor.js stack/monitor/monitor.js +143 -0

No files found.
--- a/stack/monitor/index.html
+++ b/stack/monitor/index.html
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="monitor.css" />
+    <script src="monitor.js"></script>
+  </head>
+  <body>
+    <noscript>Please enable javascript on your browser to make this application to work.</noscript>
+  </body>
+</html>
--- a/stack/monitor/monitor.css
+++ b/stack/monitor/monitor.css
+body { width: 80vw; margin: auto; padding-top: 1%; }
+/* h1 { align-text: center; margin: auto; } */
+/*td { padding: 0 2%; }/**/
+td { padding: 0 1em; }/**/
+table { border: 1px solid black; }
+table > table { margin-top: 1em; }
+
+input {
+  box-sizing: border-box;
+  min-height: 10mm;
+  min-width: 10mm;
+}
+
+button {
+  box-sizing: border-box;
+  min-height: 10mm;
+  min-width: 10mm;
+  background-color: lightgray;
+  background: linear-gradient(180deg, #F6F6F6 0%, #DDDDDD 100%);
+  border-radius: 2px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #A4A4A4;
+}
+
+a.as-button {
+  display: inline-block;
+  box-sizing: border-box;
+  min-height: 10mm;
+  min-width: 10mm;
+  padding: 0.5em 0.5em;
+  text-align: center;
+  text-decoration: initial;
+}
+a.as-button {
+  color: black;
+  background-color: lightgray;
+  background: linear-gradient(180deg, #F6F6F6 0%, #DDDDDD 100%);
+  border-radius: 2px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #A4A4A4;
+}
+a.as-button:active, button:active {
+  background-color: white;
+  background: linear-gradient(0deg, #F6F6F6 0%, #DDDDDD 100%);
+}
+a.as-button:hover, button:hover {
+  border-color: #777777;
+}
--- a/stack/monitor/monitor.js
+++ b/stack/monitor/monitor.js
+/*jslint indent: 2 */
+(function () {
+  "use strict";
+
+  function loadJson(url) {
+    /*global XMLHttpRequest */
+    return new Promise(function (resolve, reject) {
+      var xhr = new XMLHttpRequest();
+      xhr.onload = function (event) {
+        var response = event.target;
+        if (response.status < 400) {
+          try {
+            resolve(JSON.parse(response.responseText));
+          } catch (e) {
+            reject(e);
+          }
+        } else {
+          reject(new Error("XHR: " + response.status + ": " + response.statusText));
+        }
+      };
+      xhr.onerror = function () {
+        reject(new Error("XHR: Error"));
+      };
+      xhr.open("GET", url, true);
+      xhr.send();
+    });
+  }
+
+  var monitor_json_list = [];
+
+  function htmlToElementList(html) {
+    /*global document */
+    var div = document.createElement("div");
+    div.innerHTML = html;
+    return div.querySelectorAll("*");
+  }
+
+  function absoluteUrl(url) {
+    /*global URL, location */
+    try {
+      return new URL(url, location.href).href;
+    } catch (e) {
+      return url;
+    }
+  }
+
+  function resolveUrl(firstUrl) {
+    /*global URL */
+    var l = arguments.length, i = 1, url = "";
+    url = absoluteUrl(firstUrl);
+    while (i < l) {
+      url = new URL(arguments[i], url).href;
+      i += 1;
+    }
+    return url;
+  }
+
+  function escapeHtml(html) {
+    return html.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+  }
+
+  function loadAndRenderMonitorSection(root, monitor_dict, monitor_url) {
+    if (!monitor_dict.service_list) {
+      root.textContent = "";
+      return;
+    }
+    var table = document.createElement("table");
+    root.appendChild(table);
+    return Promise.all(monitor_dict.service_list.map(function (service_dict) {
+      var href_html_part = (service_dict.interface_url ? " href=\"" + escapeHtml(service_dict.interface_url) + "\"" : ""),
+        title_html_part = (service_dict.title ? escapeHtml(service_dict.title) : "Untitled"),
+        row = htmlToElementList("<table><tbody><tr><td><a" + href_html_part + ">" + title_html_part + "</a></td><td>Loading status...</td><td><a" + href_html_part + "><div style=\"height: 10mm; width: 10mm; background-color: gray;\"></div></a></td></tr></tbody></table>");
+      table.appendChild(row[2]);
+      if (!service_dict.status_url) {
+        row[5].textContent = "No status";
+        return;
+      }
+      return loadJson(resolveUrl(monitor_url, service_dict.status_url)).then(function (status_dict) {
+        if (status_dict.description) {
+          row[2].title = status_dict.description;
+        }
+        if (status_dict.message) {
+          row[5].textContent = status_dict.message;
+        }
+        row[8].style.backgroundColor = status_dict.status === "OK" ? "green" : "red";
+      }).catch(function (reason) {
+        row[5].textContent = (reason && (reason.name + ": " + reason.message));
+        row[8].style.backgroundColor = "red";
+      });
+    }));
+  }
+
+  function loadAndRenderMonitorJson(root) {
+    root.textContent = "Loading monitor section...";
+    return loadJson("monitor.json").then(function (monitor_dict) {
+      monitor_json_list.push(monitor_dict);
+      root.innerHTML = "";
+      var loading = loadAndRenderMonitorSection(root, monitor_dict);
+      if (!monitor_dict.monitor_url_list) { return loading; }
+      return Promise.all([loading, Promise.all(monitor_dict.monitor_url_list.map(function (url) {
+        var div = htmlToElementList("<div>Loading monitor section...</div>")[0];
+        root.appendChild(div);
+        if (url[url.length - 1] !== "/") {
+          url += "/";
+        }
+        url = resolveUrl(url, "monitor.json");
+        return loadJson(url).catch(function (reason) {
+          div.textContent = (reason && (reason.name + ": " + reason.message));
+        }).then(function (monitor_dict) {
+          monitor_json_list.push(monitor_dict);
+          div.remove();
+          return loadAndRenderMonitorSection(root, monitor_dict, url);
+        });
+      }))]);
+    });
+  }
+
+  function bootstrap(root) {
+    var element_list = htmlToElementList([
+      "<header><a href=\"\" class=\"as-button\">Refresh</a></header>",
+      "<h1>KVM Monitoring interface</h1>",
+      "<h2>System health status</h2>",
+      "<p>This interface allow to see the status of several features, it may show problems and sometimes provides a way to fix them.</p>",
+      "<p>Red square means the feature has a problem, green square means it is ok.</p>",
+      "<p>You can click on a feature below to get more precise information.</p>"
+    ].join("\n")), div = document.createElement("div"), tmp;
+    [].forEach.call(element_list, function (element) {
+      root.appendChild(element);
+    });
+    root.appendChild(div);
+    /*global alert */
+    tmp = loadAndRenderMonitorJson(div);
+    tmp.catch(alert);
+    /*global console */
+    tmp.catch(console.error.bind(console));
+  }
+
+  /*global setTimeout */
+  setTimeout(function () {
+    /*global document */
+    bootstrap(document.body);
+  });
+}());