Finish service card

src/components/dashboard/ServiceCard.tsx

@@ -1,18 +1,14 @@
-import React from "react";
+import React, { ReactElement } from "react";
 import { Service, Node, StatusPerTenant } from "../../types";
 import Typography from "@mui/material/Typography";
 import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
 import Stack from "@mui/material/Stack";
-import IconButton from "@mui/material/IconButton";
-import LaunchIcon from "@mui/icons-material/Launch";
 import Tooltip from "@mui/material/Tooltip";
 import Chip from "@mui/material/Chip";
-import Grid from "@mui/material/Unstable_Grid2";
 import Box from "@mui/material/Box";
 import Link from "@mui/material/Link";
 import Avatar from "@mui/material/Avatar";
-import { green, red } from "@mui/material/colors";
 
 interface ServiceCardProps {
     service: Service;
@@ -35,8 +31,6 @@ function TenantsStatusTooltip({ tenantsStatus }: TenantsStatusTooltipProps) {
         console.log(`key: ${key}, value: ${value}`);
         return null;
     });
-    // console.log(tenantsStatus);
-    // console.log(statusItems);
 
     return (
         <Box className="tenants-status-tooltip">
@@ -46,65 +40,68 @@ function TenantsStatusTooltip({ tenantsStatus }: TenantsStatusTooltipProps) {
     );
 }
 
+function getNodeNameElement(node: Node): React.ReactElement {
+    let statusMessage;
+    const statusOk = node.health_check_status?.status_ok;
+
+    if (statusOk) {
+        statusMessage = `Node ${node.name} is healthy`;
+    } else {
+        statusMessage = node.health_check_status?.message;
+    }
+    return (
+        <Tooltip title={statusMessage}>
+            <Avatar variant="square" className="node-name">
+                {node.name}
+            </Avatar>
+        </Tooltip>
+    );
+}
+
+interface TenantsStatusProps {
+    statusPerTenant: StatusPerTenant | null;
+}
+
+function TenantsStatus({ statusPerTenant }: TenantsStatusProps) {
+    if (!statusPerTenant) return <></>;
+
+    let statuses: ReactElement[] = [];
+
+    for (const [tenantId, statusOk] of Object.entries(statusPerTenant)) {
+        statuses.push(
+            <Typography component="div" className={`tenant-status ${statusOk ? "status-ok" : "status-error"}`}>
+                {tenantId}
+            </Typography>
+        );
+    }
+
+    return (
+        <Stack direction="row" spacing={1} className="tenants-status-container">
+            <Typography component="div" className="tenants-status-title">
+                Tenants
+            </Typography>
+            {statuses}
+        </Stack>
+    );
+}
+
 interface ServiceNodePropps {
     node: Node;
 }
 
 function ServiceNode({ node }: ServiceNodePropps) {
-    const nodeName = node.health_check_status?.status_ok ? (
-        <Tooltip title={`Node ${node.name} is healthy`}>
-            <Avatar sx={{ bgcolor: green["700"] }} variant="square" className="node-name">
-                {node.name}
-            </Avatar>
-        </Tooltip>
-    ) : (
-        <Tooltip title={node.health_check_status?.message}>
-            <Avatar sx={{ bgcolor: red[900] }} variant="square" className="node-name">
-                {node.name}
-            </Avatar>
-        </Tooltip>
-    );
-
-    let tenantsHealth: boolean[] = [];
-    if (node.health_check_status?.status_per_tenant) {
-        tenantsHealth = Object.values(node.health_check_status?.status_per_tenant);
-    }
-
-    let tenantsStatusContent = null;
-    if (tenantsHealth.length > 0) {
-        const okValues = tenantsHealth.filter((t) => t === true);
-
-        switch (okValues.length) {
-            case 0:
-                tenantsStatusContent = <Chip label="tenants" color="error" className="node-name" />;
-                break;
-            case tenantsHealth.length:
-                tenantsStatusContent = <Chip label="tenants" color="success" className="node-name" />;
-                break;
-            default:
-                tenantsStatusContent = <Chip label="tenants" color="warning" className="node-name" />;
-        }
-
-        if (node.health_check_status?.status_per_tenant) {
-            tenantsStatusContent = (
-                <Tooltip title={<TenantsStatusTooltip tenantsStatus={node.health_check_status.status_per_tenant} />}>
-                    {tenantsStatusContent}
-                </Tooltip>
-            );
-        } else {
-        }
-    }
-
     const nodeUrl = node.url.replace("http://", "").replace("https://", "");
+    const statusOk = node.health_check_status?.status_ok;
 
     return (
-        <Stack direction="row" className="service-node">
+        <Stack direction="row" className={`service-node ${statusOk ? "status-ok" : "status-error"}`}>
-            <Box>{nodeName}</Box>
+            <Box>{getNodeNameElement(node)}</Box>
-            <Box>
+            <Box className="node-details">
                 <Typography className="version">{node.app_details?.app_version || "no version"}</Typography>
                 <Link href={node.url} target="_blank">
                     {nodeUrl}
                 </Link>
+                <TenantsStatus statusPerTenant={node.health_check_status?.status_per_tenant} />
             </Box>
         </Stack>
     );

src/scss/_service-card.scss

@@ -1,4 +1,6 @@
-$color-ok: #27cb30;
+@use "sass:color";
+
+$color-ok: #1dad24;
 $color-warning: #ed6c02;
 $color-danger: #d32f2f;
 
@@ -30,25 +32,60 @@ $color-danger: #d32f2f;
 
     .service-node {
         align-items: center;
-        gap: 1rem;
+        gap: 0.5rem;
 
         .node-name {
             font-weight: bold;
             border-radius: 10px;
         }
-        .version {
+
-            font-weight: bold;
+        .node-details {
-        }
+            border-left: 4px solid #c1c1c1;
-        .status {
+            padding-left: 0.5rem;
-            display: flex;
+
-            align-items: center;
+            .version {
-            .docs-url {
+                font-weight: bold;
-                margin-left: auto;
             }
-            .status-icon {
+            .tenants-status-container {
-                margin-left: 0.5rem;
+                align-items: center;
+                margin-top: 0.5rem;
+                flex-flow: wrap;
+
+                .tenants-status-title {
+                    font-weight: bold;
+                }
+
+                .tenant-status {
+                    color: white;
+                    padding: 0.2rem 0.5rem;
+                    border-radius: 10px;
+                    &.status-ok {
+                        background-color: color.change($color-ok, $alpha: 0.6);
+                    }
+                    &.status-error {
+                        background-color: color.change($color-danger, $alpha: 0.6);
+                    }
+                }
             }
         }
+
+        &.status-ok {
+            .node-name {
+                background-color: $color-ok;
+            }
+            .node-details {
+                border-left-color: color.change($color-ok, $alpha: 0.6);
+            }
+        }
+        &.status-error {
+            .node-name {
+                background-color: $color-danger;
+            }
+            .node-details {
+                border-left-color: color.change($color-danger, $alpha: 0.6);
+            }
+        }
+
         a {
             font-family: Verdana, Geneva, Tahoma, sans-serif;
         }
@@ -58,6 +95,3 @@ $color-danger: #d32f2f;
         padding-bottom: 16px !important;
     }
 }
-
-.MuiTooltip-tooltip .tenants-status-tooltip {
-}

src/types.tsx

@@ -6,7 +6,7 @@ export type EnvTab = {
 
 export type StatusPerTenant = { [tenantId: string]: boolean };
 
-type HealthCheckStatus = {
+export type HealthCheckStatus = {
     status_ok: boolean;
     message: string;
     status_per_tenant: StatusPerTenant | null;