Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-20 00:08:02 +01:00
Code Issues Projects Releases Wiki Activity

feat: info icon instances for 2 days (#6373)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2024-02-28 11:22:31 +01:00 committed by GitHub
parent ba2b90af42
commit 9a12257568
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 38 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/component/application/ApplicationChart.tsx
View File

@ -6,6 +6,7 @@ import { FC, useLayoutEffect, useRef, useState } from 'react';
import { ApplicationOverviewSchema } from '../../openapi';
import { useRequiredPathParam } from '../../hooks/useRequiredPathParam';
import { WarningAmberRounded } from '@mui/icons-material';
import { HelpIcon } from '../common/HelpIcon/HelpIcon';
const StyledTable = styled('table')(({ theme }) => ({
fontSize: theme.fontSizes.smallerBody,
@ -196,7 +197,18 @@ export const ApplicationChart = ({ data }: IApplicationChartProps) => {
<StyledTable>
<tbody>
<tr>
<StyledCell>Instances:</StyledCell>
<StyledCell
sx={{ display: 'flex' }}
>
Instances:{' '}
<HelpIcon
size={
theme.fontSizes
.smallBody
}
tooltip='Active instances in the last 2 days'
/>
</StyledCell>
<StyledCell>
{environment.instanceCount}
</StyledCell>

46
frontend/src/component/common/HelpIcon/HelpIcon.tsx
View File

@ -2,31 +2,34 @@ import { styled, Tooltip, TooltipProps } from '@mui/material';
import { HelpOutline } from '@mui/icons-material';
import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
const StyledContainer = styled('span')(({ theme }) => ({
display: 'inline-grid',
alignItems: 'center',
outline: 0,
cursor: 'pointer',
'&:is(:focus-visible, :active) > *, &:hover > *': {
outlineStyle: 'solid',
outlineWidth: 2,
outlineOffset: 0,
outlineColor: theme.palette.primary.main,
borderRadius: '100%',
color: theme.palette.primary.main,
},
'& svg': {
fontSize: theme.fontSizes.mainHeader,
color: theme.palette.action.active,
marginLeft: theme.spacing(0.5),
},
}));
const StyledContainer = styled('span')<{ size: string | undefined }>(
({ theme, size }) => ({
display: 'inline-grid',
alignItems: 'center',
outline: 0,
cursor: 'pointer',
'&:is(:focus-visible, :active) > *, &:hover > *': {
outlineStyle: 'solid',
outlineWidth: 2,
outlineOffset: 0,
outlineColor: theme.palette.primary.main,
borderRadius: '100%',
color: theme.palette.primary.main,
},
'& svg': {
fontSize: size || theme.fontSizes.mainHeader,
color: theme.palette.action.active,
marginLeft: theme.spacing(0.5),
},
}),
);
interface IHelpIconProps {
tooltip: React.ReactNode;
htmlTooltip?: boolean;
placement?: TooltipProps['placement'];
children?: React.ReactNode;
size?: string;
}
export const HelpIcon = ({
@ -34,11 +37,12 @@ export const HelpIcon = ({
htmlTooltip,
placement,
children,
size,
}: IHelpIconProps) => {
if (htmlTooltip) {
return (
<HtmlTooltip title={tooltip} placement={placement} arrow>
<StyledContainer tabIndex={0} aria-label='Help'>
<StyledContainer size={size} tabIndex={0} aria-label='Help'>
{children ?? <HelpOutline />}
</StyledContainer>
</HtmlTooltip>
@ -47,7 +51,7 @@ export const HelpIcon = ({
return (
<Tooltip title={tooltip} placement={placement} arrow>
<StyledContainer tabIndex={0} aria-label='Help'>
<StyledContainer size={size} tabIndex={0} aria-label='Help'>
{children ?? <HelpOutline />}
</StyledContainer>
</Tooltip>