220 lines
8.9 KiB
HTML
220 lines
8.9 KiB
HTML
{% extends 'base_AdminLTE.html' %}
|
|
|
|
{% block title %}Docklet | Hosts{% endblock %}
|
|
|
|
{% block panel_title %}Hosts Info{% endblock %}
|
|
|
|
{% block panel_list %}
|
|
<ol class="breadcrumb">
|
|
<li>
|
|
<a href="/dashboard/"><i class="fa fa-dashboard"></i>Home</a>
|
|
</li>
|
|
<li class="active">
|
|
<strong>HostsInfo</strong>
|
|
</li>
|
|
</ol>
|
|
{% endblock %}
|
|
|
|
{% block css_src %}
|
|
<link href="//cdn.bootcss.com/datatables/1.10.11/css/dataTables.bootstrap.min.css" rel="stylesheet">
|
|
<link href="//cdn.bootcss.com/datatables/1.10.11/css/jquery.dataTables_themeroller.css" rel="stylesheet">
|
|
<link href="/static/dist/css/modalconfig.css" rel="stylesheet">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<ul class="nav nav-tabs" role="tablist" id="myTabs">
|
|
{% for master in allmachines %}
|
|
{% if loop.index == 1%}
|
|
<li role="presentation" class="active"><a href="#{{master.split("@")[1]}}" data-toggle="tab" aria-controls="{{master.split("@")[1]}}">{{master.split("@")[1]}}</a></li>
|
|
{% else %}
|
|
<li role="presentation"><a href="#{{master.split("@")[1]}}" data-toggle="tab" aria-controls="{{master.split("@")[1]}}">{{master.split("@")[1]}}</a></li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</ul>
|
|
<div id="myTabContent" class="tab-content">
|
|
{% for master in allmachines %}
|
|
{% if loop.index == 1 %}
|
|
<div role="tabpanel" class="tab-pane active" aria-labelledby="{{master.split("@")[1]}}" id="{{master.split("@")[1]}}">
|
|
{% else %}
|
|
<div role="tabpanel" class="tab-pane" aria-labelledby="{{master.split("@")[1]}}" id="{{master.split("@")[1]}}">
|
|
{% endif %}
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="box box-info">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">{{master.split("@")[1]}}</h3>
|
|
|
|
<div class="box-tools pull-right">
|
|
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="box-body table-responsive">
|
|
<p>
|
|
<a href="/cloud/{{master.split("@")[0]}}/node/add/"><button type="button" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i>Add Host</button></a>
|
|
</p>
|
|
<table class="table table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>NO</th>
|
|
<th>IP Address</th>
|
|
<th>Status</th>
|
|
<th>Nodes running</th>
|
|
<th>Cpu used</th>
|
|
<th>Mem used</th>
|
|
<th>Disk used</th>
|
|
<th>Summary</th>
|
|
<th>Operation</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for phym in allmachines[master] %}
|
|
<tr>
|
|
<td>{{ loop.index }}</td>
|
|
<td>{{ phym['ip'] }}</td>
|
|
{% if phym['status'] == 'STOPPED' %}
|
|
<td><div id='{{master.split("@")[1]}}_{{ loop.index }}_status' class="label label-danger">Stopped</div></td>
|
|
{% else %}
|
|
<td><div id='{{master.split("@")[1]}}_{{ loop.index }}_status' class="label label-primary">Running</div></td>
|
|
{% endif %}
|
|
<td>
|
|
<label id='{{master.split("@")[1]}}_{{ loop.index }}_conrunning'>{{ phym['containers']['running'] }}</label> /
|
|
<a href='/hosts/{{master.split("@")[0]}}/{{ phym['ip'] }}/containers/' id='{{master.split("@")[1]}}_{{ loop.index }}_contotal' >{{ phym['containers']['total'] }}</a>
|
|
</td>
|
|
<td id='{{master.split("@")[1]}}_{{ loop.index }}_cpu'>--</td>
|
|
<td id='{{master.split("@")[1]}}_{{ loop.index }}_mem'>--</td>
|
|
<td id='{{master.split("@")[1]}}_{{ loop.index }}_disk'>--</td>
|
|
<td><a class="btn btn-info btn-xs" href='/hosts/{{master.split("@")[0]}}/{{ phym['ip'] }}/'>Realtime</a></td>
|
|
<td><button class="btn btn-xs btn-default">Delete</button>
|
|
<button class="btn btn-xs btn-danger" data-toggle="modal" data-target="#Migrate_{{loop.index}}_{{master.split("@")[1]}}">Migrate</button>
|
|
<div class="modal inmodal" id="Migrate_{{loop.index}}_{{master.split("@")[1]}}" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content animated fadeIn">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
|
<i class="fa fa-plus modal-icon"></i>
|
|
<h4 class="modal-title">Migrate Container from {{phym['ip']}} to Another Hosts [dangerous!!!]</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form action="/hosts/{{master.split("@")[0]}}/migrate/{{ phym['ip'] }}/" method="POST" id="MigrateForm">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|
<table class="table table-striped table-bordered table-hover table-image">
|
|
<thead>
|
|
<tr>
|
|
<th>HostIp</th>
|
|
<th>Nodes</th>
|
|
<th>choose</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for tphym in allmachines[master] %}
|
|
{% if not phym == tphym %}
|
|
<tr>
|
|
<td>{{ tphym['ip'] }}</td>
|
|
<td>{{ tphym['containers']['running']}} / {{ tphym['containers']['total'] }}</td>
|
|
<td><input type="checkbox" name="target" value="{{tphym['ip']}}"></td>
|
|
</tr>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% endblock %}
|
|
|
|
{% block script_src %}
|
|
<script type='text/javascript'>
|
|
function update(url,index)
|
|
{
|
|
|
|
var MB = 1024;
|
|
$.post(url+"/status/",{},function(data){
|
|
console.log(data);
|
|
var status = data.monitor.status;
|
|
if(status == 'RUNNING')
|
|
{
|
|
var tmp = $("#"+index+"_status");
|
|
tmp.removeClass();
|
|
tmp.addClass("label label-primary");
|
|
tmp.html("Running");
|
|
}
|
|
else if(status == 'STOPPED')
|
|
{
|
|
var tmp = $("#"+index+"_status");
|
|
tmp.removeClass();
|
|
tmp.addClass("label label-danger");
|
|
tmp.html("Stopped");
|
|
}
|
|
|
|
$.post(url+"/containers/",{},function(data){
|
|
var containers = data.monitor.containers;
|
|
$("#"+index+"_contotal").html(containers.total);
|
|
$("#"+index+"_conrunning").html(containers.running);
|
|
},"json");
|
|
|
|
if(status == 'STOPPED')
|
|
{
|
|
$("#"+index+"_cpu").html('--');
|
|
$("#"+index+"_mem").html('--');
|
|
$("#"+index+"_disk").html('--');
|
|
return;
|
|
}
|
|
|
|
$.post(url+"/cpuinfo/",{},function(data){
|
|
var idle = data.monitor.cpuinfo.idle;
|
|
var usedp = (100 - idle).toFixed(2);
|
|
$("#"+index+"_cpu").html(String(usedp)+"%");
|
|
},"json");
|
|
|
|
$.post(url+"/meminfo/",{},function(data){
|
|
var used = data.monitor.meminfo.used;
|
|
var total = data.monitor.meminfo.total;
|
|
var usedp = String(((used/total)*100).toFixed(2))+"%";
|
|
$("#"+index+"_mem").html(usedp);
|
|
},"json");
|
|
|
|
$.post(url+"/diskinfo/",{},function(data){
|
|
var val = data.monitor.diskinfo;
|
|
var usedp = val[0].percent;
|
|
$("#"+index+"_disk").html(String(usedp)+"%");
|
|
},"json");
|
|
},"json");
|
|
}
|
|
|
|
function updateAll()
|
|
{
|
|
var host = window.location.host;
|
|
{% for master in allmachines %}
|
|
{% for phym in allmachines[master] %}
|
|
url = "//" + host + "/monitor/" + '{{master.split("@")[0]}}' + "/hosts/" + '{{phym["ip"]}}';
|
|
// url = url0 + '{{ phym['ip'] }}';
|
|
update(url,'{{master.split("@")[1]}}_{{ loop.index }}');
|
|
{% endfor %}
|
|
{% endfor %}
|
|
}
|
|
setInterval(updateAll,5000);
|
|
|
|
</script>
|
|
{% endblock %}
|