healthchecks/templates/front/my_checks.html

{% extends "base.html" %}
{% load humanize staticfiles %}

{% block title %}My Checks - healthchecks.io{% endblock %}


{% block content %}
<div class="row">
    <div class="col-sm-12">
    <h1>My Checks</h1>
    {% if checks %}
    <table id="checks-table" class="table table-hover">
        <tr>
            <th></th>
            <th class="th-name">Name</th>
            <th>URL</th>
            <th>Frequency</th>
            <th>Last Ping</th>
            <th></th>
        </tr>
        {% for check in checks %}
        <tr class="checks-row">
            <td class="indicator-cell">
                {% if check.status == "new" %}
                    <span class="glyphicon glyphicon-question-sign new"></span>
                {% elif now < check.alert_after %}
                    <span class="glyphicon glyphicon-ok-sign up"></span>
                {% else %}
                    <span class="glyphicon glyphicon-exclamation-sign down"></span>
                {% endif %}
            </td>
            <td class="name-cell">
                <form
                    method="post"
                    action="{% url 'hc-update-name' check.code %}"
                    class="name-edit form-inline inactive">
                    {% csrf_token %}
                    <input
                        name="name"
                        type="text"
                        value="{{ check.name }}"
                        placeholder="unnamed"
                        class="input-name form-control" />

                    <button class="btn btn-primary" type="submit">
                        <span class="glyphicon glyphicon-ok"></span>
                    </button>
                    <button class="btn btn-default name-edit-cancel">
                        <span class="glyphicon glyphicon-remove"></span>
                    </button>
                </form>
            </td>
            <td class="url-cell">
                <code>{{ check.url }}</code>
            </td>
            <td class="timeout-cell inactive">
                <div class="timeout-dialog popover bottom">
                <div class="arrow"></div>
                <div class="popover-content">
                <form
                    method="post"
                    action="{% url 'hc-update-timeout' check.code %}"
                    class="form-inline">
                    {% csrf_token %}
                    <select class="form-control" name="timeout">
                        {% for label, value in timeout_choices %}
                            {% if check.timeout == value %}
                                <option selected>{{ label }}</option>
                            {% else %}
                                <option>{{ label }}</option>
                            {% endif %}
                        {% endfor %}
                    </select>
                    <button class="btn btn-primary" type="submit">
                        <span class="glyphicon glyphicon-ok"></span>
                    </button>
                    <button class="btn btn-default timeout-edit-cancel">
                        <span class="glyphicon glyphicon-remove"></span>
                    </button>
                </form>
                </div>
                </div>
                <span class="timeout">
                    {% for label, value in timeout_choices %}
                        {% if check.timeout == value %}
                            {{ label }}
                        {% endif %}
                    {% endfor %}
                </span>
            </td>
            <td>
            {% if check.last_ping %}
                <span
                    data-toggle="tooltip"
                    title="{{ check.last_ping }}">
                    {{ check.last_ping|naturaltime }}
                </span>
            {% else %}
                Never
            {% endif %}
            </td>
            <td>
                <div class="check-menu dropdown">
                    <button class="btn btn-sm btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                    <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#" class="check-menu-remove"
                                data-name="{{ check.name|default:check.code }}"
                                data-url="{% url 'hc-remove-check' check.code %}">
                                <span class="glyphicon glyphicon-trash"></span>
                                Remove
                            </a>
                        </li>
                    </ul>
                </div>
            </td>
        </tr>
        {% endfor %}

    </table>
    {% else %}
    <div class="alert alert-info">You don't have any checks yet.</div>
    {% endif %}
    </div>
</div>
<div class="row">
    <div class="col-sm-12"></div>
        <form method="post" action="{% url 'hc-add-check' %}" class="text-center">
            {% csrf_token %}
            <input type="submit" class="btn btn-primary btn-lg" value="Add Check">
        </form>
    </div>

</div>

<div id="remove-check-modal" class="modal fade">
    <div class="modal-dialog">
        <form id="remove-check-form" method="post">
            {% csrf_token %}
            <input type="hidden" name="code" class="remove-check-code" />
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</span></button>
                    <h4 class="remove-check-title">Remove Check <span class="remove-check-name"></h4>
                </div>
                <div class="modal-body">
                    <p>You are about to remove check
                        <strong class="remove-check-name">---</strong>.
                    </p>
                    <p>Once it's gone there is no "undo" and you cannot get
                    the old ping URL back.</p>
                    <p>Are you sure?</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>


{% endblock %}

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