diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointSpanNPlusOneHighlightCard/mockData.ts b/src/components/Highlights/TopIssues/highlightCards/EndpointSpanNPlusOneHighlightCard/mockData.ts index c953427d8..ad36c2963 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointSpanNPlusOneHighlightCard/mockData.ts +++ b/src/components/Highlights/TopIssues/highlightCards/EndpointSpanNPlusOneHighlightCard/mockData.ts @@ -19,7 +19,7 @@ export const mockedEndpointSpanNPlusOneMetrics: EndpointSpanNPlusOneMetrics = [ export const mockedEndpointSpanNPlusOneHighlightData: HighlightData = { - insightType: InsightType.EndpointSpanNPlusOneV2, + insightType: InsightType.EndpointSpanNPlusOne, asset: { name: "spanName", displayName: "displayName", diff --git a/src/components/Highlights/TopIssues/highlightCards/SpaNPlusOneHighlightCard/mockData.ts b/src/components/Highlights/TopIssues/highlightCards/SpaNPlusOneHighlightCard/mockData.ts index e9e9c3544..3ee3b8992 100644 --- a/src/components/Highlights/TopIssues/highlightCards/SpaNPlusOneHighlightCard/mockData.ts +++ b/src/components/Highlights/TopIssues/highlightCards/SpaNPlusOneHighlightCard/mockData.ts @@ -20,7 +20,7 @@ export const mockedSpaNPlusOneInsights: SpaNPlusOneMetrics = [ export const mockedSpaNPlusOneHighlightData: HighlightData = { - insightType: InsightType.SpanNPlusOne, + insightType: InsightType.SpaNPlusOne, asset: { name: "spanName", displayName: "displayName", diff --git a/src/components/Highlights/TopIssues/highlightCards/SpanScalingHighlightCard/mockData.ts b/src/components/Highlights/TopIssues/highlightCards/SpanScalingHighlightCard/mockData.ts index 34fc17e56..64dac789e 100644 --- a/src/components/Highlights/TopIssues/highlightCards/SpanScalingHighlightCard/mockData.ts +++ b/src/components/Highlights/TopIssues/highlightCards/SpanScalingHighlightCard/mockData.ts @@ -10,7 +10,7 @@ export const mockedSpanScalingMetrics: SpanScalingMetrics = [ export const mockedSpanScalingHighlightData: HighlightData = { - insightType: InsightType.SpanScalingBadly, + insightType: InsightType.SpanScaling, asset: { name: "spanName", displayName: "displayName", diff --git a/src/components/Highlights/TopIssues/typeGuards.ts b/src/components/Highlights/TopIssues/typeGuards.ts index a969491e6..169410a4c 100644 --- a/src/components/Highlights/TopIssues/typeGuards.ts +++ b/src/components/Highlights/TopIssues/typeGuards.ts @@ -64,7 +64,7 @@ export const isEndpointSpanNPlusOneHighlight = ( export const isSpaNPlusOneHighlight = ( highlight: HighlightData ): highlight is HighlightData => - highlight.insightType === InsightType.SpanNPlusOne; + highlight.insightType === InsightType.SpaNPlusOne; export const isHotSpotHighlight = ( highlight: HighlightData @@ -74,4 +74,4 @@ export const isHotSpotHighlight = ( export const isSpanScalingHighlight = ( highlight: HighlightData ): highlight is HighlightData => - highlight.insightType === InsightType.SpanScalingBadly; + highlight.insightType === InsightType.SpanScaling; diff --git a/src/components/Highlights/common/TableInsightStatusBadge/index.tsx b/src/components/Highlights/common/TableInsightStatusBadge/index.tsx index d2a88231f..a2414c598 100644 --- a/src/components/Highlights/common/TableInsightStatusBadge/index.tsx +++ b/src/components/Highlights/common/TableInsightStatusBadge/index.tsx @@ -1,5 +1,5 @@ import { useTheme } from "styled-components"; -import { getInsightStatusInfo } from "../../../Insights/common/InsightCard/InsightHeader/InsightStatusBadge/getInsightStatusInfo"; +import { getInsightStatusInfo } from "../../../Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge/getInsightStatusInfo"; import { Tooltip } from "../../../common/v3/Tooltip"; import * as s from "./styles"; import { TableInsightStatusBadgeProps } from "./types"; diff --git a/src/components/Highlights/common/TableInsightStatusBadge/styles.ts b/src/components/Highlights/common/TableInsightStatusBadge/styles.ts index 013caefd2..76b400386 100644 --- a/src/components/Highlights/common/TableInsightStatusBadge/styles.ts +++ b/src/components/Highlights/common/TableInsightStatusBadge/styles.ts @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { InsightStatusBadge } from "../../../Insights/common/InsightCard/InsightHeader/InsightStatusBadge"; +import { InsightStatusBadge } from "../../../Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge"; export const Badge = styled(InsightStatusBadge)` font-size: inherit; diff --git a/src/components/Insights/BottleneckInsight/types.ts b/src/components/Insights/BottleneckInsight/types.ts deleted file mode 100644 index 992367ea2..000000000 --- a/src/components/Insights/BottleneckInsight/types.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { InsightType } from "../../../types"; -import { InsightProps, SpanEndpointBottleneckInsight } from "../types"; - -export interface BottleneckInsightProps extends InsightProps { - insight: SpanEndpointBottleneckInsight; - onAssetLinkClick: ( - spanCodeObjectId: string, - insightType: InsightType - ) => void; -} diff --git a/src/components/Insights/DurationBreakdownInsight/types.ts b/src/components/Insights/DurationBreakdownInsight/types.ts deleted file mode 100644 index c773d0240..000000000 --- a/src/components/Insights/DurationBreakdownInsight/types.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { InsightType } from "../../../types"; -import { InsightProps, SpanDurationBreakdownInsight } from "../types"; - -export interface DurationBreakdownInsightProps extends InsightProps { - insight: SpanDurationBreakdownInsight; - onAssetLinkClick: ( - spanCodeObjectId: string, - insightType: InsightType - ) => void; -} diff --git a/src/components/Insights/DurationSlowdownSourceInsight/types.ts b/src/components/Insights/DurationSlowdownSourceInsight/types.ts deleted file mode 100644 index c973e2082..000000000 --- a/src/components/Insights/DurationSlowdownSourceInsight/types.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { InsightType } from "../../../types"; -import { EndpointDurationSlowdownInsight, InsightProps } from "../types"; - -export interface DurationSlowdownSourceInsightProps extends InsightProps { - insight: EndpointDurationSlowdownInsight; - onAssetLinkClick: ( - spanCodeObjectId: string, - insightType: InsightType - ) => void; -} diff --git a/src/components/Insights/EndpointNPlusOneInsight/types.ts b/src/components/Insights/EndpointNPlusOneInsight/types.ts deleted file mode 100644 index 46dd77875..000000000 --- a/src/components/Insights/EndpointNPlusOneInsight/types.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { InsightType } from "../../../types"; -import { - EndpointSuspectedNPlusOneInsight, - InsightProps, - Trace -} from "../types"; - -export interface EndpointNPlusOneInsightProps extends InsightProps { - insight: EndpointSuspectedNPlusOneInsight; - onAssetLinkClick: ( - spanCodeObjectId: string, - insightType: InsightType - ) => void; - onTraceButtonClick: ( - trace: Trace, - insightType: InsightType, - spanCodeObjectId: string - ) => void; -} diff --git a/src/components/Insights/EndpointQueryOptimizationInsight/types.ts b/src/components/Insights/EndpointQueryOptimizationInsight/types.ts deleted file mode 100644 index d92e8bac8..000000000 --- a/src/components/Insights/EndpointQueryOptimizationInsight/types.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { InsightType } from "../../../types"; -import { - EndpointQueryOptimizationInsight, - InsightProps, - Trace -} from "../types"; - -export interface EndpointQueryOptimizationInsightProps extends InsightProps { - insight: EndpointQueryOptimizationInsight; - onAssetLinkClick: ( - spanCodeObjectId: string, - insightType: InsightType - ) => void; - onTraceButtonClick: ( - trace: Trace, - insightType: InsightType, - spanCodeObjectId: string - ) => void; -} diff --git a/src/components/Insights/ErrorsInsight/types.ts b/src/components/Insights/ErrorsInsight/types.ts deleted file mode 100644 index 797b6fe53..000000000 --- a/src/components/Insights/ErrorsInsight/types.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { InsightType } from "../../../types"; -import { CodeObjectErrorsInsight, InsightProps } from "../types"; - -export interface ErrorsInsightProps extends InsightProps { - insight: CodeObjectErrorsInsight; - onErrorSelect: (id: string, insightType: InsightType) => void; - onExpandButtonClick: () => void; -} diff --git a/src/components/Insights/ExcessiveAPICallsInsight/types.ts b/src/components/Insights/ExcessiveAPICallsInsight/types.ts deleted file mode 100644 index 70330cac8..000000000 --- a/src/components/Insights/ExcessiveAPICallsInsight/types.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { InsightType } from "../../../types"; -import { ChattyApiEndpointInsight, InsightProps, Trace } from "../types"; - -export interface ExcessiveAPICallsInsightProps extends InsightProps { - insight: ChattyApiEndpointInsight; - onAssetLinkClick: ( - spanCodeObjectId: string, - insightType: InsightType - ) => void; - onTraceButtonClick: ( - trace: Trace, - insightType: InsightType, - spanCodeObjectId: string - ) => void; -} diff --git a/src/components/Insights/HighNumberOfQueriesInsight/types.ts b/src/components/Insights/HighNumberOfQueriesInsight/types.ts deleted file mode 100644 index bac62a749..000000000 --- a/src/components/Insights/HighNumberOfQueriesInsight/types.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { InsightType } from "../../../types"; -import { - EndpointHighNumberOfQueriesInsight, - InsightProps, - Trace -} from "../types"; - -export interface HighNumberOfQueriesInsightProps extends InsightProps { - insight: EndpointHighNumberOfQueriesInsight; - onTraceButtonClick: ( - trace: Trace, - insightType: InsightType, - spanCodeObjectId?: string - ) => void; -} diff --git a/src/components/Insights/Insights.stories.tsx b/src/components/Insights/Insights.stories.tsx index 6c133c5ac..c8e866ea2 100644 --- a/src/components/Insights/Insights.stories.tsx +++ b/src/components/Insights/Insights.stories.tsx @@ -1,20 +1,15 @@ import { Meta, StoryObj } from "@storybook/react"; import { Insights } from "."; -import { InsightType } from "../../types"; -import { mockedBottleneckInsight } from "./BottleneckInsight/mockData"; -import { mockedEndpointNPlusOneInsight } from "./EndpointNPlusOneInsight/mockData"; -import { mockedHighNumberOfQueriesInsight } from "./HighNumberOfQueriesInsight/mockData"; -import { mockedSpanNexusInsight } from "./SpanNexusInsight/mockData"; -import { - CodeObjectErrorsInsight, - ComponentType, - EndpointSlowestSpansInsight, - InsightCategory, - InsightScope, - InsightsStatus, - SpanNPlusOneInsight, - ViewMode -} from "./types"; +import { mockedEndpointBreakdownInsight } from "./InsightsCatalog/InsightsPage/insightCards/EndpointBreakdownInsightCard/mockData"; +import { mockedEndpointHighNumberOfQueriesInsight } from "./InsightsCatalog/InsightsPage/insightCards/EndpointHighNumberOfQueriesInsightCard/mockData"; +import { mockedEndpointSpanNPlusOneInsight } from "./InsightsCatalog/InsightsPage/insightCards/EndpointSpanNPlusOneInsightInsightCard/mockData"; +import { mockedEndpointNormalUsageInsight } from "./InsightsCatalog/InsightsPage/insightCards/EndpointUsageInsightCard/mockData"; +import { mockedSpaNPlusOneInsight } from "./InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/mockData"; +import { mockedSpanDurationBreakdownInsight } from "./InsightsCatalog/InsightsPage/insightCards/SpanDurationBreakdownInsightCard/mockData"; +import { mockedSpanDurationsInsight } from "./InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/mockData"; +import { mockedSpanEndpointBottleneckInsight } from "./InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/mockData"; +import { mockedSpanNexusInsight } from "./InsightsCatalog/InsightsPage/insightCards/SpanNexusInsightCard/mockData"; +import { InsightsStatus, ViewMode } from "./types"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { @@ -54,698 +49,14 @@ export const Default: Story = { // canInstrumentMethod: false, // needsObservabilityFix: false, insights: [ - { - sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", - id: "60b55792-8362-4c5d-9628-7cce7979ad6d", - firstDetected: "2023-12-05T17:25:47.010Z", - lastDetected: "2024-01-05T13:14:47.010Z", - criticality: 0.8, - firstCommitId: "b3f7b3f", - lastCommitId: "a1b2c3d", - deactivatedCommitId: null, - reopenCount: 0, - ticketLink: null, - impact: 0, - name: "N+1", - type: InsightType.SpanNPlusOne, - category: InsightCategory.Performance, - specifity: 2, - importance: 2, - span: { - name: "OwnerValidation.ValidateOwner", - displayName: "OwnerValidation.ValidateOwner", - instrumentationLibrary: - "io.opentelemetry.opentelemetry-instrumentation-annotations-1.16", - spanCodeObjectId: - "span:io.opentelemetry.opentelemetry-instrumentation-annotations-1.16$_$OwnerValidation.ValidateOwner", - methodCodeObjectId: - "org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner", - kind: "Internal", - codeObjectId: - "org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner" - }, - occurrences: 100, - traceId: "00D37A4E7208E0F6E89AA7E2E37446A6", - clientSpanName: "select * from users where id = :id", - clientSpanCodeObjectId: - "span:OwnerController$_$1D138649EB4FFA92C0E3C8103404F2", - duration: { - value: 1.64, - unit: "sec", - raw: 1636050588.0 - }, - endpoints: [ - { - endpointInfo: { - route: "HTTP POST /owners/new", - instrumentationLibrary: "OwnerController", - spanCodeObjectId: - "span:OwnerController$_$1D138649EB4FFA92C0E3C8103404F2", - entrySpanCodeObjectId: - "span:io.opentelemetry.tomcat-10.0$_$HTTP POST /owners/new", - serviceName: "spring-petclinic" - }, - occurrences: 100, - criticality: 1, - impact: 0, - severity: 0 - }, - { - endpointInfo: { - route: "HTTP POST /owners/new2", - instrumentationLibrary: "OwnerController", - spanCodeObjectId: - "span:OwnerController$_$1D138649EB4FFA92C0E3C8103404F3", - entrySpanCodeObjectId: - "span:io.opentelemetry.tomcat-10.0$_$HTTP POST /owners/new2", - serviceName: "spring-petclinic" - }, - occurrences: 100, - criticality: 1, - impact: 0, - severity: 0 - } - ], - scope: InsightScope.Span, - spanInfo: { - name: "OwnerValidation.ValidateOwner", - displayName: "OwnerValidation.ValidateOwner", - instrumentationLibrary: - "io.opentelemetry.opentelemetry-instrumentation-annotations-1.16", - spanCodeObjectId: - "span:io.opentelemetry.opentelemetry-instrumentation-annotations-1.16$_$OwnerValidation.ValidateOwner", - methodCodeObjectId: - "org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner", - kind: "Internal", - codeObjectId: - "org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner" - }, - shortDisplayInfo: { - title: "", - targetDisplayName: "", - subtitle: "", - description: "" - }, - codeObjectId: - "org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner", - decorators: [ - { - title: "N+1", - description: "Supected NPlus One" - } - ], - environment: "BOB-LAPTOP[LOCAL]", - severity: 0.0, - isRecalculateEnabled: false, - prefixedCodeObjectId: - "method:org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner", - customStartTime: null, - actualStartTime: "2023-07-27T08:23:56.500827Z" - } as SpanNPlusOneInsight, - { - hasAsyncSpans: false, - sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", - id: "62b55792-8262-4c5d-9628-7cce7979ad6d", - 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, - components: [ - { - type: ComponentType.Internal, - fraction: 1, - duration: null - } - ], - p50Components: [ - { - type: ComponentType.Internal, - fraction: 1, - duration: null - } - ], - p95Components: [ - { - type: ComponentType.Internal, - fraction: 1, - duration: null - } - ], - scope: InsightScope.EntrySpan, - endpointSpan: "HTTP POST Transfer/TransferFunds", - spanCodeObjectId: - "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP POST Transfer/TransferFunds", - route: "epHTTP:HTTP POST Transfer/TransferFunds", - serviceName: "Sample.MoneyTransfer.API", - spanInfo: { - name: "HTTP POST Transfer/TransferFunds", - displayName: "HTTP POST Transfer/TransferFunds", - instrumentationLibrary: "OpenTelemetry.Instrumentation.AspNetCore", - spanCodeObjectId: - "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP POST Transfer/TransferFunds", - methodCodeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", - kind: "Server", - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)" - }, - shortDisplayInfo: { - title: "Request Breakdown", - targetDisplayName: "", - subtitle: "", - description: "" - }, - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", - decorators: null, - environment: "BOB-LAPTOP[LOCAL]", - severity: 0, - prefixedCodeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", - customStartTime: null, - actualStartTime: "2023-06-26T00:00:00.000Z", - isDismissed: false, - isDismissible: true - }, - { - sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", - id: "60b55792-3262-4c5d-9628-7cce7979ad6d", - 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: "Errors", - type: InsightType.Errors, - scope: InsightScope.Function, - category: InsightCategory.Errors, - specifity: 4, - importance: 5, - errorCount: 2, - unhandledCount: 0, - unexpectedCount: 0, - topErrors: [ - { - uid: "305f52ec-1428-11ee-a28c-0242ac170004", - codeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", - errorType: "System.NullReferenceException", - sourceCodeObjectId: - "method:Sample.MoneyTransfer.API.Domain.Services.MoneyTransferDomainService$_$ValidateAccountFunds(Account,Int32)" - }, - { - uid: "29dbdf80-1428-11ee-b389-0242ac170004", - codeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", - errorType: "System.Exception", - sourceCodeObjectId: - "method:Sample.MoneyTransfer.API.Domain.Services.MoneyTransferDomainService$_$TransferFunds(Int64,Int64,Int32)" - } - ], - shortDisplayInfo: { - title: "", - targetDisplayName: "", - subtitle: "", - description: "" - }, - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", - decorators: null, - environment: "BOB-LAPTOP[LOCAL]", - severity: 0, - isRecalculateEnabled: false, - prefixedCodeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", - customStartTime: null, - actualStartTime: "2023-06-26T13:53:53.645Z", - isDismissed: false, - isDismissible: true - }, - { - sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", - id: "60b55792-4262-4c5d-9628-7cce7979ad6d", - 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: "Errors Hotspot", - type: InsightType.HotSpot, - scope: InsightScope.Function, - category: InsightCategory.Errors, - specifity: 3, - importance: 2, - score: 82, - updatedAt: "2023-06-26T13:53:52.758Z", - shortDisplayInfo: { - title: "", - targetDisplayName: "", - subtitle: "", - description: "" - }, - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", - decorators: [ - { - title: "Error Hotspot", - description: "Error hotspot detected" - } - ], - environment: "BOB-LAPTOP[LOCAL]", - severity: 0, - isRecalculateEnabled: false, - prefixedCodeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", - customStartTime: null, - actualStartTime: "2023-06-26T13:53:57.956Z", - isDismissed: false, - isDismissible: true - }, - { - sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", - id: "60b55792-8252-4c5d-9628-7cce7979ad6d", - 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: "Low Usage", - type: InsightType.LowUsage, - category: InsightCategory.Usage, - specifity: 4, - importance: 6, - isDismissed: false, - isDismissible: true, - decorators: [ - { - title: "Low Usage", - description: "Low level of usage for this endpoint" - } - ], - maxCallsIn1Min: 39, - scope: InsightScope.EntrySpan, - endpointSpan: "HTTP POST Transfer/TransferFunds", - spanCodeObjectId: - "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP POST Transfer/TransferFunds", - route: "epHTTP:HTTP POST Transfer/TransferFunds", - serviceName: "Sample.MoneyTransfer.API", - spanInfo: { - name: "HTTP POST Transfer/TransferFunds", - displayName: "HTTP POST Transfer/TransferFunds", - instrumentationLibrary: "OpenTelemetry.Instrumentation.AspNetCore", - spanCodeObjectId: - "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP POST Transfer/TransferFunds", - methodCodeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", - kind: "Server", - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)" - }, - shortDisplayInfo: { - title: "", - targetDisplayName: "", - subtitle: "", - description: "" - }, - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", - environment: "BOB-LAPTOP[LOCAL]", - severity: 0, - isRecalculateEnabled: false, - prefixedCodeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", - customStartTime: null, - actualStartTime: "2023-06-12T13:48:59.404Z" - }, - { - sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", - id: "60b55792-8262-4c5d-5628-7cce7979ad6d", - 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: "Bottleneck Detected", - type: InsightType.SlowestSpans, - category: InsightCategory.Performance, - specifity: 3, - importance: 2, - // spans: [ - // { - // spanInfo: { - // name: "Validating account funds", - // displayName: "Validating account funds", - // instrumentationLibrary: "MoneyTransferDomainService", - // spanCodeObjectId: - // "span:MoneyTransferDomainService$_$Validating account funds", - // methodCodeObjectId: null, - // kind: "Internal", - // codeObjectId: null - // }, - // probabilityOfBeingBottleneck: 0.2564102564102564, - // avgDurationWhenBeingBottleneck: { - // value: 2, - // unit: "sec", - // raw: 2003535300 - // }, - // criticality: 0, - // p50: { - // fraction: 0, - // maxDuration: { - // value: 0, - // unit: "ns", - // raw: 0 - // } - // }, - // p95: { - // fraction: 0, - // maxDuration: { - // value: 0, - // unit: "ns", - // raw: 0 - // } - // }, - // p99: { - // fraction: 0, - // maxDuration: { - // value: 0, - // unit: "ns", - // raw: 0 - // } - // } - // } - // ], - scope: InsightScope.EntrySpan, - // endpointSpan: "HTTP POST Transfer/TransferFunds", - // spanCodeObjectId: - // "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP POST Transfer/TransferFunds", - // route: "epHTTP:HTTP POST Transfer/TransferFunds", - // serviceName: "Sample.MoneyTransfer.API", - spanInfo: { - name: "HTTP POST Transfer/TransferFunds", - displayName: "HTTP POST Transfer/TransferFunds", - instrumentationLibrary: "OpenTelemetry.Instrumentation.AspNetCore", - spanCodeObjectId: - "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP POST Transfer/TransferFunds", - methodCodeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", - kind: "Server", - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)" - }, - shortDisplayInfo: { - title: "", - targetDisplayName: "HTTP POST Transfer/TransferFunds", - subtitle: "1 spans", - description: "Validating account funds 2 sec" - }, - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", - decorators: null, - environment: "BOB-LAPTOP[LOCAL]", - severity: 0, - isRecalculateEnabled: true, - prefixedCodeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", - customStartTime: null, - actualStartTime: "2023-06-12T13:49:08.186Z" - } as EndpointSlowestSpansInsight, - { - sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", - id: "60b55792-8262-4c5d-9628-6cce7979ad6d", - 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: "Span Duration Breakdown", - type: InsightType.SpanDurationBreakdown, - category: InsightCategory.Performance, - specifity: 4, - isRecalculateEnabled: true, - importance: 6, - spanName: "HTTP POST Transfer/TransferFunds", - spanCodeObjectId: - "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP POST Transfer/TransferFunds", - breakdownEntries: [ - { - spanName: "Process transfer", - spanDisplayName: "Process transfer", - spanInstrumentationLibrary: "TransferController", - spanCodeObjectId: "span:TransferController$_$Process transfer", - percentiles: [ - { - percentile: 0.5, - duration: { - value: 1.38, - unit: "ms", - raw: 1377500 - } - }, - { - percentile: 0.95, - duration: { - value: 2.03, - unit: "sec", - raw: 2025478200 - } - } - ], - codeObjectId: null - } - ], - scope: InsightScope.Span, - spanInfo: { - name: "HTTP POST Transfer/TransferFunds", - displayName: "HTTP POST Transfer/TransferFunds", - instrumentationLibrary: "OpenTelemetry.Instrumentation.AspNetCore", - spanCodeObjectId: - "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP POST Transfer/TransferFunds", - methodCodeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", - kind: "Server", - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)" - }, - shortDisplayInfo: { - title: "", - targetDisplayName: "", - subtitle: "", - description: "" - }, - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", - decorators: null, - environment: "BOB-LAPTOP[LOCAL]", - severity: 0, - prefixedCodeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", - customStartTime: null, - actualStartTime: "2023-06-12T13:49:03.486Z", - isDismissed: false, - isDismissible: true - }, - { - sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", - id: "60b55792-8262-4c5d-9628-7cce8979ad6d", - 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: "Performance Stats", - type: InsightType.SpanDurations, - category: InsightCategory.Performance, - specifity: 4, - isRecalculateEnabled: true, - isDismissed: false, - isDismissible: true, - spanCodeObjectId: - "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP POST Transfer/TransferFunds", - span: { - name: "HTTP POST Transfer/TransferFunds", - displayName: "HTTP POST Transfer/TransferFunds", - instrumentationLibrary: "OpenTelemetry.Instrumentation.AspNetCore", - spanCodeObjectId: - "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP POST Transfer/TransferFunds", - methodCodeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", - kind: "Server", - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)" - }, - percentiles: [ - { - percentile: 0.5, - currentDuration: { - value: 3.62, - unit: "ms", - raw: 3621000 - }, - previousDuration: null, - changeTime: null, - changeVerified: null, - traceIds: ["CDA40BEAD59BB7F6B7FCB45418CF85B7"] - }, - { - percentile: 0.95, - currentDuration: { - value: 2.03, - unit: "sec", - raw: 2028139000 - }, - previousDuration: null, - changeTime: null, - changeVerified: null, - traceIds: ["D5B065E9806001DD507A8526A0E945E0"] - } - ], - lastSpanInstanceInfo: { - traceId: "8176E7EBC4214E07D659DA66ED775087", - spanId: "C13CC104120A2C43", - startTime: "2023-06-26T13:48:53.351Z", - duration: { - value: 2.97, - unit: "ms", - raw: 2970000 - } - }, - scope: InsightScope.Span, - spanInfo: { - name: "HTTP POST Transfer/TransferFunds", - displayName: "HTTP POST Transfer/TransferFunds", - instrumentationLibrary: "OpenTelemetry.Instrumentation.AspNetCore", - spanCodeObjectId: - "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP POST Transfer/TransferFunds", - methodCodeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", - kind: "Server", - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)" - }, - shortDisplayInfo: { - title: "", - targetDisplayName: "", - subtitle: "", - description: "" - }, - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", - decorators: [], - environment: "BOB-LAPTOP[LOCAL]", - importance: 5, - severity: 0, - prefixedCodeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", - customStartTime: null, - actualStartTime: "2023-06-13T00:00:00.000Z", - isAsync: false - }, - { - sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", - id: "60b55792-8262-4c5d-9628-7cce9979ad6d", - 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: "Scaling Insufficient Data", - type: InsightType.SpanScalingInsufficientData, - category: InsightCategory.Performance, - specifity: 4, - importance: 5, - concurrencies: [ - { - calls: 1, - meanDuration: { - value: 2.01, - unit: "sec", - raw: 2008880500 - } - }, - { - calls: 29, - meanDuration: { - value: 3.55, - unit: "ms", - raw: 3548000 - } - } - ], - scope: InsightScope.Span, - spanInfo: { - name: "HTTP POST Transfer/TransferFunds", - displayName: "HTTP POST Transfer/TransferFunds", - instrumentationLibrary: "OpenTelemetry.Instrumentation.AspNetCore", - spanCodeObjectId: - "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP POST Transfer/TransferFunds", - methodCodeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", - kind: "Server", - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)" - }, - shortDisplayInfo: { - title: "Scaling Data", - targetDisplayName: "", - subtitle: "", - description: "Partial scale data is available" - }, - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", - decorators: null, - environment: "BOB-LAPTOP[LOCAL]", - severity: 0, - isRecalculateEnabled: false, - prefixedCodeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", - customStartTime: null, - actualStartTime: "2023-06-20T00:00:00.000Z", - isDismissed: false, - isDismissible: true - }, - mockedEndpointNPlusOneInsight, - mockedBottleneckInsight, - mockedHighNumberOfQueriesInsight, + mockedSpaNPlusOneInsight, + mockedEndpointBreakdownInsight, + mockedEndpointNormalUsageInsight, + mockedSpanDurationBreakdownInsight, + mockedSpanDurationsInsight, + mockedEndpointSpanNPlusOneInsight, + mockedSpanEndpointBottleneckInsight, + mockedEndpointHighNumberOfQueriesInsight, mockedSpanNexusInsight ] } @@ -832,71 +143,12 @@ export const NoObservability: Story = { } }; -const errorsInsight: CodeObjectErrorsInsight = { - sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", - id: "60b55792-8262-4c5d-9628-7cce7979ad1d", - 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: "Errors", - type: InsightType.Errors, - scope: InsightScope.Function, - category: InsightCategory.Errors, - specifity: 4, - importance: 5, - errorCount: 2, - unhandledCount: 0, - unexpectedCount: 0, - topErrors: [ - { - uid: "305f52ec-1428-11ee-a28c-0242ac170004", - codeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", - errorType: "System.NullReferenceException", - sourceCodeObjectId: - "method:Sample.MoneyTransfer.API.Domain.Services.MoneyTransferDomainService$_$ValidateAccountFunds(Account,Int32)" - }, - { - uid: "29dbdf80-1428-11ee-b389-0242ac170004", - codeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", - errorType: "System.Exception", - sourceCodeObjectId: - "method:Sample.MoneyTransfer.API.Domain.Services.MoneyTransferDomainService$_$TransferFunds(Int64,Int64,Int32)" - } - ], - shortDisplayInfo: { - title: "", - targetDisplayName: "", - subtitle: "", - description: "" - }, - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", - decorators: null, - environment: "BOB-LAPTOP[LOCAL]", - severity: 0, - isRecalculateEnabled: false, - prefixedCodeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", - customStartTime: null, - actualStartTime: "2023-06-26T13:53:53.645Z", - isDismissed: false, - isDismissible: true -}; - export const NoObservabilityWithInsights: Story = { args: { data: { viewMode: ViewMode.INSIGHTS, insightsStatus: InsightsStatus.DEFAULT, - insights: [errorsInsight], + insights: [mockedSpaNPlusOneInsight], totalCount: 0 // spans: [], @@ -944,7 +196,7 @@ export const HasMissingDependencyWithInsights: Story = { viewMode: ViewMode.INSIGHTS, insightsStatus: InsightsStatus.DEFAULT, - insights: [errorsInsight], + insights: [mockedSpaNPlusOneInsight], totalCount: 0 } } diff --git a/src/components/Insights/InsightsCatalog/InsightsCatalog.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsCatalog.stories.tsx index 3ea49e5f6..86ca4c0c5 100644 --- a/src/components/Insights/InsightsCatalog/InsightsCatalog.stories.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsCatalog.stories.tsx @@ -1,7 +1,7 @@ import { Meta, StoryObj } from "@storybook/react"; import { InsightsCatalog } from "."; import { SORTING_ORDER } from "../../common/SortingSelector/types"; -import { mockedSpanBottleneckInsight } from "../common/insights/EndpointBottleneckInsight/mockData"; +import { mockedEndpointBottleneckInsight } from "./InsightsPage/insightCards/EndpointBottleneckInsightCard/mockData"; import { SORTING_CRITERION } from "./types"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction @@ -20,7 +20,7 @@ type Story = StoryObj; export const Default: Story = { args: { - insights: [{ ...mockedSpanBottleneckInsight, isRead: false }], + insights: [{ ...mockedEndpointBottleneckInsight, isRead: false }], totalCount: 1, dismissedCount: 1, defaultQuery: { diff --git a/src/components/Insights/InsightsPage/InsightsPage.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/InsightsPage.stories.tsx similarity index 88% rename from src/components/Insights/InsightsPage/InsightsPage.stories.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/InsightsPage.stories.tsx index 103c4ad77..526491a1a 100644 --- a/src/components/Insights/InsightsPage/InsightsPage.stories.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/InsightsPage.stories.tsx @@ -1,14 +1,14 @@ import { Meta, StoryObj } from "@storybook/react"; import { InsightsPage } from "."; -import { ConfigContext, initialState } from "../../common/App/ConfigContext"; -import { Scope } from "../../common/App/types"; -import { ViewMode } from "../InsightsCatalog/types"; -import { mockedSpanBottleneckInsight } from "../common/insights/EndpointBottleneckInsight/mockData"; +import { ConfigContext, initialState } from "../../../common/App/ConfigContext"; +import { Scope } from "../../../common/App/types"; +import { ViewMode } from "../types"; +import { mockedEndpointBottleneckInsight } from "./insightCards/EndpointBottleneckInsightCard/mockData"; import { InsightsPageProps } from "./types"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/InsightsPage", + title: "Insights/InsightsCatalog/InsightsPage", component: InsightsPage, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout @@ -63,7 +63,7 @@ export const WithInsights: Story = { ], args: { ...props, - insights: [mockedSpanBottleneckInsight] + insights: [mockedEndpointBottleneckInsight] } }; diff --git a/src/components/Insights/InsightsPage/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/index.tsx similarity index 82% rename from src/components/Insights/InsightsPage/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/index.tsx index 2fbee8bb7..ea42cd0dd 100644 --- a/src/components/Insights/InsightsPage/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/index.tsx @@ -1,42 +1,21 @@ import { useContext, useEffect, useRef } from "react"; -import { actions as globalActions } from "../../../actions"; -import { usePersistence } from "../../../hooks/usePersistence"; -import { usePrevious } from "../../../hooks/usePrevious"; -import { trackingEvents as globalTrackingEvents } from "../../../trackingEvents"; -import { isNumber } from "../../../typeGuards/isNumber"; -import { isUndefined } from "../../../typeGuards/isUndefined"; +import { actions as globalActions } from "../../../../actions"; +import { usePersistence } from "../../../../hooks/usePersistence"; +import { usePrevious } from "../../../../hooks/usePrevious"; +import { trackingEvents as globalTrackingEvents } from "../../../../trackingEvents"; +import { isNumber } from "../../../../typeGuards/isNumber"; +import { isUndefined } from "../../../../typeGuards/isUndefined"; import { ChangeScopePayload, ChangeViewPayload, InsightType -} from "../../../types"; -import { sendTrackingEvent } from "../../../utils/sendTrackingEvent"; -import { ConfigContext } from "../../common/App/ConfigContext"; -import { EmptyState } from "../../common/EmptyState"; -import { CardsIcon } from "../../common/icons/CardsIcon"; -import { ViewMode } from "../InsightsCatalog/types"; -import { actions } from "../actions"; -import { DurationBreakdownInsight } from "../common/insights/DurationBreakdownInsight"; -import { DurationInsight } from "../common/insights/DurationInsight"; -import { EndpointBottleneckInsight } from "../common/insights/EndpointBottleneckInsight"; -import { EndpointChattyApiV2Insight } from "../common/insights/EndpointChattyApiV2Insight"; -import { EndpointNPlusOneInsight } from "../common/insights/EndpointNPlusOneInsight"; -import { EndpointQueryOptimizationInsight } from "../common/insights/EndpointQueryOptimizationInsight"; -import { EndpointQueryOptimizationV2Insight } from "../common/insights/EndpointQueryOptimizationV2Insight"; -import { EndpointSlowdownSourceInsight } from "../common/insights/EndpointSlowdownSourceInsight"; -import { ExcessiveAPICallsInsight } from "../common/insights/ExcessiveAPICallsInsight"; -import { HighNumberOfQueriesInsight } from "../common/insights/HighNumberOfQueriesInsight"; -import { RequestBreakdownInsight } from "../common/insights/RequestBreakdownInsight"; -import { ScalingIssueInsight } from "../common/insights/ScalingIssueInsight"; -import { SessionInViewInsight } from "../common/insights/SessionInViewInsight"; -import { SlowEndpointInsight } from "../common/insights/SlowEndpointInsight"; -import { SpanEndpointBottleneckInsight } from "../common/insights/SpanEndpointBottleneckInsight"; -import { SpanNPlusOneInsight } from "../common/insights/SpanNPlusOneInsight"; -import { SpanNexusInsight } from "../common/insights/SpanNexusInsight"; -import { SpanQueryOptimizationInsight } from "../common/insights/SpanQueryOptimizationInsight"; -import { TopUsageInsight } from "../common/insights/TopUsageInsight"; -import { TrafficInsight } from "../common/insights/TrafficInsight"; -import { trackingEvents } from "../tracking"; +} from "../../../../types"; +import { sendTrackingEvent } from "../../../../utils/sendTrackingEvent"; +import { ConfigContext } from "../../../common/App/ConfigContext"; +import { EmptyState } from "../../../common/EmptyState"; +import { CardsIcon } from "../../../common/icons/CardsIcon"; +import { actions } from "../../actions"; +import { trackingEvents } from "../../tracking"; import { isChattyApiEndpointInsight, isEndpointBottleneckInsight, @@ -60,8 +39,33 @@ import { isSpanQueryOptimizationInsight, isSpanScalingBadlyInsight, isSpanUsagesInsight -} from "../typeGuards"; -import { CodeObjectInsight, GenericCodeObjectInsight, Trace } from "../types"; +} from "../../typeGuards"; +import { + CodeObjectInsight, + GenericCodeObjectInsight, + Trace +} from "../../types"; +import { ViewMode } from "../types"; +import { EndpointBottleneckInsightCard } from "./insightCards/EndpointBottleneckInsightCard"; +import { EndpointBreakdownInsightCard } from "./insightCards/EndpointBreakdownInsightCard"; +import { EndpointChattyApiInsightCard } from "./insightCards/EndpointChattyApiInsightCard"; +import { EndpointChattyApiV2InsightCard } from "./insightCards/EndpointChattyApiV2InsightCard"; +import { EndpointHighNumberOfQueriesInsightCard } from "./insightCards/EndpointHighNumberOfQueriesInsightCard"; +import { EndpointQueryOptimizationInsightCard } from "./insightCards/EndpointQueryOptimizationInsightCard"; +import { EndpointQueryOptimizationV2InsightCard } from "./insightCards/EndpointQueryOptimizationV2InsightCard"; +import { EndpointSessionInViewInsightCard } from "./insightCards/EndpointSessionInViewInsightCard"; +import { EndpointSlowdownSourceInsightCard } from "./insightCards/EndpointSlowdownSourceInsightCard"; +import { EndpointSpanNPlusOneInsightCard } from "./insightCards/EndpointSpanNPlusOneInsightInsightCard"; +import { EndpointUsageInsightCard } from "./insightCards/EndpointUsageInsightCard"; +import { SlowEndpointInsightCard } from "./insightCards/SlowEndpointInsightCard"; +import { SpaNPlusOneInsightCard } from "./insightCards/SpaNPlusOneInsightCard"; +import { SpanDurationBreakdownInsightCard } from "./insightCards/SpanDurationBreakdownInsightCard"; +import { SpanDurationsInsightCard } from "./insightCards/SpanDurationsInsightCard"; +import { SpanEndpointBottleneckInsightCard } from "./insightCards/SpanEndpointBottleneckInsightCard"; +import { SpanNexusInsightCard } from "./insightCards/SpanNexusInsightCard"; +import { SpanQueryOptimizationInsightCard } from "./insightCards/SpanQueryOptimizationInsightCard"; +import { SpanScalingInsightCard } from "./insightCards/SpanScalingInsightCard"; +import { SpanUsagesInsightCard } from "./insightCards/SpanUsagesInsightCard"; import * as s from "./styles"; import { InsightsPageProps, @@ -72,14 +76,14 @@ import { const getInsightToShowJiraHint = (insights: CodeObjectInsight[]): number => { const insightsWithJiraButton = [ - InsightType.EndpointSpanNPlusOne, - InsightType.SpanNPlusOne, + InsightType.EndpointSpaNPlusOne, + InsightType.SpaNPlusOne, InsightType.SpanEndpointBottleneck, InsightType.SlowestSpans, InsightType.SpanQueryOptimization, InsightType.EndpointHighNumberOfQueries, InsightType.EndpointQueryOptimization, - InsightType.SpanScalingBadly + InsightType.SpanScaling ]; return insights.findIndex((insight) => @@ -208,7 +212,7 @@ const renderInsightCard = ( if (isSpanDurationsInsight(insight)) { return ( - = { + title: + "Insights/InsightsCatalog/InsightsPage/insightCards/EndpointBottleneckInsightCard", + component: EndpointBottleneckInsightCard, + 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; + +export const Default: Story = { + args: { + insight: mockedEndpointBottleneckInsight + } +}; diff --git a/src/components/Insights/common/insights/EndpointBottleneckInsight/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointBottleneckInsightCard/index.tsx similarity index 68% rename from src/components/Insights/common/insights/EndpointBottleneckInsight/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointBottleneckInsightCard/index.tsx index 90d4b77d9..75d494b6c 100644 --- a/src/components/Insights/common/insights/EndpointBottleneckInsight/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointBottleneckInsightCard/index.tsx @@ -1,33 +1,39 @@ -import { getDurationString } from "../../../../../utils/getDurationString"; -import { Info } from "../../Info"; -import { InsightCard } from "../../InsightCard"; -import { ColumnsContainer } from "../../InsightCard/ColumnsContainer"; -import { KeyValue } from "../../InsightCard/KeyValue"; +import { getDurationString } from "../../../../../../utils/getDurationString"; +import { Info } from "../common/Info"; +import { InsightCard } from "../common/InsightCard"; +import { ColumnsContainer } from "../common/InsightCard/ColumnsContainer"; +import { KeyValue } from "../common/InsightCard/KeyValue"; import { ContentContainer, Description, Details } from "../styles"; import * as s from "./styles"; -import { EndpointBottleneckInsightProps } from "./types"; +import { EndpointBottleneckInsightCardProps } from "./types"; -export const EndpointBottleneckInsight = ( - props: EndpointBottleneckInsightProps -) => { - const { insight } = props; +export const EndpointBottleneckInsightCard = ({ + insight, + onAssetLinkClick, + onJiraTicketCreate, + onTraceButtonClick, + isJiraHintEnabled, + onRecalculate, + onGoToSpan, + onRefresh, + isMarkAsReadButtonEnabled +}: EndpointBottleneckInsightCardProps) => { const { span, ticketLink } = insight; const handleSpanLinkClick = (spanCodeObjectId: string) => { - props.onAssetLinkClick(spanCodeObjectId, insight.type); + onAssetLinkClick(spanCodeObjectId, insight.type); }; const handleTicketInfoButtonClick = ( spanCodeObjectId: string | undefined, event: string ) => { - props.onJiraTicketCreate && - props.onJiraTicketCreate(insight, spanCodeObjectId, event); + onJiraTicketCreate && onJiraTicketCreate(insight, spanCodeObjectId, event); }; const handleTraceButtonClick = () => { if (span.traceId) { - props.onTraceButtonClick( + onTraceButtonClick( { id: span.traceId, name: span.spanInfo.name }, insight.type, insight.span.spanInfo.spanCodeObjectId @@ -42,7 +48,7 @@ export const EndpointBottleneckInsight = ( } - onRecalculate={props.onRecalculate} - onRefresh={props.onRefresh} + onRecalculate={onRecalculate} + onRefresh={onRefresh} onJiraButtonClick={handleTicketInfoButtonClick} - onGoToSpan={props.onGoToSpan} + onGoToSpan={onGoToSpan} onGoToTrace={span.traceId ? handleTraceButtonClick : undefined} - isMarkAsReadButtonEnabled={props.isMarkAsReadButtonEnabled} + isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled} /> ); }; diff --git a/src/components/Insights/common/insights/EndpointBottleneckInsight/mockData.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointBottleneckInsightCard/mockData.ts similarity index 96% rename from src/components/Insights/common/insights/EndpointBottleneckInsight/mockData.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointBottleneckInsightCard/mockData.ts index 4556d5574..b1a89393b 100644 --- a/src/components/Insights/common/insights/EndpointBottleneckInsight/mockData.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointBottleneckInsightCard/mockData.ts @@ -3,9 +3,9 @@ import { InsightCategory, InsightScope, InsightType -} from "../../../types"; +} from "../../../../types"; -export const mockedSpanBottleneckInsight: EndpointBottleneckInsight = { +export const mockedEndpointBottleneckInsight: EndpointBottleneckInsight = { sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", id: "60b55792-8262-4c5d-9628-7dce7979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", diff --git a/src/components/Insights/common/insights/EndpointQueryOptimizationV2Insight/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointBottleneckInsightCard/styles.ts similarity index 70% rename from src/components/Insights/common/insights/EndpointQueryOptimizationV2Insight/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointBottleneckInsightCard/styles.ts index 4a383a4bb..03fd84d20 100644 --- a/src/components/Insights/common/insights/EndpointQueryOptimizationV2Insight/styles.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointBottleneckInsightCard/styles.ts @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { ListItem } from "../../InsightCard/ListItem"; +import { ListItem } from "../common/InsightCard/ListItem"; export const SpanListItem = styled(ListItem)` height: 28px; diff --git a/src/components/Insights/common/insights/EndpointBottleneckInsight/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointBottleneckInsightCard/types.ts similarity index 62% rename from src/components/Insights/common/insights/EndpointBottleneckInsight/types.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointBottleneckInsightCard/types.ts index f1a1391dd..a6604ce1f 100644 --- a/src/components/Insights/common/insights/EndpointBottleneckInsight/types.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointBottleneckInsightCard/types.ts @@ -1,11 +1,12 @@ import { EndpointBottleneckInsight, - InsightProps, InsightType, Trace -} from "../../../types"; +} from "../../../../types"; +import { InsightCardCommonProps } from "../common/InsightCard/types"; -export interface EndpointBottleneckInsightProps extends InsightProps { +export interface EndpointBottleneckInsightCardProps + extends InsightCardCommonProps { insight: EndpointBottleneckInsight; onAssetLinkClick: ( spanCodeObjectId: string, diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointBreakdownInsightCard/EndpointBreakdownInsightCard.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointBreakdownInsightCard/EndpointBreakdownInsightCard.stories.tsx new file mode 100644 index 000000000..6b1416a6f --- /dev/null +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointBreakdownInsightCard/EndpointBreakdownInsightCard.stories.tsx @@ -0,0 +1,94 @@ +import { Meta, StoryObj } from "@storybook/react"; +import { EndpointBreakdownInsightCard } from "."; +import { ComponentType } from "../../../../types"; +import { mockedEndpointBreakdownInsight } from "./mockData"; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction +const meta: Meta = { + title: + "Insights/InsightsCatalog/InsightsPage/insightCards/EndpointBreakdownInsightCard", + component: EndpointBreakdownInsightCard, + 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; + +export const Default: Story = { + args: { + insight: mockedEndpointBreakdownInsight + } +}; + +export const Async: Story = { + args: { + insight: { + ...mockedEndpointBreakdownInsight, + 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/InsightsCatalog/InsightsPage/insightCards/EndpointBreakdownInsightCard/index.tsx similarity index 92% rename from src/components/Insights/common/insights/RequestBreakdownInsight/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointBreakdownInsightCard/index.tsx index 34b1ddd80..ebc97afac 100644 --- a/src/components/Insights/common/insights/RequestBreakdownInsight/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointBreakdownInsightCard/index.tsx @@ -8,19 +8,19 @@ 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 { 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"; +} from "../../../../types"; +import { InsightCard } from "../common/InsightCard"; +import { PercentileViewModeToggle } from "../common/InsightCard/PercentileViewModeToggle"; import * as s from "./styles"; -import { RequestBreakdownInsightProps } from "./types"; +import { EndpointBreakdownInsightCardProps } from "./types"; const PIE_CHART_RADIUS = 50; const PIE_CHART_ARC_WIDTH = 4; @@ -65,8 +65,8 @@ const sortByType = (a: Component, b: Component) => const columnHelper = createColumnHelper(); -export const RequestBreakdownInsight = ( - props: RequestBreakdownInsightProps +export const EndpointBreakdownInsightCard = ( + props: EndpointBreakdownInsightCardProps ) => { const theme = useTheme(); const componentTypeColors = getComponentTypeColors(theme); diff --git a/src/components/Insights/common/insights/RequestBreakdownInsight/RequestBreakdownInsight.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointBreakdownInsightCard/mockData.ts similarity index 59% rename from src/components/Insights/common/insights/RequestBreakdownInsight/RequestBreakdownInsight.stories.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointBreakdownInsightCard/mockData.ts index 0a2839ae0..a1082cabc 100644 --- a/src/components/Insights/common/insights/RequestBreakdownInsight/RequestBreakdownInsight.stories.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointBreakdownInsightCard/mockData.ts @@ -1,28 +1,12 @@ -import { Meta, StoryObj } from "@storybook/react"; -import { RequestBreakdownInsight } from "."; import { ComponentType, EndpointBreakdownInsight, InsightCategory, InsightScope, InsightType -} from "../../../types"; +} from "../../../../types"; -// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction -const meta: Meta = { - 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; - -const data: EndpointBreakdownInsight = { +export const mockedEndpointBreakdownInsight: EndpointBreakdownInsight = { sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", id: "60b55792-8262-4c5d-9628-7cce7979dd6d", firstDetected: "2023-12-05T17:25:47.010Z", @@ -142,78 +126,3 @@ const data: EndpointBreakdownInsight = { 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/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointBreakdownInsightCard/styles.ts similarity index 97% rename from src/components/Insights/common/insights/RequestBreakdownInsight/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointBreakdownInsightCard/styles.ts index ee8bc8406..e4b7a8918 100644 --- a/src/components/Insights/common/insights/RequestBreakdownInsight/styles.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointBreakdownInsightCard/styles.ts @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { caption1RegularTypography } from "../../../../common/App/typographies"; +import { caption1RegularTypography } from "../../../../../common/App/typographies"; import { FractionProgressBarValueProps, LegendItemDataColorBadgeProps diff --git a/src/components/Insights/common/insights/RequestBreakdownInsight/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointBreakdownInsightCard/types.ts similarity index 50% rename from src/components/Insights/common/insights/RequestBreakdownInsight/types.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointBreakdownInsightCard/types.ts index 4f21d83b5..a044c5548 100644 --- a/src/components/Insights/common/insights/RequestBreakdownInsight/types.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointBreakdownInsightCard/types.ts @@ -1,6 +1,8 @@ -import { EndpointBreakdownInsight, InsightProps } from "../../../types"; +import { EndpointBreakdownInsight } from "../../../../types"; +import { InsightCardCommonProps } from "../common/InsightCard/types"; -export interface RequestBreakdownInsightProps extends InsightProps { +export interface EndpointBreakdownInsightCardProps + extends InsightCardCommonProps { insight: EndpointBreakdownInsight; } diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiInsightCard/EndpointChattyApiInsightCard.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiInsightCard/EndpointChattyApiInsightCard.stories.tsx new file mode 100644 index 000000000..3fab49008 --- /dev/null +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiInsightCard/EndpointChattyApiInsightCard.stories.tsx @@ -0,0 +1,39 @@ +import { Meta, StoryObj } from "@storybook/react"; +import { EndpointChattyApiInsightCard } from "."; +import { mockedEndpointChattyApiInsight } from "./mockData"; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction +const meta: Meta = { + title: + "Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiInsightCard", + component: EndpointChattyApiInsightCard, + 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; + +export const Default: Story = { + args: { + insight: mockedEndpointChattyApiInsight + } +}; + +export const WithMultipleSpans: Story = { + args: { + insight: { + ...mockedEndpointChattyApiInsight, + spans: new Array(4).fill(undefined).map((x, i) => ({ + ...mockedEndpointChattyApiInsight.spans[0], + clientSpan: { + ...mockedEndpointChattyApiInsight.spans[0].clientSpan, + spanCodeObjectId: `${mockedEndpointChattyApiInsight.spans[0].clientSpan.spanCodeObjectId} ${i}` + } + })) + } + } +}; diff --git a/src/components/Insights/common/insights/ExcessiveAPICallsInsight/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiInsightCard/index.tsx similarity index 63% rename from src/components/Insights/common/insights/ExcessiveAPICallsInsight/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiInsightCard/index.tsx index ff52ebd74..ee6bd9aa0 100644 --- a/src/components/Insights/common/insights/ExcessiveAPICallsInsight/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiInsightCard/index.tsx @@ -1,31 +1,40 @@ import { useContext } from "react"; -import { usePagination } from "../../../../../hooks/usePagination"; -import { ConfigContext } from "../../../../common/App/ConfigContext"; -import { TargetIcon } from "../../../../common/icons/12px/TargetIcon"; -import { Button } from "../../../../common/v3/Button"; -import { Pagination } from "../../../../common/v3/Pagination"; -import { Tooltip } from "../../../../common/v3/Tooltip"; -import { InsightType, Trace } from "../../../types"; -import { InsightCard } from "../../InsightCard"; +import { usePagination } from "../../../../../../hooks/usePagination"; +import { ConfigContext } from "../../../../../common/App/ConfigContext"; +import { TargetIcon } from "../../../../../common/icons/12px/TargetIcon"; +import { Button } from "../../../../../common/v3/Button"; +import { Pagination } from "../../../../../common/v3/Pagination"; +import { Tooltip } from "../../../../../common/v3/Tooltip"; +import { InsightType, Trace } from "../../../../types"; +import { InsightCard } from "../common/InsightCard"; import { ContentContainer, Description, ListContainer } from "../styles"; import * as s from "./styles"; -import { ExcessiveAPICallsInsightProps } from "./types"; +import { EndpointChattyApiInsightCardProps } from "./types"; const PAGE_SIZE = 3; -export const ExcessiveAPICallsInsight = ( - props: ExcessiveAPICallsInsightProps -) => { +/** + * @deprecated + */ +export const EndpointChattyApiInsightCard = ({ + insight, + onAssetLinkClick, + onTraceButtonClick, + onRecalculate, + onRefresh, + onGoToSpan, + isMarkAsReadButtonEnabled +}: EndpointChattyApiInsightCardProps) => { const config = useContext(ConfigContext); const [pageItems, page, setPage] = usePagination( - props.insight.spans, + insight.spans, PAGE_SIZE, - props.insight.id + insight.id ); const handleLinkClick = (spanCodeObjectId: string) => { - props.onAssetLinkClick(spanCodeObjectId, props.insight.type); + onAssetLinkClick(spanCodeObjectId, insight.type); }; const handleTraceButtonClick = ( @@ -33,12 +42,12 @@ export const ExcessiveAPICallsInsight = ( insightType: InsightType, spanCodeObjectId: string ) => { - props.onTraceButtonClick(trace, insightType, spanCodeObjectId); + onTraceButtonClick(trace, insightType, spanCodeObjectId); }; return ( @@ -66,7 +75,7 @@ export const ExcessiveAPICallsInsight = ( name: spanName, id: traceId }, - props.insight.type, + insight.type, spanCodeObjectId ) } @@ -78,7 +87,7 @@ export const ExcessiveAPICallsInsight = ( ); })} } - onRecalculate={props.onRecalculate} - onRefresh={props.onRefresh} - onGoToSpan={props.onGoToSpan} - isMarkAsReadButtonEnabled={props.isMarkAsReadButtonEnabled} + onRecalculate={onRecalculate} + onRefresh={onRefresh} + onGoToSpan={onGoToSpan} + isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled} /> ); }; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiInsightCard/mockData.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiInsightCard/mockData.ts new file mode 100644 index 000000000..4324406c0 --- /dev/null +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiInsightCard/mockData.ts @@ -0,0 +1,82 @@ +import { + EndpointChattyApiInsight, + InsightCategory, + InsightScope, + InsightType +} from "../../../../types"; + +export const mockedEndpointChattyApiInsight: EndpointChattyApiInsight = { + sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", + id: "60b55792-8262-4c5d-9688-7cce7979ad6d", + firstDetected: "2023-12-05T17:25:47.010Z", + lastDetected: "2024-01-05T13:14:47.010Z", + criticality: 0.5, + firstCommitId: "b3f7b3f", + lastCommitId: "a1b2c3d", + deactivatedCommitId: null, + reopenCount: 0, + ticketLink: null, + impact: 0, + name: "HTTP Chatter", + type: InsightType.EndpointChattyApi, + category: InsightCategory.Performance, + specifity: 2, + importance: 3, + isDismissed: false, + isDismissible: true, + spans: [ + { + repeats: 29, + clientSpan: { + name: "HTTP GET mockapi.io", + displayName: "HTTP GET mockapi.io", + instrumentationLibrary: "io.opentelemetry.okhttp-3.0", + spanCodeObjectId: + "span:io.opentelemetry.okhttp-3.0$_$HTTP GET mockapi.io", + methodCodeObjectId: null, + kind: "Client", + codeObjectId: null + }, + traceId: "00E4D714D4FAD0A00F9D8A39C8A49E8A" + } + ], + scope: InsightScope.EntrySpan, + endpointSpan: "HTTP POST /owners/{ownerId}/pets/new", + spanCodeObjectId: + "span:io.opentelemetry.tomcat-10.0$_$HTTP POST /owners/{ownerId}/pets/new", + route: "epHTTP:HTTP POST /owners/{ownerId}/pets/new", + serviceName: "spring-petclinic", + spanInfo: { + name: "HTTP POST /owners/{ownerId}/pets/new", + displayName: "HTTP POST /owners/{ownerId}/pets/new", + instrumentationLibrary: "io.opentelemetry.tomcat-10.0", + spanCodeObjectId: + "span:io.opentelemetry.tomcat-10.0$_$HTTP POST /owners/{ownerId}/pets/new", + methodCodeObjectId: + "method:org.springframework.samples.petclinic.owner.PetController$_$processCreationForm", + kind: "Server", + codeObjectId: + "org.springframework.samples.petclinic.owner.PetController$_$processCreationForm" + }, + shortDisplayInfo: { + title: "", + targetDisplayName: "", + subtitle: "", + description: "" + }, + codeObjectId: + "org.springframework.samples.petclinic.owner.PetController$_$processCreationForm", + decorators: [ + { + title: "Excessive HTTP Calls", + description: "Numerous Http calls to the same endpoint detected " + } + ], + environment: "BOB-LAPTOP[LOCAL]", + severity: 0.0, + isRecalculateEnabled: false, + prefixedCodeObjectId: + "method:org.springframework.samples.petclinic.owner.PetController$_$processCreationForm", + customStartTime: null, + actualStartTime: "2023-08-10T08:04:00Z" +}; diff --git a/src/components/Insights/common/insights/ExcessiveAPICallsInsight/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiInsightCard/styles.ts similarity index 64% rename from src/components/Insights/common/insights/ExcessiveAPICallsInsight/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiInsightCard/styles.ts index 3dd35f6c9..5343db563 100644 --- a/src/components/Insights/common/insights/ExcessiveAPICallsInsight/styles.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiInsightCard/styles.ts @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { ListItem } from "../../InsightCard/ListItem"; +import { ListItem } from "../common/InsightCard/ListItem"; export const SpanListItem = styled(ListItem)` height: 32px; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiInsightCard/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiInsightCard/types.ts new file mode 100644 index 000000000..13399d8b0 --- /dev/null +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiInsightCard/types.ts @@ -0,0 +1,20 @@ +import { + EndpointChattyApiInsight, + InsightType, + Trace +} from "../../../../types"; +import { InsightCardCommonProps } from "../common/InsightCard/types"; + +export interface EndpointChattyApiInsightCardProps + extends InsightCardCommonProps { + insight: EndpointChattyApiInsight; + onAssetLinkClick: ( + spanCodeObjectId: string, + insightType: InsightType + ) => void; + onTraceButtonClick: ( + trace: Trace, + insightType: InsightType, + spanCodeObjectId: string + ) => void; +} diff --git a/src/components/Insights/common/insights/EndpointChattyApiV2Insight/EndpointChattyApiV2Insight.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiV2InsightCard/EndpointChattyApiV2InsightCard.stories.tsx similarity index 67% rename from src/components/Insights/common/insights/EndpointChattyApiV2Insight/EndpointChattyApiV2Insight.stories.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiV2InsightCard/EndpointChattyApiV2InsightCard.stories.tsx index 7e54dec50..591be264b 100644 --- a/src/components/Insights/common/insights/EndpointChattyApiV2Insight/EndpointChattyApiV2Insight.stories.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiV2InsightCard/EndpointChattyApiV2InsightCard.stories.tsx @@ -1,11 +1,12 @@ import { Meta, StoryObj } from "@storybook/react"; -import { EndpointChattyApiV2Insight } from "."; +import { EndpointChattyApiV2InsightCard } from "."; import { mockedEndpointChattyApiV2Insight } from "./mockData"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction -const meta: Meta = { - title: "Insights/common/insights/EndpointChattyApiV2Insight", - component: EndpointChattyApiV2Insight, +const meta: Meta = { + title: + "Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiV2InsightCard", + component: EndpointChattyApiV2InsightCard, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout layout: "fullscreen" diff --git a/src/components/Insights/common/insights/EndpointChattyApiV2Insight/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiV2InsightCard/index.tsx similarity index 85% rename from src/components/Insights/common/insights/EndpointChattyApiV2Insight/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiV2InsightCard/index.tsx index a9e3fb42b..ab8a29b39 100644 --- a/src/components/Insights/common/insights/EndpointChattyApiV2Insight/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiV2InsightCard/index.tsx @@ -1,10 +1,10 @@ -import { InsightType, Trace } from "../../../types"; -import { InsightCard } from "../../InsightCard"; +import { InsightType, Trace } from "../../../../types"; +import { InsightCard } from "../common/InsightCard"; import { Description } from "../styles"; import * as s from "./styles"; -import { EndpointChattyApiV2InsightProps } from "./types"; +import { EndpointChattyApiV2InsightCardProps } from "./types"; -export const EndpointChattyApiV2Insight = ({ +export const EndpointChattyApiV2InsightCard = ({ insight, onAssetLinkClick, onTraceButtonClick, @@ -12,7 +12,7 @@ export const EndpointChattyApiV2Insight = ({ onRefresh, onGoToSpan, isMarkAsReadButtonEnabled -}: EndpointChattyApiV2InsightProps) => { +}: EndpointChattyApiV2InsightCardProps) => { const handleSpanLinkClick = (spanCodeObjectId: string) => { onAssetLinkClick(spanCodeObjectId, insight.type); }; diff --git a/src/components/Insights/common/insights/EndpointChattyApiV2Insight/mockData.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiV2InsightCard/mockData.ts similarity index 98% rename from src/components/Insights/common/insights/EndpointChattyApiV2Insight/mockData.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiV2InsightCard/mockData.ts index f29f871a7..7a7ac5e7e 100644 --- a/src/components/Insights/common/insights/EndpointChattyApiV2Insight/mockData.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiV2InsightCard/mockData.ts @@ -3,7 +3,7 @@ import { InsightCategory, InsightScope, InsightType -} from "../../../types"; +} from "../../../../types"; export const mockedEndpointChattyApiV2Insight: EndpointChattyApiV2Insight = { sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", diff --git a/src/components/Insights/common/insights/EndpointChattyApiV2Insight/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiV2InsightCard/styles.ts similarity index 81% rename from src/components/Insights/common/insights/EndpointChattyApiV2Insight/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiV2InsightCard/styles.ts index 61b3faae7..491e70dda 100644 --- a/src/components/Insights/common/insights/EndpointChattyApiV2Insight/styles.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiV2InsightCard/styles.ts @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { ListItem } from "../../InsightCard/ListItem"; +import { ListItem } from "../common/InsightCard/ListItem"; import { ContentContainer } from "../styles"; export const Container = styled(ContentContainer)` diff --git a/src/components/Insights/common/insights/EndpointChattyApiV2Insight/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiV2InsightCard/types.ts similarity index 62% rename from src/components/Insights/common/insights/EndpointChattyApiV2Insight/types.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiV2InsightCard/types.ts index 03a0cc494..29068b2a5 100644 --- a/src/components/Insights/common/insights/EndpointChattyApiV2Insight/types.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiV2InsightCard/types.ts @@ -1,11 +1,12 @@ import { EndpointChattyApiV2Insight, - InsightProps, InsightType, Trace -} from "../../../types"; +} from "../../../../types"; +import { InsightCardCommonProps } from "../common/InsightCard/types"; -export interface EndpointChattyApiV2InsightProps extends InsightProps { +export interface EndpointChattyApiV2InsightCardProps + extends InsightCardCommonProps { insight: EndpointChattyApiV2Insight; onAssetLinkClick: ( spanCodeObjectId: string, diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointHighNumberOfQueriesInsightCard/EndpointHighNumberOfQueriesInsightCard.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointHighNumberOfQueriesInsightCard/EndpointHighNumberOfQueriesInsightCard.stories.tsx new file mode 100644 index 000000000..316601cd2 --- /dev/null +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointHighNumberOfQueriesInsightCard/EndpointHighNumberOfQueriesInsightCard.stories.tsx @@ -0,0 +1,31 @@ +import { Meta, StoryObj } from "@storybook/react"; +import { EndpointHighNumberOfQueriesInsightCard } from "."; +import { mockedEndpointHighNumberOfQueriesInsight } from "./mockData"; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction +const meta: Meta = { + title: + "Insights/InsightsCatalog/InsightsPage/insightCards/HighNumberOfQueriesInsightCard", + component: EndpointHighNumberOfQueriesInsightCard, + 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; + +export const Default: Story = { + args: { + insight: mockedEndpointHighNumberOfQueriesInsight + } +}; + +export const AffectingSlowest5Percent: Story = { + name: "Affecting Slowest 5%", + args: { + insight: { ...mockedEndpointHighNumberOfQueriesInsight, quantile: 0.95 } + } +}; diff --git a/src/components/Insights/common/insights/HighNumberOfQueriesInsight/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointHighNumberOfQueriesInsightCard/index.tsx similarity index 60% rename from src/components/Insights/common/insights/HighNumberOfQueriesInsight/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointHighNumberOfQueriesInsightCard/index.tsx index 0fd82713b..60d7ad631 100644 --- a/src/components/Insights/common/insights/HighNumberOfQueriesInsight/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointHighNumberOfQueriesInsightCard/index.tsx @@ -1,18 +1,24 @@ -import { InfoCircleIcon } from "../../../../common/icons/InfoCircleIcon"; -import { Tag } from "../../../../common/v3/Tag"; -import { Tooltip } from "../../../../common/v3/Tooltip"; -import { InsightType, Trace } from "../../../types"; -import { InsightCard } from "../../InsightCard"; -import { ColumnsContainer } from "../../InsightCard/ColumnsContainer"; -import { KeyValue } from "../../InsightCard/KeyValue"; +import { InfoCircleIcon } from "../../../../../common/icons/InfoCircleIcon"; +import { Tag } from "../../../../../common/v3/Tag"; +import { Tooltip } from "../../../../../common/v3/Tooltip"; +import { InsightType, Trace } from "../../../../types"; +import { InsightCard } from "../common/InsightCard"; +import { ColumnsContainer } from "../common/InsightCard/ColumnsContainer"; +import { KeyValue } from "../common/InsightCard/KeyValue"; import { ContentContainer, Description } from "../styles"; import * as s from "./styles"; -import { HighNumberOfQueriesInsightProps } from "./types"; +import { EndpointHighNumberOfQueriesInsightCardProps } from "./types"; -export const HighNumberOfQueriesInsight = ( - props: HighNumberOfQueriesInsightProps -) => { - const { insight } = props; +export const EndpointHighNumberOfQueriesInsightCard = ({ + insight, + onTraceButtonClick, + onJiraTicketCreate, + onRecalculate, + onRefresh, + isJiraHintEnabled, + onGoToSpan, + isMarkAsReadButtonEnabled +}: EndpointHighNumberOfQueriesInsightCardProps) => { const traceId = insight.traceId; const handleTraceButtonClick = ( @@ -20,15 +26,14 @@ export const HighNumberOfQueriesInsight = ( insightType: InsightType, spanCodeObjectId?: string ) => { - props.onTraceButtonClick(trace, insightType, spanCodeObjectId); + onTraceButtonClick(trace, insightType, spanCodeObjectId); }; - const handleCreateJiraTicketButtonClick = ( + const handleTicketInfoButtonClick = ( spanCodeObjectId: string | undefined, event: string ) => { - props.onJiraTicketCreate && - props.onJiraTicketCreate(insight, spanCodeObjectId, event); + onJiraTicketCreate && onJiraTicketCreate(insight, spanCodeObjectId, event); }; return ( @@ -64,12 +69,12 @@ export const HighNumberOfQueriesInsight = ( } - onRecalculate={props.onRecalculate} - onRefresh={props.onRefresh} - onJiraButtonClick={handleCreateJiraTicketButtonClick} + onRecalculate={onRecalculate} + onRefresh={onRefresh} + onJiraButtonClick={handleTicketInfoButtonClick} jiraTicketInfo={{ ticketLink: insight.ticketLink, - isHintEnabled: props.isJiraHintEnabled + isHintEnabled: isJiraHintEnabled }} onGoToTrace={ traceId @@ -84,8 +89,8 @@ export const HighNumberOfQueriesInsight = ( ) : undefined } - onGoToSpan={props.onGoToSpan} - isMarkAsReadButtonEnabled={props.isMarkAsReadButtonEnabled} + onGoToSpan={onGoToSpan} + isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled} /> ); }; diff --git a/src/components/Insights/common/insights/HighNumberOfQueriesInsight/mockData.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointHighNumberOfQueriesInsightCard/mockData.ts similarity index 92% rename from src/components/Insights/common/insights/HighNumberOfQueriesInsight/mockData.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointHighNumberOfQueriesInsightCard/mockData.ts index c79053a0b..5dfd5975f 100644 --- a/src/components/Insights/common/insights/HighNumberOfQueriesInsight/mockData.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointHighNumberOfQueriesInsightCard/mockData.ts @@ -1,11 +1,11 @@ -import { InsightType } from "../../../../../types"; +import { InsightType } from "../../../../../../types"; import { EndpointHighNumberOfQueriesInsight, InsightCategory, InsightScope -} from "../../../types"; +} from "../../../../types"; -export const mockedHighNumberOfQueriesInsight: EndpointHighNumberOfQueriesInsight = +export const mockedEndpointHighNumberOfQueriesInsight: EndpointHighNumberOfQueriesInsight = { sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", id: "60b55792-8262-4c5d-9623-7cce7979ad6d", @@ -65,7 +65,7 @@ export const mockedHighNumberOfQueriesInsight: EndpointHighNumberOfQueriesInsigh "method:org.springframework.samples.petclinic.owner.PetController$_$processCreationForm", customStartTime: null, actualStartTime: "2023-08-10T08:04:00Z", - quantile: 0.95, + quantile: 0.5, isDismissed: false, isDismissible: true }; diff --git a/src/components/Insights/common/insights/HighNumberOfQueriesInsight/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointHighNumberOfQueriesInsightCard/styles.ts similarity index 100% rename from src/components/Insights/common/insights/HighNumberOfQueriesInsight/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointHighNumberOfQueriesInsightCard/styles.ts diff --git a/src/components/Insights/common/insights/HighNumberOfQueriesInsight/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointHighNumberOfQueriesInsightCard/types.ts similarity index 54% rename from src/components/Insights/common/insights/HighNumberOfQueriesInsight/types.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointHighNumberOfQueriesInsightCard/types.ts index 12de243f9..c3bfde43a 100644 --- a/src/components/Insights/common/insights/HighNumberOfQueriesInsight/types.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointHighNumberOfQueriesInsightCard/types.ts @@ -1,11 +1,12 @@ import { EndpointHighNumberOfQueriesInsight, - InsightProps, InsightType, Trace -} from "../../../types"; +} from "../../../../types"; +import { InsightCardCommonProps } from "../common/InsightCard/types"; -export interface HighNumberOfQueriesInsightProps extends InsightProps { +export interface EndpointHighNumberOfQueriesInsightCardProps + extends InsightCardCommonProps { insight: EndpointHighNumberOfQueriesInsight; onTraceButtonClick: ( trace: Trace, diff --git a/src/components/Insights/common/insights/EndpointQueryOptimizationInsight/EndpointQueryOptimizationInsight.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationInsightCard/EndpointQueryOptimizationInsightCard.stories.tsx similarity index 86% rename from src/components/Insights/common/insights/EndpointQueryOptimizationInsight/EndpointQueryOptimizationInsight.stories.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationInsightCard/EndpointQueryOptimizationInsightCard.stories.tsx index 9aa946dbd..31472c694 100644 --- a/src/components/Insights/common/insights/EndpointQueryOptimizationInsight/EndpointQueryOptimizationInsight.stories.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationInsightCard/EndpointQueryOptimizationInsightCard.stories.tsx @@ -1,11 +1,12 @@ import { Meta, StoryObj } from "@storybook/react"; -import { EndpointQueryOptimizationInsight } from "."; +import { EndpointQueryOptimizationInsightCard } from "."; import { mockedEndpointQueryOptimizationInsight } from "./mockData"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction -const meta: Meta = { - title: "Insights/common/insights/EndpointQueryOptimizationInsight", - component: EndpointQueryOptimizationInsight, +const meta: Meta = { + title: + "Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationInsightCard", + component: EndpointQueryOptimizationInsightCard, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout layout: "fullscreen" @@ -22,7 +23,7 @@ export const Default: Story = { } }; -export const ManySpans: Story = { +export const WithMultipleSpans: Story = { args: { insight: { ...mockedEndpointQueryOptimizationInsight, diff --git a/src/components/Insights/common/insights/EndpointQueryOptimizationInsight/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationInsightCard/index.tsx similarity index 64% rename from src/components/Insights/common/insights/EndpointQueryOptimizationInsight/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationInsightCard/index.tsx index a1bec078c..b3f9d3cca 100644 --- a/src/components/Insights/common/insights/EndpointQueryOptimizationInsight/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationInsightCard/index.tsx @@ -1,19 +1,19 @@ import { ReactNode, useState } from "react"; -import { getDurationString } from "../../../../../utils/getDurationString"; -import { Link } from "../../../../common/v3/Link"; -import { Tooltip } from "../../../../common/v3/Tooltip"; +import { getDurationString } from "../../../../../../utils/getDurationString"; +import { Link } from "../../../../../common/v3/Link"; +import { Tooltip } from "../../../../../common/v3/Tooltip"; import { EndpointQueryOptimizationSpan, InsightType, Trace -} from "../../../types"; -import { InsightCard } from "../../InsightCard"; -import { ColumnsContainer } from "../../InsightCard/ColumnsContainer"; -import { KeyValue } from "../../InsightCard/KeyValue"; -import { Select } from "../../InsightCard/Select"; +} from "../../../../types"; +import { InsightCard } from "../common/InsightCard"; +import { ColumnsContainer } from "../common/InsightCard/ColumnsContainer"; +import { KeyValue } from "../common/InsightCard/KeyValue"; +import { Select } from "../common/InsightCard/Select"; import { ContentContainer, Description, Details } from "../styles"; import * as s from "./styles"; -import { EndpointQueryOptimizationInsightProps } from "./types"; +import { EndpointQueryOptimizationInsightCardProps } from "./types"; const renderOptions = ( spans: EndpointQueryOptimizationSpan[], @@ -38,23 +38,33 @@ const renderOptions = ( }; }); -export const EndpointQueryOptimizationInsight = ( - props: EndpointQueryOptimizationInsightProps -) => { +/** + * @deprecated + */ +export const EndpointQueryOptimizationInsightCard = ({ + insight, + onAssetLinkClick, + onJiraTicketCreate, + onTraceButtonClick, + onRecalculate, + onRefresh, + isJiraHintEnabled, + onGoToSpan, + isMarkAsReadButtonEnabled +}: EndpointQueryOptimizationInsightCardProps) => { const [selectedSpan, setSelectedSpan] = useState( - props.insight.spans ? props.insight.spans[0] : null + insight.spans ? insight.spans[0] : null ); const handleSpanLinkClick = (spanCodeObjectId: string) => { - props.onAssetLinkClick(spanCodeObjectId, props.insight.type); + onAssetLinkClick(spanCodeObjectId, insight.type); }; const handleTicketInfoButtonClick = ( spanCodeObjectId: string | undefined, event: string ) => { - props.onJiraTicketCreate && - props.onJiraTicketCreate(props.insight, spanCodeObjectId, event); + onJiraTicketCreate && onJiraTicketCreate(insight, spanCodeObjectId, event); }; const handleTraceButtonClick = ( @@ -62,12 +72,12 @@ export const EndpointQueryOptimizationInsight = ( insightType: InsightType, spanCodeObjectId: string ) => { - props.onTraceButtonClick(trace, insightType, spanCodeObjectId); + onTraceButtonClick(trace, insightType, spanCodeObjectId); }; return (
@@ -76,13 +86,13 @@ export const EndpointQueryOptimizationInsight = ( value={selectedSpan?.spanInfo.spanCodeObjectId} onChange={(selectedOption) => { const selected = - props.insight.spans.find( + insight.spans.find( (x) => x.spanInfo.spanCodeObjectId === selectedOption ) || null; setSelectedSpan(selected); }} - options={renderOptions(props.insight.spans, handleSpanLinkClick)} + options={renderOptions(insight.spans, handleSpanLinkClick)} />
{selectedSpan && ( @@ -94,8 +104,8 @@ export const EndpointQueryOptimizationInsight = ( )} } - onRecalculate={props.onRecalculate} - onRefresh={props.onRefresh} + onRecalculate={onRecalculate} + onRefresh={onRefresh} onGoToTrace={ selectedSpan?.traceId ? () => @@ -104,7 +114,7 @@ export const EndpointQueryOptimizationInsight = ( name: selectedSpan?.spanInfo.displayName, id: selectedSpan?.traceId }, - props.insight.type, + insight.type, selectedSpan?.spanInfo.spanCodeObjectId ) : undefined @@ -113,10 +123,10 @@ export const EndpointQueryOptimizationInsight = ( jiraTicketInfo={{ ticketLink: selectedSpan?.ticketLink, spanCodeObjectId: selectedSpan?.spanInfo.spanCodeObjectId, - isHintEnabled: props.isJiraHintEnabled + isHintEnabled: isJiraHintEnabled }} - onGoToSpan={props.onGoToSpan} - isMarkAsReadButtonEnabled={props.isMarkAsReadButtonEnabled} + onGoToSpan={onGoToSpan} + isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled} /> ); }; diff --git a/src/components/Insights/common/insights/EndpointQueryOptimizationInsight/mockData.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationInsightCard/mockData.ts similarity index 99% rename from src/components/Insights/common/insights/EndpointQueryOptimizationInsight/mockData.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationInsightCard/mockData.ts index 92be6fcd7..fd8f0f303 100644 --- a/src/components/Insights/common/insights/EndpointQueryOptimizationInsight/mockData.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationInsightCard/mockData.ts @@ -3,7 +3,7 @@ import { InsightCategory, InsightScope, InsightType -} from "../../../types"; +} from "../../../../types"; export const mockedEndpointQueryOptimizationInsight: EndpointQueryOptimizationInsight = { diff --git a/src/components/Insights/common/insights/EndpointQueryOptimizationInsight/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationInsightCard/styles.ts similarity index 65% rename from src/components/Insights/common/insights/EndpointQueryOptimizationInsight/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationInsightCard/styles.ts index 0812e9ff7..0c253209f 100644 --- a/src/components/Insights/common/insights/EndpointQueryOptimizationInsight/styles.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationInsightCard/styles.ts @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { footnoteRegularTypography } from "../../../../common/App/typographies"; +import { footnoteRegularTypography } from "../../../../../common/App/typographies"; export const SelectedItem = styled.div` ${footnoteRegularTypography} diff --git a/src/components/Insights/common/insights/EndpointQueryOptimizationInsight/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationInsightCard/types.ts similarity index 62% rename from src/components/Insights/common/insights/EndpointQueryOptimizationInsight/types.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationInsightCard/types.ts index 02efc09ce..14b85df45 100644 --- a/src/components/Insights/common/insights/EndpointQueryOptimizationInsight/types.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationInsightCard/types.ts @@ -1,11 +1,12 @@ import { EndpointQueryOptimizationInsight, - InsightProps, InsightType, Trace -} from "../../../types"; +} from "../../../../types"; +import { InsightCardCommonProps } from "../common/InsightCard/types"; -export interface EndpointQueryOptimizationInsightProps extends InsightProps { +export interface EndpointQueryOptimizationInsightCardProps + extends InsightCardCommonProps { insight: EndpointQueryOptimizationInsight; onAssetLinkClick: ( spanCodeObjectId: string, diff --git a/src/components/Insights/common/insights/EndpointQueryOptimizationV2Insight/EndpointQueryOptimizationV2Insight.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationV2InsightCard/EndpointQueryOptimizationV2InsightCard.stories.tsx similarity index 65% rename from src/components/Insights/common/insights/EndpointQueryOptimizationV2Insight/EndpointQueryOptimizationV2Insight.stories.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationV2InsightCard/EndpointQueryOptimizationV2InsightCard.stories.tsx index a823f92d7..2f01a5143 100644 --- a/src/components/Insights/common/insights/EndpointQueryOptimizationV2Insight/EndpointQueryOptimizationV2Insight.stories.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationV2InsightCard/EndpointQueryOptimizationV2InsightCard.stories.tsx @@ -1,11 +1,12 @@ import { Meta, StoryObj } from "@storybook/react"; -import { EndpointQueryOptimizationV2Insight } from "."; +import { EndpointQueryOptimizationV2InsightCard } from "."; import { mockedEndpointQueryOptimizationV2Insight } from "./mockData"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction -const meta: Meta = { - title: "Insights/common/insights/EndpointQueryOptimizationV2Insight", - component: EndpointQueryOptimizationV2Insight, +const meta: Meta = { + title: + "Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationV2InsightCard", + component: EndpointQueryOptimizationV2InsightCard, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout layout: "fullscreen" diff --git a/src/components/Insights/common/insights/EndpointQueryOptimizationV2Insight/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationV2InsightCard/index.tsx similarity index 79% rename from src/components/Insights/common/insights/EndpointQueryOptimizationV2Insight/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationV2InsightCard/index.tsx index a173ace4a..55d571a0f 100644 --- a/src/components/Insights/common/insights/EndpointQueryOptimizationV2Insight/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationV2InsightCard/index.tsx @@ -1,13 +1,13 @@ -import { getDurationString } from "../../../../../utils/getDurationString"; -import { InsightType, Trace } from "../../../types"; -import { InsightCard } from "../../InsightCard"; -import { ColumnsContainer } from "../../InsightCard/ColumnsContainer"; -import { KeyValue } from "../../InsightCard/KeyValue"; +import { getDurationString } from "../../../../../../utils/getDurationString"; +import { InsightType, Trace } from "../../../../types"; +import { InsightCard } from "../common/InsightCard"; +import { ColumnsContainer } from "../common/InsightCard/ColumnsContainer"; +import { KeyValue } from "../common/InsightCard/KeyValue"; import { ContentContainer, Details } from "../styles"; import * as s from "./styles"; -import { EndpointQueryOptimizationV2InsightProps } from "./types"; +import { EndpointQueryOptimizationV2InsightCardProps } from "./types"; -export const EndpointQueryOptimizationV2Insight = ({ +export const EndpointQueryOptimizationV2InsightCard = ({ insight, onAssetLinkClick, onTraceButtonClick, @@ -17,7 +17,7 @@ export const EndpointQueryOptimizationV2Insight = ({ onRefresh, onGoToSpan, isMarkAsReadButtonEnabled -}: EndpointQueryOptimizationV2InsightProps) => { +}: EndpointQueryOptimizationV2InsightCardProps) => { const handleSpanLinkClick = (spanCodeObjectId: string) => { onAssetLinkClick(spanCodeObjectId, insight.type); }; diff --git a/src/components/Insights/common/insights/EndpointQueryOptimizationV2Insight/mockData.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationV2InsightCard/mockData.ts similarity index 99% rename from src/components/Insights/common/insights/EndpointQueryOptimizationV2Insight/mockData.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationV2InsightCard/mockData.ts index 391832c96..080570ab1 100644 --- a/src/components/Insights/common/insights/EndpointQueryOptimizationV2Insight/mockData.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationV2InsightCard/mockData.ts @@ -3,7 +3,7 @@ import { InsightCategory, InsightScope, InsightType -} from "../../../types"; +} from "../../../../types"; export const mockedEndpointQueryOptimizationV2Insight: EndpointQueryOptimizationV2Insight = { diff --git a/src/components/Insights/common/insights/EndpointBottleneckInsight/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationV2InsightCard/styles.ts similarity index 70% rename from src/components/Insights/common/insights/EndpointBottleneckInsight/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationV2InsightCard/styles.ts index 4a383a4bb..03fd84d20 100644 --- a/src/components/Insights/common/insights/EndpointBottleneckInsight/styles.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationV2InsightCard/styles.ts @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { ListItem } from "../../InsightCard/ListItem"; +import { ListItem } from "../common/InsightCard/ListItem"; export const SpanListItem = styled(ListItem)` height: 28px; diff --git a/src/components/Insights/common/insights/EndpointQueryOptimizationV2Insight/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationV2InsightCard/types.ts similarity index 62% rename from src/components/Insights/common/insights/EndpointQueryOptimizationV2Insight/types.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationV2InsightCard/types.ts index 357d4f96b..0a0b11568 100644 --- a/src/components/Insights/common/insights/EndpointQueryOptimizationV2Insight/types.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationV2InsightCard/types.ts @@ -1,11 +1,12 @@ import { EndpointQueryOptimizationV2Insight, - InsightProps, InsightType, Trace -} from "../../../types"; +} from "../../../../types"; +import { InsightCardCommonProps } from "../common/InsightCard/types"; -export interface EndpointQueryOptimizationV2InsightProps extends InsightProps { +export interface EndpointQueryOptimizationV2InsightCardProps + extends InsightCardCommonProps { insight: EndpointQueryOptimizationV2Insight; onAssetLinkClick: ( spanCodeObjectId: string, diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSessionInViewInsightCard/EndpointSessionInViewInsightCard.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSessionInViewInsightCard/EndpointSessionInViewInsightCard.stories.tsx new file mode 100644 index 000000000..ca6929c30 --- /dev/null +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSessionInViewInsightCard/EndpointSessionInViewInsightCard.stories.tsx @@ -0,0 +1,24 @@ +import { Meta, StoryObj } from "@storybook/react"; +import { EndpointSessionInViewInsightCard } from "."; +import { mockedEndpointSessionInViewInsight } from "./mockData"; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction +const meta: Meta = { + title: + "Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSessionInViewInsightCard", + component: EndpointSessionInViewInsightCard, + 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; + +export const Default: Story = { + args: { + insight: mockedEndpointSessionInViewInsight + } +}; diff --git a/src/components/Insights/common/insights/SessionInViewInsight/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSessionInViewInsightCard/index.tsx similarity index 62% rename from src/components/Insights/common/insights/SessionInViewInsight/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSessionInViewInsightCard/index.tsx index 498a617e3..f67436a1d 100644 --- a/src/components/Insights/common/insights/SessionInViewInsight/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSessionInViewInsightCard/index.tsx @@ -1,30 +1,38 @@ import { useContext } from "react"; -import { usePagination } from "../../../../../hooks/usePagination"; -import { ConfigContext } from "../../../../common/App/ConfigContext"; -import { TraceIcon } from "../../../../common/icons/12px/TraceIcon"; -import { Button } from "../../../../common/v3/Button"; -import { Pagination } from "../../../../common/v3/Pagination"; -import { Tooltip } from "../../../../common/v3/Tooltip"; -import { InsightType, Trace } from "../../../types"; -import { InsightCard } from "../../InsightCard"; -import { ListItem } from "../../InsightCard/ListItem"; +import { usePagination } from "../../../../../../hooks/usePagination"; +import { ConfigContext } from "../../../../../common/App/ConfigContext"; +import { TraceIcon } from "../../../../../common/icons/12px/TraceIcon"; +import { Button } from "../../../../../common/v3/Button"; +import { Pagination } from "../../../../../common/v3/Pagination"; +import { Tooltip } from "../../../../../common/v3/Tooltip"; +import { InsightType, Trace } from "../../../../types"; +import { InsightCard } from "../common/InsightCard"; +import { ListItem } from "../common/InsightCard/ListItem"; import { ContentContainer, Description } from "../styles"; import * as s from "./styles"; -import { SessionInViewInsightProps } from "./types"; +import { EndpointSessionInViewInsightCardProps } from "./types"; const PAGE_SIZE = 3; -export const SessionInViewInsight = (props: SessionInViewInsightProps) => { +export const EndpointSessionInViewInsightCard = ({ + insight, + onAssetLinkClick, + onTraceButtonClick, + onRecalculate, + onRefresh, + onGoToSpan, + isMarkAsReadButtonEnabled +}: EndpointSessionInViewInsightCardProps) => { const config = useContext(ConfigContext); const [pageItems, page, setPage] = usePagination( - props.insight.spans, + insight.spans, PAGE_SIZE, - props.insight.id + insight.id ); const handleLinkClick = (spanCodeObjectId: string) => { - props.onAssetLinkClick(spanCodeObjectId, props.insight.type); + onAssetLinkClick(spanCodeObjectId, insight.type); }; const handleTraceButtonClick = ( @@ -32,12 +40,12 @@ export const SessionInViewInsight = (props: SessionInViewInsightProps) => { insightType: InsightType, spanCodeObjectId: string ) => { - props.onTraceButtonClick(trace, insightType, spanCodeObjectId); + onTraceButtonClick(trace, insightType, spanCodeObjectId); }; return ( @@ -60,7 +68,7 @@ export const SessionInViewInsight = (props: SessionInViewInsightProps) => { name: spanName, id: traceId }, - props.insight.type, + insight.type, spanCodeObjectId ) } @@ -79,7 +87,7 @@ export const SessionInViewInsight = (props: SessionInViewInsightProps) => { ); })} { } - onRecalculate={props.onRecalculate} - onRefresh={props.onRefresh} - onGoToSpan={props.onGoToSpan} - isMarkAsReadButtonEnabled={props.isMarkAsReadButtonEnabled} + onRecalculate={onRecalculate} + onRefresh={onRefresh} + onGoToSpan={onGoToSpan} + isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled} /> ); }; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSessionInViewInsightCard/mockData.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSessionInViewInsightCard/mockData.ts new file mode 100644 index 000000000..d8459842e --- /dev/null +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSessionInViewInsightCard/mockData.ts @@ -0,0 +1,165 @@ +import { + EndpointSessionInViewInsight, + InsightCategory, + InsightScope, + InsightType +} from "../../../../types"; + +export const mockedEndpointSessionInViewInsight: EndpointSessionInViewInsight = + { + sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", + id: "60b55792-8262-4c5a-9628-7cce7979ad6d", + 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: "Session in View Query", + type: InsightType.EndpointSessionInView, + category: InsightCategory.Performance, + specifity: 2, + importance: 3, + isDismissed: false, + isDismissible: true, + spans: [ + { + renderSpan: { + name: "Render owners/ownerDetails", + displayName: "Render owners/ownerDetails", + instrumentationLibrary: "io.opentelemetry.spring-webmvc-6.0", + spanCodeObjectId: + "span:io.opentelemetry.spring-webmvc-6.0$_$Render owners/ownerDetails", + methodCodeObjectId: "", + kind: "Internal", + codeObjectId: "" + }, + clientSpan: { + name: "6AFAE587D3FEC813CD353F4CC91076", + displayName: + "select p1_0.pet_id,p1_0.id,p1_0.vaccine_date from pet_vaccines p1_0 where p1_0.pet_id=? order by p1_0.vaccine_date", + instrumentationLibrary: "io.opentelemetry.jdbc", + spanCodeObjectId: + "span:io.opentelemetry.jdbc$_$6AFAE587D3FEC813CD353F4CC91076", + methodCodeObjectId: "", + kind: "Client", + codeObjectId: "" + }, + traceId: "937BDA41E6AAEAF9B140E3A7FD02D4B0" + }, + { + renderSpan: { + name: "Render owners/ownerDetails 2", + displayName: "Render owners/ownerDetails 2", + instrumentationLibrary: "io.opentelemetry.spring-webmvc-6.0", + spanCodeObjectId: + "span:io.opentelemetry.spring-webmvc-6.0$_$Render owners/ownerDetails 2", + methodCodeObjectId: "", + kind: "Internal", + codeObjectId: "" + }, + clientSpan: { + name: "6AFAE587D3FEC813CD353F4CC910762", + displayName: + "select p1_0.pet_id,p1_0.id,p1_0.vaccine_date from pet_vaccines p1_0 where p1_0.pet_id=? order by p1_0.vaccine_date 2", + instrumentationLibrary: "io.opentelemetry.jdbc", + spanCodeObjectId: + "span:io.opentelemetry.jdbc$_$6AFAE587D3FEC813CD353F4CC910762", + methodCodeObjectId: "", + kind: "Client", + codeObjectId: "" + }, + traceId: "937BDA41E6AAEAF9B140E3A7FD02D4B02" + }, + { + renderSpan: { + name: "Render owners/ownerDetails 3", + displayName: "Render owners/ownerDetails 3", + instrumentationLibrary: "io.opentelemetry.spring-webmvc-6.0", + spanCodeObjectId: + "span:io.opentelemetry.spring-webmvc-6.0$_$Render owners/ownerDetails 3", + methodCodeObjectId: "", + kind: "Internal", + codeObjectId: "" + }, + clientSpan: { + name: "6AFAE587D3FEC813CD353F4CC910763", + displayName: + "select p1_0.pet_id,p1_0.id,p1_0.vaccine_date from pet_vaccines p1_0 where p1_0.pet_id=? order by p1_0.vaccine_date 3", + instrumentationLibrary: "io.opentelemetry.jdbc", + spanCodeObjectId: + "span:io.opentelemetry.jdbc$_$6AFAE587D3FEC813CD353F4CC910763", + methodCodeObjectId: "", + kind: "Client", + codeObjectId: "" + }, + traceId: "937BDA41E6AAEAF9B140E3A7FD02D4B03" + }, + { + renderSpan: { + name: "Render owners/ownerDetails 4", + displayName: "Render owners/ownerDetails 4", + instrumentationLibrary: "io.opentelemetry.spring-webmvc-6.0", + spanCodeObjectId: + "span:io.opentelemetry.spring-webmvc-6.0$_$Render owners/ownerDetails 4", + methodCodeObjectId: "", + kind: "Internal", + codeObjectId: "" + }, + clientSpan: { + name: "6AFAE587D3FEC813CD353F4CC910764", + displayName: + "select p1_0.pet_id,p1_0.id,p1_0.vaccine_date from pet_vaccines p1_0 where p1_0.pet_id=? order by p1_0.vaccine_date 4", + instrumentationLibrary: "io.opentelemetry.jdbc", + spanCodeObjectId: + "span:io.opentelemetry.jdbc$_$6AFAE587D3FEC813CD353F4CC910764", + methodCodeObjectId: "", + kind: "Client", + codeObjectId: "" + }, + traceId: "937BDA41E6AAEAF9B140E3A7FD02D4B04" + } + ], + scope: InsightScope.EntrySpan, + endpointSpan: "HTTP GET /owners/{ownerId}", + spanCodeObjectId: + "span:io.opentelemetry.tomcat-10.0$_$HTTP GET /owners/{ownerId}", + route: "epHTTP:HTTP GET /owners/{ownerId}", + serviceName: "spring-petclinic", + spanInfo: { + name: "HTTP GET /owners/{ownerId}", + displayName: "HTTP GET /owners/{ownerId}", + instrumentationLibrary: "io.opentelemetry.tomcat-10.0", + spanCodeObjectId: + "span:io.opentelemetry.tomcat-10.0$_$HTTP GET /owners/{ownerId}", + methodCodeObjectId: + "method:org.springframework.samples.petclinic.owner.OwnerController$_$showOwner", + kind: "Server", + codeObjectId: + "org.springframework.samples.petclinic.owner.OwnerController$_$showOwner" + }, + shortDisplayInfo: { + title: "", + targetDisplayName: "", + subtitle: "", + description: "" + }, + codeObjectId: + "org.springframework.samples.petclinic.owner.OwnerController$_$showOwner", + decorators: [ + { + title: "Session in View", + description: "Session in View query detected" + } + ], + environment: "BOB-LAPTOP[LOCAL]", + severity: 0.0, + isRecalculateEnabled: false, + prefixedCodeObjectId: + "method:org.springframework.samples.petclinic.owner.OwnerController$_$showOwner", + customStartTime: null, + actualStartTime: "2023-08-10T08:59:14.093073Z" + }; diff --git a/src/components/Insights/common/insights/SessionInViewInsight/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSessionInViewInsightCard/styles.ts similarity index 100% rename from src/components/Insights/common/insights/SessionInViewInsight/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSessionInViewInsightCard/styles.ts diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSessionInViewInsightCard/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSessionInViewInsightCard/types.ts new file mode 100644 index 000000000..da46ab0f1 --- /dev/null +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSessionInViewInsightCard/types.ts @@ -0,0 +1,20 @@ +import { + EndpointSessionInViewInsight, + InsightType, + Trace +} from "../../../../types"; +import { InsightCardCommonProps } from "../common/InsightCard/types"; + +export interface EndpointSessionInViewInsightCardProps + extends InsightCardCommonProps { + insight: EndpointSessionInViewInsight; + onAssetLinkClick: ( + spanCodeObjectId: string, + insightType: InsightType + ) => void; + onTraceButtonClick: ( + trace: Trace, + insightType: InsightType, + spanCodeObjectId: string + ) => void; +} diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSlowdownSourceInsightCard/EndpointSlowdownSourceInsightCard.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSlowdownSourceInsightCard/EndpointSlowdownSourceInsightCard.stories.tsx new file mode 100644 index 000000000..82a07b542 --- /dev/null +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSlowdownSourceInsightCard/EndpointSlowdownSourceInsightCard.stories.tsx @@ -0,0 +1,24 @@ +import { Meta, StoryObj } from "@storybook/react"; +import { EndpointSlowdownSourceInsightCard } from "."; +import { mockedEndpointSlowdownSourceInsight } from "./mockData"; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction +const meta: Meta = { + title: + "Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSlowdownSourceInsightCard", + component: EndpointSlowdownSourceInsightCard, + 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; + +export const Default: Story = { + args: { + insight: mockedEndpointSlowdownSourceInsight + } +}; diff --git a/src/components/Insights/common/insights/EndpointSlowdownSourceInsight/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSlowdownSourceInsightCard/index.tsx similarity index 65% rename from src/components/Insights/common/insights/EndpointSlowdownSourceInsight/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSlowdownSourceInsightCard/index.tsx index a93938c0f..665f00120 100644 --- a/src/components/Insights/common/insights/EndpointSlowdownSourceInsight/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSlowdownSourceInsightCard/index.tsx @@ -1,23 +1,28 @@ -import { EndpointSlowdownSource } from "../../../types"; -import { DurationChange } from "../../DurationChange"; -import { InsightCard } from "../../InsightCard"; -import { ListItem } from "../../InsightCard/ListItem"; +import { EndpointSlowdownSource } from "../../../../types"; +import { DurationChange } from "../common/DurationChange"; +import { InsightCard } from "../common/InsightCard"; +import { ListItem } from "../common/InsightCard/ListItem"; import { ContentContainer, Description } from "../styles"; import * as s from "./styles"; -import { EndpointSlowdownSourceInsightProps } from "./types"; +import { EndpointSlowdownSourceInsightCardProps } from "./types"; -export const EndpointSlowdownSourceInsight = ( - props: EndpointSlowdownSourceInsightProps -) => { +export const EndpointSlowdownSourceInsightCard = ({ + insight, + onAssetLinkClick, + onRecalculate, + onRefresh, + onGoToSpan, + isMarkAsReadButtonEnabled +}: EndpointSlowdownSourceInsightCardProps) => { const handleSpanLinkClick = (spanCodeObjectId: string) => { - props.onAssetLinkClick(spanCodeObjectId, props.insight.type); + onAssetLinkClick(spanCodeObjectId, insight.type); }; - const p50Sources = props.insight.endpointSlowdownSources?.filter( + const p50Sources = insight.endpointSlowdownSources?.filter( (x) => x.percentile === "0.5" ); - const p95Sources = props.insight.endpointSlowdownSources?.filter( + const p95Sources = insight.endpointSlowdownSources?.filter( (x) => x.percentile === "0.95" ); @@ -48,7 +53,7 @@ export const EndpointSlowdownSourceInsight = ( return ( @@ -68,10 +73,10 @@ export const EndpointSlowdownSourceInsight = ( )} } - onRecalculate={props.onRecalculate} - onRefresh={props.onRefresh} - onGoToSpan={props.onGoToSpan} - isMarkAsReadButtonEnabled={props.isMarkAsReadButtonEnabled} + onRecalculate={onRecalculate} + onRefresh={onRefresh} + onGoToSpan={onGoToSpan} + isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled} /> ); }; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSlowdownSourceInsightCard/mockData.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSlowdownSourceInsightCard/mockData.ts new file mode 100644 index 000000000..9519006cd --- /dev/null +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSlowdownSourceInsightCard/mockData.ts @@ -0,0 +1,119 @@ +import { + EndpointSlowdownSourceInsight, + InsightCategory, + InsightScope, + InsightType +} from "../../../../types"; + +export const mockedEndpointSlowdownSourceInsight: EndpointSlowdownSourceInsight = + { + sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", + id: "60b55792-8262-4c5d-9628-7cde7979ad6d", + 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: "Endpoint Slowdown Source", + type: InsightType.EndpointSlowdownSource, + category: InsightCategory.Performance, + specifity: 4, + importance: 2, + isDismissed: false, + isDismissible: true, + endpointSlowdownSources: [ + { + percentile: "0.5", + spanInfo: { + name: "WaitForLock", + displayName: "WaitForLock", + instrumentationLibrary: "SampleInsightsController", + spanCodeObjectId: "span:SampleInsightsController$_$WaitForLock", + methodCodeObjectId: null, + kind: "Internal", + codeObjectId: null + }, + level: 0, + previousDuration: { + value: 455.16, + unit: "ms", + raw: 455156000 + }, + currentDuration: { + value: 3.22, + unit: "sec", + raw: 3222871000 + }, + changeTime: "2023-06-30T11:09:55.000Z", + changeVerified: false + }, + { + percentile: "0.95", + spanInfo: { + name: "WaitForLock", + displayName: "WaitForLock", + instrumentationLibrary: "SampleInsightsController", + spanCodeObjectId: "span:SampleInsightsController$_$WaitForLock", + methodCodeObjectId: null, + kind: "Internal", + codeObjectId: null + }, + level: 0, + previousDuration: { + value: 1.6, + unit: "sec", + raw: 1604577000 + }, + currentDuration: { + value: 2.62, + unit: "sec", + raw: 2619854000 + }, + changeTime: "2023-06-30T11:09:54.000Z", + changeVerified: false + } + ], + decorators: [ + { + title: "Endpoint Duration Slowdown Source", + description: "Some spans significantly slowdown this endpoint" + } + ], + scope: InsightScope.EntrySpan, + endpointSpan: "HTTP GET SampleInsights/lock/{milisec}", + spanCodeObjectId: + "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/lock/{milisec}", + route: "epHTTP:HTTP GET SampleInsights/lock/{milisec}", + serviceName: "Sample.MoneyTransfer.API", + spanInfo: { + name: "HTTP GET SampleInsights/lock/{milisec}", + displayName: "HTTP GET SampleInsights/lock/{milisec}", + instrumentationLibrary: "OpenTelemetry.Instrumentation.AspNetCore", + spanCodeObjectId: + "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/lock/{milisec}", + methodCodeObjectId: + "method:Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double)", + kind: "Server", + codeObjectId: + "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double)" + }, + shortDisplayInfo: { + title: "", + targetDisplayName: "", + subtitle: "", + description: "" + }, + codeObjectId: + "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double)", + environment: "BOB-LAPTOP[LOCAL]", + severity: 0, + isRecalculateEnabled: false, + prefixedCodeObjectId: + "method:Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double)", + customStartTime: null, + actualStartTime: "2023-06-16T11:10:21.334Z" + }; diff --git a/src/components/Insights/common/insights/EndpointSlowdownSourceInsight/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSlowdownSourceInsightCard/styles.ts similarity index 74% rename from src/components/Insights/common/insights/EndpointSlowdownSourceInsight/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSlowdownSourceInsightCard/styles.ts index 20b6a579f..6c7751fae 100644 --- a/src/components/Insights/common/insights/EndpointSlowdownSourceInsight/styles.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSlowdownSourceInsightCard/styles.ts @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { subscriptRegularTypography } from "../../../../common/App/typographies"; +import { subscriptRegularTypography } from "../../../../../common/App/typographies"; export const SourceList = styled.div` display: flex; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSlowdownSourceInsightCard/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSlowdownSourceInsightCard/types.ts new file mode 100644 index 000000000..be646b308 --- /dev/null +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSlowdownSourceInsightCard/types.ts @@ -0,0 +1,11 @@ +import { EndpointSlowdownSourceInsight, InsightType } from "../../../../types"; +import { InsightCardCommonProps } from "../common/InsightCard/types"; + +export interface EndpointSlowdownSourceInsightCardProps + extends InsightCardCommonProps { + insight: EndpointSlowdownSourceInsight; + onAssetLinkClick: ( + spanCodeObjectId: string, + insightType: InsightType + ) => void; +} diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSpanNPlusOneInsightInsightCard/EndpointSpanNPlusOneInsightCard.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSpanNPlusOneInsightInsightCard/EndpointSpanNPlusOneInsightCard.stories.tsx new file mode 100644 index 000000000..aa27ed2b4 --- /dev/null +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSpanNPlusOneInsightInsightCard/EndpointSpanNPlusOneInsightCard.stories.tsx @@ -0,0 +1,24 @@ +import { Meta, StoryObj } from "@storybook/react"; +import { EndpointSpanNPlusOneInsightCard } from "."; +import { mockedEndpointSpanNPlusOneInsight } from "./mockData"; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction +const meta: Meta = { + title: + "Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSpanNPlusOneInsightCard", + component: EndpointSpanNPlusOneInsightCard, + 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; + +export const Default: Story = { + args: { + insight: mockedEndpointSpanNPlusOneInsight + } +}; diff --git a/src/components/Insights/common/insights/EndpointNPlusOneInsight/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSpanNPlusOneInsightInsightCard/index.tsx similarity index 60% rename from src/components/Insights/common/insights/EndpointNPlusOneInsight/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSpanNPlusOneInsightInsightCard/index.tsx index 6d51a1c4a..fbff61095 100644 --- a/src/components/Insights/common/insights/EndpointNPlusOneInsight/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSpanNPlusOneInsightInsightCard/index.tsx @@ -1,28 +1,35 @@ -import { getDurationString } from "../../../../../utils/getDurationString"; -import { InsightType, Trace } from "../../../types"; -import { Info } from "../../Info"; -import { InsightCard } from "../../InsightCard"; -import { ColumnsContainer } from "../../InsightCard/ColumnsContainer"; -import { KeyValue } from "../../InsightCard/KeyValue"; +import { getDurationString } from "../../../../../../utils/getDurationString"; +import { InsightType, Trace } from "../../../../types"; +import { Info } from "../common/Info"; +import { InsightCard } from "../common/InsightCard"; +import { ColumnsContainer } from "../common/InsightCard/ColumnsContainer"; +import { KeyValue } from "../common/InsightCard/KeyValue"; import { ContentContainer, Description, Details } from "../styles"; import * as s from "./styles"; -import { EndpointNPlusOneInsightProps } from "./types"; +import { EndpointSpanNPlusOneInsightCardProps } from "./types"; -export const EndpointNPlusOneInsight = ( - props: EndpointNPlusOneInsightProps -) => { - const { span } = props.insight; +export const EndpointSpanNPlusOneInsightCard = ({ + insight, + onAssetLinkClick, + onJiraTicketCreate, + onTraceButtonClick, + isJiraHintEnabled, + onRecalculate, + onGoToSpan, + onRefresh, + isMarkAsReadButtonEnabled +}: EndpointSpanNPlusOneInsightCardProps) => { + const { span } = insight; const handleSpanLinkClick = (spanCodeObjectId: string) => { - props.onAssetLinkClick(spanCodeObjectId, props.insight.type); + onAssetLinkClick(spanCodeObjectId, insight.type); }; const handleTicketInfoButtonClick = ( spanCodeObjectId: string | undefined, event: string ) => { - props.onJiraTicketCreate && - props.onJiraTicketCreate(props.insight, spanCodeObjectId, event); + onJiraTicketCreate && onJiraTicketCreate(insight, spanCodeObjectId, event); }; const handleTraceButtonClick = ( @@ -30,7 +37,7 @@ export const EndpointNPlusOneInsight = ( insightType: InsightType, spanCodeObjectId: string ) => { - props.onTraceButtonClick(trace, insightType, spanCodeObjectId); + onTraceButtonClick(trace, insightType, spanCodeObjectId); }; const spanInfo = span.internalSpan || span.clientSpan; @@ -38,7 +45,7 @@ export const EndpointNPlusOneInsight = ( return ( handleTraceButtonClick( @@ -46,13 +53,13 @@ export const EndpointNPlusOneInsight = ( name: spanName, id: span.traceId }, - props.insight.type, + insight.type, spanInfo.spanCodeObjectId ) } jiraTicketInfo={{ ticketLink: span.ticketLink, - isHintEnabled: props.isJiraHintEnabled + isHintEnabled: isJiraHintEnabled }} content={ @@ -82,10 +89,10 @@ export const EndpointNPlusOneInsight = ( } - onRecalculate={props.onRecalculate} - onRefresh={props.onRefresh} - onGoToSpan={props.onGoToSpan} - isMarkAsReadButtonEnabled={props.isMarkAsReadButtonEnabled} + onRecalculate={onRecalculate} + onRefresh={onRefresh} + onGoToSpan={onGoToSpan} + isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled} /> ); }; diff --git a/src/components/Insights/common/insights/EndpointNPlusOneInsight/mockData.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSpanNPlusOneInsightInsightCard/mockData.ts similarity index 94% rename from src/components/Insights/common/insights/EndpointNPlusOneInsight/mockData.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSpanNPlusOneInsightInsightCard/mockData.ts index 6f611f6f6..d29766577 100644 --- a/src/components/Insights/common/insights/EndpointNPlusOneInsight/mockData.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSpanNPlusOneInsightInsightCard/mockData.ts @@ -3,9 +3,9 @@ import { InsightCategory, InsightScope, InsightType -} from "../../../types"; +} from "../../../../types"; -export const mockedEndpointNPlusOneInsight: EndpointSpanNPlusOneInsight = { +export const mockedEndpointSpanNPlusOneInsight: EndpointSpanNPlusOneInsight = { id: "60b55792-8262-4c5d-9628-7cce7919ad6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", @@ -17,7 +17,7 @@ export const mockedEndpointNPlusOneInsight: EndpointSpanNPlusOneInsight = { ticketLink: null, impact: 0, name: "Suspected N+1 Query", - type: InsightType.EndpointSpanNPlusOneV2, + type: InsightType.EndpointSpanNPlusOne, category: InsightCategory.Performance, specifity: 2, importance: 3, diff --git a/src/components/Insights/common/insights/EndpointNPlusOneInsight/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSpanNPlusOneInsightInsightCard/styles.ts similarity index 80% rename from src/components/Insights/common/insights/EndpointNPlusOneInsight/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSpanNPlusOneInsightInsightCard/styles.ts index d32eb9164..ca5a34021 100644 --- a/src/components/Insights/common/insights/EndpointNPlusOneInsight/styles.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSpanNPlusOneInsightInsightCard/styles.ts @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { ListItem } from "../../InsightCard/ListItem"; +import { ListItem } from "../common/InsightCard/ListItem"; export const InfoContainer = styled.div` display: flex; diff --git a/src/components/Insights/common/insights/EndpointNPlusOneInsight/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSpanNPlusOneInsightInsightCard/types.ts similarity index 62% rename from src/components/Insights/common/insights/EndpointNPlusOneInsight/types.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSpanNPlusOneInsightInsightCard/types.ts index 4362c2b9d..4b684f274 100644 --- a/src/components/Insights/common/insights/EndpointNPlusOneInsight/types.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSpanNPlusOneInsightInsightCard/types.ts @@ -1,11 +1,12 @@ import { EndpointSpanNPlusOneInsight, - InsightProps, InsightType, Trace -} from "../../../types"; +} from "../../../../types"; +import { InsightCardCommonProps } from "../common/InsightCard/types"; -export interface EndpointNPlusOneInsightProps extends InsightProps { +export interface EndpointSpanNPlusOneInsightCardProps + extends InsightCardCommonProps { insight: EndpointSpanNPlusOneInsight; onAssetLinkClick: ( spanCodeObjectId: string, diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointUsageInsightCard/EndpointUsageInsightCard.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointUsageInsightCard/EndpointUsageInsightCard.stories.tsx new file mode 100644 index 000000000..473c3d538 --- /dev/null +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointUsageInsightCard/EndpointUsageInsightCard.stories.tsx @@ -0,0 +1,59 @@ +import { Meta, StoryObj } from "@storybook/react"; +import { EndpointUsageInsightCard } from "."; +import { InsightImportance, InsightType } from "../../../../types"; +import { mockedEndpointNormalUsageInsight } from "./mockData"; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction +const meta: Meta = { + title: + "Insights/InsightsCatalog/InsightsPage/insightCards/EndpointUsageInsightCard", + component: EndpointUsageInsightCard, + 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; + +export const LowUsage: Story = { + args: { + insight: { + ...mockedEndpointNormalUsageInsight, + name: "Low Usage", + type: InsightType.LowUsage, + importance: InsightImportance.Info, + decorators: [ + { + title: "Low Usage", + description: "Low level of usage for this endpoint" + } + ] + } + } +}; + +export const NormalUsage: Story = { + args: { + insight: mockedEndpointNormalUsageInsight + } +}; + +export const HighUsage: Story = { + args: { + insight: { + ...mockedEndpointNormalUsageInsight, + name: "High Usage", + type: InsightType.HighUsage, + importance: InsightImportance.Interesting, + decorators: [ + { + title: "High Usage", + description: "High level of usage for this endpoint" + } + ] + } + } +}; diff --git a/src/components/Insights/common/insights/TrafficInsight/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointUsageInsightCard/index.tsx similarity index 61% rename from src/components/Insights/common/insights/TrafficInsight/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointUsageInsightCard/index.tsx index e68d11d63..9935c1fcb 100644 --- a/src/components/Insights/common/insights/TrafficInsight/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointUsageInsightCard/index.tsx @@ -1,11 +1,11 @@ -import { roundTo } from "../../../../../utils/roundTo"; -import { Tag } from "../../../../common/v3/Tag"; -import { TrafficInsightProps } from "../../../TrafficInsight/types"; -import { InsightType } from "../../../types"; -import { InsightCard } from "../../InsightCard"; -import { ColumnsContainer } from "../../InsightCard/ColumnsContainer"; -import { KeyValue } from "../../InsightCard/KeyValue"; +import { roundTo } from "../../../../../../utils/roundTo"; +import { Tag } from "../../../../../common/v3/Tag"; +import { InsightType } from "../../../../types"; +import { InsightCard } from "../common/InsightCard"; +import { ColumnsContainer } from "../common/InsightCard/ColumnsContainer"; +import { KeyValue } from "../common/InsightCard/KeyValue"; import * as s from "./styles"; +import { EndpointUsageInsightCardProps } from "./types"; const suffixes = [ { value: 1, symbol: "" }, @@ -42,17 +42,23 @@ const getDescription = (insightType: InsightType): string => { } }; -export const TrafficInsight = (props: TrafficInsightProps) => { - const valueString = getValueString(props.insight.maxCallsIn1Min); +export const EndpointUsageInsightCard = ({ + insight, + onRecalculate, + onRefresh, + onGoToSpan, + isMarkAsReadButtonEnabled +}: EndpointUsageInsightCardProps) => { + const valueString = getValueString(insight.maxCallsIn1Min); return ( - {getDescription(props.insight.type)} + {getDescription(insight.type)} @@ -60,10 +66,10 @@ export const TrafficInsight = (props: TrafficInsightProps) => { } - onRecalculate={props.onRecalculate} - onRefresh={props.onRefresh} - onGoToSpan={props.onGoToSpan} - isMarkAsReadButtonEnabled={props.isMarkAsReadButtonEnabled} + onRecalculate={onRecalculate} + onRefresh={onRefresh} + onGoToSpan={onGoToSpan} + isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled} /> ); }; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointUsageInsightCard/mockData.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointUsageInsightCard/mockData.ts new file mode 100644 index 000000000..f9dad218b --- /dev/null +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointUsageInsightCard/mockData.ts @@ -0,0 +1,69 @@ +import { + EndpointNormalUsageInsight, + InsightCategory, + InsightImportance, + InsightScope, + InsightSpecificity, + InsightType +} from "../../../../types"; + +export const mockedEndpointNormalUsageInsight: EndpointNormalUsageInsight = { + sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", + id: "60b55792-8262-3c5d-9628-7cce7979ad6d", + 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, + scope: InsightScope.EntrySpan, + endpointSpan: "HTTP GET SampleInsights/lock/{milisec}", + spanCodeObjectId: + "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/lock/{milisec}", + route: "epHTTP:HTTP GET SampleInsights/lock/{milisec}", + serviceName: "Sample.MoneyTransfer.API", + spanInfo: { + name: "HTTP GET SampleInsights/lock/{milisec}", + displayName: "HTTP GET SampleInsights/lock/{milisec}", + instrumentationLibrary: "OpenTelemetry.Instrumentation.AspNetCore", + spanCodeObjectId: + "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/lock/{milisec}", + methodCodeObjectId: + "method:Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double)", + kind: "Server", + codeObjectId: + "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double)" + }, + shortDisplayInfo: { + title: "", + targetDisplayName: "", + subtitle: "", + description: "" + }, + codeObjectId: + "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double)", + environment: "BOB-LAPTOP[LOCAL]", + severity: 0, + isRecalculateEnabled: false, + prefixedCodeObjectId: + "method:Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double)", + customStartTime: null, + actualStartTime: "2023-06-16T11:10:22.773Z", + isDismissed: false, + isDismissible: true, + decorators: [ + { + title: "Normal Usage", + description: "Normal level of usage for this endpoint" + } + ], + category: InsightCategory.Usage, + type: InsightType.NormalUsage, + importance: InsightImportance.NotInteresting, + name: "Normal Usage", + maxCallsIn1Min: 0, + specifity: InsightSpecificity.OwnInsight +}; diff --git a/src/components/Insights/common/insights/TrafficInsight/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointUsageInsightCard/styles.ts similarity index 77% rename from src/components/Insights/common/insights/TrafficInsight/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointUsageInsightCard/styles.ts index f208a5775..da4d31122 100644 --- a/src/components/Insights/common/insights/TrafficInsight/styles.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointUsageInsightCard/styles.ts @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { KeyValue } from "../../InsightCard/KeyValue"; +import { KeyValue } from "../common/InsightCard/KeyValue"; export const ContentContainer = styled.div` gap: 24px; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointUsageInsightCard/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointUsageInsightCard/types.ts new file mode 100644 index 000000000..81b10d5b7 --- /dev/null +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointUsageInsightCard/types.ts @@ -0,0 +1,13 @@ +import { + EndpointHighUsageInsight, + EndpointLowUsageInsight, + EndpointNormalUsageInsight +} from "../../../../types"; +import { InsightCardCommonProps } from "../common/InsightCard/types"; + +export interface EndpointUsageInsightCardProps extends InsightCardCommonProps { + insight: + | EndpointLowUsageInsight + | EndpointNormalUsageInsight + | EndpointHighUsageInsight; +} diff --git a/src/components/Insights/common/insights/EndpointBottleneckInsight/EndpointBottleneckInsight.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SlowEndpointInsightCard/SlowEndpointInsightCard.stories.tsx similarity index 56% rename from src/components/Insights/common/insights/EndpointBottleneckInsight/EndpointBottleneckInsight.stories.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SlowEndpointInsightCard/SlowEndpointInsightCard.stories.tsx index 3c48997e8..cbf2e08ae 100644 --- a/src/components/Insights/common/insights/EndpointBottleneckInsight/EndpointBottleneckInsight.stories.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SlowEndpointInsightCard/SlowEndpointInsightCard.stories.tsx @@ -1,11 +1,11 @@ import { Meta, StoryObj } from "@storybook/react"; -import { EndpointBottleneckInsight } from "."; -import { mockedSpanBottleneckInsight } from "./mockData"; - +import { SlowEndpointInsightCard } from "."; +import { mockedSlowEndpointInsight } from "./mockData"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction -const meta: Meta = { - title: "Insights/common/insights/EndpointBottleneckInsight", - component: EndpointBottleneckInsight, +const meta: Meta = { + title: + "Insights/InsightsCatalog/InsightsPage/insightCards/SlowEndpointInsightCard", + component: SlowEndpointInsightCard, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout layout: "fullscreen" @@ -18,6 +18,6 @@ type Story = StoryObj; export const Default: Story = { args: { - insight: mockedSpanBottleneckInsight + insight: mockedSlowEndpointInsight } }; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SlowEndpointInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SlowEndpointInsightCard/index.tsx new file mode 100644 index 000000000..1d466884b --- /dev/null +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SlowEndpointInsightCard/index.tsx @@ -0,0 +1,42 @@ +import { getDurationString } from "../../../../../../utils/getDurationString"; +import { roundTo } from "../../../../../../utils/roundTo"; +import { Tag } from "../../../../../common/v3/Tag"; +import { InsightCard } from "../common/InsightCard"; +import { ColumnsContainer } from "../common/InsightCard/ColumnsContainer"; +import { KeyValue } from "../common/InsightCard/KeyValue"; +import * as s from "./styles"; +import { SlowEndpointInsightCardProps } from "./types"; + +export const SlowEndpointInsightCard = ({ + insight, + onRecalculate, + onRefresh, + onGoToSpan, + isMarkAsReadButtonEnabled +}: SlowEndpointInsightCardProps) => { + const diff = + (insight.median.raw / insight.endpointsMedianOfMedians.raw - 1) * 100; + + return ( + + + + On average requests are slower than other endpoints by{" "} + {roundTo(diff, 2)}% + + + + + + + } + onRecalculate={onRecalculate} + onRefresh={onRefresh} + onGoToSpan={onGoToSpan} + isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled} + /> + ); +}; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SlowEndpointInsightCard/mockData.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SlowEndpointInsightCard/mockData.ts new file mode 100644 index 000000000..3717cb2e9 --- /dev/null +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SlowEndpointInsightCard/mockData.ts @@ -0,0 +1,121 @@ +import { + InsightCategory, + InsightScope, + InsightType, + SlowEndpointInsight +} from "../../../../types"; + +export const mockedSlowEndpointInsight: SlowEndpointInsight = { + sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", + id: "60b55792-8262-4c3d-9628-7cce7979ad6d", + 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: "Slow Endpoint", + type: InsightType.SlowEndpoint, + category: InsightCategory.Performance, + specifity: 5, + importance: 2, + isDismissed: false, + isDismissible: true, + decorators: [ + { + title: "Slow Endpoint", + description: "Endpoint slow performance" + } + ], + endpointsMedian: { + value: 2.21, + unit: "sec", + raw: 2209365000 + }, + endpointsMedianOfMedians: { + value: 1.6, + unit: "sec", + raw: 1601240200 + }, + endpointsP75: { + value: 3.85, + unit: "sec", + raw: 3851011500 + }, + median: { + value: 5.01, + unit: "sec", + raw: 5007013000 + }, + endpointsMedianOfP75: { + value: 0, + unit: "ns", + raw: 0 + }, + min: { + value: 0, + unit: "ns", + raw: 0 + }, + max: { + value: 0, + unit: "ns", + raw: 0 + }, + mean: { + value: 0, + unit: "ns", + raw: 0 + }, + p75: { + value: 0, + unit: "ns", + raw: 0 + }, + p95: { + value: 0, + unit: "ns", + raw: 0 + }, + p99: { + value: 0, + unit: "ns", + raw: 0 + }, + scope: InsightScope.EntrySpan, + endpointSpan: "HTTP GET SampleInsights/SlowEndpoint", + spanCodeObjectId: + "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/SlowEndpoint", + route: "epHTTP:HTTP GET SampleInsights/SlowEndpoint", + serviceName: "Sample.MoneyTransfer.API", + spanInfo: { + name: "HTTP GET SampleInsights/SlowEndpoint", + displayName: "HTTP GET SampleInsights/SlowEndpoint", + instrumentationLibrary: "OpenTelemetry.Instrumentation.AspNetCore", + spanCodeObjectId: + "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/SlowEndpoint", + methodCodeObjectId: + "method:Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$SlowEndpoint(Int32)", + kind: "Server", + codeObjectId: + "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$SlowEndpoint(Int32)" + }, + shortDisplayInfo: { + title: "", + targetDisplayName: "HTTP GET SampleInsights/SlowEndpoint", + subtitle: "", + description: "Median duration 5.01 sec" + }, + codeObjectId: + "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$SlowEndpoint(Int32)", + environment: "BOB-LAPTOP[LOCAL]", + severity: 0, + isRecalculateEnabled: false, + prefixedCodeObjectId: + "method:Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$SlowEndpoint(Int32)", + customStartTime: null, + actualStartTime: "2023-06-16T11:10:29.277Z" +}; diff --git a/src/components/Insights/common/insights/SlowEndpointInsight/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SlowEndpointInsightCard/styles.ts similarity index 76% rename from src/components/Insights/common/insights/SlowEndpointInsight/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SlowEndpointInsightCard/styles.ts index af0fc3ef5..58a52257d 100644 --- a/src/components/Insights/common/insights/SlowEndpointInsight/styles.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SlowEndpointInsightCard/styles.ts @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { KeyValue } from "../../InsightCard/KeyValue"; +import { KeyValue } from "../common/InsightCard/KeyValue"; export const ContentContainer = styled.div` padding: 8px 0; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SlowEndpointInsightCard/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SlowEndpointInsightCard/types.ts new file mode 100644 index 000000000..d228e516a --- /dev/null +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SlowEndpointInsightCard/types.ts @@ -0,0 +1,6 @@ +import { SlowEndpointInsight } from "../../../../types"; +import { InsightCardCommonProps } from "../common/InsightCard/types"; + +export interface SlowEndpointInsightCardProps extends InsightCardCommonProps { + insight: SlowEndpointInsight; +} diff --git a/src/components/Insights/common/insights/SpanNPlusOneInsight/SpanNPlusOneInsight.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/SpaNPlusOneInsightCard.stories.tsx similarity index 54% rename from src/components/Insights/common/insights/SpanNPlusOneInsight/SpanNPlusOneInsight.stories.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/SpaNPlusOneInsightCard.stories.tsx index 1f88ebf90..f16828b82 100644 --- a/src/components/Insights/common/insights/SpanNPlusOneInsight/SpanNPlusOneInsight.stories.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/SpaNPlusOneInsightCard.stories.tsx @@ -1,11 +1,12 @@ import { Meta, StoryObj } from "@storybook/react"; -import { SpanNPlusOneInsight } from "."; -import { mockedNPlusOneInsight } from "./mockData"; +import { SpaNPlusOneInsightCard } from "."; +import { mockedSpaNPlusOneInsight } from "./mockData"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction -const meta: Meta = { - title: "Insights/common/insights/SpanNPlusOneInsight", - component: SpanNPlusOneInsight, +const meta: Meta = { + title: + "Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard", + component: SpaNPlusOneInsightCard, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout layout: "fullscreen" @@ -18,12 +19,12 @@ type Story = StoryObj; export const Default: Story = { args: { - insight: mockedNPlusOneInsight + insight: mockedSpaNPlusOneInsight } }; export const LinkedJira: Story = { args: { - insight: { ...mockedNPlusOneInsight, ticketLink: "https://digma.ai/1" } + insight: { ...mockedSpaNPlusOneInsight, ticketLink: "https://digma.ai/1" } } }; diff --git a/src/components/Insights/common/insights/SpanNPlusOneInsight/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/index.tsx similarity index 66% rename from src/components/Insights/common/insights/SpanNPlusOneInsight/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/index.tsx index 17028092e..4f125a9ec 100644 --- a/src/components/Insights/common/insights/SpanNPlusOneInsight/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/index.tsx @@ -1,20 +1,20 @@ import { ReactNode, useContext, useState } from "react"; -import { getDurationString } from "../../../../../utils/getDurationString"; -import { trimEndpointScheme } from "../../../../../utils/trimEndpointScheme"; -import { ConfigContext } from "../../../../common/App/ConfigContext"; -import { TraceIcon } from "../../../../common/icons/12px/TraceIcon"; -import { Button } from "../../../../common/v3/Button"; -import { Link } from "../../../../common/v3/Link"; -import { Tooltip } from "../../../../common/v3/Tooltip"; -import { InsightType, NPlusOneEndpointInfo, Trace } from "../../../types"; -import { Info } from "../../Info"; -import { InsightCard } from "../../InsightCard"; -import { ColumnsContainer } from "../../InsightCard/ColumnsContainer"; -import { KeyValue } from "../../InsightCard/KeyValue"; -import { Select } from "../../InsightCard/Select"; +import { getDurationString } from "../../../../../../utils/getDurationString"; +import { trimEndpointScheme } from "../../../../../../utils/trimEndpointScheme"; +import { ConfigContext } from "../../../../../common/App/ConfigContext"; +import { TraceIcon } from "../../../../../common/icons/12px/TraceIcon"; +import { Button } from "../../../../../common/v3/Button"; +import { Link } from "../../../../../common/v3/Link"; +import { Tooltip } from "../../../../../common/v3/Tooltip"; +import { InsightType, NPlusOneEndpointInfo, Trace } from "../../../../types"; +import { Info } from "../common/Info"; +import { InsightCard } from "../common/InsightCard"; +import { ColumnsContainer } from "../common/InsightCard/ColumnsContainer"; +import { KeyValue } from "../common/InsightCard/KeyValue"; +import { Select } from "../common/InsightCard/Select"; import { ContentContainer, Description, Details } from "../styles"; import * as s from "./styles"; -import { SpanNPlusOneInsightProps } from "./types"; +import { SpaNPlusOneInsightCardProps } from "./types"; const renderOptions = ( endpoints: NPlusOneEndpointInfo[], @@ -39,16 +39,25 @@ const renderOptions = ( }; }); -export const SpanNPlusOneInsight = (props: SpanNPlusOneInsightProps) => { - const endpoints = props.insight.endpoints || []; +export const SpaNPlusOneInsightCard = ({ + insight, + onAssetLinkClick, + onTraceButtonClick, + onJiraTicketCreate, + onRecalculate, + onRefresh, + isJiraHintEnabled, + onGoToSpan, + isMarkAsReadButtonEnabled +}: SpaNPlusOneInsightCardProps) => { + const endpoints = insight.endpoints || []; const config = useContext(ConfigContext); const [selectedEndpoint, setSelectedEndpoint] = useState( endpoints.length ? endpoints[0] : null ); const handleSpanLinkClick = (spanCodeObjectId?: string) => { - spanCodeObjectId && - props.onAssetLinkClick(spanCodeObjectId, props.insight.type); + spanCodeObjectId && onAssetLinkClick(spanCodeObjectId, insight.type); }; const handleTraceButtonClick = ( @@ -56,20 +65,19 @@ export const SpanNPlusOneInsight = (props: SpanNPlusOneInsightProps) => { insightType: InsightType, spanCodeObjectId?: string ) => { - props.onTraceButtonClick(trace, insightType, spanCodeObjectId); + onTraceButtonClick(trace, insightType, spanCodeObjectId); }; - const handleCreateJiraTicketButtonClick = ( + const handleTicketInfoButtonClick = ( spanCodeObjectId: string | undefined, event: string ) => { - props.onJiraTicketCreate && - props.onJiraTicketCreate(props.insight, spanCodeObjectId, event); + onJiraTicketCreate && onJiraTicketCreate(insight, spanCodeObjectId, event); }; return (
@@ -98,7 +106,7 @@ export const SpanNPlusOneInsight = (props: SpanNPlusOneInsightProps) => { name: selectedEndpoint.endpointInfo.route, id: selectedEndpoint.traceId }, - props.insight.type, + insight.type, selectedEndpoint.endpointInfo.spanCodeObjectId ) } @@ -130,15 +138,15 @@ export const SpanNPlusOneInsight = (props: SpanNPlusOneInsightProps) => { )} } - onRecalculate={props.onRecalculate} - onRefresh={props.onRefresh} - onJiraButtonClick={handleCreateJiraTicketButtonClick} + onRecalculate={onRecalculate} + onRefresh={onRefresh} + onJiraButtonClick={handleTicketInfoButtonClick} jiraTicketInfo={{ - ticketLink: props.insight.ticketLink, - isHintEnabled: props.isJiraHintEnabled + ticketLink: insight.ticketLink, + isHintEnabled: isJiraHintEnabled }} - onGoToSpan={props.onGoToSpan} - isMarkAsReadButtonEnabled={props.isMarkAsReadButtonEnabled} + onGoToSpan={onGoToSpan} + isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled} /> ); }; diff --git a/src/components/Insights/common/insights/SpanNPlusOneInsight/mockData.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/mockData.ts similarity index 96% rename from src/components/Insights/common/insights/SpanNPlusOneInsight/mockData.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/mockData.ts index 880934600..b32ac1f55 100644 --- a/src/components/Insights/common/insights/SpanNPlusOneInsight/mockData.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/mockData.ts @@ -2,10 +2,10 @@ import { InsightCategory, InsightScope, InsightType, - SpanNPlusOneInsight -} from "../../../types"; + SpaNPlusOneInsight +} from "../../../../types"; -export const mockedNPlusOneInsight: SpanNPlusOneInsight = { +export const mockedSpaNPlusOneInsight: SpaNPlusOneInsight = { sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", id: "60b55792-8262-4c5d-9628-8cce7979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", @@ -18,7 +18,7 @@ export const mockedNPlusOneInsight: SpanNPlusOneInsight = { ticketLink: null, impact: 0, name: "N+1", - type: InsightType.SpanNPlusOne, + type: InsightType.SpaNPlusOne, category: InsightCategory.Performance, specifity: 2, importance: 2, diff --git a/src/components/Insights/common/insights/SpanNPlusOneInsight/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/styles.ts similarity index 81% rename from src/components/Insights/common/insights/SpanNPlusOneInsight/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/styles.ts index 054ec4f42..eb4b83b06 100644 --- a/src/components/Insights/common/insights/SpanNPlusOneInsight/styles.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/styles.ts @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { footnoteRegularTypography } from "../../../../common/App/typographies"; +import { footnoteRegularTypography } from "../../../../../common/App/typographies"; export const InfoContainer = styled.div` display: flex; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/types.ts new file mode 100644 index 000000000..bbd483b01 --- /dev/null +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/types.ts @@ -0,0 +1,15 @@ +import { InsightType, SpaNPlusOneInsight, Trace } from "../../../../types"; +import { InsightCardCommonProps } from "../common/InsightCard/types"; + +export interface SpaNPlusOneInsightCardProps extends InsightCardCommonProps { + insight: SpaNPlusOneInsight; + onAssetLinkClick: ( + spanCodeObjectId: string, + insightType: InsightType + ) => void; + onTraceButtonClick: ( + trace: Trace, + insightType: InsightType, + spanCodeObjectId?: string + ) => void; +} diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationBreakdownInsightCard/SpanDurationBreakdownInsightCard.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationBreakdownInsightCard/SpanDurationBreakdownInsightCard.stories.tsx new file mode 100644 index 000000000..e08d06eaf --- /dev/null +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationBreakdownInsightCard/SpanDurationBreakdownInsightCard.stories.tsx @@ -0,0 +1,24 @@ +import { Meta, StoryObj } from "@storybook/react"; +import { SpanDurationBreakdownInsightCard } from "."; +import { mockedSpanDurationBreakdownInsight } from "./mockData"; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction +const meta: Meta = { + title: + "Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationBreakdownInsightCard", + component: SpanDurationBreakdownInsightCard, + 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; + +export const Default: Story = { + args: { + insight: mockedSpanDurationBreakdownInsight + } +}; diff --git a/src/components/Insights/common/insights/DurationBreakdownInsight/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationBreakdownInsightCard/index.tsx similarity index 70% rename from src/components/Insights/common/insights/DurationBreakdownInsight/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationBreakdownInsightCard/index.tsx index 94f564414..35b78b5ad 100644 --- a/src/components/Insights/common/insights/DurationBreakdownInsight/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationBreakdownInsightCard/index.tsx @@ -1,16 +1,19 @@ import { useState } from "react"; -import { usePagination } from "../../../../../hooks/usePagination"; -import { getDurationString } from "../../../../../utils/getDurationString"; -import { getPercentileLabel } from "../../../../../utils/getPercentileLabel"; -import { Pagination } from "../../../../common/v3/Pagination"; -import { Tag } from "../../../../common/v3/Tag"; -import { Tooltip } from "../../../../common/v3/Tooltip"; -import { DurationPercentile, SpanDurationBreakdownEntry } from "../../../types"; -import { InsightCard } from "../../InsightCard"; -import { ListItem } from "../../InsightCard/ListItem"; -import { PercentileViewModeToggle } from "../../InsightCard/PercentileViewModeToggle"; +import { usePagination } from "../../../../../../hooks/usePagination"; +import { getDurationString } from "../../../../../../utils/getDurationString"; +import { getPercentileLabel } from "../../../../../../utils/getPercentileLabel"; +import { Pagination } from "../../../../../common/v3/Pagination"; +import { Tag } from "../../../../../common/v3/Tag"; +import { Tooltip } from "../../../../../common/v3/Tooltip"; +import { + DurationPercentile, + SpanDurationBreakdownEntry +} from "../../../../types"; +import { InsightCard } from "../common/InsightCard"; +import { ListItem } from "../common/InsightCard/ListItem"; +import { PercentileViewModeToggle } from "../common/InsightCard/PercentileViewModeToggle"; import * as s from "./styles"; -import { DurationBreakdownInsightProps } from "./types"; +import { SpanDurationBreakdownInsightCardProps } from "./types"; const DEFAULT_PERCENTILE = 0.5; const PAGE_SIZE = 3; @@ -42,13 +45,18 @@ const getDurationTitle = (breakdownEntry: SpanDurationBreakdownEntry) => { return {title}; }; -export const DurationBreakdownInsight = ( - props: DurationBreakdownInsightProps -) => { +export const SpanDurationBreakdownInsightCard = ({ + insight, + onAssetLinkClick, + onRecalculate, + onRefresh, + onGoToSpan, + isMarkAsReadButtonEnabled +}: SpanDurationBreakdownInsightCardProps) => { const [percentileViewMode, setPercentileViewMode] = useState(DEFAULT_PERCENTILE); - const filteredEntries = props.insight.breakdownEntries.filter((entry) => + const filteredEntries = insight.breakdownEntries.filter((entry) => entry.percentiles.some( (percentile) => percentile.percentile === percentileViewMode ) @@ -68,11 +76,11 @@ export const DurationBreakdownInsight = ( const [pageItems, page, setPage] = usePagination( sortedEntries, PAGE_SIZE, - props.insight.id + insight.id ); const handleSpanLinkClick = (spanCodeObjectId: string) => { - props.onAssetLinkClick(spanCodeObjectId, props.insight.type); + onAssetLinkClick(spanCodeObjectId, insight.type); }; const handlePercentileViewModeChange = (value: number) => { @@ -81,7 +89,7 @@ export const DurationBreakdownInsight = ( return ( } - onRecalculate={props.onRecalculate} - onRefresh={props.onRefresh} - onGoToSpan={props.onGoToSpan} - isMarkAsReadButtonEnabled={props.isMarkAsReadButtonEnabled} + onRecalculate={onRecalculate} + onRefresh={onRefresh} + onGoToSpan={onGoToSpan} + isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled} /> ); }; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationBreakdownInsightCard/mockData.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationBreakdownInsightCard/mockData.ts new file mode 100644 index 000000000..8d6e73071 --- /dev/null +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationBreakdownInsightCard/mockData.ts @@ -0,0 +1,353 @@ +import { + InsightCategory, + InsightScope, + InsightType, + SpanDurationBreakdownInsight +} from "../../../../types"; + +export const mockedSpanDurationBreakdownInsight: SpanDurationBreakdownInsight = + { + sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", + id: "60b55792-8262-4c5d-9628-7cce7979ac6d", + 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: "Span Duration Breakdown", + type: InsightType.SpanDurationBreakdown, + category: InsightCategory.Performance, + specifity: 4, + isRecalculateEnabled: true, + isDismissed: false, + isDismissible: true, + importance: 6, + spanName: "ClientTester.generateInsightData", + spanCodeObjectId: + "span:io.opentelemetry.opentelemetry-instrumentation-annotations-1.16$_$ClientTester.generateInsightData", + breakdownEntries: [ + { + spanName: "GET PetClinic /SampleInsights/ErrorHotspot", + spanDisplayName: "GET PetClinic /SampleInsights/ErrorHotspot", + spanInstrumentationLibrary: "io.opentelemetry.okhttp-3.0", + spanCodeObjectId: + "span:io.opentelemetry.okhttp-3.0$_$GET PetClinic /SampleInsights/ErrorHotspot", + percentiles: [ + { + percentile: 0.5, + duration: { + value: 9.31, + unit: "ms", + raw: 9310166 + } + }, + { + percentile: 0.95, + duration: { + value: 9.31, + unit: "ms", + raw: 9310166 + } + } + ], + codeObjectId: null + }, + { + spanName: "GET PetClinic /SampleInsights/ErrorRecordedOnCurrentSpan", + spanDisplayName: + "GET PetClinic /SampleInsights/ErrorRecordedOnCurrentSpan", + spanInstrumentationLibrary: "io.opentelemetry.okhttp-3.0", + spanCodeObjectId: + "span:io.opentelemetry.okhttp-3.0$_$GET PetClinic /SampleInsights/ErrorRecordedOnCurrentSpan", + percentiles: [ + { + percentile: 0.5, + duration: { + value: 1.85, + unit: "ms", + raw: 1853959 + } + }, + { + percentile: 0.95, + duration: { + value: 1.85, + unit: "ms", + raw: 1853959 + } + } + ], + codeObjectId: null + }, + { + spanName: + "GET PetClinic /SampleInsights/ErrorRecordedOnDeeplyNestedSpan", + spanDisplayName: + "GET PetClinic /SampleInsights/ErrorRecordedOnDeeplyNestedSpan", + spanInstrumentationLibrary: "io.opentelemetry.okhttp-3.0", + spanCodeObjectId: + "span:io.opentelemetry.okhttp-3.0$_$GET PetClinic /SampleInsights/ErrorRecordedOnDeeplyNestedSpan", + percentiles: [ + { + percentile: 0.5, + duration: { + value: 2.98, + unit: "ms", + raw: 2977875 + } + }, + { + percentile: 0.95, + duration: { + value: 2.98, + unit: "ms", + raw: 2977875 + } + } + ], + codeObjectId: null + }, + { + spanName: "GET PetClinic /SampleInsights/ErrorRecordedOnLocalRootSpan", + spanDisplayName: + "GET PetClinic /SampleInsights/ErrorRecordedOnLocalRootSpan", + spanInstrumentationLibrary: "io.opentelemetry.okhttp-3.0", + spanCodeObjectId: + "span:io.opentelemetry.okhttp-3.0$_$GET PetClinic /SampleInsights/ErrorRecordedOnLocalRootSpan", + percentiles: [ + { + percentile: 0.5, + duration: { + value: 18.64, + unit: "ms", + raw: 18642667 + } + }, + { + percentile: 0.95, + duration: { + value: 18.64, + unit: "ms", + raw: 18642667 + } + } + ], + codeObjectId: null + }, + { + spanName: "GET PetClinic /SampleInsights/HighUsage", + spanDisplayName: "GET PetClinic /SampleInsights/HighUsage", + spanInstrumentationLibrary: "io.opentelemetry.okhttp-3.0", + spanCodeObjectId: + "span:io.opentelemetry.okhttp-3.0$_$GET PetClinic /SampleInsights/HighUsage", + percentiles: [ + { + percentile: 0.5, + duration: { + value: 1.28, + unit: "sec", + raw: 1276017342 + } + }, + { + percentile: 0.95, + duration: { + value: 1.88, + unit: "sec", + raw: 1883717142 + } + } + ], + codeObjectId: null + }, + { + spanName: "GET PetClinic /SampleInsights/NPlusOneWithInternalSpan", + spanDisplayName: + "GET PetClinic /SampleInsights/NPlusOneWithInternalSpan", + spanInstrumentationLibrary: "io.opentelemetry.okhttp-3.0", + spanCodeObjectId: + "span:io.opentelemetry.okhttp-3.0$_$GET PetClinic /SampleInsights/NPlusOneWithInternalSpan", + percentiles: [ + { + percentile: 0.5, + duration: { + value: 8.62, + unit: "ms", + raw: 8622375 + } + }, + { + percentile: 0.95, + duration: { + value: 8.62, + unit: "ms", + raw: 8622375 + } + } + ], + codeObjectId: null + }, + { + spanName: "GET PetClinic /SampleInsights/NPlusOneWithoutInternalSpan", + spanDisplayName: + "GET PetClinic /SampleInsights/NPlusOneWithoutInternalSpan", + spanInstrumentationLibrary: "io.opentelemetry.okhttp-3.0", + spanCodeObjectId: + "span:io.opentelemetry.okhttp-3.0$_$GET PetClinic /SampleInsights/NPlusOneWithoutInternalSpan", + percentiles: [ + { + percentile: 0.5, + duration: { + value: 2.95, + unit: "ms", + raw: 2951917 + } + }, + { + percentile: 0.95, + duration: { + value: 2.95, + unit: "ms", + raw: 2951917 + } + } + ], + codeObjectId: null + }, + { + spanName: "GET PetClinic /SampleInsights/SlowEndpoint", + spanDisplayName: "GET PetClinic /SampleInsights/SlowEndpoint", + spanInstrumentationLibrary: "io.opentelemetry.okhttp-3.0", + spanCodeObjectId: + "span:io.opentelemetry.okhttp-3.0$_$GET PetClinic /SampleInsights/SlowEndpoint", + percentiles: [ + { + percentile: 0.5, + duration: { + value: 5.01, + unit: "sec", + raw: 5011033127 + } + }, + { + percentile: 0.95, + duration: { + value: 5.01, + unit: "sec", + raw: 5011033127 + } + } + ], + codeObjectId: null + }, + { + spanName: "GET PetClinic /SampleInsights/SpanBottleneck", + spanDisplayName: "GET PetClinic /SampleInsights/SpanBottleneck", + spanInstrumentationLibrary: "io.opentelemetry.okhttp-3.0", + spanCodeObjectId: + "span:io.opentelemetry.okhttp-3.0$_$GET PetClinic /SampleInsights/SpanBottleneck", + percentiles: [ + { + percentile: 0.5, + duration: { + value: 520.92, + unit: "ms", + raw: 520920000 + } + }, + { + percentile: 0.95, + duration: { + value: 520.92, + unit: "ms", + raw: 520920000 + } + } + ], + codeObjectId: null + }, + { + spanName: "GET PetClinic /SampleInsights/req-map-get", + spanDisplayName: "GET PetClinic /SampleInsights/req-map-get", + spanInstrumentationLibrary: "io.opentelemetry.okhttp-3.0", + spanCodeObjectId: + "span:io.opentelemetry.okhttp-3.0$_$GET PetClinic /SampleInsights/req-map-get", + percentiles: [ + { + percentile: 0.5, + duration: { + value: 1.56, + unit: "ms", + raw: 1556959 + } + }, + { + percentile: 0.95, + duration: { + value: 1.56, + unit: "ms", + raw: 1556959 + } + } + ], + codeObjectId: null + }, + { + spanName: "HTTP GET ClientTester.generateInsightData", + spanDisplayName: "HTTP GET ClientTester.generateInsightData", + spanInstrumentationLibrary: "io.opentelemetry.okhttp-3.0", + spanCodeObjectId: + "span:io.opentelemetry.okhttp-3.0$_$HTTP GET ClientTester.generateInsightData", + percentiles: [ + { + percentile: 0.5, + duration: { + value: 693.35, + unit: "ms", + raw: 693349003 + } + }, + { + percentile: 0.95, + duration: { + value: 693.35, + unit: "ms", + raw: 693349003 + } + } + ], + codeObjectId: null + } + ], + scope: InsightScope.Span, + spanInfo: { + name: "ClientTester.generateInsightData", + displayName: "ClientTester.generateInsightData", + instrumentationLibrary: + "io.opentelemetry.opentelemetry-instrumentation-annotations-1.16", + spanCodeObjectId: + "span:io.opentelemetry.opentelemetry-instrumentation-annotations-1.16$_$ClientTester.generateInsightData", + methodCodeObjectId: + "method:petclinic.client.ClientTester$_$generateInsightData", + kind: "Internal", + codeObjectId: "petclinic.client.ClientTester$_$generateInsightData" + }, + shortDisplayInfo: { + title: "", + targetDisplayName: "", + subtitle: "", + description: "" + }, + codeObjectId: "petclinic.client.ClientTester$_$generateInsightData", + decorators: null, + environment: "SAMPLE_ENV", + severity: 0, + prefixedCodeObjectId: + "method:petclinic.client.ClientTester$_$generateInsightData", + customStartTime: null, + actualStartTime: "2023-06-16T10:30:31.848Z" + }; diff --git a/src/components/Insights/common/insights/DurationBreakdownInsight/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationBreakdownInsightCard/styles.ts similarity index 87% rename from src/components/Insights/common/insights/DurationBreakdownInsight/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationBreakdownInsightCard/styles.ts index bf585aa2c..44e4dfea2 100644 --- a/src/components/Insights/common/insights/DurationBreakdownInsight/styles.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationBreakdownInsightCard/styles.ts @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { footnoteRegularTypography } from "../../../../common/App/typographies"; +import { footnoteRegularTypography } from "../../../../../common/App/typographies"; export const Container = styled.div` display: flex; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationBreakdownInsightCard/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationBreakdownInsightCard/types.ts new file mode 100644 index 000000000..c2fa6de48 --- /dev/null +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationBreakdownInsightCard/types.ts @@ -0,0 +1,11 @@ +import { InsightType, SpanDurationBreakdownInsight } from "../../../../types"; +import { InsightCardCommonProps } from "../common/InsightCard/types"; + +export interface SpanDurationBreakdownInsightCardProps + extends InsightCardCommonProps { + insight: SpanDurationBreakdownInsight; + onAssetLinkClick: ( + spanCodeObjectId: string, + insightType: InsightType + ) => void; +} diff --git a/src/components/Insights/common/insights/DurationInsight/ReferenceLineLabel/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/ReferenceLineLabel/index.tsx similarity index 91% rename from src/components/Insights/common/insights/DurationInsight/ReferenceLineLabel/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/ReferenceLineLabel/index.tsx index 614f0f274..a2f129c3f 100644 --- a/src/components/Insights/common/insights/DurationInsight/ReferenceLineLabel/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/ReferenceLineLabel/index.tsx @@ -1,8 +1,8 @@ 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 { isNumber } from "../../../../../../../typeGuards/isNumber"; +import { isString } from "../../../../../../../typeGuards/isString"; import { DIVIDER, LABEL_HEIGHT } from "../constants"; import { ReferenceLineLabelProps } from "./types"; diff --git a/src/components/Insights/DurationInsight/ReferenceLineLabel/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/ReferenceLineLabel/types.ts similarity index 100% rename from src/components/Insights/DurationInsight/ReferenceLineLabel/types.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/ReferenceLineLabel/types.ts diff --git a/src/components/Insights/common/insights/DurationInsight/DurationInsight.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/SpanDurationsInsightCard.stories.tsx similarity index 84% rename from src/components/Insights/common/insights/DurationInsight/DurationInsight.stories.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/SpanDurationsInsightCard.stories.tsx index db941ef50..b8006e4d5 100644 --- a/src/components/Insights/common/insights/DurationInsight/DurationInsight.stories.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/SpanDurationsInsightCard.stories.tsx @@ -1,11 +1,12 @@ import { Meta, StoryObj } from "@storybook/react"; -import { DurationInsight } from "."; -import { InsightCategory, InsightScope, InsightType } from "../../../types"; +import { SpanDurationsInsightCard } from "."; +import { mockedSpanDurationsInsight } from "./mockData"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction -const meta: Meta = { - title: "Insights/common/insights/DurationInsight", - component: DurationInsight, +const meta: Meta = { + title: + "Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard", + component: SpanDurationsInsightCard, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout layout: "fullscreen" @@ -19,108 +20,7 @@ type Story = StoryObj; export const WithAverage: Story = { args: { insight: { - sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", - id: "60b55792-8262-4c5d-9628-7cce7979ad6d", - 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: "Performance Stats", - type: InsightType.SpanDurations, - category: InsightCategory.Performance, - specifity: 4, - isRecalculateEnabled: true, - spanCodeObjectId: "span:SampleInsightsController$_$DelayAsync", - isDismissed: false, - isDismissible: true, - span: { - name: "DelayAsync", - displayName: "DelayAsync", - instrumentationLibrary: "SampleInsightsController", - spanCodeObjectId: "span:SampleInsightsController$_$DelayAsync", - methodCodeObjectId: null, - kind: "Internal", - codeObjectId: null - }, - percentiles: [ - { - percentile: 0.5, - currentDuration: { - value: 110.74, - unit: "ms", - raw: 110735000 - }, - previousDuration: { - value: 12.55, - unit: "ms", - raw: 12548500 - }, - changeTime: "2023-06-30T11:08:55.000Z", - changeVerified: true, - traceIds: ["6FB14B53449D3D360DC42A5F44F9D35B"] - }, - { - percentile: 0.95, - currentDuration: { - value: 2.01, - unit: "sec", - raw: 2005005050 - }, - previousDuration: { - value: 2.01, - unit: "sec", - raw: 2005133700 - }, - changeTime: "2023-06-30T11:10:00.000Z", - changeVerified: true, - traceIds: ["E6FE5ACDDB1C6E6D5284B1D9579964B0"] - } - ], - lastSpanInstanceInfo: { - traceId: "3E41E4197B696CA9BF1157AEB254DFE0", - spanId: "9C31D7C85CF413B4", - startTime: "2023-06-30T11:10:13.542Z", - duration: { - value: 91.95, - unit: "ms", - raw: 91951000 - } - }, - scope: InsightScope.Span, - spanInfo: { - name: "DelayAsync", - displayName: "DelayAsync", - instrumentationLibrary: "SampleInsightsController", - spanCodeObjectId: "span:SampleInsightsController$_$DelayAsync", - methodCodeObjectId: null, - kind: "Internal", - codeObjectId: null - }, - shortDisplayInfo: { - title: "", - targetDisplayName: "", - subtitle: "", - description: "" - }, - codeObjectId: "SampleInsightsController$_$DelayAsync", - decorators: [ - { - title: "Slowing", - description: "Duration for this section is increasing" - } - ], - environment: "BOB-LAPTOP[LOCAL]", - importance: 2, - severity: 0, - prefixedCodeObjectId: "span:SampleInsightsController$_$DelayAsync", - customStartTime: null, - actualStartTime: "2023-06-17T00:00:00.000Z", - isAsync: false, + ...mockedSpanDurationsInsight, average: { value: 110.74, unit: "ms", @@ -130,334 +30,27 @@ export const WithAverage: Story = { value: 12.55, unit: "ms", raw: 12548500 - } - } - } -}; - -export const WithChange: Story = { - args: { - insight: { - sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", - id: "60b55792-8262-4c5d-9628-7cce7979ad6d", - firstDetected: null, - lastDetected: null, - criticality: 0, - firstCommitId: null, - lastCommitId: null, - deactivatedCommitId: null, - isDismissed: false, - isDismissible: true, - reopenCount: 0, - ticketLink: null, - impact: 0, - name: "Performance Stats", - type: InsightType.SpanDurations, - category: InsightCategory.Performance, - specifity: 4, - isRecalculateEnabled: true, - spanCodeObjectId: "span:SampleInsightsController$_$DelayAsync", - span: { - name: "DelayAsync", - displayName: "DelayAsync", - instrumentationLibrary: "SampleInsightsController", - spanCodeObjectId: "span:SampleInsightsController$_$DelayAsync", - methodCodeObjectId: null, - kind: "Internal", - codeObjectId: null - }, - percentiles: [ - { - percentile: 0.5, - currentDuration: { - value: 110.74, - unit: "ms", - raw: 110735000 - }, - previousDuration: { - value: 12.55, - unit: "ms", - raw: 12548500 - }, - changeTime: "2023-06-30T11:08:55.000Z", - changeVerified: true, - traceIds: ["6FB14B53449D3D360DC42A5F44F9D35B"] - }, - { - percentile: 0.95, - currentDuration: { - value: 2.01, - unit: "sec", - raw: 2005005050 - }, - previousDuration: { - value: 2.01, - unit: "sec", - raw: 2005133700 - }, - changeTime: "2023-06-30T11:10:00.000Z", - changeVerified: true, - traceIds: ["E6FE5ACDDB1C6E6D5284B1D9579964B0"] - } - ], - lastSpanInstanceInfo: { - traceId: "3E41E4197B696CA9BF1157AEB254DFE0", - spanId: "9C31D7C85CF413B4", - startTime: "2023-06-30T11:10:13.542Z", - duration: { - value: 91.95, - unit: "ms", - raw: 91951000 - } }, - scope: InsightScope.Span, - spanInfo: { - name: "DelayAsync", - displayName: "DelayAsync", - instrumentationLibrary: "SampleInsightsController", - spanCodeObjectId: "span:SampleInsightsController$_$DelayAsync", - methodCodeObjectId: null, - kind: "Internal", - codeObjectId: null - }, - shortDisplayInfo: { - title: "", - targetDisplayName: "", - subtitle: "", - description: "" - }, - codeObjectId: "SampleInsightsController$_$DelayAsync", - decorators: [ - { - title: "Slowing", - description: "Duration for this section is increasing" - } - ], - environment: "BOB-LAPTOP[LOCAL]", - importance: 2, - severity: 0, - prefixedCodeObjectId: "span:SampleInsightsController$_$DelayAsync", - customStartTime: null, - actualStartTime: "2023-06-17T00:00:00.000Z", - isAsync: false + percentiles: mockedSpanDurationsInsight.percentiles.map((x) => ({ + ...x, + previousDuration: null, + changeTime: null, + changeVerified: null + })) } } }; -export const WithEvaluatingChange: Story = { +export const WithChange: Story = { args: { - insight: { - sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", - id: "60b55792-8262-4c5d-9628-7cce7979ad6d", - firstDetected: null, - lastDetected: null, - criticality: 0, - firstCommitId: null, - lastCommitId: null, - deactivatedCommitId: null, - reopenCount: 0, - ticketLink: null, - impact: 0, - name: "Performance Stats", - type: InsightType.SpanDurations, - category: InsightCategory.Performance, - specifity: 4, - isRecalculateEnabled: true, - spanCodeObjectId: "span:SampleInsightsController$_$WaitForLock", - isDismissed: false, - isDismissible: true, - span: { - name: "WaitForLock", - displayName: "WaitForLock", - instrumentationLibrary: "SampleInsightsController", - spanCodeObjectId: "span:SampleInsightsController$_$WaitForLock", - methodCodeObjectId: null, - kind: "Internal", - codeObjectId: null - }, - percentiles: [ - { - percentile: 0.5, - currentDuration: { - value: 5.17, - unit: "sec", - raw: 5172711500 - }, - previousDuration: { - value: 445.68, - unit: "ms", - raw: 445678000 - }, - changeTime: "2023-06-30T11:09:55.000Z", - changeVerified: false, - traceIds: ["84040A4EBABE187EDB487085ABC279A8"] - }, - { - percentile: 0.95, - currentDuration: { - value: 8.15, - unit: "sec", - raw: 8146584400 - }, - previousDuration: { - value: 1.72, - unit: "sec", - raw: 1718651499.9999993 - }, - changeTime: "2023-06-30T11:09:54.000Z", - changeVerified: false, - traceIds: ["CA11A5F32F260E52FDAE74B006CE6D61"] - } - ], - lastSpanInstanceInfo: { - traceId: "3E41E4197B696CA9BF1157AEB254DFE0", - spanId: "7F672B399993472C", - startTime: "2023-06-30T11:10:04.991Z", - duration: { - value: 8.64, - unit: "sec", - raw: 8643204000 - } - }, - scope: InsightScope.Span, - spanInfo: { - name: "WaitForLock", - displayName: "WaitForLock", - instrumentationLibrary: "SampleInsightsController", - spanCodeObjectId: "span:SampleInsightsController$_$WaitForLock", - methodCodeObjectId: null, - kind: "Internal", - codeObjectId: null - }, - shortDisplayInfo: { - title: "", - targetDisplayName: "", - subtitle: "", - description: "" - }, - codeObjectId: "SampleInsightsController$_$WaitForLock", - decorators: [ - { - title: "Slowing", - description: "Duration for this section is increasing" - } - ], - environment: "BOB-LAPTOP[LOCAL]", - importance: 2, - severity: 0, - prefixedCodeObjectId: "span:SampleInsightsController$_$WaitForLock", - customStartTime: null, - actualStartTime: "2023-06-17T00:00:00.000Z", - isAsync: false - } + insight: mockedSpanDurationsInsight } }; -export const HistogramWithManyBars: Story = { +export const WithHistogramWithManyBars: Story = { args: { insight: { - sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", - id: "60b55792-8262-4c5d-9628-7cce7979ad6d", - firstDetected: null, - lastDetected: null, - criticality: 0, - firstCommitId: null, - lastCommitId: null, - deactivatedCommitId: null, - reopenCount: 0, - ticketLink: null, - impact: 0, - name: "Performance Stats", - type: InsightType.SpanDurations, - category: InsightCategory.Performance, - specifity: 4, - isRecalculateEnabled: true, - isDismissed: false, - isDismissible: true, - spanCodeObjectId: "span:SampleInsightsController$_$DelayAsync", - span: { - name: "DelayAsync", - displayName: "DelayAsync", - instrumentationLibrary: "SampleInsightsController", - spanCodeObjectId: "span:SampleInsightsController$_$DelayAsync", - methodCodeObjectId: null, - kind: "Internal", - codeObjectId: null - }, - percentiles: [ - { - percentile: 0.5, - currentDuration: { - value: 110.74, - unit: "ms", - raw: 110735000 - }, - previousDuration: { - value: 12.55, - unit: "ms", - raw: 12548500 - }, - changeTime: "2023-06-30T11:08:55.000Z", - changeVerified: true, - traceIds: ["6FB14B53449D3D360DC42A5F44F9D35B"] - }, - { - percentile: 0.95, - currentDuration: { - value: 2.01, - unit: "sec", - raw: 2005005050 - }, - previousDuration: { - value: 2.01, - unit: "sec", - raw: 2005133700 - }, - changeTime: "2023-06-30T11:10:00.000Z", - changeVerified: true, - traceIds: ["E6FE5ACDDB1C6E6D5284B1D9579964B0"] - } - ], - lastSpanInstanceInfo: { - traceId: "3E41E4197B696CA9BF1157AEB254DFE0", - spanId: "9C31D7C85CF413B4", - startTime: "2023-06-30T11:10:13.542Z", - duration: { - value: 91.95, - unit: "ms", - raw: 91951000 - } - }, - scope: InsightScope.Span, - spanInfo: { - name: "DelayAsync", - displayName: "DelayAsync", - instrumentationLibrary: "SampleInsightsController", - spanCodeObjectId: "span:SampleInsightsController$_$DelayAsync", - methodCodeObjectId: null, - kind: "Internal", - codeObjectId: null - }, - shortDisplayInfo: { - title: "", - targetDisplayName: "", - subtitle: "", - description: "" - }, - codeObjectId: "SampleInsightsController$_$DelayAsync", - decorators: [ - { - title: "Slowing", - description: "Duration for this section is increasing" - } - ], - environment: "BOB-LAPTOP[LOCAL]", - importance: 2, - severity: 0, - prefixedCodeObjectId: "span:SampleInsightsController$_$DelayAsync", - customStartTime: null, - actualStartTime: "2023-06-17T00:00:00.000Z", - isAsync: false, + ...mockedSpanDurationsInsight, histogramPlot: { bars: [ { @@ -4880,111 +4473,10 @@ export const HistogramWithManyBars: Story = { } }; -export const HistogramWithGaps: Story = { +export const WithHistogramWithGaps: Story = { args: { insight: { - sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", - id: "60b55792-8262-4c5d-9628-7cce7979ad6d", - firstDetected: null, - lastDetected: null, - criticality: 0, - firstCommitId: null, - lastCommitId: null, - deactivatedCommitId: null, - reopenCount: 0, - ticketLink: null, - impact: 0, - name: "Performance Stats", - type: InsightType.SpanDurations, - category: InsightCategory.Performance, - specifity: 4, - isRecalculateEnabled: true, - isDismissed: false, - isDismissible: true, - spanCodeObjectId: "span:SampleInsightsController$_$DelayAsync", - span: { - name: "DelayAsync", - displayName: "DelayAsync", - instrumentationLibrary: "SampleInsightsController", - spanCodeObjectId: "span:SampleInsightsController$_$DelayAsync", - methodCodeObjectId: null, - kind: "Internal", - codeObjectId: null - }, - percentiles: [ - { - percentile: 0.5, - currentDuration: { - value: 110.74, - unit: "ms", - raw: 110735000 - }, - previousDuration: { - value: 12.55, - unit: "ms", - raw: 12548500 - }, - changeTime: "2023-06-30T11:08:55.000Z", - changeVerified: true, - traceIds: ["6FB14B53449D3D360DC42A5F44F9D35B"] - }, - { - percentile: 0.95, - currentDuration: { - value: 2.01, - unit: "sec", - raw: 2005005050 - }, - previousDuration: { - value: 2.01, - unit: "sec", - raw: 2005133700 - }, - changeTime: "2023-06-30T11:10:00.000Z", - changeVerified: true, - traceIds: ["E6FE5ACDDB1C6E6D5284B1D9579964B0"] - } - ], - lastSpanInstanceInfo: { - traceId: "3E41E4197B696CA9BF1157AEB254DFE0", - spanId: "9C31D7C85CF413B4", - startTime: "2023-06-30T11:10:13.542Z", - duration: { - value: 91.95, - unit: "ms", - raw: 91951000 - } - }, - scope: InsightScope.Span, - spanInfo: { - name: "DelayAsync", - displayName: "DelayAsync", - instrumentationLibrary: "SampleInsightsController", - spanCodeObjectId: "span:SampleInsightsController$_$DelayAsync", - methodCodeObjectId: null, - kind: "Internal", - codeObjectId: null - }, - shortDisplayInfo: { - title: "", - targetDisplayName: "", - subtitle: "", - description: "" - }, - codeObjectId: "SampleInsightsController$_$DelayAsync", - decorators: [ - { - title: "Slowing", - description: "Duration for this section is increasing" - } - ], - environment: "BOB-LAPTOP[LOCAL]", - importance: 2, - severity: 0, - prefixedCodeObjectId: "span:SampleInsightsController$_$DelayAsync", - customStartTime: null, - actualStartTime: "2023-06-17T00:00:00.000Z", - isAsync: false, + ...mockedSpanDurationsInsight, histogramPlot: { bars: [ { @@ -5137,111 +4629,10 @@ export const HistogramWithGaps: Story = { } }; -export const HistogramWithAFewBars: Story = { +export const WithHistogramWithAFewBars: Story = { args: { insight: { - sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", - id: "60b55792-8262-4c5d-9628-7cce7979ad6d", - firstDetected: null, - lastDetected: null, - criticality: 0, - firstCommitId: null, - lastCommitId: null, - deactivatedCommitId: null, - reopenCount: 0, - ticketLink: null, - impact: 0, - name: "Performance Stats", - type: InsightType.SpanDurations, - category: InsightCategory.Performance, - specifity: 4, - isRecalculateEnabled: true, - spanCodeObjectId: "span:SampleInsightsController$_$DelayAsync", - isDismissed: false, - isDismissible: true, - span: { - name: "DelayAsync", - displayName: "DelayAsync", - instrumentationLibrary: "SampleInsightsController", - spanCodeObjectId: "span:SampleInsightsController$_$DelayAsync", - methodCodeObjectId: null, - kind: "Internal", - codeObjectId: null - }, - percentiles: [ - { - percentile: 0.5, - currentDuration: { - value: 110.74, - unit: "ms", - raw: 110735000 - }, - previousDuration: { - value: 12.55, - unit: "ms", - raw: 12548500 - }, - changeTime: "2023-06-30T11:08:55.000Z", - changeVerified: true, - traceIds: ["6FB14B53449D3D360DC42A5F44F9D35B"] - }, - { - percentile: 0.95, - currentDuration: { - value: 2.01, - unit: "sec", - raw: 2005005050 - }, - previousDuration: { - value: 2.01, - unit: "sec", - raw: 2005133700 - }, - changeTime: "2023-06-30T11:10:00.000Z", - changeVerified: true, - traceIds: ["E6FE5ACDDB1C6E6D5284B1D9579964B0"] - } - ], - lastSpanInstanceInfo: { - traceId: "3E41E4197B696CA9BF1157AEB254DFE0", - spanId: "9C31D7C85CF413B4", - startTime: "2023-06-30T11:10:13.542Z", - duration: { - value: 91.95, - unit: "ms", - raw: 91951000 - } - }, - scope: InsightScope.Span, - spanInfo: { - name: "DelayAsync", - displayName: "DelayAsync", - instrumentationLibrary: "SampleInsightsController", - spanCodeObjectId: "span:SampleInsightsController$_$DelayAsync", - methodCodeObjectId: null, - kind: "Internal", - codeObjectId: null - }, - shortDisplayInfo: { - title: "", - targetDisplayName: "", - subtitle: "", - description: "" - }, - codeObjectId: "SampleInsightsController$_$DelayAsync", - decorators: [ - { - title: "Slowing", - description: "Duration for this section is increasing" - } - ], - environment: "BOB-LAPTOP[LOCAL]", - importance: 2, - severity: 0, - prefixedCodeObjectId: "span:SampleInsightsController$_$DelayAsync", - customStartTime: null, - actualStartTime: "2023-06-17T00:00:00.000Z", - isAsync: false, + ...mockedSpanDurationsInsight, histogramPlot: { bars: [ { diff --git a/src/components/Insights/common/insights/DurationInsight/XAxisTick/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/XAxisTick/index.tsx similarity index 100% rename from src/components/Insights/common/insights/DurationInsight/XAxisTick/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/XAxisTick/index.tsx diff --git a/src/components/Insights/DurationInsight/XAxisTick/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/XAxisTick/types.ts similarity index 100% rename from src/components/Insights/DurationInsight/XAxisTick/types.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/XAxisTick/types.ts diff --git a/src/components/Insights/common/insights/DurationInsight/constants.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/constants.ts similarity index 57% rename from src/components/Insights/common/insights/DurationInsight/constants.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/constants.ts index d1473fba1..02cb81b7e 100644 --- a/src/components/Insights/common/insights/DurationInsight/constants.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/constants.ts @@ -1,4 +1,4 @@ -import { typographies } from "../../../../common/App/typographies"; +import { typographies } from "../../../../../common/App/typographies"; export const LABEL_HEIGHT = typographies.captionOne.lineHeight; export const DIVIDER = " | "; diff --git a/src/components/Insights/common/insights/DurationInsight/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/index.tsx similarity index 82% rename from src/components/Insights/common/insights/DurationInsight/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/index.tsx index 03b2e31ae..8e0b209aa 100644 --- a/src/components/Insights/common/insights/DurationInsight/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/index.tsx @@ -9,29 +9,32 @@ import { XAxis } from "recharts"; import { DefaultTheme, useTheme } from "styled-components"; -import { PERCENTILES } from "../../../../../constants"; -import { Duration } from "../../../../../globals"; -import { isNumber } from "../../../../../typeGuards/isNumber"; -import { convertToDuration } from "../../../../../utils/convertToDuration"; -import { formatTimeDistance } from "../../../../../utils/formatTimeDistance"; -import { getDurationString } from "../../../../../utils/getDurationString"; -import { getPercentileLabel } from "../../../../../utils/getPercentileLabel"; -import { Tooltip as CommonTooltip } from "../../../../common/Tooltip"; -import { Tag } from "../../../../common/v3/Tag"; -import { InsightCard } from "../../../common/InsightCard"; +import { PERCENTILES } from "../../../../../../constants"; +import { Duration } from "../../../../../../globals"; +import { isNumber } from "../../../../../../typeGuards/isNumber"; +import { convertToDuration } from "../../../../../../utils/convertToDuration"; +import { formatTimeDistance } from "../../../../../../utils/formatTimeDistance"; +import { getDurationString } from "../../../../../../utils/getDurationString"; +import { getPercentileLabel } from "../../../../../../utils/getPercentileLabel"; +import { Tooltip as CommonTooltip } from "../../../../../common/Tooltip"; +import { Tag } from "../../../../../common/v3/Tag"; import { HistogramBarData, NormalizedHistogramBarData, Trace -} from "../../../types"; -import { DurationChange, isChangeMeaningfulEnough } from "../../DurationChange"; -import { ColumnsContainer } from "../../InsightCard/ColumnsContainer"; -import { KeyValue } from "../../InsightCard/KeyValue"; +} from "../../../../types"; +import { + DurationChange, + isChangeMeaningfulEnough +} from "../common/DurationChange"; +import { InsightCard } from "../common/InsightCard"; +import { ColumnsContainer } from "../common/InsightCard/ColumnsContainer"; +import { KeyValue } from "../common/InsightCard/KeyValue"; import { ReferenceLineLabel } from "./ReferenceLineLabel"; import { XAxisTick } from "./XAxisTick"; import { DIVIDER, LABEL_HEIGHT } from "./constants"; import * as s from "./styles"; -import { DurationInsightProps, TickData } from "./types"; +import { SpanDurationsInsightCardProps, TickData } from "./types"; const LAST_CALL_TIME_DISTANCE_LIMIT = 60 * 1000; // in milliseconds @@ -127,19 +130,27 @@ const calculateBars = ( return newBars; }; -export const DurationInsight = (props: DurationInsightProps) => { +export const SpanDurationsInsightCard = ({ + insight, + onLiveButtonClick, + onRecalculate, + onRefresh, + onHistogramButtonClick, + onGoToSpan, + isMarkAsReadButtonEnabled +}: SpanDurationsInsightCardProps) => { const theme = useTheme(); const { observe, width } = useDimensions(); - const sortedPercentiles = [...props.insight.percentiles].sort( + const sortedPercentiles = [...insight.percentiles].sort( (a, b) => a.percentile - b.percentile ); - const spanLastCall = props.insight.lastSpanInstanceInfo; + const spanLastCall = insight.lastSpanInstanceInfo; const handleGoToLive = () => { - props.insight.prefixedCodeObjectId && - props.onLiveButtonClick(props.insight.prefixedCodeObjectId); + insight.prefixedCodeObjectId && + onLiveButtonClick(insight.prefixedCodeObjectId); }; const traces: Trace[] = []; @@ -149,9 +160,9 @@ export const DurationInsight = (props: DurationInsightProps) => { LAST_CALL_TIME_DISTANCE_LIMIT : false; - const chartData = props.insight.histogramPlot + const chartData = insight.histogramPlot ? calculateBars( - props.insight.histogramPlot.bars, + insight.histogramPlot.bars, Math.max(width - MIN_X_AXIS_PADDING * 2, 0) ) : []; @@ -161,11 +172,11 @@ export const DurationInsight = (props: DurationInsightProps) => { MIN_X_AXIS_PADDING ); - const p50 = props.insight.histogramPlot?.quantiles.find( + const p50 = insight.histogramPlot?.quantiles.find( (x) => x.quantileValue === 0.5 )?.timestamp; - const p95 = props.insight.histogramPlot?.quantiles.find( + const p95 = insight.histogramPlot?.quantiles.find( (x) => x.quantileValue === 0.95 )?.timestamp; @@ -261,11 +272,11 @@ export const DurationInsight = (props: DurationInsightProps) => { return ( - {!props.insight.histogramPlot && ( + {!insight.histogramPlot && ( Trigger more actions to see the full duration analysis @@ -323,27 +334,25 @@ export const DurationInsight = (props: DurationInsightProps) => { // TODO: add hourglass icon Waiting for more data... )} - {!props.insight.histogramPlot && - props.insight.average && - props.insight.average.raw > 0 && - props.insight.standardDeviation && ( + {!insight.histogramPlot && + insight.average && + insight.average.raw > 0 && + insight.standardDeviation && ( - {getDurationString(props.insight.average)} - {props.insight.standardDeviation.raw > 0 && - ` ± ${getDurationString( - props.insight.standardDeviation - )}`} + {getDurationString(insight.average)} + {insight.standardDeviation.raw > 0 && + ` ± ${getDurationString(insight.standardDeviation)}`} } type={"default"} - > + /> )} - {props.insight.histogramPlot && ( + {insight.histogramPlot && ( { )} } - onRecalculate={props.onRecalculate} - onRefresh={props.onRefresh} - isAsync={props.insight.isAsync} - onGoToLive={ - props.insight.prefixedCodeObjectId ? handleGoToLive : undefined - } - onOpenHistogram={ - props.insight.spanInfo ? props.onHistogramButtonClick : undefined - } - onGoToSpan={props.onGoToSpan} - isMarkAsReadButtonEnabled={props.isMarkAsReadButtonEnabled} + onRecalculate={onRecalculate} + onRefresh={onRefresh} + isAsync={insight.isAsync} + onGoToLive={insight.prefixedCodeObjectId ? handleGoToLive : undefined} + onOpenHistogram={insight.spanInfo ? onHistogramButtonClick : undefined} + onGoToSpan={onGoToSpan} + isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled} /> ); }; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/mockData.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/mockData.ts new file mode 100644 index 000000000..2b1939558 --- /dev/null +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/mockData.ts @@ -0,0 +1,111 @@ +import { + InsightCategory, + InsightScope, + InsightType, + SpanDurationsInsight +} from "../../../../types"; + +export const mockedSpanDurationsInsight: SpanDurationsInsight = { + sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", + id: "60b55792-8262-4c5d-9628-7cce7979ad6d", + 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: "Performance Stats", + type: InsightType.SpanDurations, + category: InsightCategory.Performance, + specifity: 4, + isRecalculateEnabled: true, + spanCodeObjectId: "span:SampleInsightsController$_$DelayAsync", + isDismissed: false, + isDismissible: true, + span: { + name: "DelayAsync", + displayName: "DelayAsync", + instrumentationLibrary: "SampleInsightsController", + spanCodeObjectId: "span:SampleInsightsController$_$DelayAsync", + methodCodeObjectId: null, + kind: "Internal", + codeObjectId: null + }, + percentiles: [ + { + percentile: 0.5, + currentDuration: { + value: 110.74, + unit: "ms", + raw: 110735000 + }, + previousDuration: { + value: 12.55, + unit: "ms", + raw: 12548500 + }, + changeTime: "2023-06-30T11:08:55.000Z", + changeVerified: true, + traceIds: ["6FB14B53449D3D360DC42A5F44F9D35B"] + }, + { + percentile: 0.95, + currentDuration: { + value: 2.31, + unit: "sec", + raw: 2305005050 + }, + previousDuration: { + value: 2.01, + unit: "sec", + raw: 2005133700 + }, + changeTime: "2023-06-30T11:10:00.000Z", + changeVerified: true, + traceIds: ["E6FE5ACDDB1C6E6D5284B1D9579964B0"] + } + ], + lastSpanInstanceInfo: { + traceId: "3E41E4197B696CA9BF1157AEB254DFE0", + spanId: "9C31D7C85CF413B4", + startTime: "2023-06-30T11:10:13.542Z", + duration: { + value: 91.95, + unit: "ms", + raw: 91951000 + } + }, + scope: InsightScope.Span, + spanInfo: { + name: "DelayAsync", + displayName: "DelayAsync", + instrumentationLibrary: "SampleInsightsController", + spanCodeObjectId: "span:SampleInsightsController$_$DelayAsync", + methodCodeObjectId: null, + kind: "Internal", + codeObjectId: null + }, + shortDisplayInfo: { + title: "", + targetDisplayName: "", + subtitle: "", + description: "" + }, + codeObjectId: "SampleInsightsController$_$DelayAsync", + decorators: [ + { + title: "Slowing", + description: "Duration for this section is increasing" + } + ], + environment: "BOB-LAPTOP[LOCAL]", + importance: 2, + severity: 0, + prefixedCodeObjectId: "span:SampleInsightsController$_$DelayAsync", + customStartTime: null, + actualStartTime: "2023-06-17T00:00:00.000Z", + isAsync: false +}; diff --git a/src/components/Insights/common/insights/DurationInsight/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/styles.ts similarity index 86% rename from src/components/Insights/common/insights/DurationInsight/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/styles.ts index 66fd61ca9..db6d347a5 100644 --- a/src/components/Insights/common/insights/DurationInsight/styles.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/styles.ts @@ -1,6 +1,6 @@ import styled from "styled-components"; -import { footnoteRegularTypography } from "../../../../common/App/typographies"; -import { KeyValue } from "../../InsightCard/KeyValue"; +import { footnoteRegularTypography } from "../../../../../common/App/typographies"; +import { KeyValue } from "../common/InsightCard/KeyValue"; import { ChartContainerProps } from "./types"; export const Container = styled.div` diff --git a/src/components/Insights/DurationInsight/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/types.ts similarity index 73% rename from src/components/Insights/DurationInsight/types.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/types.ts index d47c95425..0dd2dfe26 100644 --- a/src/components/Insights/DurationInsight/types.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/types.ts @@ -1,7 +1,7 @@ -import { InsightType } from "../../../types"; -import { InsightProps, SpanDurationsInsight, Trace } from "../types"; +import { InsightType, SpanDurationsInsight, Trace } from "../../../../types"; +import { InsightCardCommonProps } from "../common/InsightCard/types"; -export interface DurationInsightProps extends InsightProps { +export interface SpanDurationsInsightCardProps extends InsightCardCommonProps { insight: SpanDurationsInsight; onHistogramButtonClick: ( instrumentationLibrary: string, diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/SpanEndpointBottleneckInsightCard.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/SpanEndpointBottleneckInsightCard.stories.tsx new file mode 100644 index 000000000..647bd59a6 --- /dev/null +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/SpanEndpointBottleneckInsightCard.stories.tsx @@ -0,0 +1,33 @@ +import { Meta, StoryObj } from "@storybook/react"; +import { SpanEndpointBottleneckInsightCard } from "."; +import { mockedSpanEndpointBottleneckInsight } from "./mockData"; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction +const meta: Meta = { + title: + "Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard", + component: SpanEndpointBottleneckInsightCard, + 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; + +export const Default: Story = { + args: { + insight: mockedSpanEndpointBottleneckInsight + } +}; + +export const WithoutEndpoints: Story = { + args: { + insight: { + ...mockedSpanEndpointBottleneckInsight, + slowEndpoints: [] + } + } +}; diff --git a/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/index.tsx similarity index 69% rename from src/components/Insights/common/insights/SpanEndpointBottleneckInsight/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/index.tsx index c186be29f..01d8f4562 100644 --- a/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/index.tsx @@ -1,21 +1,21 @@ import { ReactNode, useContext, useState } from "react"; -import { isNull } from "../../../../../typeGuards/isNull"; -import { getDurationString } from "../../../../../utils/getDurationString"; -import { trimEndpointScheme } from "../../../../../utils/trimEndpointScheme"; -import { ConfigContext } from "../../../../common/App/ConfigContext"; -import { TraceIcon } from "../../../../common/icons/12px/TraceIcon"; -import { Button } from "../../../../common/v3/Button"; -import { Link } from "../../../../common/v3/Link"; -import { Tooltip } from "../../../../common/v3/Tooltip"; -import { BottleneckEndpointInfo, InsightType, Trace } from "../../../types"; -import { Info } from "../../Info"; -import { InsightCard } from "../../InsightCard"; -import { ColumnsContainer } from "../../InsightCard/ColumnsContainer"; -import { KeyValue } from "../../InsightCard/KeyValue"; -import { Select } from "../../InsightCard/Select"; +import { isNull } from "../../../../../../typeGuards/isNull"; +import { getDurationString } from "../../../../../../utils/getDurationString"; +import { trimEndpointScheme } from "../../../../../../utils/trimEndpointScheme"; +import { ConfigContext } from "../../../../../common/App/ConfigContext"; +import { TraceIcon } from "../../../../../common/icons/12px/TraceIcon"; +import { Button } from "../../../../../common/v3/Button"; +import { Link } from "../../../../../common/v3/Link"; +import { Tooltip } from "../../../../../common/v3/Tooltip"; +import { BottleneckEndpointInfo, InsightType, Trace } from "../../../../types"; +import { Info } from "../common/Info"; +import { InsightCard } from "../common/InsightCard"; +import { ColumnsContainer } from "../common/InsightCard/ColumnsContainer"; +import { KeyValue } from "../common/InsightCard/KeyValue"; +import { Select } from "../common/InsightCard/Select"; import { ContentContainer, Description, Details } from "../styles"; import * as s from "./styles"; -import { SpanEndpointBottleneckInsightProps } from "./types"; +import { SpanEndpointBottleneckInsightCardProps } from "./types"; const renderOptions = ( endpoints: BottleneckEndpointInfo[], @@ -40,26 +40,32 @@ const renderOptions = ( }; }); -export const SpanEndpointBottleneckInsight = ( - props: SpanEndpointBottleneckInsightProps -) => { +export const SpanEndpointBottleneckInsightCard = ({ + insight, + onJiraTicketCreate, + onAssetLinkClick, + onTraceButtonClick, + isJiraHintEnabled, + onRecalculate, + onRefresh, + onGoToSpan, + isMarkAsReadButtonEnabled +}: SpanEndpointBottleneckInsightCardProps) => { const config = useContext(ConfigContext); - const slowEndpoints = props.insight.slowEndpoints || []; + const slowEndpoints = insight.slowEndpoints || []; const [selectedEndpoint, setSelectedEndpoint] = useState( slowEndpoints.length > 0 ? slowEndpoints[0] : null ); const handleSpanLinkClick = (spanCodeObjectId?: string) => { - spanCodeObjectId && - props.onAssetLinkClick(spanCodeObjectId, props?.insight.type); + spanCodeObjectId && onAssetLinkClick(spanCodeObjectId, insight.type); }; - const handleCreateJiraTicketButtonClick = ( + const handleTicketInfoButtonClick = ( spanCodeObjectId: string | undefined, event: string ) => { - props.onJiraTicketCreate && - props.onJiraTicketCreate(props.insight, spanCodeObjectId, event); + onJiraTicketCreate && onJiraTicketCreate(insight, spanCodeObjectId, event); }; const handleTraceButtonClick = ( @@ -67,16 +73,16 @@ export const SpanEndpointBottleneckInsight = ( insightType: InsightType, spanCodeObjectId?: string ) => { - props.onTraceButtonClick(trace, insightType, spanCodeObjectId); + onTraceButtonClick(trace, insightType, spanCodeObjectId); }; return ( @@ -113,7 +119,7 @@ export const SpanEndpointBottleneckInsight = ( name: selectedEndpoint.endpointInfo.route, id: selectedEndpoint.traceId }, - props.insight.type, + insight.type, selectedEndpoint.endpointInfo.spanCodeObjectId ); }} @@ -157,10 +163,10 @@ export const SpanEndpointBottleneckInsight = ( )} } - onRecalculate={props.onRecalculate} - onRefresh={props.onRefresh} - onGoToSpan={props.onGoToSpan} - isMarkAsReadButtonEnabled={props.isMarkAsReadButtonEnabled} + onRecalculate={onRecalculate} + onRefresh={onRefresh} + onGoToSpan={onGoToSpan} + isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled} /> ); }; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/mockData.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/mockData.ts new file mode 100644 index 000000000..1e236ae6e --- /dev/null +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/mockData.ts @@ -0,0 +1,188 @@ +import { + InsightCategory, + InsightScope, + InsightType, + SpanEndpointBottleneckInsight +} from "../../../../types"; + +export const mockedSpanEndpointBottleneckInsight: SpanEndpointBottleneckInsight = + { + sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", + id: "60b55792-8262-4c5d-9628-1cce7979ac6d", + firstDetected: "2023-12-05T17:25:47.010Z", + lastDetected: "2024-01-05T13:14:47.010Z", + criticality: 0.7, + firstCommitId: "b3f7b3f", + lastCommitId: "a1b2c3d", + deactivatedCommitId: null, + reopenCount: 0, + ticketLink: null, + impact: 0, + name: "Bottleneck", + type: InsightType.SpanEndpointBottleneck, + category: InsightCategory.Performance, + specifity: 3, + importance: 2, + isDismissed: false, + isDismissible: true, + span: { + name: "WaitForLock", + displayName: "WaitForLock", + instrumentationLibrary: "SampleInsightsController", + spanCodeObjectId: "span:SampleInsightsController$_$WaitForLock", + methodCodeObjectId: null, + kind: null, + codeObjectId: null + }, + slowEndpoints: [ + { + endpointInfo: { + route: "epHTTP:HTTP GET SampleInsights/lock/{milisec}", + instrumentationLibrary: "OpenTelemetry.Instrumentation.AspNetCore", + serviceName: "Sample.MoneyTransfer.API", + codeObjectId: + "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double)", + spanCodeObjectId: + "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/lock/{milisec}", + spanName: "HTTP GET SampleInsights/lock/{milisec}" + }, + traceId: "traceId", + probabilityOfBeingBottleneck: 0.36877828054298645, + avgFractionWhenBeingBottleneck: 50, + avgDurationWhenBeingBottleneck: { + value: 3.89, + unit: "sec", + raw: 3887134558.2822084 + }, + impact: 0.14877828054298645, + severity: 0.2877828054298645, + criticality: 0.5687782805429865, + requestPercentage: 35, + p50: { + fraction: 0, + maxDuration: { + value: 0, + unit: "ns", + raw: 0 + } + }, + p95: { + fraction: 0, + maxDuration: { + value: 0, + unit: "ns", + raw: 0 + } + }, + p99: { + fraction: 0, + maxDuration: { + value: 0, + unit: "ns", + raw: 0 + } + } + }, + { + endpointInfo: { + route: "epHTTP:HTTP GET SampleInsights/lock/{milisec} 1", + instrumentationLibrary: "OpenTelemetry.Instrumentation.AspNetCore", + serviceName: "Sample.MoneyTransfer.API", + codeObjectId: + "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double) 1", + spanCodeObjectId: + "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/lock/{milisec} 1", + spanName: "HTTP GET SampleInsights/lock/{milisec}" + }, + traceId: "traceId", + probabilityOfBeingBottleneck: 0.36877828054298645, + avgFractionWhenBeingBottleneck: 50, + avgDurationWhenBeingBottleneck: { + value: 3.89, + unit: "sec", + raw: 3887134558.2822084 + }, + impact: 0.14877828054298645, + severity: 0.2877828054298645, + criticality: 0.5687782805429865, + requestPercentage: 35, + p50: { + fraction: 0, + maxDuration: { + value: 0, + unit: "ns", + raw: 0 + } + }, + p95: { + fraction: 0, + maxDuration: { + value: 0, + unit: "ns", + raw: 0 + } + }, + p99: { + fraction: 0, + maxDuration: { + value: 0, + unit: "ns", + raw: 0 + } + } + } + ], + p50: { + fraction: 0, + maxDuration: { + value: 0, + unit: "ns", + raw: 0 + } + }, + p95: { + fraction: 0, + maxDuration: { + value: 0, + unit: "ns", + raw: 0 + } + }, + p99: { + fraction: 0, + maxDuration: { + value: 0, + unit: "ns", + raw: 0 + } + }, + scope: InsightScope.Span, + spanInfo: { + name: "WaitForLock", + displayName: "WaitForLock", + instrumentationLibrary: "SampleInsightsController", + spanCodeObjectId: "span:SampleInsightsController$_$WaitForLock", + methodCodeObjectId: null, + kind: null, + codeObjectId: null + }, + shortDisplayInfo: { + title: "", + targetDisplayName: "", + subtitle: "", + description: "" + }, + codeObjectId: "SampleInsightsController$_$WaitForLock", + decorators: [ + { + title: "Bottleneck", + description: "Significant portion of traces spent here" + } + ], + environment: "BOB-LAPTOP[LOCAL]", + severity: 0, + isRecalculateEnabled: false, + prefixedCodeObjectId: "span:SampleInsightsController$_$WaitForLock", + customStartTime: null, + actualStartTime: "2023-06-16T11:10:20.088Z" + }; diff --git a/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/styles.ts similarity index 76% rename from src/components/Insights/common/insights/SpanEndpointBottleneckInsight/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/styles.ts index eb22df421..13722a693 100644 --- a/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/styles.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/styles.ts @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { footnoteRegularTypography } from "../../../../common/App/typographies"; +import { footnoteRegularTypography } from "../../../../../common/App/typographies"; export const SelectedItem = styled.div` ${footnoteRegularTypography} diff --git a/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/types.ts similarity index 62% rename from src/components/Insights/common/insights/SpanEndpointBottleneckInsight/types.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/types.ts index 4d514473f..821bfeff3 100644 --- a/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/types.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/types.ts @@ -1,11 +1,12 @@ import { - InsightProps, InsightType, SpanEndpointBottleneckInsight, Trace -} from "../../../types"; +} from "../../../../types"; +import { InsightCardCommonProps } from "../common/InsightCard/types"; -export interface SpanEndpointBottleneckInsightProps extends InsightProps { +export interface SpanEndpointBottleneckInsightCardProps + extends InsightCardCommonProps { insight: SpanEndpointBottleneckInsight; onAssetLinkClick: ( spanCodeObjectId: string, diff --git a/src/components/Insights/common/insights/SpanNexusInsight/SpanNexusInsight.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanNexusInsightCard/SpanNexusInsightCard.stories.tsx similarity index 70% rename from src/components/Insights/common/insights/SpanNexusInsight/SpanNexusInsight.stories.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanNexusInsightCard/SpanNexusInsightCard.stories.tsx index ac9fb4451..328b7a264 100644 --- a/src/components/Insights/common/insights/SpanNexusInsight/SpanNexusInsight.stories.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanNexusInsightCard/SpanNexusInsightCard.stories.tsx @@ -1,11 +1,11 @@ import { Meta, StoryObj } from "@storybook/react"; -import { SpanNexusInsight } from "."; +import { SpanNexusInsightCard } from "."; import { mockedSpanNexusInsight } from "./mockData"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction -const meta: Meta = { - title: "Insights/common/insights/SpanNexusInsight", - component: SpanNexusInsight, +const meta: Meta = { + title: "Insights/InsightsCatalog/InsightsPage/insightCards/SpanNexusInsight", + component: SpanNexusInsightCard, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout layout: "fullscreen" diff --git a/src/components/Insights/common/insights/SpanNexusInsight/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanNexusInsightCard/index.tsx similarity index 66% rename from src/components/Insights/common/insights/SpanNexusInsight/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanNexusInsightCard/index.tsx index 2695c7400..b8d2f6695 100644 --- a/src/components/Insights/common/insights/SpanNexusInsight/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanNexusInsightCard/index.tsx @@ -1,17 +1,22 @@ -import { Tag } from "../../../../common/v3/Tag"; -import { InsightCard } from "../../InsightCard"; -import { ColumnsContainer } from "../../InsightCard/ColumnsContainer"; -import { KeyValue } from "../../InsightCard/KeyValue"; +import { Tag } from "../../../../../common/v3/Tag"; +import { InsightCard } from "../common/InsightCard"; +import { ColumnsContainer } from "../common/InsightCard/ColumnsContainer"; +import { KeyValue } from "../common/InsightCard/KeyValue"; import { ContentContainer } from "../styles"; import * as s from "./styles"; -import { SpanNexusInsightProps } from "./types"; +import { SpanNexusInsightCardProps } from "./types"; const getTagType = (isHigh: boolean) => { return isHigh ? "mediumSeverity" : "default"; }; -export const SpanNexusInsight = (props: SpanNexusInsightProps) => { - const { insight } = props; +export const SpanNexusInsightCard = ({ + insight, + onRecalculate, + onRefresh, + onGoToSpan, + isMarkAsReadButtonEnabled +}: SpanNexusInsightCardProps) => { const { entries, flows, @@ -47,10 +52,10 @@ export const SpanNexusInsight = (props: SpanNexusInsightProps) => { } - onRecalculate={props.onRecalculate} - onRefresh={props.onRefresh} - onGoToSpan={props.onGoToSpan} - isMarkAsReadButtonEnabled={props.isMarkAsReadButtonEnabled} + onRecalculate={onRecalculate} + onRefresh={onRefresh} + onGoToSpan={onGoToSpan} + isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled} /> ); }; diff --git a/src/components/Insights/common/insights/SpanNexusInsight/mockData.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanNexusInsightCard/mockData.ts similarity index 95% rename from src/components/Insights/common/insights/SpanNexusInsight/mockData.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanNexusInsightCard/mockData.ts index ecdfcb1e5..ae650253a 100644 --- a/src/components/Insights/common/insights/SpanNexusInsight/mockData.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanNexusInsightCard/mockData.ts @@ -1,9 +1,9 @@ -import { InsightType } from "../../../../../types"; +import { InsightType } from "../../../../../../types"; import { InsightCategory, InsightScope, SpanNexusInsight -} from "../../../types"; +} from "../../../../types"; export const mockedSpanNexusInsight: SpanNexusInsight = { sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", diff --git a/src/components/Insights/common/insights/SpanNexusInsight/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanNexusInsightCard/styles.ts similarity index 70% rename from src/components/Insights/common/insights/SpanNexusInsight/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanNexusInsightCard/styles.ts index caaa456ff..76ba51d26 100644 --- a/src/components/Insights/common/insights/SpanNexusInsight/styles.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanNexusInsightCard/styles.ts @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { subscriptRegularTypography } from "../../../../common/App/typographies"; +import { subscriptRegularTypography } from "../../../../../common/App/typographies"; export const Description = styled.div` display: flex; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanNexusInsightCard/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanNexusInsightCard/types.ts new file mode 100644 index 000000000..3b3e49b7a --- /dev/null +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanNexusInsightCard/types.ts @@ -0,0 +1,6 @@ +import { SpanNexusInsight } from "../../../../types"; +import { InsightCardCommonProps } from "../common/InsightCard/types"; + +export interface SpanNexusInsightCardProps extends InsightCardCommonProps { + insight: SpanNexusInsight; +} diff --git a/src/components/Insights/common/insights/SpanQueryOptimizationInsight/SpanQueryOptimizationInsight.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanQueryOptimizationInsightCard/SpanQueryOptimizationInsightCard.stories.tsx similarity index 79% rename from src/components/Insights/common/insights/SpanQueryOptimizationInsight/SpanQueryOptimizationInsight.stories.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanQueryOptimizationInsightCard/SpanQueryOptimizationInsightCard.stories.tsx index a975e20a1..60654dacc 100644 --- a/src/components/Insights/common/insights/SpanQueryOptimizationInsight/SpanQueryOptimizationInsight.stories.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanQueryOptimizationInsightCard/SpanQueryOptimizationInsightCard.stories.tsx @@ -1,11 +1,12 @@ import { Meta, StoryObj } from "@storybook/react"; -import { SpanQueryOptimizationInsight } from "."; -import { mockedQueryOptimizationInsight } from "./mockData"; +import { SpanQueryOptimizationInsightCard } from "."; +import { mockedSpanQueryOptimizationInsight } from "./mockData"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction -const meta: Meta = { - title: "Insights/common/insights/SpanQueryOptimizationInsight", - component: SpanQueryOptimizationInsight, +const meta: Meta = { + title: + "Insights/InsightsCatalog/InsightsPage/insightCards/SpanQueryOptimizationInsightCard", + component: SpanQueryOptimizationInsightCard, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout layout: "fullscreen" @@ -18,14 +19,14 @@ type Story = StoryObj; export const Default: Story = { args: { - insight: mockedQueryOptimizationInsight + insight: mockedSpanQueryOptimizationInsight } }; export const NoSpanCodeObjectId: Story = { args: { insight: { - ...mockedQueryOptimizationInsight, + ...mockedSpanQueryOptimizationInsight, spanInfo: null } } @@ -34,7 +35,7 @@ export const NoSpanCodeObjectId: Story = { export const ManyEndpoints: Story = { args: { insight: { - ...mockedQueryOptimizationInsight, + ...mockedSpanQueryOptimizationInsight, endpoints: [ { endpointInfo: { @@ -80,7 +81,7 @@ export const ManyEndpoints: Story = { export const LinkedJira: Story = { args: { insight: { - ...mockedQueryOptimizationInsight, + ...mockedSpanQueryOptimizationInsight, ticketLink: "https://digma.ai/1" } } diff --git a/src/components/Insights/common/insights/SpanQueryOptimizationInsight/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanQueryOptimizationInsightCard/index.tsx similarity index 54% rename from src/components/Insights/common/insights/SpanQueryOptimizationInsight/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanQueryOptimizationInsightCard/index.tsx index 46a08d457..dc455e97e 100644 --- a/src/components/Insights/common/insights/SpanQueryOptimizationInsight/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanQueryOptimizationInsightCard/index.tsx @@ -1,31 +1,38 @@ -import { usePagination } from "../../../../../hooks/usePagination"; -import { getDurationString } from "../../../../../utils/getDurationString"; -import { trimEndpointScheme } from "../../../../../utils/trimEndpointScheme"; -import { Pagination } from "../../../../common/v3/Pagination"; -import { InsightType, Trace } from "../../../types"; -import { InsightCard } from "../../InsightCard"; -import { ColumnsContainer } from "../../InsightCard/ColumnsContainer"; -import { KeyValue } from "../../InsightCard/KeyValue"; -import { ListItem } from "../../InsightCard/ListItem"; +import { usePagination } from "../../../../../../hooks/usePagination"; +import { getDurationString } from "../../../../../../utils/getDurationString"; +import { trimEndpointScheme } from "../../../../../../utils/trimEndpointScheme"; +import { Pagination } from "../../../../../common/v3/Pagination"; +import { InsightType, Trace } from "../../../../types"; +import { InsightCard } from "../common/InsightCard"; +import { ColumnsContainer } from "../common/InsightCard/ColumnsContainer"; +import { KeyValue } from "../common/InsightCard/KeyValue"; +import { ListItem } from "../common/InsightCard/ListItem"; import { ContentContainer, Description, Details } from "../styles"; import * as s from "./styles"; -import { QueryOptimizationInsightProps } from "./types"; +import { SpanQueryOptimizationInsightCardProps } from "./types"; const PAGE_SIZE = 3; -export const SpanQueryOptimizationInsight = ( - props: QueryOptimizationInsightProps -) => { - const endpoints = props.insight.endpoints || []; +export const SpanQueryOptimizationInsightCard = ({ + insight, + onAssetLinkClick, + onTraceButtonClick, + onRecalculate, + onRefresh, + onGoToSpan, + isMarkAsReadButtonEnabled, + isJiraHintEnabled, + onJiraTicketCreate +}: SpanQueryOptimizationInsightCardProps) => { + const endpoints = insight.endpoints || []; const [pageItems, page, setPage] = usePagination( endpoints, PAGE_SIZE, - props.insight.id + insight.id ); const handleSpanLinkClick = (spanCodeObjectId?: string) => { - spanCodeObjectId && - props.onAssetLinkClick(spanCodeObjectId, props.insight.type); + spanCodeObjectId && onAssetLinkClick(spanCodeObjectId, insight.type); }; const handleTraceButtonClick = ( @@ -33,32 +40,30 @@ export const SpanQueryOptimizationInsight = ( insightType: InsightType, spanCodeObjectId?: string ) => { - props.onTraceButtonClick(trace, insightType, spanCodeObjectId); + onTraceButtonClick(trace, insightType, spanCodeObjectId); }; - const handleCreateJiraTicketButtonClick = ( + const handleTicketInfoButtonClick = ( spanCodeObjectId: string | undefined, event: string ) => { - props.onJiraTicketCreate && - props.onJiraTicketCreate(props.insight, spanCodeObjectId, event); + onJiraTicketCreate && onJiraTicketCreate(insight, spanCodeObjectId, event); }; - const spanName = props.insight.spanInfo?.displayName || undefined; - const spanCodeObjectId = - props.insight.spanInfo?.spanCodeObjectId || undefined; - const traceId = props.insight.traceId; + const spanName = insight.spanInfo?.displayName || undefined; + const spanCodeObjectId = insight.spanInfo?.spanCodeObjectId || undefined; + const traceId = insight.traceId; return ( {spanCodeObjectId && (
Query is slow compared to other{" "} - {props.insight.dbStatement.toUpperCase()} requests + {insight.dbStatement.toUpperCase()} requests - {getDurationString(props.insight.duration)} + {getDurationString(insight.duration)} - {getDurationString(props.insight.typicalDuration)} + {getDurationString(insight.typicalDuration)} - {props.insight.dbName} + {insight.dbName} {endpoints.length > 0 && ( <> @@ -102,12 +107,12 @@ export const SpanQueryOptimizationInsight = ( )} } - onRecalculate={props.onRecalculate} - onRefresh={props.onRefresh} - onJiraButtonClick={handleCreateJiraTicketButtonClick} + onRecalculate={onRecalculate} + onRefresh={onRefresh} + onJiraButtonClick={handleTicketInfoButtonClick} jiraTicketInfo={{ - ticketLink: props.insight.ticketLink, - isHintEnabled: props.isJiraHintEnabled + ticketLink: insight.ticketLink, + isHintEnabled: isJiraHintEnabled }} onGoToTrace={ traceId @@ -117,13 +122,13 @@ export const SpanQueryOptimizationInsight = ( name: spanName, id: traceId }, - props.insight.type, + insight.type, spanCodeObjectId ) : undefined } - onGoToSpan={props.onGoToSpan} - isMarkAsReadButtonEnabled={props.isMarkAsReadButtonEnabled} + onGoToSpan={onGoToSpan} + isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled} /> ); }; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanQueryOptimizationInsightCard/mockData.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanQueryOptimizationInsightCard/mockData.ts new file mode 100644 index 000000000..d78559686 --- /dev/null +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanQueryOptimizationInsightCard/mockData.ts @@ -0,0 +1,101 @@ +import { + InsightCategory, + InsightScope, + InsightType, + SpanQueryOptimizationInsight +} from "../../../../types"; + +export const mockedSpanQueryOptimizationInsight: SpanQueryOptimizationInsight = + { + sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", + id: "60b55792-8262-4c8d-9628-7cce7979ad6d", + 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: "QueryOptimization", + type: InsightType.SpanQueryOptimization, + category: InsightCategory.Performance, + specifity: 2, + importance: 2, + isDismissed: false, + isDismissible: true, + span: { + name: "OwnerValidation.ValidateOwner", + displayName: "OwnerValidation.ValidateOwner", + instrumentationLibrary: + "io.opentelemetry.opentelemetry-instrumentation-annotations-1.16", + spanCodeObjectId: + "span:io.opentelemetry.opentelemetry-instrumentation-annotations-1.16$_$OwnerValidation.ValidateOwner", + methodCodeObjectId: + "org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner", + kind: "Internal", + codeObjectId: + "org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner" + }, + traceId: "00D37A4E7208E0F6E89AA7E2E37446A6", + duration: { + value: 12.34, + unit: "ms", + raw: 1636050588.0 + }, + typicalDuration: { + value: 4.56, + unit: "ms", + raw: 0 + }, + dbStatement: "select", + serviceName: "Petclinic", + dbName: "postgresql", + scope: InsightScope.Span, + spanInfo: { + name: "OwnerValidation.ValidateOwner", + displayName: "OwnerValidation.ValidateOwner", + instrumentationLibrary: + "io.opentelemetry.opentelemetry-instrumentation-annotations-1.16", + spanCodeObjectId: + "span:io.opentelemetry.opentelemetry-instrumentation-annotations-1.16$_$OwnerValidation.ValidateOwner", + methodCodeObjectId: + "org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner", + kind: "Internal", + codeObjectId: + "org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner" + }, + shortDisplayInfo: { + title: "", + targetDisplayName: "", + subtitle: "", + description: "" + }, + codeObjectId: + "org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner", + decorators: [ + { + title: "N+1", + description: "Supected NPlus One" + } + ], + environment: "BOB-LAPTOP[LOCAL]", + severity: 0.0, + isRecalculateEnabled: false, + prefixedCodeObjectId: + "method:org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner", + customStartTime: null, + actualStartTime: "2023-07-27T08:23:56.500827Z", + endpoints: [ + { + endpointInfo: { + route: "HTTP POST /owners/new", + instrumentationLibrary: "OwnerController", + spanCodeObjectId: + "span:io.opentelemetry.tomcat-10.0$_$HTTP POST /owners/new", + serviceName: "spring-petclinic" + } + } + ] + }; diff --git a/src/components/Insights/common/insights/SpanQueryOptimizationInsight/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanQueryOptimizationInsightCard/styles.ts similarity index 100% rename from src/components/Insights/common/insights/SpanQueryOptimizationInsight/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanQueryOptimizationInsightCard/styles.ts diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanQueryOptimizationInsightCard/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanQueryOptimizationInsightCard/types.ts new file mode 100644 index 000000000..e55af4271 --- /dev/null +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanQueryOptimizationInsightCard/types.ts @@ -0,0 +1,20 @@ +import { + InsightType, + SpanQueryOptimizationInsight, + Trace +} from "../../../../types"; +import { InsightCardCommonProps } from "../common/InsightCard/types"; + +export interface SpanQueryOptimizationInsightCardProps + extends InsightCardCommonProps { + insight: SpanQueryOptimizationInsight; + onAssetLinkClick: ( + spanCodeObjectId: string, + insightType: InsightType + ) => void; + onTraceButtonClick: ( + trace: Trace, + insightType: InsightType, + spanCodeObjectId?: string + ) => void; +} diff --git a/src/components/Insights/common/insights/ScalingIssueInsight/ScalingIssueInsight.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/SpanScalingInsightCard.stories.tsx similarity index 84% rename from src/components/Insights/common/insights/ScalingIssueInsight/ScalingIssueInsight.stories.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/SpanScalingInsightCard.stories.tsx index 7ad1945ed..54ce55682 100644 --- a/src/components/Insights/common/insights/ScalingIssueInsight/ScalingIssueInsight.stories.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/SpanScalingInsightCard.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from "@storybook/react"; -import { ScalingIssueInsight } from "."; +import { SpanScalingInsightCard } from "."; import { mockedSpanScalingInsight, ofDbSpan, @@ -8,9 +8,10 @@ import { } from "./mockData"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction -const meta: Meta = { - title: "Insights/common/insights/ScalingIssueInsight", - component: ScalingIssueInsight, +const meta: Meta = { + title: + "Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard", + component: SpanScalingInsightCard, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout layout: "fullscreen" diff --git a/src/components/Insights/common/insights/ScalingIssueInsight/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/index.tsx similarity index 58% rename from src/components/Insights/common/insights/ScalingIssueInsight/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/index.tsx index 290d89294..e13d84cae 100644 --- a/src/components/Insights/common/insights/ScalingIssueInsight/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/index.tsx @@ -1,33 +1,44 @@ import { useContext } from "react"; -import { usePagination } from "../../../../../hooks/usePagination"; -import { getDurationString } from "../../../../../utils/getDurationString"; -import { trimEndpointScheme } from "../../../../../utils/trimEndpointScheme"; -import { ConfigContext } from "../../../../common/App/ConfigContext"; -import { TraceIcon } from "../../../../common/icons/12px/TraceIcon"; -import { Button } from "../../../../common/v3/Button"; -import { JiraButton } from "../../../../common/v3/JiraButton"; -import { Pagination } from "../../../../common/v3/Pagination"; -import { InsightType, RootCauseSpanInfo, Trace } from "../../../types"; -import { InsightCard } from "../../InsightCard"; -import { ColumnsContainer } from "../../InsightCard/ColumnsContainer"; -import { KeyValue } from "../../InsightCard/KeyValue"; +import { usePagination } from "../../../../../../hooks/usePagination"; +import { getDurationString } from "../../../../../../utils/getDurationString"; +import { trimEndpointScheme } from "../../../../../../utils/trimEndpointScheme"; +import { ConfigContext } from "../../../../../common/App/ConfigContext"; +import { TraceIcon } from "../../../../../common/icons/12px/TraceIcon"; +import { Button } from "../../../../../common/v3/Button"; +import { JiraButton } from "../../../../../common/v3/JiraButton"; +import { Pagination } from "../../../../../common/v3/Pagination"; +import { InsightType, RootCauseSpanInfo, Trace } from "../../../../types"; +import { InsightCard } from "../common/InsightCard"; +import { ColumnsContainer } from "../common/InsightCard/ColumnsContainer"; +import { KeyValue } from "../common/InsightCard/KeyValue"; import { ContentContainer, Description } from "../styles"; import * as s from "./styles"; -import { ScalingIssueInsightProps } from "./types"; +import { SpanScalingInsightCardProps } from "./types"; const PAGE_SIZE = 3; -export const ScalingIssueInsight = (props: ScalingIssueInsightProps) => { +export const SpanScalingInsightCard = ({ + insight, + onAssetLinkClick, + onTraceButtonClick, + onJiraTicketCreate, + isJiraHintEnabled, + onHistogramButtonClick, + onRecalculate, + onRefresh, + onGoToSpan, + isMarkAsReadButtonEnabled +}: SpanScalingInsightCardProps) => { const config = useContext(ConfigContext); - const affectedEndpoints = props.insight.affectedEndpoints || []; + const affectedEndpoints = insight.affectedEndpoints || []; const [pageItems, page, setPage] = usePagination( affectedEndpoints, PAGE_SIZE, - props.insight.id + insight.id ); const handleLinkClick = (spanCodeObjectId: string) => { - props.onAssetLinkClick(spanCodeObjectId, props.insight.type); + onAssetLinkClick(spanCodeObjectId, insight.type); }; const handleTraceButtonClick = ( @@ -35,15 +46,14 @@ export const ScalingIssueInsight = (props: ScalingIssueInsightProps) => { insightType: InsightType, spanCodeObjectId: string ) => { - props.onTraceButtonClick(trace, insightType, spanCodeObjectId); + onTraceButtonClick(trace, insightType, spanCodeObjectId); }; - const handleCreateJiraTicketButtonClick = ( + const handleTicketInfoButtonClick = ( spanCodeObjectId: string | undefined, event: string ) => { - props.onJiraTicketCreate && - props.onJiraTicketCreate(props.insight, spanCodeObjectId, event); + onJiraTicketCreate && onJiraTicketCreate(insight, spanCodeObjectId, event); }; const renderRootCause = (rootCauseSpans: RootCauseSpanInfo[]) => { @@ -59,11 +69,11 @@ export const ScalingIssueInsight = (props: ScalingIssueInsightProps) => { const buttons = [ ]; @@ -78,7 +88,7 @@ export const ScalingIssueInsight = (props: ScalingIssueInsightProps) => { name: spanName, id: traceId }, - props.insight.type, + insight.type, spanCodeObjectId ) } @@ -101,22 +111,22 @@ export const ScalingIssueInsight = (props: ScalingIssueInsightProps) => { return ( - {props.insight.shortDisplayInfo.description} + {insight.shortDisplayInfo.description} - {props.insight.maxConcurrency} + {insight.maxConcurrency} - {getDurationString(props.insight.minDuration)} -{" "} - {getDurationString(props.insight.maxDuration)} + {getDurationString(insight.minDuration)} -{" "} + {getDurationString(insight.maxDuration)} - {renderRootCause(props.insight.rootCauseSpans)} + {renderRootCause(insight.rootCauseSpans)} {affectedEndpoints.length > 0 && ( Affected Endpoints @@ -142,21 +152,19 @@ export const ScalingIssueInsight = (props: ScalingIssueInsightProps) => { } jiraTicketInfo={{ - ticketLink: props.insight.ticketLink, - isHintEnabled: props.isJiraHintEnabled + ticketLink: insight.ticketLink, + isHintEnabled: isJiraHintEnabled }} onJiraButtonClick={ - props.insight.rootCauseSpans.length == 0 - ? handleCreateJiraTicketButtonClick + insight.rootCauseSpans.length == 0 + ? handleTicketInfoButtonClick : undefined } - onOpenHistogram={ - props.insight.spanInfo ? props.onHistogramButtonClick : undefined - } - onRecalculate={props.onRecalculate} - onRefresh={props.onRefresh} - onGoToSpan={props.onGoToSpan} - isMarkAsReadButtonEnabled={props.isMarkAsReadButtonEnabled} + onOpenHistogram={insight.spanInfo ? onHistogramButtonClick : undefined} + onRecalculate={onRecalculate} + onRefresh={onRefresh} + onGoToSpan={onGoToSpan} + isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled} /> ); }; diff --git a/src/components/Insights/common/insights/ScalingIssueInsight/mockData.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/mockData.ts similarity index 97% rename from src/components/Insights/common/insights/ScalingIssueInsight/mockData.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/mockData.ts index a489aef93..9d4ea7584 100644 --- a/src/components/Insights/common/insights/ScalingIssueInsight/mockData.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/mockData.ts @@ -2,10 +2,10 @@ import { InsightCategory, InsightScope, InsightType, - SpanScalingBadlyInsight -} from "../../../types"; + SpanScalingInsight +} from "../../../../types"; -export const mockedSpanScalingInsight: SpanScalingBadlyInsight = { +export const mockedSpanScalingInsight: SpanScalingInsight = { sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", id: "90b55792-8262-4c5d-9628-7cce7979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", @@ -18,7 +18,7 @@ export const mockedSpanScalingInsight: SpanScalingBadlyInsight = { ticketLink: null, impact: 0, name: "Scaling Issue Found", - type: InsightType.SpanScalingBadly, + type: InsightType.SpanScaling, category: InsightCategory.Performance, specifity: 4, importance: 2, diff --git a/src/components/Insights/common/insights/ScalingIssueInsight/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/styles.ts similarity index 76% rename from src/components/Insights/common/insights/ScalingIssueInsight/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/styles.ts index cd1cbf2b5..b6a182d11 100644 --- a/src/components/Insights/common/insights/ScalingIssueInsight/styles.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/styles.ts @@ -1,6 +1,6 @@ import styled from "styled-components"; -import { footnoteRegularTypography } from "../../../../common/App/typographies"; -import { ListItem } from "../../InsightCard/ListItem"; +import { footnoteRegularTypography } from "../../../../../common/App/typographies"; +import { ListItem } from "../common/InsightCard/ListItem"; export const InsightDescription = styled.span` ${footnoteRegularTypography} diff --git a/src/components/Insights/common/insights/ScalingIssueInsight/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/types.ts similarity index 58% rename from src/components/Insights/common/insights/ScalingIssueInsight/types.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/types.ts index 8dd33ce69..48f1bf78a 100644 --- a/src/components/Insights/common/insights/ScalingIssueInsight/types.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/types.ts @@ -1,12 +1,8 @@ -import { - InsightProps, - InsightType, - SpanScalingBadlyInsight, - Trace -} from "../../../types"; +import { InsightType, SpanScalingInsight, Trace } from "../../../../types"; +import { InsightCardCommonProps } from "../common/InsightCard/types"; -export interface ScalingIssueInsightProps extends InsightProps { - insight: SpanScalingBadlyInsight; +export interface SpanScalingInsightCardProps extends InsightCardCommonProps { + insight: SpanScalingInsight; onAssetLinkClick: ( spanCodeObjectId: string, insightType: InsightType diff --git a/src/components/Insights/EndpointNPlusOneInsight/EndpointNPlusOneInsight.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanUsagesInsightCard/SpanUsagesInsightCard.stories.tsx similarity index 57% rename from src/components/Insights/EndpointNPlusOneInsight/EndpointNPlusOneInsight.stories.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanUsagesInsightCard/SpanUsagesInsightCard.stories.tsx index f943d63dc..ebbe75bd4 100644 --- a/src/components/Insights/EndpointNPlusOneInsight/EndpointNPlusOneInsight.stories.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanUsagesInsightCard/SpanUsagesInsightCard.stories.tsx @@ -1,11 +1,12 @@ import { Meta, StoryObj } from "@storybook/react"; -import { EndpointNPlusOneInsight } from "."; -import { mockedEndpointNPlusOneInsight } from "./mockData"; +import { SpanUsagesInsightCard } from "."; +import { mockedSpanUsagesInsight } from "./mockData"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction -const meta: Meta = { - title: "Insights/EndpointNPlusOneInsight", - component: EndpointNPlusOneInsight, +const meta: Meta = { + title: + "Insights/InsightsCatalog/InsightsPage/insightCards/SpanUsagesInsightCard", + component: SpanUsagesInsightCard, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout layout: "fullscreen" @@ -18,6 +19,6 @@ type Story = StoryObj; export const Default: Story = { args: { - insight: mockedEndpointNPlusOneInsight + insight: mockedSpanUsagesInsight } }; diff --git a/src/components/Insights/common/insights/TopUsageInsight/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanUsagesInsightCard/index.tsx similarity index 77% rename from src/components/Insights/common/insights/TopUsageInsight/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanUsagesInsightCard/index.tsx index 5d4010989..6e223c104 100644 --- a/src/components/Insights/common/insights/TopUsageInsight/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanUsagesInsightCard/index.tsx @@ -5,23 +5,23 @@ import { useReactTable } from "@tanstack/react-table"; import { useContext, useEffect, useState } from "react"; -import { usePagination } from "../../../../../hooks/usePagination"; -import { usePrevious } from "../../../../../hooks/usePrevious"; -import { isNumber } from "../../../../../typeGuards/isNumber"; -import { InsightType } from "../../../../../types"; -import { roundTo } from "../../../../../utils/roundTo"; -import { ConfigContext } from "../../../../common/App/ConfigContext"; -import { TraceIcon } from "../../../../common/icons/12px/TraceIcon"; -import { ArrowDashedLineIcon } from "../../../../common/icons/ArrowDashedLineIcon"; -import { Direction } from "../../../../common/icons/types"; -import { Button } from "../../../../common/v3/Button"; -import { Pagination } from "../../../../common/v3/Pagination"; -import { Tag } from "../../../../common/v3/Tag"; -import { Tooltip } from "../../../../common/v3/Tooltip"; -import { SpanUsagesInsight, Trace } from "../../../types"; -import { InsightCard } from "../../InsightCard"; +import { usePagination } from "../../../../../../hooks/usePagination"; +import { usePrevious } from "../../../../../../hooks/usePrevious"; +import { isNumber } from "../../../../../../typeGuards/isNumber"; +import { InsightType } from "../../../../../../types"; +import { roundTo } from "../../../../../../utils/roundTo"; +import { ConfigContext } from "../../../../../common/App/ConfigContext"; +import { TraceIcon } from "../../../../../common/icons/12px/TraceIcon"; +import { ArrowDashedLineIcon } from "../../../../../common/icons/ArrowDashedLineIcon"; +import { Direction } from "../../../../../common/icons/types"; +import { Button } from "../../../../../common/v3/Button"; +import { Pagination } from "../../../../../common/v3/Pagination"; +import { Tag } from "../../../../../common/v3/Tag"; +import { Tooltip } from "../../../../../common/v3/Tooltip"; +import { SpanUsagesInsight, Trace } from "../../../../types"; +import { InsightCard } from "../common/InsightCard"; import * as s from "./styles"; -import { ColumnMeta, TopUsageInsightProps } from "./types"; +import { ColumnMeta, SpanUsagesInsightCardProps } from "./types"; const PAGE_SIZE = 3; @@ -31,33 +31,40 @@ const FlowArrow = ( ); -export const TopUsageInsight = (props: TopUsageInsightProps) => { +export const SpanUsagesInsightCard = ({ + insight, + onAssetLinkClick, + onTraceButtonClick, + onRecalculate, + onRefresh, + onGoToSpan, + isMarkAsReadButtonEnabled +}: SpanUsagesInsightCardProps) => { const config = useContext(ConfigContext); const [data, setData] = useState({ - pageItems: props.insight.flows.slice(0, PAGE_SIZE) + pageItems: insight.flows.slice(0, PAGE_SIZE) }); const [pageItems, page, setPage] = usePagination( - props.insight.flows, + insight.flows, PAGE_SIZE, - props.insight.id + insight.id ); const previousPage = usePrevious(page); - const previousInsightId = usePrevious(props.insight.id); + const previousInsightId = usePrevious(insight.id); // Keep pageItems in state to avoid table infinite re-rendering // More info: https://github.com/TanStack/table/issues/4614 useEffect(() => { if ( - (previousInsightId && previousInsightId !== props.insight.id) || + (previousInsightId && previousInsightId !== insight.id) || (isNumber(previousPage) && previousPage !== page) ) { setData({ pageItems }); } - }, [previousInsightId, props.insight, previousPage, page, pageItems]); + }, [previousInsightId, insight, previousPage, page, pageItems]); const handleServiceLinkClick = (spanCodeObjectId?: string) => { - spanCodeObjectId && - props.onAssetLinkClick(spanCodeObjectId, props.insight.type); + spanCodeObjectId && onAssetLinkClick(spanCodeObjectId, insight.type); }; const handleTraceButtonClick = ( @@ -65,7 +72,7 @@ export const TopUsageInsight = (props: TopUsageInsightProps) => { insightType: InsightType, spanCodeObjectId?: string ) => { - props.onTraceButtonClick(trace, insightType, spanCodeObjectId); + onTraceButtonClick(trace, insightType, spanCodeObjectId); }; const columnHelper = createColumnHelper(); @@ -177,8 +184,8 @@ export const TopUsageInsight = (props: TopUsageInsightProps) => { name, id: traceId }, - props.insight.type, - props.insight.spanInfo?.spanCodeObjectId + insight.type, + insight.spanInfo?.spanCodeObjectId ) } /> @@ -250,12 +257,12 @@ export const TopUsageInsight = (props: TopUsageInsightProps) => { return ( {renderTable()} { /> } - onRecalculate={props.onRecalculate} - onRefresh={props.onRefresh} - onGoToSpan={props.onGoToSpan} - isMarkAsReadButtonEnabled={props.isMarkAsReadButtonEnabled} + onRecalculate={onRecalculate} + onRefresh={onRefresh} + onGoToSpan={onGoToSpan} + isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled} /> ); }; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanUsagesInsightCard/mockData.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanUsagesInsightCard/mockData.ts new file mode 100644 index 000000000..b900a8f12 --- /dev/null +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanUsagesInsightCard/mockData.ts @@ -0,0 +1,100 @@ +import { + InsightCategory, + InsightScope, + InsightType, + SpanUsagesInsight +} from "../../../../types"; + +export const mockedSpanUsagesInsight: SpanUsagesInsight = { + sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", + id: "60b55792-8162-4c5d-9628-7cce7979ad6d", + 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: "Top Usage", + type: InsightType.SpanUsages, + category: InsightCategory.Usage, + specifity: 4, + isRecalculateEnabled: true, + importance: 5, + span: "DelayAsync", + sampleTrace: null, + isDismissed: false, + isDismissible: true, + flows: [ + { + sampleTraceIds: ["3E41E4197B696CA9BF1157AEB254DFE0"], + percentage: 40.15025041736227, + firstService: { + service: "Sample.MoneyTransfer.API", + span: "HTTP GET SampleInsights/lock/{milisec}", + codeObjectId: + "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double)", + spanCodeObjectId: + "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/lock/{milisec}" + }, + intermediateSpan: "WaitForLock", + lastService: null, + lastServiceSpan: null + }, + { + sampleTraceIds: ["3E41E4197B696CA9BF1157AEB254DFE0"], + percentage: 40.15025041736227, + firstService: { + service: "Sample.MoneyTransfer.API", + span: "HTTP GET SampleInsights/lock/{milisec}", + codeObjectId: + "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double)", + spanCodeObjectId: + "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/lock/{milisec}" + }, + intermediateSpan: "Connecting", + lastService: null, + lastServiceSpan: null + }, + { + sampleTraceIds: ["0DB20449C835447E04F6549627A3999F"], + percentage: 19.69949916527546, + firstService: { + service: "Sample.MoneyTransfer.API", + span: "HTTP GET SampleInsights/UnverifiedChange/{milisec}", + codeObjectId: + "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$UnverifiedChange(Int32)", + spanCodeObjectId: + "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/UnverifiedChange/{milisec}" + }, + intermediateSpan: null, + lastService: null, + lastServiceSpan: null + } + ], + scope: InsightScope.Span, + spanInfo: { + name: "DelayAsync", + displayName: "DelayAsync", + instrumentationLibrary: "SampleInsightsController", + spanCodeObjectId: "span:SampleInsightsController$_$DelayAsync", + methodCodeObjectId: null, + kind: "Internal", + codeObjectId: null + }, + shortDisplayInfo: { + title: "", + targetDisplayName: "", + subtitle: "", + description: "" + }, + codeObjectId: "SampleInsightsController$_$DelayAsync", + decorators: null, + environment: "BOB-LAPTOP[LOCAL]", + severity: 0, + prefixedCodeObjectId: "span:SampleInsightsController$_$DelayAsync", + customStartTime: null, + actualStartTime: "2023-06-17T00:00:00.000Z" +}; diff --git a/src/components/Insights/common/insights/TopUsageInsight/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanUsagesInsightCard/styles.ts similarity index 94% rename from src/components/Insights/common/insights/TopUsageInsight/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanUsagesInsightCard/styles.ts index 9cfa3b3f1..f7a62cdfb 100644 --- a/src/components/Insights/common/insights/TopUsageInsight/styles.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanUsagesInsightCard/styles.ts @@ -2,8 +2,8 @@ import styled from "styled-components"; import { caption2RegularTypography, footnoteRegularTypography -} from "../../../../common/App/typographies"; -import { Link as CommonLink } from "../../../../common/Link"; +} from "../../../../../common/App/typographies"; +import { Link as CommonLink } from "../../../../../common/Link"; export const Container = styled.div` display: flex; diff --git a/src/components/Insights/common/insights/TopUsageInsight/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanUsagesInsightCard/types.ts similarity index 59% rename from src/components/Insights/common/insights/TopUsageInsight/types.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanUsagesInsightCard/types.ts index b8fb960bb..70278c8b9 100644 --- a/src/components/Insights/common/insights/TopUsageInsight/types.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanUsagesInsightCard/types.ts @@ -1,11 +1,7 @@ -import { - InsightProps, - InsightType, - SpanUsagesInsight, - Trace -} from "../../../types"; +import { InsightType, SpanUsagesInsight, Trace } from "../../../../types"; +import { InsightCardCommonProps } from "../common/InsightCard/types"; -export interface TopUsageInsightProps extends InsightProps { +export interface SpanUsagesInsightCardProps extends InsightCardCommonProps { insight: SpanUsagesInsight; onAssetLinkClick: ( spanCodeObjectId: string, diff --git a/src/components/Insights/common/DurationChange/DurationChange.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/DurationChange/DurationChange.stories.tsx similarity index 92% rename from src/components/Insights/common/DurationChange/DurationChange.stories.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/DurationChange/DurationChange.stories.tsx index 9e2913457..fbe8602f3 100644 --- a/src/components/Insights/common/DurationChange/DurationChange.stories.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/DurationChange/DurationChange.stories.tsx @@ -3,7 +3,8 @@ import { DurationChange } from "."; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/common/DurationChange", + title: + "Insights/InsightsCatalog/InsightsPage/insightCards/common/DurationChange", component: DurationChange, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/common/DurationChange/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/DurationChange/index.tsx similarity index 83% rename from src/components/Insights/common/DurationChange/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/DurationChange/index.tsx index f1545837c..8c0f134de 100644 --- a/src/components/Insights/common/DurationChange/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/DurationChange/index.tsx @@ -1,12 +1,12 @@ import { formatDuration, intervalToDuration } from "date-fns"; -import { Duration } from "../../../../globals"; -import { formatTimeDistance } from "../../../../utils/formatTimeDistance"; -import { roundTo } from "../../../../utils/roundTo"; -import { ArrowIcon } from "../../../common/icons/ArrowIcon"; -import { Direction } from "../../../common/icons/types"; -import { Tag } from "../../../common/v3/Tag"; -import { TagType } from "../../../common/v3/Tag/types"; -import { Tooltip } from "../../../common/v3/Tooltip"; +import { Duration } from "../../../../../../../globals"; +import { formatTimeDistance } from "../../../../../../../utils/formatTimeDistance"; +import { roundTo } from "../../../../../../../utils/roundTo"; +import { ArrowIcon } from "../../../../../../common/icons/ArrowIcon"; +import { Direction } from "../../../../../../common/icons/types"; +import { Tag } from "../../../../../../common/v3/Tag"; +import { TagType } from "../../../../../../common/v3/Tag/types"; +import { Tooltip } from "../../../../../../common/v3/Tooltip"; import * as s from "./styles"; import { DurationChangeProps } from "./types"; diff --git a/src/components/Insights/common/DurationChange/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/DurationChange/styles.ts similarity index 100% rename from src/components/Insights/common/DurationChange/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/DurationChange/styles.ts diff --git a/src/components/Insights/common/DurationChange/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/DurationChange/types.ts similarity index 70% rename from src/components/Insights/common/DurationChange/types.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/DurationChange/types.ts index b594f6e56..7a17edb68 100644 --- a/src/components/Insights/common/DurationChange/types.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/DurationChange/types.ts @@ -1,4 +1,4 @@ -import { Duration } from "../../../../globals"; +import { Duration } from "../../../../../../../globals"; export interface DurationChangeProps { currentDuration: Duration; diff --git a/src/components/Insights/common/Info/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/Info/index.tsx similarity index 65% rename from src/components/Insights/common/Info/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/Info/index.tsx index 1b2a4e30b..d552b9fcd 100644 --- a/src/components/Insights/common/Info/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/Info/index.tsx @@ -1,5 +1,5 @@ -import { InfoCircleIcon } from "../../../common/icons/InfoCircleIcon"; -import { Tooltip } from "../../../common/v3/Tooltip"; +import { InfoCircleIcon } from "../../../../../../common/icons/InfoCircleIcon"; +import { Tooltip } from "../../../../../../common/v3/Tooltip"; import * as s from "./styles"; export const Info = (props: { text: string; name: string }) => ( diff --git a/src/components/Insights/common/Info/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/Info/styles.ts similarity index 100% rename from src/components/Insights/common/Info/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/Info/styles.ts diff --git a/src/components/Insights/common/InsightCard/ColumnsContainer/ColumnsContainer.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ColumnsContainer/ColumnsContainer.stories.tsx similarity index 87% rename from src/components/Insights/common/InsightCard/ColumnsContainer/ColumnsContainer.stories.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ColumnsContainer/ColumnsContainer.stories.tsx index b82859d23..57d7383ea 100644 --- a/src/components/Insights/common/InsightCard/ColumnsContainer/ColumnsContainer.stories.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ColumnsContainer/ColumnsContainer.stories.tsx @@ -4,7 +4,8 @@ import { KeyValue } from "../KeyValue"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/common/InsightCard/ColumnsContainer", + title: + "Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ColumnsContainer", component: ColumnsContainer, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/common/InsightCard/ColumnsContainer/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ColumnsContainer/index.tsx similarity index 100% rename from src/components/Insights/common/InsightCard/ColumnsContainer/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ColumnsContainer/index.tsx diff --git a/src/components/Insights/common/InsightCard/ColumnsContainer/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ColumnsContainer/styles.ts similarity index 100% rename from src/components/Insights/common/InsightCard/ColumnsContainer/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ColumnsContainer/styles.ts diff --git a/src/components/Insights/common/InsightCard/ColumnsContainer/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ColumnsContainer/types.ts similarity index 100% rename from src/components/Insights/common/InsightCard/ColumnsContainer/types.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ColumnsContainer/types.ts diff --git a/src/components/Insights/common/InsightCard/IconButton/IconButton.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/IconButton/IconButton.stories.tsx similarity index 78% rename from src/components/Insights/common/InsightCard/IconButton/IconButton.stories.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/IconButton/IconButton.stories.tsx index c6216d8bf..5abafa37c 100644 --- a/src/components/Insights/common/InsightCard/IconButton/IconButton.stories.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/IconButton/IconButton.stories.tsx @@ -1,10 +1,11 @@ import { Meta, StoryObj } from "@storybook/react"; import { IconButton } from "."; -import { JiraLogoIcon } from "../../../../common/icons/16px/JiraLogoIcon"; +import { JiraLogoIcon } from "../../../../../../../common/icons/16px/JiraLogoIcon"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/common/InsightCard/IconButton", + title: + "Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/IconButton", component: IconButton, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/common/InsightCard/IconButton/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/IconButton/index.tsx similarity index 100% rename from src/components/Insights/common/InsightCard/IconButton/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/IconButton/index.tsx diff --git a/src/components/Insights/common/InsightCard/IconButton/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/IconButton/styles.ts similarity index 100% rename from src/components/Insights/common/InsightCard/IconButton/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/IconButton/styles.ts diff --git a/src/components/Insights/common/InsightCard/IconButton/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/IconButton/types.ts similarity index 79% rename from src/components/Insights/common/InsightCard/IconButton/types.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/IconButton/types.ts index 57a692f7a..be5aadad5 100644 --- a/src/components/Insights/common/InsightCard/IconButton/types.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/IconButton/types.ts @@ -1,5 +1,5 @@ import { ComponentType } from "react"; -import { IconProps } from "../../../../common/icons/types"; +import { IconProps } from "../../../../../../../common/icons/types"; export interface IconButtonProps { icon: { diff --git a/src/components/Insights/common/InsightCard/InsightCard.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightCard.stories.tsx similarity index 76% rename from src/components/Insights/common/InsightCard/InsightCard.stories.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightCard.stories.tsx index 0cbdb4539..c5093fe77 100644 --- a/src/components/Insights/common/InsightCard/InsightCard.stories.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightCard.stories.tsx @@ -1,12 +1,16 @@ import { Meta, StoryObj } from "@storybook/react"; import { InsightCard } from "."; -import { ConfigContext, initialState } from "../../../common/App/ConfigContext"; -import { DeploymentType } from "../../../common/App/types"; -import { mockedEndpointNPlusOneInsight } from "../../EndpointNPlusOneInsight/mockData"; +import { + ConfigContext, + initialState +} from "../../../../../../common/App/ConfigContext"; +import { DeploymentType } from "../../../../../../common/App/types"; +import { mockedEndpointSpanNPlusOneInsight } from "../../EndpointSpanNPlusOneInsightInsightCard/mockData"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/common/InsightCard", + title: + "Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard", component: InsightCard, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout @@ -22,7 +26,7 @@ export const Default: Story = { args: { isAsync: true, insight: { - ...mockedEndpointNPlusOneInsight, + ...mockedEndpointSpanNPlusOneInsight, isRead: true } } @@ -32,7 +36,7 @@ export const JiraButtonIsPrimary: Story = { args: { isAsync: true, insight: { - ...mockedEndpointNPlusOneInsight, + ...mockedEndpointSpanNPlusOneInsight, isRead: true }, onGoToLive: undefined, @@ -46,7 +50,7 @@ export const LinkedJiraTicket: Story = { args: { isAsync: true, insight: { - ...mockedEndpointNPlusOneInsight, + ...mockedEndpointSpanNPlusOneInsight, isRead: true }, jiraTicketInfo: { @@ -65,7 +69,7 @@ export const Dismissed: Story = { args: { isAsync: true, insight: { - ...mockedEndpointNPlusOneInsight, + ...mockedEndpointSpanNPlusOneInsight, isDismissed: true, isRead: true }, @@ -100,7 +104,7 @@ export const WithDisabledDismissed: Story = { args: { isAsync: true, insight: { - ...mockedEndpointNPlusOneInsight, + ...mockedEndpointSpanNPlusOneInsight, isRead: true } } @@ -109,7 +113,7 @@ export const WithDisabledDismissed: Story = { export const Critical: Story = { args: { insight: { - ...mockedEndpointNPlusOneInsight, + ...mockedEndpointSpanNPlusOneInsight, criticality: 0.9, isRead: true } @@ -119,7 +123,7 @@ export const Critical: Story = { export const Unread: Story = { args: { insight: { - ...mockedEndpointNPlusOneInsight, + ...mockedEndpointSpanNPlusOneInsight, isRead: false } } diff --git a/src/components/Insights/common/InsightCard/InsightHeader/AsyncTag/AsyncTag.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/AsyncTag/AsyncTag.stories.tsx similarity index 82% rename from src/components/Insights/common/InsightCard/InsightHeader/AsyncTag/AsyncTag.stories.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/AsyncTag/AsyncTag.stories.tsx index 053010ece..3837003fc 100644 --- a/src/components/Insights/common/InsightCard/InsightHeader/AsyncTag/AsyncTag.stories.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/AsyncTag/AsyncTag.stories.tsx @@ -3,7 +3,8 @@ import { AsyncTag } from "."; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/common/InsightCard/InsightHeader/AsyncTag", + title: + "Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/AsyncTag", component: AsyncTag, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/common/InsightCard/InsightHeader/AsyncTag/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/AsyncTag/index.tsx similarity index 100% rename from src/components/Insights/common/InsightCard/InsightHeader/AsyncTag/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/AsyncTag/index.tsx diff --git a/src/components/Insights/common/InsightCard/InsightHeader/AsyncTag/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/AsyncTag/styles.ts similarity index 59% rename from src/components/Insights/common/InsightCard/InsightHeader/AsyncTag/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/AsyncTag/styles.ts index d5c972b9d..46b6d9425 100644 --- a/src/components/Insights/common/InsightCard/InsightHeader/AsyncTag/styles.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/AsyncTag/styles.ts @@ -1,6 +1,6 @@ import styled from "styled-components"; -import { footnoteRegularTypography } from "../../../../../common/App/typographies"; -import { Tag as TagCommon } from "../../../../../common/v3/Tag"; +import { footnoteRegularTypography } from "../../../../../../../../common/App/typographies"; +import { Tag as TagCommon } from "../../../../../../../../common/v3/Tag"; export const AsyncTag = styled(TagCommon)` ${footnoteRegularTypography} diff --git a/src/components/Insights/common/InsightCard/InsightHeader/InisghtHeader.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InisghtHeader.stories.tsx similarity index 85% rename from src/components/Insights/common/InsightCard/InsightHeader/InisghtHeader.stories.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InisghtHeader.stories.tsx index b34b55cb6..c9af8e5ac 100644 --- a/src/components/Insights/common/InsightCard/InsightHeader/InisghtHeader.stories.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InisghtHeader.stories.tsx @@ -3,7 +3,8 @@ import { InsightHeader } from "."; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/common/InsightCard/InsightHeader", + title: + "Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader", component: InsightHeader, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/common/InsightCard/InsightHeader/InsightStatusBadge/InsightStatusBadge.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge/InsightStatusBadge.stories.tsx similarity index 82% rename from src/components/Insights/common/InsightCard/InsightHeader/InsightStatusBadge/InsightStatusBadge.stories.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge/InsightStatusBadge.stories.tsx index f21f88170..6904e7f42 100644 --- a/src/components/Insights/common/InsightCard/InsightHeader/InsightStatusBadge/InsightStatusBadge.stories.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge/InsightStatusBadge.stories.tsx @@ -1,10 +1,11 @@ import { Meta, StoryObj } from "@storybook/react"; import { InsightStatusBadge } from "."; -import { InsightStatus } from "../../../../types"; +import { InsightStatus } from "../../../../../../../types"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/common/InsightCard/InsightHeader/InsightStatusBadge", + title: + "Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge", component: InsightStatusBadge, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/common/InsightCard/InsightHeader/InsightStatusBadge/getInsightStatusInfo.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge/getInsightStatusInfo.ts similarity index 93% rename from src/components/Insights/common/InsightCard/InsightHeader/InsightStatusBadge/getInsightStatusInfo.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge/getInsightStatusInfo.ts index d5fbfa044..f1a9b6d16 100644 --- a/src/components/Insights/common/InsightCard/InsightHeader/InsightStatusBadge/getInsightStatusInfo.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge/getInsightStatusInfo.ts @@ -1,5 +1,5 @@ import { DefaultTheme } from "styled-components/dist/types"; -import { InsightStatus } from "../../../../types"; +import { InsightStatus } from "../../../../../../../types"; interface InsightStatusInfo { label: string; diff --git a/src/components/Insights/common/InsightCard/InsightHeader/InsightStatusBadge/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge/index.tsx similarity index 100% rename from src/components/Insights/common/InsightCard/InsightHeader/InsightStatusBadge/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge/index.tsx diff --git a/src/components/Insights/common/InsightCard/InsightHeader/InsightStatusBadge/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge/styles.ts similarity index 89% rename from src/components/Insights/common/InsightCard/InsightHeader/InsightStatusBadge/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge/styles.ts index d6e3e6fd2..e37ad4915 100644 --- a/src/components/Insights/common/InsightCard/InsightHeader/InsightStatusBadge/styles.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge/styles.ts @@ -1,5 +1,5 @@ import styled, { css } from "styled-components"; -import { footnoteRegularTypography } from "../../../../../common/App/typographies"; +import { footnoteRegularTypography } from "../../../../../../../../common/App/typographies"; import { getInsightStatusInfo } from "./getInsightStatusInfo"; import { IndicatorProps } from "./types"; diff --git a/src/components/Insights/common/InsightCard/InsightHeader/InsightStatusBadge/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge/types.ts similarity index 72% rename from src/components/Insights/common/InsightCard/InsightHeader/InsightStatusBadge/types.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge/types.ts index 2ae3ac817..e5ffc5445 100644 --- a/src/components/Insights/common/InsightCard/InsightHeader/InsightStatusBadge/types.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge/types.ts @@ -1,4 +1,4 @@ -import { InsightStatus } from "../../../../types"; +import { InsightStatus } from "../../../../../../../types"; export interface InsightStatusBadgeProps { status: InsightStatus; diff --git a/src/components/Insights/common/InsightCard/InsightHeader/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/index.tsx similarity index 53% rename from src/components/Insights/common/InsightCard/InsightHeader/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/index.tsx index 495556a4d..59959ef61 100644 --- a/src/components/Insights/common/InsightCard/InsightHeader/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/index.tsx @@ -1,17 +1,17 @@ import { useContext } from "react"; -import { formatTimeDistance } from "../../../../../utils/formatTimeDistance"; +import { formatTimeDistance } from "../../../../../../../../utils/formatTimeDistance"; import { InsightTypeInfo, getInsightTypeInfo -} from "../../../../../utils/getInsightTypeInfo"; -import { roundTo } from "../../../../../utils/roundTo"; -import { ConfigContext } from "../../../../common/App/ConfigContext"; -import { InfoCircleIcon } from "../../../../common/icons/InfoCircleIcon"; -import { Link } from "../../../../common/v3/Link"; -import { NewTag } from "../../../../common/v3/NewTag"; -import { Tag } from "../../../../common/v3/Tag"; -import { TagType } from "../../../../common/v3/Tag/types"; -import { Tooltip } from "../../../../common/v3/Tooltip"; +} from "../../../../../../../../utils/getInsightTypeInfo"; +import { roundTo } from "../../../../../../../../utils/roundTo"; +import { ConfigContext } from "../../../../../../../common/App/ConfigContext"; +import { InfoCircleIcon } from "../../../../../../../common/icons/InfoCircleIcon"; +import { Link } from "../../../../../../../common/v3/Link"; +import { NewTag } from "../../../../../../../common/v3/NewTag"; +import { Tag } from "../../../../../../../common/v3/Tag"; +import { TagType } from "../../../../../../../common/v3/Tag/types"; +import { Tooltip } from "../../../../../../../common/v3/Tooltip"; import { AsyncTag } from "./AsyncTag"; import { InsightStatusBadge } from "./InsightStatusBadge"; import * as s from "./styles"; @@ -40,16 +40,25 @@ const getTagTitle = ( return {title}; }; -export const InsightHeader = (props: InsightHeaderProps) => { +export const InsightHeader = ({ + insightType, + criticality, + spanInfo, + onSpanLinkClick, + lastUpdateTimer, + isAsync, + isNew, + status +}: InsightHeaderProps) => { const config = useContext(ConfigContext); - const insightTypeInfo = getInsightTypeInfo(props.insightType); - const tagType = getTagType(props.criticality); - const tagTitle = getTagTitle(insightTypeInfo, props.criticality); + const insightTypeInfo = getInsightTypeInfo(insightType); + const tagType = getTagType(criticality); + const tagTitle = getTagTitle(insightTypeInfo, criticality); const handleSpanLinkClick = () => { - if (props.spanInfo) { - props.onSpanLinkClick(props.spanInfo.spanCodeObjectId); + if (spanInfo) { + onSpanLinkClick(spanInfo.spanCodeObjectId); } }; @@ -75,27 +84,25 @@ export const InsightHeader = (props: InsightHeaderProps) => { )} - {props.lastUpdateTimer && ( + {lastUpdateTimer && ( Updated: - - {formatTimeDistance(props.lastUpdateTimer)} + + {formatTimeDistance(lastUpdateTimer)} )} - {props.isAsync && } - {props.isNew && } - {props.status && } + {isAsync && } + {isNew && } + {status && } - {!config.scope?.span && props.spanInfo && ( + {!config.scope?.span && spanInfo && ( - - - {props.spanInfo.displayName} - + + {spanInfo.displayName} )} diff --git a/src/components/Insights/common/InsightCard/InsightHeader/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/styles.ts similarity index 94% rename from src/components/Insights/common/InsightCard/InsightHeader/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/styles.ts index 91e20e933..6c8b5bf2e 100644 --- a/src/components/Insights/common/InsightCard/InsightHeader/styles.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/styles.ts @@ -2,7 +2,7 @@ import styled from "styled-components"; import { bodySemiboldTypography, footnoteRegularTypography -} from "../../../../common/App/typographies"; +} from "../../../../../../../common/App/typographies"; export const Container = styled.div` display: flex; diff --git a/src/components/Insights/common/InsightCard/InsightHeader/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/types.ts similarity index 72% rename from src/components/Insights/common/InsightCard/InsightHeader/types.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/types.ts index a0eba2b0e..b52eca050 100644 --- a/src/components/Insights/common/InsightCard/InsightHeader/types.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/types.ts @@ -1,5 +1,5 @@ -import { SpanInfo } from "../../../../../types"; -import { InsightStatus } from "../../../types"; +import { SpanInfo } from "../../../../../../../../types"; +import { InsightStatus } from "../../../../../../types"; export interface InsightHeaderProps { insightType: string; diff --git a/src/components/Insights/common/InsightCard/KeyValue/KeyValue.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/KeyValue/KeyValue.stories.tsx similarity index 85% rename from src/components/Insights/common/InsightCard/KeyValue/KeyValue.stories.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/KeyValue/KeyValue.stories.tsx index fc42040bd..f511f6343 100644 --- a/src/components/Insights/common/InsightCard/KeyValue/KeyValue.stories.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/KeyValue/KeyValue.stories.tsx @@ -3,7 +3,8 @@ import { KeyValue } from "."; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/common/InsightCard/KeyValue", + title: + "Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/KeyValue", component: KeyValue, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/common/InsightCard/KeyValue/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/KeyValue/index.tsx similarity index 100% rename from src/components/Insights/common/InsightCard/KeyValue/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/KeyValue/index.tsx diff --git a/src/components/Insights/common/InsightCard/KeyValue/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/KeyValue/styles.ts similarity index 89% rename from src/components/Insights/common/InsightCard/KeyValue/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/KeyValue/styles.ts index 4ee1589f7..0256474b7 100644 --- a/src/components/Insights/common/InsightCard/KeyValue/styles.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/KeyValue/styles.ts @@ -2,7 +2,7 @@ import styled from "styled-components"; import { footnoteRegularTypography, subscriptRegularTypography -} from "../../../../common/App/typographies"; +} from "../../../../../../../common/App/typographies"; export const Container = styled.div` display: flex; diff --git a/src/components/Insights/common/InsightCard/KeyValue/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/KeyValue/types.ts similarity index 100% rename from src/components/Insights/common/InsightCard/KeyValue/types.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/KeyValue/types.ts diff --git a/src/components/Insights/common/InsightCard/ListItem/ListItem.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ListItem/ListItem.stories.tsx similarity index 72% rename from src/components/Insights/common/InsightCard/ListItem/ListItem.stories.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ListItem/ListItem.stories.tsx index 4600d0e24..fca0f216e 100644 --- a/src/components/Insights/common/InsightCard/ListItem/ListItem.stories.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ListItem/ListItem.stories.tsx @@ -1,12 +1,13 @@ import { Meta, StoryObj } from "@storybook/react"; import { ListItem } from "."; -import { Button } from "../../../../common/Button"; -import { JiraLogoIcon } from "../../../../common/icons/12px/JiraLogoIcon"; -import { TargetIcon } from "../../../../common/icons/12px/TargetIcon"; +import { Button } from "../../../../../../../common/Button"; +import { JiraLogoIcon } from "../../../../../../../common/icons/12px/JiraLogoIcon"; +import { TargetIcon } from "../../../../../../../common/icons/12px/TargetIcon"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/common/InsightCard/ListItem", + title: + "Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ListItem", component: ListItem, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/common/InsightCard/ListItem/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ListItem/index.tsx similarity index 84% rename from src/components/Insights/common/InsightCard/ListItem/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ListItem/index.tsx index 59d8b3888..4858b704b 100644 --- a/src/components/Insights/common/InsightCard/ListItem/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ListItem/index.tsx @@ -1,6 +1,6 @@ import { ForwardedRef, MouseEvent, forwardRef } from "react"; -import { Link } from "../../../../common/v3/Link"; -import { Tooltip } from "../../../../common/v3/Tooltip"; +import { Link } from "../../../../../../../common/v3/Link"; +import { Tooltip } from "../../../../../../../common/v3/Tooltip"; import * as s from "./styles"; import { ListItemProps } from "./types"; diff --git a/src/components/Insights/common/InsightCard/ListItem/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ListItem/styles.ts similarity index 100% rename from src/components/Insights/common/InsightCard/ListItem/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ListItem/styles.ts diff --git a/src/components/Insights/common/InsightCard/ListItem/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ListItem/types.ts similarity index 100% rename from src/components/Insights/common/InsightCard/ListItem/types.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ListItem/types.ts diff --git a/src/components/Insights/common/InsightCard/PercentileViewModeToggle/PercentileViewModeToggle.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/PercentileViewModeToggle/PercentileViewModeToggle.stories.tsx similarity index 83% rename from src/components/Insights/common/InsightCard/PercentileViewModeToggle/PercentileViewModeToggle.stories.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/PercentileViewModeToggle/PercentileViewModeToggle.stories.tsx index 5ffc91ca4..9510fd878 100644 --- a/src/components/Insights/common/InsightCard/PercentileViewModeToggle/PercentileViewModeToggle.stories.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/PercentileViewModeToggle/PercentileViewModeToggle.stories.tsx @@ -3,7 +3,8 @@ import { PercentileViewModeToggle } from "."; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/common/InsightCard/PercentileViewModeToggle", + title: + "Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/PercentileViewModeToggle", component: PercentileViewModeToggle, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/common/InsightCard/PercentileViewModeToggle/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/PercentileViewModeToggle/index.tsx similarity index 74% rename from src/components/Insights/common/InsightCard/PercentileViewModeToggle/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/PercentileViewModeToggle/index.tsx index 20a22c17b..3d2c68d46 100644 --- a/src/components/Insights/common/InsightCard/PercentileViewModeToggle/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/PercentileViewModeToggle/index.tsx @@ -1,5 +1,5 @@ -import { PERCENTILES } from "../../../../../constants"; -import { Toggle } from "../../../../common/v3/Toggle"; +import { PERCENTILES } from "../../../../../../../../constants"; +import { Toggle } from "../../../../../../../common/v3/Toggle"; import { PercentileViewModeToggleProps } from "./types"; export const PercentileViewModeToggle = ({ diff --git a/src/components/Insights/common/InsightCard/PercentileViewModeToggle/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/PercentileViewModeToggle/types.ts similarity index 100% rename from src/components/Insights/common/InsightCard/PercentileViewModeToggle/types.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/PercentileViewModeToggle/types.ts diff --git a/src/components/Insights/common/InsightCard/ProductionAffectionBar/ProductionAffectionBar.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ProductionAffectionBar/ProductionAffectionBar.stories.tsx similarity index 75% rename from src/components/Insights/common/InsightCard/ProductionAffectionBar/ProductionAffectionBar.stories.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ProductionAffectionBar/ProductionAffectionBar.stories.tsx index acc33650c..7047c5f62 100644 --- a/src/components/Insights/common/InsightCard/ProductionAffectionBar/ProductionAffectionBar.stories.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ProductionAffectionBar/ProductionAffectionBar.stories.tsx @@ -3,7 +3,8 @@ import { ProductionAffectionBar } from "."; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/common/InsightCard/ProductionAffectionBar", + title: + "Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ProductionAffectionBar", component: ProductionAffectionBar, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout @@ -24,3 +25,9 @@ export const WithTicket: Story = { isTicketCreated: true } }; + +export const WithDisabledTicketCreation: Story = { + args: { + onCreateTicket: undefined + } +}; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ProductionAffectionBar/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ProductionAffectionBar/index.tsx new file mode 100644 index 000000000..00b18283a --- /dev/null +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ProductionAffectionBar/index.tsx @@ -0,0 +1,33 @@ +import { SparkleIcon } from "../../../../../../../common/icons/16px/SparkleIcon"; +import { Link } from "../../../../../../../common/v3/Link"; +import * as s from "./styles"; +import { ProductionAffectionBarProps } from "./types"; + +export const ProductionAffectionBar = ({ + onCreateTicket, + isTicketCreated +}: ProductionAffectionBarProps) => { + const handleCreateTicketLinkClick = () => { + if (onCreateTicket) { + onCreateTicket(); + } + }; + + return ( + + + + + Could affect production + {Boolean(onCreateTicket) && ( + <> + {isTicketCreated ? ( + Ticket Created + ) : ( + Create Ticket + )} + + )} + + ); +}; diff --git a/src/components/Insights/common/InsightCard/ProductionAffectionBar/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ProductionAffectionBar/styles.ts similarity index 90% rename from src/components/Insights/common/InsightCard/ProductionAffectionBar/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ProductionAffectionBar/styles.ts index 749f192fc..ac323d6a8 100644 --- a/src/components/Insights/common/InsightCard/ProductionAffectionBar/styles.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ProductionAffectionBar/styles.ts @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { footnoteRegularTypography } from "../../../../common/App/typographies"; +import { footnoteRegularTypography } from "../../../../../../../common/App/typographies"; import { ContainerProps } from "./types"; export const Container = styled.div` diff --git a/src/components/Insights/common/InsightCard/ProductionAffectionBar/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ProductionAffectionBar/types.ts similarity index 81% rename from src/components/Insights/common/InsightCard/ProductionAffectionBar/types.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ProductionAffectionBar/types.ts index 818f68783..a30269924 100644 --- a/src/components/Insights/common/InsightCard/ProductionAffectionBar/types.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ProductionAffectionBar/types.ts @@ -1,6 +1,6 @@ export interface ProductionAffectionBarProps { isTicketCreated: boolean; - onCreateTicket: () => void; + onCreateTicket?: () => void; } export interface ContainerProps { diff --git a/src/components/Insights/common/InsightCard/RecalculateBar/RecalculateBar.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/RecalculateBar/RecalculateBar.stories.tsx similarity index 83% rename from src/components/Insights/common/InsightCard/RecalculateBar/RecalculateBar.stories.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/RecalculateBar/RecalculateBar.stories.tsx index d05b62ae7..0c40dbff7 100644 --- a/src/components/Insights/common/InsightCard/RecalculateBar/RecalculateBar.stories.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/RecalculateBar/RecalculateBar.stories.tsx @@ -3,7 +3,8 @@ import { RecalculateBar } from "."; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/common/InsightCard/RecalculateBar", + title: + "Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/RecalculateBar", component: RecalculateBar, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/common/InsightCard/RecalculateBar/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/RecalculateBar/index.tsx similarity index 76% rename from src/components/Insights/common/InsightCard/RecalculateBar/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/RecalculateBar/index.tsx index e8142eefb..998a05bc2 100644 --- a/src/components/Insights/common/InsightCard/RecalculateBar/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/RecalculateBar/index.tsx @@ -1,4 +1,4 @@ -import { RecalculateStartedIcon } from "../../../../common/icons/16px/RecalculateStartedIcon"; +import { RecalculateStartedIcon } from "../../../../../../../common/icons/16px/RecalculateStartedIcon"; import * as s from "./styles"; export const RecalculateBar = () => { diff --git a/src/components/Insights/common/InsightCard/RecalculateBar/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/RecalculateBar/styles.ts similarity index 93% rename from src/components/Insights/common/InsightCard/RecalculateBar/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/RecalculateBar/styles.ts index f93a177f4..bca3fedb8 100644 --- a/src/components/Insights/common/InsightCard/RecalculateBar/styles.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/RecalculateBar/styles.ts @@ -2,7 +2,7 @@ import styled from "styled-components"; import { caption1RegularTypography, footnoteBoldTypography -} from "../../../../common/App/typographies"; +} from "../../../../../../../common/App/typographies"; export const Container = styled.div` ${footnoteBoldTypography} diff --git a/src/components/Insights/common/InsightCard/Select/Select.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/Select/Select.stories.tsx similarity index 94% rename from src/components/Insights/common/InsightCard/Select/Select.stories.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/Select/Select.stories.tsx index e1e4fe6a3..5728c94d1 100644 --- a/src/components/Insights/common/InsightCard/Select/Select.stories.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/Select/Select.stories.tsx @@ -4,7 +4,8 @@ import { Select } from "."; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/common/InsightCard/Select", + title: + "Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/Select", component: Select, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/common/InsightCard/Select/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/Select/index.tsx similarity index 82% rename from src/components/Insights/common/InsightCard/Select/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/Select/index.tsx index 64c49062a..761c25b5b 100644 --- a/src/components/Insights/common/InsightCard/Select/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/Select/index.tsx @@ -1,10 +1,10 @@ import { MouseEvent, useState } from "react"; -import { MenuList } from "../../../../Navigation/common/MenuList"; -import { Popup } from "../../../../Navigation/common/Popup"; -import { NewPopover } from "../../../../common/NewPopover"; -import { ChevronIcon } from "../../../../common/icons/16px/ChevronIcon"; -import { Direction } from "../../../../common/icons/types"; -import { Tooltip } from "../../../../common/v3/Tooltip"; +import { MenuList } from "../../../../../../../Navigation/common/MenuList"; +import { Popup } from "../../../../../../../Navigation/common/Popup"; +import { NewPopover } from "../../../../../../../common/NewPopover"; +import { ChevronIcon } from "../../../../../../../common/icons/16px/ChevronIcon"; +import { Direction } from "../../../../../../../common/icons/types"; +import { Tooltip } from "../../../../../../../common/v3/Tooltip"; import * as s from "./styles"; import { SelectOption, SelectProps } from "./types"; diff --git a/src/components/Insights/common/InsightCard/Select/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/Select/styles.ts similarity index 95% rename from src/components/Insights/common/InsightCard/Select/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/Select/styles.ts index e081747b1..2e0cb6b4a 100644 --- a/src/components/Insights/common/InsightCard/Select/styles.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/Select/styles.ts @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { bodyRegularTypography } from "../../../../common/App/typographies"; +import { bodyRegularTypography } from "../../../../../../../common/App/typographies"; import { SelectBarProps } from "./types"; export const ExpandButton = styled.button` diff --git a/src/components/Insights/common/InsightCard/Select/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/Select/types.ts similarity index 100% rename from src/components/Insights/common/InsightCard/Select/types.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/Select/types.ts diff --git a/src/components/Insights/common/InsightCard/hooks/useDismissal.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/hooks/useDismissal.ts similarity index 88% rename from src/components/Insights/common/InsightCard/hooks/useDismissal.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/hooks/useDismissal.ts index f7ff7c31d..dc600b2d1 100644 --- a/src/components/Insights/common/InsightCard/hooks/useDismissal.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/hooks/useDismissal.ts @@ -1,7 +1,10 @@ import { useEffect, useState } from "react"; -import { dispatcher } from "../../../../../dispatcher"; -import { actions } from "../../../actions"; -import { DismissInsightPayload, UndismissInsightPayload } from "../../../types"; +import { dispatcher } from "../../../../../../../../dispatcher"; +import { actions } from "../../../../../../actions"; +import { + DismissInsightPayload, + UndismissInsightPayload +} from "../../../../../../types"; import { DismissResponsePayload, UndismissResponsePayload } from "../types"; export const useDismissal = (insightId: string) => { diff --git a/src/components/Insights/common/InsightCard/hooks/useMarkingAsRead.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/hooks/useMarkingAsRead.ts similarity index 90% rename from src/components/Insights/common/InsightCard/hooks/useMarkingAsRead.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/hooks/useMarkingAsRead.ts index 1afc9dd56..62e8170de 100644 --- a/src/components/Insights/common/InsightCard/hooks/useMarkingAsRead.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/hooks/useMarkingAsRead.ts @@ -1,6 +1,6 @@ import { useEffect, useState } from "react"; -import { dispatcher } from "../../../../../dispatcher"; -import { actions } from "../../../actions"; +import { dispatcher } from "../../../../../../../../dispatcher"; +import { actions } from "../../../../../../actions"; import { MarkAsReadPayload, SetMarkAsReadResponsePayload } from "../types"; export const useMarkingAsRead = (insightId: string) => { diff --git a/src/components/Insights/common/InsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/index.tsx similarity index 86% rename from src/components/Insights/common/InsightCard/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/index.tsx index ac2c19824..834e9a32a 100644 --- a/src/components/Insights/common/InsightCard/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/index.tsx @@ -1,27 +1,30 @@ import React, { useContext, useEffect, useState } from "react"; -import { actions as globalActions } from "../../../../actions"; -import { getFeatureFlagValue } from "../../../../featureFlags"; -import { usePrevious } from "../../../../hooks/usePrevious"; -import { trackingEvents as globalTrackingEvents } from "../../../../trackingEvents"; -import { isString } from "../../../../typeGuards/isString"; -import { FeatureFlag, GetInsightStatsPayload } from "../../../../types"; -import { sendTrackingEvent } from "../../../../utils/sendTrackingEvent"; -import { Spinner } from "../../../Navigation/CodeButtonMenu/Spinner"; -import { ConfigContext } from "../../../common/App/ConfigContext"; -import { CheckmarkCircleIcon } from "../../../common/icons/12px/CheckmarkCircleIcon"; -import { TraceIcon } from "../../../common/icons/12px/TraceIcon"; -import { DoubleCircleIcon } from "../../../common/icons/16px/DoubleCircleIcon"; -import { HistogramIcon } from "../../../common/icons/16px/HistogramIcon"; -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 { BaseButtonProps } from "../../../common/v3/Button/types"; -import { JiraButton } from "../../../common/v3/JiraButton"; -import { Tooltip } from "../../../common/v3/Tooltip"; -import { trackingEvents } from "../../tracking"; -import { isEndpointInsight, isSpanInsight } from "../../typeGuards"; -import { InsightStatus } from "../../types"; +import { actions as globalActions } from "../../../../../../../actions"; +import { getFeatureFlagValue } from "../../../../../../../featureFlags"; +import { usePrevious } from "../../../../../../../hooks/usePrevious"; +import { trackingEvents as globalTrackingEvents } from "../../../../../../../trackingEvents"; +import { isString } from "../../../../../../../typeGuards/isString"; +import { + FeatureFlag, + GetInsightStatsPayload +} from "../../../../../../../types"; +import { sendTrackingEvent } from "../../../../../../../utils/sendTrackingEvent"; +import { Spinner } from "../../../../../../Navigation/CodeButtonMenu/Spinner"; +import { ConfigContext } from "../../../../../../common/App/ConfigContext"; +import { CheckmarkCircleIcon } from "../../../../../../common/icons/12px/CheckmarkCircleIcon"; +import { TraceIcon } from "../../../../../../common/icons/12px/TraceIcon"; +import { DoubleCircleIcon } from "../../../../../../common/icons/16px/DoubleCircleIcon"; +import { HistogramIcon } from "../../../../../../common/icons/16px/HistogramIcon"; +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 { BaseButtonProps } from "../../../../../../common/v3/Button/types"; +import { JiraButton } from "../../../../../../common/v3/JiraButton"; +import { Tooltip } from "../../../../../../common/v3/Tooltip"; +import { trackingEvents } from "../../../../../tracking"; +import { isEndpointInsight, isSpanInsight } from "../../../../../typeGuards"; +import { InsightStatus } from "../../../../../types"; import { InsightHeader } from "./InsightHeader"; import { ProductionAffectionBar } from "./ProductionAffectionBar"; import { RecalculateBar } from "./RecalculateBar"; @@ -349,7 +352,11 @@ export const InsightCard = (props: InsightCardProps) => { {isCritical && ( )} {showBanner && } diff --git a/src/components/Insights/common/InsightCard/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/styles.ts similarity index 90% rename from src/components/Insights/common/InsightCard/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/styles.ts index 77f98ac75..e6f47f07b 100644 --- a/src/components/Insights/common/InsightCard/styles.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/styles.ts @@ -1,7 +1,7 @@ import styled, { css } from "styled-components"; -import { subscriptRegularTypography } from "../../../common/App/typographies"; -import { Button } from "../../../common/v3/Button"; -import { Card } from "../../../common/v3/Card"; +import { subscriptRegularTypography } from "../../../../../../common/App/typographies"; +import { Button } from "../../../../../../common/v3/Button"; +import { Card } from "../../../../../../common/v3/Card"; import { StyledInsightCardProps } from "./types"; export const InsightFooter = styled.div` diff --git a/src/components/Insights/common/InsightCard/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/types.ts similarity index 72% rename from src/components/Insights/common/InsightCard/types.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/types.ts index fcf56e249..e8f2dc1a1 100644 --- a/src/components/Insights/common/InsightCard/types.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/types.ts @@ -1,8 +1,7 @@ import { ReactNode } from "react"; -import { InsightType } from "../../../../types"; -import { ScopeSpan } from "../../../common/App/types"; -import { CardProps } from "../../../common/Card/types"; -import { GenericCodeObjectInsight } from "../../types"; +import { ScopeSpan } from "../../../../../../common/App/types"; +import { CardProps } from "../../../../../../common/v3/Card/types"; +import { GenericCodeObjectInsight, InsightType } from "../../../../../types"; export interface InsightCardProps { insight: GenericCodeObjectInsight; @@ -70,3 +69,15 @@ export interface SetMarkAllAsReadResponsePayload { status: "success" | "failure"; error?: string; } +export interface InsightCardCommonProps { + onRecalculate: (insightId: string) => void; + onRefresh: (insightType: InsightType) => void; + onJiraTicketCreate?: ( + insight: GenericCodeObjectInsight, + spanCodeObjectId: string | undefined, + event?: string + ) => void; + onGoToSpan: (spanCodeObjectId: string) => void; + isJiraHintEnabled?: boolean; + isMarkAsReadButtonEnabled: boolean; +} diff --git a/src/components/Insights/common/insights/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/styles.ts similarity index 85% rename from src/components/Insights/common/insights/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/styles.ts index 1547269cb..9497ecc82 100644 --- a/src/components/Insights/common/insights/styles.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/styles.ts @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { caption1RegularTypography } from "../../../common/App/typographies"; +import { caption1RegularTypography } from "../../../../common/App/typographies"; export const Description = styled.div` color: ${({ theme }) => theme.colors.v3.text.secondary}; diff --git a/src/components/Insights/InsightsPage/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/styles.ts similarity index 93% rename from src/components/Insights/InsightsPage/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/styles.ts index a9dea26f1..48dbee455 100644 --- a/src/components/Insights/InsightsPage/styles.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/styles.ts @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { Link } from "../../common/Link"; +import { Link } from "../../../common/Link"; export const Container = styled.div` display: flex; diff --git a/src/components/Insights/InsightsPage/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/types.ts similarity index 81% rename from src/components/Insights/InsightsPage/types.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/types.ts index ef468ddb9..348126ecb 100644 --- a/src/components/Insights/InsightsPage/types.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/types.ts @@ -1,5 +1,5 @@ -import { ViewMode } from "../InsightsCatalog/types"; -import { GenericCodeObjectInsight, InsightType } from "../types"; +import { GenericCodeObjectInsight, InsightType } from "../../types"; +import { ViewMode } from "../types"; export interface InsightsPageProps { insights: GenericCodeObjectInsight[]; diff --git a/src/components/Insights/InsightsCatalog/index.tsx b/src/components/Insights/InsightsCatalog/index.tsx index 05004b195..a3f520747 100644 --- a/src/components/Insights/InsightsCatalog/index.tsx +++ b/src/components/Insights/InsightsCatalog/index.tsx @@ -21,8 +21,8 @@ import { RefreshIcon } from "../../common/icons/16px/RefreshIcon"; import { Direction } from "../../common/icons/types"; import { Button } from "../../common/v3/Button"; import { Tooltip } from "../../common/v3/Tooltip"; -import { InsightsPage } from "../InsightsPage"; import { trackingEvents } from "../tracking"; +import { InsightsPage } from "./InsightsPage"; import * as s from "./styles"; import { InsightsCatalogProps, SORTING_CRITERION, ViewMode } from "./types"; import { useMarkingAllAsRead } from "./useMarkingAllAsRead"; diff --git a/src/components/Insights/InsightsCatalog/useMarkingAllAsRead.ts b/src/components/Insights/InsightsCatalog/useMarkingAllAsRead.ts index 07b5fc78f..2ef24085e 100644 --- a/src/components/Insights/InsightsCatalog/useMarkingAllAsRead.ts +++ b/src/components/Insights/InsightsCatalog/useMarkingAllAsRead.ts @@ -2,7 +2,7 @@ import { useEffect, useState } from "react"; import { dispatcher } from "../../../dispatcher"; import { ScopeSpan } from "../../common/App/types"; import { actions } from "../actions"; -import { MarkAllAsReadPayload } from "../common/InsightCard/types"; +import { MarkAllAsReadPayload } from "./InsightsPage/insightCards/common/InsightCard/types"; export const useMarkingAllAsRead = (scope: ScopeSpan | null) => { const [isMarkingAllAsReadInProgress, setIsMarkingAllAsReadInProgress] = diff --git a/src/components/Insights/NPlusOneInsight/types.ts b/src/components/Insights/NPlusOneInsight/types.ts deleted file mode 100644 index da7f0d89d..000000000 --- a/src/components/Insights/NPlusOneInsight/types.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { InsightType } from "../../../types"; -import { InsightProps, SpanNPlusOneInsight, Trace } from "../types"; - -export interface NPlusOneInsightProps extends InsightProps { - insight: SpanNPlusOneInsight; - onAssetLinkClick: ( - spanCodeObjectId: string, - insightType: InsightType - ) => void; - onTraceButtonClick: ( - trace: Trace, - insightType: InsightType, - spanCodeObjectId?: string - ) => void; -} diff --git a/src/components/Insights/NoScalingIssueInsight/types.ts b/src/components/Insights/NoScalingIssueInsight/types.ts deleted file mode 100644 index b06e4f16b..000000000 --- a/src/components/Insights/NoScalingIssueInsight/types.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { InsightType } from "../../../types"; -import { InsightProps, SpanScalingWellInsight } from "../types"; - -export interface NoScalingIssueInsightProps extends InsightProps { - insight: SpanScalingWellInsight; - onHistogramButtonClick: ( - instrumentationLibrary: string, - name: string, - insightType: InsightType, - displayName: string - ) => void; -} diff --git a/src/components/Insights/PerformanceAtScaleInsight/types.ts b/src/components/Insights/PerformanceAtScaleInsight/types.ts deleted file mode 100644 index 6c2e5691f..000000000 --- a/src/components/Insights/PerformanceAtScaleInsight/types.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { InsightType } from "../../../types"; -import { InsightProps, SpanScalingInsufficientDataInsight } from "../types"; - -export interface PerformanceAtScaleInsightProps extends InsightProps { - insight: SpanScalingInsufficientDataInsight; - onHistogramButtonClick: ( - instrumentationLibrary: string, - name: string, - insightType: InsightType, - displayName: string - ) => void; -} diff --git a/src/components/Insights/QueryOptimizationInsight/types.ts b/src/components/Insights/QueryOptimizationInsight/types.ts deleted file mode 100644 index 49032c28c..000000000 --- a/src/components/Insights/QueryOptimizationInsight/types.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { InsightType } from "../../../types"; -import { InsightProps, QueryOptimizationInsight, Trace } from "../types"; - -export interface QueryOptimizationInsightProps extends InsightProps { - insight: QueryOptimizationInsight; - onAssetLinkClick: ( - spanCodeObjectId: string, - insightType: InsightType - ) => void; - onTraceButtonClick: ( - trace: Trace, - insightType: InsightType, - spanCodeObjectId?: string - ) => void; -} diff --git a/src/components/Insights/RequestBreakdownInsight/types.ts b/src/components/Insights/RequestBreakdownInsight/types.ts deleted file mode 100644 index 3b165581a..000000000 --- a/src/components/Insights/RequestBreakdownInsight/types.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { EndpointBreakdownInsight, InsightProps } from "../types"; - -export interface RequestBreakdownInsightProps extends InsightProps { - insight: EndpointBreakdownInsight; -} - -export interface LegendItemDataColorProps { - $color: string; -} - -export interface FractionProgressBarValueProps { - $value: number; -} diff --git a/src/components/Insights/SessionInViewInsight/types.ts b/src/components/Insights/SessionInViewInsight/types.ts deleted file mode 100644 index 4f2fb45fa..000000000 --- a/src/components/Insights/SessionInViewInsight/types.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { InsightType } from "../../../types"; -import { InsightProps, SessionInViewEndpointInsight, Trace } from "../types"; - -export interface SessionInViewInsightProps extends InsightProps { - insight: SessionInViewEndpointInsight; - onAssetLinkClick: ( - spanCodeObjectId: string, - insightType: InsightType - ) => void; - onTraceButtonClick: ( - trace: Trace, - insightType: InsightType, - spanCodeObjectId: string - ) => void; -} diff --git a/src/components/Insights/SlowEndpointInsight/types.ts b/src/components/Insights/SlowEndpointInsight/types.ts deleted file mode 100644 index 0bd0803f0..000000000 --- a/src/components/Insights/SlowEndpointInsight/types.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { InsightProps, SlowEndpointInsight } from "../types"; - -export interface SlowEndpointInsightProps extends InsightProps { - insight: SlowEndpointInsight; -} diff --git a/src/components/Insights/SpanBottleneckInsight/types.ts b/src/components/Insights/SpanBottleneckInsight/types.ts deleted file mode 100644 index ba9bfb386..000000000 --- a/src/components/Insights/SpanBottleneckInsight/types.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { InsightType } from "../../../types"; -import { EndpointSlowestSpansInsight, InsightProps } from "../types"; - -export interface SpanBottleneckInsightProps extends InsightProps { - insight: EndpointSlowestSpansInsight; - onAssetLinkClick: ( - spanCodeObjectId: string, - insightType: InsightType - ) => void; -} diff --git a/src/components/Insights/SpanNexusInsight/types.ts b/src/components/Insights/SpanNexusInsight/types.ts deleted file mode 100644 index 7771f501b..000000000 --- a/src/components/Insights/SpanNexusInsight/types.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { InsightProps, SpanNexusInsight } from "../types"; - -export interface SpanNexusInsightProps extends InsightProps { - insight: SpanNexusInsight; -} diff --git a/src/components/Insights/TopUsageInsight/types.ts b/src/components/Insights/TopUsageInsight/types.ts deleted file mode 100644 index 219947885..000000000 --- a/src/components/Insights/TopUsageInsight/types.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { InsightType } from "../../../types"; -import { InsightProps, SpanUsagesInsight, Trace } from "../types"; - -export interface TopUsageInsightProps extends InsightProps { - insight: SpanUsagesInsight; - onAssetLinkClick: ( - spanCodeObjectId: string, - insightType: InsightType - ) => void; - onTraceButtonClick: ( - trace: Trace, - insightType: InsightType, - spanCodeObjectId?: string - ) => void; -} diff --git a/src/components/Insights/TrafficInsight/types.ts b/src/components/Insights/TrafficInsight/types.ts deleted file mode 100644 index 8723ff480..000000000 --- a/src/components/Insights/TrafficInsight/types.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { - EndpointHighUsageInsight, - EndpointLowUsageInsight, - EndpointNormalUsageInsight, - InsightProps -} from "../types"; - -export interface TrafficInsightProps extends InsightProps { - insight: - | EndpointLowUsageInsight - | EndpointNormalUsageInsight - | EndpointHighUsageInsight; -} diff --git a/src/components/Insights/common/InsightCard/InsightFooter/index.tsx b/src/components/Insights/common/InsightCard/InsightFooter/index.tsx deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/components/Insights/common/InsightCard/ProductionAffectionBar/index.tsx b/src/components/Insights/common/InsightCard/ProductionAffectionBar/index.tsx deleted file mode 100644 index 07f89f3bf..000000000 --- a/src/components/Insights/common/InsightCard/ProductionAffectionBar/index.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { SparkleIcon } from "../../../../common/icons/16px/SparkleIcon"; -import { Link } from "../../../../common/v3/Link"; -import * as s from "./styles"; -import { ProductionAffectionBarProps } from "./types"; - -export const ProductionAffectionBar = (props: ProductionAffectionBarProps) => { - const handleCreateTicketLinkClick = () => { - props.onCreateTicket(); - }; - - return ( - - - - - Could affect production - {props.isTicketCreated ? ( - Ticket Created - ) : ( - Create Ticket - )} - - ); -}; diff --git a/src/components/Insights/common/insights/DurationBreakdownInsight/DurationBreakdownInsight.stories.tsx b/src/components/Insights/common/insights/DurationBreakdownInsight/DurationBreakdownInsight.stories.tsx deleted file mode 100644 index 3ad776015..000000000 --- a/src/components/Insights/common/insights/DurationBreakdownInsight/DurationBreakdownInsight.stories.tsx +++ /dev/null @@ -1,368 +0,0 @@ -import { Meta, StoryObj } from "@storybook/react"; -import { DurationBreakdownInsight } from "."; -import { 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 = { - title: "Insights/common/insights/DurationBreakdownInsight", - component: DurationBreakdownInsight, - 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; - -export const Default: Story = { - args: { - insight: { - sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", - id: "60b55792-8262-4c5d-9628-7cce7979ac6d", - 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: "Span Duration Breakdown", - type: InsightType.SpanDurationBreakdown, - category: InsightCategory.Performance, - specifity: 4, - isRecalculateEnabled: true, - isDismissed: false, - isDismissible: true, - importance: 6, - spanName: "ClientTester.generateInsightData", - spanCodeObjectId: - "span:io.opentelemetry.opentelemetry-instrumentation-annotations-1.16$_$ClientTester.generateInsightData", - breakdownEntries: [ - { - spanName: "GET PetClinic /SampleInsights/ErrorHotspot", - spanDisplayName: "GET PetClinic /SampleInsights/ErrorHotspot", - spanInstrumentationLibrary: "io.opentelemetry.okhttp-3.0", - spanCodeObjectId: - "span:io.opentelemetry.okhttp-3.0$_$GET PetClinic /SampleInsights/ErrorHotspot", - percentiles: [ - { - percentile: 0.5, - duration: { - value: 9.31, - unit: "ms", - raw: 9310166 - } - }, - { - percentile: 0.95, - duration: { - value: 9.31, - unit: "ms", - raw: 9310166 - } - } - ], - codeObjectId: null - }, - { - spanName: "GET PetClinic /SampleInsights/ErrorRecordedOnCurrentSpan", - spanDisplayName: - "GET PetClinic /SampleInsights/ErrorRecordedOnCurrentSpan", - spanInstrumentationLibrary: "io.opentelemetry.okhttp-3.0", - spanCodeObjectId: - "span:io.opentelemetry.okhttp-3.0$_$GET PetClinic /SampleInsights/ErrorRecordedOnCurrentSpan", - percentiles: [ - { - percentile: 0.5, - duration: { - value: 1.85, - unit: "ms", - raw: 1853959 - } - }, - { - percentile: 0.95, - duration: { - value: 1.85, - unit: "ms", - raw: 1853959 - } - } - ], - codeObjectId: null - }, - { - spanName: - "GET PetClinic /SampleInsights/ErrorRecordedOnDeeplyNestedSpan", - spanDisplayName: - "GET PetClinic /SampleInsights/ErrorRecordedOnDeeplyNestedSpan", - spanInstrumentationLibrary: "io.opentelemetry.okhttp-3.0", - spanCodeObjectId: - "span:io.opentelemetry.okhttp-3.0$_$GET PetClinic /SampleInsights/ErrorRecordedOnDeeplyNestedSpan", - percentiles: [ - { - percentile: 0.5, - duration: { - value: 2.98, - unit: "ms", - raw: 2977875 - } - }, - { - percentile: 0.95, - duration: { - value: 2.98, - unit: "ms", - raw: 2977875 - } - } - ], - codeObjectId: null - }, - { - spanName: - "GET PetClinic /SampleInsights/ErrorRecordedOnLocalRootSpan", - spanDisplayName: - "GET PetClinic /SampleInsights/ErrorRecordedOnLocalRootSpan", - spanInstrumentationLibrary: "io.opentelemetry.okhttp-3.0", - spanCodeObjectId: - "span:io.opentelemetry.okhttp-3.0$_$GET PetClinic /SampleInsights/ErrorRecordedOnLocalRootSpan", - percentiles: [ - { - percentile: 0.5, - duration: { - value: 18.64, - unit: "ms", - raw: 18642667 - } - }, - { - percentile: 0.95, - duration: { - value: 18.64, - unit: "ms", - raw: 18642667 - } - } - ], - codeObjectId: null - }, - { - spanName: "GET PetClinic /SampleInsights/HighUsage", - spanDisplayName: "GET PetClinic /SampleInsights/HighUsage", - spanInstrumentationLibrary: "io.opentelemetry.okhttp-3.0", - spanCodeObjectId: - "span:io.opentelemetry.okhttp-3.0$_$GET PetClinic /SampleInsights/HighUsage", - percentiles: [ - { - percentile: 0.5, - duration: { - value: 1.28, - unit: "sec", - raw: 1276017342 - } - }, - { - percentile: 0.95, - duration: { - value: 1.88, - unit: "sec", - raw: 1883717142 - } - } - ], - codeObjectId: null - }, - { - spanName: "GET PetClinic /SampleInsights/NPlusOneWithInternalSpan", - spanDisplayName: - "GET PetClinic /SampleInsights/NPlusOneWithInternalSpan", - spanInstrumentationLibrary: "io.opentelemetry.okhttp-3.0", - spanCodeObjectId: - "span:io.opentelemetry.okhttp-3.0$_$GET PetClinic /SampleInsights/NPlusOneWithInternalSpan", - percentiles: [ - { - percentile: 0.5, - duration: { - value: 8.62, - unit: "ms", - raw: 8622375 - } - }, - { - percentile: 0.95, - duration: { - value: 8.62, - unit: "ms", - raw: 8622375 - } - } - ], - codeObjectId: null - }, - { - spanName: "GET PetClinic /SampleInsights/NPlusOneWithoutInternalSpan", - spanDisplayName: - "GET PetClinic /SampleInsights/NPlusOneWithoutInternalSpan", - spanInstrumentationLibrary: "io.opentelemetry.okhttp-3.0", - spanCodeObjectId: - "span:io.opentelemetry.okhttp-3.0$_$GET PetClinic /SampleInsights/NPlusOneWithoutInternalSpan", - percentiles: [ - { - percentile: 0.5, - duration: { - value: 2.95, - unit: "ms", - raw: 2951917 - } - }, - { - percentile: 0.95, - duration: { - value: 2.95, - unit: "ms", - raw: 2951917 - } - } - ], - codeObjectId: null - }, - { - spanName: "GET PetClinic /SampleInsights/SlowEndpoint", - spanDisplayName: "GET PetClinic /SampleInsights/SlowEndpoint", - spanInstrumentationLibrary: "io.opentelemetry.okhttp-3.0", - spanCodeObjectId: - "span:io.opentelemetry.okhttp-3.0$_$GET PetClinic /SampleInsights/SlowEndpoint", - percentiles: [ - { - percentile: 0.5, - duration: { - value: 5.01, - unit: "sec", - raw: 5011033127 - } - }, - { - percentile: 0.95, - duration: { - value: 5.01, - unit: "sec", - raw: 5011033127 - } - } - ], - codeObjectId: null - }, - { - spanName: "GET PetClinic /SampleInsights/SpanBottleneck", - spanDisplayName: "GET PetClinic /SampleInsights/SpanBottleneck", - spanInstrumentationLibrary: "io.opentelemetry.okhttp-3.0", - spanCodeObjectId: - "span:io.opentelemetry.okhttp-3.0$_$GET PetClinic /SampleInsights/SpanBottleneck", - percentiles: [ - { - percentile: 0.5, - duration: { - value: 520.92, - unit: "ms", - raw: 520920000 - } - }, - { - percentile: 0.95, - duration: { - value: 520.92, - unit: "ms", - raw: 520920000 - } - } - ], - codeObjectId: null - }, - { - spanName: "GET PetClinic /SampleInsights/req-map-get", - spanDisplayName: "GET PetClinic /SampleInsights/req-map-get", - spanInstrumentationLibrary: "io.opentelemetry.okhttp-3.0", - spanCodeObjectId: - "span:io.opentelemetry.okhttp-3.0$_$GET PetClinic /SampleInsights/req-map-get", - percentiles: [ - { - percentile: 0.5, - duration: { - value: 1.56, - unit: "ms", - raw: 1556959 - } - }, - { - percentile: 0.95, - duration: { - value: 1.56, - unit: "ms", - raw: 1556959 - } - } - ], - codeObjectId: null - }, - { - spanName: "HTTP GET ClientTester.generateInsightData", - spanDisplayName: "HTTP GET ClientTester.generateInsightData", - spanInstrumentationLibrary: "io.opentelemetry.okhttp-3.0", - spanCodeObjectId: - "span:io.opentelemetry.okhttp-3.0$_$HTTP GET ClientTester.generateInsightData", - percentiles: [ - { - percentile: 0.5, - duration: { - value: 693.35, - unit: "ms", - raw: 693349003 - } - }, - { - percentile: 0.95, - duration: { - value: 693.35, - unit: "ms", - raw: 693349003 - } - } - ], - codeObjectId: null - } - ], - scope: InsightScope.Span, - spanInfo: { - name: "ClientTester.generateInsightData", - displayName: "ClientTester.generateInsightData", - instrumentationLibrary: - "io.opentelemetry.opentelemetry-instrumentation-annotations-1.16", - spanCodeObjectId: - "span:io.opentelemetry.opentelemetry-instrumentation-annotations-1.16$_$ClientTester.generateInsightData", - methodCodeObjectId: - "method:petclinic.client.ClientTester$_$generateInsightData", - kind: "Internal", - codeObjectId: "petclinic.client.ClientTester$_$generateInsightData" - }, - shortDisplayInfo: { - title: "", - targetDisplayName: "", - subtitle: "", - description: "" - }, - codeObjectId: "petclinic.client.ClientTester$_$generateInsightData", - decorators: null, - environment: "SAMPLE_ENV", - severity: 0, - prefixedCodeObjectId: - "method:petclinic.client.ClientTester$_$generateInsightData", - customStartTime: null, - actualStartTime: "2023-06-16T10:30:31.848Z" - } - } -}; diff --git a/src/components/Insights/common/insights/DurationBreakdownInsight/types.ts b/src/components/Insights/common/insights/DurationBreakdownInsight/types.ts deleted file mode 100644 index 605502249..000000000 --- a/src/components/Insights/common/insights/DurationBreakdownInsight/types.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { - InsightProps, - InsightType, - SpanDurationBreakdownInsight -} from "../../../types"; - -export interface DurationBreakdownInsightProps extends InsightProps { - insight: SpanDurationBreakdownInsight; - onAssetLinkClick: ( - spanCodeObjectId: string, - insightType: InsightType - ) => void; -} diff --git a/src/components/Insights/common/insights/EndpointSlowdownSourceInsight/EndpointSlowdownSourceInsight.stories.tsx b/src/components/Insights/common/insights/EndpointSlowdownSourceInsight/EndpointSlowdownSourceInsight.stories.tsx deleted file mode 100644 index e0a020d68..000000000 --- a/src/components/Insights/common/insights/EndpointSlowdownSourceInsight/EndpointSlowdownSourceInsight.stories.tsx +++ /dev/null @@ -1,133 +0,0 @@ -import { Meta, StoryObj } from "@storybook/react"; -import { EndpointSlowdownSourceInsight } from "."; -import { 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 = { - title: "Insights/common/insights/EndpointSlowdownSourceInsight", - component: EndpointSlowdownSourceInsight, - 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; - -export const WithEvaluatingChange: Story = { - args: { - insight: { - sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", - id: "60b55792-8262-4c5d-9628-7cde7979ad6d", - 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: "Endpoint Slowdown Source", - type: InsightType.EndpointSlowdownSource, - category: InsightCategory.Performance, - specifity: 4, - importance: 2, - isDismissed: false, - isDismissible: true, - endpointSlowdownSources: [ - { - percentile: "0.5", - spanInfo: { - name: "WaitForLock", - displayName: "WaitForLock", - instrumentationLibrary: "SampleInsightsController", - spanCodeObjectId: "span:SampleInsightsController$_$WaitForLock", - methodCodeObjectId: null, - kind: "Internal", - codeObjectId: null - }, - level: 0, - previousDuration: { - value: 455.16, - unit: "ms", - raw: 455156000 - }, - currentDuration: { - value: 3.22, - unit: "sec", - raw: 3222871000 - }, - changeTime: "2023-06-30T11:09:55.000Z", - changeVerified: false - }, - { - percentile: "0.95", - spanInfo: { - name: "WaitForLock", - displayName: "WaitForLock", - instrumentationLibrary: "SampleInsightsController", - spanCodeObjectId: "span:SampleInsightsController$_$WaitForLock", - methodCodeObjectId: null, - kind: "Internal", - codeObjectId: null - }, - level: 0, - previousDuration: { - value: 1.6, - unit: "sec", - raw: 1604577000 - }, - currentDuration: { - value: 2.62, - unit: "sec", - raw: 2619854000 - }, - changeTime: "2023-06-30T11:09:54.000Z", - changeVerified: false - } - ], - decorators: [ - { - title: "Endpoint Duration Slowdown Source", - description: "Some spans significantly slowdown this endpoint" - } - ], - scope: InsightScope.EntrySpan, - endpointSpan: "HTTP GET SampleInsights/lock/{milisec}", - spanCodeObjectId: - "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/lock/{milisec}", - route: "epHTTP:HTTP GET SampleInsights/lock/{milisec}", - serviceName: "Sample.MoneyTransfer.API", - spanInfo: { - name: "HTTP GET SampleInsights/lock/{milisec}", - displayName: "HTTP GET SampleInsights/lock/{milisec}", - instrumentationLibrary: "OpenTelemetry.Instrumentation.AspNetCore", - spanCodeObjectId: - "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/lock/{milisec}", - methodCodeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double)", - kind: "Server", - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double)" - }, - shortDisplayInfo: { - title: "", - targetDisplayName: "", - subtitle: "", - description: "" - }, - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double)", - environment: "BOB-LAPTOP[LOCAL]", - severity: 0, - isRecalculateEnabled: false, - prefixedCodeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double)", - customStartTime: null, - actualStartTime: "2023-06-16T11:10:21.334Z" - } - } -}; diff --git a/src/components/Insights/common/insights/EndpointSlowdownSourceInsight/types.ts b/src/components/Insights/common/insights/EndpointSlowdownSourceInsight/types.ts deleted file mode 100644 index 6ad58b90f..000000000 --- a/src/components/Insights/common/insights/EndpointSlowdownSourceInsight/types.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { - EndpointSlowdownSourceInsight, - InsightProps, - InsightType -} from "../../../types"; - -export interface EndpointSlowdownSourceInsightProps extends InsightProps { - insight: EndpointSlowdownSourceInsight; - onAssetLinkClick: ( - spanCodeObjectId: string, - insightType: InsightType - ) => void; -} diff --git a/src/components/Insights/common/insights/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx b/src/components/Insights/common/insights/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx deleted file mode 100644 index 1795ed555..000000000 --- a/src/components/Insights/common/insights/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx +++ /dev/null @@ -1,218 +0,0 @@ -import { Meta, StoryObj } from "@storybook/react"; -import { ExcessiveAPICallsInsight } from "."; -import { 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 = { - title: "Insights/common/insights/ExcessiveAPICallsInsight", - component: ExcessiveAPICallsInsight, - 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; - -export const Default: Story = { - args: { - insight: { - sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", - id: "60b55792-8262-4c5d-9688-7cce7979ad6d", - firstDetected: "2023-12-05T17:25:47.010Z", - lastDetected: "2024-01-05T13:14:47.010Z", - criticality: 0.5, - firstCommitId: "b3f7b3f", - lastCommitId: "a1b2c3d", - deactivatedCommitId: null, - reopenCount: 0, - ticketLink: null, - impact: 0, - name: "HTTP Chatter", - type: InsightType.EndpointChattyApi, - category: InsightCategory.Performance, - specifity: 2, - importance: 3, - isDismissed: false, - isDismissible: true, - spans: [ - { - repeats: 29, - clientSpan: { - name: "HTTP GET mockapi.io", - displayName: "HTTP GET mockapi.io", - instrumentationLibrary: "io.opentelemetry.okhttp-3.0", - spanCodeObjectId: - "span:io.opentelemetry.okhttp-3.0$_$HTTP GET mockapi.io", - methodCodeObjectId: null, - kind: "Client", - codeObjectId: null - }, - traceId: "00E4D714D4FAD0A00F9D8A39C8A49E8A" - }, - { - repeats: 29, - clientSpan: { - name: "HTTP GET mockapi.io 2", - displayName: "HTTP GET mockapi.io 2", - instrumentationLibrary: "io.opentelemetry.okhttp-3.0", - spanCodeObjectId: - "span:io.opentelemetry.okhttp-3.0$_$HTTP GET mockapi.io 2", - methodCodeObjectId: null, - kind: "Client", - codeObjectId: null - }, - traceId: "00E4D714D4FAD0A00F9D8A39C8A49E8B" - }, - { - repeats: 29, - clientSpan: { - name: "HTTP GET mockapi.io 3", - displayName: "HTTP GET mockapi.io 3", - instrumentationLibrary: "io.opentelemetry.okhttp-3.0", - spanCodeObjectId: - "span:io.opentelemetry.okhttp-3.0$_$HTTP GET mockapi.io 3", - methodCodeObjectId: null, - kind: "Client", - codeObjectId: null - }, - traceId: "00E4D714D4FAD0A00F9D8A39C8A49E8C" - }, - { - repeats: 29, - clientSpan: { - name: "HTTP GET mockapi.io 4", - displayName: "HTTP GET mockapi.io 4", - instrumentationLibrary: "io.opentelemetry.okhttp-3.0", - spanCodeObjectId: - "span:io.opentelemetry.okhttp-3.0$_$HTTP GET mockapi.io 4", - methodCodeObjectId: null, - kind: "Client", - codeObjectId: null - }, - traceId: "00E4D714D4FAD0A00F9D8A39C8A49E8C" - } - ], - scope: InsightScope.EntrySpan, - endpointSpan: "HTTP POST /owners/{ownerId}/pets/new", - spanCodeObjectId: - "span:io.opentelemetry.tomcat-10.0$_$HTTP POST /owners/{ownerId}/pets/new", - route: "epHTTP:HTTP POST /owners/{ownerId}/pets/new", - serviceName: "spring-petclinic", - spanInfo: { - name: "HTTP POST /owners/{ownerId}/pets/new", - displayName: "HTTP POST /owners/{ownerId}/pets/new", - instrumentationLibrary: "io.opentelemetry.tomcat-10.0", - spanCodeObjectId: - "span:io.opentelemetry.tomcat-10.0$_$HTTP POST /owners/{ownerId}/pets/new", - methodCodeObjectId: - "method:org.springframework.samples.petclinic.owner.PetController$_$processCreationForm", - kind: "Server", - codeObjectId: - "org.springframework.samples.petclinic.owner.PetController$_$processCreationForm" - }, - shortDisplayInfo: { - title: "", - targetDisplayName: "", - subtitle: "", - description: "" - }, - codeObjectId: - "org.springframework.samples.petclinic.owner.PetController$_$processCreationForm", - decorators: [ - { - title: "Excessive HTTP Calls", - description: "Numerous Http calls to the same endpoint detected " - } - ], - environment: "BOB-LAPTOP[LOCAL]", - severity: 0.0, - isRecalculateEnabled: false, - prefixedCodeObjectId: - "method:org.springframework.samples.petclinic.owner.PetController$_$processCreationForm", - customStartTime: null, - actualStartTime: "2023-08-10T08:04:00Z" - } - } -}; - -export const EmptyTrace: Story = { - args: { - insight: { - sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", - id: "60b55792-8262-4c5d-9688-7cce7979ad6d", - firstDetected: "2023-12-05T17:25:47.010Z", - lastDetected: "2024-01-05T13:14:47.010Z", - criticality: 0.5, - firstCommitId: "b3f7b3f", - lastCommitId: "a1b2c3d", - deactivatedCommitId: null, - reopenCount: 0, - ticketLink: null, - impact: 0, - name: "HTTP Chatter", - type: InsightType.EndpointChattyApi, - category: InsightCategory.Performance, - specifity: 2, - importance: 3, - isDismissed: false, - isDismissible: true, - spans: [ - { - repeats: 29, - clientSpan: { - name: "HTTP GET mockapi.io", - displayName: "HTTP GET mockapi.io", - instrumentationLibrary: "io.opentelemetry.okhttp-3.0", - spanCodeObjectId: - "span:io.opentelemetry.okhttp-3.0$_$HTTP GET mockapi.io", - methodCodeObjectId: null, - kind: "Client", - codeObjectId: null - } - } - ], - scope: InsightScope.EntrySpan, - endpointSpan: "HTTP POST /owners/{ownerId}/pets/new", - spanCodeObjectId: - "span:io.opentelemetry.tomcat-10.0$_$HTTP POST /owners/{ownerId}/pets/new", - route: "epHTTP:HTTP POST /owners/{ownerId}/pets/new", - serviceName: "spring-petclinic", - spanInfo: { - name: "HTTP POST /owners/{ownerId}/pets/new", - displayName: "HTTP POST /owners/{ownerId}/pets/new", - instrumentationLibrary: "io.opentelemetry.tomcat-10.0", - spanCodeObjectId: - "span:io.opentelemetry.tomcat-10.0$_$HTTP POST /owners/{ownerId}/pets/new", - methodCodeObjectId: - "method:org.springframework.samples.petclinic.owner.PetController$_$processCreationForm", - kind: "Server", - codeObjectId: - "org.springframework.samples.petclinic.owner.PetController$_$processCreationForm" - }, - shortDisplayInfo: { - title: "", - targetDisplayName: "", - subtitle: "", - description: "" - }, - codeObjectId: - "org.springframework.samples.petclinic.owner.PetController$_$processCreationForm", - decorators: [ - { - title: "Excessive HTTP Calls", - description: "Numerous Http calls to the same endpoint detected " - } - ], - environment: "BOB-LAPTOP[LOCAL]", - severity: 0.0, - isRecalculateEnabled: false, - prefixedCodeObjectId: - "method:org.springframework.samples.petclinic.owner.PetController$_$processCreationForm", - customStartTime: null, - actualStartTime: "2023-08-10T08:04:00Z" - } - } -}; diff --git a/src/components/Insights/common/insights/ExcessiveAPICallsInsight/types.ts b/src/components/Insights/common/insights/ExcessiveAPICallsInsight/types.ts deleted file mode 100644 index 698f15a57..000000000 --- a/src/components/Insights/common/insights/ExcessiveAPICallsInsight/types.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { - ChattyApiEndpointInsight, - InsightProps, - InsightType, - Trace -} from "../../../types"; - -export interface ExcessiveAPICallsInsightProps extends InsightProps { - insight: ChattyApiEndpointInsight; - onAssetLinkClick: ( - spanCodeObjectId: string, - insightType: InsightType - ) => void; - onTraceButtonClick: ( - trace: Trace, - insightType: InsightType, - spanCodeObjectId: string - ) => void; -} diff --git a/src/components/Insights/common/insights/HighNumberOfQueriesInsight/HighNumberOfQueriesInsight.stories.tsx b/src/components/Insights/common/insights/HighNumberOfQueriesInsight/HighNumberOfQueriesInsight.stories.tsx deleted file mode 100644 index 9af6228b5..000000000 --- a/src/components/Insights/common/insights/HighNumberOfQueriesInsight/HighNumberOfQueriesInsight.stories.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { Meta, StoryObj } from "@storybook/react"; -import { HighNumberOfQueriesInsight } from "."; -import { mockedHighNumberOfQueriesInsight } from "./mockData"; - -// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction -const meta: Meta = { - title: "Insights/common/Insights/HighNumberOfQueriesInsight", - component: HighNumberOfQueriesInsight, - 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; - -export const Default: Story = { - args: { - insight: mockedHighNumberOfQueriesInsight - } -}; - -export const Normal: Story = { - args: { - insight: { ...mockedHighNumberOfQueriesInsight, quantile: 0 } - } -}; diff --git a/src/components/Insights/common/insights/SessionInViewInsight/SessionInViewInsight.stories.tsx b/src/components/Insights/common/insights/SessionInViewInsight/SessionInViewInsight.stories.tsx deleted file mode 100644 index 18be59188..000000000 --- a/src/components/Insights/common/insights/SessionInViewInsight/SessionInViewInsight.stories.tsx +++ /dev/null @@ -1,179 +0,0 @@ -import { Meta, StoryObj } from "@storybook/react"; -import { SessionInViewInsight } from "."; -import { 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 = { - title: "Insights/common/insights/SessionInViewInsight", - component: SessionInViewInsight, - 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; - -export const Default: Story = { - args: { - insight: { - sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", - id: "60b55792-8262-4c5a-9628-7cce7979ad6d", - 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: "Session in View Query", - type: InsightType.EndpointSessionInView, - category: InsightCategory.Performance, - specifity: 2, - importance: 3, - isDismissed: false, - isDismissible: true, - spans: [ - { - renderSpan: { - name: "Render owners/ownerDetails", - displayName: "Render owners/ownerDetails", - instrumentationLibrary: "io.opentelemetry.spring-webmvc-6.0", - spanCodeObjectId: - "span:io.opentelemetry.spring-webmvc-6.0$_$Render owners/ownerDetails", - methodCodeObjectId: "", - kind: "Internal", - codeObjectId: "" - }, - clientSpan: { - name: "6AFAE587D3FEC813CD353F4CC91076", - displayName: - "select p1_0.pet_id,p1_0.id,p1_0.vaccine_date from pet_vaccines p1_0 where p1_0.pet_id=? order by p1_0.vaccine_date", - instrumentationLibrary: "io.opentelemetry.jdbc", - spanCodeObjectId: - "span:io.opentelemetry.jdbc$_$6AFAE587D3FEC813CD353F4CC91076", - methodCodeObjectId: "", - kind: "Client", - codeObjectId: "" - }, - traceId: "937BDA41E6AAEAF9B140E3A7FD02D4B0" - }, - { - renderSpan: { - name: "Render owners/ownerDetails 2", - displayName: "Render owners/ownerDetails 2", - instrumentationLibrary: "io.opentelemetry.spring-webmvc-6.0", - spanCodeObjectId: - "span:io.opentelemetry.spring-webmvc-6.0$_$Render owners/ownerDetails 2", - methodCodeObjectId: "", - kind: "Internal", - codeObjectId: "" - }, - clientSpan: { - name: "6AFAE587D3FEC813CD353F4CC910762", - displayName: - "select p1_0.pet_id,p1_0.id,p1_0.vaccine_date from pet_vaccines p1_0 where p1_0.pet_id=? order by p1_0.vaccine_date 2", - instrumentationLibrary: "io.opentelemetry.jdbc", - spanCodeObjectId: - "span:io.opentelemetry.jdbc$_$6AFAE587D3FEC813CD353F4CC910762", - methodCodeObjectId: "", - kind: "Client", - codeObjectId: "" - }, - traceId: "937BDA41E6AAEAF9B140E3A7FD02D4B02" - }, - { - renderSpan: { - name: "Render owners/ownerDetails 3", - displayName: "Render owners/ownerDetails 3", - instrumentationLibrary: "io.opentelemetry.spring-webmvc-6.0", - spanCodeObjectId: - "span:io.opentelemetry.spring-webmvc-6.0$_$Render owners/ownerDetails 3", - methodCodeObjectId: "", - kind: "Internal", - codeObjectId: "" - }, - clientSpan: { - name: "6AFAE587D3FEC813CD353F4CC910763", - displayName: - "select p1_0.pet_id,p1_0.id,p1_0.vaccine_date from pet_vaccines p1_0 where p1_0.pet_id=? order by p1_0.vaccine_date 3", - instrumentationLibrary: "io.opentelemetry.jdbc", - spanCodeObjectId: - "span:io.opentelemetry.jdbc$_$6AFAE587D3FEC813CD353F4CC910763", - methodCodeObjectId: "", - kind: "Client", - codeObjectId: "" - }, - traceId: "937BDA41E6AAEAF9B140E3A7FD02D4B03" - }, - { - renderSpan: { - name: "Render owners/ownerDetails 4", - displayName: "Render owners/ownerDetails 4", - instrumentationLibrary: "io.opentelemetry.spring-webmvc-6.0", - spanCodeObjectId: - "span:io.opentelemetry.spring-webmvc-6.0$_$Render owners/ownerDetails 4", - methodCodeObjectId: "", - kind: "Internal", - codeObjectId: "" - }, - clientSpan: { - name: "6AFAE587D3FEC813CD353F4CC910764", - displayName: - "select p1_0.pet_id,p1_0.id,p1_0.vaccine_date from pet_vaccines p1_0 where p1_0.pet_id=? order by p1_0.vaccine_date 4", - instrumentationLibrary: "io.opentelemetry.jdbc", - spanCodeObjectId: - "span:io.opentelemetry.jdbc$_$6AFAE587D3FEC813CD353F4CC910764", - methodCodeObjectId: "", - kind: "Client", - codeObjectId: "" - }, - traceId: "937BDA41E6AAEAF9B140E3A7FD02D4B04" - } - ], - scope: InsightScope.EntrySpan, - endpointSpan: "HTTP GET /owners/{ownerId}", - spanCodeObjectId: - "span:io.opentelemetry.tomcat-10.0$_$HTTP GET /owners/{ownerId}", - route: "epHTTP:HTTP GET /owners/{ownerId}", - serviceName: "spring-petclinic", - spanInfo: { - name: "HTTP GET /owners/{ownerId}", - displayName: "HTTP GET /owners/{ownerId}", - instrumentationLibrary: "io.opentelemetry.tomcat-10.0", - spanCodeObjectId: - "span:io.opentelemetry.tomcat-10.0$_$HTTP GET /owners/{ownerId}", - methodCodeObjectId: - "method:org.springframework.samples.petclinic.owner.OwnerController$_$showOwner", - kind: "Server", - codeObjectId: - "org.springframework.samples.petclinic.owner.OwnerController$_$showOwner" - }, - shortDisplayInfo: { - title: "", - targetDisplayName: "", - subtitle: "", - description: "" - }, - codeObjectId: - "org.springframework.samples.petclinic.owner.OwnerController$_$showOwner", - decorators: [ - { - title: "Session in View", - description: "Session in View query detected" - } - ], - environment: "BOB-LAPTOP[LOCAL]", - severity: 0.0, - isRecalculateEnabled: false, - prefixedCodeObjectId: - "method:org.springframework.samples.petclinic.owner.OwnerController$_$showOwner", - customStartTime: null, - actualStartTime: "2023-08-10T08:59:14.093073Z" - } - } -}; diff --git a/src/components/Insights/common/insights/SessionInViewInsight/types.ts b/src/components/Insights/common/insights/SessionInViewInsight/types.ts deleted file mode 100644 index bfb9c576d..000000000 --- a/src/components/Insights/common/insights/SessionInViewInsight/types.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { - InsightProps, - InsightType, - SessionInViewEndpointInsight, - Trace -} from "../../../types"; - -export interface SessionInViewInsightProps extends InsightProps { - insight: SessionInViewEndpointInsight; - onAssetLinkClick: ( - spanCodeObjectId: string, - insightType: InsightType - ) => void; - onTraceButtonClick: ( - trace: Trace, - insightType: InsightType, - spanCodeObjectId: string - ) => void; -} diff --git a/src/components/Insights/common/insights/SlowEndpointInsight/SlowEndpointInsight.stories.tsx b/src/components/Insights/common/insights/SlowEndpointInsight/SlowEndpointInsight.stories.tsx deleted file mode 100644 index 940bb9d4c..000000000 --- a/src/components/Insights/common/insights/SlowEndpointInsight/SlowEndpointInsight.stories.tsx +++ /dev/null @@ -1,135 +0,0 @@ -import { Meta, StoryObj } from "@storybook/react"; -import { SlowEndpointInsight } from "."; -import { 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 = { - title: "Insights/common/insights/SlowEndpointInsight", - component: SlowEndpointInsight, - 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; - -export const Default: Story = { - args: { - insight: { - sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", - id: "60b55792-8262-4c3d-9628-7cce7979ad6d", - 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: "Slow Endpoint", - type: InsightType.SlowEndpoint, - category: InsightCategory.Performance, - specifity: 5, - importance: 2, - isDismissed: false, - isDismissible: true, - decorators: [ - { - title: "Slow Endpoint", - description: "Endpoint slow performance" - } - ], - endpointsMedian: { - value: 2.21, - unit: "sec", - raw: 2209365000 - }, - endpointsMedianOfMedians: { - value: 1.6, - unit: "sec", - raw: 1601240200 - }, - endpointsP75: { - value: 3.85, - unit: "sec", - raw: 3851011500 - }, - median: { - value: 5.01, - unit: "sec", - raw: 5007013000 - }, - endpointsMedianOfP75: { - value: 0, - unit: "ns", - raw: 0 - }, - min: { - value: 0, - unit: "ns", - raw: 0 - }, - max: { - value: 0, - unit: "ns", - raw: 0 - }, - mean: { - value: 0, - unit: "ns", - raw: 0 - }, - p75: { - value: 0, - unit: "ns", - raw: 0 - }, - p95: { - value: 0, - unit: "ns", - raw: 0 - }, - p99: { - value: 0, - unit: "ns", - raw: 0 - }, - scope: InsightScope.EntrySpan, - endpointSpan: "HTTP GET SampleInsights/SlowEndpoint", - spanCodeObjectId: - "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/SlowEndpoint", - route: "epHTTP:HTTP GET SampleInsights/SlowEndpoint", - serviceName: "Sample.MoneyTransfer.API", - spanInfo: { - name: "HTTP GET SampleInsights/SlowEndpoint", - displayName: "HTTP GET SampleInsights/SlowEndpoint", - instrumentationLibrary: "OpenTelemetry.Instrumentation.AspNetCore", - spanCodeObjectId: - "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/SlowEndpoint", - methodCodeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$SlowEndpoint(Int32)", - kind: "Server", - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$SlowEndpoint(Int32)" - }, - shortDisplayInfo: { - title: "", - targetDisplayName: "HTTP GET SampleInsights/SlowEndpoint", - subtitle: "", - description: "Median duration 5.01 sec" - }, - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$SlowEndpoint(Int32)", - environment: "BOB-LAPTOP[LOCAL]", - severity: 0, - isRecalculateEnabled: false, - prefixedCodeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$SlowEndpoint(Int32)", - customStartTime: null, - actualStartTime: "2023-06-16T11:10:29.277Z" - } - } -}; diff --git a/src/components/Insights/common/insights/SlowEndpointInsight/index.tsx b/src/components/Insights/common/insights/SlowEndpointInsight/index.tsx deleted file mode 100644 index dc77123f1..000000000 --- a/src/components/Insights/common/insights/SlowEndpointInsight/index.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { getDurationString } from "../../../../../utils/getDurationString"; -import { roundTo } from "../../../../../utils/roundTo"; -import { Tag } from "../../../../common/v3/Tag"; -import { InsightCard } from "../../InsightCard"; -import { ColumnsContainer } from "../../InsightCard/ColumnsContainer"; -import { KeyValue } from "../../InsightCard/KeyValue"; -import * as s from "./styles"; -import { SlowEndpointInsightProps } from "./types"; - -export const SlowEndpointInsight = (props: SlowEndpointInsightProps) => { - const diff = - (props.insight.median.raw / props.insight.endpointsMedianOfMedians.raw - - 1) * - 100; - - return ( - - - - On average requests are slower than other endpoints by{" "} - {roundTo(diff, 2)}% - - - - - - - } - onRecalculate={props.onRecalculate} - onRefresh={props.onRefresh} - onGoToSpan={props.onGoToSpan} - isMarkAsReadButtonEnabled={props.isMarkAsReadButtonEnabled} - /> - ); -}; diff --git a/src/components/Insights/common/insights/SlowEndpointInsight/types.ts b/src/components/Insights/common/insights/SlowEndpointInsight/types.ts deleted file mode 100644 index fe90ee726..000000000 --- a/src/components/Insights/common/insights/SlowEndpointInsight/types.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { InsightProps, SlowEndpointInsight } from "../../../types"; - -export interface SlowEndpointInsightProps extends InsightProps { - insight: SlowEndpointInsight; -} diff --git a/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/SpanEndpointBottleneckInsight.stories.tsx b/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/SpanEndpointBottleneckInsight.stories.tsx deleted file mode 100644 index 2c5195e45..000000000 --- a/src/components/Insights/common/insights/SpanEndpointBottleneckInsight/SpanEndpointBottleneckInsight.stories.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { Meta, StoryObj } from "@storybook/react"; -import { SpanEndpointBottleneckInsight } from "."; -import { mockedBottleneckInsight } from "../../../BottleneckInsight/mockData"; - -// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction -const meta: Meta = { - title: "Insights/common/insights/SpanEndpointBottleneckInsight", - component: SpanEndpointBottleneckInsight, - 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; - -const mockedSlowEndpoints = mockedBottleneckInsight.slowEndpoints || []; - -export const Default: Story = { - args: { - insight: { - ...mockedBottleneckInsight, - slowEndpoints: [ - ...mockedSlowEndpoints, - { - ...mockedSlowEndpoints[0], - requestPercentage: 100, - endpointInfo: { - ...mockedSlowEndpoints[0].endpointInfo, - route: `${mockedSlowEndpoints[0].endpointInfo.route}1`, - spanCodeObjectId: `${mockedSlowEndpoints[0].endpointInfo.spanCodeObjectId}1` - } - } - ] - } - } -}; - -export const WithNoSlowEndpoints: Story = { - args: { - insight: { - ...mockedBottleneckInsight, - slowEndpoints: [] - } - } -}; diff --git a/src/components/Insights/common/insights/SpanNPlusOneInsight/types.ts b/src/components/Insights/common/insights/SpanNPlusOneInsight/types.ts deleted file mode 100644 index 0ff7ede2b..000000000 --- a/src/components/Insights/common/insights/SpanNPlusOneInsight/types.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { - InsightProps, - InsightType, - SpanNPlusOneInsight, - Trace -} from "../../../types"; - -export interface SpanNPlusOneInsightProps extends InsightProps { - insight: SpanNPlusOneInsight; - onAssetLinkClick: ( - spanCodeObjectId: string, - insightType: InsightType - ) => void; - onTraceButtonClick: ( - trace: Trace, - insightType: InsightType, - spanCodeObjectId?: string - ) => void; -} diff --git a/src/components/Insights/common/insights/SpanNexusInsight/types.ts b/src/components/Insights/common/insights/SpanNexusInsight/types.ts deleted file mode 100644 index b0ab27d55..000000000 --- a/src/components/Insights/common/insights/SpanNexusInsight/types.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { InsightProps, SpanNexusInsight } from "../../../types"; - -export interface SpanNexusInsightProps extends InsightProps { - insight: SpanNexusInsight; -} diff --git a/src/components/Insights/common/insights/SpanQueryOptimizationInsight/mockData.ts b/src/components/Insights/common/insights/SpanQueryOptimizationInsight/mockData.ts deleted file mode 100644 index f119f54d7..000000000 --- a/src/components/Insights/common/insights/SpanQueryOptimizationInsight/mockData.ts +++ /dev/null @@ -1,100 +0,0 @@ -import { - InsightCategory, - InsightScope, - InsightType, - QueryOptimizationInsight -} from "../../../types"; - -export const mockedQueryOptimizationInsight: QueryOptimizationInsight = { - sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", - id: "60b55792-8262-4c8d-9628-7cce7979ad6d", - 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: "QueryOptimization", - type: InsightType.SpanQueryOptimization, - category: InsightCategory.Performance, - specifity: 2, - importance: 2, - isDismissed: false, - isDismissible: true, - span: { - name: "OwnerValidation.ValidateOwner", - displayName: "OwnerValidation.ValidateOwner", - instrumentationLibrary: - "io.opentelemetry.opentelemetry-instrumentation-annotations-1.16", - spanCodeObjectId: - "span:io.opentelemetry.opentelemetry-instrumentation-annotations-1.16$_$OwnerValidation.ValidateOwner", - methodCodeObjectId: - "org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner", - kind: "Internal", - codeObjectId: - "org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner" - }, - traceId: "00D37A4E7208E0F6E89AA7E2E37446A6", - duration: { - value: 12.34, - unit: "ms", - raw: 1636050588.0 - }, - typicalDuration: { - value: 4.56, - unit: "ms", - raw: 0 - }, - dbStatement: "select", - serviceName: "Petclinic", - dbName: "postgresql", - scope: InsightScope.Span, - spanInfo: { - name: "OwnerValidation.ValidateOwner", - displayName: "OwnerValidation.ValidateOwner", - instrumentationLibrary: - "io.opentelemetry.opentelemetry-instrumentation-annotations-1.16", - spanCodeObjectId: - "span:io.opentelemetry.opentelemetry-instrumentation-annotations-1.16$_$OwnerValidation.ValidateOwner", - methodCodeObjectId: - "org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner", - kind: "Internal", - codeObjectId: - "org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner" - }, - shortDisplayInfo: { - title: "", - targetDisplayName: "", - subtitle: "", - description: "" - }, - codeObjectId: - "org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner", - decorators: [ - { - title: "N+1", - description: "Supected NPlus One" - } - ], - environment: "BOB-LAPTOP[LOCAL]", - severity: 0.0, - isRecalculateEnabled: false, - prefixedCodeObjectId: - "method:org.springframework.samples.petclinic.domain.OwnerValidation$_$ValidateOwner", - customStartTime: null, - actualStartTime: "2023-07-27T08:23:56.500827Z", - endpoints: [ - { - endpointInfo: { - route: "HTTP POST /owners/new", - instrumentationLibrary: "OwnerController", - spanCodeObjectId: - "span:io.opentelemetry.tomcat-10.0$_$HTTP POST /owners/new", - serviceName: "spring-petclinic" - } - } - ] -}; diff --git a/src/components/Insights/common/insights/SpanQueryOptimizationInsight/types.ts b/src/components/Insights/common/insights/SpanQueryOptimizationInsight/types.ts deleted file mode 100644 index da98b9a33..000000000 --- a/src/components/Insights/common/insights/SpanQueryOptimizationInsight/types.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { - InsightProps, - InsightType, - QueryOptimizationInsight, - Trace -} from "../../../types"; - -export interface QueryOptimizationInsightProps extends InsightProps { - insight: QueryOptimizationInsight; - onAssetLinkClick: ( - spanCodeObjectId: string, - insightType: InsightType - ) => void; - onTraceButtonClick: ( - trace: Trace, - insightType: InsightType, - spanCodeObjectId?: string - ) => void; -} diff --git a/src/components/Insights/common/insights/TopUsageInsight/TopUsageInsight.stories.tsx b/src/components/Insights/common/insights/TopUsageInsight/TopUsageInsight.stories.tsx deleted file mode 100644 index 5007f6c32..000000000 --- a/src/components/Insights/common/insights/TopUsageInsight/TopUsageInsight.stories.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import { Meta, StoryObj } from "@storybook/react"; -import { TopUsageInsight } from "."; -import { 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 = { - title: "Insights/common/insights/TopUsageInsight", - component: TopUsageInsight, - 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; - -export const Default: Story = { - args: { - insight: { - sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", - id: "60b55792-8162-4c5d-9628-7cce7979ad6d", - 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: "Top Usage", - type: InsightType.SpanUsages, - category: InsightCategory.Usage, - specifity: 4, - isRecalculateEnabled: true, - importance: 5, - span: "DelayAsync", - sampleTrace: null, - isDismissed: false, - isDismissible: true, - flows: [ - { - sampleTraceIds: ["3E41E4197B696CA9BF1157AEB254DFE0"], - percentage: 40.15025041736227, - firstService: { - service: "Sample.MoneyTransfer.API", - span: "HTTP GET SampleInsights/lock/{milisec}", - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double)", - spanCodeObjectId: - "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/lock/{milisec}" - }, - intermediateSpan: "WaitForLock", - lastService: null, - lastServiceSpan: null - }, - { - sampleTraceIds: ["3E41E4197B696CA9BF1157AEB254DFE0"], - percentage: 40.15025041736227, - firstService: { - service: "Sample.MoneyTransfer.API", - span: "HTTP GET SampleInsights/lock/{milisec}", - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double)", - spanCodeObjectId: - "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/lock/{milisec}" - }, - intermediateSpan: "Connecting", - lastService: null, - lastServiceSpan: null - }, - { - sampleTraceIds: ["0DB20449C835447E04F6549627A3999F"], - percentage: 19.69949916527546, - firstService: { - service: "Sample.MoneyTransfer.API", - span: "HTTP GET SampleInsights/UnverifiedChange/{milisec}", - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$UnverifiedChange(Int32)", - spanCodeObjectId: - "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/UnverifiedChange/{milisec}" - }, - intermediateSpan: null, - lastService: null, - lastServiceSpan: null - } - ], - scope: InsightScope.Span, - spanInfo: { - name: "DelayAsync", - displayName: "DelayAsync", - instrumentationLibrary: "SampleInsightsController", - spanCodeObjectId: "span:SampleInsightsController$_$DelayAsync", - methodCodeObjectId: null, - kind: "Internal", - codeObjectId: null - }, - shortDisplayInfo: { - title: "", - targetDisplayName: "", - subtitle: "", - description: "" - }, - codeObjectId: "SampleInsightsController$_$DelayAsync", - decorators: null, - environment: "BOB-LAPTOP[LOCAL]", - severity: 0, - prefixedCodeObjectId: "span:SampleInsightsController$_$DelayAsync", - customStartTime: null, - actualStartTime: "2023-06-17T00:00:00.000Z" - } - } -}; diff --git a/src/components/Insights/common/insights/TrafficInsight/TrafficInsight.stories.tsx b/src/components/Insights/common/insights/TrafficInsight/TrafficInsight.stories.tsx deleted file mode 100644 index 3037e9424..000000000 --- a/src/components/Insights/common/insights/TrafficInsight/TrafficInsight.stories.tsx +++ /dev/null @@ -1,136 +0,0 @@ -import { Meta, StoryObj } from "@storybook/react"; -import { TrafficInsight } from "."; -import { - InsightCategory, - InsightImportance, - InsightScope, - InsightSpecificity, - InsightType -} from "../../../types"; - -// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction -const meta: Meta = { - title: "Insights/common/insights/TrafficInsight", - component: TrafficInsight, - 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; - -const BaseTrafficInsight = { - sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", - id: "60b55792-8262-3c5d-9628-7cce7979ad6d", - 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: "High Usage", - scope: InsightScope.EntrySpan, - endpointSpan: "HTTP GET SampleInsights/lock/{milisec}", - spanCodeObjectId: - "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/lock/{milisec}", - route: "epHTTP:HTTP GET SampleInsights/lock/{milisec}", - serviceName: "Sample.MoneyTransfer.API", - spanInfo: { - name: "HTTP GET SampleInsights/lock/{milisec}", - displayName: "HTTP GET SampleInsights/lock/{milisec}", - instrumentationLibrary: "OpenTelemetry.Instrumentation.AspNetCore", - spanCodeObjectId: - "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/lock/{milisec}", - methodCodeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double)", - kind: "Server", - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double)" - }, - shortDisplayInfo: { - title: "", - targetDisplayName: "", - subtitle: "", - description: "" - }, - codeObjectId: - "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double)", - environment: "BOB-LAPTOP[LOCAL]", - severity: 0, - isRecalculateEnabled: false, - prefixedCodeObjectId: - "method:Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$Lock(Double)", - customStartTime: null, - actualStartTime: "2023-06-16T11:10:22.773Z", - decorators: null, - category: "", - importance: InsightImportance.NotInteresting, - isDismissed: false, - isDismissible: true -}; - -export const NormalTraffic: Story = { - args: { - insight: { - ...BaseTrafficInsight, - decorators: [ - { - title: "Normal Usage", - description: "Normal level of usage for this endpoint" - } - ], - category: InsightCategory.Usage, - type: InsightType.NormalUsage, - importance: InsightImportance.NotInteresting, - name: "Normal Usage", - maxCallsIn1Min: 0, - specifity: InsightSpecificity.OwnInsight - } - } -}; - -export const LowTraffic: Story = { - args: { - insight: { - ...BaseTrafficInsight, - decorators: [ - { - title: "Low Usage", - description: "Low level of usage for this endpoint" - } - ], - category: InsightCategory.Usage, - type: InsightType.LowUsage, - importance: InsightImportance.Info, - name: "Low Usage", - maxCallsIn1Min: 0, - specifity: InsightSpecificity.OwnInsight - } - } -}; - -export const HighTraffic: Story = { - args: { - insight: { - ...BaseTrafficInsight, - decorators: [ - { - title: "High Usage", - description: "High level of usage for this endpoint" - } - ], - category: InsightCategory.Usage, - type: InsightType.HighUsage, - importance: InsightImportance.Interesting, - name: "High Usage", - maxCallsIn1Min: 0, - specifity: InsightSpecificity.OwnInsight - } - } -}; diff --git a/src/components/Insights/common/insights/TrafficInsight/types.ts b/src/components/Insights/common/insights/TrafficInsight/types.ts deleted file mode 100644 index 9c8088746..000000000 --- a/src/components/Insights/common/insights/TrafficInsight/types.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { - EndpointHighUsageInsight, - EndpointLowUsageInsight, - EndpointNormalUsageInsight, - InsightProps -} from "../../../types"; - -export interface TrafficInsightProps extends InsightProps { - insight: - | EndpointLowUsageInsight - | EndpointNormalUsageInsight - | EndpointHighUsageInsight; -} diff --git a/src/components/Insights/DurationChange/DurationChange.stories.tsx b/src/components/Insights/deprecated/InsightList/DurationChange/DurationChange.stories.tsx similarity index 92% rename from src/components/Insights/DurationChange/DurationChange.stories.tsx rename to src/components/Insights/deprecated/InsightList/DurationChange/DurationChange.stories.tsx index d42175e2e..12f9e013d 100644 --- a/src/components/Insights/DurationChange/DurationChange.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/DurationChange/DurationChange.stories.tsx @@ -3,7 +3,7 @@ import { DurationChange } from "."; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/DurationChange", + title: "Insights/deprecated/InsightList/DurationChange", component: DurationChange, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/DurationChange/index.tsx b/src/components/Insights/deprecated/InsightList/DurationChange/index.tsx similarity index 90% rename from src/components/Insights/DurationChange/index.tsx rename to src/components/Insights/deprecated/InsightList/DurationChange/index.tsx index 0f7f4fbf6..db31fa86e 100644 --- a/src/components/Insights/DurationChange/index.tsx +++ b/src/components/Insights/deprecated/InsightList/DurationChange/index.tsx @@ -1,11 +1,11 @@ import { formatDuration, intervalToDuration } from "date-fns"; import { DefaultTheme, useTheme } from "styled-components"; -import { Duration } from "../../../globals"; -import { formatTimeDistance } from "../../../utils/formatTimeDistance"; -import { roundTo } from "../../../utils/roundTo"; -import { Tooltip } from "../../common/Tooltip"; -import { ArrowIcon } from "../../common/icons/ArrowIcon"; -import { Direction } from "../../common/icons/types"; +import { Duration } from "../../../../../globals"; +import { formatTimeDistance } from "../../../../../utils/formatTimeDistance"; +import { roundTo } from "../../../../../utils/roundTo"; +import { Tooltip } from "../../../../common/Tooltip"; +import { ArrowIcon } from "../../../../common/icons/ArrowIcon"; +import { Direction } from "../../../../common/icons/types"; import * as s from "./styles"; import { DurationChangeProps } from "./types"; diff --git a/src/components/Insights/DurationChange/styles.ts b/src/components/Insights/deprecated/InsightList/DurationChange/styles.ts similarity index 100% rename from src/components/Insights/DurationChange/styles.ts rename to src/components/Insights/deprecated/InsightList/DurationChange/styles.ts diff --git a/src/components/Insights/DurationChange/types.ts b/src/components/Insights/deprecated/InsightList/DurationChange/types.ts similarity index 77% rename from src/components/Insights/DurationChange/types.ts rename to src/components/Insights/deprecated/InsightList/DurationChange/types.ts index 61fd4fad3..d04fd793c 100644 --- a/src/components/Insights/DurationChange/types.ts +++ b/src/components/Insights/deprecated/InsightList/DurationChange/types.ts @@ -1,4 +1,4 @@ -import { Duration } from "../../../globals"; +import { Duration } from "../../../../../globals"; export interface DurationChangeProps { currentDuration: Duration; diff --git a/src/components/Insights/InsightCard/InsightCard.stories.tsx b/src/components/Insights/deprecated/InsightList/InsightCard/InsightCard.stories.tsx similarity index 95% rename from src/components/Insights/InsightCard/InsightCard.stories.tsx rename to src/components/Insights/deprecated/InsightList/InsightCard/InsightCard.stories.tsx index 83e7f98ba..1d6c4daeb 100644 --- a/src/components/Insights/InsightCard/InsightCard.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/InsightCard/InsightCard.stories.tsx @@ -1,16 +1,16 @@ import { Meta, StoryObj } from "@storybook/react"; import { InsightCard } from "."; -import { InsightType } from "../../../types"; -import { Button } from "../../common/Button"; +import { InsightType } from "../../../../../types"; +import { Button } from "../../../../common/Button"; import { EndpointSuspectedNPlusOneInsight, InsightCategory, InsightScope -} from "../types"; +} from "../../../types"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/InsightCard", + title: "Insights/deprecated/InsightList/InsightCard", component: InsightCard, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout @@ -37,7 +37,7 @@ export const Default: Story = { ticketLink: "https://digma.ai", impact: 0, name: "Suspected N+1 Query", - type: InsightType.EndpointSpanNPlusOne, + type: InsightType.EndpointSpaNPlusOne, category: InsightCategory.Performance, specifity: 2, importance: 3, diff --git a/src/components/Insights/InsightCard/index.tsx b/src/components/Insights/deprecated/InsightList/InsightCard/index.tsx similarity index 83% rename from src/components/Insights/InsightCard/index.tsx rename to src/components/Insights/deprecated/InsightList/InsightCard/index.tsx index 825549c62..1589338cb 100644 --- a/src/components/Insights/InsightCard/index.tsx +++ b/src/components/Insights/deprecated/InsightList/InsightCard/index.tsx @@ -1,29 +1,29 @@ import { useContext, useState } from "react"; import { useTheme } from "styled-components"; -import { actions } from "../../../actions"; -import { PERCENTILES } from "../../../constants"; -import { isString } from "../../../typeGuards/isString"; -import { ChangeScopePayload } from "../../../types"; -import { formatTimeDistance } from "../../../utils/formatTimeDistance"; -import { getInsightImportanceColor } from "../../../utils/getInsightImportanceColor"; -import { getInsightTypeInfo } from "../../../utils/getInsightTypeInfo"; -import { ConfigContext } from "../../common/App/ConfigContext"; -import { Badge } from "../../common/Badge"; -import { Card } from "../../common/Card"; -import { KebabMenuButton } from "../../common/KebabMenuButton"; -import { Menu } from "../../common/Menu"; -import { Popover } from "../../common/Popover"; -import { PopoverContent } from "../../common/Popover/PopoverContent"; -import { PopoverTrigger } from "../../common/Popover/PopoverTrigger"; -import { Tag } from "../../common/Tag"; -import { Toggle } from "../../common/Toggle"; -import { ToggleValue } from "../../common/Toggle/types"; -import { Tooltip } from "../../common/Tooltip"; -import { OpenTelemetryLogoIcon } from "../../common/icons/12px/OpenTelemetryLogoIcon"; -import { ChevronIcon } from "../../common/icons/ChevronIcon"; -import { InfoCircleIcon } from "../../common/icons/InfoCircleIcon"; -import { Direction } from "../../common/icons/types"; -import { Description, Link } from "../styles"; +import { actions } from "../../../../../actions"; +import { PERCENTILES } from "../../../../../constants"; +import { isString } from "../../../../../typeGuards/isString"; +import { ChangeScopePayload } from "../../../../../types"; +import { formatTimeDistance } from "../../../../../utils/formatTimeDistance"; +import { getInsightImportanceColor } from "../../../../../utils/getInsightImportanceColor"; +import { getInsightTypeInfo } from "../../../../../utils/getInsightTypeInfo"; +import { ConfigContext } from "../../../../common/App/ConfigContext"; +import { Badge } from "../../../../common/Badge"; +import { Card } from "../../../../common/Card"; +import { KebabMenuButton } from "../../../../common/KebabMenuButton"; +import { Menu } from "../../../../common/Menu"; +import { Popover } from "../../../../common/Popover"; +import { PopoverContent } from "../../../../common/Popover/PopoverContent"; +import { PopoverTrigger } from "../../../../common/Popover/PopoverTrigger"; +import { Tag } from "../../../../common/Tag"; +import { Toggle } from "../../../../common/Toggle"; +import { ToggleValue } from "../../../../common/Toggle/types"; +import { Tooltip } from "../../../../common/Tooltip"; +import { OpenTelemetryLogoIcon } from "../../../../common/icons/12px/OpenTelemetryLogoIcon"; +import { ChevronIcon } from "../../../../common/icons/ChevronIcon"; +import { InfoCircleIcon } from "../../../../common/icons/InfoCircleIcon"; +import { Direction } from "../../../../common/icons/types"; +import { Description, Link } from "../../../styles"; import * as s from "./styles"; import { InsightCardProps } from "./types"; diff --git a/src/components/Insights/InsightCard/styles.ts b/src/components/Insights/deprecated/InsightList/InsightCard/styles.ts similarity index 97% rename from src/components/Insights/InsightCard/styles.ts rename to src/components/Insights/deprecated/InsightList/InsightCard/styles.ts index 53ce8147d..d55256640 100644 --- a/src/components/Insights/InsightCard/styles.ts +++ b/src/components/Insights/deprecated/InsightList/InsightCard/styles.ts @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { Link as CommonLink } from "../../common/Link"; +import { Link as CommonLink } from "../../../../common/Link"; export const Link = styled.a` color: #7891d0; diff --git a/src/components/Insights/InsightCard/types.ts b/src/components/Insights/deprecated/InsightList/InsightCard/types.ts similarity index 82% rename from src/components/Insights/InsightCard/types.ts rename to src/components/Insights/deprecated/InsightList/InsightCard/types.ts index 560169af6..3a6dd7dae 100644 --- a/src/components/Insights/InsightCard/types.ts +++ b/src/components/Insights/deprecated/InsightList/InsightCard/types.ts @@ -1,6 +1,6 @@ import { ReactNode } from "react"; -import { InsightType, SpanInfo } from "../../../types"; -import { GenericCodeObjectInsight } from "../types"; +import { InsightType, SpanInfo } from "../../../../../types"; +import { GenericCodeObjectInsight } from "../../../types"; export interface InsightCardProps { data: GenericCodeObjectInsight; diff --git a/src/components/Insights/NoObservabilityCard/index.tsx b/src/components/Insights/deprecated/InsightList/NoObservabilityCard/index.tsx similarity index 87% rename from src/components/Insights/NoObservabilityCard/index.tsx rename to src/components/Insights/deprecated/InsightList/NoObservabilityCard/index.tsx index ab319e947..550aa8a34 100644 --- a/src/components/Insights/NoObservabilityCard/index.tsx +++ b/src/components/Insights/deprecated/InsightList/NoObservabilityCard/index.tsx @@ -1,8 +1,8 @@ import { DefaultTheme, useTheme } from "styled-components"; -import { Button } from "../../common/Button"; -import { Card } from "../../common/Card"; -import { OpenTelemetryLogoCrossedSmallIcon } from "../../common/icons/OpenTelemetryLogoCrossedSmallIcon"; -import { Description, Link } from "../styles"; +import { Button } from "../../../../common/Button"; +import { Card } from "../../../../common/Card"; +import { OpenTelemetryLogoCrossedSmallIcon } from "../../../../common/icons/OpenTelemetryLogoCrossedSmallIcon"; +import { Description, Link } from "../../../styles"; import * as s from "./styles"; import { NoObservabilityCardProps } from "./types"; diff --git a/src/components/Insights/NoObservabilityCard/styles.ts b/src/components/Insights/deprecated/InsightList/NoObservabilityCard/styles.ts similarity index 100% rename from src/components/Insights/NoObservabilityCard/styles.ts rename to src/components/Insights/deprecated/InsightList/NoObservabilityCard/styles.ts diff --git a/src/components/Insights/NoObservabilityCard/types.ts b/src/components/Insights/deprecated/InsightList/NoObservabilityCard/types.ts similarity index 100% rename from src/components/Insights/NoObservabilityCard/types.ts rename to src/components/Insights/deprecated/InsightList/NoObservabilityCard/types.ts diff --git a/src/components/Insights/InsightList/index.tsx b/src/components/Insights/deprecated/InsightList/index.tsx similarity index 88% rename from src/components/Insights/InsightList/index.tsx rename to src/components/Insights/deprecated/InsightList/index.tsx index eb84889f2..772db5726 100644 --- a/src/components/Insights/InsightList/index.tsx +++ b/src/components/Insights/deprecated/InsightList/index.tsx @@ -1,44 +1,21 @@ import { useEffect, useState } from "react"; import { DefaultTheme, useTheme } from "styled-components"; -import { actions as globalActions } from "../../../actions"; -import { usePersistence } from "../../../hooks/usePersistence"; -import { trackingEvents as globalTrackingEvents } from "../../../trackingEvents"; -import { isUndefined } from "../../../typeGuards/isUndefined"; -import { ChangeScopePayload, InsightType } from "../../../types"; -import { getInsightTypeInfo } from "../../../utils/getInsightTypeInfo"; -import { getInsightTypeOrderPriority } from "../../../utils/getInsightTypeOrderPriority"; -import { sendTrackingEvent } from "../../../utils/sendTrackingEvent"; -import { Card } from "../../common/Card"; -import { Tooltip } from "../../common/Tooltip"; -import { EndpointIcon } from "../../common/icons/EndpointIcon"; -import { OpenTelemetryLogoIcon } from "../../common/icons/OpenTelemetryLogoIcon"; -import { BottleneckInsight } from "../BottleneckInsight"; -import { DurationBreakdownInsight } from "../DurationBreakdownInsight"; -import { DurationInsight } from "../DurationInsight"; -import { DurationSlowdownSourceInsight } from "../DurationSlowdownSourceInsight"; -import { EndpointNPlusOneInsight } from "../EndpointNPlusOneInsight"; -import { EndpointQueryOptimizationInsight } from "../EndpointQueryOptimizationInsight"; -import { ErrorsInsight } from "../ErrorsInsight"; -import { ExcessiveAPICallsInsight } from "../ExcessiveAPICallsInsight"; -import { HighNumberOfQueriesInsight } from "../HighNumberOfQueriesInsight"; -import { InsightCard } from "../InsightCard"; -import { ViewMode } from "../InsightsCatalog/types"; -import { NPlusOneInsight } from "../NPlusOneInsight"; -import { NoObservabilityCard } from "../NoObservabilityCard"; -import { NoScalingIssueInsight } from "../NoScalingIssueInsight"; -import { PerformanceAtScaleInsight } from "../PerformanceAtScaleInsight"; -import { QueryOptimizationInsight } from "../QueryOptimizationInsight"; -import { RequestBreakdownInsight } from "../RequestBreakdownInsight"; -import { ScalingIssueInsight } from "../ScalingIssueInsight"; -import { SessionInViewInsight } from "../SessionInViewInsight"; -import { SlowEndpointInsight } from "../SlowEndpointInsight"; -import { SpanBottleneckInsight } from "../SpanBottleneckInsight"; -import { SpanNexusInsight } from "../SpanNexusInsight"; -import { TopUsageInsight } from "../TopUsageInsight"; -import { TrafficInsight } from "../TrafficInsight"; -import { actions } from "../actions"; -import { Description } from "../styles"; -import { trackingEvents } from "../tracking"; +import { actions as globalActions } from "../../../../actions"; +import { usePersistence } from "../../../../hooks/usePersistence"; +import { trackingEvents as globalTrackingEvents } from "../../../../trackingEvents"; +import { isUndefined } from "../../../../typeGuards/isUndefined"; +import { ChangeScopePayload, InsightType } from "../../../../types"; +import { getInsightTypeInfo } from "../../../../utils/getInsightTypeInfo"; +import { getInsightTypeOrderPriority } from "../../../../utils/getInsightTypeOrderPriority"; +import { sendTrackingEvent } from "../../../../utils/sendTrackingEvent"; +import { Card } from "../../../common/Card"; +import { Tooltip } from "../../../common/Tooltip"; +import { EndpointIcon } from "../../../common/icons/EndpointIcon"; +import { OpenTelemetryLogoIcon } from "../../../common/icons/OpenTelemetryLogoIcon"; +import { ViewMode } from "../../InsightsCatalog/types"; +import { actions } from "../../actions"; +import { Description } from "../../styles"; +import { trackingEvents } from "../../tracking"; import { isChattyApiEndpointInsight, isCodeObjectErrorsInsight, @@ -67,7 +44,7 @@ import { isSpanScalingInsufficientDataInsight, isSpanScalingWellInsight, isSpanUsagesInsight -} from "../typeGuards"; +} from "../../typeGuards"; import { GenericCodeObjectInsight, GenericEndpointInsight, @@ -75,7 +52,30 @@ import { InsightGroup, MethodSpan, Trace -} from "../types"; +} from "../../types"; +import { InsightCard } from "./InsightCard"; +import { NoObservabilityCard } from "./NoObservabilityCard"; +import { BottleneckInsight } from "./insightCards/BottleneckInsight"; +import { DurationBreakdownInsight } from "./insightCards/DurationBreakdownInsight"; +import { DurationInsight } from "./insightCards/DurationInsight"; +import { DurationSlowdownSourceInsight } from "./insightCards/DurationSlowdownSourceInsight"; +import { EndpointNPlusOneInsight } from "./insightCards/EndpointNPlusOneInsight"; +import { EndpointQueryOptimizationInsight } from "./insightCards/EndpointQueryOptimizationInsight"; +import { ErrorsInsight } from "./insightCards/ErrorsInsight"; +import { ExcessiveAPICallsInsight } from "./insightCards/ExcessiveAPICallsInsight"; +import { HighNumberOfQueriesInsight } from "./insightCards/HighNumberOfQueriesInsight"; +import { NPlusOneInsight } from "./insightCards/NPlusOneInsight"; +import { NoScalingIssueInsight } from "./insightCards/NoScalingIssueInsight"; +import { PerformanceAtScaleInsight } from "./insightCards/PerformanceAtScaleInsight"; +import { QueryOptimizationInsight } from "./insightCards/QueryOptimizationInsight"; +import { RequestBreakdownInsight } from "./insightCards/RequestBreakdownInsight"; +import { ScalingIssueInsight } from "./insightCards/ScalingIssueInsight"; +import { SessionInViewInsight } from "./insightCards/SessionInViewInsight"; +import { SlowEndpointInsight } from "./insightCards/SlowEndpointInsight"; +import { SpanBottleneckInsight } from "./insightCards/SpanBottleneckInsight"; +import { SpanNexusInsight } from "./insightCards/SpanNexusInsight"; +import { TopUsageInsight } from "./insightCards/TopUsageInsight"; +import { TrafficInsight } from "./insightCards/TrafficInsight"; import * as s from "./styles"; import { InsightListProps, @@ -87,8 +87,8 @@ const getInsightToShowJiraHint = ( insightGroups: InsightGroup[] ): { groupIndex: number; insightIndex: number } | null => { const insightsWithJiraButton = [ - InsightType.EndpointSpanNPlusOne, - InsightType.SpanNPlusOne, + InsightType.EndpointSpaNPlusOne, + InsightType.SpaNPlusOne, InsightType.SpanEndpointBottleneck, InsightType.SlowestSpans, InsightType.SpanQueryOptimization, diff --git a/src/components/Insights/BottleneckInsight/BottleneckInsight.stories.tsx b/src/components/Insights/deprecated/InsightList/insightCards/BottleneckInsight/BottleneckInsight.stories.tsx similarity index 90% rename from src/components/Insights/BottleneckInsight/BottleneckInsight.stories.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/BottleneckInsight/BottleneckInsight.stories.tsx index 500e76618..ebc598855 100644 --- a/src/components/Insights/BottleneckInsight/BottleneckInsight.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/BottleneckInsight/BottleneckInsight.stories.tsx @@ -4,7 +4,7 @@ import { mockedBottleneckInsight } from "./mockData"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/BottleneckInsight", + title: "Insights/deprecated/InsightList/insightCards/BottleneckInsight", component: BottleneckInsight, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/BottleneckInsight/index.tsx b/src/components/Insights/deprecated/InsightList/insightCards/BottleneckInsight/index.tsx similarity index 85% rename from src/components/Insights/BottleneckInsight/index.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/BottleneckInsight/index.tsx index dca3e6e1a..59cdc7fb9 100644 --- a/src/components/Insights/BottleneckInsight/index.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/BottleneckInsight/index.tsx @@ -1,13 +1,13 @@ -import { getDurationString } from "../../../utils/getDurationString"; -import { roundTo } from "../../../utils/roundTo"; -import { sendTrackingEvent } from "../../../utils/sendTrackingEvent"; -import { trimEndpointScheme } from "../../../utils/trimEndpointScheme"; -import { Tooltip } from "../../common/Tooltip"; -import { InsightCard } from "../InsightCard"; +import { getDurationString } from "../../../../../../utils/getDurationString"; +import { roundTo } from "../../../../../../utils/roundTo"; +import { sendTrackingEvent } from "../../../../../../utils/sendTrackingEvent"; +import { trimEndpointScheme } from "../../../../../../utils/trimEndpointScheme"; +import { Tooltip } from "../../../../../common/Tooltip"; +import { Link } from "../../../../styles"; +import { trackingEvents } from "../../../../tracking"; +import { InsightCard } from "../../InsightCard"; import { Criticality } from "../common/Criticality"; import { JiraButton } from "../common/JiraButton"; -import { Link } from "../styles"; -import { trackingEvents } from "../tracking"; import * as s from "./styles"; import { BottleneckInsightProps } from "./types"; diff --git a/src/components/Insights/BottleneckInsight/mockData.ts b/src/components/Insights/deprecated/InsightList/insightCards/BottleneckInsight/mockData.ts similarity index 97% rename from src/components/Insights/BottleneckInsight/mockData.ts rename to src/components/Insights/deprecated/InsightList/insightCards/BottleneckInsight/mockData.ts index eeec76047..58113ec78 100644 --- a/src/components/Insights/BottleneckInsight/mockData.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/BottleneckInsight/mockData.ts @@ -1,9 +1,9 @@ -import { InsightType } from "../../../types"; +import { InsightType } from "../../../../../../types"; import { InsightCategory, InsightScope, SpanEndpointBottleneckInsight -} from "../types"; +} from "../../../../types"; export const mockedBottleneckInsight: SpanEndpointBottleneckInsight = { sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", diff --git a/src/components/Insights/BottleneckInsight/styles.ts b/src/components/Insights/deprecated/InsightList/insightCards/BottleneckInsight/styles.ts similarity index 92% rename from src/components/Insights/BottleneckInsight/styles.ts rename to src/components/Insights/deprecated/InsightList/insightCards/BottleneckInsight/styles.ts index 0159c73ee..e69b65b05 100644 --- a/src/components/Insights/BottleneckInsight/styles.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/BottleneckInsight/styles.ts @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { Description as InsightDescription } from "../styles"; +import { Description as InsightDescription } from "../../../../styles"; export const EndpointList = styled.div` display: flex; diff --git a/src/components/Insights/deprecated/InsightList/insightCards/BottleneckInsight/types.ts b/src/components/Insights/deprecated/InsightList/insightCards/BottleneckInsight/types.ts new file mode 100644 index 000000000..461ac7aab --- /dev/null +++ b/src/components/Insights/deprecated/InsightList/insightCards/BottleneckInsight/types.ts @@ -0,0 +1,11 @@ +import { InsightType } from "../../../../../../types"; +import { InsightCardCommonProps } from "../../../../InsightsCatalog/InsightsPage/insightCards/common/InsightCard/types"; +import { SpanEndpointBottleneckInsight } from "../../../../types"; + +export interface BottleneckInsightProps extends InsightCardCommonProps { + insight: SpanEndpointBottleneckInsight; + onAssetLinkClick: ( + spanCodeObjectId: string, + insightType: InsightType + ) => void; +} diff --git a/src/components/Insights/DurationBreakdownInsight/DurationBreakdownInsight.stories.tsx b/src/components/Insights/deprecated/InsightList/insightCards/DurationBreakdownInsight/DurationBreakdownInsight.stories.tsx similarity index 98% rename from src/components/Insights/DurationBreakdownInsight/DurationBreakdownInsight.stories.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/DurationBreakdownInsight/DurationBreakdownInsight.stories.tsx index 779da4860..1df6c91e1 100644 --- a/src/components/Insights/DurationBreakdownInsight/DurationBreakdownInsight.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/DurationBreakdownInsight/DurationBreakdownInsight.stories.tsx @@ -1,11 +1,12 @@ import { Meta, StoryObj } from "@storybook/react"; import { DurationBreakdownInsight } from "."; -import { InsightType } from "../../../types"; -import { InsightCategory, InsightScope } from "../types"; +import { InsightType } from "../../../../../../types"; +import { InsightCategory, InsightScope } from "../../../../types"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/DurationBreakdownInsight", + title: + "Insights/deprecated/InsightList/insightCards/DurationBreakdownInsight", component: DurationBreakdownInsight, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/DurationBreakdownInsight/index.tsx b/src/components/Insights/deprecated/InsightList/insightCards/DurationBreakdownInsight/index.tsx similarity index 86% rename from src/components/Insights/DurationBreakdownInsight/index.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/DurationBreakdownInsight/index.tsx index 03b9b30f3..6957cd740 100644 --- a/src/components/Insights/DurationBreakdownInsight/index.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/DurationBreakdownInsight/index.tsx @@ -1,12 +1,15 @@ import { useState } from "react"; -import { usePagination } from "../../../hooks/usePagination"; -import { getDurationString } from "../../../utils/getDurationString"; -import { getPercentileLabel } from "../../../utils/getPercentileLabel"; -import { Pagination } from "../../common/Pagination"; -import { Tooltip } from "../../common/Tooltip"; -import { InsightCard } from "../InsightCard"; -import { Link } from "../styles"; -import { DurationPercentile, SpanDurationBreakdownEntry } from "../types"; +import { usePagination } from "../../../../../../hooks/usePagination"; +import { getDurationString } from "../../../../../../utils/getDurationString"; +import { getPercentileLabel } from "../../../../../../utils/getPercentileLabel"; +import { Pagination } from "../../../../../common/Pagination"; +import { Tooltip } from "../../../../../common/Tooltip"; +import { Link } from "../../../../styles"; +import { + DurationPercentile, + SpanDurationBreakdownEntry +} from "../../../../types"; +import { InsightCard } from "../../InsightCard"; import * as s from "./styles"; import { DurationBreakdownInsightProps } from "./types"; diff --git a/src/components/Insights/DurationBreakdownInsight/styles.ts b/src/components/Insights/deprecated/InsightList/insightCards/DurationBreakdownInsight/styles.ts similarity index 100% rename from src/components/Insights/DurationBreakdownInsight/styles.ts rename to src/components/Insights/deprecated/InsightList/insightCards/DurationBreakdownInsight/styles.ts diff --git a/src/components/Insights/deprecated/InsightList/insightCards/DurationBreakdownInsight/types.ts b/src/components/Insights/deprecated/InsightList/insightCards/DurationBreakdownInsight/types.ts new file mode 100644 index 000000000..e78944cf0 --- /dev/null +++ b/src/components/Insights/deprecated/InsightList/insightCards/DurationBreakdownInsight/types.ts @@ -0,0 +1,11 @@ +import { InsightType } from "../../../../../../types"; +import { InsightCardCommonProps } from "../../../../InsightsCatalog/InsightsPage/insightCards/common/InsightCard/types"; +import { SpanDurationBreakdownInsight } from "../../../../types"; + +export interface DurationBreakdownInsightProps extends InsightCardCommonProps { + insight: SpanDurationBreakdownInsight; + onAssetLinkClick: ( + spanCodeObjectId: string, + insightType: InsightType + ) => void; +} diff --git a/src/components/Insights/DurationInsight/DurationInsight.stories.tsx b/src/components/Insights/deprecated/InsightList/insightCards/DurationInsight/DurationInsight.stories.tsx similarity index 99% rename from src/components/Insights/DurationInsight/DurationInsight.stories.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/DurationInsight/DurationInsight.stories.tsx index 1c8904a5d..7eaa8e45f 100644 --- a/src/components/Insights/DurationInsight/DurationInsight.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/DurationInsight/DurationInsight.stories.tsx @@ -1,11 +1,11 @@ import { Meta, StoryObj } from "@storybook/react"; import { DurationInsight } from "."; -import { InsightType } from "../../../types"; -import { InsightCategory, InsightScope } from "../types"; +import { InsightType } from "../../../../../../types"; +import { InsightCategory, InsightScope } from "../../../../types"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/DurationInsight", + title: "Insights/deprecated/InsightList/insightCards/DurationInsight", component: DurationInsight, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/DurationInsight/ReferenceLineLabel/index.tsx b/src/components/Insights/deprecated/InsightList/insightCards/DurationInsight/ReferenceLineLabel/index.tsx similarity index 89% rename from src/components/Insights/DurationInsight/ReferenceLineLabel/index.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/DurationInsight/ReferenceLineLabel/index.tsx index 7e8164117..3046e9655 100644 --- a/src/components/Insights/DurationInsight/ReferenceLineLabel/index.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/DurationInsight/ReferenceLineLabel/index.tsx @@ -1,7 +1,7 @@ import { Text } from "recharts"; import { CartesianViewBox } from "recharts/types/util/types"; -import { isNumber } from "../../../../typeGuards/isNumber"; -import { isString } from "../../../../typeGuards/isString"; +import { isNumber } from "../../../../../../../typeGuards/isNumber"; +import { isString } from "../../../../../../../typeGuards/isString"; import { DIVIDER, LABEL_HEIGHT } from "../constants"; import { ReferenceLineLabelProps } from "./types"; diff --git a/src/components/Insights/common/insights/DurationInsight/ReferenceLineLabel/types.ts b/src/components/Insights/deprecated/InsightList/insightCards/DurationInsight/ReferenceLineLabel/types.ts similarity index 100% rename from src/components/Insights/common/insights/DurationInsight/ReferenceLineLabel/types.ts rename to src/components/Insights/deprecated/InsightList/insightCards/DurationInsight/ReferenceLineLabel/types.ts diff --git a/src/components/Insights/DurationInsight/XAxisTick/index.tsx b/src/components/Insights/deprecated/InsightList/insightCards/DurationInsight/XAxisTick/index.tsx similarity index 100% rename from src/components/Insights/DurationInsight/XAxisTick/index.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/DurationInsight/XAxisTick/index.tsx diff --git a/src/components/Insights/common/insights/DurationInsight/XAxisTick/types.ts b/src/components/Insights/deprecated/InsightList/insightCards/DurationInsight/XAxisTick/types.ts similarity index 100% rename from src/components/Insights/common/insights/DurationInsight/XAxisTick/types.ts rename to src/components/Insights/deprecated/InsightList/insightCards/DurationInsight/XAxisTick/types.ts diff --git a/src/components/Insights/DurationInsight/constants.ts b/src/components/Insights/deprecated/InsightList/insightCards/DurationInsight/constants.ts similarity index 100% rename from src/components/Insights/DurationInsight/constants.ts rename to src/components/Insights/deprecated/InsightList/insightCards/DurationInsight/constants.ts diff --git a/src/components/Insights/DurationInsight/index.tsx b/src/components/Insights/deprecated/InsightList/insightCards/DurationInsight/index.tsx similarity index 93% rename from src/components/Insights/DurationInsight/index.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/DurationInsight/index.tsx index dfa112674..d93ba79dc 100644 --- a/src/components/Insights/DurationInsight/index.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/DurationInsight/index.tsx @@ -9,20 +9,24 @@ import { XAxis } from "recharts"; import { DefaultTheme, useTheme } from "styled-components"; -import { Duration } from "../../../globals"; -import { isNumber } from "../../../typeGuards/isNumber"; -import { convertToDuration } from "../../../utils/convertToDuration"; -import { formatTimeDistance } from "../../../utils/formatTimeDistance"; -import { getDurationString } from "../../../utils/getDurationString"; -import { getPercentileLabel } from "../../../utils/getPercentileLabel"; -import { Button } from "../../common/Button"; -import { Tooltip as CommonTooltip } from "../../common/Tooltip"; -import { ChartIcon } from "../../common/icons/ChartIcon"; -import { DoubleCircleIcon } from "../../common/icons/DoubleCircleIcon"; -import { DurationChange, isChangeMeaningfulEnough } from "../DurationChange"; -import { InsightCard } from "../InsightCard"; -import { Description } from "../styles"; -import { HistogramBarData, NormalizedHistogramBarData, Trace } from "../types"; +import { Duration } from "../../../../../../globals"; +import { isNumber } from "../../../../../../typeGuards/isNumber"; +import { convertToDuration } from "../../../../../../utils/convertToDuration"; +import { formatTimeDistance } from "../../../../../../utils/formatTimeDistance"; +import { getDurationString } from "../../../../../../utils/getDurationString"; +import { getPercentileLabel } from "../../../../../../utils/getPercentileLabel"; +import { Button } from "../../../../../common/Button"; +import { Tooltip as CommonTooltip } from "../../../../../common/Tooltip"; +import { ChartIcon } from "../../../../../common/icons/ChartIcon"; +import { DoubleCircleIcon } from "../../../../../common/icons/DoubleCircleIcon"; +import { Description } from "../../../../styles"; +import { + HistogramBarData, + NormalizedHistogramBarData, + Trace +} from "../../../../types"; +import { DurationChange, isChangeMeaningfulEnough } from "../../DurationChange"; +import { InsightCard } from "../../InsightCard"; import { ReferenceLineLabel } from "./ReferenceLineLabel"; import { XAxisTick } from "./XAxisTick"; import { DIVIDER } from "./constants"; diff --git a/src/components/Insights/DurationInsight/styles.ts b/src/components/Insights/deprecated/InsightList/insightCards/DurationInsight/styles.ts similarity index 96% rename from src/components/Insights/DurationInsight/styles.ts rename to src/components/Insights/deprecated/InsightList/insightCards/DurationInsight/styles.ts index 08a984e79..41e03d635 100644 --- a/src/components/Insights/DurationInsight/styles.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/DurationInsight/styles.ts @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { Description } from "../styles"; +import { Description } from "../../../../styles"; import { ChartContainerProps, LastCallTimeDistanceProps } from "./types"; export const Container = styled.div` diff --git a/src/components/Insights/common/insights/DurationInsight/types.ts b/src/components/Insights/deprecated/InsightList/insightCards/DurationInsight/types.ts similarity index 66% rename from src/components/Insights/common/insights/DurationInsight/types.ts rename to src/components/Insights/deprecated/InsightList/insightCards/DurationInsight/types.ts index 3af369768..afcb0038d 100644 --- a/src/components/Insights/common/insights/DurationInsight/types.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/DurationInsight/types.ts @@ -1,11 +1,8 @@ -import { - InsightProps, - InsightType, - SpanDurationsInsight, - Trace -} from "../../../types"; +import { InsightType } from "../../../../../../types"; +import { InsightCardCommonProps } from "../../../../InsightsCatalog/InsightsPage/insightCards/common/InsightCard/types"; +import { SpanDurationsInsight, Trace } from "../../../../types"; -export interface DurationInsightProps extends InsightProps { +export interface DurationInsightProps extends InsightCardCommonProps { insight: SpanDurationsInsight; onHistogramButtonClick: ( instrumentationLibrary: string, diff --git a/src/components/Insights/DurationSlowdownSourceInsight/DurationSlowdownSourceInsight.stories.tsx b/src/components/Insights/deprecated/InsightList/insightCards/DurationSlowdownSourceInsight/DurationSlowdownSourceInsight.stories.tsx similarity index 95% rename from src/components/Insights/DurationSlowdownSourceInsight/DurationSlowdownSourceInsight.stories.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/DurationSlowdownSourceInsight/DurationSlowdownSourceInsight.stories.tsx index 6a473e62b..93231b891 100644 --- a/src/components/Insights/DurationSlowdownSourceInsight/DurationSlowdownSourceInsight.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/DurationSlowdownSourceInsight/DurationSlowdownSourceInsight.stories.tsx @@ -1,11 +1,12 @@ import { Meta, StoryObj } from "@storybook/react"; import { DurationSlowdownSourceInsight } from "."; -import { InsightType } from "../../../types"; -import { InsightCategory, InsightScope } from "../types"; +import { InsightType } from "../../../../../../types"; +import { InsightCategory, InsightScope } from "../../../../types"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/DurationSlowdownSourceInsight", + title: + "Insights/deprecated/InsightList/insightCards/DurationSlowdownSourceInsight", component: DurationSlowdownSourceInsight, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/DurationSlowdownSourceInsight/index.tsx b/src/components/Insights/deprecated/InsightList/insightCards/DurationSlowdownSourceInsight/index.tsx similarity index 88% rename from src/components/Insights/DurationSlowdownSourceInsight/index.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/DurationSlowdownSourceInsight/index.tsx index 489e410e1..ac08e47a8 100644 --- a/src/components/Insights/DurationSlowdownSourceInsight/index.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/DurationSlowdownSourceInsight/index.tsx @@ -1,8 +1,8 @@ -import { Tooltip } from "../../common/Tooltip"; -import { DurationChange } from "../DurationChange"; -import { InsightCard } from "../InsightCard"; -import { Description, Link } from "../styles"; -import { DurationSlowdownSource } from "../types"; +import { Tooltip } from "../../../../../common/Tooltip"; +import { Description, Link } from "../../../../styles"; +import { DurationSlowdownSource } from "../../../../types"; +import { DurationChange } from "../../DurationChange"; +import { InsightCard } from "../../InsightCard"; import * as s from "./styles"; import { DurationSlowdownSourceInsightProps } from "./types"; diff --git a/src/components/Insights/DurationSlowdownSourceInsight/styles.ts b/src/components/Insights/deprecated/InsightList/insightCards/DurationSlowdownSourceInsight/styles.ts similarity index 100% rename from src/components/Insights/DurationSlowdownSourceInsight/styles.ts rename to src/components/Insights/deprecated/InsightList/insightCards/DurationSlowdownSourceInsight/styles.ts diff --git a/src/components/Insights/deprecated/InsightList/insightCards/DurationSlowdownSourceInsight/types.ts b/src/components/Insights/deprecated/InsightList/insightCards/DurationSlowdownSourceInsight/types.ts new file mode 100644 index 000000000..2c04f078e --- /dev/null +++ b/src/components/Insights/deprecated/InsightList/insightCards/DurationSlowdownSourceInsight/types.ts @@ -0,0 +1,12 @@ +import { InsightType } from "../../../../../../types"; +import { InsightCardCommonProps } from "../../../../InsightsCatalog/InsightsPage/insightCards/common/InsightCard/types"; +import { EndpointDurationSlowdownInsight } from "../../../../types"; + +export interface DurationSlowdownSourceInsightProps + extends InsightCardCommonProps { + insight: EndpointDurationSlowdownInsight; + onAssetLinkClick: ( + spanCodeObjectId: string, + insightType: InsightType + ) => void; +} diff --git a/src/components/Insights/common/insights/EndpointNPlusOneInsight/EndpointNPlusOneInsight.stories.tsx b/src/components/Insights/deprecated/InsightList/insightCards/EndpointNPlusOneInsight/EndpointNPlusOneInsight.stories.tsx similarity index 88% rename from src/components/Insights/common/insights/EndpointNPlusOneInsight/EndpointNPlusOneInsight.stories.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/EndpointNPlusOneInsight/EndpointNPlusOneInsight.stories.tsx index 201adf1b1..abbe447aa 100644 --- a/src/components/Insights/common/insights/EndpointNPlusOneInsight/EndpointNPlusOneInsight.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/EndpointNPlusOneInsight/EndpointNPlusOneInsight.stories.tsx @@ -4,7 +4,7 @@ import { mockedEndpointNPlusOneInsight } from "./mockData"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/common/insights/EndpointNPlusOneInsight", + title: "Insights/deprecated/InsightList/insightCards/EndpointNPlusOneInsight", component: EndpointNPlusOneInsight, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/EndpointNPlusOneInsight/index.tsx b/src/components/Insights/deprecated/InsightList/insightCards/EndpointNPlusOneInsight/index.tsx similarity index 84% rename from src/components/Insights/EndpointNPlusOneInsight/index.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/EndpointNPlusOneInsight/index.tsx index f81140697..9b10e4e68 100644 --- a/src/components/Insights/EndpointNPlusOneInsight/index.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/EndpointNPlusOneInsight/index.tsx @@ -1,20 +1,20 @@ import { useContext } from "react"; -import { usePagination } from "../../../hooks/usePagination"; -import { InsightType } from "../../../types"; -import { getDurationString } from "../../../utils/getDurationString"; -import { roundTo } from "../../../utils/roundTo"; -import { sendTrackingEvent } from "../../../utils/sendTrackingEvent"; -import { ConfigContext } from "../../common/App/ConfigContext"; -import { Button } from "../../common/Button"; -import { Pagination } from "../../common/Pagination"; -import { Tooltip } from "../../common/Tooltip"; -import { CrosshairIcon } from "../../common/icons/CrosshairIcon"; -import { InsightCard } from "../InsightCard"; +import { usePagination } from "../../../../../../hooks/usePagination"; +import { InsightType } from "../../../../../../types"; +import { getDurationString } from "../../../../../../utils/getDurationString"; +import { roundTo } from "../../../../../../utils/roundTo"; +import { sendTrackingEvent } from "../../../../../../utils/sendTrackingEvent"; +import { ConfigContext } from "../../../../../common/App/ConfigContext"; +import { Button } from "../../../../../common/Button"; +import { Pagination } from "../../../../../common/Pagination"; +import { Tooltip } from "../../../../../common/Tooltip"; +import { CrosshairIcon } from "../../../../../common/icons/CrosshairIcon"; +import { Description, Link } from "../../../../styles"; +import { trackingEvents } from "../../../../tracking"; +import { Trace } from "../../../../types"; +import { InsightCard } from "../../InsightCard"; import { Criticality } from "../common/Criticality"; import { JiraButton } from "../common/JiraButton"; -import { Description, Link } from "../styles"; -import { trackingEvents } from "../tracking"; -import { Trace } from "../types"; import * as s from "./styles"; import { EndpointNPlusOneInsightProps } from "./types"; diff --git a/src/components/Insights/EndpointNPlusOneInsight/mockData.ts b/src/components/Insights/deprecated/InsightList/insightCards/EndpointNPlusOneInsight/mockData.ts similarity index 96% rename from src/components/Insights/EndpointNPlusOneInsight/mockData.ts rename to src/components/Insights/deprecated/InsightList/insightCards/EndpointNPlusOneInsight/mockData.ts index 554a82871..49d8023e6 100644 --- a/src/components/Insights/EndpointNPlusOneInsight/mockData.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/EndpointNPlusOneInsight/mockData.ts @@ -1,10 +1,10 @@ -import { InsightType } from "../../../types"; +import { InsightType } from "../../../../../../types"; import { EndpointSuspectedNPlusOneInsight, InsightCategory, InsightScope, InsightStatus -} from "../types"; +} from "../../../../types"; export const mockedEndpointNPlusOneInsight: EndpointSuspectedNPlusOneInsight = { sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", @@ -19,7 +19,7 @@ export const mockedEndpointNPlusOneInsight: EndpointSuspectedNPlusOneInsight = { ticketLink: null, impact: 0, name: "Suspected N+1 Query", - type: InsightType.EndpointSpanNPlusOne, + type: InsightType.EndpointSpaNPlusOne, category: InsightCategory.Performance, specifity: 2, importance: 3, diff --git a/src/components/Insights/EndpointNPlusOneInsight/styles.ts b/src/components/Insights/deprecated/InsightList/insightCards/EndpointNPlusOneInsight/styles.ts similarity index 100% rename from src/components/Insights/EndpointNPlusOneInsight/styles.ts rename to src/components/Insights/deprecated/InsightList/insightCards/EndpointNPlusOneInsight/styles.ts diff --git a/src/components/Insights/deprecated/InsightList/insightCards/EndpointNPlusOneInsight/types.ts b/src/components/Insights/deprecated/InsightList/insightCards/EndpointNPlusOneInsight/types.ts new file mode 100644 index 000000000..c5a286d89 --- /dev/null +++ b/src/components/Insights/deprecated/InsightList/insightCards/EndpointNPlusOneInsight/types.ts @@ -0,0 +1,16 @@ +import { InsightType } from "../../../../../../types"; +import { InsightCardCommonProps } from "../../../../InsightsCatalog/InsightsPage/insightCards/common/InsightCard/types"; +import { EndpointSuspectedNPlusOneInsight, Trace } from "../../../../types"; + +export interface EndpointNPlusOneInsightProps extends InsightCardCommonProps { + insight: EndpointSuspectedNPlusOneInsight; + onAssetLinkClick: ( + spanCodeObjectId: string, + insightType: InsightType + ) => void; + onTraceButtonClick: ( + trace: Trace, + insightType: InsightType, + spanCodeObjectId: string + ) => void; +} diff --git a/src/components/Insights/EndpointQueryOptimizationInsight/EndpointQueryOptimizationInsight.stories.tsx b/src/components/Insights/deprecated/InsightList/insightCards/EndpointQueryOptimizationInsight/EndpointQueryOptimizationInsight.stories.tsx similarity index 88% rename from src/components/Insights/EndpointQueryOptimizationInsight/EndpointQueryOptimizationInsight.stories.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/EndpointQueryOptimizationInsight/EndpointQueryOptimizationInsight.stories.tsx index 3a9265d28..4b41033eb 100644 --- a/src/components/Insights/EndpointQueryOptimizationInsight/EndpointQueryOptimizationInsight.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/EndpointQueryOptimizationInsight/EndpointQueryOptimizationInsight.stories.tsx @@ -4,7 +4,8 @@ import { mockedEndpointQueryOptimizationInsight } from "./mockData"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/EndpointQueryOptimizationInsight", + title: + "Insights/deprecated/InsightList/insightCards/EndpointQueryOptimizationInsight", component: EndpointQueryOptimizationInsight, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/EndpointQueryOptimizationInsight/index.tsx b/src/components/Insights/deprecated/InsightList/insightCards/EndpointQueryOptimizationInsight/index.tsx similarity index 83% rename from src/components/Insights/EndpointQueryOptimizationInsight/index.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/EndpointQueryOptimizationInsight/index.tsx index 796f59a67..040a87a9c 100644 --- a/src/components/Insights/EndpointQueryOptimizationInsight/index.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/EndpointQueryOptimizationInsight/index.tsx @@ -1,19 +1,19 @@ import { useContext } from "react"; -import { usePagination } from "../../../hooks/usePagination"; -import { InsightType } from "../../../types"; -import { getDurationString } from "../../../utils/getDurationString"; -import { sendTrackingEvent } from "../../../utils/sendTrackingEvent"; -import { ConfigContext } from "../../common/App/ConfigContext"; -import { Button } from "../../common/Button"; -import { Pagination } from "../../common/Pagination"; -import { Tooltip } from "../../common/Tooltip"; -import { CrosshairIcon } from "../../common/icons/CrosshairIcon"; -import { InsightCard } from "../InsightCard"; +import { usePagination } from "../../../../../../hooks/usePagination"; +import { InsightType } from "../../../../../../types"; +import { getDurationString } from "../../../../../../utils/getDurationString"; +import { sendTrackingEvent } from "../../../../../../utils/sendTrackingEvent"; +import { ConfigContext } from "../../../../../common/App/ConfigContext"; +import { Button } from "../../../../../common/Button"; +import { Pagination } from "../../../../../common/Pagination"; +import { Tooltip } from "../../../../../common/Tooltip"; +import { CrosshairIcon } from "../../../../../common/icons/CrosshairIcon"; +import { Description, Link } from "../../../../styles"; +import { trackingEvents } from "../../../../tracking"; +import { Trace } from "../../../../types"; +import { InsightCard } from "../../InsightCard"; import { Criticality } from "../common/Criticality"; import { JiraButton } from "../common/JiraButton"; -import { Description, Link } from "../styles"; -import { trackingEvents } from "../tracking"; -import { Trace } from "../types"; import * as s from "./styles"; import { EndpointQueryOptimizationInsightProps } from "./types"; diff --git a/src/components/Insights/EndpointQueryOptimizationInsight/mockData.ts b/src/components/Insights/deprecated/InsightList/insightCards/EndpointQueryOptimizationInsight/mockData.ts similarity index 97% rename from src/components/Insights/EndpointQueryOptimizationInsight/mockData.ts rename to src/components/Insights/deprecated/InsightList/insightCards/EndpointQueryOptimizationInsight/mockData.ts index 3bce4c02f..cdef3be69 100644 --- a/src/components/Insights/EndpointQueryOptimizationInsight/mockData.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/EndpointQueryOptimizationInsight/mockData.ts @@ -1,9 +1,9 @@ -import { InsightType } from "../../../types"; +import { InsightType } from "../../../../../../types"; import { EndpointQueryOptimizationInsight, InsightCategory, InsightScope -} from "../types"; +} from "../../../../types"; export const mockedEndpointQueryOptimizationInsight: EndpointQueryOptimizationInsight = { diff --git a/src/components/Insights/EndpointQueryOptimizationInsight/styles.ts b/src/components/Insights/deprecated/InsightList/insightCards/EndpointQueryOptimizationInsight/styles.ts similarity index 100% rename from src/components/Insights/EndpointQueryOptimizationInsight/styles.ts rename to src/components/Insights/deprecated/InsightList/insightCards/EndpointQueryOptimizationInsight/styles.ts diff --git a/src/components/Insights/deprecated/InsightList/insightCards/EndpointQueryOptimizationInsight/types.ts b/src/components/Insights/deprecated/InsightList/insightCards/EndpointQueryOptimizationInsight/types.ts new file mode 100644 index 000000000..c58f92685 --- /dev/null +++ b/src/components/Insights/deprecated/InsightList/insightCards/EndpointQueryOptimizationInsight/types.ts @@ -0,0 +1,17 @@ +import { InsightType } from "../../../../../../types"; +import { InsightCardCommonProps } from "../../../../InsightsCatalog/InsightsPage/insightCards/common/InsightCard/types"; +import { EndpointQueryOptimizationInsight, Trace } from "../../../../types"; + +export interface EndpointQueryOptimizationInsightProps + extends InsightCardCommonProps { + insight: EndpointQueryOptimizationInsight; + onAssetLinkClick: ( + spanCodeObjectId: string, + insightType: InsightType + ) => void; + onTraceButtonClick: ( + trace: Trace, + insightType: InsightType, + spanCodeObjectId: string + ) => void; +} diff --git a/src/components/Insights/ErrorsInsight/ErrorsInsight.stories.tsx b/src/components/Insights/deprecated/InsightList/insightCards/ErrorsInsight/ErrorsInsight.stories.tsx similarity index 93% rename from src/components/Insights/ErrorsInsight/ErrorsInsight.stories.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/ErrorsInsight/ErrorsInsight.stories.tsx index 74ee68520..59ad54ed6 100644 --- a/src/components/Insights/ErrorsInsight/ErrorsInsight.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/ErrorsInsight/ErrorsInsight.stories.tsx @@ -1,11 +1,11 @@ import { Meta, StoryObj } from "@storybook/react"; import { ErrorsInsight } from "."; -import { InsightType } from "../../../types"; -import { InsightCategory, InsightScope } from "../types"; +import { InsightType } from "../../../../../../types"; +import { InsightCategory, InsightScope } from "../../../../types"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/ErrorsInsight", + title: "Insights/deprecated/InsightList/insightCards/ErrorsInsight", component: ErrorsInsight, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/ErrorsInsight/index.tsx b/src/components/Insights/deprecated/InsightList/insightCards/ErrorsInsight/index.tsx similarity index 90% rename from src/components/Insights/ErrorsInsight/index.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/ErrorsInsight/index.tsx index 91f9296f9..584f8cda3 100644 --- a/src/components/Insights/ErrorsInsight/index.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/ErrorsInsight/index.tsx @@ -1,6 +1,6 @@ -import { Button } from "../../common/Button"; -import { InsightCard } from "../InsightCard"; -import { Description, Link } from "../styles"; +import { Button } from "../../../../../common/Button"; +import { Description, Link } from "../../../../styles"; +import { InsightCard } from "../../InsightCard"; import * as s from "./styles"; import { ErrorsInsightProps } from "./types"; diff --git a/src/components/Insights/deprecated/InsightList/insightCards/ErrorsInsight/mockData.ts b/src/components/Insights/deprecated/InsightList/insightCards/ErrorsInsight/mockData.ts new file mode 100644 index 000000000..4e8c43a46 --- /dev/null +++ b/src/components/Insights/deprecated/InsightList/insightCards/ErrorsInsight/mockData.ts @@ -0,0 +1,65 @@ +import { + CodeObjectErrorsInsight, + InsightCategory, + InsightScope, + InsightType +} from "../../../../types"; + +export const mockedErrorsInsight: CodeObjectErrorsInsight = { + sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", + id: "60b55792-3262-4c5d-9628-7cce7979ad6d", + 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: "Errors", + type: InsightType.Errors, + scope: InsightScope.Function, + category: InsightCategory.Errors, + specifity: 4, + importance: 5, + errorCount: 2, + unhandledCount: 0, + unexpectedCount: 0, + topErrors: [ + { + uid: "305f52ec-1428-11ee-a28c-0242ac170004", + codeObjectId: + "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", + errorType: "System.NullReferenceException", + sourceCodeObjectId: + "method:Sample.MoneyTransfer.API.Domain.Services.MoneyTransferDomainService$_$ValidateAccountFunds(Account,Int32)" + }, + { + uid: "29dbdf80-1428-11ee-b389-0242ac170004", + codeObjectId: + "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", + errorType: "System.Exception", + sourceCodeObjectId: + "method:Sample.MoneyTransfer.API.Domain.Services.MoneyTransferDomainService$_$TransferFunds(Int64,Int64,Int32)" + } + ], + shortDisplayInfo: { + title: "", + targetDisplayName: "", + subtitle: "", + description: "" + }, + codeObjectId: + "Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", + decorators: null, + environment: "BOB-LAPTOP[LOCAL]", + severity: 0, + isRecalculateEnabled: false, + prefixedCodeObjectId: + "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", + customStartTime: null, + actualStartTime: "2023-06-26T13:53:53.645Z", + isDismissed: false, + isDismissible: true +}; diff --git a/src/components/Insights/ErrorsInsight/styles.ts b/src/components/Insights/deprecated/InsightList/insightCards/ErrorsInsight/styles.ts similarity index 100% rename from src/components/Insights/ErrorsInsight/styles.ts rename to src/components/Insights/deprecated/InsightList/insightCards/ErrorsInsight/styles.ts diff --git a/src/components/Insights/deprecated/InsightList/insightCards/ErrorsInsight/types.ts b/src/components/Insights/deprecated/InsightList/insightCards/ErrorsInsight/types.ts new file mode 100644 index 000000000..85a070280 --- /dev/null +++ b/src/components/Insights/deprecated/InsightList/insightCards/ErrorsInsight/types.ts @@ -0,0 +1,9 @@ +import { InsightType } from "../../../../../../types"; +import { InsightCardCommonProps } from "../../../../InsightsCatalog/InsightsPage/insightCards/common/InsightCard/types"; +import { CodeObjectErrorsInsight } from "../../../../types"; + +export interface ErrorsInsightProps extends InsightCardCommonProps { + insight: CodeObjectErrorsInsight; + onErrorSelect: (id: string, insightType: InsightType) => void; + onExpandButtonClick: () => void; +} diff --git a/src/components/Insights/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx b/src/components/Insights/deprecated/InsightList/insightCards/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx similarity index 94% rename from src/components/Insights/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx index d296dca82..b39eb4f80 100644 --- a/src/components/Insights/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx @@ -1,11 +1,12 @@ import { Meta, StoryObj } from "@storybook/react"; import { ExcessiveAPICallsInsight } from "."; -import { InsightType } from "../../../types"; -import { InsightCategory, InsightScope } from "../types"; +import { InsightType } from "../../../../../../types"; +import { InsightCategory, InsightScope } from "../../../../types"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/ExcessiveAPICallsInsight", + title: + "Insights/deprecated/InsightList/insightCards/ExcessiveAPICallsInsight", component: ExcessiveAPICallsInsight, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/ExcessiveAPICallsInsight/index.tsx b/src/components/Insights/deprecated/InsightList/insightCards/ExcessiveAPICallsInsight/index.tsx similarity index 83% rename from src/components/Insights/ExcessiveAPICallsInsight/index.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/ExcessiveAPICallsInsight/index.tsx index e26d2aa8f..330768a6a 100644 --- a/src/components/Insights/ExcessiveAPICallsInsight/index.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/ExcessiveAPICallsInsight/index.tsx @@ -1,14 +1,14 @@ import { useContext } from "react"; -import { usePagination } from "../../../hooks/usePagination"; -import { InsightType } from "../../../types"; -import { ConfigContext } from "../../common/App/ConfigContext"; -import { Pagination } from "../../common/Pagination"; -import { Tooltip } from "../../common/Tooltip"; -import { CrosshairIcon } from "../../common/icons/CrosshairIcon"; -import { InsightCard } from "../InsightCard"; +import { usePagination } from "../../../../../../hooks/usePagination"; +import { InsightType } from "../../../../../../types"; +import { ConfigContext } from "../../../../../common/App/ConfigContext"; +import { Pagination } from "../../../../../common/Pagination"; +import { Tooltip } from "../../../../../common/Tooltip"; +import { CrosshairIcon } from "../../../../../common/icons/CrosshairIcon"; +import { Description, Link } from "../../../../styles"; +import { Trace } from "../../../../types"; +import { InsightCard } from "../../InsightCard"; import { Criticality } from "../common/Criticality"; -import { Description, Link } from "../styles"; -import { Trace } from "../types"; import * as s from "./styles"; import { ExcessiveAPICallsInsightProps } from "./types"; diff --git a/src/components/Insights/SessionInViewInsight/styles.ts b/src/components/Insights/deprecated/InsightList/insightCards/ExcessiveAPICallsInsight/styles.ts similarity index 88% rename from src/components/Insights/SessionInViewInsight/styles.ts rename to src/components/Insights/deprecated/InsightList/insightCards/ExcessiveAPICallsInsight/styles.ts index 7cde7aba9..481e7b15a 100644 --- a/src/components/Insights/SessionInViewInsight/styles.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/ExcessiveAPICallsInsight/styles.ts @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { Button as CommonButton } from "../../common/Button"; +import { Button as CommonButton } from "../../../../../common/Button"; export const ContentContainer = styled.div` display: flex; diff --git a/src/components/Insights/deprecated/InsightList/insightCards/ExcessiveAPICallsInsight/types.ts b/src/components/Insights/deprecated/InsightList/insightCards/ExcessiveAPICallsInsight/types.ts new file mode 100644 index 000000000..899a1b34f --- /dev/null +++ b/src/components/Insights/deprecated/InsightList/insightCards/ExcessiveAPICallsInsight/types.ts @@ -0,0 +1,16 @@ +import { InsightType } from "../../../../../../types"; +import { InsightCardCommonProps } from "../../../../InsightsCatalog/InsightsPage/insightCards/common/InsightCard/types"; +import { EndpointChattyApiInsight, Trace } from "../../../../types"; + +export interface ExcessiveAPICallsInsightProps extends InsightCardCommonProps { + insight: EndpointChattyApiInsight; + onAssetLinkClick: ( + spanCodeObjectId: string, + insightType: InsightType + ) => void; + onTraceButtonClick: ( + trace: Trace, + insightType: InsightType, + spanCodeObjectId: string + ) => void; +} diff --git a/src/components/Insights/HighNumberOfQueriesInsight/HighNumberOfQueriesInsight.stories.tsx b/src/components/Insights/deprecated/InsightList/insightCards/HighNumberOfQueriesInsight/HighNumberOfQueriesInsight.stories.tsx similarity index 88% rename from src/components/Insights/HighNumberOfQueriesInsight/HighNumberOfQueriesInsight.stories.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/HighNumberOfQueriesInsight/HighNumberOfQueriesInsight.stories.tsx index bc4b370c4..8e75a8f05 100644 --- a/src/components/Insights/HighNumberOfQueriesInsight/HighNumberOfQueriesInsight.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/HighNumberOfQueriesInsight/HighNumberOfQueriesInsight.stories.tsx @@ -4,7 +4,8 @@ import { mockedHighNumberOfQueriesInsight } from "./mockData"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/HighNumberOfQueriesInsight", + title: + "Insights/deprecated/InsightList/insightCards/HighNumberOfQueriesInsight", component: HighNumberOfQueriesInsight, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/HighNumberOfQueriesInsight/index.tsx b/src/components/Insights/deprecated/InsightList/insightCards/HighNumberOfQueriesInsight/index.tsx similarity index 83% rename from src/components/Insights/HighNumberOfQueriesInsight/index.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/HighNumberOfQueriesInsight/index.tsx index 112ecb782..a3947fe68 100644 --- a/src/components/Insights/HighNumberOfQueriesInsight/index.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/HighNumberOfQueriesInsight/index.tsx @@ -1,16 +1,16 @@ -import { InsightType } from "../../../types"; -import { sendTrackingEvent } from "../../../utils/sendTrackingEvent"; -import { Button } from "../../common/Button"; -import { Tag } from "../../common/Tag"; -import { Tooltip } from "../../common/Tooltip"; -import { CrosshairIcon } from "../../common/icons/CrosshairIcon"; -import { InfoCircleIcon } from "../../common/icons/InfoCircleIcon"; -import { InsightCard } from "../InsightCard"; +import { InsightType } from "../../../../../../types"; +import { sendTrackingEvent } from "../../../../../../utils/sendTrackingEvent"; +import { Button } from "../../../../../common/Button"; +import { Tag } from "../../../../../common/Tag"; +import { Tooltip } from "../../../../../common/Tooltip"; +import { CrosshairIcon } from "../../../../../common/icons/CrosshairIcon"; +import { InfoCircleIcon } from "../../../../../common/icons/InfoCircleIcon"; +import { Description } from "../../../../styles"; +import { trackingEvents } from "../../../../tracking"; +import { Trace } from "../../../../types"; +import { InsightCard } from "../../InsightCard"; import { Criticality } from "../common/Criticality"; import { JiraButton } from "../common/JiraButton"; -import { Description } from "../styles"; -import { trackingEvents } from "../tracking"; -import { Trace } from "../types"; import * as s from "./styles"; import { HighNumberOfQueriesInsightProps } from "./types"; diff --git a/src/components/Insights/HighNumberOfQueriesInsight/mockData.ts b/src/components/Insights/deprecated/InsightList/insightCards/HighNumberOfQueriesInsight/mockData.ts similarity index 96% rename from src/components/Insights/HighNumberOfQueriesInsight/mockData.ts rename to src/components/Insights/deprecated/InsightList/insightCards/HighNumberOfQueriesInsight/mockData.ts index b92dea23a..f42ba6f8e 100644 --- a/src/components/Insights/HighNumberOfQueriesInsight/mockData.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/HighNumberOfQueriesInsight/mockData.ts @@ -1,9 +1,9 @@ -import { InsightType } from "../../../types"; +import { InsightType } from "../../../../../../types"; import { EndpointHighNumberOfQueriesInsight, InsightCategory, InsightScope -} from "../types"; +} from "../../../../types"; export const mockedHighNumberOfQueriesInsight: EndpointHighNumberOfQueriesInsight = { diff --git a/src/components/Insights/HighNumberOfQueriesInsight/styles.ts b/src/components/Insights/deprecated/InsightList/insightCards/HighNumberOfQueriesInsight/styles.ts similarity index 100% rename from src/components/Insights/HighNumberOfQueriesInsight/styles.ts rename to src/components/Insights/deprecated/InsightList/insightCards/HighNumberOfQueriesInsight/styles.ts diff --git a/src/components/Insights/deprecated/InsightList/insightCards/HighNumberOfQueriesInsight/types.ts b/src/components/Insights/deprecated/InsightList/insightCards/HighNumberOfQueriesInsight/types.ts new file mode 100644 index 000000000..3ad8cc583 --- /dev/null +++ b/src/components/Insights/deprecated/InsightList/insightCards/HighNumberOfQueriesInsight/types.ts @@ -0,0 +1,13 @@ +import { InsightType } from "../../../../../../types"; +import { InsightCardCommonProps } from "../../../../InsightsCatalog/InsightsPage/insightCards/common/InsightCard/types"; +import { EndpointHighNumberOfQueriesInsight, Trace } from "../../../../types"; + +export interface HighNumberOfQueriesInsightProps + extends InsightCardCommonProps { + insight: EndpointHighNumberOfQueriesInsight; + onTraceButtonClick: ( + trace: Trace, + insightType: InsightType, + spanCodeObjectId?: string + ) => void; +} diff --git a/src/components/Insights/NPlusOneInsight/NPlusOneInsight.stories.tsx b/src/components/Insights/deprecated/InsightList/insightCards/NPlusOneInsight/NPlusOneInsight.stories.tsx similarity index 91% rename from src/components/Insights/NPlusOneInsight/NPlusOneInsight.stories.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/NPlusOneInsight/NPlusOneInsight.stories.tsx index 0ada1f331..a2116cacd 100644 --- a/src/components/Insights/NPlusOneInsight/NPlusOneInsight.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/NPlusOneInsight/NPlusOneInsight.stories.tsx @@ -4,7 +4,7 @@ import { mockedNPlusOneInsight } from "./mockData"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/NPlusOneInsight", + title: "Insights/deprecated/InsightList/insightCards/NPlusOneInsight", component: NPlusOneInsight, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/NPlusOneInsight/index.tsx b/src/components/Insights/deprecated/InsightList/insightCards/NPlusOneInsight/index.tsx similarity index 84% rename from src/components/Insights/NPlusOneInsight/index.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/NPlusOneInsight/index.tsx index f217f9484..0438a04f1 100644 --- a/src/components/Insights/NPlusOneInsight/index.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/NPlusOneInsight/index.tsx @@ -1,18 +1,18 @@ import { useContext } from "react"; -import { InsightType } from "../../../types"; -import { getCriticalityLabel } from "../../../utils/getCriticalityLabel"; -import { getDurationString } from "../../../utils/getDurationString"; -import { sendTrackingEvent } from "../../../utils/sendTrackingEvent"; -import { trimEndpointScheme } from "../../../utils/trimEndpointScheme"; -import { ConfigContext } from "../../common/App/ConfigContext"; -import { ScoreIndicator } from "../../common/ScoreIndicator"; -import { Tooltip } from "../../common/Tooltip"; -import { CrosshairIcon } from "../../common/icons/CrosshairIcon"; -import { InsightCard } from "../InsightCard"; +import { InsightType } from "../../../../../../types"; +import { getCriticalityLabel } from "../../../../../../utils/getCriticalityLabel"; +import { getDurationString } from "../../../../../../utils/getDurationString"; +import { sendTrackingEvent } from "../../../../../../utils/sendTrackingEvent"; +import { trimEndpointScheme } from "../../../../../../utils/trimEndpointScheme"; +import { ConfigContext } from "../../../../../common/App/ConfigContext"; +import { ScoreIndicator } from "../../../../../common/ScoreIndicator"; +import { Tooltip } from "../../../../../common/Tooltip"; +import { CrosshairIcon } from "../../../../../common/icons/CrosshairIcon"; +import { Description, Link } from "../../../../styles"; +import { trackingEvents } from "../../../../tracking"; +import { Trace } from "../../../../types"; +import { InsightCard } from "../../InsightCard"; import { JiraButton } from "../common/JiraButton"; -import { Description, Link } from "../styles"; -import { trackingEvents } from "../tracking"; -import { Trace } from "../types"; import * as s from "./styles"; import { NPlusOneInsightProps } from "./types"; diff --git a/src/components/Insights/NPlusOneInsight/mockData.ts b/src/components/Insights/deprecated/InsightList/insightCards/NPlusOneInsight/mockData.ts similarity index 93% rename from src/components/Insights/NPlusOneInsight/mockData.ts rename to src/components/Insights/deprecated/InsightList/insightCards/NPlusOneInsight/mockData.ts index 48009f3d0..5e565d302 100644 --- a/src/components/Insights/NPlusOneInsight/mockData.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/NPlusOneInsight/mockData.ts @@ -1,7 +1,11 @@ -import { InsightType } from "../../../types"; -import { InsightCategory, InsightScope, SpanNPlusOneInsight } from "../types"; +import { InsightType } from "../../../../../../types"; +import { + InsightCategory, + InsightScope, + SpaNPlusOneInsight +} from "../../../../types"; -export const mockedNPlusOneInsight: SpanNPlusOneInsight = { +export const mockedNPlusOneInsight: SpaNPlusOneInsight = { sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", id: "60b55792-8262-4c5d-9628-8cce7979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", @@ -14,7 +18,7 @@ export const mockedNPlusOneInsight: SpanNPlusOneInsight = { ticketLink: null, impact: 0, name: "N+1", - type: InsightType.SpanNPlusOne, + type: InsightType.SpaNPlusOne, category: InsightCategory.Performance, specifity: 2, isDismissed: false, diff --git a/src/components/Insights/QueryOptimizationInsight/styles.ts b/src/components/Insights/deprecated/InsightList/insightCards/NPlusOneInsight/styles.ts similarity index 94% rename from src/components/Insights/QueryOptimizationInsight/styles.ts rename to src/components/Insights/deprecated/InsightList/insightCards/NPlusOneInsight/styles.ts index bf36a5c91..2c6bc860e 100644 --- a/src/components/Insights/QueryOptimizationInsight/styles.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/NPlusOneInsight/styles.ts @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { Button as CommonButton } from "../../common/Button"; +import { Button as CommonButton } from "../../../../../common/Button"; export const Stats = styled.span` display: flex; @@ -38,6 +38,18 @@ export const Button = styled(CommonButton)` height: fit-content; `; +export const EndpointList = styled.div` + display: flex; + flex-direction: column; + gap: 8px; +`; + +export const Endpoint = styled.div` + display: flex; + flex-direction: column; + gap: 8px; +`; + export const Name = styled.span` font-weight: 500; text-overflow: ellipsis; @@ -50,15 +62,3 @@ export const CriticalityValue = styled.span` display: flex; gap: 4px; `; - -export const EndpointList = styled.div` - display: flex; - flex-direction: column; - gap: 8px; -`; - -export const Endpoint = styled.div` - display: flex; - flex-direction: column; - gap: 8px; -`; diff --git a/src/components/Insights/deprecated/InsightList/insightCards/NPlusOneInsight/types.ts b/src/components/Insights/deprecated/InsightList/insightCards/NPlusOneInsight/types.ts new file mode 100644 index 000000000..3e64a759e --- /dev/null +++ b/src/components/Insights/deprecated/InsightList/insightCards/NPlusOneInsight/types.ts @@ -0,0 +1,16 @@ +import { InsightType } from "../../../../../../types"; +import { InsightCardCommonProps } from "../../../../InsightsCatalog/InsightsPage/insightCards/common/InsightCard/types"; +import { SpaNPlusOneInsight, Trace } from "../../../../types"; + +export interface NPlusOneInsightProps extends InsightCardCommonProps { + insight: SpaNPlusOneInsight; + onAssetLinkClick: ( + spanCodeObjectId: string, + insightType: InsightType + ) => void; + onTraceButtonClick: ( + trace: Trace, + insightType: InsightType, + spanCodeObjectId?: string + ) => void; +} diff --git a/src/components/Insights/NoScalingIssueInsight/NoScalingIssueInsight.stories.tsx b/src/components/Insights/deprecated/InsightList/insightCards/NoScalingIssueInsight/NoScalingIssueInsight.stories.tsx similarity index 92% rename from src/components/Insights/NoScalingIssueInsight/NoScalingIssueInsight.stories.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/NoScalingIssueInsight/NoScalingIssueInsight.stories.tsx index 9087b95b7..f055ee960 100644 --- a/src/components/Insights/NoScalingIssueInsight/NoScalingIssueInsight.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/NoScalingIssueInsight/NoScalingIssueInsight.stories.tsx @@ -1,11 +1,11 @@ import { Meta, StoryObj } from "@storybook/react"; import { NoScalingIssueInsight } from "."; -import { InsightType } from "../../../types"; -import { InsightCategory, InsightScope } from "../types"; +import { InsightType } from "../../../../../../types"; +import { InsightCategory, InsightScope } from "../../../../types"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/NoScalingIssueInsight", + title: "Insights/deprecated/InsightList/insightCards/NoScalingIssueInsight", component: NoScalingIssueInsight, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/NoScalingIssueInsight/index.tsx b/src/components/Insights/deprecated/InsightList/insightCards/NoScalingIssueInsight/index.tsx similarity index 86% rename from src/components/Insights/NoScalingIssueInsight/index.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/NoScalingIssueInsight/index.tsx index d56f6d726..3236e65fa 100644 --- a/src/components/Insights/NoScalingIssueInsight/index.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/NoScalingIssueInsight/index.tsx @@ -1,6 +1,6 @@ -import { Button } from "../../common/Button"; -import { ChartIcon } from "../../common/icons/ChartIcon"; -import { InsightCard } from "../InsightCard"; +import { Button } from "../../../../../common/Button"; +import { ChartIcon } from "../../../../../common/icons/ChartIcon"; +import { InsightCard } from "../../InsightCard"; import { NoScalingIssueInsightProps } from "./types"; /** diff --git a/src/components/Insights/deprecated/InsightList/insightCards/NoScalingIssueInsight/types.ts b/src/components/Insights/deprecated/InsightList/insightCards/NoScalingIssueInsight/types.ts new file mode 100644 index 000000000..322458310 --- /dev/null +++ b/src/components/Insights/deprecated/InsightList/insightCards/NoScalingIssueInsight/types.ts @@ -0,0 +1,13 @@ +import { InsightType } from "../../../../../../types"; +import { InsightCardCommonProps } from "../../../../InsightsCatalog/InsightsPage/insightCards/common/InsightCard/types"; +import { SpanScalingWellInsight } from "../../../../types"; + +export interface NoScalingIssueInsightProps extends InsightCardCommonProps { + insight: SpanScalingWellInsight; + onHistogramButtonClick: ( + instrumentationLibrary: string, + name: string, + insightType: InsightType, + displayName: string + ) => void; +} diff --git a/src/components/Insights/PerformanceAtScaleInsight/PerformanceAtScaleInsight.stories.tsx b/src/components/Insights/deprecated/InsightList/insightCards/PerformanceAtScaleInsight/PerformanceAtScaleInsight.stories.tsx similarity index 93% rename from src/components/Insights/PerformanceAtScaleInsight/PerformanceAtScaleInsight.stories.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/PerformanceAtScaleInsight/PerformanceAtScaleInsight.stories.tsx index 11967d2d2..5043b7c6a 100644 --- a/src/components/Insights/PerformanceAtScaleInsight/PerformanceAtScaleInsight.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/PerformanceAtScaleInsight/PerformanceAtScaleInsight.stories.tsx @@ -1,11 +1,12 @@ import { Meta, StoryObj } from "@storybook/react"; import { PerformanceAtScaleInsight } from "."; -import { InsightType } from "../../../types"; -import { InsightCategory, InsightScope } from "../types"; +import { InsightType } from "../../../../../../types"; +import { InsightCategory, InsightScope } from "../../../../types"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/PerformanceAtScaleInsight", + title: + "Insights/deprecated/InsightList/insightCards/PerformanceAtScaleInsight", component: PerformanceAtScaleInsight, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/PerformanceAtScaleInsight/index.tsx b/src/components/Insights/deprecated/InsightList/insightCards/PerformanceAtScaleInsight/index.tsx similarity index 92% rename from src/components/Insights/PerformanceAtScaleInsight/index.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/PerformanceAtScaleInsight/index.tsx index e198a0d11..8d249ad8c 100644 --- a/src/components/Insights/PerformanceAtScaleInsight/index.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/PerformanceAtScaleInsight/index.tsx @@ -1,6 +1,6 @@ -import { Button } from "../../common/Button"; -import { ChartIcon } from "../../common/icons/ChartIcon"; -import { InsightCard } from "../InsightCard"; +import { Button } from "../../../../../common/Button"; +import { ChartIcon } from "../../../../../common/icons/ChartIcon"; +import { InsightCard } from "../../InsightCard"; import { PerformanceAtScaleInsightProps } from "./types"; import { @@ -9,8 +9,8 @@ import { getCoreRowModel, useReactTable } from "@tanstack/react-table"; -import { Duration } from "../../../globals"; -import { Concurrency } from "../types"; +import { Duration } from "../../../../../../globals"; +import { Concurrency } from "../../../../types"; import * as s from "./styles"; const MIN_CONCURRENCY_STATES_TO_EVALUATE_SCALE = 4; diff --git a/src/components/Insights/PerformanceAtScaleInsight/styles.ts b/src/components/Insights/deprecated/InsightList/insightCards/PerformanceAtScaleInsight/styles.ts similarity index 100% rename from src/components/Insights/PerformanceAtScaleInsight/styles.ts rename to src/components/Insights/deprecated/InsightList/insightCards/PerformanceAtScaleInsight/styles.ts diff --git a/src/components/Insights/deprecated/InsightList/insightCards/PerformanceAtScaleInsight/types.ts b/src/components/Insights/deprecated/InsightList/insightCards/PerformanceAtScaleInsight/types.ts new file mode 100644 index 000000000..ac4a426f2 --- /dev/null +++ b/src/components/Insights/deprecated/InsightList/insightCards/PerformanceAtScaleInsight/types.ts @@ -0,0 +1,13 @@ +import { InsightType } from "../../../../../../types"; +import { InsightCardCommonProps } from "../../../../InsightsCatalog/InsightsPage/insightCards/common/InsightCard/types"; +import { SpanScalingInsufficientDataInsight } from "../../../../types"; + +export interface PerformanceAtScaleInsightProps extends InsightCardCommonProps { + insight: SpanScalingInsufficientDataInsight; + onHistogramButtonClick: ( + instrumentationLibrary: string, + name: string, + insightType: InsightType, + displayName: string + ) => void; +} diff --git a/src/components/Insights/QueryOptimizationInsight/QueryOptimizationInsight.stories.tsx b/src/components/Insights/deprecated/InsightList/insightCards/QueryOptimizationInsight/QueryOptimizationInsight.stories.tsx similarity index 90% rename from src/components/Insights/QueryOptimizationInsight/QueryOptimizationInsight.stories.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/QueryOptimizationInsight/QueryOptimizationInsight.stories.tsx index 67ad0ed13..54faf01f4 100644 --- a/src/components/Insights/QueryOptimizationInsight/QueryOptimizationInsight.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/QueryOptimizationInsight/QueryOptimizationInsight.stories.tsx @@ -4,7 +4,8 @@ import { mockedQueryOptimizationInsight } from "./mockData"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/QueryOptimizationInsight", + title: + "Insights/deprecated/InsightList/insightCards/QueryOptimizationInsight", component: QueryOptimizationInsight, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/QueryOptimizationInsight/index.tsx b/src/components/Insights/deprecated/InsightList/insightCards/QueryOptimizationInsight/index.tsx similarity index 85% rename from src/components/Insights/QueryOptimizationInsight/index.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/QueryOptimizationInsight/index.tsx index 540336873..448fd5300 100644 --- a/src/components/Insights/QueryOptimizationInsight/index.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/QueryOptimizationInsight/index.tsx @@ -1,16 +1,16 @@ import { useContext } from "react"; -import { InsightType } from "../../../types"; -import { getDurationString } from "../../../utils/getDurationString"; -import { sendTrackingEvent } from "../../../utils/sendTrackingEvent"; -import { trimEndpointScheme } from "../../../utils/trimEndpointScheme"; -import { ConfigContext } from "../../common/App/ConfigContext"; -import { Tooltip } from "../../common/Tooltip"; -import { CrosshairIcon } from "../../common/icons/CrosshairIcon"; -import { InsightCard } from "../InsightCard"; +import { InsightType } from "../../../../../../types"; +import { getDurationString } from "../../../../../../utils/getDurationString"; +import { sendTrackingEvent } from "../../../../../../utils/sendTrackingEvent"; +import { trimEndpointScheme } from "../../../../../../utils/trimEndpointScheme"; +import { ConfigContext } from "../../../../../common/App/ConfigContext"; +import { Tooltip } from "../../../../../common/Tooltip"; +import { CrosshairIcon } from "../../../../../common/icons/CrosshairIcon"; +import { Description, Link } from "../../../../styles"; +import { trackingEvents } from "../../../../tracking"; +import { Trace } from "../../../../types"; +import { InsightCard } from "../../InsightCard"; import { JiraButton } from "../common/JiraButton"; -import { Description, Link } from "../styles"; -import { trackingEvents } from "../tracking"; -import { Trace } from "../types"; import * as s from "./styles"; import { QueryOptimizationInsightProps } from "./types"; diff --git a/src/components/Insights/QueryOptimizationInsight/mockData.ts b/src/components/Insights/deprecated/InsightList/insightCards/QueryOptimizationInsight/mockData.ts similarity index 93% rename from src/components/Insights/QueryOptimizationInsight/mockData.ts rename to src/components/Insights/deprecated/InsightList/insightCards/QueryOptimizationInsight/mockData.ts index 05e620f61..395638631 100644 --- a/src/components/Insights/QueryOptimizationInsight/mockData.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/QueryOptimizationInsight/mockData.ts @@ -1,11 +1,11 @@ -import { InsightType } from "../../../types"; +import { InsightType } from "../../../../../../types"; import { InsightCategory, InsightScope, - QueryOptimizationInsight -} from "../types"; + SpanQueryOptimizationInsight +} from "../../../../types"; -export const mockedQueryOptimizationInsight: QueryOptimizationInsight = { +export const mockedQueryOptimizationInsight: SpanQueryOptimizationInsight = { sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", id: "60b55792-8262-4c8d-9628-7cce7979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", diff --git a/src/components/Insights/NPlusOneInsight/styles.ts b/src/components/Insights/deprecated/InsightList/insightCards/QueryOptimizationInsight/styles.ts similarity index 94% rename from src/components/Insights/NPlusOneInsight/styles.ts rename to src/components/Insights/deprecated/InsightList/insightCards/QueryOptimizationInsight/styles.ts index edbf1d63c..e74a9dd71 100644 --- a/src/components/Insights/NPlusOneInsight/styles.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/QueryOptimizationInsight/styles.ts @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { Button as CommonButton } from "../../common/Button"; +import { Button as CommonButton } from "../../../../../common/Button"; export const Stats = styled.span` display: flex; @@ -38,18 +38,6 @@ export const Button = styled(CommonButton)` height: fit-content; `; -export const EndpointList = styled.div` - display: flex; - flex-direction: column; - gap: 8px; -`; - -export const Endpoint = styled.div` - display: flex; - flex-direction: column; - gap: 8px; -`; - export const Name = styled.span` font-weight: 500; text-overflow: ellipsis; @@ -62,3 +50,15 @@ export const CriticalityValue = styled.span` display: flex; gap: 4px; `; + +export const EndpointList = styled.div` + display: flex; + flex-direction: column; + gap: 8px; +`; + +export const Endpoint = styled.div` + display: flex; + flex-direction: column; + gap: 8px; +`; diff --git a/src/components/Insights/deprecated/InsightList/insightCards/QueryOptimizationInsight/types.ts b/src/components/Insights/deprecated/InsightList/insightCards/QueryOptimizationInsight/types.ts new file mode 100644 index 000000000..3d475eca8 --- /dev/null +++ b/src/components/Insights/deprecated/InsightList/insightCards/QueryOptimizationInsight/types.ts @@ -0,0 +1,16 @@ +import { InsightType } from "../../../../../../types"; +import { InsightCardCommonProps } from "../../../../InsightsCatalog/InsightsPage/insightCards/common/InsightCard/types"; +import { SpanQueryOptimizationInsight, Trace } from "../../../../types"; + +export interface QueryOptimizationInsightProps extends InsightCardCommonProps { + insight: SpanQueryOptimizationInsight; + onAssetLinkClick: ( + spanCodeObjectId: string, + insightType: InsightType + ) => void; + onTraceButtonClick: ( + trace: Trace, + insightType: InsightType, + spanCodeObjectId?: string + ) => void; +} diff --git a/src/components/Insights/RequestBreakdownInsight/RequestBreakdownInsight.stories.tsx b/src/components/Insights/deprecated/InsightList/insightCards/RequestBreakdownInsight/RequestBreakdownInsight.stories.tsx similarity index 96% rename from src/components/Insights/RequestBreakdownInsight/RequestBreakdownInsight.stories.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/RequestBreakdownInsight/RequestBreakdownInsight.stories.tsx index 9aea03578..3bde136ed 100644 --- a/src/components/Insights/RequestBreakdownInsight/RequestBreakdownInsight.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/RequestBreakdownInsight/RequestBreakdownInsight.stories.tsx @@ -1,16 +1,16 @@ import { Meta, StoryObj } from "@storybook/react"; import { RequestBreakdownInsight } from "."; -import { InsightType } from "../../../types"; +import { InsightType } from "../../../../../../types"; import { ComponentType, EndpointBreakdownInsight, InsightCategory, InsightScope -} from "../types"; +} from "../../../../types"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/RequestBreakdownInsight", + title: "Insights/deprecated/InsightList/insightCards/RequestBreakdownInsight", component: RequestBreakdownInsight, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/RequestBreakdownInsight/index.tsx b/src/components/Insights/deprecated/InsightList/insightCards/RequestBreakdownInsight/index.tsx similarity index 96% rename from src/components/Insights/RequestBreakdownInsight/index.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/RequestBreakdownInsight/index.tsx index a2091d439..46f5c1342 100644 --- a/src/components/Insights/RequestBreakdownInsight/index.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/RequestBreakdownInsight/index.tsx @@ -6,9 +6,13 @@ import { } from "@tanstack/react-table"; import { useMemo, useState } from "react"; import { Cell, Pie, PieChart } from "recharts"; -import { roundTo } from "../../../utils/roundTo"; -import { InsightCard } from "../InsightCard"; -import { Component, ComponentType, EndpointBreakdownInsight } from "../types"; +import { roundTo } from "../../../../../../utils/roundTo"; +import { + Component, + ComponentType, + EndpointBreakdownInsight +} from "../../../../types"; +import { InsightCard } from "../../InsightCard"; import * as s from "./styles"; import { RequestBreakdownInsightProps } from "./types"; diff --git a/src/components/Insights/RequestBreakdownInsight/styles.ts b/src/components/Insights/deprecated/InsightList/insightCards/RequestBreakdownInsight/styles.ts similarity index 100% rename from src/components/Insights/RequestBreakdownInsight/styles.ts rename to src/components/Insights/deprecated/InsightList/insightCards/RequestBreakdownInsight/styles.ts diff --git a/src/components/Insights/deprecated/InsightList/insightCards/RequestBreakdownInsight/types.ts b/src/components/Insights/deprecated/InsightList/insightCards/RequestBreakdownInsight/types.ts new file mode 100644 index 000000000..3e8182225 --- /dev/null +++ b/src/components/Insights/deprecated/InsightList/insightCards/RequestBreakdownInsight/types.ts @@ -0,0 +1,14 @@ +import { InsightCardCommonProps } from "../../../../InsightsCatalog/InsightsPage/insightCards/common/InsightCard/types"; +import { EndpointBreakdownInsight } from "../../../../types"; + +export interface RequestBreakdownInsightProps extends InsightCardCommonProps { + insight: EndpointBreakdownInsight; +} + +export interface LegendItemDataColorProps { + $color: string; +} + +export interface FractionProgressBarValueProps { + $value: number; +} diff --git a/src/components/Insights/ScalingIssueInsight/ScalingIssueInsight.stories.tsx b/src/components/Insights/deprecated/InsightList/insightCards/ScalingIssueInsight/ScalingIssueInsight.stories.tsx similarity index 94% rename from src/components/Insights/ScalingIssueInsight/ScalingIssueInsight.stories.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/ScalingIssueInsight/ScalingIssueInsight.stories.tsx index 7e1b925de..ee0105a72 100644 --- a/src/components/Insights/ScalingIssueInsight/ScalingIssueInsight.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/ScalingIssueInsight/ScalingIssueInsight.stories.tsx @@ -9,7 +9,7 @@ import { // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/ScalingIssueInsight", + title: "Insights/deprecated/InsightList/insightCards/ScalingIssueInsight", component: ScalingIssueInsight, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/ScalingIssueInsight/index.tsx b/src/components/Insights/deprecated/InsightList/insightCards/ScalingIssueInsight/index.tsx similarity index 87% rename from src/components/Insights/ScalingIssueInsight/index.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/ScalingIssueInsight/index.tsx index 7dec380ea..bcf5b4aea 100644 --- a/src/components/Insights/ScalingIssueInsight/index.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/ScalingIssueInsight/index.tsx @@ -1,19 +1,19 @@ import { useContext } from "react"; -import { InsightType } from "../../../types"; -import { getDurationString } from "../../../utils/getDurationString"; -import { sendTrackingEvent } from "../../../utils/sendTrackingEvent"; -import { trimEndpointScheme } from "../../../utils/trimEndpointScheme"; -import { ConfigContext } from "../../common/App/ConfigContext"; -import { Button } from "../../common/Button"; -import { Tooltip } from "../../common/Tooltip"; -import { ChartIcon } from "../../common/icons/ChartIcon"; -import { CrosshairIcon } from "../../common/icons/CrosshairIcon"; -import { InsightCard } from "../InsightCard"; +import { InsightType } from "../../../../../../types"; +import { getDurationString } from "../../../../../../utils/getDurationString"; +import { sendTrackingEvent } from "../../../../../../utils/sendTrackingEvent"; +import { trimEndpointScheme } from "../../../../../../utils/trimEndpointScheme"; +import { ConfigContext } from "../../../../../common/App/ConfigContext"; +import { Button } from "../../../../../common/Button"; +import { Tooltip } from "../../../../../common/Tooltip"; +import { ChartIcon } from "../../../../../common/icons/ChartIcon"; +import { CrosshairIcon } from "../../../../../common/icons/CrosshairIcon"; +import { Description, Link } from "../../../../styles"; +import { trackingEvents } from "../../../../tracking"; +import { Trace } from "../../../../types"; +import { InsightCard } from "../../InsightCard"; import { Criticality } from "../common/Criticality"; import { JiraButton } from "../common/JiraButton"; -import { Description, Link } from "../styles"; -import { trackingEvents } from "../tracking"; -import { Trace } from "../types"; import * as s from "./styles"; import { ScalingIssueInsightProps } from "./types"; diff --git a/src/components/Insights/ScalingIssueInsight/mockData.ts b/src/components/Insights/deprecated/InsightList/insightCards/ScalingIssueInsight/mockData.ts similarity index 95% rename from src/components/Insights/ScalingIssueInsight/mockData.ts rename to src/components/Insights/deprecated/InsightList/insightCards/ScalingIssueInsight/mockData.ts index 459b23398..2b74f5fdd 100644 --- a/src/components/Insights/ScalingIssueInsight/mockData.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/ScalingIssueInsight/mockData.ts @@ -1,11 +1,11 @@ -import { InsightType } from "../../../types"; +import { InsightType } from "../../../../../../types"; import { InsightCategory, InsightScope, - SpanScalingBadlyInsight -} from "../types"; + SpanScalingInsight +} from "../../../../types"; -export const mockedSpanScalingInsight: SpanScalingBadlyInsight = { +export const mockedSpanScalingInsight: SpanScalingInsight = { sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", id: "90b55792-8262-4c5d-9628-7cce7979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", @@ -18,7 +18,7 @@ export const mockedSpanScalingInsight: SpanScalingBadlyInsight = { ticketLink: null, impact: 0, name: "Scaling Issue Found", - type: InsightType.SpanScalingBadly, + type: InsightType.SpanScaling, category: InsightCategory.Performance, specifity: 4, importance: 2, diff --git a/src/components/Insights/ScalingIssueInsight/styles.ts b/src/components/Insights/deprecated/InsightList/insightCards/ScalingIssueInsight/styles.ts similarity index 92% rename from src/components/Insights/ScalingIssueInsight/styles.ts rename to src/components/Insights/deprecated/InsightList/insightCards/ScalingIssueInsight/styles.ts index 027dc5a43..91201889f 100644 --- a/src/components/Insights/ScalingIssueInsight/styles.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/ScalingIssueInsight/styles.ts @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { Button as CommonButton } from "../../common/Button"; +import { Button as CommonButton } from "../../../../../common/Button"; export const Stats = styled.span` display: flex; diff --git a/src/components/Insights/ScalingIssueInsight/types.ts b/src/components/Insights/deprecated/InsightList/insightCards/ScalingIssueInsight/types.ts similarity index 51% rename from src/components/Insights/ScalingIssueInsight/types.ts rename to src/components/Insights/deprecated/InsightList/insightCards/ScalingIssueInsight/types.ts index 42dec60b9..28d1156be 100644 --- a/src/components/Insights/ScalingIssueInsight/types.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/ScalingIssueInsight/types.ts @@ -1,8 +1,9 @@ -import { InsightType } from "../../../types"; -import { InsightProps, SpanScalingBadlyInsight, Trace } from "../types"; +import { InsightType } from "../../../../../../types"; +import { InsightCardCommonProps } from "../../../../InsightsCatalog/InsightsPage/insightCards/common/InsightCard/types"; +import { SpanScalingInsight, Trace } from "../../../../types"; -export interface ScalingIssueInsightProps extends InsightProps { - insight: SpanScalingBadlyInsight; +export interface ScalingIssueInsightProps extends InsightCardCommonProps { + insight: SpanScalingInsight; onAssetLinkClick: ( spanCodeObjectId: string, insightType: InsightType diff --git a/src/components/Insights/SessionInViewInsight/SessionInViewInsight.stories.tsx b/src/components/Insights/deprecated/InsightList/insightCards/SessionInViewInsight/SessionInViewInsight.stories.tsx similarity index 94% rename from src/components/Insights/SessionInViewInsight/SessionInViewInsight.stories.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/SessionInViewInsight/SessionInViewInsight.stories.tsx index 62250fffa..29ca8bb2d 100644 --- a/src/components/Insights/SessionInViewInsight/SessionInViewInsight.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/SessionInViewInsight/SessionInViewInsight.stories.tsx @@ -1,11 +1,11 @@ import { Meta, StoryObj } from "@storybook/react"; import { SessionInViewInsight } from "."; -import { InsightType } from "../../../types"; -import { InsightCategory, InsightScope } from "../types"; +import { InsightType } from "../../../../../../types"; +import { InsightCategory, InsightScope } from "../../../../types"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/SessionInViewInsight", + title: "Insights/deprecated/InsightList/insightCards/SessionInViewInsight", component: SessionInViewInsight, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/SessionInViewInsight/index.tsx b/src/components/Insights/deprecated/InsightList/insightCards/SessionInViewInsight/index.tsx similarity index 82% rename from src/components/Insights/SessionInViewInsight/index.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/SessionInViewInsight/index.tsx index f754dd7b4..01fbebc01 100644 --- a/src/components/Insights/SessionInViewInsight/index.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/SessionInViewInsight/index.tsx @@ -1,13 +1,13 @@ import { useContext } from "react"; -import { usePagination } from "../../../hooks/usePagination"; -import { InsightType } from "../../../types"; -import { ConfigContext } from "../../common/App/ConfigContext"; -import { Pagination } from "../../common/Pagination"; -import { Tooltip } from "../../common/Tooltip"; -import { CrosshairIcon } from "../../common/icons/CrosshairIcon"; -import { InsightCard } from "../InsightCard"; -import { Description, Link } from "../styles"; -import { Trace } from "../types"; +import { usePagination } from "../../../../../../hooks/usePagination"; +import { InsightType } from "../../../../../../types"; +import { ConfigContext } from "../../../../../common/App/ConfigContext"; +import { Pagination } from "../../../../../common/Pagination"; +import { Tooltip } from "../../../../../common/Tooltip"; +import { CrosshairIcon } from "../../../../../common/icons/CrosshairIcon"; +import { Description, Link } from "../../../../styles"; +import { Trace } from "../../../../types"; +import { InsightCard } from "../../InsightCard"; import * as s from "./styles"; import { SessionInViewInsightProps } from "./types"; diff --git a/src/components/Insights/ExcessiveAPICallsInsight/styles.ts b/src/components/Insights/deprecated/InsightList/insightCards/SessionInViewInsight/styles.ts similarity index 88% rename from src/components/Insights/ExcessiveAPICallsInsight/styles.ts rename to src/components/Insights/deprecated/InsightList/insightCards/SessionInViewInsight/styles.ts index 7cde7aba9..481e7b15a 100644 --- a/src/components/Insights/ExcessiveAPICallsInsight/styles.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/SessionInViewInsight/styles.ts @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { Button as CommonButton } from "../../common/Button"; +import { Button as CommonButton } from "../../../../../common/Button"; export const ContentContainer = styled.div` display: flex; diff --git a/src/components/Insights/deprecated/InsightList/insightCards/SessionInViewInsight/types.ts b/src/components/Insights/deprecated/InsightList/insightCards/SessionInViewInsight/types.ts new file mode 100644 index 000000000..4fa9cf07d --- /dev/null +++ b/src/components/Insights/deprecated/InsightList/insightCards/SessionInViewInsight/types.ts @@ -0,0 +1,16 @@ +import { InsightType } from "../../../../../../types"; +import { InsightCardCommonProps } from "../../../../InsightsCatalog/InsightsPage/insightCards/common/InsightCard/types"; +import { EndpointSessionInViewInsight, Trace } from "../../../../types"; + +export interface SessionInViewInsightProps extends InsightCardCommonProps { + insight: EndpointSessionInViewInsight; + onAssetLinkClick: ( + spanCodeObjectId: string, + insightType: InsightType + ) => void; + onTraceButtonClick: ( + trace: Trace, + insightType: InsightType, + spanCodeObjectId: string + ) => void; +} diff --git a/src/components/Insights/SlowEndpointInsight/SlowEndpointInsight.stories.tsx b/src/components/Insights/deprecated/InsightList/insightCards/SlowEndpointInsight/SlowEndpointInsight.stories.tsx similarity index 95% rename from src/components/Insights/SlowEndpointInsight/SlowEndpointInsight.stories.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/SlowEndpointInsight/SlowEndpointInsight.stories.tsx index 58840010a..f3f782e37 100644 --- a/src/components/Insights/SlowEndpointInsight/SlowEndpointInsight.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/SlowEndpointInsight/SlowEndpointInsight.stories.tsx @@ -1,11 +1,11 @@ import { Meta, StoryObj } from "@storybook/react"; import { SlowEndpointInsight } from "."; -import { InsightType } from "../../../types"; -import { InsightCategory, InsightScope } from "../types"; +import { InsightType } from "../../../../../../types"; +import { InsightCategory, InsightScope } from "../../../../types"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/SlowEndpointInsight", + title: "Insights/deprecated/InsightList/insightCards/SlowEndpointInsight", component: SlowEndpointInsight, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/SlowEndpointInsight/index.tsx b/src/components/Insights/deprecated/InsightList/insightCards/SlowEndpointInsight/index.tsx similarity index 74% rename from src/components/Insights/SlowEndpointInsight/index.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/SlowEndpointInsight/index.tsx index 17aa44707..c952492a7 100644 --- a/src/components/Insights/SlowEndpointInsight/index.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/SlowEndpointInsight/index.tsx @@ -1,7 +1,7 @@ -import { getDurationString } from "../../../utils/getDurationString"; -import { roundTo } from "../../../utils/roundTo"; -import { InsightCard } from "../InsightCard"; -import { Description } from "../styles"; +import { getDurationString } from "../../../../../../utils/getDurationString"; +import { roundTo } from "../../../../../../utils/roundTo"; +import { Description } from "../../../../styles"; +import { InsightCard } from "../../InsightCard"; import { SlowEndpointInsightProps } from "./types"; /** diff --git a/src/components/Insights/deprecated/InsightList/insightCards/SlowEndpointInsight/types.ts b/src/components/Insights/deprecated/InsightList/insightCards/SlowEndpointInsight/types.ts new file mode 100644 index 000000000..1cfcee8f5 --- /dev/null +++ b/src/components/Insights/deprecated/InsightList/insightCards/SlowEndpointInsight/types.ts @@ -0,0 +1,6 @@ +import { InsightCardCommonProps } from "../../../../InsightsCatalog/InsightsPage/insightCards/common/InsightCard/types"; +import { SlowEndpointInsight } from "../../../../types"; + +export interface SlowEndpointInsightProps extends InsightCardCommonProps { + insight: SlowEndpointInsight; +} diff --git a/src/components/Insights/SpanBottleneckInsight/SpanBottleneckInsight.stories.tsx b/src/components/Insights/deprecated/InsightList/insightCards/SpanBottleneckInsight/SpanBottleneckInsight.stories.tsx similarity index 89% rename from src/components/Insights/SpanBottleneckInsight/SpanBottleneckInsight.stories.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/SpanBottleneckInsight/SpanBottleneckInsight.stories.tsx index 909fa8c3e..6c5e69c1a 100644 --- a/src/components/Insights/SpanBottleneckInsight/SpanBottleneckInsight.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/SpanBottleneckInsight/SpanBottleneckInsight.stories.tsx @@ -4,7 +4,7 @@ import { mockedSpanBottleneckInsight } from "./mockData"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/SpanBottleneckInsight", + title: "Insights/deprecated/InsightList/insightCards/SpanBottleneckInsight", component: SpanBottleneckInsight, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/SpanBottleneckInsight/index.tsx b/src/components/Insights/deprecated/InsightList/insightCards/SpanBottleneckInsight/index.tsx similarity index 87% rename from src/components/Insights/SpanBottleneckInsight/index.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/SpanBottleneckInsight/index.tsx index 3e59993c7..42023d1b3 100644 --- a/src/components/Insights/SpanBottleneckInsight/index.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/SpanBottleneckInsight/index.tsx @@ -1,12 +1,12 @@ -import { getDurationString } from "../../../utils/getDurationString"; -import { roundTo } from "../../../utils/roundTo"; -import { sendTrackingEvent } from "../../../utils/sendTrackingEvent"; -import { Tooltip } from "../../common/Tooltip"; -import { InsightCard } from "../InsightCard"; +import { getDurationString } from "../../../../../../utils/getDurationString"; +import { roundTo } from "../../../../../../utils/roundTo"; +import { sendTrackingEvent } from "../../../../../../utils/sendTrackingEvent"; +import { Tooltip } from "../../../../../common/Tooltip"; +import { Description, Link } from "../../../../styles"; +import { trackingEvents } from "../../../../tracking"; +import { InsightCard } from "../../InsightCard"; import { Criticality } from "../common/Criticality"; import { JiraButton } from "../common/JiraButton"; -import { Description, Link } from "../styles"; -import { trackingEvents } from "../tracking"; import * as s from "./styles"; import { SpanBottleneckInsightProps } from "./types"; diff --git a/src/components/Insights/SpanBottleneckInsight/mockData.ts b/src/components/Insights/deprecated/InsightList/insightCards/SpanBottleneckInsight/mockData.ts similarity index 97% rename from src/components/Insights/SpanBottleneckInsight/mockData.ts rename to src/components/Insights/deprecated/InsightList/insightCards/SpanBottleneckInsight/mockData.ts index 24f3b3dd0..9fd5f7b63 100644 --- a/src/components/Insights/SpanBottleneckInsight/mockData.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/SpanBottleneckInsight/mockData.ts @@ -1,9 +1,9 @@ -import { InsightType } from "../../../types"; +import { InsightType } from "../../../../../../types"; import { EndpointSlowestSpansInsight, InsightCategory, InsightScope -} from "../types"; +} from "../../../../types"; export const mockedSpanBottleneckInsight: EndpointSlowestSpansInsight = { sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", diff --git a/src/components/Insights/SpanBottleneckInsight/styles.ts b/src/components/Insights/deprecated/InsightList/insightCards/SpanBottleneckInsight/styles.ts similarity index 100% rename from src/components/Insights/SpanBottleneckInsight/styles.ts rename to src/components/Insights/deprecated/InsightList/insightCards/SpanBottleneckInsight/styles.ts diff --git a/src/components/Insights/deprecated/InsightList/insightCards/SpanBottleneckInsight/types.ts b/src/components/Insights/deprecated/InsightList/insightCards/SpanBottleneckInsight/types.ts new file mode 100644 index 000000000..2cd4b158b --- /dev/null +++ b/src/components/Insights/deprecated/InsightList/insightCards/SpanBottleneckInsight/types.ts @@ -0,0 +1,11 @@ +import { InsightType } from "../../../../../../types"; +import { InsightCardCommonProps } from "../../../../InsightsCatalog/InsightsPage/insightCards/common/InsightCard/types"; +import { EndpointSlowestSpansInsight } from "../../../../types"; + +export interface SpanBottleneckInsightProps extends InsightCardCommonProps { + insight: EndpointSlowestSpansInsight; + onAssetLinkClick: ( + spanCodeObjectId: string, + insightType: InsightType + ) => void; +} diff --git a/src/components/Insights/SpanNexusInsight/SpanNexusInsight.stories.tsx b/src/components/Insights/deprecated/InsightList/insightCards/SpanNexusInsight/SpanNexusInsight.stories.tsx similarity index 89% rename from src/components/Insights/SpanNexusInsight/SpanNexusInsight.stories.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/SpanNexusInsight/SpanNexusInsight.stories.tsx index 82cc28a9d..a8cd869d9 100644 --- a/src/components/Insights/SpanNexusInsight/SpanNexusInsight.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/SpanNexusInsight/SpanNexusInsight.stories.tsx @@ -4,7 +4,7 @@ import { mockedSpanNexusInsight } from "./mockData"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/SpanNexusInsight", + title: "Insights/deprecated/InsightList/insightCards/SpanNexusInsight", component: SpanNexusInsight, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/SpanNexusInsight/index.tsx b/src/components/Insights/deprecated/InsightList/insightCards/SpanNexusInsight/index.tsx similarity index 90% rename from src/components/Insights/SpanNexusInsight/index.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/SpanNexusInsight/index.tsx index a8736493b..324adb18c 100644 --- a/src/components/Insights/SpanNexusInsight/index.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/SpanNexusInsight/index.tsx @@ -1,6 +1,6 @@ -import { Tag } from "../../common/Tag"; -import { InsightCard } from "../InsightCard"; -import { Description } from "../styles"; +import { Tag } from "../../../../../common/Tag"; +import { Description } from "../../../../styles"; +import { InsightCard } from "../../InsightCard"; import * as s from "./styles"; import { SpanNexusInsightProps } from "./types"; diff --git a/src/components/Insights/SpanNexusInsight/mockData.ts b/src/components/Insights/deprecated/InsightList/insightCards/SpanNexusInsight/mockData.ts similarity index 92% rename from src/components/Insights/SpanNexusInsight/mockData.ts rename to src/components/Insights/deprecated/InsightList/insightCards/SpanNexusInsight/mockData.ts index a92847860..cbe1bef5c 100644 --- a/src/components/Insights/SpanNexusInsight/mockData.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/SpanNexusInsight/mockData.ts @@ -1,5 +1,9 @@ -import { InsightType } from "../../../types"; -import { InsightCategory, InsightScope, SpanNexusInsight } from "../types"; +import { InsightType } from "../../../../../../types"; +import { + InsightCategory, + InsightScope, + SpanNexusInsight +} from "../../../../types"; export const mockedSpanNexusInsight: SpanNexusInsight = { sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", diff --git a/src/components/Insights/SpanNexusInsight/styles.ts b/src/components/Insights/deprecated/InsightList/insightCards/SpanNexusInsight/styles.ts similarity index 100% rename from src/components/Insights/SpanNexusInsight/styles.ts rename to src/components/Insights/deprecated/InsightList/insightCards/SpanNexusInsight/styles.ts diff --git a/src/components/Insights/deprecated/InsightList/insightCards/SpanNexusInsight/types.ts b/src/components/Insights/deprecated/InsightList/insightCards/SpanNexusInsight/types.ts new file mode 100644 index 000000000..b9a410e65 --- /dev/null +++ b/src/components/Insights/deprecated/InsightList/insightCards/SpanNexusInsight/types.ts @@ -0,0 +1,6 @@ +import { InsightCardCommonProps } from "../../../../InsightsCatalog/InsightsPage/insightCards/common/InsightCard/types"; +import { SpanNexusInsight } from "../../../../types"; + +export interface SpanNexusInsightProps extends InsightCardCommonProps { + insight: SpanNexusInsight; +} diff --git a/src/components/Insights/TopUsageInsight/TopUsageInsight.stories.tsx b/src/components/Insights/deprecated/InsightList/insightCards/TopUsageInsight/TopUsageInsight.stories.tsx similarity index 95% rename from src/components/Insights/TopUsageInsight/TopUsageInsight.stories.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/TopUsageInsight/TopUsageInsight.stories.tsx index 40b5c6035..eeb310a84 100644 --- a/src/components/Insights/TopUsageInsight/TopUsageInsight.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/TopUsageInsight/TopUsageInsight.stories.tsx @@ -1,11 +1,11 @@ import { Meta, StoryObj } from "@storybook/react"; import { TopUsageInsight } from "."; -import { InsightType } from "../../../types"; -import { InsightCategory, InsightScope } from "../types"; +import { InsightType } from "../../../../../../types"; +import { InsightCategory, InsightScope } from "../../../../types"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/TopUsageInsight", + title: "Insights/deprecated/InsightList/insightCards/TopUsageInsight", component: TopUsageInsight, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/TopUsageInsight/index.tsx b/src/components/Insights/deprecated/InsightList/insightCards/TopUsageInsight/index.tsx similarity index 86% rename from src/components/Insights/TopUsageInsight/index.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/TopUsageInsight/index.tsx index 65a297089..edeace388 100644 --- a/src/components/Insights/TopUsageInsight/index.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/TopUsageInsight/index.tsx @@ -1,13 +1,13 @@ import { useContext } from "react"; -import { usePagination } from "../../../hooks/usePagination"; -import { InsightType } from "../../../types"; -import { roundTo } from "../../../utils/roundTo"; -import { ConfigContext } from "../../common/App/ConfigContext"; -import { Pagination } from "../../common/Pagination"; -import { CrosshairIcon } from "../../common/icons/CrosshairIcon"; -import { InsightCard } from "../InsightCard"; -import { Description, Link } from "../styles"; -import { Trace } from "../types"; +import { usePagination } from "../../../../../../hooks/usePagination"; +import { InsightType } from "../../../../../../types"; +import { roundTo } from "../../../../../../utils/roundTo"; +import { ConfigContext } from "../../../../../common/App/ConfigContext"; +import { Pagination } from "../../../../../common/Pagination"; +import { CrosshairIcon } from "../../../../../common/icons/CrosshairIcon"; +import { Description, Link } from "../../../../styles"; +import { Trace } from "../../../../types"; +import { InsightCard } from "../../InsightCard"; import * as s from "./styles"; import { TopUsageInsightProps } from "./types"; diff --git a/src/components/Insights/TopUsageInsight/styles.ts b/src/components/Insights/deprecated/InsightList/insightCards/TopUsageInsight/styles.ts similarity index 92% rename from src/components/Insights/TopUsageInsight/styles.ts rename to src/components/Insights/deprecated/InsightList/insightCards/TopUsageInsight/styles.ts index 516580c2b..c7f0c227d 100644 --- a/src/components/Insights/TopUsageInsight/styles.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/TopUsageInsight/styles.ts @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { Button as CommonButton } from "../../common/Button"; +import { Button as CommonButton } from "../../../../../common/Button"; export const FlowList = styled.div` display: flex; diff --git a/src/components/Insights/deprecated/InsightList/insightCards/TopUsageInsight/types.ts b/src/components/Insights/deprecated/InsightList/insightCards/TopUsageInsight/types.ts new file mode 100644 index 000000000..21bc52a66 --- /dev/null +++ b/src/components/Insights/deprecated/InsightList/insightCards/TopUsageInsight/types.ts @@ -0,0 +1,16 @@ +import { InsightType } from "../../../../../../types"; +import { InsightCardCommonProps } from "../../../../InsightsCatalog/InsightsPage/insightCards/common/InsightCard/types"; +import { SpanUsagesInsight, Trace } from "../../../../types"; + +export interface TopUsageInsightProps extends InsightCardCommonProps { + insight: SpanUsagesInsight; + onAssetLinkClick: ( + spanCodeObjectId: string, + insightType: InsightType + ) => void; + onTraceButtonClick: ( + trace: Trace, + insightType: InsightType, + spanCodeObjectId?: string + ) => void; +} diff --git a/src/components/Insights/TrafficInsight/TrafficInsight.stories.tsx b/src/components/Insights/deprecated/InsightList/insightCards/TrafficInsight/TrafficInsight.stories.tsx similarity index 96% rename from src/components/Insights/TrafficInsight/TrafficInsight.stories.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/TrafficInsight/TrafficInsight.stories.tsx index 7c08043a9..7a5cadf21 100644 --- a/src/components/Insights/TrafficInsight/TrafficInsight.stories.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/TrafficInsight/TrafficInsight.stories.tsx @@ -1,11 +1,11 @@ import { Meta, StoryObj } from "@storybook/react"; import { TrafficInsight } from "."; -import { InsightType } from "../../../types"; -import { InsightCategory, InsightScope } from "../types"; +import { InsightType } from "../../../../../../types"; +import { InsightCategory, InsightScope } from "../../../../types"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/TrafficInsight", + title: "Insights/deprecated/InsightList/insightCards/TrafficInsight", component: TrafficInsight, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/TrafficInsight/index.tsx b/src/components/Insights/deprecated/InsightList/insightCards/TrafficInsight/index.tsx similarity index 86% rename from src/components/Insights/TrafficInsight/index.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/TrafficInsight/index.tsx index de1559334..31891ff68 100644 --- a/src/components/Insights/TrafficInsight/index.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/TrafficInsight/index.tsx @@ -1,7 +1,7 @@ -import { InsightType } from "../../../types"; -import { roundTo } from "../../../utils/roundTo"; -import { InsightCard } from "../InsightCard"; -import { Description } from "../styles"; +import { InsightType } from "../../../../../../types"; +import { roundTo } from "../../../../../../utils/roundTo"; +import { Description } from "../../../../styles"; +import { InsightCard } from "../../InsightCard"; import { TrafficInsightProps } from "./types"; const suffixes = [ diff --git a/src/components/Insights/deprecated/InsightList/insightCards/TrafficInsight/types.ts b/src/components/Insights/deprecated/InsightList/insightCards/TrafficInsight/types.ts new file mode 100644 index 000000000..9cdd7a787 --- /dev/null +++ b/src/components/Insights/deprecated/InsightList/insightCards/TrafficInsight/types.ts @@ -0,0 +1,13 @@ +import { InsightCardCommonProps } from "../../../../InsightsCatalog/InsightsPage/insightCards/common/InsightCard/types"; +import { + EndpointHighUsageInsight, + EndpointLowUsageInsight, + EndpointNormalUsageInsight +} from "../../../../types"; + +export interface TrafficInsightProps extends InsightCardCommonProps { + insight: + | EndpointLowUsageInsight + | EndpointNormalUsageInsight + | EndpointHighUsageInsight; +} diff --git a/src/components/Insights/common/Criticality/index.tsx b/src/components/Insights/deprecated/InsightList/insightCards/common/Criticality/index.tsx similarity index 58% rename from src/components/Insights/common/Criticality/index.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/common/Criticality/index.tsx index 343ecad9c..7a31b077e 100644 --- a/src/components/Insights/common/Criticality/index.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/common/Criticality/index.tsx @@ -1,7 +1,7 @@ -import { getCriticalityLabel } from "../../../../utils/getCriticalityLabel"; -import { ScoreIndicator } from "../../../common/ScoreIndicator"; -import { Tooltip } from "../../../common/Tooltip"; -import { Description } from "../../styles"; +import { getCriticalityLabel } from "../../../../../../../utils/getCriticalityLabel"; +import { ScoreIndicator } from "../../../../../../common/ScoreIndicator"; +import { Tooltip } from "../../../../../../common/Tooltip"; +import { Description } from "../../../../../styles"; import * as s from "./styles"; export const Criticality = (props: { value: number }) => ( diff --git a/src/components/Insights/common/Criticality/styles.ts b/src/components/Insights/deprecated/InsightList/insightCards/common/Criticality/styles.ts similarity index 100% rename from src/components/Insights/common/Criticality/styles.ts rename to src/components/Insights/deprecated/InsightList/insightCards/common/Criticality/styles.ts diff --git a/src/components/Insights/common/JiraButton/index.tsx b/src/components/Insights/deprecated/InsightList/insightCards/common/JiraButton/index.tsx similarity index 81% rename from src/components/Insights/common/JiraButton/index.tsx rename to src/components/Insights/deprecated/InsightList/insightCards/common/JiraButton/index.tsx index 38dcb48c7..2f6189330 100644 --- a/src/components/Insights/common/JiraButton/index.tsx +++ b/src/components/Insights/deprecated/InsightList/insightCards/common/JiraButton/index.tsx @@ -1,15 +1,15 @@ import { useState } from "react"; import { useTheme } from "styled-components"; -import { openURLInDefaultBrowser } from "../../../../utils/openURLInDefaultBrowser"; -import { Button } from "../../../common/Button"; -import { Menu } from "../../../common/Menu"; -import { NewPopover } from "../../../common/NewPopover"; -import { Tooltip } from "../../../common/Tooltip"; -import { PencilIcon } from "../../../common/icons/12px/PencilIcon"; -import { JiraLogoIcon } from "../../../common/icons/16px/JiraLogoIcon"; -import { ChevronIcon } from "../../../common/icons/ChevronIcon"; -import { OpenLinkIcon } from "../../../common/icons/OpenLinkIcon"; -import { Direction } from "../../../common/icons/types"; +import { openURLInDefaultBrowser } from "../../../../../../../utils/openURLInDefaultBrowser"; +import { Button } from "../../../../../../common/Button"; +import { Menu } from "../../../../../../common/Menu"; +import { NewPopover } from "../../../../../../common/NewPopover"; +import { Tooltip } from "../../../../../../common/Tooltip"; +import { PencilIcon } from "../../../../../../common/icons/12px/PencilIcon"; +import { JiraLogoIcon } from "../../../../../../common/icons/16px/JiraLogoIcon"; +import { ChevronIcon } from "../../../../../../common/icons/ChevronIcon"; +import { OpenLinkIcon } from "../../../../../../common/icons/OpenLinkIcon"; +import { Direction } from "../../../../../../common/icons/types"; import * as s from "./styles"; import { JiraButtonProps } from "./types"; diff --git a/src/components/Insights/common/JiraButton/styles.ts b/src/components/Insights/deprecated/InsightList/insightCards/common/JiraButton/styles.ts similarity index 85% rename from src/components/Insights/common/JiraButton/styles.ts rename to src/components/Insights/deprecated/InsightList/insightCards/common/JiraButton/styles.ts index 607d142ea..b94f3382c 100644 --- a/src/components/Insights/common/JiraButton/styles.ts +++ b/src/components/Insights/deprecated/InsightList/insightCards/common/JiraButton/styles.ts @@ -1,6 +1,6 @@ import styled from "styled-components"; -import { Button } from "../../../common/Button"; -import { NewButton } from "../../../common/NewButton"; +import { Button } from "../../../../../../common/Button"; +import { NewButton } from "../../../../../../common/NewButton"; export const StyledButton = styled(Button)` display: flex; diff --git a/src/components/Insights/common/JiraButton/types.ts b/src/components/Insights/deprecated/InsightList/insightCards/common/JiraButton/types.ts similarity index 100% rename from src/components/Insights/common/JiraButton/types.ts rename to src/components/Insights/deprecated/InsightList/insightCards/common/JiraButton/types.ts diff --git a/src/components/Insights/deprecated/InsightList/mockData.ts b/src/components/Insights/deprecated/InsightList/mockData.ts new file mode 100644 index 000000000..4a520fb29 --- /dev/null +++ b/src/components/Insights/deprecated/InsightList/mockData.ts @@ -0,0 +1,51 @@ +import { + CodeObjectHotSpotInsight, + InsightCategory, + InsightScope, + InsightType +} from "../../types"; + +export const mockedHotSpotInsight: CodeObjectHotSpotInsight = { + sourceSpanCodeObjectInsight: "sourceSpanCodeObjectInsightId", + id: "60b55792-4262-4c5d-9628-7cce7979ad6d", + 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: "Errors Hotspot", + type: InsightType.HotSpot, + scope: InsightScope.Function, + category: InsightCategory.Errors, + specifity: 3, + importance: 2, + score: 82, + updatedAt: "2023-06-26T13:53:52.758Z", + shortDisplayInfo: { + title: "", + targetDisplayName: "", + subtitle: "", + description: "" + }, + codeObjectId: + "Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", + decorators: [ + { + title: "Error Hotspot", + description: "Error hotspot detected" + } + ], + environment: "BOB-LAPTOP[LOCAL]", + severity: 0, + isRecalculateEnabled: false, + prefixedCodeObjectId: + "method:Sample.MoneyTransfer.API.Controllers.TransferController$_$TransferFunds(TransferRequest)", + customStartTime: null, + actualStartTime: "2023-06-26T13:53:57.956Z", + isDismissed: false, + isDismissible: true +}; diff --git a/src/components/Insights/InsightList/styles.ts b/src/components/Insights/deprecated/InsightList/styles.ts similarity index 100% rename from src/components/Insights/InsightList/styles.ts rename to src/components/Insights/deprecated/InsightList/styles.ts diff --git a/src/components/Insights/InsightList/types.ts b/src/components/Insights/deprecated/InsightList/types.ts similarity index 80% rename from src/components/Insights/InsightList/types.ts rename to src/components/Insights/deprecated/InsightList/types.ts index 839604249..eb877d914 100644 --- a/src/components/Insights/InsightList/types.ts +++ b/src/components/Insights/deprecated/InsightList/types.ts @@ -1,5 +1,5 @@ -import { ViewMode } from "../InsightsCatalog/types"; -import { GenericCodeObjectInsight, MethodSpan } from "../types"; +import { ViewMode } from "../../InsightsCatalog/types"; +import { GenericCodeObjectInsight, MethodSpan } from "../../types"; export interface InsightListProps { insights: GenericCodeObjectInsight[]; diff --git a/src/components/Insights/Preview/index.tsx b/src/components/Insights/deprecated/Preview/index.tsx similarity index 82% rename from src/components/Insights/Preview/index.tsx rename to src/components/Insights/deprecated/Preview/index.tsx index 5298f0f34..fff13e952 100644 --- a/src/components/Insights/Preview/index.tsx +++ b/src/components/Insights/deprecated/Preview/index.tsx @@ -1,6 +1,6 @@ -import { WarningCircleIcon } from "../../common/icons/WarningCircleIcon"; -import { Link } from "../styles"; -import { Method } from "../types"; +import { WarningCircleIcon } from "../../../common/icons/WarningCircleIcon"; +import { Link } from "../../styles"; +import { Method } from "../../types"; import * as s from "./styles"; import { PreviewProps } from "./types"; diff --git a/src/components/Insights/Preview/styles.ts b/src/components/Insights/deprecated/Preview/styles.ts similarity index 100% rename from src/components/Insights/Preview/styles.ts rename to src/components/Insights/deprecated/Preview/styles.ts diff --git a/src/components/Insights/Preview/types.ts b/src/components/Insights/deprecated/Preview/types.ts similarity index 72% rename from src/components/Insights/Preview/types.ts rename to src/components/Insights/deprecated/Preview/types.ts index c670a9cf3..6207d25bd 100644 --- a/src/components/Insights/Preview/types.ts +++ b/src/components/Insights/deprecated/Preview/types.ts @@ -1,4 +1,4 @@ -import { Method } from "../types"; +import { Method } from "../../types"; export interface PreviewProps { methods: Method[]; diff --git a/src/components/Insights/index.tsx b/src/components/Insights/index.tsx index 291cc2ced..80661a1bb 100644 --- a/src/components/Insights/index.tsx +++ b/src/components/Insights/index.tsx @@ -28,17 +28,17 @@ import { OpenTelemetryLogoCrossedSmallIcon } from "../common/icons/OpenTelemetry import { SlackLogoIcon } from "../common/icons/SlackLogoIcon"; import { InsightsCatalog } from "./InsightsCatalog"; import { SORTING_CRITERION } from "./InsightsCatalog/types"; +import { EndpointBottleneckInsightTicket } from "./insightTickets/EndpointBottleneckInsightTicket"; +import { EndpointHighNumberOfQueriesInsightTicket } from "./insightTickets/EndpointHighNumberOfQueriesInsightTicket"; +import { EndpointQueryOptimizationInsightTicket } from "./insightTickets/EndpointQueryOptimizationTicket"; +import { EndpointQueryOptimizationV2InsightTicket } from "./insightTickets/EndpointQueryOptimizationV2InsightTicket"; +import { EndpointSpanNPlusOneInsightTicket } from "./insightTickets/EndpointSpanNPlusOneInsightTicket"; +import { SpaNPlusOneInsightTicket } from "./insightTickets/SpaNPlusOneInsightTicket"; +import { SpanEndpointBottleneckInsightTicket } from "./insightTickets/SpanEndpointBottleneckInsightTicket"; +import { SpanQueryOptimizationInsightTicket } from "./insightTickets/SpanQueryOptimizationInsightTicket"; +import { SpanScalingByRootCauseInsightTicket } from "./insightTickets/SpanScalingByRootCauseInsightTicket"; +import { SpanScalingInsightTicket } from "./insightTickets/SpanScalingInsightTicket"; import * as s from "./styles"; -import { BottleneckInsightTicket } from "./tickets/BottleneckInsightTicket"; -import { EndpointHighNumberOfQueriesInsightTicket } from "./tickets/EndpointHighNumberOfQueriesInsightTicket"; -import { EndpointNPlusOneInsightTicket } from "./tickets/EndpointNPlusOneInsightTicket"; -import { EndpointQueryOptimizationInsightTicket } from "./tickets/EndpointQueryOptimizationTicket"; -import { EndpointQueryOptimizationV2InsightTicket } from "./tickets/EndpointQueryOptimizationV2InsightTicket"; -import { NPlusOneInsightTicket } from "./tickets/NPlusOneInsightTicket"; -import { QueryOptimizationInsightTicket } from "./tickets/QueryOptimizationInsightTicket"; -import { ScalingIssueInsightTicket } from "./tickets/ScalingIssueInsightTicket"; -import { ScalingIssueInsightTicketByRootCause } from "./tickets/ScalingIssueInsightTicketByRootCause"; -import { SpanBottleneckInsightTicket } from "./tickets/SpanBottleneckInsightTicket"; import { isEndpointBottleneckInsight, isEndpointHighNumberOfQueriesInsight, @@ -62,10 +62,10 @@ import { InsightsProps, InsightsQuery, InsightsStatus, - QueryOptimizationInsight, + SpaNPlusOneInsight, SpanEndpointBottleneckInsight, - SpanNPlusOneInsight, - SpanScalingBadlyInsight + SpanQueryOptimizationInsight, + SpanScalingInsight } from "./types"; import { useInsightsData } from "./useInsightsData"; @@ -78,31 +78,38 @@ const renderInsightTicket = ( onClose: () => void ) => { if (isSpanNPlusOneInsight(data.insight)) { - const ticketData = data as InsightTicketInfo; - return ; + const ticketData = data as InsightTicketInfo; + return ; } if (isEndpointSpanNPlusOneInsight(data.insight)) { const ticketData = data as InsightTicketInfo; return ( - + ); } if (isSpanEndpointBottleneckInsight(data.insight)) { const ticketData = data as InsightTicketInfo; - return ; + return ( + + ); } if (isEndpointBottleneckInsight(data.insight)) { const ticketData = data as InsightTicketInfo; - return ; + return ( + + ); } if (isSpanQueryOptimizationInsight(data.insight)) { - const ticketData = data as InsightTicketInfo; + const ticketData = data as InsightTicketInfo; return ( - + ); } @@ -144,20 +151,20 @@ const renderInsightTicket = ( } if (isSpanScalingBadlyInsight(data.insight)) { - const ticketData = data as InsightTicketInfo; + const ticketData = data as InsightTicketInfo; const selectedRootCause = data.insight.rootCauseSpans.find( (r) => r.spanCodeObjectId == data.spanCodeObjectId ); if (selectedRootCause) { return ( - ); } else { - return ; + return ; } } diff --git a/src/components/Insights/tickets/NPlusOneInsightTicket/NPlusOneInsightTicket.stories.tsx b/src/components/Insights/insightTickets/EndpointBottleneckInsightTicket/EndpointBottleneckInsightTicket.stories.tsx similarity index 51% rename from src/components/Insights/tickets/NPlusOneInsightTicket/NPlusOneInsightTicket.stories.tsx rename to src/components/Insights/insightTickets/EndpointBottleneckInsightTicket/EndpointBottleneckInsightTicket.stories.tsx index b6d3da279..499f80cd9 100644 --- a/src/components/Insights/tickets/NPlusOneInsightTicket/NPlusOneInsightTicket.stories.tsx +++ b/src/components/Insights/insightTickets/EndpointBottleneckInsightTicket/EndpointBottleneckInsightTicket.stories.tsx @@ -1,11 +1,11 @@ import { Meta, StoryObj } from "@storybook/react"; -import { NPlusOneInsightTicket } from "."; -import { mockedNPlusOneInsight } from "../../NPlusOneInsight/mockData"; +import { EndpointBottleneckInsightTicket } from "."; +import { mockedEndpointBottleneckInsight } from "../../InsightsCatalog/InsightsPage/insightCards/EndpointBottleneckInsightCard/mockData"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction -const meta: Meta = { - title: "Insights/tickets/NPlusOneInsightTicket", - component: NPlusOneInsightTicket, +const meta: Meta = { + title: "Insights/insightTickets/EndpointBottleneckInsightTicket", + component: EndpointBottleneckInsightTicket, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout layout: "fullscreen" @@ -19,7 +19,7 @@ type Story = StoryObj; export const Default: Story = { args: { data: { - insight: mockedNPlusOneInsight + insight: mockedEndpointBottleneckInsight } } }; diff --git a/src/components/Insights/tickets/SpanBottleneckInsightTicket/index.tsx b/src/components/Insights/insightTickets/EndpointBottleneckInsightTicket/index.tsx similarity index 86% rename from src/components/Insights/tickets/SpanBottleneckInsightTicket/index.tsx rename to src/components/Insights/insightTickets/EndpointBottleneckInsightTicket/index.tsx index aecbd4bfc..d299650d1 100644 --- a/src/components/Insights/tickets/SpanBottleneckInsightTicket/index.tsx +++ b/src/components/Insights/insightTickets/EndpointBottleneckInsightTicket/index.tsx @@ -2,7 +2,7 @@ import { ReactElement } from "react"; import { InsightType } from "../../../../types"; import { getCriticalityLabel } from "../../../../utils/getCriticalityLabel"; import { intersperse } from "../../../../utils/intersperse"; -import { InsightJiraTicket } from "../../InsightJiraTicket"; +import { DigmaSignature } from "../../../common/DigmaSignature"; import { EndpointBottleneckInsight, SpanEndpointBottleneckInsight @@ -10,14 +10,15 @@ import { import { BottleneckEndpoints } from "../common/BottleneckEndpoints"; import { CodeLocations } from "../common/CodeLocations"; import { CommitInfos } from "../common/CommitInfos"; -import { DigmaSignature } from "../common/DigmaSignature"; +import { InsightJiraTicket } from "../common/InsightJiraTicket"; import { useEndpointDataSource } from "../common/useEndpointDataSource"; import { InsightTicketProps } from "../types"; -export const SpanBottleneckInsightTicket = ( - props: InsightTicketProps -) => { - const span = props.data.insight.span; +export const EndpointBottleneckInsightTicket = ({ + data, + onClose +}: InsightTicketProps) => { + const span = data.insight.span; const { commitInfos, @@ -78,10 +79,10 @@ export const SpanBottleneckInsightTicket = ( errorMessage: spanInsight === null ? "Failed to get insight details" : undefined }} - insight={props.data.insight} + insight={data.insight} relatedInsight={spanInsight} onReloadSpanInsight={onReloadSpanInsight} - onClose={props.onClose} + onClose={onClose} /> ); }; diff --git a/src/components/Insights/tickets/EndpointHighNumberOfQueriesInsightTicket/EndpointHighNumberOfQueriesInsightTicket.stories.tsx b/src/components/Insights/insightTickets/EndpointHighNumberOfQueriesInsightTicket/EndpointHighNumberOfQueriesInsightTicket.stories.tsx similarity index 66% rename from src/components/Insights/tickets/EndpointHighNumberOfQueriesInsightTicket/EndpointHighNumberOfQueriesInsightTicket.stories.tsx rename to src/components/Insights/insightTickets/EndpointHighNumberOfQueriesInsightTicket/EndpointHighNumberOfQueriesInsightTicket.stories.tsx index 26a3268c0..94b94c664 100644 --- a/src/components/Insights/tickets/EndpointHighNumberOfQueriesInsightTicket/EndpointHighNumberOfQueriesInsightTicket.stories.tsx +++ b/src/components/Insights/insightTickets/EndpointHighNumberOfQueriesInsightTicket/EndpointHighNumberOfQueriesInsightTicket.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from "@storybook/react"; import { EndpointHighNumberOfQueriesInsightTicket } from "."; -import { mockedHighNumberOfQueriesInsight } from "../../HighNumberOfQueriesInsight/mockData"; +import { mockedEndpointHighNumberOfQueriesInsight } from "../../InsightsCatalog/InsightsPage/insightCards/EndpointHighNumberOfQueriesInsightCard/mockData"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/tickets/EndpointHighNumberOfQueriesInsightTicket", + title: "Insights/insightTickets/EndpointHighNumberOfQueriesInsightTicket", component: EndpointHighNumberOfQueriesInsightTicket, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout @@ -19,9 +19,7 @@ type Story = StoryObj; export const Default: Story = { args: { data: { - insight: mockedHighNumberOfQueriesInsight, - spanCodeObjectId: - mockedHighNumberOfQueriesInsight.spanInfo?.spanCodeObjectId + insight: mockedEndpointHighNumberOfQueriesInsight } } }; diff --git a/src/components/Insights/tickets/EndpointHighNumberOfQueriesInsightTicket/index.tsx b/src/components/Insights/insightTickets/EndpointHighNumberOfQueriesInsightTicket/index.tsx similarity index 94% rename from src/components/Insights/tickets/EndpointHighNumberOfQueriesInsightTicket/index.tsx rename to src/components/Insights/insightTickets/EndpointHighNumberOfQueriesInsightTicket/index.tsx index 847ea67d1..c33766973 100644 --- a/src/components/Insights/tickets/EndpointHighNumberOfQueriesInsightTicket/index.tsx +++ b/src/components/Insights/insightTickets/EndpointHighNumberOfQueriesInsightTicket/index.tsx @@ -1,10 +1,10 @@ import { ReactElement } from "react"; import { intersperse } from "../../../../utils/intersperse"; -import { InsightJiraTicket } from "../../InsightJiraTicket"; +import { DigmaSignature } from "../../../common/DigmaSignature"; import { EndpointHighNumberOfQueriesInsight } from "../../types"; import { useCommitInfos } from "../common"; import { CommitInfos } from "../common/CommitInfos"; -import { DigmaSignature } from "../common/DigmaSignature"; +import { InsightJiraTicket } from "../common/InsightJiraTicket"; import { InsightTicketProps } from "../types"; export const EndpointHighNumberOfQueriesInsightTicket = ({ diff --git a/src/components/Insights/tickets/EndpointQueryOptimizationTicket/EndpointQueryOptimizationTicket.stories.tsx b/src/components/Insights/insightTickets/EndpointQueryOptimizationTicket/EndpointQueryOptimizationTicket.stories.tsx similarity index 77% rename from src/components/Insights/tickets/EndpointQueryOptimizationTicket/EndpointQueryOptimizationTicket.stories.tsx rename to src/components/Insights/insightTickets/EndpointQueryOptimizationTicket/EndpointQueryOptimizationTicket.stories.tsx index 1abb438ee..3ad9e8ddd 100644 --- a/src/components/Insights/tickets/EndpointQueryOptimizationTicket/EndpointQueryOptimizationTicket.stories.tsx +++ b/src/components/Insights/insightTickets/EndpointQueryOptimizationTicket/EndpointQueryOptimizationTicket.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from "@storybook/react"; import { EndpointQueryOptimizationInsightTicket } from "."; -import { mockedEndpointQueryOptimizationInsight } from "../../EndpointQueryOptimizationInsight/mockData"; +import { mockedEndpointQueryOptimizationInsight } from "../../InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationInsightCard/mockData"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/tickets/EndpointQueryOptimizationTicket", + title: "Insights/insightTickets/EndpointQueryOptimizationInsightTicket", component: EndpointQueryOptimizationInsightTicket, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/tickets/EndpointQueryOptimizationTicket/index.tsx b/src/components/Insights/insightTickets/EndpointQueryOptimizationTicket/index.tsx similarity index 87% rename from src/components/Insights/tickets/EndpointQueryOptimizationTicket/index.tsx rename to src/components/Insights/insightTickets/EndpointQueryOptimizationTicket/index.tsx index 8cb130f70..6608ccb7a 100644 --- a/src/components/Insights/tickets/EndpointQueryOptimizationTicket/index.tsx +++ b/src/components/Insights/insightTickets/EndpointQueryOptimizationTicket/index.tsx @@ -4,30 +4,31 @@ import { getCriticalityLabel } from "../../../../utils/getCriticalityLabel"; import { getDurationString } from "../../../../utils/getDurationString"; import { intersperse } from "../../../../utils/intersperse"; import { ConfigContext } from "../../../common/App/ConfigContext"; +import { DigmaSignature } from "../../../common/DigmaSignature"; import { Attachment } from "../../../common/JiraTicket/types"; -import { InsightJiraTicket } from "../../InsightJiraTicket"; import { EndpointQueryOptimizationInsight, - QueryOptimizationInsight + SpanQueryOptimizationInsight } from "../../types"; import { useEndpointDataSource } from "../common"; import { CodeLocations } from "../common/CodeLocations"; import { CommitInfos } from "../common/CommitInfos"; -import { DigmaSignature } from "../common/DigmaSignature"; +import { InsightJiraTicket } from "../common/InsightJiraTicket"; import { QueryOptimizationEndpoints } from "../common/QueryOptimizationEndpoints"; import { InsightTicketProps } from "../types"; /** * @deprecated */ -export const EndpointQueryOptimizationInsightTicket = ( - props: InsightTicketProps -) => { +export const EndpointQueryOptimizationInsightTicket = ({ + data, + onClose +}: InsightTicketProps) => { const config = useContext(ConfigContext); - const span = props.data.insight.spans.find( + const span = data.insight.spans.find( (x) => x.spanInfo?.spanCodeObjectId && - x.spanInfo.spanCodeObjectId === props.data.spanCodeObjectId + x.spanInfo.spanCodeObjectId === data.spanCodeObjectId ); const spanInfo = span?.spanInfo || null; @@ -37,7 +38,7 @@ export const EndpointQueryOptimizationInsightTicket = ( isLoading, codeLocations, onReloadSpanInsight - } = useEndpointDataSource( + } = useEndpointDataSource( spanInfo, InsightType.SpanQueryOptimization ); @@ -126,9 +127,9 @@ export const EndpointQueryOptimizationInsightTicket = ( spanInsight === null ? "Failed to get insight details" : undefined }} attachments={attachments} - insight={props.data.insight} + insight={data.insight} relatedInsight={spanInsight} - onClose={props.onClose} + onClose={onClose} onReloadSpanInsight={onReloadSpanInsight} /> ); diff --git a/src/components/Insights/tickets/EndpointQueryOptimizationV2InsightTicket/EndpointQueryOptimizationV2InsightTicket.stories.tsx b/src/components/Insights/insightTickets/EndpointQueryOptimizationV2InsightTicket/EndpointQueryOptimizationV2InsightTicket.stories.tsx similarity index 81% rename from src/components/Insights/tickets/EndpointQueryOptimizationV2InsightTicket/EndpointQueryOptimizationV2InsightTicket.stories.tsx rename to src/components/Insights/insightTickets/EndpointQueryOptimizationV2InsightTicket/EndpointQueryOptimizationV2InsightTicket.stories.tsx index 615eab5a3..fc47a93b6 100644 --- a/src/components/Insights/tickets/EndpointQueryOptimizationV2InsightTicket/EndpointQueryOptimizationV2InsightTicket.stories.tsx +++ b/src/components/Insights/insightTickets/EndpointQueryOptimizationV2InsightTicket/EndpointQueryOptimizationV2InsightTicket.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from "@storybook/react"; import { EndpointQueryOptimizationV2InsightTicket } from "."; -import { mockedEndpointQueryOptimizationV2Insight } from "../../common/insights/EndpointQueryOptimizationV2Insight/mockData"; +import { mockedEndpointQueryOptimizationV2Insight } from "../../InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationV2InsightCard/mockData"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/tickets/EndpointQueryOptimizationV2InsightTicket", + title: "Insights/insightTickets/EndpointQueryOptimizationV2InsightTicket", component: EndpointQueryOptimizationV2InsightTicket, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/tickets/EndpointQueryOptimizationV2InsightTicket/index.tsx b/src/components/Insights/insightTickets/EndpointQueryOptimizationV2InsightTicket/index.tsx similarity index 94% rename from src/components/Insights/tickets/EndpointQueryOptimizationV2InsightTicket/index.tsx rename to src/components/Insights/insightTickets/EndpointQueryOptimizationV2InsightTicket/index.tsx index 1d0084f13..47409cb95 100644 --- a/src/components/Insights/tickets/EndpointQueryOptimizationV2InsightTicket/index.tsx +++ b/src/components/Insights/insightTickets/EndpointQueryOptimizationV2InsightTicket/index.tsx @@ -4,16 +4,16 @@ import { getCriticalityLabel } from "../../../../utils/getCriticalityLabel"; import { getDurationString } from "../../../../utils/getDurationString"; import { intersperse } from "../../../../utils/intersperse"; import { ConfigContext } from "../../../common/App/ConfigContext"; +import { DigmaSignature } from "../../../common/DigmaSignature"; import { Attachment } from "../../../common/JiraTicket/types"; -import { InsightJiraTicket } from "../../InsightJiraTicket"; import { EndpointQueryOptimizationV2Insight, - QueryOptimizationInsight + SpanQueryOptimizationInsight } from "../../types"; import { useEndpointDataSource } from "../common"; import { CodeLocations } from "../common/CodeLocations"; import { CommitInfos } from "../common/CommitInfos"; -import { DigmaSignature } from "../common/DigmaSignature"; +import { InsightJiraTicket } from "../common/InsightJiraTicket"; import { QueryOptimizationEndpoints } from "../common/QueryOptimizationEndpoints"; import { InsightTicketProps } from "../types"; @@ -31,7 +31,7 @@ export const EndpointQueryOptimizationV2InsightTicket = ({ isLoading, codeLocations, onReloadSpanInsight - } = useEndpointDataSource( + } = useEndpointDataSource( spanInfo, InsightType.SpanQueryOptimization ); diff --git a/src/components/Insights/insightTickets/EndpointSpanNPlusOneInsightTicket/EndpointSpanNPlusOneInsightTicket.stories.tsx b/src/components/Insights/insightTickets/EndpointSpanNPlusOneInsightTicket/EndpointSpanNPlusOneInsightTicket.stories.tsx new file mode 100644 index 000000000..e35a6bb82 --- /dev/null +++ b/src/components/Insights/insightTickets/EndpointSpanNPlusOneInsightTicket/EndpointSpanNPlusOneInsightTicket.stories.tsx @@ -0,0 +1,25 @@ +import { Meta, StoryObj } from "@storybook/react"; +import { EndpointSpanNPlusOneInsightTicket } from "."; +import { mockedEndpointSpanNPlusOneInsight } from "../../InsightsCatalog/InsightsPage/insightCards/EndpointSpanNPlusOneInsightInsightCard/mockData"; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction +const meta: Meta = { + title: "Insights/insightTickets/EndpointSpanNPlusOneInsightTicket", + component: EndpointSpanNPlusOneInsightTicket, + 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; + +export const Default: Story = { + args: { + data: { + insight: mockedEndpointSpanNPlusOneInsight + } + } +}; diff --git a/src/components/Insights/tickets/EndpointNPlusOneInsightTicket/index.tsx b/src/components/Insights/insightTickets/EndpointSpanNPlusOneInsightTicket/index.tsx similarity index 77% rename from src/components/Insights/tickets/EndpointNPlusOneInsightTicket/index.tsx rename to src/components/Insights/insightTickets/EndpointSpanNPlusOneInsightTicket/index.tsx index 6021a6d24..53630b017 100644 --- a/src/components/Insights/tickets/EndpointNPlusOneInsightTicket/index.tsx +++ b/src/components/Insights/insightTickets/EndpointSpanNPlusOneInsightTicket/index.tsx @@ -3,21 +3,22 @@ import { InsightType } from "../../../../types"; import { getCriticalityLabel } from "../../../../utils/getCriticalityLabel"; import { intersperse } from "../../../../utils/intersperse"; import { ConfigContext } from "../../../common/App/ConfigContext"; +import { DigmaSignature } from "../../../common/DigmaSignature"; import { Attachment } from "../../../common/JiraTicket/types"; -import { InsightJiraTicket } from "../../InsightJiraTicket"; -import { EndpointSpanNPlusOneInsight, SpanNPlusOneInsight } from "../../types"; +import { EndpointSpanNPlusOneInsight, SpaNPlusOneInsight } from "../../types"; import { useEndpointDataSource } from "../common"; import { CodeLocations } from "../common/CodeLocations"; import { CommitInfos } from "../common/CommitInfos"; -import { DigmaSignature } from "../common/DigmaSignature"; -import { NPlusOneAffectedEndpoints } from "../common/NPlusOneAffectedEndpoints"; +import { InsightJiraTicket } from "../common/InsightJiraTicket"; +import { NPlusOneEndpoints } from "../common/NPlusOneEndpoints"; import { InsightTicketProps } from "../types"; -export const EndpointNPlusOneInsightTicket = ( - props: InsightTicketProps -) => { +export const EndpointSpanNPlusOneInsightTicket = ({ + data, + onClose +}: InsightTicketProps) => { const config = useContext(ConfigContext); - const span = props.data.insight.span; + const span = data.insight.span; const spanInfo = span?.internalSpan || span?.clientSpan || null; const { @@ -26,9 +27,9 @@ export const EndpointNPlusOneInsightTicket = ( isLoading, codeLocations, onReloadSpanInsight - } = useEndpointDataSource( + } = useEndpointDataSource( spanInfo, - InsightType.SpanNPlusOne + InsightType.SpaNPlusOne ); const services = [ @@ -39,7 +40,7 @@ export const EndpointNPlusOneInsightTicket = ( const serviceString = services.length > 0 ? services.join(", ") : ""; const criticalityString = `Criticality: ${getCriticalityLabel( - props.data.insight.criticality + data.insight.criticality )}`; const summary = ["N+1 Issue found", serviceString, criticalityString] @@ -55,10 +56,7 @@ export const EndpointNPlusOneInsightTicket = (
N+1 Query Detected
,
{queryString}
, , - , + , ); diff --git a/src/components/Insights/tickets/BottleneckInsightTicket/BottleneckInsightTicket.stories.tsx b/src/components/Insights/insightTickets/SpaNPlusOneInsightTicket/SpaNPlusOneInsightTicket.tsx similarity index 54% rename from src/components/Insights/tickets/BottleneckInsightTicket/BottleneckInsightTicket.stories.tsx rename to src/components/Insights/insightTickets/SpaNPlusOneInsightTicket/SpaNPlusOneInsightTicket.tsx index b4be0a403..f4fd38e5f 100644 --- a/src/components/Insights/tickets/BottleneckInsightTicket/BottleneckInsightTicket.stories.tsx +++ b/src/components/Insights/insightTickets/SpaNPlusOneInsightTicket/SpaNPlusOneInsightTicket.tsx @@ -1,11 +1,11 @@ import { Meta, StoryObj } from "@storybook/react"; -import { BottleneckInsightTicket } from "."; -import { mockedBottleneckInsight } from "../../BottleneckInsight/mockData"; +import { SpaNPlusOneInsightTicket } from "."; +import { mockedSpaNPlusOneInsight } from "../../InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/mockData"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction -const meta: Meta = { - title: "Insights/tickets/BottleneckInsightTicket", - component: BottleneckInsightTicket, +const meta: Meta = { + title: "Insights/insightTickets/SpaNPlusOneInsightTicket", + component: SpaNPlusOneInsightTicket, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout layout: "fullscreen" @@ -19,7 +19,7 @@ type Story = StoryObj; export const Default: Story = { args: { data: { - insight: mockedBottleneckInsight + insight: mockedSpaNPlusOneInsight } } }; diff --git a/src/components/Insights/tickets/NPlusOneInsightTicket/index.tsx b/src/components/Insights/insightTickets/SpaNPlusOneInsightTicket/index.tsx similarity index 66% rename from src/components/Insights/tickets/NPlusOneInsightTicket/index.tsx rename to src/components/Insights/insightTickets/SpaNPlusOneInsightTicket/index.tsx index 384db87ef..fce68f757 100644 --- a/src/components/Insights/tickets/NPlusOneInsightTicket/index.tsx +++ b/src/components/Insights/insightTickets/SpaNPlusOneInsightTicket/index.tsx @@ -2,28 +2,26 @@ import { ReactElement, useContext } from "react"; import { getCriticalityLabel } from "../../../../utils/getCriticalityLabel"; import { intersperse } from "../../../../utils/intersperse"; import { ConfigContext } from "../../../common/App/ConfigContext"; +import { DigmaSignature } from "../../../common/DigmaSignature"; import { Attachment } from "../../../common/JiraTicket/types"; -import { InsightJiraTicket } from "../../InsightJiraTicket"; -import { SpanNPlusOneInsight } from "../../types"; +import { SpaNPlusOneInsight } from "../../types"; import { useSpanDataSource } from "../common"; import { CodeLocations } from "../common/CodeLocations"; import { CommitInfos } from "../common/CommitInfos"; -import { DigmaSignature } from "../common/DigmaSignature"; -import { NPlusOneAffectedEndpoints } from "../common/NPlusOneAffectedEndpoints"; +import { InsightJiraTicket } from "../common/InsightJiraTicket"; +import { NPlusOneEndpoints } from "../common/NPlusOneEndpoints"; import { InsightTicketProps } from "../types"; -export const NPlusOneInsightTicket = ( - props: InsightTicketProps -) => { - const spanInsight = props.data.insight; +export const SpaNPlusOneInsightTicket = ({ + data, + onClose +}: InsightTicketProps) => { + const spanInsight = data.insight; const { commitInfos, isLoading, codeLocations } = - useSpanDataSource( - props.data.insight.spanInfo, - props.data.insight - ); + useSpanDataSource(data.insight.spanInfo, data.insight); const config = useContext(ConfigContext); - const endpoints = props.data.insight.endpoints || []; + const endpoints = data.insight.endpoints || []; const services = [ ...new Set(endpoints.map((x) => x.endpointInfo.serviceName)) @@ -31,15 +29,15 @@ export const NPlusOneInsightTicket = ( const serviceString = services.length > 0 ? services.join(", ") : ""; const criticalityString = - props.data.insight.criticality > 0 - ? `Criticality: ${getCriticalityLabel(props.data.insight.criticality)}` + data.insight.criticality > 0 + ? `Criticality: ${getCriticalityLabel(data.insight.criticality)}` : ""; const summary = ["N+1 Issue found", serviceString, criticalityString] .filter(Boolean) .join(" - "); - const queryString = props.data.insight.spanInfo?.displayName || ""; + const queryString = data.insight.spanInfo?.displayName || ""; const renderDescription = () => ( <> @@ -48,10 +46,7 @@ export const NPlusOneInsightTicket = (
N+1 Query Detected
,
{queryString}
, , - , + , ); - const traceId = props.data.insight.traceId; + const traceId = data.insight.traceId; const attachments: Attachment[] = [ ...(traceId ? [ @@ -86,8 +81,8 @@ export const NPlusOneInsightTicket = ( isLoading }} attachments={attachments} - insight={props.data.insight} - onClose={props.onClose} + insight={data.insight} + onClose={onClose} /> ); }; diff --git a/src/components/Insights/insightTickets/SpanEndpointBottleneckInsightTicket/SpanEndpointBottleneckInsightTicket.stories.tsx b/src/components/Insights/insightTickets/SpanEndpointBottleneckInsightTicket/SpanEndpointBottleneckInsightTicket.stories.tsx new file mode 100644 index 000000000..7c1125756 --- /dev/null +++ b/src/components/Insights/insightTickets/SpanEndpointBottleneckInsightTicket/SpanEndpointBottleneckInsightTicket.stories.tsx @@ -0,0 +1,25 @@ +import { Meta, StoryObj } from "@storybook/react"; +import { SpanEndpointBottleneckInsightTicket } from "."; +import { mockedSpanEndpointBottleneckInsight } from "../../InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/mockData"; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction +const meta: Meta = { + title: "Insights/insightTickets/SpanEndpointBottleneckInsightTicket", + component: SpanEndpointBottleneckInsightTicket, + 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; + +export const Default: Story = { + args: { + data: { + insight: mockedSpanEndpointBottleneckInsight + } + } +}; diff --git a/src/components/Insights/tickets/BottleneckInsightTicket/index.tsx b/src/components/Insights/insightTickets/SpanEndpointBottleneckInsightTicket/index.tsx similarity index 72% rename from src/components/Insights/tickets/BottleneckInsightTicket/index.tsx rename to src/components/Insights/insightTickets/SpanEndpointBottleneckInsightTicket/index.tsx index 5db1b0693..b9f86f2fb 100644 --- a/src/components/Insights/tickets/BottleneckInsightTicket/index.tsx +++ b/src/components/Insights/insightTickets/SpanEndpointBottleneckInsightTicket/index.tsx @@ -1,33 +1,34 @@ import { ReactElement } from "react"; import { getCriticalityLabel } from "../../../../utils/getCriticalityLabel"; import { intersperse } from "../../../../utils/intersperse"; -import { InsightJiraTicket } from "../../InsightJiraTicket"; +import { DigmaSignature } from "../../../common/DigmaSignature"; import { SpanEndpointBottleneckInsight } from "../../types"; import { useSpanDataSource } from "../common"; import { BottleneckEndpoints } from "../common/BottleneckEndpoints"; import { CodeLocations } from "../common/CodeLocations"; import { CommitInfos } from "../common/CommitInfos"; -import { DigmaSignature } from "../common/DigmaSignature"; +import { InsightJiraTicket } from "../common/InsightJiraTicket"; import { InsightTicketProps } from "../types"; -export const BottleneckInsightTicket = ( - props: InsightTicketProps -) => { +export const SpanEndpointBottleneckInsightTicket = ({ + data, + onClose +}: InsightTicketProps) => { const { commitInfos, codeLocations, isLoading } = useSpanDataSource( - props.data.insight.spanInfo, - props.data.insight + data.insight.spanInfo, + data.insight ); - const slowEndpoints = props.data.insight.slowEndpoints || []; + const slowEndpoints = data.insight.slowEndpoints || []; const services = [ ...new Set(slowEndpoints.map((x) => x.endpointInfo.serviceName)) ]; const serviceString = services.length > 0 ? services.join(", ") : ""; const criticalityString = - props.data.insight.criticality > 0 - ? `Criticality: ${getCriticalityLabel(props.data.insight.criticality)}` + data.insight.criticality > 0 + ? `Criticality: ${getCriticalityLabel(data.insight.criticality)}` : ""; const summary = ["Bottleneck found", serviceString, criticalityString] @@ -40,13 +41,13 @@ export const BottleneckInsightTicket = ( [ , , , ], @@ -64,8 +65,8 @@ export const BottleneckInsightTicket = ( content: renderDescription(), isLoading }} - insight={props.data.insight} - onClose={props.onClose} + insight={data.insight} + onClose={onClose} /> ); }; diff --git a/src/components/Insights/insightTickets/SpanQueryOptimizationInsightTicket/SpanQueryOptimizationInsightTicket.stories.tsx b/src/components/Insights/insightTickets/SpanQueryOptimizationInsightTicket/SpanQueryOptimizationInsightTicket.stories.tsx new file mode 100644 index 000000000..bc172ea26 --- /dev/null +++ b/src/components/Insights/insightTickets/SpanQueryOptimizationInsightTicket/SpanQueryOptimizationInsightTicket.stories.tsx @@ -0,0 +1,25 @@ +import { Meta, StoryObj } from "@storybook/react"; +import { SpanQueryOptimizationInsightTicket } from "."; +import { mockedSpanQueryOptimizationInsight } from "../../InsightsCatalog/InsightsPage/insightCards/SpanQueryOptimizationInsightCard/mockData"; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction +const meta: Meta = { + title: "Insights/insightTickets/SpanQueryOptimizationInsightTicket", + component: SpanQueryOptimizationInsightTicket, + 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; + +export const Default: Story = { + args: { + data: { + insight: mockedSpanQueryOptimizationInsight + } + } +}; diff --git a/src/components/Insights/tickets/QueryOptimizationInsightTicket/index.tsx b/src/components/Insights/insightTickets/SpanQueryOptimizationInsightTicket/index.tsx similarity index 66% rename from src/components/Insights/tickets/QueryOptimizationInsightTicket/index.tsx rename to src/components/Insights/insightTickets/SpanQueryOptimizationInsightTicket/index.tsx index e191f2821..86cdf83c0 100644 --- a/src/components/Insights/tickets/QueryOptimizationInsightTicket/index.tsx +++ b/src/components/Insights/insightTickets/SpanQueryOptimizationInsightTicket/index.tsx @@ -3,39 +3,36 @@ import { getCriticalityLabel } from "../../../../utils/getCriticalityLabel"; import { getDurationString } from "../../../../utils/getDurationString"; import { intersperse } from "../../../../utils/intersperse"; import { ConfigContext } from "../../../common/App/ConfigContext"; +import { DigmaSignature } from "../../../common/DigmaSignature"; import { Attachment } from "../../../common/JiraTicket/types"; -import { InsightJiraTicket } from "../../InsightJiraTicket"; -import { QueryOptimizationInsight } from "../../types"; +import { SpanQueryOptimizationInsight } from "../../types"; import { useCommitInfos } from "../common"; import { CommitInfos } from "../common/CommitInfos"; -import { DigmaSignature } from "../common/DigmaSignature"; +import { InsightJiraTicket } from "../common/InsightJiraTicket"; import { QueryOptimizationEndpoints } from "../common/QueryOptimizationEndpoints"; import { InsightTicketProps } from "../types"; -export const QueryOptimizationInsightTicket = ( - props: InsightTicketProps -) => { - const { isLoading, commitInfos } = useCommitInfos(props.data.insight); +export const SpanQueryOptimizationInsightTicket = ({ + data, + onClose +}: InsightTicketProps) => { + const { isLoading, commitInfos } = useCommitInfos(data.insight); const config = useContext(ConfigContext); const criticalityString = - props.data.insight.criticality > 0 - ? `Criticality: ${getCriticalityLabel(props.data.insight.criticality)}` + data.insight.criticality > 0 + ? `Criticality: ${getCriticalityLabel(data.insight.criticality)}` : ""; - const dbStatement = props.data.insight.dbStatement.toUpperCase(); + const dbStatement = data.insight.dbStatement.toUpperCase(); const services = [ ...new Set( - (props.data.insight.endpoints || []).map( - (x) => x.endpointInfo.serviceName - ) + (data.insight.endpoints || []).map((x) => x.endpointInfo.serviceName) ) ]; const serviceString = services.length > 0 ? services.join(", ") : ""; - const dbName = props.data.insight.dbName - ? `[${props.data.insight.dbName}]` - : ""; + const dbName = data.insight.dbName ? `[${data.insight.dbName}]` : ""; const summary = [ `Slow ${dbStatement} query found on db: ${dbName}`, @@ -45,7 +42,7 @@ export const QueryOptimizationInsightTicket = ( .filter(Boolean) .join(" - "); - const queryString = props.data.insight.spanInfo?.displayName || ""; + const queryString = data.insight.spanInfo?.displayName || ""; const renderDescription = () => ( <> @@ -58,18 +55,18 @@ export const QueryOptimizationInsightTicket = (
{queryString}
,
Typical duration for {dbStatement} queries in this DB:{" "} - {getDurationString(props.data.insight.typicalDuration)} + {getDurationString(data.insight.typicalDuration)} {"\n"} - This query: {getDurationString(props.data.insight.duration)} + This query: {getDurationString(data.insight.duration)}
, , , ], @@ -80,7 +77,7 @@ export const QueryOptimizationInsightTicket = ( ); - const traceId = props.data.insight.traceId; + const traceId = data.insight.traceId; const attachments: Attachment[] = [ ...(traceId ? [ @@ -100,8 +97,8 @@ export const QueryOptimizationInsightTicket = ( isLoading }} attachments={attachments} - insight={props.data.insight} - onClose={props.onClose} + insight={data.insight} + onClose={onClose} /> ); }; diff --git a/src/components/Insights/tickets/ScalingIssueInsightTicketByRootCause/ScalingIssueInsightTicketByRootCause.stories.tsx b/src/components/Insights/insightTickets/SpanScalingByRootCauseInsightTicket/SpanScalingByRootCauseInsightTicket.stories.tsx similarity index 69% rename from src/components/Insights/tickets/ScalingIssueInsightTicketByRootCause/ScalingIssueInsightTicketByRootCause.stories.tsx rename to src/components/Insights/insightTickets/SpanScalingByRootCauseInsightTicket/SpanScalingByRootCauseInsightTicket.stories.tsx index a4861f685..087c154f2 100644 --- a/src/components/Insights/tickets/ScalingIssueInsightTicketByRootCause/ScalingIssueInsightTicketByRootCause.stories.tsx +++ b/src/components/Insights/insightTickets/SpanScalingByRootCauseInsightTicket/SpanScalingByRootCauseInsightTicket.stories.tsx @@ -1,15 +1,15 @@ import { Meta, StoryObj } from "@storybook/react"; -import { ScalingIssueInsightTicketByRootCause } from "."; +import { SpanScalingByRootCauseInsightTicket } from "."; import { mockedSpanScalingInsight, ofEndpoint, withRootCause -} from "../../ScalingIssueInsight/mockData"; +} from "../../InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/mockData"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction -const meta: Meta = { - title: "Insights/tickets/ScalingIssueInsightTicketByRootCause", - component: ScalingIssueInsightTicketByRootCause, +const meta: Meta = { + title: "Insights/insightTickets/SpanScalingByRootCauseInsightTicket", + component: SpanScalingByRootCauseInsightTicket, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout layout: "fullscreen" diff --git a/src/components/Insights/tickets/ScalingIssueInsightTicketByRootCause/index.tsx b/src/components/Insights/insightTickets/SpanScalingByRootCauseInsightTicket/index.tsx similarity index 82% rename from src/components/Insights/tickets/ScalingIssueInsightTicketByRootCause/index.tsx rename to src/components/Insights/insightTickets/SpanScalingByRootCauseInsightTicket/index.tsx index daad93759..da651a58b 100644 --- a/src/components/Insights/tickets/ScalingIssueInsightTicketByRootCause/index.tsx +++ b/src/components/Insights/insightTickets/SpanScalingByRootCauseInsightTicket/index.tsx @@ -2,13 +2,13 @@ import { ReactElement, useContext } from "react"; import { InsightType } from "../../../../types"; import { intersperse } from "../../../../utils/intersperse"; import { ConfigContext } from "../../../common/App/ConfigContext"; +import { DigmaSignature } from "../../../common/DigmaSignature"; import { Attachment } from "../../../common/JiraTicket/types"; -import { InsightJiraTicket } from "../../InsightJiraTicket"; -import { RootCauseSpanInfo, SpanScalingBadlyInsight } from "../../types"; +import { RootCauseSpanInfo, SpanScalingInsight } from "../../types"; import { useEndpointDataSource } from "../common"; import { CodeLocations } from "../common/CodeLocations"; import { CommitInfos } from "../common/CommitInfos"; -import { DigmaSignature } from "../common/DigmaSignature"; +import { InsightJiraTicket } from "../common/InsightJiraTicket"; import { ScalingIssueAffectedEndpoints, ScalingIssueDuration, @@ -18,17 +18,19 @@ import { getHistogramAttachment, getScalingIssueSummary, getTraceAttachment -} from "../common/ScalingIssueCommon"; +} from "../common/SpanScaling"; import { InsightTicketProps } from "../types"; -export const ScalingIssueInsightTicketByRootCause = ( - props: InsightTicketProps & { - rootCauseSpanInfo: RootCauseSpanInfo; - } -) => { +export const SpanScalingByRootCauseInsightTicket = ({ + data, + onClose, + rootCauseSpanInfo +}: InsightTicketProps & { + rootCauseSpanInfo: RootCauseSpanInfo; +}) => { const config = useContext(ConfigContext); - const spanInfo = props.rootCauseSpanInfo; + const spanInfo = rootCauseSpanInfo; const { commitInfos, @@ -36,9 +38,9 @@ export const ScalingIssueInsightTicketByRootCause = ( isLoading, codeLocations, onReloadSpanInsight - } = useEndpointDataSource( + } = useEndpointDataSource( spanInfo, - InsightType.SpanScalingBadly + InsightType.SpanScaling ); const renderDescription = () => { @@ -101,9 +103,9 @@ export const ScalingIssueInsightTicketByRootCause = ( spanInsight === null ? "Failed to get insight details" : undefined }} attachments={attachments} - insight={props.data.insight} + insight={data.insight} relatedInsight={spanInsight} - onClose={props.onClose} + onClose={onClose} onReloadSpanInsight={onReloadSpanInsight} /> ); diff --git a/src/components/Insights/tickets/ScalingIssueInsightTicket/SpanScalingInsightTicket.stories.tsx b/src/components/Insights/insightTickets/SpanScalingInsightTicket/SpanScalingInsightTicket.stories.tsx similarity index 70% rename from src/components/Insights/tickets/ScalingIssueInsightTicket/SpanScalingInsightTicket.stories.tsx rename to src/components/Insights/insightTickets/SpanScalingInsightTicket/SpanScalingInsightTicket.stories.tsx index c6314fdb8..0c70d3b1b 100644 --- a/src/components/Insights/tickets/ScalingIssueInsightTicket/SpanScalingInsightTicket.stories.tsx +++ b/src/components/Insights/insightTickets/SpanScalingInsightTicket/SpanScalingInsightTicket.stories.tsx @@ -1,15 +1,15 @@ import { Meta, StoryObj } from "@storybook/react"; -import { ScalingIssueInsightTicket } from "."; +import { SpanScalingInsightTicket } from "."; import { mockedSpanScalingInsight, ofEndpoint, withRootCause -} from "../../ScalingIssueInsight/mockData"; +} from "../../InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/mockData"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction -const meta: Meta = { - title: "Insights/tickets/ScalingIssueInsightTicket", - component: ScalingIssueInsightTicket, +const meta: Meta = { + title: "Insights/insightTickets/SpanScalingInsightTicket", + component: SpanScalingInsightTicket, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout layout: "fullscreen" diff --git a/src/components/Insights/tickets/ScalingIssueInsightTicket/index.tsx b/src/components/Insights/insightTickets/SpanScalingInsightTicket/index.tsx similarity index 79% rename from src/components/Insights/tickets/ScalingIssueInsightTicket/index.tsx rename to src/components/Insights/insightTickets/SpanScalingInsightTicket/index.tsx index e51ad9874..a53f0291e 100644 --- a/src/components/Insights/tickets/ScalingIssueInsightTicket/index.tsx +++ b/src/components/Insights/insightTickets/SpanScalingInsightTicket/index.tsx @@ -1,13 +1,13 @@ import { ReactElement, useContext } from "react"; import { intersperse } from "../../../../utils/intersperse"; import { ConfigContext } from "../../../common/App/ConfigContext"; +import { DigmaSignature } from "../../../common/DigmaSignature"; import { Attachment } from "../../../common/JiraTicket/types"; -import { InsightJiraTicket } from "../../InsightJiraTicket"; -import { SpanScalingBadlyInsight } from "../../types"; +import { SpanScalingInsight } from "../../types"; import { useSpanDataSource } from "../common"; import { CodeLocations } from "../common/CodeLocations"; import { CommitInfos } from "../common/CommitInfos"; -import { DigmaSignature } from "../common/DigmaSignature"; +import { InsightJiraTicket } from "../common/InsightJiraTicket"; import { ScalingIssueAffectedEndpoints, ScalingIssueDuration, @@ -17,21 +17,19 @@ import { getHistogramAttachment, getScalingIssueSummary, getTraceAttachment -} from "../common/ScalingIssueCommon"; +} from "../common/SpanScaling"; import { InsightTicketProps } from "../types"; -export const ScalingIssueInsightTicket = ( - props: InsightTicketProps -) => { +export const SpanScalingInsightTicket = ({ + data, + onClose +}: InsightTicketProps) => { const config = useContext(ConfigContext); - const insight = props.data.insight; + const insight = data.insight; const { commitInfos, isLoading, codeLocations } = - useSpanDataSource( - props.data.insight.spanInfo, - props.data.insight - ); + useSpanDataSource(data.insight.spanInfo, data.insight); const renderDescription = () => { return ( @@ -74,9 +72,9 @@ export const ScalingIssueInsightTicket = ( ); }; - const summary = getScalingIssueSummary(props.data.insight); + const summary = getScalingIssueSummary(data.insight); - const traceId = props.data.insight.affectedEndpoints + const traceId = data.insight.affectedEndpoints ?.map((ep) => ep.sampleTraceId) ?.find((t) => t); const attachmentTrace = getTraceAttachment(config, traceId); @@ -94,8 +92,8 @@ export const ScalingIssueInsightTicket = ( isLoading: isLoading }} attachments={attachments} - insight={props.data.insight} - onClose={props.onClose} + insight={data.insight} + onClose={onClose} /> ); }; diff --git a/src/components/Insights/tickets/common/BottleneckEndpoints/BottleneckEndpoints.stories.tsx b/src/components/Insights/insightTickets/common/BottleneckEndpoints/BottleneckEndpoints.stories.tsx similarity index 56% rename from src/components/Insights/tickets/common/BottleneckEndpoints/BottleneckEndpoints.stories.tsx rename to src/components/Insights/insightTickets/common/BottleneckEndpoints/BottleneckEndpoints.stories.tsx index a134de993..62946cbb3 100644 --- a/src/components/Insights/tickets/common/BottleneckEndpoints/BottleneckEndpoints.stories.tsx +++ b/src/components/Insights/insightTickets/common/BottleneckEndpoints/BottleneckEndpoints.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from "@storybook/react"; import { BottleneckEndpoints } from "."; -import { mockedBottleneckInsight } from "../../../BottleneckInsight/mockData"; +import { mockedSpanEndpointBottleneckInsight } from "../../../InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/mockData"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/tickets/common/BottleneckEndpoints", + title: "Insights/insightTickets/common/BottleneckEndpoints", component: BottleneckEndpoints, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout @@ -16,22 +16,10 @@ export default meta; type Story = StoryObj; -const mockedSlowEndpoints = mockedBottleneckInsight.slowEndpoints || []; - export const Default: Story = { args: { insight: { - ...mockedBottleneckInsight, - slowEndpoints: [ - ...mockedSlowEndpoints, - { - ...mockedSlowEndpoints[0], - endpointInfo: { - ...mockedSlowEndpoints[0].endpointInfo, - route: `${mockedSlowEndpoints[0].endpointInfo.route}1` - } - } - ] + ...mockedSpanEndpointBottleneckInsight } } }; @@ -41,7 +29,7 @@ export const WithoutInsight: Story = {}; export const WithNoSlowEndpoints: Story = { args: { insight: { - ...mockedBottleneckInsight, + ...mockedSpanEndpointBottleneckInsight, slowEndpoints: [] } } diff --git a/src/components/Insights/tickets/common/BottleneckEndpoints/index.tsx b/src/components/Insights/insightTickets/common/BottleneckEndpoints/index.tsx similarity index 80% rename from src/components/Insights/tickets/common/BottleneckEndpoints/index.tsx rename to src/components/Insights/insightTickets/common/BottleneckEndpoints/index.tsx index af575ee54..884b2f9c0 100644 --- a/src/components/Insights/tickets/common/BottleneckEndpoints/index.tsx +++ b/src/components/Insights/insightTickets/common/BottleneckEndpoints/index.tsx @@ -4,12 +4,12 @@ import { trimEndpointScheme } from "../../../../../utils/trimEndpointScheme"; import * as s from "./styles"; import { BottleneckEndpointsProps } from "./types"; -export const BottleneckEndpoints = (props: BottleneckEndpointsProps) => { - if (!props.insight) { +export const BottleneckEndpoints = ({ insight }: BottleneckEndpointsProps) => { + if (!insight) { return null; } - const endpoints = props.insight.slowEndpoints || []; + const endpoints = insight.slowEndpoints || []; if (endpoints.length === 0) { return null; @@ -18,7 +18,7 @@ export const BottleneckEndpoints = (props: BottleneckEndpointsProps) => { return (
- The span {props.insight.spanInfo?.displayName || ""} is slowing down the + The span {insight.spanInfo?.displayName || ""} is slowing down the following endpoints:
diff --git a/src/components/Insights/tickets/common/BottleneckEndpoints/styles.ts b/src/components/Insights/insightTickets/common/BottleneckEndpoints/styles.ts similarity index 100% rename from src/components/Insights/tickets/common/BottleneckEndpoints/styles.ts rename to src/components/Insights/insightTickets/common/BottleneckEndpoints/styles.ts diff --git a/src/components/Insights/tickets/common/BottleneckEndpoints/types.ts b/src/components/Insights/insightTickets/common/BottleneckEndpoints/types.ts similarity index 100% rename from src/components/Insights/tickets/common/BottleneckEndpoints/types.ts rename to src/components/Insights/insightTickets/common/BottleneckEndpoints/types.ts diff --git a/src/components/Insights/tickets/common/CodeLocations/CodeLocations.stories.tsx b/src/components/Insights/insightTickets/common/CodeLocations/CodeLocations.stories.tsx similarity index 91% rename from src/components/Insights/tickets/common/CodeLocations/CodeLocations.stories.tsx rename to src/components/Insights/insightTickets/common/CodeLocations/CodeLocations.stories.tsx index f29549869..bca97070c 100644 --- a/src/components/Insights/tickets/common/CodeLocations/CodeLocations.stories.tsx +++ b/src/components/Insights/insightTickets/common/CodeLocations/CodeLocations.stories.tsx @@ -3,7 +3,7 @@ import { CodeLocations } from "."; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/tickets/common/CodeLocations", + title: "Insights/insightTickets/common/CodeLocations", component: CodeLocations, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/Insights/tickets/common/CodeLocations/index.tsx b/src/components/Insights/insightTickets/common/CodeLocations/index.tsx similarity index 60% rename from src/components/Insights/tickets/common/CodeLocations/index.tsx rename to src/components/Insights/insightTickets/common/CodeLocations/index.tsx index 3198ddad7..d1b08ac01 100644 --- a/src/components/Insights/tickets/common/CodeLocations/index.tsx +++ b/src/components/Insights/insightTickets/common/CodeLocations/index.tsx @@ -1,8 +1,8 @@ import * as s from "./styles"; import { CodeLocationsProps } from "./types"; -export const CodeLocations = (props: CodeLocationsProps) => { - if (!props.codeLocations || props.codeLocations.length === 0) { +export const CodeLocations = ({ codeLocations }: CodeLocationsProps) => { + if (!codeLocations || codeLocations.length === 0) { return null; } @@ -10,7 +10,7 @@ export const CodeLocations = (props: CodeLocationsProps) => {
Related code locations:
- {props.codeLocations.map((x) => ( + {codeLocations.map((x) => (
{x}
))} diff --git a/src/components/Insights/tickets/common/CodeLocations/styles.ts b/src/components/Insights/insightTickets/common/CodeLocations/styles.ts similarity index 100% rename from src/components/Insights/tickets/common/CodeLocations/styles.ts rename to src/components/Insights/insightTickets/common/CodeLocations/styles.ts diff --git a/src/components/Insights/tickets/common/CodeLocations/types.ts b/src/components/Insights/insightTickets/common/CodeLocations/types.ts similarity index 100% rename from src/components/Insights/tickets/common/CodeLocations/types.ts rename to src/components/Insights/insightTickets/common/CodeLocations/types.ts diff --git a/src/components/Insights/tickets/common/CommitInfos/CommitInfos.stories.tsx b/src/components/Insights/insightTickets/common/CommitInfos/CommitInfos.stories.tsx similarity index 61% rename from src/components/Insights/tickets/common/CommitInfos/CommitInfos.stories.tsx rename to src/components/Insights/insightTickets/common/CommitInfos/CommitInfos.stories.tsx index 1dadc71db..941d12edb 100644 --- a/src/components/Insights/tickets/common/CommitInfos/CommitInfos.stories.tsx +++ b/src/components/Insights/insightTickets/common/CommitInfos/CommitInfos.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from "@storybook/react"; import { CommitInfos } from "."; -import { mockedNPlusOneInsight } from "../../../NPlusOneInsight/mockData"; +import { mockedSpaNPlusOneInsight } from "../../../InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/mockData"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/tickets/common/CommitInfos", + title: "Insights/insightTickets/common/CommitInfos", component: CommitInfos, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout @@ -18,16 +18,16 @@ type Story = StoryObj; export const Default: Story = { args: { - insight: mockedNPlusOneInsight, + insight: mockedSpaNPlusOneInsight, commitInfos: { commitInfos: { - [mockedNPlusOneInsight.firstCommitId as string]: { - commit: mockedNPlusOneInsight.firstCommitId as string, - url: mockedNPlusOneInsight.firstCommitId as string + [mockedSpaNPlusOneInsight.firstCommitId as string]: { + commit: mockedSpaNPlusOneInsight.firstCommitId as string, + url: mockedSpaNPlusOneInsight.firstCommitId as string }, - [mockedNPlusOneInsight.lastCommitId as string]: { - commit: mockedNPlusOneInsight.lastCommitId as string, - url: mockedNPlusOneInsight.firstCommitId as string + [mockedSpaNPlusOneInsight.lastCommitId as string]: { + commit: mockedSpaNPlusOneInsight.lastCommitId as string, + url: mockedSpaNPlusOneInsight.firstCommitId as string } } } @@ -39,7 +39,7 @@ export const WithoutInsight: Story = {}; export const WithoutCommits: Story = { args: { insight: { - ...mockedNPlusOneInsight, + ...mockedSpaNPlusOneInsight, firstCommitId: null, lastCommitId: null } @@ -49,7 +49,7 @@ export const WithoutCommits: Story = { export const WithoutCommitsDates: Story = { args: { insight: { - ...mockedNPlusOneInsight, + ...mockedSpaNPlusOneInsight, firstDetected: null, lastDetected: null } @@ -59,7 +59,7 @@ export const WithoutCommitsDates: Story = { export const WithoutCommitsAndDates: Story = { args: { insight: { - ...mockedNPlusOneInsight, + ...mockedSpaNPlusOneInsight, firstCommitId: null, lastCommitId: null, firstDetected: null, @@ -70,13 +70,13 @@ export const WithoutCommitsAndDates: Story = { export const WithoutCommitInfos: Story = { args: { - insight: mockedNPlusOneInsight + insight: mockedSpaNPlusOneInsight } }; export const WithEmptyCommitInfos: Story = { args: { - insight: mockedNPlusOneInsight, + insight: mockedSpaNPlusOneInsight, commitInfos: { commitInfos: {} } diff --git a/src/components/Insights/tickets/common/CommitInfos/index.tsx b/src/components/Insights/insightTickets/common/CommitInfos/index.tsx similarity index 82% rename from src/components/Insights/tickets/common/CommitInfos/index.tsx rename to src/components/Insights/insightTickets/common/CommitInfos/index.tsx index 9154fc967..73330271c 100644 --- a/src/components/Insights/tickets/common/CommitInfos/index.tsx +++ b/src/components/Insights/insightTickets/common/CommitInfos/index.tsx @@ -33,21 +33,21 @@ const renderCommit = ( return commitId; }; -export const CommitInfos = (props: CommitInfosProps) => { - if (!props.insight) { +export const CommitInfos = ({ insight, commitInfos }: CommitInfosProps) => { + if (!insight) { return null; } const commits = [ { label: "First Detected:", - id: props.insight.firstCommitId, - dateTime: props.insight.firstDetected + id: insight.firstCommitId, + dateTime: insight.firstDetected }, { label: "Last Detected:", - id: props.insight.lastCommitId, - dateTime: props.insight.lastDetected + id: insight.lastCommitId, + dateTime: insight.lastDetected } ].filter((x) => x.id || x.dateTime); @@ -61,7 +61,7 @@ export const CommitInfos = (props: CommitInfosProps) => { commits.map((x) => (
{x.label}
-
{renderCommit(props.commitInfos, x.id)}
+
{renderCommit(commitInfos, x.id)}
{x.dateTime && (
{format(new Date(x.dateTime), "MM/dd/yyyy HH:mm")}
)} diff --git a/src/components/Insights/tickets/common/CommitInfos/styles.ts b/src/components/Insights/insightTickets/common/CommitInfos/styles.ts similarity index 100% rename from src/components/Insights/tickets/common/CommitInfos/styles.ts rename to src/components/Insights/insightTickets/common/CommitInfos/styles.ts diff --git a/src/components/Insights/tickets/common/CommitInfos/types.ts b/src/components/Insights/insightTickets/common/CommitInfos/types.ts similarity index 100% rename from src/components/Insights/tickets/common/CommitInfos/types.ts rename to src/components/Insights/insightTickets/common/CommitInfos/types.ts diff --git a/src/components/Insights/InsightJiraTicket/InsightJiraTicket.stories.tsx b/src/components/Insights/insightTickets/common/InsightJiraTicket/InsightJiraTicket.stories.tsx similarity index 85% rename from src/components/Insights/InsightJiraTicket/InsightJiraTicket.stories.tsx rename to src/components/Insights/insightTickets/common/InsightJiraTicket/InsightJiraTicket.stories.tsx index 3ba20811a..e5e565e19 100644 --- a/src/components/Insights/InsightJiraTicket/InsightJiraTicket.stories.tsx +++ b/src/components/Insights/insightTickets/common/InsightJiraTicket/InsightJiraTicket.stories.tsx @@ -1,11 +1,15 @@ import { Meta, StoryObj } from "@storybook/react"; import { InsightJiraTicket } from "."; -import { InsightType } from "../../../types"; -import { InsightCategory, InsightScope, SpanUsagesInsight } from "../types"; +import { InsightType } from "../../../../../types"; +import { + InsightCategory, + InsightScope, + SpanUsagesInsight +} from "../../../types"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/JiraTicket", + title: "Insights/insightTickets/common/InsightJiraTicket", component: InsightJiraTicket, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout @@ -78,19 +82,19 @@ export const Linked: Story = { export const Unlinked: Story = { args: { - summary: "", + summary: "Summary text", description: { content: "Multiline\ndescription text", isLoading: false }, attachments: [ { url: "https://www.example.com", fileName: "attachment.ext" } ], - insight: { ...insight, ticketLink: "https://digma.ai/ticket/1" } + insight: { ...insight } } }; export const SingleAttachment: Story = { args: { - summary: "", - description: { content: "Description text", isLoading: false }, + summary: "Summary text", + description: { content: "Multiline\ndescription text", isLoading: false }, attachments: [ { url: "https://www.example.com", fileName: "attachment.ext" } ], @@ -98,10 +102,10 @@ export const SingleAttachment: Story = { } }; -export const MultiAttachments: Story = { +export const MultipleAttachments: Story = { args: { summary: "Summary text", - description: { content: "Description text", isLoading: false }, + description: { content: "Multiline\ndescription text", isLoading: false }, attachments: [ { url: "https://www.example.com", fileName: "attachment_1.ext" }, { url: "https://www.example.com", fileName: "attachment_2.ext" } diff --git a/src/components/Insights/InsightJiraTicket/index.tsx b/src/components/Insights/insightTickets/common/InsightJiraTicket/index.tsx similarity index 61% rename from src/components/Insights/InsightJiraTicket/index.tsx rename to src/components/Insights/insightTickets/common/InsightJiraTicket/index.tsx index b4f8fdd64..44756e00b 100644 --- a/src/components/Insights/InsightJiraTicket/index.tsx +++ b/src/components/Insights/insightTickets/common/InsightJiraTicket/index.tsx @@ -1,21 +1,29 @@ import { useContext, useEffect, useState } from "react"; -import { dispatcher } from "../../../dispatcher"; -import { getFeatureFlagValue } from "../../../featureFlags"; -import { FeatureFlag } from "../../../types"; -import { isValidHttpUrl } from "../../../utils/isValidUrl"; -import { ConfigContext } from "../../common/App/ConfigContext"; -import { JiraTicket } from "../../common/JiraTicket"; -import { actions } from "../actions"; +import { dispatcher } from "../../../../../dispatcher"; +import { getFeatureFlagValue } from "../../../../../featureFlags"; +import { FeatureFlag } from "../../../../../types"; +import { isValidHttpUrl } from "../../../../../utils/isValidUrl"; +import { ConfigContext } from "../../../../common/App/ConfigContext"; +import { JiraTicket } from "../../../../common/JiraTicket"; +import { actions } from "../../../actions"; import { InsightJiraTicketProps, InsightsGetDataListQuery, LinkTicketResponse } from "./types"; -export const InsightJiraTicket = (props: InsightJiraTicketProps) => { +export const InsightJiraTicket = ({ + insight, + relatedInsight, + onReloadSpanInsight, + description, + summary, + attachments, + onClose +}: InsightJiraTicketProps) => { const [errorMessage, setErrorMessage] = useState(); const [ticketLink, setTicketLink] = useState( - props.relatedInsight?.ticketLink ?? props.insight.ticketLink + relatedInsight?.ticketLink ?? insight.ticketLink ); const config = useContext(ConfigContext); @@ -30,9 +38,8 @@ export const InsightJiraTicket = (props: InsightJiraTicketProps) => { action: actions.LINK_TICKET, payload: { codeObjectId: - props.relatedInsight?.codeObjectId ?? - props.insight.prefixedCodeObjectId, - insightType: props.relatedInsight?.type ?? props.insight.type, + relatedInsight?.codeObjectId ?? insight.prefixedCodeObjectId, + insightType: relatedInsight?.type ?? insight.type, ticketLink: link } }); @@ -46,9 +53,8 @@ export const InsightJiraTicket = (props: InsightJiraTicketProps) => { action: actions.UNLINK_TICKET, payload: { codeObjectId: - props.relatedInsight?.codeObjectId ?? - props.insight.prefixedCodeObjectId, - insightType: props.relatedInsight?.type ?? props.insight.type + relatedInsight?.codeObjectId ?? insight.prefixedCodeObjectId, + insightType: relatedInsight?.type ?? insight.type } }); }; @@ -69,7 +75,7 @@ export const InsightJiraTicket = (props: InsightJiraTicketProps) => { payload: { query: config.state.insights.query } }); - props.onReloadSpanInsight && props.onReloadSpanInsight(); + onReloadSpanInsight && onReloadSpanInsight(); }; dispatcher.addActionListener( @@ -83,20 +89,20 @@ export const InsightJiraTicket = (props: InsightJiraTicketProps) => { handleInsightTicketLink ); }; - }, [config.state?.insights?.query]); + }, [config.state?.insights?.query, onReloadSpanInsight]); useEffect(() => { - if (props.relatedInsight) { - setTicketLink(props.relatedInsight.ticketLink); + if (relatedInsight) { + setTicketLink(relatedInsight.ticketLink); } - }, [props.relatedInsight]); + }, [relatedInsight]); return ( = { + title: "Insights/insightTickets/common/NPlusOneEndpoints", + component: NPlusOneEndpoints, + 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; + +export const Default: Story = { + args: { + insight: { + ...mockedSpaNPlusOneInsight + } + } +}; + +export const WithoutInsight: Story = {}; + +export const WithoutAffectedEndpoints: Story = { + args: { + insight: { + ...mockedSpaNPlusOneInsight, + endpoints: [] + } + } +}; diff --git a/src/components/Insights/tickets/common/NPlusOneAffectedEndpoints/index.tsx b/src/components/Insights/insightTickets/common/NPlusOneEndpoints/index.tsx similarity index 78% rename from src/components/Insights/tickets/common/NPlusOneAffectedEndpoints/index.tsx rename to src/components/Insights/insightTickets/common/NPlusOneEndpoints/index.tsx index d7f9573b9..9c69a4157 100644 --- a/src/components/Insights/tickets/common/NPlusOneAffectedEndpoints/index.tsx +++ b/src/components/Insights/insightTickets/common/NPlusOneEndpoints/index.tsx @@ -1,16 +1,14 @@ import { getCriticalityLabel } from "../../../../../utils/getCriticalityLabel"; import { trimEndpointScheme } from "../../../../../utils/trimEndpointScheme"; import * as s from "./styles"; -import { NPlusOneAffectedEndpointsProps } from "./types"; +import { NPlusOneEndpointsProps } from "./types"; -export const NPlusOneAffectedEndpoints = ( - props: NPlusOneAffectedEndpointsProps -) => { - if (!props.insight) { +export const NPlusOneEndpoints = ({ insight }: NPlusOneEndpointsProps) => { + if (!insight) { return null; } - const endpoints = props.insight.endpoints || []; + const endpoints = insight.endpoints || []; if (endpoints.length === 0) { return null; diff --git a/src/components/Insights/tickets/common/NPlusOneAffectedEndpoints/styles.ts b/src/components/Insights/insightTickets/common/NPlusOneEndpoints/styles.ts similarity index 100% rename from src/components/Insights/tickets/common/NPlusOneAffectedEndpoints/styles.ts rename to src/components/Insights/insightTickets/common/NPlusOneEndpoints/styles.ts diff --git a/src/components/Insights/insightTickets/common/NPlusOneEndpoints/types.ts b/src/components/Insights/insightTickets/common/NPlusOneEndpoints/types.ts new file mode 100644 index 000000000..c761b9f60 --- /dev/null +++ b/src/components/Insights/insightTickets/common/NPlusOneEndpoints/types.ts @@ -0,0 +1,5 @@ +import { SpaNPlusOneInsight } from "../../../types"; + +export interface NPlusOneEndpointsProps { + insight: SpaNPlusOneInsight | null; +} diff --git a/src/components/Insights/tickets/common/QueryOptimizationEndpoints/QueryOptimizationEndpoints.stories.tsx b/src/components/Insights/insightTickets/common/QueryOptimizationEndpoints/QueryOptimizationEndpoints.stories.tsx similarity index 68% rename from src/components/Insights/tickets/common/QueryOptimizationEndpoints/QueryOptimizationEndpoints.stories.tsx rename to src/components/Insights/insightTickets/common/QueryOptimizationEndpoints/QueryOptimizationEndpoints.stories.tsx index efa3bd6f9..d288a6bd0 100644 --- a/src/components/Insights/tickets/common/QueryOptimizationEndpoints/QueryOptimizationEndpoints.stories.tsx +++ b/src/components/Insights/insightTickets/common/QueryOptimizationEndpoints/QueryOptimizationEndpoints.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from "@storybook/react"; import { QueryOptimizationEndpoints } from "."; -import { mockedQueryOptimizationInsight } from "../../../QueryOptimizationInsight/mockData"; +import { mockedSpanQueryOptimizationInsight } from "../../../InsightsCatalog/InsightsPage/insightCards/SpanQueryOptimizationInsightCard/mockData"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "Insights/tickets/common/QueryOptimizationEndpoints", + title: "Insights/insightTickets/common/QueryOptimizationEndpoints", component: QueryOptimizationEndpoints, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout @@ -16,12 +16,12 @@ export default meta; type Story = StoryObj; -const mockedEndpoints = mockedQueryOptimizationInsight.endpoints || []; +const mockedEndpoints = mockedSpanQueryOptimizationInsight.endpoints || []; export const Default: Story = { args: { insight: { - ...mockedQueryOptimizationInsight, + ...mockedSpanQueryOptimizationInsight, endpoints: [ ...mockedEndpoints, { @@ -38,10 +38,10 @@ export const Default: Story = { export const WithoutInsight: Story = {}; -export const WithNoAffectedEndpoints: Story = { +export const WithoutAffectedEndpoints: Story = { args: { insight: { - ...mockedQueryOptimizationInsight, + ...mockedSpanQueryOptimizationInsight, endpoints: [] } } diff --git a/src/components/Insights/tickets/common/QueryOptimizationEndpoints/index.tsx b/src/components/Insights/insightTickets/common/QueryOptimizationEndpoints/index.tsx similarity index 78% rename from src/components/Insights/tickets/common/QueryOptimizationEndpoints/index.tsx rename to src/components/Insights/insightTickets/common/QueryOptimizationEndpoints/index.tsx index 76ced561a..60636a5d9 100644 --- a/src/components/Insights/tickets/common/QueryOptimizationEndpoints/index.tsx +++ b/src/components/Insights/insightTickets/common/QueryOptimizationEndpoints/index.tsx @@ -2,14 +2,14 @@ import { trimEndpointScheme } from "../../../../../utils/trimEndpointScheme"; import * as s from "./styles"; import { QueryOptimizationEndpointsProps } from "./types"; -export const QueryOptimizationEndpoints = ( - props: QueryOptimizationEndpointsProps -) => { - if (!props.insight) { +export const QueryOptimizationEndpoints = ({ + insight +}: QueryOptimizationEndpointsProps) => { + if (!insight) { return null; } - const endpoints = props.insight.endpoints || []; + const endpoints = insight.endpoints || []; if (endpoints.length === 0) { return null; diff --git a/src/components/Insights/tickets/common/QueryOptimizationEndpoints/styles.ts b/src/components/Insights/insightTickets/common/QueryOptimizationEndpoints/styles.ts similarity index 100% rename from src/components/Insights/tickets/common/QueryOptimizationEndpoints/styles.ts rename to src/components/Insights/insightTickets/common/QueryOptimizationEndpoints/styles.ts diff --git a/src/components/Insights/insightTickets/common/QueryOptimizationEndpoints/types.ts b/src/components/Insights/insightTickets/common/QueryOptimizationEndpoints/types.ts new file mode 100644 index 000000000..afecdb199 --- /dev/null +++ b/src/components/Insights/insightTickets/common/QueryOptimizationEndpoints/types.ts @@ -0,0 +1,5 @@ +import { SpanQueryOptimizationInsight } from "../../../types"; + +export interface QueryOptimizationEndpointsProps { + insight: SpanQueryOptimizationInsight | null; +} diff --git a/src/components/Insights/insightTickets/common/SpanScaling/SpanScalingDuration/index.tsx b/src/components/Insights/insightTickets/common/SpanScaling/SpanScalingDuration/index.tsx new file mode 100644 index 000000000..375c82d11 --- /dev/null +++ b/src/components/Insights/insightTickets/common/SpanScaling/SpanScalingDuration/index.tsx @@ -0,0 +1,18 @@ +import { getDurationString } from "../../../../../../utils/getDurationString"; +import { ScalingIssueCommonProps } from "../types"; + +export const ScalingIssueDuration = ({ insight }: ScalingIssueCommonProps) => { + if (!insight) { + return null; + } + + return ( +
+ Duration range: + + {getDurationString(insight.minDuration)} -{" "} + {getDurationString(insight.maxDuration)} + +
+ ); +}; diff --git a/src/components/Insights/tickets/common/ScalingIssueCommon/ScalingIssueAffectedEndpoints/index.tsx b/src/components/Insights/insightTickets/common/SpanScaling/SpanScalingEndpoints/index.tsx similarity index 75% rename from src/components/Insights/tickets/common/ScalingIssueCommon/ScalingIssueAffectedEndpoints/index.tsx rename to src/components/Insights/insightTickets/common/SpanScaling/SpanScalingEndpoints/index.tsx index e2cad8dab..dcc556a9d 100644 --- a/src/components/Insights/tickets/common/ScalingIssueCommon/ScalingIssueAffectedEndpoints/index.tsx +++ b/src/components/Insights/insightTickets/common/SpanScaling/SpanScalingEndpoints/index.tsx @@ -2,14 +2,14 @@ import { trimEndpointScheme } from "../../../../../../utils/trimEndpointScheme"; import * as s from "../styles"; import { ScalingIssueCommonProps } from "../types"; -export const ScalingIssueAffectedEndpoints = ( - props: ScalingIssueCommonProps -) => { - if (!props.insight) { +export const ScalingIssueAffectedEndpoints = ({ + insight +}: ScalingIssueCommonProps) => { + if (!insight) { return null; } - const endpoints = props.insight.affectedEndpoints || []; + const endpoints = insight.affectedEndpoints || []; if (endpoints.length === 0) { return null; diff --git a/src/components/Insights/insightTickets/common/SpanScaling/SpanScalingMessage/index.tsx b/src/components/Insights/insightTickets/common/SpanScaling/SpanScalingMessage/index.tsx new file mode 100644 index 000000000..b3b2e0c6d --- /dev/null +++ b/src/components/Insights/insightTickets/common/SpanScaling/SpanScalingMessage/index.tsx @@ -0,0 +1,9 @@ +import { ScalingIssueCommonProps } from "../types"; + +export const ScalingIssueMessage = ({ insight }: ScalingIssueCommonProps) => { + if (!insight) { + return null; + } + + return
{insight.shortDisplayInfo.description}
; +}; diff --git a/src/components/Insights/tickets/common/ScalingIssueCommon/ScalingIssueRootCauses/index.tsx b/src/components/Insights/insightTickets/common/SpanScaling/SpanScalingRootCauses/index.tsx similarity index 70% rename from src/components/Insights/tickets/common/ScalingIssueCommon/ScalingIssueRootCauses/index.tsx rename to src/components/Insights/insightTickets/common/SpanScaling/SpanScalingRootCauses/index.tsx index 17a4e0ad6..a4c887ebc 100644 --- a/src/components/Insights/tickets/common/ScalingIssueCommon/ScalingIssueRootCauses/index.tsx +++ b/src/components/Insights/insightTickets/common/SpanScaling/SpanScalingRootCauses/index.tsx @@ -1,12 +1,14 @@ import * as s from "../styles"; import { ScalingIssueCommonProps } from "../types"; -export const ScalingIssueRootCauses = (props: ScalingIssueCommonProps) => { - if (!props.insight) { +export const ScalingIssueRootCauses = ({ + insight +}: ScalingIssueCommonProps) => { + if (!insight) { return null; } - const rootCauses = props.insight.rootCauseSpans; + const rootCauses = insight.rootCauseSpans; if (rootCauses.length === 0) { return null; diff --git a/src/components/Insights/insightTickets/common/SpanScaling/SpanScalingTestedConcurrency/index.tsx b/src/components/Insights/insightTickets/common/SpanScaling/SpanScalingTestedConcurrency/index.tsx new file mode 100644 index 000000000..d3ca05fd5 --- /dev/null +++ b/src/components/Insights/insightTickets/common/SpanScaling/SpanScalingTestedConcurrency/index.tsx @@ -0,0 +1,11 @@ +import { ScalingIssueCommonProps } from "../types"; + +export const ScalingIssueTestedConcurrency = ({ + insight +}: ScalingIssueCommonProps) => { + if (!insight) { + return null; + } + + return
Tested concurrency: {insight.maxConcurrency}
; +}; diff --git a/src/components/Insights/tickets/common/ScalingIssueCommon/index.tsx b/src/components/Insights/insightTickets/common/SpanScaling/index.tsx similarity index 82% rename from src/components/Insights/tickets/common/ScalingIssueCommon/index.tsx rename to src/components/Insights/insightTickets/common/SpanScaling/index.tsx index ce8da9e22..b8aeb9894 100644 --- a/src/components/Insights/tickets/common/ScalingIssueCommon/index.tsx +++ b/src/components/Insights/insightTickets/common/SpanScaling/index.tsx @@ -1,15 +1,15 @@ import { getCriticalityLabel } from "../../../../../utils/getCriticalityLabel"; -import { SpanScalingBadlyInsight } from "../../../types"; import { ConfigContextData } from "../../../../common/App/types"; -import { ScalingIssueAffectedEndpoints as ScalingIssueAffectedEndpoints_ } from "./ScalingIssueAffectedEndpoints"; -import { ScalingIssueRootCauses as ScalingIssueRootCauses_ } from "./ScalingIssueRootCauses"; -import { ScalingIssueDuration as ScalingIssueDuration_ } from "./ScalingIssueDuration"; -import { ScalingIssueTestedConcurrency as ScalingIssueTestedConcurrency_ } from "./ScalingIssueTestedConcurrency"; -import { ScalingIssueMessage as ScalingIssueMessage_ } from "./ScalingIssueMessage"; +import { SpanScalingInsight } from "../../../types"; +import { ScalingIssueDuration as ScalingIssueDuration_ } from "./SpanScalingDuration"; +import { ScalingIssueAffectedEndpoints as ScalingIssueAffectedEndpoints_ } from "./SpanScalingEndpoints"; +import { ScalingIssueMessage as ScalingIssueMessage_ } from "./SpanScalingMessage"; +import { ScalingIssueRootCauses as ScalingIssueRootCauses_ } from "./SpanScalingRootCauses"; +import { ScalingIssueTestedConcurrency as ScalingIssueTestedConcurrency_ } from "./SpanScalingTestedConcurrency"; export const getHistogramAttachment = ( config: ConfigContextData, - insight: SpanScalingBadlyInsight | null + insight: SpanScalingInsight | null ) => { if (!insight) { return undefined; @@ -42,9 +42,7 @@ export const getTraceAttachment = ( }; }; -export const getScalingIssueSummary = ( - insight: SpanScalingBadlyInsight | null -) => { +export const getScalingIssueSummary = (insight: SpanScalingInsight | null) => { const criticalityString = insight && insight.criticality > 0 ? `Criticality: ${getCriticalityLabel(insight.criticality)}` diff --git a/src/components/Insights/tickets/common/ScalingIssueCommon/styles.ts b/src/components/Insights/insightTickets/common/SpanScaling/styles.ts similarity index 100% rename from src/components/Insights/tickets/common/ScalingIssueCommon/styles.ts rename to src/components/Insights/insightTickets/common/SpanScaling/styles.ts diff --git a/src/components/Insights/insightTickets/common/SpanScaling/types.ts b/src/components/Insights/insightTickets/common/SpanScaling/types.ts new file mode 100644 index 000000000..d47c99041 --- /dev/null +++ b/src/components/Insights/insightTickets/common/SpanScaling/types.ts @@ -0,0 +1,5 @@ +import { SpanScalingInsight } from "../../../types"; + +export interface ScalingIssueCommonProps { + insight: SpanScalingInsight | null; +} diff --git a/src/components/Insights/tickets/common/index.ts b/src/components/Insights/insightTickets/common/index.ts similarity index 100% rename from src/components/Insights/tickets/common/index.ts rename to src/components/Insights/insightTickets/common/index.ts diff --git a/src/components/Insights/tickets/common/useCodeLocations.ts b/src/components/Insights/insightTickets/common/useCodeLocations.ts similarity index 100% rename from src/components/Insights/tickets/common/useCodeLocations.ts rename to src/components/Insights/insightTickets/common/useCodeLocations.ts diff --git a/src/components/Insights/tickets/common/useCommitInfos.ts b/src/components/Insights/insightTickets/common/useCommitInfos.ts similarity index 100% rename from src/components/Insights/tickets/common/useCommitInfos.ts rename to src/components/Insights/insightTickets/common/useCommitInfos.ts diff --git a/src/components/Insights/tickets/common/useEndpointDataSource.ts b/src/components/Insights/insightTickets/common/useEndpointDataSource.ts similarity index 100% rename from src/components/Insights/tickets/common/useEndpointDataSource.ts rename to src/components/Insights/insightTickets/common/useEndpointDataSource.ts diff --git a/src/components/Insights/tickets/common/useLoading.ts b/src/components/Insights/insightTickets/common/useLoading.ts similarity index 100% rename from src/components/Insights/tickets/common/useLoading.ts rename to src/components/Insights/insightTickets/common/useLoading.ts diff --git a/src/components/Insights/tickets/common/useSpanDataSource.ts b/src/components/Insights/insightTickets/common/useSpanDataSource.ts similarity index 100% rename from src/components/Insights/tickets/common/useSpanDataSource.ts rename to src/components/Insights/insightTickets/common/useSpanDataSource.ts diff --git a/src/components/Insights/tickets/getInsightCommits.ts b/src/components/Insights/insightTickets/getInsightCommits.ts similarity index 100% rename from src/components/Insights/tickets/getInsightCommits.ts rename to src/components/Insights/insightTickets/getInsightCommits.ts diff --git a/src/components/Insights/tickets/types.ts b/src/components/Insights/insightTickets/types.ts similarity index 100% rename from src/components/Insights/tickets/types.ts rename to src/components/Insights/insightTickets/types.ts diff --git a/src/components/Insights/tickets/EndpointNPlusOneInsightTicket/EndpointNPlusOneTicket.stories.tsx b/src/components/Insights/tickets/EndpointNPlusOneInsightTicket/EndpointNPlusOneTicket.stories.tsx deleted file mode 100644 index 3df9e3a86..000000000 --- a/src/components/Insights/tickets/EndpointNPlusOneInsightTicket/EndpointNPlusOneTicket.stories.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { Meta, StoryObj } from "@storybook/react"; -import { EndpointNPlusOneInsightTicket } from "."; -import { mockedEndpointNPlusOneInsight } from "../../EndpointNPlusOneInsight/mockData"; -import { InsightType } from "../../types"; - -// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction -const meta: Meta = { - title: "Insights/tickets/EndpointNPlusOneTicket", - component: EndpointNPlusOneInsightTicket, - 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; - -export const Default: Story = { - args: { - data: { - insight: { - ...mockedEndpointNPlusOneInsight, - type: InsightType.EndpointSpanNPlusOneV2, - span: { - ...mockedEndpointNPlusOneInsight.spans[0], - requestPercentage: 0.5 - } - }, - spanCodeObjectId: - mockedEndpointNPlusOneInsight.spans[0].clientSpan.spanCodeObjectId - } - } -}; diff --git a/src/components/Insights/tickets/QueryOptimizationInsightTicket/QueryOptimizationInsightTicket.stories.tsx b/src/components/Insights/tickets/QueryOptimizationInsightTicket/QueryOptimizationInsightTicket.stories.tsx deleted file mode 100644 index bf953be6f..000000000 --- a/src/components/Insights/tickets/QueryOptimizationInsightTicket/QueryOptimizationInsightTicket.stories.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { Meta, StoryObj } from "@storybook/react"; -import { QueryOptimizationInsightTicket } from "."; -import { mockedQueryOptimizationInsight } from "../../QueryOptimizationInsight/mockData"; - -// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction -const meta: Meta = { - title: "Insights/tickets/QueryOptimizationInsightTicket", - component: QueryOptimizationInsightTicket, - 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; - -export const Default: Story = { - args: { - data: { - insight: mockedQueryOptimizationInsight - } - } -}; diff --git a/src/components/Insights/tickets/SpanBottleneckInsightTicket/SpanBottleneckInsightTicket.stories.tsx b/src/components/Insights/tickets/SpanBottleneckInsightTicket/SpanBottleneckInsightTicket.stories.tsx deleted file mode 100644 index 75bedc043..000000000 --- a/src/components/Insights/tickets/SpanBottleneckInsightTicket/SpanBottleneckInsightTicket.stories.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { Meta, StoryObj } from "@storybook/react"; -import { SpanBottleneckInsightTicket } from "."; -import { mockedSpanBottleneckInsight } from "../../SpanBottleneckInsight/mockData"; -import { InsightType } from "../../types"; - -// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction -const meta: Meta = { - title: "Insights/tickets/SpanBottleneckInsightTicket", - component: SpanBottleneckInsightTicket, - 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; - -export const Default: Story = { - args: { - data: { - insight: { - ...mockedSpanBottleneckInsight, - type: InsightType.EndpointBottleneck, - span: { - ...mockedSpanBottleneckInsight.spans[0], - requestPercentage: 0.4, - avgFractionWhenBeingBottleneck: 0.3, - traceId: "traceId" - } - }, - spanCodeObjectId: - mockedSpanBottleneckInsight.spans[0].spanInfo.spanCodeObjectId - } - } -}; diff --git a/src/components/Insights/tickets/common/NPlusOneAffectedEndpoints/NPlusOneAffectedEndpoints.stories.tsx b/src/components/Insights/tickets/common/NPlusOneAffectedEndpoints/NPlusOneAffectedEndpoints.stories.tsx deleted file mode 100644 index f0632124c..000000000 --- a/src/components/Insights/tickets/common/NPlusOneAffectedEndpoints/NPlusOneAffectedEndpoints.stories.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { Meta, StoryObj } from "@storybook/react"; -import { NPlusOneAffectedEndpoints } from "."; -import { mockedNPlusOneInsight } from "../../../NPlusOneInsight/mockData"; - -// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction -const meta: Meta = { - title: "Insights/tickets/common/NPlusOneAffectedEndpoints", - component: NPlusOneAffectedEndpoints, - 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; - -const mockedEndpoints = mockedNPlusOneInsight.endpoints || []; - -export const Default: Story = { - args: { - insight: { - ...mockedNPlusOneInsight, - endpoints: [ - ...mockedEndpoints, - { - ...mockedEndpoints[0], - endpointInfo: { - ...mockedEndpoints[0].endpointInfo, - route: `${mockedEndpoints[0].endpointInfo.route}1` - } - } - ] - } - } -}; - -export const WithoutInsight: Story = {}; - -export const WithNoAffectedEndpoints: Story = { - args: { - insight: { - ...mockedNPlusOneInsight, - endpoints: [] - } - } -}; diff --git a/src/components/Insights/tickets/common/NPlusOneAffectedEndpoints/types.ts b/src/components/Insights/tickets/common/NPlusOneAffectedEndpoints/types.ts deleted file mode 100644 index 559da3be9..000000000 --- a/src/components/Insights/tickets/common/NPlusOneAffectedEndpoints/types.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { SpanNPlusOneInsight } from "../../../types"; - -export interface NPlusOneAffectedEndpointsProps { - insight: SpanNPlusOneInsight | null; -} diff --git a/src/components/Insights/tickets/common/QueryOptimizationEndpoints/types.ts b/src/components/Insights/tickets/common/QueryOptimizationEndpoints/types.ts deleted file mode 100644 index 2af28df10..000000000 --- a/src/components/Insights/tickets/common/QueryOptimizationEndpoints/types.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { QueryOptimizationInsight } from "../../../types"; - -export interface QueryOptimizationEndpointsProps { - insight: QueryOptimizationInsight | null; -} diff --git a/src/components/Insights/tickets/common/ScalingIssueCommon/ScalingIssueDuration/index.tsx b/src/components/Insights/tickets/common/ScalingIssueCommon/ScalingIssueDuration/index.tsx deleted file mode 100644 index 4fcc38ae4..000000000 --- a/src/components/Insights/tickets/common/ScalingIssueCommon/ScalingIssueDuration/index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { ScalingIssueCommonProps } from "../types"; -import { getDurationString } from "../../../../../../utils/getDurationString"; - -export const ScalingIssueDuration = (props: ScalingIssueCommonProps) => { - if (!props.insight) { - return null; - } - - return ( -
- Duration range: - - {getDurationString(props.insight.minDuration)} -{" "} - {getDurationString(props.insight.maxDuration)} - -
- ); -}; diff --git a/src/components/Insights/tickets/common/ScalingIssueCommon/ScalingIssueMessage/index.tsx b/src/components/Insights/tickets/common/ScalingIssueCommon/ScalingIssueMessage/index.tsx deleted file mode 100644 index dd47cc220..000000000 --- a/src/components/Insights/tickets/common/ScalingIssueCommon/ScalingIssueMessage/index.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { ScalingIssueCommonProps } from "../types"; - -export const ScalingIssueMessage = (props: ScalingIssueCommonProps) => { - if (!props.insight) { - return null; - } - - return ( -
{props.insight.shortDisplayInfo.description}
- ); -}; diff --git a/src/components/Insights/tickets/common/ScalingIssueCommon/ScalingIssueTestedConcurrency/index.tsx b/src/components/Insights/tickets/common/ScalingIssueCommon/ScalingIssueTestedConcurrency/index.tsx deleted file mode 100644 index 3f5f6cda5..000000000 --- a/src/components/Insights/tickets/common/ScalingIssueCommon/ScalingIssueTestedConcurrency/index.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { ScalingIssueCommonProps } from "../types"; - -export const ScalingIssueTestedConcurrency = ( - props: ScalingIssueCommonProps -) => { - if (!props.insight) { - return null; - } - - return ( -
- Tested concurrency: {props.insight.maxConcurrency} -
- ); -}; diff --git a/src/components/Insights/tickets/common/ScalingIssueCommon/types.ts b/src/components/Insights/tickets/common/ScalingIssueCommon/types.ts deleted file mode 100644 index abe597d9e..000000000 --- a/src/components/Insights/tickets/common/ScalingIssueCommon/types.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { SpanScalingBadlyInsight } from "../../../types"; - -export interface ScalingIssueCommonProps { - insight: SpanScalingBadlyInsight | null; -} diff --git a/src/components/Insights/typeGuards.ts b/src/components/Insights/typeGuards.ts index b33f91530..05bf3b084 100644 --- a/src/components/Insights/typeGuards.ts +++ b/src/components/Insights/typeGuards.ts @@ -1,11 +1,11 @@ import { InsightType } from "../../types"; import { - ChattyApiEndpointInsight, CodeObjectErrorsInsight, CodeObjectHotSpotInsight, CodeObjectInsight, EndpointBottleneckInsight, EndpointBreakdownInsight, + EndpointChattyApiInsight, EndpointChattyApiV2Insight, EndpointDurationSlowdownInsight, EndpointHighNumberOfQueriesInsight, @@ -15,22 +15,22 @@ import { EndpointNormalUsageInsight, EndpointQueryOptimizationInsight, EndpointQueryOptimizationV2Insight, + EndpointSessionInViewInsight, EndpointSlowdownSourceInsight, EndpointSlowestSpansInsight, EndpointSpanNPlusOneInsight, EndpointSuspectedNPlusOneInsight, GenericFunctionInsight, InsightScope, - QueryOptimizationInsight, - SessionInViewEndpointInsight, SlowEndpointInsight, + SpaNPlusOneInsight, SpanDurationBreakdownInsight, SpanDurationsInsight, SpanEndpointBottleneckInsight, SpanInsight, - SpanNPlusOneInsight, SpanNexusInsight, - SpanScalingBadlyInsight, + SpanQueryOptimizationInsight, + SpanScalingInsight, SpanScalingInsufficientDataInsight, SpanScalingWellInsight, SpanUsagesInsight @@ -100,7 +100,7 @@ export const isSlowEndpointInsight = ( export const isSpanNPlusOneInsight = ( insight: CodeObjectInsight -): insight is SpanNPlusOneInsight => insight.type === InsightType.SpanNPlusOne; +): insight is SpaNPlusOneInsight => insight.type === InsightType.SpaNPlusOne; /** * @deprecated @@ -108,12 +108,12 @@ export const isSpanNPlusOneInsight = ( export const isEndpointSuspectedNPlusOneInsight = ( insight: CodeObjectInsight ): insight is EndpointSuspectedNPlusOneInsight => - insight.type === InsightType.EndpointSpanNPlusOne; + insight.type === InsightType.EndpointSpaNPlusOne; export const isEndpointSpanNPlusOneInsight = ( insight: CodeObjectInsight ): insight is EndpointSpanNPlusOneInsight => - insight.type === InsightType.EndpointSpanNPlusOneV2; + insight.type === InsightType.EndpointSpanNPlusOne; /** * @deprecated @@ -130,8 +130,7 @@ export const isEndpointQueryOptimizationV2Insight = ( export const isSpanScalingBadlyInsight = ( insight: CodeObjectInsight -): insight is SpanScalingBadlyInsight => - insight.type === InsightType.SpanScalingBadly; +): insight is SpanScalingInsight => insight.type === InsightType.SpanScaling; export const isCodeObjectErrorsInsight = ( insight: CodeObjectInsight @@ -177,7 +176,7 @@ export const isSpanScalingInsufficientDataInsight = ( export const isSessionInViewEndpointInsight = ( insight: CodeObjectInsight -): insight is SessionInViewEndpointInsight => +): insight is EndpointSessionInViewInsight => insight.type === InsightType.EndpointSessionInView; /** @@ -185,7 +184,7 @@ export const isSessionInViewEndpointInsight = ( */ export const isChattyApiEndpointInsight = ( insight: CodeObjectInsight -): insight is ChattyApiEndpointInsight => +): insight is EndpointChattyApiInsight => insight.type === InsightType.EndpointChattyApi; export const isEndpointChattyApiV2Insight = ( @@ -204,5 +203,5 @@ export const isSpanNexusInsight = ( export const isSpanQueryOptimizationInsight = ( insight: CodeObjectInsight -): insight is QueryOptimizationInsight => +): insight is SpanQueryOptimizationInsight => insight.type === InsightType.SpanQueryOptimization; diff --git a/src/components/Insights/types.ts b/src/components/Insights/types.ts index 5c6f6b3c6..d3a584f68 100644 --- a/src/components/Insights/types.ts +++ b/src/components/Insights/types.ts @@ -40,8 +40,8 @@ export type GenericEndpointInsight = | EndpointDurationSlowdownInsight | EndpointSlowdownSourceInsight | EndpointBreakdownInsight - | SessionInViewEndpointInsight - | ChattyApiEndpointInsight + | EndpointSessionInViewInsight + | EndpointChattyApiInsight | EndpointChattyApiV2Insight | EndpointHighNumberOfQueriesInsight | EndpointQueryOptimizationInsight @@ -52,12 +52,12 @@ export type GenericSpanInsight = | SpanUsagesInsight | SpanEndpointBottleneckInsight | SpanDurationBreakdownInsight - | SpanScalingBadlyInsight - | SpanNPlusOneInsight + | SpanScalingInsight + | SpaNPlusOneInsight | SpanScalingWellInsight | SpanScalingInsufficientDataInsight | SpanNexusInsight - | QueryOptimizationInsight; + | SpanQueryOptimizationInsight; export interface MethodSpan { spanCodeObjectId: string; @@ -100,19 +100,6 @@ export interface InsightGroup { icon?: MemoExoticComponent<(props: IconProps) => JSX.Element>; } -export interface InsightProps { - onRecalculate: (insightId: string) => void; - onRefresh: (insightType: InsightType) => void; - onJiraTicketCreate?: ( - insight: GenericCodeObjectInsight, - spanCodeObjectId: string | undefined, - event?: string - ) => void; - onGoToSpan: (spanCodeObjectId: string) => void; - isJiraHintEnabled?: boolean; - isMarkAsReadButtonEnabled: boolean; -} - export interface InsightTicketInfo { insight: T; spanCodeObjectId?: string; @@ -551,9 +538,9 @@ export interface AffectedEndpoint extends SpanInfo { flowHash: string; } -export interface SpanScalingBadlyInsight extends SpanInsight { +export interface SpanScalingInsight extends SpanInsight { name: "Scaling Issue Found"; - type: InsightType.SpanScalingBadly; + type: InsightType.SpanScaling; category: InsightCategory.Performance; specifity: InsightSpecificity.OwnInsight; importance: InsightImportance.Critical; @@ -593,9 +580,9 @@ export interface NPlusOneEndpointInfo { requestPercentage: number; } -export interface SpanNPlusOneInsight extends SpanInsight { +export interface SpaNPlusOneInsight extends SpanInsight { name: "N+1"; - type: InsightType.SpanNPlusOne; + type: InsightType.SpaNPlusOne; category: InsightCategory.Performance; specifity: InsightSpecificity.TargetAndReasonFound; importance: InsightImportance.Critical; @@ -617,7 +604,7 @@ export interface SpanNPlusOneInsight extends SpanInsight { */ export interface EndpointSuspectedNPlusOneInsight extends EndpointInsight { name: "Suspected N+1 Query"; - type: InsightType.EndpointSpanNPlusOne; + type: InsightType.EndpointSpaNPlusOne; category: InsightCategory.Performance; specifity: InsightSpecificity.TargetAndReasonFound; importance: InsightImportance.HighlyImportant; @@ -638,7 +625,7 @@ export interface EndpointSuspectedNPlusOneInsight extends EndpointInsight { export interface EndpointSpanNPlusOneInsight extends EndpointInsight { name: "Suspected N+1 Query"; - type: InsightType.EndpointSpanNPlusOneV2; + type: InsightType.EndpointSpanNPlusOne; category: InsightCategory.Performance; specifity: InsightSpecificity.TargetAndReasonFound; importance: InsightImportance.HighlyImportant; @@ -786,7 +773,7 @@ export interface SpanScalingInsufficientDataInsight extends SpanInsight { concurrencies: Concurrency[]; } -export interface SessionInViewEndpointInsight extends EndpointInsight { +export interface EndpointSessionInViewInsight extends EndpointInsight { name: "Session in View Query"; type: InsightType.EndpointSessionInView; category: InsightCategory.Performance; @@ -802,7 +789,7 @@ export interface SessionInViewEndpointInsight extends EndpointInsight { /** * @deprecated */ -export interface ChattyApiEndpointInsight extends EndpointInsight { +export interface EndpointChattyApiInsight extends EndpointInsight { name: "HTTP Chatter"; type: InsightType.EndpointChattyApi; category: InsightCategory.Performance; @@ -847,7 +834,7 @@ export interface SpanNexusInsight extends SpanInsight { isServicesHigh: boolean; } -export interface QueryOptimizationInsight extends SpanInsight { +export interface SpanQueryOptimizationInsight extends SpanInsight { type: InsightType.SpanQueryOptimization; duration: Duration; typicalDuration: Duration; diff --git a/src/components/Notifications/Notifications.stories.tsx b/src/components/Notifications/Notifications.stories.tsx index a51d1242e..2b0a72c67 100644 --- a/src/components/Notifications/Notifications.stories.tsx +++ b/src/components/Notifications/Notifications.stories.tsx @@ -47,7 +47,7 @@ const notifications: Notification[] = [ message: "Lorem ipsum dolor sit, amet consectetur adipisicing elit.", type: "NewInsight", data: { - insightType: InsightType.EndpointSpanNPlusOne, + insightType: InsightType.EndpointSpaNPlusOne, scope: InsightScope.EntrySpan, spanInfo: { name: "HTTP GET /SampleInsights/NPlusOneWithoutInternalSpan", diff --git a/src/components/Tests/TestTicket/index.tsx b/src/components/Tests/TestTicket/index.tsx index a8c853e5b..ecb783aa3 100644 --- a/src/components/Tests/TestTicket/index.tsx +++ b/src/components/Tests/TestTicket/index.tsx @@ -2,8 +2,8 @@ import { ReactElement, useContext } from "react"; import { isString } from "../../../typeGuards/isString"; import { getDurationString } from "../../../utils/getDurationString"; import { intersperse } from "../../../utils/intersperse"; -import { DigmaSignature } from "../../Insights/tickets/common/DigmaSignature"; import { ConfigContext } from "../../common/App/ConfigContext"; +import { DigmaSignature } from "../../common/DigmaSignature"; import { JiraTicket } from "../../common/JiraTicket"; import { Attachment } from "../../common/JiraTicket/types"; import { TestTicketProps } from "./types"; diff --git a/src/components/Insights/tickets/common/DigmaSignature/index.tsx b/src/components/common/DigmaSignature/index.tsx similarity index 74% rename from src/components/Insights/tickets/common/DigmaSignature/index.tsx rename to src/components/common/DigmaSignature/index.tsx index d6dd34db4..2ad38e2a9 100644 --- a/src/components/Insights/tickets/common/DigmaSignature/index.tsx +++ b/src/components/common/DigmaSignature/index.tsx @@ -1,6 +1,6 @@ import { MouseEvent } from "react"; -import { openURLInDefaultBrowser } from "../../../../../utils/openURLInDefaultBrowser"; -import { Link } from "../../../../common/Link"; +import { openURLInDefaultBrowser } from "../../../utils/openURLInDefaultBrowser"; +import { Link } from "../Link"; const DIGMA_URL = "https://digma.ai"; diff --git a/src/types.ts b/src/types.ts index 8a47dc922..4a0e6a40f 100644 --- a/src/types.ts +++ b/src/types.ts @@ -24,13 +24,13 @@ export enum InsightType { HighUsage = "HighUsage", SlowestSpans = "SlowestSpans", // deprecated EndpointBottleneck = "EndpointBottleneck", - EndpointSpanNPlusOne = "EndpointSpaNPlusOne", // deprecated - EndpointSpanNPlusOneV2 = "EndpointSpanNPlusOne", + EndpointSpaNPlusOne = "EndpointSpaNPlusOne", // deprecated + EndpointSpanNPlusOne = "EndpointSpanNPlusOne", SpanUsages = "SpanUsages", - SpanNPlusOne = "SpaNPlusOne", + SpaNPlusOne = "SpaNPlusOne", SpanEndpointBottleneck = "SpanEndpointBottleneck", SpanDurations = "SpanDurations", - SpanScalingBadly = "SpanScaling", + SpanScaling = "SpanScaling", SpanDurationBreakdown = "SpanDurationBreakdown", EndpointDurationSlowdown = "EndpointDurationSlowdown", // deprecated EndpointBreakdown = "EndpointBreakdown", diff --git a/src/utils/getInsightTypeInfo.ts b/src/utils/getInsightTypeInfo.ts index ea14bf9f7..51e81a90a 100644 --- a/src/utils/getInsightTypeInfo.ts +++ b/src/utils/getInsightTypeInfo.ts @@ -70,17 +70,17 @@ export const getInsightTypeInfo = ( description: descriptionProvider.BottleneckDescription }, // deprecated - [InsightType.EndpointSpanNPlusOne]: { + [InsightType.EndpointSpaNPlusOne]: { icon: SQLDatabaseIcon, label: "Suspected N+1", description: descriptionProvider.NPlusOneDescription }, - [InsightType.EndpointSpanNPlusOneV2]: { + [InsightType.EndpointSpanNPlusOne]: { icon: SQLDatabaseIcon, label: "Suspected N+1", description: descriptionProvider.NPlusOneDescription }, - [InsightType.SpanNPlusOne]: { + [InsightType.SpaNPlusOne]: { icon: SQLDatabaseIcon, label: "Suspected N+1", description: descriptionProvider.NPlusOneDescription @@ -90,7 +90,7 @@ export const getInsightTypeInfo = ( label: "Bottleneck", description: descriptionProvider.BottleneckDescription }, - [InsightType.SpanScalingBadly]: { + [InsightType.SpanScaling]: { icon: ScalesIcon, label: "Scaling Issue Found", description: descriptionProvider.ScalingIssueDescription diff --git a/src/utils/getInsightTypeOrderPriority.ts b/src/utils/getInsightTypeOrderPriority.ts index 15cfcfad9..4c43ded6a 100644 --- a/src/utils/getInsightTypeOrderPriority.ts +++ b/src/utils/getInsightTypeOrderPriority.ts @@ -14,7 +14,7 @@ export const getInsightTypeOrderPriority = (type: string): number => { [InsightType.LowUsage]: 30, [InsightType.EndpointBottleneck]: 40, [InsightType.NormalUsage]: 50, - [InsightType.EndpointSpanNPlusOneV2]: 55, + [InsightType.EndpointSpanNPlusOne]: 55, [InsightType.EndpointSessionInView]: 56, [InsightType.EndpointChattyApi]: 57, // deprecated [InsightType.EndpointChattyApiV2]: 57, @@ -25,8 +25,8 @@ export const getInsightTypeOrderPriority = (type: string): number => { // Span insights [InsightType.SpanDurations]: 60, [InsightType.SpanUsages]: 61, - [InsightType.SpanScalingBadly]: 63, - [InsightType.SpanNPlusOne]: 65, + [InsightType.SpanScaling]: 63, + [InsightType.SpaNPlusOne]: 65, [InsightType.SpanEndpointBottleneck]: 67, [InsightType.SpanDurationBreakdown]: 68, [InsightType.SpanNexus]: 69,