High number of queries

src/components/Insights/common/insights/HighNumberOfQueriesInsight/HighNumberOfQueriesInsight.stories.tsx

@@ -0,0 +1,29 @@
+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
+  }
+};
+
+export const Normal: Story = {
+  args: {
+    insight: { ...mockedHighNumberOfQueriesInsight, quantile: 0 }
+  }
+};

src/components/Insights/common/insights/HighNumberOfQueriesInsight/index.tsx

@@ -0,0 +1,97 @@
+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>
+          {insight.quantile === 0.95 && (
+            <Description>Affecting the slowest 5% of requests.</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.ContentContainer>
+      }
+      onRecalculate={props.onRecalculate}
+      onRefresh={props.onRefresh}
+      onJiraButtonClick={handleCreateJiraTicketButtonClick}
+      jiraTicketInfo={{
+        ticketLink: insight.ticketLink,
+        isHintEnabled: props.isJiraHintEnabled
+      }}
+      onGoToTrace={
+        traceId
+          ? () =>
+              handleTraceButtonClick(
+                {
+                  id: traceId,
+                  name: insight.spanInfo?.displayName
+                },
+                insight.type,
+                insight.spanInfo?.spanCodeObjectId
+              )
+          : undefined
+      }
+    />
+  );
+};

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
+  };

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;
+`;

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;
+}

src/components/common/icons/16px/JiraLogoIcon.tsx

@@ -2,15 +2,15 @@ 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 (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width={size}
       height={size}
-      fill="none"
+      fill={props.isActive ? color : "none"}
       viewBox="0 0 16 16"
     >
       <path

src/components/common/v3/InsightCard/index.tsx

@@ -1,17 +1,18 @@
 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";
 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 { JiraButton } from "../JiraButton";
 import { Tooltip } from "../Tooltip";
 import * as s from "./styles";
 import { InsightCardProps } from "./types";
@@ -106,39 +107,35 @@ 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} />
-            )}
-            {props.onPin && (
-              <NewButton buttonType={"tertiary"} icon={PinIcon} />
+            {props.onJiraButtonClick && (
+              <JiraButton
+                onTicketInfoButtonClick={props.onJiraButtonClick}
+                ticketLink={props.jiraTicketInfo?.ticketLink}
+                isHintEnabled={props.jiraTicketInfo?.isHintEnabled}
+              />
             )}
+            {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()}

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;
 `;