Explorer's timeheader & color change (#959)

* horizontal to vertical hits/timechart * Added timespan to the header * Color and y-axis name change --------- Signed-off-by: Paul Sebastian <[email protected]>
opensearch-project · Sep 26, 2023 · 92bf42e · 92bf42e
1 parent 859aa9b
commit 92bf42e
Show file tree

Hide file tree

Showing 12 changed files with 78 additions and 49 deletions.
diff --git a/common/constants/explorer.ts b/common/constants/explorer.ts
@@ -53,6 +53,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,
@@ -464,6 +465,8 @@ export const Explorer = ({
     return 0;
   }, [countDistribution?.data]);
 
+  const dateRange = getDateRange(startTime, endTime, query);
+
   const mainContent = useMemo(() => {
     return (
       <>
@@ -513,37 +516,26 @@ export const Explorer = ({
               <div className="dscResults">
                 {countDistribution?.data && !isLiveTailOnRef.current && (
                   <>
-                    <EuiFlexGroup justifyContent="center" alignItems="center">
-                      <EuiFlexItem grow={false}>
-                        <HitsCounter
-                          hits={reduce(
-                            countDistribution.data['count()'],
-                            (sum, n) => {
-                              return sum + n;
-                            },
-                            0
-                          )}
-                          showResetButton={false}
-                          onResetQuery={() => {}}
-                        />
-                      </EuiFlexItem>
-                      <EuiFlexItem grow={false}>
-                        <TimechartHeader
-                          dateFormat={'MMM D, YYYY @ HH:mm:ss.SSS'}
-                          options={timeIntervalOptions}
-                          onChangeInterval={(selectedIntrv) => {
-                            const intervalOptionsIndex = timeIntervalOptions.findIndex(
-                              (item) => item.value === selectedIntrv
-                            );
-                            const intrv = selectedIntrv.replace(/^auto_/, '');
-                            getCountVisualizations(intrv);
-                            selectedIntervalRef.current = timeIntervalOptions[intervalOptionsIndex];
-                            getPatterns(intrv, getErrorHandler('Error fetching patterns'));
-                          }}
-                          stateInterval={selectedIntervalRef.current?.value}
-                        />
-                      </EuiFlexItem>
-                    </EuiFlexGroup>
+                    <HitsCounter
+                      hits={_.sum(countDistribution.data['count()'])}
+                      showResetButton={false}
+                      onResetQuery={() => {}}
+                    />
+                    <TimechartHeader
+                      options={timeIntervalOptions}
+                      onChangeInterval={(selectedIntrv) => {
+                        const intervalOptionsIndex = timeIntervalOptions.findIndex(
+                          (item) => item.value === selectedIntrv
+                        );
+                        const intrv = selectedIntrv.replace(/^auto_/, '');
+                        getCountVisualizations(intrv);
+                        selectedIntervalRef.current = timeIntervalOptions[intervalOptionsIndex];
+                        getPatterns(intrv, getErrorHandler('Error fetching patterns'));
+                      }}
+                      stateInterval={selectedIntervalRef.current?.value}
+                      startTime={appLogEvents ? startTime : dateRange[0]}
+                      endTime={appLogEvents ? endTime : dateRange[1]}
+                    />
                     <CountDistribution countDistribution={countDistribution} />
                     <EuiHorizontalRule margin="xs" />
                     <LogPatterns
@@ -894,8 +886,6 @@ export const Explorer = ({
     );
   });
 
-  const dateRange = getDateRange(startTime, endTime, query);
-
   const handleLiveTailSearch = useCallback(
     async (startingTime: string, endingTime: string) => {
       await updateQueryInStore(tempQuery);

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>
@@ -157,7 +158,9 @@ exports[`Time chart header component Renders Time chart header component 1`] = `
                         data-test-subj="discoverIntervalDateRange"
                         onBlur={[Function]}
                         onFocus={[Function]}
-                      />
+                      >
+                        Aug 28, 2023 @ 20:00:00.406 - Aug 28, 2023 @ 20:00:00.408
+                      </div>
                     </EuiText>
                   </span>
                 </EuiToolTip>

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
@@ -7,19 +7,18 @@ import React from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiToolTip, EuiText, EuiSelect } from '@elastic/eui';
 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';
+
+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
    */
@@ -32,14 +31,20 @@ export interface TimechartHeaderProps {
    * selected interval
    */
   stateInterval?: string | undefined;
+  /**
+   * current time span being displayed on the count distribution
+   */
+  startTime?: string;
+  endTime?: string;
 }
 
 export function TimechartHeader({
   options,
   onChangeInterval,
   stateInterval,
+  startTime,
+  endTime,
 }: TimechartHeaderProps) {
-
   const handleIntervalChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     onChangeInterval(e.target.value);
   };
@@ -54,7 +59,9 @@ export function TimechartHeader({
             })}
             delay="long"
           >
-            <EuiText data-test-subj="discoverIntervalDateRange" size="s"></EuiText>
+            <EuiText data-test-subj="discoverIntervalDateRange" size="s">
+              {reformatDate(startTime) + ' - ' + reformatDate(endTime)}
+            </EuiText>
           </EuiToolTip>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>

diff --git a/...isualizations/count_distribution/__tests__/__snapshots__/count_distribution.test.tsx.snap b/...isualizations/count_distribution/__tests__/__snapshots__/count_distribution.test.tsx.snap
@@ -145,6 +145,9 @@ exports[`Count distribution component Renders count distribution component with
           "yaxis": Object {
             "rangemode": "normal",
             "showgrid": true,
+            "title": Object {
+              "text": "Count",
+            },
             "zeroline": false,
           },
         }

diff --git a/...analytics/components/traces/__tests__/__snapshots__/service_breakdown_panel.test.tsx.snap b/...analytics/components/traces/__tests__/__snapshots__/service_breakdown_panel.test.tsx.snap
@@ -220,6 +220,9 @@ exports[`Service breakdown panel component renders service breakdown panel 1`] =
                       "yaxis": Object {
                         "rangemode": "normal",
                         "showgrid": true,
+                        "title": Object {
+                          "text": "Count",
+                        },
                         "zeroline": false,
                       },
                     }

diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap
@@ -792,6 +792,9 @@ exports[`Histogram component Renders histogram component 1`] = `
           "yaxis": Object {
             "rangemode": "normal",
             "showgrid": true,
+            "title": Object {
+              "text": "Count",
+            },
             "zeroline": false,
           },
         }

diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap
@@ -773,6 +773,9 @@ exports[`Pie component Renders pie component 1`] = `
           "yaxis": Object {
             "rangemode": "normal",
             "showgrid": true,
+            "title": Object {
+              "text": "Count",
+            },
             "zeroline": false,
           },
         }

diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap
@@ -817,6 +817,9 @@ exports[`Treemap component Renders treemap component 1`] = `
           "yaxis": Object {
             "rangemode": "normal",
             "showgrid": true,
+            "title": Object {
+              "text": "Count",
+            },
             "zeroline": false,
           },
         }

diff --git a/public/components/visualizations/plotly/plot.tsx b/public/components/visualizations/plotly/plot.tsx
@@ -47,6 +47,9 @@ export function Plt(props: PltProps) {
       automargin: true,
     },
     yaxis: {
+      title: {
+        text: 'Count',
+      },
       showgrid: true,
       zeroline: false,
       rangemode: 'normal',

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';