0
0
Fork 0
mirror of https://github.com/healthchecks/healthchecks.git synced 2025-04-08 14:40:05 +00:00
healthchecks_healthchecks/templates/front/welcome.html
2021-10-01 13:12:20 +03:00

787 lines
28 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{% extends "base.html" %}
{% load compress hc_extras i18n static %}
{% block description %}
<meta name="description" content="{% blocktrans %}Cron Monitoring. Monitor nightly backups, weekly reports, cron jobs and background tasks. Receive alerts when your tasks don't run on time.{% endblocktrans %}">
{% endblock %}
{% block head %}
<link rel="canonical" href="{% site_root %}" />
{% endblock %}
{% block containers %}
<div class="index-bleed">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1 id="pitch">
{% trans "Monitoring for your nightly backups, weekly reports, cron jobs and background tasks." %}
</h1>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-push-6">
<p id="pitch-text">
{% trans "Make HTTP requests to the Ping URL at regular intervals." %}
<strong>
{% blocktrans trimmed %}
When the URL is not pinged on time,
{{ site_name }} will send you an alert.
{% endblocktrans %}
</strong>
{% trans "You can monitor any service that can make HTTP requests or send emails." %}
</p>
</div>
<div class="col-sm-6 col-sm-pull-6">
<h2 id="pitch-subtitle">
{% blocktrans trimmed %}
For each of your periodic tasks,
{{ site_name }} provides an unique URL similar to this one:
{% endblocktrans %}
</h2>
<div id="pitch-url">
<code>{{ ping_url }}</code>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<ul class="nav nav-tabs" 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 class="hidden-xs">
<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="#go" data-toggle="tab">Go</a>
</li>
<li class="hidden-xs">
<a href="#php" data-toggle="tab">PHP</a>
</li>
<li class="hidden-xs">
<a href="#cs" data-toggle="tab">C#</a>
</li>
<li class="hidden-xs">
<a href="#browser" data-toggle="tab">{% trans "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">{% trans "Email" %}</a>
</li>
</ul>
<div class="tab-content">
<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="go">
{% include "front/snippets/go.html" %}
</div>
<div role="tabpanel" class="tab-pane" id="php">
{% include "front/snippets/php.html" %}
</div>
<div role="tabpanel" class="tab-pane" id="cs">
{% include "front/snippets/cs.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" %}
{% include "front/snippets/powershell_inline.html" %}
</div>
<div class="tab-pane tab-pane-email" id="email">
<p>
{% blocktrans trimmed %}
As an alternative to HTTP requests,
you can also report "liveness" by
<strong>sending email messages</strong>.
{% endblocktrans %}
</p>
<p>
{% blocktrans trimmed %}
You can instruct {{ site_name }} to look for a particular
keyword in the subject line. This is handy when your backup
software sends an email after every run, and uses a different
subject line depending on success or failure.
{% endblocktrans %}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
{% if registration_open %}
<div class="get-started-bleed">
<div class="container">
<div class="row">
<div id="get-started" class="col-sm-8 col-sm-offset-2 text-center">
<h1>
{% blocktrans trimmed %}
{{ site_name }} monitors the heartbeat messages sent by your cron
jobs, services and APIs. Get immediate alerts when they don't
arrive on schedule.
{% endblocktrans %}
</h1>
<a href="#" data-toggle="modal" data-target="#signup-modal" class="btn btn-lg btn-primary">
{% trans "Sign Up It's Free" %}
</a>
</div>
</div>
</div>
</div>
{% endif %}
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2 class="tour-title">
{% trans "A quick peek of what's inside:" %}
</h2>
</div>
</div>
<div class="row tour-section">
<div class="col-sm-8">
<img
class="img-responsive"
src="{% static 'img/my_checks.png' %}"
srcset="{% static 'img/my_checks.png'%} 1x, {% static 'img/my_checks@2x.png'%} 2x"
alt="My Checks page" />
</div>
<div class="col-sm-4">
<h3>
{% trans "Live-updating Dashboard" %}
</h3>
<p>
{% blocktrans trimmed %}
A list of your checks, one for each Cron job, daemon or
scheduled task you want to monitor.
{% endblocktrans %}
</p>
<p>
{% blocktrans trimmed %}
Give names and assign tags to your checks to easily recognize
them later.
{% endblocktrans %}
</p>
<p>
{% blocktrans trimmed %}
Tap on the integration icons to toggle them on and off.
{% endblocktrans %}
</p>
<p>
{% blocktrans trimmed %}
Adjust Period and Grace time to match the
periodicity and duration of your tasks.
{% endblocktrans %}
</p>
</div>
</div>
<div class="row tour-section">
<div class="col-sm-8">
<img
class="img-responsive"
src="{% static 'img/period_grace.png' %}"
srcset="{% static 'img/period_grace.png'%} 1x, {% static 'img/period_grace@2x.png'%} 2x"
alt="Period/Grace Time dialog" />
</div>
<div class="col-sm-4">
<h3>{% trans "Simple Configuration" %}</h3>
{% blocktrans trimmed %}
Each check has configurable <strong>Period</strong> and <strong>Grace Time</strong> parameters.
Depending on these parameters and time since the last ping, the check is in one of the
following states:
{% endblocktrans %}
<table class="table">
<tr>
<td>
<span class="status ic-new"></span>
</td>
<td>
{% blocktrans trimmed %}
New.
A check that has been created, but has not received any pings yet.
{% endblocktrans %}
</td>
</tr>
<tr>
<td>
<span class="status ic-up"></span>
</td>
<td>
{% blocktrans trimmed %}
Up.
The time since the last ping has not exceeded <strong>Period</strong>.
{% endblocktrans %}
</td>
</tr>
<tr>
<td>
<span class="status ic-grace"></span>
</td>
<td>
{% blocktrans trimmed %}
Late.
The time since the last ping has exceeded <strong>Period</strong>,
but has not yet exceeded <strong>Period</strong> + <strong>Grace</strong>.
{% endblocktrans %}
</td>
</tr>
<tr>
<td>
<span class="status ic-down"></span>
</td>
<td>
{% blocktrans trimmed %}
Down.
The time since the last ping has exceeded <strong>Period</strong> + <strong>Grace</strong>.
When a check goes from "Late" to "Down", {{ site_name }}
sends you a notification.
{% endblocktrans %}
</td>
</tr>
</table>
</div>
</div>
<div class="row tour-section">
<div class="col-sm-8">
<img
class="img-responsive"
src="{% static 'img/cron.png' %}"
srcset="{% static 'img/cron.png'%} 1x, {% static 'img/cron@2x.png'%} 2x"
alt="Cron dialog" />
</div>
<div class="col-sm-4">
<h3>{% trans "Cron Expression Support" %}</h3>
<p>
{% blocktrans trimmed %}
Alternatively, you can define the expected ping dates and times
using a cron expression. See
{% endblocktrans %}
<a href="{% url 'hc-docs-cron' %}">
{% trans "Cron Syntax Cheatsheet" %}
</a>
{% blocktrans trimmed %}
for the supported syntax features.
{% endblocktrans %}
</p>
<p>
{% blocktrans trimmed %}
<strong>Grace Time</strong> specifies how "late" a ping can
be before you are alerted. You should set it to be a little above
the expected duration of your cron job.
{% endblocktrans %}
</p>
</div>
</div>
<div class="row tour-section">
<div class="col-sm-8">
<img
class="img-responsive"
src="{% static 'img/check_details.png' %}"
srcset="{% static 'img/check_details.png'%} 1x, {% static 'img/check_details@2x.png'%} 2x"
alt="Details Page" />
</div>
<div class="col-sm-4">
<h3>{% trans "Details and Event Log" %}</h3>
<p>
{% blocktrans trimmed %}
You can add a longer, free-form description to each
check. Leave notes and pointers for yourself and
your team.
{% endblocktrans %}
</p>
<p>
{% blocktrans trimmed %}
You can also see the log of received pings and
sent "Down" notifications.
{% endblocktrans %}
</p>
</div>
</div>
<div class="row tour-section">
<div class="col-sm-8">
<img
class="img-responsive"
src="{% static 'img/badges.png' %}"
srcset="{% static 'img/badges.png'%} 1x, {% static 'img/badges@2x.png'%} 2x"
alt="Details Page" />
</div>
<div class="col-sm-4">
<h3>{% trans "Public Status Badges" %}</h3>
<p>
{% blocktrans trimmed %}
{{ site_name }} provides status badges for each of the tags
you have used. Additionally, the "{{ site_name }}" badge
shows the overall status of all checks in your account.
{% endblocktrans %}
</p>
<p>
{% blocktrans trimmed %}
The badges have public but hard-to-guess URLs.
You can use them in your READMEs, dashboards, or status pages.
{% endblocktrans %}
</p>
</div>
</div>
<div id="welcome-integrations" class="row">
<div class="col-sm-12">
<h2>{% trans "Integrations" %}<br>
<small>
{% trans "Set up multiple ways to get notified:" %}
</small>
</h2>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration">
<img src="{% static 'img/integrations/email.png' %}" class="icon" alt="" />
<p>
{% trans "Email" %}<br>
<small>&nbsp;</small>
</p>
</div>
</div>
{% if enable_webhooks %}
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration">
<img src="{% static 'img/integrations/webhook.png' %}" class="icon" alt="" />
<p>
Webhooks<br>
<small>&nbsp;</small>
</p>
</div>
</div>
{% endif %}
{% if enable_slack %}
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
{% if enable_slack_btn %}
<a href="{% url 'hc-slack-help' %}" class="integration">
<img src="{% static 'img/integrations/slack.png' %}" class="icon" alt="" />
<p>
Slack<br>
<small>{% trans "Chat" %}</small>
</p>
</a>
{% else %}
<div class="integration">
<img src="{% static 'img/integrations/slack.png' %}" class="icon" alt="" />
<p>
Slack<br>
<small>{% trans "Chat" %}</small>
</p>
</div>
{% endif %}
</div>
{% endif %}
{% if enable_apprise %}
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration">
<img src="{% static 'img/integrations/apprise.png' %}" class="icon" alt="" />
<p>
Apprise<br>
<small>{% trans "Push Notifications" %}</small>
</p>
</div>
</div>
{% endif %}
{% if enable_discord %}
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration">
<img src="{% static 'img/integrations/discord.png' %}" class="icon" alt="" />
<p>
Discord<br>
<small>{% trans "Chat" %}</small>
</p>
</div>
</div>
{% endif %}
{% if enable_linenotify %}
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration">
<img src="{% static 'img/integrations/linenotify.png' %}" class="icon" alt="" />
<p>LINE Notify<br><small>Chat</small></p>
</div>
</div>
{% endif %}
{% if enable_matrix %}
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration">
<img src="{% static 'img/integrations/matrix.png' %}" class="icon" alt="" />
<p>
Matrix<br>
<small>{% trans "Chat" %}</small>
</p>
</div>
</div>
{% endif %}
{% if enable_mattermost %}
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration">
<img src="{% static 'img/integrations/mattermost.png' %}" class="icon" alt="" />
<p>
Mattermost<br>
<small>{% trans "Chat" %}</small>
</p>
</div>
</div>
{% endif %}
{% if enable_msteams %}
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration">
<img src="{% static 'img/integrations/msteams.png' %}" class="icon" alt="" />
<p>
Microsoft Teams<br>
<small>{% trans "Chat" %}</small>
</p>
</div>
</div>
{% endif %}
{% if enable_opsgenie %}
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration">
<img src="{% static 'img/integrations/opsgenie.png' %}" class="icon" alt="" />
<p>
OpsGenie<br>
<small>{% trans "Incident Management" %}</small>
</p>
</div>
</div>
{% endif %}
{% if enable_pd %}
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
{% if enable_pd_simple %}
<a href="{% url 'hc-pagerduty-help' %}" class="integration">
<img src="{% static 'img/integrations/pd.png' %}" class="icon" alt="" />
<p>
PagerDuty<br>
<small>{% trans "Incident Management" %}</small>
</p>
</a>
{% else %}
<div class="integration">
<img src="{% static 'img/integrations/pd.png' %}" class="icon" alt="" />
<p>
PagerDuty<br>
<small>{% trans "Incident Management" %}</small>
</p>
</div>
{% endif %}
</div>
{% endif %}
{% if enable_pagertree %}
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration">
<img src="{% static 'img/integrations/pagertree.png' %}" class="icon" alt="" />
<p>
PagerTree<br>
<small>{% trans "Incident Management" %}</small>
</p>
</div>
</div>
{% endif %}
{% if enable_call %}
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration">
<img src="{% static 'img/integrations/call.png' %}" class="icon" alt="" />
<p>
{% trans "Phone Call" %}<br>
<small>&nbsp;</small>
</p>
</div>
</div>
{% endif %}
{% if enable_prometheus %}
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<a href="{% url 'hc-serve-doc' 'configuring_prometheus' %}" class="integration">
<img src="{% static 'img/integrations/prometheus.png' %}" class="icon" alt="" />
<p>
Prometheus<br>
<small>{% trans "Event Monitoring" %}</small>
</p>
</a>
</div>
{% endif %}
{% if enable_pushbullet %}
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration">
<img src="{% static 'img/integrations/pushbullet.png' %}" class="icon" alt="" />
<p>
Pushbullet<br>
<small>{% trans "Push Notifications" %}</small>
</p>
</div>
</div>
{% endif %}
{% if enable_pushover %}
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<a href="{% url 'hc-pushover-help' %}" class="integration">
<img src="{% static 'img/integrations/po.png' %}" class="icon" alt="" />
<p>
Pushover<br>
<small>{% trans "Push Notifications" %}</small>
</p>
</a>
</div>
{% endif %}
{% if enable_shell %}
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration">
<img src="{% static 'img/integrations/shell.png' %}" class="icon" alt="" />
<p>
{% trans "Shell Commands" %}<br>
<small>&nbsp;</small>
</p>
</div>
</div>
{% endif %}
{% if enable_signal %}
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration">
<img src="{% static 'img/integrations/signal.png' %}" class="icon" alt="" />
<p>
{% trans "Signal" %}<br>
<small>{% trans "Chat" %}</small>
</p>
</div>
</div>
{% endif %}
{% if enable_sms %}
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration">
<img src="{% static 'img/integrations/sms.png' %}" class="icon" alt="" />
<p>
{% trans "SMS" %}<br>
<small>&nbsp;</small>
</p>
</div>
</div>
{% endif %}
{% if enable_spike %}
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration">
<img src="{% static 'img/integrations/spike.png' %}" class="icon" alt="Spike.sh icon" />
<p>
Spike.sh<br>
<small>{% trans "Incident Management" %}</small>
</p>
</div>
</div>
{% endif %}
{% if enable_telegram %}
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<a href="{% url 'hc-telegram-help' %}" class="integration">
<img src="{% static 'img/integrations/telegram.png' %}" class="icon" alt="" />
<p>
Telegram<br>
<small>{% trans "Chat" %}</small>
</p>
</a>
</div>
{% endif %}
{% if enable_trello %}
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration">
<img src="{% static 'img/integrations/trello.png' %}" class="icon" alt="" />
<p>
Trello<br>
<small>{% trans "Project Management" %}</small>
</p>
</div>
</div>
{% endif %}
{% if enable_victorops %}
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration">
<img src="{% static 'img/integrations/victorops.png' %}" class="icon" alt="" />
<p>
Splunk On-Call<br>
<small>{% trans "Incident Management" %}</small>
</p>
</div>
</div>
{% endif %}
{% if enable_whatsapp %}
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration">
<img src="{% static 'img/integrations/whatsapp.png' %}" class="icon" alt="" />
<p>
WhatsApp<br>
<small>{% trans "Chat" %}</small>
</p>
</div>
</div>
{% endif %}
{% if enable_zulip %}
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration">
<img src="{% static 'img/integrations/zulip.png' %}" class="icon" alt="" />
<p>
Zulip<br>
<small>{% trans "Chat" %}</small>
</p>
</div>
</div>
{% endif %}
</div>
<div class="row tour-section">
<div class="col-sm-12">
<h1 class="text-center">
{% blocktrans trimmed %}
What Can I Monitor With {{ site_name }}?
{% endblocktrans %}
</h1>
</div>
<div class="col-sm-6 use-cases">
<h3>{% trans "Cron Jobs" %}</h3>
<p>
{% blocktrans trimmed %}
{{ site_name }} monitoring is a great fit for cron jobs and cron-like
systems (systemd timers, Jenkins build jobs, Windows Scheduled Tasks,
wp-cron, uwsgi cron-like interface, Heroku Scheduler, ...). A failed
cron job often has no immediate visible consequences and can go
unnoticed for a long time.
{% endblocktrans %}
</p>
<p>{% trans "Specific examples:" %}</p>
<ul>
<li>{% trans "Filesystem backups" %}</li>
<li>{% trans "Database backups" %}</li>
<li>{% trans "Daily, weekly, monthly report emails" %}</li>
<li>{% trans "SSL renewals" %}</li>
<li>{% trans "Business data import and sync" %}</li>
<li>{% trans "Antivirus scans" %}</li>
<li>{% trans "Dynamic DNS updates" %}</li>
</ul>
</div>
<div class="col-sm-6 use-cases">
<h3>{% trans "Processes, Services, Servers" %}</h3>
<p>
{% blocktrans trimmed %}
You can use {{ site_name }} for lightweight server
monitoring: ensuring a particular system service or the whole server
is alive and healthy. Write a shell script that checks for a
specific condition, and pings {{ site_name }} if successful. Run the
shell script regularly.
{% endblocktrans %}
</p>
<p>{% trans "Specific examples:" %}</p>
<ul>
<li>{% trans "Check a specific docker container is running" %}</li>
<li>{% trans "Check a specific application process is running" %}</li>
<li>{% trans "Check database replication lag" %}</li>
<li>{% trans "Check system resources: free disk, free RAM, ..." %}</li>
<li>
{% blocktrans trimmed %}
Send simple, unconditional "I'm alive" messages from your server
(or your NAS, router, Raspberry Pi, ...)
{% endblocktrans %}
</li>
</ul>
</div>
</div>
<div class="row">
{% if registration_open %}
<div class="footer-jumbo-bleed">
<div class="col-sm-10 col-sm-offset-1">
<div id="footer-cta" class="jumbotron text-center">
<p>
{% blocktrans trimmed %}
{{ site_name }} is a <strong>free</strong> and
<a href="https://github.com/healthchecks/healthchecks">open source</a>
service. Setting up monitoring for your cron jobs only takes minutes.
Start sleeping better at nights!
{% endblocktrans %}
</p>
<a href="#" data-toggle="modal" data-target="#signup-modal" class="btn btn-lg btn-primary">
{% trans "Sign Up" %}
</a>
</div>
</div>
</div>
{% endif %}
</div>
</div>
{% include "front/signup_modal.html" %}
{% endblock %}
{% block scripts %}
{% compress js %}
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/clipboard.min.js' %}"></script>
<script src="{% static 'js/snippet-copy.js' %}"></script>
<script src="{% static 'js/signup.js' %}"></script>
{% endcompress %}
{% endblock %}