diff --git a/x-pack/plugins/infra/public/common/visualizations/lens/dashboards/host/kpi_grid_config.ts b/x-pack/plugins/infra/public/common/visualizations/lens/dashboards/host/kpi_grid_config.ts index cc4f51c8f2d18..9dde33f39cbdf 100644 --- a/x-pack/plugins/infra/public/common/visualizations/lens/dashboards/host/kpi_grid_config.ts +++ b/x-pack/plugins/infra/public/common/visualizations/lens/dashboards/host/kpi_grid_config.ts @@ -5,16 +5,24 @@ * 2.0. */ -import { TypedLensByValueInput } from '@kbn/lens-plugin/public'; import { i18n } from '@kbn/i18n'; -import { Layer } from '../../../../../hooks/use_lens_attributes'; +import type { TypedLensByValueInput } from '@kbn/lens-plugin/public'; +import type { Layer } from '../../../../../hooks/use_lens_attributes'; import { hostLensFormulas } from '../../../constants'; -import { FormulaConfig } from '../../../types'; import { TOOLTIP } from './translations'; -import { MetricLayerOptions } from '../../visualization_types/layers'; -export interface KPIChartProps - extends Pick { +import type { FormulaConfig } from '../../../types'; +import type { MetricLayerOptions } from '../../visualization_types'; + +export const KPI_CHART_HEIGHT = 150; +export const AVERAGE_SUBTITLE = i18n.translate( + 'xpack.infra.assetDetailsEmbeddable.overview.kpi.subtitle.average', + { + defaultMessage: 'Average', + } +); + +export interface KPIChartProps extends Pick { layers: Layer; toolTip: string; } @@ -22,7 +30,7 @@ export interface KPIChartProps export const KPI_CHARTS: KPIChartProps[] = [ { id: 'cpuUsage', - title: i18n.translate('xpack.infra.hostsViewPage.metricTrend.cpuUsage.title', { + title: i18n.translate('xpack.infra.assetDetailsEmbeddable.overview.kpi.cpuUsage.title', { defaultMessage: 'CPU Usage', }), layers: { @@ -45,9 +53,12 @@ export const KPI_CHARTS: KPIChartProps[] = [ }, { id: 'normalizedLoad1m', - title: i18n.translate('xpack.infra.hostsViewPage.metricTrend.normalizedLoad1m.title', { - defaultMessage: 'CPU Usage', - }), + title: i18n.translate( + 'xpack.infra.assetDetailsEmbeddable.overview.kpi.normalizedLoad1m.title', + { + defaultMessage: 'CPU Usage', + } + ), layers: { data: { ...hostLensFormulas.normalizedLoad1m, @@ -68,7 +79,7 @@ export const KPI_CHARTS: KPIChartProps[] = [ }, { id: 'memoryUsage', - title: i18n.translate('xpack.infra.hostsViewPage.metricTrend.memoryUsage.title', { + title: i18n.translate('xpack.infra.assetDetailsEmbeddable.overview.kpi.memoryUsage.title', { defaultMessage: 'CPU Usage', }), layers: { @@ -91,7 +102,7 @@ export const KPI_CHARTS: KPIChartProps[] = [ }, { id: 'diskSpaceUsage', - title: i18n.translate('xpack.infra.hostsViewPage.metricTrend.diskSpaceUsage.title', { + title: i18n.translate('xpack.infra.assetDetailsEmbeddable.overview.kpi.diskSpaceUsage.title', { defaultMessage: 'CPU Usage', }), layers: { diff --git a/x-pack/plugins/infra/public/components/asset_details/constants.ts b/x-pack/plugins/infra/public/components/asset_details/constants.ts new file mode 100644 index 0000000000000..546e2b9aad4d9 --- /dev/null +++ b/x-pack/plugins/infra/public/components/asset_details/constants.ts @@ -0,0 +1,8 @@ +/* + * 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 const METRIC_CHART_HEIGHT = 300; diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/kpi_grid.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/kpi_grid.tsx index b86201a29098c..c134f0de6bb7a 100644 --- a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/kpi_grid.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/kpi_grid.tsx @@ -4,21 +4,55 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ -import React from 'react'; + +import React, { useMemo } from 'react'; import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; -import { Tile, type TileProps } from './tile'; -import { KPI_CHARTS } from '../../../../../common/visualizations/lens/dashboards/host/kpi_grid_config'; +import type { DataView } from '@kbn/data-views-plugin/public'; +import type { TimeRange } from '@kbn/es-query'; +import { LensChart, TooltipContent } from '../../../../lens'; +import { buildCombinedHostsFilter } from '../../../../../utils/filters/build'; +import { + KPI_CHARTS, + KPI_CHART_HEIGHT, + AVERAGE_SUBTITLE, +} from '../../../../../common/visualizations/lens/dashboards/host/kpi_grid_config'; + +interface Props { + dataView?: DataView; + nodeName: string; + timeRange: TimeRange; +} + +export const KPIGrid = React.memo(({ nodeName, dataView, timeRange }: Props) => { + const filters = useMemo(() => { + return [ + buildCombinedHostsFilter({ + field: 'host.name', + values: [nodeName], + dataView, + }), + ]; + }, [dataView, nodeName]); -export const KPIGrid = React.memo(({ nodeName, dataView, timeRange: dateRange }: TileProps) => { return ( - <> - - {KPI_CHARTS.map((chartProp, index) => ( - - - - ))} - - + + {KPI_CHARTS.map(({ id, layers, title, toolTip }, index) => ( + + } + visualizationType="lnsMetric" + disableTriggers + hidePanelTitles + /> + + ))} + ); }); diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/tile.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/tile.tsx deleted file mode 100644 index 9907b81d64fc0..0000000000000 --- a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/tile.tsx +++ /dev/null @@ -1,124 +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, { useMemo } from 'react'; -import type { DataView } from '@kbn/data-views-plugin/public'; -import { i18n } from '@kbn/i18n'; -import { EuiIcon, EuiPanel, EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip } from '@elastic/eui'; -import styled from 'styled-components'; -import type { Action } from '@kbn/ui-actions-plugin/public'; -import { TimeRange } from '@kbn/es-query'; -import { FormattedMessage } from '@kbn/i18n-react'; -import { LensWrapper, TooltipContent } from '../../../../lens'; -import type { KPIChartProps } from '../../../../../common/visualizations/lens/dashboards/host/kpi_grid_config'; -import { useLensAttributes } from '../../../../../hooks/use_lens_attributes'; -import { buildCombinedHostsFilter } from '../../../../../utils/filters/build'; - -const MIN_HEIGHT = 150; - -export interface TileProps { - timeRange: TimeRange; - dataView?: DataView; - nodeName: string; -} - -export const Tile = ({ - id, - layers, - title, - toolTip, - dataView, - nodeName, - timeRange, -}: KPIChartProps & TileProps) => { - const getSubtitle = () => - i18n.translate('xpack.infra.assetDetailsEmbeddable.overview.metricTrend.subtitle.average', { - defaultMessage: 'Average', - }); - - const { formula, attributes, getExtraActions, error } = useLensAttributes({ - dataView, - title, - layers: { ...layers, options: { ...layers.options, subtitle: getSubtitle() } }, - visualizationType: 'lnsMetric', - }); - - const filters = useMemo(() => { - return [ - buildCombinedHostsFilter({ - field: 'host.name', - values: [nodeName], - dataView, - }), - ]; - }, [dataView, nodeName]); - - const extraActions: Action[] = useMemo( - () => - getExtraActions({ - timeRange, - filters, - }), - [filters, getExtraActions, timeRange] - ); - - const loading = !attributes; - - return ( - - {error ? ( - - - - - - - - - - - ) : ( - } - anchorClassName="eui-fullWidth" - > - - - )} - - ); -}; - -const EuiPanelStyled = styled(EuiPanel)` - min-height: ${MIN_HEIGHT}px; - .echMetric { - border-radius: ${({ theme }) => theme.eui.euiBorderRadius}; - pointer-events: none; - } -`; diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/metrics/metric_chart.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/metrics/metric_chart.tsx deleted file mode 100644 index ad75734013a29..0000000000000 --- a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/metrics/metric_chart.tsx +++ /dev/null @@ -1,116 +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, { useMemo } from 'react'; -import { Action } from '@kbn/ui-actions-plugin/public'; -import { EuiIcon, EuiPanel, EuiFlexGroup, EuiFlexItem, EuiText, useEuiTheme } from '@elastic/eui'; -import { css } from '@emotion/react'; -import { TypedLensByValueInput } from '@kbn/lens-plugin/public'; -import type { DataView } from '@kbn/data-views-plugin/public'; -import type { TimeRange } from '@kbn/es-query'; -import { FormattedMessage } from '@kbn/i18n-react'; -import { LensWrapper } from '../../../../lens/lens_wrapper'; -import { buildCombinedHostsFilter } from '../../../../../utils/filters/build'; -import { useLensAttributes, type Layer } from '../../../../../hooks/use_lens_attributes'; -import type { FormulaConfig, XYLayerOptions } from '../../../../../common/visualizations'; - -export interface MetricChartProps extends Pick { - title: string; - layers: Array>; - dataView?: DataView; - timeRange: TimeRange; - nodeName: string; -} - -const MIN_HEIGHT = 250; - -export const MetricChart = ({ - id, - title, - layers, - nodeName, - timeRange, - dataView, - overrides, -}: MetricChartProps) => { - const { euiTheme } = useEuiTheme(); - - const { attributes, getExtraActions, error } = useLensAttributes({ - dataView, - layers, - title, - visualizationType: 'lnsXY', - }); - - const filters = useMemo(() => { - return [ - buildCombinedHostsFilter({ - field: 'host.name', - values: [nodeName], - dataView, - }), - ]; - }, [dataView, nodeName]); - - const extraActions: Action[] = useMemo( - () => - getExtraActions({ - timeRange, - filters, - }), - [timeRange, filters, getExtraActions] - ); - - const loading = !attributes; - - return ( - - {error ? ( - - - - - - - - - - - ) : ( - - )} - - ); -}; diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/metrics/metrics_grid.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/metrics/metrics_grid.tsx index 531b5aa4a4191..be96fe575d2be 100644 --- a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/metrics/metrics_grid.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/metrics/metrics_grid.tsx @@ -4,18 +4,30 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ -import React from 'react'; +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 { TimeRange } from '@kbn/es-query'; +import type { TimeRange } from '@kbn/es-query'; import { FormattedMessage } from '@kbn/i18n-react'; -import { HostMetricsDocsLink } from '../../../../lens'; -import { MetricChart, type MetricChartProps } from './metric_chart'; -import { hostLensFormulas } from '../../../../../common/visualizations'; +import { buildCombinedHostsFilter } from '../../../../../utils/filters/build'; +import type { Layer } from '../../../../../hooks/use_lens_attributes'; +import { HostMetricsDocsLink, LensChart, type LensChartProps } from '../../../../lens'; +import { + type FormulaConfig, + hostLensFormulas, + type XYLayerOptions, +} from '../../../../../common/visualizations'; +import { METRIC_CHART_HEIGHT } from '../../../constants'; -const PERCENT_LEFT_AXIS: Pick['overrides'] = { +type DataViewOrigin = 'logs' | 'metrics'; +interface MetricChartConfig extends Pick { + layers: Array>; + toolTip: string; +} + +const PERCENT_LEFT_AXIS: Pick['overrides'] = { axisLeft: { domain: { min: 0, @@ -24,7 +36,7 @@ const PERCENT_LEFT_AXIS: Pick['overrides'] = { }, }; -const LEGEND_SETTINGS: Pick['overrides'] = { +const LEGEND_SETTINGS: Pick['overrides'] = { settings: { showLegend: true, legendPosition: 'bottom', @@ -33,8 +45,8 @@ const LEGEND_SETTINGS: Pick['overrides'] = { }; const CHARTS_IN_ORDER: Array< - Pick & { - dataViewType: 'logs' | 'metrics'; + Pick & { + dataViewOrigin: DataViewOrigin; } > = [ { @@ -49,7 +61,7 @@ const CHARTS_IN_ORDER: Array< layerType: 'data', }, ], - dataViewType: 'metrics', + dataViewOrigin: 'metrics', overrides: { axisLeft: PERCENT_LEFT_AXIS.axisLeft, }, @@ -65,7 +77,7 @@ const CHARTS_IN_ORDER: Array< layerType: 'data', }, ], - dataViewType: 'metrics', + dataViewOrigin: 'metrics', overrides: { axisLeft: PERCENT_LEFT_AXIS.axisLeft, }, @@ -96,7 +108,7 @@ const CHARTS_IN_ORDER: Array< layerType: 'referenceLine', }, ], - dataViewType: 'metrics', + dataViewOrigin: 'metrics', }, { id: 'logRate', @@ -109,7 +121,7 @@ const CHARTS_IN_ORDER: Array< layerType: 'data', }, ], - dataViewType: 'logs', + dataViewOrigin: 'logs', }, { id: 'diskSpaceUsageAvailable', @@ -152,7 +164,7 @@ const CHARTS_IN_ORDER: Array< axisLeft: PERCENT_LEFT_AXIS.axisLeft, settings: LEGEND_SETTINGS.settings, }, - dataViewType: 'metrics', + dataViewOrigin: 'metrics', }, { id: 'diskThroughputReadWrite', @@ -184,7 +196,7 @@ const CHARTS_IN_ORDER: Array< overrides: { settings: LEGEND_SETTINGS.settings, }, - dataViewType: 'metrics', + dataViewOrigin: 'metrics', }, { id: 'diskIOReadWrite', @@ -216,7 +228,7 @@ const CHARTS_IN_ORDER: Array< overrides: { settings: LEGEND_SETTINGS.settings, }, - dataViewType: 'metrics', + dataViewOrigin: 'metrics', }, { id: 'rxTx', @@ -248,7 +260,7 @@ const CHARTS_IN_ORDER: Array< overrides: { settings: LEGEND_SETTINGS.settings, }, - dataViewType: 'metrics', + dataViewOrigin: 'metrics', }, ]; @@ -259,8 +271,35 @@ export interface MetricsGridProps { logsDataView?: DataView; } +export interface MetricsGridProps { + nodeName: string; + timeRange: TimeRange; + metricsDataView?: DataView; + logsDataView?: DataView; +} + export const MetricsGrid = React.memo( ({ nodeName, metricsDataView, logsDataView, timeRange }: MetricsGridProps) => { + const getDataView = useCallback( + (dataViewOrigin: DataViewOrigin) => { + return dataViewOrigin === 'metrics' ? metricsDataView : logsDataView; + }, + [logsDataView, metricsDataView] + ); + + const getFilters = useCallback( + (dataViewOrigin: DataViewOrigin) => { + return [ + buildCombinedHostsFilter({ + field: 'host.name', + values: [nodeName], + dataView: getDataView(dataViewOrigin), + }), + ]; + }, + [getDataView, nodeName] + ); + return ( @@ -277,13 +316,20 @@ export const MetricsGrid = React.memo( - {CHARTS_IN_ORDER.map(({ dataViewType, ...chartProp }, index) => ( + {CHARTS_IN_ORDER.map(({ dataViewOrigin, id, layers, title, overrides }, index) => ( - ))} diff --git a/x-pack/plugins/infra/public/components/lens/chart_load_error.tsx b/x-pack/plugins/infra/public/components/lens/chart_load_error.tsx new file mode 100644 index 0000000000000..5ffdc573a2cd7 --- /dev/null +++ b/x-pack/plugins/infra/public/components/lens/chart_load_error.tsx @@ -0,0 +1,38 @@ +/* + * 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 { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n-react'; +import { css } from '@emotion/react'; + +export const ChartLoadError = () => { + return ( + + + + + + + + + + + ); +}; diff --git a/x-pack/plugins/infra/public/components/lens/chart_placeholder.tsx b/x-pack/plugins/infra/public/components/lens/chart_placeholder.tsx index 7bf35f0e0392a..2dfcbfa21c814 100644 --- a/x-pack/plugins/infra/public/components/lens/chart_placeholder.tsx +++ b/x-pack/plugins/infra/public/components/lens/chart_placeholder.tsx @@ -6,8 +6,7 @@ */ import React from 'react'; -import { EuiFlexGroup, EuiProgress, EuiFlexItem, EuiLoadingChart } from '@elastic/eui'; -import { useEuiTheme } from '@elastic/eui'; +import { EuiFlexGroup, EuiProgress, EuiFlexItem, EuiLoadingChart, useEuiTheme } from '@elastic/eui'; import { css } from '@emotion/react'; export const ChartLoadingProgress = ({ hasTopMargin = false }: { hasTopMargin?: boolean }) => { diff --git a/x-pack/plugins/infra/public/components/lens/index.tsx b/x-pack/plugins/infra/public/components/lens/index.tsx index 17a2f5b480442..93d050209a219 100644 --- a/x-pack/plugins/infra/public/components/lens/index.tsx +++ b/x-pack/plugins/infra/public/components/lens/index.tsx @@ -5,8 +5,7 @@ * 2.0. */ +export { LensChart, type LensChartProps } from './lens_chart'; export { ChartPlaceholder } from './chart_placeholder'; -export { LensWrapper } from './lens_wrapper'; - export { TooltipContent } from './metric_explanation/tooltip_content'; export { HostMetricsDocsLink } from './metric_explanation/host_metrics_docs_link'; diff --git a/x-pack/plugins/infra/public/components/lens/lens_chart.tsx b/x-pack/plugins/infra/public/components/lens/lens_chart.tsx new file mode 100644 index 0000000000000..2d4b599d56de2 --- /dev/null +++ b/x-pack/plugins/infra/public/components/lens/lens_chart.tsx @@ -0,0 +1,110 @@ +/* + * 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, { CSSProperties, useMemo } from 'react'; +import { EuiPanel, EuiToolTip, type EuiPanelProps } from '@elastic/eui'; +import { Action } from '@kbn/ui-actions-plugin/public'; +import { css } from '@emotion/react'; +import { useLensAttributes, type UseLensAttributesParams } from '../../hooks/use_lens_attributes'; +import type { BaseChartProps } from './types'; +import type { TooltipContentProps } from './metric_explanation/tooltip_content'; +import { LensWrapper } from './lens_wrapper'; +import { ChartLoadError } from './chart_load_error'; + +const MIN_HEIGHT = 300; + +export type LensChartProps = UseLensAttributesParams & + BaseChartProps & + Pick & { + toolTip?: React.ReactElement; + }; + +export const LensChart = ({ + id, + borderRadius, + dateRange, + filters, + hidePanelTitles, + lastReloadRequestTime, + query, + onBrushEnd, + overrides, + toolTip, + disableTriggers = false, + height = MIN_HEIGHT, + loading = false, + ...lensAttributesParams +}: LensChartProps) => { + const { formula, attributes, getExtraActions, error } = useLensAttributes({ + ...lensAttributesParams, + }); + + const isLoading = loading || !attributes; + + const extraActions: Action[] = useMemo( + () => + getExtraActions({ + timeRange: dateRange, + query, + filters, + }), + [dateRange, filters, getExtraActions, query] + ); + + const sytle: CSSProperties = useMemo(() => ({ height }), [height]); + + const Lens = ( + + ); + + const getContent = () => { + if (!toolTip) { + return Lens; + } + + return ( + + {Lens} + + ); + }; + + return ( + + {error ? : getContent()} + + ); +}; diff --git a/x-pack/plugins/infra/public/components/lens/lens_wrapper.tsx b/x-pack/plugins/infra/public/components/lens/lens_wrapper.tsx index dc3c11dccacc0..f203c9c344797 100644 --- a/x-pack/plugins/infra/public/components/lens/lens_wrapper.tsx +++ b/x-pack/plugins/infra/public/components/lens/lens_wrapper.tsx @@ -9,7 +9,8 @@ import type { Action } from '@kbn/ui-actions-plugin/public'; import { ViewMode } from '@kbn/embeddable-plugin/public'; import type { TimeRange } from '@kbn/es-query'; import { TypedLensByValueInput } from '@kbn/lens-plugin/public'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import { css } from '@emotion/react'; +import { useEuiTheme } from '@elastic/eui'; import { useKibanaContextForPlugin } from '../../hooks/use_kibana'; import { ChartLoadingProgress, ChartPlaceholder } from './chart_placeholder'; import { parseDateRange } from '../../utils/datemath'; @@ -30,10 +31,11 @@ export const LensWrapper = ({ dateRange, filters, lastReloadRequestTime, - loading, + loading = false, query, ...props }: LensWrapperProps) => { + const { euiTheme } = useEuiTheme(); const [intersectionObserverEntry, setIntersectionObserverEntry] = useState(); const [embeddableLoaded, setEmbeddableLoaded] = useState(false); @@ -96,11 +98,25 @@ export const LensWrapper = ({ return { from, to }; }, [state.dateRange]); - const isLoading = loading || !state.attributes; return ( - +
<> {isLoading && !embeddableLoaded ? ( @@ -120,7 +136,7 @@ export const LensWrapper = ({ )} - +
); }; @@ -142,13 +158,3 @@ const EmbeddableComponentMemo = React.memo( return ; } ); - -const Container = euiStyled.div` - position: relative; - border-radius: ${({ theme }) => theme.eui.euiSizeS}; - overflow: hidden; - height: 100%; - .echLegend .echLegendList { - display: flex; - } -`; diff --git a/x-pack/plugins/infra/public/components/lens/metric_explanation/tooltip_content.tsx b/x-pack/plugins/infra/public/components/lens/metric_explanation/tooltip_content.tsx index fd46700130ee4..52459e70e2b05 100644 --- a/x-pack/plugins/infra/public/components/lens/metric_explanation/tooltip_content.tsx +++ b/x-pack/plugins/infra/public/components/lens/metric_explanation/tooltip_content.tsx @@ -11,14 +11,14 @@ import { css } from '@emotion/react'; import { FormattedMessage } from '@kbn/i18n-react'; import { HOST_METRICS_DOC_HREF } from '../../../common/visualizations/constants'; -interface Props extends Pick, 'style'> { +export interface TooltipContentProps extends Pick, 'style'> { description: string; formula?: string; showDocumentationLink?: boolean; } export const TooltipContent = React.memo( - ({ description, formula, showDocumentationLink = false, style }: Props) => { + ({ description, formula, showDocumentationLink = false, style }: TooltipContentProps) => { const onClick = (e: React.MouseEvent) => { e.stopPropagation(); }; diff --git a/x-pack/plugins/infra/public/components/lens/types.ts b/x-pack/plugins/infra/public/components/lens/types.ts new file mode 100644 index 0000000000000..8a4791de8cdf5 --- /dev/null +++ b/x-pack/plugins/infra/public/components/lens/types.ts @@ -0,0 +1,27 @@ +/* + * 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 { DataView } from '@kbn/data-views-plugin/public'; +import type { LensWrapperProps } from './lens_wrapper'; + +export type BaseChartProps = Pick< + LensWrapperProps, + | 'id' + | 'dateRange' + | 'disableTriggers' + | 'filters' + | 'hidePanelTitles' + | 'lastReloadRequestTime' + | 'loading' + | 'overrides' + | 'onBrushEnd' + | 'query' + | 'title' +> & { + dataView?: DataView; + height?: number; +}; diff --git a/x-pack/plugins/infra/public/hooks/use_lens_attributes.ts b/x-pack/plugins/infra/public/hooks/use_lens_attributes.ts index 721bf5669d203..6f3ae0cf37aff 100644 --- a/x-pack/plugins/infra/public/hooks/use_lens_attributes.ts +++ b/x-pack/plugins/infra/public/hooks/use_lens_attributes.ts @@ -68,7 +68,9 @@ interface UseLensAttributesMetricChartParams visualizationType: 'lnsMetric'; } -type UseLensAttributesParams = UseLensAttributesXYChartParams | UseLensAttributesMetricChartParams; +export type UseLensAttributesParams = + | UseLensAttributesXYChartParams + | UseLensAttributesMetricChartParams; export const useLensAttributes = ({ dataView, diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/components/chart/metric_chart_wrapper.tsx b/x-pack/plugins/infra/public/pages/metrics/hosts/components/chart/metric_chart_wrapper.tsx index 97be988142aa0..e78aae020b46b 100644 --- a/x-pack/plugins/infra/public/pages/metrics/hosts/components/chart/metric_chart_wrapper.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/hosts/components/chart/metric_chart_wrapper.tsx @@ -6,8 +6,8 @@ */ import React, { useEffect, useRef, CSSProperties } from 'react'; import { Chart, Metric, type MetricWNumber, type MetricWTrend } from '@elastic/charts'; -import { EuiPanel, EuiToolTip } from '@elastic/eui'; -import styled from 'styled-components'; +import { EuiPanel, EuiToolTip, useEuiTheme } from '@elastic/eui'; +import { css } from '@emotion/react'; import { ChartPlaceholder } from '../../../../../components/lens'; export interface Props extends Pick { @@ -16,11 +16,11 @@ export interface Props extends Pick { + const euiTheme = useEuiTheme(); const loadedOnce = useRef(false); useEffect(() => { @@ -42,7 +42,7 @@ export const MetricChartWrapper = React.memo( }; return ( - + {loading && !loadedOnce.current ? ( ) : ( @@ -52,19 +52,20 @@ export const MetricChartWrapper = React.memo( content={toolTip} anchorClassName="eui-fullWidth" > - + - + )} ); } ); - -const KPIChartStyled = styled(Chart)` - .echMetric { - border-radius: ${(p) => p.theme.eui.euiBorderRadius}; - pointer-events: none; - } -`; diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/components/kpis/hosts_tile.tsx b/x-pack/plugins/infra/public/pages/metrics/hosts/components/kpis/hosts_tile.tsx index 0571733b80034..f38e6772a3c84 100644 --- a/x-pack/plugins/infra/public/pages/metrics/hosts/components/kpis/hosts_tile.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/hosts/components/kpis/hosts_tile.tsx @@ -6,7 +6,6 @@ */ import { i18n } from '@kbn/i18n'; import React from 'react'; -import { KPIChartProps } from '../../../../../common/visualizations/lens/dashboards/host/kpi_grid_config'; import { hostLensFormulas } from '../../../../../common/visualizations'; import { useHostCountContext } from '../../hooks/use_host_count'; import { useUnifiedSearchContext } from '../../hooks/use_unified_search'; @@ -16,21 +15,20 @@ import { type Props, MetricChartWrapper } from '../chart/metric_chart_wrapper'; import { TooltipContent } from '../../../../../components/lens'; const HOSTS_CHART: Omit = { - id: `metric-hostCount`, + id: 'hostsViewKPI-hostsCount', color: '#6DCCB1', - title: i18n.translate('xpack.infra.hostsViewPage.metricTrend.hostCount.title', { + title: i18n.translate('xpack.infra.hostsViewPage.kpi.hostCount.title', { defaultMessage: 'Hosts', }), - ['data-test-subj']: 'hostsViewKPI-hostsCount', }; -export const HostsTile = ({ style }: Pick) => { +export const HostsTile = ({ height }: { height: number }) => { const { data: hostCountData, isRequestRunning: hostCountLoading } = useHostCountContext(); const { searchCriteria } = useUnifiedSearchContext(); const getSubtitle = () => { return searchCriteria.limit < (hostCountData?.count.value ?? 0) - ? i18n.translate('xpack.infra.hostsViewPage.metricTrend.subtitle.hostCount.limit', { + ? i18n.translate('xpack.infra.hostsViewPage.kpi.subtitle.hostCount.limit', { defaultMessage: 'Limited to {limit}', values: { limit: searchCriteria.limit, @@ -42,7 +40,7 @@ export const HostsTile = ({ style }: Pick) => { return ( { return ( @@ -26,11 +24,11 @@ export const KPIGrid = () => { - + {KPI_CHARTS.map((chartProp, index) => ( - + ))} diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/components/kpis/tile.tsx b/x-pack/plugins/infra/public/pages/metrics/hosts/components/kpis/tile.tsx index 950e74478dd4b..7211c89ce9071 100644 --- a/x-pack/plugins/infra/public/pages/metrics/hosts/components/kpis/tile.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/hosts/components/kpis/tile.tsx @@ -4,53 +4,47 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ -import React, { useMemo, useCallback } from 'react'; - +import React, { useMemo } from 'react'; import { i18n } from '@kbn/i18n'; -import { BrushTriggerEvent } from '@kbn/charts-plugin/public'; -import { EuiIcon, EuiPanel, EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip } from '@elastic/eui'; -import styled from 'styled-components'; -import { Action } from '@kbn/ui-actions-plugin/public'; -import { FormattedMessage } from '@kbn/i18n-react'; -import { LensWrapper, TooltipContent } from '../../../../../components/lens'; -import { KPIChartProps } from '../../../../../common/visualizations/lens/dashboards/host/kpi_grid_config'; +import { LensChart, TooltipContent } from '../../../../../components/lens'; +import { + type KPIChartProps, + AVERAGE_SUBTITLE, +} from '../../../../../common/visualizations/lens/dashboards/host/kpi_grid_config'; import { buildCombinedHostsFilter } from '../../../../../utils/filters/build'; -import { useLensAttributes } 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'; import { useHostCountContext } from '../../hooks/use_host_count'; import { useAfterLoadedState } from '../../hooks/use_after_loaded_state'; -import { KPI_CHART_MIN_HEIGHT } from '../../constants'; -export const Tile = ({ id, title, layers, style, toolTip }: KPIChartProps) => { - const { searchCriteria, onSubmit } = useUnifiedSearchContext(); +export const Tile = ({ + id, + title, + layers, + toolTip, + height, +}: KPIChartProps & { height: number }) => { + const { searchCriteria } = useUnifiedSearchContext(); const { dataView } = useMetricsDataViewContext(); const { requestTs, hostNodes, loading: hostsLoading } = useHostsViewContext(); const { data: hostCountData, isRequestRunning: hostCountLoading } = useHostCountContext(); const shouldUseSearchCriteria = hostNodes.length === 0; + const loading = hostsLoading || hostCountLoading; + const getSubtitle = () => { return searchCriteria.limit < (hostCountData?.count.value ?? 0) - ? i18n.translate('xpack.infra.hostsViewPage.metricTrend.subtitle.average.limit', { + ? i18n.translate('xpack.infra.hostsViewPage.kpi.subtitle.average.limit', { defaultMessage: 'Average (of {limit} hosts)', values: { limit: searchCriteria.limit, }, }) - : i18n.translate('xpack.infra.hostsViewPage.metricTrend.subtitle.average', { - defaultMessage: 'Average', - }); + : AVERAGE_SUBTITLE; }; - const { formula, attributes, getExtraActions, error } = useLensAttributes({ - dataView, - title, - layers: { ...layers, options: { ...layers.options, subtitle: getSubtitle() } }, - visualizationType: 'lnsMetric', - }); - const filters = useMemo(() => { return shouldUseSearchCriteria ? searchCriteria.filters @@ -61,106 +55,33 @@ export const Tile = ({ id, title, layers, style, toolTip }: KPIChartProps) => { dataView, }), ]; - }, [shouldUseSearchCriteria, searchCriteria.filters, hostNodes, dataView]); - - const loading = hostsLoading || !attributes || hostCountLoading; + }, [dataView, hostNodes, searchCriteria.filters, shouldUseSearchCriteria]); - // prevents requestTs and serchCriteria states from reloading the chart - // we want it to reload only once the host count and table have finished loading + // prevents requestTs and searchCriteria state from reloading the chart + // we want it to reload only once the table has finished loading const { afterLoadedState } = useAfterLoadedState(loading, { - attributes, lastReloadRequestTime: requestTs, - ...searchCriteria, + dateRange: searchCriteria.dateRange, + query: shouldUseSearchCriteria ? searchCriteria.query : undefined, filters, }); - const extraActions: Action[] = useMemo( - () => - getExtraActions({ - timeRange: afterLoadedState.dateRange, - query: shouldUseSearchCriteria ? afterLoadedState.query : undefined, - filters, - }), - [ - afterLoadedState.dateRange, - afterLoadedState.query, - filters, - getExtraActions, - shouldUseSearchCriteria, - ] - ); - - const handleBrushEnd = useCallback( - ({ range }: BrushTriggerEvent['data']) => { - const [min, max] = range; - onSubmit({ - dateRange: { - from: new Date(min).toISOString(), - to: new Date(max).toISOString(), - mode: 'absolute', - }, - }); - }, - [onSubmit] - ); - return ( - - {error ? ( - - - - - - - - - - - ) : ( - } - anchorClassName="eui-fullWidth" - > -
- -
- - )} - + } + visualizationType="lnsMetric" + disableTriggers + hidePanelTitles + /> ); }; - -const EuiPanelStyled = styled(EuiPanel)` - min-height: ${KPI_CHART_MIN_HEIGHT}px; - .echMetric { - border-radius: ${({ theme }) => theme.eui.euiBorderRadius}; - pointer-events: none; - } -`; diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/metrics/metric_chart.tsx b/x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/metrics/metric_chart.tsx index b31e5c1cb08d2..c0f05c55d1e9e 100644 --- a/x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/metrics/metric_chart.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/metrics/metric_chart.tsx @@ -4,59 +4,35 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ -import React, { CSSProperties, useCallback, useMemo } from 'react'; -import { Action } from '@kbn/ui-actions-plugin/public'; -import { BrushTriggerEvent } from '@kbn/charts-plugin/public'; -import { EuiIcon, EuiPanel, EuiFlexGroup, EuiFlexItem, EuiText, useEuiTheme } from '@elastic/eui'; -import { css } from '@emotion/react'; -import { TypedLensByValueInput } from '@kbn/lens-plugin/public'; -import { FormattedMessage } from '@kbn/i18n-react'; -import { LensWrapper } from '../../../../../../components/lens'; -import { useLensAttributes, Layer } from '../../../../../../hooks/use_lens_attributes'; +import React, { useMemo } from 'react'; +import type { TypedLensByValueInput } from '@kbn/lens-plugin/public'; +import { LensChart } from '../../../../../../components/lens'; +import type { Layer } from '../../../../../../hooks/use_lens_attributes'; import { useMetricsDataViewContext } from '../../../hooks/use_data_view'; import { useUnifiedSearchContext } from '../../../hooks/use_unified_search'; -import { FormulaConfig, XYLayerOptions } from '../../../../../../common/visualizations'; +import type { FormulaConfig, XYLayerOptions } from '../../../../../../common/visualizations'; import { useHostsViewContext } from '../../../hooks/use_hosts_view'; import { buildCombinedHostsFilter } from '../../../../../../utils/filters/build'; import { useHostsTableContext } from '../../../hooks/use_hosts_table'; import { useAfterLoadedState } from '../../../hooks/use_after_loaded_state'; -import { METRIC_CHART_MIN_HEIGHT } from '../../../constants'; +import { METRIC_CHART_HEIGHT } from '../../../constants'; export interface MetricChartProps extends Pick { title: string; layers: Array>; } -const lensStyle: CSSProperties = { - height: METRIC_CHART_MIN_HEIGHT, -}; - export const MetricChart = ({ id, title, layers, overrides }: MetricChartProps) => { - const { euiTheme } = useEuiTheme(); - const { searchCriteria, onSubmit } = useUnifiedSearchContext(); + const { searchCriteria } = useUnifiedSearchContext(); const { dataView } = useMetricsDataViewContext(); const { requestTs, loading } = useHostsViewContext(); const { currentPage } = useHostsTableContext(); const shouldUseSearchCriteria = currentPage.length === 0; - // prevents requestTs and serchCriteria states from reloading the chart - // we want it to reload only once the table has finished loading - const { afterLoadedState } = useAfterLoadedState(loading, { - lastReloadRequestTime: requestTs, - ...searchCriteria, - }); - - const { attributes, getExtraActions, error } = useLensAttributes({ - dataView, - layers, - title, - visualizationType: 'lnsXY', - }); - const filters = useMemo(() => { return shouldUseSearchCriteria - ? afterLoadedState.filters + ? searchCriteria.filters : [ buildCombinedHostsFilter({ field: 'host.name', @@ -64,85 +40,31 @@ export const MetricChart = ({ id, title, layers, overrides }: MetricChartProps) dataView, }), ]; - }, [afterLoadedState.filters, currentPage, dataView, shouldUseSearchCriteria]); - - const extraActions: Action[] = useMemo( - () => - getExtraActions({ - timeRange: afterLoadedState.dateRange, - query: shouldUseSearchCriteria ? afterLoadedState.query : undefined, - filters, - }), - [ - afterLoadedState.dateRange, - afterLoadedState.query, - filters, - getExtraActions, - shouldUseSearchCriteria, - ] - ); + }, [searchCriteria.filters, currentPage, dataView, shouldUseSearchCriteria]); - const handleBrushEnd = useCallback( - ({ range }: BrushTriggerEvent['data']) => { - const [min, max] = range; - onSubmit({ - dateRange: { - from: new Date(min).toISOString(), - to: new Date(max).toISOString(), - mode: 'absolute', - }, - }); - }, - [onSubmit] - ); + // prevents requestTs and searchCriteria state from reloading the chart + // we want it to reload only once the table has finished loading + const { afterLoadedState } = useAfterLoadedState(loading, { + lastReloadRequestTime: requestTs, + dateRange: searchCriteria.dateRange, + query: shouldUseSearchCriteria ? searchCriteria.query : undefined, + }); return ( - - {error ? ( - - - - - - - - - - - ) : ( - - )} - + dataView={dataView} + dateRange={afterLoadedState.dateRange} + height={METRIC_CHART_HEIGHT} + layers={layers} + lastReloadRequestTime={afterLoadedState.lastReloadRequestTime} + loading={loading} + filters={filters} + query={afterLoadedState.query} + title={title} + overrides={overrides} + visualizationType="lnsXY" + /> ); }; diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/constants.ts b/x-pack/plugins/infra/public/pages/metrics/hosts/constants.ts index 296d779e8a0fd..aace07448692e 100644 --- a/x-pack/plugins/infra/public/pages/metrics/hosts/constants.ts +++ b/x-pack/plugins/infra/public/pages/metrics/hosts/constants.ts @@ -15,8 +15,7 @@ export const DEFAULT_PAGE_SIZE = 10; export const LOCAL_STORAGE_HOST_LIMIT_KEY = 'hostsView:hostLimitSelection'; export const LOCAL_STORAGE_PAGE_SIZE_KEY = 'hostsView:pageSizeSelection'; -export const KPI_CHART_MIN_HEIGHT = 150; -export const METRIC_CHART_MIN_HEIGHT = 300; +export const METRIC_CHART_HEIGHT = 300; export const HOST_LIMIT_OPTIONS = [50, 100, 500] as const; export const HOST_METRICS_DOC_HREF = 'https://ela.st/docs-infra-host-metrics'; diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index fafb56aed9727..11f22770bec5f 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -18661,8 +18661,8 @@ "xpack.infra.homePage.toolbar.showingLastOneMinuteDataText": "Dernières {duration} de données pour l'heure sélectionnée", "xpack.infra.hostsViewPage.errorOnCreateOrLoadDataview": "Une erreur s’est produite lors de la création d’une vue de données : {metricAlias}. Essayez de recharger la page.", "xpack.infra.hostsViewPage.landing.calloutRoleClarificationWithDocsLink": "Un rôle avec accès aux paramètres avancés dans Kibana sera nécessaire. {docsLink}", - "xpack.infra.hostsViewPage.metricTrend.subtitle.average.limit": "Moyenne (de {limit} hôtes)", - "xpack.infra.hostsViewPage.metricTrend.subtitle.hostCount.limit": "Limité à {limit}", + "xpack.infra.hostsViewPage.kpi.subtitle.average.limit": "Moyenne (de {limit} hôtes)", + "xpack.infra.hostsViewPage.kpi.subtitle.hostCount.limit": "Limité à {limit}", "xpack.infra.hostsViewPage.table.selectedHostsButton": "Sélection effectuée de {selectedHostsCount} {selectedHostsCount, plural, =1 {hôte} one {hôtes} many {hôtes} other {hôtes}}", "xpack.infra.hostsViewPage.table.tooltip.documentationLabel": "Pour en savoir plus, consultez {documentation}", "xpack.infra.inventoryTimeline.header": "Moyenne {metricLabel}", @@ -18801,6 +18801,11 @@ "xpack.infra.assetDetailsEmbeddable.description": "Ajoutez une vue de détails de ressource.", "xpack.infra.assetDetailsEmbeddable.displayName": "Détails de ressource", "xpack.infra.assetDetailsEmbeddable.title": "Détails de ressource", + "xpack.infra.assetDetailsEmbeddable.overview.kpi.cpuUsage.title": "Utilisation CPU", + "xpack.infra.assetDetailsEmbeddable.overview.kpi.diskSpaceUsage.title": "Utilisation de l’espace disque", + "xpack.infra.assetDetailsEmbeddable.overview.kpi.memoryUsage.title": "Utilisation mémoire", + "xpack.infra.assetDetailsEmbeddable.overview.kpi.normalizedLoad1m.title": "Charge normalisée", + "xpack.infra.assetDetailsEmbeddable.overview.kpi.subtitle.average": "Moyenne", "xpack.infra.bottomDrawer.kubernetesDashboardsLink": "Tableaux de bord Kubernetes", "xpack.infra.chartSection.missingMetricDataBody": "Les données de ce graphique sont manquantes.", "xpack.infra.chartSection.missingMetricDataText": "Données manquantes", @@ -18885,6 +18890,7 @@ "xpack.infra.hostsViewPage.errorOnCreateOrLoadDataviewTitle": "Erreur lors de la création d'un Data View", "xpack.infra.hostsViewPage.hostLimit": "Limite de l'hôte", "xpack.infra.hostsViewPage.hostLimit.tooltip": "Pour garantir des performances de recherche plus rapides, le nombre d'hôtes retournés est limité.", + "xpack.infra.hostsViewPage.kpi.hostCount.title": "Hôtes", "xpack.infra.hostsViewPage.landing.calloutReachOutToYourKibanaAdministrator": "Votre rôle d'utilisateur ne dispose pas des privilèges suffisants pour activer cette fonctionnalité - veuillez \n contacter votre administrateur Kibana et lui demander de visiter cette page pour activer la fonctionnalité.", "xpack.infra.hostsViewPage.landing.enableHostsView": "Activer la vue des hôtes", "xpack.infra.hostsViewPage.landing.introMessage": "Bienvenue sur la fonctionnalité \"Hôtes\", désormais disponible en version bêta. Avec ce puissant outil, \n vous pouvez facilement voir et analyser vos hôtes et identifier tout problème afin de les corriger rapidement. \n Obtenez une vue détaillée des indicateurs pour vos hôtes afin de savoir lesquels déclenchent le plus d’alertes, et filtrez \n les hôtes que vous voulez analyser à l'aide de tout filtre KQL ainsi que de répartitions simples comme le fournisseur cloud et \n le système d'exploitation.", @@ -18901,12 +18907,6 @@ "xpack.infra.hostsViewPage.metrics.tooltip.normalizedLoad1m": "Moyenne de la charge sur 1 minute normalisée par le nombre de cœurs de processeur. ", "xpack.infra.hostsViewPage.metrics.tooltip.rx": "Nombre d'octets qui ont été reçus par seconde sur les interfaces publiques des hôtes.", "xpack.infra.hostsViewPage.metrics.tooltip.tx": "Nombre d'octets envoyés par seconde sur les interfaces publiques des hôtes.", - "xpack.infra.hostsViewPage.metricTrend.cpuUsage.title": "Utilisation CPU", - "xpack.infra.hostsViewPage.metricTrend.diskSpaceUsage.title": "Utilisation de l’espace disque", - "xpack.infra.hostsViewPage.metricTrend.hostCount.title": "Hôtes", - "xpack.infra.hostsViewPage.metricTrend.memoryUsage.title": "Utilisation mémoire", - "xpack.infra.hostsViewPage.metricTrend.normalizedLoad1m.title": "Charge normalisée", - "xpack.infra.hostsViewPage.metricTrend.subtitle.average": "Moyenne", "xpack.infra.hostsViewPage.table.addFilter": "Ajouter un filtre", "xpack.infra.hostsViewPage.table.cpuUsageColumnHeader": "Utilisation CPU (moy.)", "xpack.infra.hostsViewPage.table.diskSpaceUsageColumnHeader": "Utilisation de l’espace disque (moy.)", diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 66ea13be17908..15960dbd920ed 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -18675,8 +18675,8 @@ "xpack.infra.homePage.toolbar.showingLastOneMinuteDataText": "指定期間のデータの最後の{duration}", "xpack.infra.hostsViewPage.errorOnCreateOrLoadDataview": "データビューの作成中にエラーが発生しました：{metricAlias}。ページを再読み込みしてください。", "xpack.infra.hostsViewPage.landing.calloutRoleClarificationWithDocsLink": "Kibanaの高度な設定にアクセスできるロールが必要です。{docsLink}", - "xpack.infra.hostsViewPage.metricTrend.subtitle.average.limit": "（{limit}ホストの）平均", - "xpack.infra.hostsViewPage.metricTrend.subtitle.hostCount.limit": "{limit}に制限", + "xpack.infra.hostsViewPage.kpi.subtitle.average.limit": "（{limit}ホストの）平均", + "xpack.infra.hostsViewPage.kpi.subtitle.hostCount.limit": "{limit}に制限", "xpack.infra.hostsViewPage.table.selectedHostsButton": "{selectedHostsCount}件の{selectedHostsCount, plural, =1 {ホスト} other {ホスト}}が選択済み", "xpack.infra.hostsViewPage.table.tooltip.documentationLabel": "詳細については、{documentation}を参照してください。", "xpack.infra.inventoryTimeline.header": "平均{metricLabel}", @@ -18815,6 +18815,11 @@ "xpack.infra.assetDetailsEmbeddable.description": "アセット詳細ビューを追加します。", "xpack.infra.assetDetailsEmbeddable.displayName": "アセット詳細", "xpack.infra.assetDetailsEmbeddable.title": "アセット詳細", + "xpack.infra.assetDetailsEmbeddable.overview.kpi.cpuUsage.title": "CPU使用状況", + "xpack.infra.assetDetailsEmbeddable.overview.kpi.diskSpaceUsage.title": "ディスク容量使用状況", + "xpack.infra.assetDetailsEmbeddable.overview.kpi.memoryUsage.title": "メモリー使用状況", + "xpack.infra.assetDetailsEmbeddable.overview.kpi.normalizedLoad1m.title": "正規化された負荷", + "xpack.infra.assetDetailsEmbeddable.overview.kpi.subtitle.average": "平均", "xpack.infra.bottomDrawer.kubernetesDashboardsLink": "Kubernetesダッシュボード", "xpack.infra.chartSection.missingMetricDataBody": "このチャートはデータが欠けています。", "xpack.infra.chartSection.missingMetricDataText": "データが欠けています", @@ -18899,6 +18904,7 @@ "xpack.infra.hostsViewPage.errorOnCreateOrLoadDataviewTitle": "データビューの作成エラー", "xpack.infra.hostsViewPage.hostLimit": "ホスト制限", "xpack.infra.hostsViewPage.hostLimit.tooltip": "クエリパフォーマンスを確実に高めるために、返されるホスト数には制限があります", + "xpack.infra.hostsViewPage.kpi.hostCount.title": "ホスト", "xpack.infra.hostsViewPage.landing.calloutReachOutToYourKibanaAdministrator": "ユーザーロールには、この機能を有効にするための十分な権限がありません。 \n この機能を有効にするために、Kibana管理者に連絡して、このページにアクセスするように依頼してください。", "xpack.infra.hostsViewPage.landing.enableHostsView": "ホストビューを有効化", "xpack.infra.hostsViewPage.landing.introMessage": "「ホスト」機能へようこそ！ベータ版でご利用いただけるようになりました。この強力なツールを使用すると、\n ホストを簡単に表示、分析し、あらゆる問題を特定して、迅速に対処できます。\n ホストのメトリックを詳細に表示し、どのメトリックが最も多くのアラートをトリガーしているかを確認し、 \n 任意のKQLフィルターを使用して分析したいホストや、クラウドプロバイダーやオペレーティングシステムといった簡単な内訳をフィルターできます \n 。", @@ -18915,12 +18921,6 @@ "xpack.infra.hostsViewPage.metrics.tooltip.normalizedLoad1m": "CPUコア数で正規化した1分間の負荷平均。", "xpack.infra.hostsViewPage.metrics.tooltip.rx": "ホストのパブリックインターフェースで1秒間に受信したバイト数。", "xpack.infra.hostsViewPage.metrics.tooltip.tx": "ホストのパブリックインターフェースで1秒間に送信したバイト数。", - "xpack.infra.hostsViewPage.metricTrend.cpuUsage.title": "CPU使用状況", - "xpack.infra.hostsViewPage.metricTrend.diskSpaceUsage.title": "ディスク容量使用状況", - "xpack.infra.hostsViewPage.metricTrend.hostCount.title": "ホスト", - "xpack.infra.hostsViewPage.metricTrend.memoryUsage.title": "メモリー使用状況", - "xpack.infra.hostsViewPage.metricTrend.normalizedLoad1m.title": "正規化された負荷", - "xpack.infra.hostsViewPage.metricTrend.subtitle.average": "平均", "xpack.infra.hostsViewPage.table.addFilter": "フィルターを追加します", "xpack.infra.hostsViewPage.table.cpuUsageColumnHeader": "CPU使用状況（平均）", "xpack.infra.hostsViewPage.table.diskSpaceUsageColumnHeader": "ディスク容量使用状況（平均）", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 7b86064bc4322..0cff43087c67f 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -18675,8 +18675,8 @@ "xpack.infra.homePage.toolbar.showingLastOneMinuteDataText": "选定时间过去 {duration}的数据", "xpack.infra.hostsViewPage.errorOnCreateOrLoadDataview": "尝试创建以下数据视图时出错：{metricAlias}。尝试重新加载该页面。", "xpack.infra.hostsViewPage.landing.calloutRoleClarificationWithDocsLink": "他们将需要有权访问 Kibana 中的高级设置的角色。{docsLink}", - "xpack.infra.hostsViewPage.metricTrend.subtitle.average.limit": "平均值（属于 {limit} 台主机）", - "xpack.infra.hostsViewPage.metricTrend.subtitle.hostCount.limit": "限定为 {limit}", + "xpack.infra.hostsViewPage.kpi.subtitle.average.limit": "平均值（属于 {limit} 台主机）", + "xpack.infra.hostsViewPage.kpi.subtitle.hostCount.limit": "限定为 {limit}", "xpack.infra.hostsViewPage.table.selectedHostsButton": "已选定 {selectedHostsCount} 个{selectedHostsCount, plural, =1 {主机} other {主机}}", "xpack.infra.hostsViewPage.table.tooltip.documentationLabel": "请参阅 {documentation} 了解更多信息", "xpack.infra.inventoryTimeline.header": "平均值 {metricLabel}", @@ -18815,6 +18815,11 @@ "xpack.infra.assetDetailsEmbeddable.description": "添加资产详情视图。", "xpack.infra.assetDetailsEmbeddable.displayName": "资产详情", "xpack.infra.assetDetailsEmbeddable.title": "资产详情", + "xpack.infra.assetDetailsEmbeddable.overview.kpi.cpuUsage.title": "CPU 使用率", + "xpack.infra.assetDetailsEmbeddable.overview.kpi.diskSpaceUsage.title": "磁盘空间使用率", + "xpack.infra.assetDetailsEmbeddable.overview.kpi.memoryUsage.title": "内存利用率", + "xpack.infra.assetDetailsEmbeddable.overview.kpi.normalizedLoad1m.title": "标准化负载", + "xpack.infra.assetDetailsEmbeddable.overview.kpi.subtitle.average": "平均值", "xpack.infra.bottomDrawer.kubernetesDashboardsLink": "Kubernetes 仪表板", "xpack.infra.chartSection.missingMetricDataBody": "此图表的数据缺失。", "xpack.infra.chartSection.missingMetricDataText": "缺失数据", @@ -18899,6 +18904,7 @@ "xpack.infra.hostsViewPage.errorOnCreateOrLoadDataviewTitle": "创建数据视图时出错", "xpack.infra.hostsViewPage.hostLimit": "主机限制", "xpack.infra.hostsViewPage.hostLimit.tooltip": "为确保更快的查询性能，对返回的主机数量实施了限制", + "xpack.infra.hostsViewPage.kpi.hostCount.title": "主机", "xpack.infra.hostsViewPage.landing.calloutReachOutToYourKibanaAdministrator": "您的用户角色权限不足，无法启用此功能 - 请 \n 联系您的 Kibana 管理员，要求他们访问此页面以启用该功能。", "xpack.infra.hostsViewPage.landing.enableHostsView": "启用主机视图", "xpack.infra.hostsViewPage.landing.introMessage": "欢迎使用“主机”功能，该功能现在为公测版！使用这个强大的工具，\n 您可以轻松查看并分析主机，并确定任何问题以便快速予以解决。\n 获取您主机的详细指标视图，了解哪些指标触发了大多数告警， \n 并使用任何 KQL 筛选以及云提供商和操作系统等常见细目筛选 \n 您要分析的主机。", @@ -18915,12 +18921,6 @@ "xpack.infra.hostsViewPage.metrics.tooltip.normalizedLoad1m": "1 分钟负载平均值，按 CPU 核心数进行标准化。", "xpack.infra.hostsViewPage.metrics.tooltip.rx": "主机的公共接口上每秒接收的字节数。", "xpack.infra.hostsViewPage.metrics.tooltip.tx": "主机的公共接口上每秒发送的字节数。", - "xpack.infra.hostsViewPage.metricTrend.cpuUsage.title": "CPU 使用率", - "xpack.infra.hostsViewPage.metricTrend.diskSpaceUsage.title": "磁盘空间使用率", - "xpack.infra.hostsViewPage.metricTrend.hostCount.title": "主机", - "xpack.infra.hostsViewPage.metricTrend.memoryUsage.title": "内存利用率", - "xpack.infra.hostsViewPage.metricTrend.normalizedLoad1m.title": "标准化负载", - "xpack.infra.hostsViewPage.metricTrend.subtitle.average": "平均值", "xpack.infra.hostsViewPage.table.addFilter": "添加筛选", "xpack.infra.hostsViewPage.table.cpuUsageColumnHeader": "CPU 使用率（平均值）", "xpack.infra.hostsViewPage.table.diskSpaceUsageColumnHeader": "磁盘空间使用率（平均值）", diff --git a/x-pack/test/functional/page_objects/infra_hosts_view.ts b/x-pack/test/functional/page_objects/infra_hosts_view.ts index b56b57843cd3b..00ae0af08cf07 100644 --- a/x-pack/test/functional/page_objects/infra_hosts_view.ts +++ b/x-pack/test/functional/page_objects/infra_hosts_view.ts @@ -206,7 +206,7 @@ export function InfraHostsViewProvider({ getService }: FtrProviderContext) { // Flyout Tabs async getAssetDetailsKPITileValue(type: string) { const container = await testSubjects.find('assetDetailsKPIGrid'); - const element = await container.findByTestSubject(`assetDetailsKPI-${type}`); + const element = await container.findByTestSubject(`infraAssetDetailsKPI${type}`); const div = await element.findByClassName('echMetricText__value'); return div.getAttribute('title'); }, @@ -229,7 +229,7 @@ export function InfraHostsViewProvider({ getService }: FtrProviderContext) { async getAssetDetailsMetricsCharts() { const container = await testSubjects.find('assetDetailsMetricsChartGrid'); - return container.findAllByCssSelector('[data-test-subj*="assetDetailsMetricsChart"]'); + return container.findAllByCssSelector('[data-test-subj*="infraAssetDetailsMetricsChart"]'); }, getMetadataTab() {