healthchecks_healthchecks/templates/integrations/webhook_form.html

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

{% block title %}
    {% if is_new %}
    Add Webhook Integration - {% site_name %}
    {% else %}
    Webhook Settings - {% site_name %}
    {% endif %}
{% endblock %}


{% block content %}
<div class="row">
    <div class="col-sm-12">
        <h1>Webhook</h1>

        <p>
            Executes an HTTP request to your specified URL when a check
            goes up or down.  You can use placeholders <strong>$NAME</strong>,
            <strong>$STATUS</strong> and others in webhook URLs, request body and
            header values
            <a href="#" data-toggle="modal" data-target="#reference-modal">(available placeholders)</a>.
        </p>
        <p>
            Webhook retry policy:
            {% site_name %} retries failed webhook calls up to 2 additional times.
            {% site_name %} considers a HTTP request failed if:
        </p>
        <ul>
            <li>The destination server does not return a complete response within 30 seconds.</li>
            <li>The HTTP response status code is not one of: 200, 201, 202 or 204.</li>
        </ul>

        <form id="add-webhook-form" method="post">
        {% csrf_token %}

        <div class="form-group {{ form.name.css_classes }}">
            <br>
            <label>Name</label>
            <input
                id="webhook-form-name"
                name="name"
                value="{{ form.name.value|default:"" }}"
                type="text"
                class="form-control" />

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

        <div class="row">
        <div class="col-sm-6">
            <h2>Execute when a check goes <strong class="label-down">down</strong></h2>
            <br />

            <div class="form-group {{ form.url_down.css_classes }}">
                <label>URL</label>
                <div class="method-url-group">
                    <select id="method-down" name="method_down" class="form-control">
                        <option{% if form.method_down.value == "GET" %} selected{% endif %}>GET</option>
                        <option{% if form.method_down.value == "POST" %} selected{% endif %}>POST</option>
                        <option{% if form.method_down.value == "PUT" %} selected{% endif %}>PUT</option>
                    </select>
                    <input
                        name="url_down"
                        value="{{ form.url_down.value|default:"" }}"
                        type="text"
                        class="form-control"
                        placeholder="https://..." />
                </div>
                {% if form.url_down.errors %}
                <div class="help-block">
                    {{ form.url_down.errors|join:"" }}
                </div>
                {% endif %}
            </div>

            <div id="body-down-group" class="form-group {{ form.body_down.css_classes }}" style="display: none">
                <label class="control-label">Request Body</label>
                <textarea
                    class="form-control"
                    rows="3"
                    name="body_down"
                    placeholder='{"status": "$STATUS"}'>{{ form.body_down.value|default:"" }}</textarea>
                {% if form.body_down.errors %}
                <div class="help-block">
                    {{ form.body_down.errors|join:"" }}
                </div>
                {% endif %}
            </div>

            <div class="form-group {{ form.headers_down.css_classes }}">
                <label class="control-label">Request Headers</label>
                <textarea
                    class="form-control"
                    rows="3"
                    name="headers_down"
                    placeholder="X-Sample-Header: $NAME has gone down">{{ form.headers_down.value|default:"" }}</textarea>
                <div class="help-block">
                    {% if form.headers_down.errors %}
                        {{ form.headers_down.errors|join:"" }}
                    {% else %}
                        Optional "Header-Name: value" pairs, one pair per line.
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="col-sm-6">
            <h2>Execute when a check goes <strong class="label-up">up</strong></h2>
            <br />
            <div class="form-group {{ form.url_up.css_classes }}">
                <label>URL</label>
                <div class="method-url-group">
                    <select id="method-up" name="method_up" class="form-control">
                        <option{% if form.method_up.value == "GET" %} selected{% endif %}>GET</option>
                        <option{% if form.method_up.value == "POST" %} selected{% endif %}>POST</option>
                        <option{% if form.method_up.value == "PUT" %} selected{% endif %}>PUT</option>
                    </select>
                    <input
                        name="url_up"
                        value="{{ form.url_up.value|default:"" }}"
                        type="text"
                        class="form-control"
                        placeholder="https://..." />
                </div>

                {% if form.url_up.errors %}
                <div class="help-block">
                    {{ form.url_up.errors|join:"" }}
                </div>
                {% endif %}
            </div>
            <div id="body-up-group" class="form-group {{ form.body_up.css_classes }}" style="display: none">
                <label class="control-label">Request Body</label>
                <textarea
                    class="form-control"
                    rows="3"
                    name="body_up"
                    placeholder='{"status": "$STATUS"}'>{{ form.body_up.value|default:"" }}</textarea>
                {% if form.post_data.errors %}
                <div class="help-block">
                    {{ form.post_data.errors|join:"" }}
                </div>
                {% endif %}
            </div>

            <div class="form-group {{ form.headers_up.css_classes }}">
                <label class="control-label">Request Headers</label>
                <textarea
                    class="form-control"
                    rows="3"
                    name="headers_up"
                    placeholder="X-Sample-Header: $NAME is back up">{{ form.headers_up.value|default:"" }}</textarea>
                <div class="help-block">
                    {% if form.headers_up.errors %}
                        {{ form.headers_up.errors|join:"" }}
                    {% else %}
                        Optional "Header-Name: value" pairs, one pair per line.
                    {% endif %}
                </div>
            </div>
        </div>
        </div>

        <br>
        <br>
        <div class="form-group text-right">
            <button type="submit" class="btn btn-primary">
                {% if channel %}
                Save Changes
                {% else %}
                Save Integration
                {% endif %}
            </button>
        </div>
        </form>

    </div>
</div>

<div id="reference-modal" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Supported Placeholders</h4>
            </div>
            <div class="modal-body">
                <p>
                    You can use the below placeholders in webhook URL, request body
                    and header values.  {% site_name %} will replace the placeholders
                    with the correct values.
                </p>

                <table id="webhook-variables" class="table modal-body">
                    <tr>
                        <th><code>$CODE</code></th>
                        <td>The UUID code of the check.</td>
                    </tr>
                    <tr>
                        <th><code>$NAME</code></th>
                        <td>Name of the check.</td>
                    </tr>
                    <tr>
                        <th><code>$NAME_JSON</code></th>
                        <td><p>Name of the check, encoded as JSON string. If
                            the check's name contains a double quote, this would produce
                            invalid JSON:</p>
                            <pre>{"name": "$NAME"}</pre>
                            <p>But this would work:</p>
                            <pre>{"name": $NAME_JSON}</pre>
                        </td>
                    </tr>
                    <tr>
                        <th><code>$SLUG</code></th>
                        <td>Check's slug.</td>
                    </tr>
                    <tr>
                        <th><code>$NOW</code></th>
                        <td>
                            Current UTC time in ISO8601 format. Example:
                            "{% now_isoformat %}"
                        </td>
                    </tr>
                    <tr>
                        <th><code>$STATUS</code></th>
                        <td>Check's current status ("up" or "down").</td>
                    </tr>
                    <tr>
                        <th><code>$TAGS</code></th>
                        <td>Check's tags, separated by spaces.</td>
                    </tr>
                    <tr>
                        <th><code>$TAG1, $TAG2, …</code></th>
                        <td>Value of the first tag, the second tag, …</td>
                    </tr>
                    <tr>
                        <th><code>$BODY</code></th>
                        <td>The request body of the most recent ping. Works only in the webhook's "Request Body" field.</td>
                    </tr>
                    <tr>
                        <th><code>$BODY_JSON</code></th>
                        <td>Same as $BODY, but encoded as JSON string.</td>
                    </tr>
                    <tr>
                        <th><code>$EXITSTATUS</code></th>
                        <td>The exit status value of the most recent ping. Default value: "-1".</td>
                    </tr>
                    <tr>
                        <th><code>$JSON</code></th>
                        <td>
                            <p>
                            A JSON representation of the check.
                            The JSON document has the same fields as the
                            <a href="{% url 'hc-serve-doc' 'api' %}#get-check">Get a Single Check</a>
                            API response. You can nest <code>$JSON</code> in your own JSON structure, example: </p>
                            <pre>{"now": "$NOW", "check": $JSON}</pre>
                            <p>The resulting payload would be:</p>
                            <pre>{"now": "{% now_isoformat %}", "check": {"name": "Foo", "slug": "foo", ... }}</pre>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Got It!</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
{% compress js %}
<script src="{% static 'js/webhook.js' %}"></script>
{% endcompress %}
{% endblock %}