Slow endpoint

src/components/Insights/common/InsightCard/KeyValueContainer/KeyValue/styles.ts

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { caption1RegularTypography } from "../../../../../common/App/typographies";
 
 export const Container = styled.div`
   display: flex;
@@ -8,7 +9,7 @@ export const Container = styled.div`
 
 export const Key = styled.div`
   color: ${({ theme }) => theme.colors.v3.text.secondary};
-  font-size: 11px;
+  ${caption1RegularTypography}
 `;
 
 export const Value = styled.div`

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

@@ -1,3 +1,4 @@
+import { getDurationString } from "../../../../../utils/getDurationString";
 import { sendTrackingEvent } from "../../../../../utils/sendTrackingEvent";
 import { InfoCircleIcon } from "../../../../common/icons/InfoCircleIcon";
 import { Tag } from "../../../../common/v3/Tag";
@@ -66,8 +67,7 @@ export const HighNumberOfQueriesInsight = (
               <Tag content={insight.typicalCount} />
             </KeyValue>
             <KeyValue label={"Duration"}>
-              {props.insight.medianDuration.value.toString() +
-                props.insight.medianDuration.unit}
+              {getDurationString(props.insight.medianDuration)}
             </KeyValue>
           </KeyValueContainer>
         </s.ContentContainer>

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

@@ -0,0 +1,132 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { SlowEndpointInsight } from ".";
+import { InsightCategory, InsightScope, InsightType } from "../../../types";
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof SlowEndpointInsight> = {
+  title: "Insights/common/insights/SlowEndpointInsight",
+  component: SlowEndpointInsight,
+  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: {
+      id: "60b55792-8262-4c3d-9628-7cce7979ad6d",
+      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: "Slow Endpoint",
+      type: InsightType.SlowEndpoint,
+      category: InsightCategory.Performance,
+      specifity: 5,
+      importance: 2,
+      decorators: [
+        {
+          title: "Slow Endpoint",
+          description: "Endpoint slow performance"
+        }
+      ],
+      endpointsMedian: {
+        value: 2.21,
+        unit: "sec",
+        raw: 2209365000
+      },
+      endpointsMedianOfMedians: {
+        value: 1.6,
+        unit: "sec",
+        raw: 1601240200
+      },
+      endpointsP75: {
+        value: 3.85,
+        unit: "sec",
+        raw: 3851011500
+      },
+      median: {
+        value: 5.01,
+        unit: "sec",
+        raw: 5007013000
+      },
+      endpointsMedianOfP75: {
+        value: 0,
+        unit: "ns",
+        raw: 0
+      },
+      min: {
+        value: 0,
+        unit: "ns",
+        raw: 0
+      },
+      max: {
+        value: 0,
+        unit: "ns",
+        raw: 0
+      },
+      mean: {
+        value: 0,
+        unit: "ns",
+        raw: 0
+      },
+      p75: {
+        value: 0,
+        unit: "ns",
+        raw: 0
+      },
+      p95: {
+        value: 0,
+        unit: "ns",
+        raw: 0
+      },
+      p99: {
+        value: 0,
+        unit: "ns",
+        raw: 0
+      },
+      scope: InsightScope.EntrySpan,
+      endpointSpan: "HTTP GET SampleInsights/SlowEndpoint",
+      spanCodeObjectId:
+        "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/SlowEndpoint",
+      route: "epHTTP:HTTP GET SampleInsights/SlowEndpoint",
+      serviceName: "Sample.MoneyTransfer.API",
+      spanInfo: {
+        name: "HTTP GET SampleInsights/SlowEndpoint",
+        displayName: "HTTP GET SampleInsights/SlowEndpoint",
+        instrumentationLibrary: "OpenTelemetry.Instrumentation.AspNetCore",
+        spanCodeObjectId:
+          "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/SlowEndpoint",
+        methodCodeObjectId:
+          "method:Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$SlowEndpoint(Int32)",
+        kind: "Server",
+        codeObjectId:
+          "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$SlowEndpoint(Int32)"
+      },
+      shortDisplayInfo: {
+        title: "",
+        targetDisplayName: "HTTP GET SampleInsights/SlowEndpoint",
+        subtitle: "",
+        description: "Median duration 5.01 sec"
+      },
+      codeObjectId:
+        "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$SlowEndpoint(Int32)",
+      environment: "BOB-LAPTOP[LOCAL]",
+      severity: 0,
+      isRecalculateEnabled: false,
+      prefixedCodeObjectId:
+        "method:Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$SlowEndpoint(Int32)",
+      customStartTime: null,
+      actualStartTime: "2023-06-16T11:10:29.277Z"
+    }
+  }
+};

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

@@ -0,0 +1,40 @@
+import { getDurationString } from "../../../../../utils/getDurationString";
+import { roundTo } from "../../../../../utils/roundTo";
+import { Tag } from "../../../../common/v3/Tag";
+import { InsightCard } from "../../InsightCard";
+import {
+  KeyValue,
+  KeyValueContainer
+} from "../../InsightCard/KeyValueContainer";
+import * as s from "./styles";
+import { SlowEndpointInsightProps } from "./types";
+
+export const SlowEndpointInsight = (props: SlowEndpointInsightProps) => {
+  const diff =
+    (props.insight.median.raw / props.insight.endpointsMedianOfMedians.raw -
+      1) *
+    100;
+
+  return (
+    <InsightCard
+      insight={props.insight}
+      content={
+        <s.ContentContainer>
+          <s.Description>
+            {`On average requests are slower than other endpoints by ${roundTo(
+              diff,
+              2
+            )}%`}
+          </s.Description>
+          <KeyValueContainer>
+            <KeyValue label={"Slower by"}>
+              <Tag content={getDurationString(props.insight.median)} />
+            </KeyValue>
+          </KeyValueContainer>
+        </s.ContentContainer>
+      }
+      onRecalculate={props.onRecalculate}
+      onRefresh={props.onRefresh}
+    />
+  );
+};

src/components/Insights/common/insights/SlowEndpointInsight/styles.ts

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+import { caption1RegularTypography } from "../../../../common/App/typographies";
+
+export const ContentContainer = styled.div`
+  gap: 24px;
+  display: flex;
+  padding: 8px 0;
+`;
+
+export const Description = styled.div`
+  color: ${({ theme }) => theme.colors.v3.text.secondary};
+  ${caption1RegularTypography}
+`;

src/components/Insights/common/insights/SlowEndpointInsight/types.ts

@@ -0,0 +1,5 @@
+import { InsightProps, SlowEndpointInsight } from "../../../types";
+
+export interface SlowEndpointInsightProps extends InsightProps {
+  insight: SlowEndpointInsight;
+}