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

chore: handle edge cases (#8719)

Browse Source 
Handle a couple edge cases related to project lifecycle metrics:
1. If the average time spent was less than a day, we'd show "0 days".
Now we show "less than a day" instead.
2. If the number of flags grows very large, it'd start pushing out the
lifecycle icon. Instead, we now format in nicely.

Before:

![image](https://github.com/user-attachments/assets/a43cf021-7eb0-4edf-ab21-b379c1600299)

![image](https://github.com/user-attachments/assets/6243167a-cb43-4de5-a64c-a5231477d1b6)



After:

![image](https://github.com/user-attachments/assets/3efa630d-708d-4238-a4aa-09cdbbe459c1)

![image](https://github.com/user-attachments/assets/aa773ab8-7719-47f3-a684-18bec829da35)
This commit is contained in:
Thomas Heartman 2024-11-12 12:16:33 +01:00 committed by GitHub
parent 3bc9fe9a9a
commit 42198cee83
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 34 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx
View File

@ -4,8 +4,7 @@ import { useProjectStatus } from 'hooks/api/getters/useProjectStatus/useProjectS
import useLoading from 'hooks/useLoading';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
import type { FC } from 'react';
import { Link } from 'react-router-dom';
import { PrettifyLargeNumber } from 'component/common/PrettifyLargeNumber/PrettifyLargeNumber';
const LifecycleBox = styled('li')(({ theme }) => ({
padding: theme.spacing(2),
borderRadius: theme.shape.borderRadiusExtraLarge,
@ -31,7 +30,7 @@ const Counter = styled('span')({
justifyContent: 'space-between',
});
const BigNumber = styled('span')(({ theme }) => ({
const BigText = styled('span')(({ theme }) => ({
fontSize: `calc(2 * ${theme.typography.body1.fontSize})`,
}));
@ -48,10 +47,6 @@ const NoData = styled('span')({
fontWeight: 'normal',
});
const LinkNoUnderline = styled(Link)({
textDecoration: 'none',
});
const AverageDaysStat: FC<{ averageDays?: number | null }> = ({
averageDays,
}) => {
@ -60,6 +55,9 @@ const AverageDaysStat: FC<{ averageDays?: number | null }> = ({
return <NoData>No data</NoData>;
}
if (averageDays < 1) {
return 'less than a day';
}
return `${averageDays} days`;
};
return (
@ -72,6 +70,18 @@ const AverageDaysStat: FC<{ averageDays?: number | null }> = ({
);
};
const BigNumber: FC<{ value?: number }> = ({ value }) => {
return (
<BigText data-loading-project-lifecycle-summary>
<PrettifyLargeNumber
value={value ?? 0}
threshold={1000}
precision={1}
/>
</BigText>
);
};
export const ProjectLifecycleSummary = () => {
const projectId = useRequiredPathParam('projectId');
const { data, loading } = useProjectStatus(projectId);
@ -85,9 +95,9 @@ export const ProjectLifecycleSummary = () => {
<LifecycleBox>
<p>
<Counter>
<BigNumber data-loading-project-lifecycle-summary>
{data?.lifecycleSummary.initial.currentFlags ?? 0}
</BigNumber>
<BigNumber
value={data?.lifecycleSummary.initial.currentFlags}
/>
<FeatureLifecycleStageIcon
aria-hidden='true'
@ -103,9 +113,9 @@ export const ProjectLifecycleSummary = () => {
<LifecycleBox>
<p>
<Counter>
<BigNumber data-loading-project-lifecycle-summary>
{data?.lifecycleSummary.preLive.currentFlags ?? 0}
</BigNumber>
<BigNumber
value={data?.lifecycleSummary.preLive.currentFlags}
/>
<FeatureLifecycleStageIcon
aria-hidden='true'
@ -121,9 +131,9 @@ export const ProjectLifecycleSummary = () => {
<LifecycleBox>
<p>
<Counter>
<BigNumber data-loading-project-lifecycle-summary>
{data?.lifecycleSummary.live.currentFlags ?? 0}
</BigNumber>
<BigNumber
value={data?.lifecycleSummary.live.currentFlags}
/>
<FeatureLifecycleStageIcon
aria-hidden='true'
@ -139,9 +149,11 @@ export const ProjectLifecycleSummary = () => {
<LifecycleBox>
<p>
<Counter>
<BigNumber data-loading-project-lifecycle-summary>
{data?.lifecycleSummary.completed.currentFlags ?? 0}
</BigNumber>
<BigNumber
value={
data?.lifecycleSummary.completed.currentFlags
}
/>
<FeatureLifecycleStageIcon
aria-hidden='true'
@ -157,9 +169,9 @@ export const ProjectLifecycleSummary = () => {
<LifecycleBox>
<p>
<Counter>
<BigNumber data-loading-project-lifecycle-summary>
{data?.lifecycleSummary.archived.currentFlags ?? 0}
</BigNumber>
<BigNumber
value={data?.lifecycleSummary.archived.currentFlags}
/>
<FeatureLifecycleStageIcon
aria-hidden='true'