From 116198e055095bc787d7bc85521af3817ec8f822 Mon Sep 17 00:00:00 2001 From: Paul Sebastian Date: Fri, 8 Sep 2023 09:21:19 -0700 Subject: [PATCH] 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 --- common/constants/explorer.ts | 2 + .../event_analytics/explorer/explorer.tsx | 56 ++++++++----------- .../timechart_header.test.tsx.snap | 7 ++- .../__tests__/timechart_header.test.tsx | 7 ++- .../timechart_header/timechart_header.tsx | 33 ++++++----- .../count_distribution.test.tsx.snap | 3 + .../service_breakdown_panel.test.tsx.snap | 3 + .../__snapshots__/histogram.test.tsx.snap | 3 + .../__tests__/__snapshots__/pie.test.tsx.snap | 3 + .../__snapshots__/treemap.test.tsx.snap | 3 + .../components/visualizations/plotly/plot.tsx | 3 + test/event_analytics_constants.ts | 4 ++ 12 files changed, 78 insertions(+), 49 deletions(-) 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 ea0daf6b38..20410078da 100644 --- a/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap +++ b/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap @@ -785,6 +785,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 5545e2bab8..8d493ec73d 100644 --- a/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap +++ b/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap @@ -766,6 +766,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 bf22d5b9ed..b2d2d6a10b 100644 --- a/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap +++ b/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap @@ -810,6 +810,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';