From a5d45f414ca68e011e87320f9e13980b6614eb4b Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Thu, 29 Feb 2024 17:18:26 +0100
Subject: [PATCH] Add request breakdown insight

---
 .../ExcessiveAPICallsInsight/index.tsx        |  32 +--
 .../InsightHeader/AsyncTag/styles.ts          |   4 +-
 .../PercentileViewModeToggle.stories.tsx      |  22 ++
 .../PercentileViewModeToggle/index.tsx        |  17 ++
 .../PercentileViewModeToggle/types.ts         |   4 +
 .../Insights/common/InsightCard/index.tsx     |  58 +++--
 .../ReferenceLineLabel/index.tsx              |  15 +-
 .../DurationInsight/XAxisTick/index.tsx       |  16 +-
 .../insights/DurationInsight/constants.ts     |   2 +-
 .../common/insights/DurationInsight/index.tsx |  16 +-
 .../RequestBreakdownInsight.stories.tsx       | 217 ++++++++++++++++
 .../RequestBreakdownInsight/index.tsx         | 240 ++++++++++++++++++
 .../RequestBreakdownInsight/styles.ts         | 134 ++++++++++
 .../insights/RequestBreakdownInsight/types.ts |  16 ++
 src/components/common/App/themes/darkTheme.ts |   2 +
 .../common/App/themes/lightTheme.ts           |   2 +
 src/components/common/v3/Button/styles.ts     |  11 +-
 src/components/common/v3/Toggle/index.tsx     |  22 ++
 src/components/common/v3/Toggle/styles.ts     |  29 +++
 src/components/common/v3/Toggle/types.ts      |  16 ++
 src/styled.d.ts                               |  14 +-
 21 files changed, 811 insertions(+), 78 deletions(-)
 create mode 100644 src/components/Insights/common/InsightCard/PercentileViewModeToggle/PercentileViewModeToggle.stories.tsx
 create mode 100644 src/components/Insights/common/InsightCard/PercentileViewModeToggle/index.tsx
 create mode 100644 src/components/Insights/common/InsightCard/PercentileViewModeToggle/types.ts
 create mode 100644 src/components/Insights/common/insights/RequestBreakdownInsight/RequestBreakdownInsight.stories.tsx
 create mode 100644 src/components/Insights/common/insights/RequestBreakdownInsight/index.tsx
 create mode 100644 src/components/Insights/common/insights/RequestBreakdownInsight/styles.ts
 create mode 100644 src/components/Insights/common/insights/RequestBreakdownInsight/types.ts
 create mode 100644 src/components/common/v3/Toggle/index.tsx
 create mode 100644 src/components/common/v3/Toggle/styles.ts
 create mode 100644 src/components/common/v3/Toggle/types.ts

diff --git a/src/components/Insights/ExcessiveAPICallsInsight/index.tsx b/src/components/Insights/ExcessiveAPICallsInsight/index.tsx
index e46a9d90e..a4addf574 100644
--- a/src/components/Insights/ExcessiveAPICallsInsight/index.tsx
+++ b/src/components/Insights/ExcessiveAPICallsInsight/index.tsx
@@ -62,21 +62,23 @@ export const ExcessiveAPICallsInsight = (
                     </s.SpanName>
                   </Tooltip>
                   {config.isJaegerEnabled && traceId && (
-                    <s.Button
-                      icon={{ component: CrosshairIcon }}
-                      onClick={() =>
-                        handleTraceButtonClick(
-                          {
-                            name: spanName,
-                            id: traceId
-                          },
-                          props.insight.type,
-                          spanCodeObjectId
-                        )
-                      }
-                    >
-                      Trace
-                    </s.Button>
+                    <Tooltip title={"Open trace"}>
+                      <s.Button
+                        icon={{ component: CrosshairIcon }}
+                        onClick={() =>
+                          handleTraceButtonClick(
+                            {
+                              name: spanName,
+                              id: traceId
+                            },
+                            props.insight.type,
+                            spanCodeObjectId
+                          )
+                        }
+                      >
+                        Trace
+                      </s.Button>
+                    </Tooltip>
                   )}
                 </s.Span>
               );
diff --git a/src/components/Insights/common/InsightCard/InsightHeader/AsyncTag/styles.ts b/src/components/Insights/common/InsightCard/InsightHeader/AsyncTag/styles.ts
index c557d044a..d5c972b9d 100644
--- a/src/components/Insights/common/InsightCard/InsightHeader/AsyncTag/styles.ts
+++ b/src/components/Insights/common/InsightCard/InsightHeader/AsyncTag/styles.ts
@@ -1,8 +1,10 @@
 import styled from "styled-components";
+import { footnoteRegularTypography } from "../../../../../common/App/typographies";
 import { Tag as TagCommon } from "../../../../../common/v3/Tag";
 
 export const AsyncTag = styled(TagCommon)`
+  ${footnoteRegularTypography}
+
   color: ${({ theme }) => theme.colors.v3.text.primary};
   background: ${({ theme }) => theme.colors.v3.surface.brandDark};
-  font-size: 12px;
 `;
diff --git a/src/components/Insights/common/InsightCard/PercentileViewModeToggle/PercentileViewModeToggle.stories.tsx b/src/components/Insights/common/InsightCard/PercentileViewModeToggle/PercentileViewModeToggle.stories.tsx
new file mode 100644
index 000000000..5ffc91ca4
--- /dev/null
+++ b/src/components/Insights/common/InsightCard/PercentileViewModeToggle/PercentileViewModeToggle.stories.tsx
@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { PercentileViewModeToggle } from ".";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof PercentileViewModeToggle> = {
+  title: "Insights/common/InsightCard/PercentileViewModeToggle",
+  component: PercentileViewModeToggle,
+  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: {
+    viewMode: 0.5
+  }
+};
diff --git a/src/components/Insights/common/InsightCard/PercentileViewModeToggle/index.tsx b/src/components/Insights/common/InsightCard/PercentileViewModeToggle/index.tsx
new file mode 100644
index 000000000..20a22c17b
--- /dev/null
+++ b/src/components/Insights/common/InsightCard/PercentileViewModeToggle/index.tsx
@@ -0,0 +1,17 @@
+import { PERCENTILES } from "../../../../../constants";
+import { Toggle } from "../../../../common/v3/Toggle";
+import { PercentileViewModeToggleProps } from "./types";
+
+export const PercentileViewModeToggle = ({
+  viewMode,
+  onChange
+}: PercentileViewModeToggleProps) => (
+  <Toggle<typeof viewMode>
+    options={PERCENTILES.map((percentile) => ({
+      value: percentile.percentile,
+      label: percentile.label
+    }))}
+    value={viewMode}
+    onValueChange={onChange}
+  />
+);
diff --git a/src/components/Insights/common/InsightCard/PercentileViewModeToggle/types.ts b/src/components/Insights/common/InsightCard/PercentileViewModeToggle/types.ts
new file mode 100644
index 000000000..5ae5f64d3
--- /dev/null
+++ b/src/components/Insights/common/InsightCard/PercentileViewModeToggle/types.ts
@@ -0,0 +1,4 @@
+export interface PercentileViewModeToggleProps {
+  viewMode: number;
+  onChange: (viewMode: number) => void;
+}
diff --git a/src/components/Insights/common/InsightCard/index.tsx b/src/components/Insights/common/InsightCard/index.tsx
index 1a8033724..28592a6a6 100644
--- a/src/components/Insights/common/InsightCard/index.tsx
+++ b/src/components/Insights/common/InsightCard/index.tsx
@@ -122,40 +122,50 @@ export const InsightCard = (props: InsightCardProps) => {
           {/* <Button icon={CrossIcon} label={"Dismiss"} buttonType={"tertiary"} /> */}
           <s.Actions>
             {props.onOpenHistogram && (
-              <IconButton
-                icon={{ component: HistogramIcon }}
-                onClick={handleHistogramButtonClick}
-              />
+              <Tooltip title={"Open histogram"}>
+                <IconButton
+                  icon={{ component: HistogramIcon }}
+                  onClick={handleHistogramButtonClick}
+                />
+              </Tooltip>
             )}
             {props.onRecalculate && (
-              <IconButton
-                icon={{ component: RecalculateIcon }}
-                onClick={handleRecalculateClick}
-              />
+              <Tooltip title={"Recalculate"}>
+                <IconButton
+                  icon={{ component: RecalculateIcon }}
+                  onClick={handleRecalculateClick}
+                />
+              </Tooltip>
             )}
             {props.onJiraButtonClick && (
-              <JiraButton
-                onTicketInfoButtonClick={props.onJiraButtonClick}
-                ticketLink={props.jiraTicketInfo?.ticketLink}
-                isHintEnabled={props.jiraTicketInfo?.isHintEnabled}
-                spanCodeObjectId={props.jiraTicketInfo?.spanCodeObjectId}
-              />
+              <Tooltip title={"Jira ticket info"}>
+                <JiraButton
+                  onTicketInfoButtonClick={props.onJiraButtonClick}
+                  ticketLink={props.jiraTicketInfo?.ticketLink}
+                  isHintEnabled={props.jiraTicketInfo?.isHintEnabled}
+                  spanCodeObjectId={props.jiraTicketInfo?.spanCodeObjectId}
+                />
+              </Tooltip>
             )}
             {props.onPin && <IconButton icon={{ component: PinIcon }} />}
             <s.MainActions>
               {props.onGoToTrace && (
-                <Button
-                  icon={TraceIcon}
-                  label={"Trace"}
-                  onClick={() => props.onGoToTrace && props.onGoToTrace()}
-                />
+                <Tooltip title={"Open trace"}>
+                  <Button
+                    icon={TraceIcon}
+                    label={"Trace"}
+                    onClick={() => props.onGoToTrace && props.onGoToTrace()}
+                  />
+                </Tooltip>
               )}
               {props.onGoToLive && (
-                <Button
-                  icon={LiveIcon}
-                  label={"Live"}
-                  onClick={() => props.onGoToLive && props.onGoToLive()}
-                />
+                <Tooltip title={"Open live view"}>
+                  <Button
+                    icon={LiveIcon}
+                    label={"Live"}
+                    onClick={() => props.onGoToLive && props.onGoToLive()}
+                  />
+                </Tooltip>
               )}
             </s.MainActions>
           </s.Actions>
diff --git a/src/components/Insights/common/insights/DurationInsight/ReferenceLineLabel/index.tsx b/src/components/Insights/common/insights/DurationInsight/ReferenceLineLabel/index.tsx
index 3e2176f58..614f0f274 100644
--- a/src/components/Insights/common/insights/DurationInsight/ReferenceLineLabel/index.tsx
+++ b/src/components/Insights/common/insights/DurationInsight/ReferenceLineLabel/index.tsx
@@ -1,16 +1,20 @@
 import { Text } from "recharts";
 import { CartesianViewBox } from "recharts/types/util/types";
+import { useTheme } from "styled-components";
 import { isNumber } from "../../../../../../typeGuards/isNumber";
 import { isString } from "../../../../../../typeGuards/isString";
 import { DIVIDER, LABEL_HEIGHT } from "../constants";
 import { ReferenceLineLabelProps } from "./types";
 
+const LABEL_GAP = 4; // in pixels
+
 const isTextAnchor = (
   value?: string
 ): value is "start" | "end" | "middle" | "inherit" | undefined =>
   ["start", "middle", "end", "inherit", undefined].includes(value);
 
 export const ReferenceLineLabel = (props: ReferenceLineLabelProps) => {
+  const theme = useTheme();
   const labels = isString(props.value)
     ? props.value.split(DIVIDER)
     : isNumber(props.value)
@@ -36,8 +40,15 @@ export const ReferenceLineLabel = (props: ReferenceLineLabelProps) => {
           key={text}
           x={x}
           textAnchor={textAnchor || "middle"}
-          y={y + i * LABEL_HEIGHT}
-          dy={labels.length > 1 ? -LABEL_HEIGHT : undefined}
+          y={y + i * LABEL_HEIGHT - LABEL_GAP}
+          dy={
+            labels.length > 1
+              ? -((labels.length - 1) * LABEL_HEIGHT)
+              : undefined
+          }
+          fill={theme.colors.v3.stroke.secondary}
+          fontSize={theme.typographies.captionOne.fontSize}
+          lineHeight={LABEL_HEIGHT}
         >
           {text}
         </Text>
diff --git a/src/components/Insights/common/insights/DurationInsight/XAxisTick/index.tsx b/src/components/Insights/common/insights/DurationInsight/XAxisTick/index.tsx
index 24166d69d..cb65a5a89 100644
--- a/src/components/Insights/common/insights/DurationInsight/XAxisTick/index.tsx
+++ b/src/components/Insights/common/insights/DurationInsight/XAxisTick/index.tsx
@@ -1,21 +1,10 @@
 import { Text } from "recharts";
-import { DefaultTheme, useTheme } from "styled-components";
+import { useTheme } from "styled-components";
 import { DIVIDER, LABEL_HEIGHT } from "../constants";
 import { XAxisTickProps } from "./types";
 
-const getTickLabelColor = (theme: DefaultTheme) => {
-  switch (theme.mode) {
-    case "light":
-      return "#4d668a";
-    case "dark":
-    case "dark-jetbrains":
-      return "#dfe1e5";
-  }
-};
-
 export const XAxisTick = (props: XAxisTickProps) => {
   const theme = useTheme();
-  const tickLabelColor = getTickLabelColor(theme);
 
   const tick = props.ticks[props.payload.value];
   const textAnchor = tick.textAnchor || props.textAnchor;
@@ -29,7 +18,8 @@ export const XAxisTick = (props: XAxisTickProps) => {
         <Text
           {...props}
           key={text}
-          fill={tickLabelColor}
+          fill={theme.colors.v3.stroke.secondary}
+          fontSize={theme.typographies.captionOne.fontSize}
           textAnchor={textAnchor}
           y={props.y + i * LABEL_HEIGHT}
           className={"recharts-cartesian-axis-tick-value"}
diff --git a/src/components/Insights/common/insights/DurationInsight/constants.ts b/src/components/Insights/common/insights/DurationInsight/constants.ts
index d8cec5a1d..f8fa75e93 100644
--- a/src/components/Insights/common/insights/DurationInsight/constants.ts
+++ b/src/components/Insights/common/insights/DurationInsight/constants.ts
@@ -1,2 +1,2 @@
-export const LABEL_HEIGHT = 17; // in pixels
+export const LABEL_HEIGHT = 14; // in pixels ("caption1" Typography line height)
 export const DIVIDER = " | ";
diff --git a/src/components/Insights/common/insights/DurationInsight/index.tsx b/src/components/Insights/common/insights/DurationInsight/index.tsx
index 2ee0ffa20..0c487e09b 100644
--- a/src/components/Insights/common/insights/DurationInsight/index.tsx
+++ b/src/components/Insights/common/insights/DurationInsight/index.tsx
@@ -29,7 +29,7 @@ import { ColumnsContainer } from "../../InsightCard/ColumnsContainer";
 import { KeyValue } from "../../InsightCard/KeyValue";
 import { ReferenceLineLabel } from "./ReferenceLineLabel";
 import { XAxisTick } from "./XAxisTick";
-import { DIVIDER } from "./constants";
+import { DIVIDER, LABEL_HEIGHT } from "./constants";
 import * as s from "./styles";
 import { DurationInsightProps, TickData } from "./types";
 
@@ -39,10 +39,10 @@ const LAST_CALL_TIME_DISTANCE_LIMIT = 60 * 1000; // in milliseconds
 const MIN_BAR_HEIGHT = 5;
 const MAX_BAR_HEIGHT = 80;
 const BAR_WIDTH = 6;
-const MIN_X_AXIS_PADDING = 80;
+const MIN_X_AXIS_PADDING = 50;
 const MIN_CHART_CONTAINER_HEIGHT = 135;
-const CHART_Y_MARGIN = 20;
-const MIN_BAR_DISTANCE = 6; // minimum distance between the bars before moving the labels aside
+const CHART_Y_MARGIN = LABEL_HEIGHT;
+const MIN_BAR_DISTANCE = 5; // minimum distance between the bars before moving the labels aside
 
 const getBarColor = (
   theme: DefaultTheme,
@@ -128,9 +128,7 @@ const calculateBars = (
 };
 
 export const DurationInsight = (props: DurationInsightProps) => {
-  // const config = useContext(ConfigContext);
   const theme = useTheme();
-  const tickColor = theme.colors.v3.stroke.secondary;
   const { observe, width } = useDimensions();
 
   const sortedPercentiles = [...props.insight.percentiles].sort(
@@ -390,7 +388,7 @@ export const DurationInsight = (props: DurationInsightProps) => {
                   />
                   <XAxis
                     padding={{ left: XAxisPadding, right: XAxisPadding }}
-                    stroke={tickColor}
+                    stroke={theme.colors.v3.stroke.primary}
                     tick={(props) => <XAxisTick {...props} ticks={ticks} />}
                     interval={0}
                     ticks={Object.keys(ticks).map((x) => Number(x))}
@@ -403,12 +401,10 @@ export const DurationInsight = (props: DurationInsightProps) => {
                       <ReferenceLine
                         key={tickData.label}
                         x={Number(barIndex)}
-                        stroke={tickColor}
+                        stroke={theme.colors.v3.stroke.secondary}
                         strokeDasharray={"5 5"}
                         label={{
-                          position: "top",
                           value: tickData.label,
-                          fill: tickColor,
                           textAnchor: tickData.textAnchor,
                           content: ReferenceLineLabel
                         }}
diff --git a/src/components/Insights/common/insights/RequestBreakdownInsight/RequestBreakdownInsight.stories.tsx b/src/components/Insights/common/insights/RequestBreakdownInsight/RequestBreakdownInsight.stories.tsx
new file mode 100644
index 000000000..5ffb0c380
--- /dev/null
+++ b/src/components/Insights/common/insights/RequestBreakdownInsight/RequestBreakdownInsight.stories.tsx
@@ -0,0 +1,217 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { RequestBreakdownInsight } from ".";
+import {
+  ComponentType,
+  EndpointBreakdownInsight,
+  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 RequestBreakdownInsight> = {
+  title: "Insights/common/insights/RequestBreakdownInsight",
+  component: RequestBreakdownInsight,
+  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>;
+
+const data: EndpointBreakdownInsight = {
+  sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId",
+  id: "60b55792-8262-4c5d-9628-7cce7979dd6d",
+  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: "Request Breakdown",
+  type: InsightType.EndpointBreakdown,
+  category: InsightCategory.Usage,
+  specifity: 4,
+  importance: 6,
+  isRecalculateEnabled: true,
+  hasAsyncSpans: false,
+  components: [
+    {
+      type: ComponentType.Internal,
+      fraction: 0.396539483729232,
+      duration: null
+    },
+    {
+      type: ComponentType.Rendering,
+      fraction: 0.396539483729232,
+      duration: null
+    },
+    {
+      type: ComponentType.HttpClients,
+      fraction: 0.103460516270768,
+      duration: null
+    },
+    {
+      type: ComponentType.DbQueries,
+      fraction: 0.103460516270768,
+      duration: null
+    }
+  ],
+  p50Components: [
+    {
+      type: ComponentType.Internal,
+      fraction: 0.396539483729232,
+      duration: null
+    },
+    {
+      type: ComponentType.Rendering,
+      fraction: 0.396539483729232,
+      duration: null
+    },
+    {
+      type: ComponentType.HttpClients,
+      fraction: 0.103460516270768,
+      duration: null
+    },
+    {
+      type: ComponentType.DbQueries,
+      fraction: 0.103460516270768,
+      duration: null
+    }
+  ],
+  p95Components: [
+    {
+      type: ComponentType.Internal,
+      fraction: 0.103460516270768,
+      duration: null
+    },
+    {
+      type: ComponentType.Rendering,
+      fraction: 0.103460516270768,
+      duration: null
+    },
+    {
+      type: ComponentType.HttpClients,
+      fraction: 0.396539483729232,
+      duration: null
+    },
+    {
+      type: ComponentType.DbQueries,
+      fraction: 0.396539483729232,
+      duration: null
+    }
+  ],
+  scope: InsightScope.EntrySpan,
+  endpointSpan: "HTTP GET /owners/new",
+  spanCodeObjectId: "span:io.opentelemetry.tomcat-10.0$_$HTTP GET /owners/new",
+  route: "epHTTP:HTTP GET /owners/new",
+  serviceName: "PetClinic",
+  spanInfo: {
+    name: "HTTP GET /owners/new",
+    displayName: "HTTP GET /owners/new",
+    instrumentationLibrary: "io.opentelemetry.tomcat-10.0",
+    spanCodeObjectId:
+      "span:io.opentelemetry.tomcat-10.0$_$HTTP GET /owners/new",
+    methodCodeObjectId:
+      "method:org.springframework.samples.petclinic.owner.OwnerController$_$initCreationForm",
+    kind: "Server",
+    codeObjectId:
+      "org.springframework.samples.petclinic.owner.OwnerController$_$initCreationForm"
+  },
+  shortDisplayInfo: {
+    title: "Request Breakdown",
+    targetDisplayName: "",
+    subtitle: "",
+    description: ""
+  },
+  codeObjectId:
+    "org.springframework.samples.petclinic.owner.OwnerController$_$initCreationForm",
+  decorators: null,
+  environment: "SAMPLE_ENV",
+  severity: 0,
+  prefixedCodeObjectId:
+    "method:org.springframework.samples.petclinic.owner.OwnerController$_$initCreationForm",
+  customStartTime: null,
+  actualStartTime: "2023-06-30T00:00:00.000Z"
+};
+
+export const Default: Story = {
+  args: {
+    insight: data
+  }
+};
+
+export const Async: Story = {
+  args: {
+    insight: {
+      ...data,
+      components: [
+        {
+          type: ComponentType.Internal,
+          fraction: 0.996539483729232,
+          duration: {
+            value: 2.06,
+            unit: "ms",
+            raw: 2063332.9999999993
+          }
+        },
+        {
+          type: ComponentType.Rendering,
+          fraction: 0.0034605162707679665,
+          duration: {
+            value: 1.03,
+            unit: "ms",
+            raw: 1031666.4999999995
+          }
+        }
+      ],
+      p50Components: [
+        {
+          type: ComponentType.Internal,
+          fraction: 0.996539483729232,
+          duration: {
+            value: 2.06,
+            unit: "ms",
+            raw: 2063332.9999999993
+          }
+        },
+        {
+          type: ComponentType.Rendering,
+          fraction: 0.0034605162707679665,
+          duration: {
+            value: 1.03,
+            unit: "ms",
+            raw: 1031666.4999999995
+          }
+        }
+      ],
+      p95Components: [
+        {
+          type: ComponentType.Internal,
+          fraction: 0.996539483729232,
+          duration: {
+            value: 1.06,
+            unit: "ms",
+            raw: 1063332.9999999993
+          }
+        },
+        {
+          type: ComponentType.Rendering,
+          fraction: 0.0034605162707679665,
+          duration: {
+            value: 2.03,
+            unit: "ms",
+            raw: 2031666.4999999995
+          }
+        }
+      ],
+      hasAsyncSpans: true
+    }
+  }
+};
diff --git a/src/components/Insights/common/insights/RequestBreakdownInsight/index.tsx b/src/components/Insights/common/insights/RequestBreakdownInsight/index.tsx
new file mode 100644
index 000000000..0ecb0922c
--- /dev/null
+++ b/src/components/Insights/common/insights/RequestBreakdownInsight/index.tsx
@@ -0,0 +1,240 @@
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+import { useMemo, useState } from "react";
+import { Cell, Pie, PieChart } from "recharts";
+import { useTheme } from "styled-components";
+import { DefaultTheme } from "styled-components/dist/types";
+import { getDurationString } from "../../../../../utils/getDurationString";
+import { roundTo } from "../../../../../utils/roundTo";
+import { Tag } from "../../../../common/v3/Tag";
+import { Tooltip } from "../../../../common/v3/Tooltip";
+import {
+  Component,
+  ComponentType,
+  EndpointBreakdownInsight
+} from "../../../types";
+import { InsightCard } from "../../InsightCard";
+import { PercentileViewModeToggle } from "../../InsightCard/PercentileViewModeToggle";
+import * as s from "./styles";
+import { RequestBreakdownInsightProps } from "./types";
+
+const PIE_CHART_RADIUS = 50;
+const PIE_CHART_ARC_WIDTH = 4;
+
+const getComponentTypeColors = (theme: DefaultTheme) => ({
+  [ComponentType.Internal]: {
+    fill: theme.colors.v3.pieChart.brightPurpleFill,
+    stroke: theme.colors.v3.pieChart.brightPurpleStroke
+  },
+  [ComponentType.DbQueries]: {
+    fill: theme.colors.v3.pieChart.pinkFill,
+    stroke: theme.colors.v3.pieChart.pinkStroke
+  },
+  [ComponentType.HttpClients]: {
+    fill: theme.colors.v3.pieChart.brightOrangeFill,
+    stroke: theme.colors.v3.pieChart.brightOrangeStroke
+  },
+  [ComponentType.Rendering]: {
+    fill: theme.colors.v3.pieChart.azureFill,
+    stroke: theme.colors.v3.pieChart.azureStroke
+  }
+});
+
+const DEFAULT_PERCENTILE = 0.5;
+
+const getComponents = (
+  insight: EndpointBreakdownInsight,
+  percentile: number
+): Component[] | undefined => {
+  switch (percentile) {
+    case 0.5:
+      return insight.p50Components || undefined;
+    case 0.95:
+      return insight.p95Components || undefined;
+    default:
+      return undefined;
+  }
+};
+
+const sortByType = (a: Component, b: Component) =>
+  String(a.type).localeCompare(String(b.type));
+
+const columnHelper = createColumnHelper<Component>();
+
+export const RequestBreakdownInsight = (
+  props: RequestBreakdownInsightProps
+) => {
+  const theme = useTheme();
+  const componentTypeColors = getComponentTypeColors(theme);
+
+  const [percentileViewMode, setPercentileViewMode] =
+    useState<number>(DEFAULT_PERCENTILE);
+
+  const data = useMemo(() => {
+    const components =
+      getComponents(props.insight, percentileViewMode) ||
+      props.insight.components;
+
+    const sortedComponents = props.insight.hasAsyncSpans
+      ? [...components].sort((a, b) =>
+          a.duration && b.duration
+            ? a.duration.raw - b.duration.raw
+            : sortByType(a, b)
+        )
+      : [...components].sort(
+          (a, b) => b.fraction - a.fraction || sortByType(a, b)
+        );
+
+    return sortedComponents;
+  }, [props.insight, percentileViewMode]);
+
+  const handlePercentileViewModeChange = (value: number) => {
+    setPercentileViewMode(value);
+  };
+
+  const PIE_CHART_SIZE = PIE_CHART_RADIUS * 2 + PIE_CHART_ARC_WIDTH;
+  const STROKE_WIDTH = PIE_CHART_ARC_WIDTH / 2;
+
+  const renderPieChart = () => (
+    <s.ContentContainer>
+      <s.PieChartContainer>
+        <PieChart width={PIE_CHART_SIZE} height={PIE_CHART_SIZE}>
+          <Pie
+            data={data}
+            innerRadius={PIE_CHART_RADIUS - PIE_CHART_ARC_WIDTH}
+            outerRadius={PIE_CHART_RADIUS}
+            cornerRadius={PIE_CHART_ARC_WIDTH / 2}
+            strokeWidth={STROKE_WIDTH}
+            paddingAngle={4}
+            dataKey={"fraction"}
+            isAnimationActive={false}
+          >
+            {data.map((entry) => (
+              <Cell
+                key={entry.type}
+                fill={componentTypeColors[entry.type].fill}
+                stroke={componentTypeColors[entry.type].stroke}
+              />
+            ))}
+          </Pie>
+        </PieChart>
+      </s.PieChartContainer>
+      <s.Legend>
+        {data.map((x) => (
+          <s.LegendItem key={x.type}>
+            <s.LegendItemDataColorBadge
+              $colors={{
+                background: componentTypeColors[x.type].fill,
+                border: componentTypeColors[x.type].stroke
+              }}
+            />
+            <s.LegendItemDataLabel>{x.type}</s.LegendItemDataLabel>
+            <s.LegendItemDataValue>
+              {roundTo(x.fraction * 100, 2)}%
+            </s.LegendItemDataValue>
+          </s.LegendItem>
+        ))}
+      </s.Legend>
+    </s.ContentContainer>
+  );
+
+  const maxDuration = data.reduce(
+    (acc, cur) =>
+      cur.duration && cur.duration.raw > acc ? cur.duration.raw : acc,
+    0
+  );
+
+  const columns = [
+    columnHelper.accessor("type", {
+      header: "Category",
+      cell: (info) => {
+        const category = info.getValue();
+        return <s.CategoryName>{category}</s.CategoryName>;
+      }
+    }),
+    columnHelper.accessor("duration", {
+      id: "duration",
+      header: "Request Time",
+      cell: (info) => {
+        const duration = info.getValue();
+        const value = duration && maxDuration ? duration.raw / maxDuration : 0;
+        const durationString = duration ? getDurationString(duration) : "";
+
+        return (
+          <s.RequestTimeContainer>
+            <s.FractionProgressBar>
+              <s.FractionProgressBarValue $value={value} />
+            </s.FractionProgressBar>
+            {duration && (
+              <Tooltip title={durationString}>
+                <Tag type={"highlight"} content={durationString} />
+              </Tooltip>
+            )}
+          </s.RequestTimeContainer>
+        );
+      }
+    })
+  ];
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel()
+  });
+
+  const renderTable = () => (
+    <s.Table>
+      <s.TableHead>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <tr key={headerGroup.id}>
+            {headerGroup.headers.map((header) => (
+              <s.TableHeaderCell key={header.id}>
+                {header.isPlaceholder
+                  ? null
+                  : flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )}
+              </s.TableHeaderCell>
+            ))}
+          </tr>
+        ))}
+      </s.TableHead>
+      <tbody>
+        {table.getRowModel().rows.map((row) => (
+          <s.TableBodyRow key={row.id}>
+            {row.getVisibleCells().map((cell) => (
+              <s.TableBodyCell key={cell.id}>
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </s.TableBodyCell>
+            ))}
+          </s.TableBodyRow>
+        ))}
+      </tbody>
+    </s.Table>
+  );
+
+  return (
+    <InsightCard
+      insight={props.insight}
+      content={
+        <s.Container>
+          {props.insight.p50Components && props.insight.p95Components && (
+            <PercentileViewModeToggle
+              viewMode={percentileViewMode}
+              onChange={handlePercentileViewModeChange}
+            />
+          )}
+          {props.insight.hasAsyncSpans ? renderTable() : renderPieChart()}
+        </s.Container>
+      }
+      onRecalculate={props.onRecalculate}
+      onRefresh={props.onRefresh}
+      isAsync={props.insight.hasAsyncSpans}
+    />
+  );
+};
diff --git a/src/components/Insights/common/insights/RequestBreakdownInsight/styles.ts b/src/components/Insights/common/insights/RequestBreakdownInsight/styles.ts
new file mode 100644
index 000000000..01befc608
--- /dev/null
+++ b/src/components/Insights/common/insights/RequestBreakdownInsight/styles.ts
@@ -0,0 +1,134 @@
+import styled from "styled-components";
+import { caption1RegularTypography } from "../../../../common/App/typographies";
+import {
+  FractionProgressBarValueProps,
+  LegendItemDataColorBadgeProps
+} from "./types";
+
+const PROGRESS_BAR_HEIGHT = 6; // in pixels
+const PROGRESS_BAR_VALUE_HEIGHT = 2; // in pixels
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+export const ContentContainer = styled.div`
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  padding: 4px;
+`;
+
+export const PieChartContainer = styled.div`
+  padding: 3px;
+  border-radius: 50%;
+  border: 1px solid ${({ theme }) => theme.colors.v3.stroke.tertiary};
+  background: ${({ theme }) => theme.colors.v3.surface.secondary};
+`;
+
+export const Legend = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  flex-grow: 1;
+`;
+
+export const LegendItem = styled.div`
+  ${caption1RegularTypography}
+
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+export const LegendItemDataColorBadge = styled.div<LegendItemDataColorBadgeProps>`
+  height: 10px;
+  width: 10px;
+  border-radius: 1px;
+  background: ${({ $colors }) => $colors.background};
+  border: 2px solid ${({ $colors }) => $colors.border};
+  box-sizing: border-box;
+`;
+
+export const LegendItemDataLabel = styled.span`
+  color: ${({ theme }) => theme.colors.v3.text.secondary};
+`;
+
+export const LegendItemDataValue = styled.span`
+  margin-left: auto;
+  color: ${({ theme }) => theme.colors.v3.text.primary};
+`;
+
+export const Table = styled.table`
+  width: 100%;
+  border-spacing: 0 8px;
+`;
+
+export const TableHead = styled.thead`
+  color: ${({ theme }) => theme.colors.v3.text.secondary};
+`;
+
+export const TableHeaderCell = styled.th`
+  ${caption1RegularTypography}
+
+  &:first-child {
+    text-align: left;
+    padding-left: 8px;
+  }
+
+  &:last-child {
+    text-align: right;
+    padding-right: 8px;
+  }
+`;
+
+export const TableBodyRow = styled.tr`
+  background: ${({ theme }) => theme.colors.v3.surface.sidePanelHeader};
+`;
+
+export const TableBodyCell = styled.td`
+  &:first-child {
+    border-radius: 4px 0 0 4px;
+    padding: 6px 4px 6px 8px;
+  }
+
+  &:last-child {
+    border-radius: 0 4px 4px 0;
+    width: 100%;
+    padding: 6px 4px;
+  }
+`;
+
+export const CategoryName = styled.span`
+  ${caption1RegularTypography}
+  color: ${({ theme }) => theme.colors.v3.text.primary};
+  display: flex;
+  white-space: nowrap;
+`;
+
+export const RequestTimeContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+export const FractionProgressBar = styled.div`
+  height: ${PROGRESS_BAR_HEIGHT}px;
+  border-radius: ${PROGRESS_BAR_HEIGHT / 2}px;
+  flex-grow: 1;
+  position: relative;
+  background: ${({ theme }) => theme.colors.v3.surface.highlight};
+  padding: 2px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+`;
+
+export const FractionProgressBarValue = styled.div<FractionProgressBarValueProps>`
+  width: ${({ $value }) => Math.floor($value * 100)}%;
+  height: ${PROGRESS_BAR_VALUE_HEIGHT}px;
+  border-radius: ${PROGRESS_BAR_VALUE_HEIGHT / 2}px;
+  background: ${({ theme }) => theme.colors.v3.text.secondary};
+`;
diff --git a/src/components/Insights/common/insights/RequestBreakdownInsight/types.ts b/src/components/Insights/common/insights/RequestBreakdownInsight/types.ts
new file mode 100644
index 000000000..4f21d83b5
--- /dev/null
+++ b/src/components/Insights/common/insights/RequestBreakdownInsight/types.ts
@@ -0,0 +1,16 @@
+import { EndpointBreakdownInsight, InsightProps } from "../../../types";
+
+export interface RequestBreakdownInsightProps extends InsightProps {
+  insight: EndpointBreakdownInsight;
+}
+
+export interface LegendItemDataColorBadgeProps {
+  $colors: {
+    background: string;
+    border: string;
+  };
+}
+
+export interface FractionProgressBarValueProps {
+  $value: number;
+}
diff --git a/src/components/common/App/themes/darkTheme.ts b/src/components/common/App/themes/darkTheme.ts
index 4c2c9b1f4..3ed52c6ee 100644
--- a/src/components/common/App/themes/darkTheme.ts
+++ b/src/components/common/App/themes/darkTheme.ts
@@ -233,7 +233,9 @@ export const darkTheme: ThemeColors = {
       secondary: v3colors.gray[1500],
       brandPrimary: v3colors.primary[500],
       brandSecondary: v3colors.primary[300],
+      brandTertiary: v3colors.primary[400],
       brandDark: v3colors.primary[900],
+      brandDarkest: v3colors.primary[1000],
       sidePanelHeader: v3colors.gray[1200]
     },
     text: {
diff --git a/src/components/common/App/themes/lightTheme.ts b/src/components/common/App/themes/lightTheme.ts
index 19347bd47..ba3b4ccfc 100644
--- a/src/components/common/App/themes/lightTheme.ts
+++ b/src/components/common/App/themes/lightTheme.ts
@@ -231,7 +231,9 @@ export const lightTheme: ThemeColors = {
       secondary: v3colors.gray[0],
       brandPrimary: v3colors.primary[500],
       brandSecondary: v3colors.primary[300],
+      brandTertiary: v3colors.primary[400],
       brandDark: v3colors.primary[150],
+      brandDarkest: v3colors.primary[100],
       sidePanelHeader: v3colors.gray[300]
     },
     text: {
diff --git a/src/components/common/v3/Button/styles.ts b/src/components/common/v3/Button/styles.ts
index 99384e709..fb1c32a21 100644
--- a/src/components/common/v3/Button/styles.ts
+++ b/src/components/common/v3/Button/styles.ts
@@ -1,5 +1,4 @@
 import styled, { css } from "styled-components";
-import { v3colors } from "../../App/v3colors";
 import { ButtonElementProps } from "./types";
 
 export const Button = styled.button<ButtonElementProps>`
@@ -22,7 +21,7 @@ export const Button = styled.button<ButtonElementProps>`
         return theme.colors.v3.surface.primary;
       case "primary":
       default:
-        return v3colors.primary[400];
+        return theme.colors.v3.surface.brandTertiary;
     }
   }};
 
@@ -96,7 +95,7 @@ export const Button = styled.button<ButtonElementProps>`
           return theme.colors.v3.surface.brandDark;
         case "primary":
         default:
-          return v3colors.primary[300];
+          return theme.colors.v3.surface.secondary;
       }
     }};
     border: 1px solid
@@ -108,7 +107,7 @@ export const Button = styled.button<ButtonElementProps>`
             return theme.colors.v3.stroke.primary;
           case "primary":
           default:
-            return v3colors.primary[300];
+            return theme.colors.v3.surface.secondary;
         }
       }};
 
@@ -139,7 +138,7 @@ export const Button = styled.button<ButtonElementProps>`
           return theme.colors.v3.surface.primary;
         case "primary":
         default:
-          return v3colors.primary[500];
+          return theme.colors.v3.surface.primary;
       }
     }};
     border: 1px solid
@@ -151,7 +150,7 @@ export const Button = styled.button<ButtonElementProps>`
             return theme.colors.v3.stroke.primary;
           case "primary":
           default:
-            return v3colors.primary[300];
+            return theme.colors.v3.surface.secondary;
         }
       }};
 
diff --git a/src/components/common/v3/Toggle/index.tsx b/src/components/common/v3/Toggle/index.tsx
new file mode 100644
index 000000000..fa321afbe
--- /dev/null
+++ b/src/components/common/v3/Toggle/index.tsx
@@ -0,0 +1,22 @@
+import * as s from "./styles";
+import { ToggleProps, ToggleValue } from "./types";
+
+export const Toggle = <T extends ToggleValue>(props: ToggleProps<T>) => {
+  const handleOptionButtonClick = (value: T) => {
+    props.onValueChange(value);
+  };
+
+  return (
+    <s.Container>
+      {props.options.map((option) => (
+        <s.OptionButton
+          key={option.value}
+          $selected={props.value === option.value}
+          onClick={() => handleOptionButtonClick(option.value)}
+        >
+          {option.label}
+        </s.OptionButton>
+      ))}
+    </s.Container>
+  );
+};
diff --git a/src/components/common/v3/Toggle/styles.ts b/src/components/common/v3/Toggle/styles.ts
new file mode 100644
index 000000000..ddd4ccb5e
--- /dev/null
+++ b/src/components/common/v3/Toggle/styles.ts
@@ -0,0 +1,29 @@
+import styled from "styled-components";
+import { footnoteRegularTypography } from "../../App/typographies";
+import { OptionButtonProps } from "./types";
+
+export const Container = styled.div`
+  display: flex;
+  border-radius: 4px;
+  padding: 3px;
+  gap: 4px;
+  width: fit-content;
+  border: 1px solid ${({ theme }) => theme.colors.v3.stroke.tertiary};
+  background: ${({ theme }) => theme.colors.v3.surface.secondary};
+`;
+
+export const OptionButton = styled.button<OptionButtonProps>`
+  ${footnoteRegularTypography}
+
+  font-family: inherit;
+  border: none;
+  outline: none;
+  border-radius: 4px;
+  padding: 2px 4px;
+  cursor: pointer;
+  user-select: none;
+  color: ${({ theme, $selected }) =>
+    $selected ? theme.colors.v3.text.white : theme.colors.v3.text.primary};
+  background: ${({ theme, $selected }) =>
+    $selected ? theme.colors.v3.surface.brandTertiary : "transparent"};
+`;
diff --git a/src/components/common/v3/Toggle/types.ts b/src/components/common/v3/Toggle/types.ts
new file mode 100644
index 000000000..bd726acb1
--- /dev/null
+++ b/src/components/common/v3/Toggle/types.ts
@@ -0,0 +1,16 @@
+export type ToggleValue = string | number;
+
+export interface ToggleOption<T> {
+  value: T;
+  label: string;
+}
+
+export interface ToggleProps<T> {
+  options: ToggleOption<T>[];
+  onValueChange: (value: T) => void;
+  value: T;
+}
+
+export interface OptionButtonProps {
+  $selected: boolean;
+}
diff --git a/src/styled.d.ts b/src/styled.d.ts
index dbca0ba82..786de5a05 100644
--- a/src/styled.d.ts
+++ b/src/styled.d.ts
@@ -70,7 +70,9 @@ export interface ThemeColors {
       secondary: string;
       brandPrimary: string;
       brandSecondary: string;
+      brandTertiary: string;
       brandDark: string;
+      brandDarkest: string;
       sidePanelHeader: string;
     };
     text: {
@@ -91,7 +93,6 @@ export interface ThemeColors {
       brandSecondary: string;
     };
     icon: {
-      white: string;
       primary: string;
       secondary: string;
       tertiary: string;
@@ -99,6 +100,7 @@ export interface ThemeColors {
       brandPrimary: string;
       brandSecondary: string;
       brandTertiary: string;
+      white: string;
     };
     status: {
       backgroundHigh: string;
@@ -110,11 +112,6 @@ export interface ThemeColors {
       backgroundSuccess: string;
       success: string;
     };
-    barChart: {
-      pink: string;
-      purple: string;
-      blue: string;
-    };
     pieChart: {
       pinkFill: string;
       pinkStroke: string;
@@ -125,6 +122,11 @@ export interface ThemeColors {
       brightOrangeFill: string;
       brightOrangeStroke: string;
     };
+    barChart: {
+      pink: string;
+      purple: string;
+      blue: string;
+    };
   };
 }