From 8c17d8ab5d1d4636b2a99248c8bd7712926259ef Mon Sep 17 00:00:00 2001
From: Carlos Crespo <crespocarlos@users.noreply.github.com>
Date: Fri, 29 Sep 2023 15:59:05 +0200
Subject: [PATCH] [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="https://github.com/elastic/kibana/assets/2767137/86228cba-f184-46b8-80f6-f439211e200f">

<img width="1459" alt="image"
src="https://github.com/elastic/kibana/assets/2767137/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
---
 .../asset_details/tabs/overview/metrics/chart.tsx           | 3 ++-
 .../asset_details/tabs/overview/metrics/metrics_grid.tsx    | 6 +++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/metrics/chart.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/metrics/chart.tsx
index 087315f5834e3..ab096e8337874 100644
--- a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/metrics/chart.tsx
+++ b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/metrics/chart.tsx
@@ -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}
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 f0d8daaf63456..d0bfd585e5080 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
@@ -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>
       ))}