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 {
margin: 2em 0;
counter-increment: ai-step;
}
.ai-step .step-no::after {
content: counter(ai-step);
}
.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>
<div class="row ai-step">
<div class="col-sm-6">
<span class="step-no">1</span>
<span class="step-no"></span>
<div>
<p>
Invite <strong>{{ matrix_user_id }}</strong>
@ -42,7 +42,7 @@
<div class="row ai-step">
<div class="col-sm-6">
<span class="step-no">2</span>
<span class="step-no"></span>
<p>
Look up the room's <strong>alias</strong> or
<strong>ID</strong>, and paste it in the form
@ -59,7 +59,7 @@
<div class="row ai-step">
<div class="col-sm-6">
<span class="step-no">3</span>
<span class="step-no"></span>
<p>
{{ matrix_user_id }} will shortly join your room.
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="col-sm-6">
<span class="step-no">1</span>
<span class="step-no"></span>
Log into your Mattermost account and
select <strong>Integrations</strong> in the
hamburger menu.
@ -32,7 +32,7 @@
</div>
<div class="row ai-step">
<div class="col-sm-6">
<span class="step-no">2</span>
<span class="step-no"></span>
<p>
In the "Integrations" screen, select <strong>Incoming Webhook</strong>
and then <strong>Add Incoming Webhook</strong>.
@ -49,7 +49,7 @@
<div class="row ai-step">
<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>Save the integration, and it's done!</p>
</div>

8
templates/integrations/add_msteams.html
View File

@ -17,7 +17,7 @@
<div class="row ai-step">
<div class="col-sm-6">
<span class="step-no">1</span>
<span class="step-no"></span>
<p>
Log into your Microsoft Teams account, click the <strong>Apps</strong> tab.
</p>
@ -38,7 +38,7 @@
<div class="row ai-step">
<div class="col-sm-6">
<span class="step-no">2</span>
<span class="step-no"></span>
<p>
Select the channel where you want {% site_name %} to post
notifications.
@ -54,7 +54,7 @@
<div class="row ai-step">
<div class="col-sm-6">
<span class="step-no">3</span>
<span class="step-no"></span>
<p>
Give the connector a descriptive name.
</p>
@ -76,7 +76,7 @@
<div class="row ai-step">
<div class="col-sm-6">
<span class="step-no">4</span>
<span class="step-no"></span>
<p>
Copy the displayed webhook URL and paste it
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>
<div class="row ai-step">
<div class="col-sm-6">
<span class="step-no">1</span>
<span class="step-no"></span>
<p>
Log into your OpsGenie account,
go to <strong>Settings &gt; Integration list</strong>,
@ -38,7 +38,7 @@
</div>
<div class="row ai-step">
<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
<strong>API Key</strong>, a long string
of letters and digits.
@ -54,7 +54,7 @@
<div class="row ai-step">
<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
<strong>service region</strong> is selected.
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="col-sm-6">
<span class="step-no">1</span>
<span class="step-no"></span>
<p>
Log into your Pager Team account, select the rotation you wish to add this integration to. Click the <strong>Copy Webhook</strong> button.
</p>
@ -31,7 +31,7 @@
<div class="row ai-step">
<div class="col-sm-6">
<span class="step-no">2</span>
<span class="step-no"></span>
<p>
Paste the <strong>Webhook URL</strong> below. Save the integration, and you are done!
</p>

6
templates/integrations/add_pagertree.html
View File

@ -17,7 +17,7 @@
<div class="row ai-step">
<div class="col-sm-6">
<span class="step-no">1</span>
<span class="step-no"></span>
<p>
Log into your PagerTree account, click the <strong>Integrations</strong> tab.
Then click the <strong>Create Integration</strong> button.
@ -36,7 +36,7 @@
<div class="row ai-step">
<div class="col-sm-6">
<span class="step-no">2</span>
<span class="step-no"></span>
<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.
</p>
@ -51,7 +51,7 @@
<div class="row ai-step">
<div class="col-sm-6">
<span class="step-no">3</span>
<span class="step-no"></span>
<p>
Copy the <strong>Endpoint address</strong> and paste it
in the form below.

6
templates/integrations/add_pd.html
View File

@ -18,7 +18,7 @@
<h2>Setup Guide</h2>
<div class="row ai-step">
<div class="col-sm-6">
<span class="step-no">1</span>
<span class="step-no"></span>
<p>
Log into your PagerDuty account,
go to <strong>Configuration &gt; Services</strong>,
@ -40,7 +40,7 @@
</div>
<div class="row ai-step">
<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
<strong>Integration Key</strong>, a long string
of letters and digits.
@ -56,7 +56,7 @@
<div class="row ai-step">
<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>
</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
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">
<a href="{{ connect_url|safe }}">
@ -25,6 +26,7 @@
</a>
</div>
</div>
{% endif %}
{% else %}
<p>
@ -43,12 +45,36 @@
<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="col-sm-6">
<span class="step-no">1</span>
<span class="step-no"></span>
<p>
After {% if request.user.is_authenticated %}{% else %}logging in and{% endif %}
clicking on "Alert with PagerDuty", you will be
Click on "Alert with PagerDuty", and you will be
asked to log into your PagerDuty account.
</p>
</div>
@ -62,7 +88,7 @@
<div class="row ai-step">
<div class="col-sm-6">
<span class="step-no">2</span>
<span class="step-no"></span>
<p>
Next, PagerDuty will let set the name and escalation policy
for this integration.
@ -78,7 +104,7 @@
<div class="row ai-step">
<div class="col-sm-6">
<span class="step-no">3</span>
<span class="step-no"></span>
<p>
And that is all! You will then be redirected back to
"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="col-sm-6">
<span class="step-no">1</span>
<span class="step-no"></span>
<p>
Look up your project's read-only API key in
<strong>Project Settings › API Access</strong>.
@ -43,7 +43,7 @@
<div class="row ai-step">
<div class="col-sm-12">
<span class="step-no">2</span>
<span class="step-no"></span>
<p>
Edit Prometheus configuration and add a new section in the
<code>scrape_configs</code> section.
@ -59,7 +59,7 @@
<div class="row ai-step">
<div class="col-sm-6">
<span class="step-no">3</span>
<span class="step-no"></span>
<p>
Reload Prometheus' configuration. You should now start seeing
{% 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="col-sm-6">
<span class="step-no">1</span>
<span class="step-no"></span>
<p>
After logging in, go to "Integrations &rarr; Add Pushover".
Pushover supports different notification priorities from
@ -43,7 +43,7 @@
<div class="row ai-step">
<div class="col-sm-6">
<span class="step-no">2</span>
<span class="step-no"></span>
<p>
You will be redirected to
<a href="https://pushover.net">pushover.net</a> and
@ -61,7 +61,7 @@
<div class="row ai-step">
<div class="col-sm-6">
<span class="step-no">3</span>
<span class="step-no"></span>
<p>
That is all! You will now be redirected back to
"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="col-sm-6">
<span class="step-no">1</span>
<span class="step-no"></span>
Log into your Slack account and
pick an appropriate Slack channel. From the dropdown next to
channel's name, pick <strong>Add a service integration...</strong>
@ -30,7 +30,7 @@
</div>
<div class="row ai-step">
<div class="col-sm-6">
<span class="step-no">2</span>
<span class="step-no"></span>
From the list of available integrations, select
<strong>Incoming WebHooks</strong>, and click on
<strong>Add Incoming WebHooks Integration</strong>.
@ -39,7 +39,7 @@
<div class="row ai-step">
<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>Save the integration, and it's done!</p>
</div>

6
templates/integrations/add_slack_btn.html
View File

@ -41,7 +41,7 @@
<div class="row ai-step">
<div class="col-sm-6">
<span class="step-no">1</span>
<span class="step-no"></span>
<p>
After {% if request.user.is_authenticated %}{% else %}signing in and{% endif %}
clicking on "Add to Slack", you should
@ -60,7 +60,7 @@
<div class="row ai-step">
<div class="col-sm-6">
<span class="step-no">2</span>
<span class="step-no"></span>
<p>
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
@ -77,7 +77,7 @@
<div class="row ai-step">
<div class="col-sm-6">
<span class="step-no">3</span>
<span class="step-no"></span>
<p>
That is all! You will now be redirected back to
"Integrations" page on {% site_name %} and see

6
templates/integrations/add_telegram.html
View File

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

8
templates/integrations/add_victorops.html
View File

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