tschwery/salt-inventory
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update output file to reduce the number of columns, add a popup for the jobs, fix the search and order tools

Browse source
This commit is contained in:
Thomas Schwery 2015-11-07 13:55:05 +01:00
parent 8e3796a69e
commit ef4654adcf
2 changed files with 84 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
templates/hostlist_template.html
View file

@ -3,14 +3,7 @@
<title>Host list</title> <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/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../vendor/datatables/media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="vendor/datatables/media/css/dataTables.bootstrap.min.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>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
@ -30,25 +23,23 @@
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-body"> <div class="panel-body">
<h2>Available minions</h2> <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> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Machine type</th> <th class="hidden-xs hidden-sm">OS</th>
<th>OS</th>
<th>Roles</th> <th>Roles</th>
<th>IP</th> <th>IP</th>
<th>RAM (MB)</th> <th class="hidden-xs hidden-sm">RAM (MB)</th>
<th># CPUs</th> <th>Salt</th>
</tr> </tr>
<tr> <tr>
<td>Name</td> <td>Name</td>
<td>Machine type</td> <td class="hidden-xs hidden-sm">OS</td>
<td>OS</td>
<td>Roles</td> <td>Roles</td>
<td>IP</td> <td>IP</td>
<td>RAM (MB)</td> <td class="hidden-xs hidden-sm">RAM (MB)</td>
<td># CPUs</td> <td>Salt</td>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -58,29 +49,28 @@
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#{{ name.translate(None, '.') }}"> <button type="button" class="btn btn-info" data-toggle="modal" data-target="#{{ name.translate(None, '.') }}">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span> <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button> </button>
<span class="glyphicon {% if data.virtual != "physical" %} glyphicon-cloud {% else %} glyphicon-hdd {% endif %}" aria-hidden="true"></span>
{{ name }} {{ name }}
</td> </td>
<td>{% if data.virtual != "physical" %} Virtual ({{ data.virtual }}) {% else %} Physical {% endif %}</td> <td class="hidden-xs hidden-sm" style="white-space: nowrap">{{ data.lsb_distrib_description }}</td>
<td>{{ data.lsb_distrib_description }}</td>
<td>{% for role in data.roles %} {{ role }} {% endfor %}</td> <td>{% for role in data.roles %} {{ role }} {% endfor %}</td>
<td>{{ data.fqdn_ip }}</td> <td>{{ data.fqdn_ip }}</td>
<td class="right number">{{ data.mem_total }}</td> <td class="right number hidden-xs hidden-sm">{{ data.mem_total }}</td>
<td class="right">{{ data.num_cpus }}</td> <td>{{ data.saltversion }}</td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
<tfoot> <tfoot>
<tr> <tr>
<td style="font-weight: bold;">Total:</th> <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>
<td style="font-weight: bold;"></th>
<td style="font-weight: bold;"></th> <td style="font-weight: bold;"></th>
</tr> </tr>
</tfoot> </tfoot>
</table> </table></div>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<h2>Disconnected minions</h2> <h2>Disconnected minions</h2>
@ -121,32 +111,37 @@
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<h2>Previous jobs</h2> <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> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Arguments</th>
<th>Function</th> <th>Function</th>
<th>StartTime</th> <th>StartTime</th>
<th>Target</th> <th>Target</th>
<th>Target type</th> </tr>
<th>User</th> <tr>
<td>Name</td>
<td>Function</td>
<td>StartTime</td>
<td>Target</td>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for id, data in joblist|dictsort|reverse %} {% for id, data in joblist|dictsort|reverse %}
<tr class="info"> <tr class="info">
<td>{{ id }}</td> <td>
<td>{{ data.Arguments }}</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.Function }}</td>
<td>{{ data.StartTime }}</td> <td>{{ data.StartTime }}</td>
<td>{{ data.Target }}</td> <td>{{ data.Target }}</td>
<td>{{ data['Target-type'] }}</td>
<td>{{ data.User }}</td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table></div>
</div> </div>
</div> </div>
</div> </div>
@ -192,7 +187,35 @@
</div> </div>
</div> </div>
{% endfor %} {% 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">&times;</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> </body>
</html> </html>

54
www/res/inittable.js
View file

@ -1,14 +1,30 @@
$(document).ready(function() { $(document).ready(function() {
$('#hostlist thead td').each( function () { var addSearch = function(elemId) {
var title = $('#hostlist thead th').eq( $(this).index() ).text(); $('#' + elemId + ' thead td').each( function () {
$(this).html( '<input type="text" class="form-control" placeholder="Search '+title+'" />' ); 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({ var jobTable = $('#joblist').DataTable({
'paging': true, 'paging': true,
'info': false, 'info': false,
'dom': 'tp', 'dom': 'tp',
'pagingType': 'full' 'pagingType': 'full',
'ordering': false
}); });
var table = $('#hostlist').DataTable({ var table = $('#hostlist').DataTable({
@ -33,14 +49,7 @@ $(document).ready(function() {
// mem // mem
memTotal = api memTotal = api
.column( 5, { page: 'current'} ) .column( 4, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// cpu
cpuTotal = api
.column( 6, { page: 'current'} )
.data() .data()
.reduce( function (a, b) { .reduce( function (a, b) {
return intVal(a) + intVal(b); return intVal(a) + intVal(b);
@ -51,25 +60,14 @@ $(document).ready(function() {
$.number(hostsTotal, 0, '.', ' ') $.number(hostsTotal, 0, '.', ' ')
); );
$( api.column( 5 ).footer() ).html( $( api.column( 4 ).footer() ).html(
$.number(memTotal, 0, '.', ' ') $.number(memTotal, 0, '.', ' ')
); );
$( api.column( 6 ).footer() ).html(
cpuTotal
);
} }
}); });
// Apply the search applySearch(table);
table.columns().eq( 0 ).each( function ( colIdx ) { applySearch(jobTable);
$( 'input', table.column( colIdx ).header() ).on( 'keyup change', function () {
table
.column( colIdx )
.search( this.value, true )
.draw();
} );
} );
$('td.number').number( true, 0, '.', ' ' ); $('td.number').number( true, 0, '.', ' ' );
}); });