From ca5585e1b3fc791fa0a4b3b6324213721e409b7e Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Fri, 1 Mar 2024 12:41:39 +0100
Subject: [PATCH 1/2] Add Top Usage insight

---
 .../PerformanceAtScaleInsight/styles.ts       |   6 +-
 .../RequestBreakdownInsight/styles.ts         |   4 +-
 .../Insights/common/InsightCard/index.tsx     |   2 +-
 .../RequestBreakdownInsight/styles.ts         |   4 +-
 .../insights/SessionInViewInsight/index.tsx   |  31 +--
 .../insights/SpanNPlusOneInsight/index.tsx    |   2 +-
 .../TopUsageInsight.stories.tsx               | 113 ++++++++
 .../common/insights/TopUsageInsight/index.tsx | 255 ++++++++++++++++++
 .../common/insights/TopUsageInsight/styles.ts | 108 ++++++++
 .../common/insights/TopUsageInsight/types.ts  |  24 ++
 .../common/icons/ArrowDashedLineIcon.tsx      |  35 +++
 src/components/common/v3/Button/styles.ts     |   8 +-
 src/components/common/v3/JiraButton/index.tsx |  80 +++---
 src/components/common/v3/Tooltip/index.tsx    |   2 +-
 src/components/common/v3/Tooltip/styles.ts    |   5 +-
 src/components/common/v3/Tooltip/types.ts     |   5 +
 16 files changed, 618 insertions(+), 66 deletions(-)
 create mode 100644 src/components/Insights/common/insights/TopUsageInsight/TopUsageInsight.stories.tsx
 create mode 100644 src/components/Insights/common/insights/TopUsageInsight/index.tsx
 create mode 100644 src/components/Insights/common/insights/TopUsageInsight/styles.ts
 create mode 100644 src/components/Insights/common/insights/TopUsageInsight/types.ts
 create mode 100644 src/components/common/icons/ArrowDashedLineIcon.tsx

diff --git a/src/components/Insights/PerformanceAtScaleInsight/styles.ts b/src/components/Insights/PerformanceAtScaleInsight/styles.ts
index ad206066f..d260f5cc7 100644
--- 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
index d03eb11ed..976306801 100644
--- 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
index 98b1a4a9e..05102e3a0 100644
--- 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
index 01befc608..ee8bc8406 100644
--- 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
index e6249fd3b..80946e24b 100644
--- 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
index d0e70424d..e6a274292 100644
--- 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
new file mode 100644
index 000000000..79865fc88
--- /dev/null
+++ 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"
+    }
+  }
+};
diff --git a/src/components/Insights/common/insights/TopUsageInsight/index.tsx b/src/components/Insights/common/insights/TopUsageInsight/index.tsx
new file mode 100644
index 000000000..cb209fc56
--- /dev/null
+++ b/src/components/Insights/common/insights/TopUsageInsight/index.tsx
@@ -0,0 +1,255 @@
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+import { useContext } from "react";
+import { usePagination } from "../../../../../hooks/usePagination";
+import { InsightType } from "../../../../../types";
+import { roundTo } from "../../../../../utils/roundTo";
+import { ConfigContext } from "../../../../common/App/ConfigContext";
+import { TraceIcon } from "../../../../common/icons/12px/TraceIcon";
+import { ArrowDashedLineIcon } from "../../../../common/icons/ArrowDashedLineIcon";
+import { Direction } from "../../../../common/icons/types";
+import { Pagination } from "../../../../common/v3/Pagination";
+import { Tag } from "../../../../common/v3/Tag";
+import { Tooltip } from "../../../../common/v3/Tooltip";
+import { SpanUsagesInsight, Trace } from "../../../types";
+import { InsightCard } from "../../InsightCard";
+import * as s from "./styles";
+import { ColumnMeta, TopUsageInsightProps } from "./types";
+
+const PAGE_SIZE = 3;
+
+export const TopUsageInsight = (props: TopUsageInsightProps) => {
+  const config = useContext(ConfigContext);
+
+  const [pageItems, page, setPage] = usePagination(
+    props.insight.flows,
+    PAGE_SIZE,
+    props.insight.codeObjectId
+  );
+
+  const handleServiceLinkClick = (spanCodeObjectId?: string) => {
+    spanCodeObjectId &&
+      props.onAssetLinkClick(spanCodeObjectId, props.insight.type);
+  };
+
+  const handleTraceButtonClick = (
+    trace: Trace,
+    insightType: InsightType,
+    spanCodeObjectId?: string
+  ) => {
+    props.onTraceButtonClick(trace, insightType, spanCodeObjectId);
+  };
+
+  const columnHelper = createColumnHelper<SpanUsagesInsight["flows"][0]>();
+
+  const columns = [
+    columnHelper.accessor("percentage", {
+      header: "Usage",
+      meta: {
+        width: "20%",
+        minWidth: 60
+      },
+      cell: (info) => {
+        const percentage = info.getValue();
+        return (
+          <Tag type={"highlight"} content={`${roundTo(percentage, 2)}%`} />
+        );
+      }
+    }),
+    columnHelper.accessor((row) => row, {
+      header: "Flow",
+      meta: {
+        width: "80%",
+        minWidth: 30
+      },
+      cell: (info) => {
+        const flow = info.getValue();
+        return (
+          <s.FlowData>
+            <Tooltip
+              title={`${flow.firstService.service} ${flow.firstService.span}`}
+            >
+              <s.FullSpanName>
+                <s.SpanNamePart>{flow.firstService.service}</s.SpanNamePart>
+                <s.Link
+                  onClick={() =>
+                    handleServiceLinkClick(flow.firstService.spanCodeObjectId)
+                  }
+                >
+                  {flow.firstService.span}
+                </s.Link>
+              </s.FullSpanName>
+            </Tooltip>
+            {flow.intermediateSpan && (
+              <>
+                <ArrowDashedLineIcon
+                  direction={Direction.DOWN}
+                  color={"currentColor"}
+                />
+                <Tooltip title={flow.intermediateSpan}>
+                  <s.FullSpanName>
+                    <s.SpanNamePart>{flow.intermediateSpan}</s.SpanNamePart>
+                  </s.FullSpanName>
+                </Tooltip>
+              </>
+            )}
+            {flow.lastService && (
+              <>
+                <ArrowDashedLineIcon
+                  direction={Direction.DOWN}
+                  color={"currentColor"}
+                />
+                <Tooltip
+                  title={`${flow.lastService.service} ${flow.lastService.span}`}
+                >
+                  <s.FullSpanName>
+                    <s.SpanNamePart>{flow.lastService.service}</s.SpanNamePart>
+                    <s.Link
+                      onClick={() =>
+                        handleServiceLinkClick(
+                          flow.lastService?.spanCodeObjectId
+                        )
+                      }
+                    >
+                      {flow.lastService.span}
+                    </s.Link>
+                  </s.FullSpanName>
+                </Tooltip>
+              </>
+            )}
+            {flow.lastServiceSpan && (
+              <>
+                <ArrowDashedLineIcon
+                  direction={Direction.DOWN}
+                  color={"currentColor"}
+                />
+                <Tooltip title={flow.lastServiceSpan}>
+                  <s.FullSpanName>
+                    <s.SpanNamePart>{flow.lastServiceSpan}</s.SpanNamePart>
+                  </s.FullSpanName>
+                </Tooltip>
+              </>
+            )}
+          </s.FlowData>
+        );
+      }
+    }),
+    columnHelper.accessor((row) => row, {
+      header: "Action",
+      meta: {
+        width: "10%",
+        minWidth: 34
+      },
+      cell: (info) => {
+        const flow = info.getValue();
+        const name = `${flow.firstService.service}:${flow.firstService.span}`;
+        const traceId = flow.sampleTraceIds[0];
+
+        return (
+          <>
+            {config.isJaegerEnabled && traceId && (
+              <Tooltip title={"Open trace"}>
+                <s.Button
+                  buttonType={"tertiary"}
+                  icon={TraceIcon}
+                  onClick={() =>
+                    handleTraceButtonClick(
+                      {
+                        name,
+                        id: traceId
+                      },
+                      props.insight.type,
+                      props.insight.spanInfo?.spanCodeObjectId
+                    )
+                  }
+                />
+              </Tooltip>
+            )}
+          </>
+        );
+      }
+    })
+  ];
+
+  const table = useReactTable({
+    data: pageItems,
+    columns,
+    getCoreRowModel: getCoreRowModel()
+  });
+
+  const renderTable = () => (
+    <s.Table>
+      <s.TableHead>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <s.TableHeadRow key={headerGroup.id}>
+            {headerGroup.headers.map((header) => {
+              const meta = header.column.columnDef.meta as ColumnMeta;
+
+              return (
+                <s.TableHeaderCell
+                  key={header.id}
+                  style={{
+                    width: meta.width,
+                    minWidth: meta.minWidth
+                  }}
+                >
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </s.TableHeaderCell>
+              );
+            })}
+          </s.TableHeadRow>
+        ))}
+      </s.TableHead>
+      <s.TableBody>
+        {table.getRowModel().rows.map((row) => (
+          <s.TableBodyRow key={row.id}>
+            {row.getVisibleCells().map((cell) => {
+              const meta = cell.column.columnDef.meta as ColumnMeta;
+
+              return (
+                <s.TableBodyCell
+                  key={cell.id}
+                  style={{
+                    width: meta.width,
+                    minWidth: meta.minWidth
+                  }}
+                >
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </s.TableBodyCell>
+              );
+            })}
+          </s.TableBodyRow>
+        ))}
+      </s.TableBody>
+    </s.Table>
+  );
+
+  return (
+    <InsightCard
+      insight={props.insight}
+      content={
+        <s.Container>
+          {renderTable()}
+          <Pagination
+            itemsCount={props.insight.flows.length}
+            page={page}
+            pageSize={PAGE_SIZE}
+            onPageChange={setPage}
+            withDescription={true}
+          />
+        </s.Container>
+      }
+      onRecalculate={props.onRecalculate}
+      onRefresh={props.onRefresh}
+    />
+  );
+};
diff --git a/src/components/Insights/common/insights/TopUsageInsight/styles.ts b/src/components/Insights/common/insights/TopUsageInsight/styles.ts
new file mode 100644
index 000000000..88e008d20
--- /dev/null
+++ b/src/components/Insights/common/insights/TopUsageInsight/styles.ts
@@ -0,0 +1,108 @@
+import styled from "styled-components";
+import {
+  caption2RegularTypography,
+  footnoteRegularTypography
+} from "../../../../common/App/typographies";
+import { Link as CommonLink } from "../../../../common/Link";
+import { Button as CommonButton } from "../../../../common/v3/Button";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+export const FlowData = styled.div`
+  ${footnoteRegularTypography}
+
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  color: ${({ theme }) => theme.colors.v3.text.primary};
+  overflow: hidden;
+`;
+
+export const FullSpanName = styled.span`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+`;
+
+export const SpanNamePart = styled.span`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+export const Button = styled(CommonButton)`
+  margin-right: 10px;
+`;
+
+export const Link = styled(CommonLink)`
+  ${footnoteRegularTypography}
+
+  color: ${({ theme }) => theme.colors.v3.text.link};
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+export const Table = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+export const TableHead = styled.div`
+  color: ${({ theme }) => theme.colors.v3.text.secondary};
+`;
+
+export const TableHeadRow = styled.div`
+  display: flex;
+  gap: 12px;
+`;
+
+export const TableHeaderCell = styled.div`
+  ${caption2RegularTypography}
+
+  text-align: start;
+  overflow: hidden;
+
+  &:first-child {
+    padding-left: 8px;
+  }
+
+  &:last-child {
+    text-align: end;
+    padding-right: 8px;
+  }
+`;
+
+export const TableBody = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+export const TableBodyRow = styled.div`
+  display: flex;
+  gap: 12px;
+  padding: 8px 0;
+  border-radius: 4px;
+  background: ${({ theme }) => theme.colors.v3.surface.primary};
+`;
+
+export const TableBodyCell = styled.div`
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+
+  &:first-child {
+    padding-left: 8px;
+  }
+
+  &:last-child {
+    padding-right: 8px;
+  }
+`;
diff --git a/src/components/Insights/common/insights/TopUsageInsight/types.ts b/src/components/Insights/common/insights/TopUsageInsight/types.ts
new file mode 100644
index 000000000..b8fb960bb
--- /dev/null
+++ b/src/components/Insights/common/insights/TopUsageInsight/types.ts
@@ -0,0 +1,24 @@
+import {
+  InsightProps,
+  InsightType,
+  SpanUsagesInsight,
+  Trace
+} from "../../../types";
+
+export interface TopUsageInsightProps extends InsightProps {
+  insight: SpanUsagesInsight;
+  onAssetLinkClick: (
+    spanCodeObjectId: string,
+    insightType: InsightType
+  ) => void;
+  onTraceButtonClick: (
+    trace: Trace,
+    insightType: InsightType,
+    spanCodeObjectId?: string
+  ) => void;
+}
+
+export interface ColumnMeta {
+  width: string | number;
+  minWidth?: string | number;
+}
diff --git a/src/components/common/icons/ArrowDashedLineIcon.tsx b/src/components/common/icons/ArrowDashedLineIcon.tsx
new file mode 100644
index 000000000..055bd336c
--- /dev/null
+++ b/src/components/common/icons/ArrowDashedLineIcon.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { useIconProps } from "./hooks";
+import { Direction, RotatableIconProps } from "./types";
+
+const directionRotateMap: { [key in Direction]: string } = {
+  [Direction.UP]: "180",
+  [Direction.LEFT]: "90",
+  [Direction.RIGHT]: "-90",
+  [Direction.DOWN]: "0"
+};
+
+const ArrowDashedLineIconComponent = (props: RotatableIconProps) => {
+  const { size, color } = useIconProps(props);
+  const transform = {
+    transform: `rotate(${directionRotateMap[props.direction || Direction.UP]})`
+  };
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 6 13"
+      {...transform}
+    >
+      <path
+        fill={color}
+        d="m3 13 2.89-5H.1L3 13Zm.5-3.25V7.58h-1v2.17h1Zm0-4.33V3.25h-1v2.17h1Zm0-4.34V0h-1v1.08h1Z"
+      />
+    </svg>
+  );
+};
+
+export const ArrowDashedLineIcon = React.memo(ArrowDashedLineIconComponent);
diff --git a/src/components/common/v3/Button/styles.ts b/src/components/common/v3/Button/styles.ts
index fb1c32a21..af297f19d 100644
--- a/src/components/common/v3/Button/styles.ts
+++ b/src/components/common/v3/Button/styles.ts
@@ -95,7 +95,7 @@ export const Button = styled.button<ButtonElementProps>`
           return theme.colors.v3.surface.brandDark;
         case "primary":
         default:
-          return theme.colors.v3.surface.secondary;
+          return theme.colors.v3.surface.brandSecondary;
       }
     }};
     border: 1px solid
@@ -107,7 +107,7 @@ export const Button = styled.button<ButtonElementProps>`
             return theme.colors.v3.stroke.primary;
           case "primary":
           default:
-            return theme.colors.v3.surface.secondary;
+            return theme.colors.v3.surface.brandSecondary;
         }
       }};
 
@@ -138,7 +138,7 @@ export const Button = styled.button<ButtonElementProps>`
           return theme.colors.v3.surface.primary;
         case "primary":
         default:
-          return theme.colors.v3.surface.primary;
+          return theme.colors.v3.surface.brandPrimary;
       }
     }};
     border: 1px solid
@@ -150,7 +150,7 @@ export const Button = styled.button<ButtonElementProps>`
             return theme.colors.v3.stroke.primary;
           case "primary":
           default:
-            return theme.colors.v3.surface.secondary;
+            return theme.colors.v3.surface.brandSecondary;
         }
       }};
 
diff --git a/src/components/common/v3/JiraButton/index.tsx b/src/components/common/v3/JiraButton/index.tsx
index cd3dcbbe5..07c376f67 100644
--- a/src/components/common/v3/JiraButton/index.tsx
+++ b/src/components/common/v3/JiraButton/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { ForwardedRef, forwardRef, useState } from "react";
 import { useTheme } from "styled-components";
 import { openURLInDefaultBrowser } from "../../../../utils/openURLInDefaultBrowser";
 import { IconButton } from "../../../Insights/common/InsightCard/IconButton";
@@ -12,10 +12,17 @@ import { NewPopover } from "../../NewPopover";
 import * as s from "./styles";
 import { JiraButtonProps } from "./types";
 
-export const JiraButton = (props: JiraButtonProps) => {
+export const JiraButtonComponent = (
+  {
+    ticketLink,
+    isHintEnabled,
+    onTicketInfoButtonClick,
+    spanCodeObjectId
+  }: JiraButtonProps,
+  ref: ForwardedRef<HTMLDivElement>
+) => {
   const [isJiraPopoverOpen, setIsJiraPopoverOpen] = useState(false);
   const theme = useTheme();
-  const { ticketLink, isHintEnabled } = props;
 
   const handleJiraButtonClick = () => {
     setIsJiraPopoverOpen(!isJiraPopoverOpen);
@@ -28,7 +35,7 @@ export const JiraButton = (props: JiraButtonProps) => {
 
   const openTicketInfo = (event: string) => {
     handleJiraButtonClick();
-    props.onTicketInfoButtonClick(props.spanCodeObjectId, event);
+    onTicketInfoButtonClick(spanCodeObjectId, event);
   };
 
   const renderButton = () => (
@@ -72,41 +79,44 @@ export const JiraButton = (props: JiraButtonProps) => {
           />
         </NewPopover>
       ) : (
-        <Tooltip title={"Ticket Info"}>
-          <IconButton
-            icon={{ component: JiraLogoIcon }}
-            onClick={() => openTicketInfo("jira button click")}
-          />
-        </Tooltip>
+        <IconButton
+          icon={{ component: JiraLogoIcon }}
+          onClick={() => openTicketInfo("jira button click")}
+        />
       )}
     </div>
   );
 
   return (
-    <Tooltip
-      placement={"top-start"}
-      title={
-        <s.HintContainer>
-          <s.HintHeader>
-            <s.HintIconContainer>
-              <JiraLogoIcon size={16} color={"currentColor"} />
-            </s.HintIconContainer>
-            <span>Get Ticket Info</span>
-          </s.HintHeader>
-          <span>
-            You can now easily create a ticket using information from Digma
-          </span>
-          <s.TryNowButton
-            buttonType={"secondary"}
-            onClick={() => openTicketInfo("try now button click")}
-          >
-            Try now
-          </s.TryNowButton>
-        </s.HintContainer>
-      }
-      isOpen={isHintEnabled}
-    >
-      {renderButton()}
-    </Tooltip>
+    <div ref={ref}>
+      <Tooltip
+        fullWidth={true}
+        placement={"top-start"}
+        title={
+          <s.HintContainer>
+            <s.HintHeader>
+              <s.HintIconContainer>
+                <JiraLogoIcon size={16} color={"currentColor"} />
+              </s.HintIconContainer>
+              <span>Get Ticket Info</span>
+            </s.HintHeader>
+            <span>
+              You can now easily create a ticket using information from Digma
+            </span>
+            <s.TryNowButton
+              buttonType={"secondary"}
+              onClick={() => openTicketInfo("try now button click")}
+            >
+              Try now
+            </s.TryNowButton>
+          </s.HintContainer>
+        }
+        isOpen={Boolean(isHintEnabled)}
+      >
+        {renderButton()}
+      </Tooltip>
+    </div>
   );
 };
+
+export const JiraButton = forwardRef(JiraButtonComponent);
diff --git a/src/components/common/v3/Tooltip/index.tsx b/src/components/common/v3/Tooltip/index.tsx
index 7baeec374..de613a2c5 100644
--- a/src/components/common/v3/Tooltip/index.tsx
+++ b/src/components/common/v3/Tooltip/index.tsx
@@ -145,7 +145,7 @@ export const Tooltip = (props: TooltipProps) => {
           >
             {renderArrow(true)}
             {renderArrow(false)}
-            <s.Tooltip>{props.title}</s.Tooltip>
+            <s.Tooltip $fullWidth={props.fullWidth}>{props.title}</s.Tooltip>
           </s.TooltipContainer>
         </FloatingPortal>
       )}
diff --git a/src/components/common/v3/Tooltip/styles.ts b/src/components/common/v3/Tooltip/styles.ts
index 9cd6370bf..36d8a55ca 100644
--- a/src/components/common/v3/Tooltip/styles.ts
+++ b/src/components/common/v3/Tooltip/styles.ts
@@ -1,12 +1,13 @@
 import styled from "styled-components";
 import { LAYERS } from "../../App/styles";
 import { footnoteRegularTypography } from "../../App/typographies";
+import { TooltipComponentProps } from "./types";
 
 export const TooltipContainer = styled.div`
   z-index: ${LAYERS.TOOLTIP};
 `;
 
-export const Tooltip = styled.div`
+export const Tooltip = styled.div<TooltipComponentProps>`
   ${footnoteRegularTypography}
 
   padding: 4px;
@@ -16,5 +17,5 @@ export const Tooltip = styled.div`
   color: ${({ theme }) => theme.colors.v3.text.primary};
   background: ${({ theme }) => theme.colors.v3.surface.primary};
   border: 1px solid ${({ theme }) => theme.colors.v3.stroke.tertiary};
-  max-width: 200px;
+  ${({ $fullWidth }) => ($fullWidth ? "" : "max-width: 200px;")}
 `;
diff --git a/src/components/common/v3/Tooltip/types.ts b/src/components/common/v3/Tooltip/types.ts
index f20bb78b9..712fbf0f7 100644
--- a/src/components/common/v3/Tooltip/types.ts
+++ b/src/components/common/v3/Tooltip/types.ts
@@ -12,4 +12,9 @@ export interface TooltipProps {
   placement?: Placement;
   style?: React.CSSProperties;
   isOpen?: boolean;
+  fullWidth?: boolean;
+}
+
+export interface TooltipComponentProps {
+  $fullWidth?: boolean;
 }

From dcbf4c79c13d77d1c3068b5544febc591bd43c81 Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Fri, 1 Mar 2024 12:43:32 +0100
Subject: [PATCH 2/2] Update insight card

---
 src/components/Insights/InsightsPage/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Insights/InsightsPage/index.tsx b/src/components/Insights/InsightsPage/index.tsx
index c2cec787c..ff03e4683 100644
--- 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";