diff --git a/hc/api/models.py b/hc/api/models.py index 6fe4bd51..6069f4e6 100644 --- a/hc/api/models.py +++ b/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", diff --git a/hc/front/urls.py b/hc/front/urls.py index 9df00692..2c5289b3 100644 --- a/hc/front/urls.py +++ b/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"), ] diff --git a/hc/front/views.py b/hc/front/views.py index 8a0b5e9d..804e0b13 100644 --- a/hc/front/views.py +++ b/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) diff --git a/static/css/channels.css b/static/css/channels.css index 228d3140..88d71db7 100644 --- a/static/css/channels.css +++ b/static/css/channels.css @@ -74,4 +74,62 @@ table.channels-table > tbody > tr > th { .channel-row:hover .channel-remove { visibility: visible; -} \ No newline at end of file +} + +.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; +} diff --git a/static/img/integrations/email.png b/static/img/integrations/email.png new file mode 100644 index 00000000..ebc4d8c7 Binary files /dev/null and b/static/img/integrations/email.png differ diff --git a/static/img/integrations/hipchat.png b/static/img/integrations/hipchat.png new file mode 100644 index 00000000..621aa634 Binary files /dev/null and b/static/img/integrations/hipchat.png differ diff --git a/static/img/integrations/pd.png b/static/img/integrations/pd.png new file mode 100644 index 00000000..8836c355 Binary files /dev/null and b/static/img/integrations/pd.png differ diff --git a/static/img/integrations/slack.png b/static/img/integrations/slack.png new file mode 100644 index 00000000..edf63438 Binary files /dev/null and b/static/img/integrations/slack.png differ diff --git a/static/img/integrations/webhook.png b/static/img/integrations/webhook.png new file mode 100644 index 00000000..5ae600c7 Binary files /dev/null and b/static/img/integrations/webhook.png differ diff --git a/templates/base.html b/templates/base.html index 9f58b211..be4a2b2a 100644 --- a/templates/base.html +++ b/templates/base.html @@ -65,7 +65,7 @@
  • - Channels + Integrations
    • {% endif %} diff --git a/templates/front/channels.html b/templates/front/channels.html index 77167aaf..e94bffa3 100644 --- a/templates/front/channels.html +++ b/templates/front/channels.html @@ -6,8 +6,7 @@ {% block content %}
    -
    -

    Notification Channels

    +
    {% if channels %} @@ -59,75 +58,68 @@ {% endfor %} {% endif %} - - - - - - - - - - - - - -
    - Add Notification Channel -
    - - - {% csrf_token %} - - - -
    - -

    - Healthchecks.io will request the specified URL when - a check goes - down. -

    -

    - Healthchecks.io will create an incident on PagerDuty when - a check goes - down and will resolve it - when same check goes up -

    -

    - Healthchecks.io will post to a Slack channel when - a check goes - up or down. -

    -

    - Healthchecks.io will post to a HipChat channel when - a check goes - up or down. -

    -
    -
    + + +

    Add More

    + + + + +
    + + +{% endblock %} + +{% block scripts %} +{% compress js %} + + +{% endcompress %} +{% endblock %} \ No newline at end of file diff --git a/templates/integrations/add_hipchat.html b/templates/integrations/add_hipchat.html new file mode 100644 index 00000000..89423a51 --- /dev/null +++ b/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 %} +
    +
    +

    HipChat

    + +

    Group and private chat, file sharing, and integrations.

    + +

    Integration Settings

    + +
    + {% csrf_token %} + +
    + +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + + + +
    + + + +{% endblock %} + +{% block scripts %} +{% compress js %} + + +{% endcompress %} +{% endblock %} \ No newline at end of file diff --git a/templates/integrations/add_pd.html b/templates/integrations/add_pd.html new file mode 100644 index 00000000..8fea40b2 --- /dev/null +++ b/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 %} +
    +
    +

    PagerDuty

    + +

    On-call scheduling, alerting, and incident tracking.

    + +

    Integration Settings

    + +
    + {% csrf_token %} + +
    + +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + + + +
    + + + +{% endblock %} + +{% block scripts %} +{% compress js %} + + +{% endcompress %} +{% endblock %} \ No newline at end of file diff --git a/templates/integrations/add_slack.html b/templates/integrations/add_slack.html new file mode 100644 index 00000000..41950cb2 --- /dev/null +++ b/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 %} +
    +
    +

    Slack

    + +

    A messaging app for teams.

    + +

    Integration Settings

    + +
    + {% csrf_token %} + +
    + +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + + + +
    + + + +{% endblock %} + +{% block scripts %} +{% compress js %} + + +{% endcompress %} +{% endblock %} \ No newline at end of file diff --git a/templates/integrations/add_webhook.html b/templates/integrations/add_webhook.html new file mode 100644 index 00000000..44215223 --- /dev/null +++ b/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 %} +
    +
    +

    Webhook

    + +

    Receive a HTTP callback when a check goes down.

    + +

    Integration Settings

    + +
    + {% csrf_token %} + +
    + +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + + + +
    + + + +{% endblock %} + +{% block scripts %} +{% compress js %} + + +{% endcompress %} +{% endblock %} \ No newline at end of file diff --git a/templates/hipchat_message.html b/templates/integrations/hipchat_message.html similarity index 100% rename from templates/hipchat_message.html rename to templates/integrations/hipchat_message.html diff --git a/templates/slack_message.html b/templates/integrations/slack_message.html similarity index 100% rename from templates/slack_message.html rename to templates/integrations/slack_message.html