[Infra UI] Add missing configuration to display dotted lines in the metric charts (#167509)

fixes https://github.com/elastic/kibana/issues/166850
## Summary

This PR fixes a problem where the charts were not configured to display
dotted lines when there were data points missing.


<img width="1459" alt="image"
src="86228cba-f184-46b8-80f6-f439211e200f">

<img width="1459" alt="image"
src="ced0e3c4-93f1-4967-838c-f8207adc5e4d">



### How to test
- Setup a local Kibana instance pointing to an oblt cluster
- Navigate to `Infrastructure` > `Hosts` 
- Click on a host to navigate to the details page
- Verify if charts with missing data points display dottet lines
This commit is contained in:
Carlos Crespo 2023-09-29 15:59:05 +02:00 committed by GitHub
parent a32693db40
commit 8c17d8ab5d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 2 deletions

View file

@ -39,7 +39,7 @@ export const Chart = ({
assetName,
...props
}: ChartProps) => {
const { setDateRange } = useDateRangeProviderContext();
const { setDateRange, refreshTs } = useDateRangeProviderContext();
const dataView = useMemo(() => {
return dataViewOrigin === 'metrics' ? metricsDataView : logsDataView;
@ -93,6 +93,7 @@ export const Chart = ({
filters={filters}
title={title}
overrides={overrides}
lastReloadRequestTime={refreshTs}
visualizationType="lnsXY"
onBrushEnd={handleBrushEnd}
onFilter={handleFilter}

View file

@ -8,7 +8,10 @@ import React, { useMemo } from 'react';
import type { DataView } from '@kbn/data-views-plugin/public';
import { EuiFlexItem, EuiFlexGrid } from '@elastic/eui';
import type { TimeRange } from '@kbn/es-query';
import type { XYConfig } from '../../../../../common/visualizations';
import {
type XYConfig,
XY_MISSING_VALUE_DOTTED_LINE_CONFIG,
} from '../../../../../common/visualizations';
import { useMetadataStateProviderContext } from '../../../hooks/use_metadata_state';
import { Chart } from './chart';
@ -55,6 +58,7 @@ export const MetricsGrid = ({
logsDataView={logsDataView}
metricsDataView={metricsDataView}
data-test-subj={props['data-test-subj']}
visualOptions={XY_MISSING_VALUE_DOTTED_LINE_CONFIG}
/>
</EuiFlexItem>
))}