Migrate to user-action tracking events, update styles

src/components/Assets/AssetsFilter/index.tsx

@@ -6,8 +6,8 @@ import { isEnvironment } from "../../../typeGuards/isEnvironment";
 import { isNull } from "../../../typeGuards/isNull";
 import { isUndefined } from "../../../typeGuards/isUndefined";
 import { InsightType } from "../../../types";
+import { sendTrackingEvent } from "../../../utils/actions/sendTrackingEvent";
 import { getInsightTypeInfo } from "../../../utils/getInsightTypeInfo";
-import { sendTrackingEvent } from "../../../utils/sendTrackingEvent";
 import { ConfigContext } from "../../common/App/ConfigContext";
 import { FilterButton } from "../../common/FilterButton";
 import { NewButton } from "../../common/NewButton";

src/components/Assets/NoDataMessage/index.tsx

@@ -1,6 +1,6 @@
 import { actions as globalActions } from "../../../actions";
 import { trackingEvents as globalTrackingEvents } from "../../../trackingEvents";
-import { sendTrackingEvent } from "../../../utils/sendTrackingEvent";
+import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent";
 import { EmptyState } from "../../common/EmptyState";
 import { NewCircleLoader } from "../../common/NewCircleLoader";
 import { CardsIcon } from "../../common/icons/CardsIcon";
@@ -9,9 +9,12 @@ import { NoDataMessageProps } from "./types";
 
 export const NoDataMessage = (props: NoDataMessageProps) => {
   const handleTroubleshootingLinkClick = () => {
-    sendTrackingEvent(globalTrackingEvents.TROUBLESHOOTING_LINK_CLICKED, {
-      origin: "assets"
-    });
+    sendUserActionTrackingEvent(
+      globalTrackingEvents.TROUBLESHOOTING_LINK_CLICKED,
+      {
+        origin: "assets"
+      }
+    );
 
     window.sendMessageToDigma({
       action: globalActions.OPEN_TROUBLESHOOTING_GUIDE

src/components/Assets/index.tsx

@@ -7,7 +7,7 @@ import {
 import { useDebounce } from "../../hooks/useDebounce";
 import { usePrevious } from "../../hooks/usePrevious";
 import { FeatureFlag } from "../../types";
-import { sendTrackingEvent } from "../../utils/sendTrackingEvent";
+import { sendUserActionTrackingEvent } from "../../utils/actions/sendUserActionTrackingEvent";
 import { ConfigContext } from "../common/App/ConfigContext";
 import { EmptyState } from "../common/EmptyState";
 import { SearchInput } from "../common/SearchInput";
@@ -103,7 +103,7 @@ export const Assets = () => {
   };
 
   const handleRefresh = () => {
-    sendTrackingEvent(trackingEvents.REFRESH_BUTTON_CLICKED, {
+    sendUserActionTrackingEvent(trackingEvents.REFRESH_BUTTON_CLICKED, {
       view: !selectedAssetTypeId ? "asset categories" : "assets"
     });
 

src/components/Dashboard/index.tsx

@@ -7,8 +7,9 @@ import { getFeatureFlagValue } from "../../featureFlags";
 import { platform } from "../../platform";
 import { isString } from "../../typeGuards/isString";
 import { FeatureFlag } from "../../types";
+import { openURLInDefaultBrowser } from "../../utils/actions/openURLInDefaultBrowser";
+import { sendTrackingEvent } from "../../utils/actions/sendTrackingEvent";
 import { formatEnvironmentName } from "../../utils/formatEnvironmentName";
-import { openURLInDefaultBrowser } from "../../utils/openURLInDefaultBrowser";
 import { ConfigContext } from "../common/App/ConfigContext";
 import { getThemeKind } from "../common/App/styles";
 import { DeploymentType } from "../common/App/types";
@@ -17,6 +18,7 @@ import { DigmaLogoIcon } from "../common/icons/DigmaLogoIcon";
 import { OpenLinkIcon } from "../common/icons/OpenLinkIcon";
 import { actions } from "./actions";
 import * as s from "./styles";
+import { trackingEvents } from "./tracking";
 import { EnvironmentInfoData } from "./types";
 import { ClientSpansPerformanceImpact } from "./widgets/ClientSpansPerformanceImpact";
 import { SlowQueries } from "./widgets/SlowQueries";
@@ -86,6 +88,10 @@ export const Dashboard = () => {
     };
   }, []);
 
+  useEffect(() => {
+    sendTrackingEvent(trackingEvents.PAGE_LOADED);
+  }, []);
+
   useEffect(() => {
     if (config.backendInfo) {
       setIsInitialLoading(false);

src/components/Dashboard/tracking.ts

@@ -0,0 +1,11 @@
+import { addPrefix } from "../../utils/addPrefix";
+
+const TRACKING_PREFIX = "dashboard";
+
+export const trackingEvents = addPrefix(
+  TRACKING_PREFIX,
+  {
+    PAGE_LOADED: "page loaded"
+  },
+  " "
+);

src/components/Documentation/index.tsx

@@ -1,11 +1,13 @@
 import { useEffect } from "react";
 import { isString } from "../../typeGuards/isString";
+import { sendTrackingEvent } from "../../utils/actions/sendTrackingEvent";
 import { addPrefix } from "../../utils/addPrefix";
 import { EnvironmentTypes } from "./pages/EnvironmentTypes";
 import { Page } from "./pages/RunDigma/Page";
 import { runDigmaWithCommandLine } from "./pages/RunDigma/runDigmaWithCommandLine";
 import { runDigmaWithDocker } from "./pages/RunDigma/runDigmaWithDocker";
 import { runDigmaWithGradleTasks } from "./pages/RunDigma/runDigmaWithGradleTasks";
+import { trackingEvents } from "./tracking";
 import { DocumentationProps } from "./types";
 
 const ACTION_PREFIX = "DOCUMENTATION";
@@ -33,6 +35,8 @@ export const Documentation = (props: DocumentationProps) => {
     window.sendMessageToDigma({
       action: actions.INITIALIZE
     });
+
+    sendTrackingEvent(trackingEvents.PAGE_LOADED, { page });
   }, []);
 
   return <>{pageContent}</>;

src/components/Documentation/tracking.ts

@@ -0,0 +1,11 @@
+import { addPrefix } from "../../utils/addPrefix";
+
+const TRACKING_PREFIX = "documentation";
+
+export const trackingEvents = addPrefix(
+  TRACKING_PREFIX,
+  {
+    PAGE_LOADED: "page loaded"
+  },
+  " "
+);

src/components/Highlights/TopIssues/common/AssetLink/index.tsx

@@ -1,17 +1,16 @@
 import { actions as globalActions } from "../../../../../actions";
-import { trackingEvents as globalTrackingEvents } from "../../../../../trackingEvents";
 import { ChangeScopePayload } from "../../../../../types";
-import { sendTrackingEvent } from "../../../../../utils/sendTrackingEvent";
+import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent";
 import { Tooltip } from "../../../../common/v3/Tooltip";
 import { trackingEvents } from "../../../tracking";
 import * as s from "./styles";
 import { AssetLinkProps } from "./types";
 
 export const AssetLink = ({ asset }: AssetLinkProps) => {
   const handleAssetLinkClick = () => {
-    sendTrackingEvent(globalTrackingEvents.USER_ACTION, {
-      actions: trackingEvents.TOP_ISSUE_CARD_ASSET_LINK_CLICKED
-    });
+    sendUserActionTrackingEvent(
+      trackingEvents.TOP_ISSUE_CARD_ASSET_LINK_CLICKED
+    );
 
     window.sendMessageToDigma<ChangeScopePayload>({
       action: globalActions.CHANGE_SCOPE,

src/components/Highlights/TopIssues/common/AssetLink/styles.ts

@@ -3,4 +3,5 @@ import { Link as CommonLink } from "../../../../common/v3/Link";
 
 export const Link = styled(CommonLink)`
   padding: 6px 0;
+  max-width: 100%;
 `;

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

@@ -1,8 +1,5 @@
 import { createColumnHelper } from "@tanstack/react-table";
-import { Duration } from "../../../../../globals";
-import { getDurationString } from "../../../../../utils/getDurationString";
 import { Table } from "../../../common/Table";
-import { TableTag } from "../../../common/TableTag";
 import { TableText } from "../../../common/TableText";
 import { AssetLink } from "../../common/AssetLink";
 import { HighlightCard } from "../../common/HighlightCard";
@@ -36,29 +33,13 @@ export const EndpointHighNumberOfQueriesHighlightCard = ({
       (x) => x.metrics.find((x) => x.id === "TypicalQueriesCount"),
       {
         header: "Typical",
-        meta: {
-          width: "20%",
-          minWidth: 60
-        },
         cell: (info) => {
           const metric = info.getValue();
           const value = metric ? String(metric.value) : "";
           return metric ? <TableText title={value}>{value}</TableText> : null;
         }
       }
-    ),
-    columnHelper.accessor((x) => x.metrics.find((x) => x.id === "Duration"), {
-      header: "Duration",
-      meta: {
-        width: "20%",
-        minWidth: 60
-      },
-      cell: (info) => {
-        const metric = info.getValue();
-        const value = metric ? getDurationString(metric.value as Duration) : "";
-        return metric ? <TableTag title={value} content={value} /> : null;
-      }
-    })
+    )
   ];
 
   const columns = addEnvironmentColumns(columnHelper, metricsColumns);

src/components/Highlights/TopIssues/highlightCards/EndpointHighNumberOfQueriesHighlightCard/mockData.ts

@@ -10,14 +10,6 @@ export const mockedEndpointHighNumberOfQueriesMetrics: EndpointHighNumberOfQueri
     {
       id: "TypicalQueriesCount",
       value: 10
-    },
-    {
-      id: "Duration",
-      value: {
-        value: 22.71,
-        unit: "ms",
-        raw: 22705900.0
-      }
     }
   ];
 

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

@@ -1,9 +1,7 @@
 import { createColumnHelper } from "@tanstack/react-table";
-import { Duration } from "../../../../../globals";
 import { getDurationString } from "../../../../../utils/getDurationString";
 import { Table } from "../../../common/Table";
 import { TableTag } from "../../../common/TableTag";
-import { TableText } from "../../../common/TableText";
 import { AssetLink } from "../../common/AssetLink";
 import { HighlightCard } from "../../common/HighlightCard";
 import { EndpointSlowdownSourceMetrics, EnvironmentData } from "../../types";
@@ -24,23 +22,10 @@ export const EndpointSlowdownSourceHighlightCard = ({
         header: "Slower by",
         cell: (info) => {
           const metric = info.getValue();
-          const value = metric
-            ? getDurationString(metric.value as Duration)
-            : "";
+          const value = metric ? getDurationString(metric.value) : "";
           return metric ? <TableTag title={value} content={value} /> : null;
         }
       }
-    ),
-    columnHelper.accessor(
-      (x) => x.metrics.find((x) => x.id === "DifferencePercentage"),
-      {
-        header: "% Slower",
-        cell: (info) => {
-          const metric = info.getValue();
-          const value = metric ? `${String(metric.value)}%` : "";
-          return metric ? <TableText title={value}>{value}</TableText> : null;
-        }
-      }
     )
   ];
 

src/components/Highlights/TopIssues/highlightCards/EndpointSlowdownSourceHighlightCard/mockData.ts

@@ -10,10 +10,6 @@ export const mockedEndpointSlowdownSourceHighlight: EndpointSlowdownSourceMetric
         unit: "ms",
         raw: 22705900.0
       }
-    },
-    {
-      id: "DifferencePercentage",
-      value: 50
     }
   ];
 

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

@@ -30,10 +30,6 @@ export const EndpointSpanNPlusOneHighlightCard = ({
       (x) => x.metrics.find((x) => x.id === "RequestPercentage"),
       {
         header: "Requests",
-        meta: {
-          width: "20%",
-          minWidth: 60
-        },
         cell: (info) => {
           const metric = info.getValue();
           const value = metric ? `${String(metric.value)}%` : "";
@@ -43,10 +39,6 @@ export const EndpointSpanNPlusOneHighlightCard = ({
     ),
     columnHelper.accessor((x) => x.metrics.find((x) => x.id === "Duration"), {
       header: "Duration",
-      meta: {
-        width: "20%",
-        minWidth: 60
-      },
       cell: (info) => {
         const metric = info.getValue();
         const value = metric ? getDurationString(metric.value as Duration) : "";

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

@@ -16,11 +16,7 @@ export const SpanScalingHighlightCard = ({
     columnHelper.accessor(
       (x) => x.metrics.find((x) => x.id === "IncreasePercentage"),
       {
-        header: "Duration",
-        meta: {
-          width: "20%",
-          minWidth: 60
-        },
+        header: "Increased by",
         cell: (info) => {
           const metric = info.getValue();
           const value = metric ? `${String(metric.value)}%` : "";

src/components/Highlights/TopIssues/index.tsx

@@ -1,9 +1,8 @@
 import { Fragment, useEffect, useState } from "react";
 import { actions as globalActions } from "../../../actions";
 import { usePrevious } from "../../../hooks/usePrevious";
-import { trackingEvents as globalTrackingEvents } from "../../../trackingEvents";
 import { ChangeViewPayload } from "../../../types";
-import { sendTrackingEvent } from "../../../utils/sendTrackingEvent";
+import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent";
 import { Link } from "../../common/v3/Link";
 import { EmptyStateCard } from "../EmptyStateCard";
 import { SectionHeader } from "../styles";
@@ -94,9 +93,7 @@ export const TopIssues = () => {
   const previousData = usePrevious(data);
 
   const handleViewAllLinkClick = () => {
-    sendTrackingEvent(globalTrackingEvents.USER_ACTION, {
-      actions: trackingEvents.VIEW_ALL_LINK_CLICKED
-    });
+    sendUserActionTrackingEvent(trackingEvents.VIEW_ALL_LINK_CLICKED);
 
     window.sendMessageToDigma<ChangeViewPayload>({
       action: globalActions.CHANGE_VIEW,

src/components/Highlights/TopIssues/types.ts

@@ -54,10 +54,6 @@ export type EndpointHighNumberOfQueriesMetrics = [
   {
     id: "TypicalQueriesCount";
     value: number;
-  },
-  {
-    id: "Duration";
-    value: Duration;
   }
 ];
 
@@ -93,10 +89,6 @@ export type EndpointSlowdownSourceMetrics = [
   {
     id: "DifferenceDelta";
     value: Duration;
-  },
-  {
-    id: "DifferencePercentage";
-    value: number;
   }
 ];