Can toggle integrations in Details page by clicking on them.

static/css/details.css

@@ -0,0 +1,89 @@
+#details-head h1 {
+    margin-bottom: 4px;
+}
+
+#details-head {
+    margin-bottom: 24px;
+}
+
+#details-head-actions {
+    text-align: right;
+    vertical-align: middle;
+
+}
+
+.details-block .status {
+    font-size: 32px;
+    width: 40px;
+}
+
+.details-block {
+    margin-bottom: 36px;
+    border: 1px #aaa;
+    border-radius: 3px;
+}
+
+.details-block .copy-btn {
+    width: 90px;
+}
+
+.details-block code {
+    display: block;
+    padding: 8px;
+    margin-bottom: 8px;
+    background: #f5f5f5;
+}
+
+.details-block form {
+    display: inline;
+}
+
+#details-status td {
+    padding: 8px;
+}
+
+#log-schedule th {
+    padding-top: 4px;
+}
+
+#details-integrations th {
+    width: 50px;
+    text-align: center;
+}
+
+#details-integrations .label {
+    background: #777777;
+}
+
+#details-integrations .on .label {
+    background: #22bc66;
+}
+
+#details-integrations tr:hover th, #details-integrations tr:hover td {
+    cursor: pointer;
+    background-color: #f5f5f5;
+}
+
+#log-schedule td {
+    padding: 4px 0 4px 8px;
+}
+
+#log-schedule th {
+    vertical-align: top;
+    font-weight: normal;
+    text-align: right;
+}
+
+#log-schedule .value {
+    font-weight: bold;
+}
+
+#log-schedule .subtitle {
+    color: #999;
+}
+
+#details-remove-check {
+    border-color: #d43f3a;
+    color: #d43f3a;
+    background: #FFF;
+}

static/css/log.css

@@ -1,81 +1,3 @@
-#details-head h1 {
-    margin-bottom: 4px;
-}
-
-#details-head {
-    margin-bottom: 24px;
-}
-
-#details-head-actions {
-    text-align: right;
-    vertical-align: middle;
-
-}
-
-.details-block .status {
-    font-size: 32px;
-    width: 40px;
-}
-
-.details-block {
-    margin-bottom: 36px;
-    border: 1px #aaa;
-    border-radius: 3px;
-}
-
-.details-block .copy-btn {
-    width: 90px;
-}
-
-.details-block code {
-    display: block;
-    padding: 8px;
-    margin-bottom: 8px;
-    background: #f5f5f5;
-}
-
-.details-block form {
-    display: inline;
-}
-
-#details-status td {
-    padding: 8px;
-}
-
-#log-schedule th {
-    padding-top: 4px;
-}
-
-#details-integrations th {
-    width: 40px;
-    text-align: center;
-}
-
-#log-schedule td {
-    padding: 4px 0 4px 8px;
-}
-
-#log-schedule th {
-    vertical-align: top;
-    font-weight: normal;
-    text-align: right;
-}
-
-#log-schedule .value {
-    font-weight: bold;
-}
-
-#log-schedule .subtitle {
-    color: #999;
-}
-
-#details-remove-check {
-    border-color: #d43f3a;
-    color: #d43f3a;
-    background: #FFF;
-}
-
-
 #format-switcher-container:before {
     content: " ";
 }

static/js/checks.js

@@ -192,5 +192,4 @@ $(function () {
         prompt("Press Ctrl+C to select:", text)
     });
 
-
 });

static/js/details.js

@@ -24,6 +24,19 @@ $(function () {
         }, 300);
     });
 
+    $("#details-integrations tr").click(function() {
+        var isOn = $(this).toggleClass("on").hasClass("on");
+        $(".label", this).text(isOn ? "ON" : "OFF");
+
+        var token = $('input[name=csrfmiddlewaretoken]').val();
+        $.ajax({
+            url: this.dataset.url,
+            type: "post",
+            headers: {"X-CSRFToken": token},
+            data: {"state": isOn ? "on" : "off"}
+        });
+    })
+
     var code = document.getElementById("edit-timeout").dataset.code;
     var statusUrl = "/checks/" + code + "/status/";
     var lastStatusText = "";

templates/base.html

@@ -32,6 +32,7 @@
     <link rel="stylesheet" href="{% static 'css/syntax.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/channels.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/channel_checks.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'css/details.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/log.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/add_pushover.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/add_webhook.css' %}" type="text/css">

templates/front/details.html

@@ -115,13 +115,11 @@
             <h2>Notification Methods</h2>
             <table id="details-integrations" class="table">
             {% for channel in channels %}
-                <tr>
+                <tr data-url="{% url 'hc-switch-channel' check.code channel.code %}" {% if channel in check.channel_set.all %}class="on"{% endif %}>
                     <th>
-                        {% if channel in check.channel_set.all %}
+                        <span class="label">
-                        <span class="label label-success">ON</span>
+                            {% if channel in check.channel_set.all %}ON{% else %}OFF{% endif %}
-                        {% else %}
+                        </span>
-                        <span class="label label-default">OFF</span>
-                        {% endif %}
                     </th>
                     <td>
                         <span class="icon-{{ channel.kind }}"></span>