github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 09:19:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Metrics UI] Remove forbidden cross-boundary imports (#139757)

Browse source
This commit is contained in:
Felix Stürmer 2022-09-06 08:44:44 +02:00 • committed by GitHub
parent add7d7b881
commit 5563b73677
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
64 changed files with 2122 additions and 2183 deletions
Download patch file Download diff file Expand all files Collapse all files

2
x-pack/plugins/infra/common/inventory_models/aws_ec2/index.ts
View file

@ -9,6 +9,8 @@ import { i18n } from '@kbn/i18n';
import { metrics } from './metrics';
import { InventoryModel } from '../types';
export { awsEC2SnapshotMetricTypes } from './metrics';
export const awsEC2: InventoryModel = {
id: 'awsEC2',
displayName: i18n.translate('xpack.infra.inventoryModels.awsEC2.displayName', {

138
x-pack/plugins/infra/common/inventory_models/aws_ec2/layout.tsx
View file

@ -1,138 +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 React from 'react';
import { i18n } from '@kbn/i18n';
import { withTheme } from '@kbn/kibana-react-plugin/common';
import type { LayoutPropsWithTheme } from '../../../public/pages/metrics/metric_detail/types';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { Section } from '../../../public/pages/metrics/metric_detail/components/section';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { SubSection } from '../../../public/pages/metrics/metric_detail/components/sub_section';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { LayoutContent } from '../../../public/pages/metrics/metric_detail/components/layout_content';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { ChartSectionVis } from '../../../public/pages/metrics/metric_detail/components/chart_section_vis';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { MetadataDetails } from '../../../public/pages/metrics/metric_detail/components/metadata_details';
export const Layout = withTheme(({ metrics, theme, onChangeRangeTime }: LayoutPropsWithTheme) => (
<React.Fragment>
<MetadataDetails
fields={[
'cloud.instance.id',
'cloud.provider',
'cloud.availability_zone',
'cloud.machine.type',
'cloud.instance.name',
'cloud.project.id',
]}
/>
<LayoutContent>
<Section
navLabel="AWS EC2"
sectionLabel={i18n.translate(
'xpack.infra.metricDetailPage.ec2MetricsLayout.overviewSection.sectionLabel',
{
defaultMessage: 'Aws EC2 Overview',
}
)}
metrics={metrics}
onChangeRangeTime={onChangeRangeTime}
>
<SubSection
id="awsEC2CpuUtilization"
label={i18n.translate(
'xpack.infra.metricDetailPage.ec2MetricsLayout.cpuUsageSection.sectionLabel',
{
defaultMessage: 'CPU Usage',
}
)}
>
<ChartSectionVis
stacked={true}
type="area"
formatter="percent"
seriesOverrides={{
total: { color: theme.eui.euiColorVis1 },
}}
/>
</SubSection>
<SubSection
id="awsEC2NetworkTraffic"
label={i18n.translate(
'xpack.infra.metricDetailPage.ec2MetricsLayout.networkTrafficSection.sectionLabel',
{
defaultMessage: 'Network Traffic',
}
)}
>
<ChartSectionVis
formatter="bits"
formatterTemplate="{{value}}/s"
type="area"
seriesOverrides={{
rx: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.networkTrafficSection.networkRxRateSeriesLabel',
{
defaultMessage: 'in',
}
),
},
tx: {
color: theme.eui.euiColorVis2,
name: i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.networkTrafficSection.networkTxRateSeriesLabel',
{
defaultMessage: 'out',
}
),
},
}}
/>
</SubSection>
<SubSection
id="awsEC2DiskIOBytes"
label={i18n.translate(
'xpack.infra.metricDetailPage.ec2MetricsLayout.diskIOBytesSection.sectionLabel',
{
defaultMessage: 'Disk IO (Bytes)',
}
)}
>
<ChartSectionVis
formatter="bytes"
formatterTemplate="{{value}}/s"
type="area"
seriesOverrides={{
write: {
color: theme.eui.euiColorVis2,
name: i18n.translate(
'xpack.infra.metricDetailPage.ec2MetricsLayout.diskIOBytesSection.writeLabel',
{
defaultMessage: 'writes',
}
),
},
read: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.ec2MetricsLayout.diskIOBytesSection.readLabel',
{
defaultMessage: 'reads',
}
),
},
}}
/>
</SubSection>
</Section>
</LayoutContent>
</React.Fragment>
));

8
x-pack/plugins/infra/common/inventory_models/aws_ec2/metrics/index.ts
View file

@ -17,13 +17,19 @@ import { awsEC2DiskIOBytes } from './tsvb/aws_ec2_diskio_bytes';
import { InventoryMetrics } from '../../types';
const awsEC2SnapshotMetrics = { cpu, rx, tx, diskIOReadBytes, diskIOWriteBytes };
export const awsEC2SnapshotMetricTypes = Object.keys(awsEC2SnapshotMetrics) as Array<
keyof typeof awsEC2SnapshotMetrics
>;
export const metrics: InventoryMetrics = {
tsvb: {
awsEC2CpuUtilization,
awsEC2NetworkTraffic,
awsEC2DiskIOBytes,
},
snapshot: { cpu, rx, tx, diskIOReadBytes, diskIOWriteBytes },
snapshot: awsEC2SnapshotMetrics,
defaultSnapshot: 'cpu',
defaultTimeRangeInSeconds: 14400, // 4 hours
};

2
x-pack/plugins/infra/common/inventory_models/aws_rds/index.ts
View file

@ -9,6 +9,8 @@ import { i18n } from '@kbn/i18n';
import { metrics } from './metrics';
import { InventoryModel } from '../types';
export { awsRDSSnapshotMetricTypes } from './metrics';
export const awsRDS: InventoryModel = {
id: 'awsRDS',
displayName: i18n.translate('xpack.infra.inventoryModels.awsRDS.displayName', {

190
x-pack/plugins/infra/common/inventory_models/aws_rds/layout.tsx
View file

@ -1,190 +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 React from 'react';
import { i18n } from '@kbn/i18n';
import { withTheme } from '@kbn/kibana-react-plugin/common';
import type { LayoutPropsWithTheme } from '../../../public/pages/metrics/metric_detail/types';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { Section } from '../../../public/pages/metrics/metric_detail/components/section';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { SubSection } from '../../../public/pages/metrics/metric_detail/components/sub_section';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { ChartSectionVis } from '../../../public/pages/metrics/metric_detail/components/chart_section_vis';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { LayoutContent } from '../../../public/pages/metrics/metric_detail/components/layout_content';
export const Layout = withTheme(({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
<React.Fragment>
<LayoutContent>
<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: '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>
));

20
x-pack/plugins/infra/common/inventory_models/aws_rds/metrics/index.ts
View file

@ -19,6 +19,18 @@ import { awsRDSCpuTotal } from './tsvb/aws_rds_cpu_total';
import { awsRDSQueriesExecuted } from './tsvb/aws_rds_queries_executed';
import { awsRDSActiveTransactions } from './tsvb/aws_rds_active_transactions';
const awsRDSSnapshotMetrics = {
cpu,
rdsLatency,
rdsConnections,
rdsQueriesExecuted,
rdsActiveTransactions,
};
export const awsRDSSnapshotMetricTypes = Object.keys(awsRDSSnapshotMetrics) as Array<
keyof typeof awsRDSSnapshotMetrics
>;
export const metrics: InventoryMetrics = {
tsvb: {
awsRDSLatency,
@ -27,13 +39,7 @@ export const metrics: InventoryMetrics = {
awsRDSQueriesExecuted,
awsRDSActiveTransactions,
},
snapshot: {
cpu,
rdsLatency,
rdsConnections,
rdsQueriesExecuted,
rdsActiveTransactions,
},
snapshot: awsRDSSnapshotMetrics,
defaultSnapshot: 'cpu',
defaultTimeRangeInSeconds: 14400, // 4 hours
};

2
x-pack/plugins/infra/common/inventory_models/aws_s3/index.ts
View file

@ -9,6 +9,8 @@ import { i18n } from '@kbn/i18n';
import { metrics } from './metrics';
import { InventoryModel } from '../types';
export { awsS3SnapshotMetricTypes } from './metrics';
export const awsS3: InventoryModel = {
id: 'awsS3',
displayName: i18n.translate('xpack.infra.inventoryModels.awsS3.displayName', {

153
x-pack/plugins/infra/common/inventory_models/aws_s3/layout.tsx
View file

@ -1,153 +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 React from 'react';
import { i18n } from '@kbn/i18n';
import { withTheme } from '@kbn/kibana-react-plugin/common';
import type { LayoutPropsWithTheme } from '../../../public/pages/metrics/metric_detail/types';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { Section } from '../../../public/pages/metrics/metric_detail/components/section';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { SubSection } from '../../../public/pages/metrics/metric_detail/components/sub_section';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { ChartSectionVis } from '../../../public/pages/metrics/metric_detail/components/chart_section_vis';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { LayoutContent } from '../../../public/pages/metrics/metric_detail/components/layout_content';
export const Layout = withTheme(({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
<React.Fragment>
<LayoutContent>
<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: '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>
));

20
x-pack/plugins/infra/common/inventory_models/aws_s3/metrics/index.ts
View file

@ -19,6 +19,18 @@ import { s3NumberOfObjects } from './snapshot/s3_number_of_objects';
import { s3DownloadBytes } from './snapshot/s3_download_bytes';
import { s3UploadBytes } from './snapshot/s3_upload_bytes';
const awsS3SnapshotMetrics = {
s3BucketSize,
s3NumberOfObjects,
s3TotalRequests,
s3UploadBytes,
s3DownloadBytes,
};
export const awsS3SnapshotMetricTypes = Object.keys(awsS3SnapshotMetrics) as Array<
keyof typeof awsS3SnapshotMetrics
>;
export const metrics: InventoryMetrics = {
tsvb: {
awsS3BucketSize,
@ -27,13 +39,7 @@ export const metrics: InventoryMetrics = {
awsS3DownloadBytes,
awsS3UploadBytes,
},
snapshot: {
s3BucketSize,
s3NumberOfObjects,
s3TotalRequests,
s3UploadBytes,
s3DownloadBytes,
},
snapshot: awsS3SnapshotMetrics,
defaultSnapshot: 's3BucketSize',
defaultTimeRangeInSeconds: 86400 * 7, // 7 days
};

2
x-pack/plugins/infra/common/inventory_models/aws_sqs/index.ts
View file

@ -9,6 +9,8 @@ import { i18n } from '@kbn/i18n';
import { metrics } from './metrics';
import { InventoryModel } from '../types';
export { awsSQSSnapshotMetricTypes } from './metrics';
export const awsSQS: InventoryModel = {
id: 'awsSQS',
displayName: i18n.translate('xpack.infra.inventoryModels.awsSQS.displayName', {

153
x-pack/plugins/infra/common/inventory_models/aws_sqs/layout.tsx
View file

@ -1,153 +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 React from 'react';
import { i18n } from '@kbn/i18n';
import { withTheme } from '@kbn/kibana-react-plugin/common';
import type { LayoutPropsWithTheme } from '../../../public/pages/metrics/metric_detail/types';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { Section } from '../../../public/pages/metrics/metric_detail/components/section';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { SubSection } from '../../../public/pages/metrics/metric_detail/components/sub_section';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { ChartSectionVis } from '../../../public/pages/metrics/metric_detail/components/chart_section_vis';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { LayoutContent } from '../../../public/pages/metrics/metric_detail/components/layout_content';
export const Layout = withTheme(({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
<React.Fragment>
<LayoutContent>
<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: '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>
));

20
x-pack/plugins/infra/common/inventory_models/aws_sqs/metrics/index.ts
View file

@ -19,6 +19,18 @@ import { awsSQSMessagesSent } from './tsvb/aws_sqs_messages_sent';
import { awsSQSMessagesEmpty } from './tsvb/aws_sqs_messages_empty';
import { awsSQSOldestMessage } from './tsvb/aws_sqs_oldest_message';
const awsSQSSnapshotMetrics = {
sqsMessagesVisible,
sqsMessagesDelayed,
sqsMessagesEmpty,
sqsMessagesSent,
sqsOldestMessage,
};
export const awsSQSSnapshotMetricTypes = Object.keys(awsSQSSnapshotMetrics) as Array<
keyof typeof awsSQSSnapshotMetrics
>;
export const metrics: InventoryMetrics = {
tsvb: {
awsSQSMessagesVisible,
@ -27,13 +39,7 @@ export const metrics: InventoryMetrics = {
awsSQSMessagesEmpty,
awsSQSOldestMessage,
},
snapshot: {
sqsMessagesVisible,
sqsMessagesDelayed,
sqsMessagesEmpty,
sqsMessagesSent,
sqsOldestMessage,
},
snapshot: awsSQSSnapshotMetrics,
defaultSnapshot: 'sqsMessagesVisible',
defaultTimeRangeInSeconds: 14400, // 4 hours
};

2
x-pack/plugins/infra/common/inventory_models/container/index.ts
View file

@ -9,6 +9,8 @@ import { i18n } from '@kbn/i18n';
import { metrics } from './metrics';
import { InventoryModel } from '../types';
export { containerSnapshotMetricTypes } from './metrics';
export const container: InventoryModel = {
id: 'container',
displayName: i18n.translate('xpack.infra.inventoryModel.container.displayName', {

304
x-pack/plugins/infra/common/inventory_models/container/layout.tsx
View file

@ -1,304 +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 React from 'react';
import { i18n } from '@kbn/i18n';
import { withTheme } from '@kbn/kibana-react-plugin/common';
import type { LayoutPropsWithTheme } from '../../../public/pages/metrics/metric_detail/types';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { Section } from '../../../public/pages/metrics/metric_detail/components/section';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { SubSection } from '../../../public/pages/metrics/metric_detail/components/sub_section';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { GaugesSectionVis } from '../../../public/pages/metrics/metric_detail/components/gauges_section_vis';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { ChartSectionVis } from '../../../public/pages/metrics/metric_detail/components/chart_section_vis';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { LayoutContent } from '../../../public/pages/metrics/metric_detail/components/layout_content';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { MetadataDetails } from '../../../public/pages/metrics/metric_detail/components/metadata_details';
export const Layout = withTheme(({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
<React.Fragment>
<MetadataDetails />
<LayoutContent>
<Section
navLabel={i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.layoutLabel',
{
defaultMessage: 'Container',
}
)}
sectionLabel={i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.overviewSection.sectionLabel',
{
defaultMessage: 'Container Overview',
}
)}
metrics={metrics}
onChangeRangeTime={onChangeRangeTime}
>
<SubSection id="containerK8sOverview">
<GaugesSectionVis
seriesOverrides={{
cpu: {
name: i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.overviewSection.cpuUsageSeriesLabel',
{
defaultMessage: 'CPU Usage',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'percent',
gaugeMax: 1,
},
memory: {
name: i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.overviewSection.memoryUsageSeriesLabel',
{
defaultMessage: 'Memory Usage',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'percent',
gaugeMax: 1,
},
}}
/>
</SubSection>
<SubSection id="containerOverview">
<GaugesSectionVis
seriesOverrides={{
cpu: {
name: i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.overviewSection.cpuUsageSeriesLabel',
{
defaultMessage: 'CPU Usage',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'percent',
gaugeMax: 1,
},
memory: {
name: i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.overviewSection.memoryUsageSeriesLabel',
{
defaultMessage: 'Memory Usage',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'percent',
gaugeMax: 1,
},
rx: {
name: i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.overviewSection.inboundRXSeriesLabel',
{
defaultMessage: 'Inbound (RX)',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'bits',
formatterTemplate: '{{value}}/s',
},
tx: {
name: i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.overviewSection.outboundTXSeriesLabel',
{
defaultMessage: 'Outbound (TX)',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'bits',
formatterTemplate: '{{value}}/s',
},
}}
/>
</SubSection>
<SubSection
id="containerK8sCpuUsage"
label={i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.cpuUsageSection.sectionLabel',
{
defaultMessage: 'CPU Usage',
}
)}
>
<ChartSectionVis
stacked={true}
type="area"
formatter="percent"
seriesOverrides={{
cpu: { color: theme.eui.euiColorVis1 },
}}
/>
</SubSection>
<SubSection
id="containerK8sMemoryUsage"
label={i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.memoryUsageSection.sectionLabel',
{
defaultMessage: 'Memory Usage',
}
)}
>
<ChartSectionVis
stacked={true}
type="area"
formatter="percent"
seriesOverrides={{
memory: { color: theme.eui.euiColorVis1 },
}}
/>
</SubSection>
<SubSection
id="containerCpuUsage"
label={i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.cpuUsageSection.sectionLabel',
{
defaultMessage: 'CPU Usage',
}
)}
>
<ChartSectionVis
stacked={true}
type="area"
formatter="percent"
seriesOverrides={{
cpu: { color: theme.eui.euiColorVis1 },
}}
/>
</SubSection>
<SubSection
id="containerMemory"
label={i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.memoryUsageSection.sectionLabel',
{
defaultMessage: 'Memory Usage',
}
)}
>
<ChartSectionVis
stacked={true}
type="area"
formatter="percent"
seriesOverrides={{
memory: { color: theme.eui.euiColorVis1 },
}}
/>
</SubSection>
<SubSection
id="containerNetworkTraffic"
label={i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.networkTrafficSection.sectionLabel',
{
defaultMessage: 'Network Traffic',
}
)}
>
<ChartSectionVis
formatter="bits"
formatterTemplate="{{value}}/s"
type="area"
seriesOverrides={{
rx: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.networkTrafficSection.networkRxRateSeriesLabel',
{
defaultMessage: 'in',
}
),
},
tx: {
color: theme.eui.euiColorVis2,
name: i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.networkTrafficSection.networkTxRateSeriesLabel',
{
defaultMessage: 'out',
}
),
},
}}
/>
</SubSection>
<SubSection
id="containerDiskIOOps"
label={i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.diskIoOpsSection.sectionLabel',
{
defaultMessage: 'Disk IO (Ops)',
}
)}
>
<ChartSectionVis
type="area"
formatterTemplate="{{value}}/s"
formatter="number"
seriesOverrides={{
read: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.diskIoOpsSection.readRateSeriesLabel',
{
defaultMessage: 'reads',
}
),
},
write: {
color: theme.eui.euiColorVis2,
name: i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.diskIoOpsSection.writeRateSeriesLabel',
{
defaultMessage: 'writes',
}
),
},
}}
/>
</SubSection>
<SubSection
id="containerDiskIOBytes"
label={i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.diskIoBytesSection.sectionLabel',
{
defaultMessage: 'Disk IO (Bytes)',
}
)}
>
<ChartSectionVis
type="area"
formatter="bytes"
formatterTemplate="{{value}}/s"
seriesOverrides={{
read: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.diskIoBytesSection.readRateSeriesLabel',
{
defaultMessage: 'reads',
}
),
},
write: {
color: theme.eui.euiColorVis2,
name: i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.diskIoBytesSection.writeRateSeriesLabel',
{
defaultMessage: 'writes',
}
),
},
}}
/>
</SubSection>
</Section>
</LayoutContent>
</React.Fragment>
));

8
x-pack/plugins/infra/common/inventory_models/container/metrics/index.ts
View file

@ -22,6 +22,12 @@ import { containerK8sOverview } from './tsvb/container_k8s_overview';
import { containerK8sCpuUsage } from './tsvb/container_k8s_cpu_usage';
import { containerK8sMemoryUsage } from './tsvb/container_k8s_memory_usage';
const containerSnapshotMetrics = { cpu, memory, rx, tx };
export const containerSnapshotMetricTypes = Object.keys(containerSnapshotMetrics) as Array<
keyof typeof containerSnapshotMetrics
>;
export const metrics: InventoryMetrics = {
tsvb: {
containerOverview,
@ -35,7 +41,7 @@ export const metrics: InventoryMetrics = {
containerK8sOverview,
containerK8sMemoryUsage,
},
snapshot: { cpu, memory, rx, tx },
snapshot: containerSnapshotMetrics,
defaultSnapshot: 'cpu',
defaultTimeRangeInSeconds: 3600, // 1 hour
};

2
x-pack/plugins/infra/common/inventory_models/host/index.ts
View file

@ -13,6 +13,8 @@ import {
nginx as nginxRequireMetrics,
} from '../shared/metrics/required_metrics';
export { hostSnapshotMetricTypes } from './metrics';
export const host: InventoryModel = {
id: 'host',
displayName: i18n.translate('xpack.infra.inventoryModel.host.displayName', {

380
x-pack/plugins/infra/common/inventory_models/host/layout.tsx
View file

@ -1,380 +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 React from 'react';
import { i18n } from '@kbn/i18n';
import { withTheme } from '@kbn/kibana-react-plugin/common';
import type { LayoutPropsWithTheme } from '../../../public/pages/metrics/metric_detail/types';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { Section } from '../../../public/pages/metrics/metric_detail/components/section';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { SubSection } from '../../../public/pages/metrics/metric_detail/components/sub_section';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { GaugesSectionVis } from '../../../public/pages/metrics/metric_detail/components/gauges_section_vis';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { ChartSectionVis } from '../../../public/pages/metrics/metric_detail/components/chart_section_vis';
import * as Aws from '../shared/layouts/aws';
import * as Ngnix from '../shared/layouts/nginx';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { MetadataDetails } from '../../../public/pages/metrics/metric_detail/components/metadata_details';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { LayoutContent } from '../../../public/pages/metrics/metric_detail/components/layout_content';
export const Layout = withTheme(({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
<React.Fragment>
<MetadataDetails
fields={[
'host.hostname',
'host.os.name',
'host.os.kernel',
'host.containerized',
'cloud.provider',
'cloud.availability_zone',
'cloud.machine.type',
'cloud.project.id',
'cloud.instance.id',
'cloud.instance.name',
]}
/>
<LayoutContent>
<Section
navLabel={i18n.translate('xpack.infra.metricDetailPage.hostMetricsLayout.layoutLabel', {
defaultMessage: 'Host',
})}
sectionLabel={i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.overviewSection.sectionLabel',
{
defaultMessage: 'Host Overview',
}
)}
metrics={metrics}
onChangeRangeTime={onChangeRangeTime}
>
<SubSection id="hostSystemOverview">
<GaugesSectionVis
seriesOverrides={{
cpu: {
name: i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.overviewSection.cpuUsageSeriesLabel',
{
defaultMessage: 'CPU Usage',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'percent',
gaugeMax: 1,
},
load: {
name: i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.overviewSection.loadSeriesLabel',
{
defaultMessage: 'Load (5m)',
}
),
color: theme.eui.euiColorFullShade,
},
memory: {
name: i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.overviewSection.memoryCapacitySeriesLabel',
{
defaultMessage: 'Memory Usage',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'percent',
gaugeMax: 1,
},
rx: {
name: i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.overviewSection.inboundRXSeriesLabel',
{
defaultMessage: 'Inbound (RX)',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'bits',
formatterTemplate: '{{value}}/s',
},
tx: {
name: i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.overviewSection.outboundTXSeriesLabel',
{
defaultMessage: 'Outbound (TX)',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'bits',
formatterTemplate: '{{value}}/s',
},
}}
/>
</SubSection>
<SubSection
id="hostCpuUsage"
label={i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.cpuUsageSection.sectionLabel',
{
defaultMessage: 'CPU Usage',
}
)}
>
<ChartSectionVis
stacked={true}
type="area"
formatter="percent"
seriesOverrides={{
user: { color: theme.eui.euiColorVis0 },
system: { color: theme.eui.euiColorVis2 },
steal: { color: theme.eui.euiColorVis9 },
irq: { color: theme.eui.euiColorVis4 },
softirq: { color: theme.eui.euiColorVis6 },
iowait: { color: theme.eui.euiColorVis7 },
nice: { color: theme.eui.euiColorVis5 },
}}
/>
</SubSection>
<SubSection
id="hostLoad"
label={i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.loadSection.sectionLabel',
{
defaultMessage: 'Load',
}
)}
>
<ChartSectionVis
seriesOverrides={{
load_1m: {
color: theme.eui.euiColorVis0,
name: i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.loadSection.oneMinuteSeriesLabel',
{
defaultMessage: '1m',
}
),
},
load_5m: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.loadSection.fiveMinuteSeriesLabel',
{
defaultMessage: '5m',
}
),
},
load_15m: {
color: theme.eui.euiColorVis3,
name: i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.loadSection.fifteenMinuteSeriesLabel',
{
defaultMessage: '15m',
}
),
},
}}
/>
</SubSection>
<SubSection
id="hostMemoryUsage"
label={i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.memoryUsageSection.sectionLabel',
{
defaultMessage: 'Memory Usage',
}
)}
>
<ChartSectionVis
stacked={true}
formatter="bytes"
type="area"
seriesOverrides={{
used: { color: theme.eui.euiColorVis2 },
free: { color: theme.eui.euiColorVis0 },
cache: { color: theme.eui.euiColorVis1 },
}}
/>
</SubSection>
<SubSection
id="hostNetworkTraffic"
label={i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.networkTrafficSection.sectionLabel',
{
defaultMessage: 'Network Traffic',
}
)}
>
<ChartSectionVis
formatter="bits"
formatterTemplate="{{value}}/s"
type="area"
seriesOverrides={{
rx: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.networkTrafficSection.networkRxRateSeriesLabel',
{
defaultMessage: 'in',
}
),
},
tx: {
color: theme.eui.euiColorVis2,
name: i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.networkTrafficSection.networkTxRateSeriesLabel',
{
defaultMessage: 'out',
}
),
},
}}
/>
</SubSection>
</Section>
<Section
navLabel="Kubernetes"
sectionLabel={i18n.translate(
'xpack.infra.metricDetailPage.kubernetesMetricsLayout.overviewSection.sectionLabel',
{
defaultMessage: 'Kubernetes Overview',
}
)}
metrics={metrics}
onChangeRangeTime={onChangeRangeTime}
>
<SubSection id="hostK8sOverview">
<GaugesSectionVis
seriesOverrides={{
cpucap: {
name: i18n.translate(
'xpack.infra.metricDetailPage.kubernetesMetricsLayout.overviewSection.cpuUsageSeriesLabel',
{
defaultMessage: 'CPU Capacity',
}
),
color: 'success',
formatter: 'percent',
gaugeMax: 1,
},
load: {
name: i18n.translate(
'xpack.infra.metricDetailPage.kubernetesMetricsLayout.overviewSection.loadSeriesLabel',
{
defaultMessage: 'Load (5m)',
}
),
color: 'success',
},
memorycap: {
name: i18n.translate(
'xpack.infra.metricDetailPage.kubernetesMetricsLayout.overviewSection.memoryUsageSeriesLabel',
{
defaultMessage: 'Memory Capacity',
}
),
color: 'success',
formatter: 'percent',
gaugeMax: 1,
},
podcap: {
name: i18n.translate(
'xpack.infra.metricDetailPage.kubernetesMetricsLayout.overviewSection.podCapacitySeriesLabel',
{
defaultMessage: 'Pod Capacity',
}
),
color: 'success',
formatter: 'percent',
gaugeMax: 1,
},
diskcap: {
name: i18n.translate(
'xpack.infra.metricDetailPage.kubernetesMetricsLayout.overviewSection.diskCapacitySeriesLabel',
{
defaultMessage: 'Disk Capacity',
}
),
color: 'success',
formatter: 'percent',
gaugeMax: 1,
},
}}
/>
</SubSection>
<SubSection
id="hostK8sCpuCap"
label={i18n.translate(
'xpack.infra.metricDetailPage.kubernetesMetricsLayout.nodeCpuCapacitySection.sectionLabel',
{
defaultMessage: 'Node CPU Capacity',
}
)}
>
<ChartSectionVis
formatter="abbreviatedNumber"
seriesOverrides={{
capacity: { color: theme.eui.euiColorVis2 },
used: { color: theme.eui.euiColorVis1, type: 'area' },
}}
/>
</SubSection>
<SubSection
id="hostK8sMemoryCap"
label={i18n.translate(
'xpack.infra.metricDetailPage.kubernetesMetricsLayout.nodeMemoryCapacitySection.sectionLabel',
{
defaultMessage: 'Node Memory Capacity',
}
)}
>
<ChartSectionVis
formatter="bytes"
seriesOverrides={{
capacity: { color: theme.eui.euiColorVis2 },
used: { color: theme.eui.euiColorVis1, type: 'area' },
}}
/>
</SubSection>
<SubSection
id="hostK8sDiskCap"
label={i18n.translate(
'xpack.infra.metricDetailPage.kubernetesMetricsLayout.nodeDiskCapacitySection.sectionLabel',
{
defaultMessage: 'Node Disk Capacity',
}
)}
>
<ChartSectionVis
formatter="bytes"
seriesOverrides={{
capacity: { color: theme.eui.euiColorVis2 },
used: { color: theme.eui.euiColorVis1, type: 'area' },
}}
/>
</SubSection>
<SubSection
id="hostK8sPodCap"
label={i18n.translate(
'xpack.infra.metricDetailPage.kubernetesMetricsLayout.nodePodCapacitySection.sectionLabel',
{
defaultMessage: 'Node Pod Capacity',
}
)}
>
<ChartSectionVis
formatter="number"
seriesOverrides={{
capacity: { color: theme.eui.euiColorVis2 },
used: { color: theme.eui.euiColorVis1, type: 'area' },
}}
/>
</SubSection>
</Section>
<Aws.Layout metrics={metrics} onChangeRangeTime={onChangeRangeTime} />
<Ngnix.Layout metrics={metrics} onChangeRangeTime={onChangeRangeTime} />
</LayoutContent>
</React.Fragment>
));

10
x-pack/plugins/infra/common/inventory_models/host/metrics/index.ts
View file

@ -33,6 +33,14 @@ import { hostDockerInfo } from './tsvb/host_docker_info';
import { InventoryMetrics } from '../../types';
const exposedHostSnapshotMetrics = { cpu, load, logRate, memory, rx, tx };
// not sure why this is the only model with "count"
const hostSnapshotMetrics = { count, ...exposedHostSnapshotMetrics };
export const hostSnapshotMetricTypes = Object.keys(exposedHostSnapshotMetrics) as Array<
keyof typeof exposedHostSnapshotMetrics
>;
export const metrics: InventoryMetrics = {
tsvb: {
hostSystemOverview,
@ -51,7 +59,7 @@ export const metrics: InventoryMetrics = {
hostDockerTop5ByMemory,
hostDockerTop5ByCpu,
},
snapshot: { count, cpu, load, logRate, memory, rx, tx },
snapshot: hostSnapshotMetrics,
defaultSnapshot: 'cpu',
defaultTimeRangeInSeconds: 3600, // 1 hour
};

52
x-pack/plugins/infra/common/inventory_models/layouts.ts
View file

@ -1,52 +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.
*/
/**
* WHY ARE THE LAYOUTS A SEPERATE FILE?
*
* Files with React can not be included on the server without
* crashing due to the requirement of the `window` object.
*/
import { i18n } from '@kbn/i18n';
import { ReactNode, FunctionComponent } from 'react';
import { Layout as HostLayout } from './host/layout';
import { Layout as PodLayout } from './pod/layout';
import { Layout as ContainerLayout } from './container/layout';
import { Layout as AwsEC2Layout } from './aws_ec2/layout';
import { Layout as AwsS3Layout } from './aws_s3/layout';
import { Layout as AwsRDSLayout } from './aws_rds/layout';
import { Layout as AwsSQSLayout } from './aws_sqs/layout';
import { InventoryItemType } from './types';
import type { LayoutProps } from '../../public/pages/metrics/metric_detail/types';
interface Layouts {
[type: string]: ReactNode;
}
const layouts: Layouts = {
host: HostLayout,
pod: PodLayout,
container: ContainerLayout,
awsEC2: AwsEC2Layout,
awsS3: AwsS3Layout,
awsRDS: AwsRDSLayout,
awsSQS: AwsSQSLayout,
};
export const findLayout = (type: InventoryItemType) => {
const Layout = layouts?.[type];
if (!Layout) {
throw new Error(
i18n.translate('xpack.infra.inventoryModels.findLayout.error', {
defaultMessage: "The layout you've attempted to find does not exist",
})
);
}
return Layout as FunctionComponent<LayoutProps>;
};

2
x-pack/plugins/infra/common/inventory_models/pod/index.ts
View file

@ -10,6 +10,8 @@ import { metrics } from './metrics';
import { InventoryModel } from '../types';
import { nginx as nginxRequiredMetrics } from '../shared/metrics/required_metrics';
export { podSnapshotMetricTypes } from './metrics';
export const pod: InventoryModel = {
id: 'pod',
displayName: i18n.translate('xpack.infra.inventoryModel.pod.displayName', {

168
x-pack/plugins/infra/common/inventory_models/pod/layout.tsx
View file

@ -1,168 +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 React from 'react';
import { i18n } from '@kbn/i18n';
import { withTheme } from '@kbn/kibana-react-plugin/common';
import type { LayoutPropsWithTheme } from '../../../public/pages/metrics/metric_detail/types';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { Section } from '../../../public/pages/metrics/metric_detail/components/section';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { SubSection } from '../../../public/pages/metrics/metric_detail/components/sub_section';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { GaugesSectionVis } from '../../../public/pages/metrics/metric_detail/components/gauges_section_vis';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { ChartSectionVis } from '../../../public/pages/metrics/metric_detail/components/chart_section_vis';
import * as Nginx from '../shared/layouts/nginx';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { MetadataDetails } from '../../../public/pages/metrics/metric_detail/components/metadata_details';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { LayoutContent } from '../../../public/pages/metrics/metric_detail/components/layout_content';
export const Layout = withTheme(({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
<React.Fragment>
<MetadataDetails />
<LayoutContent>
<Section
navLabel={i18n.translate('xpack.infra.metricDetailPage.podMetricsLayout.layoutLabel', {
defaultMessage: 'Pod',
})}
sectionLabel={i18n.translate(
'xpack.infra.metricDetailPage.podMetricsLayout.overviewSection.sectionLabel',
{
defaultMessage: 'Pod Overview',
}
)}
metrics={metrics}
onChangeRangeTime={onChangeRangeTime}
>
<SubSection id="podOverview">
<GaugesSectionVis
seriesOverrides={{
cpu: {
name: i18n.translate(
'xpack.infra.metricDetailPage.podMetricsLayout.overviewSection.cpuUsageSeriesLabel',
{
defaultMessage: 'CPU Usage',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'percent',
gaugeMax: 1,
},
memory: {
name: i18n.translate(
'xpack.infra.metricDetailPage.podMetricsLayout.overviewSection.memoryUsageSeriesLabel',
{
defaultMessage: 'Memory Usage',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'percent',
gaugeMax: 1,
},
rx: {
name: i18n.translate(
'xpack.infra.metricDetailPage.podMetricsLayout.overviewSection.inboundRXSeriesLabel',
{
defaultMessage: 'Inbound (RX)',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'bits',
formatterTemplate: '{{value}}/s',
},
tx: {
name: i18n.translate(
'xpack.infra.metricDetailPage.podMetricsLayout.overviewSection.outboundTXSeriesLabel',
{
defaultMessage: 'Outbound (TX)',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'bits',
formatterTemplate: '{{value}}/s',
},
}}
/>
</SubSection>
<SubSection
id="podCpuUsage"
label={i18n.translate(
'xpack.infra.metricDetailPage.podMetricsLayout.cpuUsageSection.sectionLabel',
{
defaultMessage: 'CPU Usage',
}
)}
>
<ChartSectionVis
formatter="percent"
type="area"
seriesOverrides={{
cpu: { color: theme.eui.euiColorVis1 },
}}
/>
</SubSection>
<SubSection
id="podMemoryUsage"
label={i18n.translate(
'xpack.infra.metricDetailPage.podMetricsLayout.memoryUsageSection.sectionLabel',
{
defaultMessage: 'Memory Usage',
}
)}
>
<ChartSectionVis
type="area"
formatter="percent"
seriesOverrides={{
memory: {
color: theme.eui.euiColorVis1,
},
}}
/>
</SubSection>
<SubSection
id="podNetworkTraffic"
label={i18n.translate(
'xpack.infra.metricDetailPage.podMetricsLayout.networkTrafficSection.sectionLabel',
{
defaultMessage: 'Network Traffic',
}
)}
>
<ChartSectionVis
formatter="bits"
formatterTemplate="{{value}}/s"
type="area"
seriesOverrides={{
rx: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.podMetricsLayout.networkTrafficSection.networkRxRateSeriesLabel',
{
defaultMessage: 'in',
}
),
},
tx: {
color: theme.eui.euiColorVis2,
name: i18n.translate(
'xpack.infra.metricDetailPage.podMetricsLayout.networkTrafficSection.networkTxRateSeriesLabel',
{
defaultMessage: 'out',
}
),
},
}}
/>
</SubSection>
</Section>
<Nginx.Layout metrics={metrics} onChangeRangeTime={onChangeRangeTime} />
</LayoutContent>
</React.Fragment>
));

8
x-pack/plugins/infra/common/inventory_models/pod/metrics/index.ts
View file

@ -17,6 +17,12 @@ import { podMemoryUsage } from './tsvb/pod_memory_usage';
import { podNetworkTraffic } from './tsvb/pod_network_traffic';
import { InventoryMetrics } from '../../types';
const podSnapshotMetrics = { cpu, memory, rx, tx };
export const podSnapshotMetricTypes = Object.keys(podSnapshotMetrics) as Array<
keyof typeof podSnapshotMetrics
>;
export const metrics: InventoryMetrics = {
tsvb: {
podOverview,
@ -25,7 +31,7 @@ export const metrics: InventoryMetrics = {
podNetworkTraffic,
podMemoryUsage,
},
snapshot: { cpu, memory, rx, tx },
snapshot: podSnapshotMetrics,
defaultSnapshot: 'cpu',
defaultTimeRangeInSeconds: 3600, // 1 hour
};

244
x-pack/plugins/infra/common/inventory_models/shared/layouts/aws.tsx
View file

@ -1,244 +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 React from 'react';
import { i18n } from '@kbn/i18n';
import { withTheme } from '@kbn/kibana-react-plugin/common';
import type { LayoutPropsWithTheme } from '../../../../public/pages/metrics/metric_detail/types';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { Section } from '../../../../public/pages/metrics/metric_detail/components/section';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { SubSection } from '../../../../public/pages/metrics/metric_detail/components/sub_section';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { GaugesSectionVis } from '../../../../public/pages/metrics/metric_detail/components/gauges_section_vis';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { ChartSectionVis } from '../../../../public/pages/metrics/metric_detail/components/chart_section_vis';
export const Layout = withTheme(({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
<React.Fragment>
<Section
navLabel="AWS"
sectionLabel={i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.overviewSection.sectionLabel',
{
defaultMessage: 'AWS Overview',
}
)}
metrics={metrics}
onChangeRangeTime={onChangeRangeTime}
>
<SubSection id="awsOverview">
<GaugesSectionVis
seriesOverrides={{
'cpu-util': {
name: i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.overviewSection.cpuUtilizationSeriesLabel',
{
defaultMessage: 'CPU Utilization',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'percent',
gaugeMax: 1,
},
'status-check-failed': {
name: i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.overviewSection.statusCheckFailedLabel',
{
defaultMessage: 'Status check failed',
}
),
color: theme.eui.euiColorFullShade,
},
'packets-in': {
name: i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.overviewSection.networkPacketsInLabel',
{
defaultMessage: 'Packets (in)',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'number',
},
'packets-out': {
name: i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.overviewSection.networkPacketsOutLabel',
{
defaultMessage: 'Packets (out)',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'number',
},
}}
/>
</SubSection>
<SubSection
id="awsCpuUtilization"
label={i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.cpuUtilSection.sectionLabel',
{
defaultMessage: 'CPU Utilization',
}
)}
>
<ChartSectionVis
type="area"
formatter="number"
seriesOverrides={{
'cpu-util': {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.cpuUtilSection.percentSeriesLabel',
{
defaultMessage: 'percent',
}
),
},
}}
/>
</SubSection>
<SubSection
id="awsNetworkBytes"
label={i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.networkBytesSection.sectionLabel',
{
defaultMessage: 'Network Traffic',
}
)}
>
<ChartSectionVis
type="area"
formatter="bits"
formatterTemplate="{{value}}/s"
seriesOverrides={{
tx: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.networkBytesSection.txSeriesLabel',
{
defaultMessage: 'out',
}
),
},
rx: {
color: theme.eui.euiColorVis2,
name: i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.networkBytesSection.rxSeriesLabel',
{
defaultMessage: 'in',
}
),
},
}}
/>
</SubSection>
<SubSection
id="awsNetworkPackets"
label={i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.networkPacketsSection.sectionLabel',
{
defaultMessage: 'Network Packets (Average)',
}
)}
>
<ChartSectionVis
type="area"
formatter="number"
seriesOverrides={{
'packets-out': {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.networkPacketsSection.packetsOutSeriesLabel',
{
defaultMessage: 'out',
}
),
},
'packets-in': {
color: theme.eui.euiColorVis2,
name: i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.networkPacketsSection.packetsInSeriesLabel',
{
defaultMessage: 'in',
}
),
},
}}
/>
</SubSection>
<SubSection
id="awsDiskioOps"
label={i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.diskioOperationsSection.sectionLabel',
{
defaultMessage: 'Disk I/O Operations',
}
)}
>
<ChartSectionVis
type="area"
formatter="number"
seriesOverrides={{
writes: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.diskioOperationsSection.writesSeriesLabel',
{
defaultMessage: 'writes',
}
),
},
reads: {
color: theme.eui.euiColorVis2,
name: i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.diskioOperationsSection.readsSeriesLabel',
{
defaultMessage: 'reads',
}
),
},
}}
/>
</SubSection>
<SubSection
id="awsDiskioBytes"
label={i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.diskioBytesSection.sectionLabel',
{
defaultMessage: 'Disk I/O Bytes',
}
)}
>
<ChartSectionVis
type="area"
formatter="number"
seriesOverrides={{
writes: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.diskioBytesSection.writesSeriesLabel',
{
defaultMessage: 'writes',
}
),
},
reads: {
color: theme.eui.euiColorVis2,
name: i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.diskioBytesSection.readsSeriesLabel',
{
defaultMessage: 'reads',
}
),
},
}}
/>
</SubSection>
</Section>
</React.Fragment>
));

113
x-pack/plugins/infra/common/inventory_models/shared/layouts/nginx.tsx
View file

@ -1,113 +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 React from 'react';
import { i18n } from '@kbn/i18n';
import { withTheme } from '@kbn/kibana-react-plugin/common';
import type { LayoutPropsWithTheme } from '../../../../public/pages/metrics/metric_detail/types';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { Section } from '../../../../public/pages/metrics/metric_detail/components/section';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { SubSection } from '../../../../public/pages/metrics/metric_detail/components/sub_section';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { ChartSectionVis } from '../../../../public/pages/metrics/metric_detail/components/chart_section_vis';
export const Layout = withTheme(({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
<React.Fragment>
<Section
navLabel="Nginx"
sectionLabel="Nginx"
metrics={metrics}
onChangeRangeTime={onChangeRangeTime}
>
<SubSection
id="nginxHits"
label={i18n.translate(
'xpack.infra.metricDetailPage.nginxMetricsLayout.hitsSection.sectionLabel',
{
defaultMessage: 'Hits',
}
)}
>
<ChartSectionVis
stacked={true}
type="bar"
formatter="abbreviatedNumber"
seriesOverrides={{
'200s': { color: theme.eui.euiColorVis1 },
'300s': { color: theme.eui.euiColorVis5 },
'400s': { color: theme.eui.euiColorVis2 },
'500s': { color: theme.eui.euiColorVis9 },
}}
/>
</SubSection>
<SubSection
id="nginxRequestRate"
label={i18n.translate(
'xpack.infra.metricDetailPage.nginxMetricsLayout.requestRateSection.sectionLabel',
{
defaultMessage: 'Request Rate',
}
)}
>
<ChartSectionVis
type="area"
formatter="abbreviatedNumber"
formatterTemplate="{{value}}/s"
seriesOverrides={{
rate: { color: theme.eui.euiColorVis1 },
}}
/>
</SubSection>
<SubSection
id="nginxActiveConnections"
label={i18n.translate(
'xpack.infra.metricDetailPage.nginxMetricsLayout.activeConnectionsSection.sectionLabel',
{
defaultMessage: 'Active Connections',
}
)}
>
<ChartSectionVis
type="area"
formatter="abbreviatedNumber"
seriesOverrides={{
connections: {
color: theme.eui.euiColorVis1,
type: 'bar',
},
}}
/>
</SubSection>
<SubSection
id="nginxRequestsPerConnection"
label={i18n.translate(
'xpack.infra.metricDetailPage.nginxMetricsLayout.requestsPerConnectionsSection.sectionLabel',
{
defaultMessage: 'Requests per Connections',
}
)}
>
<ChartSectionVis
type="bar"
formatter="abbreviatedNumber"
seriesOverrides={{
reqPerConns: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.nginxMetricsLayout.requestsPerConnectionsSection.reqsPerConnSeriesLabel',
{
defaultMessage: 'reqs per conn',
}
),
},
}}
/>
</SubSection>
</Section>
</React.Fragment>
));

44
x-pack/plugins/infra/common/inventory_models/toolbars.ts
View file

@ -1,44 +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 { ReactNode, FunctionComponent } from 'react';
import { i18n } from '@kbn/i18n';
import { InventoryItemType } from './types';
import { HostToolbarItems } from './host/toolbar_items';
import { ContainerToolbarItems } from './container/toolbar_items';
import { PodToolbarItems } from './pod/toolbar_items';
import type { ToolbarProps } from '../../public/pages/metrics/inventory_view/components/toolbars/toolbar';
import { AwsEC2ToolbarItems } from './aws_ec2/toolbar_items';
import { AwsS3ToolbarItems } from './aws_s3/toolbar_items';
import { AwsRDSToolbarItems } from './aws_rds/toolbar_items';
import { AwsSQSToolbarItems } from './aws_sqs/toolbar_items';
interface Toolbars {
[type: string]: ReactNode;
}
const toolbars: Toolbars = {
host: HostToolbarItems,
container: ContainerToolbarItems,
pod: PodToolbarItems,
awsEC2: AwsEC2ToolbarItems,
awsS3: AwsS3ToolbarItems,
awsRDS: AwsRDSToolbarItems,
awsSQS: AwsSQSToolbarItems,
};
export const findToolbar = (type: InventoryItemType) => {
const Toolbar = toolbars?.[type];
if (!Toolbar) {
throw new Error(
i18n.translate('xpack.infra.inventoryModels.findToolbar.error', {
defaultMessage: "The toolbar you've attempted to find does not exist.",
})
);
}
return Toolbar as FunctionComponent<ToolbarProps>;
};

0
x-pack/plugins/infra/server/utils/get_interval_in_seconds.ts → x-pack/plugins/infra/common/utils/get_interval_in_seconds.ts
View file

37
x-pack/plugins/infra/public/alerting/inventory/components/expression.tsx
View file

@ -4,7 +4,6 @@
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import React, { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
import {
EuiButtonEmpty,
EuiButtonIcon,
@ -21,15 +20,16 @@ import {
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
import { debounce, omit } from 'lodash';
import { euiStyled } from '@kbn/kibana-react-plugin/common';
import { TimeUnitChar } from '@kbn/observability-plugin/common/utils/formatters/duration';
import {
ForLastExpression,
IErrorObject,
RuleTypeParamsExpressionProps,
ThresholdExpression,
} from '@kbn/triggers-actions-ui-plugin/public';
import { TimeUnitChar } from '@kbn/observability-plugin/common/utils/formatters/duration';
import { debounce, omit } from 'lodash';
import React, { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
import {
Comparator,
FilterQuery,
@ -41,13 +41,13 @@ import {
SnapshotCustomMetricInputRT,
} from '../../../../common/http_api/snapshot_api';
import { findInventoryModel } from '../../../../common/inventory_models';
import { ec2MetricTypes } from '../../../../common/inventory_models/aws_ec2/toolbar_items';
import { rdsMetricTypes } from '../../../../common/inventory_models/aws_rds/toolbar_items';
import { s3MetricTypes } from '../../../../common/inventory_models/aws_s3/toolbar_items';
import { sqsMetricTypes } from '../../../../common/inventory_models/aws_sqs/toolbar_items';
import { containerMetricTypes } from '../../../../common/inventory_models/container/toolbar_items';
import { hostMetricTypes } from '../../../../common/inventory_models/host/toolbar_items';
import { podMetricTypes } from '../../../../common/inventory_models/pod/toolbar_items';
import { awsEC2SnapshotMetricTypes } from '../../../../common/inventory_models/aws_ec2';
import { awsRDSSnapshotMetricTypes } from '../../../../common/inventory_models/aws_rds';
import { awsS3SnapshotMetricTypes } from '../../../../common/inventory_models/aws_s3';
import { awsSQSSnapshotMetricTypes } from '../../../../common/inventory_models/aws_sqs';
import { containerSnapshotMetricTypes } from '../../../../common/inventory_models/container';
import { hostSnapshotMetricTypes } from '../../../../common/inventory_models/host';
import { podSnapshotMetricTypes } from '../../../../common/inventory_models/pod';
import {
InventoryItemType,
SnapshotMetricType,
@ -545,30 +545,29 @@ export const ExpressionRow: React.FC<ExpressionRowProps> = (props) => {
);
const ofFields = useMemo(() => {
let myMetrics = hostMetricTypes;
let myMetrics: SnapshotMetricType[] = hostSnapshotMetricTypes;
switch (props.nodeType) {
case 'awsEC2':
myMetrics = ec2MetricTypes;
myMetrics = awsEC2SnapshotMetricTypes;
break;
case 'awsRDS':
myMetrics = rdsMetricTypes;
myMetrics = awsRDSSnapshotMetricTypes;
break;
case 'awsS3':
myMetrics = s3MetricTypes;
myMetrics = awsS3SnapshotMetricTypes;
break;
case 'awsSQS':
myMetrics = sqsMetricTypes;
myMetrics = awsSQSSnapshotMetricTypes;
break;
case 'host':
myMetrics = hostMetricTypes;
myMetrics = hostSnapshotMetricTypes;
break;
case 'pod':
myMetrics = podMetricTypes;
myMetrics = podSnapshotMetricTypes;
break;
case 'container':
myMetrics = containerMetricTypes;
myMetrics = containerSnapshotMetricTypes;
break;
}
return myMetrics.map(toMetricOpt);

12
x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/metrics/chart_section.tsx
View file

@ -7,25 +7,25 @@
import {
Axis,
Settings,
Position,
Chart,
ChartSizeArray,
PointerUpdateListener,
Position,
Settings,
TickFormatter,
TooltipValue,
ChartSizeArray,
} from '@elastic/charts';
import React from 'react';
import moment from 'moment';
import { useUiSetting } from '@kbn/kibana-react-plugin/public';
import moment from 'moment';
import React from 'react';
import { MetricsExplorerSeries } from '../../../../../../../../common/http_api';
import { getTimelineChartTheme } from '../../../../../../../utils/get_chart_theme';
import { MetricExplorerSeriesChart } from '../../../../../metrics_explorer/components/series_chart';
import {
MetricsExplorerChartType,
MetricsExplorerOptionsMetric,
} from '../../../../../metrics_explorer/hooks/use_metrics_explorer_options';
import { ChartHeader } from './chart_header';
import { getTimelineChartTheme } from '../../../../../metrics_explorer/components/helpers/get_chart_theme';
const CHART_SIZE: ChartSizeArray = ['100%', 160];

28
x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/processes/process_row_charts.tsx
View file

@ -5,28 +5,28 @@
* 2.0.
*/
import React, { useMemo } from 'react';
import moment from 'moment';
import { first, last } from 'lodash';
import { i18n } from '@kbn/i18n';
import { Axis, Chart, niceTimeFormatter, Position, Settings, TooltipValue } from '@elastic/charts';
import {
EuiDescriptionListTitle,
EuiDescriptionListDescription,
EuiDescriptionListTitle,
EuiEmptyPrompt,
EuiFlexItem,
EuiLoadingChart,
EuiEmptyPrompt,
EuiText,
} from '@elastic/eui';
import { Axis, Chart, Settings, Position, TooltipValue, niceTimeFormatter } from '@elastic/charts';
import { useUiSetting } from '@kbn/kibana-react-plugin/public';
import { i18n } from '@kbn/i18n';
import { euiStyled } from '@kbn/kibana-react-plugin/common';
import { createFormatter } from '../../../../../../../../common/formatters';
import { getChartTheme } from '../../../../../metrics_explorer/components/helpers/get_chart_theme';
import { calculateDomain } from '../../../../../metrics_explorer/components/helpers/calculate_domain';
import { MetricsExplorerChartType } from '../../../../../metrics_explorer/hooks/use_metrics_explorer_options';
import { MetricExplorerSeriesChart } from '../../../../../metrics_explorer/components/series_chart';
import { MetricsExplorerAggregation } from '../../../../../../../../common/http_api';
import { useUiSetting } from '@kbn/kibana-react-plugin/public';
import { first, last } from 'lodash';
import moment from 'moment';
import React, { useMemo } from 'react';
import { Color } from '../../../../../../../../common/color_palette';
import { createFormatter } from '../../../../../../../../common/formatters';
import { MetricsExplorerAggregation } from '../../../../../../../../common/http_api';
import { getChartTheme } from '../../../../../../../utils/get_chart_theme';
import { calculateDomain } from '../../../../../metrics_explorer/components/helpers/calculate_domain';
import { MetricExplorerSeriesChart } from '../../../../../metrics_explorer/components/series_chart';
import { MetricsExplorerChartType } from '../../../../../metrics_explorer/hooks/use_metrics_explorer_options';
import { useProcessListRowChart } from '../../../../hooks/use_process_list_row_chart';
import { Process } from './types';

3
x-pack/plugins/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx
View file

@ -38,9 +38,8 @@ import { useWaffleTimeContext } from '../../hooks/use_waffle_time';
import { useWaffleFiltersContext } from '../../hooks/use_waffle_filters';
import { MetricExplorerSeriesChart } from '../../../metrics_explorer/components/series_chart';
import { MetricsExplorerChartType } from '../../../metrics_explorer/hooks/use_metrics_explorer_options';
import { getTimelineChartTheme } from '../../../metrics_explorer/components/helpers/get_chart_theme';
import { getTimelineChartTheme } from '../../../../../utils/get_chart_theme';
import { calculateDomain } from '../../../metrics_explorer/components/helpers/calculate_domain';
import { InfraFormatter } from '../../../../../lib/lib';
import { useMetricsHostsAnomaliesResults } from '../../hooks/use_metrics_hosts_anomalies';
import { useMetricsK8sAnomaliesResults } from '../../hooks/use_metrics_k8s_anomalies';

18
x-pack/plugins/infra/common/inventory_models/aws_ec2/toolbar_items.tsx → x-pack/plugins/infra/public/pages/metrics/inventory_view/components/toolbars/aws_ec2_toolbar_items.tsx
View file

@ -6,18 +6,10 @@
*/
import React from 'react';
import type { ToolbarProps } from '../../../public/pages/metrics/inventory_view/components/toolbars/toolbar';
import { MetricsAndGroupByToolbarItems } from '../shared/components/metrics_and_groupby_toolbar_items';
import { CloudToolbarItems } from '../shared/components/cloud_toolbar_items';
import { SnapshotMetricType } from '../types';
export const ec2MetricTypes: SnapshotMetricType[] = [
'cpu',
'rx',
'tx',
'diskIOReadBytes',
'diskIOWriteBytes',
];
import { awsEC2SnapshotMetricTypes } from '../../../../../../common/inventory_models/aws_ec2';
import { MetricsAndGroupByToolbarItems } from './metrics_and_groupby_toolbar_items';
import { CloudToolbarItems } from './cloud_toolbar_items';
import { ToolbarProps } from './types';
export const ec2groupByFields = [
'cloud.availability_zone',
@ -32,7 +24,7 @@ export const AwsEC2ToolbarItems = (props: ToolbarProps) => {
<CloudToolbarItems {...props} />
<MetricsAndGroupByToolbarItems
{...props}
metricTypes={ec2MetricTypes}
metricTypes={awsEC2SnapshotMetricTypes}
groupByFields={ec2groupByFields}
/>
</>

18
x-pack/plugins/infra/common/inventory_models/aws_rds/toolbar_items.tsx → x-pack/plugins/infra/public/pages/metrics/inventory_view/components/toolbars/aws_rds_toolbar_items.tsx
View file

@ -6,18 +6,10 @@
*/
import React from 'react';
import type { ToolbarProps } from '../../../public/pages/metrics/inventory_view/components/toolbars/toolbar';
import { MetricsAndGroupByToolbarItems } from '../shared/components/metrics_and_groupby_toolbar_items';
import { CloudToolbarItems } from '../shared/components/cloud_toolbar_items';
import { SnapshotMetricType } from '../types';
export const rdsMetricTypes: SnapshotMetricType[] = [
'cpu',
'rdsConnections',
'rdsQueriesExecuted',
'rdsActiveTransactions',
'rdsLatency',
];
import { awsRDSSnapshotMetricTypes } from '../../../../../../common/inventory_models/aws_rds';
import { CloudToolbarItems } from './cloud_toolbar_items';
import { MetricsAndGroupByToolbarItems } from './metrics_and_groupby_toolbar_items';
import type { ToolbarProps } from './types';
export const rdsGroupByFields = [
'cloud.availability_zone',
@ -31,7 +23,7 @@ export const AwsRDSToolbarItems = (props: ToolbarProps) => {
<CloudToolbarItems {...props} />
<MetricsAndGroupByToolbarItems
{...props}
metricTypes={rdsMetricTypes}
metricTypes={awsRDSSnapshotMetricTypes}
groupByFields={rdsGroupByFields}
/>
</>

18
x-pack/plugins/infra/common/inventory_models/aws_s3/toolbar_items.tsx → x-pack/plugins/infra/public/pages/metrics/inventory_view/components/toolbars/aws_s3_toolbar_items.tsx
View file

@ -6,18 +6,10 @@
*/
import React from 'react';
import type { ToolbarProps } from '../../../public/pages/metrics/inventory_view/components/toolbars/toolbar';
import { MetricsAndGroupByToolbarItems } from '../shared/components/metrics_and_groupby_toolbar_items';
import { CloudToolbarItems } from '../shared/components/cloud_toolbar_items';
import { SnapshotMetricType } from '../types';
export const s3MetricTypes: SnapshotMetricType[] = [
's3BucketSize',
's3NumberOfObjects',
's3TotalRequests',
's3DownloadBytes',
's3UploadBytes',
];
import { awsS3SnapshotMetricTypes } from '../../../../../../common/inventory_models/aws_s3';
import { CloudToolbarItems } from './cloud_toolbar_items';
import { MetricsAndGroupByToolbarItems } from './metrics_and_groupby_toolbar_items';
import type { ToolbarProps } from './types';
export const s3GroupByFields = ['cloud.region'];
@ -27,7 +19,7 @@ export const AwsS3ToolbarItems = (props: ToolbarProps) => {
<CloudToolbarItems {...props} />
<MetricsAndGroupByToolbarItems
{...props}
metricTypes={s3MetricTypes}
metricTypes={awsS3SnapshotMetricTypes}
groupByFields={s3GroupByFields}
/>
</>

17
x-pack/plugins/infra/common/inventory_models/aws_sqs/toolbar_items.tsx → x-pack/plugins/infra/public/pages/metrics/inventory_view/components/toolbars/aws_sqs_toolbar_items.tsx
View file

@ -6,18 +6,11 @@
*/
import React from 'react';
import type { ToolbarProps } from '../../../public/pages/metrics/inventory_view/components/toolbars/toolbar';
import { MetricsAndGroupByToolbarItems } from '../shared/components/metrics_and_groupby_toolbar_items';
import { CloudToolbarItems } from '../shared/components/cloud_toolbar_items';
import { SnapshotMetricType } from '../types';
import { awsSQSSnapshotMetricTypes } from '../../../../../../common/inventory_models/aws_sqs';
import { CloudToolbarItems } from './cloud_toolbar_items';
import { MetricsAndGroupByToolbarItems } from './metrics_and_groupby_toolbar_items';
import type { ToolbarProps } from './types';
export const sqsMetricTypes: SnapshotMetricType[] = [
'sqsMessagesVisible',
'sqsMessagesDelayed',
'sqsMessagesSent',
'sqsMessagesEmpty',
'sqsOldestMessage',
];
export const sqsGroupByFields = ['cloud.region'];
export const AwsSQSToolbarItems = (props: ToolbarProps) => {
@ -26,7 +19,7 @@ export const AwsSQSToolbarItems = (props: ToolbarProps) => {
<CloudToolbarItems {...props} />
<MetricsAndGroupByToolbarItems
{...props}
metricTypes={sqsMetricTypes}
metricTypes={awsSQSSnapshotMetricTypes}
groupByFields={sqsGroupByFields}
/>
</>

14
x-pack/plugins/infra/common/inventory_models/shared/components/cloud_toolbar_items.tsx → x-pack/plugins/infra/public/pages/metrics/inventory_view/components/toolbars/cloud_toolbar_items.tsx
View file

@ -5,17 +5,13 @@
* 2.0.
*/
import React from 'react';
import { EuiFlexItem } from '@elastic/eui';
import type { ToolbarProps } from '../../../../public/pages/metrics/inventory_view/components/toolbars/toolbar';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { WaffleAccountsControls } from '../../../../public/pages/metrics/inventory_view/components/waffle/waffle_accounts_controls';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { WaffleRegionControls } from '../../../../public/pages/metrics/inventory_view/components/waffle/waffle_region_controls';
import React from 'react';
import { WaffleAccountsControls } from '../waffle/waffle_accounts_controls';
import { WaffleRegionControls } from '../waffle/waffle_region_controls';
import type { ToolbarProps } from './types';
type Props = ToolbarProps;
export const CloudToolbarItems = (props: Props) => {
export const CloudToolbarItems = (props: ToolbarProps) => {
return (
<>
{props.accounts.length > 0 && (

9
x-pack/plugins/infra/common/inventory_models/container/toolbar_items.tsx → x-pack/plugins/infra/public/pages/metrics/inventory_view/components/toolbars/container_toolbar_items.tsx
View file

@ -6,11 +6,10 @@
*/
import React from 'react';
import type { ToolbarProps } from '../../../public/pages/metrics/inventory_view/components/toolbars/toolbar';
import { MetricsAndGroupByToolbarItems } from '../shared/components/metrics_and_groupby_toolbar_items';
import { SnapshotMetricType } from '../types';
import { containerSnapshotMetricTypes } from '../../../../../../common/inventory_models/container';
import { MetricsAndGroupByToolbarItems } from './metrics_and_groupby_toolbar_items';
import type { ToolbarProps } from './types';
export const containerMetricTypes: SnapshotMetricType[] = ['cpu', 'memory', 'rx', 'tx'];
export const containerGroupByFields = [
'host.name',
'cloud.availability_zone',
@ -24,7 +23,7 @@ export const ContainerToolbarItems = (props: ToolbarProps) => {
return (
<MetricsAndGroupByToolbarItems
{...props}
metricTypes={containerMetricTypes}
metricTypes={containerSnapshotMetricTypes}
groupByFields={containerGroupByFields}
/>
);

18
x-pack/plugins/infra/common/inventory_models/host/toolbar_items.tsx → x-pack/plugins/infra/public/pages/metrics/inventory_view/components/toolbars/host_toolbar_items.tsx
View file

@ -4,20 +4,11 @@
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import React from 'react';
import type { ToolbarProps } from '../../../public/pages/metrics/inventory_view/components/toolbars/toolbar';
import { MetricsAndGroupByToolbarItems } from '../shared/components/metrics_and_groupby_toolbar_items';
import { SnapshotMetricType } from '../types';
import { hostSnapshotMetricTypes } from '../../../../../../common/inventory_models/host';
import { MetricsAndGroupByToolbarItems } from './metrics_and_groupby_toolbar_items';
import type { ToolbarProps } from './types';
export const hostMetricTypes: SnapshotMetricType[] = [
'cpu',
'memory',
'load',
'rx',
'tx',
'logRate',
];
export const hostGroupByFields = [
'cloud.availability_zone',
'cloud.machine.type',
@ -25,11 +16,12 @@ export const hostGroupByFields = [
'cloud.provider',
'service.type',
];
export const HostToolbarItems = (props: ToolbarProps) => {
return (
<MetricsAndGroupByToolbarItems
{...props}
metricTypes={hostMetricTypes}
metricTypes={hostSnapshotMetricTypes}
groupByFields={hostGroupByFields}
/>
);

22
x-pack/plugins/infra/common/inventory_models/shared/components/metrics_and_groupby_toolbar_items.tsx → x-pack/plugins/infra/public/pages/metrics/inventory_view/components/toolbars/metrics_and_groupby_toolbar_items.tsx
View file

@ -5,21 +5,15 @@
* 2.0.
*/
import React, { useMemo } from 'react';
import { EuiFlexItem } from '@elastic/eui';
import { toMetricOpt } from '../../../snapshot_metric_i18n';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { WaffleSortControls } from '../../../../public/pages/metrics/inventory_view/components/waffle/waffle_sort_controls';
import type { ToolbarProps } from '../../../../public/pages/metrics/inventory_view/components/toolbars/toolbar';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { WaffleMetricControls } from '../../../../public/pages/metrics/inventory_view/components/waffle/metric_control';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { WaffleGroupByControls } from '../../../../public/pages/metrics/inventory_view/components/waffle/waffle_group_by_controls';
import {
toGroupByOpt,
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
} from '../../../../public/pages/metrics/inventory_view/components/toolbars/toolbar_wrapper';
import { SnapshotMetricType } from '../../types';
import React, { useMemo } from 'react';
import { SnapshotMetricType } from '../../../../../../common/inventory_models/types';
import { toMetricOpt } from '../../../../../../common/snapshot_metric_i18n';
import { WaffleMetricControls } from '../waffle/metric_control';
import { WaffleGroupByControls } from '../waffle/waffle_group_by_controls';
import { WaffleSortControls } from '../waffle/waffle_sort_controls';
import { toGroupByOpt } from './toolbar_wrapper';
import type { ToolbarProps } from './types';
interface Props extends ToolbarProps {
metricTypes: SnapshotMetricType[];

9
x-pack/plugins/infra/common/inventory_models/pod/toolbar_items.tsx → x-pack/plugins/infra/public/pages/metrics/inventory_view/components/toolbars/pod_toolbar_items.tsx
View file

@ -6,18 +6,17 @@
*/
import React from 'react';
import type { ToolbarProps } from '../../../public/pages/metrics/inventory_view/components/toolbars/toolbar';
import { MetricsAndGroupByToolbarItems } from '../shared/components/metrics_and_groupby_toolbar_items';
import { SnapshotMetricType } from '../types';
import { podSnapshotMetricTypes } from '../../../../../../common/inventory_models/pod';
import { MetricsAndGroupByToolbarItems } from './metrics_and_groupby_toolbar_items';
import type { ToolbarProps } from './types';
export const podMetricTypes: SnapshotMetricType[] = ['cpu', 'memory', 'rx', 'tx'];
export const podGroupByFields = ['kubernetes.namespace', 'kubernetes.node.name', 'service.type'];
export const PodToolbarItems = (props: ToolbarProps) => {
return (
<MetricsAndGroupByToolbarItems
{...props}
metricTypes={podMetricTypes}
metricTypes={podSnapshotMetricTypes}
groupByFields={podGroupByFields}
/>
);

76
x-pack/plugins/infra/public/pages/metrics/inventory_view/components/toolbars/toolbar.tsx
View file

@ -5,41 +5,30 @@
* 2.0.
*/
import React, { FunctionComponent } from 'react';
import { EuiFlexItem } from '@elastic/eui';
import { useSourceContext } from '../../../../../containers/metrics_source';
import {
SnapshotMetricInput,
SnapshotGroupBy,
SnapshotCustomMetricInput,
} from '../../../../../../common/http_api/snapshot_api';
import { InventoryCloudAccount } from '../../../../../../common/http_api/inventory_meta_api';
import { findToolbar } from '../../../../../../common/inventory_models/toolbars';
import { ToolbarWrapper } from './toolbar_wrapper';
import { InfraGroupByOptions } from '../../../../../lib/lib';
import React from 'react';
import { InventoryItemType } from '../../../../../../common/inventory_models/types';
import { WaffleOptionsState, WaffleSortOption } from '../../hooks/use_waffle_options';
import { useSourceContext } from '../../../../../containers/metrics_source';
import { useInventoryMeta } from '../../hooks/use_inventory_meta';
import { CreateDerivedIndexPattern } from '../../../../../containers/metrics_source';
export interface ToolbarProps extends Omit<WaffleOptionsState, 'boundsOverride' | 'autoBounds'> {
createDerivedIndexPattern: CreateDerivedIndexPattern;
changeMetric: (payload: SnapshotMetricInput) => void;
changeGroupBy: (payload: SnapshotGroupBy) => void;
changeCustomOptions: (payload: InfraGroupByOptions[]) => void;
changeAccount: (id: string) => void;
changeRegion: (name: string) => void;
changeSort: (sort: WaffleSortOption) => void;
accounts: InventoryCloudAccount[];
regions: string[];
changeCustomMetrics: (payload: SnapshotCustomMetricInput[]) => void;
import { AwsEC2ToolbarItems } from './aws_ec2_toolbar_items';
import { AwsRDSToolbarItems } from './aws_rds_toolbar_items';
import { AwsS3ToolbarItems } from './aws_s3_toolbar_items';
import { AwsSQSToolbarItems } from './aws_sqs_toolbar_items';
import { ContainerToolbarItems } from './container_toolbar_items';
import { HostToolbarItems } from './host_toolbar_items';
import { PodToolbarItems } from './pod_toolbar_items';
import { ToolbarWrapper } from './toolbar_wrapper';
import { ToolbarProps } from './types';
interface Props {
nodeType: InventoryItemType;
currentTime: number;
}
const wrapToolbarItems = (
ToolbarItems: FunctionComponent<ToolbarProps>,
accounts: InventoryCloudAccount[],
regions: string[]
) => {
export const Toolbar = ({ nodeType, currentTime }: Props) => {
const { sourceId } = useSourceContext();
const { accounts, regions } = useInventoryMeta(sourceId, nodeType, currentTime);
return (
<ToolbarWrapper>
{(props) => (
@ -52,14 +41,21 @@ const wrapToolbarItems = (
);
};
interface Props {
nodeType: InventoryItemType;
currentTime: number;
}
export const Toolbar = ({ nodeType, currentTime }: Props) => {
const { sourceId } = useSourceContext();
const { accounts, regions } = useInventoryMeta(sourceId, nodeType, currentTime);
const ToolbarItems = findToolbar(nodeType);
return wrapToolbarItems(ToolbarItems, accounts, regions);
export const ToolbarItems = (props: ToolbarProps) => {
switch (props.nodeType) {
case 'awsEC2':
return <AwsEC2ToolbarItems {...props} />;
case 'awsRDS':
return <AwsRDSToolbarItems {...props} />;
case 'awsS3':
return <AwsS3ToolbarItems {...props} />;
case 'awsSQS':
return <AwsSQSToolbarItems {...props} />;
case 'container':
return <ContainerToolbarItems {...props} />;
case 'host':
return <HostToolbarItems {...props} />;
case 'pod':
return <PodToolbarItems {...props} />;
}
};

2
x-pack/plugins/infra/public/pages/metrics/inventory_view/components/toolbars/toolbar_wrapper.tsx
View file

@ -11,7 +11,7 @@ import { fieldToName } from '../../lib/field_to_display_name';
import { useSourceContext } from '../../../../../containers/metrics_source';
import { useWaffleOptionsContext } from '../../hooks/use_waffle_options';
import { WaffleInventorySwitcher } from '../waffle/waffle_inventory_switcher';
import { ToolbarProps } from './toolbar';
import { ToolbarProps } from './types';
interface Props {
children: (props: Omit<ToolbarProps, 'accounts' | 'regions'>) => React.ReactElement;

28
x-pack/plugins/infra/public/pages/metrics/inventory_view/components/toolbars/types.ts Normal file
View file

@ -0,0 +1,28 @@
/*
* 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 { InventoryCloudAccount } from '../../../../../../common/http_api/inventory_meta_api';
import {
SnapshotCustomMetricInput,
SnapshotGroupBy,
SnapshotMetricInput,
} from '../../../../../../common/http_api/snapshot_api';
import { CreateDerivedIndexPattern } from '../../../../../containers/metrics_source';
import { InfraGroupByOptions } from '../../../../../lib/lib';
import { WaffleOptionsState, WaffleSortOption } from '../../hooks/use_waffle_options';
export interface ToolbarProps extends Omit<WaffleOptionsState, 'boundsOverride' | 'autoBounds'> {
createDerivedIndexPattern: CreateDerivedIndexPattern;
changeMetric: (payload: SnapshotMetricInput) => void;
changeGroupBy: (payload: SnapshotGroupBy) => void;
changeCustomOptions: (payload: InfraGroupByOptions[]) => void;
changeAccount: (id: string) => void;
changeRegion: (name: string) => void;
changeSort: (sort: WaffleSortOption) => void;
accounts: InventoryCloudAccount[];
regions: string[];
changeCustomMetrics: (payload: SnapshotCustomMetricInput[]) => void;
}

3
x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_timeline.ts
View file

@ -10,8 +10,7 @@ import { identity } from 'fp-ts/lib/function';
import { pipe } from 'fp-ts/lib/pipeable';
import { first } from 'lodash';
import { useEffect, useMemo, useCallback } from 'react';
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
import { getIntervalInSeconds } from '../../../../../server/utils/get_interval_in_seconds';
import { getIntervalInSeconds } from '../../../../../common/utils/get_interval_in_seconds';
import { throwErrors, createPlainError } from '../../../../../common/runtime_types';
import { useHTTPRequest } from '../../../../hooks/use_http_request';
import {

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

@ -19,7 +19,6 @@ import {
} from '@elastic/charts';
import { EuiPageContentBody } from '@elastic/eui';
import { useUiSetting } from '@kbn/kibana-react-plugin/public';
import { getChartTheme } from '../../metrics_explorer/components/helpers/get_chart_theme';
import { SeriesChart } from './series_chart';
import {
getFormatter,
@ -30,6 +29,7 @@ import {
seriesHasLessThen2DataPoints,
} from './helpers';
import { ErrorMessage } from './error_message';
import { getChartTheme } from '../../../../utils/get_chart_theme';
import { useKibanaUiSetting } from '../../../../utils/use_kibana_ui_setting';
import { VisSectionProps } from '../types';

39
x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layout.tsx Normal file
View file

@ -0,0 +1,39 @@
/*
* 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 React from 'react';
import { InventoryItemType } from '../../../../../common/inventory_models/types';
import { LayoutProps } from '../types';
import { AwsEC2Layout } from './layouts/aws_ec2_layout';
import { AwsRDSLayout } from './layouts/aws_rds_layout';
import { AwsS3Layout } from './layouts/aws_s3_layout';
import { AwsSQSLayout } from './layouts/aws_sqs_layout';
import { ContainerLayout } from './layouts/container_layout';
import { HostLayout } from './layouts/host_layout';
import { PodLayout } from './layouts/pod_layout';
export const Layout = ({
inventoryItemType,
...layoutProps
}: LayoutProps & { inventoryItemType: InventoryItemType }) => {
switch (inventoryItemType) {
case 'awsEC2':
return <AwsEC2Layout {...layoutProps} />;
case 'awsRDS':
return <AwsRDSLayout {...layoutProps} />;
case 'awsS3':
return <AwsS3Layout {...layoutProps} />;
case 'awsSQS':
return <AwsSQSLayout {...layoutProps} />;
case 'container':
return <ContainerLayout {...layoutProps} />;
case 'host':
return <HostLayout {...layoutProps} />;
case 'pod':
return <PodLayout {...layoutProps} />;
}
};

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

@ -0,0 +1,135 @@
/*
* 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 { 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';
export const AwsEC2Layout = withTheme(
({ metrics, theme, onChangeRangeTime }: LayoutPropsWithTheme) => (
<React.Fragment>
<MetadataDetails
fields={[
'cloud.instance.id',
'cloud.provider',
'cloud.availability_zone',
'cloud.machine.type',
'cloud.instance.name',
'cloud.project.id',
]}
/>
<LayoutContent>
<Section
navLabel="AWS EC2"
sectionLabel={i18n.translate(
'xpack.infra.metricDetailPage.ec2MetricsLayout.overviewSection.sectionLabel',
{
defaultMessage: 'Aws EC2 Overview',
}
)}
metrics={metrics}
onChangeRangeTime={onChangeRangeTime}
>
<SubSection
id="awsEC2CpuUtilization"
label={i18n.translate(
'xpack.infra.metricDetailPage.ec2MetricsLayout.cpuUsageSection.sectionLabel',
{
defaultMessage: 'CPU Usage',
}
)}
>
<ChartSectionVis
stacked={true}
type="area"
formatter="percent"
seriesOverrides={{
total: { color: theme.eui.euiColorVis1 },
}}
/>
</SubSection>
<SubSection
id="awsEC2NetworkTraffic"
label={i18n.translate(
'xpack.infra.metricDetailPage.ec2MetricsLayout.networkTrafficSection.sectionLabel',
{
defaultMessage: 'Network Traffic',
}
)}
>
<ChartSectionVis
formatter="bits"
formatterTemplate="{{value}}/s"
type="area"
seriesOverrides={{
rx: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.networkTrafficSection.networkRxRateSeriesLabel',
{
defaultMessage: 'in',
}
),
},
tx: {
color: theme.eui.euiColorVis2,
name: i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.networkTrafficSection.networkTxRateSeriesLabel',
{
defaultMessage: 'out',
}
),
},
}}
/>
</SubSection>
<SubSection
id="awsEC2DiskIOBytes"
label={i18n.translate(
'xpack.infra.metricDetailPage.ec2MetricsLayout.diskIOBytesSection.sectionLabel',
{
defaultMessage: 'Disk IO (Bytes)',
}
)}
>
<ChartSectionVis
formatter="bytes"
formatterTemplate="{{value}}/s"
type="area"
seriesOverrides={{
write: {
color: theme.eui.euiColorVis2,
name: i18n.translate(
'xpack.infra.metricDetailPage.ec2MetricsLayout.diskIOBytesSection.writeLabel',
{
defaultMessage: 'writes',
}
),
},
read: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.ec2MetricsLayout.diskIOBytesSection.readLabel',
{
defaultMessage: 'reads',
}
),
},
}}
/>
</SubSection>
</Section>
</LayoutContent>
</React.Fragment>
)
);

242
x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/aws_layout_sections.tsx Normal file
View file

@ -0,0 +1,242 @@
/*
* 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 { 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 { Section } from '../section';
import { SubSection } from '../sub_section';
export const AwsLayoutSection = withTheme(
({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
<React.Fragment>
<Section
navLabel="AWS"
sectionLabel={i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.overviewSection.sectionLabel',
{
defaultMessage: 'AWS Overview',
}
)}
metrics={metrics}
onChangeRangeTime={onChangeRangeTime}
>
<SubSection id="awsOverview">
<GaugesSectionVis
seriesOverrides={{
'cpu-util': {
name: i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.overviewSection.cpuUtilizationSeriesLabel',
{
defaultMessage: 'CPU Utilization',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'percent',
gaugeMax: 1,
},
'status-check-failed': {
name: i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.overviewSection.statusCheckFailedLabel',
{
defaultMessage: 'Status check failed',
}
),
color: theme.eui.euiColorFullShade,
},
'packets-in': {
name: i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.overviewSection.networkPacketsInLabel',
{
defaultMessage: 'Packets (in)',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'number',
},
'packets-out': {
name: i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.overviewSection.networkPacketsOutLabel',
{
defaultMessage: 'Packets (out)',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'number',
},
}}
/>
</SubSection>
<SubSection
id="awsCpuUtilization"
label={i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.cpuUtilSection.sectionLabel',
{
defaultMessage: 'CPU Utilization',
}
)}
>
<ChartSectionVis
type="area"
formatter="number"
seriesOverrides={{
'cpu-util': {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.cpuUtilSection.percentSeriesLabel',
{
defaultMessage: 'percent',
}
),
},
}}
/>
</SubSection>
<SubSection
id="awsNetworkBytes"
label={i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.networkBytesSection.sectionLabel',
{
defaultMessage: 'Network Traffic',
}
)}
>
<ChartSectionVis
type="area"
formatter="bits"
formatterTemplate="{{value}}/s"
seriesOverrides={{
tx: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.networkBytesSection.txSeriesLabel',
{
defaultMessage: 'out',
}
),
},
rx: {
color: theme.eui.euiColorVis2,
name: i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.networkBytesSection.rxSeriesLabel',
{
defaultMessage: 'in',
}
),
},
}}
/>
</SubSection>
<SubSection
id="awsNetworkPackets"
label={i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.networkPacketsSection.sectionLabel',
{
defaultMessage: 'Network Packets (Average)',
}
)}
>
<ChartSectionVis
type="area"
formatter="number"
seriesOverrides={{
'packets-out': {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.networkPacketsSection.packetsOutSeriesLabel',
{
defaultMessage: 'out',
}
),
},
'packets-in': {
color: theme.eui.euiColorVis2,
name: i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.networkPacketsSection.packetsInSeriesLabel',
{
defaultMessage: 'in',
}
),
},
}}
/>
</SubSection>
<SubSection
id="awsDiskioOps"
label={i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.diskioOperationsSection.sectionLabel',
{
defaultMessage: 'Disk I/O Operations',
}
)}
>
<ChartSectionVis
type="area"
formatter="number"
seriesOverrides={{
writes: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.diskioOperationsSection.writesSeriesLabel',
{
defaultMessage: 'writes',
}
),
},
reads: {
color: theme.eui.euiColorVis2,
name: i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.diskioOperationsSection.readsSeriesLabel',
{
defaultMessage: 'reads',
}
),
},
}}
/>
</SubSection>
<SubSection
id="awsDiskioBytes"
label={i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.diskioBytesSection.sectionLabel',
{
defaultMessage: 'Disk I/O Bytes',
}
)}
>
<ChartSectionVis
type="area"
formatter="number"
seriesOverrides={{
writes: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.diskioBytesSection.writesSeriesLabel',
{
defaultMessage: 'writes',
}
),
},
reads: {
color: theme.eui.euiColorVis2,
name: i18n.translate(
'xpack.infra.metricDetailPage.awsMetricsLayout.diskioBytesSection.readsSeriesLabel',
{
defaultMessage: 'reads',
}
),
},
}}
/>
</SubSection>
</Section>
</React.Fragment>
)
);

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

@ -0,0 +1,188 @@
/*
* 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 { 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',
{
defaultMessage: 'Aws RDS Overview',
}
)}
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>
)
);

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

@ -0,0 +1,151 @@
/*
* 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 React from 'react';
import { i18n } from '@kbn/i18n';
import { withTheme } from '@kbn/kibana-react-plugin/common';
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',
{
defaultMessage: 'Aws S3 Overview',
}
)}
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>
)
);

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

@ -0,0 +1,151 @@
/*
* 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 { 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',
{
defaultMessage: 'Aws SQS Overview',
}
)}
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>
)
);

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

@ -0,0 +1,300 @@
/*
* 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 { 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';
export const ContainerLayout = withTheme(
({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
<React.Fragment>
<MetadataDetails />
<LayoutContent>
<Section
navLabel={i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.layoutLabel',
{
defaultMessage: 'Container',
}
)}
sectionLabel={i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.overviewSection.sectionLabel',
{
defaultMessage: 'Container Overview',
}
)}
metrics={metrics}
onChangeRangeTime={onChangeRangeTime}
>
<SubSection id="containerK8sOverview">
<GaugesSectionVis
seriesOverrides={{
cpu: {
name: i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.overviewSection.cpuUsageSeriesLabel',
{
defaultMessage: 'CPU Usage',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'percent',
gaugeMax: 1,
},
memory: {
name: i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.overviewSection.memoryUsageSeriesLabel',
{
defaultMessage: 'Memory Usage',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'percent',
gaugeMax: 1,
},
}}
/>
</SubSection>
<SubSection id="containerOverview">
<GaugesSectionVis
seriesOverrides={{
cpu: {
name: i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.overviewSection.cpuUsageSeriesLabel',
{
defaultMessage: 'CPU Usage',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'percent',
gaugeMax: 1,
},
memory: {
name: i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.overviewSection.memoryUsageSeriesLabel',
{
defaultMessage: 'Memory Usage',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'percent',
gaugeMax: 1,
},
rx: {
name: i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.overviewSection.inboundRXSeriesLabel',
{
defaultMessage: 'Inbound (RX)',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'bits',
formatterTemplate: '{{value}}/s',
},
tx: {
name: i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.overviewSection.outboundTXSeriesLabel',
{
defaultMessage: 'Outbound (TX)',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'bits',
formatterTemplate: '{{value}}/s',
},
}}
/>
</SubSection>
<SubSection
id="containerK8sCpuUsage"
label={i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.cpuUsageSection.sectionLabel',
{
defaultMessage: 'CPU Usage',
}
)}
>
<ChartSectionVis
stacked={true}
type="area"
formatter="percent"
seriesOverrides={{
cpu: { color: theme.eui.euiColorVis1 },
}}
/>
</SubSection>
<SubSection
id="containerK8sMemoryUsage"
label={i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.memoryUsageSection.sectionLabel',
{
defaultMessage: 'Memory Usage',
}
)}
>
<ChartSectionVis
stacked={true}
type="area"
formatter="percent"
seriesOverrides={{
memory: { color: theme.eui.euiColorVis1 },
}}
/>
</SubSection>
<SubSection
id="containerCpuUsage"
label={i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.cpuUsageSection.sectionLabel',
{
defaultMessage: 'CPU Usage',
}
)}
>
<ChartSectionVis
stacked={true}
type="area"
formatter="percent"
seriesOverrides={{
cpu: { color: theme.eui.euiColorVis1 },
}}
/>
</SubSection>
<SubSection
id="containerMemory"
label={i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.memoryUsageSection.sectionLabel',
{
defaultMessage: 'Memory Usage',
}
)}
>
<ChartSectionVis
stacked={true}
type="area"
formatter="percent"
seriesOverrides={{
memory: { color: theme.eui.euiColorVis1 },
}}
/>
</SubSection>
<SubSection
id="containerNetworkTraffic"
label={i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.networkTrafficSection.sectionLabel',
{
defaultMessage: 'Network Traffic',
}
)}
>
<ChartSectionVis
formatter="bits"
formatterTemplate="{{value}}/s"
type="area"
seriesOverrides={{
rx: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.networkTrafficSection.networkRxRateSeriesLabel',
{
defaultMessage: 'in',
}
),
},
tx: {
color: theme.eui.euiColorVis2,
name: i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.networkTrafficSection.networkTxRateSeriesLabel',
{
defaultMessage: 'out',
}
),
},
}}
/>
</SubSection>
<SubSection
id="containerDiskIOOps"
label={i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.diskIoOpsSection.sectionLabel',
{
defaultMessage: 'Disk IO (Ops)',
}
)}
>
<ChartSectionVis
type="area"
formatterTemplate="{{value}}/s"
formatter="number"
seriesOverrides={{
read: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.diskIoOpsSection.readRateSeriesLabel',
{
defaultMessage: 'reads',
}
),
},
write: {
color: theme.eui.euiColorVis2,
name: i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.diskIoOpsSection.writeRateSeriesLabel',
{
defaultMessage: 'writes',
}
),
},
}}
/>
</SubSection>
<SubSection
id="containerDiskIOBytes"
label={i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.diskIoBytesSection.sectionLabel',
{
defaultMessage: 'Disk IO (Bytes)',
}
)}
>
<ChartSectionVis
type="area"
formatter="bytes"
formatterTemplate="{{value}}/s"
seriesOverrides={{
read: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.diskIoBytesSection.readRateSeriesLabel',
{
defaultMessage: 'reads',
}
),
},
write: {
color: theme.eui.euiColorVis2,
name: i18n.translate(
'xpack.infra.metricDetailPage.containerMetricsLayout.diskIoBytesSection.writeRateSeriesLabel',
{
defaultMessage: 'writes',
}
),
},
}}
/>
</SubSection>
</Section>
</LayoutContent>
</React.Fragment>
)
);

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

@ -0,0 +1,376 @@
/*
* 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 { 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';
import { AwsLayoutSection } from './aws_layout_sections';
import { NginxLayoutSection } from './nginx_layout_sections';
export const HostLayout = withTheme(
({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
<React.Fragment>
<MetadataDetails
fields={[
'host.hostname',
'host.os.name',
'host.os.kernel',
'host.containerized',
'cloud.provider',
'cloud.availability_zone',
'cloud.machine.type',
'cloud.project.id',
'cloud.instance.id',
'cloud.instance.name',
]}
/>
<LayoutContent>
<Section
navLabel={i18n.translate('xpack.infra.metricDetailPage.hostMetricsLayout.layoutLabel', {
defaultMessage: 'Host',
})}
sectionLabel={i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.overviewSection.sectionLabel',
{
defaultMessage: 'Host Overview',
}
)}
metrics={metrics}
onChangeRangeTime={onChangeRangeTime}
>
<SubSection id="hostSystemOverview">
<GaugesSectionVis
seriesOverrides={{
cpu: {
name: i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.overviewSection.cpuUsageSeriesLabel',
{
defaultMessage: 'CPU Usage',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'percent',
gaugeMax: 1,
},
load: {
name: i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.overviewSection.loadSeriesLabel',
{
defaultMessage: 'Load (5m)',
}
),
color: theme.eui.euiColorFullShade,
},
memory: {
name: i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.overviewSection.memoryCapacitySeriesLabel',
{
defaultMessage: 'Memory Usage',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'percent',
gaugeMax: 1,
},
rx: {
name: i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.overviewSection.inboundRXSeriesLabel',
{
defaultMessage: 'Inbound (RX)',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'bits',
formatterTemplate: '{{value}}/s',
},
tx: {
name: i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.overviewSection.outboundTXSeriesLabel',
{
defaultMessage: 'Outbound (TX)',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'bits',
formatterTemplate: '{{value}}/s',
},
}}
/>
</SubSection>
<SubSection
id="hostCpuUsage"
label={i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.cpuUsageSection.sectionLabel',
{
defaultMessage: 'CPU Usage',
}
)}
>
<ChartSectionVis
stacked={true}
type="area"
formatter="percent"
seriesOverrides={{
user: { color: theme.eui.euiColorVis0 },
system: { color: theme.eui.euiColorVis2 },
steal: { color: theme.eui.euiColorVis9 },
irq: { color: theme.eui.euiColorVis4 },
softirq: { color: theme.eui.euiColorVis6 },
iowait: { color: theme.eui.euiColorVis7 },
nice: { color: theme.eui.euiColorVis5 },
}}
/>
</SubSection>
<SubSection
id="hostLoad"
label={i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.loadSection.sectionLabel',
{
defaultMessage: 'Load',
}
)}
>
<ChartSectionVis
seriesOverrides={{
load_1m: {
color: theme.eui.euiColorVis0,
name: i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.loadSection.oneMinuteSeriesLabel',
{
defaultMessage: '1m',
}
),
},
load_5m: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.loadSection.fiveMinuteSeriesLabel',
{
defaultMessage: '5m',
}
),
},
load_15m: {
color: theme.eui.euiColorVis3,
name: i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.loadSection.fifteenMinuteSeriesLabel',
{
defaultMessage: '15m',
}
),
},
}}
/>
</SubSection>
<SubSection
id="hostMemoryUsage"
label={i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.memoryUsageSection.sectionLabel',
{
defaultMessage: 'Memory Usage',
}
)}
>
<ChartSectionVis
stacked={true}
formatter="bytes"
type="area"
seriesOverrides={{
used: { color: theme.eui.euiColorVis2 },
free: { color: theme.eui.euiColorVis0 },
cache: { color: theme.eui.euiColorVis1 },
}}
/>
</SubSection>
<SubSection
id="hostNetworkTraffic"
label={i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.networkTrafficSection.sectionLabel',
{
defaultMessage: 'Network Traffic',
}
)}
>
<ChartSectionVis
formatter="bits"
formatterTemplate="{{value}}/s"
type="area"
seriesOverrides={{
rx: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.networkTrafficSection.networkRxRateSeriesLabel',
{
defaultMessage: 'in',
}
),
},
tx: {
color: theme.eui.euiColorVis2,
name: i18n.translate(
'xpack.infra.metricDetailPage.hostMetricsLayout.networkTrafficSection.networkTxRateSeriesLabel',
{
defaultMessage: 'out',
}
),
},
}}
/>
</SubSection>
</Section>
<Section
navLabel="Kubernetes"
sectionLabel={i18n.translate(
'xpack.infra.metricDetailPage.kubernetesMetricsLayout.overviewSection.sectionLabel',
{
defaultMessage: 'Kubernetes Overview',
}
)}
metrics={metrics}
onChangeRangeTime={onChangeRangeTime}
>
<SubSection id="hostK8sOverview">
<GaugesSectionVis
seriesOverrides={{
cpucap: {
name: i18n.translate(
'xpack.infra.metricDetailPage.kubernetesMetricsLayout.overviewSection.cpuUsageSeriesLabel',
{
defaultMessage: 'CPU Capacity',
}
),
color: 'success',
formatter: 'percent',
gaugeMax: 1,
},
load: {
name: i18n.translate(
'xpack.infra.metricDetailPage.kubernetesMetricsLayout.overviewSection.loadSeriesLabel',
{
defaultMessage: 'Load (5m)',
}
),
color: 'success',
},
memorycap: {
name: i18n.translate(
'xpack.infra.metricDetailPage.kubernetesMetricsLayout.overviewSection.memoryUsageSeriesLabel',
{
defaultMessage: 'Memory Capacity',
}
),
color: 'success',
formatter: 'percent',
gaugeMax: 1,
},
podcap: {
name: i18n.translate(
'xpack.infra.metricDetailPage.kubernetesMetricsLayout.overviewSection.podCapacitySeriesLabel',
{
defaultMessage: 'Pod Capacity',
}
),
color: 'success',
formatter: 'percent',
gaugeMax: 1,
},
diskcap: {
name: i18n.translate(
'xpack.infra.metricDetailPage.kubernetesMetricsLayout.overviewSection.diskCapacitySeriesLabel',
{
defaultMessage: 'Disk Capacity',
}
),
color: 'success',
formatter: 'percent',
gaugeMax: 1,
},
}}
/>
</SubSection>
<SubSection
id="hostK8sCpuCap"
label={i18n.translate(
'xpack.infra.metricDetailPage.kubernetesMetricsLayout.nodeCpuCapacitySection.sectionLabel',
{
defaultMessage: 'Node CPU Capacity',
}
)}
>
<ChartSectionVis
formatter="abbreviatedNumber"
seriesOverrides={{
capacity: { color: theme.eui.euiColorVis2 },
used: { color: theme.eui.euiColorVis1, type: 'area' },
}}
/>
</SubSection>
<SubSection
id="hostK8sMemoryCap"
label={i18n.translate(
'xpack.infra.metricDetailPage.kubernetesMetricsLayout.nodeMemoryCapacitySection.sectionLabel',
{
defaultMessage: 'Node Memory Capacity',
}
)}
>
<ChartSectionVis
formatter="bytes"
seriesOverrides={{
capacity: { color: theme.eui.euiColorVis2 },
used: { color: theme.eui.euiColorVis1, type: 'area' },
}}
/>
</SubSection>
<SubSection
id="hostK8sDiskCap"
label={i18n.translate(
'xpack.infra.metricDetailPage.kubernetesMetricsLayout.nodeDiskCapacitySection.sectionLabel',
{
defaultMessage: 'Node Disk Capacity',
}
)}
>
<ChartSectionVis
formatter="bytes"
seriesOverrides={{
capacity: { color: theme.eui.euiColorVis2 },
used: { color: theme.eui.euiColorVis1, type: 'area' },
}}
/>
</SubSection>
<SubSection
id="hostK8sPodCap"
label={i18n.translate(
'xpack.infra.metricDetailPage.kubernetesMetricsLayout.nodePodCapacitySection.sectionLabel',
{
defaultMessage: 'Node Pod Capacity',
}
)}
>
<ChartSectionVis
formatter="number"
seriesOverrides={{
capacity: { color: theme.eui.euiColorVis2 },
used: { color: theme.eui.euiColorVis1, type: 'area' },
}}
/>
</SubSection>
</Section>
<AwsLayoutSection metrics={metrics} onChangeRangeTime={onChangeRangeTime} />
<NginxLayoutSection metrics={metrics} onChangeRangeTime={onChangeRangeTime} />
</LayoutContent>
</React.Fragment>
)
);

112
x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layouts/nginx_layout_sections.tsx Normal file
View file

@ -0,0 +1,112 @@
/*
* 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 React from 'react';
import { i18n } from '@kbn/i18n';
import { withTheme } from '@kbn/kibana-react-plugin/common';
import type { LayoutPropsWithTheme } from '../../types';
import { Section } from '../section';
import { SubSection } from '../sub_section';
import { ChartSectionVis } from '../chart_section_vis';
export const NginxLayoutSection = withTheme(
({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
<React.Fragment>
<Section
navLabel="Nginx"
sectionLabel="Nginx"
metrics={metrics}
onChangeRangeTime={onChangeRangeTime}
>
<SubSection
id="nginxHits"
label={i18n.translate(
'xpack.infra.metricDetailPage.nginxMetricsLayout.hitsSection.sectionLabel',
{
defaultMessage: 'Hits',
}
)}
>
<ChartSectionVis
stacked={true}
type="bar"
formatter="abbreviatedNumber"
seriesOverrides={{
'200s': { color: theme.eui.euiColorVis1 },
'300s': { color: theme.eui.euiColorVis5 },
'400s': { color: theme.eui.euiColorVis2 },
'500s': { color: theme.eui.euiColorVis9 },
}}
/>
</SubSection>
<SubSection
id="nginxRequestRate"
label={i18n.translate(
'xpack.infra.metricDetailPage.nginxMetricsLayout.requestRateSection.sectionLabel',
{
defaultMessage: 'Request Rate',
}
)}
>
<ChartSectionVis
type="area"
formatter="abbreviatedNumber"
formatterTemplate="{{value}}/s"
seriesOverrides={{
rate: { color: theme.eui.euiColorVis1 },
}}
/>
</SubSection>
<SubSection
id="nginxActiveConnections"
label={i18n.translate(
'xpack.infra.metricDetailPage.nginxMetricsLayout.activeConnectionsSection.sectionLabel',
{
defaultMessage: 'Active Connections',
}
)}
>
<ChartSectionVis
type="area"
formatter="abbreviatedNumber"
seriesOverrides={{
connections: {
color: theme.eui.euiColorVis1,
type: 'bar',
},
}}
/>
</SubSection>
<SubSection
id="nginxRequestsPerConnection"
label={i18n.translate(
'xpack.infra.metricDetailPage.nginxMetricsLayout.requestsPerConnectionsSection.sectionLabel',
{
defaultMessage: 'Requests per Connections',
}
)}
>
<ChartSectionVis
type="bar"
formatter="abbreviatedNumber"
seriesOverrides={{
reqPerConns: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.nginxMetricsLayout.requestsPerConnectionsSection.reqsPerConnSeriesLabel',
{
defaultMessage: 'reqs per conn',
}
),
},
}}
/>
</SubSection>
</Section>
</React.Fragment>
)
);

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

@ -0,0 +1,164 @@
/*
* 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 { 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';
import { NginxLayoutSection } from './nginx_layout_sections';
export const PodLayout = withTheme(
({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
<React.Fragment>
<MetadataDetails />
<LayoutContent>
<Section
navLabel={i18n.translate('xpack.infra.metricDetailPage.podMetricsLayout.layoutLabel', {
defaultMessage: 'Pod',
})}
sectionLabel={i18n.translate(
'xpack.infra.metricDetailPage.podMetricsLayout.overviewSection.sectionLabel',
{
defaultMessage: 'Pod Overview',
}
)}
metrics={metrics}
onChangeRangeTime={onChangeRangeTime}
>
<SubSection id="podOverview">
<GaugesSectionVis
seriesOverrides={{
cpu: {
name: i18n.translate(
'xpack.infra.metricDetailPage.podMetricsLayout.overviewSection.cpuUsageSeriesLabel',
{
defaultMessage: 'CPU Usage',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'percent',
gaugeMax: 1,
},
memory: {
name: i18n.translate(
'xpack.infra.metricDetailPage.podMetricsLayout.overviewSection.memoryUsageSeriesLabel',
{
defaultMessage: 'Memory Usage',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'percent',
gaugeMax: 1,
},
rx: {
name: i18n.translate(
'xpack.infra.metricDetailPage.podMetricsLayout.overviewSection.inboundRXSeriesLabel',
{
defaultMessage: 'Inbound (RX)',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'bits',
formatterTemplate: '{{value}}/s',
},
tx: {
name: i18n.translate(
'xpack.infra.metricDetailPage.podMetricsLayout.overviewSection.outboundTXSeriesLabel',
{
defaultMessage: 'Outbound (TX)',
}
),
color: theme.eui.euiColorFullShade,
formatter: 'bits',
formatterTemplate: '{{value}}/s',
},
}}
/>
</SubSection>
<SubSection
id="podCpuUsage"
label={i18n.translate(
'xpack.infra.metricDetailPage.podMetricsLayout.cpuUsageSection.sectionLabel',
{
defaultMessage: 'CPU Usage',
}
)}
>
<ChartSectionVis
formatter="percent"
type="area"
seriesOverrides={{
cpu: { color: theme.eui.euiColorVis1 },
}}
/>
</SubSection>
<SubSection
id="podMemoryUsage"
label={i18n.translate(
'xpack.infra.metricDetailPage.podMetricsLayout.memoryUsageSection.sectionLabel',
{
defaultMessage: 'Memory Usage',
}
)}
>
<ChartSectionVis
type="area"
formatter="percent"
seriesOverrides={{
memory: {
color: theme.eui.euiColorVis1,
},
}}
/>
</SubSection>
<SubSection
id="podNetworkTraffic"
label={i18n.translate(
'xpack.infra.metricDetailPage.podMetricsLayout.networkTrafficSection.sectionLabel',
{
defaultMessage: 'Network Traffic',
}
)}
>
<ChartSectionVis
formatter="bits"
formatterTemplate="{{value}}/s"
type="area"
seriesOverrides={{
rx: {
color: theme.eui.euiColorVis1,
name: i18n.translate(
'xpack.infra.metricDetailPage.podMetricsLayout.networkTrafficSection.networkRxRateSeriesLabel',
{
defaultMessage: 'in',
}
),
},
tx: {
color: theme.eui.euiColorVis2,
name: i18n.translate(
'xpack.infra.metricDetailPage.podMetricsLayout.networkTrafficSection.networkTxRateSeriesLabel',
{
defaultMessage: 'out',
}
),
},
}}
/>
</SubSection>
</Section>
<NginxLayoutSection metrics={metrics} onChangeRangeTime={onChangeRangeTime} />
</LayoutContent>
</React.Fragment>
)
);

15
x-pack/plugins/infra/public/pages/metrics/metric_detail/components/page_body.tsx
View file

@ -5,15 +5,14 @@
* 2.0.
*/
import React from 'react';
import { i18n } from '@kbn/i18n';
import { findLayout } from '../../../../../common/inventory_models/layouts';
import { InventoryItemType } from '../../../../../common/inventory_models/types';
import { MetricsTimeInput } from '../hooks/use_metrics_time';
import { InfraLoadingPanel } from '../../../../components/loading';
import { NoData } from '../../../../components/empty_states';
import React from 'react';
import { NodeDetailsMetricData } from '../../../../../common/http_api/node_details_api';
import { InventoryItemType } from '../../../../../common/inventory_models/types';
import { NoData } from '../../../../components/empty_states';
import { InfraLoadingPanel } from '../../../../components/loading';
import { MetricsTimeInput } from '../hooks/use_metrics_time';
import { Layout } from './layout';
interface Props {
loading: boolean;
@ -62,9 +61,9 @@ export const PageBody = ({
);
}
const Layout = findLayout(type);
return (
<Layout
inventoryItemType={type}
metrics={metrics}
onChangeRangeTime={onChangeRangeTime}
isLiveStreaming={isLiveStreaming}

29
x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/chart.tsx
View file

@ -5,39 +5,38 @@
* 2.0.
*/
import React, { useCallback, useMemo } from 'react';
import { EuiTitle, EuiToolTip, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import {
Axis,
BrushEndListener,
Chart,
niceTimeFormatter,
Position,
Settings,
TooltipValue,
BrushEndListener,
} from '@elastic/charts';
import { first, last } from 'lodash';
import moment from 'moment';
import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiToolTip } from '@elastic/eui';
import { euiStyled } from '@kbn/kibana-react-plugin/common';
import { useKibana, useUiSetting } from '@kbn/kibana-react-plugin/public';
import { MetricsSourceConfigurationProperties } from '../../../../../common/metrics_sources';
import { first, last } from 'lodash';
import moment from 'moment';
import React, { useCallback, useMemo } from 'react';
import { MetricsExplorerSeries } from '../../../../../common/http_api/metrics_explorer';
import { MetricsSourceConfigurationProperties } from '../../../../../common/metrics_sources';
import { getChartTheme } from '../../../../utils/get_chart_theme';
import { useKibanaUiSetting } from '../../../../utils/use_kibana_ui_setting';
import {
MetricsExplorerChartOptions,
MetricsExplorerOptions,
MetricsExplorerTimeOptions,
MetricsExplorerYAxisMode,
MetricsExplorerChartOptions,
} from '../hooks/use_metrics_explorer_options';
import { createFormatterForMetric } from './helpers/create_formatter_for_metric';
import { MetricExplorerSeriesChart } from './series_chart';
import { MetricsExplorerChartContextMenu } from './chart_context_menu';
import { MetricsExplorerEmptyChart } from './empty_chart';
import { MetricsExplorerNoMetrics } from './no_metrics';
import { getChartTheme } from './helpers/get_chart_theme';
import { useKibanaUiSetting } from '../../../../utils/use_kibana_ui_setting';
import { calculateDomain } from './helpers/calculate_domain';
import { ChartTitle } from './chart_title';
import { MetricsExplorerEmptyChart } from './empty_chart';
import { calculateDomain } from './helpers/calculate_domain';
import { createFormatterForMetric } from './helpers/create_formatter_for_metric';
import { MetricsExplorerNoMetrics } from './no_metrics';
import { MetricExplorerSeriesChart } from './series_chart';
interface Props {
title?: string | null;

0
x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/helpers/get_chart_theme.ts → x-pack/plugins/infra/public/utils/get_chart_theme.ts
View file

2
x-pack/plugins/infra/server/lib/alerting/log_threshold/log_threshold_executor.ts
View file

@ -44,7 +44,7 @@ import {
} from '../../../../common/alerting/logs/log_threshold';
import { decodeOrThrow } from '../../../../common/runtime_types';
import { getLogsAppAlertUrl } from '../../../../common/formatters/alert_link';
import { getIntervalInSeconds } from '../../../utils/get_interval_in_seconds';
import { getIntervalInSeconds } from '../../../../common/utils/get_interval_in_seconds';
import { InfraBackendLibs } from '../../infra_types';
import { UNGROUPED_FACTORY_KEY } from '../common/utils';
import {

2
x-pack/plugins/infra/server/lib/alerting/metric_anomaly/metric_anomaly_executor.ts
View file

@ -17,7 +17,7 @@ import {
import { RuleExecutorOptions } from '@kbn/alerting-plugin/server';
import { MlPluginSetup } from '@kbn/ml-plugin/server';
import { AlertStates, MetricAnomalyParams } from '../../../../common/alerting/metrics';
import { getIntervalInSeconds } from '../../../utils/get_interval_in_seconds';
import { getIntervalInSeconds } from '../../../../common/utils/get_interval_in_seconds';
import { MappedAnomalyHit } from '../../infra_ml';
import { InfraBackendLibs } from '../../infra_types';
import { stateToAlertMessage } from '../common/messages';

10
x-pack/plugins/infra/server/lib/alerting/metric_anomaly/preview_metric_anomaly_alert.ts
View file

@ -7,14 +7,14 @@
import { Unit } from '@kbn/datemath';
import { countBy } from 'lodash';
import { MappedAnomalyHit } from '../../infra_ml';
import { MlSystem, MlAnomalyDetectors } from '../../../types';
import { MetricAnomalyParams } from '../../../../common/alerting/metrics';
import {
TOO_MANY_BUCKETS_PREVIEW_EXCEPTION,
isTooManyBucketsPreviewException,
MetricAnomalyParams,
TOO_MANY_BUCKETS_PREVIEW_EXCEPTION,
} from '../../../../common/alerting/metrics';
import { getIntervalInSeconds } from '../../../utils/get_interval_in_seconds';
import { getIntervalInSeconds } from '../../../../common/utils/get_interval_in_seconds';
import { MlAnomalyDetectors, MlSystem } from '../../../types';
import { MappedAnomalyHit } from '../../infra_ml';
import { evaluateCondition } from './evaluate_condition';
interface PreviewMetricAnomalyAlertParams {

2
x-pack/plugins/infra/server/lib/alerting/metric_threshold/lib/evaluate_rule.ts
View file

@ -10,7 +10,7 @@ import moment from 'moment';
import type { Logger } from '@kbn/logging';
import { MetricExpressionParams } from '../../../../../common/alerting/metrics';
import { InfraSource } from '../../../../../common/source_configuration/source_configuration';
import { getIntervalInSeconds } from '../../../../utils/get_interval_in_seconds';
import { getIntervalInSeconds } from '../../../../../common/utils/get_interval_in_seconds';
import { DOCUMENT_COUNT_I18N } from '../../common/messages';
import { createTimerange } from './create_timerange';
import { getData } from './get_data';

2
x-pack/plugins/translations/translations/fr-FR.json
View file

@ -15432,8 +15432,6 @@
"xpack.infra.inventoryModels.awsSQS.displayName": "Files d'attente SQS",
"xpack.infra.inventoryModels.awsSQS.singularDisplayName": "File d'attente SQS",
"xpack.infra.inventoryModels.findInventoryModel.error": "Le modèle d'inventaire que vous recherchez n'existe pas",
"xpack.infra.inventoryModels.findLayout.error": "La couche que vous recherchez n'existe pas",
"xpack.infra.inventoryModels.findToolbar.error": "La barre d'outils que vous recherchez n'existe pas.",
"xpack.infra.inventoryModels.host.singularDisplayName": "Hôte",
"xpack.infra.inventoryModels.pod.singularDisplayName": "Pod Kubernetes",
"xpack.infra.inventoryTimeline.checkNewDataButtonLabel": "Rechercher de nouvelles données",

2
x-pack/plugins/translations/translations/ja-JP.json
View file

@ -15419,8 +15419,6 @@
"xpack.infra.inventoryModels.awsSQS.displayName": "SQSキュー",
"xpack.infra.inventoryModels.awsSQS.singularDisplayName": "SQS キュー",
"xpack.infra.inventoryModels.findInventoryModel.error": "検索しようとしたインベントリモデルは存在しません",
"xpack.infra.inventoryModels.findLayout.error": "検索しようとしたレイアウトは存在しません",
"xpack.infra.inventoryModels.findToolbar.error": "検索しようとしたツールバーは存在しません。",
"xpack.infra.inventoryModels.host.singularDisplayName": "ホスト",
"xpack.infra.inventoryModels.pod.singularDisplayName": "Kubernetes ポッド",
"xpack.infra.inventoryTimeline.checkNewDataButtonLabel": "新規データを確認",

2
x-pack/plugins/translations/translations/zh-CN.json
View file

@ -15437,8 +15437,6 @@
"xpack.infra.inventoryModels.awsSQS.displayName": "SQS 队列",
"xpack.infra.inventoryModels.awsSQS.singularDisplayName": "SQS 队列",
"xpack.infra.inventoryModels.findInventoryModel.error": "您尝试查找的库存模型不存在",
"xpack.infra.inventoryModels.findLayout.error": "您尝试查找的布局不存在",
"xpack.infra.inventoryModels.findToolbar.error": "您尝试查找的工具栏不存在。",
"xpack.infra.inventoryModels.host.singularDisplayName": "主机",
"xpack.infra.inventoryModels.pod.singularDisplayName": "Kubernetes Pod",
"xpack.infra.inventoryTimeline.checkNewDataButtonLabel": "检查新数据",