Merging some refactoring + new filter functionality.

7 files changed, 257 insertions, 245 deletions

diff --git a/modules-available/statistics/templates/clientlist.html b/modules-available/statistics/templates/clientlist.html
index 664d5413..f2a6ba03 100644
--- a/modules-available/statistics/templates/clientlist.html
+++ b/modules-available/statistics/templates/clientlist.html
@@ -1,53 +1,8 @@
 
-<div id="modal-add-filter" class="modal modal-sm fade" role="dialog" style="position:absolute; min-width:600px; min-height: 400px;margin:auto">
-	<div class="modal-content">
-		<div class="modal-header">
-			<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
-			{{lang_add_filter}}
-		</div>
-		<form class="modal-body form-inline center">
-			<div class="form-group">
-				<select id="columnSelect" name="column" class="form-control col-4-xs">  </select>
-			</div>
-			<div class="form-group">
-				<select id="operatorSelect" name="operator" class="form-control col-4-xs"> </select>
-			</div>
-			<div class="form-group">
-				<input name="argument" id="argumentInput" class="form-control col-4-xs"> </input>
-				<select name="argument" id="argumentSelect" class="form-control col-4-xs"> </select>
-			</div>
-			<button type="button" class="btn btn-primary" onclick="addFilterFromForm()" >
-				<span class="glyphicon glyphicon-plus"></span>
-				{{lang_add}}</button>
-		</form>
-	</div>
-</div>
-
 
 
 <h1>{{lang_clientList}}</h1>
 
-<div>
-	<!-- use GET here, to avoid the "resend form?" confirmation, and anyway this is stateless, so GET makes more sense -->
-<form id="queryForm" method="GET" action="?do=Statistics&show=list" class="" role="form">
-			<input type="hidden" name="do" value="Statistics"/>
-			<input type="hidden" name="show" value="list"/>
-			<label for="filterInput">{{lang_labelFilter}}</label>
-			<input type="text" name="filters" class="" id="filterInput"/>
-			<input type="hidden" name="sortColumn" id="sortColumn" value="{{sortColumn}}"/>
-			<input type="hidden" name="sortDirection" id="sortDirection" value="{{sortDirection}}"/>
-
-			<button type="button" class="btn btn-success" onclick="popupFilter(null)">
-				<span class="glyphicon glyphicon-plus"></span>
-				{{lang_add_filter}}</button>
-			<button class="btn btn-primary pull-right" type="submit">
-				<span class="glyphicon glyphicon-refresh"></span>
-				{{lang_refresh}}</button>
-</form>
-<br/>
-<br/>
-</div>
-
 <table class="table table-condensed table-striped">
 	<tr>
 		<th>{{lang_machine}}</th>
@@ -132,195 +87,3 @@
 	</tr>
 	{{/rows}}
 </table>
-<script type="application/javascript"><!--
-
-var filterSelectize;
-
-var slxFilterNames = {
-	machineuuid: '{{lang_uuid}}',
-	macaddr: '{{lang_macAddr}}',
-	firstseen: '{{lang_firstSeen}}',
-	lastseen: '{{lang_lastSeen}}',
-	lastboot: '{{lang_lastBoot}}',
-	logintime: '{{lang_lastLogin}}',
-	realcores: '{{lang_cores}}',
-	systemmodel: '{{lang_model}}',
-	cpumodel: '{{lang_cpuModel}}',
-	hddgb: '{{lang_tmpGb}}',
-	gbram: '{{lang_gbRam}}',
-	kvmstate: '{{lang_kvmSupport}}',
-	badsectors: '{{lang_reallocatedSectors}}',
-	clientip: '{{lang_ip}}',
-	state: '{{lang_usageState}}',
-	location: '{{lang_location}}'
-};
-
-slxLocations = {{{locations}}};
-
-var slxFilterDel = '{{delimiter}}';
-
-
-document.addEventListener("DOMContentLoaded", function () {
-
-	/* some objects */
-	var $columnSelect = $('#columnSelect');
-	$modal = $('#modal-add-filter');
-	$queryForm = $('#queryForm');
-
-	var columns= {{{columns}}};
-
-	/* add options to column select */
-	for (var key in columns) {
-		$columnSelect.append($('<option>', {
-			value: key, text: (slxFilterNames[key] ? slxFilterNames[key] : key) }));
-	};
-
-
-	/* initialize selectize */
-	filterSelectize = $('#filterInput').selectize({
-		delimiter: slxFilterDel,
-		plugins: ['restore_on_backspace', 'remove_button'],
-		create: function(input) {
-			return {value: input, text: input}
-		},
-		onChange: function() {
-			// if (initComplete && !$('#filterInput').is(':focus')) {
-			// reload();
-			// }
-		}
-	})[0].selectize;
-	/* add query */
-	var str = "{{{query}}}";
-	var eExp = /^(\w+)\s*([=><!~]+)\s*(.*)$/;
-	str.split(slxFilterDel).forEach(function(v) {
-		var match = eExp.exec(v);
-		if (match && match.length === 4) {
-			addFilter(match[1], match[2], match[3]);
-		} else {
-			filterSelectize.addOption({value: v, text: v});
-			filterSelectize.addItem(v);
-		}
-	});
-
-	$('#columnSelect').on('change', function() {
-		$('#operatorSelect option').remove();
-		var col = $('#columnSelect').val();
-		var opS = $('#operatorSelect');
-		columns[col]['op'].sort(myOpSort);
-		columns[col]['op'].forEach(function (v) {
-			$(opS).append($('<option>', {
-				value: v, text: v
-			}));
-		});
-		/* also set the type of the input */
-		if (columns[col]['type'] == 'date') {
-			$('#argumentInput').datepicker({format : 'yyyy-mm-dd'});
-			$('#argumentSelect').hide();
-		} else if(columns[col]['type'] == 'enum') {
-			$('#argumentInput').hide();
-			$('#argumentSelect').show();
-			columns[col]['values'].forEach(function (v) {
-				var t = v;
-				if (col === 'location' && slxLocations['L' + v]) {
-					t = slxLocations['L' + v].pad + ' ' + slxLocations['L' + v].name;
-				}
-				$('#argumentSelect').append($('<option>', { value: v, text: t }));
-			});
-		} else {
-			$('#argumentInput').datepicker('remove');
-			$('#argumentSelect option').remove();
-			$('#argumentInput').show();
-			$('#argumentSelect').hide();
-		}
-	});
-
-	initButtons();
-
-}, false);
-
-
-function initButtons() {
-	['gbram', 'hddgb', 'realcores', 'kvmstate', 'lastseen', 'clientip'].forEach(function (v) {
-		var $sortBtn = $('#sortButton-' + v);
-		var order = 'up'; /* default */
-		if ($('#sortColumn').val() == v) {
-			$sortBtn.addClass('btn-success');
-			order = $('#sortDirection').val() == 'ASC' ? 'up' : 'down';
-		}
-		$sortBtn.html('<span class="glyphicon glyphicon-arrow-' + order + '"></span>');
-		$sortBtn.attr('onclick', 'toggleButton(\'' + v + '\');');
-	});
-}
-
-function toggleButton(v) {
-	var $sortBtn = $('#sortButton-' + v);
-	var $col = $('#sortColumn');
-	var $dir = $('#sortDirection');
-	if ($col.val() == v) {
-		/* toggle direction */
-		var newDir = $dir.val() == 'ASC' ? 'DESC' : 'ASC';
-		$dir.val(newDir);
-		/* update button */
-		var order =  newDir == 'ASC' ? 'up' : 'down';
-		$sortBtn.html('<span class="glyphicon glyphicon-arrow-' + order + '"></span>');
-	} else {
-		/* remove "btn-success" from current sorting */
-		$('#sortButton-'+v).removeClass('btn-success');
-		$sortBtn.addClass('btn-success');
-		$col.val(v);
-		$dir = 'ASC';
-	}
-	refresh();
-}
-
-function popupFilter(field) {
-		if (field != null) {
-			$('#columnSelect').val(field);
-		}
-		$('#columnSelect').change();
-		$modal.modal('show');
-}
-
-function addFilterFromForm() {
-	var argument1 = $('#argumentInput').val();
-	var argument2 = $('#argumentSelect').val();
-	var argument = argument1 == '' ? argument2 : argument1;
-	var col = $('#columnSelect').val();
-	var op = $('#operatorSelect').val();
-
-	addFilter(col, op, argument);
-	refresh(); // TODO: AJAX
-}
-
-function addFilter(col, op, argument) {
-	var filterValue = col + ' ' + op + ' ' + argument;
-	var filterText = filterValue;
-	var displayArgument = argument;
-	if (col === 'location' && slxLocations['L' + argument]) {
-		displayArgument = slxLocations['L' + argument].name;
-	}
-	if (slxFilterNames[col]) {
-		filterText = slxFilterNames[col] + ' ' + op + ' ' + displayArgument;
-	}
-	filterSelectize.addOption({value: filterValue, text: filterText});
-	filterSelectize.addItem(filterValue);
-}
-
-function toggleSort(field) {
-	$('#sort').val(field + ' ' + order);
-	refresh();
-}
-
-/* equal sign should always be first, the rest doesn't matter*/
-function myOpSort(a,b) {
-	if (a == '=') { return -1; }
-	else if (a == b) {return 0}
-	else { return 1;}
-
-}
-
-function refresh() {
-	console.log('refresh');
-	$queryForm.submit(); /* TODO: use AJAX */
-}
-// --></script>
diff --git a/modules-available/statistics/templates/cpumodels.html b/modules-available/statistics/templates/cpumodels.html
index 87f161bb..1bc2e6ec 100644
--- a/modules-available/statistics/templates/cpumodels.html
+++ b/modules-available/statistics/templates/cpumodels.html
@@ -15,9 +15,9 @@
 						{{#rows}}
 						<tr id="{{id}}">
 							<td class="text-left slx-nowrap">
-								<a href="?do=Statistics&amp;show=list&amp;filters=systemmodel={{urlsystemmodel}}">{{systemmodel}}</a>
+								<a href="?do=Statistics&amp;show=stat&amp;filters={{query}}~,~systemmodel={{urlsystemmodel}}">{{systemmodel}}</a>
 							</td>
-							<td class="text-right"><a href="?do=Statistics&amp;show=list&amp;filters=realcores={{cores}}">{{cores}}</a></td>
+							<td class="text-right"><a href="?do=Statistics&amp;show=stat&amp;filters={{query}}~,~realcores={{cores}}">{{cores}}</a></td>
 							<td class="text-right">{{count}}</td>
 						</tr>
 						{{/rows}}
diff --git a/modules-available/statistics/templates/filterbox.html b/modules-available/statistics/templates/filterbox.html
new file mode 100644
index 00000000..2e7928e9
--- /dev/null
+++ b/modules-available/statistics/templates/filterbox.html
@@ -0,0 +1,249 @@
+<div id="modal-add-filter" class="modal modal-sm fade" role="dialog" style="position:absolute; min-width:600px; min-height: 400px;margin:auto">
+	<div class="modal-content">
+		<div class="modal-header">
+			<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+			{{lang_add_filter}}
+		</div>
+		<form class="modal-body form-inline center">
+			<div class="form-group">
+				<select id="columnSelect" name="column" class="form-control col-4-xs">  </select>
+			</div>
+			<div class="form-group">
+				<select id="operatorSelect" name="operator" class="form-control col-4-xs"> </select>
+			</div>
+			<div class="form-group">
+				<input name="argument" id="argumentInput" class="form-control col-4-xs"> </input>
+				<select name="argument" id="argumentSelect" class="form-control col-4-xs"> </select>
+			</div>
+			<button type="button" class="btn btn-primary" onclick="addFilterFromForm()" >
+				<span class="glyphicon glyphicon-plus"></span>
+				{{lang_add}}</button>
+		</form>
+	</div>
+</div>
+
+
+<div style="height:120px">
+	<!-- use GET here, to avoid the "resend form?" confirmation, and anyway this is stateless, so GET makes more sense -->
+	<form id="queryForm" method="GET" action="?do=Statistics" class="" role="form">
+			<input type="hidden" name="do" value="Statistics"/>
+			<label for="filters">{{lang_labelFilter}}</label>
+			<input type="text" name="filters" class="" id="filterInput"/>
+			<input type="hidden" name="sortColumn" id="sortColumn" value="{{sortColumn}}"/>
+			<input type="hidden" name="sortDirection" id="sortDirection" value="{{sortDirection}}"/>
+
+			<button type="button" class="btn btn-success" onclick="popupFilter(null)">
+				<span class="glyphicon glyphicon-plus"></span>
+				{{lang_add_filter}}</button>
+			<button class="btn btn-primary pull-right" type="submit" name="show" value="{{show}}">
+				<span class="glyphicon glyphicon-refresh"></span>
+				{{lang_refresh}}</button>
+			{{#showList}}
+			<button class="btn btn-secondary pull-right" type="submit" name="show" value="stat">
+				<span class="glyphicon glyphicon-stats"></span>
+				{{lang_showVisualization}}</button>
+			{{/showList}}
+			{{^showList}}
+			<button class="btn btn-secondary pull-right" type="submit" name="show" value="list">
+				<span class="glyphicon glyphicon-list"></span>
+				{{lang_showList}}</button>
+			{{/showList}}
+</form>
+<br/>
+<br/>
+</div>
+<script type="application/javascript"><!--
+
+var filterSelectize;
+
+var slxFilterNames = {
+	machineuuid: '{{lang_uuid}}',
+	macaddr: '{{lang_macAddr}}',
+	firstseen: '{{lang_firstSeen}}',
+	lastseen: '{{lang_lastSeen}}',
+	lastboot: '{{lang_lastBoot}}',
+	logintime: '{{lang_lastLogin}}',
+	realcores: '{{lang_cores}}',
+	systemmodel: '{{lang_model}}',
+	cpumodel: '{{lang_cpuModel}}',
+	hddgb: '{{lang_tmpGb}}',
+	gbram: '{{lang_gbRam}}',
+	kvmstate: '{{lang_kvmSupport}}',
+	badsectors: '{{lang_reallocatedSectors}}',
+	clientip: '{{lang_ip}}',
+	state: '{{lang_usageState}}',
+	location: '{{lang_location}}'
+};
+
+slxLocations = {{{locations}}};
+
+var slxFilterDel = '{{delimiter}}';
+
+
+document.addEventListener("DOMContentLoaded", function () {
+
+	/* some objects */
+	var $columnSelect = $('#columnSelect');
+	$modal = $('#modal-add-filter');
+	$queryForm = $('#queryForm');
+
+	var columns= {{{columns}}};
+
+	/* add options to column select */
+	for (var key in columns) {
+		$columnSelect.append($('<option>', {
+			value: key, text: (slxFilterNames[key] ? slxFilterNames[key] : key) }));
+	};
+
+
+	/* initialize selectize */
+	filterSelectize = $('#filterInput').selectize({
+		delimiter: slxFilterDel,
+		plugins: ['restore_on_backspace', 'remove_button'],
+		create: function(input) {
+			return {value: input, text: input}
+		},
+		onChange: function() {
+			// if (initComplete && !$('#filterInput').is(':focus')) {
+			// reload();
+			// }
+		}
+	})[0].selectize;
+	/* add query */
+	var str = "{{{query}}}";
+	var eExp = /^(\w+)\s*([=><!~]+)\s*(.*)$/;
+	str.split(slxFilterDel).forEach(function(v) {
+		var match = eExp.exec(v);
+		if (match && match.length === 4) {
+			addFilter(match[1], match[2], match[3]);
+		} else {
+			filterSelectize.addOption({value: v, text: v});
+			filterSelectize.addItem(v);
+		}
+	});
+
+	$('#columnSelect').on('change', function() {
+		$('#operatorSelect option').remove();
+		var col = $('#columnSelect').val();
+		var opS = $('#operatorSelect');
+		columns[col]['op'].sort(myOpSort);
+		columns[col]['op'].forEach(function (v) {
+			$(opS).append($('<option>', {
+				value: v, text: v
+			}));
+		});
+		/* also set the type of the input */
+		if (columns[col]['type'] == 'date') {
+			$('#argumentInput').datepicker({format : 'yyyy-mm-dd'});
+			$('#argumentSelect').hide();
+		} else if(columns[col]['type'] == 'enum') {
+			$('#argumentInput').hide();
+			$('#argumentSelect').show();
+			columns[col]['values'].forEach(function (v) {
+				var t = v;
+				if (col === 'location' && slxLocations['L' + v]) {
+					t = slxLocations['L' + v].pad + ' ' + slxLocations['L' + v].name;
+				}
+				$('#argumentSelect').append($('<option>', { value: v, text: t }));
+			});
+		} else {
+			$('#argumentInput').datepicker('remove');
+			$('#argumentSelect option').remove();
+			$('#argumentInput').show();
+			$('#argumentSelect').hide();
+		}
+	});
+
+	initButtons();
+
+}, false);
+
+
+function initButtons() {
+	['gbram', 'hddgb', 'realcores', 'kvmstate', 'lastseen', 'clientip'].forEach(function (v) {
+		var $sortBtn = $('#sortButton-' + v);
+		var order = 'up'; /* default */
+		if ($('#sortColumn').val() == v) {
+			$sortBtn.addClass('btn-success');
+			order = $('#sortDirection').val() == 'ASC' ? 'up' : 'down';
+		}
+		$sortBtn.html('<span class="glyphicon glyphicon-arrow-' + order + '"></span>');
+		$sortBtn.attr('onclick', 'toggleButton(\'' + v + '\');');
+	});
+}
+
+function toggleButton(v) {
+	var $sortBtn = $('#sortButton-' + v);
+	var $col = $('#sortColumn');
+	var $dir = $('#sortDirection');
+	if ($col.val() == v) {
+		/* toggle direction */
+		var newDir = $dir.val() == 'ASC' ? 'DESC' : 'ASC';
+		$dir.val(newDir);
+		/* update button */
+		var order =  newDir == 'ASC' ? 'up' : 'down';
+		$sortBtn.html('<span class="glyphicon glyphicon-arrow-' + order + '"></span>');
+	} else {
+		/* remove "btn-success" from current sorting */
+		$('#sortButton-'+v).removeClass('btn-success');
+		$sortBtn.addClass('btn-success');
+		$col.val(v);
+		$dir = 'ASC';
+	}
+	refresh();
+}
+
+function popupFilter(field) {
+		if (field != null) {
+			$('#columnSelect').val(field);
+		}
+		$('#columnSelect').change();
+		$modal.modal('show');
+}
+
+function addFilterFromForm() {
+	var argument1 = $('#argumentInput').val();
+	var argument2 = $('#argumentSelect').val();
+	var argument = argument1 == '' ? argument2 : argument1;
+	var col = $('#columnSelect').val();
+	var op = $('#operatorSelect').val();
+
+	addFilter(col, op, argument);
+	refresh(); // TODO: AJAX
+}
+
+function addFilter(col, op, argument) {
+	var filterValue = col + ' ' + op + ' ' + argument;
+	var filterText = filterValue;
+	var displayArgument = argument;
+	if (col === 'location' && slxLocations['L' + argument]) {
+		displayArgument = slxLocations['L' + argument].name;
+	}
+	if (slxFilterNames[col]) {
+		filterText = slxFilterNames[col] + ' ' + op + ' ' + displayArgument;
+	}
+	filterSelectize.addOption({value: filterValue, text: filterText});
+	filterSelectize.addItem(filterValue);
+}
+
+function toggleSort(field) {
+	$('#sort').val(field + ' ' + order);
+	refresh();
+}
+
+/* equal sign should always be first, the rest doesn't matter*/
+function myOpSort(a,b) {
+	if (a == '=') { return -1; }
+	else if (a == b) {return 0}
+	else { return 1;}
+
+}
+
+function refresh() {
+	console.log('refresh');
+	$queryForm.submit(); /* TODO: use AJAX */
+}
+// --></script>
+
+
+
diff --git a/modules-available/statistics/templates/id44.html b/modules-available/statistics/templates/id44.html
index 1a00fc8c..f0b5b9f7 100644
--- a/modules-available/statistics/templates/id44.html
+++ b/modules-available/statistics/templates/id44.html
@@ -13,7 +13,7 @@
 						</tr>
 						{{#rows}}
 						<tr id="tmpid{{gb}}" class="{{class}}">
-							<td class="text-left slx-nowrap"><a href="?do=Statistics&amp;show=list&amp;filters=hddgb={{gb}}">{{gb}}&thinsp;GiB</td>
+							<td class="text-left slx-nowrap"><a href="?do=Statistics&amp;show=stat&amp;filters={{query}}~,~hddgb={{gb}}">{{gb}}&thinsp;GiB</td>
 							<td class="text-right">{{count}}</td>
 						</tr>
 						{{/rows}}
diff --git a/modules-available/statistics/templates/kvmstate.html b/modules-available/statistics/templates/kvmstate.html
index af163893..4c286d36 100644
--- a/modules-available/statistics/templates/kvmstate.html
+++ b/modules-available/statistics/templates/kvmstate.html
@@ -13,7 +13,7 @@
 						</tr>
 						{{#rows}}
 						<tr id="kvm{{kvmstate}}">
-							<td class="text-left slx-nowrap"><a href="?do=Statistics&amp;show=list&amp;filters=kvmstate={{kvmstate}}">{{kvmstate}}</a></td>
+							<td class="text-left slx-nowrap"><a href="?do=Statistics&amp;show=stat&amp;filters={{query}}~,~kvmstate={{kvmstate}}">{{kvmstate}}</a></td>
 							<td class="text-right">{{count}}</td>
 						</tr>
 						{{/rows}}
diff --git a/modules-available/statistics/templates/memory.html b/modules-available/statistics/templates/memory.html
index efa7c44b..8a882fa6 100644
--- a/modules-available/statistics/templates/memory.html
+++ b/modules-available/statistics/templates/memory.html
@@ -13,7 +13,7 @@
 						</tr>
 						{{#rows}}
 						<tr id="ramid{{gb}}" class="{{class}}">
-							<td class="text-left slx-nowrap"><a href="?do=Statistics&amp;show=list&amp;filters=gbram={{gb}}">{{gb}}&thinsp;GiB</a></td>
+							<td class="text-left slx-nowrap"><a href="?do=Statistics&amp;show=stat&amp;filters={{query}}~,~gbram={{gb}}">{{gb}}&thinsp;GiB</a></td>
 							<td class="text-right">{{count}}</td>
 						</tr>
 						{{/rows}}
diff --git a/modules-available/statistics/templates/summary.html b/modules-available/statistics/templates/summary.html
index f71620f9..642c48fc 100644
--- a/modules-available/statistics/templates/summary.html
+++ b/modules-available/statistics/templates/summary.html
@@ -3,13 +3,13 @@
 		<div class="panel-body">
 			<div>
 				{{lang_knownMachines}}: <b>{{known}}</b>&emsp;
-				<a href="?do=Statistics&amp;show=list&amp;filters=state=on">{{lang_onlineMachines}}</a>: <b>{{online}}</b>&emsp;
-				<a href="?do=Statistics&amp;show=list&amp;filters=state=occupied">{{lang_inUseMachines}}</a>: <b>{{used}}</b> (<b>{{usedpercent}}%</b>)
+				<a href="?do=Statistics&amp;show=stat&amp;filters={{query}}~,~state=on">{{lang_onlineMachines}}</a>: <b>{{online}}</b>&emsp;
+				<a href="?do=Statistics&amp;show=stat&amp;filters={{query}}~,~state=occupied">{{lang_inUseMachines}}</a>: <b>{{used}}</b> (<b>{{usedpercent}}%</b>)
 			</div>
 			{{#badhdd}}
 			<div>
 				<span class="glyphicon glyphicon-exclamation-sign red"></span>
-				<a href="?do=Statistics&amp;show=list&amp;filters=badsectors>=10">
+				<a href="?do=Statistics&amp;show=list&amp;filters={{query}}~,~badsectors>=10">
 					{{lang_withBadSectors}}: <b>{{badhdd}}</b>
 				</a>
 			</div>