From feb6d8deae9071782896f85ad1dc0dcf6f80d276 Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 16 Feb 2024 16:42:57 +0200 Subject: [PATCH 1/8] fix bugs --- src/components/Assets/index.tsx | 17 +++--------- .../SearchInput/SearchInput.stories.tsx | 26 +++++++++++++++++++ src/components/common/SearchInput/index.tsx | 9 +++++++ src/components/common/SearchInput/styles.ts | 16 ++++++++++++ 4 files changed, 55 insertions(+), 13 deletions(-) create mode 100644 src/components/common/SearchInput/SearchInput.stories.tsx diff --git a/src/components/Assets/index.tsx b/src/components/Assets/index.tsx index f3bfcf684..eca204163 100644 --- a/src/components/Assets/index.tsx +++ b/src/components/Assets/index.tsx @@ -1,5 +1,4 @@ import { - ChangeEvent, useContext, useEffect, useLayoutEffect, @@ -16,7 +15,7 @@ import { usePrevious } from "../../hooks/usePrevious"; import { FeatureFlag } from "../../types"; import { ConfigContext } from "../common/App/ConfigContext"; import { EmptyState } from "../common/EmptyState"; -import { MagnifierIcon } from "../common/icons/MagnifierIcon"; +import { SearchInput } from "../common/SearchInput"; import { AssetList } from "./AssetList"; import { AssetTypeList } from "./AssetTypeList"; import { AssetsFilter } from "./AssetsFilter"; @@ -88,8 +87,8 @@ export const Assets = () => { setSelectedAssetTypeId(null); }; - const handleSearchInputChange = (e: ChangeEvent) => { - setSearchInputValue(e.target.value); + const handleSearchInputChange = (val: string | null) => { + setSearchInputValue(val || ""); }; const handleAssetTypeSelect = (assetTypeId: string) => { @@ -155,15 +154,7 @@ export const Assets = () => { Assets {window.assetsSearch === true && ( - - - - - - + )} {isComplexFilterEnabled ? ( = { + title: "Common/SearchInput", + component: SearchInput, + 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; + +// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args +export const Default: Story = { + args: {} +}; + +export const Disabled: Story = { + args: {} +}; diff --git a/src/components/common/SearchInput/index.tsx b/src/components/common/SearchInput/index.tsx index 3b3fce996..0e4ea7910 100644 --- a/src/components/common/SearchInput/index.tsx +++ b/src/components/common/SearchInput/index.tsx @@ -1,5 +1,6 @@ import { ChangeEvent, useEffect, useState } from "react"; import { useDebounce } from "../../../hooks/useDebounce"; +import { CrossIcon } from "../icons/CrossIcon"; import { MagnifierIcon } from "../icons/MagnifierIcon"; import * as s from "./styles"; import { SearchInputProps } from "./types"; @@ -22,7 +23,15 @@ export const SearchInput = (props: SearchInputProps) => { onChange={(e: ChangeEvent) => setSearchInputValue(e.target.value) } + value={searchInputValue || ""} /> + { + setSearchInputValue(""); + }} + > + + ); }; diff --git a/src/components/common/SearchInput/styles.ts b/src/components/common/SearchInput/styles.ts index b84a54369..9daa67d81 100644 --- a/src/components/common/SearchInput/styles.ts +++ b/src/components/common/SearchInput/styles.ts @@ -76,3 +76,19 @@ export const SearchInput = styled.input` color: transparent; } `; + +export const DeleteTagButton = styled.button` + padding: 0; + cursor: pointer; + background: none; + border: none; + height: 14px; + right: 4px; + display: flex; + align-items: center; + margin: auto; + position: absolute; + top: 0; + bottom: 0; + color: ${({ theme }) => theme.colors.icon.disabledAlt}; +`; From c4831227b793614df2997e186e54fe84d46db970 Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 16 Feb 2024 17:48:15 +0200 Subject: [PATCH 2/8] fix state --- src/components/Assets/AssetsFilter/index.tsx | 11 ++++++++--- src/components/Assets/index.tsx | 10 ++++++++-- .../Insights/InsightsCatalog/index.tsx | 18 ++++++++++-------- src/components/common/SearchInput/index.tsx | 16 ++++------------ src/components/common/SearchInput/types.ts | 2 +- 5 files changed, 31 insertions(+), 26 deletions(-) diff --git a/src/components/Assets/AssetsFilter/index.tsx b/src/components/Assets/AssetsFilter/index.tsx index b059da61c..fa0fe7e33 100644 --- a/src/components/Assets/AssetsFilter/index.tsx +++ b/src/components/Assets/AssetsFilter/index.tsx @@ -74,6 +74,7 @@ export const AssetsFilter = (props: AssetsFilterProps) => { const [selectedInsights, setSelectedInsights] = useState([]); const config = useContext(ConfigContext); const previousEnvironment = usePrevious(config.environment); + const previousScope = usePrevious(config.scope); const getData = ( services: string[], @@ -135,8 +136,10 @@ export const AssetsFilter = (props: AssetsFilterProps) => { useEffect(() => { if ( - isEnvironment(previousEnvironment) && - previousEnvironment.originalName !== config.environment?.originalName + (isEnvironment(previousEnvironment) && + previousEnvironment.originalName !== + config.environment?.originalName) || + (previousScope && previousScope !== config.scope) ) { const defaultFilters = { services: [], @@ -151,7 +154,9 @@ export const AssetsFilter = (props: AssetsFilterProps) => { previousEnvironment, config.environment, setPersistedFilters, - props.onApply + props.onApply, + previousScope, + config.scope ]); useEffect(() => { diff --git a/src/components/Assets/index.tsx b/src/components/Assets/index.tsx index eca204163..bb5550820 100644 --- a/src/components/Assets/index.tsx +++ b/src/components/Assets/index.tsx @@ -78,8 +78,11 @@ export const Assets = () => { }, [config.scope]); useEffect(() => { - if (previousScope !== config.scope?.span) { + if (!previousScope || previousScope !== config.scope?.span) { setSelectedAssetTypeId(null); + setSearchInputValue(""); + setSelectedFilters({ insights: [], services: [], operations: [] }); + setSelectedServices([]); } }, [config.scope, previousScope]); @@ -154,7 +157,10 @@ export const Assets = () => { Assets {window.assetsSearch === true && ( - + )} {isComplexFilterEnabled ? ( { const { insights, onJiraTicketCreate, defaultQuery, totalCount } = props; const [page, setPage] = useState(0); const previousPage = usePrevious(page); - const [searchInputValue, setSearchInputValue] = useState( + const [searchInputValue, setSearchInputValue] = useState( defaultQuery.searchQuery ); + const debouncedSearchInputValue = useDebounce(searchInputValue, 1000); const [sorting, setSorting] = useState(defaultQuery.sorting); const previousSorting = usePrevious(sorting); - const previousSearchQuery = usePrevious(searchInputValue); + const previousSearchQuery = usePrevious(debouncedSearchInputValue); const pageStartItemNumber = page * PAGE_SIZE + 1; const pageEndItemNumber = Math.min( pageStartItemNumber + PAGE_SIZE - 1, @@ -31,7 +33,7 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => { props.onQueryChange({ page, sorting, - searchQuery: searchInputValue + searchQuery: debouncedSearchInputValue }); }, []); @@ -39,12 +41,12 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => { if ( (isNumber(previousPage) && previousPage !== page) || (previousSorting && previousSorting !== sorting) || - previousSearchQuery !== searchInputValue + previousSearchQuery !== debouncedSearchInputValue ) { props.onQueryChange({ page, sorting, - searchQuery: searchInputValue + searchQuery: debouncedSearchInputValue }); } }, [ @@ -52,7 +54,7 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => { sorting, previousPage, page, - searchInputValue, + debouncedSearchInputValue, previousSearchQuery ]); @@ -63,7 +65,7 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => { onChange={(val: string | null) => { setSearchInputValue(val); }} - default={defaultQuery.searchQuery} + value={searchInputValue} /> { @@ -86,7 +88,7 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => { diff --git a/src/components/common/SearchInput/index.tsx b/src/components/common/SearchInput/index.tsx index 0e4ea7910..8c2cfb083 100644 --- a/src/components/common/SearchInput/index.tsx +++ b/src/components/common/SearchInput/index.tsx @@ -1,18 +1,10 @@ -import { ChangeEvent, useEffect, useState } from "react"; -import { useDebounce } from "../../../hooks/useDebounce"; +import { ChangeEvent } from "react"; import { CrossIcon } from "../icons/CrossIcon"; import { MagnifierIcon } from "../icons/MagnifierIcon"; import * as s from "./styles"; import { SearchInputProps } from "./types"; export const SearchInput = (props: SearchInputProps) => { - const [searchInputValue, setSearchInputValue] = useState(props.default); - const debouncedSearchInputValue = useDebounce(searchInputValue, 1000); - - useEffect(() => { - props.onChange(debouncedSearchInputValue); - }, [debouncedSearchInputValue]); - return ( @@ -21,13 +13,13 @@ export const SearchInput = (props: SearchInputProps) => { ) => - setSearchInputValue(e.target.value) + props.onChange(e.target.value) } - value={searchInputValue || ""} + value={props.value || ""} /> { - setSearchInputValue(""); + props.onChange(""); }} > diff --git a/src/components/common/SearchInput/types.ts b/src/components/common/SearchInput/types.ts index f73e18955..7ebbf739d 100644 --- a/src/components/common/SearchInput/types.ts +++ b/src/components/common/SearchInput/types.ts @@ -1,4 +1,4 @@ export interface SearchInputProps { onChange: (value: string | null) => void; - default: string | null; + value?: string | null; } From 4e4df326de50d68a66b90149a29e66bbcd573a4d Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 16 Feb 2024 18:05:54 +0200 Subject: [PATCH 3/8] fxi scroll top --- src/components/Insights/InsightsCatalog/index.tsx | 6 ++++++ src/components/Insights/InsightsPage/index.tsx | 8 -------- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/src/components/Insights/InsightsCatalog/index.tsx b/src/components/Insights/InsightsCatalog/index.tsx index 84ffa9751..766cb729b 100644 --- a/src/components/Insights/InsightsCatalog/index.tsx +++ b/src/components/Insights/InsightsCatalog/index.tsx @@ -29,6 +29,12 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => { totalCount ); + useEffect(() => { + if (previousPage !== page) { + window.scrollTo(0, 0); + } + }, [previousPage, page]); + useEffect(() => { props.onQueryChange({ page, diff --git a/src/components/Insights/InsightsPage/index.tsx b/src/components/Insights/InsightsPage/index.tsx index caa9dc46e..14fc3b9cb 100644 --- a/src/components/Insights/InsightsPage/index.tsx +++ b/src/components/Insights/InsightsPage/index.tsx @@ -1,7 +1,6 @@ import { useEffect } from "react"; import { v4 as uuidv4 } from "uuid"; import { usePersistence } from "../../../hooks/usePersistence"; -import { usePrevious } from "../../../hooks/usePrevious"; import { trackingEvents as globalTrackingEvents } from "../../../trackingEvents"; import { isUndefined } from "../../../typeGuards/isUndefined"; import { InsightType } from "../../../types"; @@ -473,7 +472,6 @@ const IS_INSIGHT_JIRA_TICKET_HINT_SHOWN_PERSISTENCE_KEY = "isInsightJiraTicketHintShown"; export const InsightsPage = (props: InsightPageProps) => { - const previousInsights = usePrevious(props.insights); const [isInsightJiraTicketHintShown, setIsInsightJiraTicketHintShown] = usePersistence( IS_INSIGHT_JIRA_TICKET_HINT_SHOWN_PERSISTENCE_KEY, @@ -482,12 +480,6 @@ export const InsightsPage = (props: InsightPageProps) => { const insightIndexWithJiraHint = getInsightToShowJiraHint(props.insights); - useEffect(() => { - if (props.insights !== previousInsights) { - window.scrollTo(0, 0); - } - }, [props.insights, previousInsights]); - useEffect(() => { window.sendMessageToDigma({ action: actions.MARK_INSIGHT_TYPES_AS_VIEWED, From 83c3110e208d6bcf3b8bafa800eaf8f189ac579b Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 16 Feb 2024 18:44:33 +0200 Subject: [PATCH 4/8] Make card title as link --- src/actions.ts | 3 ++- .../Insights/BottleneckInsight/index.tsx | 2 +- .../DurationBreakdownInsight/index.tsx | 2 +- .../Insights/DurationInsight/index.tsx | 2 +- .../DurationSlowdownSourceInsight/index.tsx | 2 +- .../EndpointNPlusOneInsight/index.tsx | 2 +- .../index.tsx | 2 +- .../ExcessiveAPICallsInsight/index.tsx | 2 +- .../HighNumberOfQueriesInsight/index.tsx | 2 +- .../InsightCard/InsightCard.stories.tsx | 1 - src/components/Insights/InsightCard/index.tsx | 25 +++++++++++++++++-- src/components/Insights/InsightCard/styles.ts | 12 ++++++++- src/components/Insights/InsightCard/types.ts | 4 +-- .../Insights/NPlusOneInsight/index.tsx | 2 +- .../Insights/NoScalingIssueInsight/index.tsx | 2 +- .../PerformanceAtScaleInsight/index.tsx | 2 +- .../QueryOptimizationInsight/index.tsx | 2 +- .../RequestBreakdownInsight/index.tsx | 2 +- .../Insights/ScalingIssueInsight/index.tsx | 2 +- .../Insights/SessionInViewInsight/index.tsx | 2 +- .../Insights/SlowEndpointInsight/index.tsx | 2 +- .../Insights/SpanBottleneckInsight/index.tsx | 2 +- .../Insights/SpanNexusInsight/index.tsx | 2 +- .../Insights/TopUsageInsight/index.tsx | 2 +- .../Insights/TrafficInsight/index.tsx | 2 +- 25 files changed, 58 insertions(+), 27 deletions(-) diff --git a/src/actions.ts b/src/actions.ts index 9c9a6c9b0..07fca64a7 100644 --- a/src/actions.ts +++ b/src/actions.ts @@ -33,5 +33,6 @@ export const actions = addPrefix(ACTION_PREFIX, { SET_FROM_PERSISTENCE: "SET_FROM_PERSISTENCE", OPEN_DASHBOARD: "OPEN_DASHBOARD", OPEN_INSTALLATION_WIZARD: "OPEN_INSTALLATION_WIZARD", - SET_SCOPE: "SET_SCOPE" + SET_SCOPE: "SET_SCOPE", + CHANGE_SCOPE: "CHANGE_SCOPE" }); diff --git a/src/components/Insights/BottleneckInsight/index.tsx b/src/components/Insights/BottleneckInsight/index.tsx index dd6951e95..34c8d41b3 100644 --- a/src/components/Insights/BottleneckInsight/index.tsx +++ b/src/components/Insights/BottleneckInsight/index.tsx @@ -26,7 +26,7 @@ export const BottleneckInsight = (props: BottleneckInsightProps) => { return ( diff --git a/src/components/Insights/DurationBreakdownInsight/index.tsx b/src/components/Insights/DurationBreakdownInsight/index.tsx index 8b1f96232..2aa086425 100644 --- a/src/components/Insights/DurationBreakdownInsight/index.tsx +++ b/src/components/Insights/DurationBreakdownInsight/index.tsx @@ -80,7 +80,7 @@ export const DurationBreakdownInsight = ( return ( {pageItems.map((entry) => { diff --git a/src/components/Insights/DurationInsight/index.tsx b/src/components/Insights/DurationInsight/index.tsx index af18e413e..3ac1ba9a3 100644 --- a/src/components/Insights/DurationInsight/index.tsx +++ b/src/components/Insights/DurationInsight/index.tsx @@ -283,7 +283,7 @@ export const DurationInsight = (props: DurationInsightProps) => { return ( diff --git a/src/components/Insights/DurationSlowdownSourceInsight/index.tsx b/src/components/Insights/DurationSlowdownSourceInsight/index.tsx index 18dc4a239..e9ba2b76e 100644 --- a/src/components/Insights/DurationSlowdownSourceInsight/index.tsx +++ b/src/components/Insights/DurationSlowdownSourceInsight/index.tsx @@ -53,7 +53,7 @@ export const DurationSlowdownSourceInsight = ( return ( Found spans slowing the endpoint diff --git a/src/components/Insights/EndpointNPlusOneInsight/index.tsx b/src/components/Insights/EndpointNPlusOneInsight/index.tsx index 9e243d458..4c4d1c8f7 100644 --- a/src/components/Insights/EndpointNPlusOneInsight/index.tsx +++ b/src/components/Insights/EndpointNPlusOneInsight/index.tsx @@ -58,7 +58,7 @@ export const EndpointNPlusOneInsight = ( return ( Check the following locations: diff --git a/src/components/Insights/EndpointQueryOptimizationInsight/index.tsx b/src/components/Insights/EndpointQueryOptimizationInsight/index.tsx index a168c4ca6..5861fbf02 100644 --- a/src/components/Insights/EndpointQueryOptimizationInsight/index.tsx +++ b/src/components/Insights/EndpointQueryOptimizationInsight/index.tsx @@ -56,7 +56,7 @@ export const EndpointQueryOptimizationInsight = ( return ( Check the following locations: diff --git a/src/components/Insights/ExcessiveAPICallsInsight/index.tsx b/src/components/Insights/ExcessiveAPICallsInsight/index.tsx index 6d285824d..e46a9d90e 100644 --- a/src/components/Insights/ExcessiveAPICallsInsight/index.tsx +++ b/src/components/Insights/ExcessiveAPICallsInsight/index.tsx @@ -40,7 +40,7 @@ export const ExcessiveAPICallsInsight = ( return ( diff --git a/src/components/Insights/HighNumberOfQueriesInsight/index.tsx b/src/components/Insights/HighNumberOfQueriesInsight/index.tsx index 6337e92b5..88b8e5b32 100644 --- a/src/components/Insights/HighNumberOfQueriesInsight/index.tsx +++ b/src/components/Insights/HighNumberOfQueriesInsight/index.tsx @@ -39,7 +39,7 @@ export const HighNumberOfQueriesInsight = ( return ( diff --git a/src/components/Insights/InsightCard/InsightCard.stories.tsx b/src/components/Insights/InsightCard/InsightCard.stories.tsx index b5c86fef6..bf4fdfe88 100644 --- a/src/components/Insights/InsightCard/InsightCard.stories.tsx +++ b/src/components/Insights/InsightCard/InsightCard.stories.tsx @@ -20,7 +20,6 @@ type Story = StoryObj; export const Default: Story = { args: { - title: "asdasdasd", data: { firstDetected: "2023-12-05T17:25:47.010Z", lastDetected: "2024-01-05T13:14:47.010Z", diff --git a/src/components/Insights/InsightCard/index.tsx b/src/components/Insights/InsightCard/index.tsx index 30fe2bdaa..af317c670 100644 --- a/src/components/Insights/InsightCard/index.tsx +++ b/src/components/Insights/InsightCard/index.tsx @@ -1,5 +1,6 @@ import { useContext, useState } from "react"; import { useTheme } from "styled-components"; +import { actions } from "../../../actions"; import { PERCENTILES } from "../../../constants"; import { isString } from "../../../typeGuards/isString"; import { formatTimeDistance } from "../../../utils/formatTimeDistance"; @@ -123,16 +124,36 @@ export const InsightCard = (props: InsightCardProps) => { IS_NEW_TIME_LIMIT : false; + const handleLinkClick = (spanCodeObjectId?: string) => { + window.sendMessageToDigma({ + action: actions.CHANGE_SCOPE, + payload: { + span: spanCodeObjectId ? { spanCodeObjectId } : null + } + }); + }; + return ( <> - {props.title} + + {props.spanInfo?.spanCodeObjectId ? ( + + handleLinkClick(props.spanInfo?.spanCodeObjectId) + } + > + {props.spanInfo?.displayName} + + ) : ( + {props.spanInfo?.displayName} + )} } header={ diff --git a/src/components/Insights/InsightCard/styles.ts b/src/components/Insights/InsightCard/styles.ts index 33bfd3904..590e4c4f2 100644 --- a/src/components/Insights/InsightCard/styles.ts +++ b/src/components/Insights/InsightCard/styles.ts @@ -1,10 +1,20 @@ import styled from "styled-components"; -import { Link } from "../styles"; export const TitleIcon = styled.div` display: flex; `; +export const Link = styled.a` + color: #7891d0; + text-decoration: none; + font-weight: 500; + font-size: 14px; + cursor: pointer; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +`; + export const TitleText = styled.div` fill: #a1b5ff; text-overflow: ellipsis; diff --git a/src/components/Insights/InsightCard/types.ts b/src/components/Insights/InsightCard/types.ts index 762c13f5f..560169af6 100644 --- a/src/components/Insights/InsightCard/types.ts +++ b/src/components/Insights/InsightCard/types.ts @@ -1,5 +1,5 @@ import { ReactNode } from "react"; -import { InsightType } from "../../../types"; +import { InsightType, SpanInfo } from "../../../types"; import { GenericCodeObjectInsight } from "../types"; export interface InsightCardProps { @@ -9,7 +9,6 @@ export interface InsightCardProps { menuItems?: string[]; stats?: string; buttons?: ReactNode[]; - title?: string; onRecalculate: ( prefixedCodeObjectId: string, insightType: InsightType @@ -18,6 +17,7 @@ export interface InsightCardProps { isRecent?: boolean; onRefresh: (insightType: InsightType) => void; isAsync?: boolean; + spanInfo?: SpanInfo | null; } export interface PercentileViewModeOptionProps { diff --git a/src/components/Insights/NPlusOneInsight/index.tsx b/src/components/Insights/NPlusOneInsight/index.tsx index 46c21bdf5..d85fe011b 100644 --- a/src/components/Insights/NPlusOneInsight/index.tsx +++ b/src/components/Insights/NPlusOneInsight/index.tsx @@ -47,7 +47,7 @@ export const NPlusOneInsight = (props: NPlusOneInsightProps) => { return ( Check the following SELECT statement: diff --git a/src/components/Insights/NoScalingIssueInsight/index.tsx b/src/components/Insights/NoScalingIssueInsight/index.tsx index a51e65def..3d1a35637 100644 --- a/src/components/Insights/NoScalingIssueInsight/index.tsx +++ b/src/components/Insights/NoScalingIssueInsight/index.tsx @@ -17,7 +17,7 @@ export const NoScalingIssueInsight = (props: NoScalingIssueInsightProps) => { return ( This code is scaling well at concurrent executions} buttons={[ diff --git a/src/components/Insights/PerformanceAtScaleInsight/index.tsx b/src/components/Insights/PerformanceAtScaleInsight/index.tsx index a48c11ece..d6f2493fb 100644 --- a/src/components/Insights/PerformanceAtScaleInsight/index.tsx +++ b/src/components/Insights/PerformanceAtScaleInsight/index.tsx @@ -67,7 +67,7 @@ export const PerformanceAtScaleInsight = ( Run at{" "} diff --git a/src/components/Insights/QueryOptimizationInsight/index.tsx b/src/components/Insights/QueryOptimizationInsight/index.tsx index b6f9d2b36..9b34c906b 100644 --- a/src/components/Insights/QueryOptimizationInsight/index.tsx +++ b/src/components/Insights/QueryOptimizationInsight/index.tsx @@ -53,7 +53,7 @@ export const QueryOptimizationInsight = ( return ( diff --git a/src/components/Insights/RequestBreakdownInsight/index.tsx b/src/components/Insights/RequestBreakdownInsight/index.tsx index 711c492f4..d1b3ee9a0 100644 --- a/src/components/Insights/RequestBreakdownInsight/index.tsx +++ b/src/components/Insights/RequestBreakdownInsight/index.tsx @@ -193,7 +193,7 @@ export const RequestBreakdownInsight = ( return ( { return ( diff --git a/src/components/Insights/SessionInViewInsight/index.tsx b/src/components/Insights/SessionInViewInsight/index.tsx index be1b6874d..38707844a 100644 --- a/src/components/Insights/SessionInViewInsight/index.tsx +++ b/src/components/Insights/SessionInViewInsight/index.tsx @@ -37,7 +37,7 @@ export const SessionInViewInsight = (props: SessionInViewInsightProps) => { return ( diff --git a/src/components/Insights/SlowEndpointInsight/index.tsx b/src/components/Insights/SlowEndpointInsight/index.tsx index fd5b4b854..d99a999b9 100644 --- a/src/components/Insights/SlowEndpointInsight/index.tsx +++ b/src/components/Insights/SlowEndpointInsight/index.tsx @@ -13,7 +13,7 @@ export const SlowEndpointInsight = (props: SlowEndpointInsightProps) => { return ( {`On average requests are slower than other endpoints by ${roundTo( diff --git a/src/components/Insights/SpanBottleneckInsight/index.tsx b/src/components/Insights/SpanBottleneckInsight/index.tsx index af55eddf3..ffadc06c8 100644 --- a/src/components/Insights/SpanBottleneckInsight/index.tsx +++ b/src/components/Insights/SpanBottleneckInsight/index.tsx @@ -29,7 +29,7 @@ export const SpanBottleneckInsight = (props: SpanBottleneckInsightProps) => { return ( diff --git a/src/components/Insights/SpanNexusInsight/index.tsx b/src/components/Insights/SpanNexusInsight/index.tsx index 5f90acce6..1f3a8dbe0 100644 --- a/src/components/Insights/SpanNexusInsight/index.tsx +++ b/src/components/Insights/SpanNexusInsight/index.tsx @@ -22,7 +22,7 @@ export const SpanNexusInsight = (props: SpanNexusInsightProps) => { return ( Multiple code flows depend on this location diff --git a/src/components/Insights/TopUsageInsight/index.tsx b/src/components/Insights/TopUsageInsight/index.tsx index 2c179130f..74627241f 100644 --- a/src/components/Insights/TopUsageInsight/index.tsx +++ b/src/components/Insights/TopUsageInsight/index.tsx @@ -38,7 +38,7 @@ export const TopUsageInsight = (props: TopUsageInsightProps) => { return ( {pageItems.map((flow, i) => { diff --git a/src/components/Insights/TrafficInsight/index.tsx b/src/components/Insights/TrafficInsight/index.tsx index 91346ed00..ba98a2338 100644 --- a/src/components/Insights/TrafficInsight/index.tsx +++ b/src/components/Insights/TrafficInsight/index.tsx @@ -44,7 +44,7 @@ export const TrafficInsight = (props: TrafficInsightProps) => { return ( {getDescription(props.insight.type)}} stats={`${valueString}/min`} From 19b15c1daf430478846b7e1aa9ef0585ae35fd44 Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 16 Feb 2024 18:48:17 +0200 Subject: [PATCH 5/8] clean-up --- .../Navigation/ScopeNavigation/styles.ts | 14 -------------- 1 file changed, 14 deletions(-) delete mode 100644 src/components/Navigation/ScopeNavigation/styles.ts diff --git a/src/components/Navigation/ScopeNavigation/styles.ts b/src/components/Navigation/ScopeNavigation/styles.ts deleted file mode 100644 index 549940deb..000000000 --- a/src/components/Navigation/ScopeNavigation/styles.ts +++ /dev/null @@ -1,14 +0,0 @@ -import styled from "styled-components"; - -export const NavigationButton = styled.button` - height: 28px; - width: 28px; - - &:not([disabled]) { - border: none; - } - - &:disabled { - color: ${({ theme }) => theme.colors.v3.icon.disabled}; - } -`; From 9d8ee114504e6d43193968be03e517ced30c770e Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 16 Feb 2024 18:52:21 +0200 Subject: [PATCH 6/8] fix comments --- src/components/Navigation/ScopeNavigation/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Navigation/ScopeNavigation/index.tsx b/src/components/Navigation/ScopeNavigation/index.tsx index 7b7bd160d..e7eda8421 100644 --- a/src/components/Navigation/ScopeNavigation/index.tsx +++ b/src/components/Navigation/ScopeNavigation/index.tsx @@ -2,7 +2,7 @@ import { useContext, useEffect, useState } from "react"; import { actions } from "../../../actions"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; -import { HistoryManager, HistoryStep } from "../../../utils/historyManager"; +import { HistoryManager, HistoryStep } from "../../../utils/HistoryManager"; import { ConfigContext } from "../../common/App/ConfigContext"; import { Scope } from "../../common/App/types"; import { HistoryNavigationPanel } from "../HistoryNavigationPanel"; From fdd435c04fb82fd2863df0ca78422a642d296e45 Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 16 Feb 2024 19:13:44 +0200 Subject: [PATCH 7/8] FIxed comments --- src/components/Assets/index.tsx | 1 - src/components/Insights/InsightCard/index.tsx | 31 ++++++++----------- src/components/Insights/InsightCard/styles.ts | 8 ----- 3 files changed, 13 insertions(+), 27 deletions(-) diff --git a/src/components/Assets/index.tsx b/src/components/Assets/index.tsx index bb5550820..c4ce11fee 100644 --- a/src/components/Assets/index.tsx +++ b/src/components/Assets/index.tsx @@ -81,7 +81,6 @@ export const Assets = () => { if (!previousScope || previousScope !== config.scope?.span) { setSelectedAssetTypeId(null); setSearchInputValue(""); - setSelectedFilters({ insights: [], services: [], operations: [] }); setSelectedServices([]); } }, [config.scope, previousScope]); diff --git a/src/components/Insights/InsightCard/index.tsx b/src/components/Insights/InsightCard/index.tsx index af317c670..38b7aca47 100644 --- a/src/components/Insights/InsightCard/index.tsx +++ b/src/components/Insights/InsightCard/index.tsx @@ -125,12 +125,14 @@ export const InsightCard = (props: InsightCardProps) => { : false; const handleLinkClick = (spanCodeObjectId?: string) => { - window.sendMessageToDigma({ - action: actions.CHANGE_SCOPE, - payload: { - span: spanCodeObjectId ? { spanCodeObjectId } : null - } - }); + if (spanCodeObjectId) { + window.sendMessageToDigma({ + action: actions.CHANGE_SCOPE, + payload: { + span: spanCodeObjectId ? { spanCodeObjectId } : null + } + }); + } }; return ( @@ -142,18 +144,11 @@ export const InsightCard = (props: InsightCardProps) => { - - {props.spanInfo?.spanCodeObjectId ? ( - - handleLinkClick(props.spanInfo?.spanCodeObjectId) - } - > - {props.spanInfo?.displayName} - - ) : ( - {props.spanInfo?.displayName} - )} + handleLinkClick(props.spanInfo?.spanCodeObjectId)} + > + {props.spanInfo?.displayName} + } header={ diff --git a/src/components/Insights/InsightCard/styles.ts b/src/components/Insights/InsightCard/styles.ts index 590e4c4f2..8157e207c 100644 --- a/src/components/Insights/InsightCard/styles.ts +++ b/src/components/Insights/InsightCard/styles.ts @@ -15,14 +15,6 @@ export const Link = styled.a` overflow: hidden; `; -export const TitleText = styled.div` - fill: #a1b5ff; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - display: block; -`; - export const Title = styled.div` border-radius: 4px 4px 0 0; display: flex; From a868c72a573be62e782b0021be8411c50194ce0f Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 16 Feb 2024 19:16:33 +0200 Subject: [PATCH 8/8] fix comments --- src/components/Insights/InsightCard/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Insights/InsightCard/index.tsx b/src/components/Insights/InsightCard/index.tsx index 38b7aca47..5850ee628 100644 --- a/src/components/Insights/InsightCard/index.tsx +++ b/src/components/Insights/InsightCard/index.tsx @@ -129,7 +129,7 @@ export const InsightCard = (props: InsightCardProps) => { window.sendMessageToDigma({ action: actions.CHANGE_SCOPE, payload: { - span: spanCodeObjectId ? { spanCodeObjectId } : null + span: spanCodeObjectId } }); }