Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
Code Issues Projects Releases Wiki Activity

feat: styled application environment boxes (#6296)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2024-02-21 12:15:54 +01:00 committed by GitHub
parent 7baed29c07
commit 56cbe1485e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 130 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

166
frontend/src/component/application/ApplicationOverview.tsx
View File

@ -1,24 +1,60 @@
import { usePageTitle } from 'hooks/usePageTitle'; import { usePageTitle } from 'hooks/usePageTitle';
import { Mermaid } from 'component/common/Mermaid/Mermaid';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; 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 { useThemeMode } from 'hooks/useThemeMode';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import Check from '@mui/icons-material/CheckCircle';
const StyledMermaid = styled(Mermaid)(({ theme }) => ({ const StyledTable = styled('table')(({ theme }) => ({
'#mermaid .node rect': { fontSize: theme.fontSizes.smallerBody,
fill: theme.palette.secondary.light, marginTop: theme.spacing(2),
stroke: theme.palette.secondary.border, }));
},
'#mermaid .application-container': { const StyledCell = styled('td')(({ theme }) => ({
// display: 'flex', verticalAlign: 'top',
// padding: theme.spacing(4,3,3,3), paddingLeft: 0,
// flexDirection: 'column', paddingRight: theme.spacing(1),
// alignItems: 'center', }));
// gap: theme.spacing(3),
backgroundColor: theme.palette.secondary.light, 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 = () => { export const ApplicationOverview = () => {
@ -34,7 +70,10 @@ export const ApplicationOverview = () => {
{ {
name: 'production', name: 'production',
instanceCount: 34, 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', lastSeen: '2021-10-01T12:00:00Z',
}, },
{ {
@ -46,10 +85,6 @@ export const ApplicationOverview = () => {
], ],
}; };
const applicationNode = `
${applicationName}[<span>${applicationName}</span>]
`;
// @ts-ignore // @ts-ignore
window.navigateToInstances = (environment: string) => { window.navigateToInstances = (environment: string) => {
navigate( 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 ( return (
<ConditionallyRender <ConditionallyRender
condition={1 === 2 + 1} condition={1 === 2 + 1}
show={<Alert severity='warning'>No data available.</Alert>} 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>
}
/> />
); );
}; };