[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:

<img width="1919" alt="image"
src="https://github.com/elastic/kibana/assets/14139027/2b232838-2f25-4319-95a9-9b962d0221ac">

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

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 }) => <OperationLink spanName={spanName} />,
     },
     ...getSpanMetricColumns({
-      breakpoints,
+      shouldShowSparkPlots,
       comparisonFetchStatus: comparisonStatsFetch.status,
     }),
   ];

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}

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}
                   />
                 </EuiPanel>
               </EuiFlexItem>
@@ -209,6 +209,7 @@ export function ServiceOverview() {
                           )}
                         </EuiLink>
                       }
+                      showSparkPlots={!isSingleColumn}
                     />
                   </EuiPanel>
                 </EuiFlexItem>

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}
     />
   );
 }

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<ITableColumn<SpanMetricGroup>> {
-  const { isLarge } = breakpoints;
-  const shouldShowSparkPlots = !isLarge;
   const isLoading = isPending(comparisonFetchStatus);
 
   return [

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,
     }),
   ];

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('');