Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

New health stats component (#7620)

Browse Source 
New style for widget
This commit is contained in:
Tymoteusz Czech 2024-07-18 15:48:47 +02:00 committed by GitHub
parent d1959dd0e2
commit 242f59ba4e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 403 additions and 312 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/assets/icons/instance-health.svg Normal file
View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path
d="M5 20V15H0V5H5V0H15V5H20V15H15V20H5ZM2 9H7C7.16667 9 7.325 9.04167 7.475 9.125C7.625 9.20833 7.74167 9.31667 7.825 9.45L8.7 10.75L10.05 6.7C10.1167 6.5 10.2375 6.33333 10.4125 6.2C10.5875 6.06667 10.7833 6 11 6C11.1667 6 11.325 6.04167 11.475 6.125C11.625 6.20833 11.7417 6.31667 11.825 6.45L13.525 9H18V7H13V2H7V7H2V9ZM7 18H13V13H18V11H13C12.8333 11 12.675 10.9583 12.525 10.875C12.375 10.7917 12.25 10.6833 12.15 10.55L11.3 9.25L9.95 13.3C9.88333 13.5 9.75833 13.6667 9.575 13.8C9.39167 13.9333 9.19167 14 8.975 14C8.80833 14 8.65 13.9583 8.5 13.875C8.35 13.7917 8.23333 13.6833 8.15 13.55L6.45 11H2V13H7V18Z"
fill="currentColor" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 767 B

6
frontend/src/component/insights/Insights.tsx
View File

@ -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 (
<StyledWrapper>
<StickyContainer>
<StickyWrapper>
<InsightsHeader
actions={
<StyledProjectSelect
@ -95,7 +95,7 @@ const LegacyInsights: FC = () => {
/>
}
/>
</StickyContainer>
</StickyWrapper>
<LegacyInsightsCharts
loading={loading}
projects={projects}

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

@ -74,12 +74,12 @@ const StyledWidgetContent = styled(Box)(({ theme }) => ({
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<IChartsProps> = ({
show={
<>
<StyledWidget>
<StyledWidgetStats width={288}>
<WidgetTitle title='Health' />
<StyledWidgetStats width={350} padding={0}>
<HealthStats
value={summary.averageHealth}
healthy={summary.active}
stale={summary.stale}
potentiallyStale={summary.potentiallyStale}
title={<WidgetTitle title='Health' />}
/>
</StyledWidgetStats>
<StyledChartContainer>

4
frontend/src/component/insights/LegacyInsightsCharts.tsx
View File

@ -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<IChartsProps> = ({
show={
<>
<Widget {...chartInfo.averageHealth}>
<HealthStats
<LegacyHealthStats
value={summary.averageHealth}
healthy={summary.active}
stale={summary.stale}

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

@ -1,17 +1,47 @@
import type { FC } from 'react';
import { useThemeMode } from 'hooks/useThemeMode';
import { styled, useTheme } from '@mui/material';
import type { FC, ReactNode } from 'react';
import { Box, Divider, styled } from '@mui/material';
import { ReactComponent as InstanceHealthIcon } from 'assets/icons/instance-health.svg';
interface IHealthStatsProps {
value?: string | number;
healthy: number;
stale: number;
potentiallyStale: number;
title?: ReactNode;
}
const StyledSvg = styled('svg')(() => ({
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<IHealthStatsProps> = ({
@ -19,299 +49,35 @@ export const HealthStats: FC<IHealthStatsProps> = ({
healthy,
stale,
potentiallyStale,
}) => {
const { themeMode } = useThemeMode();
const isDark = themeMode === 'dark';
const theme = useTheme();
return (
<StyledSvg
viewBox='0 0 268 281'
fill='none'
xmlns='http://www.w3.org/2000/svg'
>
<title>Health Stats</title>
<g filter={!isDark ? 'url(#filter0_d_22043_268578)' : undefined}>
<circle
cx='134'
cy='129'
r='97'
fill={theme.palette.charts.health.mainCircleBackground}
/>
</g>
<circle
cx='134'
cy='129'
r='121'
stroke={theme.palette.charts.health.orbit}
strokeWidth='3'
/>
<text
x={134}
y={149}
textAnchor='middle'
fontSize={48}
fill={theme.palette.charts.health.title}
fontWeight={700}
>
{value !== undefined ? `${value}%` : 'N/A'}
</text>
<g filter={!isDark ? 'url(#filter1_d_22043_268578)' : undefined}>
<circle
cx='206'
cy='58'
r='50'
fill={theme.palette.charts.health.circles}
/>
</g>
<text
x={206}
y={56}
fill={theme.palette.charts.health.healthy}
fontWeight={700}
fontSize={20}
textAnchor='middle'
>
{healthy || 0}
</text>
<text
x={206}
y={72}
fill={theme.palette.charts.health.text}
fontSize={13}
textAnchor='middle'
>
Healthy
</text>
<g filter={!isDark ? 'url(#filter2_d_22043_268578)' : undefined}>
<circle
cx='53'
cy='66'
r='41'
fill={theme.palette.charts.health.circles}
/>
</g>
<text
x={53}
y={65}
fill={theme.palette.charts.health.stale}
fontWeight={700}
fontSize={20}
textAnchor='middle'
>
{stale || 0}
</text>
<text
x={53}
y={81}
fill={theme.palette.charts.health.text}
fontSize={13}
textAnchor='middle'
>
Stale
</text>
<g filter={!isDark ? 'url(#filter3_d_22043_268578)' : undefined}>
<circle
cx='144'
cy='224'
r='41'
fill={theme.palette.charts.health.circles}
/>
</g>
<text
x={144}
y={216}
fill={theme.palette.charts.health.potentiallyStale}
fontWeight={700}
fontSize={20}
textAnchor='middle'
>
{potentiallyStale || 0}
</text>
<text
x={144}
y={232}
fill={theme.palette.charts.health.text}
fontSize={13}
textAnchor='middle'
>
<tspan x={144} dy='0'>
Potentially
</tspan>
<tspan x={144} dy='1.2em'>
stale
</tspan>
</text>
<path
d='M99.5 247.275C99.5 251.693 103.082 255.275 107.5 255.275C111.918 255.275 115.5 251.693 115.5 247.275C115.5 242.857 111.918 239.275 107.5 239.275C103.082 239.275 99.5 242.857 99.5 247.275ZM10.8811 92C10.8811 96.4183 14.4629 100 18.8811 100C23.2994 100 26.8811 96.4183 26.8811 92C26.8811 87.5817 23.2994 84 18.8811 84C14.4629 84 10.8811 87.5817 10.8811 92ZM107.827 245.811C54.4151 233.886 14.5 186.258 14.5 129.325H11.5C11.5 187.696 52.4223 236.515 107.173 248.739L107.827 245.811ZM14.5 129.325C14.5 116.458 16.5379 104.07 20.3078 92.4634L17.4545 91.5366C13.5886 103.439 11.5 116.14 11.5 129.325H14.5Z'
fill='url(#paint0_linear_22043_268578)'
/>
<defs>
<filter
id='filter0_d_22043_268578'
x='15'
y='13'
width='238'
height='238'
filterUnits='userSpaceOnUse'
colorInterpolationFilters='sRGB'
>
<feFlood floodOpacity='0' result='BackgroundImageFix' />
<feColorMatrix
in='SourceAlpha'
type='matrix'
values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'
result='hardAlpha'
/>
<feMorphology
radius='2'
operator='dilate'
in='SourceAlpha'
result='effect1_dropShadow_22043_268578'
/>
<feOffset dy='3' />
<feGaussianBlur stdDeviation='10' />
<feComposite in2='hardAlpha' operator='out' />
<feColorMatrix
type='matrix'
values='0 0 0 0 0.505882 0 0 0 0 0.478431 0 0 0 0 0.996078 0 0 0 0.36 0'
/>
<feBlend
mode='normal'
in2='BackgroundImageFix'
result='effect1_dropShadow_22043_268578'
/>
<feBlend
mode='normal'
in='SourceGraphic'
in2='effect1_dropShadow_22043_268578'
result='shape'
/>
</filter>
<filter
id='filter1_d_22043_268578'
x='144'
y='0'
width='124'
height='124'
filterUnits='userSpaceOnUse'
colorInterpolationFilters='sRGB'
>
<feFlood floodOpacity='0' result='BackgroundImageFix' />
<feColorMatrix
in='SourceAlpha'
type='matrix'
values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'
result='hardAlpha'
/>
<feOffset dy='4' />
<feGaussianBlur stdDeviation='6' />
<feComposite in2='hardAlpha' operator='out' />
<feColorMatrix
type='matrix'
values='0 0 0 0 0.380392 0 0 0 0 0.356863 0 0 0 0 0.760784 0 0 0 0.16 0'
/>
<feBlend
mode='normal'
in2='BackgroundImageFix'
result='effect1_dropShadow_22043_268578'
/>
<feBlend
mode='normal'
in='SourceGraphic'
in2='effect1_dropShadow_22043_268578'
result='shape'
/>
</filter>
<filter
id='filter2_d_22043_268578'
x='0'
y='17'
width='106'
height='106'
filterUnits='userSpaceOnUse'
colorInterpolationFilters='sRGB'
>
<feFlood floodOpacity='0' result='BackgroundImageFix' />
<feColorMatrix
in='SourceAlpha'
type='matrix'
values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'
result='hardAlpha'
/>
<feOffset dy='4' />
<feGaussianBlur stdDeviation='6' />
<feComposite in2='hardAlpha' operator='out' />
<feColorMatrix
type='matrix'
values='0 0 0 0 0.380392 0 0 0 0 0.356863 0 0 0 0 0.760784 0 0 0 0.16 0'
/>
<feBlend
mode='normal'
in2='BackgroundImageFix'
result='effect1_dropShadow_22043_268578'
/>
<feBlend
mode='normal'
in='SourceGraphic'
in2='effect1_dropShadow_22043_268578'
result='shape'
/>
</filter>
<filter
id='filter3_d_22043_268578'
x='91'
y='175'
width='106'
height='106'
filterUnits='userSpaceOnUse'
colorInterpolationFilters='sRGB'
>
<feFlood floodOpacity='0' result='BackgroundImageFix' />
<feColorMatrix
in='SourceAlpha'
type='matrix'
values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'
result='hardAlpha'
/>
<feOffset dy='4' />
<feGaussianBlur stdDeviation='6' />
<feComposite in2='hardAlpha' operator='out' />
<feColorMatrix
type='matrix'
values='0 0 0 0 0.380392 0 0 0 0 0.356863 0 0 0 0 0.760784 0 0 0 0.16 0'
/>
<feBlend
mode='normal'
in2='BackgroundImageFix'
result='effect1_dropShadow_22043_268578'
/>
<feBlend
mode='normal'
in='SourceGraphic'
in2='effect1_dropShadow_22043_268578'
result='shape'
/>
</filter>
<linearGradient
id='paint0_linear_22043_268578'
x1='64.2447'
y1='87'
x2='64.2447'
y2='249'
gradientUnits='userSpaceOnUse'
>
<stop
stopColor={theme.palette.charts.health.gradientStale}
/>
<stop
offset='1'
stopColor={
theme.palette.charts.health.gradientPotentiallyStale
}
/>
</linearGradient>
</defs>
</StyledSvg>
);
};
title,
}) => (
<div>
<StyledHeader>
<StyledSection>{title}</StyledSection>
<StyledSection>{/* TODO: trend */}</StyledSection>
</StyledHeader>
<Divider />
<StyledSection>
<StyledStatsRow>
<StyledIcon />
Instance health
<StyledMainValue>{`${value}%`}</StyledMainValue>
</StyledStatsRow>
</StyledSection>
<Divider />
<StyledSection>
<StyledStatsRow>
Healthy flags
<StyledValue>{healthy}</StyledValue>
</StyledStatsRow>
<StyledStatsRow>
Stale flags
<StyledValue>{stale}</StyledValue>
</StyledStatsRow>
<StyledStatsRow>
Potencially stale flags
<StyledValue>{potentiallyStale}</StyledValue>
</StyledStatsRow>
</StyledSection>
</div>
);

320
frontend/src/component/insights/componentsStat/HealthStats/LegacyHealthStats.tsx Normal file
View File

@ -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<IHealthStatsProps> = ({
value,
healthy,
stale,
potentiallyStale,
}) => {
const { themeMode } = useThemeMode();
const isDark = themeMode === 'dark';
const theme = useTheme();
return (
<StyledSvg
viewBox='0 0 268 281'
fill='none'
xmlns='http://www.w3.org/2000/svg'
>
<title>Health Stats</title>
<g filter={!isDark ? 'url(#filter0_d_22043_268578)' : undefined}>
<circle
cx='134'
cy='129'
r='97'
fill={theme.palette.charts.health.mainCircleBackground}
/>
</g>
<circle
cx='134'
cy='129'
r='121'
stroke={theme.palette.charts.health.orbit}
strokeWidth='3'
/>
<text
x={134}
y={149}
textAnchor='middle'
fontSize={48}
fill={theme.palette.charts.health.title}
fontWeight={700}
>
{value !== undefined ? `${value}%` : 'N/A'}
</text>
<g filter={!isDark ? 'url(#filter1_d_22043_268578)' : undefined}>
<circle
cx='206'
cy='58'
r='50'
fill={theme.palette.charts.health.circles}
/>
</g>
<text
x={206}
y={56}
fill={theme.palette.charts.health.healthy}
fontWeight={700}
fontSize={20}
textAnchor='middle'
>
{healthy || 0}
</text>
<text
x={206}
y={72}
fill={theme.palette.charts.health.text}
fontSize={13}
textAnchor='middle'
>
Healthy
</text>
<g filter={!isDark ? 'url(#filter2_d_22043_268578)' : undefined}>
<circle
cx='53'
cy='66'
r='41'
fill={theme.palette.charts.health.circles}
/>
</g>
<text
x={53}
y={65}
fill={theme.palette.charts.health.stale}
fontWeight={700}
fontSize={20}
textAnchor='middle'
>
{stale || 0}
</text>
<text
x={53}
y={81}
fill={theme.palette.charts.health.text}
fontSize={13}
textAnchor='middle'
>
Stale
</text>
<g filter={!isDark ? 'url(#filter3_d_22043_268578)' : undefined}>
<circle
cx='144'
cy='224'
r='41'
fill={theme.palette.charts.health.circles}
/>
</g>
<text
x={144}
y={216}
fill={theme.palette.charts.health.potentiallyStale}
fontWeight={700}
fontSize={20}
textAnchor='middle'
>
{potentiallyStale || 0}
</text>
<text
x={144}
y={232}
fill={theme.palette.charts.health.text}
fontSize={13}
textAnchor='middle'
>
<tspan x={144} dy='0'>
Potentially
</tspan>
<tspan x={144} dy='1.2em'>
stale
</tspan>
</text>
<path
d='M99.5 247.275C99.5 251.693 103.082 255.275 107.5 255.275C111.918 255.275 115.5 251.693 115.5 247.275C115.5 242.857 111.918 239.275 107.5 239.275C103.082 239.275 99.5 242.857 99.5 247.275ZM10.8811 92C10.8811 96.4183 14.4629 100 18.8811 100C23.2994 100 26.8811 96.4183 26.8811 92C26.8811 87.5817 23.2994 84 18.8811 84C14.4629 84 10.8811 87.5817 10.8811 92ZM107.827 245.811C54.4151 233.886 14.5 186.258 14.5 129.325H11.5C11.5 187.696 52.4223 236.515 107.173 248.739L107.827 245.811ZM14.5 129.325C14.5 116.458 16.5379 104.07 20.3078 92.4634L17.4545 91.5366C13.5886 103.439 11.5 116.14 11.5 129.325H14.5Z'
fill='url(#paint0_linear_22043_268578)'
/>
<defs>
<filter
id='filter0_d_22043_268578'
x='15'
y='13'
width='238'
height='238'
filterUnits='userSpaceOnUse'
colorInterpolationFilters='sRGB'
>
<feFlood floodOpacity='0' result='BackgroundImageFix' />
<feColorMatrix
in='SourceAlpha'
type='matrix'
values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'
result='hardAlpha'
/>
<feMorphology
radius='2'
operator='dilate'
in='SourceAlpha'
result='effect1_dropShadow_22043_268578'
/>
<feOffset dy='3' />
<feGaussianBlur stdDeviation='10' />
<feComposite in2='hardAlpha' operator='out' />
<feColorMatrix
type='matrix'
values='0 0 0 0 0.505882 0 0 0 0 0.478431 0 0 0 0 0.996078 0 0 0 0.36 0'
/>
<feBlend
mode='normal'
in2='BackgroundImageFix'
result='effect1_dropShadow_22043_268578'
/>
<feBlend
mode='normal'
in='SourceGraphic'
in2='effect1_dropShadow_22043_268578'
result='shape'
/>
</filter>
<filter
id='filter1_d_22043_268578'
x='144'
y='0'
width='124'
height='124'
filterUnits='userSpaceOnUse'
colorInterpolationFilters='sRGB'
>
<feFlood floodOpacity='0' result='BackgroundImageFix' />
<feColorMatrix
in='SourceAlpha'
type='matrix'
values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'
result='hardAlpha'
/>
<feOffset dy='4' />
<feGaussianBlur stdDeviation='6' />
<feComposite in2='hardAlpha' operator='out' />
<feColorMatrix
type='matrix'
values='0 0 0 0 0.380392 0 0 0 0 0.356863 0 0 0 0 0.760784 0 0 0 0.16 0'
/>
<feBlend
mode='normal'
in2='BackgroundImageFix'
result='effect1_dropShadow_22043_268578'
/>
<feBlend
mode='normal'
in='SourceGraphic'
in2='effect1_dropShadow_22043_268578'
result='shape'
/>
</filter>
<filter
id='filter2_d_22043_268578'
x='0'
y='17'
width='106'
height='106'
filterUnits='userSpaceOnUse'
colorInterpolationFilters='sRGB'
>
<feFlood floodOpacity='0' result='BackgroundImageFix' />
<feColorMatrix
in='SourceAlpha'
type='matrix'
values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'
result='hardAlpha'
/>
<feOffset dy='4' />
<feGaussianBlur stdDeviation='6' />
<feComposite in2='hardAlpha' operator='out' />
<feColorMatrix
type='matrix'
values='0 0 0 0 0.380392 0 0 0 0 0.356863 0 0 0 0 0.760784 0 0 0 0.16 0'
/>
<feBlend
mode='normal'
in2='BackgroundImageFix'
result='effect1_dropShadow_22043_268578'
/>
<feBlend
mode='normal'
in='SourceGraphic'
in2='effect1_dropShadow_22043_268578'
result='shape'
/>
</filter>
<filter
id='filter3_d_22043_268578'
x='91'
y='175'
width='106'
height='106'
filterUnits='userSpaceOnUse'
colorInterpolationFilters='sRGB'
>
<feFlood floodOpacity='0' result='BackgroundImageFix' />
<feColorMatrix
in='SourceAlpha'
type='matrix'
values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'
result='hardAlpha'
/>
<feOffset dy='4' />
<feGaussianBlur stdDeviation='6' />
<feComposite in2='hardAlpha' operator='out' />
<feColorMatrix
type='matrix'
values='0 0 0 0 0.380392 0 0 0 0 0.356863 0 0 0 0 0.760784 0 0 0 0.16 0'
/>
<feBlend
mode='normal'
in2='BackgroundImageFix'
result='effect1_dropShadow_22043_268578'
/>
<feBlend
mode='normal'
in='SourceGraphic'
in2='effect1_dropShadow_22043_268578'
result='shape'
/>
</filter>
<linearGradient
id='paint0_linear_22043_268578'
x1='64.2447'
y1='87'
x2='64.2447'
y2='249'
gradientUnits='userSpaceOnUse'
>
<stop
stopColor={theme.palette.charts.health.gradientStale}
/>
<stop
offset='1'
stopColor={
theme.palette.charts.health.gradientPotentiallyStale
}
/>
</linearGradient>
</defs>
</StyledSvg>
);
};