Edit Prometheus guide, add "API Keys" screenshot.

hc/front/views.py

@@ -38,7 +38,13 @@ from hc.api.transports import Telegram
 from hc.front.decorators import require_setting
 from hc.front import forms
 from hc.front.schemas import telegram_callback
-from hc.front.templatetags.hc_extras import num_down_title, down_title, sortchecks
+from hc.front.templatetags.hc_extras import (
+    num_down_title,
+    down_title,
+    sortchecks,
+    site_hostname,
+    site_scheme,
+)
 from hc.lib import jsonschema
 from hc.lib.badges import get_badge_url
 import pytz
@@ -282,6 +288,8 @@ def serve_doc(request, doc="introduction"):
         "{{ default_grace }}": str(int(DEFAULT_GRACE.total_seconds())),
         "SITE_NAME": settings.SITE_NAME,
         "SITE_ROOT": settings.SITE_ROOT,
+        "SITE_HOSTNAME": site_hostname(),
+        "SITE_SCHEME": site_scheme(),
         "PING_ENDPOINT": settings.PING_ENDPOINT,
         "PING_URL": settings.PING_ENDPOINT + "your-uuid-here",
         "IMG_URL": os.path.join(settings.STATIC_URL, "img/docs"),

templates/docs/configuring_prometheus.html

@@ -1,20 +1,20 @@
 <h1>Configuring Prometheus</h1>
-<p>Healthchecks.io supports exporting metrics and check statuses to <a href="https://prometheus.io/">Prometheus</a>, for use with <a href="https://grafana.com/">Grafana</a>.  </p>
-<p>You can generate the metrics export endpoint by going to your project settings (last tab up top) and clicking "Create API Keys". You will then see the link to the prometheus endpoint, which looks like this:</p>
-<div class="highlight"><pre><span></span>https://healthchecks.io/projects/45sd78-eeee-dddd-8888-b25a9887ecfd/metrics/NXyGzks4s8xcF1J-wzoaioyoqXIANGD0
-</pre></div>
-
-
+<p>Healthchecks.io supports exporting metrics and check statuses to
+<a href="https://prometheus.io/">Prometheus</a>, for use with <a href="https://grafana.com/">Grafana</a>.</p>
+<p>You can generate the metrics export endpoint by going to your project settings
+and clicking "Create API Keys". You will then see the link to
+the Prometheus endpoint:</p>
+<p><img alt="Project's API Keys" src="IMG_URL/prometheus_endpoint.png" /></p>
 <h2>Update the prometheus.yml</h2>
-<p>You can take that link and add it to the prometheus config:</p>
-<div class="highlight"><pre><span></span>  <span class="p p-Indicator">-</span> <span class="l l-Scalar l-Scalar-Plain">job_name</span><span class="p p-Indicator">:</span> <span class="s">&quot;healthchecks&quot;</span>
-    <span class="l l-Scalar l-Scalar-Plain">scrape_interval</span><span class="p p-Indicator">:</span> <span class="l l-Scalar l-Scalar-Plain">60s</span>
-    <span class="l l-Scalar l-Scalar-Plain">scheme</span><span class="p p-Indicator">:</span> <span class="l l-Scalar l-Scalar-Plain">https</span>
-    <span class="l l-Scalar l-Scalar-Plain">metrics_path</span><span class="p p-Indicator">:</span> <span class="l l-Scalar l-Scalar-Plain">/projects/45sd78-eeee-dddd-8888-b25a9887ecfd/metrics/NXyGzks4s8xcF1J-wzoaioyoqXIANGD0</span>
-    <span class="l l-Scalar l-Scalar-Plain">static_configs</span><span class="p p-Indicator">:</span>
-      <span class="p p-Indicator">-</span> <span class="l l-Scalar l-Scalar-Plain">targets</span><span class="p p-Indicator">:</span> <span class="p p-Indicator">[</span><span class="s">&quot;healthchecks.io&quot;</span><span class="p p-Indicator">]</span>
-</pre></div>
+<p>You can copy the Prometheus endpoint URL and add it to the Prometheus configuration:</p>
+<div class="highlight"><pre><span></span><code>  <span class="p p-Indicator">-</span> <span class="nt">job_name</span><span class="p">:</span> <span class="s">&quot;healthchecks&quot;</span>
+    <span class="nt">scrape_interval</span><span class="p">:</span> <span class="l l-Scalar l-Scalar-Plain">60s</span>
+    <span class="nt">scheme</span><span class="p">:</span> <span class="l l-Scalar l-Scalar-Plain">SITE_SCHEME</span>
+    <span class="nt">metrics_path</span><span class="p">:</span> <span class="l l-Scalar l-Scalar-Plain">/projects/45sd78-eeee-dddd-8888-b25a9887ecfd/metrics/NXyGzks4s8xcF1J-wzoaioyoqXIANGD0</span>
+    <span class="nt">static_configs</span><span class="p">:</span>
+      <span class="p p-Indicator">-</span> <span class="nt">targets</span><span class="p">:</span> <span class="p p-Indicator">[</span><span class="s">&quot;SITE_HOSTNAME&quot;</span><span class="p p-Indicator">]</span>
+</code></pre></div>
 
 
-<p>Notice how we split up the URL and paste in the scheme, domain, and path separately. </p>
-<p>Reload promethus and your changes should be live, coming in under the <code>hc_</code> prefix.</p>
+<p>Notice how we split up the URL and paste in the scheme, domain, and path separately.</p>
+<p>Reload Prometheus and your changes should be live, coming in under the <code>hc_</code> prefix.</p>

templates/docs/configuring_prometheus.md

@@ -1,26 +1,27 @@
 # Configuring Prometheus
 
-Healthchecks.io supports exporting metrics and check statuses to [Prometheus](https://prometheus.io/), for use with [Grafana](https://grafana.com/).  
+Healthchecks.io supports exporting metrics and check statuses to
+[Prometheus](https://prometheus.io/), for use with [Grafana](https://grafana.com/).
 
-You can generate the metrics export endpoint by going to your project settings (last tab up top) and clicking "Create API Keys". You will then see the link to the prometheus endpoint, which looks like this:
+You can generate the metrics export endpoint by going to your project settings
+and clicking "Create API Keys". You will then see the link to
+the Prometheus endpoint:
 
-```
-https://healthchecks.io/projects/45sd78-eeee-dddd-8888-b25a9887ecfd/metrics/NXyGzks4s8xcF1J-wzoaioyoqXIANGD0
-```
+![Project's API Keys](IMG_URL/prometheus_endpoint.png)
 
 ## Update the prometheus.yml
 
-You can take that link and add it to the prometheus config:
+You can copy the Prometheus endpoint URL and add it to the Prometheus configuration:
 
 ```yaml
   - job_name: "healthchecks"
     scrape_interval: 60s
-    scheme: https
+    scheme: SITE_SCHEME
     metrics_path: /projects/45sd78-eeee-dddd-8888-b25a9887ecfd/metrics/NXyGzks4s8xcF1J-wzoaioyoqXIANGD0
     static_configs:
-      - targets: ["healthchecks.io"]
+      - targets: ["SITE_HOSTNAME"]
 ```
 
-Notice how we split up the URL and paste in the scheme, domain, and path separately. 
+Notice how we split up the URL and paste in the scheme, domain, and path separately.
 
-Reload promethus and your changes should be live, coming in under the `hc_` prefix.
+Reload Prometheus and your changes should be live, coming in under the `hc_` prefix.