[Observability] [Exploratory View] add chart creation context (#114784)…

… (#115704) * add chart creation context * add chart creation tooltip, remove outer panel, and change default chart type for synthetics data * adjust types * remove extra translations * add panel back * update chart creation time date format * update time format * adjust tests Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Dominique Clarke <[email protected]>
elastic · Oct 20, 2021 · b919b41 · b919b41
1 parent 43fb6d3
commit b919b41
Show file tree

Hide file tree

Showing 8 changed files with 145 additions and 17 deletions.
diff --git a/src/plugins/data/common/constants.ts b/src/plugins/data/common/constants.ts
@@ -35,4 +35,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/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, 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';
@@ -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}
                         />
                       ) : (

diff --git a/...servability/public/components/shared/exploratory_view/header/chart_creation_info.test.tsx b/...servability/public/components/shared/exploratory_view/header/chart_creation_info.test.tsx
@@ -0,0 +1,35 @@
+/*
+ * 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 { ChartCreationInfo } from './chart_creation_info';
+
+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 4:39 PM')).toBeInTheDocument();
+    expect(screen.getByText('Displaying from')).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 () => {
+    render(<ChartCreationInfo />);
+
+    expect(screen.queryByText('Chart created')).not.toBeInTheDocument();
+    expect(screen.queryByText('Displaying from')).not.toBeInTheDocument();
+  });
+});
diff --git a/...ns/observability/public/components/shared/exploratory_view/header/chart_creation_info.tsx b/...ns/observability/public/components/shared/exploratory_view/header/chart_creation_info.tsx
@@ -0,0 +1,61 @@
+/*
+ * 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 { FormattedMessage } from '@kbn/i18n/react';
+import { EuiFlexGroup, EuiFlexItem, EuiText, EuiSpacer } from '@elastic/eui';
+import type { ChartTimeRange } from './last_updated';
+
+export function ChartCreationInfo(props: Partial<ChartTimeRange>) {
+  const dateFormat = 'lll';
+  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>
+        </>
+      )}
+    </>
+  );
+}
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
@@ -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())}>

diff --git a/...k/plugins/observability/public/components/shared/exploratory_view/header/last_updated.tsx b/...k/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;
+`;
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
@@ -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[] }) => {

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