digma-ai · kshmidt-digma · Mar 5, 2024 · Mar 5, 2024
diff --git a/src/components/Insights/BottleneckInsight/mockData.ts b/src/components/Insights/BottleneckInsight/mockData.ts
@@ -43,6 +43,7 @@ export const mockedBottleneckInsight: SpanEndpointBottleneckInsight = {
           "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/lock/{milisec}",
         spanName: "HTTP GET SampleInsights/lock/{milisec}"
       },
+      traceId: "traceId",
       probabilityOfBeingBottleneck: 0.36877828054298645,
       avgFractionWhenBeingBottleneck: 50,
       avgDurationWhenBeingBottleneck: {

diff --git a/src/components/Insights/ExcessiveAPICallsInsight/index.tsx b/src/components/Insights/ExcessiveAPICallsInsight/index.tsx
@@ -62,7 +62,7 @@ export const ExcessiveAPICallsInsight = (
                     </s.SpanName>
                   </Tooltip>
                   {config.isJaegerEnabled && traceId && (
-                    <Tooltip title={"Open trace"}>
+                    <Tooltip title={"Open Trace"}>
                       <s.Button
                         icon={{ component: CrosshairIcon }}
                         onClick={() =>

diff --git a/src/components/Insights/InsightsCatalog/index.tsx b/src/components/Insights/InsightsCatalog/index.tsx
@@ -13,6 +13,7 @@ import * as s from "./styles";
 import { InsightsCatalogProps, SORTING_CRITERION } from "./types";
 
 const PAGE_SIZE = 10;
+
 export const InsightsCatalog = (props: InsightsCatalogProps) => {
   const { insights, onJiraTicketCreate, defaultQuery, totalCount } = props;
   const [page, setPage] = useState(0);

diff --git a/src/components/Insights/InsightsPage/index.tsx b/src/components/Insights/InsightsPage/index.tsx
@@ -251,6 +251,7 @@ const renderInsightCard = (
         onJiraTicketCreate={onJiraTicketCreate}
         isJiraHintEnabled={isJiraHintEnabled}
         onGoToSpan={handleGoToSpan}
+        onTraceButtonClick={handleTraceButtonClick}
       />
     );
   }
@@ -266,6 +267,7 @@ const renderInsightCard = (
         onJiraTicketCreate={onJiraTicketCreate}
         isJiraHintEnabled={isJiraHintEnabled}
         onGoToSpan={handleGoToSpan}
+        onTraceButtonClick={handleTraceButtonClick}
       />
     );
   }

diff --git a/src/components/Insights/common/InsightCard/index.tsx b/src/components/Insights/common/InsightCard/index.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import { isString } from "../../../../typeGuards/isString";
 import { formatTimeDistance } from "../../../../utils/formatTimeDistance";
-import { Link } from "../../../common/Link";
 import { TraceIcon } from "../../../common/icons/12px/TraceIcon";
 import { HistogramIcon } from "../../../common/icons/16px/HistogramIcon";
 import { LiveIcon } from "../../../common/icons/16px/LiveIcon";
@@ -11,6 +10,7 @@ import { Button } from "../../../common/v3/Button";
 import { BaseButtonProps } from "../../../common/v3/Button/types";
 import { Card } from "../../../common/v3/Card";
 import { JiraButton } from "../../../common/v3/JiraButton";
+import { Link } from "../../../common/v3/Link";
 import { Tooltip } from "../../../common/v3/Tooltip";
 import { isSpanInsight } from "../../typeGuards";
 import { InsightHeader } from "./InsightHeader";

diff --git a/src/components/Insights/common/InsightCard/styles.ts b/src/components/Insights/common/InsightCard/styles.ts
@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { subscriptRegularTypography } from "../../../common/App/typographies";
 
 export const InsightFooter = styled.div`
   display: flex;
@@ -8,9 +9,10 @@ export const InsightFooter = styled.div`
 `;
 
 export const Description = styled.div`
+  ${subscriptRegularTypography}
+
   display: flex;
   gap: 8px;
-  font-size: 13px;
   color: ${({ theme }) => theme.colors.v3.text.secondary};
 `;
 

diff --git a/src/components/Insights/common/insights/DurationInsight/DurationInsight.stories.tsx b/src/components/Insights/common/insights/DurationInsight/DurationInsight.stories.tsx
@@ -5280,110 +5280,3 @@ export const HistogramWithAFewBars: Story = {
     }
   }
 };
-
-// TODO: fix this case
-export const EmptyStateBug: Story = {
-  args: {
-    insight: {
-      sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId",
-      id: "60b55792-8262-4c5d-9628-7cce7979ad6d",
-      name: "Performance Stats",
-      type: InsightType.SpanDurations,
-      category: InsightCategory.Performance,
-      specifity: 4,
-      isRecalculateEnabled: true,
-      spanCodeObjectId:
-        "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/HttpCall",
-      span: {
-        name: "HTTP GET SampleInsights/HttpCall",
-        displayName: "HTTP GET SampleInsights/HttpCall",
-        instrumentationLibrary: "OpenTelemetry.Instrumentation.AspNetCore",
-        spanCodeObjectId:
-          "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/HttpCall",
-        methodCodeObjectId:
-          "method:Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$HttpCall",
-        kind: "Server",
-        codeObjectId:
-          "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$HttpCall"
-      },
-      percentiles: [
-        {
-          percentile: 0.5,
-          currentDuration: {
-            value: 426.62,
-            unit: "ms",
-            raw: 426615000
-          },
-          previousDuration: null,
-          changeTime: null,
-          changeVerified: null,
-          traceIds: []
-        },
-        {
-          percentile: 0.95,
-          currentDuration: {
-            value: 426.62,
-            unit: "ms",
-            raw: 426615000
-          },
-          previousDuration: null,
-          changeTime: null,
-          changeVerified: null,
-          traceIds: []
-        }
-      ],
-      lastSpanInstanceInfo: null,
-      histogramPlot: null,
-      average: {
-        value: 0,
-        unit: "ns",
-        raw: 0
-      },
-      standardDeviation: {
-        value: 0,
-        unit: "ns",
-        raw: 0
-      },
-      isAsync: false,
-      scope: InsightScope.Span,
-      spanInfo: {
-        name: "HTTP GET SampleInsights/HttpCall",
-        displayName: "HTTP GET SampleInsights/HttpCall",
-        instrumentationLibrary: "OpenTelemetry.Instrumentation.AspNetCore",
-        spanCodeObjectId:
-          "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/HttpCall",
-        methodCodeObjectId:
-          "method:Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$HttpCall",
-        kind: "Server",
-        codeObjectId:
-          "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$HttpCall"
-      },
-      shortDisplayInfo: {
-        title: "",
-        targetDisplayName: "",
-        subtitle: "",
-        description: ""
-      },
-      codeObjectId:
-        "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$HttpCall",
-      decorators: [],
-      environment: "DOTNET#ID#1",
-      importance: 5,
-      severity: 0,
-      impact: 0,
-      criticality: 0,
-      reopenCount: 0,
-      ticketLink: null,
-      prefixedCodeObjectId:
-        "method:Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$HttpCall",
-      customStartTime: null,
-      actualStartTime: "0001-01-01T00:00:00",
-      firstCommitId: null,
-      lastCommitId: null,
-      deactivatedCommitId: null,
-      firstDetected: "2024-02-15T12:37:29.929835Z",
-      lastDetected: "2024-02-15T12:37:29.929835Z"
-      // flags: []
-    }
-  }
-};
diff --git a/src/components/Insights/common/insights/DurationInsight/constants.ts b/src/components/Insights/common/insights/DurationInsight/constants.ts
@@ -1,2 +1,4 @@
-export const LABEL_HEIGHT = 14; // in pixels ("caption1" Typography line height)
+import { typographies } from "../../../../common/App/typographies";
+
+export const LABEL_HEIGHT = typographies.captionOne.lineHeight;
 export const DIVIDER = " | ";
diff --git a/src/components/Insights/common/insights/EndpointBottleneckInsight/index.tsx b/src/components/Insights/common/insights/EndpointBottleneckInsight/index.tsx
@@ -30,6 +30,16 @@ export const EndpointBottleneckInsight = (
       props.onJiraTicketCreate(insight, spanCodeObjectId, event);
   };
 
+  const handleTraceButtonClick = () => {
+    if (span.traceId) {
+      props.onTraceButtonClick(
+        { id: span.traceId, name: span.spanInfo.name },
+        insight.type,
+        insight.span.spanInfo.spanCodeObjectId
+      );
+    }
+  };
+
   const spanName = span.spanInfo.displayName;
   const spanCodeObjectId = span.spanInfo.spanCodeObjectId;
 
@@ -75,6 +85,7 @@ export const EndpointBottleneckInsight = (
       onRefresh={props.onRefresh}
       onJiraButtonClick={handleTicketInfoButtonClick}
       onGoToSpan={props.onGoToSpan}
+      onGoToTrace={span.traceId ? handleTraceButtonClick : undefined}
     />
   );
 };
diff --git a/src/components/Insights/common/insights/EndpointBottleneckInsight/mockData.ts b/src/components/Insights/common/insights/EndpointBottleneckInsight/mockData.ts
@@ -23,6 +23,7 @@ export const mockedSpanBottleneckInsight: EndpointBottleneckInsight = {
   specifity: 3,
   importance: 2,
   span: {
+    traceId: "traceId",
     spanInfo: {
       name: "DelayAsync",
       displayName: "DelayAsync",

diff --git a/src/components/Insights/common/insights/EndpointBottleneckInsight/types.ts b/src/components/Insights/common/insights/EndpointBottleneckInsight/types.ts
@@ -1,7 +1,8 @@
 import {
   EndpointBottleneckInsight,
   InsightProps,
-  InsightType
+  InsightType,
+  Trace
 } from "../../../types";
 
 export interface EndpointBottleneckInsightProps extends InsightProps {
@@ -10,4 +11,9 @@ export interface EndpointBottleneckInsightProps extends InsightProps {
     spanCodeObjectId: string,
     insightType: InsightType
   ) => void;
+  onTraceButtonClick: (
+    trace: Trace,
+    insightType: InsightType,
+    spanCodeObjectId?: string
+  ) => void;
 }
diff --git a/src/components/Insights/common/insights/ExcessiveAPICallsInsight/index.tsx b/src/components/Insights/common/insights/ExcessiveAPICallsInsight/index.tsx
@@ -57,7 +57,7 @@ export const ExcessiveAPICallsInsight = (
                   onClick={() => handleLinkClick(spanCodeObjectId)}
                   buttons={[
                     config.isJaegerEnabled && traceId && (
-                      <Tooltip title={"Open trace"} key={"open-trace"}>
+                      <Tooltip title={"Open Trace"} key={"openTrace"}>
                         <Button
                           icon={TargetIcon}
                           onClick={() =>

diff --git a/src/components/Insights/common/insights/ScalingIssueInsight/ScalingIssueInsight.stories.tsx b/src/components/Insights/common/insights/ScalingIssueInsight/ScalingIssueInsight.stories.tsx
@@ -27,14 +27,14 @@ export const Minimal: Story = {
   }
 };
 
-export const Story2: Story = {
+export const WithEndpointAndRootCause: Story = {
   name: "Endpoint + Root Cause",
   args: {
     insight: { ...mockedSpanScalingInsight, ...withRootCause }
   }
 };
 
-export const Story3: Story = {
+export const WithDBSpanAndAffectedEndpoint: Story = {
   name: "DB Span + Affected Endpoint",
   args: {
     insight: {
@@ -45,7 +45,7 @@ export const Story3: Story = {
   }
 };
 
-export const Story4: Story = {
+export const WithDBSpanAndAffectedEndpointAndRootCause: Story = {
   name: "DB Span + Affected Endpoint + Root Cause",
   args: {
     insight: {

diff --git a/src/components/Insights/common/insights/ScalingIssueInsight/index.tsx b/src/components/Insights/common/insights/ScalingIssueInsight/index.tsx
@@ -18,6 +18,7 @@ import * as s from "./styles";
 import { ScalingIssueInsightProps } from "./types";
 
 const PAGE_SIZE = 3;
+
 export const ScalingIssueInsight = (props: ScalingIssueInsightProps) => {
   const config = useContext(ConfigContext);
   const affectedEndpoints = props.insight.affectedEndpoints || [];

diff --git a/src/components/Insights/common/insights/SessionInViewInsight/index.tsx b/src/components/Insights/common/insights/SessionInViewInsight/index.tsx
@@ -51,7 +51,7 @@ export const SessionInViewInsight = (props: SessionInViewInsightProps) => {
               const buttons =
                 traceId && config.isJaegerEnabled
                   ? [
-                      <Tooltip title={"Open trace"} key={"trace"}>
+                      <Tooltip title={"Open Trace"} key={"openTrace"}>
                         <Button
                           icon={TraceIcon}
                           onClick={() =>

diff --git a/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/index.tsx b/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/index.tsx
@@ -1,11 +1,15 @@
-import { ReactNode, useState } from "react";
+import { ReactNode, useContext, useState } from "react";
+import { isNull } from "../../../../../typeGuards/isNull";
 import { getDurationString } from "../../../../../utils/getDurationString";
 import { sendTrackingEvent } from "../../../../../utils/sendTrackingEvent";
 import { trimEndpointScheme } from "../../../../../utils/trimEndpointScheme";
+import { ConfigContext } from "../../../../common/App/ConfigContext";
+import { TraceIcon } from "../../../../common/icons/12px/TraceIcon";
+import { Button } from "../../../../common/v3/Button";
 import { Link } from "../../../../common/v3/Link";
 import { Tooltip } from "../../../../common/v3/Tooltip";
 import { trackingEvents } from "../../../tracking";
-import { BottleneckEndpointInfo } from "../../../types";
+import { BottleneckEndpointInfo, InsightType, Trace } from "../../../types";
 import { Info } from "../../Info";
 import { InsightCard } from "../../InsightCard";
 import { ColumnsContainer } from "../../InsightCard/ColumnsContainer";
@@ -37,9 +41,11 @@ const renderOptions = (
       value: spanCodeObjectId
     };
   });
+
 export const SpanEndpointBottleneckInsight = (
   props: SpanEndpointBottleneckInsightProps
 ) => {
+  const config = useContext(ConfigContext);
   const slowEndpoints = props.insight.slowEndpoints || [];
   const [selectedEndpoint, setSelectedEndpoint] = useState(
     slowEndpoints.length > 0 ? slowEndpoints[0] : null
@@ -58,9 +64,13 @@ export const SpanEndpointBottleneckInsight = (
       props.onJiraTicketCreate(props.insight, undefined, event);
   };
 
-  if (slowEndpoints.length === 0) {
-    return null;
-  }
+  const handleTraceButtonClick = (
+    trace: Trace,
+    insightType: InsightType,
+    spanCodeObjectId?: string
+  ) => {
+    props.onTraceButtonClick(trace, insightType, spanCodeObjectId);
+  };
 
   return (
     <InsightCard
@@ -77,18 +87,43 @@ export const SpanEndpointBottleneckInsight = (
             <Description>
               Affected Endpoints ({slowEndpoints.length})
             </Description>
-            <Select
-              value={selectedEndpoint?.endpointInfo.spanCodeObjectId}
-              onChange={(selectedOption) => {
-                const selected =
-                  slowEndpoints.find(
-                    (x) => x.endpointInfo.spanCodeObjectId === selectedOption
-                  ) || null;
+            <s.SelectContainer>
+              <Select
+                value={selectedEndpoint?.endpointInfo.spanCodeObjectId}
+                onChange={(selectedOption) => {
+                  const selected =
+                    slowEndpoints.find(
+                      (x) => x.endpointInfo.spanCodeObjectId === selectedOption
+                    ) || null;
 
-                setSelectedEndpoint(selected);
-              }}
-              options={renderOptions(slowEndpoints, handleSpanLinkClick)}
-            />
+                  setSelectedEndpoint(selected);
+                }}
+                options={renderOptions(slowEndpoints, handleSpanLinkClick)}
+              />
+              {config.isJaegerEnabled &&
+                selectedEndpoint &&
+                selectedEndpoint.traceId && (
+                  <Tooltip title={"Open Trace"}>
+                    <Button
+                      icon={TraceIcon}
+                      onClick={() => {
+                        if (isNull(selectedEndpoint.traceId)) {
+                          return;
+                        }
+
+                        handleTraceButtonClick(
+                          {
+                            name: selectedEndpoint.endpointInfo.route,
+                            id: selectedEndpoint.traceId
+                          },
+                          props.insight.type,
+                          selectedEndpoint.endpointInfo.spanCodeObjectId
+                        );
+                      }}
+                    />
+                  </Tooltip>
+                )}
+            </s.SelectContainer>
           </Details>
           {selectedEndpoint && (
             <ColumnsContainer>