digma-ai · kshmidt-digma · Mar 1, 2024 · Mar 1, 2024 · Mar 1, 2024
diff --git a/src/components/Insights/InsightsPage/index.tsx b/src/components/Insights/InsightsPage/index.tsx
@@ -14,7 +14,6 @@ import { CardsIcon } from "../../common/icons/CardsIcon";
 import { DurationBreakdownInsight } from "../DurationBreakdownInsight";
 import { EndpointQueryOptimizationInsight } from "../EndpointQueryOptimizationInsight";
 import { QueryOptimizationInsight } from "../QueryOptimizationInsight";
-import { TopUsageInsight } from "../TopUsageInsight";
 import { actions } from "../actions";
 import { DurationInsight } from "../common/insights/DurationInsight";
 import { EndpointBottleneckInsight } from "../common/insights/EndpointBottleneckInsight";
@@ -29,6 +28,7 @@ import { SlowEndpointInsight } from "../common/insights/SlowEndpointInsight";
 import { SpanEndpointBottleneckInsight } from "../common/insights/SpanEndpointBottleneckInsight";
 import { SpanNPlusOneInsight } from "../common/insights/SpanNPlusOneInsight";
 import { SpanNexusInsight } from "../common/insights/SpanNexusInsight";
+import { TopUsageInsight } from "../common/insights/TopUsageInsight";
 import { TrafficInsight } from "../common/insights/TrafficInsight";
 import { Description } from "../styles";
 import { trackingEvents } from "../tracking";

diff --git a/src/components/Insights/PerformanceAtScaleInsight/styles.ts b/src/components/Insights/PerformanceAtScaleInsight/styles.ts
@@ -44,7 +44,7 @@ export const TableHeaderCell = styled.th`
   padding: 0;
 
   &:last-child {
-    text-align: right;
+    text-align: end;
   }
 `;
 
@@ -57,11 +57,11 @@ export const TableBodyCell = styled.td`
   padding: 0;
 
   &:first-child {
-    text-align: left;
+    text-align: start;
   }
 
   &:last-child {
-    text-align: right;
+    text-align: end;
   }
 `;
 

diff --git a/src/components/Insights/RequestBreakdownInsight/styles.ts b/src/components/Insights/RequestBreakdownInsight/styles.ts
@@ -97,7 +97,7 @@ export const TableHead = styled.thead`
 `;
 
 export const TableHeaderCell = styled.th`
-  text-align: left;
+  text-align: start;
   font-weight: 400;
   padding-left: 4px;
   padding-bottom: 8px;
@@ -128,7 +128,7 @@ export const TableBodyCell = styled.td`
 
   &:last-child {
     padding: 4px 4px 4px 22px;
-    text-align: right;
+    text-align: end;
   }
 `;
 

diff --git a/src/components/Insights/common/InsightCard/index.tsx b/src/components/Insights/common/InsightCard/index.tsx
@@ -139,7 +139,7 @@ export const InsightCard = (props: InsightCardProps) => {
               </Tooltip>
             )}
             {props.onJiraButtonClick && (
-              <Tooltip title={"Jira ticket info"}>
+              <Tooltip title={"Ticket info"}>
                 <JiraButton
                   onTicketInfoButtonClick={props.onJiraButtonClick}
                   ticketLink={props.jiraTicketInfo?.ticketLink}

diff --git a/src/components/Insights/common/insights/RequestBreakdownInsight/styles.ts b/src/components/Insights/common/insights/RequestBreakdownInsight/styles.ts
@@ -74,12 +74,12 @@ export const TableHeaderCell = styled.th`
   ${caption1RegularTypography}
 
   &:first-child {
-    text-align: left;
+    text-align: start;
     padding-left: 8px;
   }
 
   &:last-child {
-    text-align: right;
+    text-align: end;
     padding-right: 8px;
   }
 `;

diff --git a/src/components/Insights/common/insights/SessionInViewInsight/index.tsx b/src/components/Insights/common/insights/SessionInViewInsight/index.tsx
@@ -1,7 +1,7 @@
 import { useContext } from "react";
 import { usePagination } from "../../../../../hooks/usePagination";
 import { ConfigContext } from "../../../../common/App/ConfigContext";
-import { CrosshairIcon } from "../../../../common/icons/CrosshairIcon";
+import { TraceIcon } from "../../../../common/icons/12px/TraceIcon";
 import { Button } from "../../../../common/v3/Button";
 import { Pagination } from "../../../../common/v3/Pagination";
 import { Tooltip } from "../../../../common/v3/Tooltip";
@@ -51,20 +51,21 @@ export const SessionInViewInsight = (props: SessionInViewInsightProps) => {
               const buttons =
                 traceId && config.isJaegerEnabled
                   ? [
-                      <Button
-                        key={traceId}
-                        icon={CrosshairIcon}
-                        onClick={() =>
-                          handleTraceButtonClick(
-                            {
-                              name: spanName,
-                              id: traceId
-                            },
-                            props.insight.type,
-                            spanCodeObjectId
-                          )
-                        }
-                      />
+                      <Tooltip title={"Open trace"} key={"trace"}>
+                        <Button
+                          icon={TraceIcon}
+                          onClick={() =>
+                            handleTraceButtonClick(
+                              {
+                                name: spanName,
+                                id: traceId
+                              },
+                              props.insight.type,
+                              spanCodeObjectId
+                            )
+                          }
+                        />
+                      </Tooltip>
                     ]
                   : [];
 

diff --git a/src/components/Insights/common/insights/SpanNPlusOneInsight/index.tsx b/src/components/Insights/common/insights/SpanNPlusOneInsight/index.tsx
@@ -91,7 +91,7 @@ export const SpanNPlusOneInsight = (props: SpanNPlusOneInsightProps) => {
       content={
         <ContentContainer>
           <Details>
-            <Description>Effected Endpoints ({endpoints.length})</Description>
+            <Description>Affected Endpoints ({endpoints.length})</Description>
             <Select
               value={selectedEndpoint?.endpointInfo.entrySpanCodeObjectId}
               onChange={(selectedOption) => {

diff --git a/src/components/Insights/common/insights/TopUsageInsight/TopUsageInsight.stories.tsx b/src/components/Insights/common/insights/TopUsageInsight/TopUsageInsight.stories.tsx
@@ -0,0 +1,113 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { TopUsageInsight } from ".";
+import { InsightCategory, InsightScope, InsightType } from "../../../types";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof TopUsageInsight> = {
+  title: "Insights/common/insights/TopUsageInsight",
+  component: TopUsageInsight,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "fullscreen"
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    insight: {
+      sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId",
+      id: "60b55792-8162-4c5d-9628-7cce7979ad6d",
+      firstDetected: "2023-12-05T17:25:47.010Z",
+      lastDetected: "2024-01-05T13:14:47.010Z",
+      criticality: 0,
+      firstCommitId: "b3f7b3f",
+      lastCommitId: "a1b2c3d",
+      deactivatedCommitId: null,
+      reopenCount: 0,
+      ticketLink: null,
+      impact: 0,
+      name: "Top Usage",
+      type: InsightType.SpanUsages,
+      category: InsightCategory.Usage,
+      specifity: 4,
+      isRecalculateEnabled: true,
+      importance: 5,
+      span: "DelayAsync",
+      sampleTrace: null,
+      flows: [
+        {
+          sampleTraceIds: ["3E41E4197B696CA9BF1157AEB254DFE0"],
+          percentage: 40.15025041736227,
+          firstService: {
+            service: "Sample.MoneyTransfer.API",
+            span: "HTTP GET SampleInsights/lock/{milisec}",
+            codeObjectId:
+              "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double)",
+            spanCodeObjectId:
+              "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/lock/{milisec}"
+          },
+          intermediateSpan: "WaitForLock",
+          lastService: null,
+          lastServiceSpan: null
+        },
+        {
+          sampleTraceIds: ["3E41E4197B696CA9BF1157AEB254DFE0"],
+          percentage: 40.15025041736227,
+          firstService: {
+            service: "Sample.MoneyTransfer.API",
+            span: "HTTP GET SampleInsights/lock/{milisec}",
+            codeObjectId:
+              "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double)",
+            spanCodeObjectId:
+              "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/lock/{milisec}"
+          },
+          intermediateSpan: "Connecting",
+          lastService: null,
+          lastServiceSpan: null
+        },
+        {
+          sampleTraceIds: ["0DB20449C835447E04F6549627A3999F"],
+          percentage: 19.69949916527546,
+          firstService: {
+            service: "Sample.MoneyTransfer.API",
+            span: "HTTP GET SampleInsights/UnverifiedChange/{milisec}",
+            codeObjectId:
+              "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$UnverifiedChange(Int32)",
+            spanCodeObjectId:
+              "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/UnverifiedChange/{milisec}"
+          },
+          intermediateSpan: null,
+          lastService: null,
+          lastServiceSpan: null
+        }
+      ],
+      scope: InsightScope.Span,
+      spanInfo: {
+        name: "DelayAsync",
+        displayName: "DelayAsync",
+        instrumentationLibrary: "SampleInsightsController",
+        spanCodeObjectId: "span:SampleInsightsController$_$DelayAsync",
+        methodCodeObjectId: null,
+        kind: "Internal",
+        codeObjectId: null
+      },
+      shortDisplayInfo: {
+        title: "",
+        targetDisplayName: "",
+        subtitle: "",
+        description: ""
+      },
+      codeObjectId: "SampleInsightsController$_$DelayAsync",
+      decorators: null,
+      environment: "BOB-LAPTOP[LOCAL]",
+      severity: 0,
+      prefixedCodeObjectId: "span:SampleInsightsController$_$DelayAsync",
+      customStartTime: null,
+      actualStartTime: "2023-06-17T00:00:00.000Z"
+    }
+  }
+};