[Backport] Backport/backport 1327 to main

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

@@ -3,8 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
 import {
+  convertDateTime,
   findMinInterval,
   parsePromQLIntoKeywords,
   preprocessMetricQuery,
@@ -61,6 +61,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).toMatch(/2020-jul-21/i);
+    });
+    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

@@ -74,7 +74,9 @@ export const convertDateTime = (
     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-21T18:37:44+00:00 - 2020-08-20T18:37:44+00:00
+  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 { render } from '@testing-library/react';
+import { configure } 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 @@ describe('<ParaOutput /> spec', () => {
   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

@@ -6,7 +6,6 @@
 import { EuiCodeBlock, EuiSpacer, EuiText } from '@elastic/eui';
 import MarkdownRender from '@nteract/markdown';
 import { Media } from '@nteract/outputs';
-import moment from 'moment';
 import React, { useState } from 'react';
 import { VisualizationContainer } from '../../../../components/custom_panels/panel_modules/visualization_container';
 import PPLService from '../../../../services/requests/ppl';
@@ -16,8 +15,9 @@
   DashboardStart,
 } from '../../../../../../../src/plugins/dashboard/public';
 import { ParaType } from '../../../../../common/types/notebooks';
-import { uiSettingsService } from '../../../../../common/utils';
+import { getOSDHttp, getPPLService, uiSettingsService } from '../../../../../common/utils';
 import { QueryDataGridMemo } from './para_query_grid';
+import { convertDateTime } from '../../../common/query_utils';
 
 const createQueryColumns = (jsonColumns: any[]) => {
   let index = 0;
@@ -100,7 +100,11 @@
    * TODO: add table rendering
    */
   const dateFormat = uiSettingsService.get('dateFormat');
-
+  const from = convertDateTime(visInput?.timeRange?.from, true, false);
+  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':
@@ -112,41 +116,36 @@
           </EuiText>
         );
       case 'VISUALIZATION':
-        let from = moment(visInput?.timeRange?.from).format(dateFormat);
-        let to = moment(visInput?.timeRange?.to).format(dateFormat);
-        from = from === 'Invalid date' ? visInput.timeRange.from : from;
-        to = to === 'Invalid date' ? visInput.timeRange.to : to;
         return (
           <>
             <EuiText size="s" style={{ marginLeft: 9 }}>
-              {`${from} - ${to}`}
+              {`${displayFrom} - ${displayTo}`}
             </EuiText>
             <DashboardContainerByValueRenderer input={visInput} onInputUpdated={setVisInput} />
           </>
         );
       case 'OBSERVABILITY_VISUALIZATION':
-        let fromObs = moment(visInput?.timeRange?.from).format(dateFormat);
-        let toObs = moment(visInput?.timeRange?.to).format(dateFormat);
-        fromObs = fromObs === 'Invalid date' ? visInput.timeRange.from : fromObs;
-        toObs = toObs === 'Invalid date' ? visInput.timeRange.to : toObs;
+        const http = getOSDHttp();
+        const pplService = getPPLService();
+
         const onEditClick = (savedVisualizationId: string) => {
           window.location.assign(`observability-logs#/explorer/${savedVisualizationId}`);
         };
         return (
           <>
             <EuiText size="s" style={{ marginLeft: 9 }}>
-              {`${fromObs} - ${toObs}`}
+              {`${displayFrom} - ${displayTo}`}
             </EuiText>
             <div style={{ height: '300px', width: '100%' }}>
               <VisualizationContainer
-                http={props.http}
+                http={http}
                 editMode={false}
                 visualizationId={''}
                 onEditClick={onEditClick}
-                savedVisualizationId={para.visSavedObjId}
-                pplService={props.pplService}
-                fromTime={para.visStartTime}
-                toTime={para.visEndTime}
+                savedVisualizationId={visInput.visSavedObjId}
+                pplService={pplService}
+                fromTime={from}
+                toTime={to}
                 onRefresh={false}
                 pplFilterValue={''}
                 usedInNotebooks={true}