docklet/web/templates/monitor/hostsRealtime.html

290 lines
11 KiB
HTML
Raw Normal View History

{% extends 'base_AdminLTE.html' %}
{% block title %}Docklet | Hosts{% endblock %}
{% block panel_title %}Summary for <div id='com_ip'>{{ com_ip }}</div>{% endblock %}
{% block panel_list %}
<ol class="breadcrumb">
<li>
<a href="/dashboard/"><i class="fa fa-dashboard"></i>Home</a>
</li>
<li>
<a href='/hosts/'>Hosts</a>
</li>
<li class='active'>
<strong>Summary</strong>
</li>
</ol>
{% endblock %}
{% block css_src %}
<link href="/static/dist/css/flotconfig.css" rel="stylesheet">
{% endblock %}
{% block content %}
<div class="row">
<div class="col-md-12">
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">CPU info</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">
<table class="table table-bordered">
<thead>
<tr>
<th>Processor ID</th>
<th>Model name</th>
<th>physical id</th>
<th>core id</th>
<th>cpu MHz</th>
<th>cache size</th>
</tr>
</thead>
<tbody>
{% for processor in processors %}
<tr>
<th>{{ processor['processor'] }}</th>
<td>{{ processor['model name']}}</td>
<td>{{ processor['physical id']}}</td>
<td>{{ processor['core id']}}</td>
<td>{{ processor['cpu MHz']}}</td>
<td>{{ processor['cache size']}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">OS info</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">
<table class="table table-bordered">
<tbody>
<tr>
<th>OS name</th>
<td>{{ OSinfo['platform']}}</td>
</tr>
<tr>
<th>OS node name</th>
<td>{{ OSinfo['node']}}</td>
</tr>
<tr>
<th>OS kernel release</th>
<td>{{ OSinfo['release']}}</td>
</tr>
<tr>
<th>OS kernel version</th>
<td>{{ OSinfo['version']}}</td>
</tr>
<tr>
<th>OS kernel machine</th>
<td>{{ OSinfo['machine']}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">Cpu and Memory Status</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">
<table class="table table-bordered">
<thead>
<tr>
<th colspan='4'>Cpu(%)</th>
<th colspan='3'>Memory(MB)</th>
</tr>
<tr>
<th>user</th>
<th>system</th>
<th>iowait</th>
<th>idle</th>
<th>used</th>
<th>free</th>
<th>total</th>
</tr>
</thead>
<tbody>
<tr>
<td id='cpu_user'>--</td>
<td id='cpu_system'>--</td>
<td id='cpu_iowait'>--</td>
<td id='cpu_idle'>--</td>
<td id='mem_used'>--</td>
<td id='mem_free'>--</td>
<td id='mem_total'>--</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">Disk Status</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">
<table class="table table-bordered">
<thead>
<tr>
<th colspan='5'>Disk info</th>
</tr>
<tr>
<th>device</th>
<th>used(MB)</th>
<th>free(MB)</th>
<th>total(MB)</th>
<th>used percent(%)</th>
</tr>
</thead>
<tbody>
{% for diskinfo in diskinfos %}
<tr>
<td id='disk_{{ loop.index }}_device'>--</td>
<td id='disk_{{ loop.index }}_used'>--</td>
<td id='disk_{{ loop.index }}_free'>--</td>
<td id='disk_{{ loop.index }}_total'>--</td>
<td id='disk_{{ loop.index }}_usedp'>--</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">Memory Used(%):</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">
<div class="flot-chart">
<div class="flot-chart-content" id="mem-chart"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">CPU Used(%):</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">
<div class="flot-chart">
<div class="flot-chart-content" id="cpu-chart"></div>
</div>
</div>
</div>
</div>
</div>
<!--<div class="row">
<div class="col-lg-6">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Disk Used(%):</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="#">Config option 1</a>
</li>
<li><a href="#">Config option 2</a>
</li>
</ul>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<div class="flot-chart">
<div class="flot-chart-content" id="disk-chart"></div>
</div>
</div>
</div>
</div>
</div>-->
{% endblock %}
{% block script_src %}
<!-- Flot -->
<script src="//cdn.bootcss.com/flot.tooltip/0.8.6/jquery.flot.tooltip.min.js"></script>
<script src="//cdn.bootcss.com/flot/0.8.3/jquery.flot.js"></script>
<script src="//cdn.bootcss.com/flot/0.8.3/jquery.flot.resize.js"></script>
<script src="//cdn.bootcss.com/flot/0.8.3/jquery.flot.pie.min.js"></script>
<script src="//cdn.bootcss.com/flot/0.8.3/jquery.flot.time.min.js"></script>
<!-- Flot demo data -->
<script src="/static/js/plot_monitorReal.js"></script>
{% endblock %}