feat(ui): add live health to home page

chore(ui): increase byte screen logo size

Author: JacobCoffee

src/server/domain/guilds/urls.py

@@ -14,7 +14,7 @@
 """Guild list URL."""
 
 # -- Specific
-GUILD_UPDATE: Final = f"{OPENAPI_SCHEMA}/guilds/{{guild_id}}/update"
+GUILD_UPDATE: Final = f"{OPENAPI_SCHEMA}/guilds/{{guild_id:int}}/update"
 """Update guild URL."""
-GUILD_DETAIL: Final = f"{OPENAPI_SCHEMA}/guilds/{{guild_id}}/info"
+GUILD_DETAIL: Final = f"{OPENAPI_SCHEMA}/guilds/{{guild_id:int}}/info"
 """Guild detail URL."""

src/server/domain/web/controllers/web.py

@@ -1,15 +1,20 @@
 """Web Controller."""
 from __future__ import annotations
 
+from typing import TYPE_CHECKING
+
 from litestar import Controller, get
 from litestar.response import Template
 from litestar.status_codes import HTTP_200_OK
 
 from server.domain import urls
+from server.domain.guilds.helpers import get_byte_server_count
+from server.domain.system.helpers import check_byte_status, check_database_status
 
-__all__ = ["WebController"]
+if TYPE_CHECKING:
+    from sqlalchemy.ext.asyncio import AsyncSession
 
-from server.domain.guilds.helpers import get_byte_server_count
+__all__ = ("WebController",)
 
 
 class WebController(Controller):
@@ -25,10 +30,23 @@ class WebController(Controller):
         include_in_schema=False,
         opt={"exclude_from_auth": True},
     )
-    async def index(self) -> Template:
+    async def index(self, db_session: AsyncSession) -> Template:
         """Serve site root."""
         server_count = await get_byte_server_count()
-        return Template(template_name="index.html", context={"server_count": server_count})
+        byte_status = await check_byte_status()
+        database_status = await check_database_status(db_session)
+        statuses = [database_status, byte_status]
+
+        if all(status == "offline" for status in statuses):
+            overall_status = "offline"
+        elif "offline" in statuses or "degraded" in statuses:
+            overall_status = "degraded"
+        else:
+            overall_status = "healthy"
+
+        return Template(
+            template_name="index.html", context={"server_count": server_count, "overall_status": overall_status}
+        )
 
     # add dashboard
     @get(

src/server/domain/web/resources/style.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.3.6 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -32,9 +32,11 @@
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
 6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
 */
 
-html {
+html,
+:host {
   line-height: 1.5;
   /* 1 */
   -webkit-text-size-adjust: 100%;
@@ -44,26 +46,15 @@ html {
   -o-tab-size: 4;
   tab-size: 4;
   /* 3 */
-  font-family:
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    Arial,
-    "Noto Sans",
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
     "Noto Color Emoji";
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
   font-variation-settings: normal;
   /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  /* 7 */
 }
 
 /*
@@ -3342,11 +3333,6 @@ html {
   padding-bottom: 6rem;
 }
 
-.py-36 {
-  padding-top: 9rem;
-  padding-bottom: 9rem;
-}
-
 .py-4 {
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -3382,6 +3368,10 @@ html {
   padding-left: 2.25rem;
 }
 
+.pt-12 {
+  padding-top: 3rem;
+}
+
 .text-center {
   text-align: center;
 }

src/server/domain/web/templates/index.html

@@ -97,17 +97,15 @@ <h2 class="text-base font-semibold leading-7 text-base-content dark:text-base-10
                 url(&quot;static/splash-bg.png&quot;);
               background-position: top center;
             ">
-            <div class="flex flex-col justify-between items-center h-full px-5 pb-5 py-36">
+            <div class="flex flex-col justify-between items-center h-full px-5 pb-5 py-24 pt-12">
               <div class="flex flex-col justify-center items-center">
-                <img class="h-12 w-auto align-middle" src="static/logo.svg" alt="Byte Logo" />
+                <img class="h-24 w-auto align-middle" src="static/logo.svg" alt="Byte Logo" />
                 <p class="text-center">
                   Byte:
                   <span class="{{ 'text-success' if byte_status == 'online' else 'text-warning' }}">
-                    <b>{{ byte_status | default('Unknown') }}</b>
+                    <b>{{ overall_status | default('Unknown') | upper }}</b>
                   </span>
-                  .
                 </p>
-                <!-- TODO: Make this dynamic with a /health healthckeck! -->
                 <p class="text-center py-5">
                   Currently in
                   <br />