Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Explorer's timeheader & color change #959

Merged
merged 26 commits into from
Sep 8, 2023
Merged
Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
141e9a8
horizontal to vertical hits/timechart
paulstn Aug 15, 2023
1486cca
Added timespan to the header
paulstn Aug 15, 2023
1c9eece
Correct formatting of timespan header
paulstn Aug 15, 2023
5fe2524
small todo reminder
paulstn Aug 15, 2023
55a9c3b
Fixing type issues and undefined behavior
paulstn Aug 18, 2023
aab5046
Color and y-axis name change
paulstn Aug 22, 2023
655cdc6
fix timechart header to be up to date
paulstn Aug 23, 2023
d3755a8
added all snapshots
paulstn Aug 25, 2023
227eefa
added upstream snapshots
paulstn Aug 25, 2023
700d764
added one missing snapshot
paulstn Aug 25, 2023
12b4fef
snapshot
paulstn Aug 28, 2023
9d2dd25
jest test change upload
paulstn Aug 28, 2023
19391eb
constant datetimes to timeheader added
paulstn Aug 28, 2023
6aa863b
Updated OSD to get new snapshots
paulstn Aug 28, 2023
1b1a74b
remove redundant field, update constants, move daterange up
paulstn Aug 28, 2023
1244818
snapshot
paulstn Aug 28, 2023
db240fb
remove unneeded brackets
paulstn Aug 29, 2023
da63e09
change back color
paulstn Aug 29, 2023
1d23803
code clarity change
paulstn Aug 29, 2023
f8b3188
updated snapshots
paulstn Aug 29, 2023
00eafa3
change back some code
paulstn Aug 30, 2023
c3c790f
modify line to use lodash array sum
paulstn Sep 1, 2023
ae81d0d
Merge branch 'main' of https://github.com/opensearch-project/dashboar…
paulstn Sep 1, 2023
92fa380
Merge branch 'main' of https://github.com/opensearch-project/dashboar…
paulstn Sep 5, 2023
a91c993
Merge branch 'main' of https://github.com/opensearch-project/dashboar…
paulstn Sep 7, 2023
f1e5bfe
Merge branch 'explorer-header-color' of https://github.com/paulstn/da…
paulstn Sep 7, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions common/constants/explorer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
paulstn marked this conversation as resolved.
Show resolved Hide resolved
export const DEFAULT_DATETIME_STRING = 'now';
export const TIME_INTERVAL_OPTIONS = [
{
text: 'Minute',
Expand Down
2 changes: 1 addition & 1 deletion common/constants/shared.ts
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export const SAVED_OBJECT = '/object';
// Color Constants
export const PLOTLY_COLOR = [
'#3CA1C7',
'#8C55A3',
paulstn marked this conversation as resolved.
Show resolved Hide resolved
'#54B399',
'#DB748A',
'#F2BE4B',
'#68CCC2',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1423,7 +1423,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
"barmode": "group",
"colorway": Array [
"#3CA1C7",
"#8C55A3",
"#54B399",
"#DB748A",
"#F2BE4B",
"#68CCC2",
Expand Down Expand Up @@ -1516,7 +1516,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
"barmode": "group",
"colorway": Array [
"#3CA1C7",
"#8C55A3",
"#54B399",
"#DB748A",
"#F2BE4B",
"#68CCC2",
Expand Down Expand Up @@ -2057,7 +2057,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
"layout": Object {
"colorway": Array [
"#3CA1C7",
"#8C55A3",
"#54B399",
"#DB748A",
"#F2BE4B",
"#68CCC2",
Expand Down Expand Up @@ -2573,7 +2573,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
"layout": Object {
"colorway": Array [
"#3CA1C7",
"#8C55A3",
"#54B399",
"#DB748A",
"#F2BE4B",
"#68CCC2",
Expand Down Expand Up @@ -3103,7 +3103,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
"layout": Object {
"colorway": Array [
"#3CA1C7",
"#8C55A3",
"#54B399",
"#DB748A",
"#F2BE4B",
"#68CCC2",
Expand Down Expand Up @@ -4768,7 +4768,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
"barmode": "group",
"colorway": Array [
"#3CA1C7",
"#8C55A3",
"#54B399",
"#DB748A",
"#F2BE4B",
"#68CCC2",
Expand Down Expand Up @@ -4861,7 +4861,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
"barmode": "group",
"colorway": Array [
"#3CA1C7",
"#8C55A3",
"#54B399",
"#DB748A",
"#F2BE4B",
"#68CCC2",
Expand Down
61 changes: 28 additions & 33 deletions public/components/event_analytics/explorer/explorer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -473,6 +473,8 @@ export const Explorer = ({
return 0;
}, [countDistribution?.data]);

const dateRange = getDateRange(startTime, endTime, query);

const mainContent = useMemo(() => {
return (
<>
Expand Down Expand Up @@ -522,37 +524,32 @@ export const Explorer = ({
<div className="dscResults">
{countDistribution?.data && !isLiveTailOnRef.current && (
<>
<EuiFlexGroup justifyContent="center" alignItems="center">
<EuiFlexItem grow={false}>
<HitsCounter
hits={reduce(
paulstn marked this conversation as resolved.
Show resolved Hide resolved
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={reduce(
countDistribution.data['count()'],
(sum, n) => {
return sum + n;
},
0
)}
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
Expand Down Expand Up @@ -898,8 +895,6 @@ export const Explorer = ({
);
});

const dateRange = getDateRange(startTime, endTime, query);

const handleLiveTailSearch = useCallback(
async (startingTime: string, endingTime: string) => {
await updateQueryInStore(tempQuery);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 [
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -157,7 +158,12 @@ 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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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() });
Expand All @@ -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}
/>
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,19 @@ 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';

// TODO: move this function into some common library for other observability datetime uses
paulstn marked this conversation as resolved.
Show resolved Hide resolved
function reformatDate(inputDate: moment.Moment | undefined) {
return moment(inputDate).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
*/
Expand All @@ -32,14 +32,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);
};
Expand All @@ -54,7 +60,10 @@ export function TimechartHeader({
})}
delay="long"
>
<EuiText data-test-subj="discoverIntervalDateRange" size="s"></EuiText>
<EuiText data-test-subj="discoverIntervalDateRange" size="s">
{reformatDate(datemath.parse(startTime ?? DEFAULT_DATETIME_STRING))} -{' '}
{reformatDate(datemath.parse(endTime ?? DEFAULT_DATETIME_STRING))}
paulstn marked this conversation as resolved.
Show resolved Hide resolved
</EuiText>
</EuiToolTip>
</EuiFlexItem>
<EuiFlexItem grow={false}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1602,7 +1602,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
"layout": Object {
"colorway": Array [
"#3CA1C7",
"#8C55A3",
"#54B399",
"#DB748A",
"#F2BE4B",
"#68CCC2",
Expand Down Expand Up @@ -1835,7 +1835,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
"layout": Object {
"colorway": Array [
"#3CA1C7",
"#8C55A3",
"#54B399",
"#DB748A",
"#F2BE4B",
"#68CCC2",
Expand Down Expand Up @@ -2333,7 +2333,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
"layout": Object {
"colorway": Array [
"#3CA1C7",
"#8C55A3",
"#54B399",
"#DB748A",
"#F2BE4B",
"#68CCC2",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ exports[`Count distribution component Renders count distribution component with
layout={
Object {
"colorway": Array [
"#8C55A3",
"#54B399",
],
"height": 220,
"margin": Object {
Expand Down Expand Up @@ -120,7 +120,7 @@ exports[`Count distribution component Renders count distribution component with
"autosize": true,
"barmode": "stack",
"colorway": Array [
"#8C55A3",
"#54B399",
],
"height": 220,
"hovermode": "closest",
Expand All @@ -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,
},
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
layout={
Object {
"colorway": Array [
"#8C55A3",
"#54B399",
],
"height": 220,
"margin": Object {
Expand Down Expand Up @@ -698,7 +698,7 @@ exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
"bargroupgap": 0.030000000000000027,
"barmode": "group",
"colorway": Array [
"#8C55A3",
"#54B399",
],
"height": 220,
"hovermode": "closest",
Expand Down Expand Up @@ -756,7 +756,7 @@ exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
"bargroupgap": 0.030000000000000027,
"barmode": "group",
"colorway": Array [
"#8C55A3",
"#54B399",
],
"height": 220,
"hovermode": "closest",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`Gauge component Renders gauge component 1`] = `
layout={
Object {
"colorway": Array [
"#8C55A3",
"#54B399",
],
"height": 220,
"margin": Object {
Expand Down
Loading