Add Digmathon mode

.storybook/preview-body.html

@@ -16,6 +16,7 @@
   window.isDockerInstalled = true;
   window.isDockerComposeInstalled = true;
   window.isMicrometerProject;
+  window.isDigmathonModeEnabled = true;
 
   window.assetsRefreshInterval;
   window.assetsSearch = true;

.storybook/preview.tsx

@@ -1,6 +1,6 @@
 import type { Preview } from "@storybook/react";
 import { StoryFn } from "@storybook/react";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import {
   cancelMessage,
   initializeDigmaMessageListener,
@@ -13,17 +13,28 @@ import { Mode } from "../src/globals";
 const preview: Preview = {
   decorators: [
     (Story: StoryFn, context): JSX.Element => {
+      const [isInitialized, setIsInitialized] = useState(false);
       // TODO: Fix types
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
       const theme = context.globals.theme as Mode;
-      initializeDigmaMessageListener(dispatcher);
-      window.sendMessageToDigma = sendMessage;
-      window.cancelMessageToDigma = cancelMessage;
 
-      return (
+      useEffect(() => {
+        const removeDigmaMessageListener =
+          initializeDigmaMessageListener(dispatcher);
+        window.sendMessageToDigma = sendMessage;
+        window.cancelMessageToDigma = cancelMessage;
+        setIsInitialized(true);
+
+        return () => {
+          removeDigmaMessageListener();
+        };
+      }, []);
+
+      return isInitialized ? (
         <App theme={theme}>
           <Story />
         </App>
+      ) : (
+        <>Initializing...</>
       );
     }
   ],

.vscode/settings.json

@@ -5,5 +5,5 @@
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "stylelint.validate": ["typescript"],
-  "cSpell.words": ["Digma", "UNDISMISS"]
+  "cSpell.words": ["digma", "digmathon", "digmo", "undismiss"]
 }

assets/index.ejs

@@ -32,6 +32,10 @@
       window.isDockerInstalled;
       window.isDockerComposeInstalled;
       window.isMicrometerProject;
+      window.productKey;
+      window.userId;
+      window.isDigmathonModeEnabled;
+      window.isDigmathonGameFinished;
       <% for (var i = 0; i < environmentVariables.length; i++) { %>
       window.<%= environmentVariables[i] %>;<% } %>
     </script>

src/actions.ts

@@ -41,5 +41,10 @@ export const actions = addPrefix(ACTION_PREFIX, {
   CHANGE_VIEW: "CHANGE_VIEW",
   GET_INSIGHT_STATS: "GET_INSIGHT_STATS",
   SET_INSIGHT_STATS: "SET_INSIGHT_STATS",
-  CHANGE_ENVIRONMENT: "CHANGE_ENVIRONMENT"
+  CHANGE_ENVIRONMENT: "CHANGE_ENVIRONMENT",
+  SET_DIGMATHON_MODE: "SET_DIGMATHON_MODE",
+  SET_PRODUCT_KEY: "SET_PRODUCT_KEY",
+  SET_USER_ID: "SET_USER_ID",
+  SET_IS_DIGMATHON_GAME_FINISHED: "SET_IS_DIGMATHON_GAME_FINISHED",
+  FINISH_DIGMATHON_GAME: "FINISH_DIGMATHON_GAME"
 });

src/api/index.ts

@@ -10,12 +10,18 @@ const isDigmaMessageEvent = (e: MessageEvent): e is DigmaMessageEvent =>
 export const initializeDigmaMessageListener = (
   dispatcher: ActionDispatcher
 ) => {
-  window.addEventListener("message", (e) => {
+  const handleDigmaMessage = (e: MessageEvent) => {
     if (isDigmaMessageEvent(e)) {
       console.debug("Digma message received: ", e);
       dispatcher.dispatch(e.timeStamp, e.data.action, e.data.payload);
     }
-  });
+  };
+
+  window.addEventListener("message", handleDigmaMessage);
+
+  return () => {
+    window.removeEventListener("message", handleDigmaMessage);
+  };
 };
 
 export const sendMessage = <T>(

src/components/Highlights/TopIssues/highlightCards/EndpointBottleneckHighlightCard/index.tsx

@@ -10,7 +10,7 @@ import { AssetLink } from "../../common/AssetLink";
 import { HighlightCard } from "../../common/HighlightCard";
 import { EndpointBottleneckMetrics, EnvironmentData } from "../../types";
 import { addEnvironmentColumns } from "../addEnvironmentColumns";
-import { goToEnvironmentIssues } from "../goToEnvironmentIssues";
+import { handleEnvironmentTableRowClick } from "../goToEnvironmentIssues";
 import { DescriptionContainer } from "../styles";
 import { EndpointBottleneckHighlightCardProps } from "./types";
 
@@ -65,7 +65,7 @@ export const EndpointBottleneckHighlightCard = ({
   const handleTableRowClick = (
     row: Row<EnvironmentData<EndpointBottleneckMetrics>>
   ) => {
-    goToEnvironmentIssues(
+    handleEnvironmentTableRowClick(
       config.environments,
       row.original.environmentName,
       data.insightType

src/components/Highlights/TopIssues/highlightCards/EndpointChattyApiV2HighlightCard/index.tsx

@@ -7,7 +7,7 @@ import { AssetLink } from "../../common/AssetLink";
 import { HighlightCard } from "../../common/HighlightCard";
 import { EndpointChattyApiV2Metrics, EnvironmentData } from "../../types";
 import { addEnvironmentColumns } from "../addEnvironmentColumns";
-import { goToEnvironmentIssues } from "../goToEnvironmentIssues";
+import { handleEnvironmentTableRowClick } from "../goToEnvironmentIssues";
 import { DescriptionContainer } from "../styles";
 import { EndpointChattyApiV2HighlightCardProps } from "./types";
 
@@ -35,7 +35,7 @@ export const EndpointChattyApiV2HighlightCard = ({
   const handleTableRowClick = (
     row: Row<EnvironmentData<EndpointChattyApiV2Metrics>>
   ) => {
-    goToEnvironmentIssues(
+    handleEnvironmentTableRowClick(
       config.environments,
       row.original.environmentName,
       data.insightType

src/components/Highlights/TopIssues/highlightCards/EndpointHighNumberOfQueriesHighlightCard/index.tsx

@@ -10,7 +10,7 @@ import {
   EnvironmentData
 } from "../../types";
 import { addEnvironmentColumns } from "../addEnvironmentColumns";
-import { goToEnvironmentIssues } from "../goToEnvironmentIssues";
+import { handleEnvironmentTableRowClick } from "../goToEnvironmentIssues";
 import { DescriptionContainer } from "../styles";
 import { EndpointHighNumberOfQueriesHighlightCardProps } from "./types";
 
@@ -52,7 +52,7 @@ export const EndpointHighNumberOfQueriesHighlightCard = ({
   const handleTableRowClick = (
     row: Row<EnvironmentData<EndpointHighNumberOfQueriesMetrics>>
   ) => {
-    goToEnvironmentIssues(
+    handleEnvironmentTableRowClick(
       config.environments,
       row.original.environmentName,
       data.insightType

src/components/Highlights/TopIssues/highlightCards/EndpointQueryOptimizationV2HighlightCard/index.tsx

@@ -11,7 +11,7 @@ import {
   EnvironmentData
 } from "../../types";
 import { addEnvironmentColumns } from "../addEnvironmentColumns";
-import { goToEnvironmentIssues } from "../goToEnvironmentIssues";
+import { handleEnvironmentTableRowClick } from "../goToEnvironmentIssues";
 import { DescriptionContainer } from "../styles";
 import { EndpointQueryOptimizationV2HighlightCardProps } from "./types";
 
@@ -39,7 +39,7 @@ export const EndpointQueryOptimizationV2HighlightCard = ({
   const handleTableRowClick = (
     row: Row<EnvironmentData<EndpointQueryOptimizationV2Metrics>>
   ) => {
-    goToEnvironmentIssues(
+    handleEnvironmentTableRowClick(
       config.environments,
       row.original.environmentName,
       data.insightType

src/components/Highlights/TopIssues/highlightCards/EndpointSessionInViewHighlightCard/index.tsx

@@ -6,7 +6,7 @@ import { AssetLink } from "../../common/AssetLink";
 import { HighlightCard } from "../../common/HighlightCard";
 import { EndpointSessionInViewMetrics, EnvironmentData } from "../../types";
 import { addEnvironmentColumns } from "../addEnvironmentColumns";
-import { goToEnvironmentIssues } from "../goToEnvironmentIssues";
+import { handleEnvironmentTableRowClick } from "../goToEnvironmentIssues";
 import { DescriptionContainer } from "../styles";
 import { EndpointSessionInViewHighlightCardProps } from "./types";
 
@@ -23,7 +23,7 @@ export const EndpointSessionInViewHighlightCard = ({
   const handleTableRowClick = (
     row: Row<EnvironmentData<EndpointSessionInViewMetrics>>
   ) => {
-    goToEnvironmentIssues(
+    handleEnvironmentTableRowClick(
       config.environments,
       row.original.environmentName,
       data.insightType

src/components/Highlights/TopIssues/highlightCards/EndpointSlowdownSourceHighlightCard/index.tsx

@@ -8,7 +8,7 @@ import { AssetLink } from "../../common/AssetLink";
 import { HighlightCard } from "../../common/HighlightCard";
 import { EndpointSlowdownSourceMetrics, EnvironmentData } from "../../types";
 import { addEnvironmentColumns } from "../addEnvironmentColumns";
-import { goToEnvironmentIssues } from "../goToEnvironmentIssues";
+import { handleEnvironmentTableRowClick } from "../goToEnvironmentIssues";
 import { DescriptionContainer } from "../styles";
 import { EndpointSlowdownSourceHighlightCardProps } from "./types";
 
@@ -39,7 +39,7 @@ export const EndpointSlowdownSourceHighlightCard = ({
   const handleTableRowClick = (
     row: Row<EnvironmentData<EndpointSlowdownSourceMetrics>>
   ) => {
-    goToEnvironmentIssues(
+    handleEnvironmentTableRowClick(
       config.environments,
       row.original.environmentName,
       data.insightType

src/components/Highlights/TopIssues/highlightCards/EndpointSpanNPlusOneHighlightCard/index.tsx

@@ -10,7 +10,7 @@ import { AssetLink } from "../../common/AssetLink";
 import { HighlightCard } from "../../common/HighlightCard";
 import { EndpointSpanNPlusOneMetrics, EnvironmentData } from "../../types";
 import { addEnvironmentColumns } from "../addEnvironmentColumns";
-import { goToEnvironmentIssues } from "../goToEnvironmentIssues";
+import { handleEnvironmentTableRowClick } from "../goToEnvironmentIssues";
 import { DescriptionContainer } from "../styles";
 import { EndpointSpanNPlusOneHighlightCardProps } from "./types";
 
@@ -57,7 +57,7 @@ export const EndpointSpanNPlusOneHighlightCard = ({
   const handleTableRowClick = (
     row: Row<EnvironmentData<EndpointSpanNPlusOneMetrics>>
   ) => {
-    goToEnvironmentIssues(
+    handleEnvironmentTableRowClick(
       config.environments,
       row.original.environmentName,
       data.insightType

src/components/Highlights/TopIssues/highlightCards/HotSpotHighlightCard/index.tsx

@@ -6,7 +6,7 @@ import { TableText } from "../../../common/TableText";
 import { HighlightCard } from "../../common/HighlightCard";
 import { EnvironmentData, HotSpotMetrics } from "../../types";
 import { addEnvironmentColumns } from "../addEnvironmentColumns";
-import { goToEnvironmentIssues } from "../goToEnvironmentIssues";
+import { handleEnvironmentTableRowClick } from "../goToEnvironmentIssues";
 import { HotSpotHighlightCardProps } from "./types";
 
 export const HotSpotHighlightCard = ({ data }: HotSpotHighlightCardProps) => {
@@ -28,7 +28,7 @@ export const HotSpotHighlightCard = ({ data }: HotSpotHighlightCardProps) => {
   const columns = addEnvironmentColumns(columnHelper, metricsColumns);
 
   const handleTableRowClick = (row: Row<EnvironmentData<HotSpotMetrics>>) => {
-    goToEnvironmentIssues(
+    handleEnvironmentTableRowClick(
       config.environments,
       row.original.environmentName,
       data.insightType

src/components/Highlights/TopIssues/highlightCards/SpaNPlusOneHighlightCard/index.tsx

@@ -9,7 +9,7 @@ import { TableText } from "../../../common/TableText";
 import { HighlightCard } from "../../common/HighlightCard";
 import { EnvironmentData, SpaNPlusOneMetrics } from "../../types";
 import { addEnvironmentColumns } from "../addEnvironmentColumns";
-import { goToEnvironmentIssues } from "../goToEnvironmentIssues";
+import { handleEnvironmentTableRowClick } from "../goToEnvironmentIssues";
 import { SpaNPlusOneHighlightCardProps } from "./types";
 
 export const SpaNPlusOneHighlightCard = ({
@@ -66,7 +66,7 @@ export const SpaNPlusOneHighlightCard = ({
   const handleTableRowClick = (
     row: Row<EnvironmentData<SpaNPlusOneMetrics>>
   ) => {
-    goToEnvironmentIssues(
+    handleEnvironmentTableRowClick(
       config.environments,
       row.original.environmentName,
       data.insightType

src/components/Highlights/TopIssues/highlightCards/SpanEndpointBottleneckHighlightCard/index.tsx

@@ -9,7 +9,7 @@ import { TableText } from "../../../common/TableText";
 import { HighlightCard } from "../../common/HighlightCard";
 import { EnvironmentData, SpanEndpointBottleneckMetrics } from "../../types";
 import { addEnvironmentColumns } from "../addEnvironmentColumns";
-import { goToEnvironmentIssues } from "../goToEnvironmentIssues";
+import { handleEnvironmentTableRowClick } from "../goToEnvironmentIssues";
 import { SpanEndpointBottleneckHighlightCardProps } from "./types";
 
 export const SpanEndpointBottleneckHighlightCard = ({
@@ -63,7 +63,7 @@ export const SpanEndpointBottleneckHighlightCard = ({
   const handleTableRowClick = (
     row: Row<EnvironmentData<SpanEndpointBottleneckMetrics>>
   ) => {
-    goToEnvironmentIssues(
+    handleEnvironmentTableRowClick(
       config.environments,
       row.original.environmentName,
       data.insightType

src/components/Highlights/TopIssues/highlightCards/SpanQueryOptimizationHighlightCard/index.tsx

@@ -10,7 +10,7 @@ import { AssetLink } from "../../common/AssetLink";
 import { HighlightCard } from "../../common/HighlightCard";
 import { EnvironmentData, SpanQueryOptimizationMetrics } from "../../types";
 import { addEnvironmentColumns } from "../addEnvironmentColumns";
-import { goToEnvironmentIssues } from "../goToEnvironmentIssues";
+import { handleEnvironmentTableRowClick } from "../goToEnvironmentIssues";
 import { DescriptionContainer } from "../styles";
 import { SpanQueryOptimizationHighlightCardProps } from "./types";
 
@@ -70,7 +70,7 @@ export const SpanQueryOptimizationHighlightCard = ({
   const handleTableRowClick = (
     row: Row<EnvironmentData<SpanQueryOptimizationMetrics>>
   ) => {
-    goToEnvironmentIssues(
+    handleEnvironmentTableRowClick(
       config.environments,
       row.original.environmentName,
       data.insightType

src/components/Highlights/TopIssues/highlightCards/SpanScalingHighlightCard/index.tsx

@@ -6,7 +6,7 @@ import { TableText } from "../../../common/TableText";
 import { HighlightCard } from "../../common/HighlightCard";
 import { EnvironmentData, SpanScalingMetrics } from "../../types";
 import { addEnvironmentColumns } from "../addEnvironmentColumns";
-import { goToEnvironmentIssues } from "../goToEnvironmentIssues";
+import { handleEnvironmentTableRowClick } from "../goToEnvironmentIssues";
 import { SpanScalingHighlightCardProps } from "./types";
 
 export const SpanScalingHighlightCard = ({
@@ -36,7 +36,7 @@ export const SpanScalingHighlightCard = ({
   const handleTableRowClick = (
     row: Row<EnvironmentData<SpanScalingMetrics>>
   ) => {
-    goToEnvironmentIssues(
+    handleEnvironmentTableRowClick(
       config.environments,
       row.original.environmentName,
       data.insightType

src/components/Highlights/TopIssues/highlightCards/goToEnvironmentIssues.ts

@@ -8,7 +8,7 @@ import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserA
 import { Environment } from "../../../common/App/types";
 import { trackingEvents } from "../../tracking";
 
-export const goToEnvironmentIssues = (
+export const handleEnvironmentTableRowClick = (
   environments: Environment[] | undefined,
   environmentNameToSelect: string,
   insightType: InsightType

src/components/Highlights/TopIssues/useTopIssuesData.ts

@@ -26,26 +26,26 @@ export const useTopIssuesData = () => {
       }
     });
   }, [config.scope?.span?.spanCodeObjectId, config.environments]);
-
   const previousGetData = usePrevious(getData);
 
+  useEffect(() => {
+    if (previousGetData && previousGetData !== getData) {
+      window.clearTimeout(refreshTimerId.current);
+
+      getData();
+    }
+  }, [previousGetData, getData]);
+
   useEffect(() => {
     if (
-      (previousGetData && previousGetData !== getData) ||
-      (previousLastSetDataTimeStamp &&
-        previousLastSetDataTimeStamp !== lastSetDataTimeStamp)
+      previousLastSetDataTimeStamp &&
+      previousLastSetDataTimeStamp !== lastSetDataTimeStamp
     ) {
-      window.clearTimeout(refreshTimerId.current);
       refreshTimerId.current = window.setTimeout(() => {
         getData();
       }, REFRESH_INTERVAL);
     }
-  }, [
-    previousLastSetDataTimeStamp,
-    lastSetDataTimeStamp,
-    getData,
-    previousGetData
-  ]);
+  }, [previousLastSetDataTimeStamp, lastSetDataTimeStamp, getData]);
 
   useEffect(() => {
     const handleTopIssuesData = (data: any, timeStamp: number) => {

src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/index.tsx

@@ -96,7 +96,9 @@ export const InsightHeader = ({
             <Tag
               type={tagType}
               content={
-                <insightTypeInfo.icon color={"currentColor"} size={16} />
+                <s.InsightIconContainer>
+                  <insightTypeInfo.icon color={"currentColor"} size={16} />
+                </s.InsightIconContainer>
               }
             />
           </Tooltip>

src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/styles.ts

@@ -51,3 +51,7 @@ export const Description = styled.div`
   display: flex;
   color: ${({ theme }) => theme.colors.v3.text.secondary};
 `;
+
+export const InsightIconContainer = styled.div`
+  display: flex;
+`;