harmacist/healthchecks
1
0
Fork 0
forked from GithubBackups/healthchecks
Code Issues Pull Requests Projects Releases Wiki Activity

Fix page structure, update copy

Browse Source
This commit is contained in:
Pēteris Caune 2021-07-16 16:36:32 +03:00
parent 94c5ea3e13
commit 02cdbb9222
No known key found for this signature in database
GPG Key ID: E28D7679E9A9EDE2
2 changed files with 81 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
static/css/welcome.css
View File

@ -83,11 +83,16 @@
margin-bottom: 80px; margin-bottom: 80px;
} }
#welcome-integrations h1 { #welcome-integrations h2 {
font-size: 24px;
text-align: center; text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
} }
#welcome-integrations h2 small {
font-size: 14px;
}
#welcome-integrations .integration { #welcome-integrations .integration {
display: block; display: block;
color: var(--text-color); color: var(--text-color);
@ -109,13 +114,15 @@
height: 48px; height: 48px;
} }
#welcome-integrations h3 { #welcome-integrations p {
font-size: 18px; font-size: 18px;
margin-bottom: 0; margin: 20px 0 0 0;
line-height: 1.1;
} }
#welcome-integrations h3 small { #welcome-integrations p small {
font-size: 12px; font-size: 12px;
color: #777777;
} }
.use-cases li { .use-cases li {

140
templates/front/welcome.html
View File

@ -245,7 +245,7 @@
<td> <td>
{% blocktrans trimmed %} {% blocktrans trimmed %}
Up. Up.
Time since last ping has not exceeded <strong>Period</strong>. The time since the last ping has not exceeded <strong>Period</strong>.
{% endblocktrans %} {% endblocktrans %}
</td> </td>
</tr> </tr>
@ -256,7 +256,7 @@
<td> <td>
{% blocktrans trimmed %} {% blocktrans trimmed %}
Late. Late.
Time since last ping has exceeded <strong>Period</strong>, The time since the last ping has exceeded <strong>Period</strong>,
but has not yet exceeded <strong>Period</strong> + <strong>Grace</strong>. but has not yet exceeded <strong>Period</strong> + <strong>Grace</strong>.
{% endblocktrans %} {% endblocktrans %}
</td> </td>
@ -268,8 +268,8 @@
<td> <td>
{% blocktrans trimmed %} {% blocktrans trimmed %}
Down. Down.
Time since last ping has exceeded <strong>Period</strong> + <strong>Grace</strong>. The time since the last ping has exceeded <strong>Period</strong> + <strong>Grace</strong>.
When check goes from "Late" to "Down", {{ site_name }} When a check goes from "Late" to "Down", {{ site_name }}
sends you a notification. sends you a notification.
{% endblocktrans %} {% endblocktrans %}
</td> </td>
@ -304,7 +304,7 @@
<p> <p>
{% blocktrans trimmed %} {% blocktrans trimmed %}
<strong>Grace Time</strong> specifies how "late" a ping can <strong>Grace Time</strong> specifies how "late" a ping can
be before you will be alerted. Set it to be a little above be before you are alerted. You should set it to be a little above
the expected duration of your cron job. the expected duration of your cron job.
{% endblocktrans %} {% endblocktrans %}
</p> </p>
@ -325,7 +325,7 @@
{% blocktrans trimmed %} {% blocktrans trimmed %}
You can add a longer, free-form description to each You can add a longer, free-form description to each
check. Leave notes and pointers for yourself and check. Leave notes and pointers for yourself and
for your team. your team.
{% endblocktrans %} {% endblocktrans %}
</p> </p>
<p> <p>
@ -356,8 +356,8 @@
</p> </p>
<p> <p>
{% blocktrans trimmed %} {% blocktrans trimmed %}
The badges have public, but hard-to-guess URLs. The badges have public but hard-to-guess URLs.
You can use them in your READMEs, dashboards or status pages. You can use them in your READMEs, dashboards, or status pages.
{% endblocktrans %} {% endblocktrans %}
</p> </p>
</div> </div>
@ -365,19 +365,19 @@
<div id="welcome-integrations" class="row"> <div id="welcome-integrations" class="row">
<div class="col-sm-12"> <div class="col-sm-12">
<h1>{% trans "Integrations" %}<br> <h2>{% trans "Integrations" %}<br>
<small> <small>
{% trans "Set up multiple ways to get notified:" %} {% trans "Set up multiple ways to get notified:" %}
</small> </small>
</h1> </h2>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration"> <div class="integration">
<img src="{% static 'img/integrations/email.png' %}" class="icon" alt="" /> <img src="{% static 'img/integrations/email.png' %}" class="icon" alt="" />
<h3> <p>
{% trans "Email" %}<br> {% trans "Email" %}<br>
<small>&nbsp;</small> <small>&nbsp;</small>
</h3> </p>
</div> </div>
</div> </div>
@ -385,10 +385,10 @@
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration"> <div class="integration">
<img src="{% static 'img/integrations/webhook.png' %}" class="icon" alt="" /> <img src="{% static 'img/integrations/webhook.png' %}" class="icon" alt="" />
<h3> <p>
Webhooks<br> Webhooks<br>
<small>&nbsp;</small> <small>&nbsp;</small>
</h3> </p>
</div> </div>
</div> </div>
{% endif %} {% endif %}
@ -398,18 +398,18 @@
{% if enable_slack_btn %} {% if enable_slack_btn %}
<a href="{% url 'hc-slack-help' %}" class="integration"> <a href="{% url 'hc-slack-help' %}" class="integration">
<img src="{% static 'img/integrations/slack.png' %}" class="icon" alt="" /> <img src="{% static 'img/integrations/slack.png' %}" class="icon" alt="" />
<h3> <p>
Slack<br> Slack<br>
<small>{% trans "Chat" %}</small> <small>{% trans "Chat" %}</small>
</h3> </p>
</a> </a>
{% else %} {% else %}
<div class="integration"> <div class="integration">
<img src="{% static 'img/integrations/slack.png' %}" class="icon" alt="" /> <img src="{% static 'img/integrations/slack.png' %}" class="icon" alt="" />
<h3> <p>
Slack<br> Slack<br>
<small>{% trans "Chat" %}</small> <small>{% trans "Chat" %}</small>
</h3> </p>
</div> </div>
{% endif %} {% endif %}
</div> </div>
@ -419,10 +419,10 @@
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration"> <div class="integration">
<img src="{% static 'img/integrations/apprise.png' %}" class="icon" alt="" /> <img src="{% static 'img/integrations/apprise.png' %}" class="icon" alt="" />
<h3> <p>
Apprise<br> Apprise<br>
<small>{% trans "Push Notifications" %}</small> <small>{% trans "Push Notifications" %}</small>
</h3> </p>
</div> </div>
</div> </div>
{% endif %} {% endif %}
@ -431,10 +431,10 @@
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration"> <div class="integration">
<img src="{% static 'img/integrations/discord.png' %}" class="icon" alt="" /> <img src="{% static 'img/integrations/discord.png' %}" class="icon" alt="" />
<h3> <p>
Discord<br> Discord<br>
<small>{% trans "Chat" %}</small> <small>{% trans "Chat" %}</small>
</h3> </p>
</div> </div>
</div> </div>
{% endif %} {% endif %}
@ -443,7 +443,7 @@
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration"> <div class="integration">
<img src="{% static 'img/integrations/linenotify.png' %}" class="icon" alt="" /> <img src="{% static 'img/integrations/linenotify.png' %}" class="icon" alt="" />
<h3>LINE Notify<br><small>Chat</small></h3> <p>LINE Notify<br><small>Chat</small></p>
</div> </div>
</div> </div>
{% endif %} {% endif %}
@ -452,10 +452,10 @@
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration"> <div class="integration">
<img src="{% static 'img/integrations/matrix.png' %}" class="icon" alt="" /> <img src="{% static 'img/integrations/matrix.png' %}" class="icon" alt="" />
<h3> <p>
Matrix<br> Matrix<br>
<small>{% trans "Chat" %}</small> <small>{% trans "Chat" %}</small>
</h3> </p>
</div> </div>
</div> </div>
{% endif %} {% endif %}
@ -464,10 +464,10 @@
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration"> <div class="integration">
<img src="{% static 'img/integrations/mattermost.png' %}" class="icon" alt="" /> <img src="{% static 'img/integrations/mattermost.png' %}" class="icon" alt="" />
<h3> <p>
Mattermost<br> Mattermost<br>
<small>{% trans "Chat" %}</small> <small>{% trans "Chat" %}</small>
</h3> </p>
</div> </div>
</div> </div>
{% endif %} {% endif %}
@ -476,10 +476,10 @@
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration"> <div class="integration">
<img src="{% static 'img/integrations/msteams.png' %}" class="icon" alt="" /> <img src="{% static 'img/integrations/msteams.png' %}" class="icon" alt="" />
<h3> <p>
Microsoft Teams<br> Microsoft Teams<br>
<small>{% trans "Chat" %}</small> <small>{% trans "Chat" %}</small>
</h3> </p>
</div> </div>
</div> </div>
{% endif %} {% endif %}
@ -488,10 +488,10 @@
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration"> <div class="integration">
<img src="{% static 'img/integrations/opsgenie.png' %}" class="icon" alt="" /> <img src="{% static 'img/integrations/opsgenie.png' %}" class="icon" alt="" />
<h3> <p>
Opsgenie<br> OpsGenie<br>
<small>{% trans "Incident Management" %}</small> <small>{% trans "Incident Management" %}</small>
</h3> </p>
</div> </div>
</div> </div>
{% endif %} {% endif %}
@ -501,18 +501,18 @@
{% if enable_pd_simple %} {% if enable_pd_simple %}
<a href="{% url 'hc-pagerduty-help' %}" class="integration"> <a href="{% url 'hc-pagerduty-help' %}" class="integration">
<img src="{% static 'img/integrations/pd.png' %}" class="icon" alt="" /> <img src="{% static 'img/integrations/pd.png' %}" class="icon" alt="" />
<h3> <p>
PagerDuty<br> PagerDuty<br>
<small>{% trans "Incident Management" %}</small> <small>{% trans "Incident Management" %}</small>
</h3> </p>
</a> </a>
{% else %} {% else %}
<div class="integration"> <div class="integration">
<img src="{% static 'img/integrations/pd.png' %}" class="icon" alt="" /> <img src="{% static 'img/integrations/pd.png' %}" class="icon" alt="" />
<h3> <p>
PagerDuty<br> PagerDuty<br>
<small>{% trans "Incident Management" %}</small> <small>{% trans "Incident Management" %}</small>
</h3> </p>
</div> </div>
{% endif %} {% endif %}
</div> </div>
@ -522,10 +522,10 @@
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration"> <div class="integration">
<img src="{% static 'img/integrations/pagertree.png' %}" class="icon" alt="" /> <img src="{% static 'img/integrations/pagertree.png' %}" class="icon" alt="" />
<h3> <p>
PagerTree<br> PagerTree<br>
<small>{% trans "Incident Management" %}</small> <small>{% trans "Incident Management" %}</small>
</h3> </p>
</div> </div>
</div> </div>
{% endif %} {% endif %}
@ -534,10 +534,10 @@
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration"> <div class="integration">
<img src="{% static 'img/integrations/call.png' %}" class="icon" alt="" /> <img src="{% static 'img/integrations/call.png' %}" class="icon" alt="" />
<h3> <p>
{% trans "Phone Call" %}<br> {% trans "Phone Call" %}<br>
<small>&nbsp;</small> <small>&nbsp;</small>
</h3> </p>
</div> </div>
</div> </div>
{% endif %} {% endif %}
@ -546,10 +546,10 @@
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<a href="{% url 'hc-serve-doc' 'configuring_prometheus' %}" class="integration"> <a href="{% url 'hc-serve-doc' 'configuring_prometheus' %}" class="integration">
<img src="{% static 'img/integrations/prometheus.png' %}" class="icon" alt="" /> <img src="{% static 'img/integrations/prometheus.png' %}" class="icon" alt="" />
<h3> <p>
Prometheus<br> Prometheus<br>
<small>{% trans "Event Monitoring" %}</small> <small>{% trans "Event Monitoring" %}</small>
</h3> </p>
</a> </a>
</div> </div>
{% endif %} {% endif %}
@ -558,10 +558,10 @@
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration"> <div class="integration">
<img src="{% static 'img/integrations/pushbullet.png' %}" class="icon" alt="" /> <img src="{% static 'img/integrations/pushbullet.png' %}" class="icon" alt="" />
<h3> <p>
Pushbullet<br> Pushbullet<br>
<small>{% trans "Push Notifications" %}</small> <small>{% trans "Push Notifications" %}</small>
</h3> </p>
</div> </div>
</div> </div>
{% endif %} {% endif %}
@ -570,10 +570,10 @@
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<a href="{% url 'hc-pushover-help' %}" class="integration"> <a href="{% url 'hc-pushover-help' %}" class="integration">
<img src="{% static 'img/integrations/po.png' %}" class="icon" alt="" /> <img src="{% static 'img/integrations/po.png' %}" class="icon" alt="" />
<h3> <p>
Pushover<br> Pushover<br>
<small>{% trans "Push Notifications" %}</small> <small>{% trans "Push Notifications" %}</small>
</h3> </p>
</a> </a>
</div> </div>
{% endif %} {% endif %}
@ -582,10 +582,10 @@
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration"> <div class="integration">
<img src="{% static 'img/integrations/shell.png' %}" class="icon" alt="" /> <img src="{% static 'img/integrations/shell.png' %}" class="icon" alt="" />
<h3> <p>
{% trans "Shell Commands" %}<br> {% trans "Shell Commands" %}<br>
<small>&nbsp;</small> <small>&nbsp;</small>
</h3> </p>
</div> </div>
</div> </div>
{% endif %} {% endif %}
@ -594,10 +594,10 @@
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration"> <div class="integration">
<img src="{% static 'img/integrations/signal.png' %}" class="icon" alt="" /> <img src="{% static 'img/integrations/signal.png' %}" class="icon" alt="" />
<h3> <p>
{% trans "Signal" %}<br> {% trans "Signal" %}<br>
<small>{% trans "Chat" %}</small> <small>{% trans "Chat" %}</small>
</h3> </p>
</div> </div>
</div> </div>
{% endif %} {% endif %}
@ -606,10 +606,10 @@
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration"> <div class="integration">
<img src="{% static 'img/integrations/sms.png' %}" class="icon" alt="" /> <img src="{% static 'img/integrations/sms.png' %}" class="icon" alt="" />
<h3> <p>
{% trans "SMS" %}<br> {% trans "SMS" %}<br>
<small>&nbsp;</small> <small>&nbsp;</small>
</h3> </p>
</div> </div>
</div> </div>
{% endif %} {% endif %}
@ -618,10 +618,10 @@
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration"> <div class="integration">
<img src="{% static 'img/integrations/spike.png' %}" class="icon" alt="Spike.sh icon" /> <img src="{% static 'img/integrations/spike.png' %}" class="icon" alt="Spike.sh icon" />
<h3> <p>
Spike.sh<br> Spike.sh<br>
<small>{% trans "Incident Management" %}</small> <small>{% trans "Incident Management" %}</small>
</h3> </p>
</div> </div>
</div> </div>
{% endif %} {% endif %}
@ -630,10 +630,10 @@
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<a href="{% url 'hc-telegram-help' %}" class="integration"> <a href="{% url 'hc-telegram-help' %}" class="integration">
<img src="{% static 'img/integrations/telegram.png' %}" class="icon" alt="" /> <img src="{% static 'img/integrations/telegram.png' %}" class="icon" alt="" />
<h3> <p>
Telegram<br> Telegram<br>
<small>{% trans "Chat" %}</small> <small>{% trans "Chat" %}</small>
</h3> </p>
</a> </a>
</div> </div>
{% endif %} {% endif %}
@ -642,10 +642,10 @@
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration"> <div class="integration">
<img src="{% static 'img/integrations/trello.png' %}" class="icon" alt="" /> <img src="{% static 'img/integrations/trello.png' %}" class="icon" alt="" />
<h3> <p>
Trello<br> Trello<br>
<small>{% trans "Project Management" %}</small> <small>{% trans "Project Management" %}</small>
</h3> </p>
</div> </div>
</div> </div>
{% endif %} {% endif %}
@ -654,10 +654,10 @@
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration"> <div class="integration">
<img src="{% static 'img/integrations/victorops.png' %}" class="icon" alt="" /> <img src="{% static 'img/integrations/victorops.png' %}" class="icon" alt="" />
<h3> <p>
Splunk On-Call<br> Splunk On-Call<br>
<small>{% trans "Incident Management" %}</small> <small>{% trans "Incident Management" %}</small>
</h3> </p>
</div> </div>
</div> </div>
{% endif %} {% endif %}
@ -666,10 +666,10 @@
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration"> <div class="integration">
<img src="{% static 'img/integrations/whatsapp.png' %}" class="icon" alt="" /> <img src="{% static 'img/integrations/whatsapp.png' %}" class="icon" alt="" />
<h3> <p>
WhatsApp<br> WhatsApp<br>
<small>{% trans "Chat" %}</small> <small>{% trans "Chat" %}</small>
</h3> </p>
</div> </div>
</div> </div>
{% endif %} {% endif %}
@ -678,10 +678,10 @@
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="integration"> <div class="integration">
<img src="{% static 'img/integrations/zulip.png' %}" class="icon" alt="" /> <img src="{% static 'img/integrations/zulip.png' %}" class="icon" alt="" />
<h3> <p>
Zulip<br> Zulip<br>
<small>{% trans "Chat" %}</small> <small>{% trans "Chat" %}</small>
</h3> </p>
</div> </div>
</div> </div>
{% endif %} {% endif %}
@ -696,13 +696,13 @@
</h1> </h1>
</div> </div>
<div class="col-sm-6 use-cases"> <div class="col-sm-6 use-cases">
<h2>{% trans "Cron Jobs" %}</h2> <h3>{% trans "Cron Jobs" %}</h3>
<p> <p>
{% blocktrans trimmed %} {% blocktrans trimmed %}
{{ site_name }} monitoring is a great fit for cron jobs and cron-like {{ site_name }} monitoring is a great fit for cron jobs and cron-like
systems (systemd timers, Jenkins build jobs, Windows Scheduled Tasks, systems (systemd timers, Jenkins build jobs, Windows Scheduled Tasks,
wp-cron, uwsgi cron-like interface, Heroku Scheduler, ...). A failed wp-cron, uwsgi cron-like interface, Heroku Scheduler, ...). A failed
cron job often has no immediate visible consequences, and can go cron job often has no immediate visible consequences and can go
unnoticed for a long time. unnoticed for a long time.
{% endblocktrans %} {% endblocktrans %}
</p> </p>
@ -719,13 +719,13 @@
</ul> </ul>
</div> </div>
<div class="col-sm-6 use-cases"> <div class="col-sm-6 use-cases">
<h2>{% trans "Processes, Services, Servers" %}</h2> <h3>{% trans "Processes, Services, Servers" %}</h3>
<p> <p>
{% blocktrans trimmed %} {% blocktrans trimmed %}
{{ site_name }} monitoring can be used for lightweight server You can use {{ site_name }} for lightweight server
monitoring: ensuring a particular system service, or the server as a monitoring: ensuring a particular system service or the whole server
whole is alive and healthy. Write a shell script that checks for a is alive and healthy. Write a shell script that checks for a
specific condition, and pings {{ site_name }} if successful. Run the specific condition, and pings {{ site_name }} if successful. Run the
shell script regularly. shell script regularly.
{% endblocktrans %} {% endblocktrans %}