diff --git a/common/constants/explorer.ts b/common/constants/explorer.ts
index 97bf986311..504d06b9fe 100644
--- 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
index 7f3ea3ff7a..f24508a6b8 100644
--- 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,
@@ -458,6 +459,8 @@ export const Explorer = ({
return 0;
}, [countDistribution?.data]);
+ const dateRange = getDateRange(startTime, endTime, query);
+
const mainContent = useMemo(() => {
return (
<>
@@ -507,37 +510,26 @@ export const Explorer = ({
{countDistribution?.data && !isLiveTailOnRef.current && (
<>
-
-
- {
- return sum + n;
- },
- 0
- )}
- showResetButton={false}
- onResetQuery={() => {}}
- />
-
-
- {
- 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}
- />
-
-
+ {}}
+ />
+ {
+ 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]}
+ />
{
await updateQueryInStore(tempQuery);
diff --git a/public/components/event_analytics/explorer/timechart_header/__tests__/__snapshots__/timechart_header.test.tsx.snap b/public/components/event_analytics/explorer/timechart_header/__tests__/__snapshots__/timechart_header.test.tsx.snap
index 7255e68b34..de94c5f728 100644
--- a/public/components/event_analytics/explorer/timechart_header/__tests__/__snapshots__/timechart_header.test.tsx.snap
+++ b/public/components/event_analytics/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`] = `
@@ -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
+
diff --git a/public/components/event_analytics/explorer/timechart_header/__tests__/timechart_header.test.tsx b/public/components/event_analytics/explorer/timechart_header/__tests__/timechart_header.test.tsx
index 2d56d74b97..0841429076 100644
--- a/public/components/event_analytics/explorer/timechart_header/__tests__/timechart_header.test.tsx
+++ b/public/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(
);
diff --git a/public/components/event_analytics/explorer/timechart_header/timechart_header.tsx b/public/components/event_analytics/explorer/timechart_header/timechart_header.tsx
index 7b8d106937..f294adc3f2 100644
--- 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) => {
onChangeInterval(e.target.value);
};
@@ -54,7 +59,9 @@ export function TimechartHeader({
})}
delay="long"
>
-
+
+ {reformatDate(startTime) + ' - ' + reformatDate(endTime)}
+
diff --git a/public/components/event_analytics/explorer/visualizations/count_distribution/__tests__/__snapshots__/count_distribution.test.tsx.snap b/public/components/event_analytics/explorer/visualizations/count_distribution/__tests__/__snapshots__/count_distribution.test.tsx.snap
index 03e9b3fb44..5689366f5a 100644
--- a/public/components/event_analytics/explorer/visualizations/count_distribution/__tests__/__snapshots__/count_distribution.test.tsx.snap
+++ b/public/components/event_analytics/explorer/visualizations/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/public/components/trace_analytics/components/traces/__tests__/__snapshots__/service_breakdown_panel.test.tsx.snap b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/service_breakdown_panel.test.tsx.snap
index 4b25a19b50..db4ecbdadf 100644
--- a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/service_breakdown_panel.test.tsx.snap
+++ b/public/components/trace_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
index ef6d077e95..1857b0bc59 100644
--- 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
index 22f72a1b00..2efd9326f6 100644
--- 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
index ad01ede70b..dbe192ad4a 100644
--- 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
index bf1a61642d..0755f64248 100644
--- 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
index cf8df8a0e1..8dafbf7f66 100644
--- 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';