Implement search by slug in the checks list

cc: #1048

CHANGELOG.md

@@ -9,6 +9,7 @@ All notable changes to this project will be documented in this file.
 - Add "uuid" field in API responses when read/write key is used (#1007)
 - Update timezone dropdowns to show frequently used timezones at the top
 - Update the "Set Password" page to reject very weak passwords
+- Implement search by slug in the checks list (#1048)
 
 ### Bug Fixes
 - Fix Check.ping() to lock the check before updating (#1023)

hc/front/views.py

@@ -260,8 +260,8 @@ def checks(request: AuthenticatedHttpRequest, code: UUID) -> HttpResponse:
     search = request.GET.get("search", "")
     if search:
         for check in checks:
-            search_key = "%s\n%s" % (check.name.lower(), check.code)
-            if search not in search_key:
+            haystack = f"{check.name}\n{check.slug}\n{check.code}"
+            if search not in haystack.lower():
                 hidden_checks.add(check)
 
     # Figure out which checks have ambiguous ping URLs

static/js/checks.js

@@ -105,21 +105,19 @@ $(function () {
         }
 
         function applySingle(index, element) {
+            var nameDiv = element.querySelector(".my-checks-name");
             if (search) {
-                var code = element.getAttribute("id");
-                var name = $(".my-checks-name", element).attr("data-name").toLowerCase();
-                if (name.indexOf(search) == -1 && code.indexOf(search) == -1) {
+                var haystack = [nameDiv.dataset.name, nameDiv.dataset.slug, element.id].join("\n");
+                if (haystack.toLowerCase().indexOf(search) == -1) {
                     $(element).hide();
                     return;
                 }
             }
 
             if (checked.length) {
-                // use attr(), as data() tries converting strings to JS types:
-                // (e.g., "123" -> 123)
-                var tags = $(".my-checks-name", element).attr("data-tags").split(" ");
-                for (var i=0, tag; tag=checked[i]; i++) {
-                    if (tags.indexOf(tag) == -1) {
+                var tags = nameDiv.dataset.tags.split(" ");
+                for (var i=0, checkedTag; checkedTag=checked[i]; i++) {
+                    if (tags.indexOf(checkedTag) == -1) {
                         $(element).hide();
                         return;
                     }