Anna/rbmd_web_panel
Anna/rbmd_web_panel
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

upd

Browse Source
This commit is contained in:
Anna Sudnitsina 2018-03-21 12:56:03 +03:00
parent 1a42e41157
commit 8a3bbcdcd7
2 changed files with 229 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
static/rbmd/script.js
View File

@ -1,9 +1,10 @@
$(function() { $(function() {
$('#mountFormTrigger').click(function(event){ $('#mountFormTrigger').click(function(event){
var htmlSelect = ''; var htmlSelect = '';
a.quorum.forEach(function(item) {htmlSelect += "<option value=" + item.node + ">" + item.node + "</option>";}) a.quorum.forEach(function(item) {
htmlSelect += "<option value=" + item.node + ">" + item.node + "</option>";
})
$('#selectNode').html(htmlSelect); $('#selectNode').html(htmlSelect);
/* /*
$.ajax({ $.ajax({
url:"status", url:"status",
@ -16,32 +17,35 @@ $(function() {
}) })
*/ */
}) })
}); });
function resolve() { function resolve() {
$.ajax({ $.ajax({
url:"resolve", url:"resolve",
data:{"node": deadNode}, data:{"node": deadNode},
success:function(data){$('#details').css("display", "none");} success:function(data){
$('#details').css("display", "none");
}
}) })
} }
function unmount(a, b, c) { function unmount(a, b, c) {
var u = confirm(a + ": confirm unmount of " + b); var u = confirm(a + ": confirm unmount of " + b);
if (u == true) { if (u == true) {
console.log('1');
$.ajax({ $.ajax({
url:"unmount", url:"unmount",
data:{"node":a, "mountpoint":b, "block":c}, data:{"node":a, "mountpoint":b, "block":c},
success:function(data){console.log(data); success:function(data){
var res = JSON.parse(data); var res = JSON.parse(data);
message = "<h3>" + res["state"] + "</h3> <p>"+ res["message"] +"</p>"; message = "<h3>" + res["state"] + "</h3> <p>"+ res["message"] +"</p>";
$("#rspContainer").css("display", "block"); $("#rspContainer").css("display", "block");
$("#rsp").html(message) $("#rsp").html(message)
if (res["state"] == 'OK'){$("#rspContainer").css("background-color", "#4CAF50" );} if (res["state"] == 'OK'){
else {$("#rspContainer").css("background-color", "#f44336" )} $("#rspContainer").css("background-color", "#4CAF50" );
}
else {
$("#rspContainer").css("background-color", "#f44336" );
}
} }
}) })
} }
@ -66,8 +70,11 @@ $(function() {
w3DisplayData("id01", node2); w3DisplayData("id01", node2);
$('.tablink').css('display', 'block'); $('.tablink').css('display', 'block');
if (selected_node != undefined && selected_node != 'dead'){ if (selected_node != undefined && selected_node != 'dead'){
//a.quorum.forEach(function(item) {if (item.node == selected_node) { console.log(item.node)}}) //a.quorum.forEach(function(item) {if (item.node == selected_node) { console.log(item.node)}})
var selected_node_body = a.quorum.find(function(node) { return node.node == selected_node}); var selected_node_body = a.quorum.find(function(node) {
return node.node == selected_node
});
var t = new Date(selected_node_body["updated"] * 1000) var t = new Date(selected_node_body["updated"] * 1000)
var up_formatted = t.getFullYear() + "/" var up_formatted = t.getFullYear() + "/"
+ (t.getMonth() + 1) + "/" + (t.getMonth() + 1) + "/"
@ -83,9 +90,11 @@ $(function() {
var mnt_block = ""; var mnt_block = "";
for (i in selected_node_body.mounts) { for (i in selected_node_body.mounts) {
var mnt = selected_node_body.mounts[i]; var mnt = selected_node_body.mounts[i];
mnt_block += '<a href=\'javascript:void(0)\' onClick=\'unmount("' + selected_node + '", "' mnt_block += '<a href=\'javascript:void(0)\' onClick=\'unmount("'
+ selected_node + '", "'
+ selected_node_body.mounts[i].mountpoint + '", "' + selected_node_body.mounts[i].mountpoint + '", "'
+ selected_node_body.mounts[i].block + '")\' >unmount</a><br>Mountpoint: ' + selected_node_body.mounts[i].block
+ '")\' >unmount</a><br>Mountpoint: '
+ mnt.mountpoint + '<br>Mountopts: ' + mnt.mountpoint + '<br>Mountopts: '
+ mnt.mountopts + '<br>Fstype: ' + mnt.mountopts + '<br>Fstype: '
+ mnt.fstype + mnt.fstype
@ -94,16 +103,23 @@ $(function() {
+ '<br>Block: ' + mnt.block + '<br>'; + '<br>Block: ' + mnt.block + '<br>';
} }
$("#mon").html(mnt_block); $("#mon").html(mnt_block);
} else {
$("#mon").html("");
} }
else { $("#mon").html("")}
} }
if (selected_node =='dead') { if (selected_node =='dead') {
var t, up_formatted var t, up_formatted;
console.log(a.deadlyreason);
if (a.deadlyreason["updated"] != 0) { if (a.deadlyreason["updated"] != 0) {
t = new Date(a.deadlyreason["updated"] * 1000) t = new Date(a.deadlyreason["updated"] * 1000)
up_formatted = t.getFullYear() + "/" + (t.getMonth() + 1) + "/" + t.getDate() + " " + t.getHours() + ":" + t.getMinutes() + ":" + t.getSeconds(); up_formatted = t.getFullYear() + "/"
} else { up_formatted=0 } + (t.getMonth() + 1) + "/"
+ t.getDate() + " "
+ t.getHours() + ":"
+ t.getMinutes() + ":"
+ t.getSeconds();
} else {
up_formatted=0;
}
deadNode = a.deadlyreason["node"]; deadNode = a.deadlyreason["node"];
$("#name").html(a.deadlyreason["node"]); $("#name").html(a.deadlyreason["node"]);
$("#ipv4").html(a.deadlyreason["ip"]["v4"].join("<br>")); $("#ipv4").html(a.deadlyreason["ip"]["v4"].join("<br>"));
@ -113,13 +129,18 @@ $(function() {
var mnt_block = ""; var mnt_block = "";
for (i in a.deadlyreason.mounts) { for (i in a.deadlyreason.mounts) {
var mnt = a.deadlyreason.mounts[i]; var mnt = a.deadlyreason.mounts[i];
mnt_block += mnt.mountpoint + "<br>" + mnt.mountopts + "<br>" + mnt.fstype + "<br>" + mnt.pool + "<br>" + mnt.image + "<br><br>"; mnt_block += mnt.mountpoint + "<br>"
+ mnt.mountopts + "<br>"
+ mnt.fstype + "<br>"
+ mnt.pool + "<br>"
+ mnt.image + "<br><br>";
} }
$("#mon").html(mnt_block); $("#mon").html(mnt_block);
} else { $("#mon").html("") } } else {
$("#mon").html("");
}
} }
$("#leader").html(a.leader); $("#leader").html(a.leader);
} }
function openNode(evt, nodeName) { function openNode(evt, nodeName) {
@ -136,5 +157,7 @@ function openNode(evt, nodeName) {
$('#details').css("display", "none"); $('#details').css("display", "none");
$('#showDeadlyDetails').text('Show details'); $('#showDeadlyDetails').text('Show details');
} }
} else {$('#details').css("border", "").css("display", "block"); displayData(a) } } else {
$('#details').css("border", "").css("display", "block"); displayData(a);
}
} }

47
templates/rbmd/index.html
View File

@ -10,42 +10,46 @@
</head> </head>
<body> <body>
<header class = "" style="padding:1% 16px;"> <header class = "" style="padding:1% 16px;">
<a onclick="if (a.health != 'deadly.') {$('#mount').css('display', 'block')}" style="font-size:1em" class="w3-btn" id="mountFormTrigger">Mount <i class="fa fa-hdd-o"></i></a> <a onclick="if (a.health != 'deadly.') {$('#mount').css('display', 'block')}" style="font-size:1em" class="w3-btn" id="mountFormTrigger">
Mount <i class="fa fa-hdd-o"></i>
</a>
<a href='/'><img src="{{ static_url("images-logo.png") }}" class="w3-right w3-hover-opacity" height="33.82em" ></a> <a href='/'><img src="{{ static_url("images-logo.png") }}" class="w3-right w3-hover-opacity" height="33.82em" ></a>
</header> </header>
<div class="w3-container"> <div class="w3-container">
<div class="w3-row"> <div class="w3-row">
<div class="sidenav w3-container w3-light-grey w3-col m3" id="id01"> <div class="sidenav w3-container w3-light-grey w3-col m3" id="id01">
<h4> Leader: </h4> <span id='leader' class="tablink"></span> <h4> Leader: </h4> <span id='leader' class="tablink"></span>
<h4>Nodes: </h4> <h4>Nodes: </h4>
<a w3-repeat="node in quorum" href="javascript:void(0)" class="tablink" onclick="openNode(event, '{{!node}}')" style='display:none'>{{!node}}</a> <a w3-repeat="node in quorum" href="javascript:void(0)" class="tablink" onclick="openNode(event, '{{!node}}')" style='display:none'>
{{!node}}
</a>
<h4>Metrics: </h4> <h4>Metrics: </h4>
{% for k, v in metrics.items() %} {{k}} {{v}}<br> {% end %} {% for k, v in metrics.items() %} {{k}} {{v}}<br>
{% end %}
</div> </div>
<div class="w3-col m9" > <div class="w3-col m9" >
<div class="w3-container" style="height:50px; position:relative" id="statusContainer"> <div class="w3-container" style="height:50px; position:relative" id="statusContainer">
<div class="w3-padding w3-display-left" id="status">Status... </div> <div class="w3-padding w3-display-left" id="status">Status... </div>
<a href="javascript:void(0)" class="w3-right" id="showDeadlyDetails" onClick="openNode(event, 'dead')" style="display: none; padding:15px;">Show details</a> <a href="javascript:void(0)" class="w3-right" id="showDeadlyDetails" onClick="openNode(event, 'dead')" style="display: none; padding:15px;">
Show details
</a>
<a href="javascript:void(0)" class="w3-right" id="resolve" onClick="resolve()" style="display: none; padding:15px;">
Resolve
</a>
</div> </div>
<div id="rspContainer" class="w3-container w3-animate-opacity" style="display: none"> <div id="rspContainer" class="w3-container w3-animate-opacity" style="display: none">
<span onclick="this.parentElement.style.display='none'" class="w3-closebtn">&times;</span> <span onclick="this.parentElement.style.display='none'" class="w3-closebtn">&times;</span>
<div id="rsp"> <div id="rsp"></div>
</div> </div>
</div>
<div id = "details" class="w3-container" style="display:none;"> <div id = "details" class="w3-container" style="display:none;">
<table class='w3-table w3-bordered' id="id02"> <table class='w3-table w3-bordered' id="id02">
<tr><td> Node:</td> <td><span id='name'></span></td></tr> <tr><td> Node:</td> <td><span id='name'></span></td></tr>
<tr><td> IPv4:</td> <td><span id='ipv4'></span></td></tr> <tr><td> IPv4:</td> <td><span id='ipv4'></span></td></tr>
<tr><td> IPv6:</td> <td><span id='ipv6'></span></td></tr> <tr><td> IPv6:</td> <td><span id='ipv6'></span></td></tr>
<tr><td> Updated:</td><td> <span id='updated'></span></td></tr> <tr><td> Updated:</td><td> <span id='updated'></span></td></tr>
<tr><td> Mounts:</td> <td id="mon"> <tr><td> Mounts:</td><td id="mon"></td></tr>
</td> </tr>
</table> </table>
<a href="javascript:void(0)" class="w3-right" id="resolve" onClick="resolve()" style="display: none; padding:15px;">Resolve</a>
</div> </div>
</div> </div>
</div> </div>
@ -65,12 +69,11 @@
<label class="w3-label w3-text-black">fstype: <input name="fstype" class="w3-input" type="text"> </label><br> <label class="w3-label w3-text-black">fstype: <input name="fstype" class="w3-input" type="text"> </label><br>
<button class="w3-btn w3-black" type="submit">Mount</button> <button class="w3-btn w3-black" type="submit">Mount</button>
</form> </form>
<footer class="w3-container w3-light-grey"> <footer class="w3-container w3-light-grey"></footer>
</footer>
</div> </div>
</div> </div>
</div> </div>
</body>
<script> <script>
var ws = new WebSocket('{{escape(ws)}}'); var ws = new WebSocket('{{escape(ws)}}');
var a, selected_node, deadNode; var a, selected_node, deadNode;
@ -93,12 +96,14 @@
message = "<h3>" + res["state"] + "</h3> <p>"+ res["message"] +"</p>"; message = "<h3>" + res["state"] + "</h3> <p>"+ res["message"] +"</p>";
$("#rspContainer").css("display", "block"); $("#rspContainer").css("display", "block");
$("#rsp").html(message) $("#rsp").html(message)
if (res["state"] == 'OK'){$("#rspContainer").css("background-color", "#4CAF50" );} if (res["state"] == 'OK'){
else {$("#rspContainer").css("background-color", "#f44336" )} $("#rspContainer").css("background-color", "#4CAF50" );
}
else {
$("#rspContainer").css("background-color", "#f44336" )
}
} }
}) })
}) })
</script> </script>
</body></html> </html>