Add page load metrics to footer

* wqflask/wqflask/__init__.py (before_request): New function. Add
method for calculating total request_time to global context.
* wqflask/wqflask/templates/base.html:
- Display total server load time.
- Display total page rendering time, and add js functionality to
calculate it.

2 files changed, 20 insertions, 1 deletions

diff --git a/wqflask/wqflask/__init__.py b/wqflask/wqflask/__init__.py
index 7ed9c7b8..9afeb3c4 100644
--- a/wqflask/wqflask/__init__.py
+++ b/wqflask/wqflask/__init__.py
@@ -1,8 +1,10 @@
 from __future__ import absolute_import, division, print_function
 
 import sys
+import time
 import jinja2
 
+from flask import g
 from flask import Flask
 from utility import formatting
 
@@ -19,6 +21,13 @@ app.jinja_env.globals.update(
     undefined=jinja2.StrictUndefined,
     numify=formatting.numify)
 
+
+@app.before_request
+def before_request():
+   g.request_start_time = time.time()
+   g.request_time = lambda: "%.5fs" % (time.time() - g.request_start_time)
+
+
 from wqflask.api import router
 from wqflask import group_manager
 from wqflask import resource_manager
diff --git a/wqflask/wqflask/templates/base.html b/wqflask/wqflask/templates/base.html
index b44538cf..0f4e5ef5 100644
--- a/wqflask/wqflask/templates/base.html
+++ b/wqflask/wqflask/templates/base.html
@@ -9,6 +9,9 @@
 
     <meta name="description" content="">
     <meta name="author" content="">
+    <script type="text/javascript">
+     var pageLoadStart = Date.now();
+    </script>
     <link rel="icon" type="image/png" sizes="64x64" href="/static/new/images/CITGLogo.png">
     <link rel="apple-touch-icon" type="image/png" sizes="64x64" href="/static/new/images/CITGLogo.png">
     <link REL="stylesheet" TYPE="text/css" href="/static/packages/bootstrap/css/bootstrap.css" />
@@ -203,6 +206,7 @@
             {% if version: %}
             <p><small>GeneNetwork {{ version }}</small></p>
             {% endif %}
+            <p> It took the server {{ g.request_time() }} seconds to process this page.</p>
 
         </div>
         <div class="col-xs-2">
@@ -256,6 +260,12 @@
     {% block js %}
     {% endblock %}
 
-
+    <script type="text/javascript">
+     $(window).load(function() {
+         let timeToLoad = document.createElement("p");
+         timeToLoad.innerHTML = "It took your browser " + ((Date.now() - pageLoadStart)/1000) + " second(s) to render this page";
+         document.querySelector("footer .row .col-xs-6").appendChild(timeToLoad);
+     });
+    </script>
 </body>
 </html>