Rename channels to integrations. Move "Add Integration" functionality to separate pages to make room for setup instructions.

hc/api/models.py

@@ -126,7 +126,8 @@ class Channel(models.Model):
 
             n.save()
         elif self.kind == "slack":
-            text = render_to_string("slack_message.html", {"check": check})
+            tmpl = "integrations/slack_message.html"
+            text = render_to_string(tmpl, {"check": check})
             payload = {
                 "text": text,
                 "username": "healthchecks.io",
@@ -138,7 +139,8 @@ class Channel(models.Model):
             n.status = r.status_code
             n.save()
         elif self.kind == "hipchat":
-            text = render_to_string("hipchat_message.html", {"check": check})
+            tmpl = "integrations/hipchat_message.html"
+            text = render_to_string(tmpl, {"check": check})
             payload = {
                 "message": text,
                 "color": "green" if check.status == "up" else "red",

hc/front/urls.py

@@ -14,11 +14,16 @@ urlpatterns = [
     url(r'^pricing/$',                  views.pricing, name="hc-pricing"),
     url(r'^docs/$',                     views.docs, name="hc-docs"),
     url(r'^about/$',                    views.about, name="hc-about"),
-    url(r'^channels/$',                 views.channels, name="hc-channels"),
-    url(r'^channels/add/$',             views.add_channel, name="hc-add-channel"),
-    url(r'^channels/([\w-]+)/checks/$', views.channel_checks, name="hc-channel-checks"),
-    url(r'^channels/([\w-]+)/remove/$', views.remove_channel, name="hc-remove-channel"),
-    url(r'^channels/([\w-]+)/verify/([\w-]+)/$',
+    url(r'^integrations/$',                 views.channels, name="hc-channels"),
+    url(r'^integrations/add/$',             views.add_channel, name="hc-add-channel"),
+    url(r'^integrations/add_email/$',       views.add_email, name="hc-add-email"),
+    url(r'^integrations/add_webhook/$',     views.add_webhook, name="hc-add-webhook"),
+    url(r'^integrations/add_pd/$',          views.add_pd, name="hc-add-pd"),
+    url(r'^integrations/add_slack/$',       views.add_slack, name="hc-add-slack"),
+    url(r'^integrations/add_hipchat/$',     views.add_hipchat, name="hc-add-hipchat"),
+    url(r'^integrations/([\w-]+)/checks/$', views.channel_checks, name="hc-channel-checks"),
+    url(r'^integrations/([\w-]+)/remove/$', views.remove_channel, name="hc-remove-channel"),
+    url(r'^integrations/([\w-]+)/verify/([\w-]+)/$',
         views.verify_email, name="hc-verify-email"),
 
 ]

hc/front/views.py

@@ -271,3 +271,33 @@ def remove_channel(request, code):
     channel.delete()
 
     return redirect("hc-channels")
+
+
+@login_required
+def add_email(request):
+    ctx = {"page": "channels"}
+    return render(request, "integrations/add_email.html", ctx)
+
+
+@login_required
+def add_webhook(request):
+    ctx = {"page": "channels"}
+    return render(request, "integrations/add_webhook.html", ctx)
+
+
+@login_required
+def add_pd(request):
+    ctx = {"page": "channels"}
+    return render(request, "integrations/add_pd.html", ctx)
+
+
+@login_required
+def add_slack(request):
+    ctx = {"page": "channels"}
+    return render(request, "integrations/add_slack.html", ctx)
+
+
+@login_required
+def add_hipchat(request):
+    ctx = {"page": "channels"}
+    return render(request, "integrations/add_hipchat.html", ctx)

static/css/channels.css

@@ -74,4 +74,62 @@ table.channels-table > tbody > tr > th {
 
 .channel-row:hover .channel-remove {
     visibility: visible;
-}
+}
+
+.ai-title {
+    margin-top: 2em;
+}
+
+.add-integration {
+    list-style: none;
+    padding: 0;
+}
+
+.add-integration li {
+    position: relative;
+    padding: 8px 0;
+    border-radius: 4px;
+}
+
+.add-integration li:hover {
+    background: #eee;
+}
+
+.add-integration img {
+    position: absolute;
+    left: 16px;
+    top: 50%;
+    margin-top: -20px;
+    width: 40px;
+    height: 40px;
+}
+
+.add-integration h2 {
+    font-size: 18px;
+    margin-left: 72px;
+}
+
+.add-integration p {
+    margin-left: 72px;
+}
+
+.add-integration a {
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    margin-top: -17px;
+}
+
+
+.ai-icon img {
+    width: 48px;
+    height: 48px;
+}
+
+.add-integration h2 {
+    margin-top: 0;
+}
+
+.setup-guide h2, .integration-settings h2 {
+    margin: 0 0 1em 0;
+}

templates/base.html

@@ -65,7 +65,7 @@
                     </li>
 
                     <li {% if page == 'channels' %} class="active" {% endif %}>
-                        <a href="{% url 'hc-channels' %}">Channels</a>
+                        <a href="{% url 'hc-channels' %}">Integrations</a>
                     </li>
 
                 {% endif %}

templates/front/channels.html

@@ -6,8 +6,7 @@
 
 {% block content %}
 <div class="row">
-    <div class="col-sm-12">
-    <h1>Notification Channels</h1>
+<div class="col-sm-12">
     <table class="table channels-table">
         {% if channels %}
         <tr>
@@ -59,75 +58,68 @@
         </tr>
         {% endfor %}
         {% endif %}
-        <tr>
-            <th colspan="2" class="channels-add-title">
-                Add Notification Channel
-            </th>
-        </tr>
-        <tr>
-            <form method="post" action="{% url 'hc-add-channel' %}">
-            <td>
-                <select id="add-channel-kind" class="form-control" name="kind">
-                    <option value="email">Email</option>
-                    <option value="webhook">Webhook</option>
-                    <option value="slack">Slack</option>
-                    <option value="hipchat">HipChat</option>
-                    <option value="pd">PagerDuty</option>
-                </select>
-            </td>
-            <td class="form-inline">
-                {% csrf_token %}
-                <input
-                    id="add-channel-value"
-                    name="value"
-                    class="form-control"
-                    type="text"
-                    placeholder="[email protected]" />
-                <button type="submit" class="btn btn-success">Add</button>
-            </td>
-            <td>
-            </td>
-            </form>
-        </tr>
-        <tr>
-            <td colspan="3" class="channels-add-help">
-                <p class="email">
-                    Healthchecks.io will send an email to the specified
-                    address when a check goes
-                    <span class="word-up">up</span> or <span class="word-down">down</span>.
-                </p>
-                <p class="channels-help-hidden webhook">
-                    Healthchecks.io will request the specified URL when
-                    a check goes
-                    <span class="word-down">down</span>.
-                </p>
-                <p class="channels-help-hidden pd">
-                    Healthchecks.io will create an incident on PagerDuty  when
-                    a check goes
-                    <span class="word-down">down</span> and will resolve it
-                    when same check goes <span class="word-up">up</span>
-                </p>
-                <p class="channels-help-hidden slack">
-                    Healthchecks.io will post to a Slack channel when
-                    a check goes
-                    <span class="word-up">up</span> or <span class="word-down">down</span>.
-                </p>
-                <p class="channels-help-hidden hipchat">
-                    Healthchecks.io will post to a HipChat channel when
-                    a check goes
-                    <span class="word-up">up</span> or <span class="word-down">down</span>.
-                </p>
-            </td>
-        </tr>
-
     </table>
-    </div>
+
+
+    <h1 class="ai-title">Add More</h1>
+    <ul class="add-integration">
+        <li>
+            <img src="{% static 'img/integrations/email.png' %}"
+                alt="Email icon" />
+
+            <h2>Email</h2>
+            <p>Get an email message when check goes up or down.</p>
+
+            <a href="{% url 'hc-add-email' %}" class="btn btn-primary">Add Integration</a>
+        </li>
+        <li>
+            <img src="{% static 'img/integrations/webhook.png' %}"
+                alt="Webhook icon" />
+
+            <h2>WebHook</h2>
+            <p>Receive a HTTP callback when a check goes down.</p>
+
+            <a href="{% url 'hc-add-webhook' %}" class="btn btn-primary">Add Integration</a>
+        </li>
+        <li>
+            <img src="{% static 'img/integrations/pd.png' %}"
+                alt="PagerDuty icon" />
+
+            <h2>PagerDuty</h2>
+            <p>On-call scheduling, alerting, and incident tracking.</p>
+
+            <a href="{% url 'hc-add-pd' %}" class="btn btn-primary">Add Integration</a>
+        </li>
+        <li>
+            <img src="{% static 'img/integrations/slack.png' %}"
+                alt="Slack icon" />
+
+            <h2>Slack</h2>
+            <p>A messaging app for teams.</p>
+
+            <a href="{% url 'hc-add-slack' %}" class="btn btn-primary">Add Integration</a>
+        </li>
+        <li>
+            <img src="{% static 'img/integrations/hipchat.png' %}"
+                alt="HipChat icon" />
+
+            <h2>HipChat</h2>
+            <p>Group and private chat, file sharing, and integrations.</p>
+
+            <a href="{% url 'hc-add-hipchat' %}" class="btn btn-primary">Add Integration</a>
+        </li>
+    </ul>
+
+
+
+</div>
 </div>
 
 <div id="checks-modal" class="modal">
     <div class="modal-dialog">
             <div class="modal-content">
-
+                <h2>Email</h2>
+                <p>Get an email message when check goes up or down</p>
             </div>
         </form>
     </div>

templates/integrations/add_email.html

@@ -0,0 +1,57 @@
+{% extends "base.html" %}
+{% load compress humanize staticfiles hc_extras %}
+
+{% block title %}Notification Channels - healthchecks.io{% endblock %}
+
+
+{% block content %}
+<div class="row">
+<div class="col-sm-12">
+    <h1>Email</h1>
+
+    <p>Get an email message when check goes up or down.</p>
+
+    <p>
+        <strong>Tip:</strong>
+        Add multiple email addresses, to notify multiple team members.
+    </p>
+
+    <p>
+        <strong>Confirmation needed.</strong>
+        After entering an email address, healthchecks.io will send out a confirmation link.
+        Only confirmed addresses will receive notifications.
+    </p>
+
+    <h2>Integration Settings</h2>
+
+    <form method="post" class="form-horizontal" action="{% url 'hc-add-channel' %}">
+        {% csrf_token %}
+        <input type="hidden" name="kind" value="email" />
+        <div class="form-group">
+            <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
+            <div class="col-sm-3">
+                <input type="email" class="form-control" name="value" placeholder="[email protected]">
+            </div>
+        </div>
+        <div class="form-group">
+            <div class="col-sm-offset-2 col-sm-10">
+                <button type="submit" class="btn btn-primary">Save Integration</button>
+            </div>
+        </div>
+    </form>
+</div>
+
+
+
+</div>
+</div>
+
+
+{% endblock %}
+
+{% block scripts %}
+{% compress js %}
+<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
+<script src="{% static 'js/bootstrap.min.js' %}"></script>
+{% endcompress %}
+{% endblock %}

templates/integrations/add_hipchat.html

@@ -0,0 +1,46 @@
+{% extends "base.html" %}
+{% load compress humanize staticfiles hc_extras %}
+
+{% block title %}Notification Channels - healthchecks.io{% endblock %}
+
+
+{% block content %}
+<div class="row">
+<div class="col-sm-12">
+    <h1>HipChat</h1>
+
+    <p>Group and private chat, file sharing, and integrations.</p>
+
+    <h2>Integration Settings</h2>
+
+    <form method="post" class="form-horizontal" action="{% url 'hc-add-channel' %}">
+        {% csrf_token %}
+        <input type="hidden" name="kind" value="hipchat" />
+        <div class="form-group">
+            <label for="inputEmail3" class="col-sm-2 control-label">Callback URL</label>
+            <div class="col-sm-3">
+                <input type="text" class="form-control" name="value" placeholder="">
+            </div>
+        </div>
+        <div class="form-group">
+            <div class="col-sm-offset-2 col-sm-10">
+                <button type="submit" class="btn btn-primary">Save Integration</button>
+            </div>
+        </div>
+    </form>
+</div>
+
+
+
+</div>
+</div>
+
+
+{% endblock %}
+
+{% block scripts %}
+{% compress js %}
+<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
+<script src="{% static 'js/bootstrap.min.js' %}"></script>
+{% endcompress %}
+{% endblock %}

templates/integrations/add_pd.html

@@ -0,0 +1,46 @@
+{% extends "base.html" %}
+{% load compress humanize staticfiles hc_extras %}
+
+{% block title %}Notification Channels - healthchecks.io{% endblock %}
+
+
+{% block content %}
+<div class="row">
+<div class="col-sm-12">
+    <h1>PagerDuty</h1>
+
+    <p>On-call scheduling, alerting, and incident tracking.</p>
+
+    <h2>Integration Settings</h2>
+
+    <form method="post" class="form-horizontal" action="{% url 'hc-add-channel' %}">
+        {% csrf_token %}
+        <input type="hidden" name="kind" value="pd" />
+        <div class="form-group">
+            <label for="inputEmail3" class="col-sm-2 control-label">Service Key</label>
+            <div class="col-sm-3">
+                <input type="text" class="form-control" name="value" placeholder="">
+            </div>
+        </div>
+        <div class="form-group">
+            <div class="col-sm-offset-2 col-sm-10">
+                <button type="submit" class="btn btn-primary">Save Integration</button>
+            </div>
+        </div>
+    </form>
+</div>
+
+
+
+</div>
+</div>
+
+
+{% endblock %}
+
+{% block scripts %}
+{% compress js %}
+<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
+<script src="{% static 'js/bootstrap.min.js' %}"></script>
+{% endcompress %}
+{% endblock %}

templates/integrations/add_slack.html

@@ -0,0 +1,46 @@
+{% extends "base.html" %}
+{% load compress humanize staticfiles hc_extras %}
+
+{% block title %}Notification Channels - healthchecks.io{% endblock %}
+
+
+{% block content %}
+<div class="row">
+<div class="col-sm-12">
+    <h1>Slack</h1>
+
+    <p>A messaging app for teams.</p>
+
+    <h2>Integration Settings</h2>
+
+    <form method="post" class="form-horizontal" action="{% url 'hc-add-channel' %}">
+        {% csrf_token %}
+        <input type="hidden" name="kind" value="slack" />
+        <div class="form-group">
+            <label for="inputEmail3" class="col-sm-2 control-label">Callback URL</label>
+            <div class="col-sm-3">
+                <input type="text" class="form-control" name="value" placeholder="">
+            </div>
+        </div>
+        <div class="form-group">
+            <div class="col-sm-offset-2 col-sm-10">
+                <button type="submit" class="btn btn-primary">Save Integration</button>
+            </div>
+        </div>
+    </form>
+</div>
+
+
+
+</div>
+</div>
+
+
+{% endblock %}
+
+{% block scripts %}
+{% compress js %}
+<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
+<script src="{% static 'js/bootstrap.min.js' %}"></script>
+{% endcompress %}
+{% endblock %}

templates/integrations/add_webhook.html

@@ -0,0 +1,46 @@
+{% extends "base.html" %}
+{% load compress humanize staticfiles hc_extras %}
+
+{% block title %}Notification Channels - healthchecks.io{% endblock %}
+
+
+{% block content %}
+<div class="row">
+<div class="col-sm-12">
+    <h1>Webhook</h1>
+
+    <p>Receive a HTTP callback when a check goes down.</p>
+
+    <h2>Integration Settings</h2>
+
+    <form method="post" class="form-horizontal" action="{% url 'hc-add-channel' %}">
+        {% csrf_token %}
+        <input type="hidden" name="kind" value="webhook" />
+        <div class="form-group">
+            <label for="inputEmail3" class="col-sm-2 control-label">URL</label>
+            <div class="col-sm-3">
+                <input type="text" class="form-control" name="value" placeholder="http://...">
+            </div>
+        </div>
+        <div class="form-group">
+            <div class="col-sm-offset-2 col-sm-10">
+                <button type="submit" class="btn btn-primary">Save Integration</button>
+            </div>
+        </div>
+    </form>
+</div>
+
+
+
+</div>
+</div>
+
+
+{% endblock %}
+
+{% block scripts %}
+{% compress js %}
+<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
+<script src="{% static 'js/bootstrap.min.js' %}"></script>
+{% endcompress %}
+{% endblock %}