From 71fae6e3d9be0d100b2621f846037158f2b7548e Mon Sep 17 00:00:00 2001 From: Carlos Crespo Date: Thu, 20 Jul 2023 13:48:26 +0200 Subject: [PATCH] [Infra UI][Stack Monitoring] Migrate EuiPage*_Depracated usage (#161870) closes [#161404](https://github.com/elastic/kibana/issues/161404) ## Summary This PR replaces the usage of `EuiPage*_Depracated` with their equivalent components Some usages of `EuiPageContent_Deprecated` have been replaced with `EuiPanel` because they were displayed as panels, and the recommended `EuiPageSection` component did not render in the same manner. e.g: image code: https://github.com/elastic/kibana/pull/161870/files#diff-72520cac696197524aff32e2b92a0acabe1898067c6985786fa5ac250a40ac1cR122 ### How to test - Start a local Kibana with metricbeat monitoring Beats, Kibana, Elasticsearch and Logstash - Navigate to Stack Monitoring and click through the links - Compare the UI (loading and error states included) with what's currently in https://edge-oblt.kb.us-west2.gcp.elastic-cloud.com/ - Navigate to Infra UI and go to node details - Compare the UI (loading and error states included) with what's currently in https://edge-oblt.kb.us-west2.gcp.elastic-cloud.com/ --------- Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- x-pack/plugins/infra/public/pages/error.tsx | 58 ++-- .../indices_configuration_panel.stories.tsx | 12 +- .../components/chart_section_vis.tsx | 7 +- .../components/gauges_section_vis.tsx | 6 +- .../components/layout_content.tsx | 13 - .../components/layouts/aws_ec2_layout.tsx | 6 +- .../components/layouts/aws_rds_layout.tsx | 328 +++++++++--------- .../components/layouts/aws_s3_layout.tsx | 254 +++++++------- .../components/layouts/aws_sqs_layout.tsx | 254 +++++++------- .../components/layouts/container_layout.tsx | 6 +- .../components/layouts/host_layout.tsx | 6 +- .../components/layouts/pod_layout.tsx | 6 +- .../metric_detail/components/side_nav.tsx | 11 +- .../application/pages/kibana/instance.tsx | 14 +- .../application/pages/kibana/overview.tsx | 14 +- .../application/pages/logstash/advanced.tsx | 6 +- .../application/pages/logstash/node.tsx | 6 +- .../application/pages/page_template.tsx | 94 +++-- .../public/components/apm/apm_metrics.tsx | 5 +- .../components/apm/instances/instances.tsx | 5 +- .../public/components/beats/beat/beat.js | 6 +- .../components/beats/listing/listing.js | 5 +- .../__snapshots__/overview.test.js.snap | 8 +- .../components/beats/overview/overview.js | 5 +- .../components/cluster/listing/listing.js | 6 +- .../ccr/__snapshots__/ccr.test.js.snap | 246 +++++++------ .../components/elasticsearch/ccr/ccr.js | 7 +- .../elasticsearch/index/advanced.js | 5 +- .../components/elasticsearch/index/index.js | 14 +- .../elasticsearch/indices/indices.js | 5 +- .../elasticsearch/ml_jobs/ml_jobs.tsx | 5 +- .../components/elasticsearch/node/advanced.js | 6 +- .../components/elasticsearch/node/node.js | 6 +- .../components/elasticsearch/nodes/nodes.js | 5 +- .../elasticsearch/overview/overview.js | 14 +- .../enterprise_search/overview/overview.tsx | 18 +- .../components/kibana/instances/instances.tsx | 5 +- .../components/logstash/listing/listing.js | 5 +- .../components/logstash/overview/overview.js | 5 +- .../pipeline_listing/pipeline_listing.js | 5 +- .../pipeline_viewer.test.js.snap | 14 +- .../pipeline_viewer/views/pipeline_viewer.js | 16 +- .../__snapshots__/no_data.test.js.snap | 304 +++++++++------- .../public/components/no_data/no_data.js | 205 ++++++----- .../__snapshots__/page_loading.test.js.snap | 27 +- .../public/components/page_loading/index.tsx | 37 +- .../components/page_loading/page_loading.scss | 5 - 47 files changed, 1007 insertions(+), 1093 deletions(-) delete mode 100644 x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layout_content.tsx delete mode 100644 x-pack/plugins/monitoring/public/components/page_loading/page_loading.scss diff --git a/x-pack/plugins/infra/public/pages/error.tsx b/x-pack/plugins/infra/public/pages/error.tsx index 4275db30bfad4..fa89fa3b929b3 100644 --- a/x-pack/plugins/infra/public/pages/error.tsx +++ b/x-pack/plugins/infra/public/pages/error.tsx @@ -5,15 +5,7 @@ * 2.0. */ -import { - EuiCallOut, - EuiPage, - EuiPageBody, - EuiPageContent_Deprecated as EuiPageContent, - EuiPageHeader, - EuiPageHeaderSection, - EuiTitle, -} from '@elastic/eui'; +import { EuiCallOut, EuiTitle, EuiPageTemplate } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import React from 'react'; @@ -41,31 +33,27 @@ export const Error: React.FC = ({ message }) => { export const ErrorPageBody: React.FC<{ message: string }> = ({ message }) => { return ( - - - - - -

- -

- - - - - -

- -

- - - - + + + +

+ +

+ + + + +

+ +

+ + + ); }; diff --git a/x-pack/plugins/infra/public/pages/logs/settings/indices_configuration_panel.stories.tsx b/x-pack/plugins/infra/public/pages/logs/settings/indices_configuration_panel.stories.tsx index f37f71abd6bc4..4c4638d495a31 100644 --- a/x-pack/plugins/infra/public/pages/logs/settings/indices_configuration_panel.stories.tsx +++ b/x-pack/plugins/infra/public/pages/logs/settings/indices_configuration_panel.stories.tsx @@ -5,13 +5,7 @@ * 2.0. */ -import { - EuiCodeBlock, - EuiPage, - EuiPageBody, - EuiPageContent_Deprecated as EuiPageContent, - PropsOf, -} from '@elastic/eui'; +import { EuiCodeBlock, EuiPage, EuiPageBody, EuiPanel, PropsOf } from '@elastic/eui'; import { I18nProvider } from '@kbn/i18n-react'; import { Meta, Story } from '@storybook/react/types-6-0'; import React from 'react'; @@ -36,9 +30,9 @@ export default { > - + - + diff --git a/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/chart_section_vis.tsx b/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/chart_section_vis.tsx index b5a58fbd76668..91c8149bb9d98 100644 --- a/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/chart_section_vis.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/chart_section_vis.tsx @@ -18,9 +18,8 @@ import { TooltipProps, Tooltip, } from '@elastic/charts'; -import { EuiPageContentBody_Deprecated as EuiPageContentBody } from '@elastic/eui'; +import { EuiPageSection } from '@elastic/eui'; import { useTimelineChartTheme } from '../../../../utils/use_timeline_chart_theme'; - import { SeriesChart } from './series_chart'; import { getFormatter, @@ -111,7 +110,7 @@ export const ChartSectionVis = ({ } return ( - +
- + ); }; diff --git a/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/gauges_section_vis.tsx b/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/gauges_section_vis.tsx index e2cf7ff49ae10..6faa13f31fc80 100644 --- a/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/gauges_section_vis.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/gauges_section_vis.tsx @@ -7,7 +7,7 @@ import { EuiFlexItem, - EuiPageContentBody_Deprecated as EuiPageContentBody, + EuiPageSection, EuiPanel, EuiProgress, EuiSpacer, @@ -54,7 +54,7 @@ export const GaugesSectionVis = ({ return null; } return ( - + {metric.series.map((series) => { @@ -93,7 +93,7 @@ export const GaugesSectionVis = ({ })} - + ); }; diff --git a/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layout_content.tsx b/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layout_content.tsx deleted file mode 100644 index 4506d18752ad8..0000000000000 --- a/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layout_content.tsx +++ /dev/null @@ -1,13 +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. - */ - -import { EuiPageContent_Deprecated as EuiPageContent } from '@elastic/eui'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; - -export const LayoutContent = euiStyled(EuiPageContent)` - position: relative; -`; diff --git a/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/aws_ec2_layout.tsx b/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/aws_ec2_layout.tsx index f74ea58ae7edd..99b0169b74f06 100644 --- a/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/aws_ec2_layout.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/aws_ec2_layout.tsx @@ -5,12 +5,12 @@ * 2.0. */ +import { EuiPanel } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { withTheme } from '@kbn/kibana-react-plugin/common'; import React from 'react'; import type { LayoutPropsWithTheme } from '../../types'; import { ChartSectionVis } from '../chart_section_vis'; -import { LayoutContent } from '../layout_content'; import { MetadataDetails } from '../metadata_details'; import { Section } from '../section'; import { SubSection } from '../sub_section'; @@ -28,7 +28,7 @@ export const AwsEC2Layout = withTheme( 'cloud.project.id', ]} /> - +
- + ) ); diff --git a/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/aws_rds_layout.tsx b/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/aws_rds_layout.tsx index dfe1065633ca6..6415a55e7ed45 100644 --- a/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/aws_rds_layout.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/aws_rds_layout.tsx @@ -5,184 +5,182 @@ * 2.0. */ +import { EuiPanel } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { withTheme } from '@kbn/kibana-react-plugin/common'; import React from 'react'; import type { LayoutPropsWithTheme } from '../../types'; import { ChartSectionVis } from '../chart_section_vis'; -import { LayoutContent } from '../layout_content'; import { Section } from '../section'; import { SubSection } from '../sub_section'; export const AwsRDSLayout = withTheme( ({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => ( - - -
+
+ - - - - - - - - - - - - - - - -
- - + + + + + + + + + + + + + + +
+ ) ); diff --git a/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/aws_s3_layout.tsx b/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/aws_s3_layout.tsx index c64ed222c8f28..bf3798e6ed77d 100644 --- a/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/aws_s3_layout.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/aws_s3_layout.tsx @@ -8,144 +8,142 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; import { withTheme } from '@kbn/kibana-react-plugin/common'; +import { EuiPanel } from '@elastic/eui'; import type { LayoutPropsWithTheme } from '../../types'; import { Section } from '../section'; import { SubSection } from '../sub_section'; import { ChartSectionVis } from '../chart_section_vis'; -import { LayoutContent } from '../layout_content'; export const AwsS3Layout = withTheme( ({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => ( - - -
+
+ - - - - - - - - - - - - - - - -
- - + + + + + + + + + + + + + + +
+ ) ); diff --git a/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/aws_sqs_layout.tsx b/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/aws_sqs_layout.tsx index 303bd38765ef4..6c4ff360bc853 100644 --- a/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/aws_sqs_layout.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/aws_sqs_layout.tsx @@ -5,147 +5,145 @@ * 2.0. */ +import { EuiPanel } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { withTheme } from '@kbn/kibana-react-plugin/common'; import React from 'react'; import type { LayoutPropsWithTheme } from '../../types'; import { ChartSectionVis } from '../chart_section_vis'; -import { LayoutContent } from '../layout_content'; import { Section } from '../section'; import { SubSection } from '../sub_section'; export const AwsSQSLayout = withTheme( ({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => ( - - -
+
+ - - - - - - - - - - - - - - - -
- - + + + + + + + + + + + + + + +
+ ) ); diff --git a/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/container_layout.tsx b/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/container_layout.tsx index 904d42cc1d2f2..b614f38d65ecc 100644 --- a/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/container_layout.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/container_layout.tsx @@ -5,13 +5,13 @@ * 2.0. */ +import { EuiPanel } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { withTheme } from '@kbn/kibana-react-plugin/common'; import React from 'react'; import type { LayoutPropsWithTheme } from '../../types'; import { ChartSectionVis } from '../chart_section_vis'; import { GaugesSectionVis } from '../gauges_section_vis'; -import { LayoutContent } from '../layout_content'; import { MetadataDetails } from '../metadata_details'; import { Section } from '../section'; import { SubSection } from '../sub_section'; @@ -20,7 +20,7 @@ export const ContainerLayout = withTheme( ({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => ( - +
- + ) ); diff --git a/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/host_layout.tsx b/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/host_layout.tsx index f9bf9b5f92408..41e0204bc7b29 100644 --- a/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/host_layout.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/host_layout.tsx @@ -5,13 +5,13 @@ * 2.0. */ +import { EuiPanel } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { withTheme } from '@kbn/kibana-react-plugin/common'; import React from 'react'; import type { LayoutPropsWithTheme } from '../../types'; import { ChartSectionVis } from '../chart_section_vis'; import { GaugesSectionVis } from '../gauges_section_vis'; -import { LayoutContent } from '../layout_content'; import { MetadataDetails } from '../metadata_details'; import { Section } from '../section'; import { SubSection } from '../sub_section'; @@ -35,7 +35,7 @@ export const HostLayout = withTheme( 'cloud.instance.name', ]} /> - +
- + ) ); diff --git a/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/pod_layout.tsx b/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/pod_layout.tsx index 766843abc3b48..f35f606db7452 100644 --- a/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/pod_layout.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/pod_layout.tsx @@ -5,13 +5,13 @@ * 2.0. */ +import { EuiPanel } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { withTheme } from '@kbn/kibana-react-plugin/common'; import React from 'react'; import type { LayoutPropsWithTheme } from '../../types'; import { ChartSectionVis } from '../chart_section_vis'; import { GaugesSectionVis } from '../gauges_section_vis'; -import { LayoutContent } from '../layout_content'; import { MetadataDetails } from '../metadata_details'; import { Section } from '../section'; import { SubSection } from '../sub_section'; @@ -21,7 +21,7 @@ export const PodLayout = withTheme( ({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => ( - +
- + ) ); diff --git a/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/side_nav.tsx b/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/side_nav.tsx index bf6288b315afe..c4445984de9a3 100644 --- a/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/side_nav.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/side_nav.tsx @@ -5,12 +5,7 @@ * 2.0. */ -import { - EuiHideFor, - EuiPageSideBar_Deprecated as EuiPageSideBar, - EuiShowFor, - EuiSideNav, -} from '@elastic/eui'; +import { EuiHideFor, EuiPageSidebar, EuiShowFor, EuiSideNav } from '@elastic/eui'; import React, { useState, useCallback } from 'react'; import { NavItem } from '../lib/side_nav_context'; interface Props { @@ -39,10 +34,10 @@ export const MetricsSideNav = ({ loading, name, items }: Props) => { return ( <> - {content} + {content} - {mobileContent} + {mobileContent} ); diff --git a/x-pack/plugins/monitoring/public/application/pages/kibana/instance.tsx b/x-pack/plugins/monitoring/public/application/pages/kibana/instance.tsx index 9398196d6f3e0..85871e4e0164f 100644 --- a/x-pack/plugins/monitoring/public/application/pages/kibana/instance.tsx +++ b/x-pack/plugins/monitoring/public/application/pages/kibana/instance.tsx @@ -9,15 +9,7 @@ import React, { useContext, useState, useCallback, useEffect } from 'react'; import { useParams } from 'react-router-dom'; import { i18n } from '@kbn/i18n'; import { find } from 'lodash'; -import { - EuiPage, - EuiPageBody, - EuiPageContent_Deprecated as EuiPageContent, - EuiSpacer, - EuiFlexGrid, - EuiFlexItem, - EuiPanel, -} from '@elastic/eui'; +import { EuiPage, EuiPageBody, EuiPanel, EuiSpacer, EuiFlexGrid, EuiFlexItem } from '@elastic/eui'; import { useKibana } from '@kbn/kibana-react-plugin/public'; import { ComponentProps } from '../../route_init'; import { GlobalStateContext } from '../../contexts/global_state_context'; @@ -47,7 +39,7 @@ const KibanaInstance = ({ data, alerts }: { data: any; alerts: any }) => { - + { )} - + ); diff --git a/x-pack/plugins/monitoring/public/application/pages/kibana/overview.tsx b/x-pack/plugins/monitoring/public/application/pages/kibana/overview.tsx index d0fb91ab98e0c..8fae469060097 100644 --- a/x-pack/plugins/monitoring/public/application/pages/kibana/overview.tsx +++ b/x-pack/plugins/monitoring/public/application/pages/kibana/overview.tsx @@ -7,15 +7,7 @@ import React, { useCallback, useContext, useEffect, useState } from 'react'; import { i18n } from '@kbn/i18n'; import { find } from 'lodash'; -import { - EuiPage, - EuiPageBody, - EuiPageContent_Deprecated as EuiPageContent, - EuiPanel, - EuiSpacer, - EuiFlexGroup, - EuiFlexItem, -} from '@elastic/eui'; +import { EuiPage, EuiPageBody, EuiPanel, EuiSpacer, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { useKibana } from '@kbn/kibana-react-plugin/public'; import { KibanaTemplate } from './kibana_template'; @@ -43,7 +35,7 @@ const KibanaOverview = ({ data }: { data: any }) => { - + { )} - + ); diff --git a/x-pack/plugins/monitoring/public/application/pages/logstash/advanced.tsx b/x-pack/plugins/monitoring/public/application/pages/logstash/advanced.tsx index 748cc03e8ab36..fcc73ee146968 100644 --- a/x-pack/plugins/monitoring/public/application/pages/logstash/advanced.tsx +++ b/x-pack/plugins/monitoring/public/application/pages/logstash/advanced.tsx @@ -12,7 +12,7 @@ import { EuiPageBody, EuiPanel, EuiSpacer, - EuiPageContent_Deprecated as EuiPageContent, + EuiPageSection, EuiFlexGrid, EuiFlexItem, } from '@elastic/eui'; @@ -130,7 +130,7 @@ export const LogStashNodeAdvancedPage: React.FC = ({ clusters }) {data.nodeSummary && } - + {metricsToShow.map((metric, index) => ( @@ -144,7 +144,7 @@ export const LogStashNodeAdvancedPage: React.FC = ({ clusters }) ))} - + diff --git a/x-pack/plugins/monitoring/public/application/pages/logstash/node.tsx b/x-pack/plugins/monitoring/public/application/pages/logstash/node.tsx index 97f0f8c266a16..4bb0412a9f9b2 100644 --- a/x-pack/plugins/monitoring/public/application/pages/logstash/node.tsx +++ b/x-pack/plugins/monitoring/public/application/pages/logstash/node.tsx @@ -13,7 +13,7 @@ import { EuiPageBody, EuiPanel, EuiSpacer, - EuiPageContent_Deprecated as EuiPageContent, + EuiPageSection, EuiFlexGrid, EuiFlexItem, } from '@elastic/eui'; @@ -122,7 +122,7 @@ export const LogStashNodePage: React.FC = ({ clusters }) => { {data.nodeSummary && } - + {metricsToShow.map((metric, index) => ( @@ -136,7 +136,7 @@ export const LogStashNodePage: React.FC = ({ clusters }) => { ))} - + diff --git a/x-pack/plugins/monitoring/public/application/pages/page_template.tsx b/x-pack/plugins/monitoring/public/application/pages/page_template.tsx index b625cf14e3825..d1feae38a05ce 100644 --- a/x-pack/plugins/monitoring/public/application/pages/page_template.tsx +++ b/x-pack/plugins/monitoring/public/application/pages/page_template.tsx @@ -5,15 +5,7 @@ * 2.0. */ -import { - EuiPage, - EuiPageContent_Deprecated as EuiPageContent, - EuiPageBody, - EuiPageContentBody_Deprecated as EuiPageContentBody, - EuiTab, - EuiTabs, - EuiSpacer, -} from '@elastic/eui'; +import { EuiPage, EuiPageBody, EuiPageTemplate, EuiTab, EuiTabs, EuiSpacer } from '@elastic/eui'; import React, { useContext, useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; import type { IHttpFetchError, ResponseErrorBody } from '@kbn/core-http-browser'; @@ -119,47 +111,49 @@ export const PageTemplate: React.FC = ({ const { supported, enabled } = getSetupModeState(); return ( - - - - {setHeaderActionMenu && theme$ && ( - - {supported && ( - - )} - - - )} - - - {tabs && ( - - {tabs.map((item, idx) => { - return ( - - {item.label} - - ); - })} - - )} - - - {renderContent()} - - - - - + + + {setHeaderActionMenu && theme$ && ( + + {supported && ( + + )} + + + )} + + + {tabs && ( + + {tabs.map((item, idx) => { + return ( + + {item.label} + + ); + })} + + )} + + + {renderContent()} + + + ); }; diff --git a/x-pack/plugins/monitoring/public/components/apm/apm_metrics.tsx b/x-pack/plugins/monitoring/public/components/apm/apm_metrics.tsx index 7ce299ca34092..660e587992884 100644 --- a/x-pack/plugins/monitoring/public/components/apm/apm_metrics.tsx +++ b/x-pack/plugins/monitoring/public/components/apm/apm_metrics.tsx @@ -14,7 +14,6 @@ import { EuiPage, EuiPageBody, EuiFlexGroup, - EuiPageContent_Deprecated as EuiPageContent, EuiScreenReaderOnly, EuiTitle, } from '@elastic/eui'; @@ -117,13 +116,13 @@ export const ApmMetrics = ({ {createCharts(topSeries, props)} - +

{title}

 {createCharts(seriesToShow, props)} - + ); diff --git a/x-pack/plugins/monitoring/public/components/apm/instances/instances.tsx b/x-pack/plugins/monitoring/public/components/apm/instances/instances.tsx index ae511d8802673..30d4ea223a64f 100644 --- a/x-pack/plugins/monitoring/public/components/apm/instances/instances.tsx +++ b/x-pack/plugins/monitoring/public/components/apm/instances/instances.tsx @@ -12,7 +12,6 @@ import { EuiLink, EuiPage, EuiPageBody, - EuiPageContent_Deprecated as EuiPageContent, EuiSpacer, EuiScreenReaderOnly, EuiPanel, @@ -185,7 +184,7 @@ export function ApmServerInstances({ apms, setupMode, alerts }: Props) { - + {setupModeCallout} - + ); diff --git a/x-pack/plugins/monitoring/public/components/beats/beat/beat.js b/x-pack/plugins/monitoring/public/components/beats/beat/beat.js index 71048caf56bf0..4971762d3e3c2 100644 --- a/x-pack/plugins/monitoring/public/components/beats/beat/beat.js +++ b/x-pack/plugins/monitoring/public/components/beats/beat/beat.js @@ -14,7 +14,6 @@ import { EuiPageBody, EuiFlexGrid, EuiSpacer, - EuiPageContent_Deprecated as EuiPageContent, EuiPanel, EuiScreenReaderOnly, } from '@elastic/eui'; @@ -141,7 +140,8 @@ export function Beat({ summary, metrics, ...props }) { - + +

@@ -155,7 +155,7 @@ export function Beat({ summary, metrics, ...props }) { ))} - + ); diff --git a/x-pack/plugins/monitoring/public/components/beats/listing/listing.js b/x-pack/plugins/monitoring/public/components/beats/listing/listing.js index 30601dc78d100..28c5f621e1d90 100644 --- a/x-pack/plugins/monitoring/public/components/beats/listing/listing.js +++ b/x-pack/plugins/monitoring/public/components/beats/listing/listing.js @@ -10,7 +10,6 @@ import { uniq, get } from 'lodash'; import { EuiPage, EuiPageBody, - EuiPageContent_Deprecated as EuiPageContent, EuiSpacer, EuiLink, EuiScreenReaderOnly, @@ -159,7 +158,7 @@ export class Listing extends PureComponent { - + {setupModeCallOut} - + ); diff --git a/x-pack/plugins/monitoring/public/components/beats/overview/__snapshots__/overview.test.js.snap b/x-pack/plugins/monitoring/public/components/beats/overview/__snapshots__/overview.test.js.snap index 15240e2cc1d31..c259bfb609465 100644 --- a/x-pack/plugins/monitoring/public/components/beats/overview/__snapshots__/overview.test.js.snap +++ b/x-pack/plugins/monitoring/public/components/beats/overview/__snapshots__/overview.test.js.snap @@ -135,7 +135,7 @@ exports[`Overview that overview page renders normally 1`] = ` - + @@ -196,7 +196,7 @@ exports[`Overview that overview page renders normally 1`] = ` - + `; @@ -231,7 +231,7 @@ exports[`Overview that overview page shows a message if there is no beats data 1 - + @@ -292,7 +292,7 @@ exports[`Overview that overview page shows a message if there is no beats data 1 - + `; diff --git a/x-pack/plugins/monitoring/public/components/beats/overview/overview.js b/x-pack/plugins/monitoring/public/components/beats/overview/overview.js index 832a8c57626be..9dca82700bce8 100644 --- a/x-pack/plugins/monitoring/public/components/beats/overview/overview.js +++ b/x-pack/plugins/monitoring/public/components/beats/overview/overview.js @@ -20,7 +20,6 @@ import { EuiFlexItem, EuiPageBody, EuiPanel, - EuiPageContent_Deprecated as EuiPageContent, EuiScreenReaderOnly, } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; @@ -120,9 +119,9 @@ export function BeatsOverview({ {renderLatestActive(latestActive, latestTypes, latestVersions)} - + {charts} - + ); diff --git a/x-pack/plugins/monitoring/public/components/cluster/listing/listing.js b/x-pack/plugins/monitoring/public/components/cluster/listing/listing.js index 4df463d5ef383..d4bc3e3529610 100644 --- a/x-pack/plugins/monitoring/public/components/cluster/listing/listing.js +++ b/x-pack/plugins/monitoring/public/components/cluster/listing/listing.js @@ -15,7 +15,7 @@ import { EuiLink, EuiPage, EuiPageBody, - EuiPageContent_Deprecated as EuiPageContent, + EuiPanel, EuiCallOut, EuiSpacer, EuiIcon, @@ -421,7 +421,7 @@ export const Listing = ({ angular, clusters, sorting, pagination, onTableChange return ( - + {hasStandaloneCluster ? ( ) : null} @@ -457,7 +457,7 @@ export const Listing = ({ angular, clusters, sorting, pagination, onTableChange defaultFields: ['cluster_name'], }} /> - + ); diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/ccr/__snapshots__/ccr.test.js.snap b/x-pack/plugins/monitoring/public/components/elasticsearch/ccr/__snapshots__/ccr.test.js.snap index 4348c5cda4a64..e12e6f17e80a8 100644 --- a/x-pack/plugins/monitoring/public/components/elasticsearch/ccr/__snapshots__/ccr.test.js.snap +++ b/x-pack/plugins/monitoring/public/components/elasticsearch/ccr/__snapshots__/ccr.test.js.snap @@ -12,135 +12,133 @@ exports[`Ccr that it renders normally 1`] = ` />

- - - + - - + } + tableLayout="fixed" + /> + `; diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/ccr/ccr.js b/x-pack/plugins/monitoring/public/components/elasticsearch/ccr/ccr.js index d98e3a2c249a8..18474238d468d 100644 --- a/x-pack/plugins/monitoring/public/components/elasticsearch/ccr/ccr.js +++ b/x-pack/plugins/monitoring/public/components/elasticsearch/ccr/ccr.js @@ -11,8 +11,7 @@ import { EuiLink, EuiPage, EuiPageBody, - EuiPageContent_Deprecated as EuiPageContent, - EuiPageContentBody_Deprecated as EuiPageContentBody, + EuiPanel, EuiIcon, EuiIconTip, EuiTextColor, @@ -312,9 +311,7 @@ export const Ccr = (props) => { /> - - {renderTable()} - + {renderTable()} ); diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/index/advanced.js b/x-pack/plugins/monitoring/public/components/elasticsearch/index/advanced.js index 4bd21b4045e85..f8867e5555caf 100644 --- a/x-pack/plugins/monitoring/public/components/elasticsearch/index/advanced.js +++ b/x-pack/plugins/monitoring/public/components/elasticsearch/index/advanced.js @@ -8,7 +8,6 @@ import React from 'react'; import { EuiPage, - EuiPageContent_Deprecated as EuiPageContent, EuiPageBody, EuiPanel, EuiSpacer, @@ -51,7 +50,7 @@ export const AdvancedIndex = ({ indexSummary, metrics, alerts, ...props }) => { - + {metricsToShow.map((metric, index) => ( @@ -60,7 +59,7 @@ export const AdvancedIndex = ({ indexSummary, metrics, alerts, ...props }) => { ))} - + ); diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/index/index.js b/x-pack/plugins/monitoring/public/components/elasticsearch/index/index.js index 4e90c0ccae001..bd935801ace1f 100644 --- a/x-pack/plugins/monitoring/public/components/elasticsearch/index/index.js +++ b/x-pack/plugins/monitoring/public/components/elasticsearch/index/index.js @@ -6,15 +6,7 @@ */ import React from 'react'; -import { - EuiPage, - EuiPageContent_Deprecated as EuiPageContent, - EuiPageBody, - EuiPanel, - EuiSpacer, - EuiFlexGrid, - EuiFlexItem, -} from '@elastic/eui'; +import { EuiPage, EuiPageBody, EuiPanel, EuiSpacer, EuiFlexGrid, EuiFlexItem } from '@elastic/eui'; import { IndexDetailStatus } from '../index_detail_status'; import { MonitoringTimeseriesContainer } from '../../chart'; import { ShardAllocation } from '../shard_allocation/shard_allocation'; @@ -47,7 +39,7 @@ export const Index = ({ - + {metricsToShow.map((metric, index) => ( @@ -62,7 +54,7 @@ export const Index = ({ - + ); diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/indices/indices.js b/x-pack/plugins/monitoring/public/components/elasticsearch/indices/indices.js index 919f697f140b0..8ad73c88046f3 100644 --- a/x-pack/plugins/monitoring/public/components/elasticsearch/indices/indices.js +++ b/x-pack/plugins/monitoring/public/components/elasticsearch/indices/indices.js @@ -16,7 +16,6 @@ import { EuiMonitoringTable } from '../../table'; import { EuiLink, EuiPage, - EuiPageContent_Deprecated as EuiPageContent, EuiPageBody, EuiPanel, EuiSwitch, @@ -171,7 +170,7 @@ export const ElasticsearchIndices = ({ - + - + ); diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/ml_jobs/ml_jobs.tsx b/x-pack/plugins/monitoring/public/components/elasticsearch/ml_jobs/ml_jobs.tsx index 3b50818619e7d..c204d646e4c1d 100644 --- a/x-pack/plugins/monitoring/public/components/elasticsearch/ml_jobs/ml_jobs.tsx +++ b/x-pack/plugins/monitoring/public/components/elasticsearch/ml_jobs/ml_jobs.tsx @@ -11,7 +11,6 @@ import React from 'react'; import { EuiLink, EuiPage, - EuiPageContent_Deprecated as EuiPageContent, EuiPageBody, EuiPanel, EuiSpacer, @@ -52,7 +51,7 @@ export const ElasticsearchMLJobs = ({ - + - + ); diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/node/advanced.js b/x-pack/plugins/monitoring/public/components/elasticsearch/node/advanced.js index a6e4d16d9b909..c1ace7168447d 100644 --- a/x-pack/plugins/monitoring/public/components/elasticsearch/node/advanced.js +++ b/x-pack/plugins/monitoring/public/components/elasticsearch/node/advanced.js @@ -8,7 +8,7 @@ import React from 'react'; import { EuiPage, - EuiPageContent_Deprecated as EuiPageContent, + EuiPageSection, EuiPageBody, EuiPanel, EuiSpacer, @@ -54,7 +54,7 @@ export const AdvancedNode = ({ nodeSummary, metrics, alerts, ...props }) => { - + {metricsToShow.map((metric, index) => ( @@ -63,7 +63,7 @@ export const AdvancedNode = ({ nodeSummary, metrics, alerts, ...props }) => { ))} - + ); diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/node/node.js b/x-pack/plugins/monitoring/public/components/elasticsearch/node/node.js index 9c465ca401499..5f2abd5b585ec 100644 --- a/x-pack/plugins/monitoring/public/components/elasticsearch/node/node.js +++ b/x-pack/plugins/monitoring/public/components/elasticsearch/node/node.js @@ -8,7 +8,7 @@ import React from 'react'; import { EuiPage, - EuiPageContent_Deprecated as EuiPageContent, + EuiPageSection, EuiPageBody, EuiSpacer, EuiFlexGrid, @@ -66,7 +66,7 @@ export const Node = ({ nodeSummary, metrics, logs, alerts, nodeId, clusterUuid, - + {metricsToShow.map((metric, index) => ( @@ -75,7 +75,7 @@ export const Node = ({ nodeSummary, metrics, logs, alerts, nodeId, clusterUuid, ))} - + diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/nodes.js b/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/nodes.js index 5bd4c532db225..5a407d09230e1 100644 --- a/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/nodes.js +++ b/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/nodes.js @@ -15,7 +15,6 @@ import { EuiLink, EuiPage, EuiPageBody, - EuiPageContent_Deprecated as EuiPageContent, EuiPanel, EuiScreenReaderOnly, EuiSpacer, @@ -501,7 +500,7 @@ export function ElasticsearchNodes({ clusterStatus, showCgroupMetricsElasticsear {renderClusterStatus()} {setupModeCallout} - + - + ); diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/overview/overview.js b/x-pack/plugins/monitoring/public/components/elasticsearch/overview/overview.js index c24cb06718617..968262546e7c1 100644 --- a/x-pack/plugins/monitoring/public/components/elasticsearch/overview/overview.js +++ b/x-pack/plugins/monitoring/public/components/elasticsearch/overview/overview.js @@ -9,15 +9,7 @@ import React from 'react'; import { ClusterStatus } from '../cluster_status'; import { ShardActivity } from '../shard_activity'; import { MonitoringTimeseriesContainer } from '../../chart'; -import { - EuiPage, - EuiFlexGrid, - EuiFlexItem, - EuiPanel, - EuiSpacer, - EuiPageBody, - EuiPageContent_Deprecated as EuiPageContent, -} from '@elastic/eui'; +import { EuiPage, EuiFlexGrid, EuiFlexItem, EuiPanel, EuiSpacer, EuiPageBody } from '@elastic/eui'; import { Logs } from '../../logs/logs'; export function ElasticsearchOverview({ @@ -42,7 +34,7 @@ export function ElasticsearchOverview({ - + {metricsToShow.map((metric, index) => ( @@ -51,7 +43,7 @@ export function ElasticsearchOverview({ ))} - + diff --git a/x-pack/plugins/monitoring/public/components/enterprise_search/overview/overview.tsx b/x-pack/plugins/monitoring/public/components/enterprise_search/overview/overview.tsx index 777be3e2f9bf1..5c034b5ba3ad0 100644 --- a/x-pack/plugins/monitoring/public/components/enterprise_search/overview/overview.tsx +++ b/x-pack/plugins/monitoring/public/components/enterprise_search/overview/overview.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { EuiPage, EuiPageBody, - EuiPageContent_Deprecated as EuiPageContent, + EuiPageSection, EuiScreenReaderOnly, EuiPanel, EuiSpacer, @@ -59,7 +59,7 @@ export const EnterpriseSearchOverview: React.FC = ({ metrics, stats, ...res - +

= ({ metrics, stats, ...res ))} - + - +

= ({ metrics, stats, ...res ))} - + - +

= ({ metrics, stats, ...res ))} - + - +

= ({ metrics, stats, ...res ))} - + ); diff --git a/x-pack/plugins/monitoring/public/components/kibana/instances/instances.tsx b/x-pack/plugins/monitoring/public/components/kibana/instances/instances.tsx index 86034f150ad5b..1daebd5898e0a 100644 --- a/x-pack/plugins/monitoring/public/components/kibana/instances/instances.tsx +++ b/x-pack/plugins/monitoring/public/components/kibana/instances/instances.tsx @@ -12,7 +12,6 @@ import { EuiLink, EuiPage, EuiPageBody, - EuiPageContent_Deprecated as EuiPageContent, EuiPanel, EuiScreenReaderOnly, EuiSpacer, @@ -318,7 +317,7 @@ export const KibanaInstances: React.FC = (props: Props) => { {setupModeCallOut} - + = (props: Props) => { defaultFields: ['name'], }} /> - + ); diff --git a/x-pack/plugins/monitoring/public/components/logstash/listing/listing.js b/x-pack/plugins/monitoring/public/components/logstash/listing/listing.js index 0df04b45c0619..c9cc18e2ea096 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/listing/listing.js +++ b/x-pack/plugins/monitoring/public/components/logstash/listing/listing.js @@ -11,7 +11,6 @@ import { EuiPage, EuiLink, EuiPageBody, - EuiPageContent_Deprecated as EuiPageContent, EuiPanel, EuiSpacer, EuiScreenReaderOnly, @@ -201,7 +200,7 @@ export class Listing extends PureComponent { {setupModeCallOut} - + - + ); diff --git a/x-pack/plugins/monitoring/public/components/logstash/overview/overview.js b/x-pack/plugins/monitoring/public/components/logstash/overview/overview.js index 03517d7cd1519..7342051e04152 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/overview/overview.js +++ b/x-pack/plugins/monitoring/public/components/logstash/overview/overview.js @@ -9,7 +9,6 @@ import React, { PureComponent } from 'react'; import { EuiPage, EuiPageBody, - EuiPageContent_Deprecated as EuiPageContent, EuiPanel, EuiSpacer, EuiFlexGrid, @@ -44,7 +43,7 @@ export class Overview extends PureComponent { - + {metricsToShow.map((metric, index) => ( @@ -53,7 +52,7 @@ export class Overview extends PureComponent { ))} - + ); diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_listing/pipeline_listing.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_listing/pipeline_listing.js index 4ba55e653fe09..f6e1041b50165 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_listing/pipeline_listing.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_listing/pipeline_listing.js @@ -12,7 +12,6 @@ import { EuiPage, EuiLink, EuiPageBody, - EuiPageContent_Deprecated as EuiPageContent, EuiPanel, EuiSpacer, EuiFlexGroup, @@ -151,7 +150,7 @@ export class PipelineListing extends Component { {this.renderStats()} - + - + ); diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__snapshots__/pipeline_viewer.test.js.snap b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__snapshots__/pipeline_viewer.test.js.snap index 6d78fc3ce7640..20b801626def9 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__snapshots__/pipeline_viewer.test.js.snap +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__snapshots__/pipeline_viewer.test.js.snap @@ -12,10 +12,9 @@ exports[`PipelineViewer component passes expected props 1`] = ` />

- - + `; @@ -89,10 +88,9 @@ exports[`PipelineViewer component renders DetailDrawer when selected vertex is n />

- - + `; diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/pipeline_viewer.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/pipeline_viewer.js index 66d659fb40aa3..8ca913d34a8ea 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/pipeline_viewer.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/pipeline_viewer.js @@ -11,13 +11,7 @@ import { DetailDrawer } from './detail_drawer'; import { Queue } from './queue'; import { StatementSection } from './statement_section'; import { i18n } from '@kbn/i18n'; -import { - EuiSpacer, - EuiPage, - EuiPageContent_Deprecated as EuiPageContent, - EuiPageBody, - EuiScreenReaderOnly, -} from '@elastic/eui'; +import { EuiSpacer, EuiPage, EuiPageSection, EuiPageBody, EuiScreenReaderOnly } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; export class PipelineViewer extends React.Component { @@ -58,11 +52,7 @@ export class PipelineViewer extends React.Component { />

- + {this.renderDetailDrawer()} - + ); diff --git a/x-pack/plugins/monitoring/public/components/no_data/__snapshots__/no_data.test.js.snap b/x-pack/plugins/monitoring/public/components/no_data/__snapshots__/no_data.test.js.snap index f5673f5ecb80f..500bcfdaaa3f2 100644 --- a/x-pack/plugins/monitoring/public/components/no_data/__snapshots__/no_data.test.js.snap +++ b/x-pack/plugins/monitoring/public/components/no_data/__snapshots__/no_data.test.js.snap @@ -14,79 +14,103 @@ exports[`NoData should show a default message if reason is unknown 1`] = ` class="euiPageBody emotion-euiPageBody-restrictWidth" style="max-width:600px" > -
-
-

- No monitoring data found -

-
-
-

- Have you set up monitoring yet? If so, make sure that the selected time period in the upper right includes monitoring data. -

-

- If you have configured monitoring data to be sent to a dedicated monitoring cluster you should access that data with the Kibana instance attached to the monitoring cluster. -

-
-
-
- + +
+
+
+

+ No monitoring data found +

+
+
+
+

+ Have you set up monitoring yet? If so, make sure that the selected time period in the upper right includes monitoring data. +

+

+ If you have configured monitoring data to be sent to a dedicated monitoring cluster you should access that data with the Kibana instance attached to the monitoring cluster. +

+
+
+
+
+
+ +
+
+
+ +
+
+
-
- -
+

`; @@ -105,79 +129,103 @@ exports[`NoData should show text next to the spinner while checking a setting 1` class="euiPageBody emotion-euiPageBody-restrictWidth" style="max-width:600px" > -
-
-

- No monitoring data found -

-
-
-

- Have you set up monitoring yet? If so, make sure that the selected time period in the upper right includes monitoring data. -

-

- If you have configured monitoring data to be sent to a dedicated monitoring cluster you should access that data with the Kibana instance attached to the monitoring cluster. -

-
-
-
- + +
+
+
+

+ No monitoring data found +

+
+
+
+

+ Have you set up monitoring yet? If so, make sure that the selected time period in the upper right includes monitoring data. +

+

+ If you have configured monitoring data to be sent to a dedicated monitoring cluster you should access that data with the Kibana instance attached to the monitoring cluster. +

+
+
+
+
+
+ +
+
+
+ +
+
+
-
- -
+
`; diff --git a/x-pack/plugins/monitoring/public/components/no_data/no_data.js b/x-pack/plugins/monitoring/public/components/no_data/no_data.js index ad4dd11f9221a..d503c19c85b75 100644 --- a/x-pack/plugins/monitoring/public/components/no_data/no_data.js +++ b/x-pack/plugins/monitoring/public/components/no_data/no_data.js @@ -8,17 +8,15 @@ import React, { Fragment, useState } from 'react'; import PropTypes from 'prop-types'; import { - EuiSpacer, EuiIcon, EuiPage, EuiPageBody, - EuiPageContent_Deprecated as EuiPageContent, EuiHorizontalRule, + EuiPageTemplate, EuiFlexGroup, EuiFlexItem, EuiButton, EuiText, - EuiTitle, EuiTextColor, EuiButtonEmpty, EuiScreenReaderOnly, @@ -72,34 +70,33 @@ export function NoData(props) { - - - - + } + title={

- - - -

- -

- - - - - + } + body={ + <> + + +

+ +

+ + + + + + } + /> ); @@ -117,32 +114,33 @@ export function NoData(props) { - - - - - - {!props.isCloudEnabled ? ( - - - setUseInternalCollection(false)} - > - - - - - - ) : null} - + } + body={ + <> + + + + } + actions={ + !props.isCloudEnabled ? ( + <> + + setUseInternalCollection(false)} + > + + + + + + ) : null + } + /> ); @@ -159,68 +157,67 @@ export function NoData(props) { - - - - + } + title={

- - - -

- -

-

- -

- - - - - + /> +

+

- - - - - setUseInternalCollection(true)} - data-test-subj="useInternalCollection" - > - - - - - +

+ + } + actions={ + <> + + + + + + + + + setUseInternalCollection(true)} + data-test-subj="useInternalCollection" + > + + + + + + } + /> ); diff --git a/x-pack/plugins/monitoring/public/components/page_loading/__snapshots__/page_loading.test.js.snap b/x-pack/plugins/monitoring/public/components/page_loading/__snapshots__/page_loading.test.js.snap index 031c2427b7da8..e83555e1d5eb3 100644 --- a/x-pack/plugins/monitoring/public/components/page_loading/__snapshots__/page_loading.test.js.snap +++ b/x-pack/plugins/monitoring/public/components/page_loading/__snapshots__/page_loading.test.js.snap @@ -8,21 +8,20 @@ exports[`PageLoading should show a simple page loading component 1`] = `
-
- Loading… +
+
+ Loading… +
+
-
+
`; diff --git a/x-pack/plugins/monitoring/public/components/page_loading/index.tsx b/x-pack/plugins/monitoring/public/components/page_loading/index.tsx index cb734fe8123fc..3d2d788a787ae 100644 --- a/x-pack/plugins/monitoring/public/components/page_loading/index.tsx +++ b/x-pack/plugins/monitoring/public/components/page_loading/index.tsx @@ -6,43 +6,20 @@ */ import React from 'react'; -import { - EuiPage, - EuiPageBody, - EuiPageContent_Deprecated as EuiPageContent, - EuiFlexGroup, - EuiFlexItem, - EuiLoadingSpinner, -} from '@elastic/eui'; +import { EuiPage, EuiPageBody, EuiPageTemplate, EuiLoadingSpinner } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; -import './page_loading.scss'; import { useTrackPageview } from '@kbn/observability-shared-plugin/public'; function PageLoadingUI() { return ( - - - - - - - - - - - - - - + } + body={ + + } + /> ); diff --git a/x-pack/plugins/monitoring/public/components/page_loading/page_loading.scss b/x-pack/plugins/monitoring/public/components/page_loading/page_loading.scss deleted file mode 100644 index ebe0defecb02a..0000000000000 --- a/x-pack/plugins/monitoring/public/components/page_loading/page_loading.scss +++ /dev/null @@ -1,5 +0,0 @@ -.monNoData__content { - max-width: $euiSizeM * 50; - text-align: center; - position: relative; -}