[Observability] Change appLink passing the date range (#71259)

* changing apm appLink

* changing apm appLink

* removing title from api

* adding absolute and relative times

* addressing pr comments

* addressing pr comments

* addressing pr comments

* fixing TS issues

* addressing pr comments

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Author: cauemarcondes

x-pack/plugins/apm/public/plugin.ts

@@ -39,9 +39,9 @@ import { toggleAppLinkInNav } from './toggleAppLinkInNav';
 import { setReadonlyBadge } from './updateBadge';
 import { createStaticIndexPattern } from './services/rest/index_pattern';
 import {
-  fetchLandingPageData,
+  fetchOverviewPageData,
   hasData,
-} from './services/rest/observability_dashboard';
+} from './services/rest/apm_overview_fetchers';
 
 export type ApmPluginSetup = void;
 export type ApmPluginStart = void;
@@ -81,9 +81,7 @@ export class ApmPlugin implements Plugin<ApmPluginSetup, ApmPluginStart> {
     if (plugins.observability) {
       plugins.observability.dashboard.register({
         appName: 'apm',
-        fetchData: async (params) => {
-          return fetchLandingPageData(params);
-        },
+        fetchData: fetchOverviewPageData,
         hasData,
       });
     }

x-pack/plugins/apm/public/services/rest/observability.dashboard.test.ts renamed to x-pack/plugins/apm/public/services/rest/apm_overview_fetchers.test.ts

@@ -4,11 +4,23 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { fetchLandingPageData, hasData } from './observability_dashboard';
+import moment from 'moment';
+import { fetchOverviewPageData, hasData } from './apm_overview_fetchers';
 import * as createCallApmApi from './createCallApmApi';
 
 describe('Observability dashboard data', () => {
   const callApmApiMock = jest.spyOn(createCallApmApi, 'callApmApi');
+  const params = {
+    absoluteTime: {
+      start: moment('2020-07-02T13:25:11.629Z').valueOf(),
+      end: moment('2020-07-09T14:25:11.629Z').valueOf(),
+    },
+    relativeTime: {
+      start: 'now-15m',
+      end: 'now',
+    },
+    bucketSize: '600s',
+  };
   afterEach(() => {
     callApmApiMock.mockClear();
   });
@@ -25,7 +37,7 @@ describe('Observability dashboard data', () => {
     });
   });
 
-  describe('fetchLandingPageData', () => {
+  describe('fetchOverviewPageData', () => {
     it('returns APM data with series and stats', async () => {
       callApmApiMock.mockImplementation(() =>
         Promise.resolve({
@@ -37,14 +49,9 @@ describe('Observability dashboard data', () => {
           ],
         })
       );
-      const response = await fetchLandingPageData({
-        startTime: '1',
-        endTime: '2',
-        bucketSize: '3',
-      });
+      const response = await fetchOverviewPageData(params);
       expect(response).toEqual({
-        title: 'APM',
-        appLink: '/app/apm',
+        appLink: '/app/apm#/services?rangeFrom=now-15m&rangeTo=now',
         stats: {
           services: {
             type: 'number',
@@ -73,14 +80,9 @@ describe('Observability dashboard data', () => {
           transactionCoordinates: [],
         })
       );
-      const response = await fetchLandingPageData({
-        startTime: '1',
-        endTime: '2',
-        bucketSize: '3',
-      });
+      const response = await fetchOverviewPageData(params);
       expect(response).toEqual({
-        title: 'APM',
-        appLink: '/app/apm',
+        appLink: '/app/apm#/services?rangeFrom=now-15m&rangeTo=now',
         stats: {
           services: {
             type: 'number',
@@ -105,14 +107,9 @@ describe('Observability dashboard data', () => {
           transactionCoordinates: [{ x: 1 }, { x: 2 }, { x: 3 }],
         })
       );
-      const response = await fetchLandingPageData({
-        startTime: '1',
-        endTime: '2',
-        bucketSize: '3',
-      });
+      const response = await fetchOverviewPageData(params);
       expect(response).toEqual({
-        title: 'APM',
-        appLink: '/app/apm',
+        appLink: '/app/apm#/services?rangeFrom=now-15m&rangeTo=now',
         stats: {
           services: {
             type: 'number',

x-pack/plugins/apm/public/services/rest/observability_dashboard.ts renamed to x-pack/plugins/apm/public/services/rest/apm_overview_fetchers.ts

@@ -4,31 +4,33 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { i18n } from '@kbn/i18n';
 import { mean } from 'lodash';
 import {
   ApmFetchDataResponse,
   FetchDataParams,
 } from '../../../../observability/public';
 import { callApmApi } from './createCallApmApi';
 
-export const fetchLandingPageData = async ({
-  startTime,
-  endTime,
+export const fetchOverviewPageData = async ({
+  absoluteTime,
+  relativeTime,
   bucketSize,
 }: FetchDataParams): Promise<ApmFetchDataResponse> => {
   const data = await callApmApi({
-    pathname: '/api/apm/observability_dashboard',
-    params: { query: { start: startTime, end: endTime, bucketSize } },
+    pathname: '/api/apm/observability_overview',
+    params: {
+      query: {
+        start: new Date(absoluteTime.start).toISOString(),
+        end: new Date(absoluteTime.end).toISOString(),
+        bucketSize,
+      },
+    },
   });
 
   const { serviceCount, transactionCoordinates } = data;
 
   return {
-    title: i18n.translate('xpack.apm.observabilityDashboard.title', {
-      defaultMessage: 'APM',
-    }),
-    appLink: '/app/apm',
+    appLink: `/app/apm#/services?rangeFrom=${relativeTime.start}&rangeTo=${relativeTime.end}`,
     stats: {
       services: {
         type: 'number',
@@ -54,6 +56,6 @@ export const fetchLandingPageData = async ({
 
 export async function hasData() {
   return await callApmApi({
-    pathname: '/api/apm/observability_dashboard/has_data',
+    pathname: '/api/apm/observability_overview/has_data',
   });
 }

x-pack/plugins/apm/server/lib/observability_dashboard/get_service_count.ts renamed to x-pack/plugins/apm/server/lib/observability_overview/get_service_count.ts

@@ -79,9 +79,9 @@ import {
   rumServicesRoute,
 } from './rum_client';
 import {
-  observabilityDashboardHasDataRoute,
-  observabilityDashboardDataRoute,
-} from './observability_dashboard';
+  observabilityOverviewHasDataRoute,
+  observabilityOverviewRoute,
+} from './observability_overview';
 import {
   anomalyDetectionJobsRoute,
   createAnomalyDetectionJobsRoute,
@@ -176,8 +176,8 @@ const createApmApi = () => {
     .add(rumServicesRoute)
 
     // Observability dashboard
-    .add(observabilityDashboardHasDataRoute)
-    .add(observabilityDashboardDataRoute)
+    .add(observabilityOverviewHasDataRoute)
+    .add(observabilityOverviewRoute)
 
     // Anomaly detection
     .add(anomalyDetectionJobsRoute)

x-pack/plugins/apm/server/lib/observability_dashboard/get_transaction_coordinates.ts renamed to x-pack/plugins/apm/server/lib/observability_overview/get_transaction_coordinates.ts

@@ -5,22 +5,22 @@
  */
 import * as t from 'io-ts';
 import { setupRequest } from '../lib/helpers/setup_request';
-import { hasData } from '../lib/observability_dashboard/has_data';
+import { getServiceCount } from '../lib/observability_overview/get_service_count';
+import { getTransactionCoordinates } from '../lib/observability_overview/get_transaction_coordinates';
+import { hasData } from '../lib/observability_overview/has_data';
 import { createRoute } from './create_route';
 import { rangeRt } from './default_api_types';
-import { getServiceCount } from '../lib/observability_dashboard/get_service_count';
-import { getTransactionCoordinates } from '../lib/observability_dashboard/get_transaction_coordinates';
 
-export const observabilityDashboardHasDataRoute = createRoute(() => ({
-  path: '/api/apm/observability_dashboard/has_data',
+export const observabilityOverviewHasDataRoute = createRoute(() => ({
+  path: '/api/apm/observability_overview/has_data',
   handler: async ({ context, request }) => {
     const setup = await setupRequest(context, request);
     return await hasData({ setup });
   },
 }));
 
-export const observabilityDashboardDataRoute = createRoute(() => ({
-  path: '/api/apm/observability_dashboard',
+export const observabilityOverviewRoute = createRoute(() => ({
+  path: '/api/apm/observability_overview',
   params: {
     query: t.intersection([rangeRt, t.type({ bucketSize: t.string })]),
   },

x-pack/plugins/apm/server/lib/observability_dashboard/has_data.ts renamed to x-pack/plugins/apm/server/lib/observability_overview/has_data.ts

@@ -53,12 +53,18 @@ describe('Metrics UI Observability Homepage Functions', () => {
       const { core, mockedGetStartServices } = setup();
       core.http.post.mockResolvedValue(FAKE_SNAPSHOT_RESPONSE);
       const fetchData = createMetricsFetchData(mockedGetStartServices);
-      const endTime = moment();
+      const endTime = moment('2020-07-02T13:25:11.629Z');
       const startTime = endTime.clone().subtract(1, 'h');
       const bucketSize = '300s';
       const response = await fetchData({
-        startTime: startTime.toISOString(),
-        endTime: endTime.toISOString(),
+        absoluteTime: {
+          start: startTime.valueOf(),
+          end: endTime.valueOf(),
+        },
+        relativeTime: {
+          start: 'now-15m',
+          end: 'now',
+        },
         bucketSize,
       });
       expect(core.http.post).toHaveBeenCalledTimes(1);