Correct date pass-through on Notebook Visualizations.

public/components/common/query_utils/__tests__/query_utils.test.tsx

@@ -3,8 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
 import React from 'react';
 import {
+  convertDateTime,
   findMinInterval,
   parsePromQLIntoKeywords,
   preprocessMetricQuery,
@@ -61,6 +62,42 @@
       expect(minInterval).toEqual(span);
     });
   });
+  describe('convertDateTime', () => {
+    it('converts from absolute timestamp', () => {
+      const time = '2020-07-21T18:37:44.710Z';
+      const converted = convertDateTime(time);
+      expect(converted).toEqual('2020-07-21 18:37:44.710000');
+    });
+    it('formats to PPL standard format when default formatting', () => {
+      const time = '2020-07-21T18:37:44.710Z';
+      const converted = convertDateTime(time, true, true);
+      expect(converted).toEqual('2020-07-21 18:37:44.710000');
+    });
+    it('formats to specified format when provided', () => {
+      const time = '2020-07-21T18:37:44.710Z';
+      const converted = convertDateTime(time, true, 'YYYY-MMM-DD');
+      expect(converted).toEqual('2020-JUL-21');
+    });
+    describe('with moment reference notations', () => {
+      beforeEach(() => {
+        jest.useFakeTimers().setSystemTime(new Date('2020-02-02 12:01:00'));
+      });
+      afterEach(() => {
+        jest.useRealTimers();
+      });
+
+      it('converts named-reference, rounded', () => {
+        const time = 'now-1d/d';
+        const converted = convertDateTime(time, true);
+        expect(converted).toEqual('2020-02-01 00:00:00.000000');
+      });
+      it.skip('converts named-reference, rounded as end of interval', () => {
+        const time = 'now/d';
+        const converted = convertDateTime(time);
+        expect(converted).toEqual('2020-02-02 23:59:59.999999');
+      });
+    });
+  });
   describe('Metric Query processors', () => {
     const defaultQueryMetaData = {
       catalogSourceName: 'my_catalog',

public/components/common/query_utils/index.ts

@@ -4,9 +4,9 @@
  */
 
 import dateMath from '@elastic/datemath';
 import { Moment } from 'moment-timezone';
 import { isEmpty } from 'lodash';
 import { SearchMetaData } from '../../event_analytics/redux/slices/search_meta_data_slice';
 import {
   PPL_DEFAULT_PATTERN_REGEX_FILETER,
   SELECTED_DATE_RANGE,
@@ -19,7 +19,7 @@
   PPL_INDEX_REGEX,
   PPL_NEWLINE_REGEX,
 } from '../../../../common/constants/shared';
 import { IExplorerFields, IQuery } from '../../../../common/types/explorer';
 
 /*
  * "Query Utils" This file contains different reused functions in operational panels
@@ -74,7 +74,9 @@
     const epochTime = myDate.getTime() / 1000.0;
     return Math.round(epochTime);
   }
-  if (formatted) return returnTime?.utc()?.format(PPL_DATE_FORMAT);
+  if (formatted === true) return returnTime?.utc()?.format(PPL_DATE_FORMAT);
+  if (formatted) return returnTime?.utc()?.format(formatted);
+
   return returnTime;
 };
 

public/components/event_analytics/explorer/events_views/data_grid.scss

@@ -61,7 +61,7 @@
       dt {
         background-color: transparentize(shade($euiColorPrimary, 20%), 0.9);
         color: $euiTextColor;
-        padding: ($euiSizeXS / 2) $euiSizeXS;
+        padding: calc($euiSizeXS / 2) $euiSizeXS;
         margin-right: $euiSizeXS;
         word-break: normal;
         border-radius: $euiBorderRadius;

public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_output.test.tsx.snap

@@ -72,6 +72,6 @@ exports[`<ParaOutput /> spec renders visualization outputs 1`] = `
   class="euiText euiText--small"
   style="margin-left: 9px;"
 >
-  2020-07-21 18:37:44.710000 - 2020-07-21 18:37:44.710000
+  2020-Jul-21 18:37:44 - 2020-Aug-20 18:37:44
 </div>
 `;

public/components/notebooks/components/paragraph_components/__tests__/para_output.test.tsx

@@ -3,12 +3,13 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
 import { fireEvent, render } from '@testing-library/react';
 import { configure, mount, shallow } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import React from 'react';
 import { sampleParsedParagraghs1 } from '../../helpers/__tests__/sampleDefaultNotebooks';
 import { ParaOutput } from '../para_output';
+import { uiSettingsService } from '../../../../../../common/utils/core_services';
 
 describe('<ParaOutput /> spec', () => {
   configure({ adapter: new Adapter() });
@@ -48,18 +49,21 @@
   it('renders visualization outputs', () => {
     const para = sampleParsedParagraghs1[2];
     para.isSelected = true;
+
+    uiSettingsService.get = jest.fn().mockReturnValue('YYYY-MMM-DD HH:mm:ss');
     const setVisInput = jest.fn();
     const utils = render(
       <ParaOutput
         key={para.uniqueId}
         para={para}
         visInput={{
-          timeRange: { from: '2020-07-21T18:37:44.710Z', to: '2020-08-20T18:37:44.710Z' },
+          timeRange: { from: '2020-JUL-21 18:37:44', to: '2020-AUG-20 18:37:44' },
         }}
         setVisInput={setVisInput}
         DashboardContainerByValueRenderer={() => null}
       />
     );
+    expect(utils.container.textContent).toMatch('2020-Jul-21 18:37:44 - 2020-Aug-20 18:37:44');
     expect(utils.container.firstChild).toMatchSnapshot();
   });
 

public/components/notebooks/components/paragraph_components/para_output.tsx

@@ -8,8 +8,8 @@
 import { Media } from '@nteract/outputs';
 import React, { useState } from 'react';
 import { VisualizationContainer } from '../../../../components/custom_panels/panel_modules/visualization_container';
 import PPLService from '../../../../services/requests/ppl';
 import { CoreStart } from '../../../../../../../src/core/public';
 import {
   DashboardContainerInput,
   DashboardStart,
@@ -100,9 +100,10 @@
    */
   const dateFormat = uiSettingsService.get('dateFormat');
   const from = convertDateTime(visInput?.timeRange?.from, true, false);
-  const to = convertDateTime(visInput?.timeRange?.from, false, false);
-  const displayFrom = convertDateTime(visInput?.timeRange?.from, true) || 'Invalid date';
-  const displayTo = convertDateTime(visInput?.timeRange?.from, false) || 'Invalid date';
+  const to = convertDateTime(visInput?.timeRange?.to, false, false);
+  const displayFrom =
+    convertDateTime(visInput?.timeRange?.from, true, dateFormat) || 'Invalid date';
+  const displayTo = convertDateTime(visInput?.timeRange?.to, false, dateFormat) || 'Invalid date';
   if (typeOut !== undefined) {
     switch (typeOut) {
       case 'QUERY':