[Observability] [Exploratory View] add chart creation context

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;

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,6 +20,7 @@ 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 type { ChartTimeRange } from './header/last_updated';
 
 export type PanelId = 'seriesPanel' | 'chartPanel';
 
@@ -37,7 +38,7 @@ export function ExploratoryView({
 
   const [height, setHeight] = useState<string>('100vh');
 
-  const [lastUpdated, setLastUpdated] = useState<number | undefined>();
+  const [chartTimeRangeContext, setChartTimeRangeContext] = useState<ChartTimeRange | undefined>();
 
   const [lensAttributes, setLensAttributes] = useState<TypedLensByValueInput['attributes'] | null>(
     null
@@ -96,7 +97,10 @@ export function ExploratoryView({
     <Wrapper>
       {lens ? (
         <>
-          <ExploratoryViewHeader lensAttributes={lensAttributes} lastUpdated={lastUpdated} />
+          <ExploratoryViewHeader
+            lensAttributes={lensAttributes}
+            chartTimeRange={chartTimeRangeContext}
+          />
           <LensWrapper ref={wrapperRef} height={height}>
             <EuiResizableContainer
               style={{ height: '100%' }}
@@ -116,7 +120,7 @@ export function ExploratoryView({
                     >
                       {lensAttributes ? (
                         <LensEmbeddable
-                          setLastUpdated={setLastUpdated}
+                          setChartTimeRangeContext={setChartTimeRangeContext}
                           lensAttributes={lensAttributes}
                         />
                       ) : (
@@ -176,7 +180,7 @@ const LensWrapper = styled.div<{ height: string }>`
     height: 100%;
   }
 `;
-const Wrapper = styled(EuiPanel)`
+const Wrapper = styled.div`
   max-width: 1800px;
   min-width: 800px;
   margin: 0 auto;

x-pack/plugins/observability/public/components/shared/exploratory_view/header/chart_creation_info.test.tsx

@@ -0,0 +1,42 @@
+/*
+ * 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(<ChartCreationInfo {...info} />);
+
+    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('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(<ChartCreationInfo />);
+
+    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();
+  });
+});

x-pack/plugins/observability/public/components/shared/exploratory_view/header/chart_creation_info.tsx

@@ -0,0 +1,88 @@
+/*
+ * 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 { 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<ChartTimeRange>) {
+  const dateFormat = useKibanaUISettings(UI_SETTINGS.DATE_FORMAT) as string;
+  const from = moment(props.from).format(dateFormat);
+  const to = moment(props.to).format(dateFormat);
+  const created = moment(props.lastUpdated).format(dateFormat);
+
+  return (
+    <>
+      {props.lastUpdated && (
+        <>
+          <EuiFlexGroup>
+            <EuiFlexItem>
+              <EuiText size="xs">
+                <FormattedMessage
+                  id="xpack.observability.expView.seriesBuilder.creationTime"
+                  defaultMessage="Chart created"
+                />
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem grow={2}>
+              <EuiText size="xs">{created}</EuiText>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiSpacer size="xs" />
+        </>
+      )}
+      {props.to && props.from && (
+        <>
+          <EuiFlexGroup alignItems="center">
+            <EuiFlexItem>
+              <EuiText size="xs">
+                <FormattedMessage
+                  id="xpack.observability.expView.seriesBuilder.creationContext"
+                  defaultMessage="Displaying from"
+                />
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem grow={2}>
+              <EuiText size="xs">
+                {from} &#8594; {to}
+              </EuiText>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </>
+      )}
+    </>
+  );
+}
+
+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',
+  }
+);

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) {
           </EuiText>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <LastUpdated lastUpdated={lastUpdated} />
+          <LastUpdated chartTimeRange={chartTimeRange} />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiButton iconType="refresh" onClick={() => setLastRefresh(Date.now())}>

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 (
     <EuiText color={isDanger ? 'danger' : isWarning ? 'warning' : 'subdued'} size="s">
-      <EuiIcon type="clock" />
+      <StyledToolTipWrapper
+        as={EuiToolTip}
+        position="top"
+        content={<ChartCreationInfo {...chartTimeRange} />}
+      >
+        <EuiIcon type="iInCircle" />
+      </StyledToolTipWrapper>{' '}
       <FormattedMessage
         id="xpack.observability.expView.lastUpdated.label"
         defaultMessage="Last Updated: {updatedDate}"
@@ -50,3 +66,7 @@ export function LastUpdated({ lastUpdated }: Props) {
     </EuiText>
   );
 }
+
+export const StyledToolTipWrapper = styled.div`
+  min-width: 30vw;
+`;

x-pack/plugins/observability/public/components/shared/exploratory_view/lens_embeddable.tsx

@@ -13,14 +13,16 @@ 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 { parseRelativeDate } from './components/date_range_picker';
+import type { ChartTimeRange } from './header/last_updated';
 
 interface Props {
   lensAttributes: TypedLensByValueInput['attributes'];
-  setLastUpdated: Dispatch<SetStateAction<number | undefined>>;
+  setChartTimeRangeContext: Dispatch<SetStateAction<ChartTimeRange | undefined>>;
 }
 
 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[] }) => {

x-pack/plugins/uptime/public/components/common/header/action_menu_content.tsx

@@ -51,7 +51,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',