feat: add disconnected to line chart

Signed-off-by: Gabriel Bernal <gbernal@redhat.com>

Author: jgbernalp

web/src/components/MetricsPage.tsx

@@ -1091,6 +1091,7 @@ const QueryBrowserWrapper: React.FC<{
       disabledSeries={disabledSeries}
       queries={queryStrings}
       showStackedControl
+      showDisconnectedControl
     />
   );
 };

web/src/components/query-browser.tsx

@@ -1,6 +1,3 @@
-import * as _ from 'lodash-es';
-import classNames from 'classnames';
-import * as React from 'react';
 import {
   PrometheusEndpoint,
   PrometheusLabels,
@@ -22,28 +19,32 @@ import {
 import {
   Alert,
   Button,
+  Card,
+  CardBody,
+  CardHeader,
   Checkbox,
   Dropdown,
   DropdownItem,
   DropdownList,
   EmptyState,
   EmptyStateBody,
   EmptyStateVariant,
-  MenuToggle,
-  MenuToggleElement,
   InputGroup,
-  TextInput,
-  Title,
   InputGroupItem,
-  Card,
-  CardHeader,
-  Split,
-  SplitItem,
   Level,
   LevelItem,
-  CardBody,
+  MenuToggle,
+  MenuToggleElement,
+  Split,
+  SplitItem,
+  TextInput,
+  Title,
+  Tooltip,
 } from '@patternfly/react-core';
 import { ChartLineIcon } from '@patternfly/react-icons';
+import classNames from 'classnames';
+import * as _ from 'lodash-es';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -69,24 +70,24 @@ import { queryBrowserTheme } from './query-browser-theme';
 import { PrometheusAPIError, TimeRange } from './types';
 import { getTimeRanges } from './utils';
 
-import { getLegacyObserveState, getObserveState, usePerspective } from './hooks/usePerspective';
-import { MonitoringState } from '../reducers/observe';
-import { LoadingInline } from './console/console-shared/src/components/loading/LoadingInline';
+import { CustomDataSource } from '@openshift-console/dynamic-plugin-sdk/lib/extensions/dashboard-data-source';
 import {
-  formatPrometheusDuration,
-  parsePrometheusDuration,
-} from './console/console-shared/src/datetime/prometheus';
+  chart_area_Opacity,
+  chart_axis_tick_Size,
+  t_chart_global_fill_color_200,
+} from '@patternfly/react-tokens';
+import { MonitoringState } from '../reducers/observe';
 import withFallback from './console/console-shared/error/fallbacks/withFallback';
-import { CustomDataSource } from '@openshift-console/dynamic-plugin-sdk/lib/extensions/dashboard-data-source';
+import { LoadingInline } from './console/console-shared/src/components/loading/LoadingInline';
 import {
   QueryBrowserTooltip,
   valueFormatter,
 } from './console/console-shared/src/components/query-browser/QueryBrowserTooltip';
 import {
-  chart_area_Opacity,
-  chart_axis_tick_Size,
-  t_chart_global_fill_color_200,
-} from '@patternfly/react-tokens';
+  formatPrometheusDuration,
+  parsePrometheusDuration,
+} from './console/console-shared/src/datetime/prometheus';
+import { getLegacyObserveState, getObserveState, usePerspective } from './hooks/usePerspective';
 import './query-browser.scss';
 
 const spans = ['5m', '15m', '30m', '1h', '2h', '6h', '12h', '1d', '2d', '1w', '2w'];
@@ -415,7 +416,9 @@ const formatSeriesValues = (
   samples: number,
   span: number,
   defaultEmptyValue: 0 | null,
-): GraphDataPoint[] => {
+  createGaps: boolean,
+): { points: GraphDataPoint[]; hasDisconnectedValues: boolean } => {
+  let hasDisconnectedValues = false;
   const newValues = _.map(values, (v) => {
     const y = Number(v[1]);
     return {
@@ -424,19 +427,23 @@ const formatSeriesValues = (
     };
   });
 
-  // The data may have missing values, so we fill those gaps with nulls so that the graph correctly
+  // The data may have missing values, if disconnected is enabled,
+  // we fill those gaps with nulls so that the graph correctly
   // shows the missing values as gaps in the line
   const start = Number(_.get(newValues, '[0].x'));
   const end = Number(_.get(_.last(newValues), 'x'));
   const step = span / samples;
   _.range(start, end, step).forEach((t, i) => {
     const x = new Date(t);
     if (_.get(newValues, [i, 'x']) > x) {
-      newValues.splice(i, 0, { x, y: null });
+      hasDisconnectedValues = true;
+      if (createGaps) {
+        newValues.splice(i, 0, { x, y: null });
+      }
     }
   });
 
-  return newValues;
+  return { points: newValues, hasDisconnectedValues };
 };
 
 // Try to limit the graph to this number of data points
@@ -581,6 +588,7 @@ const QueryBrowser_: React.FC<QueryBrowserProps> = ({
   queries,
   showLegend,
   showStackedControl = false,
+  showDisconnectedControl = true,
   timespan,
   units,
   onDataChange,
@@ -626,6 +634,8 @@ const QueryBrowser_: React.FC<QueryBrowserProps> = ({
   const safeFetch = useSafeFetch();
 
   const [isStacked, setIsStacked] = React.useState(isStack);
+  const [showDisconnectedValues, setIsShowDisconnectedValues] = React.useState(false);
+  const [isDisconnectedEnabled, setIsDisconnectedEnabled] = React.useState(true);
 
   const canStack = _.sumBy(graphData, 'length') <= maxStacks;
 
@@ -737,6 +747,8 @@ const QueryBrowser_: React.FC<QueryBrowserProps> = ({
           maxSamplesForSpan,
         );
 
+        let dataIsDisconnected = false;
+
         // Change `samples` if either
         //   - It will change by a proportion greater than `samplesLeeway`
         //   - It will change to the upper or lower limit of its allowed range
@@ -764,14 +776,26 @@ const QueryBrowser_: React.FC<QueryBrowserProps> = ({
                     );
                     defaultEmptyValue = 0;
                   }
-                  return [metric, formatSeriesValues(values, samples, span, defaultEmptyValue)];
+                  const { points, hasDisconnectedValues } = formatSeriesValues(
+                    values,
+                    samples,
+                    span,
+                    defaultEmptyValue,
+                    showDisconnectedValues,
+                  );
+
+                  dataIsDisconnected = hasDisconnectedValues;
+
+                  return [metric, points];
                 }
               });
             },
           );
           setGraphData(newGraphData);
           onDataChange?.(newGraphData);
 
+          setIsDisconnectedEnabled(dataIsDisconnected);
+
           _.each(newResults, (r, i) =>
             dispatch(queryBrowserPatchQuery(i, { series: r ? _.map(r, 'metric') : undefined })),
           );
@@ -815,6 +839,7 @@ const QueryBrowser_: React.FC<QueryBrowserProps> = ({
     samples,
     span,
     lastRequestTime,
+    showDisconnectedValues,
   );
 
   React.useLayoutEffect(
@@ -908,18 +933,52 @@ const QueryBrowser_: React.FC<QueryBrowserProps> = ({
               </SplitItem>
               <SplitItem isFilled />
               <SplitItem>
-                {GraphLink && <GraphLink />}
-                {canStack && showStackedControl && (
-                  <Checkbox
-                    id="stacked"
-                    isChecked={isStacked}
-                    data-checked-state={isStacked}
-                    label={t('Stacked')}
-                    onChange={(_e, v) =>
-                      typeof _e === 'boolean' ? setIsStacked(_e) : setIsStacked(v)
-                    }
-                  />
-                )}
+                <Split hasGutter>
+                  {GraphLink && (
+                    <SplitItem>
+                      <GraphLink />
+                    </SplitItem>
+                  )}
+                  {canStack && showStackedControl && (
+                    <SplitItem>
+                      <Checkbox
+                        id="stacked"
+                        isChecked={isStacked}
+                        data-checked-state={isStacked}
+                        label={t('Stacked')}
+                        onChange={(_e, v) =>
+                          typeof _e === 'boolean' ? setIsStacked(_e) : setIsStacked(v)
+                        }
+                      />
+                    </SplitItem>
+                  )}
+                  {showDisconnectedControl && (
+                    <SplitItem>
+                      <Tooltip
+                        content={
+                          <div>
+                            {isDisconnectedEnabled
+                              ? t('Check to show gaps for missing data')
+                              : t('No gaps found in the data')}
+                          </div>
+                        }
+                      >
+                        <Checkbox
+                          id="disconnected"
+                          isChecked={isDisconnectedEnabled && showDisconnectedValues}
+                          data-checked-state={isDisconnectedEnabled && showDisconnectedValues}
+                          label={t('Disconnected')}
+                          onChange={(_e, v) =>
+                            typeof _e === 'boolean'
+                              ? setIsShowDisconnectedValues(_e)
+                              : setIsShowDisconnectedValues(v)
+                          }
+                          isDisabled={!isDisconnectedEnabled}
+                        />
+                      </Tooltip>
+                    </SplitItem>
+                  )}
+                </Split>
               </SplitItem>
             </Split>
           </CardHeader>
@@ -1028,6 +1087,7 @@ export type QueryBrowserProps = {
   queries: string[];
   showLegend?: boolean;
   showStackedControl?: boolean;
+  showDisconnectedControl?: boolean;
   timespan?: number;
   units?: string;
   onDataChange?: (data: any) => void;