diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx index 7d0545f527..2197578e76 100644 --- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx @@ -3,6 +3,7 @@ import { PageContent } from 'component/common/PageContent/PageContent'; import { useEffect, useMemo, useState } from 'react'; import { FEATURE_METRIC_HOURS_BACK_DEFAULT, + FEATURE_METRIC_HOURS_BACK_MAX, FeatureMetricsHours, } from './FeatureMetricsHours/FeatureMetricsHours'; import { IFeatureMetricsRaw } from 'interfaces/featureToggle'; @@ -21,6 +22,7 @@ import { withDefault, } from 'use-query-params'; import { aggregateFeatureMetrics } from './aggregateFeatureMetrics'; +import { useExtendedFeatureMetrics } from './useExtendedFeatureMetrics'; export const FeatureMetrics = () => { const projectId = useRequiredPathParam('projectId'); @@ -163,9 +165,12 @@ const useFeatureMetricsEnvironments = ( // Get all application names for a feature. Fetch apps for the max time range // so that the list of apps doesn't change when selecting a shorter range. const useFeatureMetricsApplications = (featureId: string): Set => { + const extendedOptions = useExtendedFeatureMetrics(); const { featureMetrics = [] } = useFeatureMetricsRaw( featureId, - FEATURE_METRIC_HOURS_BACK_DEFAULT, + extendedOptions + ? FEATURE_METRIC_HOURS_BACK_MAX + : FEATURE_METRIC_HOURS_BACK_DEFAULT, ); const applications = featureMetrics.map((metric) => { diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsHours/FeatureMetricsHours.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsHours/FeatureMetricsHours.tsx index 19ac4fc9ea..5e9daa1dbc 100644 --- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsHours/FeatureMetricsHours.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsHours/FeatureMetricsHours.tsx @@ -6,6 +6,7 @@ import { subWeeks, subMonths, differenceInHours } from 'date-fns'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import { useUiFlag } from 'hooks/useUiFlag'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; +import { useExtendedFeatureMetrics } from '../useExtendedFeatureMetrics'; const StyledTitle = styled('h2')(({ theme }) => ({ margin: 0, @@ -36,9 +37,7 @@ export const FeatureMetricsHours = ({ }, }); }; - const { isEnterprise } = useUiConfig(); - const extendedUsageMetrics = useUiFlag('extendedUsageMetricsUI'); - const extendedOptions = isEnterprise() && extendedUsageMetrics; + const extendedOptions = useExtendedFeatureMetrics(); const options = extendedOptions ? [...hourOptions, ...daysOptions] : hourOptions; @@ -89,3 +88,8 @@ const daysOptions: { key: `${number}`; label: string }[] = [ label: 'Last 3 months', }, ]; + +export const FEATURE_METRIC_HOURS_BACK_MAX = differenceInHours( + now, + subMonths(now, 3), +); diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/useExtendedFeatureMetrics.ts b/frontend/src/component/feature/FeatureView/FeatureMetrics/useExtendedFeatureMetrics.ts new file mode 100644 index 0000000000..50b7f0c15e --- /dev/null +++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/useExtendedFeatureMetrics.ts @@ -0,0 +1,10 @@ +import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; +import { useUiFlag } from 'hooks/useUiFlag'; + +export const useExtendedFeatureMetrics = () => { + const { isEnterprise } = useUiConfig(); + const extendedUsageMetrics = useUiFlag('extendedUsageMetricsUI'); + const extendedOptions = isEnterprise() && extendedUsageMetrics; + + return extendedOptions; +};