Badges can now return either SVG or JSON

hc/accounts/views.py

@@ -256,16 +256,19 @@ def badges(request):
         tags.update(check.tags_list())
 
     username = request.team.user.username
-    badge_urls = []
+    urls = []
     for tag in sorted(tags, key=lambda s: s.lower()):
         if not re.match("^[\w-]+$", tag):
             continue
 
-        badge_urls.append(get_badge_url(username, tag))
+        urls.append({
+            "svg": get_badge_url(username, tag),
+            "json": get_badge_url(username, tag, format="json"),
+        })
 
     ctx = {
         "page": "profile",
-        "badge_urls": badge_urls,
+        "urls": urls
     }
 
     return render(request, "accounts/badges.html", ctx)

hc/api/urls.py

@@ -10,7 +10,11 @@ urlpatterns = [
     url(r'^api/v1/checks/([\w-]+)/pause$', views.pause, name="hc-api-pause"),
     url(r'^api/v1/notifications/([\w-]+)/bounce$', views.bounce,
         name="hc-api-bounce"),
+
     url(r'^badge/([\w-]+)/([\w-]{8})/([\w-]+).svg$', views.badge,
         name="hc-badge"),
+    url(r'^badge/([\w-]+)/([\w-]{8})/([\w-]+).json$', views.badge,
+        {"format": "json"}, name="hc-badge-json", ),
+
     url(r'^api/v1/status/$', views.status),
 ]

hc/api/views.py

@@ -138,7 +138,7 @@ def update(request, code):
         return HttpResponseForbidden()
 
     _update(check, request.json)
-    return JsonResponse(check.to_dict(), status=200)
+    return JsonResponse(check.to_dict())
 
 
 @csrf_exempt
@@ -156,7 +156,7 @@ def pause(request, code):
 
 
 @never_cache
-def badge(request, username, signature, tag):
+def badge(request, username, signature, tag, format="svg"):
     if not check_signature(username, tag, signature):
         return HttpResponseNotFound()
 
@@ -173,6 +173,9 @@ def badge(request, username, signature, tag):
             status = "down"
             break
 
+    if format == "json":
+        return JsonResponse({"status": status})
+
     svg = get_badge_svg(tag, status)
     return HttpResponse(svg, content_type="image/svg+xml")
 

hc/lib/badges.py

@@ -49,7 +49,8 @@ def check_signature(username, tag, sig):
     return ours == sig
 
 
-def get_badge_url(username, tag):
+def get_badge_url(username, tag, format="svg"):
+    view = "hc-badge-json" if format == "json" else "hc-badge"
     sig = base64_hmac(str(username), tag, settings.SECRET_KEY)
-    url = reverse("hc-badge", args=[username, sig[:8], tag])
+    url = reverse(view, args=[username, sig[:8], tag])
     return settings.SITE_ROOT + url

static/css/settings.css

@@ -11,7 +11,7 @@
     padding-bottom: 24px;
 }
 
-#badges-description {
+#badges-description, #b-format {
     margin-bottom: 24px;
 }
 
@@ -28,3 +28,13 @@
 #close-account:hover {
     background-color: #ffebea;
 }
+
+#badges-json {
+    display: none;
+}
+
+.json-response code {
+    display: inline-block;
+    background: #eee;
+    padding: 3px;
+}

static/js/badges.js

@@ -0,0 +1,19 @@
+$(function() {
+
+    $(".json-response").each(function(idx, el) {
+        $.getJSON(el.dataset.url, function(data) {
+            el.innerHTML = "<code>" + JSON.stringify(data) + "</code>";
+        });
+    });
+
+    $("#show-svg").click(function() {
+        $("#badges-json").hide();
+        $("#badges-svg").show();
+    })
+
+    $("#show-json").click(function() {
+        $("#badges-svg").hide();
+        $("#badges-json").show();
+    })
+
+});

templates/accounts/badges.html

@@ -29,15 +29,36 @@
                     URLs. If you wish, you can add them to your READMEs,
                     dashboards or status pages.
                 </p>
-                {% if badge_urls %}
+                {% if urls %}
-                <table class="badges table">
+
-                    {% for badge_url in badge_urls %}
+                <div id="b-format" class="btn-group" data-toggle="buttons">
+                    <label id="show-svg" class="btn btn-default active">
+                        <input type="radio" autocomplete="off" checked> SVG
+                    </label>
+                    <label id="show-json" class="btn btn-default">
+                        <input type="radio" autocomplete="off"> JSON
+                    </label>
+                </div>
+
+                <table id="badges-svg" class="badges table">
+                    {% for urldict in urls %}
                     <tr>
                         <td>
-                            <img src="{{ badge_url }}" alt="" />
+                            <img src="{{ urldict.svg }}" alt="" />
                         </td>
-                        <td>
+                        <td class="svg-url">
-                            <code>{{ badge_url }}</code>
+                            <code>{{ urldict.svg }}</code>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </table>
+                <table id="badges-json" class="badges table">
+                    {% for urldict in urls %}
+                    <tr>
+                        <td class="json-response" data-url="{{ urldict.json }}">
+                        </td>
+                        <td class="json-url">
+                            <code>{{ urldict.json }}</code>
                         </td>
                     </tr>
                     {% endfor %}
@@ -59,5 +80,6 @@
 {% compress js %}
 <script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
 <script src="{% static 'js/bootstrap.min.js' %}"></script>
+<script src="{% static 'js/badges.js' %}"></script>
 {% endcompress %}
 {% endblock %}