[APM] Migrate to Typescript and refactor backend apis

package.json

@@ -244,7 +244,7 @@
     "@types/boom": "^7.2.0",
     "@types/chance": "^1.0.0",
     "@types/classnames": "^2.2.3",
-    "@types/d3": "^5.0.0",
+    "@types/d3": "^3.5.41",
     "@types/dedent": "^0.7.0",
     "@types/del": "^3.0.1",
     "@types/elasticsearch": "^5.0.26",
@@ -258,6 +258,7 @@
     "@types/hapi": "^17.0.18",
     "@types/has-ansi": "^3.0.0",
     "@types/hoek": "^4.1.3",
+    "@types/humps": "^1.1.2",
     "@types/jest": "^23.3.1",
     "@types/joi": "^13.4.2",
     "@types/jquery": "^3.3.6",

src/ui/public/kfetch/index.ts

@@ -17,5 +17,5 @@
  * under the License.
  */
 
-export { kfetch, addInterceptor } from './kfetch';
+export { kfetch, addInterceptor, KFetchOptions } from './kfetch';
 export { kfetchAbortable } from './kfetch_abortable';

src/ui/public/kfetch/kfetch.ts

@@ -26,7 +26,7 @@ import chrome from '../chrome';
 import { KFetchError } from './kfetch_error';
 
 interface KFetchQuery {
-  [key: string]: string | number | boolean;
+  [key: string]: string | number | boolean | undefined;
 }
 
 export interface KFetchOptions extends RequestInit {

x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/__test__/__snapshots__/DetailView.test.js.snap

@@ -12,7 +12,7 @@ exports[`DetailView should render with data 1`] = `
     >
       Error occurrence
     </styled.h2>
-    <DiscoverButton
+    <Component
       query={
         Object {
           "_a": Object {
@@ -29,7 +29,7 @@ exports[`DetailView should render with data 1`] = `
       }
     >
       View 18 occurences in Discover
-    </DiscoverButton>
+    </Component>
   </styled.div>
   <styled.div>
     <StickyProperties

x-pack/plugins/apm/public/components/app/TraceOverview/TraceList.tsx

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import { ITransactionGroup } from '../../../../typings/TransactionGroup';
+import { ITransactionGroup } from 'x-pack/plugins/apm/server/lib/transaction_groups/transform';
 import { fontSizes, truncate } from '../../../style/variables';
 import { asMillis } from '../../../utils/formatters';
 import { ImpactBar } from '../../shared/ImpactBar';
@@ -22,7 +22,7 @@ const StyledTransactionLink = styled(TransactionLink)`
 
 interface Props {
   items: ITransactionGroup[];
-  noItemsMessage: any;
+  noItemsMessage: React.ReactNode;
   isLoading: boolean;
 }
 

x-pack/plugins/apm/public/components/app/TraceOverview/view.tsx

@@ -7,7 +7,7 @@
 import { EuiCallOut, EuiLink, EuiSpacer, EuiText } from '@elastic/eui';
 import React from 'react';
 import { RRRRenderResponse } from 'react-redux-request';
-import { ITransactionGroup } from '../../../../typings/TransactionGroup';
+import { TraceListAPIResponse } from 'x-pack/plugins/apm/server/lib/traces/get_top_traces';
 // @ts-ignore
 import { TraceListRequest } from '../../../store/reactReduxRequest/traceList';
 import { EmptyMessage } from '../../shared/EmptyMessage';
@@ -37,7 +37,7 @@ export function TraceOverview(props: Props) {
       <EuiSpacer />
       <TraceListRequest
         urlParams={urlParams}
-        render={({ data, status }: RRRRenderResponse<ITransactionGroup[]>) => (
+        render={({ data, status }: RRRRenderResponse<TraceListAPIResponse>) => (
           <TraceList
             items={data}
             isLoading={status === 'LOADING'}

x-pack/plugins/apm/public/components/app/TransactionDetails/Distribution/index.tsx

@@ -8,8 +8,8 @@ import { EuiIcon, EuiText, EuiTitle, EuiToolTip } from '@elastic/eui';
 import d3 from 'd3';
 import React, { Component } from 'react';
 import { IUrlParams } from 'x-pack/plugins/apm/public/store/urlParams';
-import { IBucket } from 'x-pack/plugins/apm/server/lib/transactions/distribution/get_buckets';
-import { IDistributionResponse } from 'x-pack/plugins/apm/server/lib/transactions/distribution/get_distribution';
+import { ITransactionDistributionAPIResponse } from 'x-pack/plugins/apm/server/lib/transactions/distribution';
+import { IBucket } from 'x-pack/plugins/apm/server/lib/transactions/distribution/get_buckets/transform';
 import { getTimeFormatter, timeUnit } from '../../../../utils/formatters';
 import { fromQuery, history, toQuery } from '../../../../utils/url';
 // @ts-ignore
@@ -46,7 +46,7 @@ export function getFormattedBuckets(buckets: IBucket[], bucketSize: number) {
 
 interface Props {
   location: any;
-  distribution: IDistributionResponse;
+  distribution: ITransactionDistributionAPIResponse;
   urlParams: IUrlParams;
 }
 

x-pack/plugins/apm/public/components/app/TransactionDetails/view.tsx

@@ -6,9 +6,7 @@
 
 import { EuiSpacer } from '@elastic/eui';
 import React from 'react';
-import { RRRRenderResponse } from 'react-redux-request';
 import { TransactionDetailsRequest } from '../../../store/reactReduxRequest/transactionDetails';
-// @ts-ignore
 import { TransactionDetailsChartsRequest } from '../../../store/reactReduxRequest/transactionDetailsCharts';
 import { TransactionDistributionRequest } from '../../../store/reactReduxRequest/transactionDistribution';
 import { WaterfallRequest } from '../../../store/reactReduxRequest/waterfall';
@@ -39,7 +37,7 @@ export function TransactionDetailsView({ urlParams, location }: Props) {
 
       <TransactionDetailsChartsRequest
         urlParams={urlParams}
-        render={({ data }: RRRRenderResponse<any>) => (
+        render={({ data }) => (
           <TransactionCharts
             charts={data}
             urlParams={urlParams}

x-pack/plugins/apm/public/components/shared/DiscoverButton.tsx

@@ -12,10 +12,13 @@ import { KibanaLink } from '../../utils/url';
 
 interface Props {
   query: StringMap;
-  children: any;
 }
 
-export function DiscoverButton({ query, children, ...rest }: Props) {
+export const DiscoverButton: React.SFC<Props> = ({
+  query,
+  children,
+  ...rest
+}) => {
   return (
     <KibanaLink
       pathname={'/app/kibana'}
@@ -28,4 +31,4 @@ export function DiscoverButton({ query, children, ...rest }: Props) {
       </EuiButtonEmpty>
     </KibanaLink>
   );
-}
+};

x-pack/plugins/apm/public/components/shared/ManagedTable/index.tsx

@@ -18,7 +18,7 @@ export interface ITableColumn {
   align?: string;
   width?: string;
   sortable?: boolean;
-  render?: (value: any, item?: any) => any;
+  render?: (value: any, item?: any) => unknown;
 }
 
 export interface IManagedTableProps {
@@ -31,7 +31,7 @@ export interface IManagedTableProps {
     field: string;
     direction: 'asc' | 'desc';
   };
-  noItemsMessage?: any;
+  noItemsMessage?: React.ReactNode;
 }
 
 export class ManagedTable extends Component<IManagedTableProps, any> {

x-pack/plugins/apm/public/components/shared/PropertiesTable/NestedKeyValueTable.tsx

@@ -17,7 +17,7 @@ import {
   units
 } from '../../../style/variables';
 
-export type KeySorter = (data: StringMap<any>, parentKey?: string) => string[];
+export type KeySorter = (data: StringMap, parentKey?: string) => string[];
 
 const Table = styled.table`
   font-family: ${fontFamilyCode};
@@ -60,7 +60,7 @@ export function FormattedKey({
   value
 }: {
   k: string;
-  value: any;
+  value: unknown;
 }): JSX.Element {
   if (value == null) {
     return <EmptyValue>{k}</EmptyValue>;
@@ -87,7 +87,7 @@ export function NestedValue({
   depth,
   keySorter
 }: {
-  value: any;
+  value: StringMap;
   depth: number;
   parentKey?: string;
   keySorter?: KeySorter;

x-pack/plugins/apm/public/components/shared/charts/CustomPlot/test/responseWithData.json

@@ -131,13 +131,12 @@
       2547299.079999993,
       4586742.89999998,
       0
-    ],
-    "avgAnomalies": {}
+    ]
   },
   "tpmBuckets": [
     {
       "key": "2xx",
-      "avg": "41.61538461538461",
+      "avg": 41.61538461538461,
       "values": [
         0,
         0,
@@ -174,7 +173,7 @@
     },
     {
       "key": "3xx",
-      "avg": "0",
+      "avg": 0,
       "values": [
         0,
         0,
@@ -211,7 +210,7 @@
     },
     {
       "key": "4xx",
-      "avg": "1.4615384615384615",
+      "avg": 1.4615384615384615,
       "values": [
         0,
         0,
@@ -248,7 +247,7 @@
     },
     {
       "key": "5xx",
-      "avg": "5.6923076923076925",
+      "avg": 5.6923076923076925,
       "values": [
         0,
         0,

x-pack/plugins/apm/public/services/__test__/SessionStorageMock.js → x-pack/plugins/apm/public/services/__test__/SessionStorageMock.ts

@@ -4,22 +4,24 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { StringMap } from 'x-pack/plugins/apm/typings/common';
+
 export class SessionStorageMock {
-  store = {};
+  private store: StringMap = {};
 
-  clear() {
+  public clear() {
     this.store = {};
   }
 
-  getItem(key) {
+  public getItem(key: string) {
     return this.store[key] || null;
   }
 
-  setItem(key, value) {
+  public setItem(key: string, value: any) {
     this.store[key] = value.toString();
   }
 
-  removeItem(key) {
+  public removeItem(key: string) {
     delete this.store[key];
   }
 }

x-pack/plugins/apm/public/services/__test__/callApi.test.js → x-pack/plugins/apm/public/services/__test__/callApi.test.ts

@@ -5,16 +5,17 @@
  */
 
 import * as kfetchModule from 'ui/kfetch';
-import { SessionStorageMock } from './SessionStorageMock';
 import { callApi } from '../rest/callApi';
+import { SessionStorageMock } from './SessionStorageMock';
 
 describe('callApi', () => {
-  let kfetchSpy;
+  let kfetchSpy: jest.Mock;
 
   beforeEach(() => {
     kfetchSpy = jest.spyOn(kfetchModule, 'kfetch').mockResolvedValue({
       my_key: 'hello world'
     });
+    // @ts-ignore
     global.sessionStorage = new SessionStorageMock();
   });