[monitoring] fixup types

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

@@ -6,6 +6,7 @@
  */
 
 import { useState, useCallback } from 'react';
+import { EuiTableSortingType } from '@elastic/eui';
 import { euiTableStorageGetter, euiTableStorageSetter } from '../../components/table';
 import { Storage } from '../../../../../../src/plugins/kibana_utils/public';
 
@@ -23,12 +24,7 @@ interface Page {
   index: number;
 }
 
-interface Sorting {
-  sort: {
-    field: string;
-    direction: string;
-  };
-}
+type Sorting = EuiTableSortingType<string>;
 
 const PAGE_SIZE_OPTIONS = [5, 10, 20, 50];
 

x-pack/plugins/monitoring/public/application/setup_mode/setup_mode_renderer.d.ts

@@ -5,8 +5,9 @@
  * 2.0.
  */
 
-export const SetupModeRenderer: FunctionComponent<Props>;
+import { FunctionComponent } from 'react';
 
+export const SetupModeRenderer: FunctionComponent<Record<any, any>>;
 export interface SetupModeProps {
   setupMode: any;
   flyoutComponent: any;

x-pack/plugins/monitoring/public/components/apm/status_icon.js

@@ -6,17 +6,17 @@
  */
 
 import React from 'react';
-import { StatusIcon } from '../../components/status_icon';
+import { StatusIcon, STATUS_ICON_TYPES } from '../../components/status_icon';
 import { i18n } from '@kbn/i18n';
 
 export function ApmStatusIcon({ status, availability = true }) {
   const type = (() => {
     if (!availability) {
-      return StatusIcon.TYPES.GRAY;
+      return STATUS_ICON_TYPES.GRAY;
     }
 
     const statusKey = status.toUpperCase();
-    return StatusIcon.TYPES[statusKey] || StatusIcon.TYPES.YELLOW;
+    return STATUS_ICON_TYPES[statusKey] || STATUS_ICON_TYPES.YELLOW;
   })();
 
   return (

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

@@ -5,4 +5,13 @@
  * 2.0.
  */
 
-export const Overview: FunctionComponent<Props>;
+import { FunctionComponent } from 'react';
+
+export const Overview: FunctionComponent<OverviewProps>;
+
+export interface OverviewProps {
+  cluster: unknown;
+  setupMode: unknown;
+  showLicenseExpiration: boolean;
+  alerts: unknown;
+}

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

@@ -5,4 +5,11 @@
  * 2.0.
  */
 
-export const ClusterStatus: FunctionComponent<Props>;
+import { FunctionComponent } from 'react';
+
+export const ClusterStatus: FunctionComponent<ClusterStatusProps>;
+
+export interface ClusterStatusProps {
+  stats: unknown;
+  alerts?: unknown;
+}

x-pack/plugins/monitoring/public/components/elasticsearch/indices/indices.d.ts

@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+import { FunctionComponent } from 'react';
+
+export const ElasticsearchIndices: FunctionComponent<ElasticsearchIndicesProps>;
+export interface ElasticsearchIndicesProps {
+  clusterStatus: unknown;
+  indices: unknown;
+  sorting: unknown;
+  pagination: unknown;
+  onTableChange: unknown;
+  toggleShowSystemIndices: unknown;
+  showSystemIndices: unknown;
+  alerts: unknown;
+}

x-pack/plugins/monitoring/public/components/elasticsearch/ml_job_listing/status_icon.tsx

@@ -7,22 +7,22 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { StatusIcon } from '../../status_icon';
+import { StatusIcon, STATUS_ICON_TYPES } from '../../status_icon';
 
 export function MachineLearningJobStatusIcon({ status }: { status: string }) {
   const type = (() => {
     const statusKey = status.toUpperCase();
 
     if (statusKey === 'OPENED') {
-      return StatusIcon.TYPES.GREEN;
+      return STATUS_ICON_TYPES.GREEN;
     } else if (statusKey === 'CLOSED') {
-      return StatusIcon.TYPES.GRAY;
+      return STATUS_ICON_TYPES.GRAY;
     } else if (statusKey === 'FAILED') {
-      return StatusIcon.TYPES.RED;
+      return STATUS_ICON_TYPES.RED;
     }
 
     // basically a "changing" state like OPENING or CLOSING
-    return StatusIcon.TYPES.YELLOW;
+    return STATUS_ICON_TYPES.YELLOW;
   })();
 
   return (

x-pack/plugins/monitoring/public/components/elasticsearch/ml_jobs/ml_jobs.tsx

@@ -31,7 +31,7 @@ import { ClusterStatus } from '../cluster_status';
 interface Props {
   clusterStatus: boolean;
   jobs: MLJobs;
-  onTableChange: () => void;
+  onTableChange: (props: any) => void;
   sorting: EuiTableSortingType<string>;
   pagination: Pagination;
 }

x-pack/plugins/monitoring/public/components/elasticsearch/node/node.d.ts

@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+import { FunctionComponent } from 'react';
+
+export const Node: FunctionComponent<NodeProps>;
+export interface NodeProps {
+  nodeSummary: unknown;
+  metrics: unknown;
+  logs: unknown;
+  alerts: unknown;
+  nodeId: unknown;
+  clusterUuid: unknown;
+  scope: unknown;
+  [key: string]: any;
+}

x-pack/plugins/monitoring/public/components/elasticsearch/node/node_react.d.ts

@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+
+import { FunctionComponent } from 'react';
+
+export const NodeReact: FunctionComponent<NodeReactProps>;
+export interface NodeReactProps {
+  nodeSummary: unknown;
+  metrics: unknown;
+  logs: unknown;
+  alerts: unknown;
+  nodeId: unknown;
+  clusterUuid: unknown;
+  [key: string]: any;
+}

x-pack/plugins/monitoring/public/components/status_icon/index.d.ts → x-pack/plugins/monitoring/public/components/elasticsearch/node/status_icon.d.ts

@@ -5,4 +5,10 @@
  * 2.0.
  */
 
-export const StatusIcon: FunctionComponent<Props>;
+import { FunctionComponent } from 'react';
+
+export const NodeStatusIcon: FunctionComponent<NodeStatusIconProps>;
+export interface NodeStatusIconProps {
+  isOnline: boolean;
+  status: string;
+}

x-pack/plugins/monitoring/public/components/elasticsearch/node/status_icon.js

@@ -6,11 +6,11 @@
  */
 
 import React from 'react';
-import { StatusIcon } from '../../status_icon';
+import { StatusIcon, STATUS_ICON_TYPES } from '../../status_icon';
 import { i18n } from '@kbn/i18n';
 
 export function NodeStatusIcon({ isOnline, status }) {
-  const type = isOnline ? StatusIcon.TYPES.GREEN : StatusIcon.TYPES.GRAY;
+  const type = isOnline ? STATUS_ICON_TYPES.GREEN : STATUS_ICON_TYPES.GRAY;
 
   return (
     <StatusIcon

x-pack/plugins/monitoring/public/components/elasticsearch/nodes/nodes.d.ts

@@ -0,0 +1,15 @@
+/*
+ * 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.
+ */
+
+import { FunctionComponent } from 'react';
+
+export const ElasticsearchNodes: FunctionComponent<ElasticsearchNodesProps>;
+export interface ElasticsearchNodesProps {
+  clusterStatus: unknown;
+  showCgroupMetricsElasticsearch: unknown;
+  [key: string]: any;
+}

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

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+
+import { FunctionComponent } from 'react';
+
+export const ElasticsearchOverview: FunctionComponent<ElasticsearchOverviewProps>;
+export interface ElasticsearchOverviewProps {
+  clusterStatus: unknown;
+  metrics: unknown;
+  logs: unknown;
+  cluster: unknown;
+  shardActivity: unknown;
+  [key: string]: any;
+}

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

@@ -5,4 +5,4 @@
  * 2.0.
  */
 
-export const nodesByIndices: () => (shards, nodes) => any;
+export const nodesByIndices: () => (shards: any, nodes: any) => any;

x-pack/plugins/monitoring/public/components/elasticsearch/status_icon.js

@@ -6,13 +6,13 @@
  */
 
 import React from 'react';
-import { StatusIcon } from '../status_icon';
+import { StatusIcon, STATUS_ICON_TYPES } from '../status_icon';
 import { i18n } from '@kbn/i18n';
 
 export function ElasticsearchStatusIcon({ status }) {
   const type = (() => {
     const statusKey = status.toUpperCase();
-    return StatusIcon.TYPES[statusKey] || StatusIcon.TYPES.GRAY;
+    return STATUS_ICON_TYPES[statusKey] || STATUS_ICON_TYPES.GRAY;
   })();
 
   return (

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

@@ -25,8 +25,7 @@ import { capitalize, get } from 'lodash';
 import { ClusterStatus } from '../cluster_status';
 // @ts-ignore
 import { EuiMonitoringTable } from '../../table';
-// @ts-ignore
-import { StatusIcon } from '../../status_icon';
+import { STATUS_ICON_TYPES } from '../../status_icon';
 // @ts-ignore
 import { formatMetric, formatNumber } from '../../../lib/format_number';
 import { getSafeForExternalLink } from '../../../lib/get_safe_for_external_link';
@@ -205,7 +204,7 @@ export const KibanaInstances: React.FC<Props> = (props: Props) => {
           _instances.push({
             kibana: {
               ...(instance as any).instance.kibana,
-              status: StatusIcon.TYPES.GRAY,
+              status: STATUS_ICON_TYPES.GRAY,
             },
           });
         }

x-pack/plugins/monitoring/public/components/kibana/status_icon.js

@@ -6,17 +6,17 @@
  */
 
 import React from 'react';
-import { StatusIcon } from '../status_icon';
+import { StatusIcon, STATUS_ICON_TYPES } from '../status_icon';
 import { i18n } from '@kbn/i18n';
 
 export function KibanaStatusIcon({ status, availability = true }) {
   const type = (() => {
     if (!availability) {
-      return StatusIcon.TYPES.GRAY;
+      return STATUS_ICON_TYPES.GRAY;
     }
 
     const statusKey = status.toUpperCase();
-    return StatusIcon.TYPES[statusKey] || StatusIcon.TYPES.YELLOW;
+    return STATUS_ICON_TYPES[statusKey] || STATUS_ICON_TYPES.YELLOW;
   })();
 
   return (

x-pack/plugins/monitoring/public/components/license/index.js → x-pack/plugins/monitoring/public/components/license/index.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { Fragment } from 'react';
+import React, { Fragment, FunctionComponent } from 'react';
 import {
   EuiPage,
   EuiPageBody,
@@ -27,7 +27,10 @@ import {
 import { FormattedMessage } from '@kbn/i18n/react';
 import { Legacy } from '../../legacy_shims';
 
-export const AddLicense = ({ uploadPath }) => {
+interface AddLicenseProps {
+  uploadPath?: string;
+}
+const AddLicense: FunctionComponent<AddLicenseProps> = ({ uploadPath }) => {
   return (
     <EuiCard
       title={
@@ -54,7 +57,14 @@ export const AddLicense = ({ uploadPath }) => {
   );
 };
 
-export class LicenseStatus extends React.PureComponent {
+export interface LicenseStatusProps {
+  isExpired: boolean;
+  status: string;
+  type: string;
+  expiryDate: string | Date;
+}
+
+class LicenseStatus extends React.PureComponent<LicenseStatusProps> {
   render() {
     const { isExpired, status, type, expiryDate } = this.props;
     const typeTitleCase = type.charAt(0).toUpperCase() + type.substr(1).toLowerCase();
@@ -133,7 +143,15 @@ export class LicenseStatus extends React.PureComponent {
   }
 }
 
-const LicenseUpdateInfoForPrimary = ({ isPrimaryCluster, uploadLicensePath }) => {
+export interface LicenseUpdateInfoProps {
+  isPrimaryCluster: boolean;
+  uploadLicensePath?: string;
+}
+
+const LicenseUpdateInfoForPrimary: FunctionComponent<LicenseUpdateInfoProps> = ({
+  isPrimaryCluster,
+  uploadLicensePath,
+}) => {
   if (!isPrimaryCluster) {
     return null;
   }
@@ -142,7 +160,9 @@ const LicenseUpdateInfoForPrimary = ({ isPrimaryCluster, uploadLicensePath }) =>
   return <AddLicense uploadPath={uploadLicensePath} />;
 };
 
-const LicenseUpdateInfoForRemote = ({ isPrimaryCluster }) => {
+const LicenseUpdateInfoForRemote: FunctionComponent<LicenseUpdateInfoProps> = ({
+  isPrimaryCluster,
+}) => {
   if (isPrimaryCluster) {
     return null;
   }
@@ -168,7 +188,8 @@ const LicenseUpdateInfoForRemote = ({ isPrimaryCluster }) => {
   );
 };
 
-export function License(props) {
+export interface LicenseProps extends LicenseStatusProps, LicenseUpdateInfoProps {}
+export const License: FunctionComponent<LicenseProps> = (props) => {
   const { status, type, isExpired, expiryDate } = props;
   const licenseManagement = `${Legacy.shims.getBasePath()}/app/management/stack/license_management`;
   return (
@@ -199,4 +220,4 @@ export function License(props) {
       </EuiPageBody>
     </EuiPage>
   );
-}
+};