From ab7f50a94a9f2b588d55166a478f151c6806c9b7 Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Tue, 28 May 2024 18:49:40 +0200 Subject: [PATCH] Fix highlights refresh --- src/api/index.ts | 41 +++++++++++++++---- .../Highlights/Impact/useImpactData.ts | 29 +++++++------ .../Performance/usePerformanceData.ts | 29 +++++++------ .../Highlights/Scaling/useScalingData.ts | 29 +++++++------ .../Highlights/SpanInfo/useSpanInfoData.ts | 23 ++++++----- .../Highlights/TopIssues/useTopIssuesData.ts | 30 ++++++++------ src/components/Insights/useInsightsData.ts | 1 + src/components/Navigation/ScopeBar/index.tsx | 4 +- src/components/common/v3/Tooltip/styles.ts | 2 +- 9 files changed, 120 insertions(+), 68 deletions(-) diff --git a/src/api/index.ts b/src/api/index.ts index 4b4ca92a..df977f47 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -7,12 +7,25 @@ import { sendMessageToWebService } from "./web/sendMessageToWebService"; const isDigmaMessageEvent = (e: MessageEvent): e is DigmaMessageEvent => isObject(e.data) && e.data.type === "digma"; +const OUTGOING_MESSAGE_ACTION_ID_CONSOLE_STYLE = + "color: blue; font-weight: bold"; +const FAILED_OUTGOING_MESSAGE_ACTION_ID_CONSOLE_STYLE = + "color: red; font-weight: bold"; +const INCOMING_MESSAGE_ACTION_ID_CONSOLE_STYLE = + "color: green; font-weight: bold"; + export const initializeDigmaMessageListener = ( dispatcher: ActionDispatcher ) => { const handleDigmaMessage = (e: MessageEvent) => { if (isDigmaMessageEvent(e)) { - console.debug("Digma message received: ", e); + console.debug( + `Digma message received: %c${e.data.action} +%cRaw message: %O`, + INCOMING_MESSAGE_ACTION_ID_CONSOLE_STYLE, + null, + e.data + ); dispatcher.dispatch(e.timeStamp, e.data.action, e.data.payload); } }; @@ -27,8 +40,6 @@ export const initializeDigmaMessageListener = ( export const sendMessage = ( message: DigmaOutgoingMessageData ): string | undefined => { - console.debug("Digma message to send:", message); - switch (platform) { case "Web": sendMessageToWebService(message); @@ -36,7 +47,13 @@ export const sendMessage = ( case "VS Code": if (window.sendMessageToVSCode) { window.sendMessageToVSCode(message); - console.debug("Digma message has been sent to VS Code: ", message); + console.debug( + `Digma message has been successfully sent to VS Code: %c${message.action} +%cRaw message: %O`, + OUTGOING_MESSAGE_ACTION_ID_CONSOLE_STYLE, + null, + message + ); } break; case "JetBrains": @@ -45,13 +62,23 @@ export const sendMessage = ( request: JSON.stringify(message), onSuccess: function (response) { console.debug( - "Digma message cefQuery has been successfully sent: %s", + `Digma message has been successfully handled by JCEF: %c${message.action} +%cRaw message: %O +Response: %O`, + OUTGOING_MESSAGE_ACTION_ID_CONSOLE_STYLE, + null, + message, response ); }, - onFailure: function (error_code, error_message) { + onFailure: function (error_code: number, error_message: string) { console.error( - " Digma message failed to send cefQuery: %d, %s", + `Digma message has failed to be handled by JCEF: %c${message.action} +%cRaw message: %O +%cError code: %d +Error message: %s`, + FAILED_OUTGOING_MESSAGE_ACTION_ID_CONSOLE_STYLE, + null, error_code, error_message ); diff --git a/src/components/Highlights/Impact/useImpactData.ts b/src/components/Highlights/Impact/useImpactData.ts index 12b6a89f..fe6c0f0f 100644 --- a/src/components/Highlights/Impact/useImpactData.ts +++ b/src/components/Highlights/Impact/useImpactData.ts @@ -15,15 +15,21 @@ export const useImpactData = () => { const refreshTimerId = useRef(); const getData = useCallback(() => { - window.sendMessageToDigma({ - action: mainActions.GET_HIGHLIGHTS_IMPACT_DATA, - payload: { - query: { - scopedSpanCodeObjectId: config.scope?.span?.spanCodeObjectId || null, - environments: config.environments?.map((x) => x.id) || [] + if ( + config.scope?.span?.spanCodeObjectId && + config.environments && + config.environments.length > 0 + ) { + window.sendMessageToDigma({ + action: mainActions.GET_HIGHLIGHTS_IMPACT_DATA, + payload: { + query: { + scopedSpanCodeObjectId: config.scope.span.spanCodeObjectId, + environments: config.environments.map((x) => x.id) + } } - } - }); + }); + } }, [config.scope?.span?.spanCodeObjectId, config.environments]); const previousGetData = usePrevious(getData); @@ -36,10 +42,8 @@ export const useImpactData = () => { }, [previousGetData, getData]); useEffect(() => { - if ( - previousLastSetDataTimeStamp && - previousLastSetDataTimeStamp !== lastSetDataTimeStamp - ) { + if (previousLastSetDataTimeStamp !== lastSetDataTimeStamp) { + window.clearTimeout(refreshTimerId.current); refreshTimerId.current = window.setTimeout(() => { getData(); }, REFRESH_INTERVAL); @@ -58,6 +62,7 @@ export const useImpactData = () => { ); return () => { + window.clearTimeout(refreshTimerId.current); dispatcher.removeActionListener( mainActions.SET_HIGHLIGHTS_IMPACT_DATA, handleImpactData diff --git a/src/components/Highlights/Performance/usePerformanceData.ts b/src/components/Highlights/Performance/usePerformanceData.ts index 6494a58e..88fb8186 100644 --- a/src/components/Highlights/Performance/usePerformanceData.ts +++ b/src/components/Highlights/Performance/usePerformanceData.ts @@ -15,15 +15,21 @@ export const usePerformanceData = () => { const refreshTimerId = useRef(); const getData = useCallback(() => { - window.sendMessageToDigma({ - action: mainActions.GET_HIGHLIGHTS_PERFORMANCE_DATA, - payload: { - query: { - scopedSpanCodeObjectId: config.scope?.span?.spanCodeObjectId || null, - environments: config.environments?.map((x) => x.id) || [] + if ( + config.scope?.span?.spanCodeObjectId && + config.environments && + config.environments.length > 0 + ) { + window.sendMessageToDigma({ + action: mainActions.GET_HIGHLIGHTS_PERFORMANCE_DATA, + payload: { + query: { + scopedSpanCodeObjectId: config.scope.span.spanCodeObjectId, + environments: config.environments.map((x) => x.id) + } } - } - }); + }); + } }, [config.scope?.span?.spanCodeObjectId, config.environments]); const previousGetData = usePrevious(getData); @@ -36,10 +42,8 @@ export const usePerformanceData = () => { }, [previousGetData, getData]); useEffect(() => { - if ( - previousLastSetDataTimeStamp && - previousLastSetDataTimeStamp !== lastSetDataTimeStamp - ) { + if (previousLastSetDataTimeStamp !== lastSetDataTimeStamp) { + window.clearTimeout(refreshTimerId.current); refreshTimerId.current = window.setTimeout(() => { getData(); }, REFRESH_INTERVAL); @@ -58,6 +62,7 @@ export const usePerformanceData = () => { ); return () => { + window.clearTimeout(refreshTimerId.current); dispatcher.removeActionListener( mainActions.SET_HIGHLIGHTS_PERFORMANCE_DATA, handlePerformanceData diff --git a/src/components/Highlights/Scaling/useScalingData.ts b/src/components/Highlights/Scaling/useScalingData.ts index 3740e95e..58bd49b2 100644 --- a/src/components/Highlights/Scaling/useScalingData.ts +++ b/src/components/Highlights/Scaling/useScalingData.ts @@ -15,15 +15,21 @@ export const useScalingData = () => { const refreshTimerId = useRef(); const getData = useCallback(() => { - window.sendMessageToDigma({ - action: mainActions.GET_HIGHLIGHTS_SCALING_DATA, - payload: { - query: { - scopedSpanCodeObjectId: config.scope?.span?.spanCodeObjectId || null, - environments: config.environments?.map((x) => x.id) || [] + if ( + config.scope?.span?.spanCodeObjectId && + config.environments && + config.environments.length > 0 + ) { + window.sendMessageToDigma({ + action: mainActions.GET_HIGHLIGHTS_SCALING_DATA, + payload: { + query: { + scopedSpanCodeObjectId: config.scope.span.spanCodeObjectId, + environments: config.environments.map((x) => x.id) + } } - } - }); + }); + } }, [config.scope?.span?.spanCodeObjectId, config.environments]); const previousGetData = usePrevious(getData); @@ -36,10 +42,8 @@ export const useScalingData = () => { }, [previousGetData, getData]); useEffect(() => { - if ( - previousLastSetDataTimeStamp && - previousLastSetDataTimeStamp !== lastSetDataTimeStamp - ) { + if (previousLastSetDataTimeStamp !== lastSetDataTimeStamp) { + window.clearTimeout(refreshTimerId.current); refreshTimerId.current = window.setTimeout(() => { getData(); }, REFRESH_INTERVAL); @@ -58,6 +62,7 @@ export const useScalingData = () => { ); return () => { + window.clearTimeout(refreshTimerId.current); dispatcher.removeActionListener( mainActions.SET_HIGHLIGHTS_SCALING_DATA, handleScalingData diff --git a/src/components/Highlights/SpanInfo/useSpanInfoData.ts b/src/components/Highlights/SpanInfo/useSpanInfoData.ts index 6fa5e5e4..8dd4e742 100644 --- a/src/components/Highlights/SpanInfo/useSpanInfoData.ts +++ b/src/components/Highlights/SpanInfo/useSpanInfoData.ts @@ -15,14 +15,16 @@ export const useSpanInfoData = () => { const refreshTimerId = useRef(); const getData = useCallback(() => { - window.sendMessageToDigma({ - action: mainActions.GET_HIGHLIGHTS_SPAN_INFO_DATA, - payload: { - query: { - spanCodeObjectId: config.scope?.span?.spanCodeObjectId || null + if (config.scope?.span?.spanCodeObjectId) { + window.sendMessageToDigma({ + action: mainActions.GET_HIGHLIGHTS_SPAN_INFO_DATA, + payload: { + query: { + spanCodeObjectId: config.scope?.span?.spanCodeObjectId + } } - } - }); + }); + } }, [config.scope?.span?.spanCodeObjectId]); const previousGetData = usePrevious(getData); @@ -35,10 +37,8 @@ export const useSpanInfoData = () => { }, [previousGetData, getData]); useEffect(() => { - if ( - previousLastSetDataTimeStamp && - previousLastSetDataTimeStamp !== lastSetDataTimeStamp - ) { + if (previousLastSetDataTimeStamp !== lastSetDataTimeStamp) { + window.clearTimeout(refreshTimerId.current); refreshTimerId.current = window.setTimeout(() => { getData(); }, REFRESH_INTERVAL); @@ -57,6 +57,7 @@ export const useSpanInfoData = () => { ); return () => { + window.clearTimeout(refreshTimerId.current); dispatcher.removeActionListener( mainActions.SET_HIGHLIGHTS_SPAN_INFO_DATA, handleSpanInfoData diff --git a/src/components/Highlights/TopIssues/useTopIssuesData.ts b/src/components/Highlights/TopIssues/useTopIssuesData.ts index ab52dde9..463c1f46 100644 --- a/src/components/Highlights/TopIssues/useTopIssuesData.ts +++ b/src/components/Highlights/TopIssues/useTopIssuesData.ts @@ -16,15 +16,21 @@ export const useTopIssuesData = () => { const refreshTimerId = useRef(); const getData = useCallback(() => { - window.sendMessageToDigma({ - action: mainActions.GET_HIGHLIGHTS_TOP_ISSUES_DATA, - payload: { - query: { - scopedCodeObjectId: config.scope?.span?.spanCodeObjectId || null, - environments: config.environments?.map((env) => env.id) || [] + if ( + config.scope?.span?.spanCodeObjectId && + config.environments && + config.environments.length > 0 + ) { + window.sendMessageToDigma({ + action: mainActions.GET_HIGHLIGHTS_TOP_ISSUES_DATA, + payload: { + query: { + scopedCodeObjectId: config.scope?.span?.spanCodeObjectId, + environments: config.environments?.map((env) => env.id) + } } - } - }); + }); + } }, [config.scope?.span?.spanCodeObjectId, config.environments]); const previousGetData = usePrevious(getData); @@ -37,10 +43,9 @@ export const useTopIssuesData = () => { }, [previousGetData, getData]); useEffect(() => { - if ( - previousLastSetDataTimeStamp && - previousLastSetDataTimeStamp !== lastSetDataTimeStamp - ) { + if (previousLastSetDataTimeStamp !== lastSetDataTimeStamp) { + window.clearTimeout(refreshTimerId.current); + refreshTimerId.current = window.setTimeout(() => { getData(); }, REFRESH_INTERVAL); @@ -59,6 +64,7 @@ export const useTopIssuesData = () => { ); return () => { + window.clearTimeout(refreshTimerId.current); dispatcher.removeActionListener( mainActions.SET_HIGHLIGHTS_TOP_ISSUES_DATA, handleTopIssuesData diff --git a/src/components/Insights/useInsightsData.ts b/src/components/Insights/useInsightsData.ts index e5fe1505..a75f5190 100644 --- a/src/components/Insights/useInsightsData.ts +++ b/src/components/Insights/useInsightsData.ts @@ -121,6 +121,7 @@ export const useInsightsData = ({ actions.SET_DATA_LIST, handleInsightsData ); + window.clearTimeout(refreshTimerId.current); }; }, []); diff --git a/src/components/Navigation/ScopeBar/index.tsx b/src/components/Navigation/ScopeBar/index.tsx index ba93a6a9..25383754 100644 --- a/src/components/Navigation/ScopeBar/index.tsx +++ b/src/components/Navigation/ScopeBar/index.tsx @@ -135,7 +135,9 @@ export const ScopeBar = (props: ScopeBarProps) => { - {scopeDisplayName} + + {scopeDisplayName} + {isActive && } diff --git a/src/components/common/v3/Tooltip/styles.ts b/src/components/common/v3/Tooltip/styles.ts index d3a14b71..91994d29 100644 --- a/src/components/common/v3/Tooltip/styles.ts +++ b/src/components/common/v3/Tooltip/styles.ts @@ -13,7 +13,7 @@ export const Tooltip = styled.div` padding: 4px; border-radius: 4px; box-shadow: 0 0 6px 0 rgb(0 0 0 / 15%); - word-break: keep-all; + word-wrap: break-word; color: ${({ theme }) => theme.colors.v3.text.primary}; background: ${({ theme }) => theme.colors.v3.surface.primary}; border: 1px solid ${({ theme }) => theme.colors.v3.stroke.tertiary};