Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-23 00:22:19 +01:00
Code Issues Projects Releases Wiki Activity

fix: select default application based on timespan (#5927)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2024-01-17 12:15:03 +01:00 committed by GitHub
parent bbaf574841
commit 5fb2ac8054
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 26 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx
View File

@ -3,7 +3,6 @@ import { PageContent } from 'component/common/PageContent/PageContent';
import { useEffect, useMemo, useState } from 'react'; import { useEffect, useMemo, useState } from 'react';
import { import {
FEATURE_METRIC_HOURS_BACK_DEFAULT, FEATURE_METRIC_HOURS_BACK_DEFAULT,
FEATURE_METRIC_HOURS_BACK_MAX,
FeatureMetricsHours, FeatureMetricsHours,
} from './FeatureMetricsHours/FeatureMetricsHours'; } from './FeatureMetricsHours/FeatureMetricsHours';
import { IFeatureMetricsRaw } from 'interfaces/featureToggle'; import { IFeatureMetricsRaw } from 'interfaces/featureToggle';
@ -22,26 +21,41 @@ import {
withDefault, withDefault,
} from 'use-query-params'; } from 'use-query-params';
import { aggregateFeatureMetrics } from './aggregateFeatureMetrics'; import { aggregateFeatureMetrics } from './aggregateFeatureMetrics';
import { useExtendedFeatureMetrics } from './useExtendedFeatureMetrics';
export const FeatureMetrics = () => { export const FeatureMetrics = () => {
const projectId = useRequiredPathParam('projectId'); const projectId = useRequiredPathParam('projectId');
const featureId = useRequiredPathParam('featureId'); const featureId = useRequiredPathParam('featureId');
const environments = useFeatureMetricsEnvironments(projectId, featureId); const environments = useFeatureMetricsEnvironments(projectId, featureId);
const applications = useFeatureMetricsApplications(featureId);
usePageTitle('Metrics'); usePageTitle('Metrics');
const defaultEnvironment = Array.from(environments)[0]; const defaultEnvironment = Array.from(environments)[0];
const defaultApplication = Array.from(applications)[0];
const [query, setQuery] = useQueryParams({ const [query, setQuery] = useQueryParams({
environment: withDefault(StringParam, defaultEnvironment), environment: withDefault(StringParam, defaultEnvironment),
applications: withDefault(ArrayParam, [defaultApplication]), applications: withDefault(ArrayParam, []),
hoursBack: withDefault(NumberParam, FEATURE_METRIC_HOURS_BACK_DEFAULT), hoursBack: withDefault(NumberParam, FEATURE_METRIC_HOURS_BACK_DEFAULT),
}); });
const applications = useFeatureMetricsApplications(
featureId,
query.hoursBack || FEATURE_METRIC_HOURS_BACK_DEFAULT,
);
const defaultApplication = Array.from(applications)[0];
const { environment: selectedEnvironment, hoursBack } = query; const { environment: selectedEnvironment, hoursBack } = query;
const selectedApplications = query.applications.filter( const selectedApplications = query.applications.filter(
(item) => item !== null, (item) => item !== null,
) as string[]; ) as string[];
useEffect(() => {
if (
query.applications &&
query.applications.length === 0 &&
defaultApplication
) {
setQuery({ applications: [defaultApplication] });
}
}, [JSON.stringify(Array.from(applications))]);
const allSelected = selectedApplications.length === applications.size; const allSelected = selectedApplications.length === applications.size;
const { featureMetrics } = useFeatureMetricsRaw(featureId, hoursBack); const { featureMetrics } = useFeatureMetricsRaw(featureId, hoursBack);
@ -162,16 +176,13 @@ const useFeatureMetricsEnvironments = (
return new Set(environments); return new Set(environments);
}; };
// Get all application names for a feature. Fetch apps for the max time range // Get all application names for a feature. Respect current hoursBack since
// so that the list of apps doesn't change when selecting a shorter range. // we can have different apps in hourly time spans and daily time spans
const useFeatureMetricsApplications = (featureId: string): Set<string> => { const useFeatureMetricsApplications = (
const extendedOptions = useExtendedFeatureMetrics(); featureId: string,
const { featureMetrics = [] } = useFeatureMetricsRaw( hoursBack = FEATURE_METRIC_HOURS_BACK_DEFAULT,
featureId, ): Set<string> => {
extendedOptions const { featureMetrics = [] } = useFeatureMetricsRaw(featureId, hoursBack);
? FEATURE_METRIC_HOURS_BACK_MAX
: FEATURE_METRIC_HOURS_BACK_DEFAULT,
);
const applications = featureMetrics.map((metric) => { const applications = featureMetrics.map((metric) => {
return metric.appName; return metric.appName;