healthchecks/templates/front/my_checks.html

239 lines
9.1 KiB
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 class="th-frequency">
Frequency <br />
<span class="checks-subline">Grace</span>
</th>
<th>Last Ping</th>
<th></th>
</tr>
{% for check in checks %}
<tr class="checks-row">
<td class="indicator-cell">
{% if check.get_status == "new" %}
<span class="glyphicon glyphicon-question-sign new"></span>
{% elif check.get_status == "up" %}
<span class="glyphicon glyphicon-ok-sign up"></span>
{% elif check.get_status == "grace" %}
<span class="glyphicon glyphicon-exclamation-sign grace"></span>
{% elif check.get_status == "down" %}
<span class="glyphicon glyphicon-exclamation-sign down"></span>
{% endif %}
</td>
<td class="name-cell">
<span
data-name="{{ check.name }}"
data-url="{% url 'hc-update-name' check.code %}"
class="my-checks-name {% if not check.name %}unnamed{% endif %}">
{{ check.name|default:"unnamed" }}
</span>
</td>
<td class="url-cell">
<code>{{ check.url }}</code>
</td>
<td class="timeout-cell inactive">
<span
data-url="{% url 'hc-update-timeout' check.code %}"
data-timeout="{{ check.timeout.total_seconds }}"
data-grace="{{ check.grace.total_seconds }}"
class="timeout_grace">
{% for label, value in duration_choices %}
{% if check.timeout == value %}
{{ label }}
{% endif %}
{% endfor %}
<br />
<span class="checks-subline">
{% for label, value in duration_choices %}
{% if check.grace == value %}
{{ label }}
{% endif %}
{% endfor %}
</span>
</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="update-name-modal" class="modal fade">
<div class="modal-dialog">
<form id="update-name-form" method="post">
{% csrf_token %}
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</span></button>
<h4 class="update-timeout-title">Name</h4>
</div>
<div class="modal-body">
<p>Give this check a human-friendly name, so you can
easily recognize it later:</p>
<input
id="update-name-input"
name="name"
type="text"
value="---"
placeholder="unnamed"
class="input-name form-control" />
</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>
<div id="update-timeout-modal" class="modal fade">
<div class="modal-dialog">
<form id="update-timeout-form" method="post">
{% csrf_token %}
<input type="hidden" name="timeout" id="update-timeout-timeout" />
<input type="hidden" name="grace" id="update-timeout-grace" />
<div class="modal-content">
<div class="modal-body">
<div class="update-timeout-info text-center">
<span
class="update-timeout-label"
data-toggle="tooltip"
title="Expected time between pings.">
Frequency
</span>
<span
id="frequency-slider-value"
class="update-timeout-value">
1 day
</span>
</div>
<div id="frequency-slider"></div>
<div class="update-timeout-info text-center">
<span
class="update-timeout-label"
data-toggle="tooltip"
title="When check is late, how much time to wait until alert is sent">
Grace Period
</span>
<span
id="grace-slider-value"
class="update-timeout-value">
1 day
</span>
</div>
<div id="grace-slider"></div>
<div class="update-timeout-terms">
<p>
<span>Frequency</span>
Expected time between pings.
</p>
<p>
<span>Grace Period</span>
When a check is late, how much time to wait until alert is sent.
</p>
</div>
</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>
<div id="remove-check-modal" class="modal fade">
<div class="modal-dialog">
<form id="remove-check-form" method="post">
{% csrf_token %}
<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/moment.min.js' %}"></script>
<script src="{% static 'js/nouislider.min.js' %}"></script>
<script src="{% static 'js/checks.js' %}"></script>
{% endblock %}