<div id="modal-add-filter" class="modal fade" role="dialog" style="position: absolute">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<b>{{lang_add_filter}}</b>
</div>
<form class="form-inline center" onsubmit="$('#add-btn').click(); return false">
<div class="modal-body">
<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">
<select name="argument" id="argumentSelect" class="form-control col-4-xs"> </select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">{{lang_cancel}}</button>
<button id="add-btn" type="button" class="btn btn-success" onclick="addFilterFromForm()">
<span class="glyphicon glyphicon-plus"></span>
{{lang_add}}
</button>
</div>
</form>
</div>
</div>
</div>
<a href="#top" class="btn btn-default to-top-btn"><span class="glyphicon glyphicon-menu-up"></span></a>
<div class="col-md-12">
<!-- 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="show" value="{{show}}">
<button type="submit" hidden></button>
<div class="btn-group pull-right">
<button class="btn btn-default {{statButtonClass}}" type="submit" name="show" value="summary" {{perms.view.summary.disabled}}>
<span class="glyphicon glyphicon-stats"></span>
{{lang_showVisualization}}
</button>
<button class="btn btn-default {{listButtonClass}}" type="submit" name="show" value="list" {{perms.view.list.disabled}}>
<span class="glyphicon glyphicon-list"></span>
{{lang_showList}}
</button>
</div>
<h1>{{lang_moduleHeading}}</h1>
<br/>
<input type="hidden" name="do" value="statistics">
<input type="hidden" name="sortColumn" id="sortColumn" value="{{sortColumn}}"/>
<input type="hidden" name="sortDirection" id="sortDirection" value="{{sortDirection}}"/>
<label for="filterInput">{{lang_labelFilter}}</label>
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input type="text" name="filters" class="" id="filterInput"/>
<span class="input-group-btn" style=" width: 1%; padding-bottom: 5px;">
<button type="button" class="btn btn-success" onclick="popupFilter(null)">
<span class="glyphicon glyphicon-plus"></span>
{{lang_add_filter}}
</button>
</span>
</div>
</div>
</div>
<br/>
</form>
</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}}',
currentuser: '{{lang_currentUser}}',
subnet: '{{lang_subnet}}',
runtime: '{{lang_runtimeHours}}',
hostname: '{{lang_hostname}}',
live_swapfree: '{{lang_swapFree}}',
live_memfree: '{{lang_memFree}}',
live_tmpfree: '{{lang_tmpFree}}'
};
slxLocations = {{{locations}}};
var slxFilterDel = '{{delimiter}}';
var $modal, $queryForm;
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,
persist: false,
plugins: ['remove_button'],
create: function(input) {
return {value: input, text: input}
},
onChange: function() {
// if (initComplete && !$('#filterInput').is(':focus')) {
// reload();
// }
},
onItemRemove: function(value) {
refresh();
}
})[0].selectize;
/* add query */
var str = "{{{query}}}";
var eExp = /^(\w+)\s*([=><!~]+)\s*(.*)$/;
str.split(slxFilterDel).forEach(function(v) {
if (v.trim().length === 0)
return;
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') {
$('#argumentSelect').empty();
$('#argumentInput').hide();
$('#argumentSelect').show();
columns[col]['values'].forEach(function (v) {
var t = v;
var disabled = (col === 'location');
if (col === 'location' && slxLocations['L' + v]) {
t = slxLocations['L' + v].pad + ' ' + slxLocations['L' + v].name;
disabled = slxLocations['L' + v].disabled;
}
$('#argumentSelect').append($('<option>', { value: v, text: t, disabled: disabled }));
});
} else {
$('#argumentInput').datepicker('remove');
$('#argumentSelect option').remove();
$('#argumentInput').show();
$('#argumentSelect').hide();
}
});
$('.filter-col').each(function(idx, elem) {
var e = $(elem);
var col = e.data('filter-col');
if (!col) return;
e.find('.filter-val').each(function(idx, elem) {
var e = $(elem);
var val = e.data('filter-val');
if (!val) return;
e.click(function(ev) {
ev.preventDefault();
addFilter(col, '=', val);
refresh();
});
});
});
}, false);
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 ? argument1 : argument2;
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() {
$queryForm.submit(); /* TODO: use AJAX */
}
// --></script>
