Merge pull request #1066 from digma-ai/report-fix

Report fix

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

@@ -11,16 +11,14 @@ import { actions } from "../../actions";
 import { usePrevious } from "../../../../hooks/usePrevious";
 import { Environment } from "../../../common/App/types";
 
-import { isEnvironment } from "../../../../typeGuards/isEnvironment";
-import { isNumber } from "../../../../typeGuards/isNumber";
 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 } from "../types";
+import { GetServicesPayload, ReportFilterQuery } from "../types";
 import * as s from "./styles";
 import { ReportHeaderProps, ReportTimeMode, ReportViewMode } from "./types";
 
@@ -35,6 +33,21 @@ const dataFetcherFiltersConfiguration: DataFetcherConfiguration = {
   ...baseFetchConfig
 };
 
+const criticalityOptions = [
+  {
+    id: "High",
+    label: "Critical"
+  },
+  {
+    id: "Medium",
+    label: "Medium"
+  },
+  {
+    id: "Low",
+    label: "Low"
+  }
+];
+
 export const formatUnit = (value: number, unit: string) =>
   value === 1 ? `${value} ${unit}` : `${value} ${unit}s`;
 
@@ -49,14 +62,20 @@ export const ReportHeader = ({
   const [viewMode, setVieMode] = useState<ReportViewMode>("table");
   const [timeMode, setTimeMode] = useState<ReportTimeMode>("baseline");
   const [selectedServices, setSelectedServices] = useState<string[]>([]);
-  const [servicesFromStore, setServicesFromStore] = useState<string[]>([]);
   const [selectedEnvironment, setSelectedEnvironment] =
     useState<Environment | null>(null);
+  const [selectedCriticality, setSelectedCriticality] = useState<string[]>(
+    criticalityOptions.map((x) => x.id)
+  );
 
-  const previousSelectedServices = usePrevious(selectedServices);
-  const previousEnvironment = usePrevious(selectedEnvironment);
   const previousTimeMode = usePrevious(timeMode);
-  const previousPeriod = usePrevious(periodInDays);
+
+  const [filterQuery, setFilterQuery] = useState<ReportFilterQuery>({
+    lastDays: null,
+    services: [],
+    environmentId: null,
+    criticalities: []
+  });
 
   const getServicesPayload = useMemo(
     () => ({ environment: selectedEnvironment?.id ?? null }),
@@ -67,77 +86,56 @@ export const ReportHeader = ({
     GetServicesPayload,
     string[]
   >(dataFetcherFiltersConfiguration, getServicesPayload);
-  const previousServices = usePrevious(services);
-
-  useEffect(() => {
-    setServicesFromStore(services ?? []);
-  }, [services, setServicesFromStore]);
 
   useEffect(() => {
     getData();
   }, []);
 
+  useEffect(() => {
+    if (!filterQuery.environmentId) {
+      return;
+    }
+
+    onFilterChanged(filterQuery);
+  }, [onFilterChanged, filterQuery]);
+
   useEffect(() => {
     setSelectedEnvironment(
       environments?.length && environments?.length > 0 ? environments[0] : null
     );
-    setServicesFromStore([]);
   }, [environments]);
 
   useEffect(() => {
-    if (!selectedEnvironment?.id) {
-      return;
+    if (selectedServices !== filterQuery.services) {
+      setFilterQuery({ ...filterQuery, services: selectedServices });
+    }
+  }, [filterQuery, selectedServices]);
+
+  useEffect(() => {
+    if (timeMode === "baseline" && previousTimeMode !== timeMode) {
+      setFilterQuery({ ...filterQuery, lastDays: null });
+    }
+
+    if (periodInDays !== filterQuery.lastDays) {
+      setFilterQuery({ ...filterQuery, lastDays: periodInDays });
     }
+  }, [periodInDays, filterQuery, timeMode, previousTimeMode]);
 
-    onFilterChanged({
-      lastDays: timeMode === "baseline" ? null : periodInDays,
-      services:
-        selectedServices.length > 0
-          ? selectedServices
-          : servicesFromStore ?? [],
-      environmentId: selectedEnvironment?.id ?? null
-    });
-  }, [servicesFromStore, selectedEnvironment]);
+  useEffect(() => {
+    if (selectedCriticality !== filterQuery.criticalities) {
+      setFilterQuery({ ...filterQuery, criticalities: selectedCriticality });
+    }
+  }, [filterQuery, selectedCriticality]);
 
   useEffect(() => {
-    if (
-      !selectedEnvironment?.id ||
-      getServicesPayload.environment !== selectedEnvironment.id ||
-      servicesFromStore.length === 0
-    ) {
+    if (!selectedEnvironment?.id) {
       return;
     }
 
-    if (
-      previousTimeMode !== timeMode ||
-      (isEnvironment(selectedEnvironment) &&
-        previousEnvironment !== selectedEnvironment) ||
-      previousSelectedServices !== selectedServices ||
-      (isNumber(periodInDays) && previousPeriod !== periodInDays)
-    ) {
-      onFilterChanged({
-        lastDays: timeMode === "baseline" ? null : periodInDays,
-        services:
-          selectedServices.length > 0
-            ? selectedServices
-            : servicesFromStore ?? [],
-        environmentId: selectedEnvironment?.id ?? null
-      });
+    if (selectedEnvironment.id !== filterQuery.environmentId) {
+      setFilterQuery({ ...filterQuery, environmentId: selectedEnvironment.id });
     }
-  }, [
-    periodInDays,
-    timeMode,
-    selectedServices,
-    selectedEnvironment,
-    onFilterChanged,
-    previousEnvironment,
-    previousTimeMode,
-    previousPeriod,
-    previousSelectedServices,
-    previousServices,
-    getServicesPayload,
-    servicesFromStore
-  ]);
+  }, [filterQuery, selectedEnvironment]);
 
   const handleSelectedEnvironmentChanged = (option: string | string[]) => {
     sendUserActionTrackingEvent(trackingEvents.ENVIRONMENT_FILTER_SELECTED);
@@ -151,7 +149,6 @@ export const ReportHeader = ({
     const newItemEnv = environments?.find((x) => x.id === newItem[0]) ?? null;
     setSelectedEnvironment(newItemEnv);
     setSelectedServices([]);
-    setServicesFromStore([]);
   };
 
   const handleSelectedServicesChanged = (option: string | string[]) => {
@@ -160,6 +157,12 @@ export const ReportHeader = ({
     setSelectedServices(newItem);
   };
 
+  const handleDataChanged = (option: string | string[]) => {
+    sendUserActionTrackingEvent(trackingEvents.DATA_FILTER_SELECTED);
+    const newItem = Array.isArray(option) ? option : [option];
+    setSelectedCriticality(newItem);
+  };
+
   const handlePeriodChanged = (option: string | string[]) => {
     sendUserActionTrackingEvent(trackingEvents.PERIOD_FILTER_CHANGED);
     const newItem = Array.isArray(option) ? option : [option];
@@ -232,12 +235,29 @@ export const ReportHeader = ({
                 selected: x === periodInDays,
                 enabled: true
               }))}
+              showSelectedState={false}
               icon={DurationBreakdownIcon}
               onChange={handlePeriodChanged}
               placeholder={`Period: ${formatUnit(periodInDays, "day")}`}
             />
           )}
 
+          <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"}
+          />
+
           <s.FilterSelect
             items={
               services?.sort()?.map((service) => ({

src/components/Dashboard/NewReport/index.tsx

@@ -17,7 +17,8 @@ import { useReportsData } from "./useReportsData";
 const DefaultQuery: ReportFilterQuery = {
   environmentId: "",
   services: [],
-  lastDays: null
+  lastDays: null,
+  criticalities: []
 };
 
 export const NewReport = () => {
@@ -58,7 +59,7 @@ export const NewReport = () => {
     });
   };
 
-  const serviceData = (query?.services.length > 0 ? data?.reports : null) ?? [];
+  const serviceData = data?.reports ?? [];
   const transformedData = serviceData.map((service) => ({
     ...service,
     [scoreCriterion]: Math.round(service[scoreCriterion] * 100)

src/components/Dashboard/NewReport/tracking.ts

@@ -9,6 +9,7 @@ export const trackingEvents = addPrefix(
     DOWNLOAD_REPORT_CLICKED: "download report data clicked",
     ENVIRONMENT_FILTER_SELECTED: "environment filter selected",
     SERVICES_FILTER_SELECTED: "service filter selected",
+    DATA_FILTER_SELECTED: "data filter selected",
     TABLE_SEE_ISSUES_LINK_CLICKED: "table see issues link clicked",
     HEATMAP_SEE_ISSUES_LINK_CLICKED: "heatmap see issues link clicked",
     PERIOD_FILTER_CHANGED: "period filter changed",

src/components/Dashboard/NewReport/types.ts

@@ -2,6 +2,7 @@ export interface ReportFilterQuery {
   environmentId: string | null;
   services: string[];
   scope?: string;
+  criticalities: string[];
 }
 
 export interface ReportQuery {

src/components/Dashboard/NewReport/useReportsData.ts

@@ -19,14 +19,9 @@ const dataFetcherIssuesStatsConfiguration: DataFetcherConfiguration = {
 
 export const useReportsData = (query: ReportFilterQuery) => {
   const payload = useMemo(() => {
-    if (!query.environmentId && !(query.services?.length > 0)) {
-      return {
-        keys: []
-      };
-    }
-
     if (!(query.services?.length > 0)) {
       return {
+        criticalities: query.criticalities,
         keys: [
           {
             environment: query.environmentId,
@@ -38,6 +33,7 @@ export const useReportsData = (query: ReportFilterQuery) => {
     }
 
     return {
+      criticalities: query.criticalities,
       keys: query.services.map((x) => ({
         environment: query.environmentId,
         service: x,