From 1bd717f1c312741702eb186cf08bb9f0593aabc1 Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 9 Feb 2024 15:14:32 +0200 Subject: [PATCH 1/7] fixed screen error message during loading --- .../Insights/tickets/common/useEndpointDataSource.ts | 10 +++++++++- .../Insights/tickets/common/useSpanDataSource.ts | 10 +++++++++- src/components/common/JiraTicket/index.tsx | 6 +++++- 3 files changed, 23 insertions(+), 3 deletions(-) diff --git a/src/components/Insights/tickets/common/useEndpointDataSource.ts b/src/components/Insights/tickets/common/useEndpointDataSource.ts index 85c8b82c2..efcd943fb 100644 --- a/src/components/Insights/tickets/common/useEndpointDataSource.ts +++ b/src/components/Insights/tickets/common/useEndpointDataSource.ts @@ -11,9 +11,16 @@ export const useEndpointDataSource = < spanInfo: SpanInfo | null, insightType: InsightType ) => { - const [isLoading, setIsLoading] = useState(false); + const [isLoading, setIsLoading] = useState(true); const [spanInsight, setSpanInsight] = useState(null); + useEffect(() => { + const timerId = setTimeout(() => setIsLoading(false), 30 * 1000); + return () => { + clearTimeout(timerId); + }; + }, []); + const { isLoading: isInsightMetaIsLoading, codeLocations, @@ -48,6 +55,7 @@ export const useEndpointDataSource = < useEffect(() => { const spanCodeObjectId = spanInfo?.spanCodeObjectId; setIsLoading(true); + window.sendMessageToDigma({ action: actions.GET_SPAN_INSIGHT, payload: { diff --git a/src/components/Insights/tickets/common/useSpanDataSource.ts b/src/components/Insights/tickets/common/useSpanDataSource.ts index f4489c314..aaaa662f6 100644 --- a/src/components/Insights/tickets/common/useSpanDataSource.ts +++ b/src/components/Insights/tickets/common/useSpanDataSource.ts @@ -9,7 +9,15 @@ export const useSpanDataSource = ( spanInfo: SpanInfo | null, insight: TInsight | null ) => { - const [isLoading, setIsLoading] = useState(false); + const [isLoading, setIsLoading] = useState(true); + + useEffect(() => { + const timerId = setTimeout(() => setIsLoading(false), 30 * 1000); + return () => { + clearTimeout(timerId); + }; + }, []); + const { commitInfos, isLoading: isCommitInfoLoading } = useCommitInfos(insight); const { codeLocations, isLoading: isCodeLocationsLoading } = diff --git a/src/components/common/JiraTicket/index.tsx b/src/components/common/JiraTicket/index.tsx index a1bfdfdaf..370d15733 100644 --- a/src/components/common/JiraTicket/index.tsx +++ b/src/components/common/JiraTicket/index.tsx @@ -98,6 +98,10 @@ export const JiraTicket = (props: JiraTicketProps) => { } }; + const errorMessage = props.description.isLoading + ? "" + : props.description.errorMessage; + return ( @@ -141,7 +145,7 @@ export const JiraTicket = (props: JiraTicketProps) => { )} } - errorMessage={props.description.errorMessage} + errorMessage={errorMessage} button={ Date: Fri, 9 Feb 2024 15:38:48 +0200 Subject: [PATCH 2/7] change loading --- .../Insights/tickets/common/index.ts | 1 + .../tickets/common/useCodeLocations.ts | 3 ++- .../Insights/tickets/common/useCommitInfos.ts | 3 ++- .../tickets/common/useEndpointDataSource.ts | 3 ++- .../Insights/tickets/common/useLoading.ts | 21 +++++++++++++++++++ .../tickets/common/useSpanDataSource.ts | 12 +++-------- 6 files changed, 31 insertions(+), 12 deletions(-) create mode 100644 src/components/Insights/tickets/common/useLoading.ts diff --git a/src/components/Insights/tickets/common/index.ts b/src/components/Insights/tickets/common/index.ts index 7d0996f4a..3d49f5ef1 100644 --- a/src/components/Insights/tickets/common/index.ts +++ b/src/components/Insights/tickets/common/index.ts @@ -1,4 +1,5 @@ export { useCodeLocations } from "./useCodeLocations"; export { useCommitInfos } from "./useCommitInfos"; export { useEndpointDataSource } from "./useEndpointDataSource"; +export { useLoading } from "./useLoading"; export { useSpanDataSource } from "./useSpanDataSource"; diff --git a/src/components/Insights/tickets/common/useCodeLocations.ts b/src/components/Insights/tickets/common/useCodeLocations.ts index 7a795c6a0..df7dec380 100644 --- a/src/components/Insights/tickets/common/useCodeLocations.ts +++ b/src/components/Insights/tickets/common/useCodeLocations.ts @@ -3,9 +3,10 @@ import { dispatcher } from "../../../../dispatcher"; import { SpanInfo } from "../../../../types"; import { actions } from "../../actions"; import { CodeLocationsData } from "../types"; +import { useLoading } from "./useLoading"; export const useCodeLocations = (spanInfo: SpanInfo | null) => { - const [isLoading, setIsLoading] = useState(false); + const { isLoading, setIsLoading } = useLoading(false); const [codeLocations, setCodeLocations] = useState([]); useEffect(() => { diff --git a/src/components/Insights/tickets/common/useCommitInfos.ts b/src/components/Insights/tickets/common/useCommitInfos.ts index 5f859ff46..0f34836f8 100644 --- a/src/components/Insights/tickets/common/useCommitInfos.ts +++ b/src/components/Insights/tickets/common/useCommitInfos.ts @@ -4,11 +4,12 @@ import { actions } from "../../actions"; import { GenericCodeObjectInsight } from "../../types"; import { getInsightCommits } from "../getInsightCommits"; import { CommitInfosData } from "../types"; +import { useLoading } from "./useLoading"; export const useCommitInfos = ( insight: TInsight | null ) => { - const [isLoading, setIsLoading] = useState(false); + const { isLoading, setIsLoading } = useLoading(false); const [commitInfos, setCommitInfos] = useState(null); useEffect(() => { diff --git a/src/components/Insights/tickets/common/useEndpointDataSource.ts b/src/components/Insights/tickets/common/useEndpointDataSource.ts index efcd943fb..aa6957643 100644 --- a/src/components/Insights/tickets/common/useEndpointDataSource.ts +++ b/src/components/Insights/tickets/common/useEndpointDataSource.ts @@ -3,6 +3,7 @@ import { dispatcher } from "../../../../dispatcher"; import { InsightType, SpanInfo } from "../../../../types"; import { actions } from "../../actions"; import { GenericCodeObjectInsight } from "../../types"; +import { useLoading } from "./useLoading"; import { useSpanDataSource } from "./useSpanDataSource"; export const useEndpointDataSource = < @@ -11,7 +12,7 @@ export const useEndpointDataSource = < spanInfo: SpanInfo | null, insightType: InsightType ) => { - const [isLoading, setIsLoading] = useState(true); + const { isLoading, setIsLoading } = useLoading(true); const [spanInsight, setSpanInsight] = useState(null); useEffect(() => { diff --git a/src/components/Insights/tickets/common/useLoading.ts b/src/components/Insights/tickets/common/useLoading.ts new file mode 100644 index 000000000..ce3ce79f1 --- /dev/null +++ b/src/components/Insights/tickets/common/useLoading.ts @@ -0,0 +1,21 @@ +import { useEffect, useState } from "react"; + +export const useLoading = (defaultValue: boolean, cancelTimeoutSec = 30) => { + const [isLoading, setIsLoading] = useState(defaultValue); + + useEffect(() => { + if (!defaultValue) { + return; + } + + const timerId = setTimeout( + () => setIsLoading(false), + cancelTimeoutSec * 1000 + ); + return () => { + clearTimeout(timerId); + }; + }, []); + + return { isLoading, setIsLoading }; +}; diff --git a/src/components/Insights/tickets/common/useSpanDataSource.ts b/src/components/Insights/tickets/common/useSpanDataSource.ts index aaaa662f6..4e766a4df 100644 --- a/src/components/Insights/tickets/common/useSpanDataSource.ts +++ b/src/components/Insights/tickets/common/useSpanDataSource.ts @@ -1,22 +1,16 @@ -import { useEffect, useState } from "react"; +import { useEffect } from "react"; import { SpanInfo } from "../../../../types"; import { GenericCodeObjectInsight } from "../../types"; import { getInsightCommits } from "../getInsightCommits"; import { useCodeLocations } from "./useCodeLocations"; import { useCommitInfos } from "./useCommitInfos"; +import { useLoading } from "./useLoading"; export const useSpanDataSource = ( spanInfo: SpanInfo | null, insight: TInsight | null ) => { - const [isLoading, setIsLoading] = useState(true); - - useEffect(() => { - const timerId = setTimeout(() => setIsLoading(false), 30 * 1000); - return () => { - clearTimeout(timerId); - }; - }, []); + const { isLoading, setIsLoading } = useLoading(true); const { commitInfos, isLoading: isCommitInfoLoading } = useCommitInfos(insight); From 2fb2da5d8ae0daf6aaff1454ef7e4d93917d03cf Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 9 Feb 2024 17:27:52 +0200 Subject: [PATCH 3/7] fixed asset filter refresh --- src/components/Assets/AssetsFilter/index.tsx | 48 ++++++++++++-------- 1 file changed, 30 insertions(+), 18 deletions(-) diff --git a/src/components/Assets/AssetsFilter/index.tsx b/src/components/Assets/AssetsFilter/index.tsx index c8f419d44..2111d1937 100644 --- a/src/components/Assets/AssetsFilter/index.tsx +++ b/src/components/Assets/AssetsFilter/index.tsx @@ -168,7 +168,22 @@ export const AssetsFilter = (props: AssetsFilterProps) => { }, [props.data]); useEffect(() => { - if (previousData !== data) { + const setupRefresh = ( + services: string[], + operations: string[], + insights: InsightType[] + ) => { + if (!isOpen) { + return; + } + + window.clearTimeout(refreshTimerId.current); + refreshTimerId.current = window.setTimeout(() => { + getData(services, operations, insights); + }, REFRESH_INTERVAL); + }; + + if (previousData !== data || (!previousIsOpen && isOpen)) { if (!isNull(data?.data)) { const servicesToSelect = data?.data?.categories @@ -223,23 +238,17 @@ export const AssetsFilter = (props: AssetsFilterProps) => { props.onApply(filtersQuery); } - window.clearTimeout(refreshTimerId.current); - refreshTimerId.current = window.setTimeout(() => { - getData( - servicesToSelect, - [...endpointsToSelect, ...consumersToSelect, ...internalsToSelect], - insightsToSelect - ); - }, REFRESH_INTERVAL); + setupRefresh( + servicesToSelect, + [...endpointsToSelect, ...consumersToSelect, ...internalsToSelect], + insightsToSelect + ); } else { - window.clearTimeout(refreshTimerId.current); - refreshTimerId.current = window.setTimeout(() => { - getData( - selectedServices, - [...selectedEndpoints, ...selectedConsumers, ...selectedInternals], - selectedInsights - ); - }, REFRESH_INTERVAL); + setupRefresh( + selectedServices, + [...selectedEndpoints, ...selectedConsumers, ...selectedInternals], + selectedInsights + ); } } }, [ @@ -252,7 +261,9 @@ export const AssetsFilter = (props: AssetsFilterProps) => { selectedConsumers, selectedInternals, selectedInsights, - setPersistedFilters + setPersistedFilters, + isOpen, + previousIsOpen ]); useEffect(() => { @@ -269,6 +280,7 @@ export const AssetsFilter = (props: AssetsFilterProps) => { props.onApply(filtersQuery); setPersistedFilters(filtersQuery); sendTrackingEvent(trackingEvents.FILTER_APPLIED); + window.clearTimeout(refreshTimerId.current); } }, [ previousIsOpen, From d3ad6dbd11dead83522be8368fec3b04ef282eb7 Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 9 Feb 2024 17:57:36 +0200 Subject: [PATCH 4/7] fixed criticality --- .../Insights/SpanBottleneckInsight/index.tsx | 16 +++++++++------- src/components/Insights/styles.ts | 4 +++- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/components/Insights/SpanBottleneckInsight/index.tsx b/src/components/Insights/SpanBottleneckInsight/index.tsx index e883d9b19..e3a4fa4d1 100644 --- a/src/components/Insights/SpanBottleneckInsight/index.tsx +++ b/src/components/Insights/SpanBottleneckInsight/index.tsx @@ -55,12 +55,15 @@ export const SpanBottleneckInsight = (props: SpanBottleneckInsightProps) => { - {`Slowing ${roundTo( - span.probabilityOfBeingBottleneck * 100, - 2 - )}% of the requests (~${getDurationString( - span.avgDurationWhenBeingBottleneck - )})`} + + + {`Slowing ${roundTo( + span.probabilityOfBeingBottleneck * 100, + 2 + )}% of the requests (~${getDurationString( + span.avgDurationWhenBeingBottleneck + )})`} + @@ -76,7 +79,6 @@ export const SpanBottleneckInsight = (props: SpanBottleneckInsightProps) => { ); })} - } diff --git a/src/components/Insights/styles.ts b/src/components/Insights/styles.ts index 920420e34..f56c94656 100644 --- a/src/components/Insights/styles.ts +++ b/src/components/Insights/styles.ts @@ -34,7 +34,9 @@ export const StartupText = styled.span` text-align: center; `; -export const Description = styled.span` +export const Description = styled.div` + display: flex; + gap: 8px; font-size: 14px; color: ${({ theme }) => { switch (theme.mode) { From 7b74a6fc182b704ff6f3c3c66de2284ad25f9d63 Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 9 Feb 2024 18:05:18 +0200 Subject: [PATCH 5/7] fix reload --- src/components/Assets/AssetsFilter/index.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/components/Assets/AssetsFilter/index.tsx b/src/components/Assets/AssetsFilter/index.tsx index 2111d1937..9261e3f8e 100644 --- a/src/components/Assets/AssetsFilter/index.tsx +++ b/src/components/Assets/AssetsFilter/index.tsx @@ -161,6 +161,16 @@ export const AssetsFilter = (props: AssetsFilterProps) => { props.onApply ]); + useEffect(() => { + if (isOpen && !previousIsOpen) { + getData( + selectedServices, + [...selectedEndpoints, ...selectedConsumers, ...selectedInternals], + selectedInsights + ); + } + }, [isOpen, previousIsOpen]); + useEffect(() => { if (props.data) { setData({ data: props.data }); @@ -182,8 +192,8 @@ export const AssetsFilter = (props: AssetsFilterProps) => { getData(services, operations, insights); }, REFRESH_INTERVAL); }; - - if (previousData !== data || (!previousIsOpen && isOpen)) { + const popupIsOpen = !previousIsOpen && isOpen; + if (previousData !== data || popupIsOpen) { if (!isNull(data?.data)) { const servicesToSelect = data?.data?.categories From ea8b51236f5db580cf21c24f88dac371b0b0a1c7 Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 9 Feb 2024 18:58:28 +0200 Subject: [PATCH 6/7] fixed comments --- src/components/Assets/AssetsFilter/index.tsx | 128 +++++++----------- .../tickets/common/useCodeLocations.ts | 2 +- .../Insights/tickets/common/useCommitInfos.ts | 2 +- .../tickets/common/useEndpointDataSource.ts | 9 +- .../Insights/tickets/common/useLoading.ts | 12 +- .../tickets/common/useSpanDataSource.ts | 2 +- 6 files changed, 59 insertions(+), 96 deletions(-) diff --git a/src/components/Assets/AssetsFilter/index.tsx b/src/components/Assets/AssetsFilter/index.tsx index 9261e3f8e..b4ef3fc0f 100644 --- a/src/components/Assets/AssetsFilter/index.tsx +++ b/src/components/Assets/AssetsFilter/index.tsx @@ -2,7 +2,6 @@ import { ComponentType, useContext, useEffect, useRef, useState } from "react"; import { dispatcher } from "../../../dispatcher"; import { usePersistence } from "../../../hooks/usePersistence"; import { usePrevious } from "../../../hooks/usePrevious"; -import { isNull } from "../../../typeGuards/isNull"; import { isNumber } from "../../../typeGuards/isNumber"; import { isString } from "../../../typeGuards/isString"; import { isUndefined } from "../../../typeGuards/isUndefined"; @@ -178,87 +177,58 @@ export const AssetsFilter = (props: AssetsFilterProps) => { }, [props.data]); useEffect(() => { - const setupRefresh = ( - services: string[], - operations: string[], - insights: InsightType[] - ) => { - if (!isOpen) { - return; - } + if (previousData !== data) { + const servicesToSelect = + data?.data?.categories + .find((x) => x.categoryName === "Services") + ?.entries?.filter((x) => x.selected) + .map((x) => x.name) || []; + setSelectedServices(servicesToSelect); - window.clearTimeout(refreshTimerId.current); - refreshTimerId.current = window.setTimeout(() => { - getData(services, operations, insights); - }, REFRESH_INTERVAL); - }; - const popupIsOpen = !previousIsOpen && isOpen; - if (previousData !== data || popupIsOpen) { - if (!isNull(data?.data)) { - const servicesToSelect = - data?.data?.categories - .find((x) => x.categoryName === "Services") - ?.entries?.filter((x) => x.selected) - .map((x) => x.name) || []; - setSelectedServices(servicesToSelect); - - const operationsCategory = data?.data?.categories.find( - (x) => x.categoryName === "Operations" - ); - - const endpointsToSelect = - operationsCategory?.categories - ?.find((x) => x.categoryName === "Endpoints") - ?.entries?.filter((x) => x.selected) - .map((x) => x.name) || []; - setSelectedEndpoints(endpointsToSelect); - - const consumersToSelect = - operationsCategory?.categories - ?.find((x) => x.categoryName === "Consumers") - ?.entries?.filter((x) => x.selected) - .map((x) => x.name) || []; - setSelectedConsumers(consumersToSelect); - - const internalsToSelect = - operationsCategory?.categories - ?.find((x) => x.categoryName === "Internal") - ?.entries?.filter((x) => x.selected) - .map((x) => x.name) || []; - setSelectedInternals(internalsToSelect); - - const insightsToSelect = (data?.data?.categories - .find((x) => x.categoryName === "Insights") + const operationsCategory = data?.data?.categories.find( + (x) => x.categoryName === "Operations" + ); + + const endpointsToSelect = + operationsCategory?.categories + ?.find((x) => x.categoryName === "Endpoints") ?.entries?.filter((x) => x.selected) - .map((x) => x.name) || []) as InsightType[]; - setSelectedInsights(insightsToSelect); - - if (!props.filters) { - const filtersQuery = { - services: servicesToSelect, - operations: [ - ...endpointsToSelect, - ...consumersToSelect, - ...internalsToSelect - ], - insights: insightsToSelect - }; - - setPersistedFilters(filtersQuery); - props.onApply(filtersQuery); - } + .map((x) => x.name) || []; + setSelectedEndpoints(endpointsToSelect); - setupRefresh( - servicesToSelect, - [...endpointsToSelect, ...consumersToSelect, ...internalsToSelect], - insightsToSelect - ); - } else { - setupRefresh( - selectedServices, - [...selectedEndpoints, ...selectedConsumers, ...selectedInternals], - selectedInsights - ); + const consumersToSelect = + operationsCategory?.categories + ?.find((x) => x.categoryName === "Consumers") + ?.entries?.filter((x) => x.selected) + .map((x) => x.name) || []; + setSelectedConsumers(consumersToSelect); + + const internalsToSelect = + operationsCategory?.categories + ?.find((x) => x.categoryName === "Internal") + ?.entries?.filter((x) => x.selected) + .map((x) => x.name) || []; + setSelectedInternals(internalsToSelect); + + const insightsToSelect = (data?.data?.categories + .find((x) => x.categoryName === "Insights") + ?.entries?.filter((x) => x.selected) + .map((x) => x.name) || []) as InsightType[]; + setSelectedInsights(insightsToSelect); + + if (!props.filters) { + const filtersQuery = { + services: servicesToSelect, + operations: [ + ...endpointsToSelect, + ...consumersToSelect, + ...internalsToSelect + ], + insights: insightsToSelect + }; + + setPersistedFilters(filtersQuery); + props.onApply(filtersQuery); } } }, [ diff --git a/src/components/Insights/tickets/common/useCodeLocations.ts b/src/components/Insights/tickets/common/useCodeLocations.ts index df7dec380..3f0240c4b 100644 --- a/src/components/Insights/tickets/common/useCodeLocations.ts +++ b/src/components/Insights/tickets/common/useCodeLocations.ts @@ -6,7 +6,7 @@ import { CodeLocationsData } from "../types"; import { useLoading } from "./useLoading"; export const useCodeLocations = (spanInfo: SpanInfo | null) => { - const { isLoading, setIsLoading } = useLoading(false); + const [isLoading, setIsLoading] = useLoading(false); const [codeLocations, setCodeLocations] = useState([]); useEffect(() => { diff --git a/src/components/Insights/tickets/common/useCommitInfos.ts b/src/components/Insights/tickets/common/useCommitInfos.ts index 0f34836f8..50da5af34 100644 --- a/src/components/Insights/tickets/common/useCommitInfos.ts +++ b/src/components/Insights/tickets/common/useCommitInfos.ts @@ -9,7 +9,7 @@ import { useLoading } from "./useLoading"; export const useCommitInfos = ( insight: TInsight | null ) => { - const { isLoading, setIsLoading } = useLoading(false); + const [isLoading, setIsLoading] = useLoading(false); const [commitInfos, setCommitInfos] = useState(null); useEffect(() => { diff --git a/src/components/Insights/tickets/common/useEndpointDataSource.ts b/src/components/Insights/tickets/common/useEndpointDataSource.ts index aa6957643..fb21b61d4 100644 --- a/src/components/Insights/tickets/common/useEndpointDataSource.ts +++ b/src/components/Insights/tickets/common/useEndpointDataSource.ts @@ -12,16 +12,9 @@ export const useEndpointDataSource = < spanInfo: SpanInfo | null, insightType: InsightType ) => { - const { isLoading, setIsLoading } = useLoading(true); + const [isLoading, setIsLoading] = useLoading(true); const [spanInsight, setSpanInsight] = useState(null); - useEffect(() => { - const timerId = setTimeout(() => setIsLoading(false), 30 * 1000); - return () => { - clearTimeout(timerId); - }; - }, []); - const { isLoading: isInsightMetaIsLoading, codeLocations, diff --git a/src/components/Insights/tickets/common/useLoading.ts b/src/components/Insights/tickets/common/useLoading.ts index ce3ce79f1..b77d0e505 100644 --- a/src/components/Insights/tickets/common/useLoading.ts +++ b/src/components/Insights/tickets/common/useLoading.ts @@ -1,6 +1,9 @@ import { useEffect, useState } from "react"; -export const useLoading = (defaultValue: boolean, cancelTimeoutSec = 30) => { +export const useLoading = ( + defaultValue: boolean, + cancelTimeoutMs = 30 * 1000 +): [boolean, (va: boolean) => void] => { const [isLoading, setIsLoading] = useState(defaultValue); useEffect(() => { @@ -8,14 +11,11 @@ export const useLoading = (defaultValue: boolean, cancelTimeoutSec = 30) => { return; } - const timerId = setTimeout( - () => setIsLoading(false), - cancelTimeoutSec * 1000 - ); + const timerId = setTimeout(() => setIsLoading(false), cancelTimeoutMs); return () => { clearTimeout(timerId); }; }, []); - return { isLoading, setIsLoading }; + return [isLoading, setIsLoading]; }; diff --git a/src/components/Insights/tickets/common/useSpanDataSource.ts b/src/components/Insights/tickets/common/useSpanDataSource.ts index 4e766a4df..1e28d8b4e 100644 --- a/src/components/Insights/tickets/common/useSpanDataSource.ts +++ b/src/components/Insights/tickets/common/useSpanDataSource.ts @@ -10,7 +10,7 @@ export const useSpanDataSource = ( spanInfo: SpanInfo | null, insight: TInsight | null ) => { - const { isLoading, setIsLoading } = useLoading(true); + const [isLoading, setIsLoading] = useLoading(true); const { commitInfos, isLoading: isCommitInfoLoading } = useCommitInfos(insight); From 852e5a133a6c91882034c31bd2d08d68f32a3fdc Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 9 Feb 2024 19:16:50 +0200 Subject: [PATCH 7/7] clean-up --- src/components/Assets/AssetsFilter/index.tsx | 119 +++++++++---------- 1 file changed, 56 insertions(+), 63 deletions(-) diff --git a/src/components/Assets/AssetsFilter/index.tsx b/src/components/Assets/AssetsFilter/index.tsx index b4ef3fc0f..04a19760f 100644 --- a/src/components/Assets/AssetsFilter/index.tsx +++ b/src/components/Assets/AssetsFilter/index.tsx @@ -1,8 +1,8 @@ -import { ComponentType, useContext, useEffect, useRef, useState } from "react"; +import { ComponentType, useContext, useEffect, useState } from "react"; import { dispatcher } from "../../../dispatcher"; import { usePersistence } from "../../../hooks/usePersistence"; import { usePrevious } from "../../../hooks/usePrevious"; -import { isNumber } from "../../../typeGuards/isNumber"; +import { isNull } from "../../../typeGuards/isNull"; import { isString } from "../../../typeGuards/isString"; import { isUndefined } from "../../../typeGuards/isUndefined"; import { InsightType } from "../../../types"; @@ -29,10 +29,6 @@ import { const PERSISTENCE_KEY = "assetsFilters"; -const REFRESH_INTERVAL = isNumber(window.assetsRefreshInterval) - ? window.assetsRefreshInterval - : 10 * 1000; // in milliseconds - const renderFilterCategory = ( category: AssetFilterCategory, icon: ComponentType, @@ -76,7 +72,6 @@ export const AssetsFilter = (props: AssetsFilterProps) => { const [selectedConsumers, setSelectedConsumers] = useState([]); const [selectedInternals, setSelectedInternals] = useState([]); const [selectedInsights, setSelectedInsights] = useState([]); - const refreshTimerId = useRef(); const config = useContext(ConfigContext); const previousEnvironment = usePrevious(config.environment); @@ -135,7 +130,6 @@ export const AssetsFilter = (props: AssetsFilterProps) => { actions.SET_ASSET_FILTERS_DATA, handleData ); - window.clearTimeout(refreshTimerId.current); }; }, []); @@ -177,59 +171,61 @@ export const AssetsFilter = (props: AssetsFilterProps) => { }, [props.data]); useEffect(() => { - if (previousData !== data) { - const servicesToSelect = - data?.data?.categories - .find((x) => x.categoryName === "Services") - ?.entries?.filter((x) => x.selected) - .map((x) => x.name) || []; - setSelectedServices(servicesToSelect); - - const operationsCategory = data?.data?.categories.find( - (x) => x.categoryName === "Operations" - ); + if (previousData === data || isNull(data?.data)) { + return; + } - const endpointsToSelect = - operationsCategory?.categories - ?.find((x) => x.categoryName === "Endpoints") - ?.entries?.filter((x) => x.selected) - .map((x) => x.name) || []; - setSelectedEndpoints(endpointsToSelect); - - const consumersToSelect = - operationsCategory?.categories - ?.find((x) => x.categoryName === "Consumers") - ?.entries?.filter((x) => x.selected) - .map((x) => x.name) || []; - setSelectedConsumers(consumersToSelect); - - const internalsToSelect = - operationsCategory?.categories - ?.find((x) => x.categoryName === "Internal") - ?.entries?.filter((x) => x.selected) - .map((x) => x.name) || []; - setSelectedInternals(internalsToSelect); - - const insightsToSelect = (data?.data?.categories - .find((x) => x.categoryName === "Insights") + const servicesToSelect = + data?.data?.categories + .find((x) => x.categoryName === "Services") ?.entries?.filter((x) => x.selected) - .map((x) => x.name) || []) as InsightType[]; - setSelectedInsights(insightsToSelect); - - if (!props.filters) { - const filtersQuery = { - services: servicesToSelect, - operations: [ - ...endpointsToSelect, - ...consumersToSelect, - ...internalsToSelect - ], - insights: insightsToSelect - }; - - setPersistedFilters(filtersQuery); - props.onApply(filtersQuery); - } + .map((x) => x.name) || []; + setSelectedServices(servicesToSelect); + + const operationsCategory = data?.data?.categories.find( + (x) => x.categoryName === "Operations" + ); + + const endpointsToSelect = + operationsCategory?.categories + ?.find((x) => x.categoryName === "Endpoints") + ?.entries?.filter((x) => x.selected) + .map((x) => x.name) || []; + setSelectedEndpoints(endpointsToSelect); + + const consumersToSelect = + operationsCategory?.categories + ?.find((x) => x.categoryName === "Consumers") + ?.entries?.filter((x) => x.selected) + .map((x) => x.name) || []; + setSelectedConsumers(consumersToSelect); + + const internalsToSelect = + operationsCategory?.categories + ?.find((x) => x.categoryName === "Internal") + ?.entries?.filter((x) => x.selected) + .map((x) => x.name) || []; + setSelectedInternals(internalsToSelect); + + const insightsToSelect = (data?.data?.categories + .find((x) => x.categoryName === "Insights") + ?.entries?.filter((x) => x.selected) + .map((x) => x.name) || []) as InsightType[]; + setSelectedInsights(insightsToSelect); + + if (!props.filters) { + const filtersQuery = { + services: servicesToSelect, + operations: [ + ...endpointsToSelect, + ...consumersToSelect, + ...internalsToSelect + ], + insights: insightsToSelect + }; + + setPersistedFilters(filtersQuery); + props.onApply(filtersQuery); } }, [ previousData, @@ -241,9 +237,7 @@ export const AssetsFilter = (props: AssetsFilterProps) => { selectedConsumers, selectedInternals, selectedInsights, - setPersistedFilters, - isOpen, - previousIsOpen + setPersistedFilters ]); useEffect(() => { @@ -260,7 +254,6 @@ export const AssetsFilter = (props: AssetsFilterProps) => { props.onApply(filtersQuery); setPersistedFilters(filtersQuery); sendTrackingEvent(trackingEvents.FILTER_APPLIED); - window.clearTimeout(refreshTimerId.current); } }, [ previousIsOpen,