Explorer's timeheader & color change (opensearch-project#959)

* horizontal to vertical hits/timechart * Added timespan to the header * Color and y-axis name change --------- Signed-off-by: Paul Sebastian <[email protected]>
paulstn · Sep 8, 2023 · f11e1c4 · f11e1c4
1 parent f08518f
commit f11e1c4
Show file tree

Hide file tree

Showing 7 changed files with 154 additions and 31 deletions.
diff --git a/common/constants/explorer.ts b/common/constants/explorer.ts
@@ -50,6 +50,8 @@ export const DEFAULT_COLUMNS = ['', 'Time', '_source'];
 export const OTEL_TRACE_ID = 'traceId';
 export const JAEGER_TRACE_ID = 'traceID';
 export const DATE_PICKER_FORMAT = 'YYYY-MM-DD HH:mm:ss';
+export const DATE_DISPLAY_FORMAT = 'MMM D, YYYY @ HH:mm:ss.SSS';
+export const DEFAULT_DATETIME_STRING = 'now';
 export const TIME_INTERVAL_OPTIONS = [
   {
     text: 'Minute',

diff --git a/public/components/event_analytics/explorer/explorer.tsx b/public/components/event_analytics/explorer/explorer.tsx
@@ -31,6 +31,7 @@ import React, {
   useState,
 } from 'react';
 import { batch, useDispatch, useSelector } from 'react-redux';
+import _ from 'lodash';
 import { LogExplorerRouterContext } from '..';
 import {
   CREATE_TAB_PARAM,
@@ -525,18 +526,11 @@ export const Explorer = ({
                 {countDistribution?.data && !isLiveTailOnRef.current && (
                   <>
                     <HitsCounter
-                      hits={reduce(
-                        countDistribution.data['count()'],
-                        (sum, n) => {
-                          return sum + n;
-                        },
-                        0
-                      )}
+                      hits={_.sum(countDistribution.data['count()'])}
                       showResetButton={false}
                       onResetQuery={() => {}}
                     />
                     <TimechartHeader
-                      dateFormat={'MMM D, YYYY @ HH:mm:ss.SSS'}
                       options={timeIntervalOptions}
                       onChangeInterval={(selectedIntrv) => {
                         const intervalOptionsIndex = timeIntervalOptions.findIndex(

diff --git a/...nalytics/explorer/timechart_header/__tests__/__snapshots__/timechart_header.test.tsx.snap b/...nalytics/explorer/timechart_header/__tests__/__snapshots__/timechart_header.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Time chart header component Renders Time chart header component 1`] = `
 <TimechartHeader
-  dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
+  endTime="Aug 28, 2023 @ 20:00:00.408"
   onChangeInterval={[MockFunction]}
   options={
     Array [
@@ -32,6 +32,7 @@ exports[`Time chart header component Renders Time chart header component 1`] = `
       },
     ]
   }
+  startTime="Aug 28, 2023 @ 20:00:00.406"
   stateInterval="w"
 >
   <I18nProvider>
@@ -158,9 +159,7 @@ exports[`Time chart header component Renders Time chart header component 1`] = `
                         onBlur={[Function]}
                         onFocus={[Function]}
                       >
-                        Aug 29, 2023 @ 00:25:55.210
-                         - 
-                        Aug 29, 2023 @ 00:25:55.214
+                        Aug 28, 2023 @ 20:00:00.406 - Aug 28, 2023 @ 20:00:00.408
                       </div>
                     </EuiText>
                   </span>

diff --git a/.../components/event_analytics/explorer/timechart_header/__tests__/timechart_header.test.tsx b/.../components/event_analytics/explorer/timechart_header/__tests__/timechart_header.test.tsx
@@ -9,6 +9,10 @@ import React from 'react';
 import { waitFor } from '@testing-library/react';
 import { TimechartHeader } from '../timechart_header';
 import { TIME_INTERVAL_OPTIONS } from '../../../../../../common/constants/explorer';
+import {
+  EXPLORER_START_TIME,
+  EXPLORER_END_TIME,
+} from '../../../../../../test/event_analytics_constants';
 
 describe('Time chart header component', () => {
   configure({ adapter: new Adapter() });
@@ -18,10 +22,11 @@ describe('Time chart header component', () => {
 
     const wrapper = mount(
       <TimechartHeader
-        dateFormat={'MMM D, YYYY @ HH:mm:ss.SSS'}
         onChangeInterval={onChangeInterval}
         options={TIME_INTERVAL_OPTIONS}
         stateInterval="w"
+        startTime={EXPLORER_START_TIME}
+        endTime={EXPLORER_END_TIME}
       />
     );
 

diff --git a/public/components/event_analytics/explorer/timechart_header/timechart_header.tsx b/public/components/event_analytics/explorer/timechart_header/timechart_header.tsx
@@ -9,24 +9,16 @@ import { I18nProvider } from '@osd/i18n/react';
 import { i18n } from '@osd/i18n';
 import moment from 'moment';
 import datemath from '@elastic/datemath';
+import {
+  DATE_DISPLAY_FORMAT,
+  DEFAULT_DATETIME_STRING,
+} from '../../../../../common/constants/explorer';
 
-// TODO: move this function into some common library for other observability datetime uses
-function reformatDate(inputDate: moment.Moment | undefined) {
-  return moment(inputDate).format('MMM D, YYYY @ HH:mm:ss.SSS');
+function reformatDate(inputDate: string | undefined) {
+  return moment(datemath.parse(inputDate ?? DEFAULT_DATETIME_STRING)).format(DATE_DISPLAY_FORMAT);
 }
 
 export interface TimechartHeaderProps {
-  /**
-   * Format of date to be displayed
-   */
-  dateFormat?: string;
-  /**
-   * Range of dates to be displayed
-   */
-  timeRange?: {
-    from: string;
-    to: string;
-  };
   /**
    * Interval Options
    */
@@ -42,8 +34,8 @@ export interface TimechartHeaderProps {
   /**
    * current time span being displayed on the count distribution
    */
-  startTime: string;
-  endTime: string;
+  startTime?: string;
+  endTime?: string;
 }
 
 export function TimechartHeader({
@@ -68,7 +60,7 @@ export function TimechartHeader({
             delay="long"
           >
             <EuiText data-test-subj="discoverIntervalDateRange" size="s">
-              {reformatDate(datemath.parse(startTime))} - {reformatDate(datemath.parse(endTime))}
+              {reformatDate(startTime) + ' - ' + reformatDate(endTime)}
             </EuiText>
           </EuiToolTip>
         </EuiFlexItem>

diff --git a/...isualizations/count_distribution/__tests__/__snapshots__/count_distribution.test.tsx.snap b/...isualizations/count_distribution/__tests__/__snapshots__/count_distribution.test.tsx.snap
@@ -44,7 +44,134 @@ exports[`Count distribution component Renders count distribution component with
       },
     }
   }
-/>
+>
+  <Plt
+    data={
+      Array [
+        Object {
+          "name": Object {
+            "name": "count()",
+            "type": "integer",
+          },
+          "orientation": "v",
+          "type": "bar",
+          "x": Array [
+            "2021-05-01 00:00:00",
+            "2021-06-01 00:00:00",
+            "2021-07-01 00:00:00",
+          ],
+          "y": Array [
+            2549,
+            9337,
+            1173,
+          ],
+        },
+      ]
+    }
+    layout={
+      Object {
+        "colorway": Array [
+          "#8C55A3",
+        ],
+        "height": 220,
+        "margin": Object {
+          "b": 15,
+          "l": 60,
+          "pad": 0,
+          "r": 10,
+          "t": 30,
+        },
+        "showlegend": true,
+      }
+    }
+  >
+    <PlotlyComponent
+      config={
+        Object {
+          "displayModeBar": false,
+        }
+      }
+      data={
+        Array [
+          Object {
+            "name": Object {
+              "name": "count()",
+              "type": "integer",
+            },
+            "orientation": "v",
+            "type": "bar",
+            "x": Array [
+              "2021-05-01 00:00:00",
+              "2021-06-01 00:00:00",
+              "2021-07-01 00:00:00",
+            ],
+            "y": Array [
+              2549,
+              9337,
+              1173,
+            ],
+          },
+        ]
+      }
+      debug={false}
+      divId="explorerPlotComponent"
+      layout={
+        Object {
+          "autosize": true,
+          "barmode": "stack",
+          "colorway": Array [
+            "#8C55A3",
+          ],
+          "height": 220,
+          "hovermode": "closest",
+          "legend": Object {
+            "orientation": "h",
+            "traceorder": "normal",
+          },
+          "margin": Object {
+            "b": 15,
+            "l": 60,
+            "pad": 0,
+            "r": 10,
+            "t": 30,
+          },
+          "showlegend": true,
+          "xaxis": Object {
+            "automargin": true,
+            "rangemode": "normal",
+            "showgrid": true,
+            "zeroline": false,
+          },
+          "yaxis": Object {
+            "rangemode": "normal",
+            "showgrid": true,
+            "title": Object {
+              "text": "Count",
+            },
+            "zeroline": false,
+          },
+        }
+      }
+      style={
+        Object {
+          "height": "100%",
+          "width": "100%",
+        }
+      }
+      useResizeHandler={true}
+    >
+      <div
+        id="explorerPlotComponent"
+        style={
+          Object {
+            "height": "100%",
+            "width": "100%",
+          }
+        }
+      />
+    </PlotlyComponent>
+  </Plt>
+</Component>
 `;
 
 exports[`Count distribution component Renders empty count distribution component 1`] = `<Component />`;
diff --git a/test/event_analytics_constants.ts b/test/event_analytics_constants.ts
@@ -567,3 +567,7 @@ export const HORIZONTAL_BAR_TEST_VISUALIZATIONS_DATA = {
     type: VIS_CHART_TYPES.HorizontalBar,
   }),
 };
+
+export const EXPLORER_START_TIME = 'Aug 28, 2023 @ 20:00:00.406';
+
+export const EXPLORER_END_TIME = 'Aug 28, 2023 @ 20:00:00.408';