diff --git a/CHANGELOG.md b/CHANGELOG.md index 8fc4416c..71e3d35c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ All notable changes to this project will be documented in this file. - Load settings from environment variables - Add "List-Unsubscribe" header to alert and report emails - Don't send monthly reports to inactive accounts (no pings in 6 months) +- Add search box in the "My Checks" page ### Bug Fixes - During DST transition, handle ambiguous dates as pre-transition diff --git a/hc/front/views.py b/hc/front/views.py index e6c312a5..fbd2af4d 100644 --- a/hc/front/views.py +++ b/hc/front/views.py @@ -76,12 +76,21 @@ def my_checks(request): channels = list(channels.order_by("created")) hidden_checks = set() + # Hide checks that don't match selected tags: selected_tags = set(request.GET.getlist("tag", [])) if selected_tags: for check in checks: if not selected_tags.issubset(check.tags_list()): hidden_checks.add(check) + # Hide checks that don't match the search string: + 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: + hidden_checks.add(check) + ctx = { "page": "checks", "checks": checks, @@ -94,6 +103,8 @@ def my_checks(request): "num_available": request.team.check_limit - len(checks), "sort": request.profile.sort, "selected_tags": selected_tags, + "show_search": True, + "search": search, "hidden_checks": hidden_checks } diff --git a/static/css/my_checks.css b/static/css/my_checks.css index 969ce0d3..af611bd5 100644 --- a/static/css/my_checks.css +++ b/static/css/my_checks.css @@ -27,6 +27,11 @@ border-color: #000; } +#search { + padding-left: 15px; + border-radius: 16px; +} + @media (min-width: 992px) { #update-timeout-modal .modal-dialog, #ping-details-modal .modal-dialog { width: 800px; diff --git a/static/js/checks.js b/static/js/checks.js index d0993d9e..0ba29ba0 100644 --- a/static/js/checks.js +++ b/static/js/checks.js @@ -63,11 +63,7 @@ $(function () { return false; }); - - // Filtering by tags - $("#my-checks-tags div").click(function() { - $(this).toggleClass('checked'); - + function applyFilters() { // Make a list of currently checked tags: var checked = []; var qs = []; @@ -76,6 +72,11 @@ $(function () { qs.push({"name": "tag", "value": el.textContent}); }); + var search = $("#search").val().toLowerCase(); + if (search) { + qs.push({"name": "search", "value": search}); + } + // Update hash if (window.history && window.history.replaceState) { var url = "/checks/"; @@ -85,30 +86,50 @@ $(function () { window.history.replaceState({}, "", url); } - // No checked tags: show all - if (checked.length == 0) { + // No checked tags and no search string: show all + if (checked.length == 0 && !search) { $("#checks-table tr.checks-row").show(); return; } - function applyFilters(index, element) { - // 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) { + function applySingle(index, element) { + 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) { $(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) { + $(element).hide(); + return; + } + } + } + $(element).show(); } // For each row, see if it needs to be shown or hidden - $("#checks-table tr.checks-row").each(applyFilters); + $("#checks-table tr.checks-row").each(applySingle); + } + + // User clicks on tags: apply filters + $("#my-checks-tags div").click(function() { + $(this).toggleClass('checked'); + applyFilters(); }); + // User changes the search string: apply filters + $("#search").keyup(applyFilters); + $(".show-log").click(function(e) { var code = $(this).closest("tr.checks-row").attr("id"); var url = "/checks/" + code + "/details/"; diff --git a/templates/base.html b/templates/base.html index 08563b57..1903f09f 100644 --- a/templates/base.html +++ b/templates/base.html @@ -146,6 +146,12 @@