Added Query Optimization Insight

src/components/Insights/InsightList/index.tsx

@@ -21,6 +21,7 @@ import { NPlusOneInsight } from "../NPlusOneInsight";
 import { NoObservabilityCard } from "../NoObservabilityCard";
 import { NoScalingIssueInsight } from "../NoScalingIssueInsight";
 import { PerformanceAtScaleInsight } from "../PerformanceAtScaleInsight";
+import { QueryOptimizationInsight } from "../QueryOptimizationInsight";
 import { RequestBreakdownInsight } from "../RequestBreakdownInsight";
 import { ScalingIssueInsight } from "../ScalingIssueInsight";
 import { SessionInViewInsight } from "../SessionInViewInsight";
@@ -52,6 +53,7 @@ import {
   isSpanInsight,
   isSpanNPlusOneInsight,
   isSpanNexusInsight,
+  isSpanQueryOptimizationInsight,
   isSpanScalingBadlyInsight,
   isSpanScalingInsufficientDataInsight,
   isSpanScalingWellInsight,
@@ -574,6 +576,20 @@ const renderInsightCard = (
       />
     );
   }
+
+  if (isSpanQueryOptimizationInsight(insight)) {
+    return (
+      <QueryOptimizationInsight
+        key={insight.type}
+        insight={insight}
+        onAssetLinkClick={handleAssetLinkClick}
+        onTraceButtonClick={handleTraceButtonClick}
+        onRecalculate={handleRecalculate}
+        onRefresh={handleRefresh}
+        onJiraTicketCreate={onJiraTicketCreate}
+      />
+    );
+  }
 };
 
 export const InsightList = (props: InsightListProps) => {

src/components/Insights/QueryOptimizationInsight/QueryOptimizationInsight.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { QueryOptimizationInsight } from ".";
+import { mockedQueryOptimizationInsight } from "./mockData";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof QueryOptimizationInsight> = {
+  title: "Insights/QueryOptimizationInsight",
+  component: QueryOptimizationInsight,
+  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: mockedQueryOptimizationInsight
+  }
+};
+
+export const LinkedJira: Story = {
+  args: {
+    insight: {
+      ...mockedQueryOptimizationInsight,
+      ticketLink: "https://digma.ai/1"
+    }
+  }
+};

src/components/Insights/QueryOptimizationInsight/index.tsx

@@ -0,0 +1,115 @@
+import { useContext } from "react";
+import { InsightType } from "../../../types";
+import { getDurationString } from "../../../utils/getDurationString";
+import { sendTrackingEvent } from "../../../utils/sendTrackingEvent";
+import { ConfigContext } from "../../common/App/ConfigContext";
+import { Tooltip } from "../../common/Tooltip";
+import { CrosshairIcon } from "../../common/icons/CrosshairIcon";
+import { InsightCard } from "../InsightCard";
+import { JiraButton } from "../common/JiraButton";
+import { Description, Link } from "../styles";
+import { trackingEvents } from "../tracking";
+import { Trace } from "../types";
+import * as s from "./styles";
+import { QueryOptimizationInsightProps } from "./types";
+
+export const QueryOptimizationInsight = (
+  props: QueryOptimizationInsightProps
+) => {
+  const config = useContext(ConfigContext);
+
+  const handleSpanLinkClick = (spanCodeObjectId?: string) => {
+    spanCodeObjectId &&
+      props.onAssetLinkClick(spanCodeObjectId, props.insight.type);
+  };
+
+  const handleTraceButtonClick = (
+    trace: Trace,
+    insightType: InsightType,
+    spanCodeObjectId?: string
+  ) => {
+    props.onTraceButtonClick(trace, insightType, spanCodeObjectId);
+  };
+
+  const handleCreateJiraTicketButtonClick = () => {
+    sendTrackingEvent(trackingEvents.JIRA_TICKET_INFO_BUTTON_CLICKED, {
+      insightType: props.insight.type
+    });
+
+    props.onJiraTicketCreate &&
+      props.onJiraTicketCreate(
+        props.insight,
+        props.insight.spanInfo?.spanCodeObjectId
+      );
+  };
+
+  const spanName = props.insight.spanInfo?.displayName || undefined;
+  const spanCodeObjectId =
+    props.insight.spanInfo?.spanCodeObjectId || undefined;
+  const traceId = props.insight.traceId;
+
+  return (
+    <InsightCard
+      data={props.insight}
+      content={
+        <s.ContentContainer>
+          <Description>
+            Query is slow compared to other{" "}
+            {props.insight.dbStatement.toUpperCase()} requests.
+          </Description>
+          <s.SpanContainer>
+            <Tooltip title={spanName}>
+              <s.Name>
+                {spanCodeObjectId ? (
+                  <Link onClick={() => handleSpanLinkClick(spanCodeObjectId)}>
+                    {spanName}
+                  </Link>
+                ) : (
+                  spanName
+                )}
+              </s.Name>
+            </Tooltip>
+            {config.isJaegerEnabled && traceId && (
+              <s.Button
+                onClick={() =>
+                  handleTraceButtonClick(
+                    {
+                      name: spanName,
+                      id: traceId
+                    },
+                    props.insight.type,
+                    spanCodeObjectId
+                  )
+                }
+                icon={{ component: CrosshairIcon }}
+              >
+                Trace
+              </s.Button>
+            )}
+          </s.SpanContainer>
+          <s.Stats>
+            <s.Stat>
+              <Description>Duration</Description>
+              <span>{getDurationString(props.insight.duration)}</span>
+            </s.Stat>
+            <s.Stat>
+              <Description>Typical Duration</Description>
+              <span>{getDurationString(props.insight.typicalDuration)}</span>
+            </s.Stat>
+          </s.Stats>
+        </s.ContentContainer>
+      }
+      onRecalculate={props.onRecalculate}
+      onRefresh={props.onRefresh}
+      buttons={[
+        <JiraButton
+          key={"view-ticket-info"}
+          onTicketInfoButtonClick={handleCreateJiraTicketButtonClick}
+          spanCodeObjectId={props.insight.spanInfo?.spanCodeObjectId}
+          ticketLink={props.insight.ticketLink}
+          buttonType="large"
+        />
+      ]}
+    />
+  );
+};

src/components/Insights/QueryOptimizationInsight/mockData.ts

@@ -0,0 +1,85 @@
+import { InsightType } from "../../../types";
+import {
+  InsightCategory,
+  InsightScope,
+  QueryOptimizationInsight
+} from "../types";
+
+export const mockedQueryOptimizationInsight: QueryOptimizationInsight = {
+  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: "QueryOptimization",
+  type: InsightType.SpanQueryOptimization,
+  category: InsightCategory.Performance,
+  specifity: 2,
+  importance: 2,
+  span: {
+    name: "OwnerValidation.ValidateOwner",
+    displayName: "OwnerValidation.ValidateOwner",
+    instrumentationLibrary:
+      "io.opentelemetry.opentelemetry-instrumentation-annotations-1.16",
+    spanCodeObjectId:
+      "span:io.opentelemetry.opentelemetry-instrumentation-annotations-1.16$_$OwnerValidation.ValidateOwner",
+    methodCodeObjectId:
+      "org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner",
+    kind: "Internal",
+    codeObjectId:
+      "org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner"
+  },
+  traceId: "00D37A4E7208E0F6E89AA7E2E37446A6",
+  duration: {
+    value: 12.34,
+    unit: "ms",
+    raw: 1636050588.0
+  },
+  typicalDuration: {
+    value: 4.56,
+    unit: "ms",
+    raw: 0
+  },
+  dbStatement: "select",
+  serviceName: "Petclinic",
+  dbName: "postgresql",
+  scope: InsightScope.Span,
+  spanInfo: {
+    name: "OwnerValidation.ValidateOwner",
+    displayName: "OwnerValidation.ValidateOwner",
+    instrumentationLibrary:
+      "io.opentelemetry.opentelemetry-instrumentation-annotations-1.16",
+    spanCodeObjectId:
+      "span:io.opentelemetry.opentelemetry-instrumentation-annotations-1.16$_$OwnerValidation.ValidateOwner",
+    methodCodeObjectId:
+      "org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner",
+    kind: "Internal",
+    codeObjectId:
+      "org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner"
+  },
+  shortDisplayInfo: {
+    title: "",
+    targetDisplayName: "",
+    subtitle: "",
+    description: ""
+  },
+  codeObjectId:
+    "org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner",
+  decorators: [
+    {
+      title: "N+1",
+      description: "Supected NPlus One"
+    }
+  ],
+  environment: "BOB-LAPTOP[LOCAL]",
+  severity: 0.0,
+  isRecalculateEnabled: false,
+  prefixedCodeObjectId:
+    "method:org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner",
+  customStartTime: null,
+  actualStartTime: "2023-07-27T08:23:56.500827Z"
+};

src/components/Insights/QueryOptimizationInsight/styles.ts

@@ -0,0 +1,52 @@
+import styled from "styled-components";
+import { Button as CommonButton } from "../../common/Button";
+
+export const Stats = styled.span`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 24px;
+`;
+
+export const Stat = styled.span`
+  display: flex;
+  gap: 4px;
+`;
+
+export const ContentContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  color: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#49494d";
+      case "dark":
+      case "dark-jetbrains":
+        return "#dadada";
+    }
+  }};
+`;
+
+export const SpanContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 4px;
+`;
+
+export const Button = styled(CommonButton)`
+  height: fit-content;
+`;
+
+export const Name = styled.span`
+  font-weight: 500;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: fit-content;
+`;
+
+export const CriticalityValue = styled.span`
+  display: flex;
+  gap: 4px;
+`;

src/components/Insights/QueryOptimizationInsight/types.ts

@@ -0,0 +1,15 @@
+import { InsightType } from "../../../types";
+import { InsightProps, QueryOptimizationInsight, Trace } from "../types";
+
+export interface QueryOptimizationInsightProps extends InsightProps {
+  insight: QueryOptimizationInsight;
+  onAssetLinkClick: (
+    spanCodeObjectId: string,
+    insightType: InsightType
+  ) => void;
+  onTraceButtonClick: (
+    trace: Trace,
+    insightType: InsightType,
+    spanCodeObjectId?: string
+  ) => void;
+}

src/components/Insights/index.tsx

@@ -26,12 +26,14 @@ import * as s from "./styles";
 import { BottleneckInsightTicket } from "./tickets/BottleneckInsightTicket";
 import { EndpointNPlusOneInsightTicket } from "./tickets/EndpointNPlusOneInsightTicket";
 import { NPlusOneInsightTicket } from "./tickets/NPlusOneInsightTicket";
+import { QueryOptimizationInsightTicket } from "./tickets/QueryOptimizationInsightTicket";
 import { SpanBottleneckInsightTicket } from "./tickets/SpanBottleneckInsightTicket";
 import {
   isEndpointSlowestSpansInsight,
   isEndpointSuspectedNPlusOneInsight,
   isSpanEndpointBottleneckInsight,
-  isSpanNPlusOneInsight
+  isSpanNPlusOneInsight,
+  isSpanQueryOptimizationInsight
 } from "./typeGuards";
 import {
   EndpointSlowestSpansInsight,
@@ -42,6 +44,7 @@ import {
   InsightsProps,
   InsightsStatus,
   Method,
+  QueryOptimizationInsight,
   SpanEndpointBottleneckInsight,
   SpanNPlusOneInsight,
   ViewMode
@@ -81,6 +84,13 @@ const renderInsightTicket = (
     return <SpanBottleneckInsightTicket data={ticketData} onClose={onClose} />;
   }
 
+  if (isSpanQueryOptimizationInsight(data.insight) && data.spanCodeObjectId) {
+    const ticketData = data as InsightTicketInfo<QueryOptimizationInsight>;
+    return (
+      <QueryOptimizationInsightTicket data={ticketData} onClose={onClose} />
+    );
+  }
+
   return null;
 };