"show usage" button next to each check

hc/front/views.py

@@ -51,7 +51,8 @@ def my_checks(request):
         "now": timezone.now(),
         "tags": counter.most_common(),
         "down_tags": down_tags,
-        "grace_tags": grace_tags
+        "grace_tags": grace_tags,
+        "ping_endpoint": settings.PING_ENDPOINT
     }
 
     return render(request, "front/my_checks.html", ctx)

static/css/my_checks_desktop.css

@@ -62,18 +62,27 @@ table.table tr > th.th-name {
     visibility: hidden;
 }
 
+.show-usage {
+    opacity: 0
+}
+
 tr:hover .check-menu {
     visibility: visible;
 }
 
-#show-urls.active, #show-emails.active {
+tr:hover .show-usage {
-    color: #333;
+    opacity: 1
 }
 
 #checks-table .url-cell {
     white-space: nowrap;
 }
 
+.url-cell .base {
+    color: #888;
+}
+
+
 .my-checks-url {
     font-family: "Lucida Console", Monaco, monospace;
     font-size: 11.7px;

static/js/checks.js

@@ -176,7 +176,7 @@ $(function () {
 
     });
 
-    $(".my-checks-url").click(function(e) {
+    $(".show-usage").click(function(e) {
         var a = e.target;
         var url = a.getAttribute("href");
         var email = a.getAttribute("data-email");

templates/front/my_checks_desktop.html

@@ -1,5 +1,4 @@
 {% load hc_extras humanize %}
-
 <table id="checks-table" class="table hidden-xs">
     <tr>
         <th></th>
@@ -39,13 +38,14 @@
             </div>
         </td>
         <td class="url-cell">
+            <span class="my-checks-url">
+                <span class="base">{{ ping_endpoint }}</span>{{ check.code }}
+            </span>
             <a
                 href="{{ check.url }}"
-                class="my-checks-url"
+                class="btn btn-xs btn-default show-usage hidden-sm"
-                title="Click to show usage examples"
+                data-email="{{ check.email }}">
-                data-email="{{ check.email }}"
+                show usage
-                data-toggle="tooltip">
-                {{ check.url }}
             </a>
         </td>
         <td class="timeout-cell">