Service card

src/components/dashboard/ServiceCard.tsx

@@ -23,7 +23,25 @@ function normalizeServiceName(name: string): string {
         .replace(/\b\w/g, (s) => s.toUpperCase());
 }
 
-function TenantsStatusTooltip(tenantsStatus: StatusPerTenant) {}
+interface TenantsStatusTooltipProps {
+    tenantsStatus: StatusPerTenant;
+}
+
+function TenantsStatusTooltip({ tenantsStatus }: TenantsStatusTooltipProps) {
+    const statusItems = Object.entries(tenantsStatus).map(([key, value]) => {
+        console.log(`key: ${key}, value: ${value}`);
+        return null;
+    });
+    // console.log(tenantsStatus);
+    // console.log(statusItems);
+
+    return (
+        <Box className="tenants-status-tooltip">
+            <Typography color="inherit">Tooltip with HTML</Typography>
+            <em>{"And here's"}</em> <b>{"some"}</b> <u>{"amazing content"}</u>. {"It's very engaging. Right?"}
+        </Box>
+    );
+}
 
 interface ServiceNodePropps {
     node: Node;
@@ -45,31 +63,28 @@ function ServiceNode({ node }: ServiceNodePropps) {
         tenantsHealth = Object.values(node.health_check_status?.status_per_tenant);
     }
 
-    let tenantsStatus = null;
+    let tenantsStatusContent = null;
     if (tenantsHealth.length > 0) {
         const okValues = tenantsHealth.filter((t) => t === true);
 
         switch (okValues.length) {
             case 0:
-                tenantsStatus = (
+                tenantsStatusContent = <Chip label="tenants" color="error" className="node-name" />;
-                    <Tooltip
-                        title={
-                            <Box className="tenants-status-tooltip">
-                                <Typography color="inherit">Tooltip with HTML</Typography>
-                                <em>{"And here's"}</em> <b>{"some"}</b> <u>{"amazing content"}</u>.{" "}
-                                {"It's very engaging. Right?"}
-                            </Box>
-                        }
-                    >
-                        <Chip label="tenants" color="error" className="node-name" />
-                    </Tooltip>
-                );
                 break;
             case tenantsHealth.length:
-                tenantsStatus = <Chip label="tenants" color="success" className="node-name" />;
+                tenantsStatusContent = <Chip label="tenants" color="success" className="node-name" />;
                 break;
             default:
-                tenantsStatus = <Chip label="tenants" color="warning" className="node-name" />;
+                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 {
         }
     }
 
@@ -85,7 +100,7 @@ function ServiceNode({ node }: ServiceNodePropps) {
                         <LaunchIcon />
                     </IconButton>
                 </Tooltip>
-                {tenantsStatus}
+                {tenantsStatusContent}
             </Grid>
         </Grid>
     );

src/scss/_service-card.scss

@@ -43,6 +43,10 @@ $color-danger: #d32f2f;
             }
         }
     }
+
+    .MuiCardContent-root {
+        padding-bottom: 16px !important;
+    }
 }
 
 .MuiTooltip-tooltip .tenants-status-tooltip {