feat(devex): add previews and live refresh to admin console tools

ee/urls.py

@@ -67,11 +67,6 @@ def extend_api_router() -> None:
             pass
 
     from posthog.admin.admins.distinct_id_usage_admin import distinct_id_usage_view
-    from posthog.admin.admins.health_check_admin import (
-        health_check_list_view,
-        health_check_runs_fragment_view,
-        health_check_trigger_view,
-    )
     from posthog.admin.admins.notebook_markdown_migration_admin import (
         notebook_markdown_migration_run_view,
         notebook_markdown_migration_stats_view,
@@ -116,17 +111,17 @@ def extend_api_router() -> None:
         ),
         path(
             "admin/health-checks/",
-            admin.site.admin_view(health_check_list_view),
+            MovedToConsole.page_redirect("Health checks", "/admin/console/tools/health-checks/"),
             name="health-checks",
         ),
         path(
             "admin/health-checks/<str:kind>/",
-            admin.site.admin_view(health_check_trigger_view),
+            MovedToConsole.page_redirect("Health checks", "/admin/console/tools/health-checks/?check={kind}"),
             name="health-check-trigger",
         ),
         path(
             "admin/health-checks/<str:kind>/runs/",
-            admin.site.admin_view(health_check_runs_fragment_view),
+            MovedToConsole.page_redirect("Health checks", "/admin/console/tools/health-checks/?check={kind}"),
             name="health-check-runs",
         ),
         path(

frontend/public/admin-console/console.js

@@ -26,3 +26,56 @@ document.addEventListener('keydown', (event) => {
 })
 
 document.querySelector('form[data-autofocus]')?.querySelector('input:not([type=hidden]), textarea, select')?.focus()
+
+// Live blocks ask the server for a fresh copy of themselves while their data-refresh-seconds is set, for
+// example the runs of a job that is still going. Each block waits for its answer before it asks again, waits
+// longer after a failure, and pauses while the tab is hidden. A response without the console's header (a login
+// page after the session ended, an error page) stops the refreshes instead of replacing the block.
+const LIVE_MAX_BACKOFF = 4
+
+function scheduleLiveRefresh(element, failures) {
+    const seconds = Number(element.dataset.refreshSeconds)
+    if (!seconds) {
+        return
+    }
+    const delay = seconds * 1000 * 2 ** Math.min(failures, LIVE_MAX_BACKOFF)
+    setTimeout(() => refreshLiveBlock(element, failures), delay)
+}
+
+async function refreshLiveBlock(element, failures) {
+    if (!element.isConnected) {
+        return
+    }
+    if (document.hidden) {
+        document.addEventListener('visibilitychange', () => refreshLiveBlock(element, failures), { once: true })
+        return
+    }
+    let response
+    let body
+    try {
+        response = await fetch(element.dataset.consoleLive, { credentials: 'same-origin', redirect: 'manual' })
+        body = await response.text()
+    } catch {
+        scheduleLiveRefresh(element, failures + 1)
+        return
+    }
+    if (response.status >= 500) {
+        scheduleLiveRefresh(element, failures + 1)
+        return
+    }
+    if (!response.ok || response.headers.get('X-Console-Live') !== '1') {
+        return
+    }
+    const template = document.createElement('template')
+    template.innerHTML = body.trim()
+    const replacement = template.content.firstElementChild
+    if (!replacement || !replacement.hasAttribute('data-console-live')) {
+        return
+    }
+    element.replaceWith(replacement)
+    scheduleLiveRefresh(replacement, 0)
+}
+
+for (const element of document.querySelectorAll('[data-console-live]')) {
+    scheduleLiveRefresh(element, 0)
+}