[APM] Replace ui/kfetch with core.http

Closes elastic#46548.
dgieselaar · Oct 10, 2019 · 5fb724d · 5fb724d
1 parent e459f40
commit 5fb724d
Show file tree

Hide file tree

Showing 41 changed files with 775 additions and 672 deletions.
diff --git a/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupDetails/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupDetails/index.tsx
@@ -27,7 +27,6 @@ import { ErrorDistribution } from './Distribution';
 import { useLocation } from '../../../hooks/useLocation';
 import { useUrlParams } from '../../../hooks/useUrlParams';
 import { useTrackPageview } from '../../../../../infra/public';
-import { callApmApi } from '../../../services/rest/callApmApi';
 
 const Titles = styled.div`
   margin-bottom: ${px(units.plus)};
@@ -63,43 +62,49 @@ export function ErrorGroupDetails() {
   const { urlParams, uiFilters } = useUrlParams();
   const { serviceName, start, end, errorGroupId } = urlParams;
 
-  const { data: errorGroupData } = useFetcher(() => {
-    if (serviceName && start && end && errorGroupId) {
-      return callApmApi({
-        pathname: '/api/apm/services/{serviceName}/errors/{groupId}',
-        params: {
-          path: {
-            serviceName,
-            groupId: errorGroupId
-          },
-          query: {
-            start,
-            end,
-            uiFilters: JSON.stringify(uiFilters)
+  const { data: errorGroupData } = useFetcher(
+    callApmApi => {
+      if (serviceName && start && end && errorGroupId) {
+        return callApmApi({
+          pathname: '/api/apm/services/{serviceName}/errors/{groupId}',
+          params: {
+            path: {
+              serviceName,
+              groupId: errorGroupId
+            },
+            query: {
+              start,
+              end,
+              uiFilters: JSON.stringify(uiFilters)
+            }
           }
-        }
-      });
-    }
-  }, [serviceName, start, end, errorGroupId, uiFilters]);
-
-  const { data: errorDistributionData } = useFetcher(() => {
-    if (serviceName && start && end && errorGroupId) {
-      return callApmApi({
-        pathname: '/api/apm/services/{serviceName}/errors/distribution',
-        params: {
-          path: {
-            serviceName
-          },
-          query: {
-            start,
-            end,
-            groupId: errorGroupId,
-            uiFilters: JSON.stringify(uiFilters)
+        });
+      }
+    },
+    [serviceName, start, end, errorGroupId, uiFilters]
+  );
+
+  const { data: errorDistributionData } = useFetcher(
+    callApmApi => {
+      if (serviceName && start && end && errorGroupId) {
+        return callApmApi({
+          pathname: '/api/apm/services/{serviceName}/errors/distribution',
+          params: {
+            path: {
+              serviceName
+            },
+            query: {
+              start,
+              end,
+              groupId: errorGroupId,
+              uiFilters: JSON.stringify(uiFilters)
+            }
           }
-        }
-      });
-    }
-  }, [serviceName, start, end, errorGroupId, uiFilters]);
+        });
+      }
+    },
+    [serviceName, start, end, errorGroupId, uiFilters]
+  );
 
   useTrackPageview({ app: 'apm', path: 'error_group_details' });
   useTrackPageview({ app: 'apm', path: 'error_group_details', delay: 15000 });

diff --git a/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx
@@ -20,50 +20,55 @@ import { useUrlParams } from '../../../hooks/useUrlParams';
 import { useTrackPageview } from '../../../../../infra/public';
 import { PROJECTION } from '../../../../common/projections/typings';
 import { LocalUIFilters } from '../../shared/LocalUIFilters';
-import { callApmApi } from '../../../services/rest/callApmApi';
 
 const ErrorGroupOverview: React.SFC = () => {
   const { urlParams, uiFilters } = useUrlParams();
 
   const { serviceName, start, end, sortField, sortDirection } = urlParams;
 
-  const { data: errorDistributionData } = useFetcher(() => {
-    if (serviceName && start && end) {
-      return callApmApi({
-        pathname: '/api/apm/services/{serviceName}/errors/distribution',
-        params: {
-          path: {
-            serviceName
-          },
-          query: {
-            start,
-            end,
-            uiFilters: JSON.stringify(uiFilters)
+  const { data: errorDistributionData } = useFetcher(
+    callApmApi => {
+      if (serviceName && start && end) {
+        return callApmApi({
+          pathname: '/api/apm/services/{serviceName}/errors/distribution',
+          params: {
+            path: {
+              serviceName
+            },
+            query: {
+              start,
+              end,
+              uiFilters: JSON.stringify(uiFilters)
+            }
           }
-        }
-      });
-    }
-  }, [serviceName, start, end, uiFilters]);
+        });
+      }
+    },
+    [serviceName, start, end, uiFilters]
+  );
 
-  const { data: errorGroupListData } = useFetcher(() => {
-    if (serviceName && start && end) {
-      return callApmApi({
-        pathname: '/api/apm/services/{serviceName}/errors',
-        params: {
-          path: {
-            serviceName
-          },
-          query: {
-            start,
-            end,
-            sortField,
-            sortDirection,
-            uiFilters: JSON.stringify(uiFilters)
+  const { data: errorGroupListData } = useFetcher(
+    callApmApi => {
+      if (serviceName && start && end) {
+        return callApmApi({
+          pathname: '/api/apm/services/{serviceName}/errors',
+          params: {
+            path: {
+              serviceName
+            },
+            query: {
+              start,
+              end,
+              sortField,
+              sortDirection,
+              uiFilters: JSON.stringify(uiFilters)
+            }
           }
-        }
-      });
-    }
-  }, [serviceName, start, end, sortField, sortDirection, uiFilters]);
+        });
+      }
+    },
+    [serviceName, start, end, sortField, sortDirection, uiFilters]
+  );
 
   useTrackPageview({
     app: 'apm',

diff --git a/.../public/components/app/ServiceDetails/ServiceIntegrations/MachineLearningFlyout/index.tsx b/.../public/components/app/ServiceDetails/ServiceIntegrations/MachineLearningFlyout/index.tsx
@@ -10,7 +10,7 @@ import { startMLJob } from '../../../../../services/rest/ml';
 import { IUrlParams } from '../../../../../context/UrlParamsContext/types';
 import { MLJobLink } from '../../../../shared/Links/MachineLearningLinks/MLJobLink';
 import { MachineLearningFlyoutView } from './view';
-import { KibanaCoreContext } from '../../../../../../../observability/public/context/kibana_core';
+import { KibanaCoreContext } from '../../../../../../../observability/public';
 
 interface Props {
   isOpen: boolean;
@@ -36,11 +36,12 @@ export class MachineLearningFlyout extends Component<Props, State> {
   }) => {
     this.setState({ isCreatingJob: true });
     try {
+      const { http } = this.context;
       const { serviceName } = this.props.urlParams;
       if (!serviceName) {
         throw new Error('Service name is required to create this ML job');
       }
-      const res = await startMLJob({ serviceName, transactionType });
+      const res = await startMLJob({ http, serviceName, transactionType });
       const didSucceed = res.datafeeds[0].success && res.jobs[0].success;
       if (!didSucceed) {
         throw new Error('Creating ML job failed');

diff --git a/...m/public/components/app/ServiceDetails/ServiceIntegrations/MachineLearningFlyout/view.tsx b/...m/public/components/app/ServiceDetails/ServiceIntegrations/MachineLearningFlyout/view.tsx
@@ -22,6 +22,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React, { useState, useEffect } from 'react';
 import { isEmpty } from 'lodash';
+import { useKibanaCore } from '../../../../../../../observability/public';
 import { FETCH_STATUS, useFetcher } from '../../../../../hooks/useFetcher';
 import { getHasMLJob } from '../../../../../services/rest/ml';
 import { MLJobLink } from '../../../../shared/Links/MachineLearningLinks/MLJobLink';
@@ -49,14 +50,18 @@ export function MachineLearningFlyoutView({
   const [selectedTransactionType, setSelectedTransactionType] = useState<
     string | undefined
   >(undefined);
+
+  const { http } = useKibanaCore();
+
   const { data: hasMLJob = false, status } = useFetcher(() => {
     if (serviceName && selectedTransactionType) {
       return getHasMLJob({
         serviceName,
-        transactionType: selectedTransactionType
+        transactionType: selectedTransactionType,
+        http
       });
     }
-  }, [serviceName, selectedTransactionType]);
+  }, [serviceName, selectedTransactionType, http]);
 
   // update selectedTransactionType when list of transaction types has loaded
   useEffect(() => {

diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceNodeMetrics/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceNodeMetrics/index.tsx
@@ -25,7 +25,6 @@ import { useServiceMetricCharts } from '../../../hooks/useServiceMetricCharts';
 import { ChartsSyncContextProvider } from '../../../context/ChartsSyncContext';
 import { MetricsChart } from '../../shared/charts/MetricsChart';
 import { useFetcher, FETCH_STATUS } from '../../../hooks/useFetcher';
-import { callApmApi } from '../../../services/rest/callApmApi';
 import { truncate, px, unit } from '../../../style/variables';
 
 const INITIAL_DATA = {
@@ -46,20 +45,20 @@ export function ServiceNodeMetrics() {
   const { data } = useServiceMetricCharts(urlParams, agentName);
   const { start, end } = urlParams;
 
-  const {
-    data: { host, containerId } = INITIAL_DATA,
-    status
-  } = useFetcher(() => {
-    if (serviceName && serviceNodeName) {
-      return callApmApi({
-        pathname:
-          '/api/apm/services/{serviceName}/node/{serviceNodeName}/metadata',
-        params: {
-          path: { serviceName, serviceNodeName }
-        }
-      });
-    }
-  }, [serviceName, serviceNodeName]);
+  const { data: { host, containerId } = INITIAL_DATA, status } = useFetcher(
+    callApmApi => {
+      if (serviceName && serviceNodeName) {
+        return callApmApi({
+          pathname:
+            '/api/apm/services/{serviceName}/node/{serviceNodeName}/metadata',
+          params: {
+            path: { serviceName, serviceNodeName }
+          }
+        });
+      }
+    },
+    [serviceName, serviceNodeName]
+  );
 
   const isLoading = status === FETCH_STATUS.LOADING;
 

diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceNodeOverview/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceNodeOverview/index.tsx
@@ -12,7 +12,6 @@ import { LocalUIFilters } from '../../shared/LocalUIFilters';
 import { useUrlParams } from '../../../hooks/useUrlParams';
 import { ManagedTable, ITableColumn } from '../../shared/ManagedTable';
 import { useFetcher } from '../../../hooks/useFetcher';
-import { callApmApi } from '../../../services/rest/callApmApi';
 import {
   asDynamicBytes,
   asInteger,
@@ -46,24 +45,27 @@ const ServiceNodeOverview = () => {
     [serviceName]
   );
 
-  const { data: items } = useFetcher(() => {
-    if (!serviceName || !start || !end) {
-      return;
-    }
-    return callApmApi({
-      pathname: '/api/apm/services/{serviceName}/serviceNodes',
-      params: {
-        path: {
-          serviceName
-        },
-        query: {
-          start,
-          end,
-          uiFilters: JSON.stringify(uiFilters)
-        }
+  const { data: items = [] } = useFetcher(
+    callApmApi => {
+      if (!serviceName || !start || !end) {
+        return undefined;
       }
-    });
-  }, [serviceName, start, end, uiFilters]);
+      return callApmApi({
+        pathname: '/api/apm/services/{serviceName}/serviceNodes',
+        params: {
+          path: {
+            serviceName
+          },
+          query: {
+            start,
+            end,
+            uiFilters: JSON.stringify(uiFilters)
+          }
+        }
+      });
+    },
+    [serviceName, start, end, uiFilters]
+  );
 
   if (!serviceName) {
     return null;
@@ -134,7 +136,7 @@ const ServiceNodeOverview = () => {
             noItemsMessage={i18n.translate('xpack.apm.jvmsTable.noJvmsLabel', {
               defaultMessage: 'No JVMs were found'
             })}
-            items={items || []}
+            items={items}
             columns={columns}
             initialPageSize={INITIAL_PAGE_SIZE}
             initialSortField={INITIAL_SORT_FIELD}