[APM] Migrate charts to typescript

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/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/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();
   });
 

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

@@ -291,7 +291,7 @@ export async function loadErrorGroupDetails({
       camelcase: false
     }
   );
-  const camelizedRes = camelizeKeys(res);
+  const camelizedRes: any = camelizeKeys(res);
   if (res.error.context) {
     camelizedRes.error.context = res.error.context;
   }

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

@@ -4,12 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import 'isomorphic-fetch';
 import { camelizeKeys } from 'humps';
-import { kfetch } from 'ui/kfetch';
+import 'isomorphic-fetch';
 import { startsWith } from 'lodash';
+import { kfetch, KFetchOptions } from 'ui/kfetch';
 
-function fetchOptionsWithDebug(fetchOptions) {
+function fetchOptionsWithDebug(fetchOptions: KFetchOptions) {
   const debugEnabled =
     sessionStorage.getItem('apm_debug') === 'true' &&
     startsWith(fetchOptions.pathname, '/api/apm');
@@ -28,7 +28,7 @@ function fetchOptionsWithDebug(fetchOptions) {
 }
 
 export async function callApi(
-  fetchOptions,
+  fetchOptions: KFetchOptions,
   { camelcase = true, prependBasePath = true } = {}
 ) {
   const combinedFetchOptions = fetchOptionsWithDebug(fetchOptions);

x-pack/plugins/apm/public/store/reactReduxRequest/transactionDetailsCharts.js → x-pack/plugins/apm/public/store/reactReduxRequest/transactionDetailsCharts.tsx

@@ -5,36 +5,44 @@
  */
 
 import React from 'react';
+import { Request, RRRRender } from 'react-redux-request';
 import { createSelector } from 'reselect';
-import { getCharts } from '../selectors/chartSelectors';
-import { getUrlParams } from '../urlParams';
-import { Request } from 'react-redux-request';
+import { TimeSeriesResponse } from 'x-pack/plugins/apm/server/lib/transactions/charts/get_timeseries_data/get_timeseries_data';
 import { loadCharts } from '../../services/rest/apm';
-import { createInitialDataSelector } from './helpers';
+import { IReduxState } from '../rootReducer';
+import { getCharts } from '../selectors/chartSelectors';
+import { getUrlParams, IUrlParams } from '../urlParams';
 
 const ID = 'transactionDetailsCharts';
 const INITIAL_DATA = {
   totalHits: 0,
   dates: [],
-  responseTimes: {},
+  responseTimes: {
+    avg: [],
+    p95: [],
+    p99: []
+  },
   tpmBuckets: [],
-  overallAvgDuration: null
+  overallAvgDuration: undefined
 };
 
-const withInitialData = createInitialDataSelector(INITIAL_DATA);
-
 export const getTransactionDetailsCharts = createSelector(
   getUrlParams,
-  state => withInitialData(state.reactReduxRequest[ID]),
-  (urlParams, detailCharts) => {
+  (state: IReduxState) => state.reactReduxRequest[ID],
+  (urlParams, detailCharts = {}) => {
     return {
       ...detailCharts,
-      data: getCharts(urlParams, detailCharts.data)
+      data: getCharts(urlParams, detailCharts.data || INITIAL_DATA)
     };
   }
 );
 
-export function TransactionDetailsChartsRequest({ urlParams, render }) {
+interface Props {
+  urlParams: IUrlParams;
+  render: RRRRender<TimeSeriesResponse>;
+}
+
+export function TransactionDetailsChartsRequest({ urlParams, render }: Props) {
   const {
     serviceName,
     start,

x-pack/plugins/apm/public/store/reactReduxRequest/transactionOverviewCharts.js → x-pack/plugins/apm/public/store/reactReduxRequest/transactionOverviewCharts.tsx

@@ -4,26 +4,32 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { get, isEmpty } from 'lodash';
 import React from 'react';
+import { Request, RRRRender } from 'react-redux-request';
 import { createSelector } from 'reselect';
-import { get, isEmpty } from 'lodash';
-import { getCharts } from '../selectors/chartSelectors';
-import { getUrlParams } from '../urlParams';
-import { Request } from 'react-redux-request';
+import { TimeSeriesResponse } from 'x-pack/plugins/apm/server/lib/transactions/charts/get_timeseries_data/get_timeseries_data';
 import { loadCharts } from '../../services/rest/apm';
+import { IReduxState } from '../rootReducer';
+import { getCharts } from '../selectors/chartSelectors';
+import { getUrlParams, IUrlParams } from '../urlParams';
 
 const ID = 'transactionOverviewCharts';
 const INITIAL_DATA = {
   totalHits: 0,
   dates: [],
-  responseTimes: {},
+  responseTimes: {
+    avg: [],
+    p95: [],
+    p99: []
+  },
   tpmBuckets: [],
-  overallAvgDuration: null
+  overallAvgDuration: undefined
 };
 
 export const getTransactionOverviewCharts = createSelector(
   getUrlParams,
-  state => state.reactReduxRequest[ID],
+  (state: IReduxState) => state.reactReduxRequest[ID],
   (urlParams, overviewCharts = {}) => {
     return {
       ...overviewCharts,
@@ -32,7 +38,7 @@ export const getTransactionOverviewCharts = createSelector(
   }
 );
 
-export function hasDynamicBaseline(state) {
+export function hasDynamicBaseline(state: IReduxState) {
   return !isEmpty(
     get(
       state,
@@ -41,7 +47,12 @@ export function hasDynamicBaseline(state) {
   );
 }
 
-export function TransactionOverviewChartsRequest({ urlParams, render }) {
+interface Props {
+  urlParams: IUrlParams;
+  render: RRRRender<TimeSeriesResponse>;
+}
+
+export function TransactionOverviewChartsRequest({ urlParams, render }: Props) {
   const { serviceName, start, end, transactionType, kuery } = urlParams;
 
   if (!(serviceName && start && end && transactionType)) {

x-pack/plugins/apm/public/store/selectors/__tests__/chartSelectors.test.js → x-pack/plugins/apm/public/store/selectors/__tests__/chartSelectors.test.ts

@@ -5,12 +5,16 @@
  */
 
 import {
+  getAnomalyBoundaryValues,
   getAnomalyScoreValues,
   getResponseTimeSeries,
-  getTpmSeries,
-  getAnomalyBoundaryValues
+  getTpmSeries
 } from '../chartSelectors';
 
+import {
+  AvgAnomalyBuckets,
+  TimeSeriesResponse
+} from 'x-pack/plugins/apm/server/lib/transactions/charts/get_timeseries_data/get_timeseries_data';
 import anomalyData from './mockData/anomalyData.json';
 
 describe('chartSelectors', () => {
@@ -39,7 +43,7 @@ describe('chartSelectors', () => {
         {
           anomalyScore: 0
         }
-      ];
+      ] as AvgAnomalyBuckets[];
 
       expect(getAnomalyScoreValues(dates, buckets, 1000)).toEqual([
         { x: 1000, y: 1 },
@@ -58,11 +62,10 @@ describe('chartSelectors', () => {
       responseTimes: {
         avg: [100, 200, 150, 250, 100, 50],
         p95: [200, 300, 250, 350, 200, 150],
-        p99: [300, 400, 350, 450, 100, 50],
-        avgAnomalies: {}
+        p99: [300, 400, 350, 450, 100, 50]
       },
       overallAvgDuration: 200
-    };
+    } as TimeSeriesResponse;
 
     it('should match snapshot', () => {
       expect(getResponseTimeSeries(chartsData)).toMatchSnapshot();
@@ -93,7 +96,7 @@ describe('chartSelectors', () => {
           values: [0, 1, 2, 1, 0, 2]
         }
       ]
-    };
+    } as TimeSeriesResponse;
 
     const transactionType = 'MyTransactionType';
 
@@ -129,9 +132,9 @@ describe('chartSelectors', () => {
 
       expect(secondLastBuckets.y).toBe(lastBucket.y);
       expect(secondLastBuckets.y0).toBe(lastBucket.y0);
-      expect(lastBucket.x - secondLastBuckets.x).toBeLessThanOrEqual(
-        bucketSpan
-      );
+      expect(
+        (lastBucket.x as number) - (secondLastBuckets.x as number)
+      ).toBeLessThanOrEqual(bucketSpan);
     });
   });
 });