[APM] Adding comparison to throughput chart (#90128)

Co-authored-by: Kibana Machine <[email protected]>
Co-authored-by: Dario Gieselaar <[email protected]>

x-pack/plugins/apm/common/runtime_types/iso_to_epoch_rt/index.test.ts

@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { isoToEpochRt } from './index';
+import { isRight } from 'fp-ts/lib/Either';
+
+describe('isoToEpochRt', () => {
+  it('validates whether its input is a valid ISO timestamp', () => {
+    expect(isRight(isoToEpochRt.decode(1566299881499))).toBe(false);
+
+    expect(isRight(isoToEpochRt.decode('2019-08-20T11:18:31.407Z'))).toBe(true);
+  });
+
+  it('decodes valid ISO timestamps to epoch time', () => {
+    const iso = '2019-08-20T11:18:31.407Z';
+    const result = isoToEpochRt.decode(iso);
+
+    if (isRight(result)) {
+      expect(result.right).toBe(new Date(iso).getTime());
+    } else {
+      fail();
+    }
+  });
+
+  it('encodes epoch time to ISO string', () => {
+    expect(isoToEpochRt.encode(1566299911407)).toBe('2019-08-20T11:18:31.407Z');
+  });
+});

x-pack/plugins/apm/common/runtime_types/date_as_string_rt/index.ts → x-pack/plugins/apm/common/runtime_types/iso_to_epoch_rt/index.ts

@@ -9,15 +9,20 @@ import * as t from 'io-ts';
 import { either } from 'fp-ts/lib/Either';
 
 // Checks whether a string is a valid ISO timestamp,
-// but doesn't convert it into a Date object when decoding
+// and returns an epoch timestamp
 
-export const dateAsStringRt = new t.Type<string, string, unknown>(
-  'DateAsString',
-  t.string.is,
+export const isoToEpochRt = new t.Type<number, string, unknown>(
+  'isoToEpochRt',
+  t.number.is,
   (input, context) =>
     either.chain(t.string.validate(input, context), (str) => {
-      const date = new Date(str);
-      return isNaN(date.getTime()) ? t.failure(input, context) : t.success(str);
+      const epochDate = new Date(str).getTime();
+      return isNaN(epochDate)
+        ? t.failure(input, context)
+        : t.success(epochDate);
     }),
-  t.identity
+  (a) => {
+    const d = new Date(a);
+    return d.toISOString();
+  }
 );

x-pack/plugins/apm/common/runtime_types/to_boolean_rt/index.ts

@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import * as t from 'io-ts';
+
+export const toBooleanRt = new t.Type<boolean, unknown, unknown>(
+  'ToBoolean',
+  t.boolean.is,
+  (input) => {
+    let value: boolean;
+    if (typeof input === 'string') {
+      value = input === 'true';
+    } else {
+      value = !!input;
+    }
+
+    return t.success(value);
+  },
+  t.identity
+);

x-pack/plugins/apm/common/runtime_types/to_number_rt/index.ts

@@ -9,7 +9,7 @@ import * as t from 'io-ts';
 
 export const toNumberRt = new t.Type<number, unknown, unknown>(
   'ToNumber',
-  t.any.is,
+  t.number.is,
   (input, context) => {
     const number = Number(input);
     return !isNaN(number) ? t.success(number) : t.failure(input, context);

x-pack/plugins/apm/public/components/app/service_inventory/service_inventory.test.tsx

@@ -20,10 +20,12 @@ import {
   MockApmPluginContextWrapper,
 } from '../../../context/apm_plugin/mock_apm_plugin_context';
 import { FETCH_STATUS } from '../../../hooks/use_fetcher';
+import { clearCache } from '../../../services/rest/callApi';
 import * as useDynamicIndexPatternHooks from '../../../hooks/use_dynamic_index_pattern';
 import { SessionStorageMock } from '../../../services/__mocks__/SessionStorageMock';
 import { MockUrlParamsContextProvider } from '../../../context/url_params_context/mock_url_params_context_provider';
 import * as hook from './use_anomaly_detection_jobs_fetcher';
+import { TimeRangeComparisonType } from '../../shared/time_comparison/get_time_range_comparison';
 
 const KibanaReactContext = createKibanaReactContext({
   usageCollection: { reportUiCounter: () => {} },
@@ -55,10 +57,10 @@ function wrapper({ children }: { children?: ReactNode }) {
               params={{
                 rangeFrom: 'now-15m',
                 rangeTo: 'now',
-                start: 'mystart',
-                end: 'myend',
+                start: '2021-02-12T13:20:43.344Z',
+                end: '2021-02-12T13:20:58.344Z',
                 comparisonEnabled: true,
-                comparisonType: 'yesterday',
+                comparisonType: TimeRangeComparisonType.DayBefore,
               }}
             >
               {children}
@@ -74,6 +76,7 @@ describe('ServiceInventory', () => {
   beforeEach(() => {
     // @ts-expect-error
     global.sessionStorage = new SessionStorageMock();
+    clearCache();
 
     jest.spyOn(hook, 'useAnomalyDetectionJobsFetcher').mockReturnValue({
       anomalyDetectionJobsStatus: FETCH_STATUS.SUCCESS,

x-pack/plugins/apm/public/components/app/service_overview/service_overview_throughput_chart.tsx

@@ -15,6 +15,15 @@ import { useTheme } from '../../../hooks/use_theme';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
 import { TimeseriesChart } from '../../shared/charts/timeseries_chart';
+import {
+  getTimeRangeComparison,
+  getComparisonChartTheme,
+} from '../../shared/time_comparison/get_time_range_comparison';
+
+const INITIAL_STATE = {
+  currentPeriod: [],
+  previousPeriod: [],
+};
 
 export function ServiceOverviewThroughputChart({
   height,
@@ -25,9 +34,20 @@ export function ServiceOverviewThroughputChart({
   const { serviceName } = useParams<{ serviceName?: string }>();
   const { urlParams, uiFilters } = useUrlParams();
   const { transactionType } = useApmServiceContext();
-  const { start, end } = urlParams;
+  const { start, end, comparisonEnabled, comparisonType } = urlParams;
+  const comparisonChartTheme = getComparisonChartTheme(theme);
+  const {
+    comparisonStart = undefined,
+    comparisonEnd = undefined,
+  } = comparisonType
+    ? getTimeRangeComparison({
+        start,
+        end,
+        comparisonType,
+      })
+    : {};
 
-  const { data, status } = useFetcher(
+  const { data = INITIAL_STATE, status } = useFetcher(
     (callApmApi) => {
       if (serviceName && transactionType && start && end) {
         return callApmApi({
@@ -41,12 +61,22 @@ export function ServiceOverviewThroughputChart({
               end,
               transactionType,
               uiFilters: JSON.stringify(uiFilters),
+              comparisonStart,
+              comparisonEnd,
             },
           },
         });
       }
     },
-    [serviceName, start, end, uiFilters, transactionType]
+    [
+      serviceName,
+      start,
+      end,
+      uiFilters,
+      transactionType,
+      comparisonStart,
+      comparisonEnd,
+    ]
   );
 
   return (
@@ -63,16 +93,32 @@ export function ServiceOverviewThroughputChart({
         height={height}
         showAnnotations={false}
         fetchStatus={status}
+        customTheme={comparisonChartTheme}
         timeseries={[
           {
-            data: data?.throughput ?? [],
+            data: data.currentPeriod,
             type: 'linemark',
             color: theme.eui.euiColorVis0,
             title: i18n.translate(
               'xpack.apm.serviceOverview.throughtputChartTitle',
               { defaultMessage: 'Throughput' }
             ),
           },
+          ...(comparisonEnabled
+            ? [
+                {
+                  data: data.previousPeriod,
+                  type: 'area',
+                  color: theme.eui.euiColorLightestShade,
+                  title: i18n.translate(
+                    'xpack.apm.serviceOverview.throughtputChart.previousPeriodLabel',
+                    {
+                      defaultMessage: 'Previous period',
+                    }
+                  ),
+                },
+              ]
+            : []),
         ]}
         yLabelFormat={asTransactionRate}
       />

x-pack/plugins/apm/public/components/app/transaction_overview/transaction_overview.test.tsx

@@ -131,7 +131,7 @@ describe('TransactionOverview', () => {
       });
 
       expect(history.location.search).toEqual(
-        '?transactionType=secondType&rangeFrom=now-15m&rangeTo=now&comparisonEnabled=true&comparisonType=yesterday'
+        '?transactionType=secondType&rangeFrom=now-15m&rangeTo=now&comparisonEnabled=true&comparisonType=day'
       );
       expect(getByText(container, 'firstType')).toBeInTheDocument();
       expect(getByText(container, 'secondType')).toBeInTheDocument();
@@ -142,7 +142,7 @@ describe('TransactionOverview', () => {
 
       expect(history.push).toHaveBeenCalled();
       expect(history.location.search).toEqual(
-        '?transactionType=firstType&rangeFrom=now-15m&rangeTo=now&comparisonEnabled=true&comparisonType=yesterday'
+        '?transactionType=firstType&rangeFrom=now-15m&rangeTo=now&comparisonEnabled=true&comparisonType=day'
       );
     });
   });

x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx

@@ -59,6 +59,7 @@ interface Props {
   anomalyTimeseries?: ReturnType<
     typeof getLatencyChartSelector
   >['anomalyTimeseries'];
+  customTheme?: Record<string, unknown>;
 }
 
 export function TimeseriesChart({
@@ -72,13 +73,14 @@ export function TimeseriesChart({
   showAnnotations = true,
   yDomain,
   anomalyTimeseries,
+  customTheme = {},
 }: Props) {
   const history = useHistory();
   const { annotations } = useAnnotationsContext();
-  const chartTheme = useChartTheme();
   const { setPointerEvent, chartRef } = useChartPointerEventContext();
   const { urlParams } = useUrlParams();
   const theme = useTheme();
+  const chartTheme = useChartTheme();
 
   const { start, end } = urlParams;
 
@@ -103,6 +105,7 @@ export function TimeseriesChart({
             areaSeriesStyle: {
               line: { visible: false },
             },
+            ...customTheme,
           }}
           onPointerUpdate={setPointerEvent}
           externalPointerEvents={{