feat: health stats insights explanation (#7690)

Unleash · Jul 29, 2024 · 21ab80b · 21ab80b
1 parent 0fe0079
commit 21ab80b
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
diff --git a/frontend/src/component/insights/InsightsCharts.tsx b/frontend/src/component/insights/InsightsCharts.tsx
@@ -222,7 +222,14 @@ export const InsightsCharts: FC<IChartsProps> = ({
                                     healthy={summary.active}
                                     stale={summary.stale}
                                     potentiallyStale={summary.potentiallyStale}
-                                    title={<WidgetTitle title='Health' />}
+                                    title={
+                                        <WidgetTitle
+                                            title='Health'
+                                            tooltip={
+                                                'Percentage of flags that are not stale or potentially stale.'
+                                            }
+                                        />
+                                    }
                                 />
                             </StyledWidgetStats>
                             <StyledChartContainer>

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