TypeScript project references for APM (#90049)

Co-authored-by: Kibana Machine <[email protected]>
Co-authored-by: Dario Gieselaar <[email protected]>

src/dev/typescript/projects.ts

@@ -28,10 +28,6 @@ export const PROJECTS = [
     name: 'apm/ftr_e2e',
     disableTypeCheck: true,
   }),
-  new Project(resolve(REPO_ROOT, 'x-pack/plugins/apm/scripts/tsconfig.json'), {
-    name: 'apm/scripts',
-    disableTypeCheck: true,
-  }),
 
   // NOTE: using glob.sync rather than glob-all or globby
   // because it takes less than 10 ms, while the other modules

tsconfig.refs.json

@@ -57,6 +57,7 @@
     { "path": "./src/plugins/index_pattern_management/tsconfig.json" },
     { "path": "./x-pack/plugins/actions/tsconfig.json" },
     { "path": "./x-pack/plugins/alerts/tsconfig.json" },
+    { "path": "./x-pack/plugins/apm/tsconfig.json" },
     { "path": "./x-pack/plugins/beats_management/tsconfig.json" },
     { "path": "./x-pack/plugins/canvas/tsconfig.json" },
     { "path": "./x-pack/plugins/cloud/tsconfig.json" },
@@ -106,10 +107,10 @@
     { "path": "./x-pack/plugins/runtime_fields/tsconfig.json" },
     { "path": "./x-pack/plugins/index_management/tsconfig.json" },
     { "path": "./x-pack/plugins/watcher/tsconfig.json" },
-    { "path": "./x-pack/plugins/rollup/tsconfig.json"},
-    { "path": "./x-pack/plugins/remote_clusters/tsconfig.json"},
-    { "path": "./x-pack/plugins/cross_cluster_replication/tsconfig.json"},
-    { "path": "./x-pack/plugins/index_lifecycle_management/tsconfig.json"},
-    { "path": "./x-pack/plugins/uptime/tsconfig.json" },
+    { "path": "./x-pack/plugins/rollup/tsconfig.json" },
+    { "path": "./x-pack/plugins/remote_clusters/tsconfig.json" },
+    { "path": "./x-pack/plugins/cross_cluster_replication/tsconfig.json" },
+    { "path": "./x-pack/plugins/index_lifecycle_management/tsconfig.json" },
+    { "path": "./x-pack/plugins/uptime/tsconfig.json" }
   ]
 }

x-pack/plugins/apm/common/service_map.ts

@@ -7,27 +7,34 @@
 
 import { i18n } from '@kbn/i18n';
 import cytoscape from 'cytoscape';
-import {
-  AGENT_NAME,
-  SERVICE_ENVIRONMENT,
-  SERVICE_NAME,
-  SPAN_DESTINATION_SERVICE_RESOURCE,
-  SPAN_SUBTYPE,
-  SPAN_TYPE,
-} from './elasticsearch_fieldnames';
 import { ServiceAnomalyStats } from './anomaly_detection';
 
+// These should be imported, but until TypeScript 4.2 we're inlining them here.
+// All instances of "agent.name", "service.name", "service.environment", "span.type",
+// "span.subtype", and "span.destination.service.resource" need to be changed
+// back to using the constants.
+// See https://github.com/microsoft/TypeScript/issues/37888
+//
+// import {
+//   AGENT_NAME,
+//   SERVICE_ENVIRONMENT,
+//   SERVICE_NAME,
+//   SPAN_DESTINATION_SERVICE_RESOURCE,
+//   SPAN_SUBTYPE,
+//   SPAN_TYPE,
+// } from './elasticsearch_fieldnames';
+
 export interface ServiceConnectionNode extends cytoscape.NodeDataDefinition {
-  [SERVICE_NAME]: string;
-  [SERVICE_ENVIRONMENT]: string | null;
-  [AGENT_NAME]: string;
+  'service.name': string;
+  'service.environment': string | null;
+  'agent.name': string;
   serviceAnomalyStats?: ServiceAnomalyStats;
   label?: string;
 }
 export interface ExternalConnectionNode extends cytoscape.NodeDataDefinition {
-  [SPAN_DESTINATION_SERVICE_RESOURCE]: string;
-  [SPAN_TYPE]: string;
-  [SPAN_SUBTYPE]: string;
+  'span.destination.service.resource': string;
+  'span.type': string;
+  'span.subtype': string;
   label?: string;
 }
 

x-pack/plugins/apm/kibana.json

@@ -25,19 +25,14 @@
   ],
   "server": true,
   "ui": true,
-  "configPath": [
-    "xpack",
-    "apm"
-  ],
-  "extraPublicDirs": [
-    "public/style/variables"
-  ],
+  "configPath": ["xpack", "apm"],
+  "extraPublicDirs": ["public/style/variables"],
   "requiredBundles": [
+    "home",
     "kibanaReact",
     "kibanaUtils",
-    "observability",
-    "home",
     "maps",
-    "ml"
+    "ml",
+    "observability"
   ]
 }

x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/Filter/FilterTitleButton.tsx

@@ -5,11 +5,21 @@
  * 2.0.
  */
 
-import React from 'react';
-import { EuiButtonEmpty, EuiTitle } from '@elastic/eui';
-import { euiStyled } from '../../../../../../../../../src/plugins/kibana_react/common';
+import { EuiButtonEmpty, EuiButtonEmptyProps, EuiTitle } from '@elastic/eui';
+import React, { FunctionComponent } from 'react';
+import { StyledComponent } from 'styled-components';
+import {
+  euiStyled,
+  EuiTheme,
+} from '../../../../../../../../../src/plugins/kibana_react/common';
 
-const Button = euiStyled(EuiButtonEmpty).attrs(() => ({
+// The return type of this component needs to be specified because the inferred
+// return type depends on types that are not exported from EUI. You get a TS4023
+// error if the return type is not specified.
+const Button: StyledComponent<
+  FunctionComponent<EuiButtonEmptyProps>,
+  EuiTheme
+> = euiStyled(EuiButtonEmpty).attrs(() => ({
   contentProps: {
     className: 'alignLeft',
   },

x-pack/plugins/apm/public/components/app/ServiceMap/Cytoscape.tsx

@@ -27,7 +27,7 @@ export const CytoscapeContext = createContext<cytoscape.Core | undefined>(
   undefined
 );
 
-interface CytoscapeProps {
+export interface CytoscapeProps {
   children?: ReactNode;
   elements: cytoscape.ElementDefinition[];
   height: number;

x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.stories.tsx

@@ -5,8 +5,8 @@
  * 2.0.
  */
 
-import React, { ComponentProps } from 'react';
-import { SyncBadge } from './SyncBadge';
+import React from 'react';
+import { SyncBadge, SyncBadgeProps } from './SyncBadge';
 
 export default {
   title: 'app/TransactionDetails/SyncBadge',
@@ -18,7 +18,7 @@ export default {
   },
 };
 
-export function Example({ sync }: ComponentProps<typeof SyncBadge>) {
+export function Example({ sync }: SyncBadgeProps) {
   return <SyncBadge sync={sync} />;
 }
-Example.args = { sync: true } as ComponentProps<typeof SyncBadge>;
+Example.args = { sync: true } as SyncBadgeProps;

x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.tsx

@@ -16,7 +16,7 @@ const SpanBadge = euiStyled(EuiBadge)`
   margin-right: ${px(units.quarter)};
 `;
 
-interface SyncBadgeProps {
+export interface SyncBadgeProps {
   /**
    * Is the request synchronous? True will show blocking, false will show async.
    */

x-pack/plugins/apm/public/context/url_params_context/url_params_context.tsx

@@ -25,7 +25,7 @@ import { getDateRange } from './helpers';
 import { resolveUrlParams } from './resolve_url_params';
 import { IUrlParams } from './types';
 
-interface TimeRange {
+export interface TimeRange {
   rangeFrom: string;
   rangeTo: string;
 }

x-pack/plugins/apm/public/hooks/use_transaction_throughput_chart_fetcher.ts

@@ -9,7 +9,7 @@ import { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 import { useFetcher } from './use_fetcher';
 import { useUrlParams } from '../context/url_params_context/use_url_params';
-import { getThrouputChartSelector } from '../selectors/throuput_chart_selectors';
+import { getThroughputChartSelector } from '../selectors/throughput_chart_selectors';
 import { useTheme } from './use_theme';
 import { useApmServiceContext } from '../context/apm_service/use_apm_service_context';
 
@@ -45,7 +45,7 @@ export function useTransactionThroughputChartsFetcher() {
   );
 
   const memoizedData = useMemo(
-    () => getThrouputChartSelector({ throuputChart: data, theme }),
+    () => getThroughputChartSelector({ throughputChart: data, theme }),
     [data, theme]
   );
 

x-pack/plugins/apm/public/selectors/latency_chart_selectors.ts

@@ -15,7 +15,7 @@ import { APIReturnType } from '../services/rest/createCallApmApi';
 
 export type LatencyChartsResponse = APIReturnType<'GET /api/apm/services/{serviceName}/transactions/charts/latency'>;
 
-interface LatencyChartData {
+export interface LatencyChartData {
   latencyTimeseries: Array<APMChartSpec<Coordinate>>;
   mlJobId?: string;
   anomalyTimeseries?: { boundaries: APMChartSpec[]; scores: APMChartSpec };

x-pack/plugins/apm/public/selectors/throuput_chart_selectors.test.ts → x-pack/plugins/apm/public/selectors/throughput_chart_selectors.test.ts

@@ -7,9 +7,9 @@
 
 import { EuiTheme } from '../../../../../src/plugins/kibana_react/common';
 import {
-  getThrouputChartSelector,
-  ThrouputChartsResponse,
-} from './throuput_chart_selectors';
+  getThroughputChartSelector,
+  ThroughputChartsResponse,
+} from './throughput_chart_selectors';
 
 const theme = {
   eui: {
@@ -30,26 +30,26 @@ const throughputData = {
     { key: 'HTTP 4xx', avg: 1, dataPoints: [{ x: 1, y: 2 }] },
     { key: 'HTTP 5xx', avg: 1, dataPoints: [{ x: 1, y: 2 }] },
   ],
-} as ThrouputChartsResponse;
+} as ThroughputChartsResponse;
 
-describe('getThrouputChartSelector', () => {
+describe('getThroughputChartSelector', () => {
   it('returns default values when data is undefined', () => {
-    const throughputTimeseries = getThrouputChartSelector({ theme });
+    const throughputTimeseries = getThroughputChartSelector({ theme });
     expect(throughputTimeseries).toEqual({ throughputTimeseries: [] });
   });
 
   it('returns default values when timeseries is empty', () => {
-    const throughputTimeseries = getThrouputChartSelector({
+    const throughputTimeseries = getThroughputChartSelector({
       theme,
-      throuputChart: { throughputTimeseries: [] },
+      throughputChart: { throughputTimeseries: [] },
     });
     expect(throughputTimeseries).toEqual({ throughputTimeseries: [] });
   });
 
   it('return throughput time series', () => {
-    const throughputTimeseries = getThrouputChartSelector({
+    const throughputTimeseries = getThroughputChartSelector({
       theme,
-      throuputChart: throughputData,
+      throughputChart: throughputData,
     });
 
     expect(throughputTimeseries).toEqual({

x-pack/plugins/apm/public/selectors/throuput_chart_selectors.ts → x-pack/plugins/apm/public/selectors/throughput_chart_selectors.ts

@@ -12,36 +12,36 @@ import { TimeSeries } from '../../typings/timeseries';
 import { APIReturnType } from '../services/rest/createCallApmApi';
 import { httpStatusCodeToColor } from '../utils/httpStatusCodeToColor';
 
-export type ThrouputChartsResponse = APIReturnType<'GET /api/apm/services/{serviceName}/transactions/charts/throughput'>;
+export type ThroughputChartsResponse = APIReturnType<'GET /api/apm/services/{serviceName}/transactions/charts/throughput'>;
 
-interface ThroughputChart {
+export interface ThroughputChart {
   throughputTimeseries: TimeSeries[];
 }
 
-export function getThrouputChartSelector({
+export function getThroughputChartSelector({
   theme,
-  throuputChart,
+  throughputChart,
 }: {
   theme: EuiTheme;
-  throuputChart?: ThrouputChartsResponse;
+  throughputChart?: ThroughputChartsResponse;
 }): ThroughputChart {
-  if (!throuputChart) {
+  if (!throughputChart) {
     return { throughputTimeseries: [] };
   }
 
   return {
-    throughputTimeseries: getThroughputTimeseries({ throuputChart, theme }),
+    throughputTimeseries: getThroughputTimeseries({ throughputChart, theme }),
   };
 }
 
 function getThroughputTimeseries({
-  throuputChart,
+  throughputChart,
   theme,
 }: {
   theme: EuiTheme;
-  throuputChart: ThrouputChartsResponse;
+  throughputChart: ThroughputChartsResponse;
 }) {
-  const { throughputTimeseries } = throuputChart;
+  const { throughputTimeseries } = throughputChart;
   const bucketKeys = throughputTimeseries.map(({ key }) => key);
   const getColor = getColorByKey(bucketKeys, theme);
 

x-pack/plugins/apm/readme.md

@@ -118,7 +118,7 @@ _Note: Run the following commands from `kibana/`._
 ### Typescript
 
 ```
-yarn tsc --noEmit --project x-pack/tsconfig.json --skipLibCheck
+yarn tsc --noEmit --project x-pack/plugins/apm/tsconfig.json --skipLibCheck
 ```
 
 ### Prettier

x-pack/plugins/apm/scripts/precommit.js

@@ -14,7 +14,7 @@ const { resolve } = require('path');
 
 const cwd = resolve(__dirname, '../../../..');
 
-const execaOpts = { cwd, stderr: 'pipe' };
+const execaOpts = { cwd, stderr: 'inherit' };
 
 const tasks = new Listr(
   [
@@ -36,18 +36,10 @@ const tasks = new Listr(
     {
       title: 'Typescript',
       task: () =>
-        execa('node', [resolve(__dirname, 'optimize-tsconfig.js')]).then(() =>
-          execa(
-            require.resolve('typescript/bin/tsc'),
-            [
-              '--project',
-              resolve(__dirname, '../../../tsconfig.json'),
-              '--pretty',
-              '--noEmit',
-              '--skipLibCheck',
-            ],
-            execaOpts
-          )
+        execa(
+          require.resolve('typescript/bin/tsc'),
+          ['--project', resolve(__dirname, '../tsconfig.json'), '--pretty'],
+          execaOpts
         ),
     },
     {
@@ -61,10 +53,9 @@ const tasks = new Listr(
 tasks.run().catch((error) => {
   // from src/dev/typescript/exec_in_projects.ts
   process.exitCode = 1;
-
   const errors = error.errors || [error];
 
   for (const e of errors) {
-    process.stderr.write(e.stdout);
+    process.stderr.write(e.stderr || e.stdout);
   }
 });

x-pack/plugins/apm/scripts/shared/get_es_client.ts

@@ -30,17 +30,25 @@ export function getEsClient({
     auth,
   });
 
-  return {
-    ...client,
-    async search<TDocument, TSearchRequest extends ESSearchRequest>(
-      request: TSearchRequest
-    ) {
-      const response = await client.search(request as any);
+  async function search<
+    TDocument = unknown,
+    TSearchRequest extends ESSearchRequest = ESSearchRequest
+  >(request: TSearchRequest) {
+    const response = await client.search<TDocument>(request);
 
-      return {
-        ...response,
-        body: response.body as ESSearchResponse<TDocument, TSearchRequest>,
-      };
-    },
+    return {
+      ...response,
+      body: (response.body as unknown) as ESSearchResponse<
+        TDocument,
+        TSearchRequest
+      >,
+    };
+  }
+
+  // @ts-expect-error
+  client.search = search;
+
+  return (client as unknown) as Omit<Client, 'search'> & {
+    search: typeof search;
   };
 }