Optimize HTML in the "list of checks" page

In a project with ~300 checks,

* HTML size (uncompressed) before: 772KiB
* HTML size (uncompressed) after: 703KiB

hc/front/views.py

@@ -245,7 +245,7 @@ def status(request, code):
             {
                 "code": str(check.code),
                 "status": check.get_status(),
-                "last_ping": LAST_PING_TMPL.render(ctx),
+                "last_ping": LAST_PING_TMPL.render(ctx).strip(),
                 "started": check.last_start is not None,
             }
         )

static/css/my_checks_desktop.css

@@ -55,6 +55,10 @@
     padding-left: 15px;
 }
 
+#checks-table .integrations {
+    white-space: nowrap;
+}
+
 #checks-table .integrations span {
     padding: 10px 2px;
     display: inline-block;
@@ -103,28 +107,20 @@ button.copy-link:hover {
     text-decoration: underline;
 }
 
-
-
-
 tr:hover .copy-link {
     opacity: 1
 }
 
-#checks-table .url-cell,
-#checks-table .integrations-cell,
-#checks-table .timeout-cell {
-    white-space: nowrap;
-}
-
-.url-cell .base {
-    color: var(--text-muted);
-}
-
 .my-checks-url {
     font-family: "Lucida Console", Monaco, monospace;
     font-size: 11.7px;
     position: relative;
     line-height: 36px;
+    white-space: nowrap;
+}
+
+.my-checks-url .base {
+    color: var(--text-muted);
 }
 
 .checks-subline-duration {

templates/front/my_checks_desktop.html

@@ -52,13 +52,7 @@
         <th></th>
     </tr>
     {% for check in checks %}
-    <tr
-        id="{{ check.code }}"
-        class="checks-row"
-        data-url="{{ check.url }}"
-        data-email="{{ check.email }}"
-        {% if check in hidden_checks %}style="display: none"{% endif %}>
-
+    <tr id="{{ check.code }}" class="checks-row" {% if check in hidden_checks %}style="display: none"{% endif %}>
         <td class="indicator-cell">
             <span class="status ic-{{ check.get_status }}" data-toggle="tooltip"></span>
             <div class="spinner {% if check.last_start %}started{% endif %}">
@@ -78,17 +72,15 @@
                 {% endfor %}
             </div>
         </td>
-        <td class="url-cell hidden-xs hidden-sm">
+        <td class="hidden-xs hidden-sm">
             <span class="my-checks-url">
                 <span class="base hidden-md">{{ ping_endpoint }}</span>{{ check.code }}
             </span>
-            <button
-                class="copy-link hidden-sm"
-                data-clipboard-text="{{ check.url }}">
+            <button class="copy-link" data-clipboard-text="{{ check.url }}">
                 copy
             </button>
         </td>
-        <td class="integrations-cell hidden-xs">
+        <td class="hidden-xs">
             {% if channels|length <= 10 %}
                 <div class="integrations">
                 {% spaceless %}
@@ -101,7 +93,7 @@
                 {{ check.channel_set.all|length }} of {{ channels|length }}
             {% endif %}
         </td>
-        <td class="timeout-cell hidden-xs">
+        <td class="hidden-xs">
             <div
                 data-kind="{{ check.kind }}"
                 data-timeout="{{ check.timeout.total_seconds }}"
@@ -131,7 +123,6 @@
                 <span class="ic-paused"></span>
             </button>
             {% endif %}
-
             <button title="Show Details" class="btn btn-default show-log" type="button">
                 <span class="ic-dots"></span>
             </button>