CSS counters for integration setup instructions.

static/css/channels.css

@@ -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 {

templates/integrations/add_matrix.html

@@ -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

templates/integrations/add_mattermost.html

@@ -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>

templates/integrations/add_msteams.html

@@ -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!

templates/integrations/add_opsgenie.html

@@ -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!

templates/integrations/add_pagerteam.html

@@ -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>

templates/integrations/add_pagertree.html

@@ -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.

templates/integrations/add_pd.html

@@ -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>

templates/integrations/add_pdc.html

@@ -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

templates/integrations/add_prometheus.html

@@ -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.

templates/integrations/add_pushover_help.html

@@ -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

templates/integrations/add_slack.html

@@ -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>

templates/integrations/add_slack_btn.html

@@ -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

templates/integrations/add_telegram.html

@@ -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>

templates/integrations/add_victorops.html

@@ -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,