added feature toggle

src/components/Dashboard/NewReport/ReportHeader/index.tsx

@@ -8,19 +8,22 @@
 
 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";
 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 @@
   onFilterChanged,
   onViewModeChanged
 }: ReportHeaderProps) => {
-  const { environments } = useConfigSelector();
+  const { environments, backendInfo } = useConfigSelector();
   const [periodInDays, setPeriodInDays] = useState(DEFAULT_PERIOD);
   const [viewMode, setVieMode] = useState<ReportViewMode>("table");
   const [timeMode, setTimeMode] = useState<ReportTimeMode>("baseline");
   const [selectedServices, setSelectedServices] = useState<string[]>([]);
   const [selectedEnvironment, setSelectedEnvironment] =
     useState<Environment | null>(null);
-  const [selectedCriticality, setSelectedCriticality] = useState<string[]>(
-    criticalityOptions.map((x) => x.id)
-  );
-
-  const previousTimeMode = usePrevious(timeMode);
+  const [selectedCriticality, setSelectedCriticality] = useState<string[]>([]);
+  const [servicesFromStore, setServicesFromStore] = useState<string[]>([]);
 
-  const [filterQuery, setFilterQuery] = useState<ReportFilterQuery>({
-    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 @@
     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 @@
     const newItemEnv = environments?.find((x) => x.id === newItem[0]) ?? null;
     setSelectedEnvironment(newItemEnv);
     setSelectedServices([]);
+    setServicesFromStore([]);
   };
 
   const handleSelectedServicesChanged = (option: string | string[]) => {
@@ -242,21 +246,22 @@
             />
           )}
 
-          <s.FilterSelect
-            items={
-              criticalityOptions.map((item) => ({
-                label: item.label,
-                value: item.id,
-                enabled: true,
-                selected: selectedCriticality.includes(item.id)
-              })) ?? []
-            }
-            showSelectedState={false}
-            multiselect={true}
-            icon={WrenchIcon}
-            onChange={handleDataChanged}
-            placeholder={"Data"}
-          />
+          {isDataFilterEnabled && (
+            <s.FilterSelect
+              items={
+                criticalityOptions.map((item) => ({
+                  label: item.label,
+                  value: item.id,
+                  enabled: true,
+                  selected: selectedCriticality.includes(item.id)
+                })) ?? []
+              }
+              multiselect={true}
+              icon={WrenchIcon}
+              onChange={handleDataChanged}
+              placeholder={"Data"}
+            />
+          )}
 
           <s.FilterSelect
             items={

src/components/Dashboard/NewReport/ReportHeader/styles.ts

@@ -21,6 +21,7 @@ export const Row = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 18px;
 `;
 
 export const FilterSelect = styled(Select)`

src/components/Dashboard/NewReport/ReportHeader/useReportQuery.ts

@@ -0,0 +1,83 @@
+import { useEffect, useState } from "react";
+import { usePrevious } from "../../../../hooks/usePrevious";
+import { isEnvironment } from "../../../../typeGuards/isEnvironment";
+import { isNumber } from "../../../../typeGuards/isNumber";
+import { Environment } from "../../../common/App/types";
+import { ReportFilterQuery } from "../types";
+import { ReportTimeMode } from "./types";
+
+export const useReportQuery = ({
+  selectedEnvironment,
+  selectedServices,
+  timeMode,
+  periodInDays,
+  services
+}: {
+  selectedEnvironment: Environment | null;
+  selectedServices: string[];
+  timeMode: ReportTimeMode;
+  periodInDays: number;
+  services?: string[];
+}) => {
+  const [filterQuery, setFilterQuery] = useState<ReportFilterQuery>({
+    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 };
+};

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<ReportFilterQuery>({
+    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 };
+};

src/featureFlags.ts

@@ -16,7 +16,8 @@ export const featureFlagMinBackendVersions: Record<FeatureFlag, string> = {
   [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 = (

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 {