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

feat: insights grid initial layout (#6591)

Browse Source
This commit is contained in:
Jaanus Sellin 2024-03-18 14:50:25 +02:00 committed by GitHub
parent 3621c7282d
commit f2c57f0fbd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 49 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/component/project/Project/Project.tsx
View File

@ -44,6 +44,7 @@ import { HiddenProjectIconWithTooltip } from './HiddenProjectIconWithTooltip/Hid
import { ChangeRequestPlausibleProvider } from 'component/changeRequest/ChangeRequestContext';
import { ProjectApplications } from '../ProjectApplications/ProjectApplications';
import { useUiFlag } from 'hooks/useUiFlag';
import { ProjectInsights } from './ProjectInsights/ProjectInsights';
const StyledBadge = styled(Badge)(({ theme }) => ({
position: 'absolute',
@ -311,7 +312,7 @@ export const Project = () => {
<Route path='environments' element={<ProjectEnvironment />} />
<Route path='archive' element={<ProjectFeaturesArchive />} />
{Boolean(projectOverviewRefactor) && (
<Route path='insights' element={<div>Hello world</div>} />
<Route path='insights' element={<ProjectInsights />} />
)}
<Route path='logs' element={<ProjectLog />} />
<Route

47
frontend/src/component/project/Project/ProjectInsights/ProjectInsights.tsx Normal file
View File

@ -0,0 +1,47 @@
import { Box, styled } from '@mui/material';
const Grid = styled(Box)(({ theme }) => ({
display: 'grid',
gap: theme.spacing(2),
gridTemplateColumns: 'repeat(10, 1fr)',
}));
const Overview = styled(Box)(({ theme }) => ({
gridColumn: '1 / -1',
}));
const Health = styled(Box)(({ theme }) => ({
gridColumn: 'span 5',
}));
const LeadTime = styled(Box)(({ theme }) => ({
gridColumn: 'span 5',
}));
const ToggleTypesUsed = styled(Box)(({ theme }) => ({
gridColumn: 'span 2',
}));
const ProjectMembers = styled(Box)(({ theme }) => ({
gridColumn: 'span 2',
}));
const ChangeRequests = styled(Box)(({ theme }) => ({
gridColumn: 'span 5',
}));
export const ProjectInsights = () => {
return (
<Grid>
<Overview>
Total changes / avg time to production / feature flags /stale
flags
</Overview>
<Health>Project Health</Health>
<LeadTime>Lead time</LeadTime>
<ToggleTypesUsed>Toggle types used</ToggleTypesUsed>
<ProjectMembers>Project members</ProjectMembers>
<ChangeRequests>Change Requests</ChangeRequests>
</Grid>
);
};