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 == "pagertree" %}
                            PagerTree
                        {% elif ch.kind == "pagerteam" %}
                            Pager Team
                        {% elif ch.kind == "opsgenie" %}
                            OpsGenie
                        {% elif ch.kind == "victorops" %}
                            VictorOps
                        {% 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 == "webhook" %}
                            Webhook
                        {% elif ch.kind == "pushbullet" %}
                            Pushbullet
                        {% elif ch.kind == "discord" %}
                            Discord
                        {% 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 == "hipchat" %}
                            HipChat
                        {% 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 %}
                        {% else %}
                            {{ ch.kind }}
                        {% 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 %}
                    {% if n and n.error %}
                        <span class="label label-danger">Disabled</span>
                    {% else %}
                        <span class="label label-default">Unconfirmed</span>
                    {% endif %}
                {% elif ch.kind == "hipchat" %}
                    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">
                <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-info">
            The project <strong>{{ project }}</strong> has no integrations set up yet.
        </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>
            <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/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>
        <li>
            <img src="{% static 'img/integrations/pagerteam.png' %}"
                class="icon" alt="PagerTeam icon" />

            <h2>Pager Team</h2>
            <p>On-call rotations without limits.</p>

            <a href="{% url 'hc-add-pagerteam' %}" 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_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 %}
        {% 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' %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% endif %}
        {% if enable_whatsapp %}
        <li>
            <img src="{% static 'img/integrations/whatsapp.png' %}"
                class="icon" alt="WhatsApp icon" />

            <h2>WhatsApp {% if use_payments %}<small>(paid plans)</small>{% endif %}</h2>
            <p>Get a WhatsApp message when a check goes up or down.</p>

            <a href="{% url 'hc-add-whatsapp' %}" 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>
                        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 class="update-timeout-title">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 %}
                </div>
                <div class="modal-footer">
                    <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 %}