Add filtering to the web app

node_app/get_cert_info.js

@@ -108,28 +108,28 @@ function get_cert_parameters(element, index, array) {
           parsed.subject.common_name = 'The connection was reset by the server or timed out';
           parsed.issuer.common_name = e.code;
           parsed.info.days_left = '--';
-          parsed.info.background_class = 'info';
+          parsed.info.background_class = 'error';
           break;
         case 'ECONNREFUSED':
           assert(false, element+' connection refused by server.');
           parsed.subject.common_name = 'The connection was refused by the remote server';
           parsed.issuer.common_name = e.code;
           parsed.info.days_left = '--';
-          parsed.info.background_class = 'info';
+          parsed.info.background_class = 'error';
           break;
         case 'UNABLE_TO_VERIFY_LEAF_SIGNATURE':
           assert(false, element+' self-signed or incomplete certificate chain.');
           parsed.subject.common_name = 'The server provided a self-signed certificate or the provided certificate chain was incomplete';
           parsed.issuer.common_name = e.code;
           parsed.info.days_left = '--';
-          parsed.info.background_class = 'info';
+          parsed.info.background_class = 'error';
           break;
         default:
           assert(false, element+' unspecified error.');
           parsed.subject.common_name = 'An unspecified error occured';
           parsed.issuer.common_name = e.code;
           parsed.info.days_left = '--';
-          parsed.info.background_class = 'info';
+          parsed.info.background_class = 'error';
           break;
       };
 
@@ -140,7 +140,7 @@ function get_cert_parameters(element, index, array) {
           parsed.subject.common_name = 'There was mismatch between the requested hostname and the certificate presented by the server';
           parsed.issuer.common_name = 'HOSTNAME_MISMATCH';
           parsed.info.days_left = '--';
-          parsed.info.background_class = 'info';
+          parsed.info.background_class = 'error';
           break;
       }
 

web_service/index.html

@@ -20,6 +20,35 @@
         <div class="col-xs-12 text-center bg-primary"><h1>TLS Certificate Expiration Dashboard</h1></div>
         <div class="col-xs-12 text-center bg-primary"><h3><small>Created: <span id="created_date"></span></small></h3></div>
       </div>
+      <div class="row" style="margin-top: 1rem;">
+        <div class="col-xs-12">
+          <h4>Filter Results</h4>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-xs-12 text-center">
+          <div class="form-inline">
+            <div class="form-group">
+              <label>Response Type: </label>
+              <label class="checkbox-inline">
+                <input type="checkbox" id="response_type_1" value="normal" checked="checked"> Normal
+              </label>
+              <label class="checkbox-inline">
+                <input type="checkbox" id="response_type_2" value="warning" checked="checked"> Warning
+              </label>
+              <label class="checkbox-inline">
+                <input type="checkbox" id="response_type_3" value="danger" checked="checked"> Danger
+              </label>
+              <label class="checkbox-inline">
+                <input type="checkbox" id="response_type_4" value="info" checked="checked"> Info
+              </label>
+              <label class="checkbox-inline">
+                <input type="checkbox" id="response_type_5" value="error" checked="checked"> Error
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
       <div class="row" style="margin-top: 1rem;">
         <div class="col-xs-12">
           <div id="panel" class="card-deck">
@@ -28,4 +57,4 @@
       </div>
     </div>
   </body>
-</html>
+</html>

web_service/js/tls-dashboard/scripts.js

@@ -1,15 +1,15 @@
 $(function () {
   $('#created_date').html(run_date);
-  
+
   var sorted_certificates = Object.keys(cert_info)
     .sort(function( a, b ) {
       return cert_info[a].info.sort_order - cert_info[b].info.sort_order;
     }).map(function(sortedKey) {
       return cert_info[sortedKey];
   });
-  
+
   var card_html = String()
-    +'<div class="col-xs-12 col-md-6 col-lg-4 col-xl-3">'
+    +'<div class="col-xs-12 col-md-6 col-lg-4 col-xl-3" data-category="{{category}}">'
     +'  <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>'
@@ -25,7 +25,7 @@ $(function () {
     +'    </div>'
     +'  </div>'
     +'</div>';
-  
+
   function insert_card(json) {
     var card_template = Handlebars.compile(card_html),
       html = card_template(json);
@@ -43,21 +43,35 @@ $(function () {
     switch (element.info.background_class) {
       case "danger":
         json.background = 'card-inverse card-danger';
+        json.category = 'danger';
         break;
       case "warning":
         json.background = 'card-inverse card-warning';
+        json.category = 'warning';
         break;
       case "info":
         json.background = 'card-inverse card-info';
+        json.category = 'info';
+        break;
+      case "error":
+        json.background = 'card-inverse card-info';
+        json.category = 'error';
         break;
       case "success":
         json.background = 'card-inverse card-success';
+        json.category = 'normal';
         break;
       default:
         json.background = 'card-inverse card-info';
+        json.category = 'info';
         break;
     };
     insert_card(json);
 
   });
-});
+
+  function update_visible_certs() {
+    $('[data-category="'+$(this).val()+'"]').toggle();
+  }
+  $('input[type=checkbox]').change(update_visible_certs);
+});