Status card

src/components/dashboard/ServiceCard.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Service, Node } from "../../types";
+import { Service, Node, StatusPerTenant } from "../../types";
 import Typography from "@mui/material/Typography";
 import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
@@ -9,6 +9,7 @@ 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";
 
 interface ServiceCardProps {
     service: Service;
@@ -22,6 +23,8 @@ function normalizeServiceName(name: string): string {
         .replace(/\b\w/g, (s) => s.toUpperCase());
 }
 
+function TenantsStatusTooltip(tenantsStatus: StatusPerTenant) {}
+
 interface ServiceNodePropps {
     node: Node;
 }
@@ -48,7 +51,19 @@ function ServiceNode({ node }: ServiceNodePropps) {
 
         switch (okValues.length) {
             case 0:
-                tenantsStatus = <Chip label="tenants" color="error" className="node-name" />;
+                tenantsStatus = (
+                    <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" />;

src/scss/_common.scss

@@ -2,3 +2,8 @@ body {
     margin: 0;
     background-color: whitesmoke;
 }
+
+.MuiTooltip-tooltip {
+    font-size: 1rem !important;
+    max-width: 500px !important;
+}

src/scss/_service-card.scss

@@ -44,3 +44,6 @@ $color-danger: #d32f2f;
         }
     }
 }
+
+.MuiTooltip-tooltip .tenants-status-tooltip {
+}

src/types.tsx

@@ -4,7 +4,7 @@ export type EnvTab = {
     dashboardEndpoint: string;
 };
 
-type StatusPerTenant = { [tenantId: string]: boolean };
+export type StatusPerTenant = { [tenantId: string]: boolean };
 
 type HealthCheckStatus = {
     status_ok: boolean;