From 6180c8c070c1582f0e313e28ea532827ef7f9df2 Mon Sep 17 00:00:00 2001 From: olehp Date: Wed, 24 Jan 2024 12:04:43 +0200 Subject: [PATCH 1/2] Updated styles for code nexus span --- .../Insights/SpanNexusInsight/index.tsx | 42 ++++--- .../Insights/SpanNexusInsight/mockData.ts | 116 +++++++++--------- src/components/Insights/types.ts | 6 +- src/components/common/Tag/types.ts | 3 +- 4 files changed, 89 insertions(+), 78 deletions(-) diff --git a/src/components/Insights/SpanNexusInsight/index.tsx b/src/components/Insights/SpanNexusInsight/index.tsx index 48422d2f0..e05c97887 100644 --- a/src/components/Insights/SpanNexusInsight/index.tsx +++ b/src/components/Insights/SpanNexusInsight/index.tsx @@ -2,38 +2,48 @@ import { Tag } from "../../common/Tag"; import { InsightCard } from "../InsightCard"; import { Description } from "../styles"; import * as s from "./styles"; -import { SpanNexusInsightProps, } from "./types"; +import { SpanNexusInsightProps } from "./types"; -export const SpanNexusInsight = ( - props: SpanNexusInsightProps -) => { +const getTagType = (isHigh: boolean) => { + return isHigh ? "mediumSeverity" : "default"; +}; + +export const SpanNexusInsight = (props: SpanNexusInsightProps) => { const { insight } = props; - const { entries, flows, usage, services } = insight; + const { + entries, + flows, + usage, + services, + isEntriesHigh, + isFlowsHigh, + isServicesHigh + } = insight; return ( - - Multiple code flows depend on this location - + Multiple code flows depend on this location Services - + - Edpoints - + Endpoints + Flows - - - - Usage - + + {usage && ( + + Usage + + + )} } diff --git a/src/components/Insights/SpanNexusInsight/mockData.ts b/src/components/Insights/SpanNexusInsight/mockData.ts index 00f55d922..ecc559cbe 100644 --- a/src/components/Insights/SpanNexusInsight/mockData.ts +++ b/src/components/Insights/SpanNexusInsight/mockData.ts @@ -1,62 +1,60 @@ import { InsightType } from "../../../types"; -import { - InsightCategory, - InsightScope, - SpanNexusInsight -} from "../types"; +import { InsightCategory, InsightScope, SpanNexusInsight } from "../types"; -export const mockedSpanNexusInsight: SpanNexusInsight = - { - firstDetected: "2023-12-05T17:25:47.010Z", - lastDetected: "2024-01-05T13:14:47.010Z", - criticality: 0, - impact: 0, - firstCommitId: "b3f7b3f", - lastCommitId: "a1b2c3d", - deactivatedCommitId: null, - reopenCount: 0, - ticketLink: null, - name: "Code Nexus Point", - type: InsightType.SpanNexus, - category: InsightCategory.Usage, - specifity: 2, - importance: 3, - scope: InsightScope.Span, - 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: +export const mockedSpanNexusInsight: SpanNexusInsight = { + firstDetected: "2023-12-05T17:25:47.010Z", + lastDetected: "2024-01-05T13:14:47.010Z", + criticality: 0, + impact: 0, + firstCommitId: "b3f7b3f", + lastCommitId: "a1b2c3d", + deactivatedCommitId: null, + reopenCount: 0, + ticketLink: null, + name: "Code Nexus Point", + type: InsightType.SpanNexus, + category: InsightCategory.Usage, + specifity: 2, + importance: 3, + scope: InsightScope.Span, + 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", - customStartTime: null, - actualStartTime: "2023-08-10T08:04:00Z", - flows :4, - services: 3, - usage: 'High', - entries: 5, - }; + 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", + flows: 4, + services: 3, + usage: "High", + entries: 5, + isEntriesHigh: false, + isFlowsHigh: true, + isServicesHigh: false +}; diff --git a/src/components/Insights/types.ts b/src/components/Insights/types.ts index d6ff4875d..d0018bf29 100644 --- a/src/components/Insights/types.ts +++ b/src/components/Insights/types.ts @@ -688,6 +688,8 @@ export interface SpanNexusInsight extends SpanInsight { services: number; entries: number; flows: number; - usage: string | null; + usage?: string | null; + isEntriesHigh: boolean; + isFlowsHigh: boolean; + isServicesHigh: boolean; } - diff --git a/src/components/common/Tag/types.ts b/src/components/common/Tag/types.ts index fb1d77412..10941c2f4 100644 --- a/src/components/common/Tag/types.ts +++ b/src/components/common/Tag/types.ts @@ -5,7 +5,8 @@ export type TagType = | "highSeverity" | "mediumSeverity" | "lowSeverity" - | "success"; + | "success" + | "default"; export interface TagThemeColors { default: { From 378e668425b8e7564249f30bf001ab6704fbcb5d Mon Sep 17 00:00:00 2001 From: olehp Date: Wed, 24 Jan 2024 12:51:39 +0200 Subject: [PATCH 2/2] Changed conditions for recalculate --- src/components/Insights/InsightCard/index.tsx | 58 +++++++++++-------- 1 file changed, 33 insertions(+), 25 deletions(-) diff --git a/src/components/Insights/InsightCard/index.tsx b/src/components/Insights/InsightCard/index.tsx index 568b5495c..c08c09554 100644 --- a/src/components/Insights/InsightCard/index.tsx +++ b/src/components/Insights/InsightCard/index.tsx @@ -69,37 +69,45 @@ export const InsightCard = (props: InsightCardProps) => { const renderRecalculationBlock = ( actualStartTime: string, - customStartTime: string | null + customStartTime: string | null, + isRecalculatingStarted: boolean ) => { + if (!props.data.customStartTime && !isRecalculatingStarted) return; + + if ( + isRecalculatingStarted || + (customStartTime && customStartTime > actualStartTime) + ) + return ( + + + Applying the new time filter. Wait a few minutes and then refresh. + + + Refresh + + + ); + const areStartTimesEqual = customStartTime && new Date(actualStartTime).valueOf() - new Date(customStartTime).valueOf() === 0; - const title = new Date(actualStartTime).toString(); + if (areStartTimesEqual) { + const title = new Date(actualStartTime).toString(); + return ( + + Data from:{" "} + + {formatTimeDistance(actualStartTime)} + + + ); + } - return ( - <> - {areStartTimesEqual ? ( - - Data from:{" "} - - {formatTimeDistance(actualStartTime)} - - - ) : ( - - - Applying the new time filter. Wait a few minutes and then refresh. - - - Refresh - - - )} - - ); + return; }; return ( @@ -171,10 +179,10 @@ export const InsightCard = (props: InsightCardProps) => { /> )} {props.data.actualStartTime && - (props.data.customStartTime || isRecalculatingStarted) && renderRecalculationBlock( props.data.actualStartTime, - props.data.customStartTime + props.data.customStartTime, + isRecalculatingStarted )} {props.content && ( {props.content}