Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

chore: remove graph, update health message (#8403)

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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('someone created a flag');
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('production');
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 Lightbulb from '@mui/icons-material/LightbulbOutlined';
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 }) => ({
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 = (
insights: PersonalDashboardProjectDetailsSchemaInsights,
): HeathTrend => {
): HealthTrend => {
const { avgHealthCurrentWindow, avgHealthPastWindow } = insights;
if (avgHealthCurrentWindow === null || avgHealthPastWindow === null) {
@ -80,11 +78,11 @@ const determineProjectHealthTrend = (
};
const ProjectHealthMessage: FC<{
trend: HeathTrend;
trend: HealthTrend;
insights: PersonalDashboardProjectDetailsSchemaInsights;
project: string;
}> = ({ trend, insights, project }) => {
const { avgHealthCurrentWindow, avgHealthPastWindow } = insights;
const { avgHealthCurrentWindow, avgHealthPastWindow, health } = insights;
const improveMessage =
'Remember to archive your stale feature flags to keep the project health growing.';
const keepDoingMessage =
@ -92,36 +90,60 @@ const ProjectHealthMessage: FC<{
if (trend === 'improved') {
return (
<Typography>
On average, your project health went up from{' '}
<PercentageScore>{avgHealthPastWindow}%</PercentageScore> to{' '}
<PercentageScore>{avgHealthCurrentWindow}%</PercentageScore>{' '}
during the last 4 weeks. <br /> {keepDoingMessage}
</Typography>
<>
<Typography>
On average, your project health went up from{' '}
<PercentageScore>{avgHealthPastWindow}%</PercentageScore> to{' '}
<PercentageScore>{avgHealthCurrentWindow}%</PercentageScore>{' '}
during the last 4 weeks.
</Typography>
<Typography>{keepDoingMessage}</Typography>
</>
);
}
if (trend === 'declined') {
return (
<Typography>
On average, your project health went down from{' '}
<PercentageScore>{avgHealthPastWindow}%</PercentageScore> to{' '}
<PercentageScore>{avgHealthCurrentWindow}%</PercentageScore>{' '}
during the last 4 weeks. <br /> {improveMessage}
</Typography>
<>
<Typography>
On average, your project health went down from{' '}
<PercentageScore>{avgHealthPastWindow}%</PercentageScore> to{' '}
<PercentageScore>{avgHealthCurrentWindow}%</PercentageScore>{' '}
during the last 4 weeks.
</Typography>
<Typography>{improveMessage}</Typography>
</>
);
}
if (trend === 'consistent') {
return (
<Typography>
On average, your project health has remained at{' '}
<PercentageScore>{avgHealthCurrentWindow}%</PercentageScore>{' '}
during the last 4 weeks. <br />
{avgHealthCurrentWindow && avgHealthCurrentWindow >= 70
? keepDoingMessage
: improveMessage}
</Typography>
<>
<Typography>
On average, your project health has remained at{' '}
<PercentageScore>{avgHealthCurrentWindow}%</PercentageScore>{' '}
during the last 4 weeks.
</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>
</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
trend={projectHealthTrend}
insights={insights}