Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-28 00:06:53 +01:00
Code Issues Projects Releases Wiki Activity

feat: health stats insights explanation (#7690)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2024-07-29 15:19:20 +02:00 committed by GitHub
parent 0fe0079053
commit 21ab80b753
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/component/insights/InsightsCharts.tsx
View File

@ -222,7 +222,14 @@ export const InsightsCharts: FC<IChartsProps> = ({
healthy={summary.active} healthy={summary.active}
stale={summary.stale} stale={summary.stale}
potentiallyStale={summary.potentiallyStale} potentiallyStale={summary.potentiallyStale}
title={<WidgetTitle title='Health' />} title={
<WidgetTitle
title='Health'
tooltip={
'Percentage of flags that are not stale or potentially stale.'
}
/>
}
/> />
</StyledWidgetStats> </StyledWidgetStats>
<StyledChartContainer> <StyledChartContainer>

28
frontend/src/component/insights/componentsStat/HealthStats/HealthStats.tsx
View File

@ -1,5 +1,5 @@
import type { FC, ReactNode } from 'react'; import type { FC, ReactNode } from 'react';
import { Box, Divider, styled } from '@mui/material'; import { Box, Divider, Link, styled } from '@mui/material';
import { ReactComponent as InstanceHealthIcon } from 'assets/icons/instance-health.svg'; import { ReactComponent as InstanceHealthIcon } from 'assets/icons/instance-health.svg';
interface IHealthStatsProps { interface IHealthStatsProps {
@ -16,6 +16,11 @@ const StyledStatsRow = styled(Box)(({ theme }) => ({
padding: theme.spacing(0.5, 2, 0.5, 2), padding: theme.spacing(0.5, 2, 0.5, 2),
})); }));
const ExplanationRow = styled(StyledStatsRow)(({ theme }) => ({
flex: 1,
justifyContent: 'flex-end',
}));
const StyledIcon = styled(InstanceHealthIcon)(({ theme }) => ({ const StyledIcon = styled(InstanceHealthIcon)(({ theme }) => ({
color: theme.palette.primary.light, color: theme.palette.primary.light,
marginRight: theme.spacing(1.5), marginRight: theme.spacing(1.5),
@ -34,6 +39,12 @@ const StyledSection = styled('div')(({ theme }) => ({
fontSize: theme.fontSizes.smallBody, fontSize: theme.fontSizes.smallBody,
})); }));
const FlagsSection = styled(StyledSection)(({ theme }) => ({
height: '100%',
display: 'flex',
flexDirection: 'column',
}));
const StyledHeader = styled('div')(() => ({ const StyledHeader = styled('div')(() => ({
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
@ -65,7 +76,7 @@ export const HealthStats: FC<IHealthStatsProps> = ({
</StyledStatsRow> </StyledStatsRow>
</StyledSection> </StyledSection>
<Divider /> <Divider />
<StyledSection> <FlagsSection>
<StyledStatsRow> <StyledStatsRow>
Healthy flags Healthy flags
<StyledValue>{healthy || 0}</StyledValue> <StyledValue>{healthy || 0}</StyledValue>
@ -75,9 +86,18 @@ export const HealthStats: FC<IHealthStatsProps> = ({
<StyledValue>{stale || 0}</StyledValue> <StyledValue>{stale || 0}</StyledValue>
</StyledStatsRow> </StyledStatsRow>
<StyledStatsRow> <StyledStatsRow>
Potencially stale flags Potentially stale flags
<StyledValue>{potentiallyStale || 0}</StyledValue> <StyledValue>{potentiallyStale || 0}</StyledValue>
</StyledStatsRow> </StyledStatsRow>
</StyledSection> <ExplanationRow>
<Link
href='https://docs.getunleash.io/reference/technical-debt'
target='_blank'
rel='noreferrer'
>
What affects instance health?
</Link>
</ExplanationRow>
</FlagsSection>
</div> </div>
); );