Service card

src/components/dashboard/ServiceCard.tsx

@@ -3,6 +3,10 @@ import { Service, Node } 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 Grid from "@mui/material/Unstable_Grid2";
 
 interface ServiceCardProps {
@@ -17,13 +21,39 @@ function normalizeServiceName(name: string): string {
         .replace(/\b\w/g, (s) => s.toUpperCase());
 }
 
-function ServiceNode(node: Node) {
-    return <Typography variant="h6">{node.name}</Typography>;
+interface ServiceNodePropps {
+    node: Node;
+}
+
+function ServiceNode({ node }: ServiceNodePropps) {
+    return (
+        <Grid container spacing={2} className="service-node" sx={{ alignItems: "center" }}>
+            <Grid xs={1}>
+                <Typography variant="h6" className="name">
+                    {node.name}
+                </Typography>
+            </Grid>
+            <Grid xs={6}>
+                <Typography className="version">{node.app_details?.app_version || "no version"}</Typography>
+            </Grid>
+            <Grid xs={1}>
+                <Tooltip title={node.url}>
+                    <IconButton aria-label="delete" target="_blank" href={node.url}>
+                        <LaunchIcon />
+                    </IconButton>
+                </Tooltip>
+            </Grid>
+        </Grid>
+    );
 }
 
 export default function ServiceCard({ service }: ServiceCardProps) {
     const nodes = service.nodes.map((node) => {
-        return ServiceNode(node);
+        return (
+            <>
+                <ServiceNode node={node} key={node.name} />
+            </>
+        );
     });
 
     return (
@@ -32,7 +62,7 @@ export default function ServiceCard({ service }: ServiceCardProps) {
                 <Typography variant="h5" component="div">
                     {normalizeServiceName(service.name)}
                 </Typography>
-                {nodes}
+                <Stack spacing={2}>{nodes}</Stack>
             </CardContent>
         </Card>
     );