healthchecks/templates/front/channels.html

{% extends "base.html" %}
{% load compress humanize static hc_extras %}

{% block title %}Integrations - {% site_name %}{% endblock %}


{% block content %}
<div class="row">
{% if messages %}
<div class="col-sm-12">
    {% for message in messages %}
        <p class="alert alert-{{ message.tags }}">{{ message }}</p>
    {% endfor %}
</div>
{% endif %}

<div class="col-sm-12">
    <table class="table channels-table">
        {% if channels %}
        <tr>
            <th>Type</th>
            <th>Value</th>
            <th>Assigned Checks</th>
            <th>Last Notification</th>
            <th></th>
        </tr>
        {% for ch in channels %}
        <tr class="channel-row">
            <td>{{ ch.get_kind_display }}</td>
            <td class="value-cell">
                {% if ch.kind == "email" %}
                    <span class="preposition">to</span>
                    {{ ch.value }}
                    {% if not ch.email_verified %}
                        {% if ch.latest_notification and ch.latest_notification.error %}
                            <span class="channel-disabled">
                            (bounced, disabled)
                            </span>
                        {% else %}
                            <span class="channel-unconfirmed">
                            (unconfirmed)
                            </span>
                        {% endif %}
                        </span>
                    {% endif %}
                {% elif ch.kind == "pd" %}
                    {% if ch.pd_account %}
                        <span class="preposition">account</span>
                        {{ ch.pd_account}},
                    {% endif %}
                    <span class="preposition">service key</span>
                    {{ ch.pd_service_key }}
                {% elif ch.kind == "pagertree" %}
                    <span class="preposition">URL</span>
                    {{ ch.value }}
                {% elif ch.kind == "opsgenie" %}
                    <span class="preposition">API key</span>
                    {{ ch.value }}
                {% elif ch.kind == "victorops" %}
                    <span class="preposition">Post URL</span>
                    {{ ch.value }}
                {% elif ch.kind == "po" %}
                    <span class="preposition">user key</span>
                    {{ ch.po_value|first }}
                    ({{ ch.po_value|last }} priority)
                {% elif ch.kind == "slack" %}
                    {% if ch.slack_team %}
                        <span class="preposition">team</span>
                        {{ ch.slack_team }},
                        <span class="preposition">channel</span>
                        {{ ch.slack_channel }}
                    {% else %}
                        {{ ch.value }}
                    {% endif %}
                {% elif ch.kind == "webhook" %}
                    {% if ch.url_down %}
                        <span class="preposition">down</span> {{ ch.url_down }}
                    {% endif %}
                    {% if ch.url_up and not ch.url_down %}
                        <span class="preposition">up</span> {{ ch.url_up }}
                    {% endif %}
                    {% if ch.url_up or ch.post_data or ch.headers %}
                        <a href="#"
                           data-toggle="modal"
                           data-target="#channel-details-{{ ch.code }}">(details)</a>
                    {% endif %}


                {% elif ch.kind == "pushbullet" %}
                    <span class="preposition">API key</span>
                    {{ ch.value }}
                {% elif ch.kind == "discord" %}
                    {{ ch.discord_webhook_id }}
                {% elif ch.kind == "telegram" %}
                    {% if ch.telegram_type == "group" %}
                    <span class="preposition">chat</span>
                    {% elif ch.telegram_type == "private" %}
                    <span class="preposition">user</span>
                    {% endif %}
                    {{ ch.telegram_name }}
                {% elif ch.kind == "hipchat" %}
                    {{ ch.hipchat_webhook_url }}
                {% elif ch.kind == "zendesk" %}
                    {{ ch.zendesk_subdomain }}.zendesk.com
                {% elif ch.kind == "sms" %}
                    {% if ch.sms_label %}
                        {{ ch.sms_label }} ({{ ch.sms_number }})
                    {% else %}
                        {{ ch.sms_number }}
                    {% endif %}
                {% elif ch.kind == "trello" %}
                    <span class="preposition">board</span>
                    {{ ch.trello_board_list|first }},
                    <span class="preposition">list</span>
                    {{ ch.trello_board_list|last }}
                {% else %}
                    {{ ch.value }}
                {% endif %}
            </td>
            <td class="channels-num-checks">
                <a
                    class="edit-checks"
                    href="{% url 'hc-channel-checks' ch.code %}">
                    {{ ch.n_checks }} of {{ num_checks }}
                </a>
            </td>
            <td>
            {% with n=ch.latest_notification %}
                {% if n %}
                    {% if n.error %}
                    <span class="text-danger" data-toggle="tooltip" title="{{ n.error }}">
                        <strong>Failed</strong>, {{ n.created|naturaltime }}
                    </span>
                    {% else %}
                    Delivered, {{ n.created|naturaltime }}
                    {% endif %}
                {% else %}
                Never
                {% endif %}
                {% if ch.kind == "sms" %}
                    <p>Used {{ profile.sms_sent_this_month }} of {{ profile.sms_limit }} sends this month.</p>
                {% endif %}
            {% endwith %}
            </td>
            <td>
                <button
                    data-kind="{{ ch.get_kind_display }}"
                    data-url="{% url 'hc-remove-channel' ch.code %}"
                    class="btn btn-sm btn-default channel-remove"
                    type="button">
                    <span class="icon-delete"></span>
                </button>
            </td>
            <td>

            </td>
        </tr>
        {% endfor %}
        {% endif %}
    </table>


    <h1 class="ai-title">Add More</h1>
    <ul class="add-integration">
        <li>
            <img src="{% static 'img/integrations/slack.png' %}"
                class="icon" 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/email.png' %}"
                class="icon" alt="Email icon" />

            <h2>Email</h2>
            <p>Get an email message when a check goes up or down.</p>

            <a href="{% url 'hc-add-email' %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% if enable_sms %}
        <li>
            <img src="{% static 'img/integrations/sms.png' %}"
                class="icon" alt="SMS icon" />

            <h2>SMS {% if use_payments %}<small>(paid plans)</small>{% endif %}</h2>
            <p>Get a text message to your phone when a check goes down.</p>

            <a href="{% url 'hc-add-sms' %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% endif %}
        <li>
            <img src="{% static 'img/integrations/webhook.png' %}"
                class="icon" 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>
        {% if enable_pushover %}
        <li>
            <img src="{% static 'img/integrations/po.png' %}"
                 class="icon" alt="Pushover icon" />

            <h2>Pushover</h2>
            <p>Receive instant push notifications on your phone or tablet.</p>

            <a href="{% url 'hc-add-pushover' %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% endif %}
        {% if enable_pushbullet %}
        <li>
            <img src="{% static 'img/integrations/pushbullet.png' %}"
                 class="icon" alt="Pushbullet icon" />

            <h2>Pushbullet</h2>
            <p>Pushbullet connects your devices, making them feel like one.</p>

            <a href="{% url 'hc-add-pushbullet' %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% endif %}
        {% if enable_telegram %}
        <li>
            <img src="{% static 'img/integrations/telegram.png' %}"
                 class="icon" alt="Telegram icon" />

            <h2>Telegram</h2>
            <p>A messaging app with a focus on speed and security.</p>

            <a href="{% url 'hc-add-telegram' %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% endif %}
        {% if enable_pd %}
        <li>
            <img src="{% static 'img/integrations/pd.png' %}"
                class="icon" 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>
        {% endif %}
        <li>
            <img src="{% static 'img/integrations/pagertree.png' %}"
                class="icon" alt="PagerTree icon" />

            <h2>PagerTree</h2>
            <p>DevOps Incident Management - On-Call Schedules, Alerts, &amp; Notifications</p>

            <a href="{% url 'hc-add-pagertree' %}" class="btn btn-primary">Add Integration</a>
        </li>
        <li>
            <img src="{% static 'img/integrations/hipchat.png' %}"
                class="icon" 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>
        <li>
            <img src="{% static 'img/integrations/victorops.png' %}"
                class="icon" alt="VictorOps icon" />

            <h2>VictorOps</h2>
            <p>On-call scheduling, alerting, and incident tracking.</p>

            <a href="{% url 'hc-add-victorops' %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% if enable_discord %}
        <li>
            <img src="{% static 'img/integrations/discord.png' %}"
                 class="icon" alt="Discord icon" />

            <h2>Discord</h2>
            <p>Cross-platform voice and text chat app designed for gamers.</p>

            <a href="{% url 'hc-add-discord' %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% endif %}
        <li>
            <img src="{% static 'img/integrations/opsgenie.png' %}"
                class="icon" alt="OpsGenie icon" />

            <h2>OpsGenie</h2>
            <p> Alerting &amp; Incident Management Solution for Dev &amp; Ops.</p>

            <a href="{% url 'hc-add-opsgenie' %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% if enable_zendesk %}
        <li>
            <img src="{% static 'img/integrations/zendesk.png' %}"
                 class="icon" alt="Zendesk icon" />

            <h2>Zendesk Support</h2>
            <p>Create a Zendesk support ticket when a check goes down.</p>

            <a href="{% url 'hc-add-zendesk' %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% endif %}
        {% if enable_trello %}
        <li>
            <img src="{% static 'img/integrations/trello.png' %}"
                 class="icon" alt="Trello icon" />

            <h2>Trello</h2>
            <p>Create a Trello card when a check goes down.</p>

            <a href="{% url 'hc-add-trello' %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% endif %}
        <li class="link-to-github">
            <img src="{% static 'img/integrations/missing.png' %}"
                 class="icon" alt="Suggest New Integration" />
            <p>
                Your favorite service or notification method not listed? <br />
                Please <a href="https://github.com/healthchecks/healthchecks/issues">file an issue on GitHub</a>!
            </p>
        </li>

    </ul>
</div>
</div>

<div id="checks-modal" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
        </div>
    </div>
</div>

<div id="remove-channel-modal" class="modal">
    <div class="modal-dialog">
        <form id="remove-channel-form" method="post">
            {% csrf_token %}
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="remove-check-title">
                        Remove this
                        <span class="remove-channel-kind">---</span>
                        Integration?
                    </h4>
                </div>
                <div class="modal-body">
                    <p>You are about to remove this
                        <span class="remove-channel-kind">---</span>
                    integration.
                    </p>
                    <p>Once it's gone it's gone. But, if you change your
                    mind later, you can create a similar channel again.
                    Do you want to continue?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">Remove</button>
                </div>
            </div>
        </form>
    </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 %}
{% compress js %}
<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/channels.js' %}"></script>
{% endcompress %}
{% endblock %}