diff --git a/src/components/Assets/AssetsFilter/index.tsx b/src/components/Assets/AssetsFilter/index.tsx index c8f419d44..04a19760f 100644 --- a/src/components/Assets/AssetsFilter/index.tsx +++ b/src/components/Assets/AssetsFilter/index.tsx @@ -1,9 +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 { isNull } from "../../../typeGuards/isNull"; -import { isNumber } from "../../../typeGuards/isNumber"; import { isString } from "../../../typeGuards/isString"; import { isUndefined } from "../../../typeGuards/isUndefined"; import { InsightType } from "../../../types"; @@ -30,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, @@ -77,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); @@ -136,7 +130,6 @@ export const AssetsFilter = (props: AssetsFilterProps) => { actions.SET_ASSET_FILTERS_DATA, handleData ); - window.clearTimeout(refreshTimerId.current); }; }, []); @@ -161,6 +154,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 }); @@ -168,79 +171,61 @@ export const AssetsFilter = (props: AssetsFilterProps) => { }, [props.data]); useEffect(() => { - if (previousData !== data) { - 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") - ?.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); - } + if (previousData === data || isNull(data?.data)) { + return; + } - window.clearTimeout(refreshTimerId.current); - refreshTimerId.current = window.setTimeout(() => { - getData( - servicesToSelect, - [...endpointsToSelect, ...consumersToSelect, ...internalsToSelect], - insightsToSelect - ); - }, REFRESH_INTERVAL); - } else { - window.clearTimeout(refreshTimerId.current); - refreshTimerId.current = window.setTimeout(() => { - getData( - selectedServices, - [...selectedEndpoints, ...selectedConsumers, ...selectedInternals], - selectedInsights - ); - }, REFRESH_INTERVAL); - } + 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") + ?.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, 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) { 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..3f0240c4b 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..50da5af34 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 85c8b82c2..fb21b61d4 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(false); + const [isLoading, setIsLoading] = useLoading(true); const [spanInsight, setSpanInsight] = useState(null); const { @@ -48,6 +49,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/useLoading.ts b/src/components/Insights/tickets/common/useLoading.ts new file mode 100644 index 000000000..b77d0e505 --- /dev/null +++ b/src/components/Insights/tickets/common/useLoading.ts @@ -0,0 +1,21 @@ +import { useEffect, useState } from "react"; + +export const useLoading = ( + defaultValue: boolean, + cancelTimeoutMs = 30 * 1000 +): [boolean, (va: boolean) => void] => { + const [isLoading, setIsLoading] = useState(defaultValue); + + useEffect(() => { + if (!defaultValue) { + return; + } + + const timerId = setTimeout(() => setIsLoading(false), cancelTimeoutMs); + 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 f4489c314..1e28d8b4e 100644 --- a/src/components/Insights/tickets/common/useSpanDataSource.ts +++ b/src/components/Insights/tickets/common/useSpanDataSource.ts @@ -1,15 +1,17 @@ -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(false); + const [isLoading, setIsLoading] = useLoading(true); + 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={