Skip to content

Commit

Permalink
feat: Application elements lines (#6301)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kwasniew
kwasniew committed Feb 21, 2024
1 parent 56cbe14 commit ac183e7
Show file tree
Hide file tree
Showing 3 changed files with 150 additions and 75 deletions.
1 change: 1 addition & 0 deletions frontend/package.json
View file
Expand Up @@ -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",
Expand Down
206 changes: 131 additions & 75 deletions frontend/src/component/application/ApplicationOverview.tsx
View file
@@ -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,
Expand Down Expand Up @@ -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 }) => ({
Expand All @@ -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'],
Expand Down Expand Up @@ -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>

<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>
<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>

<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>
}
/>
Expand Down
18 changes: 18 additions & 0 deletions frontend/yarn.lock
View file
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit ac183e7

Please sign in to comment.