mirror of
https://github.com/Unleash/unleash.git
synced 2024-12-22 19:07:54 +01:00
feat: styled application environment boxes (#6296)
This commit is contained in:
parent
7baed29c07
commit
56cbe1485e
@ -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>
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user