From 242f59ba4e27f9ac435fb63d721b89063640076b Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com> Date: Thu, 18 Jul 2024 15:48:47 +0200 Subject: [PATCH] New health stats component (#7620) New style for widget --- frontend/src/assets/icons/instance-health.svg | 5 + frontend/src/component/insights/Insights.tsx | 6 +- .../src/component/insights/InsightsCharts.tsx | 10 +- .../insights/LegacyInsightsCharts.tsx | 4 +- .../HealthStats/HealthStats.tsx | 370 ++++-------------- .../HealthStats/LegacyHealthStats.tsx | 320 +++++++++++++++ 6 files changed, 403 insertions(+), 312 deletions(-) create mode 100644 frontend/src/assets/icons/instance-health.svg create mode 100644 frontend/src/component/insights/componentsStat/HealthStats/LegacyHealthStats.tsx diff --git a/frontend/src/assets/icons/instance-health.svg b/frontend/src/assets/icons/instance-health.svg new file mode 100644 index 0000000000..4015415818 --- /dev/null +++ b/frontend/src/assets/icons/instance-health.svg @@ -0,0 +1,5 @@ + + + diff --git a/frontend/src/component/insights/Insights.tsx b/frontend/src/component/insights/Insights.tsx index 0c7839fffb..a543ab1a9b 100644 --- a/frontend/src/component/insights/Insights.tsx +++ b/frontend/src/component/insights/Insights.tsx @@ -38,7 +38,7 @@ const StickyWrapper = styled(Box, { position: 'sticky', top: 0, zIndex: theme.zIndex.sticky, - padding: scrolled ? theme.spacing(2, 0) : theme.spacing(0, 0, 2), + padding: scrolled ? theme.spacing(2, 0) : theme.spacing(2, 0, 2), background: theme.palette.background.application, transition: 'padding 0.3s ease', })); @@ -84,7 +84,7 @@ const LegacyInsights: FC = () => { return ( - + { /> } /> - + ({ width: '100%', })); -const StyledWidgetStats = styled(Box)<{ width?: number }>( - ({ theme, width = 300 }) => ({ +const StyledWidgetStats = styled(Box)<{ width?: number; padding?: number }>( + ({ theme, width = 300, padding = 3 }) => ({ display: 'flex', flexDirection: 'column', gap: theme.spacing(2), - padding: theme.spacing(3), + padding: theme.spacing(padding), minWidth: '100%', [theme.breakpoints.up('md')]: { minWidth: `${width}px`, @@ -216,13 +216,13 @@ export const InsightsCharts: FC = ({ show={ <> - - + } /> diff --git a/frontend/src/component/insights/LegacyInsightsCharts.tsx b/frontend/src/component/insights/LegacyInsightsCharts.tsx index ad3cb6a26c..c83d3a8299 100644 --- a/frontend/src/component/insights/LegacyInsightsCharts.tsx +++ b/frontend/src/component/insights/LegacyInsightsCharts.tsx @@ -8,7 +8,7 @@ import { UsersPerProjectChart } from './componentsChart/UsersPerProjectChart/Use import { FlagStats } from './componentsStat/FlagStats/FlagStats'; import { FlagsChart } from './componentsChart/FlagsChart/FlagsChart'; import { FlagsProjectChart } from './componentsChart/FlagsProjectChart/FlagsProjectChart'; -import { HealthStats } from './componentsStat/HealthStats/HealthStats'; +import { LegacyHealthStats } from './componentsStat/HealthStats/LegacyHealthStats'; import { ProjectHealthChart } from './componentsChart/ProjectHealthChart/ProjectHealthChart'; import { TimeToProduction } from './componentsStat/TimeToProduction/TimeToProduction'; import { TimeToProductionChart } from './componentsChart/TimeToProductionChart/TimeToProductionChart'; @@ -181,7 +181,7 @@ export const LegacyInsightsCharts: VFC = ({ show={ <> - ({ - maxWidth: '250px', - margin: '0 auto', +const StyledStatsRow = styled(Box)(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + padding: theme.spacing(0.5, 2, 0.5, 2), +})); + +const StyledIcon = styled(InstanceHealthIcon)(({ theme }) => ({ + color: theme.palette.primary.light, + marginRight: theme.spacing(1.5), +})); + +const StyledValue = styled(Box)(({ theme }) => ({ + display: 'block', + marginLeft: 'auto', + color: theme.palette.primary.main, + fontWeight: theme.typography.fontWeightBold, + fontSize: theme.fontSizes.mediumHeader, +})); + +const StyledSection = styled('div')(({ theme }) => ({ + padding: theme.spacing(3), + fontSize: theme.fontSizes.smallBody, +})); + +const StyledHeader = styled('div')(() => ({ + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', +})); + +const StyledMainValue = styled(StyledValue)(({ theme }) => ({ + fontSize: theme.fontSizes.largeHeader, })); export const HealthStats: FC = ({ @@ -19,299 +49,35 @@ export const HealthStats: FC = ({ healthy, stale, potentiallyStale, -}) => { - const { themeMode } = useThemeMode(); - const isDark = themeMode === 'dark'; - const theme = useTheme(); - - return ( - - Health Stats - - - - - - {value !== undefined ? `${value}%` : 'N/A'} - - - - - - {healthy || 0} - - - Healthy - - - - - - {stale || 0} - - - Stale - - - - - - {potentiallyStale || 0} - - - - Potentially - - - stale - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; + title, +}) => ( +
+ + {title} + {/* TODO: trend */} + + + + + + Instance health + {`${value}%`} + + + + + + Healthy flags + {healthy} + + + Stale flags + {stale} + + + Potencially stale flags + {potentiallyStale} + + +
+); diff --git a/frontend/src/component/insights/componentsStat/HealthStats/LegacyHealthStats.tsx b/frontend/src/component/insights/componentsStat/HealthStats/LegacyHealthStats.tsx new file mode 100644 index 0000000000..962057d52e --- /dev/null +++ b/frontend/src/component/insights/componentsStat/HealthStats/LegacyHealthStats.tsx @@ -0,0 +1,320 @@ +import type { FC } from 'react'; +import { useThemeMode } from 'hooks/useThemeMode'; +import { styled, useTheme } from '@mui/material'; + +interface IHealthStatsProps { + value?: string | number; + healthy: number; + stale: number; + potentiallyStale: number; +} + +const StyledSvg = styled('svg')(() => ({ + maxWidth: '250px', + margin: '0 auto', +})); + +/** + * @deprecated remove with insightsV2 flag + */ +export const LegacyHealthStats: FC = ({ + value, + healthy, + stale, + potentiallyStale, +}) => { + const { themeMode } = useThemeMode(); + const isDark = themeMode === 'dark'; + const theme = useTheme(); + + return ( + + Health Stats + + + + + + {value !== undefined ? `${value}%` : 'N/A'} + + + + + + {healthy || 0} + + + Healthy + + + + + + {stale || 0} + + + Stale + + + + + + {potentiallyStale || 0} + + + + Potentially + + + stale + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +};