Use state

src/actions.ts

@@ -34,5 +34,8 @@ export const actions = addPrefix(ACTION_PREFIX, {
   OPEN_DASHBOARD: "OPEN_DASHBOARD",
   OPEN_INSTALLATION_WIZARD: "OPEN_INSTALLATION_WIZARD",
   SET_SCOPE: "SET_SCOPE",
-  CHANGE_SCOPE: "CHANGE_SCOPE"
+  CHANGE_SCOPE: "CHANGE_SCOPE",
+  SET_STATE: "SET_STATE",
+  GET_STATE: "GET_STATE",
+  UPDATE_STATE: "UPDATE_STATE"
 });

src/components/Insights/InsightJiraTicket/index.tsx

@@ -6,7 +6,11 @@ import { isValidHttpUrl } from "../../../utils/isValidUrl";
 import { ConfigContext } from "../../common/App/ConfigContext";
 import { JiraTicket } from "../../common/JiraTicket";
 import { actions } from "../actions";
-import { InsightJiraTicketProps, LinkTicketResponse } from "./types";
+import {
+  InsightJiraTicketProps,
+  InsightsGetDataListQuery,
+  LinkTicketResponse
+} from "./types";
 
 export const InsightJiraTicket = (props: InsightJiraTicketProps) => {
   const [errorMessage, setErrorMessage] = useState<string | null>();
@@ -59,9 +63,11 @@ export const InsightJiraTicket = (props: InsightJiraTicketProps) => {
         setErrorMessage(linkTicketResponse.message);
       }
 
-      window.sendMessageToDigma({
-        action: actions.GET_DATA
-      });
+      config.state?.insights?.query &&
+        window.sendMessageToDigma<InsightsGetDataListQuery>({
+          action: actions.GET_DATA_LIST,
+          payload: { query: config.state.insights.query }
+        });
 
       props.onReloadSpanInsight && props.onReloadSpanInsight();
     };
@@ -77,7 +83,7 @@ export const InsightJiraTicket = (props: InsightJiraTicketProps) => {
         handleInsightTicketLink
       );
     };
-  }, []);
+  }, [config.state?.insights?.query]);
 
   useEffect(() => {
     if (props.relatedInsight) {

src/components/Insights/InsightJiraTicket/types.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+import { InsightsQuery } from "../../common/App/types";
 import { GenericCodeObjectInsight } from "../types";
 
 export interface InsightJiraTicketProps {
@@ -22,3 +23,7 @@ export interface LinkTicketResponse {
   codeObjectId: string;
   insightType: string;
 }
+
+export interface InsightsGetDataListQuery {
+  query: InsightsQuery;
+}

src/components/Insights/common/InsightCard/index.tsx

@@ -102,10 +102,10 @@ export const InsightCard = (props: InsightCardProps) => {
         tooltip: "Open Trace",
         button: (btnProps) => (
           <Button
-            {...btnProps}
             icon={TraceIcon}
             label={"Trace"}
             onClick={() => props.onGoToTrace && props.onGoToTrace()}
+            {...btnProps}
           />
         )
       });
@@ -184,7 +184,7 @@ export const InsightCard = (props: InsightCardProps) => {
         {secondary.map((Secondary) => {
           return (
             <Tooltip key={Secondary.tooltip} title={Secondary.tooltip}>
-                <Secondary.button buttonType="tertiary" label={undefined} />
+              <Secondary.button buttonType="tertiary" label={undefined} />
             </Tooltip>
           );
         })}

src/components/Insights/common/useInsightsData.ts

@@ -1,7 +1,13 @@
 import { useContext, useEffect, useMemo, useRef, useState } from "react";
+import { actions as globalActions } from "../../../actions";
 import { dispatcher } from "../../../dispatcher";
 import { usePrevious } from "../../../hooks/usePrevious";
 import { ConfigContext } from "../../common/App/ConfigContext";
+import {
+  ConfigContextData,
+  GlobalState,
+  InsightsQuery as InsightsDataQuery
+} from "../../common/App/types";
 import { actions } from "../actions";
 import {
   InsightsData,
@@ -16,16 +22,29 @@ interface UseInsightDataProps {
   query: InsightsQuery;
 }
 
-const getData = (query: ScopedInsightsQuery) => {
+const getData = (query: ScopedInsightsQuery, context: ConfigContextData) => {
+  const getDataQuery: InsightsDataQuery = {
+    displayName: query.searchQuery,
+    sortBy: query.sorting.criterion,
+    sortOrder: query.sorting.order,
+    page: query.page,
+    scopedSpanCodeObjectId: query.scopedSpanCodeObjectId
+  };
+
   window.sendMessageToDigma({
     action: actions.GET_DATA_LIST,
     payload: {
-      query: {
-        displayName: query.searchQuery,
-        sortBy: query.sorting.criterion,
-        sortOrder: query.sorting.order,
-        page: query.page,
-        scopedSpanCodeObjectId: query.scopedSpanCodeObjectId
+      query: getDataQuery
+    }
+  });
+
+  window.sendMessageToDigma<GlobalState>({
+    action: globalActions.UPDATE_STATE,
+    payload: {
+      ...context.state,
+      insights: {
+        ...context.state?.insights,
+        query: getDataQuery
       }
     }
   });
@@ -44,7 +63,8 @@ export const useInsightsData = (props: UseInsightDataProps) => {
   const [isLoading, setIsLoading] = useState(false);
   const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp);
   const refreshTimerId = useRef<number>();
-  const { scope, environment } = useContext(ConfigContext);
+  const ctx = useContext(ConfigContext);
+  const { scope, environment } = ctx;
   const query = useMemo(
     () => ({
       ...props.query,
@@ -54,7 +74,7 @@ export const useInsightsData = (props: UseInsightDataProps) => {
   );
 
   useEffect(() => {
-    getData(query);
+    getData(query, ctx);
 
     setIsInitialLoading(true);
     setIsLoading(true);
@@ -89,7 +109,7 @@ export const useInsightsData = (props: UseInsightDataProps) => {
       window.clearTimeout(refreshTimerId.current);
       refreshTimerId.current = window.setTimeout(
         (insightsQuery: ScopedInsightsQuery) => {
-          getData(insightsQuery);
+          getData(insightsQuery, ctx);
         },
         props.refreshInterval,
         query
@@ -109,16 +129,19 @@ export const useInsightsData = (props: UseInsightDataProps) => {
 
   useEffect(() => {
     setIsLoading(true);
-    getData({
-      ...props.query,
-      scopedSpanCodeObjectId: scope?.span?.spanCodeObjectId || null
-    });
+    getData(
+      {
+        ...props.query,
+        scopedSpanCodeObjectId: scope?.span?.spanCodeObjectId || null
+      },
+      ctx
+    );
   }, [props.query, scope, environment]);
 
   return {
     isInitialLoading,
     data,
     isLoading,
-    refresh: () => getData(query)
+    refresh: () => getData(query, ctx)
   };
 };

src/components/Insights/index.tsx

@@ -29,8 +29,9 @@ import { EndpointNPlusOneInsightTicket } from "./tickets/EndpointNPlusOneInsight
 import { EndpointQueryOptimizationInsightTicket } from "./tickets/EndpointQueryOptimizationTicket";
 import { NPlusOneInsightTicket } from "./tickets/NPlusOneInsightTicket";
 import { QueryOptimizationInsightTicket } from "./tickets/QueryOptimizationInsightTicket";
-import { SpanBottleneckInsightTicket } from "./tickets/SpanBottleneckInsightTicket";
 import { ScalingIssueInsightTicket } from "./tickets/ScalingIssueInsightTicket";
+import { ScalingIssueInsightTicketByRootCause } from "./tickets/ScalingIssueInsightTicketByRootCause";
+import { SpanBottleneckInsightTicket } from "./tickets/SpanBottleneckInsightTicket";
 import {
   isEndpointHighNumberOfQueriesInsight,
   isEndpointQueryOptimizationInsight,
@@ -57,7 +58,6 @@ import {
   SpanNPlusOneInsight,
   SpanScalingBadlyInsight
 } from "./types";
-import { ScalingIssueInsightTicketByRootCause } from "./tickets/ScalingIssueInsightTicketByRootCause";
 
 const REFRESH_INTERVAL = isNumber(window.insightsRefreshInterval)
   ? window.insightsRefreshInterval
@@ -182,6 +182,7 @@ export const Insights = (props: InsightsProps) => {
 
   useLayoutEffect(() => {
     sendMessage(actions.INITIALIZE);
+    sendMessage(globalActions.GET_STATE);
   }, []);
 
   // useEffect(() => {

src/components/common/App/ConfigContext.ts

@@ -23,5 +23,6 @@ export const ConfigContext = createContext<ConfigContextData>({
   backendInfo: undefined,
   environments: undefined,
   scope: undefined,
-  isMicrometerProject: window.isMicrometerProject === true
+  isMicrometerProject: window.isMicrometerProject === true,
+  state: undefined
 });

src/components/common/App/index.tsx

@@ -16,6 +16,7 @@ import {
   BackendInfo,
   DigmaStatus,
   Environment,
+  GlobalState,
   Scope
 } from "./types";
 
@@ -213,10 +214,18 @@ export const App = (props: AppProps) => {
       }));
     };
 
+    const handleSetState = (data: unknown) => {
+      setConfig((config) => ({
+        ...config,
+        state: data as GlobalState
+      }));
+    };
+
     dispatcher.addActionListener(actions.SET_THEME, handleSetTheme);
     dispatcher.addActionListener(actions.SET_MAIN_FONT, handleSetMainFont);
     dispatcher.addActionListener(actions.SET_CODE_FONT, handleSetCodeFont);
     dispatcher.addActionListener(actions.SET_JAEGER_URL, handleSetJaegerURL);
+    dispatcher.addActionListener(actions.SET_STATE, handleSetState);
     dispatcher.addActionListener(
       actions.SET_IS_JAEGER_ENABLED,
       handleSetIsJaegerEnabled
@@ -272,6 +281,7 @@ export const App = (props: AppProps) => {
       dispatcher.removeActionListener(actions.SET_THEME, handleSetTheme);
       dispatcher.removeActionListener(actions.SET_MAIN_FONT, handleSetMainFont);
       dispatcher.removeActionListener(actions.SET_CODE_FONT, handleSetCodeFont);
+      dispatcher.removeActionListener(actions.SET_STATE, handleSetState);
       dispatcher.removeActionListener(
         actions.SET_JAEGER_URL,
         handleSetJaegerURL

src/components/common/App/types.ts

@@ -56,6 +56,20 @@ export interface Scope {
   hasErrors: boolean;
 }
 
+export interface InsightsQuery {
+  displayName: string | null;
+  sortBy: string;
+  sortOrder: string;
+  page: number;
+  scopedSpanCodeObjectId?: string | null;
+}
+
+export interface GlobalState {
+  insights?: {
+    query?: InsightsQuery;
+  };
+}
+
 export interface ConfigContextData {
   digmaApiUrl: string;
   digmaStatus: DigmaStatus | undefined;
@@ -73,4 +87,5 @@ export interface ConfigContextData {
   environments: Environment[] | undefined;
   scope: Scope | undefined;
   isMicrometerProject: boolean;
+  state?: GlobalState;
 }

src/components/common/v3/Button/styles.ts

@@ -11,7 +11,7 @@ export const Button = styled.button<ButtonElementProps>`
   cursor: pointer;
   width: fit-content;
   padding: 4px 8px;
-  border: none;
+  border: 1px solid transparent;
   color: ${({ theme }) => theme.colors.v3.icon.white};
   background: ${({ theme, $type }) => {
     switch ($type) {