diff options
author | Arthur de Jong <arthur@arthurdejong.org> | 2018-10-21 21:40:53 +0200 |
---|---|---|
committer | Arthur de Jong <arthur@arthurdejong.org> | 2018-10-21 21:40:53 +0200 |
commit | e6ee8b4fc362f31882222c148f35f75d4bb50cd8 (patch) | |
tree | 2b44f0965e1b2b270bd7edd9bd690ad900559b27 | |
parent | 3ee3cf43d06a33b6a1fefcfba828b60f27b4488e (diff) |
Add a search field for adding graphs
-rw-r--r-- | static/index.html | 24 | ||||
-rw-r--r-- | static/js/munin-plot.js | 10 |
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(); } |