diff --git a/frontend/src/component/insights/InsightsCharts.tsx b/frontend/src/component/insights/InsightsCharts.tsx index b10d0e48bf..e948a95d57 100644 --- a/frontend/src/component/insights/InsightsCharts.tsx +++ b/frontend/src/component/insights/InsightsCharts.tsx @@ -12,11 +12,7 @@ import { TimeToProduction } from './componentsStat/TimeToProduction/TimeToProduc import { TimeToProductionChart } from './componentsChart/TimeToProductionChart/TimeToProductionChart'; import { MetricsSummaryChart } from './componentsChart/MetricsSummaryChart/MetricsSummaryChart'; import { UpdatesPerEnvironmentTypeChart } from './componentsChart/UpdatesPerEnvironmentTypeChart/UpdatesPerEnvironmentTypeChart'; -import type { - InstanceInsightsSchema, - InstanceInsightsSchemaFlags, - InstanceInsightsSchemaUsers, -} from 'openapi'; +import type { InstanceInsightsSchema } from 'openapi'; import type { GroupedDataByProject } from './hooks/useGroupedProjectTrends'; import { allOption } from 'component/common/ProjectSelect/ProjectSelect'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; @@ -24,7 +20,6 @@ import { WidgetTitle } from './components/WidgetTitle/WidgetTitle'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; export interface IChartsProps { - flags: InstanceInsightsSchema['flags']; flagTrends: InstanceInsightsSchema['flagTrends']; projectsData: InstanceInsightsSchema['projectFlagTrends']; groupedProjectsData: GroupedDataByProject< @@ -34,7 +29,6 @@ export interface IChartsProps { groupedMetricsData: GroupedDataByProject< InstanceInsightsSchema['metricsSummaryTrends'] >; - users: InstanceInsightsSchema['users']; userTrends: InstanceInsightsSchema['userTrends']; environmentTypeTrends: InstanceInsightsSchema['environmentTypeTrends']; summary: { @@ -98,8 +92,6 @@ const StyledChartContainer = styled(Box)(({ theme }) => ({ export const InsightsCharts: FC = ({ projects, - flags, - users, summary, userTrends, groupedProjectsData, @@ -113,11 +105,16 @@ export const InsightsCharts: FC = ({ const isOneProjectSelected = projects.length === 1; const { isEnterprise } = useUiConfig(); - function getFlagsPerUser( - flags: InstanceInsightsSchemaFlags, - users: InstanceInsightsSchemaUsers, - ) { - const flagsPerUserCalculation = flags.total / users.total; + const lastUserTrend = userTrends[userTrends.length - 1]; + const lastFlagTrend = flagTrends[flagTrends.length - 1]; + + const usersTotal = lastUserTrend?.total ?? 0; + const usersActive = lastUserTrend?.active ?? 0; + const usersInactive = lastUserTrend?.inactive ?? 0; + const flagsTotal = lastFlagTrend?.total ?? 0; + + function getFlagsPerUser(flagsTotal: number, usersTotal: number) { + const flagsPerUserCalculation = flagsTotal / usersTotal; return Number.isNaN(flagsPerUserCalculation) ? 'N/A' : flagsPerUserCalculation.toFixed(2); @@ -133,9 +130,9 @@ export const InsightsCharts: FC = ({ @@ -239,8 +236,11 @@ export const InsightsCharts: FC = ({ diff --git a/frontend/src/component/insights/hooks/useFilteredFlagsSummary.test.ts b/frontend/src/component/insights/hooks/useFilteredFlagsSummary.test.ts index d501dc7321..ca10cfc0e7 100644 --- a/frontend/src/component/insights/hooks/useFilteredFlagsSummary.test.ts +++ b/frontend/src/component/insights/hooks/useFilteredFlagsSummary.test.ts @@ -1,63 +1,59 @@ import { renderHook } from '@testing-library/react'; import { useFilteredFlagsSummary } from './useFilteredFlagsSummary'; -import type { InstanceInsightsSchemaUsers } from 'openapi'; describe('useFilteredFlagTrends', () => { it('should summarize only last week of project flag trends', () => { const { result } = renderHook(() => - useFilteredFlagsSummary( - [ - { - week: '2024-01', - project: 'project1', - total: 1, - active: 1, - stale: 0, - potentiallyStale: 0, - users: 1, - date: '', - timeToProduction: 4, - health: 100, - }, - { - week: '2024-01', - project: 'project2', - total: 2, - active: 2, - stale: 0, - potentiallyStale: 0, - users: 2, - date: '', - timeToProduction: 5, - health: 100, - }, - { - week: '2024-02', - project: 'project1', - total: 4, - active: 3, - stale: 0, - potentiallyStale: 1, - users: 1, - date: '', - timeToProduction: 4, - health: 75, - }, - { - week: '2024-02', - project: 'project3', - total: 10, - active: 8, - stale: 2, - potentiallyStale: 0, - users: 3, - date: '', - timeToProduction: 2, - health: 80, - }, - ], - { total: 1 } as unknown as InstanceInsightsSchemaUsers, - ), + useFilteredFlagsSummary([ + { + week: '2024-01', + project: 'project1', + total: 1, + active: 1, + stale: 0, + potentiallyStale: 0, + users: 1, + date: '', + timeToProduction: 4, + health: 100, + }, + { + week: '2024-01', + project: 'project2', + total: 2, + active: 2, + stale: 0, + potentiallyStale: 0, + users: 2, + date: '', + timeToProduction: 5, + health: 100, + }, + { + week: '2024-02', + project: 'project1', + total: 4, + active: 3, + stale: 0, + potentiallyStale: 1, + users: 1, + date: '', + timeToProduction: 4, + health: 75, + }, + { + week: '2024-02', + project: 'project3', + total: 10, + active: 8, + stale: 2, + potentiallyStale: 0, + users: 3, + date: '', + timeToProduction: 2, + health: 80, + }, + ]), ); expect(result.current).toEqual({ @@ -67,30 +63,26 @@ describe('useFilteredFlagTrends', () => { potentiallyStale: 1, averageUsers: 2, averageHealth: '79', - flagsPerUser: '14.00', medianTimeToProduction: 3, }); }); it('should work with project with zero users', () => { const { result, rerender } = renderHook(() => - useFilteredFlagsSummary( - [ - { - week: '2024-01', - project: 'project1', - total: 5, - active: 5, - stale: 0, - potentiallyStale: 0, - users: 0, - date: '', - timeToProduction: 4, - health: 100, - }, - ], - { total: 1 } as unknown as InstanceInsightsSchemaUsers, - ), + useFilteredFlagsSummary([ + { + week: '2024-01', + project: 'project1', + total: 5, + active: 5, + stale: 0, + potentiallyStale: 0, + users: 0, + date: '', + timeToProduction: 4, + health: 100, + }, + ]), ); expect(result.current).toEqual({ @@ -100,42 +92,38 @@ describe('useFilteredFlagTrends', () => { potentiallyStale: 0, averageUsers: 0, averageHealth: '100', - flagsPerUser: '5.00', medianTimeToProduction: 4, }); }); it('should work with projects where some have with zero users', () => { const { result } = renderHook(() => - useFilteredFlagsSummary( - [ - { - week: '2024-01', - project: 'project1', - total: 5, - active: 5, - stale: 0, - potentiallyStale: 0, - users: 0, - date: '', - timeToProduction: 2, - health: 100, - }, - { - week: '2024-01', - project: 'project2', - total: 5, - active: 5, - stale: 0, - potentiallyStale: 0, - users: 3, - date: '', - timeToProduction: 5, - health: 100, - }, - ], - { total: 1 } as unknown as InstanceInsightsSchemaUsers, - ), + useFilteredFlagsSummary([ + { + week: '2024-01', + project: 'project1', + total: 5, + active: 5, + stale: 0, + potentiallyStale: 0, + users: 0, + date: '', + timeToProduction: 2, + health: 100, + }, + { + week: '2024-01', + project: 'project2', + total: 5, + active: 5, + stale: 0, + potentiallyStale: 0, + users: 3, + date: '', + timeToProduction: 5, + health: 100, + }, + ]), ); expect(result.current).toEqual({ @@ -145,30 +133,26 @@ describe('useFilteredFlagTrends', () => { potentiallyStale: 0, averageUsers: 1.5, averageHealth: '100', - flagsPerUser: '10.00', medianTimeToProduction: 3.5, }); }); it('should set health of a project without feature flags to undefined', () => { const { result } = renderHook(() => - useFilteredFlagsSummary( - [ - { - week: '2024-01', - project: 'project1', - total: 0, - active: 0, - stale: 0, - potentiallyStale: 0, - users: 0, - date: '', - timeToProduction: 0, - health: 100, - }, - ], - { total: 1 } as unknown as InstanceInsightsSchemaUsers, - ), + useFilteredFlagsSummary([ + { + week: '2024-01', + project: 'project1', + total: 0, + active: 0, + stale: 0, + potentiallyStale: 0, + users: 0, + date: '', + timeToProduction: 0, + health: 100, + }, + ]), ); expect(result.current).toEqual({ @@ -178,54 +162,50 @@ describe('useFilteredFlagTrends', () => { potentiallyStale: 0, averageUsers: 0, averageHealth: undefined, - flagsPerUser: '0.00', medianTimeToProduction: undefined, }); }); it('should not use 0 timeToProduction projects for median calculation', () => { const { result } = renderHook(() => - useFilteredFlagsSummary( - [ - { - week: '2024-01', - project: 'project1', - total: 0, - active: 0, - stale: 0, - potentiallyStale: 0, - users: 0, - date: '', - timeToProduction: 0, - health: 100, - }, - { - week: '2024-01', - project: 'project2', - total: 0, - active: 0, - stale: 0, - potentiallyStale: 0, - users: 0, - date: '', - timeToProduction: 0, - health: 100, - }, - { - week: '2024-01', - project: 'project3', - total: 0, - active: 0, - stale: 0, - potentiallyStale: 0, - users: 0, - date: '', - timeToProduction: 5, - health: 100, - }, - ], - { total: 1 } as unknown as InstanceInsightsSchemaUsers, - ), + useFilteredFlagsSummary([ + { + week: '2024-01', + project: 'project1', + total: 0, + active: 0, + stale: 0, + potentiallyStale: 0, + users: 0, + date: '', + timeToProduction: 0, + health: 100, + }, + { + week: '2024-01', + project: 'project2', + total: 0, + active: 0, + stale: 0, + potentiallyStale: 0, + users: 0, + date: '', + timeToProduction: 0, + health: 100, + }, + { + week: '2024-01', + project: 'project3', + total: 0, + active: 0, + stale: 0, + potentiallyStale: 0, + users: 0, + date: '', + timeToProduction: 5, + health: 100, + }, + ]), ); expect(result.current).toEqual({ @@ -235,7 +215,6 @@ describe('useFilteredFlagTrends', () => { potentiallyStale: 0, averageUsers: 0, averageHealth: undefined, - flagsPerUser: '0.00', medianTimeToProduction: 5, }); }); diff --git a/frontend/src/component/insights/hooks/useFilteredFlagsSummary.ts b/frontend/src/component/insights/hooks/useFilteredFlagsSummary.ts index 3006114609..7b428629d0 100644 --- a/frontend/src/component/insights/hooks/useFilteredFlagsSummary.ts +++ b/frontend/src/component/insights/hooks/useFilteredFlagsSummary.ts @@ -1,8 +1,5 @@ import { useMemo } from 'react'; -import type { - InstanceInsightsSchemaProjectFlagTrendsItem, - InstanceInsightsSchemaUsers, -} from 'openapi'; +import type { InstanceInsightsSchemaProjectFlagTrendsItem } from 'openapi'; const validTimeToProduction = ( item: InstanceInsightsSchemaProjectFlagTrendsItem, @@ -14,7 +11,6 @@ const validTimeToProduction = ( // NOTE: should we move project filtering to the backend? export const useFilteredFlagsSummary = ( filteredProjectFlagTrends: InstanceInsightsSchemaProjectFlagTrendsItem[], - users: InstanceInsightsSchemaUsers, ) => useMemo(() => { const lastWeekId = filteredProjectFlagTrends.reduce((prev, current) => { @@ -69,14 +65,8 @@ export const useFilteredFlagsSummary = ( ? undefined : medianTimeToProductionCalculation; - const flagsPerUserCalculation = sum.total / users.total; - const flagsPerUser = Number.isNaN(flagsPerUserCalculation) - ? 'N/A' - : flagsPerUserCalculation.toFixed(2); - return { ...sum, - flagsPerUser, averageUsers, averageHealth: sum.total ? ((sum.active / (sum.total || 1)) * 100).toFixed(0) diff --git a/frontend/src/component/insights/hooks/useInsightsData.ts b/frontend/src/component/insights/hooks/useInsightsData.ts index b203e93500..40ef5ac2e6 100644 --- a/frontend/src/component/insights/hooks/useInsightsData.ts +++ b/frontend/src/component/insights/hooks/useInsightsData.ts @@ -25,10 +25,7 @@ export const useInsightsData = ( ); const groupedMetricsData = useGroupedProjectTrends(metricsData); - const summary = useFilteredFlagsSummary( - projectsData, - instanceInsights.users, - ); + const summary = useFilteredFlagsSummary(projectsData); return useMemo( () => ({ @@ -37,7 +34,6 @@ export const useInsightsData = ( groupedProjectsData, metricsData, groupedMetricsData, - users: instanceInsights.users, environmentTypeTrends: instanceInsights.environmentTypeTrends, summary, allMetricsDatapoints, diff --git a/frontend/src/hooks/api/getters/useInsights/useInsights.ts b/frontend/src/hooks/api/getters/useInsights/useInsights.ts index c522df362b..796bb254ab 100644 --- a/frontend/src/hooks/api/getters/useInsights/useInsights.ts +++ b/frontend/src/hooks/api/getters/useInsights/useInsights.ts @@ -30,8 +30,6 @@ export const useInsights = ( return { insights: data || { - users: { total: 0, inactive: 0, active: 0 }, - flags: { total: 0 }, userTrends: [], flagTrends: [], projectFlagTrends: [], diff --git a/frontend/src/openapi/models/instanceInsightsSchema.ts b/frontend/src/openapi/models/instanceInsightsSchema.ts index e64ee03b5a..4905be7e36 100644 --- a/frontend/src/openapi/models/instanceInsightsSchema.ts +++ b/frontend/src/openapi/models/instanceInsightsSchema.ts @@ -4,11 +4,9 @@ * See `gen:api` script in package.json */ import type { InstanceInsightsSchemaEnvironmentTypeTrendsItem } from './instanceInsightsSchemaEnvironmentTypeTrendsItem'; -import type { InstanceInsightsSchemaFlags } from './instanceInsightsSchemaFlags'; import type { InstanceInsightsSchemaFlagTrendsItem } from './instanceInsightsSchemaFlagTrendsItem'; import type { InstanceInsightsSchemaMetricsSummaryTrendsItem } from './instanceInsightsSchemaMetricsSummaryTrendsItem'; import type { InstanceInsightsSchemaProjectFlagTrendsItem } from './instanceInsightsSchemaProjectFlagTrendsItem'; -import type { InstanceInsightsSchemaUsers } from './instanceInsightsSchemaUsers'; import type { InstanceInsightsSchemaUserTrendsItem } from './instanceInsightsSchemaUserTrendsItem'; /** @@ -17,16 +15,12 @@ import type { InstanceInsightsSchemaUserTrendsItem } from './instanceInsightsSch export interface InstanceInsightsSchema { /** How updates per environment type changed over time */ environmentTypeTrends: InstanceInsightsSchemaEnvironmentTypeTrendsItem[]; - /** High level flag count statistics */ - flags: InstanceInsightsSchemaFlags; /** How number of flags changed over time */ flagTrends: InstanceInsightsSchemaFlagTrendsItem[]; /** How metrics data per project changed over time */ metricsSummaryTrends: InstanceInsightsSchemaMetricsSummaryTrendsItem[]; /** How number of flags per project changed over time */ projectFlagTrends: InstanceInsightsSchemaProjectFlagTrendsItem[]; - /** High level user count statistics */ - users: InstanceInsightsSchemaUsers; /** How number of users changed over time */ userTrends: InstanceInsightsSchemaUserTrendsItem[]; }