deploz statuses css

app/routes/deployments.py

@@ -9,6 +9,22 @@ from app.templates.layout import page
 router = APIRouter()
 
 
+def render_status_pill(status: str | None) -> str:
+    status_value = status or ""
+    normalized = status_value.strip().lower()
+
+    if normalized in {"ok", "success", "succeeded", "done", "deployed", "completed"}:
+        class_name = "pill pill-success"
+    elif normalized in {"running", "pending", "queued", "in_progress", "starting"}:
+        class_name = "pill pill-warning"
+    elif normalized in {"failed", "failure", "error", "cancelled", "canceled"}:
+        class_name = "pill pill-danger"
+    else:
+        class_name = "pill pill-muted"
+
+    return f'<span class="{class_name}">{html.escape(status_value)}</span>'
+
+
 @router.get("/deployments", response_class=HTMLResponse)
 async def deployments_page():
     deployments = get_deployments()
@@ -18,7 +34,7 @@ async def deployments_page():
         deployment_id = html.escape(str(deployment.get("id", "")))
         app_id = html.escape(deployment.get("app_id", "") or "")
         kind = html.escape(deployment.get("kind", "") or "")
-        status = html.escape(deployment.get("status", "") or "")
+        status = render_status_pill(deployment.get("status"))
         started_at = html.escape(deployment.get("started_at", "") or "")
         finished_at = html.escape(deployment.get("finished_at", "") or "")
         returncode = deployment.get("returncode")
@@ -32,7 +48,7 @@ async def deployments_page():
             </td>
             <td>{app_id}</td>
             <td>{kind}</td>
-            <td><span class="pill">{status}</span></td>
+            <td>{status}</td>
             <td>{returncode_label}</td>
             <td>{finished_at}</td>
             <td class="actions-cell">
@@ -84,7 +100,7 @@ async def deployment_detail_page(
     title = f"Nasazení #{html.escape(str(deployment.get('id', deployment_id)))}"
     app_id = html.escape(deployment.get("app_id", "") or "")
     kind = html.escape(deployment.get("kind", "") or "")
-    status = html.escape(deployment.get("status", "") or "")
+    status = render_status_pill(deployment.get("status"))
     started_at = html.escape(deployment.get("started_at", "") or "")
     finished_at = html.escape(deployment.get("finished_at", "") or "")
     returncode = deployment.get("returncode")
@@ -109,7 +125,7 @@ async def deployment_detail_page(
             <table>
                 <tr><th>Aplikace</th><td>{app_id}</td></tr>
                 <tr><th>Typ</th><td>{kind}</td></tr>
-                <tr><th>Status</th><td><span class="pill">{status}</span></td></tr>
+                <tr><th>Status</th><td>{status}</td></tr>
                 <tr><th>Návratový kód</th><td>{returncode_label}</td></tr>
                 <tr><th>Spuštěno</th><td>{started_at}</td></tr>
                 <tr><th>Dokončeno</th><td>{finished_at}</td></tr>

app/static/styles.css

@@ -10,6 +10,9 @@
     --secondary-dark: #173d51;
     --danger: #b8223e;
     --danger-dark: #941a31;
+    --danger-bg: #fdecef;
+    --warning: #9a5b00;
+    --warning-bg: #fff4d8;
     --success: #188654;
     --success-bg: #e7f5ee;
 }
@@ -179,9 +182,29 @@ button:hover,
     border-radius: 999px;
     padding: 4px 10px;
     font-size: 12px;
+    background: #eef6f9;
+    color: var(--secondary);
+    font-weight: 700;
+}
+
+.pill-success {
     background: var(--success-bg);
     color: var(--success);
-    font-weight: 700;
+}
+
+.pill-warning {
+    background: var(--warning-bg);
+    color: var(--warning);
+}
+
+.pill-danger {
+    background: var(--danger-bg);
+    color: var(--danger);
+}
+
+.pill-muted {
+    background: #eef6f9;
+    color: var(--muted);
 }
 
 input,