[Uptime] fix report crashing when no report dates exist [fix #122086] (…

…#122163)

x-pack/plugins/observability/public/components/shared/exploratory_view/components/date_range_picker.tsx

@@ -15,9 +15,10 @@ import { useUiSetting } from '../../../../../../../../src/plugins/kibana_react/p
 import { SeriesUrl } from '../types';
 import { ReportTypes } from '../configurations/constants';
 
-export const parseRelativeDate = (date: string, options = {}) => {
+export const parseRelativeDate = (date: string, options = {}): Moment | void => {
   return DateMath.parse(date, options)!;
 };
+
 export function DateRangePicker({ seriesId, series }: { seriesId: number; series: SeriesUrl }) {
   const { firstSeries, setSeries, reportType } = useSeriesStorage();
   const dateFormat = useUiSetting<string>('dateFormat');

x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/lens_attributes.ts

@@ -635,11 +635,17 @@ export class LensAttributes {
       time: { from },
     } = layerConfig;
 
-    const inDays = Math.abs(parseRelativeDate(mainFrom).diff(parseRelativeDate(from), 'days'));
+    const parsedMainFrom = parseRelativeDate(mainFrom);
+    const parsedFrom = parseRelativeDate(from);
+
+    const inDays =
+      parsedMainFrom && parsedFrom ? Math.abs(parsedMainFrom.diff(parsedFrom, 'days')) : 0;
     if (inDays > 1) {
       return inDays + 'd';
     }
-    const inHours = Math.abs(parseRelativeDate(mainFrom).diff(parseRelativeDate(from), 'hours'));
+
+    const inHours =
+      parsedMainFrom && parsedFrom ? Math.abs(parsedMainFrom?.diff(parsedFrom, 'hours')) : 0;
     if (inHours === 0) {
       return null;
     }

x-pack/plugins/observability/public/components/shared/exploratory_view/header/add_to_case_action.test.tsx

@@ -6,14 +6,18 @@
  */
 
 import React from 'react';
-import { render } from '../rtl_helpers';
+import { render, forNearestButton } from '../rtl_helpers';
 import { fireEvent } from '@testing-library/dom';
 import { AddToCaseAction } from './add_to_case_action';
 import * as useCaseHook from '../hooks/use_add_to_case';
 import * as datePicker from '../components/date_range_picker';
 import moment from 'moment';
 
 describe('AddToCaseAction', function () {
+  beforeEach(() => {
+    jest.spyOn(datePicker, 'parseRelativeDate').mockRestore();
+  });
+
   it('should render properly', async function () {
     const { findByText } = render(
       <AddToCaseAction
@@ -49,6 +53,26 @@ describe('AddToCaseAction', function () {
     );
   });
 
+  it('should use an empty time-range when timeRanges are empty', async function () {
+    const useAddToCaseHook = jest.spyOn(useCaseHook, 'useAddToCase');
+
+    const { getByText } = render(
+      <AddToCaseAction lensAttributes={null} timeRange={{ to: '', from: '' }} />
+    );
+
+    expect(await forNearestButton(getByText)('Add to case')).toBeDisabled();
+
+    expect(useAddToCaseHook).toHaveBeenCalledWith(
+      expect.objectContaining({
+        lensAttributes: null,
+        timeRange: {
+          from: '',
+          to: '',
+        },
+      })
+    );
+  });
+
   it('should be able to click add to case button', async function () {
     const initSeries = {
       data: [

x-pack/plugins/observability/public/components/shared/exploratory_view/header/add_to_case_action.tsx

@@ -54,7 +54,10 @@ export function AddToCaseAction({ lensAttributes, timeRange }: AddToCaseProps) {
   const { onCaseClicked, isCasesOpen, setIsCasesOpen, isSaving } = useAddToCase({
     lensAttributes,
     getToastText,
-    timeRange: { from: absoluteFromDate.toISOString(), to: absoluteToDate.toISOString() },
+    timeRange: {
+      from: absoluteFromDate?.toISOString() ?? '',
+      to: absoluteToDate?.toISOString() ?? '',
+    },
   });
 
   const getAllCasesSelectorModalProps: GetAllCasesSelectorModalProps = {

x-pack/plugins/observability/public/components/shared/exploratory_view/header/last_updated.tsx

@@ -14,8 +14,8 @@ import { ChartCreationInfo } from './chart_creation_info';
 
 export interface ChartTimeRange {
   lastUpdated: number;
-  to: number;
-  from: number;
+  to?: number;
+  from?: number;
 }
 
 interface Props {

x-pack/plugins/observability/public/components/shared/exploratory_view/lens_embeddable.tsx

@@ -45,8 +45,8 @@ export function LensEmbeddable(props: Props) {
 
       setChartTimeRangeContext({
         lastUpdated: timeLoaded,
-        to: parseRelativeDate(timeRange?.to || '').valueOf(),
-        from: parseRelativeDate(timeRange?.from || '').valueOf(),
+        to: parseRelativeDate(timeRange?.to || '')?.valueOf(),
+        from: parseRelativeDate(timeRange?.from || '')?.valueOf(),
       });
 
       if (!isLoading) {

x-pack/plugins/observability/public/components/shared/exploratory_view/rtl_helpers.tsx

@@ -9,7 +9,12 @@ import { of } from 'rxjs';
 import React, { ReactElement } from 'react';
 import { stringify } from 'query-string';
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { render as reactTestLibRender, RenderOptions } from '@testing-library/react';
+import {
+  render as reactTestLibRender,
+  RenderOptions,
+  Nullish,
+  MatcherFunction,
+} from '@testing-library/react';
 import { Route, Router } from 'react-router-dom';
 import { createMemoryHistory, History } from 'history';
 import { CoreStart } from 'kibana/public';
@@ -370,3 +375,18 @@ export const mockIndexPattern = createStubIndexPattern({
     fields: JSON.parse(indexPatternData.attributes.fields),
   },
 });
+
+// This function allows us to query for the nearest button with test
+// no matter whether it has nested tags or not (as EuiButton elements do).
+export const forNearestButton =
+  (getByText: (f: MatcherFunction) => HTMLElement | null) =>
+  (text: string): HTMLElement | null =>
+    getByText((_content: string, node: Nullish<Element>) => {
+      if (!node) return false;
+      const noOtherButtonHasText = Array.from(node.children).every(
+        (child) => child && (child.textContent !== text || child.tagName.toLowerCase() !== 'button')
+      );
+      return (
+        noOtherButtonHasText && node.textContent === text && node.tagName.toLowerCase() === 'button'
+      );
+    });