From 67ba07622339ce9f6db94a9abec589e038bcd26e Mon Sep 17 00:00:00 2001 From: Dominique Clarke Date: Wed, 13 Oct 2021 08:21:29 -0400 Subject: [PATCH 1/8] add chart creation context --- src/plugins/data/common/constants.ts | 1 + .../chart_creation_info.test.tsx | 46 +++++++++++ .../exploratory_view/chart_creation_info.tsx | 80 +++++++++++++++++++ .../exploratory_view/exploratory_view.tsx | 23 +++++- .../exploratory_view/lens_embeddable.tsx | 14 +++- 5 files changed, 157 insertions(+), 7 deletions(-) create mode 100644 x-pack/plugins/observability/public/components/shared/exploratory_view/chart_creation_info.test.tsx create mode 100644 x-pack/plugins/observability/public/components/shared/exploratory_view/chart_creation_info.tsx diff --git a/src/plugins/data/common/constants.ts b/src/plugins/data/common/constants.ts index c236be18a8e41..e141bfbef3c89 100644 --- a/src/plugins/data/common/constants.ts +++ b/src/plugins/data/common/constants.ts @@ -34,4 +34,5 @@ export const UI_SETTINGS = { FILTERS_EDITOR_SUGGEST_VALUES: 'filterEditor:suggestValues', AUTOCOMPLETE_USE_TIMERANGE: 'autocomplete:useTimeRange', AUTOCOMPLETE_VALUE_SUGGESTION_METHOD: 'autocomplete:valueSuggestionMethod', + DATE_FORMAT: 'dateFormat', } as const; diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/chart_creation_info.test.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/chart_creation_info.test.tsx new file mode 100644 index 0000000000000..d7fca659023dc --- /dev/null +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/chart_creation_info.test.tsx @@ -0,0 +1,46 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { screen } from '@testing-library/dom'; +import { render } from './rtl_helpers'; +import * as kibanaSettings from '../../../hooks/use_kibana_ui_settings'; +import { ChartCreationInfo } from './chart_creation_info'; + +jest.spyOn(kibanaSettings, 'useKibanaUISettings').mockReturnValue('MMM D, YYYY @ HH:mm:ss.SSS'); + +const info = { + to: 1634071132571, + from: 1633406400000, + lastUpdated: 1634071140788, +}; + +describe('ChartCreationInfo', () => { + it('renders chart creation info', async () => { + render(); + + expect(screen.getByText('Chart created on Oct 12, 2021 @ 16:39:00.788')).toBeInTheDocument(); + expect( + screen.getByText( + 'Displaying data from Oct 5, 2021 @ 00:00:00.000 to Oct 12, 2021 @ 16:38:52.571' + ) + ).toBeInTheDocument(); + }); + + it('does not display info when props are falsey', async () => { + render(); + + expect( + screen.queryByText('Chart created on Oct 12, 2021 @ 16:39:00.788') + ).not.toBeInTheDocument(); + expect( + screen.queryByText( + 'Displaying data from Oct 5, 2021 @ 00:00:00.000 to Oct 12, 2021 @ 16:38:52.571' + ) + ).not.toBeInTheDocument(); + }); +}); diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/chart_creation_info.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/chart_creation_info.tsx new file mode 100644 index 0000000000000..030051c0596bf --- /dev/null +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/chart_creation_info.tsx @@ -0,0 +1,80 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import moment from 'moment'; +import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { EuiText, EuiSpacer } from '@elastic/eui'; +import { UI_SETTINGS, useKibanaUISettings } from '../../../hooks/use_kibana_ui_settings'; +import { ChartTimeRangeContext } from './exploratory_view'; + +export function ChartCreationInfo(props: Partial) { + const dateFormat = useKibanaUISettings(UI_SETTINGS.DATE_FORMAT) as string; + const from = moment(props.from).format(dateFormat); + const to = moment(props.to).format(dateFormat); + const current = moment(props.lastUpdated).format(dateFormat); + + return ( + <> + {props.lastUpdated && ( + <> + + + + + + )} + {props.to && props.from && ( + <> + + + + + + )} + + ); +} + +export const LOADING_VIEW = i18n.translate( + 'xpack.observability.expView.seriesBuilder.loadingView', + { + defaultMessage: 'Loading view ...', + } +); + +export const SELECT_REPORT_TYPE = i18n.translate( + 'xpack.observability.expView.seriesBuilder.selectReportType', + { + defaultMessage: 'No report type selected', + } +); + +export const RESET_LABEL = i18n.translate('xpack.observability.expView.seriesBuilder.reset', { + defaultMessage: 'Reset', +}); + +export const REPORT_TYPE_LABEL = i18n.translate( + 'xpack.observability.expView.seriesBuilder.reportType', + { + defaultMessage: 'Report type', + } +); diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/exploratory_view.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/exploratory_view.tsx index 9870d88d1220a..c4a9af2755802 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/exploratory_view.tsx +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/exploratory_view.tsx @@ -20,9 +20,16 @@ import { useAppIndexPatternContext } from './hooks/use_app_index_pattern'; import { SeriesViews } from './views/series_views'; import { LensEmbeddable } from './lens_embeddable'; import { EmptyView } from './components/empty_view'; +import { ChartCreationInfo } from './chart_creation_info'; export type PanelId = 'seriesPanel' | 'chartPanel'; +export interface ChartTimeRangeContext { + lastUpdated: number; + to: number; + from: number; +} + export function ExploratoryView({ saveAttributes, }: { @@ -37,7 +44,9 @@ export function ExploratoryView({ const [height, setHeight] = useState('100vh'); - const [lastUpdated, setLastUpdated] = useState(); + const [chartTimeRangeContext, setChartTimeRangeContext] = useState< + ChartTimeRangeContext | undefined + >(); const [lensAttributes, setLensAttributes] = useState( null @@ -96,7 +105,10 @@ export function ExploratoryView({ {lens ? ( <> - + {lensAttributes ? ( ) : ( @@ -144,6 +156,11 @@ export function ExploratoryView({ {HIDE_CHART_LABEL} )} + >; + setChartTimeRangeContext: Dispatch>; } export function LensEmbeddable(props: Props) { - const { lensAttributes, setLastUpdated } = props; + const { lensAttributes, setChartTimeRangeContext } = props; const { services: { lens, notifications }, @@ -35,8 +37,12 @@ export function LensEmbeddable(props: Props) { const timeRange = useExpViewTimeRange(); const onLensLoad = useCallback(() => { - setLastUpdated(Date.now()); - }, [setLastUpdated]); + setChartTimeRangeContext({ + lastUpdated: Date.now(), + to: parseRelativeDate(timeRange?.to || '').valueOf(), + from: parseRelativeDate(timeRange?.from || '').valueOf(), + }); + }, [setChartTimeRangeContext, timeRange]); const onBrushEnd = useCallback( ({ range }: { range: number[] }) => { From 2aa3298ff986aaa27addea1ed878ce3961e7a93a Mon Sep 17 00:00:00 2001 From: Dominique Clarke Date: Fri, 15 Oct 2021 18:48:20 -0400 Subject: [PATCH 2/8] add chart creation tooltip, remove outer panel, and change default chart type for synthetics data --- .../exploratory_view/exploratory_view.tsx | 23 ++------ .../{ => header}/chart_creation_info.test.tsx | 20 +++---- .../{ => header}/chart_creation_info.tsx | 58 +++++++++++-------- .../shared/exploratory_view/header/header.tsx | 9 +-- .../exploratory_view/header/last_updated.tsx | 28 +++++++-- .../common/header/action_menu_content.tsx | 2 +- 6 files changed, 76 insertions(+), 64 deletions(-) rename x-pack/plugins/observability/public/components/shared/exploratory_view/{ => header}/chart_creation_info.test.tsx (60%) rename x-pack/plugins/observability/public/components/shared/exploratory_view/{ => header}/chart_creation_info.tsx (50%) diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/exploratory_view.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/exploratory_view.tsx index c4a9af2755802..8909920f634f2 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/exploratory_view.tsx +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/exploratory_view.tsx @@ -7,8 +7,8 @@ import { i18n } from '@kbn/i18n'; import React, { useEffect, useRef, useState } from 'react'; -import { EuiButtonEmpty, EuiPanel, EuiResizableContainer, EuiTitle } from '@elastic/eui'; import styled from 'styled-components'; +import { EuiButtonEmpty, EuiResizableContainer, EuiTitle } from '@elastic/eui'; import { PanelDirection } from '@elastic/eui/src/components/resizable_container/types'; import { useKibana } from '../../../../../../../src/plugins/kibana_react/public'; import { ObservabilityPublicPluginsStart } from '../../../plugin'; @@ -20,16 +20,10 @@ import { useAppIndexPatternContext } from './hooks/use_app_index_pattern'; import { SeriesViews } from './views/series_views'; import { LensEmbeddable } from './lens_embeddable'; import { EmptyView } from './components/empty_view'; -import { ChartCreationInfo } from './chart_creation_info'; +import type { ChartTimeRange } from './header/last_updated'; export type PanelId = 'seriesPanel' | 'chartPanel'; -export interface ChartTimeRangeContext { - lastUpdated: number; - to: number; - from: number; -} - export function ExploratoryView({ saveAttributes, }: { @@ -44,9 +38,7 @@ export function ExploratoryView({ const [height, setHeight] = useState('100vh'); - const [chartTimeRangeContext, setChartTimeRangeContext] = useState< - ChartTimeRangeContext | undefined - >(); + const [chartTimeRangeContext, setChartTimeRangeContext] = useState(); const [lensAttributes, setLensAttributes] = useState( null @@ -107,7 +99,7 @@ export function ExploratoryView({ <> )} - ` height: 100%; } `; -const Wrapper = styled(EuiPanel)` +const Wrapper = styled.div` max-width: 1800px; min-width: 800px; margin: 0 auto; diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/chart_creation_info.test.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/header/chart_creation_info.test.tsx similarity index 60% rename from x-pack/plugins/observability/public/components/shared/exploratory_view/chart_creation_info.test.tsx rename to x-pack/plugins/observability/public/components/shared/exploratory_view/header/chart_creation_info.test.tsx index d7fca659023dc..6aaae31802c76 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/chart_creation_info.test.tsx +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/header/chart_creation_info.test.tsx @@ -7,8 +7,8 @@ import React from 'react'; import { screen } from '@testing-library/dom'; -import { render } from './rtl_helpers'; -import * as kibanaSettings from '../../../hooks/use_kibana_ui_settings'; +import { render } from '../rtl_helpers'; +import * as kibanaSettings from '../../../../hooks/use_kibana_ui_settings'; import { ChartCreationInfo } from './chart_creation_info'; jest.spyOn(kibanaSettings, 'useKibanaUISettings').mockReturnValue('MMM D, YYYY @ HH:mm:ss.SSS'); @@ -23,24 +23,20 @@ describe('ChartCreationInfo', () => { it('renders chart creation info', async () => { render(); - expect(screen.getByText('Chart created on Oct 12, 2021 @ 16:39:00.788')).toBeInTheDocument(); + expect(screen.getByText('Chart created')).toBeInTheDocument(); + expect(screen.getByText('Oct 12, 2021 @ 16:39:00.788')).toBeInTheDocument(); + expect(screen.getByText('Displaying from')).toBeInTheDocument(); expect( - screen.getByText( - 'Displaying data from Oct 5, 2021 @ 00:00:00.000 to Oct 12, 2021 @ 16:38:52.571' - ) + screen.getByText('Oct 5, 2021 @ 00:00:00.000 → Oct 12, 2021 @ 16:38:52.571') ).toBeInTheDocument(); }); it('does not display info when props are falsey', async () => { render(); + expect(screen.queryByText('Oct 12, 2021 @ 16:39:00.788')).not.toBeInTheDocument(); expect( - screen.queryByText('Chart created on Oct 12, 2021 @ 16:39:00.788') - ).not.toBeInTheDocument(); - expect( - screen.queryByText( - 'Displaying data from Oct 5, 2021 @ 00:00:00.000 to Oct 12, 2021 @ 16:38:52.571' - ) + screen.queryByText('Oct 5, 2021 @ 00:00:00.000 → Oct 12, 2021 @ 16:38:52.571') ).not.toBeInTheDocument(); }); }); diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/chart_creation_info.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/header/chart_creation_info.tsx similarity index 50% rename from x-pack/plugins/observability/public/components/shared/exploratory_view/chart_creation_info.tsx rename to x-pack/plugins/observability/public/components/shared/exploratory_view/header/chart_creation_info.tsx index 030051c0596bf..c6e7610eee049 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/chart_creation_info.tsx +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/header/chart_creation_info.tsx @@ -9,45 +9,53 @@ import React from 'react'; import moment from 'moment'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; -import { EuiText, EuiSpacer } from '@elastic/eui'; -import { UI_SETTINGS, useKibanaUISettings } from '../../../hooks/use_kibana_ui_settings'; -import { ChartTimeRangeContext } from './exploratory_view'; +import { EuiFlexGroup, EuiFlexItem, EuiText, EuiSpacer } from '@elastic/eui'; +import { UI_SETTINGS, useKibanaUISettings } from '../../../../hooks/use_kibana_ui_settings'; +import type { ChartTimeRange } from './last_updated'; -export function ChartCreationInfo(props: Partial) { +export function ChartCreationInfo(props: Partial) { const dateFormat = useKibanaUISettings(UI_SETTINGS.DATE_FORMAT) as string; const from = moment(props.from).format(dateFormat); const to = moment(props.to).format(dateFormat); - const current = moment(props.lastUpdated).format(dateFormat); + const created = moment(props.lastUpdated).format(dateFormat); return ( <> {props.lastUpdated && ( <> - - - + + + + + + + + {created} + + )} {props.to && props.from && ( <> - - - - + + + + + + + + + {from} → {to} + + + )} diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/header/header.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/header/header.tsx index 181c8342b87af..7d63357cab458 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/header/header.tsx +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/header/header.tsx @@ -10,16 +10,17 @@ import { i18n } from '@kbn/i18n'; import { EuiBetaBadge, EuiButton, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui'; import { TypedLensByValueInput } from '../../../../../../lens/public'; import { useSeriesStorage } from '../hooks/use_series_storage'; -import { LastUpdated } from './last_updated'; import { ExpViewActionMenu } from '../components/action_menu'; import { useExpViewTimeRange } from '../hooks/use_time_range'; +import { LastUpdated } from './last_updated'; +import type { ChartTimeRange } from './last_updated'; interface Props { - lastUpdated?: number; + chartTimeRange: ChartTimeRange; lensAttributes: TypedLensByValueInput['attributes'] | null; } -export function ExploratoryViewHeader({ lensAttributes, lastUpdated }: Props) { +export function ExploratoryViewHeader({ lensAttributes, chartTimeRange }: Props) { const { setLastRefresh } = useSeriesStorage(); const timeRange = useExpViewTimeRange(); @@ -46,7 +47,7 @@ export function ExploratoryViewHeader({ lensAttributes, lastUpdated }: Props) { - + setLastRefresh(Date.now())}> diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/header/last_updated.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/header/last_updated.tsx index c352ec0423dd8..bc82c48214a01 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/header/last_updated.tsx +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/header/last_updated.tsx @@ -6,14 +6,24 @@ */ import React, { useEffect, useState } from 'react'; -import { EuiIcon, EuiText } from '@elastic/eui'; import moment from 'moment'; +import styled from 'styled-components'; +import { EuiIcon, EuiText, EuiToolTip } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; +import { ChartCreationInfo } from './chart_creation_info'; + +export interface ChartTimeRange { + lastUpdated: number; + to: number; + from: number; +} interface Props { - lastUpdated?: number; + chartTimeRange?: ChartTimeRange; } -export function LastUpdated({ lastUpdated }: Props) { + +export function LastUpdated({ chartTimeRange }: Props) { + const { lastUpdated } = chartTimeRange || {}; const [refresh, setRefresh] = useState(() => Date.now()); useEffect(() => { @@ -39,7 +49,13 @@ export function LastUpdated({ lastUpdated }: Props) { return ( - + } + > + + {' '} ); } + +export const StyledToolTipWrapper = styled.div` + min-width: 30vw; +`; diff --git a/x-pack/plugins/uptime/public/components/common/header/action_menu_content.tsx b/x-pack/plugins/uptime/public/components/common/header/action_menu_content.tsx index c459fe46da975..0a6dfea6508f5 100644 --- a/x-pack/plugins/uptime/public/components/common/header/action_menu_content.tsx +++ b/x-pack/plugins/uptime/public/components/common/header/action_menu_content.tsx @@ -50,7 +50,7 @@ export function ActionMenuContent(): React.ReactElement { allSeries: [ { dataType: 'synthetics', - seriesType: 'area_stacked', + seriesType: 'area', selectedMetricField: 'monitor.duration.us', time: { from: dateRangeStart, to: dateRangeEnd }, breakdown: monitorId ? 'observer.geo.name' : 'monitor.type', From d6b167c8ae3e0f5c736fee92942671ef2349fba4 Mon Sep 17 00:00:00 2001 From: Dominique Clarke Date: Mon, 18 Oct 2021 08:24:19 -0400 Subject: [PATCH 3/8] adjust types --- .../components/shared/exploratory_view/header/header.tsx | 2 +- .../components/shared/exploratory_view/lens_embeddable.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/header/header.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/header/header.tsx index 7d63357cab458..22245f111293c 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/header/header.tsx +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/header/header.tsx @@ -16,7 +16,7 @@ import { LastUpdated } from './last_updated'; import type { ChartTimeRange } from './last_updated'; interface Props { - chartTimeRange: ChartTimeRange; + chartTimeRange?: ChartTimeRange; lensAttributes: TypedLensByValueInput['attributes'] | null; } diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/lens_embeddable.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/lens_embeddable.tsx index 48818d46309de..b3ec7ee184f00 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/lens_embeddable.tsx +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/lens_embeddable.tsx @@ -13,12 +13,12 @@ import { useSeriesStorage } from './hooks/use_series_storage'; import { ObservabilityPublicPluginsStart } from '../../../plugin'; import { useKibana } from '../../../../../../../src/plugins/kibana_react/public'; import { useExpViewTimeRange } from './hooks/use_time_range'; -import { ChartTimeRangeContext } from './exploratory_view'; import { parseRelativeDate } from './components/date_range_picker'; +import type { ChartTimeRange } from './header/last_updated'; interface Props { lensAttributes: TypedLensByValueInput['attributes']; - setChartTimeRangeContext: Dispatch>; + setChartTimeRangeContext: Dispatch>; } export function LensEmbeddable(props: Props) { From ceee4458ed2ec7125dd3b5ffb9d65d696f7fe988 Mon Sep 17 00:00:00 2001 From: Dominique Clarke Date: Mon, 18 Oct 2021 18:27:26 -0400 Subject: [PATCH 4/8] remove extra translations --- .../header/chart_creation_info.tsx | 26 ------------------- 1 file changed, 26 deletions(-) diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/header/chart_creation_info.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/header/chart_creation_info.tsx index c6e7610eee049..8f1398583e01e 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/header/chart_creation_info.tsx +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/header/chart_creation_info.tsx @@ -7,7 +7,6 @@ import React from 'react'; import moment from 'moment'; -import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiFlexGroup, EuiFlexItem, EuiText, EuiSpacer } from '@elastic/eui'; import { UI_SETTINGS, useKibanaUISettings } from '../../../../hooks/use_kibana_ui_settings'; @@ -61,28 +60,3 @@ export function ChartCreationInfo(props: Partial) { ); } - -export const LOADING_VIEW = i18n.translate( - 'xpack.observability.expView.seriesBuilder.loadingView', - { - defaultMessage: 'Loading view ...', - } -); - -export const SELECT_REPORT_TYPE = i18n.translate( - 'xpack.observability.expView.seriesBuilder.selectReportType', - { - defaultMessage: 'No report type selected', - } -); - -export const RESET_LABEL = i18n.translate('xpack.observability.expView.seriesBuilder.reset', { - defaultMessage: 'Reset', -}); - -export const REPORT_TYPE_LABEL = i18n.translate( - 'xpack.observability.expView.seriesBuilder.reportType', - { - defaultMessage: 'Report type', - } -); From 5fc55277c8d8d4385d8e4d7ef0e64e8d9a94e0f2 Mon Sep 17 00:00:00 2001 From: Dominique Clarke Date: Mon, 18 Oct 2021 18:28:28 -0400 Subject: [PATCH 5/8] add panel back --- .../components/shared/exploratory_view/exploratory_view.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/exploratory_view.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/exploratory_view.tsx index fb6dcfae0a130..ceb87429f9de4 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/exploratory_view.tsx +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/exploratory_view.tsx @@ -8,7 +8,7 @@ import { i18n } from '@kbn/i18n'; import React, { useEffect, useRef, useState } from 'react'; import styled from 'styled-components'; -import { EuiButtonEmpty, EuiResizableContainer, EuiTitle } from '@elastic/eui'; +import { EuiButtonEmpty, EuiResizableContainer, EuiTitle, EuiPanel } from '@elastic/eui'; import { PanelDirection } from '@elastic/eui/src/components/resizable_container/types'; import { useKibana } from '../../../../../../../src/plugins/kibana_react/public'; import { ObservabilityPublicPluginsStart } from '../../../plugin'; @@ -180,7 +180,7 @@ const LensWrapper = styled.div<{ height: string }>` height: 100%; } `; -const Wrapper = styled.div` +const Wrapper = styled(EuiPanel)` max-width: 1800px; min-width: 800px; margin: 0 auto; From 71f01f623d2d3bfa794e19fc494149a1b94f0b47 Mon Sep 17 00:00:00 2001 From: Dominique Clarke Date: Tue, 19 Oct 2021 11:59:01 -0400 Subject: [PATCH 6/8] update chart creation time date format --- .../header/chart_creation_info.test.tsx | 15 ++++----------- .../header/chart_creation_info.tsx | 3 +-- 2 files changed, 5 insertions(+), 13 deletions(-) diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/header/chart_creation_info.test.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/header/chart_creation_info.test.tsx index 6aaae31802c76..f7e0f45cdcd19 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/header/chart_creation_info.test.tsx +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/header/chart_creation_info.test.tsx @@ -8,11 +8,8 @@ import React from 'react'; import { screen } from '@testing-library/dom'; import { render } from '../rtl_helpers'; -import * as kibanaSettings from '../../../../hooks/use_kibana_ui_settings'; import { ChartCreationInfo } from './chart_creation_info'; -jest.spyOn(kibanaSettings, 'useKibanaUISettings').mockReturnValue('MMM D, YYYY @ HH:mm:ss.SSS'); - const info = { to: 1634071132571, from: 1633406400000, @@ -24,19 +21,15 @@ describe('ChartCreationInfo', () => { render(); expect(screen.getByText('Chart created')).toBeInTheDocument(); - expect(screen.getByText('Oct 12, 2021 @ 16:39:00.788')).toBeInTheDocument(); + expect(screen.getByText('10/12/2021 04:39 PM')).toBeInTheDocument(); expect(screen.getByText('Displaying from')).toBeInTheDocument(); - expect( - screen.getByText('Oct 5, 2021 @ 00:00:00.000 → Oct 12, 2021 @ 16:38:52.571') - ).toBeInTheDocument(); + expect(screen.getByText('10/05/2021 12:00 AM → 10/12/2021 04:38 PM')).toBeInTheDocument(); }); it('does not display info when props are falsey', async () => { render(); - expect(screen.queryByText('Oct 12, 2021 @ 16:39:00.788')).not.toBeInTheDocument(); - expect( - screen.queryByText('Oct 5, 2021 @ 00:00:00.000 → Oct 12, 2021 @ 16:38:52.571') - ).not.toBeInTheDocument(); + expect(screen.queryByText('Chart created')).not.toBeInTheDocument(); + expect(screen.queryByText('Displaying from')).not.toBeInTheDocument(); }); }); diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/header/chart_creation_info.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/header/chart_creation_info.tsx index 8f1398583e01e..4f2c9f7e3cd0a 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/header/chart_creation_info.tsx +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/header/chart_creation_info.tsx @@ -9,11 +9,10 @@ import React from 'react'; import moment from 'moment'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiFlexGroup, EuiFlexItem, EuiText, EuiSpacer } from '@elastic/eui'; -import { UI_SETTINGS, useKibanaUISettings } from '../../../../hooks/use_kibana_ui_settings'; import type { ChartTimeRange } from './last_updated'; export function ChartCreationInfo(props: Partial) { - const dateFormat = useKibanaUISettings(UI_SETTINGS.DATE_FORMAT) as string; + const dateFormat = 'MM/DD/YYYY hh:mm A'; const from = moment(props.from).format(dateFormat); const to = moment(props.to).format(dateFormat); const created = moment(props.lastUpdated).format(dateFormat); From db95dc3ea2055a20770fc7436ea7700d2703e7c6 Mon Sep 17 00:00:00 2001 From: Dominique Clarke Date: Tue, 19 Oct 2021 13:56:44 -0400 Subject: [PATCH 7/8] update time format --- .../shared/exploratory_view/header/chart_creation_info.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/header/chart_creation_info.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/header/chart_creation_info.tsx index 4f2c9f7e3cd0a..4814bc8d8630a 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/header/chart_creation_info.tsx +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/header/chart_creation_info.tsx @@ -12,7 +12,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiText, EuiSpacer } from '@elastic/eui'; import type { ChartTimeRange } from './last_updated'; export function ChartCreationInfo(props: Partial) { - const dateFormat = 'MM/DD/YYYY hh:mm A'; + const dateFormat = 'lll'; const from = moment(props.from).format(dateFormat); const to = moment(props.to).format(dateFormat); const created = moment(props.lastUpdated).format(dateFormat); From 162b0b47c284060c594a63fd61ef8488d41427af Mon Sep 17 00:00:00 2001 From: Dominique Clarke Date: Tue, 19 Oct 2021 16:40:00 -0400 Subject: [PATCH 8/8] adjust tests --- .../exploratory_view/header/chart_creation_info.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/header/chart_creation_info.test.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/header/chart_creation_info.test.tsx index f7e0f45cdcd19..570362a63c33f 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/header/chart_creation_info.test.tsx +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/header/chart_creation_info.test.tsx @@ -21,9 +21,9 @@ describe('ChartCreationInfo', () => { render(); expect(screen.getByText('Chart created')).toBeInTheDocument(); - expect(screen.getByText('10/12/2021 04:39 PM')).toBeInTheDocument(); + expect(screen.getByText('Oct 12, 2021 4:39 PM')).toBeInTheDocument(); expect(screen.getByText('Displaying from')).toBeInTheDocument(); - expect(screen.getByText('10/05/2021 12:00 AM → 10/12/2021 04:38 PM')).toBeInTheDocument(); + expect(screen.getByText('Oct 5, 2021 12:00 AM → Oct 12, 2021 4:38 PM')).toBeInTheDocument(); }); it('does not display info when props are falsey', async () => {