This commit is contained in:
Anna Sudnitsina 2017-08-31 18:10:08 +03:00
parent 98c174de56
commit 2a8e165efd
5 changed files with 166 additions and 119 deletions

View File

@ -1,7 +1,6 @@
{
"mount":"http://127.0.0.1:9076/mount",
"api": "http://127.0.0.1:9076/v1/",
"api": "http://10.8.0.34:9076/v1/",
"ws": "ws://php.difrex.ru/ws"
}

View File

@ -1,115 +1,91 @@
{% 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>
<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">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://www.w3schools.com/lib/w3data.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>
<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 href='/'><img src={% static 'images-logo.png' %} class="w3-right w3-hover-opacity" height="33.82em" ></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">&times;</span>
<div class="w3-container">
<div class="w3-row">
<div class="sidenav w3-container w3-light-grey w3-col m3" id="id01">
<h4> Leader: </h4> <span id='leader' class="tablink"></span>
<h4>Nodes: </h4>
<a w3-repeat="node in quorum" href="javascript:void(0)" class="tablink" onclick="openNode(event, '{{node}}')" style='display:none'>{{node}}</a>
<h4>Metrics: </h4>
{% for k,v in metrics.items %} {{k}} {{v}}<br> {% endfor %}
</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>
<a href="javascript:void(0)" class="w3-right" id="showDeadlyDetails" onClick="openNode(event, 'dead')" style="display: none; padding:15px;">Show details</a>
</div>
<div id="rspContainer" class="w3-container w3-animate-opacity" style="display:none">
<span onclick="this.parentElement.style.display='none'" class="w3-closebtn">&times;</span>
<div id="rsp">
</div>
</div>
<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>
<a href="javascript:void(0)" class="w3-right" id="resolve" onClick="resolve()" style="display: none; padding:15px;">Resolve</a>
</div>
</div>
</div>
<div id="mount" class="w3-modal">
<div class="w3-modal-content">
<header class="w3-container w3-light-grey">
<span onclick="document.getElementById('mount').style.display='none'" class="w3-closebtn">&times;</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>
</header>
<form method="post" action="/" role="form" class="w3-container form">
<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">&times;</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 %}
<footer class="w3-container w3-light-grey">
</footer>
</div>
</div>
<script>
var res = <?=$response?>;
message = "<h3>" + res["state"] + "</h3> <p>"+ res["message"] +"</p>";
$("#rsp").html(message)
</script>
console.log('{{status|escapejs}}')
var res = '{{status|escapejs}}';
message = "<h3>" + res["state"] + "</h3> <p>"+ res["message"] +"</p>";
$("#rspContainer").css("display", "block");
$("#rsp").html(message)
if (res["state"] == 'OK'){$("#rspContainer").css("background-color", "#4CAF50" );}
else {$("#rspContainer").css("background-color", "#f44336" )}
</script>
{% endif %}
</body>
<script>
var ws = new WebSocket("{{ws}}");
var a, n;
<script>
var s = '{{ws|escapejs}}';
var ws = new WebSocket(s);
var a, n, deadNode;
ws.onopen = function() {ws.send(""); };
ws.onmessage = function (evt) {
a = JSON.parse(evt.data);
//document.getElementById("test").innerHTML = evt.data;
displayData(a);
};
</script>
</script>
</body></html>

49
rbmd/test.data Normal file
View File

@ -0,0 +1,49 @@
{
"status" :
{
"quorum": {
"node.example.com": {
"node": "node.example.com",
"ip": {
"v4": [
"10.0.3.1"
],
"v6": [
"fe80::f869:d0ff:fea3:3c0a"
]
},
"updated": 1483428452,
"mounts": null
}
},
"health": "alive.",
"leader": "node.example.com"
},
"node" :
{
"node": "difrex-mac.wargaming.net",
"ip": {
"v4": [
"169.254.156.1"
],
"v6": [
"fe80::108d:fcff:fe77:3df6"
]
},
"updated": 1483095493,
"mounts": null
},
"health": ".alive",
"mount" :
{
"state": "OK",
"message": "OK"
},
"metrics": {
"goroutines": 9,
"nodes": 2,
"mountstotal": 0,
"cgocall": 1
}
}

View File

@ -21,4 +21,10 @@ urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^$', views.panel),
url(r'^status$', views.get_status),
url(r'^node$', views.node),
url(r'^health$', views.health),
url(r'^mount$', views.mount),
url(r'^unmount$', views.get_status),
url(r'^resolve$', views.resolve),
url(r'^metrics$', views.get_metrics),
]

View File

@ -6,25 +6,18 @@ from django.shortcuts import render
import json
import requests
def get_metrics():
def get_status():
with open('conf.json') as conf:
api = json.load(conf)["api"]
print api
#try: res = requests.get(api + metrics)
return api
status = json.load(conf)["api"] + '/status'
try: res = requests.get(status)
except: res = 'connection can\'t be established'
return res.content
def panel(request):
with open('conf.json') as conf:
ws = json.load(conf)["ws"]
metrics = get_metrics()
return render(request, 'rbmd/index.html', {'ws' : ws, 'metrics' : metrics})
def node():
pass
def get_status(request):
with open('conf.json') as conf:
status = json.load(conf)["status"]
#try: res = requests.get(status)
return HttpResponse(status)
def health():
pass
def mount():
pass
@ -32,3 +25,27 @@ def mount():
def unmount():
pass
def resolve():
pass
def get_metrics():
#with open('conf.json') as conf:
# api = json.load(conf)["api"]
#try: res = requests.get(api + metrics)
#return api
with open('conf.json') as conf:
metrics = json.load(conf)["api"] + '/metrics'
res = requests.get(metrics)
print res
#except: res = 'connection can\'t be established'
return res.content
def panel(request):
with open('conf.json') as conf:
ws = json.load(conf)["ws"]
metrics = json.loads(get_metrics())
status = get_status()
return render(request, 'rbmd/index.html', {'ws' : ws, 'metrics' : metrics, 'status' : status})