mirror of
https://github.com/Unleash/unleash.git
synced 2025-10-27 11:02:16 +01:00
feat: Application elements lines (#6301)
This commit is contained in:
Mateusz Kwasniewski
GitHub
parent
56cbe1485e
commit
ac183e76f8
@ -95,6 +95,7 @@
|
||||
"plausible-tracker": "0.3.8",
|
||||
"prop-types": "15.8.1",
|
||||
"react": "17.0.2",
|
||||
"react-archer": "4.3.0",
|
||||
"react-chartjs-2": "4.3.1",
|
||||
"react-confetti": "^6.1.0",
|
||||
"react-dom": "17.0.2",
|
||||
|
||||
@ -1,10 +1,18 @@
|
||||
import { usePageTitle } from 'hooks/usePageTitle';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
import { Alert, Box, Divider, styled, Typography } from '@mui/material';
|
||||
import { useThemeMode } from 'hooks/useThemeMode';
|
||||
import {
|
||||
Alert,
|
||||
Box,
|
||||
Divider,
|
||||
styled,
|
||||
Typography,
|
||||
useTheme,
|
||||
} from '@mui/material';
|
||||
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import Check from '@mui/icons-material/CheckCircle';
|
||||
import { ArcherContainer, ArcherElement } from 'react-archer';
|
||||
import { useLayoutEffect, useRef, useState } from 'react';
|
||||
|
||||
const StyledTable = styled('table')(({ theme }) => ({
|
||||
fontSize: theme.fontSizes.smallerBody,
|
||||
@ -48,7 +56,8 @@ const StyledEnvironmentBox = styled(Box)(({ theme }) => ({
|
||||
borderColor: theme.palette.secondary.border,
|
||||
backgroundColor: theme.palette.secondary.light,
|
||||
display: 'inline-block',
|
||||
padding: theme.spacing(1.5, 2, 1.5, 2),
|
||||
padding: theme.spacing(1.5, 0, 1.5, 1),
|
||||
minWidth: '270px',
|
||||
}));
|
||||
|
||||
const StyledDivider = styled(Divider)(({ theme }) => ({
|
||||
@ -57,11 +66,28 @@ const StyledDivider = styled(Divider)(({ theme }) => ({
|
||||
width: '100%',
|
||||
}));
|
||||
|
||||
const StyledEnvironmentsContainer = styled(Box)({
|
||||
display: 'flex',
|
||||
justifyContent: 'start',
|
||||
gap: '20px',
|
||||
});
|
||||
|
||||
const useElementWidth = () => {
|
||||
const elementRef = useRef<HTMLDivElement>(null);
|
||||
const [width, setWidth] = useState('100%');
|
||||
|
||||
useLayoutEffect(() => {
|
||||
setWidth(`${elementRef.current?.scrollWidth}px`);
|
||||
}, [elementRef, setWidth]);
|
||||
|
||||
return { elementRef, width };
|
||||
};
|
||||
|
||||
export const ApplicationOverview = () => {
|
||||
usePageTitle('Applications - Overview');
|
||||
const applicationName = useRequiredPathParam('name');
|
||||
const { themeMode } = useThemeMode();
|
||||
const navigate = useNavigate();
|
||||
const theme = useTheme();
|
||||
|
||||
const app = {
|
||||
projects: ['default', 'dx'],
|
||||
@ -92,83 +118,113 @@ export const ApplicationOverview = () => {
|
||||
);
|
||||
};
|
||||
|
||||
const { elementRef, width } = useElementWidth();
|
||||
|
||||
return (
|
||||
<ConditionallyRender
|
||||
condition={1 === 2 + 1}
|
||||
show={<Alert severity='warning'>No data available.</Alert>}
|
||||
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' }}
|
||||
<Box sx={{ width }}>
|
||||
<ArcherContainer
|
||||
strokeColor={theme.palette.secondary.border}
|
||||
endMarker={false}
|
||||
>
|
||||
{app.environments.map((environment) => (
|
||||
<StyledEnvironmentBox>
|
||||
<Typography
|
||||
sx={(theme) => ({
|
||||
fontSize: theme.fontSizes.smallerBody,
|
||||
fontWeight: theme.fontWeight.bold,
|
||||
})}
|
||||
>
|
||||
{environment.name} environment
|
||||
</Typography>
|
||||
<StyleApplicationContainer>
|
||||
<ArcherElement
|
||||
id='application'
|
||||
relations={app.environments.map(
|
||||
(environment) => ({
|
||||
targetId: environment.name,
|
||||
targetAnchor: 'top',
|
||||
sourceAnchor: 'bottom',
|
||||
}),
|
||||
)}
|
||||
>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<StyledDivider />
|
||||
|
||||
<StyledOkStatus>
|
||||
<Check
|
||||
sx={(theme) => ({
|
||||
color: theme.palette.success
|
||||
.main,
|
||||
})}
|
||||
/>{' '}
|
||||
Everything looks good!
|
||||
</StyledOkStatus>
|
||||
</StyledApplicationBox>
|
||||
</ArcherElement>
|
||||
</StyleApplicationContainer>
|
||||
|
||||
<StyledEnvironmentsContainer ref={elementRef}>
|
||||
{app.environments.map((environment, index) => (
|
||||
<ArcherElement id={environment.name}>
|
||||
<StyledEnvironmentBox
|
||||
key={environment.name}
|
||||
>
|
||||
<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>
|
||||
</ArcherElement>
|
||||
))}
|
||||
</StyledEnvironmentsContainer>
|
||||
</ArcherContainer>
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
|
||||
@ -6294,6 +6294,14 @@ queue-microtask@^1.2.2:
|
||||
resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
|
||||
integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
|
||||
|
||||
react-archer@4.3.0:
|
||||
version "4.3.0"
|
||||
resolved "https://registry.yarnpkg.com/react-archer/-/react-archer-4.3.0.tgz#77279e6be9b1fd0d83706482a97926fa6a974358"
|
||||
integrity sha512-DXSTq/1oKEL7g5zLsvw+1WeE5Ofwd9CBooqCxcG1/0OOd5j7k5uXMRHa8Wf/8sAbUm/8cW6v1nAwHnFdFEhF6g==
|
||||
dependencies:
|
||||
react-fast-compare "^2.0.4"
|
||||
resize-observer-polyfill "1.5.0"
|
||||
|
||||
react-chartjs-2@4.3.1:
|
||||
version "4.3.1"
|
||||
resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-4.3.1.tgz#9941e7397fb963f28bb557addb401e9ff96c6681"
|
||||
@ -6331,6 +6339,11 @@ react-error-boundary@3.1.4, react-error-boundary@^3.1.0:
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.12.5"
|
||||
|
||||
react-fast-compare@^2.0.4:
|
||||
version "2.0.4"
|
||||
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
|
||||
integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
|
||||
|
||||
react-floater@^0.7.6:
|
||||
version "0.7.6"
|
||||
resolved "https://registry.yarnpkg.com/react-floater/-/react-floater-0.7.6.tgz#a98ee90e3d51200c6e6a564ff33496f3c0d7cfee"
|
||||
@ -6580,6 +6593,11 @@ requires-port@^1.0.0:
|
||||
resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
|
||||
integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
|
||||
|
||||
resize-observer-polyfill@1.5.0:
|
||||
version "1.5.0"
|
||||
resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz#660ff1d9712a2382baa2cad450a4716209f9ca69"
|
||||
integrity sha512-M2AelyJDVR/oLnToJLtuDJRBBWUGUvvGigj1411hXhAdyFWqMaqHp7TixW3FpiLuVaikIcR1QL+zqoJoZlOgpg==
|
||||
|
||||
resolve-from@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user