healthchecks_healthchecks/templates/front/channels.html

581 lines
22 KiB
HTML

{% extends "base_project.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 {% if rw %}rw{% endif %}">
<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 %}
<tr class="channel-row kind-{{ ch.kind }}">
<td class="icon-cell">
<img src="{% static ch.icon_path %}" alt="{{ ch.get_kind_display }}" class="kind-{{ ch.kind }}" />
</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">
{% include "front/channel_description.html" with ch=ch %}
</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.disabled %}
<span class="label label-danger">Disabled</span>
{% elif 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 ch.last_notify %}
{% if ch.last_error %}
<span class="text-danger" data-toggle="tooltip" title="{{ ch.last_error }}">
<strong>Failed</strong>, {{ ch.last_notify|naturaltime }}
</span>
{% else %}
Delivered, {{ ch.last_notify|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 %}
{% if ch.kind == "call" %}
<p>Used {{ profile.calls_sent_this_month }} of {{ profile.call_limit }} phone calls this month.</p>
{% endif %}
</td>
<td class="actions">
{% if ch.is_editable and rw %}
<a class="btn btn-sm btn-default" href="{% url 'hc-edit-channel' ch.code %}">
{% if ch.kind == "email" and ch.disabled %}Fix&hellip;{% else %}Edit{% endif %}
</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>
{% if rw %}
<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="ic-delete"></span>
</button>
{% endif %}
</td>
</tr>
{% 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 %}
{% if rw %}
<h1 class="ai-title">Add More</h1>
<ul class="add-integration">
<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>
{% if enable_webhooks %}
<li>
<img src="{% static 'img/integrations/webhook.png' %}"
class="icon" alt="Webhook icon" />
<h2>Webhook</h2>
<p>Receive an HTTP callback when a check goes down.</p>
<a href="{% url 'hc-add-webhook' project.code %}" class="btn btn-primary">Add Integration</a>
</li>
{% endif %}
{% 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 %}
<li>
<img src="{% static 'img/integrations/gotify.png' %}" class="icon" alt="Gotify icon" />
<h2>Gotify</h2>
<p> Self-hosted push notification service.</p>
<a href="{% url 'hc-add-gotify' project.code %}" class="btn btn-primary">Add Integration</a>
</li>
<li>
<img src="{% static 'img/integrations/group.png' %}" class="icon" alt="Group icon" />
<h2>Group</h2>
<p> Deliver to multiple integrations at once.</p>
<a href="{% url 'hc-add-group' project.code %}" class="btn btn-primary">Add Integration</a>
</li>
{% if enable_matrix %}
<li>
<img src="{% static 'img/integrations/matrix.png' %}"
class="icon kind-matrix" 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 %}
{% if enable_mattermost %}
<li>
<img src="{% static 'img/integrations/mattermost.png' %}"
class="icon kind-mattermost" 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>
{% endif %}
{% if enable_msteams %}
<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>
{% endif %}
<li>
<img src="{% static 'img/integrations/ntfy.png' %}"
class="icon kind-ntfy" alt="ntfy" />
<h2>ntfy</h2>
<p>Send push notifications to your phone or desktop via PUT/POST.</p>
<a href="{% url 'hc-add-ntfy' project.code %}" class="btn btn-primary">Add Integration</a>
</li>
{% if enable_opsgenie %}
<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>
{% 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' project.code %}" class="btn btn-primary">Add Integration</a>
</li>
{% endif %}
{% if enable_pagertree %}
<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' project.code %}" class="btn btn-primary">Add Integration</a>
</li>
{% endif %}
{% if enable_call %}
<li>
<img src="{% static 'img/integrations/call.png' %}"
class="icon" alt="Phone icon" />
<h2>Phone Call</h2>
<p>Get a phone call when a check goes down.</p>
<a href="{% url 'hc-add-call' project.code %}" class="btn btn-primary">Add Integration</a>
</li>
{% endif %}
{% if enable_prometheus %}
<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>
{% 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' 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_rocketchat %}
<li>
<img src="{% static 'img/integrations/rocketchat.png' %}"
class="icon" alt="Rocket.Chat icon" />
<h2>Rocket.Chat</h2>
<p>Open-source communications platform for organizations with high data protection standards.</p>
<a href="{% url 'hc-add-rocketchat' 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_signal %}
<li>
<img src="{% static 'img/integrations/signal.png' %}"
class="icon" alt="Signal icon" />
<h2>Signal</h2>
<p>Get a Signal message when a check goes up or down.</p>
<a href="{% url 'hc-add-signal' project.code %}" class="btn btn-primary">Add Integration</a>
</li>
{% endif %}
{% if enable_slack %}
<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>
{% 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_spike %}
<li>
<img src="{% static 'img/integrations/spike.png' %}" class="icon" alt="Spike.sh icon" />
<h2>Spike.sh</h2>
<p>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>
{% 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 %}
{% if enable_victorops %}
<li>
<img src="{% static 'img/integrations/victorops.png' %}"
class="icon" alt="Splunk On-Call icon" />
<h2>Splunk On-Call (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>
{% endif %}
{% 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 %}
{% if enable_zulip %}
<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>
{% 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>
{% endif %}
</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>
{% if rw %}
{% 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 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.shell.cmd_down %}
<p><strong>Execute on "down" events:</strong></p>
<pre>{{ ch.shell.cmd_down }}</pre>
{% endif %}
{% if ch.shell.cmd_up %}
<p><strong>Execute on "up" events:</strong></p>
<pre>{{ ch.shell.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-channel' 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 %}
{% endif %}
{% endblock %}
{% block scripts %}
{% compress js %}
<script src="{% static 'js/channels.js' %}"></script>
{% endcompress %}
{% endblock %}