Service card

src/components/dashboard/EnvironmentList.tsx

@@ -11,8 +11,11 @@ interface EnvironmentListProps {
 export default function EnvironmentList({ environments }: EnvironmentListProps) {
     const envItems = environments.map((env) => {
         return (
-            <Box className="environment">
-                <Typography component={"h1"} key={env.name} className="title">
+            <Box className="environment" sx={{ marginBottom: "2rem" }}>
+                <Typography variant={"h2"} key={env.name} className="title">
+                    <Typography component="span" variant={"h5"} key={env.name} sx={{ marginRight: "1rem" }}>
+                        environment:
+                    </Typography>
                     {env.name}
                 </Typography>
                 <TenantList tenants={env.tenants} />

src/components/dashboard/ServiceCard.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { Service, Node } from "../../types";
+import Typography from "@mui/material/Typography";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import Grid from "@mui/material/Unstable_Grid2";
+
+interface ServiceCardProps {
+    service: Service;
+}
+
+function normalizeServiceName(name: string): string {
+    // convert ugly CLOUD_INTEGRATION_SERVICE to Cloud Integration Service
+    return name
+        .replaceAll("_", " ")
+        .toLowerCase()
+        .replace(/\b\w/g, (s) => s.toUpperCase());
+}
+
+function ServiceNode(node: Node) {
+    return <Typography variant="h6">{node.name}</Typography>;
+}
+
+export default function ServiceCard({ service }: ServiceCardProps) {
+    const nodes = service.nodes.map((node) => {
+        return ServiceNode(node);
+    });
+
+    return (
+        <Card className="service-card" sx={{ width: "400px" }}>
+            <CardContent>
+                <Typography variant="h5" component="div">
+                    {normalizeServiceName(service.name)}
+                </Typography>
+                {nodes}
+            </CardContent>
+        </Card>
+    );
+}

src/components/dashboard/ServiceList.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Service } from "../../types";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
+import Grid from "@mui/material/Unstable_Grid2";
+import ServiceCard from "./ServiceCard";
 
 interface ServiceListProps {
     services: Service[];
@@ -10,13 +10,15 @@ interface ServiceListProps {
 export default function ServiceList({ services }: ServiceListProps) {
     const serviceItems = services.map((service) => {
         return (
-            <Box className="service-card">
-                <Typography component={"h1"} key={service.name} className="service-name">
-                    {service.name}
-                </Typography>
-            </Box>
+            <Grid key={service.name} sx={{ display: "flex" }}>
+                <ServiceCard service={service} />
+            </Grid>
         );
     });
 
-    return <Box className="service-list">{serviceItems}</Box>;
+    return (
+        <Grid container rowSpacing={2} columnSpacing={2} className="service-list" sx={{ marginBottom: "1rem" }}>
+            {serviceItems}
+        </Grid>
+    );
 }

src/components/dashboard/TenantList.tsx

@@ -13,7 +13,7 @@ export default function TenantList({ tenants: tenants }: TenantListProps) {
         const tenantName = tenant.name !== "default" ? `Tenant: ${tenant.name}` : "Multitenant";
         return (
             <Box className="tenant">
-                <Typography component={"h1"} key={tenant.name} className="tenant-name">
+                <Typography variant={"h3"} key={tenant.name} className="tenant-name" sx={{ marginBottom: "1rem" }}>
                     {tenantName}
                 </Typography>
                 <ServiceList services={tenant.services} />

src/scss/_common.scss

@@ -1,3 +1,4 @@
 body {
     margin: 0;
+    background-color: whitesmoke;
 }

src/types.tsx

@@ -19,7 +19,7 @@ type AppDetails = {
     template_version: string | null;
 };
 
-type Node = {
+export type Node = {
     name: string;
     url: string;
     app_details: AppDetails | null;