From 21ab80b75334ac28d0b73fcd0cf4314bbba99840 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Mon, 29 Jul 2024 15:19:20 +0200
Subject: [PATCH] feat: health stats insights explanation (#7690)

---
 .../src/component/insights/InsightsCharts.tsx |  9 +++++-
 .../HealthStats/HealthStats.tsx               | 28 ++++++++++++++++---
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/frontend/src/component/insights/InsightsCharts.tsx b/frontend/src/component/insights/InsightsCharts.tsx
index 59e190479d..6384b0779f 100644
--- 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
index b5db90254d..3f71ca998c 100644
--- 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>
 );