116 lines
4.6 KiB
HTML
116 lines
4.6 KiB
HTML
{% load staticfiles %}
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>RBMD</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <link rel="stylesheet" href="style.css">
|
|
<script src="http://www.w3schools.com/lib/w3data.js"></script>
|
|
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
|
|
<script src={% static "script.js" %}></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<style>
|
|
@media screen and (max-width: 600px){
|
|
.sidenav {
|
|
height:auto;
|
|
}
|
|
}
|
|
.sidenav {height:90%;}
|
|
#status {color: #fff;}
|
|
header.w3-panel {height: 10%}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class = "w3-panel">
|
|
<a onclick="$('#mount').css('display', 'block')" class="w3-btn w3-xlarge " id="mountFormTrigger">Mount <i class="fa fa-thumbs-up"></i></a>
|
|
<a href='/'><img src={% static 'images-logo.png' %} class="w3-right w3-hover-opacity" width='20%' ></a>
|
|
</header>
|
|
|
|
<div id="mount" class="w3-modal">
|
|
<div class="w3-modal-content">
|
|
<header class="w3-container w3-light-grey">
|
|
<span onclick="$('#mount').css('display', 'none')" class="w3-closebtn">×</span>
|
|
<h2>Mount</h2>
|
|
</header>
|
|
<form method="post" action="" role="form" class="w3-container form" > {% csrf_token %}
|
|
<label class="w3-label w3-text-black">Node: <select name="node" class="w3-select" id='selectNode'></select> </label><br>
|
|
<!--label class="w3-label w3-text-black">Node: <input name="node" class="w3-input" type="text" required> </label><br-->
|
|
<label class="w3-label w3-text-black">Pool: <input name="pool" class="w3-input" type="text"> </label><br>
|
|
<label class="w3-label w3-text-black">Image: <input name="image" class="w3-input" type="text"> </label><br>
|
|
<label class="w3-label w3-text-black">mountpoint: <input name="mountpoint" class="w3-input" type="text"> </label><br>
|
|
<label class="w3-label w3-text-black">mountopts: <input name="mountopts" 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>
|
|
</form>
|
|
<footer class="w3-container w3-light-grey">
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w3-container">
|
|
<div class="w3-row">
|
|
<div class="sidenav w3-light-grey w3-col m3" id="id01">
|
|
<div class="w3-container">
|
|
<h4> Leader: </h4> <span id='leader' class="tablink"></span>
|
|
<h4>Nodes: </h4>
|
|
{% for node in nodes %}
|
|
<a href="javascript:void(0)" class="tablink" onclick="openNode(event, '{{node}}')" style='display:none'>{{node}}</a>
|
|
{% endfor %}
|
|
<h4>Metrics: </h4>
|
|
{{ metrics }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w3-col m9" >
|
|
<div class="w3-container" style="height:50px; position:relative" id="statusContainer">
|
|
<div class="w3-padding w3-display-left" id="status">Status... </div>
|
|
<button class="w3-display-right w3-btn" id="showDeadlyDetails" onClick="openNode(event, 'dead')" style="display: none">Show details</button>
|
|
</div>
|
|
|
|
|
|
{% if node %}
|
|
<div class="w3-container w3-red w3-animate-opacity">
|
|
<span onclick="this.parentElement.style.display='none'" class="w3-closebtn">×</span>
|
|
<div id="rsp">
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<div id = "details" class="w3-container" style="display:none;">
|
|
<table class='w3-table w3-bordered' id="id02">
|
|
<tr><td> Node:</td> <td> <span id='name'></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> Updated:</td> <td> <span id='updated'></span></td> </tr>
|
|
<tr><td>
|
|
Mounts:</td> <td id="mon">
|
|
</td> </tr>
|
|
</table>
|
|
</div>
|
|
<div id='test' class="w3-col" style="height: 50px"></div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
{% if node %}
|
|
<script>
|
|
var res = <?=$response?>;
|
|
message = "<h3>" + res["state"] + "</h3> <p>"+ res["message"] +"</p>";
|
|
$("#rsp").html(message)
|
|
</script>
|
|
|
|
{% endif %}
|
|
|
|
</body>
|
|
<script>
|
|
var ws = new WebSocket("{{ws}}");
|
|
var a, n;
|
|
ws.onopen = function() {ws.send(""); };
|
|
ws.onmessage = function (evt) {
|
|
a = JSON.parse(evt.data);
|
|
//document.getElementById("test").innerHTML = evt.data;
|
|
displayData(a);
|
|
|
|
};
|
|
</script>
|