Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-04-19 01:17:18 +02:00
Code Issues Projects Releases Wiki Activity

chore: remove graph, update health message ()

Browse Source 
Removes the graph and updates the box to show a health message based on
current health if you don't have any trends:

With trends:

![image](https://github.com/user-attachments/assets/5c7a2102-207c-431f-9918-93a910480d48)

Without:

![image](https://github.com/user-attachments/assets/311427ba-38e9-4d49-9c10-2c932982d4d4)
This commit is contained in:
Thomas Heartman 2024-10-10 09:22:45 +02:00 committed by GitHub
parent 2ae9589e67
commit e6365d8bce
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 48 additions and 46 deletions
frontend/src/component/personalDashboard
PersonalDashboard.test.tsxProjectSetupComplete.tsx

4
frontend/src/component/personalDashboard/PersonalDashboard.test.tsx
View File

@ -142,10 +142,6 @@ test('Render personal dashboard for a long running project', async () => {
await screen.findByText('70%'); // avg health past window await screen.findByText('70%'); // avg health past window
await screen.findByText('someone created a flag'); await screen.findByText('someone created a flag');
await screen.findByText('Member'); await screen.findByText('Member');
await screen.findByText('81%'); // current health score
await screen.findByText('12 feature flags'); // active flags
await screen.findByText('13 feature flags'); // stale flags
await screen.findByText('14 feature flags'); // potentially stale flags
await screen.findByText('myFlag'); await screen.findByText('myFlag');
await screen.findByText('production'); await screen.findByText('production');
await screen.findByText('Last 48 hours'); await screen.findByText('Last 48 hours');

90
frontend/src/component/personalDashboard/ProjectSetupComplete.tsx
View File

@ -3,8 +3,6 @@ import type { FC } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import Lightbulb from '@mui/icons-material/LightbulbOutlined'; import Lightbulb from '@mui/icons-material/LightbulbOutlined';
import type { PersonalDashboardProjectDetailsSchemaInsights } from '../../openapi'; import type { PersonalDashboardProjectDetailsSchemaInsights } from '../../openapi';
import { ProjectHealthChart } from 'component/project/Project/ProjectInsights/ProjectHealth/ProjectHealthChart';
import { FlagCounts } from '../project/Project/ProjectInsights/ProjectHealth/FlagCounts';
const TitleContainer = styled('div')(({ theme }) => ({ const TitleContainer = styled('div')(({ theme }) => ({
display: 'flex', display: 'flex',
@ -57,11 +55,11 @@ const ConnectedSdkProject: FC<{ project: string }> = ({ project }) => {
); );
}; };
type HeathTrend = 'consistent' | 'improved' | 'declined' | 'unknown'; type HealthTrend = 'consistent' | 'improved' | 'declined' | 'unknown';
const determineProjectHealthTrend = ( const determineProjectHealthTrend = (
insights: PersonalDashboardProjectDetailsSchemaInsights, insights: PersonalDashboardProjectDetailsSchemaInsights,
): HeathTrend => { ): HealthTrend => {
const { avgHealthCurrentWindow, avgHealthPastWindow } = insights; const { avgHealthCurrentWindow, avgHealthPastWindow } = insights;
if (avgHealthCurrentWindow === null || avgHealthPastWindow === null) { if (avgHealthCurrentWindow === null || avgHealthPastWindow === null) {
@ -80,11 +78,11 @@ const determineProjectHealthTrend = (
}; };
const ProjectHealthMessage: FC<{ const ProjectHealthMessage: FC<{
trend: HeathTrend; trend: HealthTrend;
insights: PersonalDashboardProjectDetailsSchemaInsights; insights: PersonalDashboardProjectDetailsSchemaInsights;
project: string; project: string;
}> = ({ trend, insights, project }) => { }> = ({ trend, insights, project }) => {
const { avgHealthCurrentWindow, avgHealthPastWindow } = insights; const { avgHealthCurrentWindow, avgHealthPastWindow, health } = insights;
const improveMessage = const improveMessage =
'Remember to archive your stale feature flags to keep the project health growing.'; 'Remember to archive your stale feature flags to keep the project health growing.';
const keepDoingMessage = const keepDoingMessage =
@ -92,36 +90,60 @@ const ProjectHealthMessage: FC<{
if (trend === 'improved') { if (trend === 'improved') {
return ( return (
<Typography> <>
On average, your project health went up from{' '} <Typography>
<PercentageScore>{avgHealthPastWindow}%</PercentageScore> to{' '} On average, your project health went up from{' '}
<PercentageScore>{avgHealthCurrentWindow}%</PercentageScore>{' '} <PercentageScore>{avgHealthPastWindow}%</PercentageScore> to{' '}
during the last 4 weeks. <br /> {keepDoingMessage} <PercentageScore>{avgHealthCurrentWindow}%</PercentageScore>{' '}
</Typography> during the last 4 weeks.
</Typography>
<Typography>{keepDoingMessage}</Typography>
</>
); );
} }
if (trend === 'declined') { if (trend === 'declined') {
return ( return (
<Typography> <>
On average, your project health went down from{' '} <Typography>
<PercentageScore>{avgHealthPastWindow}%</PercentageScore> to{' '} On average, your project health went down from{' '}
<PercentageScore>{avgHealthCurrentWindow}%</PercentageScore>{' '} <PercentageScore>{avgHealthPastWindow}%</PercentageScore> to{' '}
during the last 4 weeks. <br /> {improveMessage} <PercentageScore>{avgHealthCurrentWindow}%</PercentageScore>{' '}
</Typography> during the last 4 weeks.
</Typography>
<Typography>{improveMessage}</Typography>
</>
); );
} }
if (trend === 'consistent') { if (trend === 'consistent') {
return ( return (
<Typography> <>
On average, your project health has remained at{' '} <Typography>
<PercentageScore>{avgHealthCurrentWindow}%</PercentageScore>{' '} On average, your project health has remained at{' '}
during the last 4 weeks. <br /> <PercentageScore>{avgHealthCurrentWindow}%</PercentageScore>{' '}
{avgHealthCurrentWindow && avgHealthCurrentWindow >= 70 during the last 4 weeks.
? keepDoingMessage </Typography>
: improveMessage} <Typography>
</Typography> {avgHealthCurrentWindow && avgHealthCurrentWindow >= 70
? keepDoingMessage
: improveMessage}
</Typography>
</>
);
}
if (trend === 'unknown') {
return (
<>
<Typography>
Your current health score is{' '}
<PercentageScore>{health}%</PercentageScore>.
</Typography>
<Typography>
{health >= 70 ? keepDoingMessage : improveMessage}
</Typography>
</>
); );
} }
@ -141,22 +163,6 @@ export const ProjectSetupComplete: FC<{
<ProjectInsight>Project health</ProjectInsight> <ProjectInsight>Project health</ProjectInsight>
</TitleContainer> </TitleContainer>
<Health>
<ProjectHealthChart
health={insights.health}
active={insights.activeFlags}
potentiallyStale={insights.potentiallyStaleFlags}
stale={insights.staleFlags}
/>
<FlagCounts
projectId={project}
activeCount={insights.activeFlags}
potentiallyStaleCount={insights.potentiallyStaleFlags}
staleCount={insights.staleFlags}
hideLinks={true}
/>
</Health>
<ProjectHealthMessage <ProjectHealthMessage
trend={projectHealthTrend} trend={projectHealthTrend}
insights={insights} insights={insights}