From 04a4809af664033ca1da1e72716b8950adca1abb Mon Sep 17 00:00:00 2001 From: Kevin Lacabane Date: Wed, 13 Oct 2021 17:06:49 +0200 Subject: [PATCH] [Stack Monitoring ] Migrate kibana instances page to react (#113874) (#114788) * kibana instances page component * kibana instances route * extract SetupModeProps to remove duplication # Conflicts: # x-pack/plugins/monitoring/public/application/index.tsx # x-pack/plugins/monitoring/public/application/pages/cluster/overview_page.tsx # x-pack/plugins/monitoring/public/application/pages/elasticsearch/index_advanced_page.tsx # x-pack/plugins/monitoring/public/application/pages/elasticsearch/index_page.tsx # x-pack/plugins/monitoring/public/application/pages/elasticsearch/node_page.tsx # x-pack/plugins/monitoring/public/application/pages/kibana/instances.tsx # x-pack/plugins/monitoring/public/application/setup_mode/setup_mode_renderer.d.ts --- x-pack/plugins/monitoring/public/application/index.tsx | 8 ++++++++ .../public/application/pages/beats/instances.tsx | 8 +------- .../public/application/pages/cluster/overview_page.tsx | 7 +------ .../pages/elasticsearch/index_advanced_page.tsx | 8 +------- .../public/application/pages/elasticsearch/index_page.tsx | 7 +------ .../application/pages/elasticsearch/indices_page.tsx | 8 +------- .../public/application/pages/elasticsearch/node_page.tsx | 7 +------ .../public/application/pages/elasticsearch/nodes_page.tsx | 8 +------- 8 files changed, 15 insertions(+), 46 deletions(-) diff --git a/x-pack/plugins/monitoring/public/application/index.tsx b/x-pack/plugins/monitoring/public/application/index.tsx index 455b1347c010b..67b9d8873573e 100644 --- a/x-pack/plugins/monitoring/public/application/index.tsx +++ b/x-pack/plugins/monitoring/public/application/index.tsx @@ -32,6 +32,7 @@ import { import { BeatsInstancePage } from './pages/beats/instance'; import { ApmOverviewPage, ApmInstancesPage, ApmInstancePage } from './pages/apm'; import { KibanaOverviewPage } from './pages/kibana/overview'; +import { KibanaInstancesPage } from './pages/kibana/instances'; import { ElasticsearchNodesPage } from './pages/elasticsearch/nodes_page'; import { ElasticsearchIndicesPage } from './pages/elasticsearch/indices_page'; import { ElasticsearchIndexPage } from './pages/elasticsearch/index_page'; @@ -186,6 +187,13 @@ const MonitoringApp: React.FC<{ /> {/* Kibana Views */} + + = ({ clusters }) => { const globalState = useContext(GlobalStateContext); const { services } = useKibana<{ data: any }>(); diff --git a/x-pack/plugins/monitoring/public/application/pages/cluster/overview_page.tsx b/x-pack/plugins/monitoring/public/application/pages/cluster/overview_page.tsx index 0f7851ca145bf..b78df27cd12c4 100644 --- a/x-pack/plugins/monitoring/public/application/pages/cluster/overview_page.tsx +++ b/x-pack/plugins/monitoring/public/application/pages/cluster/overview_page.tsx @@ -14,7 +14,7 @@ import { GlobalStateContext } from '../../contexts/global_state_context'; import { TabMenuItem } from '../page_template'; import { Overview } from '../../../components/cluster/overview'; import { ExternalConfigContext } from '../../contexts/external_config_context'; -import { SetupModeRenderer } from '../../setup_mode/setup_mode_renderer'; +import { SetupModeRenderer, SetupModeProps } from '../../setup_mode/setup_mode_renderer'; import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context'; import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs'; import { fetchClusters } from '../../../lib/fetch_clusters'; @@ -23,11 +23,6 @@ import { fetchAlerts } from '../../../lib/fetch_alerts'; import { EnableAlertsModal } from '../../../alerts/enable_alerts_modal'; const CODE_PATHS = [CODE_PATH_ALL]; -interface SetupModeProps { - setupMode: any; - flyoutComponent: any; - bottomBarComponent: any; -} export const ClusterOverview: React.FC<{}> = () => { const state = useContext(GlobalStateContext); diff --git a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/index_advanced_page.tsx b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/index_advanced_page.tsx index e9786c0da723e..da9a1c858dfed 100644 --- a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/index_advanced_page.tsx +++ b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/index_advanced_page.tsx @@ -11,18 +11,12 @@ import { useParams } from 'react-router-dom'; import { useKibana } from '../../../../../../../src/plugins/kibana_react/public'; import { GlobalStateContext } from '../../contexts/global_state_context'; import { ComponentProps } from '../../route_init'; -import { SetupModeRenderer } from '../../setup_mode/setup_mode_renderer'; +import { SetupModeRenderer, SetupModeProps } from '../../setup_mode/setup_mode_renderer'; 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'; - -interface SetupModeProps { - setupMode: any; - flyoutComponent: any; - bottomBarComponent: any; -} import { AlertsByName } from '../../../alerts/types'; import { fetchAlerts } from '../../../lib/fetch_alerts'; import { RULE_LARGE_SHARD_SIZE } from '../../../../common/constants'; diff --git a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/index_page.tsx b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/index_page.tsx index c6049e27cf571..e067d66cfe69e 100644 --- a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/index_page.tsx +++ b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/index_page.tsx @@ -13,7 +13,7 @@ import { GlobalStateContext } from '../../contexts/global_state_context'; // @ts-ignore import { IndexReact } from '../../../components/elasticsearch/index/index_react'; import { ComponentProps } from '../../route_init'; -import { SetupModeRenderer } from '../../setup_mode/setup_mode_renderer'; +import { SetupModeRenderer, SetupModeProps } from '../../setup_mode/setup_mode_renderer'; import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context'; import { useCharts } from '../../hooks/use_charts'; import { ItemTemplate } from './item_template'; @@ -25,11 +25,6 @@ import { AlertsByName } from '../../../alerts/types'; import { fetchAlerts } from '../../../lib/fetch_alerts'; import { RULE_LARGE_SHARD_SIZE } from '../../../../common/constants'; import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs'; -interface SetupModeProps { - setupMode: any; - flyoutComponent: any; - bottomBarComponent: any; -} export const ElasticsearchIndexPage: React.FC = ({ clusters }) => { const globalState = useContext(GlobalStateContext); diff --git a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/indices_page.tsx b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/indices_page.tsx index 1ed2281e3bda6..5470c6c23b769 100644 --- a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/indices_page.tsx +++ b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/indices_page.tsx @@ -12,7 +12,7 @@ import { useKibana } from '../../../../../../../src/plugins/kibana_react/public' import { GlobalStateContext } from '../../contexts/global_state_context'; import { ElasticsearchIndices } from '../../../components/elasticsearch'; import { ComponentProps } from '../../route_init'; -import { SetupModeRenderer } from '../../setup_mode/setup_mode_renderer'; +import { SetupModeRenderer, SetupModeProps } from '../../setup_mode/setup_mode_renderer'; import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context'; import { useTable } from '../../hooks/use_table'; import { useLocalStorage } from '../../hooks/use_local_storage'; @@ -21,12 +21,6 @@ import { fetchAlerts } from '../../../lib/fetch_alerts'; import { RULE_LARGE_SHARD_SIZE } from '../../../../common/constants'; import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs'; -interface SetupModeProps { - setupMode: any; - flyoutComponent: any; - bottomBarComponent: any; -} - export const ElasticsearchIndicesPage: React.FC = ({ clusters }) => { const globalState = useContext(GlobalStateContext); const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context); diff --git a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/node_page.tsx b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/node_page.tsx index 5cf5579a2451f..4ef51beb1f169 100644 --- a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/node_page.tsx +++ b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/node_page.tsx @@ -13,7 +13,7 @@ import { useKibana } from '../../../../../../../src/plugins/kibana_react/public' import { GlobalStateContext } from '../../contexts/global_state_context'; import { NodeReact } from '../../../components/elasticsearch'; import { ComponentProps } from '../../route_init'; -import { SetupModeRenderer } from '../../setup_mode/setup_mode_renderer'; +import { SetupModeRenderer, SetupModeProps } from '../../setup_mode/setup_mode_renderer'; import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context'; import { useLocalStorage } from '../../hooks/use_local_storage'; import { useCharts } from '../../hooks/use_charts'; @@ -31,11 +31,6 @@ import { RULE_MEMORY_USAGE, } from '../../../../common/constants'; import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs'; -interface SetupModeProps { - setupMode: any; - flyoutComponent: any; - bottomBarComponent: any; -} export const ElasticsearchNodePage: React.FC = ({ clusters }) => { const globalState = useContext(GlobalStateContext); diff --git a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/nodes_page.tsx b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/nodes_page.tsx index c105c93cd8d3a..06c4cf20b8820 100644 --- a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/nodes_page.tsx +++ b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/nodes_page.tsx @@ -13,7 +13,7 @@ import { GlobalStateContext } from '../../contexts/global_state_context'; import { ExternalConfigContext } from '../../contexts/external_config_context'; import { ElasticsearchNodes } from '../../../components/elasticsearch'; import { ComponentProps } from '../../route_init'; -import { SetupModeRenderer } from '../../setup_mode/setup_mode_renderer'; +import { SetupModeRenderer, SetupModeProps } from '../../setup_mode/setup_mode_renderer'; import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context'; import { useTable } from '../../hooks/use_table'; import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs'; @@ -28,12 +28,6 @@ import { RULE_MISSING_MONITORING_DATA, } from '../../../../common/constants'; -interface SetupModeProps { - setupMode: any; - flyoutComponent: any; - bottomBarComponent: any; -} - export const ElasticsearchNodesPage: React.FC = ({ clusters }) => { const globalState = useContext(GlobalStateContext); const { showCgroupMetricsElasticsearch } = useContext(ExternalConfigContext);