From e6ee8b4fc362f31882222c148f35f75d4bb50cd8 Mon Sep 17 00:00:00 2001
From: Arthur de Jong <arthur@arthurdejong.org>
Date: Sun, 21 Oct 2018 21:40:53 +0200
Subject: Add a search field for adding graphs

---
 static/index.html       | 24 +++++++++++++-----------
 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();
 }
 
-- 
cgit v1.2.3