From bba7a1af8fe4c425b80a5163cfc0d093fc8ee51d Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Mon, 4 Mar 2024 17:37:00 +0100
Subject: [PATCH] Add description to empty Duration insight

---
 .../Insights/common/insights/DurationInsight/index.tsx      | 5 +++++
 .../Insights/common/insights/DurationInsight/styles.ts      | 5 +++++
 .../Insights/common/insights/SlowEndpointInsight/index.tsx  | 6 ++----
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/Insights/common/insights/DurationInsight/index.tsx b/src/components/Insights/common/insights/DurationInsight/index.tsx
index 464ae4b7b..9c983dfa9 100644
--- a/src/components/Insights/common/insights/DurationInsight/index.tsx
+++ b/src/components/Insights/common/insights/DurationInsight/index.tsx
@@ -265,6 +265,11 @@ export const DurationInsight = (props: DurationInsightProps) => {
       content={
         <s.Container>
           <ColumnsContainer>
+            {!props.insight.histogramPlot && (
+              <s.DescriptionColumn label={"Description"}>
+                Trigger more actions to see the full duration analysis
+              </s.DescriptionColumn>
+            )}
             {spanLastCall && (
               <KeyValue label={"Last call"}>
                 <CommonTooltip
diff --git a/src/components/Insights/common/insights/DurationInsight/styles.ts b/src/components/Insights/common/insights/DurationInsight/styles.ts
index 67ac5cc64..66fd61ca9 100644
--- a/src/components/Insights/common/insights/DurationInsight/styles.ts
+++ b/src/components/Insights/common/insights/DurationInsight/styles.ts
@@ -1,5 +1,6 @@
 import styled from "styled-components";
 import { footnoteRegularTypography } from "../../../../common/App/typographies";
+import { KeyValue } from "../../InsightCard/KeyValue";
 import { ChartContainerProps } from "./types";
 
 export const Container = styled.div`
@@ -8,6 +9,10 @@ export const Container = styled.div`
   gap: 8px;
 `;
 
+export const DescriptionColumn = styled(KeyValue)`
+  flex-grow: 2;
+`;
+
 export const ChartContainer = styled.div<ChartContainerProps>`
   width: 100%;
   height: ${({ $height }) => $height}px;
diff --git a/src/components/Insights/common/insights/SlowEndpointInsight/index.tsx b/src/components/Insights/common/insights/SlowEndpointInsight/index.tsx
index a9d49bdb7..96750140b 100644
--- a/src/components/Insights/common/insights/SlowEndpointInsight/index.tsx
+++ b/src/components/Insights/common/insights/SlowEndpointInsight/index.tsx
@@ -20,10 +20,8 @@ export const SlowEndpointInsight = (props: SlowEndpointInsightProps) => {
         <s.ContentContainer>
           <ColumnsContainer>
             <s.DescriptionColumn label={"Description"}>
-              {`On average requests are slower than other endpoints by ${roundTo(
-                diff,
-                2
-              )}%`}
+              On average requests are slower than other endpoints by{" "}
+              {roundTo(diff, 2)}%
             </s.DescriptionColumn>
             <KeyValue label={"Slower by"}>
               <Tag content={getDurationString(props.insight.median)} />