From 79dbc475297ecaab21d0d161e079b7f878275705 Mon Sep 17 00:00:00 2001 From: jennypavlova Date: Wed, 7 Feb 2024 17:06:24 +0100 Subject: [PATCH] [APM] Change services sparkline condition to align with dependencies table (#176293) Closes #175130 ## Summary This PR changes the condition to show the sparkline in the transaction table to check for `isLarge` size first to be consistent with the dependencies table. Big screen size: image Small screen size: ![image](https://github.com/elastic/kibana/assets/14139027/ad4c64fe-a675-4027-9823-44bf4b40a399) ## Testing - Compare the dependencies table and the transaction table on the overview tab and check other tabs for the same behavior (big and small screen sizes). https://github.com/elastic/kibana/assets/14139027/f372bd84-3414-4425-b576-29dd1bedca72 --- .../dependency_detail_operations_list/index.tsx | 5 +++-- .../components/app/mobile/service_overview/index.tsx | 1 - .../apm/public/components/app/service_overview/index.tsx | 3 ++- .../service_overview_dependencies_table/index.tsx | 3 +++ .../dependencies_table/get_span_metric_columns.tsx | 7 ++----- .../components/shared/dependencies_table/index.tsx | 8 +++++--- .../components/shared/transactions_table/index.tsx | 9 ++++----- 7 files changed, 19 insertions(+), 17 deletions(-) diff --git a/x-pack/plugins/apm/public/components/app/dependency_detail_operations/dependency_detail_operations_list/index.tsx b/x-pack/plugins/apm/public/components/app/dependency_detail_operations/dependency_detail_operations_list/index.tsx index 35516c1da58fd..7b7a4089172bf 100644 --- a/x-pack/plugins/apm/public/components/app/dependency_detail_operations/dependency_detail_operations_list/index.tsx +++ b/x-pack/plugins/apm/public/components/app/dependency_detail_operations/dependency_detail_operations_list/index.tsx @@ -63,7 +63,8 @@ export function DependencyDetailOperationsList() { const { core } = useApmPluginContext(); - const breakpoints = useBreakpoints(); + const { isLarge } = useBreakpoints(); + const shouldShowSparkPlots = !isLarge; const { start, end } = useTimeRange({ rangeFrom, @@ -147,7 +148,7 @@ export function DependencyDetailOperationsList() { render: (_, { spanName }) => , }, ...getSpanMetricColumns({ - breakpoints, + shouldShowSparkPlots, comparisonFetchStatus: comparisonStatsFetch.status, }), ]; diff --git a/x-pack/plugins/apm/public/components/app/mobile/service_overview/index.tsx b/x-pack/plugins/apm/public/components/app/mobile/service_overview/index.tsx index 55104eefaa071..dd0e2cd9968cc 100644 --- a/x-pack/plugins/apm/public/components/app/mobile/service_overview/index.tsx +++ b/x-pack/plugins/apm/public/components/app/mobile/service_overview/index.tsx @@ -193,7 +193,6 @@ export function MobileServiceOverview() { kuery={kueryWithMobileFilters} environment={environment} fixedHeight={true} - isSingleColumn={isSingleColumn} start={start} end={end} showPerPageOptions={false} diff --git a/x-pack/plugins/apm/public/components/app/service_overview/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/index.tsx index 4b2ab0ad6c3a8..743843c825210 100644 --- a/x-pack/plugins/apm/public/components/app/service_overview/index.tsx +++ b/x-pack/plugins/apm/public/components/app/service_overview/index.tsx @@ -135,11 +135,11 @@ export function ServiceOverview() { kuery={kuery} environment={environment} fixedHeight={true} - isSingleColumn={isSingleColumn} start={start} end={end} showPerPageOptions={false} numberOfTransactionsPerPage={5} + showSparkPlots={!isSingleColumn} /> @@ -209,6 +209,7 @@ export function ServiceOverview() { )} } + showSparkPlots={!isSingleColumn} /> diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx index f95905dd3dc57..e8c9dffa375b0 100644 --- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx +++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx @@ -24,12 +24,14 @@ interface ServiceOverviewDependenciesTableProps { fixedHeight?: boolean; link?: ReactNode; showPerPageOptions?: boolean; + showSparkPlots?: boolean; } export function ServiceOverviewDependenciesTable({ fixedHeight, link, showPerPageOptions = true, + showSparkPlots, }: ServiceOverviewDependenciesTableProps) { const { query: { @@ -171,6 +173,7 @@ export function ServiceOverviewDependenciesTable({ link={link} showPerPageOptions={showPerPageOptions} initialPageSize={5} + showSparkPlots={showSparkPlots} /> ); } diff --git a/x-pack/plugins/apm/public/components/shared/dependencies_table/get_span_metric_columns.tsx b/x-pack/plugins/apm/public/components/shared/dependencies_table/get_span_metric_columns.tsx index d477e7269cace..07d1b75ffb238 100644 --- a/x-pack/plugins/apm/public/components/shared/dependencies_table/get_span_metric_columns.tsx +++ b/x-pack/plugins/apm/public/components/shared/dependencies_table/get_span_metric_columns.tsx @@ -13,7 +13,6 @@ import { RIGHT_ALIGNMENT, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { Breakpoints } from '../../../hooks/use_breakpoints'; import { ChartType, getTimeSeriesColor, @@ -53,14 +52,12 @@ export interface SpanMetricGroup { } export function getSpanMetricColumns({ - breakpoints, comparisonFetchStatus, + shouldShowSparkPlots, }: { - breakpoints: Breakpoints; comparisonFetchStatus: FETCH_STATUS; + shouldShowSparkPlots: boolean; }): Array> { - const { isLarge } = breakpoints; - const shouldShowSparkPlots = !isLarge; const isLoading = isPending(comparisonFetchStatus); return [ diff --git a/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx b/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx index c4d1a0bdaffe1..dec4f35327e57 100644 --- a/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx @@ -38,6 +38,7 @@ interface Props { status: FETCH_STATUS; compact?: boolean; showPerPageOptions?: boolean; + showSparkPlots?: boolean; } type FormattedSpanMetricGroup = SpanMetricGroup & { @@ -56,10 +57,11 @@ export function DependenciesTable(props: Props) { compact = true, showPerPageOptions = true, initialPageSize, + showSparkPlots, } = props; - // SparkPlots should be hidden if we're in two-column view and size XL (1200px) - const breakpoints = useBreakpoints(); + const { isLarge } = useBreakpoints(); + const shouldShowSparkPlots = showSparkPlots ?? !isLarge; const items: FormattedSpanMetricGroup[] = dependencies.map((dependency) => ({ name: dependency.name, @@ -95,7 +97,7 @@ export function DependenciesTable(props: Props) { width: '30%', }, ...getSpanMetricColumns({ - breakpoints, + shouldShowSparkPlots, comparisonFetchStatus: status, }), ]; diff --git a/x-pack/plugins/apm/public/components/shared/transactions_table/index.tsx b/x-pack/plugins/apm/public/components/shared/transactions_table/index.tsx index e4553dfee073a..0d9621efd18c8 100644 --- a/x-pack/plugins/apm/public/components/shared/transactions_table/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/transactions_table/index.tsx @@ -48,7 +48,6 @@ const INITIAL_STATE: ApiResponse & { requestId: string } = { interface Props { hideTitle?: boolean; hideViewTransactionsLink?: boolean; - isSingleColumn?: boolean; numberOfTransactionsPerPage?: number; showPerPageOptions?: boolean; showMaxTransactionGroupsExceededWarning?: boolean; @@ -58,13 +57,13 @@ interface Props { start: string; end: string; saveTableOptionsToUrl?: boolean; + showSparkPlots?: boolean; } export function TransactionsTable({ fixedHeight = false, hideViewTransactionsLink = false, hideTitle = false, - isSingleColumn = true, numberOfTransactionsPerPage = 10, showPerPageOptions = true, showMaxTransactionGroupsExceededWarning = false, @@ -73,6 +72,7 @@ export function TransactionsTable({ start, end, saveTableOptionsToUrl = false, + showSparkPlots, }: Props) { const { link } = useApmRouter(); @@ -94,9 +94,8 @@ export function TransactionsTable({ latencyAggregationTypeFromQuery ); - // SparkPlots should be hidden if we're in two-column view and size XL (1200px) - const { isXl } = useBreakpoints(); - const shouldShowSparkPlots = isSingleColumn || !isXl; + const { isLarge } = useBreakpoints(); + const shouldShowSparkPlots = showSparkPlots ?? !isLarge; const { transactionType, serviceName } = useApmServiceContext(); const [searchQuery, setSearchQueryDebounced] = useStateDebounced('');