Update output file to reduce the number of columns, add a popup for the jobs, fix the search and order tools
This commit is contained in:
parent
8e3796a69e
commit
ef4654adcf
2 changed files with 84 additions and 63 deletions
|
|
@ -3,14 +3,7 @@
|
|||
<title>Host list</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../vendor/datatables/media/css/jquery.dataTables.css">
|
||||
|
||||
<script type="text/javascript" language="javascript" src="vendor/jquery/dist/jquery.min.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="vendor/jquery-number/jquery.number.min.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="vendor/datatables/media/js/jquery.dataTables.min.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="vendor/datatables/media/js/dataTables.bootstrap.min.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="res/inittable.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="vendor/datatables/media/css/dataTables.bootstrap.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
|
@ -30,25 +23,23 @@
|
|||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<h2>Available minions</h2>
|
||||
<table id="hostlist" class="table table-striped table-bordered">
|
||||
<div class="table-responsive"><table id="hostlist" class="table table-striped table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Machine type</th>
|
||||
<th>OS</th>
|
||||
<th class="hidden-xs hidden-sm">OS</th>
|
||||
<th>Roles</th>
|
||||
<th>IP</th>
|
||||
<th>RAM (MB)</th>
|
||||
<th># CPUs</th>
|
||||
<th class="hidden-xs hidden-sm">RAM (MB)</th>
|
||||
<th>Salt</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Name</td>
|
||||
<td>Machine type</td>
|
||||
<td>OS</td>
|
||||
<td class="hidden-xs hidden-sm">OS</td>
|
||||
<td>Roles</td>
|
||||
<td>IP</td>
|
||||
<td>RAM (MB)</td>
|
||||
<td># CPUs</td>
|
||||
<td class="hidden-xs hidden-sm">RAM (MB)</td>
|
||||
<td>Salt</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -58,29 +49,28 @@
|
|||
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#{{ name.translate(None, '.') }}">
|
||||
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
|
||||
</button>
|
||||
<span class="glyphicon {% if data.virtual != "physical" %} glyphicon-cloud {% else %} glyphicon-hdd {% endif %}" aria-hidden="true"></span>
|
||||
{{ name }}
|
||||
</td>
|
||||
<td>{% if data.virtual != "physical" %} Virtual ({{ data.virtual }}) {% else %} Physical {% endif %}</td>
|
||||
<td>{{ data.lsb_distrib_description }}</td>
|
||||
<td class="hidden-xs hidden-sm" style="white-space: nowrap">{{ data.lsb_distrib_description }}</td>
|
||||
<td>{% for role in data.roles %} {{ role }} {% endfor %}</td>
|
||||
<td>{{ data.fqdn_ip }}</td>
|
||||
<td class="right number">{{ data.mem_total }}</td>
|
||||
<td class="right">{{ data.num_cpus }}</td>
|
||||
<td class="right number hidden-xs hidden-sm">{{ data.mem_total }}</td>
|
||||
<td>{{ data.saltversion }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td style="font-weight: bold;">Total:</th>
|
||||
<td class="hidden-xs hidden-sm" style="font-weight: bold;"></th>
|
||||
<td style="font-weight: bold;"></th>
|
||||
<td style="font-weight: bold;"></th>
|
||||
<td style="font-weight: bold;"></th>
|
||||
<td style="font-weight: bold;"></th>
|
||||
<td style="font-weight: bold;"></th>
|
||||
<td class="hidden-xs hidden-sm" style="font-weight: bold;"></th>
|
||||
<td style="font-weight: bold;"></th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</table></div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h2>Disconnected minions</h2>
|
||||
|
|
@ -121,32 +111,37 @@
|
|||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h2>Previous jobs</h2>
|
||||
<table id="joblist" class="table table-striped table-bordered">
|
||||
<div class="table-responsive"><table id="joblist" class="table table-striped table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Arguments</th>
|
||||
<th>Function</th>
|
||||
<th>StartTime</th>
|
||||
<th>Target</th>
|
||||
<th>Target type</th>
|
||||
<th>User</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Name</td>
|
||||
<td>Function</td>
|
||||
<td>StartTime</td>
|
||||
<td>Target</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for id, data in joblist|dictsort|reverse %}
|
||||
<tr class="info">
|
||||
<td>{{ id }}</td>
|
||||
<td>{{ data.Arguments }}</td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#{{ id.translate(None, '.') }}">
|
||||
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
|
||||
</button>
|
||||
{{ id }}
|
||||
</td>
|
||||
<td>{{ data.Function }}</td>
|
||||
<td>{{ data.StartTime }}</td>
|
||||
<td>{{ data.Target }}</td>
|
||||
<td>{{ data['Target-type'] }}</td>
|
||||
<td>{{ data.User }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</table></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -192,7 +187,35 @@
|
|||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{% for id, data in joblist.iteritems() %}
|
||||
<div class="modal" id="{{ id.translate(None, '.') }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<h1 class="modal-title" id="myModalLabel">{{ id }}</h1>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h2>Job information</h2>
|
||||
<ul>
|
||||
<li>Function: {{ data['Function'] }}</li>
|
||||
<li>Target: {{ data['Target'] }}</li>
|
||||
<li>User: {{ data['User'] }}</li>
|
||||
<li>StartTime: {{ data['StartTime'] }}</li>
|
||||
<li>Target-type: {{ data['Target-type'] }}</li>
|
||||
<li>Arguments: {{ data['Arguments'] }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<script type="text/javascript" language="javascript" src="vendor/jquery/dist/jquery.min.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="vendor/jquery-number/jquery.number.min.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="vendor/datatables/media/js/jquery.dataTables.min.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="vendor/datatables/media/js/dataTables.bootstrap.min.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="res/inittable.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,30 @@
|
|||
$(document).ready(function() {
|
||||
$('#hostlist thead td').each( function () {
|
||||
var title = $('#hostlist thead th').eq( $(this).index() ).text();
|
||||
$(this).html( '<input type="text" class="form-control" placeholder="Search '+title+'" />' );
|
||||
} );
|
||||
var addSearch = function(elemId) {
|
||||
$('#' + elemId + ' thead td').each( function () {
|
||||
var title = $('#' + elemId + ' thead th').eq( $(this).index() ).text();
|
||||
$(this).html( '<input type="text" class="form-control" placeholder="Search '+title+'" />' );
|
||||
});
|
||||
}
|
||||
var applySearch = function(obj) {
|
||||
obj.columns().eq( 0 ).each( function ( colIdx ) {
|
||||
$( 'input', obj.column( colIdx ).header() ).on( 'keyup change', function () {
|
||||
obj
|
||||
.column( colIdx )
|
||||
.search( this.value, true )
|
||||
.draw();
|
||||
} );
|
||||
});
|
||||
}
|
||||
|
||||
addSearch('hostlist');
|
||||
addSearch('joblist');
|
||||
|
||||
var jobTable = $('#joblist').DataTable({
|
||||
'paging': true,
|
||||
'info': false,
|
||||
'dom': 'tp',
|
||||
'pagingType': 'full'
|
||||
'pagingType': 'full',
|
||||
'ordering': false
|
||||
});
|
||||
|
||||
var table = $('#hostlist').DataTable({
|
||||
|
|
@ -33,14 +49,7 @@ $(document).ready(function() {
|
|||
|
||||
// mem
|
||||
memTotal = api
|
||||
.column( 5, { page: 'current'} )
|
||||
.data()
|
||||
.reduce( function (a, b) {
|
||||
return intVal(a) + intVal(b);
|
||||
}, 0 );
|
||||
// cpu
|
||||
cpuTotal = api
|
||||
.column( 6, { page: 'current'} )
|
||||
.column( 4, { page: 'current'} )
|
||||
.data()
|
||||
.reduce( function (a, b) {
|
||||
return intVal(a) + intVal(b);
|
||||
|
|
@ -51,25 +60,14 @@ $(document).ready(function() {
|
|||
$.number(hostsTotal, 0, '.', ' ')
|
||||
);
|
||||
|
||||
$( api.column( 5 ).footer() ).html(
|
||||
$( api.column( 4 ).footer() ).html(
|
||||
$.number(memTotal, 0, '.', ' ')
|
||||
);
|
||||
|
||||
$( api.column( 6 ).footer() ).html(
|
||||
cpuTotal
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// Apply the search
|
||||
table.columns().eq( 0 ).each( function ( colIdx ) {
|
||||
$( 'input', table.column( colIdx ).header() ).on( 'keyup change', function () {
|
||||
table
|
||||
.column( colIdx )
|
||||
.search( this.value, true )
|
||||
.draw();
|
||||
} );
|
||||
} );
|
||||
|
||||
applySearch(table);
|
||||
applySearch(jobTable);
|
||||
|
||||
$('td.number').number( true, 0, '.', ' ' );
|
||||
});
|
||||
|
|
|
|||
Reference in a new issue