diff --git a/frontend/src/component/admin/network/NetworkTrafficUsage/BackendConnections.tsx b/frontend/src/component/admin/network/NetworkTrafficUsage/BackendConnections.tsx index 675a7929ed..195b94947b 100644 --- a/frontend/src/component/admin/network/NetworkTrafficUsage/BackendConnections.tsx +++ b/frontend/src/component/admin/network/NetworkTrafficUsage/BackendConnections.tsx @@ -2,7 +2,13 @@ import type { FC } from 'react'; import { usePageTitle } from 'hooks/usePageTitle'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; 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 { Bar } from 'react-chartjs-2'; import { customHighlightPlugin } from 'component/common/Chart/customHighlightPlugin'; @@ -20,6 +26,13 @@ import { } from 'chart.js'; import annotationPlugin from 'chartjs-plugin-annotation'; 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 export const BackendConnections: FC = () => { @@ -41,7 +54,17 @@ export const BackendConnections: FC = () => { - 1 connection = 7200 backend SDK requests per day + + + + 1 connection = 7200 backend SDK + requests per day + + + + + +