addressing PR comments

Author: cauemarcondes

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

@@ -38,7 +38,10 @@ import { setHelpExtension } from './setHelpExtension';
 import { toggleAppLinkInNav } from './toggleAppLinkInNav';
 import { setReadonlyBadge } from './updateBadge';
 import { createStaticIndexPattern } from './services/rest/index_pattern';
-import { fetchData, hasData } from './services/rest/observability_dashboard';
+import {
+  fetchLandingPageData,
+  hasData,
+} from './services/rest/observability_dashboard';
 
 export type ApmPluginSetup = void;
 export type ApmPluginStart = void;
@@ -75,9 +78,12 @@ export class ApmPlugin implements Plugin<ApmPluginSetup, ApmPluginStart> {
     pluginSetupDeps.home.featureCatalogue.register(featureCatalogueEntry);
 
     if (plugins.observability) {
+      const isDarkMode = core.uiSettings.get('theme:darkMode');
       plugins.observability.dashboard.register({
         appName: 'apm',
-        fetchData,
+        fetchData: async (params) => {
+          return fetchLandingPageData(params, { isDarkMode });
+        },
         hasData,
       });
     }

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

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { fetchData, hasData } from './observability_dashboard';
+import { fetchLandingPageData, hasData } from './observability_dashboard';
 import * as createCallApmApi from './createCallApmApi';
 
 describe('Observability dashboard data', () => {
@@ -25,7 +25,7 @@ describe('Observability dashboard data', () => {
     });
   });
 
-  describe('fetchData', () => {
+  describe('fetchLandingPageData', () => {
     it('returns APM data with series and stats', async () => {
       callApmApiMock.mockImplementation(() =>
         Promise.resolve({
@@ -37,11 +37,14 @@ describe('Observability dashboard data', () => {
           ],
         })
       );
-      const response = await fetchData({
-        startTime: '1',
-        endTime: '2',
-        bucketSize: '3',
-      });
+      const response = await fetchLandingPageData(
+        {
+          startTime: '1',
+          endTime: '2',
+          bucketSize: '3',
+        },
+        { isDarkMode: false }
+      );
       expect(response).toEqual({
         title: 'APM',
         appLink: '/app/apm',
@@ -53,6 +56,7 @@ describe('Observability dashboard data', () => {
           transactions: {
             label: 'Transactions',
             value: 6,
+            color: '#6092c0',
           },
         },
         series: {
@@ -63,7 +67,7 @@ describe('Observability dashboard data', () => {
               { x: 2, y: 2 },
               { x: 3, y: 3 },
             ],
-            color: 'euiColorVis1',
+            color: '#6092c0',
           },
         },
       });
@@ -75,11 +79,14 @@ describe('Observability dashboard data', () => {
           transactionCoordinates: [],
         })
       );
-      const response = await fetchData({
-        startTime: '1',
-        endTime: '2',
-        bucketSize: '3',
-      });
+      const response = await fetchLandingPageData(
+        {
+          startTime: '1',
+          endTime: '2',
+          bucketSize: '3',
+        },
+        { isDarkMode: false }
+      );
       expect(response).toEqual({
         title: 'APM',
         appLink: '/app/apm',
@@ -91,13 +98,14 @@ describe('Observability dashboard data', () => {
           transactions: {
             label: 'Transactions',
             value: 0,
+            color: '#6092c0',
           },
         },
         series: {
           transactions: {
             label: 'Transactions',
             coordinates: [],
-            color: 'euiColorVis1',
+            color: '#6092c0',
           },
         },
       });

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

@@ -6,18 +6,25 @@
 
 import { i18n } from '@kbn/i18n';
 import { sum } from 'lodash';
+import lightTheme from '@elastic/eui/dist/eui_theme_light.json';
+import darkTheme from '@elastic/eui/dist/eui_theme_dark.json';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { FetchData } from '../../../../observability/public/data_handler';
+import { FetchDataParams } from '../../../../observability/public/data_handler';
 import { ApmFetchDataResponse } from '../../../../observability/public/typings/fetch_data_response';
 import { callApmApi } from './createCallApmApi';
 
-export const fetchData: FetchData<ApmFetchDataResponse> = async ({
-  startTime,
-  endTime,
-  bucketSize,
-}) => {
+interface Options {
+  isDarkMode: boolean;
+}
+
+export const fetchLandingPageData = async (
+  { startTime, endTime, bucketSize }: FetchDataParams,
+  { isDarkMode }: Options
+): Promise<ApmFetchDataResponse> => {
+  const theme = isDarkMode ? darkTheme : lightTheme;
+
   const data = await callApmApi({
-    pathname: '/api/apm/observability-dashboard',
+    pathname: '/api/apm/observability_dashboard',
     params: { query: { start: startTime, end: endTime, bucketSize } },
   });
 
@@ -42,6 +49,7 @@ export const fetchData: FetchData<ApmFetchDataResponse> = async ({
           { defaultMessage: 'Transactions' }
         ),
         value: sum(transactionCoordinates.map((coordinates) => coordinates.y)),
+        color: theme.euiColorVis1,
       },
     },
     series: {
@@ -50,7 +58,7 @@ export const fetchData: FetchData<ApmFetchDataResponse> = async ({
           'xpack.apm.observabilityDashboard.chart.transactions',
           { defaultMessage: 'Transactions' }
         ),
-        color: 'euiColorVis1',
+        color: theme.euiColorVis1,
         coordinates: transactionCoordinates,
       },
     },
@@ -59,6 +67,6 @@ export const fetchData: FetchData<ApmFetchDataResponse> = async ({
 
 export async function hasData() {
   return await callApmApi({
-    pathname: '/api/apm/observability-dashboard/hasData',
+    pathname: '/api/apm/observability_dashboard/has_data',
   });
 }

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

@@ -13,7 +13,6 @@ export async function hasData({ setup }: { setup: Setup }) {
         indices['apm_oss.transactionIndices'],
         indices['apm_oss.errorIndices'],
         indices['apm_oss.metricsIndices'],
-        indices['apm_oss.spanIndices'],
       ],
       terminateAfter: 1,
       size: 0,

x-pack/plugins/apm/server/routes/observability_dashboard.ts

@@ -12,27 +12,30 @@ import { getServiceCount } from '../lib/observability_dashboard/get_service_coun
 import { getTransactionCoordinates } from '../lib/observability_dashboard/get_transaction_coordinates';
 
 export const observabilityDashboardHasDataRoute = createRoute(() => ({
-  path: '/api/apm/observability-dashboard/hasData',
+  path: '/api/apm/observability_dashboard/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',
+  path: '/api/apm/observability_dashboard',
   params: {
     query: t.intersection([rangeRt, t.type({ bucketSize: t.string })]),
   },
   handler: async ({ context, request }) => {
     const setup = await setupRequest(context, request);
     const { bucketSize } = context.params.query;
-    const serviceCount = await getServiceCount({ setup });
-    const transactionCoordinates = await getTransactionCoordinates({
+    const serviceCountPromise = getServiceCount({ setup });
+    const transactionCoordinatesPromise = getTransactionCoordinates({
       setup,
       bucketSize,
     });
-
+    const [serviceCount, transactionCoordinates] = await Promise.all([
+      serviceCountPromise,
+      transactionCoordinatesPromise,
+    ]);
     return { serviceCount, transactionCoordinates };
   },
 }));

x-pack/plugins/observability/public/data_handler.ts

@@ -7,7 +7,7 @@
 import { ObservabilityFetchDataResponse, FetchDataResponse } from './typings/fetch_data_response';
 import { ObservabilityApp } from '../typings/common';
 
-interface FetchDataParams {
+export interface FetchDataParams {
   // The start timestamp in milliseconds of the queried time interval
   startTime: string;
   // The end timestamp in milliseconds of the queried time interval