github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Infra UI][Stack Monitoring] Migrate EuiPage*_Depracated usage (#161870)

Browse source 
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:

<img width="1690" alt="image"
src="b86db831-e79e-4be0-918f-f3b25803e990">

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>
This commit is contained in:
Carlos Crespo 2023-07-20 13:48:26 +02:00 • committed by GitHub
parent b2ca51d66c
commit b1a3bc559f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
47 changed files with 1009 additions and 1095 deletions
Download patch file Download diff file Expand all files Collapse all files

58
x-pack/plugins/infra/public/pages/error.tsx
View file

@ -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<Props> = ({ message }) => {
export const ErrorPageBody: React.FC<{ message: string }> = ({ message }) => {
return (
<EuiPage style={{ flex: '1 0 auto' }}>
<EuiPageBody>
<EuiPageHeader>
<EuiPageHeaderSection>
<EuiTitle size="m">
<h1>
<FormattedMessage
id="xpack.infra.errorPage.unexpectedErrorTitle"
defaultMessage="Oops!"
/>
</h1>
</EuiTitle>
</EuiPageHeaderSection>
</EuiPageHeader>
<EuiPageContent>
<EuiCallOut color="danger" title={message} iconType="error">
<p>
<FormattedMessage
id="xpack.infra.errorPage.tryAgainDescription "
defaultMessage="Please click the back button and try again."
/>
</p>
</EuiCallOut>
</EuiPageContent>
</EuiPageBody>
</EuiPage>
<EuiPageTemplate offset={0} restrictWidth={false} bottomBorder={false} grow={false}>
<EuiPageTemplate.Header>
<EuiTitle size="m">
<h1>
<FormattedMessage
id="xpack.infra.errorPage.unexpectedErrorTitle"
defaultMessage="Oops!"
/>
</h1>
</EuiTitle>
</EuiPageTemplate.Header>
<EuiPageTemplate.Section>
<EuiCallOut color="danger" title={message} iconType="error">
<p>
<FormattedMessage
id="xpack.infra.errorPage.tryAgainDescription "
defaultMessage="Please click the back button and try again."
/>
</p>
</EuiCallOut>
</EuiPageTemplate.Section>
</EuiPageTemplate>
);
};

12
x-pack/plugins/infra/public/pages/logs/settings/indices_configuration_panel.stories.tsx
View file

@ -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 {
>
<EuiPage restrictWidth>
<EuiPageBody>
<EuiPageContent>
<EuiPanel>
<WrappedStory />
</EuiPageContent>
</EuiPanel>
</EuiPageBody>
</EuiPage>
</MockIndexPatternsKibanaContextProvider>

7
x-pack/plugins/infra/public/pages/metrics/metric_detail/components/chart_section_vis.tsx
View file

@ -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 (
<EuiPageContentBody>
<EuiPageSection>
<div className="infrastructureChart" style={{ height: 250, marginBottom: 16 }}>
<Chart>
<Axis
@ -143,6 +142,6 @@ export const ChartSectionVis = ({
/>
</Chart>
</div>
</EuiPageContentBody>
</EuiPageSection>
);
};

6
x-pack/plugins/infra/public/pages/metrics/metric_detail/components/gauges_section_vis.tsx
View file

@ -7,7 +7,7 @@
import {
EuiFlexItem,
EuiPageContentBody_Deprecated as EuiPageContentBody,
EuiPageSection,
EuiPanel,
EuiProgress,
EuiSpacer,
@ -54,7 +54,7 @@ export const GaugesSectionVis = ({
return null;
}
return (
<EuiPageContentBody>
<EuiPageSection>
<EuiSpacer size="m" />
<GroupBox>
{metric.series.map((series) => {
@ -93,7 +93,7 @@ export const GaugesSectionVis = ({
})}
</GroupBox>
<EuiSpacer size="m" />
</EuiPageContentBody>
</EuiPageSection>
);
};

13
x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layout_content.tsx
View file

@ -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;
`;

6
x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/aws_ec2_layout.tsx
View file

@ -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',
]}
/>
<LayoutContent>
<EuiPanel>
<Section
navLabel="AWS EC2"
sectionLabel={i18n.translate(
@ -129,7 +129,7 @@ export const AwsEC2Layout = withTheme(
/>
</SubSection>
</Section>
</LayoutContent>
</EuiPanel>
</React.Fragment>
)
);

328
x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/aws_rds_layout.tsx
View file

@ -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) => (
<React.Fragment>
<LayoutContent>
<Section
navLabel="AWS RDS"
sectionLabel={i18n.translate(
'xpack.infra.metricDetailPage.rdsMetricsLayout.overviewSection.sectionLabel',
<EuiPanel>
<Section
navLabel="AWS RDS"
sectionLabel={i18n.translate(
'xpack.infra.metricDetailPage.rdsMetricsLayout.overviewSection.sectionLabel',
{
defaultMessage: 'Aws RDS Overview',
}
)}
metrics={metrics}
onChangeRangeTime={onChangeRangeTime}
>
<SubSection
id="awsRDSCpuTotal"
label={i18n.translate(
'xpack.infra.metricDetailPage.rdsMetricsLayout.cpuTotal.sectionLabel',
{
defaultMessage: 'Aws RDS Overview',
defaultMessage: 'Total CPU Usage',
}
)}
metrics={metrics}
onChangeRangeTime={onChangeRangeTime}
>
<SubSection
id="awsRDSCpuTotal"
label={i18n.translate(
'xpack.infra.metricDetailPage.rdsMetricsLayout.cpuTotal.sectionLabel',
{
defaultMessage: 'Total CPU Usage',
}
)}
>
<ChartSectionVis
type="area"
formatter="percent"
seriesOverrides={{
cpu: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.rdsMetricsLayout.cpuTotal.chartLabel',
{ defaultMessage: 'Total' }
),
},
}}
/>
</SubSection>
<SubSection
id="awsRDSConnections"
label={i18n.translate(
'xpack.infra.metricDetailPage.rdsMetricsLayout.connections.sectionLabel',
{
defaultMessage: 'Connections',
}
)}
>
<ChartSectionVis
type="bar"
formatter="number"
seriesOverrides={{
connections: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.rdsMetricsLayout.connections.chartLabel',
{ defaultMessage: 'Connections' }
),
},
}}
/>
</SubSection>
<SubSection
id="awsRDSQueriesExecuted"
label={i18n.translate(
'xpack.infra.metricDetailPage.rdsMetricsLayout.queriesExecuted.sectionLabel',
{
defaultMessage: 'Queries Executed',
}
)}
>
<ChartSectionVis
type="bar"
formatter="number"
seriesOverrides={{
queries: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.rdsMetricsLayout.queriesExecuted.chartLabel',
{ defaultMessage: 'Queries' }
),
},
}}
/>
</SubSection>
<SubSection
id="awsRDSActiveTransactions"
label={i18n.translate(
'xpack.infra.metricDetailPage.rdsMetricsLayout.activeTransactions.sectionLabel',
{
defaultMessage: 'Transactions',
}
)}
>
<ChartSectionVis
type="bar"
formatter="number"
seriesOverrides={{
active: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.rdsMetricsLayout.active.chartLabel',
{ defaultMessage: 'Active' }
),
},
blocked: {
color: theme.eui.euiColorVis2,
name: i18n.translate(
'xpack.infra.metricDetailPage.rdsMetricsLayout.blocked.chartLabel',
{ defaultMessage: 'Blocked' }
),
},
}}
/>
</SubSection>
<SubSection
id="awsRDSLatency"
label={i18n.translate(
'xpack.infra.metricDetailPage.rdsMetricsLayout.latency.sectionLabel',
{
defaultMessage: 'Latency',
}
)}
>
<ChartSectionVis
type="bar"
stacked={true}
formatter="highPrecision"
formatterTemplate={'{{value}} ms'}
seriesOverrides={{
read: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.rdsMetricsLayout.latency.read.chartLabel',
{ defaultMessage: 'Read' }
),
},
write: {
color: theme.eui.euiColorVis2,
name: i18n.translate(
'xpack.infra.metricDetailPage.rdsMetricsLayout.latency.write.chartLabel',
{ defaultMessage: 'Write' }
),
},
insert: {
color: theme.eui.euiColorVis0,
name: i18n.translate(
'xpack.infra.metricDetailPage.rdsMetricsLayout.latency.insert.chartLabel',
{ defaultMessage: 'Insert' }
),
},
update: {
color: theme.eui.euiColorVis7,
name: i18n.translate(
'xpack.infra.metricDetailPage.rdsMetricsLayout.latency.update.chartLabel',
{ defaultMessage: 'Update' }
),
},
commit: {
color: theme.eui.euiColorVis3,
name: i18n.translate(
'xpack.infra.metricDetailPage.rdsMetricsLayout.latency.commit.chartLabel',
{ defaultMessage: 'Commit' }
),
},
}}
/>
</SubSection>
</Section>
</LayoutContent>
</React.Fragment>
<ChartSectionVis
type="area"
formatter="percent"
seriesOverrides={{
cpu: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.rdsMetricsLayout.cpuTotal.chartLabel',
{ defaultMessage: 'Total' }
),
},
}}
/>
</SubSection>
<SubSection
id="awsRDSConnections"
label={i18n.translate(
'xpack.infra.metricDetailPage.rdsMetricsLayout.connections.sectionLabel',
{
defaultMessage: 'Connections',
}
)}
>
<ChartSectionVis
type="bar"
formatter="number"
seriesOverrides={{
connections: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.rdsMetricsLayout.connections.chartLabel',
{ defaultMessage: 'Connections' }
),
},
}}
/>
</SubSection>
<SubSection
id="awsRDSQueriesExecuted"
label={i18n.translate(
'xpack.infra.metricDetailPage.rdsMetricsLayout.queriesExecuted.sectionLabel',
{
defaultMessage: 'Queries Executed',
}
)}
>
<ChartSectionVis
type="bar"
formatter="number"
seriesOverrides={{
queries: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.rdsMetricsLayout.queriesExecuted.chartLabel',
{ defaultMessage: 'Queries' }
),
},
}}
/>
</SubSection>
<SubSection
id="awsRDSActiveTransactions"
label={i18n.translate(
'xpack.infra.metricDetailPage.rdsMetricsLayout.activeTransactions.sectionLabel',
{
defaultMessage: 'Transactions',
}
)}
>
<ChartSectionVis
type="bar"
formatter="number"
seriesOverrides={{
active: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.rdsMetricsLayout.active.chartLabel',
{ defaultMessage: 'Active' }
),
},
blocked: {
color: theme.eui.euiColorVis2,
name: i18n.translate(
'xpack.infra.metricDetailPage.rdsMetricsLayout.blocked.chartLabel',
{ defaultMessage: 'Blocked' }
),
},
}}
/>
</SubSection>
<SubSection
id="awsRDSLatency"
label={i18n.translate(
'xpack.infra.metricDetailPage.rdsMetricsLayout.latency.sectionLabel',
{
defaultMessage: 'Latency',
}
)}
>
<ChartSectionVis
type="bar"
stacked={true}
formatter="highPrecision"
formatterTemplate={'{{value}} ms'}
seriesOverrides={{
read: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.rdsMetricsLayout.latency.read.chartLabel',
{ defaultMessage: 'Read' }
),
},
write: {
color: theme.eui.euiColorVis2,
name: i18n.translate(
'xpack.infra.metricDetailPage.rdsMetricsLayout.latency.write.chartLabel',
{ defaultMessage: 'Write' }
),
},
insert: {
color: theme.eui.euiColorVis0,
name: i18n.translate(
'xpack.infra.metricDetailPage.rdsMetricsLayout.latency.insert.chartLabel',
{ defaultMessage: 'Insert' }
),
},
update: {
color: theme.eui.euiColorVis7,
name: i18n.translate(
'xpack.infra.metricDetailPage.rdsMetricsLayout.latency.update.chartLabel',
{ defaultMessage: 'Update' }
),
},
commit: {
color: theme.eui.euiColorVis3,
name: i18n.translate(
'xpack.infra.metricDetailPage.rdsMetricsLayout.latency.commit.chartLabel',
{ defaultMessage: 'Commit' }
),
},
}}
/>
</SubSection>
</Section>
</EuiPanel>
)
);

254
x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/aws_s3_layout.tsx
View file

@ -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) => (
<React.Fragment>
<LayoutContent>
<Section
navLabel="AWS S3"
sectionLabel={i18n.translate(
'xpack.infra.metricDetailPage.s3MetricsLayout.overviewSection.sectionLabel',
<EuiPanel>
<Section
navLabel="AWS S3"
sectionLabel={i18n.translate(
'xpack.infra.metricDetailPage.s3MetricsLayout.overviewSection.sectionLabel',
{
defaultMessage: 'Aws S3 Overview',
}
)}
metrics={metrics}
onChangeRangeTime={onChangeRangeTime}
>
<SubSection
id="awsS3BucketSize"
label={i18n.translate(
'xpack.infra.metricDetailPage.s3MetricsLayout.bucketSize.sectionLabel',
{
defaultMessage: 'Aws S3 Overview',
defaultMessage: 'Bucket Size',
}
)}
metrics={metrics}
onChangeRangeTime={onChangeRangeTime}
>
<SubSection
id="awsS3BucketSize"
label={i18n.translate(
'xpack.infra.metricDetailPage.s3MetricsLayout.bucketSize.sectionLabel',
{
defaultMessage: 'Bucket Size',
}
)}
>
<ChartSectionVis
type="bar"
formatter="bytes"
seriesOverrides={{
bytes: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.s3MetricsLayout.bucketSize.chartLabel',
{ defaultMessage: 'Total Bytes' }
),
},
}}
/>
</SubSection>
<SubSection
id="awsS3NumberOfObjects"
label={i18n.translate(
'xpack.infra.metricDetailPage.s3MetricsLayout.numberOfObjects.sectionLabel',
{
defaultMessage: 'Number of Objects',
}
)}
>
<ChartSectionVis
type="bar"
formatter="abbreviatedNumber"
seriesOverrides={{
objects: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.s3MetricsLayout.numberOfObjects.chartLabel',
{ defaultMessage: 'Objects' }
),
},
}}
/>
</SubSection>
<SubSection
id="awsS3TotalRequests"
label={i18n.translate(
'xpack.infra.metricDetailPage.s3MetricsLayout.totalRequests.sectionLabel',
{
defaultMessage: 'Total Requests',
}
)}
>
<ChartSectionVis
type="bar"
formatter="abbreviatedNumber"
seriesOverrides={{
total: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.s3MetricsLayout.totalRequests.chartLabel',
{ defaultMessage: 'Requests' }
),
},
}}
/>
</SubSection>
<SubSection
id="awsS3DownloadBytes"
label={i18n.translate(
'xpack.infra.metricDetailPage.s3MetricsLayout.downloadBytes.sectionLabel',
{
defaultMessage: 'Downloaded Bytes',
}
)}
>
<ChartSectionVis
type="bar"
formatter="bytes"
seriesOverrides={{
bytes: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.s3MetricsLayout.downloadBytes.chartLabel',
{ defaultMessage: 'Bytes' }
),
},
}}
/>
</SubSection>
<SubSection
id="awsS3UploadBytes"
label={i18n.translate(
'xpack.infra.metricDetailPage.s3MetricsLayout.uploadBytes.sectionLabel',
{
defaultMessage: 'Uploaded Bytes',
}
)}
>
<ChartSectionVis
type="bar"
formatter="bytes"
seriesOverrides={{
bytes: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.s3MetricsLayout.uploadBytes.chartLabel',
{ defaultMessage: 'Bytes' }
),
},
}}
/>
</SubSection>
</Section>
</LayoutContent>
</React.Fragment>
<ChartSectionVis
type="bar"
formatter="bytes"
seriesOverrides={{
bytes: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.s3MetricsLayout.bucketSize.chartLabel',
{ defaultMessage: 'Total Bytes' }
),
},
}}
/>
</SubSection>
<SubSection
id="awsS3NumberOfObjects"
label={i18n.translate(
'xpack.infra.metricDetailPage.s3MetricsLayout.numberOfObjects.sectionLabel',
{
defaultMessage: 'Number of Objects',
}
)}
>
<ChartSectionVis
type="bar"
formatter="abbreviatedNumber"
seriesOverrides={{
objects: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.s3MetricsLayout.numberOfObjects.chartLabel',
{ defaultMessage: 'Objects' }
),
},
}}
/>
</SubSection>
<SubSection
id="awsS3TotalRequests"
label={i18n.translate(
'xpack.infra.metricDetailPage.s3MetricsLayout.totalRequests.sectionLabel',
{
defaultMessage: 'Total Requests',
}
)}
>
<ChartSectionVis
type="bar"
formatter="abbreviatedNumber"
seriesOverrides={{
total: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.s3MetricsLayout.totalRequests.chartLabel',
{ defaultMessage: 'Requests' }
),
},
}}
/>
</SubSection>
<SubSection
id="awsS3DownloadBytes"
label={i18n.translate(
'xpack.infra.metricDetailPage.s3MetricsLayout.downloadBytes.sectionLabel',
{
defaultMessage: 'Downloaded Bytes',
}
)}
>
<ChartSectionVis
type="bar"
formatter="bytes"
seriesOverrides={{
bytes: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.s3MetricsLayout.downloadBytes.chartLabel',
{ defaultMessage: 'Bytes' }
),
},
}}
/>
</SubSection>
<SubSection
id="awsS3UploadBytes"
label={i18n.translate(
'xpack.infra.metricDetailPage.s3MetricsLayout.uploadBytes.sectionLabel',
{
defaultMessage: 'Uploaded Bytes',
}
)}
>
<ChartSectionVis
type="bar"
formatter="bytes"
seriesOverrides={{
bytes: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.s3MetricsLayout.uploadBytes.chartLabel',
{ defaultMessage: 'Bytes' }
),
},
}}
/>
</SubSection>
</Section>
</EuiPanel>
)
);

254
x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/aws_sqs_layout.tsx
View file

@ -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) => (
<React.Fragment>
<LayoutContent>
<Section
navLabel="AWS SQS"
sectionLabel={i18n.translate(
'xpack.infra.metricDetailPage.sqsMetricsLayout.overviewSection.sectionLabel',
<EuiPanel>
<Section
navLabel="AWS SQS"
sectionLabel={i18n.translate(
'xpack.infra.metricDetailPage.sqsMetricsLayout.overviewSection.sectionLabel',
{
defaultMessage: 'Aws SQS Overview',
}
)}
metrics={metrics}
onChangeRangeTime={onChangeRangeTime}
>
<SubSection
id="awsSQSMessagesVisible"
label={i18n.translate(
'xpack.infra.metricDetailPage.sqsMetricsLayout.messagesVisible.sectionLabel',
{
defaultMessage: 'Aws SQS Overview',
defaultMessage: 'Messages Available',
}
)}
metrics={metrics}
onChangeRangeTime={onChangeRangeTime}
>
<SubSection
id="awsSQSMessagesVisible"
label={i18n.translate(
'xpack.infra.metricDetailPage.sqsMetricsLayout.messagesVisible.sectionLabel',
{
defaultMessage: 'Messages Available',
}
)}
>
<ChartSectionVis
type="bar"
formatter="abbreviatedNumber"
seriesOverrides={{
visible: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.sqsMetricsLayout.messagesVisible.chartLabel',
{ defaultMessage: 'Available' }
),
},
}}
/>
</SubSection>
<SubSection
id="awsSQSMessagesDelayed"
label={i18n.translate(
'xpack.infra.metricDetailPage.sqsMetricsLayout.messagesDelayed.sectionLabel',
{
defaultMessage: 'Messages Delayed',
}
)}
>
<ChartSectionVis
type="bar"
formatter="abbreviatedNumber"
seriesOverrides={{
delayed: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.sqsMetricsLayout.messagesDelayed.chartLabel',
{ defaultMessage: 'Delayed' }
),
},
}}
/>
</SubSection>
<SubSection
id="awsSQSMessagesSent"
label={i18n.translate(
'xpack.infra.metricDetailPage.sqsMetricsLayout.messagesSent.sectionLabel',
{
defaultMessage: 'Messages Added',
}
)}
>
<ChartSectionVis
type="bar"
formatter="abbreviatedNumber"
seriesOverrides={{
sent: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.sqsMetricsLayout.messagesSent.chartLabel',
{ defaultMessage: 'Added' }
),
},
}}
/>
</SubSection>
<SubSection
id="awsSQSMessagesEmpty"
label={i18n.translate(
'xpack.infra.metricDetailPage.sqsMetricsLayout.messagesEmpty.sectionLabel',
{
defaultMessage: 'Messages Empty',
}
)}
>
<ChartSectionVis
type="bar"
formatter="abbreviatedNumber"
seriesOverrides={{
sent: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.sqsMetricsLayout.messagesEmpty.chartLabel',
{ defaultMessage: 'Empty' }
),
},
}}
/>
</SubSection>
<SubSection
id="awsSQSOldestMessage"
label={i18n.translate(
'xpack.infra.metricDetailPage.sqsMetricsLayout.oldestMessage.sectionLabel',
{
defaultMessage: 'Oldest Message',
}
)}
>
<ChartSectionVis
type="bar"
formatter="abbreviatedNumber"
seriesOverrides={{
oldest: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.sqsMetricsLayout.oldestMessage.chartLabel',
{ defaultMessage: 'Age' }
),
},
}}
/>
</SubSection>
</Section>
</LayoutContent>
</React.Fragment>
<ChartSectionVis
type="bar"
formatter="abbreviatedNumber"
seriesOverrides={{
visible: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.sqsMetricsLayout.messagesVisible.chartLabel',
{ defaultMessage: 'Available' }
),
},
}}
/>
</SubSection>
<SubSection
id="awsSQSMessagesDelayed"
label={i18n.translate(
'xpack.infra.metricDetailPage.sqsMetricsLayout.messagesDelayed.sectionLabel',
{
defaultMessage: 'Messages Delayed',
}
)}
>
<ChartSectionVis
type="bar"
formatter="abbreviatedNumber"
seriesOverrides={{
delayed: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.sqsMetricsLayout.messagesDelayed.chartLabel',
{ defaultMessage: 'Delayed' }
),
},
}}
/>
</SubSection>
<SubSection
id="awsSQSMessagesSent"
label={i18n.translate(
'xpack.infra.metricDetailPage.sqsMetricsLayout.messagesSent.sectionLabel',
{
defaultMessage: 'Messages Added',
}
)}
>
<ChartSectionVis
type="bar"
formatter="abbreviatedNumber"
seriesOverrides={{
sent: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.sqsMetricsLayout.messagesSent.chartLabel',
{ defaultMessage: 'Added' }
),
},
}}
/>
</SubSection>
<SubSection
id="awsSQSMessagesEmpty"
label={i18n.translate(
'xpack.infra.metricDetailPage.sqsMetricsLayout.messagesEmpty.sectionLabel',
{
defaultMessage: 'Messages Empty',
}
)}
>
<ChartSectionVis
type="bar"
formatter="abbreviatedNumber"
seriesOverrides={{
sent: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.sqsMetricsLayout.messagesEmpty.chartLabel',
{ defaultMessage: 'Empty' }
),
},
}}
/>
</SubSection>
<SubSection
id="awsSQSOldestMessage"
label={i18n.translate(
'xpack.infra.metricDetailPage.sqsMetricsLayout.oldestMessage.sectionLabel',
{
defaultMessage: 'Oldest Message',
}
)}
>
<ChartSectionVis
type="bar"
formatter="abbreviatedNumber"
seriesOverrides={{
oldest: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.sqsMetricsLayout.oldestMessage.chartLabel',
{ defaultMessage: 'Age' }
),
},
}}
/>
</SubSection>
</Section>
</EuiPanel>
)
);

6
x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/container_layout.tsx
View file

@ -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) => (
<React.Fragment>
<MetadataDetails />
<LayoutContent>
<EuiPanel>
<Section
navLabel={i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.layoutLabel',
@ -294,7 +294,7 @@ export const ContainerLayout = withTheme(
/>
</SubSection>
</Section>
</LayoutContent>
</EuiPanel>
</React.Fragment>
)
);

6
x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/host_layout.tsx
View file

@ -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',
]}
/>
<LayoutContent>
<EuiPanel>
<Section
navLabel={i18n.translate('xpack.infra.metricDetailPage.hostMetricsLayout.layoutLabel', {
defaultMessage: 'Host',
@ -370,7 +370,7 @@ export const HostLayout = withTheme(
</Section>
<AwsLayoutSection metrics={metrics} onChangeRangeTime={onChangeRangeTime} />
<NginxLayoutSection metrics={metrics} onChangeRangeTime={onChangeRangeTime} />
</LayoutContent>
</EuiPanel>
</React.Fragment>
)
);

6
x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/pod_layout.tsx
View file

@ -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) => (
<React.Fragment>
<MetadataDetails />
<LayoutContent>
<EuiPanel>
<Section
navLabel={i18n.translate('xpack.infra.metricDetailPage.podMetricsLayout.layoutLabel', {
defaultMessage: 'Pod',
@ -158,7 +158,7 @@ export const PodLayout = withTheme(
</SubSection>
</Section>
<NginxLayoutSection metrics={metrics} onChangeRangeTime={onChangeRangeTime} />
</LayoutContent>
</EuiPanel>
</React.Fragment>
)
);

11
x-pack/plugins/infra/public/pages/metrics/metric_detail/components/side_nav.tsx
View file

@ -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 (
<>
<EuiHideFor sizes={['xs', 's', 'm']}>
<EuiPageSideBar sticky={true}>{content}</EuiPageSideBar>
<EuiPageSidebar sticky={true}>{content}</EuiPageSidebar>
</EuiHideFor>
<EuiShowFor sizes={['xs', 's', 'm']}>
<EuiPageSideBar>{mobileContent}</EuiPageSideBar>
<EuiPageSidebar>{mobileContent}</EuiPageSidebar>
</EuiShowFor>
</>
);

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

@ -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 }) => {
</EuiPanel>
<EuiSpacer size="m" />
<AlertsCallout alerts={alerts} />
<EuiPageContent>
<EuiPanel>
<EuiFlexGrid columns={2} gutterSize="s">
<EuiFlexItem grow={true}>
<MonitoringTimeseriesContainer
@ -134,7 +126,7 @@ const KibanaInstance = ({ data, alerts }: { data: any; alerts: any }) => {
</>
)}
</EuiFlexGrid>
</EuiPageContent>
</EuiPanel>
</EuiPageBody>
</EuiPage>
);

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

@ -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 }) => {
<ClusterStatus stats={data.clusterStatus} />
</EuiPanel>
<EuiSpacer size="m" />
<EuiPageContent>
<EuiPanel>
<EuiFlexGroup>
<EuiFlexItem grow={true}>
<MonitoringTimeseriesContainer
@ -96,7 +88,7 @@ const KibanaOverview = ({ data }: { data: any }) => {
</EuiFlexGroup>
</>
)}
</EuiPageContent>
</EuiPanel>
</EuiPageBody>
</EuiPage>
);

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

@ -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<ComponentProps> = ({ clusters })
<EuiPanel>{data.nodeSummary && <DetailStatus stats={data.nodeSummary} />}</EuiPanel>
<EuiSpacer size="m" />
<AlertsCallout alerts={alerts} />
<EuiPageContent>
<EuiPageSection>
<EuiFlexGrid columns={2} gutterSize="s">
{metricsToShow.map((metric, index) => (
<EuiFlexItem key={index}>
@ -144,7 +144,7 @@ export const LogStashNodeAdvancedPage: React.FC<ComponentProps> = ({ clusters })
</EuiFlexItem>
))}
</EuiFlexGrid>
</EuiPageContent>
</EuiPageSection>
</EuiPageBody>
</EuiPage>
</LogstashTemplate>

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

@ -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<ComponentProps> = ({ clusters }) => {
<EuiPanel>{data.nodeSummary && <DetailStatus stats={data.nodeSummary} />}</EuiPanel>
<EuiSpacer size="m" />
<AlertsCallout alerts={alerts} />
<EuiPageContent>
<EuiPageSection>
<EuiFlexGrid columns={2} gutterSize="s">
{metricsToShow.map((metric, index) => (
<EuiFlexItem key={index}>
@ -136,7 +136,7 @@ export const LogStashNodePage: React.FC<ComponentProps> = ({ clusters }) => {
</EuiFlexItem>
))}
</EuiFlexGrid>
</EuiPageContent>
</EuiPageSection>
</EuiPageBody>
</EuiPage>
</LogstashTemplate>

94
x-pack/plugins/monitoring/public/application/pages/page_template.tsx
View file

@ -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<PageTemplateProps> = ({
const { supported, enabled } = getSetupModeState();
return (
<EuiPage data-test-subj="monitoringAppContainer">
<EuiPageBody>
<EuiPageContent>
{setHeaderActionMenu && theme$ && (
<HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
{supported && (
<SetupModeToggleButton enabled={enabled} toggleSetupMode={toggleSetupMode} />
)}
<AlertsDropdown />
</HeaderMenuPortal>
)}
<MonitoringToolbar pageTitle={pageTitle} onRefresh={onRefresh} />
<EuiSpacer size="m" />
{tabs && (
<EuiTabs size="l">
{tabs.map((item, idx) => {
return (
<EuiTab
key={idx}
disabled={isDisabledTab(product)}
title={item.label}
data-test-subj={item.testSubj}
href={item.route ? createHref(item.route) : undefined}
isSelected={item.route ? isTabSelected(item.route) : undefined}
onClick={item.onClick}
prepend={item.prepend}
>
{item.label}
</EuiTab>
);
})}
</EuiTabs>
)}
<EuiPageContentBody>
<EuiPage paddingSize="m">
<EuiPageBody>{renderContent()}</EuiPageBody>
</EuiPage>
</EuiPageContentBody>
</EuiPageContent>
</EuiPageBody>
</EuiPage>
<EuiPageTemplate
offset={0}
restrictWidth={false}
grow={false}
data-test-subj="monitoringAppContainer"
>
<EuiPageTemplate.Section>
{setHeaderActionMenu && theme$ && (
<HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
{supported && (
<SetupModeToggleButton enabled={enabled} toggleSetupMode={toggleSetupMode} />
)}
<AlertsDropdown />
</HeaderMenuPortal>
)}
<MonitoringToolbar pageTitle={pageTitle} onRefresh={onRefresh} />
<EuiSpacer size="m" />
{tabs && (
<EuiTabs size="l">
{tabs.map((item, idx) => {
return (
<EuiTab
key={idx}
disabled={isDisabledTab(product)}
title={item.label}
data-test-subj={item.testSubj}
href={item.route ? createHref(item.route) : undefined}
isSelected={item.route ? isTabSelected(item.route) : undefined}
onClick={item.onClick}
prepend={item.prepend}
>
{item.label}
</EuiTab>
);
})}
</EuiTabs>
)}
<EuiPage paddingSize="m">
<EuiPageBody>{renderContent()}</EuiPageBody>
</EuiPage>
</EuiPageTemplate.Section>
</EuiPageTemplate>
);
};

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

@ -14,7 +14,6 @@ import {
EuiPage,
EuiPageBody,
EuiFlexGroup,
EuiPageContent_Deprecated as EuiPageContent,
EuiScreenReaderOnly,
EuiTitle,
} from '@elastic/eui';
@ -117,13 +116,13 @@ export const ApmMetrics = ({
<EuiFlexGroup wrap>{createCharts(topSeries, props)}</EuiFlexGroup>
</EuiPanel>
<EuiSpacer size="m" />
<EuiPageContent>
<EuiPanel>
<EuiTitle>
<h3>{title}</h3>
</EuiTitle>
<EuiSpacer size="m" />
<EuiFlexGroup wrap>{createCharts(seriesToShow, props)}</EuiFlexGroup>
</EuiPageContent>
</EuiPanel>
</EuiPageBody>
</EuiPage>
);

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

@ -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) {
<Status stats={data.stats} alerts={alerts} />
</EuiPanel>
<EuiSpacer size="m" />
<EuiPageContent>
<EuiPanel>
{setupModeCallout}
<EuiMonitoringTable
className="apmInstancesTable"
@ -222,7 +221,7 @@ export function ApmServerInstances({ apms, setupMode, alerts }: Props) {
defaultFields: ['name'],
}}
/>
</EuiPageContent>
</EuiPanel>
</EuiPageBody>
</EuiPage>
);

6
x-pack/plugins/monitoring/public/components/beats/beat/beat.js
View file

@ -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 }) {
<EuiPanel>
<SummaryStatus metrics={summarytStatsBot} data-test-subj="beatSummaryStatus02" />
</EuiPanel>
<EuiPageContent>
<EuiSpacer size="m" />
<EuiPanel>
<EuiScreenReaderOnly>
<h1>
<FormattedMessage id="xpack.monitoring.beats.beat.heading" defaultMessage="Beat" />
@ -155,7 +155,7 @@ export function Beat({ summary, metrics, ...props }) {
</EuiFlexItem>
))}
</EuiFlexGrid>
</EuiPageContent>
</EuiPanel>
</EuiPageBody>
</EuiPage>
);

5
x-pack/plugins/monitoring/public/components/beats/listing/listing.js
View file

@ -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 {
<Stats stats={stats} />
</EuiPanel>
<EuiSpacer size="m" />
<EuiPageContent>
<EuiPanel>
{setupModeCallOut}
<EuiMonitoringTable
className="beatsTable"
@ -202,7 +201,7 @@ export class Listing extends PureComponent {
defaultFields: ['name', 'type'],
}}
/>
</EuiPageContent>
</EuiPanel>
</EuiPageBody>
</EuiPage>
);

8
x-pack/plugins/monitoring/public/components/beats/overview/__snapshots__/overview.test.js.snap generated
View file

@ -135,7 +135,7 @@ exports[`Overview that overview page renders normally 1`] = `
<EuiSpacer
size="m"
/>
<EuiPageContent_Deprecated>
<EuiPanel>
<EuiFlexGroup
wrap={true}
>
@ -196,7 +196,7 @@ exports[`Overview that overview page renders normally 1`] = `
</EuiPanel>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPageContent_Deprecated>
</EuiPanel>
</EuiPageBody>
</EuiPage>
`;
@ -231,7 +231,7 @@ exports[`Overview that overview page shows a message if there is no beats data 1
<EuiSpacer
size="m"
/>
<EuiPageContent_Deprecated>
<EuiPanel>
<EuiFlexGroup
wrap={true}
>
@ -292,7 +292,7 @@ exports[`Overview that overview page shows a message if there is no beats data 1
</EuiPanel>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPageContent_Deprecated>
</EuiPanel>
</EuiPageBody>
</EuiPage>
`;

5
x-pack/plugins/monitoring/public/components/beats/overview/overview.js
View file

@ -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({
<EuiSpacer size="m" />
<EuiPanel>{renderLatestActive(latestActive, latestTypes, latestVersions)}</EuiPanel>
<EuiSpacer size="m" />
<EuiPageContent>
<EuiPanel>
<EuiFlexGroup wrap>{charts}</EuiFlexGroup>
</EuiPageContent>
</EuiPanel>
</EuiPageBody>
</EuiPage>
);

6
x-pack/plugins/monitoring/public/components/cluster/listing/listing.js
View file

@ -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 (
<EuiPage>
<EuiPageBody>
<EuiPageContent>
<EuiPanel>
{hasStandaloneCluster ? (
<StandaloneClusterCallout changeCluster={_changeCluster} storage={storage} />
) : null}
@ -457,7 +457,7 @@ export const Listing = ({ angular, clusters, sorting, pagination, onTableChange
defaultFields: ['cluster_name'],
}}
/>
</EuiPageContent>
</EuiPanel>
</EuiPageBody>
</EuiPage>
);

248
x-pack/plugins/monitoring/public/components/elasticsearch/ccr/__snapshots__/ccr.test.js.snap generated
View file

@ -12,135 +12,133 @@ exports[`Ccr that it renders normally 1`] = `
/>
</h1>
</EuiScreenReaderOnly>
<EuiPageContent_Deprecated>
<EuiPageContentBody_Deprecated>
<EuiInMemoryTable
className="monitoringElasticsearchCcrListingTable"
columns={
Array [
Object {
"field": "index",
"name": "Index",
"render": [Function],
"sortable": true,
},
Object {
"field": "follows",
"name": "Follows",
"sortable": true,
},
Object {
"field": "alerts",
"name": "Alerts",
"render": [Function],
"sortable": true,
},
Object {
"field": "syncLagOps",
"name": "Sync Lag (ops)",
"sortable": true,
},
Object {
"field": "syncLagTime",
"name": "Last fetch time",
"render": [Function],
"sortable": true,
},
Object {
"field": "opsSynced",
"name": "Ops synced",
"sortable": true,
},
Object {
"field": "error",
"name": "Error",
"render": [Function],
"sortable": true,
},
]
}
executeQueryOptions={
<EuiPanel>
<EuiInMemoryTable
className="monitoringElasticsearchCcrListingTable"
columns={
Array [
Object {
"defaultFields": Array [
"index",
"follows",
"field": "index",
"name": "Index",
"render": [Function],
"sortable": true,
},
Object {
"field": "follows",
"name": "Follows",
"sortable": true,
},
Object {
"field": "alerts",
"name": "Alerts",
"render": [Function],
"sortable": true,
},
Object {
"field": "syncLagOps",
"name": "Sync Lag (ops)",
"sortable": true,
},
Object {
"field": "syncLagTime",
"name": "Last fetch time",
"render": [Function],
"sortable": true,
},
Object {
"field": "opsSynced",
"name": "Ops synced",
"sortable": true,
},
Object {
"field": "error",
"name": "Error",
"render": [Function],
"sortable": true,
},
]
}
executeQueryOptions={
Object {
"defaultFields": Array [
"index",
"follows",
],
}
}
itemId="id"
itemIdToExpandedRowMap={Object {}}
items={
Array [
Object {
"follows": "leader",
"id": "follower",
"index": "follower",
"opsSynced": 400,
"shards": Array [
Object {
"opsSynced": 200,
"shardId": 0,
"syncLagOps": 2,
"syncLagOpsFollower": 1,
"syncLagOpsLeader": 1,
"syncLagTime": 45000,
},
Object {
"opsSynced": 200,
"shardId": 1,
"syncLagOps": 1,
"syncLagOpsFollower": 0,
"syncLagOpsLeader": 1,
"syncLagTime": 60000,
},
],
}
}
itemId="id"
itemIdToExpandedRowMap={Object {}}
items={
Array [
Object {
"follows": "leader",
"id": "follower",
"index": "follower",
"opsSynced": 400,
"shards": Array [
Object {
"opsSynced": 200,
"shardId": 0,
"syncLagOps": 2,
"syncLagOpsFollower": 1,
"syncLagOpsLeader": 1,
"syncLagTime": 45000,
},
Object {
"opsSynced": 200,
"shardId": 1,
"syncLagOps": 1,
"syncLagOpsFollower": 0,
"syncLagOpsLeader": 1,
"syncLagTime": 60000,
},
],
"syncLagOps": 5,
"syncLagTime": 60000,
},
Object {
"error": "not_working_properly",
"follows": "leader2",
"id": "follower2",
"index": "follower2",
"opsSynced": 50,
"shards": Array [
Object {
"opsSynced": 20,
"shardId": 1,
"syncLagOps": 0,
"syncLagOpsFollower": 0,
"syncLagOpsLeader": 0,
"syncLagTime": 11000,
},
Object {
"error": "not_working_properly",
"opsSynced": 30,
"shardId": 2,
"syncLagOps": 5,
"syncLagOpsFollower": 5,
"syncLagOpsLeader": 0,
"syncLagTime": 1000,
},
],
"syncLagOps": 1,
"syncLagTime": 12000,
},
]
}
pagination={false}
responsive={true}
sorting={
"syncLagOps": 5,
"syncLagTime": 60000,
},
Object {
"sort": Object {
"direction": "asc",
"field": "index",
},
}
"error": "not_working_properly",
"follows": "leader2",
"id": "follower2",
"index": "follower2",
"opsSynced": 50,
"shards": Array [
Object {
"opsSynced": 20,
"shardId": 1,
"syncLagOps": 0,
"syncLagOpsFollower": 0,
"syncLagOpsLeader": 0,
"syncLagTime": 11000,
},
Object {
"error": "not_working_properly",
"opsSynced": 30,
"shardId": 2,
"syncLagOps": 5,
"syncLagOpsFollower": 5,
"syncLagOpsLeader": 0,
"syncLagTime": 1000,
},
],
"syncLagOps": 1,
"syncLagTime": 12000,
},
]
}
pagination={false}
responsive={true}
sorting={
Object {
"sort": Object {
"direction": "asc",
"field": "index",
},
}
tableLayout="fixed"
/>
</EuiPageContentBody_Deprecated>
</EuiPageContent_Deprecated>
}
tableLayout="fixed"
/>
</EuiPanel>
</EuiPageBody>
</EuiPage>
`;

7
x-pack/plugins/monitoring/public/components/elasticsearch/ccr/ccr.js
View file

@ -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) => {
/>
</h1>
</EuiScreenReaderOnly>
<EuiPageContent>
<EuiPageContentBody>{renderTable()}</EuiPageContentBody>
</EuiPageContent>
<EuiPanel>{renderTable()}</EuiPanel>
</EuiPageBody>
</EuiPage>
);

5
x-pack/plugins/monitoring/public/components/elasticsearch/index/advanced.js
View file

@ -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 }) => {
<EuiSpacer size="m" />
<AlertsCallout alerts={alerts} />
<EuiSpacer size="m" />
<EuiPageContent>
<EuiPanel>
<EuiFlexGrid columns={2} gutterSize="s">
{metricsToShow.map((metric, index) => (
<EuiFlexItem key={index}>
@ -60,7 +59,7 @@ export const AdvancedIndex = ({ indexSummary, metrics, alerts, ...props }) => {
</EuiFlexItem>
))}
</EuiFlexGrid>
</EuiPageContent>
</EuiPanel>
</EuiPageBody>
</EuiPage>
);

14
x-pack/plugins/monitoring/public/components/elasticsearch/index/index.js
View file

@ -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 = ({
<EuiSpacer size="m" />
<AlertsCallout alerts={alerts} />
<EuiSpacer size="m" />
<EuiPageContent>
<EuiPanel>
<EuiFlexGrid columns={2} gutterSize="s">
{metricsToShow.map((metric, index) => (
<EuiFlexItem key={index}>
@ -62,7 +54,7 @@ export const Index = ({
</EuiPanel>
<EuiSpacer size="m" />
<ShardAllocation {...props} />
</EuiPageContent>
</EuiPanel>
</EuiPageBody>
</EuiPage>
);

5
x-pack/plugins/monitoring/public/components/elasticsearch/indices/indices.js
View file

@ -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 = ({
<ClusterStatus stats={clusterStatus} alerts={alerts} />
</EuiPanel>
<EuiSpacer size="m" />
<EuiPageContent>
<EuiPanel>
<EuiSwitch
label={
<FormattedMessage
@ -206,7 +205,7 @@ export const ElasticsearchIndices = ({
defaultFields: ['name'],
}}
/>
</EuiPageContent>
</EuiPanel>
</EuiPageBody>
</EuiPage>
);

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

@ -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 = ({
<ClusterStatus stats={clusterStatus} />
</EuiPanel>
<EuiSpacer size="m" />
<EuiPageContent>
<EuiPanel>
<EuiMonitoringTable
className="mlJobsTable"
rows={jobs}
@ -88,7 +87,7 @@ export const ElasticsearchMLJobs = ({
defaultFields: ['job_id'],
}}
/>
</EuiPageContent>
</EuiPanel>
</EuiPageBody>
</EuiPage>
);

6
x-pack/plugins/monitoring/public/components/elasticsearch/node/advanced.js
View file

@ -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 }) => {
</EuiPanel>
<EuiSpacer size="m" />
<AlertsCallout alerts={alerts} />
<EuiPageContent>
<EuiPageSection>
<EuiFlexGrid columns={2} gutterSize="s">
{metricsToShow.map((metric, index) => (
<EuiFlexItem key={index}>
@ -63,7 +63,7 @@ export const AdvancedNode = ({ nodeSummary, metrics, alerts, ...props }) => {
</EuiFlexItem>
))}
</EuiFlexGrid>
</EuiPageContent>
</EuiPageSection>
</EuiPageBody>
</EuiPage>
);

6
x-pack/plugins/monitoring/public/components/elasticsearch/node/node.js
View file

@ -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,
</EuiPanel>
<EuiSpacer size="m" />
<AlertsCallout alerts={alerts} />
<EuiPageContent>
<EuiPageSection>
<EuiFlexGrid columns={2} gutterSize="s">
{metricsToShow.map((metric, index) => (
<EuiFlexItem key={index}>
@ -75,7 +75,7 @@ export const Node = ({ nodeSummary, metrics, logs, alerts, nodeId, clusterUuid,
</EuiFlexItem>
))}
</EuiFlexGrid>
</EuiPageContent>
</EuiPageSection>
<EuiSpacer size="m" />
<EuiPanel>
<Logs logs={logs} nodeId={nodeId} clusterUuid={clusterUuid} />

5
x-pack/plugins/monitoring/public/components/elasticsearch/nodes/nodes.js
View file

@ -15,7 +15,6 @@ import {
EuiLink,
EuiPage,
EuiPageBody,
EuiPageContent_Deprecated as EuiPageContent,
EuiPanel,
EuiScreenReaderOnly,
EuiSpacer,
@ -501,7 +500,7 @@ export function ElasticsearchNodes({ clusterStatus, showCgroupMetricsElasticsear
</EuiScreenReaderOnly>
{renderClusterStatus()}
{setupModeCallout}
<EuiPageContent>
<EuiPanel>
<EuiMonitoringSSPTable
className="elasticsearchNodesTable"
rows={nodes}
@ -524,7 +523,7 @@ export function ElasticsearchNodes({ clusterStatus, showCgroupMetricsElasticsear
onTableChange={onTableChange}
{...props}
/>
</EuiPageContent>
</EuiPanel>
</EuiPageBody>
</EuiPage>
);

14
x-pack/plugins/monitoring/public/components/elasticsearch/overview/overview.js
View file

@ -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({
<ClusterStatus stats={clusterStatus} />
</EuiPanel>
<EuiSpacer size="m" />
<EuiPageContent>
<EuiPanel>
<EuiFlexGrid columns={2} gutterSize="s">
{metricsToShow.map((metric, index) => (
<EuiFlexItem key={index}>
@ -51,7 +43,7 @@ export function ElasticsearchOverview({
</EuiFlexItem>
))}
</EuiFlexGrid>
</EuiPageContent>
</EuiPanel>
<EuiSpacer size="m" />
<EuiPanel>
<Logs logs={logs} clusterUuid={cluster.cluster_uuid} />

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

@ -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<any> = ({ metrics, stats, ...res
</EuiPanel>
<EuiSpacer size="m" />
<EuiPageContent>
<EuiPageSection>
<EuiScreenReaderOnly>
<h1>
<FormattedMessage
@ -78,11 +78,11 @@ export const EnterpriseSearchOverview: React.FC<any> = ({ metrics, stats, ...res
</EuiFlexItem>
))}
</EuiFlexGrid>
</EuiPageContent>
</EuiPageSection>
<EuiSpacer />
<EuiPageContent>
<EuiPageSection>
<EuiScreenReaderOnly>
<h1>
<FormattedMessage
@ -101,11 +101,11 @@ export const EnterpriseSearchOverview: React.FC<any> = ({ metrics, stats, ...res
</EuiFlexItem>
))}
</EuiFlexGrid>
</EuiPageContent>
</EuiPageSection>
<EuiSpacer />
<EuiPageContent>
<EuiPageSection>
<EuiScreenReaderOnly>
<h1>
<FormattedMessage
@ -122,11 +122,11 @@ export const EnterpriseSearchOverview: React.FC<any> = ({ metrics, stats, ...res
</EuiFlexItem>
))}
</EuiFlexGrid>
</EuiPageContent>
</EuiPageSection>
<EuiSpacer />
<EuiPageContent>
<EuiPageSection>
<EuiScreenReaderOnly>
<h1>
<FormattedMessage
@ -143,7 +143,7 @@ export const EnterpriseSearchOverview: React.FC<any> = ({ metrics, stats, ...res
</EuiFlexItem>
))}
</EuiFlexGrid>
</EuiPageContent>
</EuiPageSection>
</EuiPageBody>
</EuiPage>
);

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

@ -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: Props) => {
</EuiPanel>
<EuiSpacer size="m" />
{setupModeCallOut}
<EuiPageContent>
<EuiPanel>
<EuiMonitoringTable
className="kibanaInstancesTable"
rows={dataFlattened}
@ -343,7 +342,7 @@ export const KibanaInstances: React.FC<Props> = (props: Props) => {
defaultFields: ['name'],
}}
/>
</EuiPageContent>
</EuiPanel>
</EuiPageBody>
</EuiPage>
);

5
x-pack/plugins/monitoring/public/components/logstash/listing/listing.js
View file

@ -11,7 +11,6 @@ import {
EuiPage,
EuiLink,
EuiPageBody,
EuiPageContent_Deprecated as EuiPageContent,
EuiPanel,
EuiSpacer,
EuiScreenReaderOnly,
@ -201,7 +200,7 @@ export class Listing extends PureComponent {
</EuiPanel>
<EuiSpacer size="m" />
{setupModeCallOut}
<EuiPageContent>
<EuiPanel>
<EuiMonitoringTable
className="logstashNodesTable"
rows={flattenedData}
@ -229,7 +228,7 @@ export class Listing extends PureComponent {
defaultFields: ['name'],
}}
/>
</EuiPageContent>
</EuiPanel>
</EuiPageBody>
</EuiPage>
);

5
x-pack/plugins/monitoring/public/components/logstash/overview/overview.js
View file

@ -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 {
<ClusterStatus stats={stats} />
</EuiPanel>
<EuiSpacer size="m" />
<EuiPageContent>
<EuiPanel>
<EuiFlexGrid columns={2} gutterSize="s">
{metricsToShow.map((metric, index) => (
<EuiFlexItem key={index}>
@ -53,7 +52,7 @@ export class Overview extends PureComponent {
</EuiFlexItem>
))}
</EuiFlexGrid>
</EuiPageContent>
</EuiPanel>
</EuiPageBody>
</EuiPage>
);

5
x-pack/plugins/monitoring/public/components/logstash/pipeline_listing/pipeline_listing.js
View file

@ -12,7 +12,6 @@ import {
EuiPage,
EuiLink,
EuiPageBody,
EuiPageContent_Deprecated as EuiPageContent,
EuiPanel,
EuiSpacer,
EuiFlexGroup,
@ -151,7 +150,7 @@ export class PipelineListing extends Component {
</EuiScreenReaderOnly>
<EuiPanel>{this.renderStats()}</EuiPanel>
<EuiSpacer size="m" />
<EuiPageContent>
<EuiPanel>
<EuiMonitoringSSPTable
className={className || 'logstashNodesTable'}
rows={data}
@ -172,7 +171,7 @@ export class PipelineListing extends Component {
onTableChange={onTableChange}
{...props}
/>
</EuiPageContent>
</EuiPanel>
</EuiPageBody>
</EuiPage>
);

14
x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__snapshots__/pipeline_viewer.test.js.snap generated
View file

@ -12,10 +12,9 @@ exports[`PipelineViewer component passes expected props 1`] = `
/>
</h1>
</EuiScreenReaderOnly>
<EuiPageContent_Deprecated
<EuiPageSection
alignment="center"
className="monPipelineViewer"
horizontalPosition="center"
verticalPosition="center"
>
<StatementSection
elements={
@ -72,7 +71,7 @@ exports[`PipelineViewer component passes expected props 1`] = `
iconType="logstashOutput"
onShowVertexDetails={[MockFunction]}
/>
</EuiPageContent_Deprecated>
</EuiPageSection>
</EuiPageBody>
</EuiPage>
`;
@ -89,10 +88,9 @@ exports[`PipelineViewer component renders DetailDrawer when selected vertex is n
/>
</h1>
</EuiScreenReaderOnly>
<EuiPageContent_Deprecated
<EuiPageSection
alignment="center"
className="monPipelineViewer"
horizontalPosition="center"
verticalPosition="center"
>
<StatementSection
elements={
@ -157,7 +155,7 @@ exports[`PipelineViewer component renders DetailDrawer when selected vertex is n
}
}
/>
</EuiPageContent_Deprecated>
</EuiPageSection>
</EuiPageBody>
</EuiPage>
`;

16
x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/pipeline_viewer.js
View file

@ -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 {
/>
</h1>
</EuiScreenReaderOnly>
<EuiPageContent
verticalPosition="center"
horizontalPosition="center"
className="monPipelineViewer"
>
<EuiPageSection alignment="center" className="monPipelineViewer">
<StatementSection
iconType="logstashInput"
headingText={i18n.translate('xpack.monitoring.logstash.pipelineViewer.inputsTitle', {
@ -92,7 +82,7 @@ export class PipelineViewer extends React.Component {
onShowVertexDetails={this.props.setDetailVertexId}
/>
{this.renderDetailDrawer()}
</EuiPageContent>
</EuiPageSection>
</EuiPageBody>
</EuiPage>
);

304
x-pack/plugins/monitoring/public/components/no_data/__snapshots__/no_data.test.js.snap generated
View file

@ -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"
>
<div
class="euiPanel euiPanel--plain euiPanel--paddingLarge euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter eui-textCenter emotion-euiPanel-grow-m-l-plain-hasShadow"
role="main"
<section
class="emotion-euiPageSection-grow-l-center-transparent"
>
<span
data-euiicon-type="monitoringApp"
/>
<div
class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
/>
<h2
class="euiTitle emotion-euiTitle-l"
>
No monitoring data found
</h2>
<hr
class="euiHorizontalRule euiHorizontalRule--half euiHorizontalRule--marginLarge emotion-euiHorizontalRule-half-l"
/>
<div
class="euiText emotion-euiText-m"
>
<p>
Have you set up monitoring yet? If so, make sure that the selected time period in the upper right includes monitoring data.
</p>
<p>
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.
</p>
</div>
<div
class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
/>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-s-spaceAround-center-row"
class="emotion-euiPageSection__content-l-center"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiPanel euiPanel--plain euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge emotion-euiPanel-m-plain-hasShadow"
>
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-fill-primary"
data-test-subj="enableCollectionInterval"
type="button"
<div
class="euiEmptyPrompt__main"
>
<span
class="emotion-euiButtonDisplayContent"
<div
class="euiEmptyPrompt__icon"
>
Set up monitoring with Metricbeat
</span>
</button>
<span
data-euiicon-type="monitoringApp"
/>
</div>
<div
class="euiEmptyPrompt__content"
>
<div
class="euiEmptyPrompt__contentInner"
>
<h2
class="euiTitle emotion-euiTitle-m"
>
No monitoring data found
</h2>
<div
class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
/>
<div
class="euiText emotion-euiText-m-euiTextColor-subdued"
>
<div
class="euiText emotion-euiText-m"
>
<p>
Have you set up monitoring yet? If so, make sure that the selected time period in the upper right includes monitoring data.
</p>
<p>
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.
</p>
</div>
</div>
<div
class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
/>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-s-spaceAround-center-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-fill-primary"
data-test-subj="enableCollectionInterval"
type="button"
>
<span
class="emotion-euiButtonDisplayContent"
>
Set up monitoring with Metricbeat
</span>
</button>
</div>
</div>
<hr
class="euiHorizontalRule euiHorizontalRule--half euiHorizontalRule--marginLarge emotion-euiHorizontalRule-half-l"
/>
<button
class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-m-empty-primary"
data-test-subj="useInternalCollection"
type="button"
>
<span
class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate euiButtonEmpty__text"
>
<span
class="emotion-euiTextColor-subdued"
>
Or, set up with self monitoring
</span>
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<hr
class="euiHorizontalRule euiHorizontalRule--half euiHorizontalRule--marginLarge emotion-euiHorizontalRule-half-l"
/>
<button
class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-m-empty-primary"
data-test-subj="useInternalCollection"
type="button"
>
<span
class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate euiButtonEmpty__text"
>
<span
class="emotion-euiTextColor-subdued"
>
Or, set up with self monitoring
</span>
</span>
</span>
</button>
</div>
</section>
</div>
</div>
`;
@ -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"
>
<div
class="euiPanel euiPanel--plain euiPanel--paddingLarge euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter eui-textCenter emotion-euiPanel-grow-m-l-plain-hasShadow"
role="main"
<section
class="emotion-euiPageSection-grow-l-center-transparent"
>
<span
data-euiicon-type="monitoringApp"
/>
<div
class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
/>
<h2
class="euiTitle emotion-euiTitle-l"
>
No monitoring data found
</h2>
<hr
class="euiHorizontalRule euiHorizontalRule--half euiHorizontalRule--marginLarge emotion-euiHorizontalRule-half-l"
/>
<div
class="euiText emotion-euiText-m"
>
<p>
Have you set up monitoring yet? If so, make sure that the selected time period in the upper right includes monitoring data.
</p>
<p>
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.
</p>
</div>
<div
class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
/>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-s-spaceAround-center-row"
class="emotion-euiPageSection__content-l-center"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiPanel euiPanel--plain euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge emotion-euiPanel-m-plain-hasShadow"
>
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-fill-primary"
data-test-subj="enableCollectionInterval"
type="button"
<div
class="euiEmptyPrompt__main"
>
<span
class="emotion-euiButtonDisplayContent"
<div
class="euiEmptyPrompt__icon"
>
Set up monitoring with Metricbeat
</span>
</button>
<span
data-euiicon-type="monitoringApp"
/>
</div>
<div
class="euiEmptyPrompt__content"
>
<div
class="euiEmptyPrompt__contentInner"
>
<h2
class="euiTitle emotion-euiTitle-m"
>
No monitoring data found
</h2>
<div
class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
/>
<div
class="euiText emotion-euiText-m-euiTextColor-subdued"
>
<div
class="euiText emotion-euiText-m"
>
<p>
Have you set up monitoring yet? If so, make sure that the selected time period in the upper right includes monitoring data.
</p>
<p>
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.
</p>
</div>
</div>
<div
class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
/>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-s-spaceAround-center-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-fill-primary"
data-test-subj="enableCollectionInterval"
type="button"
>
<span
class="emotion-euiButtonDisplayContent"
>
Set up monitoring with Metricbeat
</span>
</button>
</div>
</div>
<hr
class="euiHorizontalRule euiHorizontalRule--half euiHorizontalRule--marginLarge emotion-euiHorizontalRule-half-l"
/>
<button
class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-m-empty-primary"
data-test-subj="useInternalCollection"
type="button"
>
<span
class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate euiButtonEmpty__text"
>
<span
class="emotion-euiTextColor-subdued"
>
Or, set up with self monitoring
</span>
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<hr
class="euiHorizontalRule euiHorizontalRule--half euiHorizontalRule--marginLarge emotion-euiHorizontalRule-half-l"
/>
<button
class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-m-empty-primary"
data-test-subj="useInternalCollection"
type="button"
>
<span
class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate euiButtonEmpty__text"
>
<span
class="emotion-euiTextColor-subdued"
>
Or, set up with self monitoring
</span>
</span>
</span>
</button>
</div>
</section>
</div>
</div>
`;

207
x-pack/plugins/monitoring/public/components/no_data/no_data.js
View file

@ -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) {
</h1>
</EuiScreenReaderOnly>
<EuiPageBody restrictWidth={600}>
<EuiPageContent
verticalPosition="center"
horizontalPosition="center"
className="eui-textCenter"
>
<EuiIcon type="monitoringApp" size="xxl" />
<EuiSpacer size="m" />
<EuiTitle size="l">
<EuiPageTemplate.EmptyPrompt
icon={<EuiIcon type="monitoringApp" size="xxl" />}
title={
<h2>
<FormattedMessage
id="xpack.monitoring.noData.cloud.title"
defaultMessage="Monitoring data not available"
/>
</h2>
</EuiTitle>
<EuiTextColor color="subdued">
<EuiText>
<p>
<FormattedMessage
id="xpack.monitoring.noData.cloud.description"
defaultMessage="Monitoring provides insight to your hardware performance and load."
/>
</p>
</EuiText>
</EuiTextColor>
<EuiHorizontalRule size="half" />
<CloudDeployment />
</EuiPageContent>
}
body={
<>
<EuiTextColor color="subdued">
<EuiText>
<p>
<FormattedMessage
id="xpack.monitoring.noData.cloud.description"
defaultMessage="Monitoring provides insight to your hardware performance and load."
/>
</p>
</EuiText>
</EuiTextColor>
<EuiHorizontalRule size="half" />
<CloudDeployment />
</>
}
/>
</EuiPageBody>
</NoDataContainer>
);
@ -117,32 +114,33 @@ export function NoData(props) {
</h1>
</EuiScreenReaderOnly>
<EuiPageBody restrictWidth={600}>
<EuiPageContent
verticalPosition="center"
horizontalPosition="center"
className="eui-textCenter"
>
<EuiIcon type="monitoringApp" size="xxl" />
<EuiSpacer size="m" />
<NoDataMessage {...props} />
<CheckerErrors errors={props.errors} />
{!props.isCloudEnabled ? (
<Fragment>
<EuiHorizontalRule size="half" />
<EuiButtonEmpty
isDisabled={props.isCollectionEnabledUpdated}
onClick={() => setUseInternalCollection(false)}
>
<EuiTextColor color="default">
<FormattedMessage
id="xpack.monitoring.noData.setupMetricbeatInstead"
defaultMessage="Or, set up with Metricbeat (recommended)"
/>
</EuiTextColor>
</EuiButtonEmpty>
</Fragment>
) : null}
</EuiPageContent>
<EuiPageTemplate.EmptyPrompt
icon={<EuiIcon type="monitoringApp" size="xxl" />}
body={
<>
<NoDataMessage {...props} />
<CheckerErrors errors={props.errors} />
</>
}
actions={
!props.isCloudEnabled ? (
<>
<EuiHorizontalRule size="half" />
<EuiButtonEmpty
isDisabled={props.isCollectionEnabledUpdated}
onClick={() => setUseInternalCollection(false)}
>
<EuiTextColor color="default">
<FormattedMessage
id="xpack.monitoring.noData.setupMetricbeatInstead"
defaultMessage="Or, set up with Metricbeat (recommended)"
/>
</EuiTextColor>
</EuiButtonEmpty>
</>
) : null
}
/>
</EuiPageBody>
</NoDataContainer>
);
@ -159,68 +157,67 @@ export function NoData(props) {
</h1>
</EuiScreenReaderOnly>
<EuiPageBody restrictWidth={600}>
<EuiPageContent
verticalPosition="center"
horizontalPosition="center"
className="eui-textCenter"
>
<EuiIcon type="monitoringApp" size="xxl" />
<EuiSpacer size="m" />
<EuiTitle size="l">
<EuiPageTemplate.EmptyPrompt
icon={<EuiIcon type="monitoringApp" size="xxl" />}
title={
<h2>
<FormattedMessage
id="xpack.monitoring.noData.noMonitoringDetected"
defaultMessage="No monitoring data found"
/>
</h2>
</EuiTitle>
<EuiHorizontalRule size="half" />
<EuiText>
<p>
<FormattedMessage
id="xpack.monitoring.noData.noMonitoringDataFound"
defaultMessage="Have you set up monitoring yet? If so, make sure that the selected time period in
the upper right includes monitoring data."
/>
</p>
<p>
<FormattedMessage
id="xpack.monitoring.noData.remoteCollectionNotice"
defaultMessage="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."
/>
</p>
</EuiText>
<EuiSpacer />
<EuiFlexGroup alignItems="center" justifyContent="spaceAround" gutterSize="s">
<EuiFlexItem grow={false}>
<EuiButton
fill={true}
onClick={startSetup}
type="button"
data-test-subj="enableCollectionInterval"
isLoading={isLoading}
>
}
body={
<EuiText>
<p>
<FormattedMessage
id="xpack.monitoring.noData.collectionInterval.turnOnMonitoringButtonLabel"
defaultMessage="Set up monitoring with Metricbeat"
id="xpack.monitoring.noData.noMonitoringDataFound"
defaultMessage="Have you set up monitoring yet? If so, make sure that the selected time period in
the upper right includes monitoring data."
/>
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
<EuiHorizontalRule size="half" />
<EuiButtonEmpty
onClick={() => setUseInternalCollection(true)}
data-test-subj="useInternalCollection"
>
<EuiTextColor color="subdued">
<FormattedMessage
id="xpack.monitoring.noData.setupInternalInstead"
defaultMessage="Or, set up with self monitoring"
/>
</EuiTextColor>
</EuiButtonEmpty>
</EuiPageContent>
</p>
<p>
<FormattedMessage
id="xpack.monitoring.noData.remoteCollectionNotice"
defaultMessage="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."
/>
</p>
</EuiText>
}
actions={
<>
<EuiFlexGroup alignItems="center" justifyContent="spaceAround" gutterSize="s">
<EuiFlexItem grow={false}>
<EuiButton
fill={true}
onClick={startSetup}
type="button"
data-test-subj="enableCollectionInterval"
isLoading={isLoading}
>
<FormattedMessage
id="xpack.monitoring.noData.collectionInterval.turnOnMonitoringButtonLabel"
defaultMessage="Set up monitoring with Metricbeat"
/>
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
<EuiHorizontalRule size="half" />
<EuiButtonEmpty
onClick={() => setUseInternalCollection(true)}
data-test-subj="useInternalCollection"
>
<EuiTextColor color="subdued">
<FormattedMessage
id="xpack.monitoring.noData.setupInternalInstead"
defaultMessage="Or, set up with self monitoring"
/>
</EuiTextColor>
</EuiButtonEmpty>
</>
}
/>
</EuiPageBody>
</NoDataContainer>
);

27
x-pack/plugins/monitoring/public/components/page_loading/__snapshots__/page_loading.test.js.snap generated
View file

@ -8,21 +8,20 @@ exports[`PageLoading should show a simple page loading component 1`] = `
<div
class="euiPageBody emotion-euiPageBody"
>
<div
class="euiPanel euiPanel--plain euiPanel--paddingLarge euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter monNoData__content emotion-euiPanel-grow-m-l-plain-hasShadow"
role="main"
<section
class="emotion-euiPageSection-grow-l-center-transparent"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-l-spaceAround-stretch-row"
class="emotion-euiPageSection__content-l-center"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiPanel euiPanel--plain euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge emotion-euiPanel-m-plain-hasShadow"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-center-row"
class="euiEmptyPrompt__main"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiEmptyPrompt__icon"
>
<span
aria-label="Loading"
@ -31,14 +30,22 @@ exports[`PageLoading should show a simple page loading component 1`] = `
/>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiEmptyPrompt__content"
>
Loading…
<div
class="euiEmptyPrompt__contentInner"
>
<div
class="euiText emotion-euiText-m-euiTextColor-subdued"
>
Loading…
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
`;

37
x-pack/plugins/monitoring/public/components/page_loading/index.tsx
View file

@ -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 (
<EuiPage style={{ height: 'calc(100vh - 50px)' }}>
<EuiPageBody>
<EuiPageContent
verticalPosition="center"
horizontalPosition="center"
className="monNoData__content"
>
<EuiFlexGroup justifyContent="spaceAround">
<EuiFlexItem grow={false}>
<EuiFlexGroup alignItems="center" gutterSize="s">
<EuiFlexItem grow={false}>
<EuiLoadingSpinner size="xl" />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<FormattedMessage
id="xpack.monitoring.pageLoadingTitle"
defaultMessage="Loading…"
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPageContent>
<EuiPageTemplate.EmptyPrompt
icon={<EuiLoadingSpinner size="xl" />}
body={
<FormattedMessage id="xpack.monitoring.pageLoadingTitle" defaultMessage="Loading…" />
}
/>
</EuiPageBody>
</EuiPage>
);

5
x-pack/plugins/monitoring/public/components/page_loading/page_loading.scss
View file

@ -1,5 +0,0 @@
.monNoData__content {
max-width: $euiSizeM * 50;
text-align: center;
position: relative;
}