Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

feat: connect lead time with backend (#6629)

Browse Source
This commit is contained in:
Jaanus Sellin 2024-03-20 14:40:57 +02:00 committed by GitHub
parent 6dc6e36084
commit 99b5db1691
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 14 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/component/project/Project/ProjectInsights/LeadTimeForChanges/LeadTimeForChanges.test.tsx
View File

@ -1,18 +1,11 @@
import { screen } from '@testing-library/react'; import { screen } from '@testing-library/react';
import { render } from 'utils/testRenderer'; import { render } from 'utils/testRenderer';
import { testServerRoute, testServerSetup } from 'utils/testServer';
import type { ProjectDoraMetricsSchema } from 'openapi'; import type { ProjectDoraMetricsSchema } from 'openapi';
import { LeadTimeForChanges } from './LeadTimeForChanges'; import { LeadTimeForChanges } from './LeadTimeForChanges';
import { Route, Routes } from 'react-router-dom'; import { Route, Routes } from 'react-router-dom';
const server = testServerSetup();
const setupApi = (outdatedSdks: ProjectDoraMetricsSchema) => {
testServerRoute(server, '/api/admin/projects/default/dora', outdatedSdks);
};
test('Show outdated SDKs and apps using them', async () => { test('Show outdated SDKs and apps using them', async () => {
setupApi({ const leadTime: ProjectDoraMetricsSchema = {
features: [ features: [
{ {
name: 'ABCD', name: 'ABCD',
@ -20,12 +13,12 @@ test('Show outdated SDKs and apps using them', async () => {
}, },
], ],
projectAverage: 67, projectAverage: 67,
}); };
render( render(
<Routes> <Routes>
<Route <Route
path={'/projects/:projectId'} path={'/projects/:projectId'}
element={<LeadTimeForChanges />} element={<LeadTimeForChanges leadTime={leadTime} />}
/> />
</Routes>, </Routes>,
{ {

32
frontend/src/component/project/Project/ProjectInsights/LeadTimeForChanges/LeadTimeForChanges.tsx
View File

@ -1,6 +1,4 @@
import { Box, styled, Tooltip, Typography, useMediaQuery } from '@mui/material'; import { Box, styled, Tooltip, Typography, useMediaQuery } from '@mui/material';
import { useProjectDoraMetrics } from 'hooks/api/getters/useProjectDoraMetrics/useProjectDoraMetrics';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { useTable, useGlobalFilter, useSortBy } from 'react-table'; import { useTable, useGlobalFilter, useSortBy } from 'react-table';
import { import {
@ -15,6 +13,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
import { Badge } from 'component/common/Badge/Badge'; import { Badge } from 'component/common/Badge/Badge';
import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns'; import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';
import theme from 'themes/theme'; import theme from 'themes/theme';
import type { ProjectDoraMetricsSchema } from '../../../../../openapi';
const Container = styled(Box)(({ theme }) => ({ const Container = styled(Box)(({ theme }) => ({
display: 'flex', display: 'flex',
@ -41,22 +40,11 @@ const resolveDoraMetrics = (input: number) => {
} }
}; };
export const LeadTimeForChanges = () => { interface ILeadTimeForChangesProps {
const projectId = useRequiredPathParam('projectId'); leadTime: ProjectDoraMetricsSchema;
}
const { dora, loading } = useProjectDoraMetrics(projectId);
const data = useMemo(() => {
if (loading) {
return Array(5).fill({
name: 'Featurename',
timeToProduction: 'Data for production',
});
}
return dora.features;
}, [dora, loading]);
export const LeadTimeForChanges = ({ leadTime }: ILeadTimeForChangesProps) => {
const columns = useMemo( const columns = useMemo(
() => [ () => [
{ {
@ -117,7 +105,7 @@ export const LeadTimeForChanges = () => {
Cell: ({ row: { original } }: any) => ( Cell: ({ row: { original } }: any) => (
<Tooltip <Tooltip
title={`Deviation from project average. Average for this project is: ${ title={`Deviation from project average. Average for this project is: ${
dora.projectAverage || 0 leadTime.projectAverage || 0
} days`} } days`}
arrow arrow
> >
@ -129,8 +117,8 @@ export const LeadTimeForChanges = () => {
data-loading data-loading
> >
{Math.round( {Math.round(
(dora.projectAverage (leadTime.projectAverage
? dora.projectAverage ? leadTime.projectAverage
: 0) - original.timeToProduction, : 0) - original.timeToProduction,
)}{' '} )}{' '}
days days
@ -166,7 +154,7 @@ export const LeadTimeForChanges = () => {
disableSortBy: true, disableSortBy: true,
}, },
], ],
[JSON.stringify(dora.features), loading], [JSON.stringify(leadTime.features)],
); );
const initialState = useMemo( const initialState = useMemo(
@ -194,7 +182,7 @@ export const LeadTimeForChanges = () => {
} = useTable( } = useTable(
{ {
columns: columns as any[], columns: columns as any[],
data, data: leadTime.features,
initialState, initialState,
autoResetGlobalFilter: false, autoResetGlobalFilter: false,
autoResetSortBy: false, autoResetSortBy: false,

2
frontend/src/component/project/Project/ProjectInsights/ProjectInsights.tsx
View File

@ -52,7 +52,7 @@ export const ProjectInsights = () => {
<ProjectHealth health={data.health} /> <ProjectHealth health={data.health} />
</MediumWideContainer> </MediumWideContainer>
<WideContainer> <WideContainer>
<LeadTimeForChanges /> <LeadTimeForChanges leadTime={data.leadTime} />
</WideContainer> </WideContainer>
<NarrowContainer> <NarrowContainer>
<FlagTypesUsed featureTypeCounts={data.featureTypeCounts} /> <FlagTypesUsed featureTypeCounts={data.featureTypeCounts} />