From 473ddc27fb8c092375f968796fc65c1d8c8c3305 Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Tue, 20 Feb 2024 11:23:35 +0100 Subject: [PATCH 1/3] Improve card --- src/components/common/v3/Card/Card.stories.tsx | 2 +- src/components/common/v3/Card/styles.ts | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/common/v3/Card/Card.stories.tsx b/src/components/common/v3/Card/Card.stories.tsx index 2c33c547c..d5acec9a3 100644 --- a/src/components/common/v3/Card/Card.stories.tsx +++ b/src/components/common/v3/Card/Card.stories.tsx @@ -3,7 +3,7 @@ import { Card } from "."; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { - title: "v3/Common/Card", + title: "Common/v3/Card", component: Card, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout diff --git a/src/components/common/v3/Card/styles.ts b/src/components/common/v3/Card/styles.ts index 51da6d8d7..339a5f4c3 100644 --- a/src/components/common/v3/Card/styles.ts +++ b/src/components/common/v3/Card/styles.ts @@ -1,27 +1,27 @@ import styled from "styled-components"; -import { DefaultTheme } from "styled-components/dist/types"; -import { darkTheme } from "../../App/themes/darkTheme"; -import { lightTheme } from "../../App/themes/lightTheme"; export const Container = styled.div` display: flex; flex-direction: column; border-radius: 4px; border: 1px solid ${({ theme }) => theme.colors.v3.stroke.primary}; - background: ${({ theme }) => theme.colors.v3.surface.secondary}; - font-size: 14px; + background: ${({ theme }) => theme.colors.v3.surface.primary}; `; -export const Content = styled.div` +const Section = styled.div` padding: 8px; `; -export const Header = styled.div` +export const Content = styled(Section)` + padding: 8px; +`; + +export const Header = styled(Section)` border-bottom: 1px solid ${({ theme }) => theme.colors.v3.stroke.primary}; padding: 8px; `; -export const Footer = styled.div` +export const Footer = styled(Section)` border-top: 1px solid ${({ theme }) => theme.colors.v3.stroke.primary}; padding: 8px; `; From 6316c44cb62b9ea7eb18447600622e6dc857412c Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Tue, 20 Feb 2024 11:28:03 +0100 Subject: [PATCH 2/3] Update styles --- src/components/common/v3/Card/styles.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/common/v3/Card/styles.ts b/src/components/common/v3/Card/styles.ts index 339a5f4c3..fd7a9e5e1 100644 --- a/src/components/common/v3/Card/styles.ts +++ b/src/components/common/v3/Card/styles.ts @@ -12,16 +12,12 @@ const Section = styled.div` padding: 8px; `; -export const Content = styled(Section)` - padding: 8px; -`; +export const Content = styled(Section); export const Header = styled(Section)` border-bottom: 1px solid ${({ theme }) => theme.colors.v3.stroke.primary}; - padding: 8px; `; export const Footer = styled(Section)` border-top: 1px solid ${({ theme }) => theme.colors.v3.stroke.primary}; - padding: 8px; `; From b77d2c7cdac6b63a8433e95fb4afc7ab81ff1528 Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Tue, 20 Feb 2024 12:43:32 +0100 Subject: [PATCH 3/3] Remove uuid --- package-lock.json | 20 +--- package.json | 4 +- .../Insights/BottleneckInsight/mockData.ts | 1 + .../DurationBreakdownInsight.stories.tsx | 1 + .../DurationInsight.stories.tsx | 112 ++++++++++++++++++ .../DurationSlowdownSourceInsight.stories.tsx | 1 + .../EndpointNPlusOneInsight/mockData.ts | 1 + .../mockData.ts | 1 + .../ErrorsInsight/ErrorsInsight.stories.tsx | 1 + .../ExcessiveAPICallsInsight.stories.tsx | 1 + .../HighNumberOfQueriesInsight/mockData.ts | 1 + .../InsightCard/InsightCard.stories.tsx | 1 + .../InsightJiraTicket.stories.tsx | 1 + src/components/Insights/Insights.stories.tsx | 10 ++ .../Insights/InsightsPage/index.tsx | 43 ++++--- .../Insights/NPlusOneInsight/mockData.ts | 1 + .../NoScalingIssueInsight.stories.tsx | 1 + .../PerformanceAtScaleInsight.stories.tsx | 1 + .../QueryOptimizationInsight/mockData.ts | 1 + .../RequestBreakdownInsight.stories.tsx | 1 + .../ScalingIssueInsight.stories.tsx | 1 + .../SessionInViewInsight.stories.tsx | 1 + .../SlowEndpointInsight.stories.tsx | 1 + .../SpanBottleneckInsight/mockData.ts | 1 + .../Insights/SpanNexusInsight/mockData.ts | 1 + .../TopUsageInsight.stories.tsx | 1 + .../TrafficInsight/TrafficInsight.stories.tsx | 2 + src/components/Insights/types.ts | 1 + src/components/common/v3/Card/styles.ts | 2 +- 29 files changed, 173 insertions(+), 42 deletions(-) diff --git a/package-lock.json b/package-lock.json index 776f04ff8..1d21909d9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,8 +26,7 @@ "react-transition-group": "^4.4.5", "recharts": "^2.6.2", "semver": "^7.5.4", - "styled-components": "^6.1.0", - "uuid": "^9.0.1" + "styled-components": "^6.1.0" }, "devDependencies": { "@babel/core": "^7.23.2", @@ -49,7 +48,6 @@ "@types/react-syntax-highlighter": "^15.5.7", "@types/react-transition-group": "^4.4.5", "@types/semver": "^7.5.6", - "@types/uuid": "^9.0.8", "@typescript-eslint/eslint-plugin": "^5.49.0", "@typescript-eslint/parser": "^5.49.0", "babel-loader": "^9.1.3", @@ -6646,12 +6644,6 @@ "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.7.tgz", "integrity": "sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g==" }, - "node_modules/@types/uuid": { - "version": "9.0.8", - "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz", - "integrity": "sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==", - "dev": true - }, "node_modules/@types/yargs": { "version": "16.0.5", "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.5.tgz", @@ -18619,6 +18611,7 @@ "version": "9.0.1", "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz", "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==", + "dev": true, "funding": [ "https://github.com/sponsors/broofa", "https://github.com/sponsors/ctavan" @@ -23682,12 +23675,6 @@ "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.7.tgz", "integrity": "sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g==" }, - "@types/uuid": { - "version": "9.0.8", - "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz", - "integrity": "sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==", - "dev": true - }, "@types/yargs": { "version": "16.0.5", "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.5.tgz", @@ -32408,7 +32395,8 @@ "uuid": { "version": "9.0.1", "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz", - "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==" + "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==", + "dev": true }, "v8-compile-cache-lib": { "version": "3.0.1", diff --git a/package.json b/package.json index 0d90331e8..c8ed7b83e 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,6 @@ "@types/react-syntax-highlighter": "^15.5.7", "@types/react-transition-group": "^4.4.5", "@types/semver": "^7.5.6", - "@types/uuid": "^9.0.8", "@typescript-eslint/eslint-plugin": "^5.49.0", "@typescript-eslint/parser": "^5.49.0", "babel-loader": "^9.1.3", @@ -121,7 +120,6 @@ "react-transition-group": "^4.4.5", "recharts": "^2.6.2", "semver": "^7.5.4", - "styled-components": "^6.1.0", - "uuid": "^9.0.1" + "styled-components": "^6.1.0" } } diff --git a/src/components/Insights/BottleneckInsight/mockData.ts b/src/components/Insights/BottleneckInsight/mockData.ts index 524841f4e..6ec96c3ef 100644 --- a/src/components/Insights/BottleneckInsight/mockData.ts +++ b/src/components/Insights/BottleneckInsight/mockData.ts @@ -6,6 +6,7 @@ import { } from "../types"; export const mockedBottleneckInsight: SpanEndpointBottleneckInsight = { + id: "60b55792-8262-4c5d-9628-1cce7979ac6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0.7, diff --git a/src/components/Insights/DurationBreakdownInsight/DurationBreakdownInsight.stories.tsx b/src/components/Insights/DurationBreakdownInsight/DurationBreakdownInsight.stories.tsx index bfe09fe36..063e23179 100644 --- a/src/components/Insights/DurationBreakdownInsight/DurationBreakdownInsight.stories.tsx +++ b/src/components/Insights/DurationBreakdownInsight/DurationBreakdownInsight.stories.tsx @@ -20,6 +20,7 @@ type Story = StoryObj; export const Default: Story = { args: { insight: { + id: "60b55792-8262-4c5d-9628-7cce7979ac6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0, diff --git a/src/components/Insights/DurationInsight/DurationInsight.stories.tsx b/src/components/Insights/DurationInsight/DurationInsight.stories.tsx index f5642a914..df40a87c5 100644 --- a/src/components/Insights/DurationInsight/DurationInsight.stories.tsx +++ b/src/components/Insights/DurationInsight/DurationInsight.stories.tsx @@ -20,6 +20,7 @@ type Story = StoryObj; export const WithAverage: Story = { args: { insight: { + id: "60b55792-8262-4c5d-9628-7cce7979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0, @@ -135,6 +136,7 @@ export const WithAverage: Story = { export const WithChange: Story = { args: { insight: { + id: "60b55792-8262-4c5d-9628-7cce7979ad6d", firstDetected: null, lastDetected: null, criticality: 0, @@ -240,6 +242,7 @@ export const WithChange: Story = { export const WithEvaluatingChange: Story = { args: { insight: { + id: "60b55792-8262-4c5d-9628-7cce7979ad6d", firstDetected: null, lastDetected: null, criticality: 0, @@ -345,6 +348,7 @@ export const WithEvaluatingChange: Story = { export const HistogramWithManyBars: Story = { args: { insight: { + id: "60b55792-8262-4c5d-9628-7cce7979ad6d", firstDetected: null, lastDetected: null, criticality: 0, @@ -4868,6 +4872,7 @@ export const HistogramWithManyBars: Story = { export const HistogramWithGaps: Story = { args: { insight: { + id: "60b55792-8262-4c5d-9628-7cce7979ad6d", firstDetected: null, lastDetected: null, criticality: 0, @@ -5121,6 +5126,7 @@ export const HistogramWithGaps: Story = { export const HistogramWithAFewBars: Story = { args: { insight: { + id: "60b55792-8262-4c5d-9628-7cce7979ad6d", firstDetected: null, lastDetected: null, criticality: 0, @@ -5269,3 +5275,109 @@ export const HistogramWithAFewBars: Story = { } } }; + +// TODO: fix this case +export const EmptyStateBug: Story = { + args: { + insight: { + id: "60b55792-8262-4c5d-9628-7cce7979ad6d", + name: "Performance Stats", + type: InsightType.SpanDurations, + category: InsightCategory.Performance, + specifity: 4, + isRecalculateEnabled: true, + spanCodeObjectId: + "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/HttpCall", + span: { + name: "HTTP GET SampleInsights/HttpCall", + displayName: "HTTP GET SampleInsights/HttpCall", + instrumentationLibrary: "OpenTelemetry.Instrumentation.AspNetCore", + spanCodeObjectId: + "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/HttpCall", + methodCodeObjectId: + "method:Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$HttpCall", + kind: "Server", + codeObjectId: + "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$HttpCall" + }, + percentiles: [ + { + percentile: 0.5, + currentDuration: { + value: 426.62, + unit: "ms", + raw: 426615000 + }, + previousDuration: null, + changeTime: null, + changeVerified: null, + traceIds: [] + }, + { + percentile: 0.95, + currentDuration: { + value: 426.62, + unit: "ms", + raw: 426615000 + }, + previousDuration: null, + changeTime: null, + changeVerified: null, + traceIds: [] + } + ], + lastSpanInstanceInfo: null, + histogramPlot: null, + average: { + value: 0, + unit: "ns", + raw: 0 + }, + standardDeviation: { + value: 0, + unit: "ns", + raw: 0 + }, + isAsync: false, + scope: InsightScope.Span, + spanInfo: { + name: "HTTP GET SampleInsights/HttpCall", + displayName: "HTTP GET SampleInsights/HttpCall", + instrumentationLibrary: "OpenTelemetry.Instrumentation.AspNetCore", + spanCodeObjectId: + "span:OpenTelemetry.Instrumentation.AspNetCore$_$HTTP GET SampleInsights/HttpCall", + methodCodeObjectId: + "method:Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$HttpCall", + kind: "Server", + codeObjectId: + "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$HttpCall" + }, + shortDisplayInfo: { + title: "", + targetDisplayName: "", + subtitle: "", + description: "" + }, + codeObjectId: + "Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$HttpCall", + decorators: [], + environment: "DOTNET#ID#1", + importance: 5, + severity: 0, + impact: 0, + criticality: 0, + reopenCount: 0, + ticketLink: null, + prefixedCodeObjectId: + "method:Sample.MoneyTransfer.API.Controllers.SampleInsightsController$_$HttpCall", + customStartTime: null, + actualStartTime: "0001-01-01T00:00:00", + firstCommitId: null, + lastCommitId: null, + deactivatedCommitId: null, + firstDetected: "2024-02-15T12:37:29.929835Z", + lastDetected: "2024-02-15T12:37:29.929835Z" + // flags: [] + } + } +}; diff --git a/src/components/Insights/DurationSlowdownSourceInsight/DurationSlowdownSourceInsight.stories.tsx b/src/components/Insights/DurationSlowdownSourceInsight/DurationSlowdownSourceInsight.stories.tsx index 3d25b8054..4f602ec3f 100644 --- a/src/components/Insights/DurationSlowdownSourceInsight/DurationSlowdownSourceInsight.stories.tsx +++ b/src/components/Insights/DurationSlowdownSourceInsight/DurationSlowdownSourceInsight.stories.tsx @@ -20,6 +20,7 @@ type Story = StoryObj; export const WithEvaluatingChange: Story = { args: { insight: { + id: "60b55792-8262-4c5d-9628-7cde7979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0, diff --git a/src/components/Insights/EndpointNPlusOneInsight/mockData.ts b/src/components/Insights/EndpointNPlusOneInsight/mockData.ts index e4d7d35cf..80c92f8de 100644 --- a/src/components/Insights/EndpointNPlusOneInsight/mockData.ts +++ b/src/components/Insights/EndpointNPlusOneInsight/mockData.ts @@ -6,6 +6,7 @@ import { } from "../types"; export const mockedEndpointNPlusOneInsight: EndpointSuspectedNPlusOneInsight = { + id: "60b55792-8262-4c5d-9628-7cce7919ad6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0, diff --git a/src/components/Insights/EndpointQueryOptimizationInsight/mockData.ts b/src/components/Insights/EndpointQueryOptimizationInsight/mockData.ts index 43a251037..689a4156f 100644 --- a/src/components/Insights/EndpointQueryOptimizationInsight/mockData.ts +++ b/src/components/Insights/EndpointQueryOptimizationInsight/mockData.ts @@ -7,6 +7,7 @@ import { export const mockedEndpointQueryOptimizationInsight: EndpointQueryOptimizationInsight = { + id: "60b55792-8262-4c5d-9628-7cce7989ad6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0, diff --git a/src/components/Insights/ErrorsInsight/ErrorsInsight.stories.tsx b/src/components/Insights/ErrorsInsight/ErrorsInsight.stories.tsx index a2b00703f..c9f454065 100644 --- a/src/components/Insights/ErrorsInsight/ErrorsInsight.stories.tsx +++ b/src/components/Insights/ErrorsInsight/ErrorsInsight.stories.tsx @@ -20,6 +20,7 @@ type Story = StoryObj; export const Default: Story = { args: { insight: { + id: "60b55792-8262-4c5d-9628-3cce7979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0, diff --git a/src/components/Insights/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx b/src/components/Insights/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx index ee34f7f23..ae26aaf24 100644 --- a/src/components/Insights/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx +++ b/src/components/Insights/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx @@ -20,6 +20,7 @@ type Story = StoryObj; export const Default: Story = { args: { insight: { + id: "60b55792-8262-4c5d-9688-7cce7979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0.5, diff --git a/src/components/Insights/HighNumberOfQueriesInsight/mockData.ts b/src/components/Insights/HighNumberOfQueriesInsight/mockData.ts index 9349efb3a..ff1ac43da 100644 --- a/src/components/Insights/HighNumberOfQueriesInsight/mockData.ts +++ b/src/components/Insights/HighNumberOfQueriesInsight/mockData.ts @@ -7,6 +7,7 @@ import { export const mockedHighNumberOfQueriesInsight: EndpointHighNumberOfQueriesInsight = { + id: "60b55792-8262-4c5d-9623-7cce7979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0.5, diff --git a/src/components/Insights/InsightCard/InsightCard.stories.tsx b/src/components/Insights/InsightCard/InsightCard.stories.tsx index bf4fdfe88..619869388 100644 --- a/src/components/Insights/InsightCard/InsightCard.stories.tsx +++ b/src/components/Insights/InsightCard/InsightCard.stories.tsx @@ -21,6 +21,7 @@ type Story = StoryObj; export const Default: Story = { args: { data: { + id: "60b55792-8262-4c5d-9638-7cce7979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0, diff --git a/src/components/Insights/InsightJiraTicket/InsightJiraTicket.stories.tsx b/src/components/Insights/InsightJiraTicket/InsightJiraTicket.stories.tsx index b319191ac..db7f6d3b0 100644 --- a/src/components/Insights/InsightJiraTicket/InsightJiraTicket.stories.tsx +++ b/src/components/Insights/InsightJiraTicket/InsightJiraTicket.stories.tsx @@ -18,6 +18,7 @@ export default meta; type Story = StoryObj; const insight = { + id: "60b55792-8262-4d5d-9628-7cce7979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0, diff --git a/src/components/Insights/Insights.stories.tsx b/src/components/Insights/Insights.stories.tsx index d8583fd95..7b18fec0d 100644 --- a/src/components/Insights/Insights.stories.tsx +++ b/src/components/Insights/Insights.stories.tsx @@ -53,6 +53,7 @@ export const Default: Story = { // needsObservabilityFix: false, insights: [ { + id: "60b55792-8362-4c5d-9628-7cce7979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0.8, @@ -159,6 +160,7 @@ export const Default: Story = { actualStartTime: "2023-07-27T08:23:56.500827Z" }, { + id: "62b55792-8262-4c5d-9628-7cce7979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0, @@ -230,6 +232,7 @@ export const Default: Story = { actualStartTime: "2023-06-26T00:00:00.000Z" }, { + id: "60b55792-3262-4c5d-9628-7cce7979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0, @@ -284,6 +287,7 @@ export const Default: Story = { actualStartTime: "2023-06-26T13:53:53.645Z" }, { + id: "60b55792-4262-4c5d-9628-7cce7979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0, @@ -324,6 +328,7 @@ export const Default: Story = { actualStartTime: "2023-06-26T13:53:57.956Z" }, { + id: "60b55792-8252-4c5d-9628-7cce7979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0, @@ -380,6 +385,7 @@ export const Default: Story = { actualStartTime: "2023-06-12T13:48:59.404Z" }, { + id: "60b55792-8262-4c5d-5628-7cce7979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0, @@ -475,6 +481,7 @@ export const Default: Story = { actualStartTime: "2023-06-12T13:49:08.186Z" }, { + id: "60b55792-8262-4c5d-9628-6cce7979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0, @@ -550,6 +557,7 @@ export const Default: Story = { actualStartTime: "2023-06-12T13:49:03.486Z" }, { + id: "60b55792-8262-4c5d-9628-7cce8979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0, @@ -645,6 +653,7 @@ export const Default: Story = { actualStartTime: "2023-06-13T00:00:00.000Z" }, { + id: "60b55792-8262-4c5d-9628-7cce9979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0, @@ -797,6 +806,7 @@ export const NoObservability: Story = { }; const errorsInsight: CodeObjectErrorsInsight = { + id: "60b55792-8262-4c5d-9628-7cce7979ad1d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0, diff --git a/src/components/Insights/InsightsPage/index.tsx b/src/components/Insights/InsightsPage/index.tsx index c8eb2ffdb..683490c71 100644 --- a/src/components/Insights/InsightsPage/index.tsx +++ b/src/components/Insights/InsightsPage/index.tsx @@ -1,5 +1,4 @@ import { useContext, useEffect, useRef } from "react"; -import { v4 as uuidv4 } from "uuid"; import { actions as globalActions } from "../../../actions"; import { usePersistence } from "../../../hooks/usePersistence"; import { usePrevious } from "../../../hooks/usePrevious"; @@ -196,7 +195,7 @@ const renderInsightCard = ( if (isSpanDurationsInsight(insight)) { return ( ; export const Default: Story = { args: { insight: { + id: "60b55792-8262-4c7d-9628-7cce7979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0, diff --git a/src/components/Insights/PerformanceAtScaleInsight/PerformanceAtScaleInsight.stories.tsx b/src/components/Insights/PerformanceAtScaleInsight/PerformanceAtScaleInsight.stories.tsx index 284146ba8..5cf80a451 100644 --- a/src/components/Insights/PerformanceAtScaleInsight/PerformanceAtScaleInsight.stories.tsx +++ b/src/components/Insights/PerformanceAtScaleInsight/PerformanceAtScaleInsight.stories.tsx @@ -20,6 +20,7 @@ type Story = StoryObj; export const Default: Story = { args: { insight: { + id: "60b55492-8262-4c5d-9628-7cce7979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0, diff --git a/src/components/Insights/QueryOptimizationInsight/mockData.ts b/src/components/Insights/QueryOptimizationInsight/mockData.ts index ed7132271..da81088e0 100644 --- a/src/components/Insights/QueryOptimizationInsight/mockData.ts +++ b/src/components/Insights/QueryOptimizationInsight/mockData.ts @@ -6,6 +6,7 @@ import { } from "../types"; export const mockedQueryOptimizationInsight: QueryOptimizationInsight = { + id: "60b55792-8262-4c8d-9628-7cce7979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0, diff --git a/src/components/Insights/RequestBreakdownInsight/RequestBreakdownInsight.stories.tsx b/src/components/Insights/RequestBreakdownInsight/RequestBreakdownInsight.stories.tsx index 896018aed..7e6fdb610 100644 --- a/src/components/Insights/RequestBreakdownInsight/RequestBreakdownInsight.stories.tsx +++ b/src/components/Insights/RequestBreakdownInsight/RequestBreakdownInsight.stories.tsx @@ -23,6 +23,7 @@ export default meta; type Story = StoryObj; const data: EndpointBreakdownInsight = { + id: "60b55792-8262-4c5d-9628-7cce7979dd6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0, diff --git a/src/components/Insights/ScalingIssueInsight/ScalingIssueInsight.stories.tsx b/src/components/Insights/ScalingIssueInsight/ScalingIssueInsight.stories.tsx index 0bca4619f..4f8ef1f83 100644 --- a/src/components/Insights/ScalingIssueInsight/ScalingIssueInsight.stories.tsx +++ b/src/components/Insights/ScalingIssueInsight/ScalingIssueInsight.stories.tsx @@ -20,6 +20,7 @@ type Story = StoryObj; export const Default: Story = { args: { insight: { + id: "90b55792-8262-4c5d-9628-7cce7979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0, diff --git a/src/components/Insights/SessionInViewInsight/SessionInViewInsight.stories.tsx b/src/components/Insights/SessionInViewInsight/SessionInViewInsight.stories.tsx index bc72892f1..0b86f65a8 100644 --- a/src/components/Insights/SessionInViewInsight/SessionInViewInsight.stories.tsx +++ b/src/components/Insights/SessionInViewInsight/SessionInViewInsight.stories.tsx @@ -20,6 +20,7 @@ type Story = StoryObj; export const Default: Story = { args: { insight: { + id: "60b55792-8262-4c5a-9628-7cce7979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0, diff --git a/src/components/Insights/SlowEndpointInsight/SlowEndpointInsight.stories.tsx b/src/components/Insights/SlowEndpointInsight/SlowEndpointInsight.stories.tsx index 2a4439b4c..217bef041 100644 --- a/src/components/Insights/SlowEndpointInsight/SlowEndpointInsight.stories.tsx +++ b/src/components/Insights/SlowEndpointInsight/SlowEndpointInsight.stories.tsx @@ -20,6 +20,7 @@ type Story = StoryObj; export const Default: Story = { args: { insight: { + id: "60b55792-8262-4c3d-9628-7cce7979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0, diff --git a/src/components/Insights/SpanBottleneckInsight/mockData.ts b/src/components/Insights/SpanBottleneckInsight/mockData.ts index 3a462c3d5..7bbecdffa 100644 --- a/src/components/Insights/SpanBottleneckInsight/mockData.ts +++ b/src/components/Insights/SpanBottleneckInsight/mockData.ts @@ -6,6 +6,7 @@ import { } from "../types"; export const mockedSpanBottleneckInsight: EndpointSlowestSpansInsight = { + id: "60b55792-8262-4c5d-9628-7dce7979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0.7, diff --git a/src/components/Insights/SpanNexusInsight/mockData.ts b/src/components/Insights/SpanNexusInsight/mockData.ts index ecc559cbe..97d15330c 100644 --- a/src/components/Insights/SpanNexusInsight/mockData.ts +++ b/src/components/Insights/SpanNexusInsight/mockData.ts @@ -2,6 +2,7 @@ import { InsightType } from "../../../types"; import { InsightCategory, InsightScope, SpanNexusInsight } from "../types"; export const mockedSpanNexusInsight: SpanNexusInsight = { + id: "60b54792-8262-4c5d-9628-7cce7979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0, diff --git a/src/components/Insights/TopUsageInsight/TopUsageInsight.stories.tsx b/src/components/Insights/TopUsageInsight/TopUsageInsight.stories.tsx index ceb93ac33..27571f955 100644 --- a/src/components/Insights/TopUsageInsight/TopUsageInsight.stories.tsx +++ b/src/components/Insights/TopUsageInsight/TopUsageInsight.stories.tsx @@ -20,6 +20,7 @@ type Story = StoryObj; export const Default: Story = { args: { insight: { + id: "60b55792-8162-4c5d-9628-7cce7979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0, diff --git a/src/components/Insights/TrafficInsight/TrafficInsight.stories.tsx b/src/components/Insights/TrafficInsight/TrafficInsight.stories.tsx index bc9741df0..babc350ce 100644 --- a/src/components/Insights/TrafficInsight/TrafficInsight.stories.tsx +++ b/src/components/Insights/TrafficInsight/TrafficInsight.stories.tsx @@ -20,6 +20,7 @@ type Story = StoryObj; export const LowTraffic: Story = { args: { insight: { + id: "60b55792-8262-3c5d-9628-7cce7979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0, @@ -81,6 +82,7 @@ export const LowTraffic: Story = { export const HighTraffic: Story = { args: { insight: { + id: "60b55792-8262-3c5d-9628-7cce7979ad6d", firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", criticality: 0, diff --git a/src/components/Insights/types.ts b/src/components/Insights/types.ts index 07dbdabd4..b3d75d9a3 100644 --- a/src/components/Insights/types.ts +++ b/src/components/Insights/types.ts @@ -175,6 +175,7 @@ export interface CodeObjectInsight extends Insight { lastDetected: string | null; reopenCount: number; ticketLink: string | null; + id: string; } export interface SpanInsight extends CodeObjectInsight { diff --git a/src/components/common/v3/Card/styles.ts b/src/components/common/v3/Card/styles.ts index fd7a9e5e1..9c096661c 100644 --- a/src/components/common/v3/Card/styles.ts +++ b/src/components/common/v3/Card/styles.ts @@ -12,7 +12,7 @@ const Section = styled.div` padding: 8px; `; -export const Content = styled(Section); +export const Content = Section; export const Header = styled(Section)` border-bottom: 1px solid ${({ theme }) => theme.colors.v3.stroke.primary};