Skip to content

Commit

Permalink
chore: remove graph, update health message (#8403)
Browse files Browse the repository at this point in the history 
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)
  • Loading branch information
@thomasheartman
thomasheartman authored Oct 10, 2024
1 parent 2ae9589 commit e6365d8
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 46 deletions.
4 changes: 0 additions & 4 deletions frontend/src/component/personalDashboard/PersonalDashboard.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
90 changes: 48 additions & 42 deletions frontend/src/component/personalDashboard/ProjectSetupComplete.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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) {
Expand All @@ -80,48 +78,72 @@ 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 =
'This indicates that you are doing a good job of archiving your feature flags.';

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>
</>
);
}

Expand All @@ -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}
Expand Down

0 comments on commit e6365d8

Please sign in to comment.