"Integration Details" modal dialogs for webhook integrations.

hc/front/tests/test_channels.py

@@ -32,9 +32,10 @@ class ChannelsTestCase(BaseTestCase):
         r = self.client.get("/integrations/")
 
         self.assertEqual(r.status_code, 200)
-        self.assertContains(r, "<td>http://down.example.com</td>")
+        # These are inside a modal:
-        self.assertContains(r, "<td>http://up.example.com</td>")
+        self.assertContains(r, "<code>http://down.example.com</code>")
-        self.assertContains(r, "<td>foobar</td>")
+        self.assertContains(r, "<code>http://up.example.com</code>")
+        self.assertContains(r, "<code>foobar</code>")
 
     def test_it_shows_pushover_details(self):
         ch = Channel(kind="po", user=self.alice)

static/css/channels.css

@@ -193,6 +193,26 @@ table.channels-table > tbody > tr > th {
     font-size: 16px;
 }
 
+.channel-details table {
+    width: 100%;
+}
+
+.channel-details td, .channel-details th {
+    padding: 15px;
+    border-bottom: 1px solid #eee;
+}
+
+.channel-details tr:last-child td, .channel-details tr:last-child th {
+    border-bottom: 0;
+}
+
+
+.channel-details .missing {
+    color: #999;
+    font-style: italic;
+}
+
+
 /* Add Webhook */
 
 .webhook-header input.form-control {

templates/front/channels.html

@@ -70,32 +70,19 @@
                         {{ ch.value }}
                     {% endif %}
                 {% elif ch.kind == "webhook" %}
-                    <table>
+                    {% if ch.url_down %}
-                        {% if ch.url_down %}
+                        <span class="preposition">down</span> {{ ch.url_down }}
-                        <tr>
+                    {% endif %}
-                            <td class="preposition">down&nbsp;</td>
+                    {% if ch.url_up and not ch.url_down %}
-                            <td>{{ ch.url_down }}</td>
+                        <span class="preposition">up</span> {{ ch.url_up }}
-                        </tr>
+                    {% endif %}
-                        {% endif %}
+                    {% if ch.url_up or ch.post_data or ch.headers %}
-                        {% if ch.url_up %}
+                        <a href="#"
-                        <tr>
+                           data-toggle="modal"
-                            <td class="preposition">up&nbsp;</td>
+                           data-target="#channel-details-{{ ch.code }}">(details)</a>
-                            <td>{{ ch.url_up }}</td>
+                    {% endif %}
-                        </tr>
+
-                        {% endif %}
+
-                        {% if ch.post_data %}
-                        <tr>
-                            <td class="preposition">body&nbsp;</td>
-                            <td>{{ ch.post_data }}</td>
-                        </tr>
-                        {% endif %}
-                        {% if ch.headers %}
-                        <tr>
-                            <td class="preposition">headers&nbsp;</td>
-                            <td>{{ ch.headers }}</td>
-                        </tr>
-                        {% endif %}
-                    </table>
                 {% elif ch.kind == "pushbullet" %}
                     <span class="preposition">API key</span>
                     {{ ch.value }}
@@ -329,6 +316,72 @@
     </div>
 </div>
 
+{% for ch in channels %}
+{% if ch.kind == "webhook" %}
+<div id="channel-details-{{ ch.code }}" class="modal channel-details">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal">&times;</button>
+                <h4>Integration Details</h4>
+            </div>
+            <div class="modal-body">
+            <table>
+                <tr>
+                    <th>Request Method</th>
+                    <td>
+                        {% if ch.post_data %}
+                        POST
+                        {% else %}
+                        GET
+                        {% endif %}
+                    </td>
+                </tr>
+                <tr>
+                    <th>URL for "down" events</th>
+                    <td>
+                        {% if ch.url_down %}
+                        <code>{{ ch.url_down }}</code>
+                        {% else %}
+                        <span class="missing">(not set)</span>
+                        {% endif %}
+                    </td>
+                </tr>
+                {% if ch.url_up %}
+                <tr>
+                    <th>URL for "up" events</th>
+                    <td>
+                        {% if ch.url_up %}
+                        <code>{{ ch.url_up }}</code>
+                        {% else %}
+                        <span class="missing">(not set)</span>
+                        {% endif %}
+                    </td>
+                </tr>
+                {% endif %}
+                {% if ch.post_data %}
+                <tr>
+                    <th>POST data</th>
+                    <td><code>{{ ch.post_data }}</code></td>
+                </tr>
+                {% endif %}
+                {% for k, v in ch.headers.items %}
+                <tr>
+                    <th>Header <code>{{ k }}</code></th>
+                    <td><code>{{ v }}</code></td>
+                </tr>
+                {% endfor %}
+            </table>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+{% endif %}
+{% endfor %}
+
 {% endblock %}
 
 {% block scripts %}