diff --git a/src/components/Insights/common/InsightCard/ColumnsContainer/styles.ts b/src/components/Insights/common/InsightCard/ColumnsContainer/styles.ts index fa0703a9b..32152c8b4 100644 --- a/src/components/Insights/common/InsightCard/ColumnsContainer/styles.ts +++ b/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; diff --git a/src/components/Insights/common/InsightCard/index.tsx b/src/components/Insights/common/InsightCard/index.tsx index 663691097..060671e2f 100644 --- a/src/components/Insights/common/InsightCard/index.tsx +++ b/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={ -