Add the typeahead library and a typeahead input for filtering

web_service/css/tls-dashboard/styles.css

@@ -0,0 +1,37 @@
+/** Typeahead stylings **/
+#hostnames, .input-parent, .twitter-typeahead {
+  width: 100%;
+
+}
+.twitter-typeahead {
+}
+.tt-menu {
+  max-height        : 150px;
+    min-width: 325px;
+  border-width      : 1px;
+  border-color      : #66afe9;
+  border-style      : solid;
+  background-color  : #fff;
+  font-size         : 1.25rem;
+  overflow-y        : scroll;
+}
+.tt-suggestion {
+padding           : .5rem .5rem;
+  text-align: left;
+  font-size: 1rem;
+}
+.tt-suggestion:hover {
+  background-color: #1D44C8;
+  color: #eee;
+}
+.tt-cursor {
+  background-color: #1D44C8;
+  color: #eee;
+}
+.form-inline > .form-group {
+  margin-right: 25px;
+  margin-bottom: 0;
+}
+.form-inline > .form-group > label {
+  margin-bottom: 4px;
+}

web_service/index.html

@@ -8,9 +8,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <link rel="stylesheet" href="./css/bootstrap/bootstrap.min.css" type="text/css" />
+    <link rel="stylesheet" href="./css/tls-dashboard/styles.css" type="text/css" />
 
     <script src="./js/jquery/jquery-2.2.2.min.js"></script>
     <script src="./js/handlebars/handlebars-v4.0.5.min.js"></script>
+    <script src="./js/typeahead/typeahead-v0.11.1.min.js"></script>
     <script src="./js/tls-dashboard/certificates.js"></script>
     <script src="./js/tls-dashboard/scripts.js"></script>
   </head>
@@ -48,6 +50,17 @@
             </div>
           </div>
         </div>
+        <div class="col-xs-12 col-md-6">
+          <p class="lead">By hostname:</p>
+            <div class="form-group input-parent">
+              <input type="text" id="hostnames"
+                      name="hostnames"
+                      class="form-control typeahead"
+                      placeholder="www.example.com"
+                      autocomplete="off"
+                      tabindex="2">
+            </div>
+          </div>
       </div>
       <div class="row" style="margin-top: 1rem;">
         <div class="col-xs-12">

web_service/js/tls-dashboard/scripts.js

@@ -1,4 +1,6 @@
 $(function () {
+  // Local vars
+  var typeahead_hostnames = [];
   $('#created_date').html(run_date);
 
   var sorted_certificates = Object.keys(cert_info)
@@ -9,7 +11,7 @@ $(function () {
   });
 
   var card_html = String()
-    +'<div class="col-xs-12 col-md-6 col-lg-4 col-xl-3" data-category="{{category}}">'
+    +'<div class="col-xs-12 col-md-6 col-lg-4 col-xl-3 cert_card" data-category="{{category}}" data-hostname="{{server}}" data-visible="true">'
     +'  <div class="card text-xs-center" style="border-color:#333;">'
     +'    <div class="card-header" style="">'
     +'      <h4 class="text-muted" style="margin-bottom:0;padding-bottom:.25rem;;overflow:hidden;text-overflow:ellipsis;">{{server}}</h4>'
@@ -67,11 +69,35 @@ $(function () {
         break;
     };
     insert_card(json);
+    typeahead_hostnames.push(json.server);
+
+  });
 
   });
 
   function update_visible_certs() {
     $('[data-category="'+$(this).val()+'"]').toggle();
+  /**
+   * Initilizes the hostname typeahead
+   */
+  function create_typeahead() {
+    var monitored_hosts = new Bloodhound({
+      datumTokenizer: Bloodhound.tokenizers.nonword,
+      queryTokenizer: Bloodhound.tokenizers.nonword,
+      local: typeahead_hostnames
+    });
+
+    $('.typeahead').typeahead({
+      hint: true,
+      minLength: 2
+    },
+    {
+      name: 'hostnames',
+      source: monitored_hosts
+    });
+  };
+
+  create_typeahead();
   }
   $('input[type=checkbox]').change(update_visible_certs);
 });