From aaa4a1777a8e250dc80f8805f0f6f71143e1980f Mon Sep 17 00:00:00 2001 From: opoliarush Date: Tue, 24 Sep 2024 16:17:37 +0300 Subject: [PATCH] added feature toggle --- .../NewReport/ReportHeader/index.tsx | 125 +++++++++--------- .../NewReport/ReportHeader/styles.ts | 1 + .../NewReport/ReportHeader/useReportQuery.ts | 83 ++++++++++++ .../ReportHeader/useReportQueryV2.ts | 62 +++++++++ src/featureFlags.ts | 3 +- src/types.ts | 3 +- 6 files changed, 215 insertions(+), 62 deletions(-) create mode 100644 src/components/Dashboard/NewReport/ReportHeader/useReportQuery.ts create mode 100644 src/components/Dashboard/NewReport/ReportHeader/useReportQueryV2.ts diff --git a/src/components/Dashboard/NewReport/ReportHeader/index.tsx b/src/components/Dashboard/NewReport/ReportHeader/index.tsx index 8f7dabdcb..0baf0544f 100644 --- a/src/components/Dashboard/NewReport/ReportHeader/index.tsx +++ b/src/components/Dashboard/NewReport/ReportHeader/index.tsx @@ -8,9 +8,10 @@ import { WrenchIcon } from "../../../common/icons/12px/WrenchIcon"; import { actions } from "../../actions"; -import { usePrevious } from "../../../../hooks/usePrevious"; import { Environment } from "../../../common/App/types"; +import { getFeatureFlagValue } from "../../../../featureFlags"; +import { FeatureFlag } from "../../../../types"; import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent"; import { CodeIcon } from "../../../common/icons/12px/CodeIcon"; import { DurationBreakdownIcon } from "../../../common/icons/12px/DurationBreakdownIcon"; @@ -18,9 +19,11 @@ import { InfinityIcon } from "../../../common/icons/16px/InfinityIcon"; import { TableIcon } from "../../../common/icons/16px/TableIcon"; import { TreemapIcon } from "../../../common/icons/16px/TreemapIcon"; import { trackingEvents } from "../tracking"; -import { GetServicesPayload, ReportFilterQuery } from "../types"; +import { GetServicesPayload } from "../types"; import * as s from "./styles"; import { ReportHeaderProps, ReportTimeMode, ReportViewMode } from "./types"; +import { useReportQuery } from "./useReportQuery"; +import { useReportQueryV2 } from "./useReportQueryV2"; const baseFetchConfig = { refreshWithInterval: false, @@ -57,25 +60,20 @@ export const ReportHeader = ({ onFilterChanged, onViewModeChanged }: ReportHeaderProps) => { - const { environments } = useConfigSelector(); + const { environments, backendInfo } = useConfigSelector(); const [periodInDays, setPeriodInDays] = useState(DEFAULT_PERIOD); const [viewMode, setVieMode] = useState("table"); const [timeMode, setTimeMode] = useState("baseline"); const [selectedServices, setSelectedServices] = useState([]); const [selectedEnvironment, setSelectedEnvironment] = useState(null); - const [selectedCriticality, setSelectedCriticality] = useState( - criticalityOptions.map((x) => x.id) - ); - - const previousTimeMode = usePrevious(timeMode); + const [selectedCriticality, setSelectedCriticality] = useState([]); + const [servicesFromStore, setServicesFromStore] = useState([]); - const [filterQuery, setFilterQuery] = useState({ - lastDays: null, - services: [], - environmentId: null, - criticalities: [] - }); + const isDataFilterEnabled = getFeatureFlagValue( + backendInfo, + FeatureFlag.IS_METRICS_REPORT_DATA_FILTER_ENABLED + ); const getServicesPayload = useMemo( () => ({ environment: selectedEnvironment?.id ?? null }), @@ -87,55 +85,60 @@ export const ReportHeader = ({ string[] >(dataFetcherFiltersConfiguration, getServicesPayload); + useEffect(() => { + setServicesFromStore(services ?? []); + }, [services, setServicesFromStore]); + + const { filterQuery } = useReportQuery({ + selectedEnvironment, + selectedServices, + timeMode, + periodInDays, + services: servicesFromStore + }); + + const { filterQuery: filterQueryV2 } = useReportQueryV2({ + selectedEnvironment, + selectedCriticality, + selectedServices, + timeMode, + periodInDays + }); + useEffect(() => { getData(); }, []); useEffect(() => { + if (isDataFilterEnabled) { + return; + } + if (!filterQuery.environmentId) { return; } onFilterChanged(filterQuery); - }, [onFilterChanged, filterQuery]); + }, [onFilterChanged, filterQuery, isDataFilterEnabled]); useEffect(() => { - setSelectedEnvironment( - environments?.length && environments?.length > 0 ? environments[0] : null - ); - }, [environments]); - - useEffect(() => { - if (selectedServices !== filterQuery.services) { - setFilterQuery({ ...filterQuery, services: selectedServices }); - } - }, [filterQuery, selectedServices]); - - useEffect(() => { - if (timeMode === "baseline" && previousTimeMode !== timeMode) { - setFilterQuery({ ...filterQuery, lastDays: null }); + if (!isDataFilterEnabled) { + return; } - if (periodInDays !== filterQuery.lastDays) { - setFilterQuery({ ...filterQuery, lastDays: periodInDays }); + if (!filterQueryV2.environmentId) { + return; } - }, [periodInDays, filterQuery, timeMode, previousTimeMode]); - useEffect(() => { - if (selectedCriticality !== filterQuery.criticalities) { - setFilterQuery({ ...filterQuery, criticalities: selectedCriticality }); - } - }, [filterQuery, selectedCriticality]); + onFilterChanged(filterQueryV2); + }, [onFilterChanged, filterQueryV2, isDataFilterEnabled]); useEffect(() => { - if (!selectedEnvironment?.id) { - return; - } - - if (selectedEnvironment.id !== filterQuery.environmentId) { - setFilterQuery({ ...filterQuery, environmentId: selectedEnvironment.id }); - } - }, [filterQuery, selectedEnvironment]); + setSelectedEnvironment( + environments?.length && environments?.length > 0 ? environments[0] : null + ); + setServicesFromStore([]); + }, [environments]); const handleSelectedEnvironmentChanged = (option: string | string[]) => { sendUserActionTrackingEvent(trackingEvents.ENVIRONMENT_FILTER_SELECTED); @@ -149,6 +152,7 @@ export const ReportHeader = ({ const newItemEnv = environments?.find((x) => x.id === newItem[0]) ?? null; setSelectedEnvironment(newItemEnv); setSelectedServices([]); + setServicesFromStore([]); }; const handleSelectedServicesChanged = (option: string | string[]) => { @@ -242,21 +246,22 @@ export const ReportHeader = ({ /> )} - ({ - label: item.label, - value: item.id, - enabled: true, - selected: selectedCriticality.includes(item.id) - })) ?? [] - } - showSelectedState={false} - multiselect={true} - icon={WrenchIcon} - onChange={handleDataChanged} - placeholder={"Data"} - /> + {isDataFilterEnabled && ( + ({ + label: item.label, + value: item.id, + enabled: true, + selected: selectedCriticality.includes(item.id) + })) ?? [] + } + multiselect={true} + icon={WrenchIcon} + onChange={handleDataChanged} + placeholder={"Data"} + /> + )} { + const [filterQuery, setFilterQuery] = useState({ + lastDays: null, + services: [], + environmentId: null, + criticalities: [] + }); + const previousTimeMode = usePrevious(timeMode); + const previousSelectedServices = usePrevious(selectedServices); + const previousEnvironment = usePrevious(selectedEnvironment?.id); + const previousPeriod = usePrevious(periodInDays); + + useEffect(() => { + if (!selectedEnvironment?.id) { + return; + } + + setFilterQuery({ + lastDays: timeMode === "baseline" ? null : periodInDays, + services: selectedServices.length > 0 ? selectedServices : services ?? [], + environmentId: selectedEnvironment?.id ?? null, + criticalities: [] + }); + }, [services, selectedEnvironment]); + + useEffect(() => { + if ( + !selectedEnvironment?.id || + services?.length === 0 || + previousEnvironment !== selectedEnvironment.id + ) { + return; + } + + if ( + previousTimeMode !== timeMode || + (isEnvironment(selectedEnvironment) && + previousEnvironment !== selectedEnvironment.id) || + previousSelectedServices !== selectedServices || + (isNumber(periodInDays) && previousPeriod !== periodInDays) + ) { + setFilterQuery({ + lastDays: timeMode === "baseline" ? null : periodInDays, + services: + selectedServices.length > 0 ? selectedServices : services ?? [], + environmentId: selectedEnvironment?.id ?? null, + criticalities: [] + }); + } + }, [ + periodInDays, + timeMode, + selectedServices, + selectedEnvironment, + previousEnvironment, + previousTimeMode, + previousPeriod, + previousSelectedServices, + services + ]); + + return { filterQuery }; +}; diff --git a/src/components/Dashboard/NewReport/ReportHeader/useReportQueryV2.ts b/src/components/Dashboard/NewReport/ReportHeader/useReportQueryV2.ts new file mode 100644 index 000000000..0f5fd9513 --- /dev/null +++ b/src/components/Dashboard/NewReport/ReportHeader/useReportQueryV2.ts @@ -0,0 +1,62 @@ +import { useEffect, useState } from "react"; +import { usePrevious } from "../../../../hooks/usePrevious"; +import { Environment } from "../../../common/App/types"; +import { ReportFilterQuery } from "../types"; +import { ReportTimeMode } from "./types"; + +export const useReportQueryV2 = ({ + selectedEnvironment, + selectedServices, + timeMode, + periodInDays, + selectedCriticality +}: { + selectedEnvironment: Environment | null; + selectedServices: string[]; + timeMode: ReportTimeMode; + periodInDays: number; + selectedCriticality: string[]; +}) => { + const [filterQuery, setFilterQuery] = useState({ + lastDays: null, + services: [], + environmentId: null, + criticalities: [] + }); + const previousTimeMode = usePrevious(timeMode); + + useEffect(() => { + if (selectedServices !== filterQuery.services) { + setFilterQuery({ ...filterQuery, services: selectedServices }); + } + }, [filterQuery, selectedServices]); + + useEffect(() => { + if (timeMode === "baseline" && filterQuery.lastDays !== null) { + setFilterQuery({ ...filterQuery, lastDays: null }); + return; + } + + if (timeMode === "changes" && periodInDays !== filterQuery.lastDays) { + setFilterQuery({ ...filterQuery, lastDays: periodInDays }); + } + }, [periodInDays, filterQuery, timeMode, previousTimeMode]); + + useEffect(() => { + if (selectedCriticality !== filterQuery.criticalities) { + setFilterQuery({ ...filterQuery, criticalities: selectedCriticality }); + } + }, [filterQuery, selectedCriticality]); + + useEffect(() => { + if (!selectedEnvironment?.id) { + return; + } + + if (selectedEnvironment.id !== filterQuery.environmentId) { + setFilterQuery({ ...filterQuery, environmentId: selectedEnvironment.id }); + } + }, [filterQuery, selectedEnvironment]); + + return { filterQuery }; +}; diff --git a/src/featureFlags.ts b/src/featureFlags.ts index 4d868d83b..e598f97e0 100644 --- a/src/featureFlags.ts +++ b/src/featureFlags.ts @@ -16,7 +16,8 @@ export const featureFlagMinBackendVersions: Record = { [FeatureFlag.ARE_EXTENDED_ASSETS_FILTERS_ENABLED]: "0.3.107", [FeatureFlag.IS_NEW_IMPACT_SCORE_CALCULATION_ENABLED]: "0.3.107", [FeatureFlag.IS_METRICS_REPORT_ENABLED]: "0.3.120-alpha.15", - [FeatureFlag.IS_METRICS_REPORT_CRITICALITY_ENABLED]: "0.3.121" + [FeatureFlag.IS_METRICS_REPORT_CRITICALITY_ENABLED]: "0.3.121", + [FeatureFlag.IS_METRICS_REPORT_DATA_FILTER_ENABLED]: "0.3.122" }; export const getFeatureFlagValue = ( diff --git a/src/types.ts b/src/types.ts index e3790e4ce..94fac5c35 100644 --- a/src/types.ts +++ b/src/types.ts @@ -18,7 +18,8 @@ export enum FeatureFlag { ARE_EXTENDED_ASSETS_FILTERS_ENABLED, IS_NEW_IMPACT_SCORE_CALCULATION_ENABLED, IS_METRICS_REPORT_ENABLED, - IS_METRICS_REPORT_CRITICALITY_ENABLED + IS_METRICS_REPORT_CRITICALITY_ENABLED, + IS_METRICS_REPORT_DATA_FILTER_ENABLED } export enum InsightType {