Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-31 00:16:47 +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 { ApplicationOverviewSchema } from '../../openapi';
import { useRequiredPathParam } from '../../hooks/useRequiredPathParam'; import { useRequiredPathParam } from '../../hooks/useRequiredPathParam';
import { WarningAmberRounded } from '@mui/icons-material'; import { WarningAmberRounded } from '@mui/icons-material';
import { HelpIcon } from '../common/HelpIcon/HelpIcon';
const StyledTable = styled('table')(({ theme }) => ({ const StyledTable = styled('table')(({ theme }) => ({
fontSize: theme.fontSizes.smallerBody, fontSize: theme.fontSizes.smallerBody,
@ -196,7 +197,18 @@ export const ApplicationChart = ({ data }: IApplicationChartProps) => {
<StyledTable> <StyledTable>
<tbody> <tbody>
<tr> <tr>
<StyledCell>Instances:</StyledCell> <StyledCell
sx={{ display: 'flex' }}
>
Instances:{' '}
<HelpIcon
size={
theme.fontSizes
.smallBody
}
tooltip='Active instances in the last 2 days'
/>
</StyledCell>
<StyledCell> <StyledCell>
{environment.instanceCount} {environment.instanceCount}
</StyledCell> </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 { HelpOutline } from '@mui/icons-material';
import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip'; import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
const StyledContainer = styled('span')(({ theme }) => ({ const StyledContainer = styled('span')<{ size: string | undefined }>(
display: 'inline-grid', ({ theme, size }) => ({
alignItems: 'center', display: 'inline-grid',
outline: 0, alignItems: 'center',
cursor: 'pointer', outline: 0,
'&:is(:focus-visible, :active) > *, &:hover > *': { cursor: 'pointer',
outlineStyle: 'solid', '&:is(:focus-visible, :active) > *, &:hover > *': {
outlineWidth: 2, outlineStyle: 'solid',
outlineOffset: 0, outlineWidth: 2,
outlineColor: theme.palette.primary.main, outlineOffset: 0,
borderRadius: '100%', outlineColor: theme.palette.primary.main,
color: theme.palette.primary.main, borderRadius: '100%',
}, color: theme.palette.primary.main,
'& svg': { },
fontSize: theme.fontSizes.mainHeader, '& svg': {
color: theme.palette.action.active, fontSize: size || theme.fontSizes.mainHeader,
marginLeft: theme.spacing(0.5), color: theme.palette.action.active,
}, marginLeft: theme.spacing(0.5),
})); },
}),
);
interface IHelpIconProps { interface IHelpIconProps {
tooltip: React.ReactNode; tooltip: React.ReactNode;
htmlTooltip?: boolean; htmlTooltip?: boolean;
placement?: TooltipProps['placement']; placement?: TooltipProps['placement'];
children?: React.ReactNode; children?: React.ReactNode;
size?: string;
} }
export const HelpIcon = ({ export const HelpIcon = ({
@ -34,11 +37,12 @@ export const HelpIcon = ({
htmlTooltip, htmlTooltip,
placement, placement,
children, children,
size,
}: IHelpIconProps) => { }: IHelpIconProps) => {
if (htmlTooltip) { if (htmlTooltip) {
return ( return (
<HtmlTooltip title={tooltip} placement={placement} arrow> <HtmlTooltip title={tooltip} placement={placement} arrow>
<StyledContainer tabIndex={0} aria-label='Help'> <StyledContainer size={size} tabIndex={0} aria-label='Help'>
{children ?? <HelpOutline />} {children ?? <HelpOutline />}
</StyledContainer> </StyledContainer>
</HtmlTooltip> </HtmlTooltip>
@ -47,7 +51,7 @@ export const HelpIcon = ({
return ( return (
<Tooltip title={tooltip} placement={placement} arrow> <Tooltip title={tooltip} placement={placement} arrow>
<StyledContainer tabIndex={0} aria-label='Help'> <StyledContainer size={size} tabIndex={0} aria-label='Help'>
{children ?? <HelpOutline />} {children ?? <HelpOutline />}
</StyledContainer> </StyledContainer>
</Tooltip> </Tooltip>