[Stack Monitoring] Enable allowjs on tsconfig (#145719)

## Summary

Closes #144289

PR resolves TS errors after enabling allowJs in tsconfig file.

There are still ~40 files that unnecessarily use the @ts-gnore
annotation and those can now be removed, but to avoid creating a
gigantic PR, I've decided to open this one focusing only on the bare
minimum to enable the allowJs parameter.

### How to test

- Start local Kibana
- Go to stack monitoring and try to access all the pages there.

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Kevin Lacabane <kevin.lacabane@elastic.co>

x-pack/plugins/monitoring/common/index.ts

@@ -4,5 +4,4 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-// @ts-ignore
 export { formatTimestampToDuration } from './format_timestamp_to_duration';

x-pack/plugins/monitoring/public/alerts/badge.tsx

@@ -8,12 +8,13 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiContextMenu, EuiPopover, EuiBadge, EuiSwitch } from '@elastic/eui';
-import { AlertState, CommonAlertStatus } from '../../common/types/alerts';
+import { AlertState } from '../../common/types/alerts';
 import { AlertSeverity } from '../../common/enums';
 import { isInSetupMode } from '../lib/setup_mode';
 import { SetupModeContext } from '../components/setup_mode/setup_mode_context';
 import { getAlertPanelsByCategory } from './lib/get_alert_panels_by_category';
 import { getAlertPanelsByNode } from './lib/get_alert_panels_by_node';
+import type { AlertsByName } from './types';
 
 export const numberOfAlertsLabel = (count: number) => `${count} alert${count > 1 ? 's' : ''}`;
 export const numberOfRulesLabel = (count: number) => `${count} rule${count > 1 ? 's' : ''}`;
@@ -37,8 +38,8 @@ const GROUP_BY_TYPE = i18n.translate('xpack.monitoring.alerts.badge.groupByType'
 });
 
 interface Props {
-  alerts: { [alertTypeId: string]: CommonAlertStatus[] };
-  stateFilter: (state: AlertState) => boolean;
+  alerts: AlertsByName;
+  stateFilter?: (state: AlertState) => boolean;
 }
 export const AlertsBadge: React.FC<Props> = (props: Props) => {
   // We do not always have the alerts that each consumer wants due to licensing

x-pack/plugins/monitoring/public/alerts/status.tsx

@@ -9,15 +9,16 @@ import React from 'react';
 import { EuiToolTip, EuiHealth } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
-import { CommonAlertStatus, AlertState } from '../../common/types/alerts';
+import type { AlertState } from '../../common/types/alerts';
 import { AlertSeverity } from '../../common/enums';
 import { AlertsBadge } from './badge';
 import { isInSetupMode } from '../lib/setup_mode';
 import { SetupModeContext } from '../components/setup_mode/setup_mode_context';
+import type { AlertsByName } from './types';
 
 interface Props {
-  alerts: { [alertTypeId: string]: CommonAlertStatus[] };
-  showBadge: boolean;
+  alerts: AlertsByName;
+  showBadge?: boolean;
   showOnlyCount?: boolean;
   stateFilter?: (state: AlertState) => boolean;
 }

x-pack/plugins/monitoring/public/alerts/types.ts

@@ -9,7 +9,7 @@ import React from 'react';
 import { CommonAlertStatus } from '../../common/types/alerts';
 
 export interface AlertsByName {
-  [name: string]: CommonAlertStatus;
+  [name: string]: CommonAlertStatus[];
 }
 
 export interface PanelItem {

x-pack/plugins/monitoring/public/application/hooks/use_table.ts

@@ -11,7 +11,7 @@ import { Storage } from '@kbn/kibana-utils-plugin/public';
 import { euiTableStorageGetter, euiTableStorageSetter } from '../../components/table';
 import { EUI_SORT_ASCENDING } from '../../../common/constants';
 
-interface Pagination {
+export interface Pagination {
   pageSize: number;
   initialPageSize: number;
   pageIndex: number;
@@ -25,7 +25,13 @@ interface Page {
   index: number;
 }
 
-type Sorting = EuiTableSortingType<string>;
+export interface TableChange {
+  page: Page;
+  sort: Sorting['sort'];
+  queryText: string;
+}
+
+export type Sorting = EuiTableSortingType<string>;
 
 const PAGE_SIZE_OPTIONS = [5, 10, 20, 50];
 
@@ -84,15 +90,7 @@ export function useTable(storageKey: string) {
 
   const [query, setQuery] = useState('');
 
-  const onTableChange = ({
-    page,
-    sort,
-    queryText,
-  }: {
-    page: Page;
-    sort: Sorting['sort'];
-    queryText: string;
-  }) => {
+  const onTableChange = ({ page, sort, queryText }: TableChange) => {
     setPagination({
       ...pagination,
       ...{

x-pack/plugins/monitoring/public/application/pages/apm/instance.tsx

@@ -15,7 +15,6 @@ import { GlobalStateContext } from '../../contexts/global_state_context';
 import { useCharts } from '../../hooks/use_charts';
 import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';
 import { PageTemplate } from '../page_template';
-// @ts-ignore
 import { ApmServerInstance } from '../../../components/apm/instance';
 
 export const ApmInstancePage: React.FC<ComponentProps> = ({ clusters }) => {

x-pack/plugins/monitoring/public/application/pages/apm/instances.tsx

@@ -13,7 +13,6 @@ import { ComponentProps } from '../../route_init';
 import { GlobalStateContext } from '../../contexts/global_state_context';
 import { useTable } from '../../hooks/use_table';
 import { ApmTemplate } from './apm_template';
-// @ts-ignore
 import { ApmServerInstances } from '../../../components/apm/instances';
 import { SetupModeRenderer } from '../../../components/renderers/setup_mode';
 import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';

x-pack/plugins/monitoring/public/application/pages/apm/overview.tsx

@@ -14,7 +14,6 @@ import { ApmTemplate } from './apm_template';
 import { GlobalStateContext } from '../../contexts/global_state_context';
 import { useCharts } from '../../hooks/use_charts';
 import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';
-// @ts-ignore
 import { ApmOverview } from '../../../components/apm/overview';
 
 export const ApmOverviewPage: React.FC<ComponentProps> = ({ clusters }) => {

x-pack/plugins/monitoring/public/application/pages/beats/instance.tsx

@@ -13,7 +13,6 @@ import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { ComponentProps } from '../../route_init';
 import { GlobalStateContext } from '../../contexts/global_state_context';
 import { useCharts } from '../../hooks/use_charts';
-// @ts-ignore
 import { Beat } from '../../../components/beats/beat';
 import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';
 import { BeatsTemplate } from './beats_template';

x-pack/plugins/monitoring/public/application/pages/beats/instances.tsx

@@ -13,7 +13,6 @@ import { ComponentProps } from '../../route_init';
 import { GlobalStateContext } from '../../contexts/global_state_context';
 import { useTable } from '../../hooks/use_table';
 import { BeatsTemplate } from './beats_template';
-// @ts-ignore
 import { Listing } from '../../../components/beats/listing';
 import { SetupModeRenderer, SetupModeProps } from '../../../components/renderers/setup_mode';
 import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';

x-pack/plugins/monitoring/public/application/pages/beats/overview.tsx

@@ -13,7 +13,6 @@ import { ComponentProps } from '../../route_init';
 import { BeatsTemplate } from './beats_template';
 import { GlobalStateContext } from '../../contexts/global_state_context';
 import { useCharts } from '../../hooks/use_charts';
-// @ts-ignore
 import { BeatsOverview } from '../../../components/beats/overview';
 import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';
 

x-pack/plugins/monitoring/public/application/pages/elasticsearch/ccr_page.tsx

@@ -10,7 +10,6 @@ import { find } from 'lodash';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { ElasticsearchTemplate } from './elasticsearch_template';
 import { GlobalStateContext } from '../../contexts/global_state_context';
-// @ts-ignore
 import { Ccr } from '../../../components/elasticsearch/ccr';
 import { ComponentProps } from '../../route_init';
 import { SetupModeRenderer } from '../../../components/renderers/setup_mode';

x-pack/plugins/monitoring/public/application/pages/elasticsearch/ccr_shard_page.tsx

@@ -12,7 +12,6 @@ import { i18n } from '@kbn/i18n';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { PageTemplate } from '../page_template';
 import { GlobalStateContext } from '../../contexts/global_state_context';
-// @ts-ignore
 import { CcrShard } from '../../../components/elasticsearch/ccr_shard';
 import { ComponentProps } from '../../route_init';
 import { SetupModeRenderer } from '../../../components/renderers/setup_mode';

x-pack/plugins/monitoring/public/application/pages/elasticsearch/index_advanced_page.tsx

@@ -15,7 +15,6 @@ import { SetupModeRenderer, SetupModeProps } from '../../../components/renderers
 import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
 import { useCharts } from '../../hooks/use_charts';
 import { ItemTemplate } from './item_template';
-// @ts-ignore
 import { AdvancedIndex } from '../../../components/elasticsearch/index/advanced';
 import { AlertsByName } from '../../../alerts/types';
 import { fetchAlerts } from '../../../lib/fetch_alerts';

x-pack/plugins/monitoring/public/application/pages/elasticsearch/index_page.tsx

@@ -34,9 +34,9 @@ export const ElasticsearchIndexPage: React.FC<ComponentProps> = ({ clusters }) =
   const { zoomInfo, onBrush } = useCharts();
   const clusterUuid = globalState.cluster_uuid;
   const ccs = globalState.ccs;
-  const [data, setData] = useState({} as any);
-  const [indexLabel, setIndexLabel] = useState(labels.index as any);
-  const [nodesByIndicesData, setNodesByIndicesData] = useState([]);
+  const [data, setData] = useState<any>({});
+  const [indexLabel, setIndexLabel] = useState(labels.index);
+  const [nodesByIndicesData, setNodesByIndicesData] = useState<any[]>([]);
   const [alerts, setAlerts] = useState<AlertsByName>({});
   const cluster = find(clusters, {
     cluster_uuid: clusterUuid,

x-pack/plugins/monitoring/public/application/pages/elasticsearch/node_advanced_page.tsx

@@ -11,7 +11,6 @@ import { i18n } from '@kbn/i18n';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { ItemTemplate } from './item_template';
 import { GlobalStateContext } from '../../contexts/global_state_context';
-// @ts-ignore
 import { AdvancedNode } from '../../../components/elasticsearch/node/advanced';
 import { ComponentProps } from '../../route_init';
 import { useCharts } from '../../hooks/use_charts';

x-pack/plugins/monitoring/public/application/pages/elasticsearch/node_page.tsx

@@ -45,7 +45,7 @@ export const ElasticsearchNodePage: React.FC<ComponentProps> = ({ clusters }) =>
 
   const { node }: { node: string } = useParams();
   const { services } = useKibana<{ data: any }>();
-  const [data, setData] = useState({} as any);
+  const [data, setData] = useState<any>({});
 
   const clusterUuid = globalState.cluster_uuid;
   const cluster = find(clusters, {
@@ -62,7 +62,7 @@ export const ElasticsearchNodePage: React.FC<ComponentProps> = ({ clusters }) =>
     }
   }, [cluster, generateBreadcrumbs, data?.nodeSummary?.name]);
   const ccs = globalState.ccs;
-  const [nodesByIndicesData, setNodesByIndicesData] = useState([]);
+  const [nodesByIndicesData, setNodesByIndicesData] = useState<any[]>([]);
 
   const title = i18n.translate('xpack.monitoring.elasticsearch.node.overview.title', {
     defaultMessage: 'Elasticsearch - Nodes - {nodeName} - Overview',

x-pack/plugins/monitoring/public/application/pages/home/cluster_listing.tsx

@@ -9,7 +9,6 @@ import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { Redirect } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
-// @ts-ignore
 import { Listing } from '../../../components/cluster/listing';
 import { EnableAlertsModal } from '../../../alerts/enable_alerts_modal';
 import { GlobalStateContext } from '../../contexts/global_state_context';

x-pack/plugins/monitoring/public/application/pages/kibana/instance.tsx

@@ -22,11 +22,8 @@ import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { ComponentProps } from '../../route_init';
 import { GlobalStateContext } from '../../contexts/global_state_context';
 import { useCharts } from '../../hooks/use_charts';
-// @ts-ignore
 import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';
-// @ts-ignore
 import { MonitoringTimeseriesContainer } from '../../../components/chart';
-// @ts-ignore
 import { DetailStatus } from '../../../components/kibana/detail_status';
 import { PageTemplate } from '../page_template';
 import { AlertsCallout } from '../../../alerts/callout';

x-pack/plugins/monitoring/public/application/pages/kibana/instances.tsx

@@ -13,9 +13,7 @@ import { ComponentProps } from '../../route_init';
 import { GlobalStateContext } from '../../contexts/global_state_context';
 import { useTable } from '../../hooks/use_table';
 import { KibanaTemplate } from './kibana_template';
-// @ts-ignore
 import { KibanaInstances } from '../../../components/kibana/instances';
-// @ts-ignore
 import { SetupModeRenderer, SetupModeProps } from '../../../components/renderers/setup_mode';
 import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
 import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';

x-pack/plugins/monitoring/public/application/pages/kibana/overview.tsx

@@ -21,9 +21,7 @@ import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { KibanaTemplate } from './kibana_template';
 import { GlobalStateContext } from '../../contexts/global_state_context';
 import { ComponentProps } from '../../route_init';
-// @ts-ignore
 import { MonitoringTimeseriesContainer } from '../../../components/chart';
-// @ts-ignore
 import { ClusterStatus } from '../../../components/kibana/cluster_status';
 import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';
 import { useCharts } from '../../hooks/use_charts';

x-pack/plugins/monitoring/public/application/pages/logstash/advanced.tsx

@@ -21,9 +21,7 @@ import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { GlobalStateContext } from '../../contexts/global_state_context';
 import { ComponentProps } from '../../route_init';
 import { LogstashTemplate } from './logstash_template';
-// @ts-ignore
 import { DetailStatus } from '../../../components/logstash/detail_status';
-// @ts-ignore
 import { MonitoringTimeseriesContainer } from '../../../components/chart';
 import { AlertsCallout } from '../../../alerts/callout';
 import { useCharts } from '../../hooks/use_charts';

x-pack/plugins/monitoring/public/application/pages/logstash/node.tsx

@@ -21,9 +21,7 @@ import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { GlobalStateContext } from '../../contexts/global_state_context';
 import { ComponentProps } from '../../route_init';
 import { LogstashTemplate } from './logstash_template';
-// @ts-ignore
 import { DetailStatus } from '../../../components/logstash/detail_status';
-// @ts-ignore
 import { MonitoringTimeseriesContainer } from '../../../components/chart';
 import { AlertsCallout } from '../../../alerts/callout';
 import { useCharts } from '../../hooks/use_charts';

x-pack/plugins/monitoring/public/application/pages/logstash/node_pipelines.tsx

@@ -9,15 +9,12 @@ import { i18n } from '@kbn/i18n';
 import { find } from 'lodash';
 import { useRouteMatch } from 'react-router-dom';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
-// @ts-expect-error
 import { isPipelineMonitoringSupportedInVersion } from '../../../lib/logstash/pipelines';
 import { GlobalStateContext } from '../../contexts/global_state_context';
 import { ComponentProps } from '../../route_init';
 import { LogstashTemplate } from './logstash_template';
-// @ts-expect-error
 import { DetailStatus } from '../../../components/logstash/detail_status';
 import { useTable } from '../../hooks/use_table';
-// @ts-expect-error
 import { PipelineListing } from '../../../components/logstash/pipeline_listing/pipeline_listing';
 import { useCharts } from '../../hooks/use_charts';
 import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';

x-pack/plugins/monitoring/public/application/pages/logstash/nodes.tsx

@@ -10,7 +10,6 @@ import { find } from 'lodash';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { GlobalStateContext } from '../../contexts/global_state_context';
 import { ComponentProps } from '../../route_init';
-// @ts-ignore
 import { Listing } from '../../../components/logstash/listing';
 import { LogstashTemplate } from './logstash_template';
 import { SetupModeRenderer } from '../../../components/renderers/setup_mode';

x-pack/plugins/monitoring/public/application/pages/logstash/overview.tsx

@@ -11,7 +11,6 @@ import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { GlobalStateContext } from '../../contexts/global_state_context';
 import { ComponentProps } from '../../route_init';
 import { useCharts } from '../../hooks/use_charts';
-// @ts-ignore
 import { Overview } from '../../../components/logstash/overview';
 import { LogstashTemplate } from './logstash_template';
 import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';

x-pack/plugins/monitoring/public/application/pages/logstash/pipeline.tsx

@@ -12,15 +12,10 @@ import { useRouteMatch } from 'react-router-dom';
 import { useKibana, useUiSetting } from '@kbn/kibana-react-plugin/public';
 import { GlobalStateContext } from '../../contexts/global_state_context';
 import { ComponentProps } from '../../route_init';
-// @ts-ignore
 import { List } from '../../../components/logstash/pipeline_viewer/models/list';
-// @ts-ignore
 import { PipelineViewer } from '../../../components/logstash/pipeline_viewer';
-// @ts-ignore
 import { Pipeline } from '../../../components/logstash/pipeline_viewer/models/pipeline';
-// @ts-ignore
 import { PipelineState } from '../../../components/logstash/pipeline_viewer/models/pipeline_state';
-// @ts-ignore
 import { vertexFactory } from '../../../components/logstash/pipeline_viewer/models/graph/vertex_factory';
 import { LogstashTemplate } from './logstash_template';
 import { useTable } from '../../hooks/use_table';

x-pack/plugins/monitoring/public/application/pages/logstash/pipelines.tsx

@@ -11,9 +11,7 @@ import { useKibana, useUiSetting } from '@kbn/kibana-react-plugin/public';
 import { GlobalStateContext } from '../../contexts/global_state_context';
 import { ComponentProps } from '../../route_init';
 import { useCharts } from '../../hooks/use_charts';
-// @ts-ignore
 import { isPipelineMonitoringSupportedInVersion } from '../../../lib/logstash/pipelines';
-// @ts-ignore
 import { PipelineListing } from '../../../components/logstash/pipeline_listing/pipeline_listing';
 import { LogstashTemplate } from './logstash_template';
 import { useTable } from '../../hooks/use_table';

x-pack/plugins/monitoring/public/components/apm/apm_metrics.tsx

@@ -19,8 +19,6 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-
-// @ts-ignore could not find declaration file
 import { MonitoringTimeseriesContainer } from '../chart';
 import { checkAgentTypeMetric } from '../../lib/apm_agent';
 
@@ -51,7 +49,7 @@ const createCharts = (series: unknown[], props: Partial<Props>) => {
   return series.map((data, index) => {
     return (
       <EuiFlexItem style={{ minWidth: '45%' }} key={index}>
-        <MonitoringTimeseriesContainer {...props} series={data} />
+        <MonitoringTimeseriesContainer {...props} series={data as any} />
       </EuiFlexItem>
     );
   });

x-pack/plugins/monitoring/public/components/apm/instances/instances.tsx

@@ -8,7 +8,6 @@
 import React, { Fragment } from 'react';
 import moment from 'moment';
 import { uniq, get } from 'lodash';
-import { EuiMonitoringTable } from '../../table';
 import {
   EuiLink,
   EuiPage,
@@ -18,33 +17,37 @@ import {
   EuiScreenReaderOnly,
   EuiPanel,
 } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { EuiMonitoringTable } from '../../table';
 import { Status } from './status';
 import { formatMetric } from '../../../lib/format_number';
 import { getSafeForExternalLink } from '../../../lib/get_safe_for_external_link';
 import { formatTimestampToDuration } from '../../../../common';
-import { i18n } from '@kbn/i18n';
 import { APM_SYSTEM_ID } from '../../../../common/constants';
 import { ListingCallOut } from '../../setup_mode/listing_callout';
 import { SetupModeBadge } from '../../setup_mode/badge';
-import { FormattedMessage } from '@kbn/i18n-react';
 import { isSetupModeFeatureEnabled } from '../../../lib/setup_mode';
 import { SetupModeFeature } from '../../../../common/enums';
+import type { AlertsByName } from '../../../alerts/types';
+import type { Sorting, Pagination, TableChange } from '../../../application/hooks/use_table';
+import type { SetupMode } from '../../setup_mode/types';
 
-function getColumns(alerts, setupMode, cgroup) {
+function getColumns(setupMode: SetupMode, cgroup: unknown) {
   const memoryField = cgroup
     ? {
         name: i18n.translate('xpack.monitoring.apm.instances.cgroupMemoryUsageTitle', {
           defaultMessage: 'Memory Usage (cgroup)',
         }),
         field: 'cgroup_memory',
-        render: (value) => formatMetric(value, 'byte'),
+        render: (value: number) => formatMetric(value, 'byte'),
       }
     : {
         name: i18n.translate('xpack.monitoring.apm.instances.allocatedMemoryTitle', {
           defaultMessage: 'Allocated Memory',
         }),
         field: 'memory',
-        render: (value) => formatMetric(value, 'byte'),
+        render: (value: number) => formatMetric(value, 'byte'),
       };
   return [
     {
@@ -52,7 +55,7 @@ function getColumns(alerts, setupMode, cgroup) {
         defaultMessage: 'Name',
       }),
       field: 'name',
-      render: (name, apm) => {
+      render: (name: string, apm: { uuid: string; name: string }) => {
         let setupModeStatus = null;
         if (isSetupModeFeatureEnabled(SetupModeFeature.MetricbeatMigration)) {
           const list = get(setupMode, 'data.byUuid', {});
@@ -98,28 +101,28 @@ function getColumns(alerts, setupMode, cgroup) {
         defaultMessage: 'Total Events Rate',
       }),
       field: 'total_events_rate',
-      render: (value) => formatMetric(value, '', '/s'),
+      render: (value: number) => formatMetric(value, '', '/s'),
     },
     {
       name: i18n.translate('xpack.monitoring.apm.instances.bytesSentRateTitle', {
         defaultMessage: 'Bytes Sent Rate',
       }),
       field: 'bytes_sent_rate',
-      render: (value) => formatMetric(value, 'byte', '/s'),
+      render: (value: number) => formatMetric(value, 'byte', '/s'),
     },
     {
       name: i18n.translate('xpack.monitoring.apm.instances.outputErrorsTitle', {
         defaultMessage: 'Output Errors',
       }),
       field: 'errors',
-      render: (value) => formatMetric(value, '0'),
+      render: (value: string) => formatMetric(value, '0'),
     },
     {
       name: i18n.translate('xpack.monitoring.apm.instances.lastEventTitle', {
         defaultMessage: 'Last Event',
       }),
       field: 'time_of_last_event',
-      render: (value) =>
+      render: (value: number) =>
         i18n.translate('xpack.monitoring.apm.instances.lastEventValue', {
           defaultMessage: '{timeOfLastEvent} ago',
           values: {
@@ -137,17 +140,29 @@ function getColumns(alerts, setupMode, cgroup) {
   ];
 }
 
-export function ApmServerInstances({ apms, alerts, setupMode }) {
+interface Props {
+  apms: {
+    data: {
+      apms: Array<{
+        version: string;
+      }>;
+      cgroup: unknown;
+      stats: unknown;
+    };
+    pagination: Pagination;
+    sorting: Sorting;
+    onTableChange: (e: TableChange) => void;
+  };
+  setupMode: SetupMode;
+  alerts?: AlertsByName;
+}
+export function ApmServerInstances({ apms, setupMode, alerts }: Props) {
   const { pagination, sorting, onTableChange, data } = apms;
 
   let setupModeCallout = null;
   if (isSetupModeFeatureEnabled(SetupModeFeature.MetricbeatMigration)) {
     setupModeCallout = (
-      <ListingCallOut
-        setupModeData={setupMode.data}
-        useNodeIdentifier={false}
-        productName={APM_SYSTEM_ID}
-      />
+      <ListingCallOut setupModeData={setupMode.data} productName={APM_SYSTEM_ID} />
     );
   }
 
@@ -175,7 +190,7 @@ export function ApmServerInstances({ apms, alerts, setupMode }) {
           <EuiMonitoringTable
             className="apmInstancesTable"
             rows={data.apms}
-            columns={getColumns(alerts, setupMode, data.cgroup)}
+            columns={getColumns(setupMode, data.cgroup)}
             sorting={sorting}
             pagination={pagination}
             setupMode={setupMode}

x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.tsx

@@ -7,13 +7,8 @@
 
 import React, { Fragment } from 'react';
 import { get, first } from 'lodash';
-import { getTechnicalPreview } from './get_technical_preview';
-import { getTitle } from './get_title';
-import { getUnits } from './get_units';
-import { MonitoringTimeseries } from './monitoring_timeseries';
-import { InfoTooltip } from './info_tooltip';
-import './monitoring_timeseries_container.scss';
-
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
 import {
   EuiBadge,
   EuiIconTip,
@@ -24,11 +19,38 @@ import {
   EuiTextAlign,
   EuiButtonEmpty,
 } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n-react';
-import { i18n } from '@kbn/i18n';
+import { getTechnicalPreview } from './get_technical_preview';
+import { getTitle } from './get_title';
+import { getUnits } from './get_units';
+import { MonitoringTimeseries } from './monitoring_timeseries';
+import { InfoTooltip } from './info_tooltip';
 import { AlertsBadge } from '../../alerts/badge';
+import type { AlertsByName } from '../../alerts/types';
 
-const zoomOutBtn = (zoomInfo) => {
+import './monitoring_timeseries_container.scss';
+
+interface ZoomInfo {
+  showZoomOutBtn: () => boolean;
+  zoomOutHandler: () => void;
+}
+
+interface SeriesAlert {
+  alerts: AlertsByName;
+}
+interface Series {
+  metric: { title: string; label: string; description: string };
+}
+interface Props {
+  series?: Series[] | SeriesAlert;
+  onBrush?: ({ xaxis }: any) => void;
+  zoomInfo?: ZoomInfo;
+}
+
+const isSeriesAlert = (series: SeriesAlert | Series[]): series is SeriesAlert => {
+  return (series as SeriesAlert).alerts !== undefined;
+};
+
+const zoomOutBtn = (zoomInfo?: ZoomInfo) => {
   if (!zoomInfo || !zoomInfo.showZoomOutBtn()) {
     return null;
   }
@@ -52,7 +74,7 @@ const zoomOutBtn = (zoomInfo) => {
   );
 };
 
-const technicalPreviewBadge = (technicalPreview) => {
+const technicalPreviewBadge = (technicalPreview: boolean) => {
   if (!technicalPreview) {
     return null;
   }
@@ -69,16 +91,17 @@ const technicalPreviewBadge = (technicalPreview) => {
   );
 };
 
-export function MonitoringTimeseriesContainer({ series, onBrush, zoomInfo }) {
+export function MonitoringTimeseriesContainer({ series, onBrush, zoomInfo }: Props) {
   if (series === undefined) {
     return null; // still loading
   }
 
-  const title = getTitle(series);
-  const technicalPreview = getTechnicalPreview(series);
+  const seriesMetrics = !isSeriesAlert(series) ? series : [];
+  const title = getTitle(seriesMetrics);
+  const technicalPreview = getTechnicalPreview(seriesMetrics);
   const titleForAriaIds = title.replace(/\s+/, '--');
-  const units = getUnits(series);
-  const bucketSize = get(first(series), 'bucket_size'); // bucket size will be the same for all metrics in all series
+  const units = getUnits(seriesMetrics);
+  const bucketSize = get(first(seriesMetrics), 'bucket_size'); // bucket size will be the same for all metrics in all series
 
   const seriesScreenReaderTextList = [
     i18n.translate('xpack.monitoring.chart.seriesScreenReaderListDescription', {
@@ -87,13 +110,14 @@ export function MonitoringTimeseriesContainer({ series, onBrush, zoomInfo }) {
         bucketSize,
       },
     }),
-  ].concat(series.map((item) => `${item.metric.label}: ${item.metric.description}`));
+  ].concat(seriesMetrics.map((item) => `${item.metric.label}: ${item.metric.description}`));
 
   let alertStatus = null;
-  if (series.alerts) {
+  const seriesAlert = isSeriesAlert(series) ? series : undefined;
+  if (seriesAlert?.alerts) {
     alertStatus = (
       <EuiFlexItem grow={false}>
-        <AlertsBadge alerts={series.alerts} />
+        <AlertsBadge alerts={seriesAlert.alerts} />
       </EuiFlexItem>
     );
   }
@@ -105,9 +129,9 @@ export function MonitoringTimeseriesContainer({ series, onBrush, zoomInfo }) {
           <EuiFlexItem grow={false}>
             <EuiFlexGroup gutterSize="s" alignItems="center">
               <EuiFlexItem grow={false}>
-                <EuiTitle size="s" tabIndex="0">
+                <EuiTitle size="s">
                   <h2>
-                    {getTitle(series)}
+                    {getTitle(seriesMetrics)}
                     {units ? ` (${units})` : ''}
                     <EuiScreenReaderOnly>
                       <span>
@@ -126,7 +150,7 @@ export function MonitoringTimeseriesContainer({ series, onBrush, zoomInfo }) {
                     anchorClassName="eui-textRight eui-alignMiddle monChart__tooltipTrigger"
                     type="iInCircle"
                     position="right"
-                    content={<InfoTooltip series={series} bucketSize={bucketSize} />}
+                    content={<InfoTooltip series={seriesMetrics} bucketSize={bucketSize} />}
                   />
                   <EuiScreenReaderOnly>
                     <span id={`monitoringChart${titleForAriaIds}`}>
@@ -143,7 +167,7 @@ export function MonitoringTimeseriesContainer({ series, onBrush, zoomInfo }) {
         </EuiFlexGroup>
       </EuiFlexItem>
       <EuiFlexItem style={{ minHeight: '200px' }}>
-        <MonitoringTimeseries series={series} onBrush={onBrush} />
+        <MonitoringTimeseries series={seriesMetrics} onBrush={onBrush} />
       </EuiFlexItem>
     </EuiFlexGroup>
   );

x-pack/plugins/monitoring/public/components/elasticsearch/overview/index.ts

@@ -5,5 +5,4 @@
  * 2.0.
  */
 
-// @ts-ignore
 export { ElasticsearchOverview } from './overview';

x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/transformers/indices_by_nodes.js

@@ -16,7 +16,7 @@ export function indicesByNodes() {
         return obj;
       }
       obj[id] = {
-        id: id,
+        id,
         name: id,
         children: [],
         unassigned: [],

x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/transformers/nodes_by_indices.d.ts

@@ -1,8 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-export const nodesByIndices: () => (shards: any, nodes: any) => any;

x-pack/plugins/monitoring/public/components/enterprise_search/overview/overview.tsx

@@ -17,7 +17,6 @@ import {
   EuiFlexItem,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-// @ts-ignore
 import { MonitoringTimeseriesContainer } from '../../chart';
 import { Status } from './status';
 

x-pack/plugins/monitoring/public/components/enterprise_search/overview/status.tsx

@@ -7,13 +7,19 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-// @ts-ignore
 import { formatMetric } from '../../../lib/format_number';
-// @ts-ignore
 import { SummaryStatus } from '../../summary_status';
 
-// @ts-ignore
-export function Status({ stats }) {
+interface Props {
+  stats: {
+    totalInstances: number;
+    appSearchEngines: number;
+    workplaceSearchOrgSources: number;
+    workplaceSearchPrivateSources: number;
+  };
+}
+
+export function Status({ stats }: Props) {
   const metrics = [
     {
       label: i18n.translate('xpack.monitoring.entSearch.overview.instances', {

x-pack/plugins/monitoring/public/components/kibana/cluster_status/index.tsx

@@ -9,13 +9,32 @@ import { EuiBadge, EuiLink, EuiStat, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { useLocation } from 'react-router-dom';
+import type { AlertsByName } from '../../../alerts/types';
 import { ExternalConfigContext } from '../../../application/contexts/external_config_context';
 import { formatMetric } from '../../../lib/format_number';
 import { getSafeForExternalLink } from '../../../lib/get_safe_for_external_link';
 import { DefaultStatusIndicator, SummaryStatus } from '../../summary_status';
 import { KibanaStatusIcon } from '../status_icon';
 
-export function ClusterStatus({ stats, alerts }) {
+interface ClusterStatusProps {
+  stats: {
+    concurrent_connections: number;
+    count: number;
+    memory_limit: number;
+    memory_size: number;
+    requests_total: number;
+    response_time_max: number;
+    status: string;
+    some_status_is_stale: boolean;
+  };
+  alerts?: AlertsByName;
+}
+
+interface IndicatorProps {
+  staleMessage: React.ReactNode;
+}
+
+export function ClusterStatus({ stats, alerts }: ClusterStatusProps) {
   const {
     concurrent_connections: connections,
     count: instances,
@@ -103,7 +122,7 @@ export function ClusterStatus({ stats, alerts }) {
   );
 }
 
-function OverviewPageStatusIndicator({ staleMessage }) {
+function OverviewPageStatusIndicator({ staleMessage }: IndicatorProps) {
   const instancesHref = getSafeForExternalLink('#/kibana/instances');
 
   const title = (
@@ -145,7 +164,7 @@ function OverviewPageStatusIndicator({ staleMessage }) {
   );
 }
 
-function InstancesPageStatusIndicator({ staleMessage }) {
+function InstancesPageStatusIndicator({ staleMessage }: IndicatorProps) {
   const title = (
     <EuiToolTip position="top" content={staleMessage}>
       <EuiBadge iconType="alert" color="warning">

x-pack/plugins/monitoring/public/components/kibana/instances/instances.tsx

@@ -23,30 +23,27 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { useUiSetting } from '@kbn/kibana-react-plugin/public';
 import { capitalize, get } from 'lodash';
 import React, { Fragment } from 'react';
+import type { TableChange, Sorting, Pagination } from '../../../application/hooks/use_table';
+import type { AlertsByName } from '../../../alerts/types';
 import { KIBANA_SYSTEM_ID } from '../../../../common/constants';
 import { SetupModeFeature } from '../../../../common/enums';
-import { CommonAlertStatus } from '../../../../common/types/alerts';
 import { ElasticsearchSourceKibanaStats } from '../../../../common/types/es';
 import { AlertsStatus } from '../../../alerts/status';
 import { ExternalConfigContext } from '../../../application/contexts/external_config_context';
-// @ts-ignore
 import { formatMetric, formatNumber } from '../../../lib/format_number';
 import { getSafeForExternalLink } from '../../../lib/get_safe_for_external_link';
 import { isSetupModeFeatureEnabled } from '../../../lib/setup_mode';
-// @ts-ignore
 import { SetupModeBadge } from '../../setup_mode/badge';
-// @ts-ignore
 import { ListingCallOut } from '../../setup_mode/listing_callout';
 import { STATUS_ICON_TYPES } from '../../status_icon';
-// @ts-ignore
 import { EuiMonitoringTable } from '../../table';
-// @ts-ignore
 import { ClusterStatus } from '../cluster_status';
 import { formatLastSeenTimestamp } from '../format_last_seen_timestamp';
+import type { SetupMode } from '../../setup_mode/types';
 
 const getColumns = (
-  setupMode: any,
-  alerts: { [alertTypeId: string]: CommonAlertStatus[] },
+  setupMode: SetupMode,
+  alerts: AlertsByName,
   dateFormat: string,
   staleStatusThresholdSeconds: number
 ) => {
@@ -209,11 +206,11 @@ const getColumns = (
 
 interface Props {
   clusterStatus: any;
-  alerts: { [alertTypeId: string]: CommonAlertStatus[] };
-  setupMode: any;
-  sorting: any;
-  pagination: any;
-  onTableChange: any;
+  alerts: AlertsByName;
+  setupMode: SetupMode;
+  sorting: Sorting;
+  pagination: Pagination;
+  onTableChange: (e: TableChange) => void;
   instances: ElasticsearchSourceKibanaStats[];
 }
 
@@ -255,7 +252,6 @@ export const KibanaInstances: React.FC<Props> = (props: Props) => {
     setupModeCallOut = (
       <ListingCallOut
         setupModeData={setupMode.data}
-        useNodeIdentifier={false}
         productName={KIBANA_SYSTEM_ID}
         customRenderer={() => {
           const customRenderResponse = {

x-pack/plugins/monitoring/public/components/setup_mode/__snapshots__/badge.test.js.snap

@@ -50,7 +50,6 @@ exports[`setupMode SetupModeBadge should use a text status if internal collectio
    
   <EuiTextColor
     color="warning"
-    size="xs"
   >
     Some nodes use only self monitoring
   </EuiTextColor>

x-pack/plugins/monitoring/public/components/setup_mode/badge.tsx

@@ -6,9 +6,10 @@
  */
 
 import React, { Fragment } from 'react';
-import { EuiTextColor, EuiIcon, EuiBadge } from '@elastic/eui';
+import { EuiTextColor, EuiIcon, EuiBadge, EuiBadgeProps } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { ELASTICSEARCH_SYSTEM_ID } from '../../../common/constants';
+import type { Instance, SetupMode } from './types';
 
 const clickToMonitorWithMetricbeat = i18n.translate(
   'xpack.monitoring.setupMode.clickToMonitorWithMetricbeat',
@@ -35,7 +36,20 @@ const unknown = i18n.translate('xpack.monitoring.setupMode.unknown', {
   defaultMessage: 'N/A',
 });
 
-export function SetupModeBadge({ setupMode, productName, status, instance, clusterUuid }) {
+interface Props {
+  setupMode: SetupMode;
+  productName: string;
+  instance: Instance;
+  clusterUuid?: string;
+  status: {
+    isPartiallyMigrated: boolean;
+    isInternalCollector: boolean;
+    isNetNewUser: boolean;
+    isFullyMigrated: boolean;
+  };
+}
+
+export function SetupModeBadge({ setupMode, productName, status, instance, clusterUuid }: Props) {
   let customAction = null;
   let customText = null;
 
@@ -58,7 +72,7 @@ export function SetupModeBadge({ setupMode, productName, status, instance, clust
         <Fragment>
           <EuiIcon type="flag" />
           &nbsp;
-          <EuiTextColor color="warning" size="xs">
+          <EuiTextColor color="warning">
             {i18n.translate('xpack.monitoring.setupMode.monitorAllNodes', {
               defaultMessage: 'Some nodes use only self monitoring',
             })}
@@ -68,7 +82,7 @@ export function SetupModeBadge({ setupMode, productName, status, instance, clust
     }
   }
 
-  const badgeProps = {};
+  const badgeProps = {} as EuiBadgeProps;
   if (status.isInternalCollector || status.isPartiallyMigrated || status.isNetNewUser) {
     badgeProps.onClick = customAction ? customAction : () => setupMode.openFlyout(instance);
   }

x-pack/plugins/monitoring/public/components/setup_mode/listing_callout.tsx

@@ -10,12 +10,18 @@ import { get } from 'lodash';
 import { EuiCallOut, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { formatProductName, getIdentifier } from './formatting';
+import type { SetupModeData } from './types';
 
 const MIGRATE_TO_MB_LABEL = i18n.translate('xpack.monitoring.setupMode.migrateToMetricbeat', {
   defaultMessage: 'Monitor with Metricbeat',
 });
 
-export function ListingCallOut({ setupModeData, productName, customRenderer = null }) {
+export interface Props {
+  setupModeData: SetupModeData;
+  productName: string;
+  customRenderer?: () => { shouldRender: boolean; componentToRender: JSX.Element | null };
+}
+export function ListingCallOut({ setupModeData, productName, customRenderer }: Props) {
   if (customRenderer) {
     const { shouldRender, componentToRender } = customRenderer();
     if (shouldRender) {

x-pack/plugins/monitoring/public/components/setup_mode/types.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export interface SetupModeData {
+  totalUniqueInstanceCount: number;
+  totalUniquePartiallyMigratedCount: number;
+  totalUniqueFullyMigratedCount: number;
+  detected: {
+    mightExist: boolean;
+  };
+  [key: string]: any;
+}
+
+export interface SetupModeMeta {
+  liveClusterUuid: string;
+}
+
+export interface Instance {
+  uuid: string;
+  name: string;
+}
+
+export interface SetupMode {
+  openFlyout: (instance: Instance) => () => void;
+  shortcutToFinishMigration: () => void;
+  data: SetupModeData;
+  meta: SetupModeMeta;
+  [key: string]: any;
+}

x-pack/plugins/monitoring/public/components/summary_status/summary_status.tsx

@@ -6,16 +6,38 @@
  */
 
 import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { isEmpty, capitalize } from 'lodash';
+import { capitalize } from 'lodash';
 import { EuiFlexGroup, EuiFlexItem, EuiStat } from '@elastic/eui';
-import { StatusIcon } from '../status_icon';
-import { AlertsStatus } from '../../alerts/status';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { StatusIcon, StatusIconProps } from '../status_icon';
+import { AlertsStatus } from '../../alerts/status';
+import type { AlertsByName } from '../../alerts/types';
 import './summary_status.scss';
 
-const wrapChild = ({ label, value, ...props }, index) => (
+interface Metrics {
+  label: string;
+  value: string | number;
+  [key: string]: unknown;
+}
+
+interface SummaryProps {
+  StatusIndicator?: typeof DefaultStatusIndicator;
+  status?: string;
+  isOnline?: boolean;
+  IconComponent?: typeof DefaultIconComponent;
+  alerts?: AlertsByName;
+  metrics: Metrics[];
+  'data-test-subj': string;
+}
+
+interface IndicatorProps {
+  status?: string;
+  isOnline?: boolean;
+  IconComponent: typeof DefaultIconComponent;
+}
+
+const wrapChild = ({ label, value, ...props }: Metrics, index: number) => (
   <EuiFlexItem
     style={{ maxWidth: 200 }}
     key={`summary-status-item-${index}`}
@@ -32,7 +54,12 @@ const wrapChild = ({ label, value, ...props }, index) => (
   </EuiFlexItem>
 );
 
-const DefaultIconComponent = ({ status }) => (
+interface IconProps {
+  status: string;
+  isOnline?: boolean;
+}
+
+const DefaultIconComponent = ({ status }: IconProps) => (
   <Fragment>
     <FormattedMessage
       id="xpack.monitoring.summaryStatus.statusIconTitle"
@@ -40,7 +67,7 @@ const DefaultIconComponent = ({ status }) => (
       values={{
         statusIcon: (
           <StatusIcon
-            type={status.toUpperCase()}
+            type={status.toUpperCase() as StatusIconProps['type']}
             label={i18n.translate('xpack.monitoring.summaryStatus.statusIconLabel', {
               defaultMessage: 'Status: {status}',
               values: {
@@ -54,8 +81,12 @@ const DefaultIconComponent = ({ status }) => (
   </Fragment>
 );
 
-export const DefaultStatusIndicator = ({ status, isOnline, IconComponent }) => {
-  if (isEmpty(status)) {
+export const DefaultStatusIndicator = ({
+  status,
+  IconComponent,
+  isOnline = false,
+}: IndicatorProps) => {
+  if (!status?.length) {
     return null;
   }
 
@@ -80,14 +111,14 @@ export const DefaultStatusIndicator = ({ status, isOnline, IconComponent }) => {
 };
 
 export function SummaryStatus({
-  StatusIndicator = DefaultStatusIndicator,
-  status,
-  isOnline,
-  IconComponent = DefaultIconComponent,
-  alerts,
   metrics,
+  alerts,
+  status,
+  isOnline = false,
+  IconComponent = DefaultIconComponent,
+  StatusIndicator = DefaultStatusIndicator,
   ...props
-}) {
+}: SummaryProps) {
   return (
     <div {...props} className="monSummaryStatusNoWrap">
       <EuiFlexGroup gutterSize="m" alignItems="center" justifyContent="spaceBetween">
@@ -117,7 +148,3 @@ export function SummaryStatus({
     </div>
   );
 }
-
-SummaryStatus.propTypes = {
-  metrics: PropTypes.array.isRequired,
-};

x-pack/plugins/monitoring/public/lib/logstash/pipelines.ts

@@ -8,7 +8,7 @@
 import semverMajor from 'semver/functions/major';
 import { LOGSTASH } from '../../../common/constants';
 
-export function isPipelineMonitoringSupportedInVersion(logstashVersion) {
+export function isPipelineMonitoringSupportedInVersion(logstashVersion: string) {
   const major = semverMajor(logstashVersion);
   return major >= LOGSTASH.MAJOR_VER_REQD_FOR_PIPELINES;
 }

x-pack/plugins/monitoring/tsconfig.json

@@ -3,18 +3,9 @@
   "compilerOptions": {
     "outDir": "./target/types",
     "emitDeclarationOnly": true,
-    "declaration": true,
-    // there is still a decent amount of JS in this plugin and we are taking
-    // advantage of the fact that TS doesn't know the types of that code and
-    // gives us `any`. Once that code is converted to .ts we can remove this
-    // and allow TS to infer types from any JS file imported.
-    "allowJs": false
+    "declaration": true
   },
-  "include": [
-    "common/**/*",
-    "public/**/*",
-    "server/**/*"
-  ],
+  "include": ["common/**/*", "public/**/*", "server/**/*", "server/**/*.json"],
   "kbn_references": [
     { "path": "../../../src/core/tsconfig.json" },
     { "path": "../../../src/plugins/data/tsconfig.json" },
@@ -33,6 +24,6 @@
     { "path": "../license_management/tsconfig.json" },
     { "path": "../observability/tsconfig.json" },
     { "path": "../telemetry_collection_xpack/tsconfig.json" },
-    { "path": "../triggers_actions_ui/tsconfig.json" },
+    { "path": "../triggers_actions_ui/tsconfig.json" }
   ]
 }