From c3d9585cd59cfb4dca1e2d7f3d5ff54858f70751 Mon Sep 17 00:00:00 2001 From: opoliarush Date: Fri, 20 Sep 2024 17:13:47 +0300 Subject: [PATCH 1/2] refactored data fetch --- .../NewReport/ReportHeader/index.tsx | 89 +++++++------------ 1 file changed, 31 insertions(+), 58 deletions(-) diff --git a/src/components/Dashboard/NewReport/ReportHeader/index.tsx b/src/components/Dashboard/NewReport/ReportHeader/index.tsx index 52bdc944..74bf6648 100644 --- a/src/components/Dashboard/NewReport/ReportHeader/index.tsx +++ b/src/components/Dashboard/NewReport/ReportHeader/index.tsx @@ -11,8 +11,6 @@ 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"; @@ -20,7 +18,7 @@ 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"; @@ -49,14 +47,17 @@ export const ReportHeader = ({ const [viewMode, setVieMode] = useState("table"); const [timeMode, setTimeMode] = useState("baseline"); const [selectedServices, setSelectedServices] = useState([]); - const [servicesFromStore, setServicesFromStore] = useState([]); const [selectedEnvironment, setSelectedEnvironment] = useState(null); - const previousSelectedServices = usePrevious(selectedServices); const previousEnvironment = usePrevious(selectedEnvironment); const previousTimeMode = usePrevious(timeMode); - const previousPeriod = usePrevious(periodInDays); + + const [filterQuery, setFilterQuery] = useState({ + lastDays: null, + services: [], + environmentId: null + }); const getServicesPayload = useMemo( () => ({ environment: selectedEnvironment?.id ?? null }), @@ -67,77 +68,50 @@ 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]); - onFilterChanged({ - lastDays: timeMode === "baseline" ? null : periodInDays, - services: - selectedServices.length > 0 - ? selectedServices - : servicesFromStore ?? [], - environmentId: selectedEnvironment?.id ?? null - }); - }, [servicesFromStore, selectedEnvironment]); + useEffect(() => { + if (timeMode === "baseline" && previousTimeMode !== timeMode) { + setFilterQuery({ ...filterQuery, lastDays: null }); + } + + if (periodInDays !== filterQuery.lastDays) { + setFilterQuery({ ...filterQuery, lastDays: periodInDays }); + } + }, [periodInDays, filterQuery, timeMode, previousTimeMode]); 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, previousEnvironment, selectedEnvironment]); const handleSelectedEnvironmentChanged = (option: string | string[]) => { sendUserActionTrackingEvent(trackingEvents.ENVIRONMENT_FILTER_SELECTED); @@ -151,7 +125,6 @@ export const ReportHeader = ({ const newItemEnv = environments?.find((x) => x.id === newItem[0]) ?? null; setSelectedEnvironment(newItemEnv); setSelectedServices([]); - setServicesFromStore([]); }; const handleSelectedServicesChanged = (option: string | string[]) => { From 5a0f05a76564e7dfa4f8b12235ca0b277fe0b6a7 Mon Sep 17 00:00:00 2001 From: opoliarush Date: Mon, 23 Sep 2024 23:07:51 +0300 Subject: [PATCH 2/2] Added new options --- .../NewReport/ReportHeader/index.tsx | 53 +++++++++++++++++-- src/components/Dashboard/NewReport/index.tsx | 5 +- .../Dashboard/NewReport/tracking.ts | 1 + src/components/Dashboard/NewReport/types.ts | 1 + .../Dashboard/NewReport/useReportsData.ts | 8 +-- 5 files changed, 57 insertions(+), 11 deletions(-) diff --git a/src/components/Dashboard/NewReport/ReportHeader/index.tsx b/src/components/Dashboard/NewReport/ReportHeader/index.tsx index 74bf6648..8f7dabdc 100644 --- a/src/components/Dashboard/NewReport/ReportHeader/index.tsx +++ b/src/components/Dashboard/NewReport/ReportHeader/index.tsx @@ -33,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 +64,17 @@ export const ReportHeader = ({ const [selectedServices, setSelectedServices] = useState([]); const [selectedEnvironment, setSelectedEnvironment] = useState(null); + const [selectedCriticality, setSelectedCriticality] = useState( + criticalityOptions.map((x) => x.id) + ); - const previousEnvironment = usePrevious(selectedEnvironment); const previousTimeMode = usePrevious(timeMode); const [filterQuery, setFilterQuery] = useState({ lastDays: null, services: [], - environmentId: null + environmentId: null, + criticalities: [] }); const getServicesPayload = useMemo( @@ -103,6 +121,12 @@ export const ReportHeader = ({ } }, [periodInDays, filterQuery, timeMode, previousTimeMode]); + useEffect(() => { + if (selectedCriticality !== filterQuery.criticalities) { + setFilterQuery({ ...filterQuery, criticalities: selectedCriticality }); + } + }, [filterQuery, selectedCriticality]); + useEffect(() => { if (!selectedEnvironment?.id) { return; @@ -111,7 +135,7 @@ export const ReportHeader = ({ if (selectedEnvironment.id !== filterQuery.environmentId) { setFilterQuery({ ...filterQuery, environmentId: selectedEnvironment.id }); } - }, [filterQuery, previousEnvironment, selectedEnvironment]); + }, [filterQuery, selectedEnvironment]); const handleSelectedEnvironmentChanged = (option: string | string[]) => { sendUserActionTrackingEvent(trackingEvents.ENVIRONMENT_FILTER_SELECTED); @@ -133,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]; @@ -205,12 +235,29 @@ export const ReportHeader = ({ selected: x === periodInDays, enabled: true }))} + showSelectedState={false} icon={DurationBreakdownIcon} onChange={handlePeriodChanged} placeholder={`Period: ${formatUnit(periodInDays, "day")}`} /> )} + ({ + label: item.label, + value: item.id, + enabled: true, + selected: selectedCriticality.includes(item.id) + })) ?? [] + } + showSelectedState={false} + multiselect={true} + icon={WrenchIcon} + onChange={handleDataChanged} + placeholder={"Data"} + /> + ({ diff --git a/src/components/Dashboard/NewReport/index.tsx b/src/components/Dashboard/NewReport/index.tsx index ca211e07..6bb07015 100644 --- a/src/components/Dashboard/NewReport/index.tsx +++ b/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) diff --git a/src/components/Dashboard/NewReport/tracking.ts b/src/components/Dashboard/NewReport/tracking.ts index df35c739..c0f7d7ba 100644 --- a/src/components/Dashboard/NewReport/tracking.ts +++ b/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", diff --git a/src/components/Dashboard/NewReport/types.ts b/src/components/Dashboard/NewReport/types.ts index 564512af..d170ed0c 100644 --- a/src/components/Dashboard/NewReport/types.ts +++ b/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 { diff --git a/src/components/Dashboard/NewReport/useReportsData.ts b/src/components/Dashboard/NewReport/useReportsData.ts index 004a9954..bbbbb1a7 100644 --- a/src/components/Dashboard/NewReport/useReportsData.ts +++ b/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,