Edits to Spike setup instructions.

hc/api/transports.py

@@ -579,7 +579,6 @@ class Zulip(HttpTransport):
         return self.post(url, data=data, auth=auth)
 
 
-
 class Spike(HttpTransport):
     def notify(self, check):
         url = self.channel.value
@@ -587,7 +586,7 @@ class Spike(HttpTransport):
         payload = {
             "title": tmpl("spike_title.html", check=check),
             "message": tmpl("spike_description.html", check=check),
-            "status": check.status
+            "status": check.status,
         }
 
         return self.post(url, json=payload, headers=headers)

templates/front/channels.html

@@ -278,7 +278,7 @@
                 class="icon" alt="PagerTree icon" />
 
             <h2>PagerTree</h2>
-            <p>DevOps Incident Management - On-Call Schedules, Alerts, &amp; Notifications</p>
+            <p>DevOps Incident Management - On-Call Schedules, Alerts, &amp; Notifications.</p>
             <a href="{% url 'hc-add-pagertree' project.code %}" class="btn btn-primary">Add Integration</a>
         </li>
 
@@ -334,12 +334,12 @@
             <a href="{% url 'hc-add-sms' project.code %}" class="btn btn-primary">Add Integration</a>
         </li>
         {% endif %}
-        
+
         <li>
             <img src="{% static 'img/integrations/spike.png' %}" class="icon" alt="Spike.sh icon" />
 
             <h2>Spike.sh</h2>
-            <p>No BS Incident management with unlimited alerts and on-call schedules</p>
+            <p>Incident management with unlimited alerts and on-call schedules.</p>
 
                 <a href="{% url 'hc-add-spike' project.code %}" class="btn btn-primary">Add Integration</a>
         </li>
@@ -348,7 +348,7 @@
         <li>
             <img src="{% static 'img/integrations/telegram.png' %}"
                  class="icon" alt="Telegram icon" />
-      
+
             <h2>Telegram</h2>
             <p>A messaging app with a focus on speed and security.</p>
             <a href="{% url 'hc-add-telegram' %}" class="btn btn-primary">Add Integration</a>

templates/integrations/add_opsgenie.html

@@ -20,7 +20,7 @@
             <span class="step-no"></span>
             <p>
                 Log into your OpsGenie account,
-                go to <strong>Settings &gt; Integration list</strong>,
+                go to <strong>Settings › Integration list</strong>,
                 and add a new "API" integration.
             </p>
             <p>

templates/integrations/add_spike.html

@@ -9,8 +9,9 @@
     <div class="col-sm-12">
         <h1>Spike.sh</h1>
 
-        <p>If you are using <a href="https://spike.sh">Spike.sh</a>, make sure to please copy the Healthchecks webhook
-            and paste it here. Read through the instructions.</p>
+        <p>If you are using <a href="https://spike.sh">Spike.sh</a>,
+            you can set up {% site_name %} to create a Spike.sh incident when a check
+            goes down, and resolve it when a check goes back up.</p>
 
         <h2>Setup Guide</h2>
 
@@ -18,17 +19,14 @@
             <div class="col-sm-6">
                 <span class="step-no"></span>
                 <p>
-                    Create a <strong>Healthchecks</strong> integration by clicking on <a
-                        href="https://app.spike.sh/integrations/new">add
-                        integration</a> on Spike.sh’s dashboard.
+                    Log into your Spike.sh account and go to
+                    <strong>Integrations › New Integration</strong>.
+                    Select "Healthchecks" and click "Next".
                 </p>
             </div>
             <div class="col-sm-6">
-                <div class="marker-wrap">
-                    <span style="left: 89%; top: 19%;" class="marker"></span>
-                    <img class="ai-guide-screenshot" alt="Click create integration button"
-                        src="{% static 'img/integrations/setup_spike_1.png' %}" />
-                </div>
+                <img class="ai-guide-screenshot" alt="Click create integration button"
+                    src="{% static 'img/integrations/setup_spike_1.png' %}" />
             </div>
         </div>
 
@@ -36,7 +34,8 @@
             <div class="col-sm-6">
                 <span class="step-no"></span>
                 <p>
-                    After you have created the integration, click on copy webhook.
+                    After you have created the integration, click on
+                    <strong>Copy Webhook</strong>.
 
                 </p>
             </div>
@@ -50,19 +49,13 @@
             <div class="col-sm-6">
                 <span class="step-no"></span>
                 <p>
-                    This modal with the details for the webhook will show up. Copy that webhook and paste it below. Make
-                    sure you have Healthchecks integration’s webhook so Spike.sh can create and resolve incidents
-                    automatically.
-
+                    Copy the shown webhook URL and paste it in the form below.
+                    Save the integration, and you are done!
                 </p>
             </div>
             <div class="col-sm-6">
-                <div class="marker-wrap">
-                    <span style="left: 32%; top: 59%;" class="marker"></span>
-
-                    <img class="ai-guide-screenshot" alt="Copy the Webhook URL"
-                        src="{% static 'img/integrations/setup_spike_3.png' %}">
-                </div>
+                <img class="ai-guide-screenshot" alt="Copy the Webhook URL"
+                    src="{% static 'img/integrations/setup_spike_3.png' %}">
             </div>
         </div>
 
@@ -71,7 +64,7 @@
         <form method="post" class="form-horizontal">
             {% csrf_token %}
             <div class="form-group {{ form.value.css_classes }}">
-                <label for="post-url" class="col-sm-2 control-label">Endpoint</label>
+                <label for="post-url" class="col-sm-2 control-label">Webhook URL</label>
                 <div class="col-sm-10">
                     <input id="post-url" type="text" class="form-control" name="value" placeholder="https://"
                         value="{{ form.value.value|default:"" }}">