activity monitor: style tables and make them sortable.

(imported from commit 03c5002e6a289ca123b47f99c065b41cfc013762)

templates/zephyr/activity.html

@@ -7,31 +7,38 @@
 {% for name, has_pointer, rows in data %}
 
     <h2>{{ name }} usage</h2>
-    <table class="table">
+    <table class="table sortable table-striped table-bordered">
+    <thead class="activity_head">
     <tr>
-    <td>User</td>
-    <td>Last get_updates</td>
-    <td>Last send_message</td>
+    <th>User</th>
+    <th>Last get_updates</th>
+    <th>Last send_message</th>
     {% if has_pointer %}
-    <td>Last update_pointer</td>
-    <td>Number of pointer updates</td>
+    <th>Last update_pointer</th>
+    <th>Number of pointer updates</th>
     {% endif %}
-    <td>Number of messages sent</td>
+    <th>Number of messages sent</th>
     </tr>
+    </thead>
+    <tbody>
     {% for row in rows %}
         <tr>
         <td>{{ row.email }}</td>
-        <td>{{ row.get_updates_last }}</td>
-        <td>{{ row.send_message_last }}</td>
+        <td sorttable_customkey="{{ row.get_updates_last|date:'YmdHi' }}">{{ row.get_updates_last }}</td>
+        <td sorttable_customkey="{{ row.send_message_last|date:'YmdHi' }}">{{ row.send_message_last }}</td>
         {% if has_pointer %}
-        <td>{{ row.update_pointer_last }}</td>
+        <td sorttable_customkey="{{ row.update_pointer_last|date:'YmdHi' }}">{{ row.update_pointer_last }}</td>
         <td>{{ row.update_pointer_count }}</td>
         {% endif %}
         <td>{{ row.send_message_count }}</td>
         </tr>
     {% endfor %}
+    </tbody>
     </table>
 
 {% endfor %}
 
+<script type="text/javascript" src="/static/third/sorttable/sorttable.js"></script>
+<link href='{{ static_hidden }}styles/activity.css?dummy_time={% now "U" %}' rel='stylesheet'>
+
 {% endblock %}

zephyr/static-access-control/4nrjx8cwce2bka8r/styles/activity.css

@@ -0,0 +1 @@
+../../../static/styles/activity.css

zephyr/static/styles/activity.css

@@ -0,0 +1,3 @@
+.activity_head {
+    background-color: aliceblue;
+}