Feature convert browser time to utc time (#542)

* use utc for timerange Signed-off-by: Eric Wei <menwe@amazon.com> * fixed time and source not aligned issue Signed-off-by: Eric Wei <menwe@amazon.com> * convert selected timefield from utc time to local time Signed-off-by: Eric Wei <menwe@amazon.com> * changed toast text for closing last tab Signed-off-by: Eric Wei <menwe@amazon.com> * remove unused code Signed-off-by: Eric Wei <menwe@amazon.com>
opensearch-project · Mar 8, 2022 · b4ec7a8 · b4ec7a8
1 parent 352c7ea
commit b4ec7a8
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 30 deletions.
diff --git a/dashboards-observability/common/utils/query_utils.ts b/dashboards-observability/common/utils/query_utils.ts
@@ -39,8 +39,8 @@ export const preprocessQuery = ({
   if (isEmpty(rawQuery)) return finalQuery;
 
   // convert to moment
-  const start = datemath.parse(startTime)?.format(DATE_PICKER_FORMAT);
-  const end = datemath.parse(endTime)?.format(DATE_PICKER_FORMAT);
+  const start = datemath.parse(startTime)?.utc().format(DATE_PICKER_FORMAT);
+  const end = datemath.parse(endTime)?.utc().format(DATE_PICKER_FORMAT);
   const tokens = rawQuery.replaceAll(PPL_NEWLINE_REGEX, '').match(PPL_INDEX_INSERT_POINT_REGEX);
 
   if (isEmpty(tokens)) return finalQuery;

diff --git a/dashboards-observability/public/components/explorer/docTable/docViewRow.tsx b/dashboards-observability/public/components/explorer/docTable/docViewRow.tsx
@@ -4,14 +4,15 @@
  */
 
 import './docView.scss';
+import moment from 'moment';
 import React, { forwardRef, useImperativeHandle, useMemo, useState } from 'react';
-import { toPairs, uniqueId, has, forEach } from 'lodash';
+import { toPairs, uniqueId, has, forEach, isEqual } from 'lodash';
 import { EuiIcon, EuiLink } from '@elastic/eui';
+import { useEffect } from 'react';
 import { IExplorerFields, IField } from '../../../../common/types/explorer';
 import { DocFlyout } from './doc_flyout';
 import { HttpStart } from '../../../../../../src/core/public';
-import { OTEL_TRACE_ID } from '../../../../common/constants/explorer';
-import { useEffect } from 'react';
+import { OTEL_TRACE_ID, DATE_PICKER_FORMAT } from '../../../../common/constants/explorer';
 import { SurroundingFlyout } from './surrounding_flyout';
 import PPLService from '../../../services/requests/ppl';
 import { isValidTraceId } from '../utils';
@@ -24,7 +25,7 @@ interface IDocViewRowProps {
   http: HttpStart;
   doc: IDocType;
   docId: string;
-  selectedCols: Array<IField>;
+  selectedCols: IField[];
   timeStampField: string;
   explorerFields: IExplorerFields;
   pplService: PPLService;
@@ -75,7 +76,7 @@ export const DocViewRow = forwardRef((props: IDocViewRowProps, ref) => {
       <div className="truncate-by-height">
         <span>
           <dl className="source truncate-by-height">
-            {toPairs(doc).map((entry: Array<string>) => {
+            {toPairs(doc).map((entry: string[]) => {
               const isTraceField = entry[0] === OTEL_TRACE_ID;
               return (
                 <span key={uniqueId('grid-desc')}>
@@ -136,17 +137,17 @@ export const DocViewRow = forwardRef((props: IDocViewRowProps, ref) => {
     );
   };
 
-  const getTds = (doc: IDocType, selectedCols: Array<IField>, isFlyout: boolean) => {
+  const getTds = (doc: IDocType, selectedCols: IField[], isFlyout: boolean) => {
     const cols = [];
     const fieldClsName = 'osdDocTableCell__dataField eui-textBreakAll eui-textBreakWord';
     const timestampClsName = 'eui-textNoWrap';
     // No field is selected
     if (!selectedCols || selectedCols.length === 0) {
-      if (has(doc, 'timestamp')) {
+      if (has(doc, timeStampField)) {
         cols.push(
           getTdTmpl({
             clsName: timestampClsName,
-            content: doc['timestamp'],
+            content: moment.utc(doc[timeStampField]).local().format(DATE_PICKER_FORMAT),
           })
         );
       }
@@ -169,7 +170,9 @@ export const DocViewRow = forwardRef((props: IDocViewRowProps, ref) => {
         cols.push(
           getTdTmpl({
             clsName: fieldClsName,
-            content: val,
+            content: isEqual(key, timeStampField)
+              ? moment.utc(val).local().format(DATE_PICKER_FORMAT)
+              : val,
           })
         );
       });
@@ -200,7 +203,7 @@ export const DocViewRow = forwardRef((props: IDocViewRowProps, ref) => {
         setToggleSize={setFlyoutToggleSize}
         setOpenTraces={setOpenTraces}
         setSurroundingEventsOpen={setSurroundingEventsOpen}
-      ></DocFlyout>
+      />
     );
   }, [
     http,

diff --git a/dashboards-observability/public/components/explorer/log_explorer.tsx b/dashboards-observability/public/components/explorer/log_explorer.tsx
@@ -88,7 +88,7 @@ export const LogExplorer = ({
 
   const handleTabClose = (TabIdToBeClosed: string) => {
     if (tabIds.length === 1) {
-      setToast('Have to have at least one tab', 'danger');
+      setToast('Cannot close last tab.', 'danger');
       return;
     }
 

diff --git a/dashboards-observability/public/components/explorer/sidebar/field_insights.tsx b/dashboards-observability/public/components/explorer/sidebar/field_insights.tsx
@@ -4,8 +4,8 @@
  */
 
 import React, { useMemo, useState, useContext, useEffect } from 'react';
-import { indexOf, last, forEach } from 'lodash';
-import { EuiPanel, EuiFlexGroup, EuiFlexItem, EuiLink, EuiBasicTable } from '@elastic/eui';
+import { indexOf, last } from 'lodash';
+import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiBasicTable } from '@elastic/eui';
 import { getIndexPatternFromRawQuery } from '../../../../common/utils/query_utils';
 import { TabContext } from '../hooks/use_tab_context';
 
@@ -91,7 +91,7 @@ export const FieldInsights = ({ field, query }: any) => {
         });
         if (res.length > 2) {
           const statsRes = last(res);
-          if (!statsRes.metadata) return;
+          if (!statsRes?.metadata) return;
           numericalOnlyReports.map((rep, index) => {
             const fieldName = statsRes.metadata?.fields[index]?.name;
             setReportContent((staleState) => {

diff --git a/dashboards-observability/public/components/explorer/utils/utils.tsx b/dashboards-observability/public/components/explorer/utils/utils.tsx
@@ -3,38 +3,42 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { IExplorerFields, IField } from '../../../../common/types/explorer';
 import { uniqueId } from 'lodash';
 import React from 'react';
+import moment from 'moment';
+import { IExplorerFields, IField } from '../../../../common/types/explorer';
 import { DocViewRow, IDocType } from '../docTable';
 import { HttpStart } from '../../../../../../src/core/public';
 import PPLService from '../../../services/requests/ppl';
 import { PPL_DATE_FORMAT, PPL_INDEX_REGEX } from '../../../../common/constants/shared';
-import moment from 'moment';
 
 // Create Individual table rows for events datagrid and flyouts
 export const getTrs = (
   http: HttpStart,
-  explorerFields: Array<IField>,
+  explorerFields: IField[],
   limit: number,
   setLimit: React.Dispatch<React.SetStateAction<number>>,
   PAGE_SIZE: number,
   timeStampField: any,
   explorerFieldsFull: IExplorerFields,
   pplService: PPLService,
   rawQuery: string,
-  rowRefs: React.RefObject<{
-    closeAllFlyouts(openDocId: string): void;
-  }>[],
+  rowRefs: Array<
+    React.RefObject<{
+      closeAllFlyouts(openDocId: string): void;
+    }>
+  >,
   setRowRefs: React.Dispatch<
     React.SetStateAction<
-      React.RefObject<{
-        closeAllFlyouts(openDocId: string): void;
-      }>[]
+      Array<
+        React.RefObject<{
+          closeAllFlyouts(openDocId: string): void;
+        }>
+      >
     >
   >,
   onFlyoutOpen: (docId: string) => void,
-  docs: Array<any> = [],
+  docs: any[] = [],
   prevTrs: any[] = []
 ) => {
   if (prevTrs.length >= docs.length) return prevTrs;
@@ -44,7 +48,7 @@ export const getTrs = (
   const trs = prevTrs.slice();
 
   const upperLimit = Math.min(trs.length === 0 ? PAGE_SIZE : limit, docs.length);
-  let tempRefs = rowRefs;
+  const tempRefs = rowRefs;
   for (let i = trs.length; i < upperLimit; i++) {
     const docId = uniqueId('doc_view');
     const tempRowRef = React.createRef<{
@@ -88,7 +92,7 @@ export const getHeaders = (fields: any, defaultCols: string[], isFlyout?: boolea
     });
 
     if (!isFlyout) {
-      tableHeadContent.unshift(<th key={uniqueId('datagrid-header-')}></th>);
+      tableHeadContent.unshift(<th key={uniqueId('datagrid-header-')} />);
     }
   }
 
@@ -161,7 +165,7 @@ const composeFinalQuery = (
 const createTds = (
   docs: IDocType[],
   selectedCols: IField[],
-  getTds: (doc: IDocType, selectedCols: Array<IField>, isFlyout: boolean) => JSX.Element[]
+  getTds: (doc: IDocType, selectedCols: IField[], isFlyout: boolean) => JSX.Element[]
 ) => {
   return docs.map((doc: IDocType) => (
     <tr className="osdDocTable__row"> {getTds(doc, selectedCols, true).slice(1)}</tr>
@@ -180,7 +184,7 @@ export const fetchSurroundingData = async (
   setIsError: React.Dispatch<React.SetStateAction<string>>,
   setLoadingData: React.Dispatch<React.SetStateAction<boolean>>,
   selectedCols: IField[],
-  getTds: (doc: IDocType, selectedCols: Array<IField>, isFlyout: boolean) => JSX.Element[]
+  getTds: (doc: IDocType, selectedCols: IField[], isFlyout: boolean) => JSX.Element[]
 ) => {
   let resultCount = 0;
   let isErred = false;