Revert "TypeScript project references for APM (elastic#90049)"

This reverts commit f980405.

src/dev/typescript/projects.ts

@@ -28,6 +28,10 @@ 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,7 +57,6 @@
     { "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" },
@@ -107,10 +106,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,34 +7,27 @@
 
 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,14 +25,19 @@
   ],
   "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",
-    "observability"
+    "ml"
   ]
 }

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

@@ -5,21 +5,11 @@
  * 2.0.
  */
 
-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';
+import React from 'react';
+import { EuiButtonEmpty, EuiTitle } from '@elastic/eui';
+import { euiStyled } from '../../../../../../../../../src/plugins/kibana_react/common';
 
-// 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(() => ({
+const Button = 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
 );
 
-export interface CytoscapeProps {
+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 from 'react';
-import { SyncBadge, SyncBadgeProps } from './SyncBadge';
+import React, { ComponentProps } from 'react';
+import { SyncBadge } from './SyncBadge';
 
 export default {
   title: 'app/TransactionDetails/SyncBadge',
@@ -18,7 +18,7 @@ export default {
   },
 };
 
-export function Example({ sync }: SyncBadgeProps) {
+export function Example({ sync }: ComponentProps<typeof SyncBadge>) {
   return <SyncBadge sync={sync} />;
 }
-Example.args = { sync: true } as SyncBadgeProps;
+Example.args = { sync: true } as ComponentProps<typeof SyncBadge>;

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)};
 `;
 
-export interface SyncBadgeProps {
+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';
 
-export interface TimeRange {
+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 { getThroughputChartSelector } from '../selectors/throughput_chart_selectors';
+import { getThrouputChartSelector } from '../selectors/throuput_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(
-    () => getThroughputChartSelector({ throughputChart: data, theme }),
+    () => getThrouputChartSelector({ throuputChart: 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'>;
 
-export interface LatencyChartData {
+interface LatencyChartData {
   latencyTimeseries: Array<APMChartSpec<Coordinate>>;
   mlJobId?: string;
   anomalyTimeseries?: { boundaries: APMChartSpec[]; scores: APMChartSpec };

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

@@ -7,9 +7,9 @@
 
 import { EuiTheme } from '../../../../../src/plugins/kibana_react/common';
 import {
-  getThroughputChartSelector,
-  ThroughputChartsResponse,
-} from './throughput_chart_selectors';
+  getThrouputChartSelector,
+  ThrouputChartsResponse,
+} from './throuput_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 ThroughputChartsResponse;
+} as ThrouputChartsResponse;
 
-describe('getThroughputChartSelector', () => {
+describe('getThrouputChartSelector', () => {
   it('returns default values when data is undefined', () => {
-    const throughputTimeseries = getThroughputChartSelector({ theme });
+    const throughputTimeseries = getThrouputChartSelector({ theme });
     expect(throughputTimeseries).toEqual({ throughputTimeseries: [] });
   });
 
   it('returns default values when timeseries is empty', () => {
-    const throughputTimeseries = getThroughputChartSelector({
+    const throughputTimeseries = getThrouputChartSelector({
       theme,
-      throughputChart: { throughputTimeseries: [] },
+      throuputChart: { throughputTimeseries: [] },
     });
     expect(throughputTimeseries).toEqual({ throughputTimeseries: [] });
   });
 
   it('return throughput time series', () => {
-    const throughputTimeseries = getThroughputChartSelector({
+    const throughputTimeseries = getThrouputChartSelector({
       theme,
-      throughputChart: throughputData,
+      throuputChart: throughputData,
     });
 
     expect(throughputTimeseries).toEqual({

x-pack/plugins/apm/public/selectors/throughput_chart_selectors.ts → x-pack/plugins/apm/public/selectors/throuput_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 ThroughputChartsResponse = APIReturnType<'GET /api/apm/services/{serviceName}/transactions/charts/throughput'>;
+export type ThrouputChartsResponse = APIReturnType<'GET /api/apm/services/{serviceName}/transactions/charts/throughput'>;
 
-export interface ThroughputChart {
+interface ThroughputChart {
   throughputTimeseries: TimeSeries[];
 }
 
-export function getThroughputChartSelector({
+export function getThrouputChartSelector({
   theme,
-  throughputChart,
+  throuputChart,
 }: {
   theme: EuiTheme;
-  throughputChart?: ThroughputChartsResponse;
+  throuputChart?: ThrouputChartsResponse;
 }): ThroughputChart {
-  if (!throughputChart) {
+  if (!throuputChart) {
     return { throughputTimeseries: [] };
   }
 
   return {
-    throughputTimeseries: getThroughputTimeseries({ throughputChart, theme }),
+    throughputTimeseries: getThroughputTimeseries({ throuputChart, theme }),
   };
 }
 
 function getThroughputTimeseries({
-  throughputChart,
+  throuputChart,
   theme,
 }: {
   theme: EuiTheme;
-  throughputChart: ThroughputChartsResponse;
+  throuputChart: ThrouputChartsResponse;
 }) {
-  const { throughputTimeseries } = throughputChart;
+  const { throughputTimeseries } = throuputChart;
   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/plugins/apm/tsconfig.json --skipLibCheck
+yarn tsc --noEmit --project x-pack/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: 'inherit' };
+const execaOpts = { cwd, stderr: 'pipe' };
 
 const tasks = new Listr(
   [
@@ -36,10 +36,18 @@ const tasks = new Listr(
     {
       title: 'Typescript',
       task: () =>
-        execa(
-          require.resolve('typescript/bin/tsc'),
-          ['--project', resolve(__dirname, '../tsconfig.json'), '--pretty'],
-          execaOpts
+        execa('node', [resolve(__dirname, 'optimize-tsconfig.js')]).then(() =>
+          execa(
+            require.resolve('typescript/bin/tsc'),
+            [
+              '--project',
+              resolve(__dirname, '../../../tsconfig.json'),
+              '--pretty',
+              '--noEmit',
+              '--skipLibCheck',
+            ],
+            execaOpts
+          )
         ),
     },
     {
@@ -53,9 +61,10 @@ 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.stderr || e.stdout);
+    process.stderr.write(e.stdout);
   }
 });

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

@@ -30,25 +30,17 @@ export function getEsClient({
     auth,
   });
 
-  async function search<
-    TDocument = unknown,
-    TSearchRequest extends ESSearchRequest = ESSearchRequest
-  >(request: TSearchRequest) {
-    const response = await client.search<TDocument>(request);
+  return {
+    ...client,
+    async search<TDocument, TSearchRequest extends ESSearchRequest>(
+      request: TSearchRequest
+    ) {
+      const response = await client.search(request as any);
 
-    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;
+      return {
+        ...response,
+        body: response.body as ESSearchResponse<TDocument, TSearchRequest>,
+      };
+    },
   };
 }