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

[Infra UI] Refactor host view and asset details dashboards configuraton (#163918)

Browse source 
closes [#163797](https://github.com/elastic/kibana/issues/163797)

## Summary

This PR extracts the dashboard configuration from the components that
renders them to common. This aims to make discoverability and
maintainability easier.

It doesn't change any functional behaviour


### How to test

- Start a local kibana instance
- Navigate to `Infrastructure` > `hosts`
- Verify if the charts still work as expected
This commit is contained in:
Carlos Crespo 2023-08-16 09:01:48 +02:00 • committed by GitHub
parent a41efea31c
commit ad5c9d805a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
27 changed files with 622 additions and 654 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/kbn-lens-embeddable-utils/attribute_builder/visualization_types/layers/columns/reference_line.ts → packages/kbn-lens-embeddable-utils/attribute_builder/visualization_types/layers/columns/static.ts
View file

@ -10,7 +10,7 @@ import type { PersistedIndexPatternLayer } from '@kbn/lens-plugin/public';
import type { ReferenceBasedIndexPatternColumn } from '@kbn/lens-plugin/public/datasources/form_based/operations/definitions/column_types';
import type { StaticChartColumn, StaticValueConfig } from '../../../types';
export class ReferenceLineColumn implements StaticChartColumn {
export class StaticColumn implements StaticChartColumn {
constructor(private valueConfig: StaticValueConfig) {}
getValueConfig(): StaticValueConfig {

13
packages/kbn-lens-embeddable-utils/attribute_builder/visualization_types/layers/index.ts
View file

@ -6,9 +6,12 @@
* Side Public License, v 1.
*/
export { MetricLayer, type MetricLayerOptions } from './metric_layer';
export { XYDataLayer, type XYLayerOptions } from './xy_data_layer';
export { XYReferenceLinesLayer } from './xy_reference_lines_layer';
export { MetricLayer, type MetricLayerOptions, type MetricLayerConfig } from './metric_layer';
export { XYDataLayer, type XYLayerOptions, type XYLayerConfig } from './xy_data_layer';
export {
XYReferenceLinesLayer,
type XYReferenceLinesLayerConfig,
} from './xy_reference_lines_layer';
export { FormulaColumn as FormulaDataColumn } from './columns/formula';
export { ReferenceLineColumn } from './columns/reference_line';
export { FormulaColumn } from './columns/formula';
export { StaticColumn } from './columns/static';

2
packages/kbn-lens-embeddable-utils/attribute_builder/visualization_types/layers/metric_layer.ts
View file

@ -27,7 +27,7 @@ export interface MetricLayerOptions {
subtitle?: string;
}
interface MetricLayerConfig {
export interface MetricLayerConfig {
data: FormulaValueConfig;
options?: MetricLayerOptions;
/**

2
packages/kbn-lens-embeddable-utils/attribute_builder/visualization_types/layers/xy_data_layer.ts
View file

@ -50,7 +50,7 @@ export interface XYLayerOptions {
seriesType?: SeriesType;
}
interface XYLayerConfig {
export interface XYLayerConfig {
data: FormulaValueConfig[];
options?: XYLayerOptions;
/**

6
packages/kbn-lens-embeddable-utils/attribute_builder/visualization_types/layers/xy_reference_lines_layer.ts
View file

@ -15,9 +15,9 @@ import type {
} from '@kbn/lens-plugin/public';
import type { ChartLayer, StaticValueConfig, StaticChartColumn } from '../../types';
import { getDefaultReferences } from '../../utils';
import { ReferenceLineColumn } from './columns/reference_line';
import { StaticColumn } from './columns/static';
interface XYReferenceLinesLayerConfig {
export interface XYReferenceLinesLayerConfig {
data: StaticValueConfig[];
/**
* It is possible to define a specific dataView for the layer. It will override the global chart one
@ -28,7 +28,7 @@ interface XYReferenceLinesLayerConfig {
export class XYReferenceLinesLayer implements ChartLayer<XYReferenceLineLayerConfig> {
private column: StaticChartColumn[];
constructor(private layerConfig: XYReferenceLinesLayerConfig) {
this.column = layerConfig.data.map((p) => new ReferenceLineColumn(p));
this.column = layerConfig.data.map((p) => new StaticColumn(p));
}
getName(): string | undefined {

7
packages/kbn-lens-embeddable-utils/index.ts
View file

@ -10,15 +10,18 @@ export * from './attribute_builder/types';
export type {
MetricLayerOptions,
MetricLayerConfig,
XYLayerOptions,
XYLayerConfig,
XYReferenceLinesLayerConfig,
XYVisualOptions,
} from './attribute_builder/visualization_types';
export {
FormulaDataColumn,
FormulaColumn,
MetricChart,
MetricLayer,
ReferenceLineColumn,
StaticColumn,
XYChart,
XYDataLayer,
XYReferenceLinesLayer,

1
x-pack/plugins/infra/public/common/visualizations/index.ts
View file

@ -11,4 +11,5 @@ export type {
HostsLensLineChartFormulas,
} from './types';
export * from './lens/dashboards';
export { hostLensFormulas } from './constants';

40
x-pack/plugins/infra/public/common/visualizations/lens/dashboards/host/kpi_grid_config.ts → x-pack/plugins/infra/public/common/visualizations/lens/dashboards/asset_details/host/host_kpi_charts.ts
View file

@ -7,24 +7,16 @@
import { i18n } from '@kbn/i18n';
import type { TypedLensByValueInput } from '@kbn/lens-plugin/public';
import { UseLensAttributesMetricLayerConfig } from '../../../../../hooks/use_lens_attributes';
import { hostLensFormulas } from '../../../constants';
import { TOOLTIP } from './translations';
export const KPI_CHART_HEIGHT = 150;
export const AVERAGE_SUBTITLE = i18n.translate(
'xpack.infra.assetDetailsEmbeddable.overview.kpi.subtitle.average',
{
defaultMessage: 'Average',
}
);
import { hostLensFormulas } from '../../../../constants';
import type { MetricChartLayerParams } from '../../../../types';
import { METRICS_TOOLTIP } from '../../translations';
export interface KPIChartProps extends Pick<TypedLensByValueInput, 'id' | 'title' | 'overrides'> {
layers: UseLensAttributesMetricLayerConfig;
layers: MetricChartLayerParams;
toolTip: string;
}
export const KPI_CHARTS: KPIChartProps[] = [
export const hostKPICharts: KPIChartProps[] = [
{
id: 'cpuUsage',
title: i18n.translate('xpack.infra.assetDetailsEmbeddable.overview.kpi.cpuUsage.title', {
@ -42,20 +34,20 @@ export const KPI_CHARTS: KPIChartProps[] = [
}
: undefined,
},
layerType: 'data',
options: {
backgroundColor: '#F1D86F',
showTrendLine: true,
},
type: 'visualization',
},
toolTip: TOOLTIP.cpuUsage,
toolTip: METRICS_TOOLTIP.cpuUsage,
},
{
id: 'normalizedLoad1m',
title: i18n.translate(
'xpack.infra.assetDetailsEmbeddable.overview.kpi.normalizedLoad1m.title',
{
defaultMessage: 'CPU Usage',
defaultMessage: 'Normalized Load',
}
),
layers: {
@ -70,18 +62,18 @@ export const KPI_CHARTS: KPIChartProps[] = [
}
: undefined,
},
layerType: 'data',
options: {
backgroundColor: '#79AAD9',
showTrendLine: true,
},
type: 'visualization',
},
toolTip: TOOLTIP.normalizedLoad1m,
toolTip: METRICS_TOOLTIP.normalizedLoad1m,
},
{
id: 'memoryUsage',
title: i18n.translate('xpack.infra.assetDetailsEmbeddable.overview.kpi.memoryUsage.title', {
defaultMessage: 'CPU Usage',
defaultMessage: 'Memory Usage',
}),
layers: {
data: {
@ -95,18 +87,18 @@ export const KPI_CHARTS: KPIChartProps[] = [
}
: undefined,
},
layerType: 'data',
options: {
backgroundColor: '#A987D1',
showTrendLine: true,
},
type: 'visualization',
},
toolTip: TOOLTIP.memoryUsage,
toolTip: METRICS_TOOLTIP.memoryUsage,
},
{
id: 'diskSpaceUsage',
title: i18n.translate('xpack.infra.assetDetailsEmbeddable.overview.kpi.diskSpaceUsage.title', {
defaultMessage: 'CPU Usage',
defaultMessage: 'Disk Space Usage',
}),
layers: {
data: {
@ -120,12 +112,12 @@ export const KPI_CHARTS: KPIChartProps[] = [
}
: undefined,
},
layerType: 'data',
options: {
backgroundColor: '#F5A35C',
showTrendLine: true,
},
type: 'visualization',
},
toolTip: TOOLTIP.diskSpaceUsage,
toolTip: METRICS_TOOLTIP.diskSpaceUsage,
},
];

217
x-pack/plugins/infra/public/common/visualizations/lens/dashboards/asset_details/host/host_metric_charts.ts Normal file
View file

@ -0,0 +1,217 @@
/*
* 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 type { TypedLensByValueInput } from '@kbn/lens-plugin/public';
import { hostLensFormulas } from '../../../../constants';
import type { XYChartLayerParams } from '../../../../types';
import { REFERENCE_LINE, XY_OVERRIDES } from '../../constants';
type DataViewOrigin = 'logs' | 'metrics';
export const hostMetricCharts: Array<
Pick<TypedLensByValueInput, 'id' | 'title' | 'overrides'> & {
dataViewOrigin: DataViewOrigin;
layers: XYChartLayerParams[];
}
> = [
{
id: 'cpuUsage',
title: i18n.translate('xpack.infra.assetDetails.metricsCharts.cpuUsage', {
defaultMessage: 'CPU Usage',
}),
layers: [
{
data: [hostLensFormulas.cpuUsage],
type: 'visualization',
},
],
dataViewOrigin: 'metrics',
overrides: {
axisLeft: XY_OVERRIDES.axisLeft,
},
},
{
id: 'memoryUsage',
title: i18n.translate('xpack.infra.assetDetails.metricsCharts.memoryUsage', {
defaultMessage: 'Memory Usage',
}),
layers: [
{
data: [hostLensFormulas.memoryUsage],
type: 'visualization',
},
],
dataViewOrigin: 'metrics',
overrides: {
axisLeft: XY_OVERRIDES.axisLeft,
},
},
{
id: 'normalizedLoad1m',
title: i18n.translate('xpack.infra.assetDetails.metricsCharts.normalizedLoad1m', {
defaultMessage: 'Normalized Load',
}),
layers: [
{
data: [hostLensFormulas.normalizedLoad1m],
type: 'visualization',
},
{
data: [REFERENCE_LINE],
type: 'referenceLines',
},
],
dataViewOrigin: 'metrics',
},
{
id: 'logRate',
title: i18n.translate('xpack.infra.assetDetails.metricsCharts.logRate', {
defaultMessage: 'Log Rate',
}),
layers: [
{
data: [hostLensFormulas.logRate],
type: 'visualization',
},
],
dataViewOrigin: 'logs',
},
{
id: 'diskSpaceUsageAvailable',
title: i18n.translate('xpack.infra.assetDetails.metricsCharts.diskSpace', {
defaultMessage: 'Disk Space',
}),
layers: [
{
data: [
{
...hostLensFormulas.diskSpaceUsage,
label: i18n.translate('xpack.infra.assetDetails.metricsCharts.diskSpace.label.used', {
defaultMessage: 'Used',
}),
},
{
...hostLensFormulas.diskSpaceAvailability,
label: i18n.translate(
'xpack.infra.assetDetails.metricsCharts.diskSpace.label.available',
{
defaultMessage: 'Available',
}
),
},
],
options: {
seriesType: 'area',
},
type: 'visualization',
},
],
overrides: {
axisLeft: XY_OVERRIDES.axisLeft,
settings: XY_OVERRIDES.settings,
},
dataViewOrigin: 'metrics',
},
{
id: 'diskThroughputReadWrite',
title: i18n.translate('xpack.infra.assetDetails.metricsCharts.diskIOPS', {
defaultMessage: 'Disk IOPS',
}),
layers: [
{
data: [
{
...hostLensFormulas.diskIORead,
label: i18n.translate('xpack.infra.assetDetails.metricsCharts.metric.label.read', {
defaultMessage: 'Read',
}),
},
{
...hostLensFormulas.diskIOWrite,
label: i18n.translate('xpack.infra.assetDetails.metricsCharts.metric.label.write', {
defaultMessage: 'Write',
}),
},
],
options: {
seriesType: 'area',
},
type: 'visualization',
},
],
overrides: {
settings: XY_OVERRIDES.settings,
},
dataViewOrigin: 'metrics',
},
{
id: 'diskIOReadWrite',
title: i18n.translate('xpack.infra.assetDetails.metricsCharts.diskThroughput', {
defaultMessage: 'Disk Throughput',
}),
layers: [
{
data: [
{
...hostLensFormulas.diskReadThroughput,
label: i18n.translate('xpack.infra.assetDetails.metricsCharts.metric.label.read', {
defaultMessage: 'Read',
}),
},
{
...hostLensFormulas.diskWriteThroughput,
label: i18n.translate('xpack.infra.assetDetails.metricsCharts.metric.label.write', {
defaultMessage: 'Write',
}),
},
],
options: {
seriesType: 'area',
},
type: 'visualization',
},
],
overrides: {
settings: XY_OVERRIDES.settings,
},
dataViewOrigin: 'metrics',
},
{
id: 'rxTx',
title: i18n.translate('xpack.infra.assetDetails.metricsCharts.network', {
defaultMessage: 'Network',
}),
layers: [
{
data: [
{
...hostLensFormulas.rx,
label: i18n.translate('xpack.infra.assetDetails.metricsCharts.network.label.rx', {
defaultMessage: 'Inbound (RX)',
}),
},
{
...hostLensFormulas.tx,
label: i18n.translate('xpack.infra.assetDetails.metricsCharts.network.label.tx', {
defaultMessage: 'Outbound (TX)',
}),
},
],
options: {
seriesType: 'area',
},
type: 'visualization',
},
],
overrides: {
settings: XY_OVERRIDES.settings,
},
dataViewOrigin: 'metrics',
},
];

14
x-pack/plugins/infra/public/common/visualizations/lens/dashboards/asset_details/index.ts Normal file
View file

@ -0,0 +1,14 @@
/*
* 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 { hostMetricCharts } from './host/host_metric_charts';
import { hostKPICharts, KPIChartProps } from './host/host_kpi_charts';
export { type KPIChartProps };
export const assetDetailsDashboards = {
host: { hostMetricCharts, hostKPICharts },
};

46
x-pack/plugins/infra/public/common/visualizations/lens/dashboards/constants.ts Normal file
View file

@ -0,0 +1,46 @@
/*
* 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 type { StaticValueConfig, XYVisualOptions } from '@kbn/lens-embeddable-utils';
import type { AllowedSettingsOverrides, AllowedXYOverrides } from '@kbn/lens-plugin/common/types';
interface XYOverrides {
axisLeft: AllowedXYOverrides['axisLeft'];
settings: AllowedSettingsOverrides['settings'];
}
export const REFERENCE_LINE: StaticValueConfig = {
value: '1',
format: {
id: 'percent',
params: {
decimals: 0,
},
},
color: '#6092c0',
};
export const XY_OVERRIDES: XYOverrides = {
axisLeft: {
domain: {
min: 0,
max: 1,
},
},
settings: {
showLegend: true,
legendPosition: 'bottom',
legendSize: 35,
},
};
export const XY_MISSING_VALUE_DOTTED_LINE_CONFIG: XYVisualOptions = {
showDottedLine: true,
missingValues: 'Linear',
};
export const KPI_CHART_HEIGHT = 150;

189
x-pack/plugins/infra/public/common/visualizations/lens/dashboards/hosts_view/hosts_metric_charts.ts Normal file
View file

@ -0,0 +1,189 @@
/*
* 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 type { XYLayerOptions } from '@kbn/lens-embeddable-utils';
import type { TypedLensByValueInput } from '@kbn/lens-plugin/public';
import { hostLensFormulas } from '../../../constants';
import type { XYChartLayerParams } from '../../../types';
import { REFERENCE_LINE, XY_OVERRIDES } from '../constants';
const XY_LAYER_OPTIONS: XYLayerOptions = {
breakdown: {
type: 'top_values',
field: 'host.name',
params: {
size: 20,
},
},
};
export const hostsMetricCharts: Array<
Pick<TypedLensByValueInput, 'id' | 'title' | 'overrides'> & {
layers: XYChartLayerParams[];
}
> = [
{
id: 'cpuUsage',
title: i18n.translate('xpack.infra.hostsViewPage.tabs.metricsCharts.cpuUsage', {
defaultMessage: 'CPU Usage',
}),
layers: [
{ data: [hostLensFormulas.cpuUsage], options: XY_LAYER_OPTIONS, type: 'visualization' },
],
overrides: { axisLeft: XY_OVERRIDES.axisLeft },
},
{
id: 'normalizedLoad1m',
title: i18n.translate('xpack.infra.hostsViewPage.tabs.metricsCharts.normalizedLoad1m', {
defaultMessage: 'Normalized Load',
}),
layers: [
{
data: [hostLensFormulas.normalizedLoad1m],
options: XY_LAYER_OPTIONS,
type: 'visualization',
},
{
data: [REFERENCE_LINE],
type: 'referenceLines',
},
],
},
{
id: 'memoryUsage',
title: i18n.translate('xpack.infra.hostsViewPage.tabs.metricsCharts.memoryUsage', {
defaultMessage: 'Memory Usage',
}),
layers: [
{
data: [hostLensFormulas.memoryUsage],
options: XY_LAYER_OPTIONS,
type: 'visualization',
},
],
overrides: { axisLeft: XY_OVERRIDES.axisLeft },
},
{
id: 'memoryFree',
title: i18n.translate('xpack.infra.hostsViewPage.tabs.metricsCharts.memoryFree', {
defaultMessage: 'Memory Free',
}),
layers: [
{
data: [hostLensFormulas.memoryFree],
options: XY_LAYER_OPTIONS,
type: 'visualization',
},
],
},
{
id: 'diskSpaceUsed',
title: i18n.translate('xpack.infra.hostsViewPage.tabs.metricsCharts.diskSpaceUsed', {
defaultMessage: 'Disk Space Usage',
}),
layers: [
{
data: [hostLensFormulas.diskSpaceUsage],
options: XY_LAYER_OPTIONS,
type: 'visualization',
},
],
overrides: { axisLeft: XY_OVERRIDES.axisLeft },
},
{
id: 'diskSpaceAvailable',
title: i18n.translate('xpack.infra.hostsViewPage.tabs.metricsCharts.diskSpaceAvailable', {
defaultMessage: 'Disk Space Available',
}),
layers: [
{
data: [hostLensFormulas.diskSpaceAvailable],
options: XY_LAYER_OPTIONS,
type: 'visualization',
},
],
},
{
id: 'diskIORead',
title: i18n.translate('xpack.infra.hostsViewPage.tabs.metricsCharts.diskIORead', {
defaultMessage: 'Disk Read IOPS',
}),
layers: [
{
data: [hostLensFormulas.diskIORead],
options: XY_LAYER_OPTIONS,
type: 'visualization',
},
],
},
{
id: 'diskIOWrite',
title: i18n.translate('xpack.infra.hostsViewPage.tabs.metricsCharts.diskIOWrite', {
defaultMessage: 'Disk Write IOPS',
}),
layers: [
{
data: [hostLensFormulas.diskIOWrite],
options: XY_LAYER_OPTIONS,
type: 'visualization',
},
],
},
{
id: 'diskReadThroughput',
title: i18n.translate('xpack.infra.hostsViewPage.tabs.metricsCharts.diskReadThroughput', {
defaultMessage: 'Disk Read Throughput',
}),
layers: [
{
data: [hostLensFormulas.diskReadThroughput],
options: XY_LAYER_OPTIONS,
type: 'visualization',
},
],
},
{
id: 'diskWriteThroughput',
title: i18n.translate('xpack.infra.hostsViewPage.tabs.metricsCharts.diskWriteThroughput', {
defaultMessage: 'Disk Write Throughput',
}),
layers: [
{
data: [hostLensFormulas.diskWriteThroughput],
options: XY_LAYER_OPTIONS,
type: 'visualization',
},
],
},
{
id: 'rx',
title: i18n.translate('xpack.infra.hostsViewPage.tabs.metricsCharts.rx', {
defaultMessage: 'Network Inbound (RX)',
}),
layers: [
{
data: [hostLensFormulas.rx],
options: XY_LAYER_OPTIONS,
type: 'visualization',
},
],
},
{
id: 'tx',
title: i18n.translate('xpack.infra.hostsViewPage.tabs.metricsCharts.tx', {
defaultMessage: 'Network Outbound (TX)',
}),
layers: [
{
data: [hostLensFormulas.tx],
options: XY_LAYER_OPTIONS,
type: 'visualization',
},
],
},
];

12
x-pack/plugins/infra/public/common/visualizations/lens/dashboards/hosts_view/index.ts Normal file
View file

@ -0,0 +1,12 @@
/*
* 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 { hostsMetricCharts } from './hosts_metric_charts';
export const hostsViewDashboards = {
hostsMetricCharts,
};

11
x-pack/plugins/infra/public/common/visualizations/lens/dashboards/index.ts Normal file
View file

@ -0,0 +1,11 @@
/*
* 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.
*/
export { assetDetailsDashboards, type KPIChartProps } from './asset_details';
export { hostsViewDashboards } from './hosts_view';
export { AVERAGE_SUBTITLE, METRICS_TOOLTIP } from './translations';
export { XY_MISSING_VALUE_DOTTED_LINE_CONFIG, KPI_CHART_HEIGHT } from './constants';

9
x-pack/plugins/infra/public/common/visualizations/lens/dashboards/host/translations.ts → x-pack/plugins/infra/public/common/visualizations/lens/dashboards/translations.ts
View file

@ -7,7 +7,7 @@
import { i18n } from '@kbn/i18n';
export const TOOLTIP = {
export const METRICS_TOOLTIP = {
hostCount: i18n.translate('xpack.infra.hostsViewPage.metrics.tooltip.hostCount', {
defaultMessage: 'Number of hosts returned by your search criteria.',
}),
@ -43,3 +43,10 @@ export const TOOLTIP = {
'Number of bytes which have been sent per second on the public interfaces of the hosts.',
}),
};
export const AVERAGE_SUBTITLE = i18n.translate(
'xpack.infra.assetDetailsEmbeddable.overview.kpi.subtitle.average',
{
defaultMessage: 'Average',
}
);

11
x-pack/plugins/infra/public/common/visualizations/types.ts
View file

@ -5,8 +5,19 @@
* 2.0.
*/
import type {
MetricLayerConfig,
XYLayerConfig,
XYReferenceLinesLayerConfig,
} from '@kbn/lens-embeddable-utils';
import { hostLensFormulas } from './constants';
export type HostsLensFormulas = keyof typeof hostLensFormulas;
export type HostsLensMetricChartFormulas = Exclude<HostsLensFormulas, 'diskIORead' | 'diskIOWrite'>;
export type HostsLensLineChartFormulas = Exclude<HostsLensFormulas, 'hostCount'>;
export type XYChartLayerParams =
| (XYLayerConfig & { type: 'visualization' })
| (XYReferenceLinesLayerConfig & { type: 'referenceLines' });
export type MetricChartLayerParams = MetricLayerConfig & { type: 'visualization' };

6
x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/kpi_grid.tsx
View file

@ -12,10 +12,10 @@ import type { TimeRange } from '@kbn/es-query';
import { LensChart, TooltipContent } from '../../../../lens';
import { buildCombinedHostsFilter } from '../../../../../utils/filters/build';
import {
KPI_CHARTS,
assetDetailsDashboards,
KPI_CHART_HEIGHT,
AVERAGE_SUBTITLE,
} from '../../../../../common/visualizations/lens/dashboards/host/kpi_grid_config';
} from '../../../../../common/visualizations';
interface Props {
dataView?: DataView;
@ -36,7 +36,7 @@ export const KPIGrid = React.memo(({ nodeName, dataView, timeRange }: Props) =>
return (
<EuiFlexGroup direction="row" gutterSize="s" data-test-subj="infraAssetDetailsKPIGrid">
{KPI_CHARTS.map(({ id, layers, title, toolTip }, index) => (
{assetDetailsDashboards.host.hostKPICharts.map(({ id, layers, title, toolTip }, index) => (
<EuiFlexItem key={index}>
<LensChart
id={`infraAssetDetailsKPI${id}`}

305
x-pack/plugins/infra/public/components/asset_details/tabs/overview/metrics/metrics_grid.tsx
View file

@ -7,274 +7,21 @@
import React, { useCallback } from 'react';
import { EuiFlexGrid, EuiFlexItem, EuiTitle, EuiSpacer, EuiFlexGroup } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import type { DataView } from '@kbn/data-views-plugin/public';
import type { TimeRange } from '@kbn/es-query';
import { FormattedMessage } from '@kbn/i18n-react';
import type { XYVisualOptions } from '@kbn/lens-embeddable-utils';
import { UseLensAttributesXYLayerConfig } from '../../../../../hooks/use_lens_attributes';
import {
assetDetailsDashboards,
XY_MISSING_VALUE_DOTTED_LINE_CONFIG,
} from '../../../../../common/visualizations';
import { buildCombinedHostsFilter } from '../../../../../utils/filters/build';
import { LensChart, type LensChartProps, HostMetricsExplanationContent } from '../../../../lens';
import { hostLensFormulas } from '../../../../../common/visualizations';
import { LensChart, HostMetricsExplanationContent } from '../../../../lens';
import { METRIC_CHART_HEIGHT } from '../../../constants';
import { Popover } from '../../common/popover';
type DataViewOrigin = 'logs' | 'metrics';
interface MetricChartConfig extends Pick<LensChartProps, 'id' | 'title' | 'overrides'> {
layers: UseLensAttributesXYLayerConfig;
toolTip: string;
}
const PERCENT_LEFT_AXIS: Pick<MetricChartConfig, 'overrides'>['overrides'] = {
axisLeft: {
domain: {
min: 0,
max: 1,
},
},
};
const LEGEND_SETTINGS: Pick<MetricChartConfig, 'overrides'>['overrides'] = {
settings: {
showLegend: true,
legendPosition: 'bottom',
legendSize: 35,
},
};
const XY_VISUAL_OPTIONS: XYVisualOptions = {
showDottedLine: true,
missingValues: 'Linear',
};
const CHARTS_IN_ORDER: Array<
Pick<MetricChartConfig, 'id' | 'title' | 'layers' | 'overrides'> & {
dataViewOrigin: DataViewOrigin;
}
> = [
{
id: 'cpuUsage',
title: i18n.translate('xpack.infra.assetDetails.metricsCharts.cpuUsage', {
defaultMessage: 'CPU Usage',
}),
layers: [
{
data: [hostLensFormulas.cpuUsage],
layerType: 'data',
},
],
dataViewOrigin: 'metrics',
overrides: {
axisLeft: PERCENT_LEFT_AXIS.axisLeft,
},
},
{
id: 'memoryUsage',
title: i18n.translate('xpack.infra.assetDetails.metricsCharts.memoryUsage', {
defaultMessage: 'Memory Usage',
}),
layers: [
{
data: [hostLensFormulas.memoryUsage],
layerType: 'data',
},
],
dataViewOrigin: 'metrics',
overrides: {
axisLeft: PERCENT_LEFT_AXIS.axisLeft,
},
},
{
id: 'normalizedLoad1m',
title: i18n.translate('xpack.infra.assetDetails.metricsCharts.normalizedLoad1m', {
defaultMessage: 'Normalized Load',
}),
layers: [
{
data: [hostLensFormulas.normalizedLoad1m],
layerType: 'data',
},
{
data: [
{
value: '1',
format: {
id: 'percent',
params: {
decimals: 0,
},
},
color: '#6092c0',
},
],
layerType: 'referenceLine',
},
],
dataViewOrigin: 'metrics',
},
{
id: 'logRate',
title: i18n.translate('xpack.infra.assetDetails.metricsCharts.logRate', {
defaultMessage: 'Log Rate',
}),
layers: [
{
data: [hostLensFormulas.logRate],
layerType: 'data',
},
],
dataViewOrigin: 'logs',
},
{
id: 'diskSpaceUsageAvailable',
title: i18n.translate('xpack.infra.assetDetails.metricsCharts.diskSpace', {
defaultMessage: 'Disk Space',
}),
layers: [
{
data: [
{
...hostLensFormulas.diskSpaceUsage,
label: i18n.translate('xpack.infra.assetDetails.metricsCharts.diskSpace.label.used', {
defaultMessage: 'Used',
}),
},
{
...hostLensFormulas.diskSpaceAvailability,
label: i18n.translate(
'xpack.infra.assetDetails.metricsCharts.diskSpace.label.available',
{
defaultMessage: 'Available',
}
),
},
],
layerType: 'data',
options: {
seriesType: 'area',
},
},
],
overrides: {
axisRight: {
style: {
axisTitle: {
visible: false,
},
},
},
axisLeft: PERCENT_LEFT_AXIS.axisLeft,
settings: LEGEND_SETTINGS.settings,
},
dataViewOrigin: 'metrics',
},
{
id: 'diskThroughputReadWrite',
title: i18n.translate('xpack.infra.assetDetails.metricsCharts.diskIOPS', {
defaultMessage: 'Disk IOPS',
}),
layers: [
{
data: [
{
...hostLensFormulas.diskIORead,
label: i18n.translate('xpack.infra.assetDetails.metricsCharts.metric.label.read', {
defaultMessage: 'Read',
}),
},
{
...hostLensFormulas.diskIOWrite,
label: i18n.translate('xpack.infra.assetDetails.metricsCharts.metric.label.write', {
defaultMessage: 'Write',
}),
},
],
layerType: 'data',
options: {
seriesType: 'area',
},
},
],
overrides: {
settings: LEGEND_SETTINGS.settings,
},
dataViewOrigin: 'metrics',
},
{
id: 'diskIOReadWrite',
title: i18n.translate('xpack.infra.assetDetails.metricsCharts.diskThroughput', {
defaultMessage: 'Disk Throughput',
}),
layers: [
{
data: [
{
...hostLensFormulas.diskReadThroughput,
label: i18n.translate('xpack.infra.assetDetails.metricsCharts.metric.label.read', {
defaultMessage: 'Read',
}),
},
{
...hostLensFormulas.diskWriteThroughput,
label: i18n.translate('xpack.infra.assetDetails.metricsCharts.metric.label.write', {
defaultMessage: 'Write',
}),
},
],
layerType: 'data',
options: {
seriesType: 'area',
},
},
],
overrides: {
settings: LEGEND_SETTINGS.settings,
},
dataViewOrigin: 'metrics',
},
{
id: 'rxTx',
title: i18n.translate('xpack.infra.assetDetails.metricsCharts.network', {
defaultMessage: 'Network',
}),
layers: [
{
data: [
{
...hostLensFormulas.rx,
label: i18n.translate('xpack.infra.assetDetails.metricsCharts.network.label.rx', {
defaultMessage: 'Inbound (RX)',
}),
},
{
...hostLensFormulas.tx,
label: i18n.translate('xpack.infra.assetDetails.metricsCharts.network.label.tx', {
defaultMessage: 'Outbound (TX)',
}),
},
],
layerType: 'data',
options: {
seriesType: 'area',
},
},
],
overrides: {
settings: LEGEND_SETTINGS.settings,
},
dataViewOrigin: 'metrics',
},
];
export interface MetricsGridProps {
nodeName: string;
timeRange: TimeRange;
metricsDataView?: DataView;
logsDataView?: DataView;
}
export interface MetricsGridProps {
interface Props {
nodeName: string;
timeRange: TimeRange;
metricsDataView?: DataView;
@ -282,7 +29,7 @@ export interface MetricsGridProps {
}
export const MetricsGrid = React.memo(
({ nodeName, metricsDataView, logsDataView, timeRange }: MetricsGridProps) => {
({ nodeName, metricsDataView, logsDataView, timeRange }: Props) => {
const getDataView = useCallback(
(dataViewOrigin: DataViewOrigin) => {
return dataViewOrigin === 'metrics' ? metricsDataView : logsDataView;
@ -315,24 +62,26 @@ export const MetricsGrid = React.memo(
gutterSize="s"
data-test-subj="infraAssetDetailsMetricsChartGrid"
>
{CHARTS_IN_ORDER.map(({ dataViewOrigin, id, layers, title, overrides }, index) => (
<EuiFlexItem key={index} grow={false}>
<LensChart
id={`infraAssetDetailsMetricsChart${id}`}
borderRadius="m"
dataView={getDataView(dataViewOrigin)}
dateRange={timeRange}
height={METRIC_CHART_HEIGHT}
visualOptions={XY_VISUAL_OPTIONS}
layers={layers}
filters={getFilters(dataViewOrigin)}
title={title}
overrides={overrides}
visualizationType="lnsXY"
disableTriggers
/>
</EuiFlexItem>
))}
{assetDetailsDashboards.host.hostMetricCharts.map(
({ dataViewOrigin, id, layers, title, overrides }, index) => (
<EuiFlexItem key={index} grow={false}>
<LensChart
id={`infraAssetDetailsMetricsChart${id}`}
borderRadius="m"
dataView={getDataView(dataViewOrigin)}
dateRange={timeRange}
height={METRIC_CHART_HEIGHT}
visualOptions={XY_MISSING_VALUE_DOTTED_LINE_CONFIG}
layers={layers}
filters={getFilters(dataViewOrigin)}
title={title}
overrides={overrides}
visualizationType="lnsXY"
disableTriggers
/>
</EuiFlexItem>
)
)}
</EuiFlexGrid>
</EuiFlexItem>
</EuiFlexGroup>

43
x-pack/plugins/infra/public/components/asset_details/translations.ts
View file

@ -7,49 +7,6 @@
import { i18n } from '@kbn/i18n';
export const TOOLTIP = {
hostCount: i18n.translate('xpack.infra.assetDetailsEmbeddable.metrics.tooltip.hostCount', {
defaultMessage: 'Number of hosts returned by your search criteria.',
}),
cpuUsage: i18n.translate('xpack.infra.assetDetailsEmbeddable.metrics.tooltip.cpuUsage', {
defaultMessage:
'Percentage of CPU time spent in states other than Idle and IOWait, normalized by the number of CPU cores. This includes both time spent on user space and kernel space.',
}),
diskSpaceUsage: i18n.translate(
'xpack.infra.assetDetailsEmbeddable.metrics.tooltip.diskSpaceUsage',
{
defaultMessage: 'Percentage of disk space used.',
}
),
diskLatency: i18n.translate('xpack.infra.assetDetailsEmbeddable.metrics.tooltip.diskLatency', {
defaultMessage: 'Time spent to service disk requests.',
}),
memoryFree: i18n.translate('xpack.infra.assetDetailsEmbeddable.metrics.tooltip.memoryFree', {
defaultMessage: 'Total available memory including page cache.',
}),
memoryTotal: i18n.translate('xpack.infra.assetDetailsEmbeddable.metrics.tooltip.memoryTotal', {
defaultMessage: 'Total memory capacity.',
}),
memoryUsage: i18n.translate('xpack.infra.assetDetailsEmbeddable.metrics.tooltip.memoryUsage', {
defaultMessage: 'Percentage of main memory usage excluding page cache.',
}),
normalizedLoad1m: i18n.translate(
'xpack.infra.assetDetailsEmbeddable.metrics.tooltip.normalizedLoad1m',
{
defaultMessage: '1 minute load average normalized by the number of CPU cores. ',
}
),
rx: i18n.translate('xpack.infra.assetDetailsEmbeddable.metrics.tooltip.rx', {
defaultMessage:
'Number of bytes which have been received per second on the public interfaces of the hosts.',
}),
tx: i18n.translate('xpack.infra.assetDetailsEmbeddable.metrics.tooltip.tx', {
defaultMessage:
'Number of bytes which have been sent per second on the public interfaces of the hosts.',
}),
};
export const NOT_AVAILABLE_LABEL = i18n.translate(
'xpack.infra.assetDetailsEmbeddable.notApplicableLabel',
{

6
x-pack/plugins/infra/public/hooks/use_lens_attributes.test.ts
View file

@ -55,7 +55,7 @@ describe('useHostTable hook', () => {
layers: [
{
data: [normalizedLoad1m],
layerType: 'data',
type: 'visualization',
options: {
buckets: {
type: 'date_histogram',
@ -81,7 +81,7 @@ describe('useHostTable hook', () => {
},
},
],
layerType: 'referenceLine',
type: 'referenceLines',
},
],
title: 'Injected Normalized Load',
@ -199,7 +199,7 @@ describe('useHostTable hook', () => {
layers: [
{
data: [normalizedLoad1m],
layerType: 'data',
type: 'visualization',
},
],
dataView: mockDataView,

57
x-pack/plugins/infra/public/hooks/use_lens_attributes.ts
View file

@ -14,62 +14,35 @@ import { i18n } from '@kbn/i18n';
import useAsync from 'react-use/lib/useAsync';
import { FormulaPublicApi } from '@kbn/lens-plugin/public';
import {
type XYLayerOptions,
type MetricLayerOptions,
type FormulaValueConfig,
type LensAttributes,
type StaticValueConfig,
type LensVisualizationState,
type XYVisualOptions,
type Chart,
type LensAttributes,
LensAttributesBuilder,
XYDataLayer,
MetricLayer,
XYChart,
MetricChart,
MetricLayer,
XYDataLayer,
XYReferenceLinesLayer,
} from '@kbn/lens-embeddable-utils';
import { InfraClientSetupDeps } from '../types';
import { useLazyRef } from './use_lazy_ref';
type Options = XYLayerOptions | MetricLayerOptions;
interface StaticValueLayer {
data: StaticValueConfig[];
layerType: 'referenceLine';
}
interface FormulaValueLayer<
TOptions extends Options,
TData extends FormulaValueConfig[] | FormulaValueConfig
> {
options?: TOptions;
data: TData;
layerType: 'data';
}
type XYLayerConfig = StaticValueLayer | FormulaValueLayer<XYLayerOptions, FormulaValueConfig[]>;
export type UseLensAttributesXYLayerConfig = XYLayerConfig | XYLayerConfig[];
export type UseLensAttributesMetricLayerConfig = FormulaValueLayer<
MetricLayerOptions,
FormulaValueConfig
>;
import type { MetricChartLayerParams, XYChartLayerParams } from '../common/visualizations/types';
interface UseLensAttributesBaseParams {
dataView?: DataView;
title?: string;
}
interface UseLensAttributesXYChartParams extends UseLensAttributesBaseParams {
layers: UseLensAttributesXYLayerConfig;
export interface UseLensAttributesXYChartParams extends UseLensAttributesBaseParams {
layers: XYChartLayerParams[];
visualizationType: 'lnsXY';
visualOptions?: XYVisualOptions;
}
interface UseLensAttributesMetricChartParams extends UseLensAttributesBaseParams {
layers: UseLensAttributesMetricLayerConfig;
export interface UseLensAttributesMetricChartParams extends UseLensAttributesBaseParams {
layers: MetricChartLayerParams;
visualizationType: 'lnsMetric';
}
@ -157,7 +130,7 @@ export const useLensAttributes = ({ dataView, ...params }: UseLensAttributesPara
const getFormula = () => {
const firstDataLayer = [
...(Array.isArray(params.layers) ? params.layers : [params.layers]),
].find((p) => p.layerType === 'data');
].find((p) => p.type === 'visualization');
if (!firstDataLayer) {
return '';
@ -187,21 +160,21 @@ const chartFactory = ({
throw new Error(`Invalid layers type. Expected an array of layers.`);
}
const xyLayerFactory = (layer: XYLayerConfig) => {
switch (layer.layerType) {
case 'data': {
const xyLayerFactory = (layer: XYChartLayerParams) => {
switch (layer.type) {
case 'visualization': {
return new XYDataLayer({
data: layer.data,
options: layer.options,
});
}
case 'referenceLine': {
case 'referenceLines': {
return new XYReferenceLinesLayer({
data: layer.data,
});
}
default:
throw new Error(`Invalid layerType`);
throw new Error(`Invalid layer type`);
}
};
@ -217,7 +190,7 @@ const chartFactory = ({
case 'lnsMetric':
if (Array.isArray(params.layers)) {
throw new Error(`Invalid layers type. Expected a single layer object.`);
throw new Error(`Invalid layer type. Expected a single layer object.`);
}
return new MetricChart({

7
x-pack/plugins/infra/public/pages/metrics/hosts/components/kpis/hosts_tile.tsx → x-pack/plugins/infra/public/pages/metrics/hosts/components/kpis/host_count_kpi.tsx
View file

@ -6,10 +6,9 @@
*/
import { i18n } from '@kbn/i18n';
import React from 'react';
import { hostLensFormulas } from '../../../../../common/visualizations';
import { hostLensFormulas, METRICS_TOOLTIP } from '../../../../../common/visualizations';
import { useHostCountContext } from '../../hooks/use_host_count';
import { useUnifiedSearchContext } from '../../hooks/use_unified_search';
import { TOOLTIP } from '../../../../../common/visualizations/lens/dashboards/host/translations';
import { type Props, MetricChartWrapper } from '../chart/metric_chart_wrapper';
import { TooltipContent } from '../../../../../components/lens';
@ -22,7 +21,7 @@ const HOSTS_CHART: Omit<Props, 'loading' | 'value' | 'toolTip'> = {
}),
};
export const HostsTile = ({ height }: { height: number }) => {
export const HostCountKpi = ({ height }: { height: number }) => {
const { data: hostCountData, isRequestRunning: hostCountLoading } = useHostCountContext();
const { searchCriteria } = useUnifiedSearchContext();
@ -46,7 +45,7 @@ export const HostsTile = ({ height }: { height: number }) => {
toolTip={
<TooltipContent
formula={hostLensFormulas.hostCount.value}
description={TOOLTIP.hostCount}
description={METRICS_TOOLTIP.hostCount}
/>
}
loading={hostCountLoading}

13
x-pack/plugins/infra/public/pages/metrics/hosts/components/kpis/tile.tsx → x-pack/plugins/infra/public/pages/metrics/hosts/components/kpis/kpi.tsx
View file

@ -7,10 +7,7 @@
import React, { useMemo } from 'react';
import { i18n } from '@kbn/i18n';
import { LensChart, TooltipContent } from '../../../../../components/lens';
import {
type KPIChartProps,
AVERAGE_SUBTITLE,
} from '../../../../../common/visualizations/lens/dashboards/host/kpi_grid_config';
import { type KPIChartProps, AVERAGE_SUBTITLE } from '../../../../../common/visualizations';
import { buildCombinedHostsFilter } from '../../../../../utils/filters/build';
import { useMetricsDataViewContext } from '../../hooks/use_data_view';
import { useUnifiedSearchContext } from '../../hooks/use_unified_search';
@ -18,13 +15,7 @@ import { useHostsViewContext } from '../../hooks/use_hosts_view';
import { useHostCountContext } from '../../hooks/use_host_count';
import { useAfterLoadedState } from '../../hooks/use_after_loaded_state';
export const Tile = ({
id,
title,
layers,
toolTip,
height,
}: KPIChartProps & { height: number }) => {
export const Kpi = ({ id, title, layers, toolTip, height }: KPIChartProps & { height: number }) => {
const { searchCriteria } = useUnifiedSearchContext();
const { dataView } = useMetricsDataViewContext();
const { requestTs, hostNodes, loading: hostsLoading } = useHostsViewContext();

15
x-pack/plugins/infra/public/pages/metrics/hosts/components/kpis/kpi_grid.tsx
View file

@ -9,13 +9,10 @@ import React from 'react';
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { EuiSpacer } from '@elastic/eui';
import { HostMetricsDocsLink } from '../../../../../components/lens';
import { Tile } from './tile';
import { Kpi } from './kpi';
import { HostCountProvider } from '../../hooks/use_host_count';
import { HostsTile } from './hosts_tile';
import {
KPI_CHARTS,
KPI_CHART_HEIGHT,
} from '../../../../../common/visualizations/lens/dashboards/host/kpi_grid_config';
import { HostCountKpi } from './host_count_kpi';
import { assetDetailsDashboards, KPI_CHART_HEIGHT } from '../../../../../common/visualizations';
export const KPIGrid = () => {
return (
@ -24,11 +21,11 @@ export const KPIGrid = () => {
<EuiSpacer size="s" />
<EuiFlexGroup direction="row" gutterSize="s" data-test-subj="hostsViewKPIGrid">
<EuiFlexItem>
<HostsTile height={KPI_CHART_HEIGHT} />
<HostCountKpi height={KPI_CHART_HEIGHT} />
</EuiFlexItem>
{KPI_CHARTS.map((chartProp, index) => (
{assetDetailsDashboards.host.hostKPICharts.map((chartProp, index) => (
<EuiFlexItem key={index}>
<Tile {...chartProp} height={KPI_CHART_HEIGHT} />
<Kpi {...chartProp} height={KPI_CHART_HEIGHT} />
</EuiFlexItem>
))}
</EuiFlexGroup>

9
x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/metrics/metric_chart.tsx → x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/metrics/chart.tsx
View file

@ -8,7 +8,6 @@ import React, { useMemo } from 'react';
import type { TypedLensByValueInput } from '@kbn/lens-plugin/public';
import type { XYVisualOptions } from '@kbn/lens-embeddable-utils';
import { LensChart } from '../../../../../../components/lens';
import type { UseLensAttributesXYLayerConfig } from '../../../../../../hooks/use_lens_attributes';
import { useMetricsDataViewContext } from '../../../hooks/use_data_view';
import { useUnifiedSearchContext } from '../../../hooks/use_unified_search';
import { useHostsViewContext } from '../../../hooks/use_hosts_view';
@ -16,14 +15,14 @@ import { buildCombinedHostsFilter } from '../../../../../../utils/filters/build'
import { useHostsTableContext } from '../../../hooks/use_hosts_table';
import { useAfterLoadedState } from '../../../hooks/use_after_loaded_state';
import { METRIC_CHART_HEIGHT } from '../../../constants';
import { XYChartLayerParams } from '../../../../../../common/visualizations/types';
export interface MetricChartProps extends Pick<TypedLensByValueInput, 'id' | 'overrides'> {
title: string;
layers: UseLensAttributesXYLayerConfig;
export interface ChartProps extends Pick<TypedLensByValueInput, 'id' | 'overrides' | 'title'> {
layers: XYChartLayerParams[];
visualOptions?: XYVisualOptions;
}
export const MetricChart = ({ id, title, layers, visualOptions, overrides }: MetricChartProps) => {
export const Chart = ({ id, title, layers, visualOptions, overrides }: ChartProps) => {
const { searchCriteria } = useUnifiedSearchContext();
const { dataView } = useMetricsDataViewContext();
const { requestTs, loading } = useHostsViewContext();

217
x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/metrics/metrics_grid.tsx
View file

@ -5,218 +5,15 @@
* 2.0.
*/
import React from 'react';
import { EuiFlexGrid, EuiFlexItem, EuiText, EuiFlexGroup, EuiSpacer } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import type { XYLayerOptions, XYVisualOptions } from '@kbn/lens-embeddable-utils';
import { hostLensFormulas } from '../../../../../../common/visualizations';
import {
hostsViewDashboards,
XY_MISSING_VALUE_DOTTED_LINE_CONFIG,
} from '../../../../../../common/visualizations';
import { HostMetricsExplanationContent } from '../../../../../../components/lens';
import { MetricChart, MetricChartProps } from './metric_chart';
import { Chart } from './chart';
import { Popover } from '../../table/popover';
const DEFAULT_BREAKDOWN_SIZE = 20;
const XY_LAYER_OPTIONS: XYLayerOptions = {
breakdown: {
type: 'top_values',
field: 'host.name',
params: {
size: DEFAULT_BREAKDOWN_SIZE,
},
},
};
const XY_VISUAL_OPTIONS: XYVisualOptions = {
showDottedLine: true,
missingValues: 'Linear',
};
const PERCENT_LEFT_AXIS: Pick<MetricChartProps, 'overrides'>['overrides'] = {
axisLeft: {
domain: {
min: 0,
max: 1,
},
},
settings: {},
};
const CHARTS_IN_ORDER: MetricChartProps[] = [
{
id: 'cpuUsage',
title: i18n.translate('xpack.infra.hostsViewPage.tabs.metricsCharts.cpuUsage', {
defaultMessage: 'CPU Usage',
}),
layers: [
{
data: [hostLensFormulas.cpuUsage],
layerType: 'data',
options: XY_LAYER_OPTIONS,
},
],
overrides: PERCENT_LEFT_AXIS,
},
{
id: 'normalizedLoad1m',
title: i18n.translate('xpack.infra.hostsViewPage.tabs.metricsCharts.normalizedLoad1m', {
defaultMessage: 'Normalized Load',
}),
layers: [
{
data: [hostLensFormulas.normalizedLoad1m],
layerType: 'data',
options: XY_LAYER_OPTIONS,
},
{
data: [
{
value: '1',
format: {
id: 'percent',
params: {
decimals: 0,
},
},
color: '#6092c0',
},
],
layerType: 'referenceLine',
},
],
},
{
id: 'memoryUsage',
title: i18n.translate('xpack.infra.hostsViewPage.tabs.metricsCharts.memoryUsage', {
defaultMessage: 'Memory Usage',
}),
layers: [
{
data: [hostLensFormulas.memoryUsage],
layerType: 'data',
options: XY_LAYER_OPTIONS,
},
],
overrides: PERCENT_LEFT_AXIS,
},
{
id: 'memoryFree',
title: i18n.translate('xpack.infra.hostsViewPage.tabs.metricsCharts.memoryFree', {
defaultMessage: 'Memory Free',
}),
layers: [
{
data: [hostLensFormulas.memoryFree],
layerType: 'data',
options: XY_LAYER_OPTIONS,
},
],
},
{
id: 'diskSpaceUsed',
title: i18n.translate('xpack.infra.hostsViewPage.tabs.metricsCharts.diskSpaceUsed', {
defaultMessage: 'Disk Space Usage',
}),
layers: [
{
data: [hostLensFormulas.diskSpaceUsage],
layerType: 'data',
options: XY_LAYER_OPTIONS,
},
],
overrides: PERCENT_LEFT_AXIS,
},
{
id: 'diskSpaceAvailable',
title: i18n.translate('xpack.infra.hostsViewPage.tabs.metricsCharts.diskSpaceAvailable', {
defaultMessage: 'Disk Space Available',
}),
layers: [
{
data: [hostLensFormulas.diskSpaceAvailable],
layerType: 'data',
options: XY_LAYER_OPTIONS,
},
],
},
{
id: 'diskIORead',
title: i18n.translate('xpack.infra.hostsViewPage.tabs.metricsCharts.diskIORead', {
defaultMessage: 'Disk Read IOPS',
}),
layers: [
{
data: [hostLensFormulas.diskIORead],
layerType: 'data',
options: XY_LAYER_OPTIONS,
},
],
},
{
id: 'diskIOWrite',
title: i18n.translate('xpack.infra.hostsViewPage.tabs.metricsCharts.diskIOWrite', {
defaultMessage: 'Disk Write IOPS',
}),
layers: [
{
data: [hostLensFormulas.diskIOWrite],
layerType: 'data',
options: XY_LAYER_OPTIONS,
},
],
},
{
id: 'diskReadThroughput',
title: i18n.translate('xpack.infra.hostsViewPage.tabs.metricsCharts.diskReadThroughput', {
defaultMessage: 'Disk Read Throughput',
}),
layers: [
{
data: [hostLensFormulas.diskReadThroughput],
layerType: 'data',
options: XY_LAYER_OPTIONS,
},
],
},
{
id: 'diskWriteThroughput',
title: i18n.translate('xpack.infra.hostsViewPage.tabs.metricsCharts.diskWriteThroughput', {
defaultMessage: 'Disk Write Throughput',
}),
layers: [
{
data: [hostLensFormulas.diskWriteThroughput],
layerType: 'data',
options: XY_LAYER_OPTIONS,
},
],
},
{
id: 'rx',
title: i18n.translate('xpack.infra.hostsViewPage.tabs.metricsCharts.rx', {
defaultMessage: 'Network Inbound (RX)',
}),
layers: [
{
data: [hostLensFormulas.rx],
layerType: 'data',
options: XY_LAYER_OPTIONS,
},
],
},
{
id: 'tx',
title: i18n.translate('xpack.infra.hostsViewPage.tabs.metricsCharts.tx', {
defaultMessage: 'Network Outbound (TX)',
}),
layers: [
{
data: [hostLensFormulas.tx],
layerType: 'data',
options: XY_LAYER_OPTIONS,
},
],
},
];
export const MetricsGrid = React.memo(() => {
return (
<>
@ -233,9 +30,9 @@ export const MetricsGrid = React.memo(() => {
<EuiSpacer size="s" />
<EuiFlexGrid columns={2} gutterSize="s" data-test-subj="hostsView-metricChart">
{CHARTS_IN_ORDER.map((chartProp, index) => (
{hostsViewDashboards.hostsMetricCharts.map((chartProp, index) => (
<EuiFlexItem key={index} grow={false}>
<MetricChart {...chartProp} visualOptions={XY_VISUAL_OPTIONS} />
<Chart {...chartProp} visualOptions={XY_MISSING_VALUE_DOTTED_LINE_CONFIG} />
</EuiFlexItem>
))}
</EuiFlexGrid>

16
x-pack/plugins/infra/public/pages/metrics/hosts/hooks/use_hosts_table.tsx
View file

@ -31,7 +31,7 @@ import { useUnifiedSearchContext } from './use_unified_search';
import { useMetricsDataViewContext } from './use_data_view';
import { ColumnHeader } from '../components/table/column_header';
import { TABLE_COLUMN_LABEL } from '../translations';
import { TOOLTIP } from '../../../../common/visualizations/lens/dashboards/host/translations';
import { METRICS_TOOLTIP } from '../../../../common/visualizations';
import { buildCombinedHostsFilter } from '../../../../utils/filters/build';
/**
@ -254,7 +254,7 @@ export const useHostsTable = () => {
name: (
<ColumnHeader
label={TABLE_COLUMN_LABEL.cpuUsage}
toolTip={TOOLTIP.cpuUsage}
toolTip={METRICS_TOOLTIP.cpuUsage}
formula={hostLensFormulas.cpuUsage.value}
/>
),
@ -268,7 +268,7 @@ export const useHostsTable = () => {
name: (
<ColumnHeader
label={TABLE_COLUMN_LABEL.normalizedLoad1m}
toolTip={TOOLTIP.normalizedLoad1m}
toolTip={METRICS_TOOLTIP.normalizedLoad1m}
formula={hostLensFormulas.normalizedLoad1m.value}
/>
),
@ -282,7 +282,7 @@ export const useHostsTable = () => {
name: (
<ColumnHeader
label={TABLE_COLUMN_LABEL.memoryUsage}
toolTip={TOOLTIP.memoryUsage}
toolTip={METRICS_TOOLTIP.memoryUsage}
formula={hostLensFormulas.memoryUsage.value}
/>
),
@ -296,7 +296,7 @@ export const useHostsTable = () => {
name: (
<ColumnHeader
label={TABLE_COLUMN_LABEL.memoryFree}
toolTip={TOOLTIP.memoryFree}
toolTip={METRICS_TOOLTIP.memoryFree}
formula={hostLensFormulas.memoryFree.value}
/>
),
@ -310,7 +310,7 @@ export const useHostsTable = () => {
name: (
<ColumnHeader
label={TABLE_COLUMN_LABEL.diskSpaceUsage}
toolTip={TOOLTIP.diskSpaceUsage}
toolTip={METRICS_TOOLTIP.diskSpaceUsage}
formula={hostLensFormulas.diskSpaceUsage.value}
/>
),
@ -324,7 +324,7 @@ export const useHostsTable = () => {
name: (
<ColumnHeader
label={TABLE_COLUMN_LABEL.rx}
toolTip={TOOLTIP.rx}
toolTip={METRICS_TOOLTIP.rx}
formula={hostLensFormulas.rx.value}
/>
),
@ -339,7 +339,7 @@ export const useHostsTable = () => {
name: (
<ColumnHeader
label={TABLE_COLUMN_LABEL.tx}
toolTip={TOOLTIP.tx}
toolTip={METRICS_TOOLTIP.tx}
formula={hostLensFormulas.tx.value}
/>
),