mirror of
https://github.com/featurebasedb/featurebase.git
synced 2026-08-28 10:54:59 +00:00
Render status response as tables instead of JSON
This commit is contained in:
Alan Bernstein
parent
1315d560a0
commit
971cb6fc9e
3 changed files with 127 additions and 13 deletions
|
|
@ -258,13 +258,90 @@ function update_cluster_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
|
||||
var status = JSON.parse(xhr.responseText)
|
||||
render_status(status)
|
||||
time_node.innerHTML = new Date().today() + " " + new Date().timeNow()
|
||||
}
|
||||
xhr.send(null)
|
||||
}
|
||||
|
||||
function render_status(status) {
|
||||
// render node table
|
||||
var nodes_div = document.getElementById("status-nodes")
|
||||
while (nodes_div.firstChild) {
|
||||
nodes_div.removeChild(nodes_div.firstChild);
|
||||
}
|
||||
|
||||
var nodes = status["status"]["Nodes"]
|
||||
table = document.createElement("table")
|
||||
var caption = document.createElement("caption")
|
||||
caption.innerHTML = "(" + nodes.length + ")"
|
||||
table.appendChild(caption)
|
||||
|
||||
var header = document.createElement('tr')
|
||||
markup = `<th>Host</th>
|
||||
<th>State</th>`
|
||||
header.innerHTML = markup
|
||||
table.appendChild(header)
|
||||
for(var n=0; n<nodes.length; n++) {
|
||||
var row = document.createElement("tr")
|
||||
markup = `<td>${nodes[n]["Host"]}</td>
|
||||
<td>${nodes[n]["State"]}</td>`
|
||||
row.innerHTML = markup
|
||||
table.appendChild(row)
|
||||
}
|
||||
nodes_div.appendChild(table)
|
||||
|
||||
// render index tables
|
||||
var indexes_div = document.getElementById("status-indexes")
|
||||
while (indexes_div.firstChild) {
|
||||
indexes_div.removeChild(indexes_div.firstChild);
|
||||
}
|
||||
|
||||
var indexes = nodes[0]["Indexes"] // TODO currently comes from only node 0
|
||||
for(var n=0; n<indexes.length; n++) {
|
||||
table = document.createElement("table")
|
||||
var caption = document.createElement("caption")
|
||||
caption.innerHTML = indexes[n]["Name"] + " (Column Label: " + indexes[n]["Meta"]["ColumnLabel"] + ")"
|
||||
table.appendChild(caption)
|
||||
|
||||
var header = document.createElement('tr')
|
||||
markup = `<th>Name</th>
|
||||
<th>Row Label</th>
|
||||
<th>Cache Type</th>
|
||||
<th>Cache Size</th>`
|
||||
header.innerHTML = markup
|
||||
table.appendChild(header)
|
||||
|
||||
var frames = indexes[n]["Frames"]
|
||||
for(var m=0; m<frames.length; m++) {
|
||||
var row = document.createElement("tr")
|
||||
markup = `<td>${frames[m]["Name"]}</td>
|
||||
<td>${frames[m]["Meta"]["RowLabel"]}</td>
|
||||
<td>${frames[m]["Meta"]["CacheType"]}</td>
|
||||
<td>${frames[m]["Meta"]["CacheSize"]}</td>`
|
||||
row.innerHTML = markup
|
||||
table.appendChild(row)
|
||||
}
|
||||
indexes_div.appendChild(table)
|
||||
}
|
||||
|
||||
// render slice tables
|
||||
// TODO enable when Slices element is present in status response
|
||||
/*
|
||||
var slices_div = document.getElementById("status-slices")
|
||||
data = ""
|
||||
for(var n=0; n<nodes.length; n++) {
|
||||
var indexes = nodes[n]["Indexes"]
|
||||
for(var m=0; m<indexes.length; m++) {
|
||||
data += nodes[n]["Host"] + "/" + indexes[m]["Name"] + ": " + indexes[m]["Slices"] + "<br />"
|
||||
}
|
||||
}
|
||||
slices_div.innerHTML = data
|
||||
*/
|
||||
|
||||
}
|
||||
|
||||
function open_external_docs() {
|
||||
window.open("https://www.pilosa.com/docs");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -213,8 +213,7 @@ em{
|
|||
|
||||
.result-input,
|
||||
.result-output,
|
||||
.result-error,
|
||||
.status{
|
||||
.result-error{
|
||||
border-radius: 2px;
|
||||
background-color: #fafafa;
|
||||
border: solid 1.5px #e4eff4;
|
||||
|
|
@ -239,10 +238,6 @@ em{
|
|||
color: #fa3035;
|
||||
}
|
||||
|
||||
.status{
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.raw{
|
||||
height: 253px;
|
||||
display: flex;
|
||||
|
|
@ -250,6 +245,40 @@ em{
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
table{
|
||||
border: solid 0.5px #e0e0e0;
|
||||
width: 100%;
|
||||
margin-bottom: 30px;
|
||||
/*color:#3c5f8d;*/
|
||||
}
|
||||
caption{
|
||||
text-align:left;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 1.21;
|
||||
letter-spacing: 2px;
|
||||
text-align: left;
|
||||
}
|
||||
th{
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
line-height: 1.21;
|
||||
letter-spacing: 2px;
|
||||
color: #102445;
|
||||
text-transform: uppercase;
|
||||
text-align: left;
|
||||
padding: 21px 30px;
|
||||
background-color: white;
|
||||
}
|
||||
tr{
|
||||
border: solid 0.5px #e0e0e0;
|
||||
}
|
||||
tr:nth-child(odd) {
|
||||
background-color: #f2f7f9;
|
||||
}
|
||||
td{
|
||||
padding: 21px 30px;
|
||||
}
|
||||
|
||||
.string { color: green; }
|
||||
.number { color: darkorange; }
|
||||
|
|
|
|||
|
|
@ -60,13 +60,21 @@
|
|||
</div>
|
||||
|
||||
<div class="interface" id="interface-cluster">
|
||||
<em id="status-time"></em>
|
||||
<div class="status-container">
|
||||
<h2>Status</h2>
|
||||
<em id="status-time"></em>
|
||||
<div class="status" id="status">
|
||||
<!-- status response -->
|
||||
<h2>Nodes</h2>
|
||||
<div class="status-table-container" id="status-nodes">
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
<div class="status-container">
|
||||
<h2>Indexes</h2>
|
||||
<div class="status-table-container" id="status-indexes">
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-container">
|
||||
<h2>Slice Distribution</h2>
|
||||
<div class="status-table-container" id="status-slices">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue