Implement dynamic favicon in the projects overview page

cc: #971

CHANGELOG.md

@@ -5,6 +5,7 @@ All notable changes to this project will be documented in this file.
 
 ### Improvements
 - Show status changes (flips) in check's log page (#447)
+- Implement dynamic favicon in the projects overview page (#971)
 
 ## v3.3 - 2024-04-03
 

hc/front/tests/test_index.py

@@ -18,6 +18,7 @@ class IndexTestCase(BaseTestCase):
         self.assertContains(r, "Alices Project")
         self.assertContains(r, "3 checks")
         self.assertContains(r, "status ic-up")
+        self.assertContains(r, "favicon.svg")
 
     def test_it_shows_overall_down_status(self) -> None:
         self.c1.status = "down"
@@ -26,3 +27,4 @@ class IndexTestCase(BaseTestCase):
         self.client.login(username="alice@example.org", password="password")
         r = self.client.get("/")
         self.assertContains(r, "status ic-down")
+        self.assertContains(r, "favicon_down.svg")

hc/front/views.py

@@ -373,9 +373,12 @@ def index(request: HttpRequest) -> HttpResponse:
     q = q.annotate(n_channels=Count("channel", distinct=True))
     q = q.annotate(owner_email=F("owner__email"))
     projects = list(q)
+    any_down = False
     for project in projects:
         setattr(project, "overall_status", summary[project.code]["status"])
         setattr(project, "any_started", summary[project.code]["started"])
+        if summary[project.code]["status"] == "down":
+            any_down = True
 
     # The list returned by projects() is already sorted . Do an additional sorting pass
     # to move projects with overall_status=down to the front (without changing their
@@ -386,6 +389,7 @@ def index(request: HttpRequest) -> HttpResponse:
         "page": "projects",
         "projects": projects,
         "last_project_id": request.session.get("last_project_id"),
+        "any_down": any_down,
     }
 
     return render(request, "front/projects.html", ctx)

static/js/projects.js

@@ -1,5 +1,6 @@
 $(function () {
     var base = document.getElementById("base-url").getAttribute("href").slice(0, -1);
+    var favicon = document.querySelector('link[rel="icon"]');
 
     // Schedule refresh to run every 3s when tab is visible and user
     // is active, every 60s otherwise
@@ -11,8 +12,10 @@ $(function () {
             dataType: "json",
             timeout: 2000,
             success: function(data) {
+                var anyDown = false;
                 for (var code in data) {
                     var el = data[code];
+                    anyDown = anyDown || (el.status == "down");
 
                     if (el.status != lastStatus[code]) {
                         $("#" + code + " div.status").attr("class", "status ic-" + el.status);
@@ -24,6 +27,8 @@ $(function () {
                         lastStarted[code] = el.started;
                     }
                 }
+                var downPostfix = anyDown ? "_down" : "";
+                favicon.href = `${base}/static/img/favicon${downPostfix}.svg`;
             }
         });
     }

templates/front/projects.html

@@ -2,6 +2,13 @@
 {% load compress static hc_extras %}
 
 {% block title %}{{ site_name }}{% endblock %}
+{% block favicon %}
+    {% if any_down %}
+    <link rel="icon" type="image/svg+xml" href="{% static 'img/favicon_down.svg' %}">
+    {% else %}
+    <link rel="icon" type="image/svg+xml" href="{% static 'img/favicon.svg' %}">
+    {% endif %}
+{% endblock %}
 
 
 {% block content %}