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">
        {% if channels %}
        <table class="table channels-table">
            <tr>
                <th></th>
                <th class="th-name">Name, Details</th>
                <th class="th-checks">Assigned Checks</th>
                <th>Status</th>
                <th>Last Notification</th>
                <th></th>
            </tr>
            {% for ch in channels %}
            {% with n=ch.latest_notification %}
            <tr class="channel-row kind-{{ ch.kind }}">
                <td class="icon-cell">
                    <img src="{% static ch.icon_path %}" class="icon" alt="{{ ch.get_kind_display }} icon" />
                </td>
                <td>
                    <div class="edit-name" data-toggle="modal" data-target="#name-{{ ch.code }}">
                        {% if ch.name %}
                        {{ ch.name }}
                        {% else %}
                        <div class="unnamed">unnamed</div>
                        {% endif %}
                        <div class="channel-details-mini">
                            {% if ch.kind == "email" %}
                            Email to <span>{{ ch.email_value }}</span>
                            {% if ch.email_notify_down and not ch.email_notify_up %}
                            (down only)
                            {% endif %}
                            {% if ch.email_notify_up and not ch.email_notify_down %}
                            (up only)
                            {% endif %}
                            {% elif ch.kind == "pd" %}
                            PagerDuty account <span>{{ ch.pd_account }}</span>
                            {% elif ch.kind == "po" %}
                            Pushover ({{ ch.po_priority }} priority)
                            {% elif ch.kind == "slack" %}
                            Slack
                            {% if ch.slack_team %}
                            team <span>{{ ch.slack_team }}</span>,
                            channel <span>{{ ch.slack_channel }}</span>
                            {% endif %}
                            {% elif ch.kind == "telegram" %}
                            Telegram
                            {% if ch.telegram_type == "group" %}
                            chat <span>{{ ch.telegram_name }}</span>
                            {% elif ch.telegram_type == "private" %}
                            user <span>{{ ch.telegram_name }}</span>
                            {% endif %}
                            {% elif ch.kind == "sms" %}
                            SMS to <span>{{ ch.sms_number }}</span>
                            {% elif ch.kind == "trello" %}
                            Trello
                            board <span>{{ ch.trello_board_list|first }}</span>,
                            list <span>{{ ch.trello_board_list|last }}</span>
                            {% elif ch.kind == "matrix" %}
                            Matrix <span>{{ ch.value }}</span>
                            {% elif ch.kind == "whatsapp" %}
                            WhatsApp to <span>{{ ch.sms_number }}</span>
                            {% if ch.whatsapp_notify_down and not ch.whatsapp_notify_up %}
                            (down only)
                            {% endif %}
                            {% if ch.whatsapp_notify_up and not ch.whatsapp_notify_down %}
                            (up only)
                            {% endif %}
                            {% elif ch.kind == "zulip" %}
                            Zulip
                            {% if ch.zulip_type == "stream" %}
                            stream <span>{{ ch.zulip_to}}</span>
                            {% elif ch.zulip_type == "private" %}
                            user <span>{{ ch.zulip_to}}</span>
                            {% endif %}
                            {% else %}
                            {{ ch.get_kind_display }}
                            {% endif %}
                        </div>
                    </div>
                </td>
                <td>
                    <div class="edit-checks" data-url="{% url 'hc-channel-checks' ch.code %}">
                        {{ ch.n_checks }} check{{ ch.n_checks|pluralize }}
                    </div>
                </td>
                <td>
                    {% if ch.kind == "email" and not ch.email_verified %}
                    <span class="label label-default">Unconfirmed</span>
                    {% elif ch.kind == "hipchat" or ch.kind == "pagerteam" %}
                    Retired
                    {% else %}
                    Ready to deliver
                    {% endif %}
                </td>
                <td>
                    {% 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" or ch.kind == "whatsapp" %}
                    <p>Used {{ profile.sms_sent_this_month }} of {{ profile.sms_limit }} sends this month.</p>
                    {% endif %}
                </td>
                <td class="actions">
                    {% if ch.kind == "webhook" %}
                    <a class="btn btn-sm btn-default" href="{% url 'hc-edit-webhook' ch.code %}">Edit</a>
                    {% endif %}
                    <form action="{% url 'hc-channel-test' ch.code %}" method="post">
                        {% csrf_token %}
                        <button class="btn btn-sm btn-default" data-toggle="tooltip"
                            title="Send a test notification using this integration" type="submit">
                            Test!
                        </button>
                    </form>
                    <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>
            {% endwith %}
            {% endfor %}
        </table>
        {% else %}
        <div class="alert alert-danger">
            <p> The project "{{ project }}" does not have any integrations
                set up yet.
            </p>
            <p>With no configured integrations, {% site_name %}
                <strong>will not send any notifications</strong>
                when checks change state.
            </p>
        </div>
        {% endif %}


        <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>
                {% if enable_slack_btn %}
                <a href="{% url 'hc-add-slack-btn' project.code %}" class="btn btn-primary">Add Integration</a>
                {% else %}
                <a href="{% url 'hc-add-slack' project.code %}" class="btn btn-primary">Add Integration</a>
                {% endif %}
            </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' project.code %}" class="btn btn-primary">Add Integration</a>
            </li>

            <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' project.code %}" class="btn btn-primary">Add Integration</a>
            </li>
            {% if enable_apprise %}
            <li>
                <img src="{% static 'img/integrations/apprise.png' %}" class="icon" alt="Apprise icon" />

                <h2>Apprise</h2>
                <p>Receive instant push notifications using Apprise; see <a
                        href="https://github.com/caronc/apprise#popular-notification-services">all of the supported
                        services here</a>.</p>
                <a href="{% url 'hc-add-apprise' project.code %}" class="btn btn-primary">Add Integration</a>
            </li>
            {% endif %}

            {% 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' project.code %}" class="btn btn-primary">Add Integration</a>
            </li>
            {% endif %}

            {% if enable_matrix %}
            <li>
                <img src="{% static 'img/integrations/matrix.png' %}" class="icon" alt="Matrix icon" />

                <h2>Matrix</h2>
                <p>Post notifications to a Matrix room.</p>
                <a href="{% url 'hc-add-matrix' project.code %}" class="btn btn-primary">Add Integration</a>
            </li>
            {% endif %}

            <li>
                <img src="{% static 'img/integrations/mattermost.png' %}" class="icon" alt="Mattermost icon" />

                <h2>Mattermost</h2>
                <p>High Trust Messaging for the Enterprise.</p>
                <a href="{% url 'hc-add-mattermost' project.code %}" class="btn btn-primary">Add Integration</a>
            </li>

            <li>
                <img src="{% static 'img/integrations/msteams.png' %}" class="icon" alt="Microsoft Teams" />

                <h2>Microsoft Teams</h2>
                <p>Chat and collaboration platform for Microsoft Office 365 customers.</p>
                <a href="{% url 'hc-add-msteams' project.code %}" class="btn btn-primary">Add Integration</a>
            </li>

            <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' project.code %}" class="btn btn-primary">Add Integration</a>
            </li>

            <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>

                {% if enable_pdc %}
                <a href="{% url 'hc-add-pdc' project.code %}" class="btn btn-primary">Add Integration</a>
                {% else %}
                <a href="{% url 'hc-add-pd' project.code %}" class="btn btn-primary">Add Integration</a>
                {% endif %}
            </li>

            <li>
                <img src="{% static 'img/integrations/pagertree.png' %}" class="icon" alt="PagerTree icon" />

                <h2>PagerTree</h2>
                <p>Incident Management - On-Call Schedules, Alerts, &amp; Notifications</p>
                <a href="{% url 'hc-add-pagertree' project.code %}" class="btn btn-primary">Add Integration</a>
            </li>

            <li>
                <img src="{% static 'img/integrations/prometheus.png' %}" class="icon" alt="Prometheus icon" />

                <h2>Prometheus</h2>
                <p>Export check and tag status values to Prometheus.</p>
                <a href="{% url 'hc-add-prometheus' project.code %}" class="btn btn-primary">Add Integration</a>
            </li>

            {% 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' project.code %}" class="btn btn-primary">Add Integration</a>
            </li>
            {% endif %}

            {% 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' project.code %}" class="btn btn-primary">Add Integration</a>
            </li>
            {% endif %}

            {% if enable_shell %}
            <li>
                <img src="{% static 'img/integrations/shell.png' %}" class="icon" alt="Shell icon" />

                <h2>Shell Command</h2>
                <p>Execute a local shell command when a check goes up or down.</p>
                <a href="{% url 'hc-add-shell' project.code %}" class="btn btn-primary">Add Integration</a>
            </li>
            {% endif %}

            {% if enable_sms %}
            <li>
                <img src="{% static 'img/integrations/sms.png' %}" class="icon" alt="SMS icon" />

                <h2>SMS</h2>
                <p>Get a text message to your phone when a check goes down.</p>
                <a href="{% url 'hc-add-sms' project.code %}" 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_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' project.code %}" class="btn btn-primary">Add Integration</a>
            </li>
            {% endif %}

            <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' project.code %}" class="btn btn-primary">Add Integration</a>
            </li>

            {% if enable_whatsapp %}
            <li>
                <img src="{% static 'img/integrations/whatsapp.png' %}" class="icon" alt="WhatsApp icon" />

                <h2>WhatsApp</h2>
                <p>Get a WhatsApp message when a check goes up or down.</p>
                <a href="{% url 'hc-add-whatsapp' project.code %}" class="btn btn-primary">Add Integration</a>
            </li>
            {% endif %}

            <li>
                <img src="{% static 'img/integrations/zulip.png' %}" class="icon" alt="Zulip icon" />

                <h2>Zulip</h2>
                <p>Open-source group chat.</p>
                <a href="{% url 'hc-add-zulip' project.code %}" class="btn btn-primary">Add Integration</a>
            </li>

            <li>
                <img src="{% static 'img/integrations/spike.png' %}" class="icon" alt="Spike.sh icon" />

                <h2>Spike.sh</h2>
                <p>No BS Incident management with unlimited alerts and on-call schedules</p>

                <a href="{% url 'hc-add-spike' project.code %}" class="btn btn-primary">Add Integration</a>
            </li>

            <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>
                        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 %}
<div id="name-{{ ch.code }}" class="modal channel-modal">
    <div class="modal-dialog">
        <form action="{% url 'hc-channel-name' ch.code %}" class="form-horizontal" method="post">
            {% csrf_token %}
            <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">
                    <div class="form-group">
                        <label for="update-name-input" class="col-sm-2 control-label">
                            Name
                        </label>
                        <div class="col-sm-10">
                            <input name="name" type="text" maxlength="100" value="{{ ch.name }}" placeholder="{{ ch }}"
                                class="input-name form-control" />

                            <span class="help-block">
                                Give this integration a human-friendly name,
                                so you can easily recognize it later.
                            </span>
                        </div>
                    </div>

                    {% if ch.kind == "webhook" %}
                    {% with ch.down_webhook_spec as spec %}
                    {% if spec.url %}
                    <p><strong>Execute on "down" events:</strong></p>
                    <pre>{{ spec.method }} {{ spec.url }}</pre>
                    {% if spec.body %}
                    <p>Request Body</p>
                    <pre>{{ spec.body }}</pre>
                    {% endif %}

                    {% if spec.headers %}
                    <p>Request Headers</p>
                    <pre>{{ spec.headers|format_headers }}</pre>
                    {% endif %}
                    {% endif %}
                    {% endwith %}

                    {% with ch.up_webhook_spec as spec %}
                    {% if spec.url %}
                    <p><strong>Execute on "up" events:</strong></p>
                    <pre>{{ spec.method }} {{ spec.url }}</pre>
                    {% if spec.body %}
                    <p>Request Body</p>
                    <pre>{{ spec.body }}</pre>
                    {% endif %}

                    {% if spec.headers %}
                    <p>Request Headers</p>
                    <pre>{{ spec.headers|format_headers }}</pre>
                    {% endif %}
                    {% endif %}
                    {% endwith %}
                    {% endif %}


                    {% if ch.kind == "shell" %}
                    {% if ch.cmd_down %}
                    <p><strong>Execute on "down" events:</strong></p>
                    <pre>{{ ch.cmd_down }}</pre>
                    {% endif %}

                    {% if ch.cmd_up %}
                    <p><strong>Execute on "up" events:</strong></p>
                    <pre>{{ ch.cmd_up }}</pre>
                    {% endif %}
                    {% endif %}
                </div>
                <div class="modal-footer">
                    {% if ch.kind == "webhook" %}
                    <a class="btn btn-default pull-left" href="{% url 'hc-edit-webhook' ch.code %}">Edit Webhook
                        Parameters&hellip;</a>
                    {% endif %}

                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </div>
        </form>
    </div>
</div>
{% 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 %}