[APM] Service overview: Introduce time-series comparison (#88665) (#88948)

cauemarcondes · kibanamachine · web-flow · commit edfae05d380b · 2021-01-21T15:09:46.000+01:00
* adding comparision select option

* adding time comparison field on some pages

* removing unused files

* fixing unit test

* adding unit tests

* enabling comparison for more than 8 days

* removing tooltip

* refactoring search bar

* moving useBreakPoint to common hooks folder, removing useShouldUSeMobileLayout hook

* addressing PR comments

* addressing PR comments

* addressing PR comments

* addressing PR comments

Co-authored-by: Kibana Machine &lt;42973632+kibanamachine@users.noreply.github.com&gt;

Co-authored-by: Kibana Machine &lt;42973632+kibanamachine@users.noreply.github.com&gt;
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx
@@ -18,7 +18,7 @@ import { UXMetrics } from './UXMetrics';
 import { ImpactfulMetrics } from './ImpactfulMetrics';
 import { PageLoadAndViews } from './Panels/PageLoadAndViews';
 import { VisitorBreakdownsPanel } from './Panels/VisitorBreakdowns';
-import { useBreakPoints } from './hooks/useBreakPoints';
+import { useBreakPoints } from '../../../hooks/use_break_points';
 import { getPercentileLabel } from './UXMetrics/translations';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/index.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/index.tsx
@@ -113,7 +113,7 @@ export function TransactionDetails({
           <h1>{transactionName}</h1>
         </EuiTitle>
       </ApmHeader>
-      <SearchBar />
+      <SearchBar showTimeComparison />
       <EuiPage>
         <EuiFlexGroup>
           <EuiFlexItem grow={1}>
diff --git a/x-pack/plugins/apm/public/components/app/service_inventory/index.tsx b/x-pack/plugins/apm/public/components/app/service_inventory/index.tsx
@@ -129,7 +129,7 @@ export function ServiceInventory() {
 
   return (
     <>
-      <SearchBar />
+      <SearchBar showTimeComparison />
       <EuiPage>
         <EuiFlexGroup>
           <EuiFlexItem grow={1}>
diff --git a/x-pack/plugins/apm/public/components/app/service_inventory/service_inventory.test.tsx b/x-pack/plugins/apm/public/components/app/service_inventory/service_inventory.test.tsx
@@ -57,6 +57,8 @@ function wrapper({ children }: { children?: ReactNode }) {
                 rangeTo: 'now',
                 start: 'mystart',
                 end: 'myend',
+                comparisonEnabled: true,
+                comparisonType: 'yesterday',
               }}
             >
               {children}
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
@@ -12,6 +12,7 @@ import { isRumAgentName } from '../../../../common/agent_name';
 import { AnnotationsContextProvider } from '../../../context/annotations/annotations_context';
 import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
 import { ChartPointerEventContextProvider } from '../../../context/chart_pointer_event/chart_pointer_event_context';
+import { useBreakPoints } from '../../../hooks/use_break_points';
 import { LatencyChart } from '../../shared/charts/latency_chart';
 import { TransactionBreakdownChart } from '../../shared/charts/transaction_breakdown_chart';
 import { TransactionErrorRateChart } from '../../shared/charts/transaction_error_rate_chart';
@@ -22,7 +23,6 @@ import { ServiceOverviewErrorsTable } from './service_overview_errors_table';
 import { ServiceOverviewInstancesTable } from './service_overview_instances_table';
 import { ServiceOverviewThroughputChart } from './service_overview_throughput_chart';
 import { ServiceOverviewTransactionsTable } from './service_overview_transactions_table';
-import { useShouldUseMobileLayout } from './use_should_use_mobile_layout';
 
 /**
  * The height a chart should be if it's next to a table with 5 rows and a title.
@@ -44,8 +44,8 @@ export function ServiceOverview({
 
   // The default EuiFlexGroup breaks at 768, but we want to break at 992, so we
   // observe the window width and set the flex directions of rows accordingly
-  const shouldUseMobileLayout = useShouldUseMobileLayout();
-  const rowDirection = shouldUseMobileLayout ? 'column' : 'row';
+  const { isMedium } = useBreakPoints();
+  const rowDirection = isMedium ? 'column' : 'row';
 
   const { transactionType } = useApmServiceContext();
   const transactionTypeLabel = i18n.translate(
@@ -57,7 +57,7 @@ export function ServiceOverview({
   return (
     <AnnotationsContextProvider>
       <ChartPointerEventContextProvider>
-        <SearchBar prepend={transactionTypeLabel} />
+        <SearchBar prepend={transactionTypeLabel} showTimeComparison />
         <EuiPage>
           <EuiFlexGroup direction="column" gutterSize="s">
             {isRumAgent && (
diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_table_container.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_table_container.tsx
@@ -6,7 +6,7 @@
 
 import React, { ReactNode } from 'react';
 import styled from 'styled-components';
-import { useShouldUseMobileLayout } from './use_should_use_mobile_layout';
+import { useBreakPoints } from '../../../hooks/use_break_points';
 
 /**
  * The height for a table on the overview page. Is the height of a 5-row basic
@@ -58,12 +58,12 @@ export function ServiceOverviewTableContainer({
   children?: ReactNode;
   isEmptyAndLoading: boolean;
 }) {
-  const shouldUseMobileLayout = useShouldUseMobileLayout();
+  const { isMedium } = useBreakPoints();
 
   return (
     <ServiceOverviewTableContainerDiv
       isEmptyAndLoading={isEmptyAndLoading}
-      shouldUseMobileLayout={shouldUseMobileLayout}
+      shouldUseMobileLayout={isMedium}
     >
       {children}
     </ServiceOverviewTableContainerDiv>
diff --git a/x-pack/plugins/apm/public/components/app/service_overview/use_should_use_mobile_layout.ts b/x-pack/plugins/apm/public/components/app/service_overview/use_should_use_mobile_layout.ts
diff --git a/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx
@@ -108,7 +108,7 @@ export function TransactionOverview({ serviceName }: TransactionOverviewProps) {
 
   return (
     <>
-      <SearchBar />
+      <SearchBar showTimeComparison />
 
       <EuiPage>
         <EuiFlexGroup>
diff --git a/x-pack/plugins/apm/public/components/app/transaction_overview/transaction_overview.test.tsx b/x-pack/plugins/apm/public/components/app/transaction_overview/transaction_overview.test.tsx
@@ -130,7 +130,7 @@ describe('TransactionOverview', () => {
       });
 
       expect(history.location.search).toEqual(
-        '?transactionType=secondType&rangeFrom=now-15m&rangeTo=now'
+        '?transactionType=secondType&rangeFrom=now-15m&rangeTo=now&comparisonEnabled=true&comparisonType=yesterday'
       );
       expect(getByText(container, 'firstType')).toBeInTheDocument();
       expect(getByText(container, 'secondType')).toBeInTheDocument();
@@ -139,7 +139,7 @@ describe('TransactionOverview', () => {
 
       expect(history.push).toHaveBeenCalled();
       expect(history.location.search).toEqual(
-        '?transactionType=firstType&rangeFrom=now-15m&rangeTo=now'
+        '?transactionType=firstType&rangeFrom=now-15m&rangeTo=now&comparisonEnabled=true&comparisonType=yesterday'
       );
     });
   });
diff --git a/x-pack/plugins/apm/public/components/shared/Links/url_helpers.ts b/x-pack/plugins/apm/public/components/shared/Links/url_helpers.ts
@@ -85,6 +85,8 @@ export type APMQueryParams = {
   searchTerm?: string;
   percentile?: 50 | 75 | 90 | 95 | 99;
   latencyAggregationType?: string;
+  comparisonEnabled?: boolean;
+  comparisonType?: string;
 } & { [key in LocalUIFilterName]?: string };
 
 // forces every value of T[K] to be type: string
diff --git a/x-pack/plugins/apm/public/components/shared/search_bar.tsx b/x-pack/plugins/apm/public/components/shared/search_bar.tsx
@@ -7,22 +7,49 @@
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React from 'react';
 import styled from 'styled-components';
+import { px, unit } from '../../style/variables';
 import { DatePicker } from './DatePicker';
 import { KueryBar } from './KueryBar';
+import { TimeComparison } from './time_comparison';
+import { useBreakPoints } from '../../hooks/use_break_points';
 
 const SearchBarFlexGroup = styled(EuiFlexGroup)`
   margin: ${({ theme }) =>
     `${theme.eui.euiSizeM} ${theme.eui.euiSizeM} -${theme.eui.gutterTypes.gutterMedium} ${theme.eui.euiSizeM}`};
 `;
 
-export function SearchBar(props: { prepend?: React.ReactNode | string }) {
+interface Props {
+  prepend?: React.ReactNode | string;
+  showTimeComparison?: boolean;
+}
+
+function getRowDirection(showColumn: boolean) {
+  return showColumn ? 'column' : 'row';
+}
+
+export function SearchBar({ prepend, showTimeComparison = false }: Props) {
+  const { isMedium, isLarge } = useBreakPoints();
+  const itemsStyle = { marginBottom: isLarge ? px(unit) : 0 };
   return (
-    <SearchBarFlexGroup alignItems="flexStart" gutterSize="s">
-      <EuiFlexItem grow={3}>
-        <KueryBar prepend={props.prepend} />
+    <SearchBarFlexGroup gutterSize="s" direction={getRowDirection(isLarge)}>
+      <EuiFlexItem>
+        <KueryBar prepend={prepend} />
       </EuiFlexItem>
-      <EuiFlexItem grow={1}>
-        <DatePicker />
+      <EuiFlexItem grow={false}>
+        <EuiFlexGroup
+          justifyContent="flexEnd"
+          gutterSize="s"
+          direction={getRowDirection(isMedium)}
+        >
+          {showTimeComparison && (
+            <EuiFlexItem style={{ ...itemsStyle, minWidth: px(300) }}>
+              <TimeComparison />
+            </EuiFlexItem>
+          )}
+          <EuiFlexItem style={itemsStyle}>
+            <DatePicker />
+          </EuiFlexItem>
+        </EuiFlexGroup>
       </EuiFlexItem>
     </SearchBarFlexGroup>
   );
diff --git a/x-pack/plugins/apm/public/components/shared/time_comparison/index.test.tsx b/x-pack/plugins/apm/public/components/shared/time_comparison/index.test.tsx
@@ -0,0 +1,142 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { render } from '@testing-library/react';
+import React, { ReactNode } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { EuiThemeProvider } from '../../../../../observability/public';
+import { MockUrlParamsContextProvider } from '../../../context/url_params_context/mock_url_params_context_provider';
+import { IUrlParams } from '../../../context/url_params_context/types';
+import {
+  expectTextsInDocument,
+  expectTextsNotInDocument,
+} from '../../../utils/testHelpers';
+import { TimeComparison } from './';
+import * as urlHelpers from '../../shared/Links/url_helpers';
+
+function getWrapper(params?: IUrlParams) {
+  return ({ children }: { children?: ReactNode }) => {
+    return (
+      <MemoryRouter>
+        <MockUrlParamsContextProvider params={params}>
+          <EuiThemeProvider>{children}</EuiThemeProvider>
+        </MockUrlParamsContextProvider>
+      </MemoryRouter>
+    );
+  };
+}
+
+describe('TimeComparison', () => {
+  const spy = jest.spyOn(urlHelpers, 'replace');
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+  describe('Time range is between 0 - 24 hours', () => {
+    it('sets default values', () => {
+      const Wrapper = getWrapper({
+        start: '2021-01-28T14:45:00.000Z',
+        end: '2021-01-28T15:00:00.000Z',
+      });
+      render(<TimeComparison />, {
+        wrapper: Wrapper,
+      });
+      expect(spy).toHaveBeenCalledWith(expect.anything(), {
+        query: {
+          comparisonEnabled: 'true',
+          comparisonType: 'yesterday',
+        },
+      });
+    });
+    it('selects yesterday and enables comparison', () => {
+      const Wrapper = getWrapper({
+        start: '2021-01-28T14:45:00.000Z',
+        end: '2021-01-28T15:00:00.000Z',
+        comparisonEnabled: true,
+        comparisonType: 'yesterday',
+      });
+      const component = render(<TimeComparison />, {
+        wrapper: Wrapper,
+      });
+      expectTextsInDocument(component, ['Yesterday', 'A week ago']);
+      expect(
+        (component.getByTestId('comparisonSelect') as HTMLSelectElement)
+          .selectedIndex
+      ).toEqual(0);
+    });
+  });
+
+  describe('Time range is between 24 hours - 1 week', () => {
+    it('sets default values', () => {
+      const Wrapper = getWrapper({
+        start: '2021-01-26T15:00:00.000Z',
+        end: '2021-01-28T15:00:00.000Z',
+      });
+      render(<TimeComparison />, {
+        wrapper: Wrapper,
+      });
+      expect(spy).toHaveBeenCalledWith(expect.anything(), {
+        query: {
+          comparisonEnabled: 'true',
+          comparisonType: 'week',
+        },
+      });
+    });
+    it('selects week and enables comparison', () => {
+      const Wrapper = getWrapper({
+        start: '2021-01-26T15:00:00.000Z',
+        end: '2021-01-28T15:00:00.000Z',
+        comparisonEnabled: true,
+        comparisonType: 'week',
+      });
+      const component = render(<TimeComparison />, {
+        wrapper: Wrapper,
+      });
+      expectTextsNotInDocument(component, ['Yesterday']);
+      expectTextsInDocument(component, ['A week ago']);
+      expect(
+        (component.getByTestId('comparisonSelect') as HTMLSelectElement)
+          .selectedIndex
+      ).toEqual(0);
+    });
+  });
+
+  describe('Time range is greater than 7 days', () => {
+    it('Shows absolute times without year when within the same year', () => {
+      const Wrapper = getWrapper({
+        start: '2021-01-20T15:00:00.000Z',
+        end: '2021-01-28T15:00:00.000Z',
+        comparisonEnabled: true,
+        comparisonType: 'previousPeriod',
+      });
+      const component = render(<TimeComparison />, {
+        wrapper: Wrapper,
+      });
+      expect(spy).not.toHaveBeenCalled();
+      expectTextsInDocument(component, ['20/01 - 28/01']);
+      expect(
+        (component.getByTestId('comparisonSelect') as HTMLSelectElement)
+          .selectedIndex
+      ).toEqual(0);
+    });
+
+    it('Shows absolute times with year when on different year', () => {
+      const Wrapper = getWrapper({
+        start: '2020-12-20T15:00:00.000Z',
+        end: '2021-01-28T15:00:00.000Z',
+        comparisonEnabled: true,
+        comparisonType: 'previousPeriod',
+      });
+      const component = render(<TimeComparison />, {
+        wrapper: Wrapper,
+      });
+      expect(spy).not.toHaveBeenCalled();
+      expectTextsInDocument(component, ['20/12/20 - 28/01/21']);
+      expect(
+        (component.getByTestId('comparisonSelect') as HTMLSelectElement)
+          .selectedIndex
+      ).toEqual(0);
+    });
+  });
+});
diff --git a/x-pack/plugins/apm/public/components/shared/time_comparison/index.tsx b/x-pack/plugins/apm/public/components/shared/time_comparison/index.tsx
diff --git a/x-pack/plugins/apm/public/context/url_params_context/resolve_url_params.ts b/x-pack/plugins/apm/public/context/url_params_context/resolve_url_params.ts
diff --git a/x-pack/plugins/apm/public/context/url_params_context/types.ts b/x-pack/plugins/apm/public/context/url_params_context/types.ts
diff --git a/x-pack/plugins/apm/public/hooks/use_break_points.ts b/x-pack/plugins/apm/public/hooks/use_break_points.ts

Original file line number	Diff line number	Diff line change
`@@ -57,6 +57,8 @@ function wrapper({ children }: { children?: ReactNode }) {`
`57`	`57`	`rangeTo: 'now',`
`58`	`58`	`start: 'mystart',`
`59`	`59`	`end: 'myend',`
	`60`	`+ comparisonEnabled: true,`
	`61`	`+ comparisonType: 'yesterday',`
`60`	`62`	`}}`
`61`	`63`	`>`
`62`	`64`	`{children}`