fix: metrics apps should be selected from the longest time span (#5923)

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<string> => {
+    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) => {

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),
+);

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;
+};