Less repetition, smaller size of "My Checks" HTML

static/js/checks.js

@@ -1,7 +1,10 @@
 $(function () {
 
     $(".my-checks-name").click(function() {
-        $("#update-name-form").attr("action", this.dataset.url);
+        var code = $(this).closest("tr.checks-row").attr("id");
+        var url = "/checks/" + code + "/name/";
+
+        $("#update-name-form").attr("action", url);
         $("#update-name-input").val(this.dataset.name);
         $("#update-tags-input").val(this.dataset.tags);
         $('#update-name-modal').modal("show");
@@ -139,8 +142,11 @@ $(function () {
     }
 
     $(".timeout-grace").click(function() {
-        $("#update-timeout-form").attr("action", this.dataset.url);
+        var code = $(this).closest("tr.checks-row").attr("id");
-        $("#update-cron-form").attr("action", this.dataset.url);
+        var url = "/checks/" + code + "/timeout/";
+
+        $("#update-timeout-form").attr("action", url);
+        $("#update-cron-form").attr("action", url);
 
         // Simple
         periodSlider.noUiSlider.set(this.dataset.timeout);
@@ -168,7 +174,10 @@ $(function () {
     $("#tz").selectize({onChange: updateCronPreview});
 
     $(".check-menu-remove").click(function() {
-        $("#remove-check-form").attr("action", this.dataset.url);
+        var code = $(this).closest("tr.checks-row").attr("id");
+        var url = "/checks/" + code + "/remove/";
+
+        $("#remove-check-form").attr("action", url);
         $(".remove-check-name").text(this.dataset.name);
         $('#remove-check-modal').modal("show");
 
@@ -189,7 +198,7 @@ $(function () {
         var token = $('input[name=csrfmiddlewaretoken]').val();
 
         var idx = $(this).index();
-        var checkCode = $(this).closest("tr").data("code");
+        var checkCode = $(this).closest("tr.checks-row").attr("id");
         var channelCode = $("#ch-" + idx).data("code");
 
         var url = "/checks/" + checkCode + "/channels/" + channelCode + "/enabled";
@@ -213,8 +222,7 @@ $(function () {
         $("#ping-details-body").text("Updating...");
         $('#ping-details-modal').modal("show");
 
-        var code = $(this).closest("tr").data("code");
+        var code = $(this).closest("tr.checks-row").attr("id");
-
         var lastPingUrl = "/checks/" + code + "/last_ping/";
         var token = $('input[name=csrfmiddlewaretoken]').val();
         $.ajax({
@@ -273,12 +281,21 @@ $(function () {
 
     });
 
-    $(".pause-check").click(function(e) {
+    $(".pause-li a").click(function(e) {
-        var url = e.target.getAttribute("data-url");
+        var code = $(this).closest("tr.checks-row").attr("id");
+        var url = "/checks/" + code + "/pause/";
+
         $("#pause-form").attr("action", url).submit();
         return false;
     });
 
+    $(".show-log").click(function(e) {
+        var code = $(this).closest("tr.checks-row").attr("id");
+        var url = "/checks/" + code + "/log/";
+        window.location = url;
+        return false;
+    });
+
     $('[data-toggle="tooltip"]').tooltip({
         html: true,
         container: "body",
@@ -323,9 +340,8 @@ $(function () {
                 for(var i=0, el; el=data.details[i]; i++) {
                     if (lastStatus[el.code] != el.status) {
                         lastStatus[el.code] = el.status;
-                        $("#si-" + el.code).attr("class", "status icon-" + el.status);
+                        $("#" + el.code + " span.status").attr("class", "status icon-" + el.status);
-                        $("#sl-" + el.code).attr("class", "label label-" + el.status).text(el.status);
+                        $("#" + el.code + " .pause-li").toggleClass("disabled", el.status == "paused");
-                        $("#pause-li-" + el.code).toggleClass("disabled", el.status == "paused");
                     }
 
                     if (lastPing[el.code] != el.last_ping) {

templates/front/my_checks_desktop.html

@@ -42,18 +42,17 @@
     </tr>
     {% for check in checks %}
     <tr
+        id="{{ check.code }}"
         class="checks-row"
-        data-code="{{ check.code }}"
         data-url="{{ check.url }}"
         data-email="{{ check.email }}">
 
         <td class="indicator-cell">
-            <span id="si-{{ check.code }}" class="status icon-{{ check.get_status }}" data-toggle="tooltip"></span>
+            <span class="status icon-{{ check.get_status }}" data-toggle="tooltip"></span>
         </td>
-        <td class="name-cell">
+        <td>
             <div data-name="{{ check.name }}"
                     data-tags="{{ check.tags }}"
-                    data-url="{% url 'hc-update-name' check.code %}"
                     class="my-checks-name {% if not check.name %}unnamed{% endif %}">
                 <div>{{ check.name|default:"unnamed"|break_underscore }}</div>
                 {% for tag in check.tags_list %}
@@ -86,7 +85,6 @@
         </td>
         <td class="timeout-cell hidden-xs">
             <div
-                data-url="{% url 'hc-update-timeout' check.code %}"
                 data-kind="{{ check.kind }}"
                 data-timeout="{{ check.timeout.total_seconds }}"
                 data-grace="{{ check.grace.total_seconds }}"
@@ -115,18 +113,12 @@
                 <span class="icon-settings" aria-hidden="true"></span>
                 </button>
                 <ul class="dropdown-menu">
-                    <li id="pause-li-{{ check.code }}" {% if check.status == "new" or check.status == "paused" %}class="disabled"{% endif %}>
+                    <li class="pause-li" {% if check.status == "new" or check.status == "paused" %}class="disabled"{% endif %}>
-                        <a class="pause-check"
+                        <a href="#">Pause Monitoring</a>
-                           href="#"
-                           data-url="{% url 'hc-pause' check.code %}">
-                           Pause Monitoring
-                        </a>
                     </li>
                     <li role="separator" class="divider"></li>
                     <li>
-                        <a href="{% url 'hc-log' check.code %}">
+                        <a class="show-log" href="#">Log</a>
-                            Log
-                        </a>
                     </li>
                     <li>
                         <a href="#" class="usage-examples">Usage Examples</a>
@@ -134,8 +126,7 @@
                     <li role="separator" class="divider"></li>
                     <li>
                         <a href="#" class="check-menu-remove"
-                            data-name="{{ check.name_then_code }}"
+                            data-name="{{ check.name_then_code }}">
-                            data-url="{% url 'hc-remove-check' check.code %}">
                             Remove
                         </a>
                     </li>