Add preliminary support for logging

Current logging mechanism makes use of Python's logging module. MySQL logging handler inserts log entries to MySQL server and another logging handler is used to stream events to web interface via nginx streaming push.
2025-10-30 17:09:19 +00:00 · 2015-12-13 15:11:22 +00:00
parent b788d701eb
commit fbbf7a320d
16 changed files with 280 additions and 16 deletions
--- a/certidude/static/authority.html
+++ b/certidude/static/authority.html
@@ -35,6 +35,19 @@
    </ul>
 </div>

+<div id="log">
+    <h1>Log</h1>
+    <p>
+        <input id="log_level_critical" type="checkbox" checked/> <label for="log_level_critical">Critical</label>
+        <input id="log_level_error" type="checkbox" checked/> <label for="log_level_error">Errors</label>
+        <input id="log_level_warning" type="checkbox" checked/> <label for="log_level_warning">Warnings</label>
+        <input id="log_level_info" type="checkbox" checked/> <label for="log_level_info">Info</label>
+        <input id="log_level_debug" type="checkbox"/> <label for="log_level_debug">Debug</label>
+    </p>
+    <ul id="log_entries">
+    </ul>
+</div>
+
 <div id="revoked">
    <h1>Revoked certificates</h1>
    <p>To fetch certificate revocation list:</p>
--- a/certidude/static/css/style.css
+++ b/certidude/static/css/style.css
@@ -75,7 +75,6 @@ button:disabled, .button:disabled {

 footer {
    display: block;
-    color: #fff;
    text-align: center;
 }

@@ -84,10 +83,6 @@ a {
    color: #44c;
 }

-footer a {
-    color: #aaf;
-}
-
 html,body {
    margin: 0;
    padding: 0 0 1em 0;
@@ -143,6 +138,7 @@ pre {

 .container {
    max-width: 960px;
+    padding: 0 1em;
    margin: 0 auto;
 }

@@ -174,6 +170,19 @@ pre {
    text-decoration: none;
 }

+li span.icon {
+    background-size: 32px;
+    padding-left: 42px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+}
+
+
+.icon.critical { background-image: url("../img/iconmonstr-error-4-icon.svg"); }
+.icon.error { background-image: url("../img/iconmonstr-error-4-icon.svg"); }
+.icon.warning { background-image: url("../img/iconmonstr-warning-6-icon.svg"); }
+.icon.info { background-image: url("../img/iconmonstr-info-6-icon.svg"); }
+

 .icon.revoke { background-image: url("../img/iconmonstr-x-mark-5-icon.svg"); }
 .icon.download { background-image: url("../img/iconmonstr-download-12-icon.svg"); }
--- a/certidude/static/img/iconmonstr-error-4-icon.svg
+++ b/certidude/static/img/iconmonstr-error-4-icon.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- The icon can be used freely in both personal and commercial projects with no attribution required, but always appreciated.
+You may NOT sub-license, resell, rent, redistribute or otherwise transfer the icon without express written permission from iconmonstr.com -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="32px" height="32px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<path id="error-4-icon" d="M324.76,90L422,187.24v137.52L324.76,422H187.24L90,324.76V187.24L187.24,90H324.76 M341.328,50H170.672
+	L50,170.672v170.656L170.672,462h170.656L462,341.328V170.672L341.328,50L341.328,50z M228.55,135.812h54.9v166.5h-54.9V135.812z
+	 M256,388.188c-16.362,0-29.625-13.264-29.625-29.625c0-16.362,13.263-29.627,29.625-29.627c16.361,0,29.625,13.265,29.625,29.627
+	C285.625,374.924,272.361,388.188,256,388.188z"/>
+</svg>
+
--- a/certidude/static/img/iconmonstr-info-6-icon.svg
+++ b/certidude/static/img/iconmonstr-info-6-icon.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- The icon can be used freely in both personal and commercial projects with no attribution required, but always appreciated.
+You may NOT sub-license, resell, rent, redistribute or otherwise transfer the icon without express written permission from iconmonstr.com -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="32px" height="32px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<path id="info-6-icon" d="M256,90.002c91.74,0,166,74.241,166,165.998c0,91.739-74.245,165.998-166,165.998
+	c-91.738,0-166-74.242-166-165.998C90,164.259,164.243,90.002,256,90.002 M256,50.002C142.229,50.002,50,142.228,50,256
+	c0,113.769,92.229,205.998,206,205.998c113.77,0,206-92.229,206-205.998C462,142.228,369.77,50.002,256,50.002L256,50.002z
+	 M252.566,371.808c-28.21,9.913-51.466-1.455-46.801-28.547c4.667-27.098,31.436-85.109,35.255-96.079
+	c3.816-10.97-3.502-13.977-11.346-9.513c-4.524,2.61-11.248,7.841-17.02,12.925c-1.601-3.223-3.852-6.906-5.542-10.433
+	c9.419-9.439,25.164-22.094,43.803-26.681c22.27-5.497,59.492,3.29,43.494,45.858c-11.424,30.34-19.503,51.276-24.594,66.868
+	c-5.088,15.598,0.955,18.868,9.863,12.791c6.959-4.751,14.372-11.214,19.806-16.226c2.515,4.086,3.319,5.389,5.806,10.084
+	C295.857,342.524,271.182,365.151,252.566,371.808z M311.016,184.127c-12.795,10.891-31.76,10.655-42.37-0.532
+	c-10.607-11.181-8.837-29.076,3.955-39.969c12.794-10.89,31.763-10.654,42.37,0.525
+	C325.577,155.337,323.809,173.231,311.016,184.127z"/>
+</svg>
+
--- a/certidude/static/img/iconmonstr-warning-6-icon.svg
+++ b/certidude/static/img/iconmonstr-warning-6-icon.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- The icon can be used freely in both personal and commercial projects with no attribution required, but always appreciated.
+You may NOT sub-license, resell, rent, redistribute or otherwise transfer the icon without express written permission from iconmonstr.com -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="32px" height="32px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<path id="warning-6-icon" d="M239.939,231.352h32.121v97.421h-32.121V231.352z M256,379.019c-9.574,0-17.334-7.761-17.334-17.334
+	c0-9.574,7.76-17.335,17.334-17.335c9.573,0,17.334,7.761,17.334,17.335C273.334,371.258,265.573,379.019,256,379.019z M256,78.07
+	L50,434.873h412L256,78.07z M256,158.07l136.718,236.803H119.282L256,158.07z"/>
+</svg>
+
--- a/certidude/static/js/certidude.js
+++ b/certidude/static/js/certidude.js
@@ -23,6 +23,20 @@ $(document).ready(function() {
                console.log("Received server-sent event:", event);
            }

+            source.addEventListener("log-entry", function(e) {
+                var entry = JSON.parse(e.data);
+                console.info("Received log entry:", entry, "gonna prepend:", $("#log_level_" + entry.severity).prop("checked"));
+                if ($("#log_level_" + entry.severity).prop("checked")) {
+                    $("#log_entries").prepend(nunjucks.render("logentry.html", {
+                        entry: {
+                            created: new Date(entry.created).toLocaleString(),
+                            message: entry.message,
+                            severity: entry.severity
+                        }
+                    }));
+                }
+            });
+
            source.addEventListener("up-client", function(e) {
                console.log("Adding security association:" + e.data);
                var lease = JSON.parse(e.data);
@@ -92,6 +106,27 @@ $(document).ready(function() {

            $("#container").html(nunjucks.render('authority.html', { session: session, window: window }));

+
+            $.ajax({
+                method: "GET",
+                url: "/api/log/",
+                dataType: "json",
+                success:function(entries, status, xhr) {
+                    console.info("Got", entries.length, "log entries");
+                    for (var j = 0; j < entries.length; j++) {
+                        if ($("#log_level_" + entries[j].severity).prop("checked")) {
+                            $("#log_entries").append(nunjucks.render("logentry.html", {
+                                entry: {
+                                    created: new Date(entries[j].created).toLocaleString("et-EE"),
+                                    message: entries[j].message,
+                                    severity: entries[j].severity
+                                }
+                            }));
+                        }
+                    }
+                }
+            });
+
            $.ajax({
                method: "GET",
                url: "/api/lease/",
--- a/certidude/static/logentry.html
+++ b/certidude/static/logentry.html
@@ -0,0 +1,5 @@
+<li id="log_entry_{{ entry.id }}" class="filterable">
+<span class="created monospace" style="float:right;">{{ entry.created }}</span>
+<span class="message icon {{ entry.severity }}">{{ entry.message }}</span>
+</li>
+