Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: remove mermaid in favor of react archer #6320

Merged
merged 5 commits into from
Feb 23, 2024
Merged

chore: remove mermaid in favor of react archer #6320

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fa27f95
chore: remove mermaid in favor of react-archer
nunogois Feb 22, 2024
0279f1c
fix: better RPS label formatting
nunogois Feb 22, 2024
4d97160
fix: use more reasonable zIndex for element boxes
nunogois Feb 22, 2024
b2221f7
fix: clean up mockApps
nunogois Feb 22, 2024
207f88a
fix: remove redundant div
nunogois Feb 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,6 @@
"lodash.isequal": "^4.5.0",
"lodash.mapvalues": "^4.6.0",
"lodash.omit": "4.5.0",
"mermaid": "^9.3.0",
"millify": "^6.0.0",
"msw": "2.1.7",
"pkginfo": "0.4.1",
Expand Down
143 changes: 104 additions & 39 deletions frontend/src/component/admin/network/NetworkOverview/NetworkOverview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,60 @@
import { usePageTitle } from 'hooks/usePageTitle';
import { Mermaid } from 'component/common/Mermaid/Mermaid';
import { ArcherContainer, ArcherElement } from 'react-archer';
import { useInstanceMetrics } from 'hooks/api/getters/useInstanceMetrics/useInstanceMetrics';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { Alert, styled } from '@mui/material';
import { Alert, Typography, styled, useTheme } from '@mui/material';
import { unknownify } from 'utils/unknownify';
import { useMemo } from 'react';
import {
RequestsPerSecondSchema,
RequestsPerSecondSchemaDataResultItem,
} from 'openapi';
import logoIcon from 'assets/icons/logoBg.svg';
import logoWhiteIcon from 'assets/icons/logoWhiteBg.svg';
import { formatAssetPath } from 'utils/formatPath';
import { useThemeMode } from 'hooks/useThemeMode';

const StyledMermaid = styled(Mermaid)(({ theme }) => ({
'#mermaid .node rect': {
fill: theme.palette.secondary.light,
stroke: theme.palette.secondary.border,
},
'#mermaid .unleash-logo': {
padding: theme.spacing(1),
import { ReactComponent as LogoIcon } from 'assets/icons/logoBg.svg';
import { ReactComponent as LogoIconWhite } from 'assets/icons/logoWhiteBg.svg';
import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';

const StyleUnleashContainer = styled('div')(({ theme }) => ({
marginBottom: theme.spacing(18),
display: 'flex',
justifyContent: 'center',
}));

const StyledAppsContainer = styled('div')(({ theme }) => ({
display: 'flex',
justifyContent: 'center',
gap: theme.spacing(4),
flexWrap: 'wrap',
}));

const StyledElementBox = styled('div')(({ theme }) => ({
borderRadius: theme.shape.borderRadiusMedium,
border: '1px solid',
borderColor: theme.palette.secondary.border,
backgroundColor: theme.palette.secondary.light,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: theme.spacing(2),
zIndex: 1,
'& > svg': {
width: theme.spacing(9),
height: theme.spacing(9),
},
}));

const StyledElementHeader = styled(Typography)(({ theme }) => ({
fontWeight: theme.fontWeight.bold,
}));

const StyledElementRPS = styled(Typography)(({ theme }) => ({
fontSize: theme.fontSizes.smallBody,
color: theme.palette.text.secondary,
}));

const StyledElementDescription = styled(Typography)(({ theme }) => ({
fontSize: theme.fontSizes.smallerBody,
color: theme.palette.text.secondary,
}));

const isRecent = (value: ResultValue) => {
const threshold = 600000; // ten minutes
return value[0] * 1000 > new Date().getTime() - threshold;
Expand Down Expand Up @@ -84,37 +115,71 @@ const toGraphData = (metrics?: RequestsPerSecondSchema) => {

export const NetworkOverview = () => {
usePageTitle('Network - Overview');
const { themeMode } = useThemeMode();
const theme = useTheme();
const { metrics } = useInstanceMetrics();
const apps = useMemo(() => {
return toGraphData(metrics);
}, [metrics]);

const graph = `
graph TD
subgraph _[ ]
direction BT
Unleash(<img src='${formatAssetPath(
themeMode === 'dark' ? logoWhiteIcon : logoIcon,
)}' width='72' height='72' class='unleash-logo'/><br/>Unleash)
${apps
.map(
({ label, reqs, type }, i) =>
`app-${i}("${label.replaceAll(
'"',
'&quot;',
)}") -- ${reqs} req/s<br>${type} --> Unleash`,
)
.join('\n')}
end
`;
if (apps.length === 0) {
return <Alert severity='warning'>No data available.</Alert>;
}

const mockApps = new Array(30).fill(1).map((_, i) => ({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is the mock apps intended?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops, you're right. I thought I had reverted this but it slipped by. Nice catch! Cleaned up in b2221f7

label: `app ${i + 1}`,
reqs: (Math.random() * 2).toFixed(2),
type: Math.random() > 0.5 ? 'frontend' : 'backend',
}));

return (
<ConditionallyRender
condition={apps.length === 0}
show={<Alert severity='warning'>No data available.</Alert>}
elseShow={<StyledMermaid>{graph}</StyledMermaid>}
/>
<div>
<ArcherContainer strokeColor={theme.palette.text.primary}>
<StyleUnleashContainer>
<ArcherElement id='unleash'>
<StyledElementBox>
<ThemeMode
darkmode={<LogoIconWhite />}
lightmode={<LogoIcon />}
/>
<Typography sx={{ marginTop: theme.spacing(1) }}>
Unleash
</Typography>
</StyledElementBox>
</ArcherElement>
</StyleUnleashContainer>

<StyledAppsContainer>
{mockApps.map(({ label, reqs, type }, i) => (
<ArcherElement
id={`${i}`}
relations={[
{
targetId: 'unleash',
targetAnchor: 'bottom',
sourceAnchor: 'top',
style: {
strokeColor:
theme.palette.secondary.border,
},
},
]}
>
<StyledElementBox>
<StyledElementHeader>
{label}
</StyledElementHeader>
<StyledElementRPS>
{reqs} req/s
</StyledElementRPS>
<StyledElementDescription>
{type} app
</StyledElementDescription>
</StyledElementBox>
</ArcherElement>
))}
</StyledAppsContainer>
</ArcherContainer>
</div>
);
};

Expand Down
59 changes: 0 additions & 59 deletions frontend/src/component/common/Mermaid/Mermaid.tsx
View file
Open in desktop

This file was deleted.

Loading
Loading