[APM] Fix watcher integration (#51721)

Closes #51720.

Author: dgieselaar

x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/WatcherFlyout.tsx

@@ -191,6 +191,7 @@ export class WatcherFlyout extends Component<
     ) as string;
 
     return createErrorGroupWatch({
+      http: core.http,
       emails,
       schedule,
       serviceName,

x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/__test__/createErrorGroupWatch.test.ts

@@ -7,22 +7,30 @@
 import { isArray, isObject, isString } from 'lodash';
 import mustache from 'mustache';
 import uuid from 'uuid';
-// @ts-ignore
 import * as rest from '../../../../../services/rest/watcher';
 import { createErrorGroupWatch } from '../createErrorGroupWatch';
 import { esResponse } from './esResponse';
+import { HttpServiceBase } from 'kibana/public';
 
 // disable html escaping since this is also disabled in watcher\s mustache implementation
 mustache.escape = value => value;
 
+jest.mock('../../../../../services/rest/callApi', () => ({
+  callApi: () => Promise.resolve(null)
+}));
+
 describe('createErrorGroupWatch', () => {
   let createWatchResponse: string;
   let tmpl: any;
+  const createWatchSpy = jest
+    .spyOn(rest, 'createWatch')
+    .mockResolvedValue(undefined);
+
   beforeEach(async () => {
     jest.spyOn(uuid, 'v4').mockReturnValue(new Buffer('mocked-uuid'));
-    jest.spyOn(rest, 'createWatch').mockReturnValue(undefined);
 
     createWatchResponse = await createErrorGroupWatch({
+      http: {} as HttpServiceBase,
       emails: ['[email protected]', '[email protected]'],
       schedule: {
         daily: {
@@ -36,19 +44,19 @@ describe('createErrorGroupWatch', () => {
       apmIndexPatternTitle: 'myIndexPattern'
     });
 
-    const watchBody = rest.createWatch.mock.calls[0][1];
+    const watchBody = createWatchSpy.mock.calls[0][0].watch;
     const templateCtx = {
       payload: esResponse,
       metadata: watchBody.metadata
     };
 
-    tmpl = renderMustache(rest.createWatch.mock.calls[0][1], templateCtx);
+    tmpl = renderMustache(createWatchSpy.mock.calls[0][0].watch, templateCtx);
   });
 
   afterEach(() => jest.restoreAllMocks());
 
   it('should call createWatch with correct args', () => {
-    expect(rest.createWatch.mock.calls[0][0]).toBe('apm-mocked-uuid');
+    expect(createWatchSpy.mock.calls[0][0].id).toBe('apm-mocked-uuid');
   });
 
   it('should format slack message correctly', () => {
@@ -78,7 +86,7 @@ describe('createErrorGroupWatch', () => {
   });
 
   it('should return watch id', async () => {
-    const id = rest.createWatch.mock.calls[0][0];
+    const id = createWatchSpy.mock.calls[0][0].id;
     expect(createWatchResponse).toEqual(id);
   });
 });

x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/createErrorGroupWatch.ts

@@ -8,6 +8,7 @@ import { i18n } from '@kbn/i18n';
 import { isEmpty } from 'lodash';
 import url from 'url';
 import uuid from 'uuid';
+import { HttpServiceBase } from 'kibana/public';
 import {
   ERROR_CULPRIT,
   ERROR_EXC_HANDLED,
@@ -17,7 +18,6 @@ import {
   PROCESSOR_EVENT,
   SERVICE_NAME
 } from '../../../../../common/elasticsearch_fieldnames';
-// @ts-ignore
 import { createWatch } from '../../../../services/rest/watcher';
 
 function getSlackPathUrl(slackUrl?: string) {
@@ -35,6 +35,7 @@ export interface Schedule {
 }
 
 interface Arguments {
+  http: HttpServiceBase;
   emails: string[];
   schedule: Schedule;
   serviceName: string;
@@ -54,6 +55,7 @@ interface Actions {
 }
 
 export async function createErrorGroupWatch({
+  http,
   emails = [],
   schedule,
   serviceName,
@@ -250,6 +252,10 @@ export async function createErrorGroupWatch({
     };
   }
 
-  await createWatch(id, body);
+  await createWatch({
+    http,
+    id,
+    watch: body
+  });
   return id;
 }

x-pack/legacy/plugins/apm/public/services/rest/callApi.ts

@@ -9,10 +9,11 @@ import LRU from 'lru-cache';
 import hash from 'object-hash';
 import { HttpServiceBase, HttpFetchOptions } from 'kibana/public';
 
-export type FetchOptions = HttpFetchOptions & {
+export type FetchOptions = Omit<HttpFetchOptions, 'body'> & {
   pathname: string;
   forceCache?: boolean;
   method?: string;
+  body?: any;
 };
 
 function fetchOptionsWithDebug(fetchOptions: FetchOptions) {
@@ -26,9 +27,7 @@ function fetchOptionsWithDebug(fetchOptions: FetchOptions) {
   const body = isGet
     ? {}
     : {
-        body: JSON.stringify(
-          fetchOptions.body || ({} as HttpFetchOptions['body'])
-        )
+        body: JSON.stringify(fetchOptions.body || {})
       };
 
   return {

x-pack/legacy/plugins/apm/public/services/rest/watcher.js renamed to x-pack/legacy/plugins/apm/public/services/rest/watcher.ts

@@ -4,12 +4,21 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { HttpServiceBase } from 'kibana/public';
 import { callApi } from './callApi';
 
-export async function createWatch(id, watch) {
-  return callApi({
+export async function createWatch({
+  id,
+  watch,
+  http
+}: {
+  http: HttpServiceBase;
+  id: string;
+  watch: any;
+}) {
+  return callApi(http, {
     method: 'PUT',
     pathname: `/api/watcher/watch/${id}`,
-    body: JSON.stringify({ type: 'json', id, watch })
+    body: { type: 'json', id, watch }
   });
 }