diff --git a/src/components/Insights/BottleneckInsight/mockData.ts b/src/components/Insights/BottleneckInsight/mockData.ts index 76eb46472..5f4622257 100644 --- a/src/components/Insights/BottleneckInsight/mockData.ts +++ b/src/components/Insights/BottleneckInsight/mockData.ts @@ -43,6 +43,7 @@ export const mockedBottleneckInsight: SpanEndpointBottleneckInsight = { "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/lock/{milisec}", spanName: "HTTP GET SampleInsights/lock/{milisec}" }, + traceId: "traceId", probabilityOfBeingBottleneck: 0.36877828054298645, avgFractionWhenBeingBottleneck: 50, avgDurationWhenBeingBottleneck: { diff --git a/src/components/Insights/ExcessiveAPICallsInsight/index.tsx b/src/components/Insights/ExcessiveAPICallsInsight/index.tsx index a4addf574..45e05ddfe 100644 --- a/src/components/Insights/ExcessiveAPICallsInsight/index.tsx +++ b/src/components/Insights/ExcessiveAPICallsInsight/index.tsx @@ -62,7 +62,7 @@ export const ExcessiveAPICallsInsight = ( {config.isJaegerEnabled && traceId && ( - + diff --git a/src/components/Insights/InsightsCatalog/index.tsx b/src/components/Insights/InsightsCatalog/index.tsx index 2a678d7dc..697ec7b88 100644 --- a/src/components/Insights/InsightsCatalog/index.tsx +++ b/src/components/Insights/InsightsCatalog/index.tsx @@ -13,6 +13,7 @@ import * as s from "./styles"; import { InsightsCatalogProps, SORTING_CRITERION } from "./types"; const PAGE_SIZE = 10; + export const InsightsCatalog = (props: InsightsCatalogProps) => { const { insights, onJiraTicketCreate, defaultQuery, totalCount } = props; const [page, setPage] = useState(0); diff --git a/src/components/Insights/InsightsPage/index.tsx b/src/components/Insights/InsightsPage/index.tsx index 9dbf34754..fdc60d9ad 100644 --- a/src/components/Insights/InsightsPage/index.tsx +++ b/src/components/Insights/InsightsPage/index.tsx @@ -251,6 +251,7 @@ const renderInsightCard = ( onJiraTicketCreate={onJiraTicketCreate} isJiraHintEnabled={isJiraHintEnabled} onGoToSpan={handleGoToSpan} + onTraceButtonClick={handleTraceButtonClick} /> ); } @@ -266,6 +267,7 @@ const renderInsightCard = ( onJiraTicketCreate={onJiraTicketCreate} isJiraHintEnabled={isJiraHintEnabled} onGoToSpan={handleGoToSpan} + onTraceButtonClick={handleTraceButtonClick} /> ); } diff --git a/src/components/Insights/common/InsightCard/index.tsx b/src/components/Insights/common/InsightCard/index.tsx index bd8932fc8..ba112773d 100644 --- a/src/components/Insights/common/InsightCard/index.tsx +++ b/src/components/Insights/common/InsightCard/index.tsx @@ -1,7 +1,6 @@ import React, { useState } from "react"; import { isString } from "../../../../typeGuards/isString"; import { formatTimeDistance } from "../../../../utils/formatTimeDistance"; -import { Link } from "../../../common/Link"; import { TraceIcon } from "../../../common/icons/12px/TraceIcon"; import { HistogramIcon } from "../../../common/icons/16px/HistogramIcon"; import { LiveIcon } from "../../../common/icons/16px/LiveIcon"; @@ -11,6 +10,7 @@ import { Button } from "../../../common/v3/Button"; import { BaseButtonProps } from "../../../common/v3/Button/types"; import { Card } from "../../../common/v3/Card"; import { JiraButton } from "../../../common/v3/JiraButton"; +import { Link } from "../../../common/v3/Link"; import { Tooltip } from "../../../common/v3/Tooltip"; import { isSpanInsight } from "../../typeGuards"; import { InsightHeader } from "./InsightHeader"; diff --git a/src/components/Insights/common/InsightCard/styles.ts b/src/components/Insights/common/InsightCard/styles.ts index 9a55b1e94..3b60c5b85 100644 --- a/src/components/Insights/common/InsightCard/styles.ts +++ b/src/components/Insights/common/InsightCard/styles.ts @@ -1,4 +1,5 @@ import styled from "styled-components"; +import { subscriptRegularTypography } from "../../../common/App/typographies"; export const InsightFooter = styled.div` display: flex; @@ -8,9 +9,10 @@ export const InsightFooter = styled.div` `; export const Description = styled.div` + ${subscriptRegularTypography} + display: flex; gap: 8px; - font-size: 13px; color: ${({ theme }) => theme.colors.v3.text.secondary}; `; diff --git a/src/components/Insights/common/insights/DurationInsight/DurationInsight.stories.tsx b/src/components/Insights/common/insights/DurationInsight/DurationInsight.stories.tsx index a13c58041..9802bc9dc 100644 --- a/src/components/Insights/common/insights/DurationInsight/DurationInsight.stories.tsx +++ b/src/components/Insights/common/insights/DurationInsight/DurationInsight.stories.tsx @@ -5280,110 +5280,3 @@ export const HistogramWithAFewBars: Story = { } } }; - -// TODO: fix this case -export const EmptyStateBug: Story = { - args: { - insight: { - sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", - id: "60b55792-8262-4c5d-9628-7cce7979ad6d", - name: "Performance Stats", - type: InsightType.SpanDurations, - category: InsightCategory.Performance, - specifity: 4, - isRecalculateEnabled: true, - spanCodeObjectId: - "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/HttpCall", - span: { - name: "HTTP GET SampleInsights/HttpCall", - displayName: "HTTP GET SampleInsights/HttpCall", - instrumentationLibrary: "OpenTelemetry.Instrumentation.AspNetCore", - spanCodeObjectId: - "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/HttpCall", - methodCodeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$HttpCall", - kind: "Server", - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$HttpCall" - }, - percentiles: [ - { - percentile: 0.5, - currentDuration: { - value: 426.62, - unit: "ms", - raw: 426615000 - }, - previousDuration: null, - changeTime: null, - changeVerified: null, - traceIds: [] - }, - { - percentile: 0.95, - currentDuration: { - value: 426.62, - unit: "ms", - raw: 426615000 - }, - previousDuration: null, - changeTime: null, - changeVerified: null, - traceIds: [] - } - ], - lastSpanInstanceInfo: null, - histogramPlot: null, - average: { - value: 0, - unit: "ns", - raw: 0 - }, - standardDeviation: { - value: 0, - unit: "ns", - raw: 0 - }, - isAsync: false, - scope: InsightScope.Span, - spanInfo: { - name: "HTTP GET SampleInsights/HttpCall", - displayName: "HTTP GET SampleInsights/HttpCall", - instrumentationLibrary: "OpenTelemetry.Instrumentation.AspNetCore", - spanCodeObjectId: - "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/HttpCall", - methodCodeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$HttpCall", - kind: "Server", - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$HttpCall" - }, - shortDisplayInfo: { - title: "", - targetDisplayName: "", - subtitle: "", - description: "" - }, - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$HttpCall", - decorators: [], - environment: "DOTNET#ID#1", - importance: 5, - severity: 0, - impact: 0, - criticality: 0, - reopenCount: 0, - ticketLink: null, - prefixedCodeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$HttpCall", - customStartTime: null, - actualStartTime: "0001-01-01T00:00:00", - firstCommitId: null, - lastCommitId: null, - deactivatedCommitId: null, - firstDetected: "2024-02-15T12:37:29.929835Z", - lastDetected: "2024-02-15T12:37:29.929835Z" - // flags: [] - } - } -}; diff --git a/src/components/Insights/common/insights/DurationInsight/constants.ts b/src/components/Insights/common/insights/DurationInsight/constants.ts index f8fa75e93..d1473fba1 100644 --- a/src/components/Insights/common/insights/DurationInsight/constants.ts +++ b/src/components/Insights/common/insights/DurationInsight/constants.ts @@ -1,2 +1,4 @@ -export const LABEL_HEIGHT = 14; // in pixels ("caption1" Typography line height) +import { typographies } from "../../../../common/App/typographies"; + +export const LABEL_HEIGHT = typographies.captionOne.lineHeight; export const DIVIDER = " | "; diff --git a/src/components/Insights/common/insights/EndpointBottleneckInsight/index.tsx b/src/components/Insights/common/insights/EndpointBottleneckInsight/index.tsx index 2c24cfafa..41ab2362f 100644 --- a/src/components/Insights/common/insights/EndpointBottleneckInsight/index.tsx +++ b/src/components/Insights/common/insights/EndpointBottleneckInsight/index.tsx @@ -30,6 +30,16 @@ export const EndpointBottleneckInsight = ( props.onJiraTicketCreate(insight, spanCodeObjectId, event); }; + const handleTraceButtonClick = () => { + if (span.traceId) { + props.onTraceButtonClick( + { id: span.traceId, name: span.spanInfo.name }, + insight.type, + insight.span.spanInfo.spanCodeObjectId + ); + } + }; + const spanName = span.spanInfo.displayName; const spanCodeObjectId = span.spanInfo.spanCodeObjectId; @@ -75,6 +85,7 @@ export const EndpointBottleneckInsight = ( onRefresh={props.onRefresh} onJiraButtonClick={handleTicketInfoButtonClick} onGoToSpan={props.onGoToSpan} + onGoToTrace={span.traceId ? handleTraceButtonClick : undefined} /> ); }; diff --git a/src/components/Insights/common/insights/EndpointBottleneckInsight/mockData.ts b/src/components/Insights/common/insights/EndpointBottleneckInsight/mockData.ts index 1a6c8dad8..35ddea927 100644 --- a/src/components/Insights/common/insights/EndpointBottleneckInsight/mockData.ts +++ b/src/components/Insights/common/insights/EndpointBottleneckInsight/mockData.ts @@ -23,6 +23,7 @@ export const mockedSpanBottleneckInsight: EndpointBottleneckInsight = { specifity: 3, importance: 2, span: { + traceId: "traceId", spanInfo: { name: "DelayAsync", displayName: "DelayAsync", diff --git a/src/components/Insights/common/insights/EndpointBottleneckInsight/types.ts b/src/components/Insights/common/insights/EndpointBottleneckInsight/types.ts index ae9b728ed..f1a1391dd 100644 --- a/src/components/Insights/common/insights/EndpointBottleneckInsight/types.ts +++ b/src/components/Insights/common/insights/EndpointBottleneckInsight/types.ts @@ -1,7 +1,8 @@ import { EndpointBottleneckInsight, InsightProps, - InsightType + InsightType, + Trace } from "../../../types"; export interface EndpointBottleneckInsightProps extends InsightProps { @@ -10,4 +11,9 @@ export interface EndpointBottleneckInsightProps extends InsightProps { spanCodeObjectId: string, insightType: InsightType ) => void; + onTraceButtonClick: ( + trace: Trace, + insightType: InsightType, + spanCodeObjectId?: string + ) => void; } diff --git a/src/components/Insights/common/insights/ExcessiveAPICallsInsight/index.tsx b/src/components/Insights/common/insights/ExcessiveAPICallsInsight/index.tsx index 2e4b2fc40..b44722591 100644 --- a/src/components/Insights/common/insights/ExcessiveAPICallsInsight/index.tsx +++ b/src/components/Insights/common/insights/ExcessiveAPICallsInsight/index.tsx @@ -57,7 +57,7 @@ export const ExcessiveAPICallsInsight = ( onClick={() => handleLinkClick(spanCodeObjectId)} buttons={[ config.isJaegerEnabled && traceId && ( - +