Add Duration insight

src/components/Insights/common/InsightCard/ColumnsContainer/styles.ts

@@ -2,7 +2,7 @@ import styled from "styled-components";
 
 export const Container = styled.div`
   display: flex;
-  gap: 8px;
+  gap: 24px;
   justify-content: space-between;
   flex-grow: 1;
 

src/components/Insights/common/InsightCard/index.tsx

@@ -7,11 +7,11 @@ import { HistogramIcon } from "../../../common/icons/16px/HistogramIcon";
 import { LiveIcon } from "../../../common/icons/16px/LiveIcon";
 import { PinIcon } from "../../../common/icons/16px/PinIcon";
 import { RecalculateIcon } from "../../../common/icons/16px/RecalculateIcon";
-import { CrossIcon } from "../../../common/icons/CrossIcon";
 import { Button } from "../../../common/v3/Button";
 import { Card } from "../../../common/v3/Card";
 import { JiraButton } from "../../../common/v3/JiraButton";
 import { Tooltip } from "../../../common/v3/Tooltip";
+import { isSpanInsight } from "../../typeGuards";
 import { IconButton } from "./IconButton";
 import { InsightHeader } from "./InsightHeader";
 import * as s from "./styles";
@@ -35,6 +35,18 @@ export const InsightCard = (props: InsightCardProps) => {
     setIsRecalculatingStarted(true);
   };
 
+  const handleHistogramButtonClick = () => {
+    isSpanInsight(props.insight) &&
+      props.insight.spanInfo &&
+      props.onOpenHistogram &&
+      props.onOpenHistogram(
+        props.insight.spanInfo.instrumentationLibrary,
+        props.insight.spanInfo.name,
+        props.insight.type,
+        props.insight.spanInfo.displayName
+      );
+  };
+
   const renderRecalculationBlock = (
     actualStartTime: string,
     customStartTime: string | null,
@@ -107,10 +119,13 @@ export const InsightCard = (props: InsightCardProps) => {
       }
       footer={
         <s.InsightFooter>
-          <Button icon={CrossIcon} label="Dismiss" buttonType="tertiary" />
+          {/* <Button icon={CrossIcon} label={"Dismiss"} buttonType={"tertiary"} /> */}
           <s.Actions>
             {props.onOpenHistogram && (
-              <IconButton icon={{ component: HistogramIcon }} />
+              <IconButton
+                icon={{ component: HistogramIcon }}
+                onClick={handleHistogramButtonClick}
+              />
             )}
             {props.onRecalculate && (
               <IconButton

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

@@ -19,6 +19,7 @@ export const RefreshContainer = styled.div`
 `;
 
 export const Actions = styled.div`
+  margin-left: auto;
   display: flex;
 `;
 

src/components/Insights/common/InsightCard/types.ts

@@ -9,8 +9,10 @@ export interface InsightCardProps {
   isActive?: boolean;
   onDismiss?: (insightId: string) => void;
   onOpenHistogram?: (
+    instrumentationLibrary: string,
+    name: string,
     insightType: InsightType,
-    spanCodeObjectId: string
+    displayName: string
   ) => void;
   onRecalculate?: (
     prefixedCodeObjectId: string,