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: connection explanation box (#9598)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2025-03-24 13:21:29 +01:00 committed by GitHub
parent 34abb2669e
commit e018ee2f34
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 25 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/component/admin/network/NetworkTrafficUsage/BackendConnections.tsx
View File

@ -2,7 +2,13 @@ import type { FC } from 'react';
import { usePageTitle } from 'hooks/usePageTitle'; import { usePageTitle } from 'hooks/usePageTitle';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { Alert, Box } from '@mui/material'; import {
Alert,
Box,
styled,
Tooltip as TooltipComponent,
Typography,
} from '@mui/material';
import { PeriodSelector } from './PeriodSelector'; import { PeriodSelector } from './PeriodSelector';
import { Bar } from 'react-chartjs-2'; import { Bar } from 'react-chartjs-2';
import { customHighlightPlugin } from 'component/common/Chart/customHighlightPlugin'; import { customHighlightPlugin } from 'component/common/Chart/customHighlightPlugin';
@ -20,6 +26,13 @@ import {
} from 'chart.js'; } from 'chart.js';
import annotationPlugin from 'chartjs-plugin-annotation'; import annotationPlugin from 'chartjs-plugin-annotation';
import { useChartDataSelection } from './hooks/useChartDataSelection'; import { useChartDataSelection } from './hooks/useChartDataSelection';
import HelpOutline from '@mui/icons-material/HelpOutline';
const ConnectionExplanationBox = styled(Box)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
gap: theme.spacing(0.5),
}));
// TODO: consider renaming to Connection Consumption // TODO: consider renaming to Connection Consumption
export const BackendConnections: FC = () => { export const BackendConnections: FC = () => {
@ -41,7 +54,17 @@ export const BackendConnections: FC = () => {
<StyledBox> <StyledBox>
<TopRow> <TopRow>
<Box> <Box>
1 connection = 7200 backend SDK requests per day <Alert severity='info' icon={false}>
<ConnectionExplanationBox>
<Typography>
1 connection = 7200 backend SDK
requests per day
</Typography>
<TooltipComponent title='1 connection involves polling every 15 seconds and sending metrics every 60 seconds. This translates to 5 requests per minute, 300 requests per hour, and 7200 requests per day.'>
<HelpOutline />
</TooltipComponent>
</ConnectionExplanationBox>
</Alert>
</Box> </Box>
<PeriodSelector <PeriodSelector
selectedPeriod={chartDataSelection} selectedPeriod={chartDataSelection}