From 56cbe1485e3564e63fbc700359904489d28c0995 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Wed, 21 Feb 2024 12:15:54 +0100
Subject: [PATCH] feat: styled application environment boxes (#6296)

---
 .../application/ApplicationOverview.tsx       | 166 ++++++++++++++----
 1 file changed, 130 insertions(+), 36 deletions(-)

diff --git a/frontend/src/component/application/ApplicationOverview.tsx b/frontend/src/component/application/ApplicationOverview.tsx
index 2cdad600f5..f6b4ffa8a5 100644
--- a/frontend/src/component/application/ApplicationOverview.tsx
+++ b/frontend/src/component/application/ApplicationOverview.tsx
@@ -1,24 +1,60 @@
 import { usePageTitle } from 'hooks/usePageTitle';
-import { Mermaid } from 'component/common/Mermaid/Mermaid';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { Alert, styled } from '@mui/material';
+import { Alert, Box, Divider, styled, Typography } from '@mui/material';
 import { useThemeMode } from 'hooks/useThemeMode';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { useNavigate } from 'react-router-dom';
+import Check from '@mui/icons-material/CheckCircle';
 
-const StyledMermaid = styled(Mermaid)(({ theme }) => ({
-    '#mermaid .node rect': {
-        fill: theme.palette.secondary.light,
-        stroke: theme.palette.secondary.border,
-    },
-    '#mermaid .application-container': {
-        // display: 'flex',
-        // padding: theme.spacing(4,3,3,3),
-        // flexDirection: 'column',
-        // alignItems: 'center',
-        // gap: theme.spacing(3),
-        backgroundColor: theme.palette.secondary.light,
-    },
+const StyledTable = styled('table')(({ theme }) => ({
+    fontSize: theme.fontSizes.smallerBody,
+    marginTop: theme.spacing(2),
+}));
+
+const StyledCell = styled('td')(({ theme }) => ({
+    verticalAlign: 'top',
+    paddingLeft: 0,
+    paddingRight: theme.spacing(1),
+}));
+
+const StyleApplicationContainer = styled(Box)(({ theme }) => ({
+    marginBottom: theme.spacing(18),
+    display: 'flex',
+    justifyContent: 'center',
+}));
+
+const StyledApplicationBox = styled(Box)(({ theme }) => ({
+    borderRadius: theme.shape.borderRadiusMedium,
+    border: '1px solid',
+    borderColor: theme.palette.success.border,
+    backgroundColor: theme.palette.success.light,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    padding: theme.spacing(1.5, 3, 2, 3),
+}));
+
+const StyledOkStatus = styled(Typography)(({ theme }) => ({
+    gap: theme.spacing(0.5),
+    fontSize: theme.fontSizes.smallBody,
+    color: theme.palette.success.dark,
+    display: 'flex',
+    alignItems: 'center',
+}));
+
+const StyledEnvironmentBox = styled(Box)(({ theme }) => ({
+    borderRadius: theme.shape.borderRadiusMedium,
+    border: '1px solid',
+    borderColor: theme.palette.secondary.border,
+    backgroundColor: theme.palette.secondary.light,
+    display: 'inline-block',
+    padding: theme.spacing(1.5, 2, 1.5, 2),
+}));
+
+const StyledDivider = styled(Divider)(({ theme }) => ({
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+    width: '100%',
 }));
 
 export const ApplicationOverview = () => {
@@ -34,7 +70,10 @@ export const ApplicationOverview = () => {
             {
                 name: 'production',
                 instanceCount: 34,
-                sdks: ['unleash-client-node:5.4.0'],
+                sdks: [
+                    'unleash-client-node:5.4.0',
+                    'unleash-client-node:5.4.1',
+                ],
                 lastSeen: '2021-10-01T12:00:00Z',
             },
             {
@@ -46,10 +85,6 @@ export const ApplicationOverview = () => {
         ],
     };
 
-    const applicationNode = `
-    ${applicationName}[<span>${applicationName}</span>]
-    `;
-
     // @ts-ignore
     window.navigateToInstances = (environment: string) => {
         navigate(
@@ -57,26 +92,85 @@ export const ApplicationOverview = () => {
         );
     };
 
-    const graph = `
-    graph TD
-        subgraph _[ ]
-        direction BT
-            ${applicationNode}
-            ${app.environments
-                .map(
-                    ({ name }, i) =>
-                        `${name}("${name}")  --- ${applicationName}
-                        click ${name} navigateToInstances`,
-                )
-                .join('\n')}
-        end
-    `;
-
     return (
         <ConditionallyRender
             condition={1 === 2 + 1}
             show={<Alert severity='warning'>No data available.</Alert>}
-            elseShow={<StyledMermaid>{graph}</StyledMermaid>}
+            elseShow={
+                <Box>
+                    <StyleApplicationContainer>
+                        <StyledApplicationBox>
+                            <Typography
+                                sx={(theme) => ({
+                                    fontSize: theme.fontSizes.smallerBody,
+                                })}
+                                color='text.secondary'
+                            >
+                                Application
+                            </Typography>
+                            <Typography
+                                sx={(theme) => ({
+                                    fontSize: theme.fontSizes.bodySize,
+                                    fontWeight: theme.fontWeight.bold,
+                                })}
+                            >
+                                {applicationName}
+                            </Typography>
+
+                            <StyledDivider />
+
+                            <StyledOkStatus>
+                                <Check
+                                    sx={(theme) => ({
+                                        color: theme.palette.success.main,
+                                    })}
+                                />{' '}
+                                Everything looks good!
+                            </StyledOkStatus>
+                        </StyledApplicationBox>
+                    </StyleApplicationContainer>
+
+                    <Box
+                        sx={{ display: 'flex', justifyContent: 'space-evenly' }}
+                    >
+                        {app.environments.map((environment) => (
+                            <StyledEnvironmentBox>
+                                <Typography
+                                    sx={(theme) => ({
+                                        fontSize: theme.fontSizes.smallerBody,
+                                        fontWeight: theme.fontWeight.bold,
+                                    })}
+                                >
+                                    {environment.name} environment
+                                </Typography>
+
+                                <StyledTable>
+                                    <tr>
+                                        <StyledCell>Instances:</StyledCell>
+                                        <StyledCell>
+                                            {environment.instanceCount}
+                                        </StyledCell>
+                                    </tr>
+                                    <tr>
+                                        <StyledCell>SDK:</StyledCell>
+                                        <StyledCell>
+                                            {environment.sdks.map((sdk) => (
+                                                <div>{sdk}</div>
+                                            ))}
+                                        </StyledCell>
+                                    </tr>
+                                    <tr>
+                                        <StyledCell>Last seen:</StyledCell>
+                                        <StyledCell>
+                                            {environment.lastSeen}
+                                        </StyledCell>
+                                    </tr>
+                                </StyledTable>
+                            </StyledEnvironmentBox>
+                        ))}
+                    </Box>
+                </Box>
+            }
         />
     );
 };