Add preliminary filtering based on lease state

certidude/static/css/style.css

@@ -97,3 +97,8 @@ svg {
     cursor: not-allowed;
 }
 
+#signed_certificates .filterable .fa-circle { color: #888888; }
+#signed_certificates .filterable[data-state='online'] .fa-circle { color: #5cb85c; }
+#signed_certificates .filterable[data-state='offline'] .fa-circle { color: #0275d8; }
+#signed_certificates .filterable[data-state='dead'] .fa-circle { color: #d9534f; }
+

certidude/static/js/certidude.js

@@ -388,7 +388,7 @@ function onLeaseUpdate(e) {
                 certificate: {
                     lease: lease }}));
             $("time", $lease).timeago();
-
+            filterSigned();
         },
         error: function(response) {
             console.info("Failed to retrieve certificate:", response);
@@ -413,6 +413,7 @@ function onRequestSigned(e) {
             $("#signed_certificates").prepend(
                 env.render('views/signed.html', { certificate: certificate, session: session }));
             $("#signed_certificates time").timeago(); // TODO: optimize?
+            filterSigned();
         },
         error: function(response) {
             console.info("Failed to retrieve certificate:", response);
@@ -520,6 +521,32 @@ function onIssueToken() {
     });
 }
 
+function filterSigned() {
+    if ($("#search").val() != "") {
+        console.info("Not filtering by state since keyword filter is active");
+        return;
+    }
+
+    $("#signed_certificates .filterable").each(function(i,j) {
+        var last_seen = j.getAttribute("data-last-seen");
+        var state = "new";
+        if (last_seen) {
+            var age = (new Date() - new Date(last_seen)) / 1000;
+            if (age > 172800) {
+                state = "dead";
+            } else if (age > 10800) {
+                state = "offline";
+            } else {
+                state = "online";
+            }
+        }
+        j.setAttribute("data-state", state);
+        j.style.display = $("#signed-filter-" + state).prop("checked") ? "block" : "none";
+        $("#signed-total").html($("#signed_certificates .filterable").length);
+        $("#signed-filter-counter").html($("#signed_certificates .filterable:visible").length);
+    });
+}
+
 function loadAuthority(query) {
     console.info("Loading CA, to debug: curl " + window.location.href + " --negotiate -u : -H 'Accept: application/json'");
     $.ajax({
@@ -557,7 +584,13 @@ function loadAuthority(query) {
                 common_name: "$NAME"
             }));
 
+            // Initial filtering
+            $("#signed-filter .btn").on('change', filterSigned);
+            filterSigned();
+
+            // Attach timeago events
             $("time").timeago();
+
             if (session.authority) {
                 $("#log input").each(function(i, e) {
                     console.info("e.checked:", e.checked , "and", e.id, "@localstorage is", localStorage[e.id], "setting to:", localStorage[e.id] || e.checked, "bool:", localStorage[e.id] || e.checked == "true");
@@ -630,6 +663,12 @@ function loadAuthority(query) {
                         $(e).hide();
                     }
                 });
+                if (q.length == 0) {
+                    filterSigned();
+                    $("#signed-filter .btn").removeClass("disabled").prop("disabled", false);
+                } else {
+                    $("#signed-filter .btn").addClass("disabled").prop("disabled", true);
+                }
             });
 
 

certidude/templates/views/authority.html

@@ -221,6 +221,7 @@ curl http://{{ session.authority.hostname }}/api/revoked/?wait=yes -L -H "Accept
 <div class="row">
   <div class="col-sm-6 col-lg-4 col-xl-3">
     <h3>Signed certificates</h3>
+
     <p>Authority administration
       {% if session.authority.certificate.organization %}of {{ session.authority.certificate.organization }}{% endif %}
         allowed for
@@ -231,12 +232,22 @@ curl http://{{ session.authority.hostname }}/api/revoked/?wait=yes -L -H "Accept
         until
         <time class="timeago" datetime="{{ session.authority.certificate.expires }}">{{ session.authority.certificate.expires }}</time>.
         Authority certificate can be downloaded from <a href="/api/certificate/">here</a>.
-        Following certificates have been signed:</p>
+		Following certificates have been signed:</p>
+
+    <div id="signed-filter" class="btn-group-toggle" data-toggle="buttons">
+      <label class="btn btn-primary"><input id="signed-filter-new" type="checkbox" autocomplete="off">New</label>
+      <label class="btn btn-primary active"><input id="signed-filter-online" type="checkbox" autocomplete="off" checked>Online</label>
+      <label class="btn btn-primary"><input id="signed-filter-offline" type="checkbox" autocomplete="off">Lately seen</label>
+      <label class="btn btn-primary"><input id="signed-filter-dead" type="checkbox" autocomplete="off">Gone</label>
+    </div>
+
     <div id="signed_certificates">
     {% for certificate in session.authority.signed | sort(attribute="signed", reverse=true) %}
       {% include "views/signed.html" %}
     {% endfor %}
     </div>
+
+    <p>Showing <span id="signed-filter-counter">-</span> of total <span id="signed-total">-</span> certificates</p>
   </div>
   <div class="col-sm-6 col-lg-4 col-xl-3">
   {% if session.authority %}
@@ -347,7 +358,7 @@ curl http://{{ session.authority.hostname }}/api/revoked/?wait=yes -L -H "Accept
     </div>
     <div class="content" style="display:none;">
       <h3>Log</h3>
-      <div class="btn-group" data-toggle="buttons">
+      <div class="btn-group-toggle" data-toggle="buttons">
         <label class="btn btn-primary active"><input id="log-level-critical" type="checkbox" autocomplete="off" checked>Critical</label>
         <label class="btn btn-primary active"><input id="log-level-error" type="checkbox" autocomplete="off" checked>Error</label>
         <label class="btn btn-primary active"><input id="log-level-warning" type="checkbox" autocomplete="off" checked>Warn</label>

certidude/templates/views/lease.html

@@ -1,4 +1,3 @@
-<i class="fa fa-circle" style="color:{% if certificate.lease.age > 172800 %}#d9534f{% else %}{% if certificate.lease.age > 10800 %}#0275d8{% else %}#5cb85c{% endif %}{% endif %};"/>
 Last seen
 <time class="timeago" datetime="{{ certificate.lease.last_seen }}">{{ certificate.lease.last_seen }}</time>
 at

certidude/templates/views/signed.html

@@ -1,4 +1,5 @@
 <div id="certificate-{{ certificate.common_name | replace('@', '--') | replace('.', '-') }}" class="card filterable mt-3"
+  {% if certificate.lease %}data-last-seen={{ certificate.lease.last_seen }}{% endif %}
   data-keywords="{{ certificate.common_name }}|{% if session.authority.tagging %}{% for tag in certificate.tags %}{{ tag.id }}|{% endfor %}{% endif %}{% for key, value in certificate.attributes %}{{ key }}={{ value }}|{% endfor %}">
   <div class="card-header">
     {% if certificate.organizational_unit %}
@@ -14,6 +15,7 @@
   </div>
   <div class="card-block">
     <p>
+      <i class="fa fa-circle"/>
       <span class="lease">
         {% if certificate.lease %}
           {% include "views/lease.html" %}