Display cluster status from endpoint

webui/assets/main.js

@@ -186,6 +186,11 @@ function setNav(e) {
   interface_el = document.getElementById('interface-' + name)
   interface_el.classList.add("interface-active")
 
+  // hack hack
+  if(name == "cluster") {
+    update_cluster_status()
+  }
+
   // toggle svgs
   // show all inactive images
   inactive_images = document.getElementsByClassName("nav-image")
@@ -216,6 +221,18 @@ function setNav(e) {
 }
 
 
+function update_cluster_status() {
+  var xhr = new XMLHttpRequest();
+  xhr.open('GET', '/status')
+  status_node = document.getElementById('status')
+  time_node = document.getElementById('status-time')
+  xhr.onload = function() {
+    status_formatted = JSON.stringify(JSON.parse(xhr.responseText), null, 4)
+    status_node.innerHTML = status_formatted
+  }
+  xhr.send(null)
+}
+
 const input = document.getElementById('query')
 const output = document.getElementById('outputs')
 const button = document.getElementById('query-btn')

webui/assets/style.css

@@ -150,7 +150,8 @@ em{
     margin-bottom: 30px;
 }
 .query,
-.output-container{
+.output-container,
+.status-container{
   width: 75%;
 }
 
@@ -206,7 +207,8 @@ em{
 
 .result-input,
 .result-output,
-.result-error{
+.result-error,
+.status{
   border-radius: 2px;
   background-color: #fafafa;
   border: solid 1.5px #e4eff4;
@@ -231,6 +233,9 @@ em{
   color: #fa3035;
 }
 
+.status{
+  white-space: pre;
+}
 
 .raw{
   height: 253px;
@@ -238,3 +243,10 @@ em{
   align-items: center;
   justify-content: center;
 }
+
+
+.string { color: green; }
+.number { color: darkorange; }
+.boolean { color: blue; }
+.null { color: magenta; }
+.key { color: red; }

webui/index.html

@@ -60,7 +60,15 @@
       </div>
 
       <div class="interface" id="interface-cluster">
-      cluster stats!
+        <div class="status-container">
+          <h2>Status</h2>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+          <em id="status-time"></em>
+          <div class="status" id="status">
+            <!-- status response -->
+          </div>
+          <div>
+        </div>
       </div>
 
       <div class="interface" id="interface-documentation">