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

CSS counters for integration setup instructions.

Browse Source
This commit is contained in:
Pēteris Caune 2020-02-27 11:24:12 +02:00
parent b5b5c58d77
commit dc373dc054
No known key found for this signature in database
GPG Key ID: E28D7679E9A9EDE2
16 changed files with 77 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
static/css/channels.css
View File

@ -185,6 +185,12 @@ table.channels-table > tbody > tr > th {
.ai-step { .ai-step {
margin: 2em 0; margin: 2em 0;
counter-increment: ai-step;
}
.ai-step .step-no::after {
content: counter(ai-step);
} }
.ai-step .step-no { .ai-step .step-no {

BIN
static/img/integrations/setup_pdc_0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB

6
templates/integrations/add_matrix.html
View File

@ -17,7 +17,7 @@
<h2>Setup Guide</h2> <h2>Setup Guide</h2>
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">1</span> <span class="step-no"></span>
<div> <div>
<p> <p>
Invite <strong>{{ matrix_user_id }}</strong> Invite <strong>{{ matrix_user_id }}</strong>
@ -42,7 +42,7 @@
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">2</span> <span class="step-no"></span>
<p> <p>
Look up the room's <strong>alias</strong> or Look up the room's <strong>alias</strong> or
<strong>ID</strong>, and paste it in the form <strong>ID</strong>, and paste it in the form
@ -59,7 +59,7 @@
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">3</span> <span class="step-no"></span>
<p> <p>
{{ matrix_user_id }} will shortly join your room. {{ matrix_user_id }} will shortly join your room.
After that, you are all set! From now on After that, you are all set! From now on

6
templates/integrations/add_mattermost.html
View File

@ -18,7 +18,7 @@
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">1</span> <span class="step-no"></span>
Log into your Mattermost account and Log into your Mattermost account and
select <strong>Integrations</strong> in the select <strong>Integrations</strong> in the
hamburger menu. hamburger menu.
@ -32,7 +32,7 @@
</div> </div>
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">2</span> <span class="step-no"></span>
<p> <p>
In the "Integrations" screen, select <strong>Incoming Webhook</strong> In the "Integrations" screen, select <strong>Incoming Webhook</strong>
and then <strong>Add Incoming Webhook</strong>. and then <strong>Add Incoming Webhook</strong>.
@ -49,7 +49,7 @@
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">3</span> <span class="step-no"></span>
<p>Copy the displayed <strong>URL</strong> and paste it down below.</p> <p>Copy the displayed <strong>URL</strong> and paste it down below.</p>
<p>Save the integration, and it's done!</p> <p>Save the integration, and it's done!</p>
</div> </div>

8
templates/integrations/add_msteams.html
View File

@ -17,7 +17,7 @@
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">1</span> <span class="step-no"></span>
<p> <p>
Log into your Microsoft Teams account, click the <strong>Apps</strong> tab. Log into your Microsoft Teams account, click the <strong>Apps</strong> tab.
</p> </p>
@ -38,7 +38,7 @@
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">2</span> <span class="step-no"></span>
<p> <p>
Select the channel where you want {% site_name %} to post Select the channel where you want {% site_name %} to post
notifications. notifications.
@ -54,7 +54,7 @@
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">3</span> <span class="step-no"></span>
<p> <p>
Give the connector a descriptive name. Give the connector a descriptive name.
</p> </p>
@ -76,7 +76,7 @@
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">4</span> <span class="step-no"></span>
<p> <p>
Copy the displayed webhook URL and paste it Copy the displayed webhook URL and paste it
in the form below. Save the integration, and you are done! in the form below. Save the integration, and you are done!

6
templates/integrations/add_opsgenie.html
View File

@ -17,7 +17,7 @@
<h2>Setup Guide</h2> <h2>Setup Guide</h2>
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">1</span> <span class="step-no"></span>
<p> <p>
Log into your OpsGenie account, Log into your OpsGenie account,
go to <strong>Settings &gt; Integration list</strong>, go to <strong>Settings &gt; Integration list</strong>,
@ -38,7 +38,7 @@
</div> </div>
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">2</span> <span class="step-no"></span>
After adding the new integration, take note of its After adding the new integration, take note of its
<strong>API Key</strong>, a long string <strong>API Key</strong>, a long string
of letters and digits. of letters and digits.
@ -54,7 +54,7 @@
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">3</span> <span class="step-no"></span>
<p>Paste the API Key down below, and make sure the correct <p>Paste the API Key down below, and make sure the correct
<strong>service region</strong> is selected. <strong>service region</strong> is selected.
Save the integration, and you are done! Save the integration, and you are done!

4
templates/integrations/add_pagerteam.html
View File

@ -16,7 +16,7 @@
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">1</span> <span class="step-no"></span>
<p> <p>
Log into your Pager Team account, select the rotation you wish to add this integration to. Click the <strong>Copy Webhook</strong> button. Log into your Pager Team account, select the rotation you wish to add this integration to. Click the <strong>Copy Webhook</strong> button.
</p> </p>
@ -31,7 +31,7 @@
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">2</span> <span class="step-no"></span>
<p> <p>
Paste the <strong>Webhook URL</strong> below. Save the integration, and you are done! Paste the <strong>Webhook URL</strong> below. Save the integration, and you are done!
</p> </p>

6
templates/integrations/add_pagertree.html
View File

@ -17,7 +17,7 @@
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">1</span> <span class="step-no"></span>
<p> <p>
Log into your PagerTree account, click the <strong>Integrations</strong> tab. Log into your PagerTree account, click the <strong>Integrations</strong> tab.
Then click the <strong>Create Integration</strong> button. Then click the <strong>Create Integration</strong> button.
@ -36,7 +36,7 @@
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">2</span> <span class="step-no"></span>
<p> <p>
In the Create Integration Form, fill out the details with appropriate values, but most importantly make sure the <strong>Integration Type</strong> is set to <strong>Healthchecks.io</strong>. Then click the <strong>Create</strong> button. In the Create Integration Form, fill out the details with appropriate values, but most importantly make sure the <strong>Integration Type</strong> is set to <strong>Healthchecks.io</strong>. Then click the <strong>Create</strong> button.
</p> </p>
@ -51,7 +51,7 @@
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">3</span> <span class="step-no"></span>
<p> <p>
Copy the <strong>Endpoint address</strong> and paste it Copy the <strong>Endpoint address</strong> and paste it
in the form below. in the form below.

6
templates/integrations/add_pd.html
View File

@ -18,7 +18,7 @@
<h2>Setup Guide</h2> <h2>Setup Guide</h2>
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">1</span> <span class="step-no"></span>
<p> <p>
Log into your PagerDuty account, Log into your PagerDuty account,
go to <strong>Configuration &gt; Services</strong>, go to <strong>Configuration &gt; Services</strong>,
@ -40,7 +40,7 @@
</div> </div>
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">2</span> <span class="step-no"></span>
After adding the new service, take note of its After adding the new service, take note of its
<strong>Integration Key</strong>, a long string <strong>Integration Key</strong>, a long string
of letters and digits. of letters and digits.
@ -56,7 +56,7 @@
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">3</span> <span class="step-no"></span>
<p>Paste the Integration Key down below. Save the integration, and it's done!</p> <p>Paste the Integration Key down below. Save the integration, and it's done!</p>
</div> </div>
</div> </div>

36
templates/integrations/add_pdc.html
View File

@ -15,6 +15,7 @@
you can set up {% site_name %} to create a PagerDuty incident when you can set up {% site_name %} to create a PagerDuty incident when
a check goes down, and resolve it when a check goes back up.</p> a check goes down, and resolve it when a check goes back up.</p>
{% if connect_url %}
<div class="text-center"> <div class="text-center">
<div class="text-center"> <div class="text-center">
<a href="{{ connect_url|safe }}"> <a href="{{ connect_url|safe }}">
@ -25,6 +26,7 @@
</a> </a>
</div> </div>
</div> </div>
{% endif %}
{% else %} {% else %}
<p> <p>
@ -43,12 +45,36 @@
<h2>Setup Guide</h2> <h2>Setup Guide</h2>
{% if not connect_url %}
<div class="row ai-step">
<div class="col-sm-6">
<span class="step-no"></span>
<p>
{% if request.user.is_authenticated %}
Go
{% else %}
After logging in, go
{% endif %}
to the <strong>Integrations</strong> page,
and click on <strong>Add Integration</strong> next to the
PagerDuty integration.
</p>
</div>
<div class="col-sm-6">
<img
class="ai-guide-screenshot"
alt="Screenshot"
src="{% static 'img/integrations/setup_pdc_0.png' %}">
</div>
</div>
{% endif %}
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">1</span> <span class="step-no"></span>
<p> <p>
After {% if request.user.is_authenticated %}{% else %}logging in and{% endif %} Click on "Alert with PagerDuty", and you will be
clicking on "Alert with PagerDuty", you will be
asked to log into your PagerDuty account. asked to log into your PagerDuty account.
</p> </p>
</div> </div>
@ -62,7 +88,7 @@
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">2</span> <span class="step-no"></span>
<p> <p>
Next, PagerDuty will let set the name and escalation policy Next, PagerDuty will let set the name and escalation policy
for this integration. for this integration.
@ -78,7 +104,7 @@
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">3</span> <span class="step-no"></span>
<p> <p>
And that is all! You will then be redirected back to And that is all! You will then be redirected back to
"Integrations" page on {% site_name %} and see "Integrations" page on {% site_name %} and see

6
templates/integrations/add_prometheus.html
View File

@ -23,7 +23,7 @@
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">1</span> <span class="step-no"></span>
<p> <p>
Look up your project's read-only API key in Look up your project's read-only API key in
<strong>Project Settings › API Access</strong>. <strong>Project Settings › API Access</strong>.
@ -43,7 +43,7 @@
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-12"> <div class="col-sm-12">
<span class="step-no">2</span> <span class="step-no"></span>
<p> <p>
Edit Prometheus configuration and add a new section in the Edit Prometheus configuration and add a new section in the
<code>scrape_configs</code> section. <code>scrape_configs</code> section.
@ -59,7 +59,7 @@
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">3</span> <span class="step-no"></span>
<p> <p>
Reload Prometheus' configuration. You should now start seeing Reload Prometheus' configuration. You should now start seeing
{% site_name %} data appear in Prometheus. {% site_name %} data appear in Prometheus.

6
templates/integrations/add_pushover_help.html
View File

@ -25,7 +25,7 @@
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">1</span> <span class="step-no"></span>
<p> <p>
After logging in, go to "Integrations &rarr; Add Pushover". After logging in, go to "Integrations &rarr; Add Pushover".
Pushover supports different notification priorities from Pushover supports different notification priorities from
@ -43,7 +43,7 @@
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">2</span> <span class="step-no"></span>
<p> <p>
You will be redirected to You will be redirected to
<a href="https://pushover.net">pushover.net</a> and <a href="https://pushover.net">pushover.net</a> and
@ -61,7 +61,7 @@
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">3</span> <span class="step-no"></span>
<p> <p>
That is all! You will now be redirected back to That is all! You will now be redirected back to
"Integrations" page on {% site_name %} and see "Integrations" page on {% site_name %} and see

6
templates/integrations/add_slack.html
View File

@ -16,7 +16,7 @@
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">1</span> <span class="step-no"></span>
Log into your Slack account and Log into your Slack account and
pick an appropriate Slack channel. From the dropdown next to pick an appropriate Slack channel. From the dropdown next to
channel's name, pick <strong>Add a service integration...</strong> channel's name, pick <strong>Add a service integration...</strong>
@ -30,7 +30,7 @@
</div> </div>
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">2</span> <span class="step-no"></span>
From the list of available integrations, select From the list of available integrations, select
<strong>Incoming WebHooks</strong>, and click on <strong>Incoming WebHooks</strong>, and click on
<strong>Add Incoming WebHooks Integration</strong>. <strong>Add Incoming WebHooks Integration</strong>.
@ -39,7 +39,7 @@
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">3</span> <span class="step-no"></span>
<p>Copy the displayed <strong>WebHook URL</strong> and paste it down below.</p> <p>Copy the displayed <strong>WebHook URL</strong> and paste it down below.</p>
<p>Save the integration, and it's done!</p> <p>Save the integration, and it's done!</p>
</div> </div>

6
templates/integrations/add_slack_btn.html
View File

@ -41,7 +41,7 @@
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">1</span> <span class="step-no"></span>
<p> <p>
After {% if request.user.is_authenticated %}{% else %}signing in and{% endif %} After {% if request.user.is_authenticated %}{% else %}signing in and{% endif %}
clicking on "Add to Slack", you should clicking on "Add to Slack", you should
@ -60,7 +60,7 @@
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">2</span> <span class="step-no"></span>
<p> <p>
You should now be on a page that says "{% site_name %} would You should now be on a page that says "{% site_name %} would
like access to <i>TEAM NAME</i>". Select the channel you want to like access to <i>TEAM NAME</i>". Select the channel you want to
@ -77,7 +77,7 @@
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">3</span> <span class="step-no"></span>
<p> <p>
That is all! You will now be redirected back to That is all! You will now be redirected back to
"Integrations" page on {% site_name %} and see "Integrations" page on {% site_name %} and see

6
templates/integrations/add_telegram.html
View File

@ -56,7 +56,7 @@
<h2>Setup Guide</h2> <h2>Setup Guide</h2>
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">1</span> <span class="step-no"></span>
<p> <p>
From your Telegram client, invite From your Telegram client, invite
<strong><a href="https://t.me/{{ bot_name }}">{{ bot_name }}</a></strong> <strong><a href="https://t.me/{{ bot_name }}">{{ bot_name }}</a></strong>
@ -78,7 +78,7 @@
</div> </div>
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">2</span> <span class="step-no"></span>
<p>Type <strong><code>/start</code></strong> command. <p>Type <strong><code>/start</code></strong> command.
If there are multiple bots in the group, type If there are multiple bots in the group, type
<strong><code>/start@{{ bot_name }}</code></strong> instead. <strong><code>/start@{{ bot_name }}</code></strong> instead.
@ -94,7 +94,7 @@
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">3</span> <span class="step-no"></span>
<p>Click or tap on the confirmation link, and <p>Click or tap on the confirmation link, and
{% site_name %} will open in a browser window asking you to {% site_name %} will open in a browser window asking you to
confirm the new integration.</p> confirm the new integration.</p>

8
templates/integrations/add_victorops.html
View File

@ -17,7 +17,7 @@
<h2>Setup Guide</h2> <h2>Setup Guide</h2>
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">1</span> <span class="step-no"></span>
<p> <p>
Log into your VictorOps account, Log into your VictorOps account,
go to <strong>Settings > Schedules</strong>, go to <strong>Settings > Schedules</strong>,
@ -34,7 +34,7 @@
</div> </div>
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">2</span> <span class="step-no"></span>
<p> <p>
Go to <strong>Settings &gt; Integrations</strong> and scroll Go to <strong>Settings &gt; Integrations</strong> and scroll
to the bottom of the page. Choose an existing to the bottom of the page. Choose an existing
@ -51,7 +51,7 @@
</div> </div>
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">3</span> <span class="step-no"></span>
In the right hand side of In the right hand side of
<strong>Settings &gt; Integrations</strong> page, <strong>Settings &gt; Integrations</strong> page,
select <strong>REST Endpoint</strong>, and click on select <strong>REST Endpoint</strong>, and click on
@ -67,7 +67,7 @@
<div class="row ai-step"> <div class="row ai-step">
<div class="col-sm-6"> <div class="col-sm-6">
<span class="step-no">4</span> <span class="step-no"></span>
<p>Paste the <strong>Post URL</strong> from step 3 in the field <p>Paste the <strong>Post URL</strong> from step 3 in the field
below, being careful to replace <strong>$routing_key</strong> below, being careful to replace <strong>$routing_key</strong>
with your actual Routing Key from step 2. Save the integration, with your actual Routing Key from step 2. Save the integration,