Merge pull request #1335 from digma-ai/feauture/performance-anomaly-highlight

Add Performance Anomaly highlight card

Author: kshmidt-digma

src/components/Highlights/TopIssues/HighlightCardRenderer/index.tsx

@@ -8,6 +8,7 @@ import {
   isEndpointSpanNPlusOneHighlight,
   isHotSpotHighlight,
   isSpanEndpointBottleneckHighlight,
+  isSpanPerformanceAnomalyHighlight,
   isSpaNPlusOneHighlight,
   isSpanQueryOptimizationHighlight,
   isSpanScalingHighlight
@@ -21,6 +22,7 @@ import { EndpointSlowdownSourceHighlightCard } from "../highlightCards/EndpointS
 import { EndpointSpanNPlusOneHighlightCard } from "../highlightCards/EndpointSpanNPlusOneHighlightCard";
 import { HotSpotHighlightCard } from "../highlightCards/HotSpotHighlightCard";
 import { SpanEndpointBottleneckHighlightCard } from "../highlightCards/SpanEndpointBottleneckHighlightCard";
+import { SpanPerformanceAnomalyHighlightCard } from "../highlightCards/SpanPerformanceAnomalyHighlightCard";
 import { SpaNPlusOneHighlightCard } from "../highlightCards/SpaNPlusOneHighlightCard";
 import { SpanQueryOptimizationHighlightCard } from "../highlightCards/SpanQueryOptimizationHighlightCard";
 import { SpanScalingHighlightCard } from "../highlightCards/SpanScalingHighlightCard";
@@ -76,4 +78,8 @@ export const HighlightCardRenderer = ({
   if (isSpanScalingHighlight(highlight)) {
     return <SpanScalingHighlightCard data={highlight} />;
   }
+
+  if (isSpanPerformanceAnomalyHighlight(highlight)) {
+    return <SpanPerformanceAnomalyHighlightCard data={highlight} />;
+  }
 };

src/components/Highlights/TopIssues/highlightCards/SpanPerformanceAnomalyHighlightCard/SpanPerformanceAnomalyHighlightCard.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SpanPerformanceAnomalyHighlightCard } from ".";
+import { mockedSpanPerformanceAnomalyHighlightData } from "./mockData";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof SpanPerformanceAnomalyHighlightCard> = {
+  title:
+    "Highlights/TopIssues/highlightCards/SpanPerformanceAnomalyHighlightCard",
+  component: SpanPerformanceAnomalyHighlightCard,
+  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>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+
+export const Default: Story = {
+  args: {
+    data: mockedSpanPerformanceAnomalyHighlightData
+  }
+};

src/components/Highlights/TopIssues/highlightCards/SpanPerformanceAnomalyHighlightCard/index.tsx

@@ -0,0 +1,90 @@
+import type { Row } from "@tanstack/react-table";
+import { createColumnHelper } from "@tanstack/react-table";
+import type {
+  EnvironmentData,
+  SpanPerformanceAnomalyMetrics
+} from "../../../../../redux/services/types";
+import { useConfigSelector } from "../../../../../store/config/useConfigSelector";
+import { ScopeChangeEvent } from "../../../../../types";
+import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent";
+import { getDurationString } from "../../../../../utils/getDurationString";
+import { roundTo } from "../../../../../utils/roundTo";
+import { Tag } from "../../../../common/v3/Tag";
+import { Table } from "../../../common/Table";
+import { TableText } from "../../../common/TableText";
+import { handleEnvironmentTableRowClick } from "../../../handleEnvironmentTableRowClick";
+import { trackingEvents } from "../../../tracking";
+import { HighlightCard } from "../../common/HighlightCard";
+import { addEnvironmentColumns } from "../addEnvironmentColumns";
+import type { SpanPerformanceAnomalyHighlightCardProps } from "./types";
+
+export const SpanPerformanceAnomalyHighlightCard = ({
+  data
+}: SpanPerformanceAnomalyHighlightCardProps) => {
+  const { scope, environments } = useConfigSelector();
+
+  const columnHelper =
+    createColumnHelper<EnvironmentData<SpanPerformanceAnomalyMetrics>>();
+
+  const metricsColumns = [
+    columnHelper.accessor((x) => x.metrics.find((x) => x.id === "P50"), {
+      header: "Median",
+      cell: (info) => {
+        const metric = info.getValue();
+        const value = metric ? getDurationString(metric.value) : "";
+        return metric ? <Tag title={value} content={value} /> : null;
+      }
+    }),
+    columnHelper.accessor((x) => x.metrics.find((x) => x.id === "P95"), {
+      header: "Slowest 5%",
+      cell: (info) => {
+        const metric = info.getValue();
+        const value = metric ? getDurationString(metric.value) : "";
+        return metric ? <Tag title={value} content={value} /> : null;
+      }
+    }),
+    columnHelper.accessor(
+      (x) => x.metrics.find((x) => x.id === "SlowerByPercentage"),
+      {
+        header: "The slowest 5% slower than the Median by",
+        cell: (info) => {
+          const metric = info.getValue();
+          const value = metric ? `${String(roundTo(metric.value, 2))}%` : "";
+          return metric ? <TableText title={value}>{value}</TableText> : null;
+        }
+      }
+    )
+  ];
+
+  const columns = addEnvironmentColumns(columnHelper, metricsColumns);
+
+  const handleTableRowClick = (
+    row: Row<EnvironmentData<SpanPerformanceAnomalyMetrics>>
+  ) => {
+    sendUserActionTrackingEvent(
+      trackingEvents.TOP_ISSUES_CARD_TABLE_ROW_CLICKED,
+      {
+        insightType: data.insightType
+      }
+    );
+    handleEnvironmentTableRowClick(
+      scope,
+      environments,
+      row.original.environmentId,
+      ScopeChangeEvent.HighlightsTopIssuesCardItemClicked
+    );
+  };
+
+  return (
+    <HighlightCard
+      highlight={data}
+      content={
+        <Table<EnvironmentData<SpanPerformanceAnomalyMetrics>>
+          columns={columns}
+          data={data.environments}
+          onRowClick={handleTableRowClick}
+        />
+      }
+    />
+  );
+};

src/components/Highlights/TopIssues/highlightCards/SpanPerformanceAnomalyHighlightCard/mockData.ts

@@ -0,0 +1,87 @@
+import type {
+  HighlightData,
+  SpanPerformanceAnomalyMetrics
+} from "../../../../../redux/services/types";
+import { InsightType } from "../../../../../types";
+import { InsightStatus } from "../../../../Insights/types";
+
+export const mockedSpanPerformanceAnomalyMetrics: SpanPerformanceAnomalyMetrics =
+  [
+    {
+      id: "P50",
+      value: {
+        value: 22.71,
+        unit: "ms",
+        raw: 22705900.0
+      }
+    },
+    {
+      id: "P95",
+      value: {
+        value: 22.71,
+        unit: "ms",
+        raw: 22705900.0
+      }
+    },
+    {
+      id: "SlowerByPercentage",
+      value: 50
+    }
+  ];
+
+export const mockedSpanPerformanceAnomalyHighlightData: HighlightData<SpanPerformanceAnomalyMetrics> =
+  {
+    insightType: InsightType.SpanPerformanceAnomaly,
+    asset: {
+      name: "spanName",
+      displayName: "displayName",
+      instrumentationLibrary: "instrumentationLibrary",
+      spanCodeObjectId: "spanCodeObjectId",
+      methodCodeObjectId: "methodCodeObjectId",
+      kind: "kind"
+    },
+    environments: [
+      {
+        environmentId: "1",
+        environmentName: "Dev",
+        insightStatus: InsightStatus.Active,
+        insightCriticality: 0.8,
+        metrics: mockedSpanPerformanceAnomalyMetrics
+      },
+      {
+        environmentId: "2",
+        environmentName: "Staging",
+        insightStatus: InsightStatus.Active,
+        insightCriticality: 0.8,
+        metrics: mockedSpanPerformanceAnomalyMetrics
+      },
+      {
+        environmentId: "3",
+        environmentName: "Production",
+        insightStatus: InsightStatus.Active,
+        insightCriticality: 0.8,
+        metrics: mockedSpanPerformanceAnomalyMetrics
+      },
+      {
+        environmentId: "4",
+        environmentName: "Env1",
+        insightStatus: InsightStatus.Active,
+        insightCriticality: 0.8,
+        metrics: mockedSpanPerformanceAnomalyMetrics
+      },
+      {
+        environmentId: "5",
+        environmentName: "Env2",
+        insightStatus: InsightStatus.Active,
+        insightCriticality: 0.8,
+        metrics: mockedSpanPerformanceAnomalyMetrics
+      },
+      {
+        environmentId: "6",
+        environmentName: "Env3",
+        insightStatus: InsightStatus.Active,
+        insightCriticality: 0.8,
+        metrics: mockedSpanPerformanceAnomalyMetrics
+      }
+    ]
+  };

src/components/Highlights/TopIssues/highlightCards/SpanPerformanceAnomalyHighlightCard/types.ts

@@ -0,0 +1,8 @@
+import type {
+  HighlightData,
+  SpanPerformanceAnomalyMetrics
+} from "../../../../../redux/services/types";
+
+export interface SpanPerformanceAnomalyHighlightCardProps {
+  data: HighlightData<SpanPerformanceAnomalyMetrics>;
+}

src/redux/services/typeGuards.ts

@@ -12,6 +12,7 @@ import type {
   HotSpotMetrics,
   SpaNPlusOneMetrics,
   SpanEndpointBottleneckMetrics,
+  SpanPerformanceAnomalyMetrics,
   SpanQueryOptimizationMetrics,
   SpanScalingMetrics
 } from "./types";
@@ -75,3 +76,8 @@ export const isSpanScalingHighlight = (
   highlight: HighlightData<GenericMetrics>
 ): highlight is HighlightData<SpanScalingMetrics> =>
   highlight.insightType === InsightType.SpanScaling;
+
+export const isSpanPerformanceAnomalyHighlight = (
+  highlight: HighlightData<GenericMetrics>
+): highlight is HighlightData<SpanPerformanceAnomalyMetrics> =>
+  highlight.insightType === InsightType.SpanPerformanceAnomaly;

src/redux/services/types.ts

@@ -413,6 +413,21 @@ export type SpanScalingMetrics = [
   }
 ];
 
+export type SpanPerformanceAnomalyMetrics = [
+  {
+    id: "P50";
+    value: Duration;
+  },
+  {
+    id: "P95";
+    value: Duration;
+  },
+  {
+    id: "SlowerByPercentage";
+    value: number;
+  }
+];
+
 export type GenericMetrics =
   | EndpointBottleneckMetrics
   | SpanEndpointBottleneckMetrics
@@ -425,7 +440,8 @@ export type GenericMetrics =
   | EndpointSpanNPlusOneMetrics
   | SpaNPlusOneMetrics
   | HotSpotMetrics
-  | SpanScalingMetrics;
+  | SpanScalingMetrics
+  | SpanPerformanceAnomalyMetrics;
 
 export interface GetTopIssuesHighlightsResponse {
   topInsights: HighlightData<GenericMetrics>[];