You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
379 lines
16 KiB
379 lines
16 KiB
{% extends "base.html" %}
|
|
{% load compress staticfiles hc_extras %}
|
|
|
|
{% block title %}{{ num_down|num_down_title }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="row">
|
|
{% if tags %}
|
|
<div id="my-checks-tags" class="col-sm-12">
|
|
{% for tag, status in tags %}
|
|
<button class="btn btn-xs {{ status }}" data-toggle="button">{{ tag }}</button>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
{% if checks %}
|
|
{% include "front/my_checks_mobile.html" %}
|
|
{% include "front/my_checks_desktop.html" %}
|
|
{% 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">
|
|
{% if num_available > 0 %}
|
|
<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>
|
|
{% if num_available <= 10 %}
|
|
<div class="add-check-note">
|
|
({{ checks|length }} in use, {{ num_available }} available)
|
|
</div>
|
|
{% endif %}
|
|
{% else %}
|
|
<div class="alert alert-info">
|
|
<strong>Check limit reached.</strong>
|
|
To add more checks, please
|
|
<a href="{% url 'hc-billing' %}">upgrade your account!</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div id="update-name-modal" class="modal">
|
|
<div class="modal-dialog">
|
|
<form id="update-name-form" class="form-horizontal" method="post">
|
|
{% csrf_token %}
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal">×</button>
|
|
<h4 class="update-timeout-title">Name and Tags</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-9">
|
|
<input
|
|
id="update-name-input"
|
|
name="name"
|
|
type="text"
|
|
value="---"
|
|
placeholder="unnamed"
|
|
class="input-name form-control" />
|
|
|
|
<span class="help-block">
|
|
Give this check a human-friendly name,
|
|
so you can easily recognize it later.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="update-tags-input" class="col-sm-2 control-label">
|
|
Tags
|
|
</label>
|
|
<div class="col-sm-9">
|
|
<input
|
|
id="update-tags-input"
|
|
name="tags"
|
|
type="text"
|
|
value=""
|
|
placeholder="production www"
|
|
class="form-control" />
|
|
|
|
<span class="help-block">
|
|
Use tags for easy filtering and for status badges.
|
|
Separate multiple tags with spaces.
|
|
</span>
|
|
</div>
|
|
</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="update-timeout-modal" class="modal">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<form id="update-timeout-form" method="post">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="kind" value="simple" />
|
|
<input type="hidden" name="timeout" id="update-timeout-timeout" />
|
|
<input type="hidden" name="grace" id="update-timeout-grace" />
|
|
|
|
<div class="modal-body">
|
|
<div class="update-timeout-info text-center">
|
|
<span
|
|
class="update-timeout-label"
|
|
data-toggle="tooltip"
|
|
title="Expected time between pings.">
|
|
Period
|
|
</span>
|
|
<span
|
|
id="period-slider-value"
|
|
class="update-timeout-value">
|
|
1 day
|
|
</span>
|
|
</div>
|
|
|
|
<div id="period-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 Time
|
|
</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>Period</span>
|
|
Expected time between pings.
|
|
</p>
|
|
<p>
|
|
<span>Grace Time</span>
|
|
When a check is late, how much time to wait until alert is sent.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<div class="btn-group pull-left">
|
|
<label class="btn btn-default kind-simple active">Simple</label>
|
|
<label class="btn btn-default kind-cron">Cron</label>
|
|
</div>
|
|
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Save</button>
|
|
</div>
|
|
</form>
|
|
|
|
<form id="update-cron-form" method="post">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="kind" value="cron" />
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="form-group">
|
|
<label for="schedule">Cron Expression</label>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="schedule"
|
|
name="schedule"
|
|
placeholder="* * * * *">
|
|
<div id="schedule-hint">
|
|
m h dom mon dow
|
|
<a href="{% url 'hc-docs-cron' %}" target="_blank">(cheatsheet)</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="form-group">
|
|
<label for="tz">Server's Timezone</label>
|
|
<br />
|
|
<select id="tz" name="tz" class="form-control">
|
|
<option>UTC</option>
|
|
{% for tz in timezones %}
|
|
<option>{{ tz }}</option>{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="form-group">
|
|
<label for="cron-grace">Grace Time</label>
|
|
<div class="input-group">
|
|
<input
|
|
type="number"
|
|
min="1"
|
|
max="43200"
|
|
class="form-control"
|
|
id="update-timeout-grace-cron"
|
|
name="grace">
|
|
<div class="input-group-addon">minutes</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div id="cron-preview"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<div class="btn-group pull-left">
|
|
<label class="btn btn-default kind-simple">Simple</label>
|
|
<label class="btn btn-default active kind-cron">Cron</label>
|
|
</div>
|
|
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
|
<button id="update-cron-submit" type="submit" class="btn btn-primary">
|
|
Save
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="remove-check-modal" class="modal">
|
|
<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">×</button>
|
|
<h4 class="remove-check-title">Remove Check <span class="remove-check-name"></span></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>
|
|
|
|
<div id="show-usage-modal" class="modal">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal">×</button>
|
|
<ul class="nav nav-pills" role="tablist">
|
|
<li class="active">
|
|
<a href="#crontab" data-toggle="tab">Crontab</a>
|
|
</li>
|
|
<li>
|
|
<a href="#bash" data-toggle="tab">Bash</a>
|
|
</li>
|
|
<li>
|
|
<a href="#python" data-toggle="tab">Python</a>
|
|
</li>
|
|
<li>
|
|
<a href="#ruby" data-toggle="tab">Ruby</a>
|
|
</li>
|
|
<li class="hidden-xs">
|
|
<a href="#node" data-toggle="tab">Node.js</a>
|
|
</li>
|
|
<li class="hidden-xs">
|
|
<a href="#php" data-toggle="tab">PHP</a>
|
|
</li>
|
|
<li class="hidden-xs">
|
|
<a href="#browser" data-toggle="tab">Browser</a>
|
|
</li>
|
|
<li class="hidden-xs">
|
|
<a href="#powershell" data-toggle="tab">PowerShell</a>
|
|
</li>
|
|
<li class="hidden-xs">
|
|
<a href="#email" data-toggle="tab">Email</a>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="tab-content">
|
|
{% with ping_url="<span class='ex'></span>" %}
|
|
<div role="tabpanel" class="tab-pane active" id="crontab">
|
|
{% include "front/snippets/crontab.html" %}
|
|
</div>
|
|
<div role="tabpanel" class="tab-pane" id="bash">
|
|
{% include "front/snippets/bash_curl.html" %}
|
|
{% include "front/snippets/bash_wget.html" %}
|
|
</div>
|
|
<div role="tabpanel" class="tab-pane" id="python">
|
|
{% include "front/snippets/python_urllib2.html" %}
|
|
{% include "front/snippets/python_requests.html" %}
|
|
</div>
|
|
<div role="tabpanel" class="tab-pane" id="ruby">
|
|
{% include "front/snippets/ruby.html" %}
|
|
</div>
|
|
<div role="tabpanel" class="tab-pane" id="node">
|
|
{% include "front/snippets/node.html" %}
|
|
</div>
|
|
<div role="tabpanel" class="tab-pane" id="php">
|
|
{% include "front/snippets/php.html" %}
|
|
</div>
|
|
<div class="tab-pane" id="browser">
|
|
{% include "front/snippets/browser.html" %}
|
|
</div>
|
|
<div class="tab-pane" id="powershell">
|
|
{% include "front/snippets/powershell.html" %}
|
|
</div>
|
|
<div class="tab-pane" id="email">
|
|
<p>
|
|
As an alternative to HTTP/HTTPS requests,
|
|
you can "ping" this check by sending an
|
|
email message to <code class="em"></code>
|
|
</p>
|
|
</div>
|
|
{% endwith %}
|
|
</div>
|
|
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Got It!</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="ping-details-modal" class="modal">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div id="ping-details-body">Loading</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Got It!</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form id="pause-form" method="post">
|
|
{% csrf_token %}
|
|
</form>
|
|
|
|
{% 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/selectize.min.js' %}"></script>
|
|
<script src="{% static 'js/nouislider.min.js' %}"></script>
|
|
<script src="{% static 'js/clipboard.min.js' %}"></script>
|
|
<script src="{% static 'js/snippet-copy.js' %}"></script>
|
|
<script src="{% static 'js/checks.js' %}"></script>
|
|
{% endcompress %}
|
|
{% endblock %}
|