From ae8051fe098cf68a31dea5a4fc0f3cf00853f6f6 Mon Sep 17 00:00:00 2001
From: olehp <opoliarush@digma.ai>
Date: Tue, 27 Feb 2024 15:22:44 +0200
Subject: [PATCH 1/5] reuse new button

---
 .../common/v3/InsightCard/index.tsx           | 25 ++++++++-----------
 .../common/v3/InsightCard/styles.ts           |  9 -------
 2 files changed, 10 insertions(+), 24 deletions(-)

diff --git a/src/components/common/v3/InsightCard/index.tsx b/src/components/common/v3/InsightCard/index.tsx
index c232a6621..7f458b8b5 100644
--- a/src/components/common/v3/InsightCard/index.tsx
+++ b/src/components/common/v3/InsightCard/index.tsx
@@ -1,8 +1,8 @@
 import { useState } from "react";
 import { isString } from "../../../../typeGuards/isString";
 import { formatTimeDistance } from "../../../../utils/formatTimeDistance";
+import { IconButton } from "../../../Insights/common/InsightCard/IconButton";
 import { Link } from "../../Link";
-import { NewButton } from "../../NewButton";
 import { TraceIcon } from "../../icons/12px/TraceIcon";
 import { HistogramIcon } from "../../icons/16px/HistogramIcon";
 import { JiraLogoIcon } from "../../icons/16px/JiraLogoIcon";
@@ -10,6 +10,7 @@ import { LiveIcon } from "../../icons/16px/LiveIcon";
 import { PinIcon } from "../../icons/16px/PinIcon";
 import { RecalculateIcon } from "../../icons/16px/RecalculateIcon";
 import { CrossIcon } from "../../icons/CrossIcon";
+import { Button } from "../Button";
 import { Card } from "../Card";
 import { InsightHeader } from "../InsightHeader";
 import { Tooltip } from "../Tooltip";
@@ -106,37 +107,31 @@ export const InsightCard = (props: InsightCardProps) => {
       }
       footer={
         <s.InsightFooter>
-          <s.DismissButton
-            icon={CrossIcon}
-            label="Dismiss"
-            buttonType="tertiary"
-            disabled={true}
-          />
+          <Button icon={CrossIcon} label="Dismiss" buttonType="tertiary" />
           <s.Actions>
             {props.onOpenHistogram && (
-              <NewButton buttonType="tertiary" icon={HistogramIcon} />
+              <IconButton icon={{ component: HistogramIcon }} />
             )}
             {props.onRecalculate && (
-              <NewButton
-                buttonType="tertiary"
-                icon={RecalculateIcon}
+              <IconButton
+                icon={{ component: RecalculateIcon }}
                 onClick={handleRecalculateClick}
               />
             )}
             {props.onOpenJiraTicket && (
-              <NewButton buttonType="tertiary" icon={JiraLogoIcon} />
+              <IconButton icon={{ component: JiraLogoIcon }} />
             )}
-            {props.onPin && <NewButton buttonType="tertiary" icon={PinIcon} />}
+            {props.onPin && <IconButton icon={{ component: PinIcon }} />}
             <s.MainActions>
               {props.onGoToTrace && (
-                <NewButton
+                <Button
                   icon={TraceIcon}
                   label="Trace"
                   onClick={() => props.onGoToTrace && props.onGoToTrace()}
                 />
               )}
               {props.onGoToLive && (
-                <NewButton
+                <Button
                   icon={LiveIcon}
                   label="Live"
                   onClick={() => props.onGoToLive && props.onGoToLive()}
diff --git a/src/components/common/v3/InsightCard/styles.ts b/src/components/common/v3/InsightCard/styles.ts
index 776d40f11..30f175e16 100644
--- a/src/components/common/v3/InsightCard/styles.ts
+++ b/src/components/common/v3/InsightCard/styles.ts
@@ -1,5 +1,4 @@
 import styled from "styled-components";
-import { NewButton } from "../../NewButton";
 
 export const InsightFooter = styled.div`
   display: flex;
@@ -19,14 +18,6 @@ export const RefreshContainer = styled.div`
   gap: 4px;
 `;
 
-export const DismissButton = styled(NewButton)`
-  &:hover {
-    color: ${({ theme }) => theme.colors.v3.text.link};
-  }
-
-  font-size: 12px;
-`;
-
 export const Actions = styled.div`
   display: flex;
 `;

From 94e7db9f8daa251bf920f4c464a9ed1c7fa5f063 Mon Sep 17 00:00:00 2001
From: olehp <opoliarush@digma.ai>
Date: Tue, 27 Feb 2024 19:14:11 +0200
Subject: [PATCH 2/5] HIgh number of queries

---
 .../HighNumberOfQueriesInsight.stories.tsx    |  23 ++++
 .../HighNumberOfQueriesInsight/index.tsx      | 108 ++++++++++++++++++
 .../HighNumberOfQueriesInsight/mockData.ts    |  74 ++++++++++++
 .../HighNumberOfQueriesInsight/styles.ts      |  50 ++++++++
 .../HighNumberOfQueriesInsight/types.ts       |  15 +++
 .../insights/SpanBottleneckInsight/types.ts   |   6 -
 6 files changed, 270 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Insights/common/insights/HighNumberOfQueriesInsight/HighNumberOfQueriesInsight.stories.tsx
 create mode 100644 src/components/Insights/common/insights/HighNumberOfQueriesInsight/index.tsx
 create mode 100644 src/components/Insights/common/insights/HighNumberOfQueriesInsight/mockData.ts
 create mode 100644 src/components/Insights/common/insights/HighNumberOfQueriesInsight/styles.ts
 create mode 100644 src/components/Insights/common/insights/HighNumberOfQueriesInsight/types.ts
 delete mode 100644 src/components/Insights/common/insights/SpanBottleneckInsight/types.ts

diff --git a/src/components/Insights/common/insights/HighNumberOfQueriesInsight/HighNumberOfQueriesInsight.stories.tsx b/src/components/Insights/common/insights/HighNumberOfQueriesInsight/HighNumberOfQueriesInsight.stories.tsx
new file mode 100644
index 000000000..96968842e
--- /dev/null
+++ b/src/components/Insights/common/insights/HighNumberOfQueriesInsight/HighNumberOfQueriesInsight.stories.tsx
@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { HighNumberOfQueriesInsight } from ".";
+import { mockedHighNumberOfQueriesInsight } from "./mockData";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof HighNumberOfQueriesInsight> = {
+  title: "Insights/Common/Insights/HighNumberOfQueriesInsight",
+  component: HighNumberOfQueriesInsight,
+  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: mockedHighNumberOfQueriesInsight
+  }
+};
diff --git a/src/components/Insights/common/insights/HighNumberOfQueriesInsight/index.tsx b/src/components/Insights/common/insights/HighNumberOfQueriesInsight/index.tsx
new file mode 100644
index 000000000..63e832770
--- /dev/null
+++ b/src/components/Insights/common/insights/HighNumberOfQueriesInsight/index.tsx
@@ -0,0 +1,108 @@
+import { sendTrackingEvent } from "../../../../../utils/sendTrackingEvent";
+import { InfoCircleIcon } from "../../../../common/icons/InfoCircleIcon";
+import { InsightCard } from "../../../../common/v3/InsightCard";
+import {
+  KeyValue,
+  KeyValueContainer
+} from "../../../../common/v3/KeyValueContainer";
+import { Tag } from "../../../../common/v3/Tag";
+import { Tooltip } from "../../../../common/v3/Tooltip";
+import { Description } from "../../../styles";
+import { trackingEvents } from "../../../tracking";
+import { InsightType, Trace } from "../../../types";
+import * as s from "./styles";
+import { HighNumberOfQueriesInsightProps } from "./types";
+
+export const HighNumberOfQueriesInsight = (
+  props: HighNumberOfQueriesInsightProps
+) => {
+  const { insight } = props;
+  const traceId = insight.traceId;
+
+  const handleTraceButtonClick = (
+    trace: Trace,
+    insightType: InsightType,
+    spanCodeObjectId?: string
+  ) => {
+    props.onTraceButtonClick(trace, insightType, spanCodeObjectId);
+  };
+
+  const handleCreateJiraTicketButtonClick = (event: string) => {
+    sendTrackingEvent(trackingEvents.JIRA_TICKET_INFO_BUTTON_CLICKED, {
+      insightType: insight.type
+    });
+    props.onJiraTicketCreate &&
+      props.onJiraTicketCreate(insight, undefined, event);
+  };
+
+  return (
+    <InsightCard
+      insight={insight}
+      content={
+        <s.ContentContainer>
+          <Description>
+            {insight.quantile === 0.95 &&
+              "Affecting the slowest 5% of requests. "}
+            Consider using joins or caching responses to reduce database round
+            trips
+          </Description>
+          <KeyValueContainer>
+            <KeyValue label={"# of Queries"}>
+              <Tag type={"mediumSeverity"} content={insight.queriesCount} />
+            </KeyValue>
+            <KeyValue
+              label={
+                <s.TypicalLabel>
+                  <span>Typical</span>
+                  <Tooltip
+                    title={
+                      "Typical number of queries for endpoints in this service"
+                    }
+                  >
+                    <s.IconContainer>
+                      <InfoCircleIcon color={"currentColor"} />
+                    </s.IconContainer>
+                  </Tooltip>
+                </s.TypicalLabel>
+              }
+            >
+              <Tag content={insight.typicalCount} />
+            </KeyValue>
+
+            <KeyValue label={"Duration"}>
+              {props.insight.medianDuration.value.toString() +
+                props.insight.medianDuration.unit}
+            </KeyValue>
+          </KeyValueContainer>
+          {/* <s.Stat>
+              <s.Key>Actions</s.Key>
+              <s.ActionsContainer>
+                <JiraButton
+                  onTicketInfoButtonClick={handleCreateJiraTicketButtonClick}
+                  spanCodeObjectId={insight.spanInfo?.spanCodeObjectId}
+                  ticketLink={insight.ticketLink}
+                  buttonType={"small"}
+                  isHintEnabled={props.isJiraHintEnabled}
+                />
+              </s.ActionsContainer>
+            </s.Stat> */}
+        </s.ContentContainer>
+      }
+      onRecalculate={props.onRecalculate}
+      onRefresh={props.onRefresh}
+      onGoToTrace={
+        traceId
+          ? () =>
+              handleTraceButtonClick(
+                {
+                  id: traceId,
+                  name: insight.spanInfo?.displayName
+                },
+                insight.type,
+                insight.spanInfo?.spanCodeObjectId
+              )
+          : undefined
+      }
+    />
+  );
+};
diff --git a/src/components/Insights/common/insights/HighNumberOfQueriesInsight/mockData.ts b/src/components/Insights/common/insights/HighNumberOfQueriesInsight/mockData.ts
new file mode 100644
index 000000000..beda9abbd
--- /dev/null
+++ b/src/components/Insights/common/insights/HighNumberOfQueriesInsight/mockData.ts
@@ -0,0 +1,74 @@
+import { InsightType } from "../../../../../types";
+import {
+  EndpointHighNumberOfQueriesInsight,
+  InsightCategory,
+  InsightScope
+} from "../../../types";
+
+export const mockedHighNumberOfQueriesInsight: EndpointHighNumberOfQueriesInsight =
+  {
+    id: "60b55792-8262-4c5d-9623-7cce7979ad6d",
+    firstDetected: "2023-12-05T17:25:47.010Z",
+    lastDetected: "2024-01-05T13:14:47.010Z",
+    criticality: 0.5,
+    impact: 0,
+    firstCommitId: "b3f7b3f",
+    lastCommitId: "a1b2c3d",
+    deactivatedCommitId: null,
+    reopenCount: 0,
+    ticketLink: null,
+    name: "High number of queries",
+    type: InsightType.EndpointHighNumberOfQueries,
+    category: InsightCategory.Performance,
+    specifity: 2,
+    importance: 3,
+    queriesCount: 250,
+    typicalCount: 4,
+    medianDuration: {
+      value: 150,
+      unit: "ms",
+      raw: 150000000.0
+    },
+    requestFraction: 0.3,
+    traceId: "00D37A4E7208E0F6E89AA7E2E37446A6",
+    scope: InsightScope.EntrySpan,
+    endpointSpan: "HTTP POST /owners/{ownerId}/pets/new",
+    spanCodeObjectId:
+      "span:io.opentelemetry.tomcat-10.0$_$HTTP POST /owners/{ownerId}/pets/new",
+    route: "epHTTP:HTTP POST /owners/{ownerId}/pets/new",
+    serviceName: "spring-petclinic",
+    spanInfo: {
+      name: "HTTP POST /owners/{ownerId}/pets/new",
+      displayName: "HTTP POST /owners/{ownerId}/pets/new",
+      instrumentationLibrary: "io.opentelemetry.tomcat-10.0",
+      spanCodeObjectId:
+        "span:io.opentelemetry.tomcat-10.0$_$HTTP POST /owners/{ownerId}/pets/new",
+      methodCodeObjectId:
+        "method:org.springframework.samples.petclinic.owner.PetController$_$processCreationForm",
+      kind: "Server",
+      codeObjectId:
+        "org.springframework.samples.petclinic.owner.PetController$_$processCreationForm"
+    },
+    shortDisplayInfo: {
+      title: "",
+      targetDisplayName: "",
+      subtitle: "",
+      description: ""
+    },
+    codeObjectId:
+      "org.springframework.samples.petclinic.owner.PetController$_$processCreationForm",
+    decorators: [
+      {
+        title: "Excessive HTTP Calls",
+        description: "Numerous Http calls to the same endpoint detected "
+      }
+    ],
+    environment: "BOB-LAPTOP[LOCAL]",
+    severity: 0.0,
+    isRecalculateEnabled: false,
+    prefixedCodeObjectId:
+      "method:org.springframework.samples.petclinic.owner.PetController$_$processCreationForm",
+    customStartTime: null,
+    actualStartTime: "2023-08-10T08:04:00Z",
+    quantile: 0.95
+  };
diff --git a/src/components/Insights/common/insights/HighNumberOfQueriesInsight/styles.ts b/src/components/Insights/common/insights/HighNumberOfQueriesInsight/styles.ts
new file mode 100644
index 000000000..917de6764
--- /dev/null
+++ b/src/components/Insights/common/insights/HighNumberOfQueriesInsight/styles.ts
@@ -0,0 +1,50 @@
+import styled from "styled-components";
+
+export const ContentContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+export const Stats = styled.div`
+  display: flex;
+  border-radius: 4px;
+  gap: 20px;
+  justify-content: space-between;
+`;
+
+export const Stat = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow: hidden;
+`;
+
+export const KeyContainer = styled.span`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+
+export const Key = styled.span`
+  font-size: 14px;
+  font-weight: 510;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+
+export const IconContainer = styled.span`
+  display: flex;
+`;
+
+export const ActionsContainer = styled.div`
+  display: flex;
+  gap: 8px;
+`;
+
+export const TypicalLabel = styled.div`
+  display: flex;
+  gap: 4px;
+  align-items: center;
+`;
diff --git a/src/components/Insights/common/insights/HighNumberOfQueriesInsight/types.ts b/src/components/Insights/common/insights/HighNumberOfQueriesInsight/types.ts
new file mode 100644
index 000000000..12de243f9
--- /dev/null
+++ b/src/components/Insights/common/insights/HighNumberOfQueriesInsight/types.ts
@@ -0,0 +1,15 @@
+import {
+  EndpointHighNumberOfQueriesInsight,
+  InsightProps,
+  InsightType,
+  Trace
+} from "../../../types";
+
+export interface HighNumberOfQueriesInsightProps extends InsightProps {
+  insight: EndpointHighNumberOfQueriesInsight;
+  onTraceButtonClick: (
+    trace: Trace,
+    insightType: InsightType,
+    spanCodeObjectId?: string
+  ) => void;
+}
diff --git a/src/components/Insights/common/insights/SpanBottleneckInsight/types.ts b/src/components/Insights/common/insights/SpanBottleneckInsight/types.ts
deleted file mode 100644
index 91705531a..000000000
--- a/src/components/Insights/common/insights/SpanBottleneckInsight/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { EndpointSlowestSpansInsight, InsightProps } from "../../../types";
-
-export interface SpanBottleneckInsightProps extends InsightProps {
-  insight: EndpointSlowestSpansInsight;
-  onAssetLinkClick: (spanCodeObjectId: string) => void;
-}

From 34f50f792678473c2991516380cf17b2b93dcc21 Mon Sep 17 00:00:00 2001
From: olehp <opoliarush@digma.ai>
Date: Tue, 27 Feb 2024 21:22:41 +0200
Subject: [PATCH 3/5] add new jira button

---
 .../common/icons/16px/JiraLogoIcon.tsx        |   4 +-
 .../v3/JiraButton/JiraButton.stories.tsx      |  29 +++++
 src/components/common/v3/JiraButton/index.tsx | 112 ++++++++++++++++++
 src/components/common/v3/JiraButton/styles.ts |  30 +++++
 src/components/common/v3/JiraButton/types.ts  |   9 ++
 5 files changed, 182 insertions(+), 2 deletions(-)
 create mode 100644 src/components/common/v3/JiraButton/JiraButton.stories.tsx
 create mode 100644 src/components/common/v3/JiraButton/index.tsx
 create mode 100644 src/components/common/v3/JiraButton/styles.ts
 create mode 100644 src/components/common/v3/JiraButton/types.ts

diff --git a/src/components/common/icons/16px/JiraLogoIcon.tsx b/src/components/common/icons/16px/JiraLogoIcon.tsx
index 2022ed899..008c4fd0c 100644
--- a/src/components/common/icons/16px/JiraLogoIcon.tsx
+++ b/src/components/common/icons/16px/JiraLogoIcon.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { useIconProps } from "../hooks";
 import { IconProps } from "../types";
 
-const JiraLogoIconComponent = (props: IconProps) => {
+const JiraLogoIconComponent = (props: IconProps & { isActive?: boolean }) => {
   const { size, color } = useIconProps(props);
 
   return (
@@ -10,7 +10,7 @@ const JiraLogoIconComponent = (props: IconProps) => {
       xmlns="http://www.w3.org/2000/svg"
       width={size}
       height={size}
-      fill="none"
+      fill={props.isActive ? color : "none"}
       viewBox="0 0 16 16"
     >
       <path
diff --git a/src/components/common/v3/JiraButton/JiraButton.stories.tsx b/src/components/common/v3/JiraButton/JiraButton.stories.tsx
new file mode 100644
index 000000000..ba4bc4f47
--- /dev/null
+++ b/src/components/common/v3/JiraButton/JiraButton.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { JiraButton } from ".";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof JiraButton> = {
+  title: "common/v3/JiraButton",
+  component: JiraButton,
+  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: {
+    isHintEnabled: false
+  }
+};
+
+export const ActiveWithTrace: Story = {
+  args: {
+    isHintEnabled: false,
+    ticketLink: "test"
+  }
+};
diff --git a/src/components/common/v3/JiraButton/index.tsx b/src/components/common/v3/JiraButton/index.tsx
new file mode 100644
index 000000000..9dc86bd62
--- /dev/null
+++ b/src/components/common/v3/JiraButton/index.tsx
@@ -0,0 +1,112 @@
+import { useState } from "react";
+import { useTheme } from "styled-components";
+import { openURLInDefaultBrowser } from "../../../../utils/openURLInDefaultBrowser";
+import { IconButton } from "../../../Insights/common/InsightCard/IconButton";
+import { Menu } from "../../../common/Menu";
+import { NewPopover } from "../../../common/NewPopover";
+import { PencilIcon } from "../../../common/icons/12px/PencilIcon";
+import { JiraLogoIcon } from "../../../common/icons/16px/JiraLogoIcon";
+import { OpenLinkIcon } from "../../../common/icons/OpenLinkIcon";
+import { Tooltip } from "../../../common/v3/Tooltip";
+import * as s from "./styles";
+import { JiraButtonProps } from "./types";
+
+export const JiraButton = (props: JiraButtonProps) => {
+  const [isJiraPopoverOpen, setIsJiraPopoverOpen] = useState(false);
+  const theme = useTheme();
+  const { ticketLink } = props;
+
+  const handleJiraButtonClick = () => {
+    setIsJiraPopoverOpen(!isJiraPopoverOpen);
+  };
+
+  const handleViewButtonClick = () => {
+    ticketLink && openURLInDefaultBrowser(ticketLink);
+  };
+
+  const openTicketInfo = (event: string) => {
+    props.onTicketInfoButtonClick(props.spanCodeObjectId, event);
+  };
+
+  const renderButton = () => (
+    <div>
+      {ticketLink ? (
+        <NewPopover
+          content={
+            <Menu
+              width={"70px"}
+              items={[
+                {
+                  icon: { component: OpenLinkIcon },
+                  label: "View",
+                  value: ticketLink,
+                  onClick: handleViewButtonClick
+                },
+                {
+                  icon: { component: PencilIcon },
+                  label: "Edit",
+                  value: props.spanCodeObjectId ?? "",
+                  onClick: () => openTicketInfo("edit menu item click")
+                }
+              ]}
+              onSelect={handleJiraButtonClick}
+            />
+          }
+          isOpen={isJiraPopoverOpen}
+          onOpenChange={handleJiraButtonClick}
+          placement={"bottom-start"}
+        >
+          <IconButton
+            icon={{
+              component: () => (
+                <JiraLogoIcon
+                  isActive={true}
+                  color={theme.colors.v3.icon.brandPrimary}
+                />
+              )
+            }}
+          />
+        </NewPopover>
+      ) : (
+        <Tooltip title={"Ticket Info"}>
+          <IconButton
+            icon={{ component: JiraLogoIcon }}
+            onClick={() => openTicketInfo("jira button click")}
+          />
+        </Tooltip>
+      )}
+    </div>
+  );
+
+  return (
+    <Tooltip
+      style={{
+        background: theme.colors.surface.secondary,
+        boxShadow: "0 1px 12px 0 rgb(0 0 0 / 26%)"
+      }}
+      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={props.isHintEnabled}
+    >
+      {renderButton()}
+    </Tooltip>
+  );
+};
diff --git a/src/components/common/v3/JiraButton/styles.ts b/src/components/common/v3/JiraButton/styles.ts
new file mode 100644
index 000000000..105905961
--- /dev/null
+++ b/src/components/common/v3/JiraButton/styles.ts
@@ -0,0 +1,30 @@
+import styled from "styled-components";
+import { Button } from "../../Button";
+
+export const HintContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 4px;
+  width: 235px;
+  color: ${({ theme }) => theme.colors.text.subtext};
+  word-break: keep-all;
+`;
+
+export const HintHeader = styled.div`
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  font-weight: 500;
+  color: ${({ theme }) => theme.colors.text.base};
+`;
+
+export const HintIconContainer = styled.div`
+  display: flex;
+  color: ${({ theme }) => theme.colors.icon.primary};
+`;
+
+export const TryNowButton = styled(Button)`
+  margin-top: 8px;
+  align-self: flex-end;
+`;
diff --git a/src/components/common/v3/JiraButton/types.ts b/src/components/common/v3/JiraButton/types.ts
new file mode 100644
index 000000000..0fcc10acb
--- /dev/null
+++ b/src/components/common/v3/JiraButton/types.ts
@@ -0,0 +1,9 @@
+export interface JiraButtonProps {
+  onTicketInfoButtonClick(
+    spanCodeObjectId: string | undefined,
+    event: string
+  ): void;
+  ticketLink?: string | null;
+  spanCodeObjectId?: string;
+  isHintEnabled?: boolean;
+}

From f498aae94356b7a693c49d6604eda9c60f16feb5 Mon Sep 17 00:00:00 2001
From: olehp <opoliarush@digma.ai>
Date: Tue, 27 Feb 2024 21:45:30 +0200
Subject: [PATCH 4/5] High number of queries

---
 .../HighNumberOfQueriesInsight.stories.tsx    |  6 +++++
 .../HighNumberOfQueriesInsight/index.tsx      | 27 ++++++-------------
 .../common/v3/InsightCard/index.tsx           | 10 ++++---
 src/components/common/v3/InsightCard/types.ts |  9 ++++---
 src/components/common/v3/JiraButton/index.tsx |  8 +++---
 src/components/common/v3/JiraButton/types.ts  |  6 +----
 6 files changed, 31 insertions(+), 35 deletions(-)

diff --git a/src/components/Insights/common/insights/HighNumberOfQueriesInsight/HighNumberOfQueriesInsight.stories.tsx b/src/components/Insights/common/insights/HighNumberOfQueriesInsight/HighNumberOfQueriesInsight.stories.tsx
index 96968842e..02d220076 100644
--- a/src/components/Insights/common/insights/HighNumberOfQueriesInsight/HighNumberOfQueriesInsight.stories.tsx
+++ b/src/components/Insights/common/insights/HighNumberOfQueriesInsight/HighNumberOfQueriesInsight.stories.tsx
@@ -21,3 +21,9 @@ export const Default: Story = {
     insight: mockedHighNumberOfQueriesInsight
   }
 };
+
+export const Normal: Story = {
+  args: {
+    insight: { ...mockedHighNumberOfQueriesInsight, quantile: 0 }
+  }
+};
diff --git a/src/components/Insights/common/insights/HighNumberOfQueriesInsight/index.tsx b/src/components/Insights/common/insights/HighNumberOfQueriesInsight/index.tsx
index 63e832770..4f3d84ee3 100644
--- a/src/components/Insights/common/insights/HighNumberOfQueriesInsight/index.tsx
+++ b/src/components/Insights/common/insights/HighNumberOfQueriesInsight/index.tsx
@@ -40,12 +40,9 @@ export const HighNumberOfQueriesInsight = (
       insight={insight}
       content={
         <s.ContentContainer>
-          <Description>
-            {insight.quantile === 0.95 &&
-              "Affecting the slowest 5% of requests. "}
-            Consider using joins or caching responses to reduce database round
-            trips
-          </Description>
+          {insight.quantile === 0.95 && (
+            <Description>Affecting the slowest 5% of requests.</Description>
+          )}
           <KeyValueContainer>
             <KeyValue label={"# of Queries"}>
               <Tag type={"mediumSeverity"} content={insight.queriesCount} />
@@ -68,28 +65,20 @@ export const HighNumberOfQueriesInsight = (
             >
               <Tag content={insight.typicalCount} />
             </KeyValue>
-
             <KeyValue label={"Duration"}>
               {props.insight.medianDuration.value.toString() +
                 props.insight.medianDuration.unit}
             </KeyValue>
           </KeyValueContainer>
-          {/* <s.Stat>
-              <s.Key>Actions</s.Key>
-              <s.ActionsContainer>
-                <JiraButton
-                  onTicketInfoButtonClick={handleCreateJiraTicketButtonClick}
-                  spanCodeObjectId={insight.spanInfo?.spanCodeObjectId}
-                  ticketLink={insight.ticketLink}
-                  buttonType={"small"}
-                  isHintEnabled={props.isJiraHintEnabled}
-                />
-              </s.ActionsContainer>
-            </s.Stat> */}
         </s.ContentContainer>
       }
       onRecalculate={props.onRecalculate}
       onRefresh={props.onRefresh}
+      onJiraButtonClick={handleCreateJiraTicketButtonClick}
+      jiraTicketInfo={{
+        ticketLink: insight.ticketLink,
+        isHintEnabled: props.isJiraHintEnabled
+      }}
       onGoToTrace={
         traceId
           ? () =>
diff --git a/src/components/common/v3/InsightCard/index.tsx b/src/components/common/v3/InsightCard/index.tsx
index 1c76990ee..62cc7db7e 100644
--- a/src/components/common/v3/InsightCard/index.tsx
+++ b/src/components/common/v3/InsightCard/index.tsx
@@ -5,7 +5,6 @@ import { IconButton } from "../../../Insights/common/InsightCard/IconButton";
 import { Link } from "../../Link";
 import { TraceIcon } from "../../icons/12px/TraceIcon";
 import { HistogramIcon } from "../../icons/16px/HistogramIcon";
-import { JiraLogoIcon } from "../../icons/16px/JiraLogoIcon";
 import { LiveIcon } from "../../icons/16px/LiveIcon";
 import { PinIcon } from "../../icons/16px/PinIcon";
 import { RecalculateIcon } from "../../icons/16px/RecalculateIcon";
@@ -13,6 +12,7 @@ import { CrossIcon } from "../../icons/CrossIcon";
 import { Button } from "../Button";
 import { Card } from "../Card";
 import { InsightHeader } from "../InsightHeader";
+import { JiraButton } from "../JiraButton";
 import { Tooltip } from "../Tooltip";
 import * as s from "./styles";
 import { InsightCardProps } from "./types";
@@ -118,8 +118,12 @@ export const InsightCard = (props: InsightCardProps) => {
                 onClick={handleRecalculateClick}
               />
             )}
-            {props.onOpenJiraTicket && (
-              <IconButton icon={{ component: JiraLogoIcon }} />
+            {props.onJiraButtonClick && (
+              <JiraButton
+                onTicketInfoButtonClick={props.onJiraButtonClick}
+                ticketLink={props.jiraTicketInfo?.ticketLink}
+                isHintEnabled={props.jiraTicketInfo?.isHintEnabled}
+              />
             )}
             {props.onPin && <IconButton icon={{ component: PinIcon }} />}
             <s.MainActions>
diff --git a/src/components/common/v3/InsightCard/types.ts b/src/components/common/v3/InsightCard/types.ts
index 423347a2d..a811454ea 100644
--- a/src/components/common/v3/InsightCard/types.ts
+++ b/src/components/common/v3/InsightCard/types.ts
@@ -17,11 +17,12 @@ export interface InsightCardProps {
     insightType: InsightType
   ) => void;
   onRefresh?: (insightType: InsightType, spanCodeObjectId?: string) => void;
-  onOpenJiraTicket?: (
-    insight: GenericCodeObjectInsight,
-    spanCodeObjectId?: string
-  ) => void;
   onPin?: (insightId: string) => void;
   onGoToLive?: () => void;
   onGoToTrace?: () => void;
+  jiraTicketInfo?: {
+    ticketLink?: string | null;
+    isHintEnabled?: boolean;
+  };
+  onJiraButtonClick?: (event: string) => void;
 }
diff --git a/src/components/common/v3/JiraButton/index.tsx b/src/components/common/v3/JiraButton/index.tsx
index 9dc86bd62..742cb43f4 100644
--- a/src/components/common/v3/JiraButton/index.tsx
+++ b/src/components/common/v3/JiraButton/index.tsx
@@ -14,7 +14,7 @@ import { JiraButtonProps } from "./types";
 export const JiraButton = (props: JiraButtonProps) => {
   const [isJiraPopoverOpen, setIsJiraPopoverOpen] = useState(false);
   const theme = useTheme();
-  const { ticketLink } = props;
+  const { ticketLink, isHintEnabled } = props;
 
   const handleJiraButtonClick = () => {
     setIsJiraPopoverOpen(!isJiraPopoverOpen);
@@ -25,7 +25,7 @@ export const JiraButton = (props: JiraButtonProps) => {
   };
 
   const openTicketInfo = (event: string) => {
-    props.onTicketInfoButtonClick(props.spanCodeObjectId, event);
+    props.onTicketInfoButtonClick(event);
   };
 
   const renderButton = () => (
@@ -45,7 +45,7 @@ export const JiraButton = (props: JiraButtonProps) => {
                 {
                   icon: { component: PencilIcon },
                   label: "Edit",
-                  value: props.spanCodeObjectId ?? "",
+                  value: "edit",
                   onClick: () => openTicketInfo("edit menu item click")
                 }
               ]}
@@ -104,7 +104,7 @@ export const JiraButton = (props: JiraButtonProps) => {
           </s.TryNowButton>
         </s.HintContainer>
       }
-      isOpen={props.isHintEnabled}
+      isOpen={isHintEnabled}
     >
       {renderButton()}
     </Tooltip>
diff --git a/src/components/common/v3/JiraButton/types.ts b/src/components/common/v3/JiraButton/types.ts
index 0fcc10acb..0569ff726 100644
--- a/src/components/common/v3/JiraButton/types.ts
+++ b/src/components/common/v3/JiraButton/types.ts
@@ -1,9 +1,5 @@
 export interface JiraButtonProps {
-  onTicketInfoButtonClick(
-    spanCodeObjectId: string | undefined,
-    event: string
-  ): void;
+  onTicketInfoButtonClick(event: string): void;
   ticketLink?: string | null;
-  spanCodeObjectId?: string;
   isHintEnabled?: boolean;
 }

From dda71b3a657c40ab7df3683a66fa4d43391ed7a1 Mon Sep 17 00:00:00 2001
From: olehp <opoliarush@digma.ai>
Date: Wed, 28 Feb 2024 11:33:36 +0200
Subject: [PATCH 5/5] fix comments

---
 src/components/common/v3/JiraButton/index.tsx | 47 +++++++++----------
 1 file changed, 23 insertions(+), 24 deletions(-)

diff --git a/src/components/common/v3/JiraButton/index.tsx b/src/components/common/v3/JiraButton/index.tsx
index 742cb43f4..154b15403 100644
--- a/src/components/common/v3/JiraButton/index.tsx
+++ b/src/components/common/v3/JiraButton/index.tsx
@@ -2,12 +2,13 @@ import { useState } from "react";
 import { useTheme } from "styled-components";
 import { openURLInDefaultBrowser } from "../../../../utils/openURLInDefaultBrowser";
 import { IconButton } from "../../../Insights/common/InsightCard/IconButton";
-import { Menu } from "../../../common/Menu";
-import { NewPopover } from "../../../common/NewPopover";
+import { MenuList } from "../../../Navigation/common/MenuList";
+import { Popup } from "../../../Navigation/common/Popup";
 import { PencilIcon } from "../../../common/icons/12px/PencilIcon";
 import { JiraLogoIcon } from "../../../common/icons/16px/JiraLogoIcon";
 import { OpenLinkIcon } from "../../../common/icons/OpenLinkIcon";
 import { Tooltip } from "../../../common/v3/Tooltip";
+import { NewPopover } from "../../NewPopover";
 import * as s from "./styles";
 import { JiraButtonProps } from "./types";
 
@@ -21,10 +22,12 @@ export const JiraButton = (props: JiraButtonProps) => {
   };
 
   const handleViewButtonClick = () => {
+    handleJiraButtonClick();
     ticketLink && openURLInDefaultBrowser(ticketLink);
   };
 
   const openTicketInfo = (event: string) => {
+    handleJiraButtonClick();
     props.onTicketInfoButtonClick(event);
   };
 
@@ -33,24 +36,24 @@ export const JiraButton = (props: JiraButtonProps) => {
       {ticketLink ? (
         <NewPopover
           content={
-            <Menu
-              width={"70px"}
-              items={[
-                {
-                  icon: { component: OpenLinkIcon },
-                  label: "View",
-                  value: ticketLink,
-                  onClick: handleViewButtonClick
-                },
-                {
-                  icon: { component: PencilIcon },
-                  label: "Edit",
-                  value: "edit",
-                  onClick: () => openTicketInfo("edit menu item click")
-                }
-              ]}
-              onSelect={handleJiraButtonClick}
-            />
+            <Popup>
+              <MenuList
+                items={[
+                  {
+                    icon: <OpenLinkIcon />,
+                    label: "View",
+                    id: ticketLink,
+                    onClick: handleViewButtonClick
+                  },
+                  {
+                    icon: <PencilIcon />,
+                    label: "Edit",
+                    id: "edit",
+                    onClick: () => openTicketInfo("edit menu item click")
+                  }
+                ]}
+              />
+            </Popup>
           }
           isOpen={isJiraPopoverOpen}
           onOpenChange={handleJiraButtonClick}
@@ -80,10 +83,6 @@ export const JiraButton = (props: JiraButtonProps) => {
 
   return (
     <Tooltip
-      style={{
-        background: theme.colors.surface.secondary,
-        boxShadow: "0 1px 12px 0 rgb(0 0 0 / 26%)"
-      }}
       placement={"top-start"}
       title={
         <s.HintContainer>