diff --git a/frontend/src/component/insights/InsightsCharts.tsx b/frontend/src/component/insights/InsightsCharts.tsx index fb244f4aba..ec29147ee8 100644 --- a/frontend/src/component/insights/InsightsCharts.tsx +++ b/frontend/src/component/insights/InsightsCharts.tsx @@ -18,7 +18,6 @@ import { allOption } from 'component/common/ProjectSelect/ProjectSelect'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import { WidgetTitle } from './components/WidgetTitle/WidgetTitle.tsx'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { useUiFlag } from 'hooks/useUiFlag.ts'; export interface IChartsProps { flagTrends: InstanceInsightsSchema['flagTrends']; @@ -39,6 +38,7 @@ export interface IChartsProps { potentiallyStale: number; averageUsers: number; averageHealth?: string; + technicalDebt?: string; flagsPerUser?: string; medianTimeToProduction?: number; }; @@ -105,7 +105,6 @@ export const InsightsCharts: FC = ({ const showAllProjects = projects[0] === allOption.id; const isOneProjectSelected = projects.length === 1; const { isEnterprise } = useUiConfig(); - const healthToDebtEnabled = useUiFlag('healthToTechDebt'); const lastUserTrend = userTrends[userTrends.length - 1]; const lastFlagTrend = flagTrends[flagTrends.length - 1]; @@ -186,20 +185,15 @@ export const InsightsCharts: FC = ({ } diff --git a/frontend/src/component/insights/componentsChart/ProjectHealthChart/HealthChartTooltip/HealthChartTooltip.tsx b/frontend/src/component/insights/componentsChart/ProjectHealthChart/HealthChartTooltip/HealthChartTooltip.tsx index 605e6410d6..c1891fe02b 100644 --- a/frontend/src/component/insights/componentsChart/ProjectHealthChart/HealthChartTooltip/HealthChartTooltip.tsx +++ b/frontend/src/component/insights/componentsChart/ProjectHealthChart/HealthChartTooltip/HealthChartTooltip.tsx @@ -6,7 +6,6 @@ import type { TooltipState } from 'component/insights/components/LineChart/Chart import { HorizontalDistributionChart } from 'component/insights/components/HorizontalDistributionChart/HorizontalDistributionChart'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { getTechnicalDebtColor } from 'utils/getTechnicalDebtColor.ts'; -import { useUiFlag } from 'hooks/useUiFlag'; const StyledTooltipItemContainer = styled(Paper)(({ theme }) => ({ padding: theme.spacing(2), @@ -19,22 +18,6 @@ const StyledItemHeader = styled(Box)(({ theme }) => ({ alignItems: 'center', })); -const getHealthBadgeColor = (health?: number | null) => { - if (health === undefined || health === null) { - return 'info'; - } - - if (health >= 75) { - return 'success'; - } - - if (health >= 50) { - return 'warning'; - } - - return 'error'; -}; - const getTechnicalDebtBadgeColor = (technicalDebt?: number | null) => { if (technicalDebt === undefined || technicalDebt === null) { return 'info'; @@ -108,8 +91,6 @@ const Distribution = ({ stale = 0, potentiallyStale = 0, total = 0 }) => { export const HealthTooltip: FC<{ tooltip: TooltipState | null }> = ({ tooltip, }) => { - const healthToTechDebtEnabled = useUiFlag('healthToTechDebt'); - const data = tooltip?.dataPoints.map((point) => { return { label: point.label, @@ -148,9 +129,7 @@ export const HealthTooltip: FC<{ tooltip: TooltipState | null }> = ({ color='textSecondary' component='span' > - {healthToTechDebtEnabled - ? 'Technical debt' - : 'Project health'} + Technical debt @@ -163,21 +142,13 @@ export const HealthTooltip: FC<{ tooltip: TooltipState | null }> = ({ {point.title} - {healthToTechDebtEnabled ? ( - - {point.value.technicalDebt}% - - ) : ( - - {point.value.health}% - - )} + + {point.value.technicalDebt}% + {' '} ({ margin: theme.spacing(1.5, 0) })} diff --git a/frontend/src/component/insights/componentsChart/ProjectHealthChart/ProjectHealthChart.tsx b/frontend/src/component/insights/componentsChart/ProjectHealthChart/ProjectHealthChart.tsx index 22bae055ed..9758f660de 100644 --- a/frontend/src/component/insights/componentsChart/ProjectHealthChart/ProjectHealthChart.tsx +++ b/frontend/src/component/insights/componentsChart/ProjectHealthChart/ProjectHealthChart.tsx @@ -14,7 +14,6 @@ import { import { useTheme } from '@mui/material'; import type { GroupedDataByProject } from 'component/insights/hooks/useGroupedProjectTrends'; import { usePlaceholderData } from 'component/insights/hooks/usePlaceholderData'; -import { useUiFlag } from 'hooks/useUiFlag.ts'; interface IProjectHealthChartProps { projectFlagTrends: GroupedDataByProject< @@ -46,7 +45,6 @@ export const ProjectHealthChart: FC = ({ const projectsData = useProjectChartData(projectFlagTrends); const theme = useTheme(); const placeholderData = usePlaceholderData(); - const healthToTechDebtEnabled = useUiFlag('healthToTechDebt'); const aggregateHealthData = useMemo(() => { const labels = Array.from( @@ -85,18 +83,12 @@ export const ProjectHealthChart: FC = ({ return { datasets: [ { - label: healthToTechDebtEnabled - ? 'Technical debt' - : 'Health', + label: 'Technical debt', data: weeks.map((item) => ({ health: item.total ? calculateHealth(item) : undefined, - ...(healthToTechDebtEnabled - ? { - technicalDebt: item.total - ? calculateTechDebt(item) - : undefined, - } - : {}), + technicalDebt: item.total + ? calculateTechDebt(item) + : undefined, date: item.date, total: item.total, stale: item.stale, @@ -132,9 +124,7 @@ export const ProjectHealthChart: FC = ({ ? {} : { parsing: { - yAxisKey: healthToTechDebtEnabled - ? 'technicalDebt' - : 'health', + yAxisKey: 'technicalDebt', xAxisKey: 'date', }, plugins: { diff --git a/frontend/src/component/insights/componentsStat/HealthStats/HealthStats.tsx b/frontend/src/component/insights/componentsStat/HealthStats/HealthStats.tsx index 6f0aaddbb6..506ca47a18 100644 --- a/frontend/src/component/insights/componentsStat/HealthStats/HealthStats.tsx +++ b/frontend/src/component/insights/componentsStat/HealthStats/HealthStats.tsx @@ -1,7 +1,6 @@ import type { FC, ReactNode } from 'react'; import { Box, Divider, Link, styled } from '@mui/material'; import { ReactComponent as InstanceHealthIcon } from 'assets/icons/instance-health.svg'; -import { useUiFlag } from 'hooks/useUiFlag'; interface IHealthStatsProps { value?: string | number; @@ -73,8 +72,6 @@ export const HealthStats: FC = ({ potentiallyStale, title, }) => { - const healthToDebtEnabled = useUiFlag('healthToTechDebt'); - return ( @@ -84,12 +81,8 @@ export const HealthStats: FC = ({ - {healthToDebtEnabled ? 'Technical debt' : 'Instance health'} - {healthToDebtEnabled ? ( - {`${technicalDebt}%`} - ) : ( - {`${value || 0}%`} - )} + Technical debt + {`${technicalDebt}%`} @@ -112,9 +105,7 @@ export const HealthStats: FC = ({ target='_blank' rel='noreferrer' > - {healthToDebtEnabled - ? 'What affects technical debt?' - : 'What affects instance health?'} + What affects technical debt? diff --git a/frontend/src/component/insights/sections/PerformanceInsights.tsx b/frontend/src/component/insights/sections/PerformanceInsights.tsx index d7687148a5..bae9edf399 100644 --- a/frontend/src/component/insights/sections/PerformanceInsights.tsx +++ b/frontend/src/component/insights/sections/PerformanceInsights.tsx @@ -23,7 +23,6 @@ import { StyledWidgetContent, StyledWidgetStats, } from '../InsightsCharts.styles'; -import { useUiFlag } from 'hooks/useUiFlag'; export const PerformanceInsights: FC = () => { const statePrefix = 'performance-'; @@ -48,8 +47,6 @@ export const PerformanceInsights: FC = () => { state[`${statePrefix}to`]?.values[0], ); - const healthToTechDebtEnabled = useUiFlag('healthToTechDebt'); - const projects = state[`${statePrefix}project`]?.values ?? [allOption.id]; const showAllProjects = projects[0] === allOption.id; @@ -135,21 +132,12 @@ export const PerformanceInsights: FC = () => { stale={summary.stale} potentiallyStale={summary.potentiallyStale} title={ - healthToTechDebtEnabled ? ( - - ) : ( - - ) + } /> diff --git a/frontend/src/component/personalDashboard/MyProjects.tsx b/frontend/src/component/personalDashboard/MyProjects.tsx index 4389f24542..99df545666 100644 --- a/frontend/src/component/personalDashboard/MyProjects.tsx +++ b/frontend/src/component/personalDashboard/MyProjects.tsx @@ -39,13 +39,10 @@ import { ActionBox } from './ActionBox.tsx'; import useLoading from 'hooks/useLoading'; import { NoProjectsContactAdmin } from './NoProjectsContactAdmin.tsx'; import { AskOwnerToAddYouToTheirProject } from './AskOwnerToAddYouToTheirProject.tsx'; -import { useUiFlag } from 'hooks/useUiFlag.ts'; const ActiveProjectDetails: FC<{ project: PersonalDashboardSchemaProjectsItem; }> = ({ project }) => { - const healthToTechDebtEnabled = useUiFlag('healthToTechDebt'); - const techicalDebt = project.technicalDebt; return ( @@ -67,10 +64,10 @@ const ActiveProjectDetails: FC<{ - {healthToTechDebtEnabled ? techicalDebt : project.health}% + {techicalDebt}% - {healthToTechDebtEnabled ? 'technical debt' : 'health'} + technical debt diff --git a/frontend/src/component/personalDashboard/ProjectSetupComplete.tsx b/frontend/src/component/personalDashboard/ProjectSetupComplete.tsx index c171d912b3..6e9301d388 100644 --- a/frontend/src/component/personalDashboard/ProjectSetupComplete.tsx +++ b/frontend/src/component/personalDashboard/ProjectSetupComplete.tsx @@ -4,7 +4,6 @@ import { Link } from 'react-router-dom'; import Lightbulb from '@mui/icons-material/LightbulbOutlined'; import type { PersonalDashboardProjectDetailsSchemaInsights } from 'openapi'; import { ActionBox } from './ActionBox.tsx'; -import { useUiFlag } from 'hooks/useUiFlag.ts'; const PercentageScore = styled('span')(({ theme }) => ({ fontWeight: theme.typography.fontWeightBold, @@ -58,42 +57,24 @@ const ProjectHealthMessage: FC<{ insights: PersonalDashboardProjectDetailsSchemaInsights; project: string; }> = ({ trend, insights, project }) => { - const healthToTechDebtEnabled = useUiFlag('healthToTechDebt'); - const { avgHealthCurrentWindow, avgHealthPastWindow, health } = insights; - const improveMessage = healthToTechDebtEnabled - ? 'Remember to archive your stale feature flags to keep the technical debt low.' - : 'Remember to archive your stale feature flags to keep the project health growing.'; + const { avgHealthCurrentWindow, avgHealthPastWindow } = insights; + const improveMessage = + 'Remember to archive your stale feature flags to keep the technical debt low.'; const keepDoingMessage = 'This indicates that you are doing a good job of archiving your feature flags.'; const avgCurrentTechnicalDebt = 100 - (avgHealthCurrentWindow ?? 0); const avgPastTechnicalDebt = 100 - (avgHealthPastWindow ?? 0); if (trend === 'improved') { - if (healthToTechDebtEnabled) { - return ( - <> - - On average, your project technical debt went down from{' '} - - {avgPastTechnicalDebt}% - {' '} - to{' '} - - {avgCurrentTechnicalDebt}% - {' '} - during the last 4 weeks. - - {keepDoingMessage} - - ); - } - return ( <> - On average, your project health went up from{' '} - {avgHealthPastWindow}% to{' '} - {avgHealthCurrentWindow}%{' '} + On average, your project technical debt went down from{' '} + {avgPastTechnicalDebt}%{' '} + to{' '} + + {avgCurrentTechnicalDebt}% + {' '} during the last 4 weeks. {keepDoingMessage} @@ -102,31 +83,15 @@ const ProjectHealthMessage: FC<{ } if (trend === 'declined') { - if (healthToTechDebtEnabled) { - return ( - <> - - On average, your project technical debt went up from{' '} - - {avgPastTechnicalDebt}% - {' '} - to{' '} - - {avgCurrentTechnicalDebt}% - {' '} - during the last 4 weeks. - - {improveMessage} - - ); - } - return ( <> - On average, your project health went down from{' '} - {avgHealthPastWindow}% to{' '} - {avgHealthCurrentWindow}%{' '} + On average, your project technical debt went up from{' '} + {avgPastTechnicalDebt}%{' '} + to{' '} + + {avgCurrentTechnicalDebt}% + {' '} during the last 4 weeks. {improveMessage} @@ -135,62 +100,29 @@ const ProjectHealthMessage: FC<{ } if (trend === 'consistent') { - if (healthToTechDebtEnabled) { - return ( - <> - - On average, your project technical debt has remained at{' '} - - {avgCurrentTechnicalDebt}% - {' '} - during the last 4 weeks. - - {keepDoingMessage} - - ); - } - return ( <> - On average, your project health has remained at{' '} - {avgHealthCurrentWindow}%{' '} + On average, your project technical debt has remained at{' '} + + {avgCurrentTechnicalDebt}% + {' '} during the last 4 weeks. - - {avgHealthCurrentWindow && avgHealthCurrentWindow >= 75 - ? keepDoingMessage - : improveMessage} - + {keepDoingMessage} ); } if (trend === 'unknown') { - if (healthToTechDebtEnabled) { - return ( - <> - - Your current project technical debt is{' '} - - {avgCurrentTechnicalDebt}% - - . - - {improveMessage} - - ); - } - return ( <> - Your current health score is{' '} - {health}%. - - - {health >= 75 ? keepDoingMessage : improveMessage} + Your current project technical debt is{' '} + {avgCurrentTechnicalDebt}% + . + {improveMessage} ); } @@ -202,7 +134,6 @@ export const ProjectSetupComplete: FC<{ project: string; insights: PersonalDashboardProjectDetailsSchemaInsights; }> = ({ project, insights }) => { - const healthToTechDebtEnabled = useUiFlag('healthToTechDebt'); const projectHealthTrend = determineProjectHealthTrend(insights); return ( @@ -211,9 +142,7 @@ export const ProjectSetupComplete: FC<{ <> - {healthToTechDebtEnabled - ? 'Technical debt' - : 'Project health'} + Technical debt } diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx index c5c77363d0..7d4af5dedf 100644 --- a/frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx +++ b/frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx @@ -6,7 +6,6 @@ import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; import { HealthGridTile } from './ProjectHealthGrid.styles'; import { PrettifyLargeNumber } from 'component/common/PrettifyLargeNumber/PrettifyLargeNumber'; import { getTechnicalDebtColor } from 'utils/getTechnicalDebtColor.ts'; -import { useUiFlag } from 'hooks/useUiFlag'; const ChartRadius = 40; const ChartStrokeWidth = 13; @@ -82,17 +81,6 @@ const UnhealthyFlagBox = ({ flagCount }: { flagCount: number }) => { ); }; -const useHealthColor = (healthRating: number) => { - const theme = useTheme(); - if (healthRating <= 24) { - return theme.palette.error.main; - } - if (healthRating <= 74) { - return theme.palette.warning.border; - } - return theme.palette.success.border; -}; - const useTechnicalDebtColor = (techicalDebt: number) => { const theme = useTheme(); switch (getTechnicalDebtColor(techicalDebt)) { @@ -115,22 +103,18 @@ const Wrapper = styled(HealthGridTile)(({ theme }) => ({ export const ProjectHealth = () => { const projectId = useRequiredPathParam('projectId'); const { - data: { health, technicalDebt, staleFlags }, + data: { technicalDebt, staleFlags }, } = useProjectStatus(projectId); const { isOss } = useUiConfig(); const theme = useTheme(); - const healthToDebtEnabled = useUiFlag('healthToTechDebt'); const circumference = 2 * Math.PI * ChartRadius; - const healthRating = health.current; const gapLength = 0.3; const filledLength = 1 - gapLength; const offset = 0.75 - gapLength / 2; - const healthLength = (healthRating / 100) * circumference * 0.7; const technicalDebtLength = ((technicalDebt.current || 0) / 100) * circumference * 0.7; - const healthColor = useHealthColor(healthRating); const technicalDebtColor = useTechnicalDebtColor( technicalDebt.current || 0, ); @@ -155,17 +139,9 @@ export const ProjectHealth = () => { cy='50' r={ChartRadius} fill='none' - stroke={ - healthToDebtEnabled - ? technicalDebtColor - : healthColor - } + stroke={technicalDebtColor} strokeWidth={ChartStrokeWidth} - strokeDasharray={ - healthToDebtEnabled - ? `${technicalDebtLength} ${circumference - technicalDebtLength}` - : `${healthLength} ${circumference - healthLength}` - } + strokeDasharray={`${technicalDebtLength} ${circumference - technicalDebtLength}`} strokeDashoffset={offset * circumference} /> { fill={theme.palette.text.primary} fontSize={theme.typography.h1.fontSize} > - {healthToDebtEnabled - ? technicalDebt.current || 0 - : healthRating} - % + {technicalDebt.current || 0}% - {healthToDebtEnabled ? ( - <> - Your current technical debt rating is{' '} - {technicalDebt.current}%. - - ) : ( - <> - Your current project health rating is{' '} - {healthRating}%. - - )} + Your current technical debt rating is{' '} + {technicalDebt.current}%. {!isOss() && ( - {healthToDebtEnabled - ? 'View technical debt over time' - : 'View health over time'} + View technical debt over time )} diff --git a/frontend/src/interfaces/uiConfig.ts b/frontend/src/interfaces/uiConfig.ts index 250f8be9b6..c8d7fdd947 100644 --- a/frontend/src/interfaces/uiConfig.ts +++ b/frontend/src/interfaces/uiConfig.ts @@ -87,7 +87,6 @@ export type UiFlags = { customMetrics?: boolean; lifecycleMetrics?: boolean; createFlagDialogCache?: boolean; - healthToTechDebt?: boolean; improvedJsonDiff?: boolean; impactMetrics?: boolean; crDiffView?: boolean; diff --git a/src/lib/types/experimental.ts b/src/lib/types/experimental.ts index 4cea036d57..9eb6efd27c 100644 --- a/src/lib/types/experimental.ts +++ b/src/lib/types/experimental.ts @@ -56,7 +56,6 @@ export type IFlagKey = | 'edgeObservability' | 'reportUnknownFlags' | 'lifecycleMetrics' - | 'healthToTechDebt' | 'customMetrics' | 'impactMetrics' | 'createFlagDialogCache' @@ -269,10 +268,6 @@ const flags: IFlags = { process.env.UNLEASH_EXPERIMENTAL_LIFECYCLE_METRICS, false, ), - healthToTechDebt: parseEnvVarBoolean( - process.env.UNLEASH_EXPERIMENTAL_HEALTH_TO_TECH_DEBT, - false, - ), createFlagDialogCache: parseEnvVarBoolean( process.env.UNLEASH_EXPERIMENTAL_CREATE_FLAG_DIALOG_CACHE, false,