Add Performance Anomaly insight

src/components/Admin/Home/Overview/TopIssuesWidget/index.tsx

@@ -24,7 +24,8 @@ export const TopIssuesWidget = ({ onGetIssues }: TopIssuesWidgetProps) => {
       query: {
         environment: environmentId ?? undefined
       },
-      limit: ISSUES_LIMIT
+      limit: ISSUES_LIMIT,
+      title: "Top issues by criticality"
     });
   };
 
@@ -34,7 +35,8 @@ export const TopIssuesWidget = ({ onGetIssues }: TopIssuesWidgetProps) => {
         environment: environmentId ?? undefined,
         sortBy: "severity"
       },
-      limit: ISSUES_LIMIT
+      limit: ISSUES_LIMIT,
+      title: "Top issues by severity"
     });
   };
 

src/components/Admin/common/IssuesSidebarOverlay/IssuesSidebar/index.tsx

@@ -5,8 +5,12 @@ import {
   useAdminDispatch,
   useAdminSelector
 } from "../../../../../containers/Admin/hooks";
-import { useGetIssuesQuery } from "../../../../../redux/services/digma";
+import {
+  useGetAboutQuery,
+  useGetIssuesQuery
+} from "../../../../../redux/services/digma";
 import { setIsInsightJiraTicketHintShown } from "../../../../../redux/slices/persistSlice";
+import { useConfigSelector } from "../../../../../store/config/useConfigSelector";
 import { isUndefined } from "../../../../../typeGuards/isUndefined";
 import type { Scope } from "../../../../common/App/types";
 import { CrossIcon } from "../../../../common/icons/16px/CrossIcon";
@@ -58,8 +62,10 @@ export const IssuesSidebar = ({
   onResizeHandleMouseDown,
   query,
   scopeDisplayName,
-  isPaginationEnabled = true
+  isPaginationEnabled = true,
+  title = "Issues"
 }: IssuesSidebarProps) => {
+  const { jaegerURL } = useConfigSelector();
   const [infoToOpenJiraTicket, setInfoToOpenJiraTicket] =
     useState<InsightTicketInfo<GenericCodeObjectInsight>>();
   const [viewMode, setViewMode] = useState<ViewMode>(ViewMode.All);
@@ -74,8 +80,8 @@ export const IssuesSidebar = ({
   );
   const isDrawerOpen = Boolean(insightIdToOpenSuggestion);
   const issuesListRef = useRef<HTMLDivElement>(null);
-
   const theme = useTheme();
+  const { data: about } = useGetAboutQuery();
   const { data, isFetching, refetch } = useGetIssuesQuery(
     {
       showDismissed: viewMode === ViewMode.OnlyDismissed,
@@ -195,7 +201,7 @@ export const IssuesSidebar = ({
     <s.Container $isResizing={isResizing}>
       <s.Header>
         <s.HeaderTitleRow>
-          <span>Issues</span>
+          <span>{title}</span>
           <NewIconButton
             buttonType={"secondaryBorderless"}
             icon={CrossIcon}
@@ -237,6 +243,8 @@ export const IssuesSidebar = ({
                   onDismissalChange={handleDismissalChange}
                   onOpenSuggestion={handleOpenSuggestion}
                   tooltipBoundaryRef={issuesListRef}
+                  backendInfo={about ?? null}
+                  jaegerURL={jaegerURL}
                 />
               ))}
             </s.IssuesList>

src/components/Admin/common/IssuesSidebarOverlay/IssuesSidebar/types.ts

@@ -9,6 +9,7 @@ export interface IssuesSidebarProps {
   onResizeHandleMouseDown: (e: MouseEvent) => void;
   query?: GetIssuesPayload;
   isPaginationEnabled?: boolean;
+  title?: string;
 }
 
 export interface DrawerContainerProps {

src/components/Admin/common/IssuesSidebarOverlay/index.tsx

@@ -147,6 +147,7 @@ export const IssuesSidebarOverlay = ({
             onResizeHandleMouseDown={handleResizeHandleMouseDown}
             scopeDisplayName={scopeDisplayName}
             isPaginationEnabled={isPaginationEnabled}
+            title={issuesSidebarQuery?.title}
           />
         </s.IssuesSidebarContainer>
       </CSSTransition>

src/components/Admin/common/IssuesSidebarOverlay/types.ts

@@ -3,6 +3,7 @@ import type { GetIssuesPayload } from "../../../../redux/services/types";
 export interface IssuesSidebarQuery {
   query?: GetIssuesPayload;
   limit?: number;
+  title?: string;
 }
 
 export interface IssuesSidebarOverlayProps {

src/components/Insights/InsightTicketRenderer/insightTickets/EndpointQueryOptimizationV2InsightTicket/index.tsx

@@ -13,9 +13,9 @@ import type {
 import { useEndpointDataSource } from "../common";
 import { CodeLocations } from "../common/CodeLocations";
 import { CommitInfos } from "../common/CommitInfos";
+import { getTraceAttachment } from "../common/getTraceAttachment";
 import { InsightJiraTicket } from "../common/InsightJiraTicket";
 import { QueryOptimizationEndpoints } from "../common/QueryOptimizationEndpoints";
-import { getTraceAttachment } from "../common/SpanScaling";
 import type { InsightTicketProps } from "../types";
 
 export const EndpointQueryOptimizationV2InsightTicket = ({

src/components/Insights/InsightTicketRenderer/insightTickets/EndpointSpanNPlusOneInsightTicket/index.tsx

@@ -12,9 +12,9 @@ import type {
 import { useEndpointDataSource } from "../common";
 import { CodeLocations } from "../common/CodeLocations";
 import { CommitInfos } from "../common/CommitInfos";
+import { getTraceAttachment } from "../common/getTraceAttachment";
 import { InsightJiraTicket } from "../common/InsightJiraTicket";
 import { NPlusOneEndpoints } from "../common/NPlusOneEndpoints";
-import { getTraceAttachment } from "../common/SpanScaling";
 import type { InsightTicketProps } from "../types";
 
 export const EndpointSpanNPlusOneInsightTicket = ({

src/components/Insights/InsightTicketRenderer/insightTickets/SpaNPlusOneInsightTicket/index.tsx

@@ -8,9 +8,9 @@ import type { SpaNPlusOneInsight } from "../../../types";
 import { useSpanDataSource } from "../common";
 import { CodeLocations } from "../common/CodeLocations";
 import { CommitInfos } from "../common/CommitInfos";
+import { getTraceAttachment } from "../common/getTraceAttachment";
 import { InsightJiraTicket } from "../common/InsightJiraTicket";
 import { NPlusOneEndpoints } from "../common/NPlusOneEndpoints";
-import { getTraceAttachment } from "../common/SpanScaling";
 import type { InsightTicketProps } from "../types";
 
 export const SpaNPlusOneInsightTicket = ({

src/components/Insights/InsightTicketRenderer/insightTickets/SpanPerformanceAnomalyInsightTicket/SpanPerformanceAnomalyInsightTicket.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SpanPerformanceAnomalyInsightTicket } from ".";
+import { mockedSpanPerformanceAnomalyInsight } from "../../../InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/SpanPerformanceAnomalyInsightCard/mockData";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof SpanPerformanceAnomalyInsightTicket> = {
+  title:
+    "Insights/InsightTicketRenderer/insightTickets/SpanPerformanceAnomalyInsightTicket",
+  component: SpanPerformanceAnomalyInsightTicket,
+  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: {
+    data: {
+      insight: mockedSpanPerformanceAnomalyInsight
+    }
+  }
+};

src/components/Insights/InsightTicketRenderer/insightTickets/SpanPerformanceAnomalyInsightTicket/index.tsx

@@ -0,0 +1,113 @@
+import type { ReactElement } from "react";
+import { useConfigSelector } from "../../../../../store/config/useConfigSelector";
+import { getCriticalityLabel } from "../../../../../utils/getCriticalityLabel";
+import { getDurationString } from "../../../../../utils/getDurationString";
+import { intersperse } from "../../../../../utils/intersperse";
+import { roundTo } from "../../../../../utils/roundTo";
+import { DigmaSignature } from "../../../../common/DigmaSignature";
+import type { Attachment } from "../../../../common/JiraTicket/types";
+import type { SpanPerformanceAnomalyInsight } from "../../../types";
+import { useSpanDataSource } from "../common";
+import { CodeLocations } from "../common/CodeLocations";
+import { CommitInfos } from "../common/CommitInfos";
+import { getHistogramAttachment } from "../common/getHistogramAttachment";
+import { getTraceAttachment } from "../common/getTraceAttachment";
+import { InsightJiraTicket } from "../common/InsightJiraTicket";
+import type { InsightTicketProps } from "../types";
+
+export const SpanPerformanceAnomalyInsightTicket = ({
+  data,
+  refreshInsights,
+  onClose,
+  environmentId
+}: InsightTicketProps<SpanPerformanceAnomalyInsight>) => {
+  const { jaegerURL, digmaApiProxyPrefix, backendInfo } = useConfigSelector();
+
+  const insight = data.insight;
+
+  const { commitInfos, isLoading, codeLocations } =
+    useSpanDataSource<SpanPerformanceAnomalyInsight>(
+      data.insight.spanInfo,
+      data.insight,
+      environmentId
+    );
+
+  const renderDescription = () => {
+    return (
+      <>
+        {intersperse<ReactElement, ReactElement>(
+          [
+            <div key={"description"}>
+              The slowest 5% of this asset is{" "}
+              {roundTo(insight.slowerByPercentage, 2)}% slower than the median
+            </div>,
+            <span key={"p50duration"}>
+              Median duration: {getDurationString(insight.p50)}
+            </span>,
+            <span key={"p95duration"}>
+              5% duration: {getDurationString(insight.p95)}
+            </span>,
+            <CodeLocations
+              key={"codeLocations"}
+              codeLocations={codeLocations}
+            />,
+            <CommitInfos
+              key={"commitInfos"}
+              commitInfos={commitInfos}
+              insight={insight}
+            />,
+            <DigmaSignature key={"digmaSignature"} />
+          ],
+          (i: number) => (
+            <br key={`separator-${i}`} />
+          )
+        )}
+      </>
+    );
+  };
+
+  const criticalityString =
+    insight && insight.criticality > 0
+      ? `Criticality: ${getCriticalityLabel(insight.criticality)}`
+      : "";
+
+  const summary = ["Performance anomaly found", criticalityString]
+    .filter(Boolean)
+    .join(" - ");
+
+  const attachmentP50Trace = getTraceAttachment(
+    jaegerURL,
+    data.insight.p50TraceId
+  );
+  const attachmentP95Trace = getTraceAttachment(
+    jaegerURL,
+    data.insight.p95TraceId
+  );
+  const attachmentHistogram = getHistogramAttachment(
+    digmaApiProxyPrefix,
+    insight,
+    "spanPercentiles",
+    backendInfo
+  );
+  const attachments: Attachment[] = [
+    ...([attachmentP50Trace, attachmentP95Trace].filter(
+      Boolean
+    ) as Attachment[]),
+    ...(attachmentHistogram ? [attachmentHistogram] : [])
+  ];
+
+  return (
+    <InsightJiraTicket
+      summary={summary}
+      description={{
+        content: renderDescription(),
+        isLoading: isLoading
+      }}
+      attachments={attachments}
+      insight={data.insight}
+      onClose={onClose}
+      refreshInsights={refreshInsights}
+      environmentId={environmentId}
+    />
+  );
+};

src/components/Insights/InsightTicketRenderer/insightTickets/SpanQueryOptimizationInsightTicket/index.tsx

@@ -8,9 +8,9 @@ import type { Attachment } from "../../../../common/JiraTicket/types";
 import type { SpanQueryOptimizationInsight } from "../../../types";
 import { useCommitInfos } from "../common";
 import { CommitInfos } from "../common/CommitInfos";
+import { getTraceAttachment } from "../common/getTraceAttachment";
 import { InsightJiraTicket } from "../common/InsightJiraTicket";
 import { QueryOptimizationEndpoints } from "../common/QueryOptimizationEndpoints";
-import { getTraceAttachment } from "../common/SpanScaling";
 import type { InsightTicketProps } from "../types";
 
 export const SpanQueryOptimizationInsightTicket = ({

src/components/Insights/InsightTicketRenderer/insightTickets/SpanScalingByRootCauseInsightTicket/index.tsx

@@ -8,16 +8,16 @@ import type { RootCauseSpanInfo, SpanScalingInsight } from "../../../types";
 import { useEndpointDataSource } from "../common";
 import { CodeLocations } from "../common/CodeLocations";
 import { CommitInfos } from "../common/CommitInfos";
+import { getHistogramAttachment } from "../common/getHistogramAttachment";
+import { getTraceAttachment } from "../common/getTraceAttachment";
 import { InsightJiraTicket } from "../common/InsightJiraTicket";
 import {
   ScalingIssueAffectedEndpoints,
   ScalingIssueDuration,
   ScalingIssueMessage,
   ScalingIssueRootCauses,
   ScalingIssueTestedConcurrency,
-  getHistogramAttachment,
-  getScalingIssueSummary,
-  getTraceAttachment
+  getScalingIssueSummary
 } from "../common/SpanScaling";
 import type { InsightTicketProps } from "../types";
 
@@ -30,7 +30,7 @@ export const SpanScalingByRootCauseInsightTicket = ({
 }: InsightTicketProps<SpanScalingInsight> & {
   rootCauseSpanInfo: RootCauseSpanInfo;
 }) => {
-  const { jaegerURL, digmaApiProxyPrefix } = useConfigSelector();
+  const { jaegerURL, digmaApiProxyPrefix, backendInfo } = useConfigSelector();
 
   const spanInfo = rootCauseSpanInfo;
 
@@ -95,7 +95,9 @@ export const SpanScalingByRootCauseInsightTicket = ({
   );
   const attachmentHistogram = getHistogramAttachment(
     digmaApiProxyPrefix,
-    spanInsight
+    spanInsight,
+    "spanScaling",
+    backendInfo
   );
   const attachments: Attachment[] = [
     ...(attachmentTrace ? [attachmentTrace] : []),

src/components/Insights/InsightTicketRenderer/insightTickets/SpanScalingInsightTicket/index.tsx

@@ -7,16 +7,16 @@ import type { SpanScalingInsight } from "../../../types";
 import { useSpanDataSource } from "../common";
 import { CodeLocations } from "../common/CodeLocations";
 import { CommitInfos } from "../common/CommitInfos";
+import { getHistogramAttachment } from "../common/getHistogramAttachment";
+import { getTraceAttachment } from "../common/getTraceAttachment";
 import { InsightJiraTicket } from "../common/InsightJiraTicket";
 import {
   ScalingIssueAffectedEndpoints,
   ScalingIssueDuration,
   ScalingIssueMessage,
   ScalingIssueRootCauses,
   ScalingIssueTestedConcurrency,
-  getHistogramAttachment,
-  getScalingIssueSummary,
-  getTraceAttachment
+  getScalingIssueSummary
 } from "../common/SpanScaling";
 import type { InsightTicketProps } from "../types";
 
@@ -26,7 +26,7 @@ export const SpanScalingInsightTicket = ({
   onClose,
   environmentId
 }: InsightTicketProps<SpanScalingInsight>) => {
-  const { jaegerURL, digmaApiProxyPrefix } = useConfigSelector();
+  const { jaegerURL, digmaApiProxyPrefix, backendInfo } = useConfigSelector();
 
   const insight = data.insight;
 
@@ -86,7 +86,9 @@ export const SpanScalingInsightTicket = ({
   const attachmentTrace = getTraceAttachment(jaegerURL, traceId);
   const attachmentHistogram = getHistogramAttachment(
     digmaApiProxyPrefix,
-    insight
+    insight,
+    "spanScaling",
+    backendInfo
   );
   const attachments: Attachment[] = [
     ...(attachmentTrace ? [attachmentTrace] : []),