Arthur de Jong

Open Source / Free Software developer

summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorArthur de Jong <arthur@arthurdejong.org>2018-10-21 21:40:53 +0200
committerArthur de Jong <arthur@arthurdejong.org>2018-10-21 21:40:53 +0200
commite6ee8b4fc362f31882222c148f35f75d4bb50cd8 (patch)
tree2b44f0965e1b2b270bd7edd9bd690ad900559b27
parent3ee3cf43d06a33b6a1fefcfba828b60f27b4488e (diff)
Add a search field for adding graphs
-rw-r--r--static/index.html24
-rw-r--r--static/js/munin-plot.js10
2 files changed, 23 insertions, 11 deletions
diff --git a/static/index.html b/static/index.html
index 97f24e9..f427d9d 100644
--- a/static/index.html
+++ b/static/index.html
@@ -84,7 +84,6 @@
</div>
</div>
-
<div class="row addgraph">
<div class="col col-sm-1">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#addgraph" aria-expanded="false" aria-controls="addgraph"><span class="oi oi-plus"></span></button>
@@ -93,15 +92,19 @@
<div class="collapse" id="addgraph">
<div class="card card-body">
<div class="row">
- <div class="col col-md-6">
- <select id="hostselect" class="form-control form-control-sm">
- <option value="">All hosts</option>
- </select>
- </div>
- <div class="col col-md-6">
- <select id="categoryselect" class="form-control form-control-sm">
- <option value="">All categories</option>
- </select>
+ <div class="col col-md-12">
+ <div class="input-group input-group-sm">
+ <div class="input-group-prepend">
+ <label for="graphfilter" class="input-group-text"><span class="oi oi-magnifying-glass"></span></label>
+ </div>
+ <input id="graphfilter"></input>
+ <select id="hostselect" class="form-control">
+ <option value="">All hosts</option>
+ </select>
+ <select id="categoryselect" class="form-control">
+ <option value="">All categories</option>
+ </select>
+ </div>
</div>
</div>
<div class="row">
@@ -115,7 +118,6 @@
</div>
</div>
-
</div>
<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.12.1.min.js"></script>
diff --git a/static/js/munin-plot.js b/static/js/munin-plot.js
index 040b83a..2f10e54 100644
--- a/static/js/munin-plot.js
+++ b/static/js/munin-plot.js
@@ -467,10 +467,12 @@ function updateSelect(graphs) {
// build list of graphs
var graphnames = Object.keys(graphs);
graphnames.sort();
+ var graphfilter = document.getElementById('graphfilter');
// handler for updating the choices in the graph select
function updateGraphList() {
var host = hostselect.options[hostselect.selectedIndex].value;
var category = categoryselect.options[categoryselect.selectedIndex].value;
+ var search = graphfilter.value.toLowerCase().split(' ');
var graphselect = document.getElementById('graphselect');
graphselect.innerHTML = '';
graphnames.forEach(function(graph) {
@@ -478,6 +480,9 @@ function updateSelect(graphs) {
return;
if (category && graphs[graph].category != category)
return;
+ var descripton = (graph + ' ' + graphs[graph].graph_title + ' ' + graphs[graph].category).toLowerCase();
+ if (search.some(x => !descripton.includes(x)))
+ return;
var graphelement = document.createElement('a');
graphelement.setAttribute('href', '#');
graphelement.setAttribute('class', 'list-group-item list-group-item-action');
@@ -495,9 +500,14 @@ function updateSelect(graphs) {
addGraph(graphs[graph]);
});
});
+ graphfilter.focus();
}
hostselect.addEventListener('change', updateGraphList, false);
categoryselect.addEventListener('change', updateGraphList, false);
+ graphfilter.addEventListener('input', updateGraphList, false);
+ document.getElementsByClassName('addgraph')[0].getElementsByClassName('btn')[0].addEventListener('click', function() {
+ setTimeout(function() {graphfilter.focus()}, 100);
+ }, false);
updateGraphList();
}