Merge branch 'main' into kbn-107678-fail-start-on-unknown-so-types

elastic · Nov 16, 2021 · a2fb3c6 · a2fb3c6
2 parents 2e3c8e4 + f69ff00
commit a2fb3c6
Show file tree

Hide file tree

Showing 21 changed files with 318 additions and 163 deletions.
diff --git a/src/plugins/discover/public/application/discover_router.tsx b/src/plugins/discover/public/application/discover_router.tsx
@@ -9,6 +9,7 @@
 import { Redirect, Route, Router, Switch } from 'react-router-dom';
 import React from 'react';
 import { History } from 'history';
+import { EuiErrorBoundary } from '@elastic/eui';
 import { KibanaContextProvider } from '../../../kibana_react/public';
 import { ContextAppRoute } from './context';
 import { SingleDocRoute } from './doc';
@@ -25,29 +26,31 @@ export const discoverRouter = (services: DiscoverServices, history: History) =>
 
   return (
     <KibanaContextProvider services={services}>
-      <Router history={history} data-test-subj="discover-react-router">
-        <Switch>
-          <Route
-            path="/context/:indexPatternId/:id"
-            children={<ContextAppRoute services={services} />}
-          />
-          <Route
-            path="/doc/:indexPattern/:index/:type"
-            render={(props) => (
-              <Redirect
-                to={`/doc/${props.match.params.indexPattern}/${props.match.params.index}`}
-              />
-            )}
-          />
-          <Route
-            path="/doc/:indexPatternId/:index"
-            children={<SingleDocRoute services={services} />}
-          />
-          <Route path="/view/:id" children={<DiscoverMainRoute {...mainRouteProps} />} />
-          <Route path="/" exact children={<DiscoverMainRoute {...mainRouteProps} />} />
-          <NotFoundRoute services={services} />
-        </Switch>
-      </Router>
+      <EuiErrorBoundary>
+        <Router history={history} data-test-subj="discover-react-router">
+          <Switch>
+            <Route
+              path="/context/:indexPatternId/:id"
+              children={<ContextAppRoute services={services} />}
+            />
+            <Route
+              path="/doc/:indexPattern/:index/:type"
+              render={(props) => (
+                <Redirect
+                  to={`/doc/${props.match.params.indexPattern}/${props.match.params.index}`}
+                />
+              )}
+            />
+            <Route
+              path="/doc/:indexPatternId/:index"
+              children={<SingleDocRoute services={services} />}
+            />
+            <Route path="/view/:id" children={<DiscoverMainRoute {...mainRouteProps} />} />
+            <Route path="/" exact children={<DiscoverMainRoute {...mainRouteProps} />} />
+            <NotFoundRoute services={services} />
+          </Switch>
+        </Router>
+      </EuiErrorBoundary>
     </KibanaContextProvider>
   );
 };
diff --git a/src/plugins/home/common/instruction_variant.ts b/src/plugins/home/common/instruction_variant.ts
@@ -32,8 +32,8 @@ export const INSTRUCTION_VARIANT = {
 const DISPLAY_MAP = {
   [INSTRUCTION_VARIANT.ESC]: 'Elastic Cloud',
   [INSTRUCTION_VARIANT.OSX]: 'macOS',
-  [INSTRUCTION_VARIANT.DEB]: 'DEB',
-  [INSTRUCTION_VARIANT.RPM]: 'RPM',
+  [INSTRUCTION_VARIANT.DEB]: 'Linux DEB',
+  [INSTRUCTION_VARIANT.RPM]: 'Linux RPM',
   [INSTRUCTION_VARIANT.DOCKER]: 'Docker',
   [INSTRUCTION_VARIANT.WINDOWS]: 'Windows',
   [INSTRUCTION_VARIANT.NODE]: 'Node.js',

diff --git a/...ic/editor/components/options/metrics_axes/__snapshots__/category_axis_panel.test.tsx.snap b/...ic/editor/components/options/metrics_axes/__snapshots__/category_axis_panel.test.tsx.snap
diff --git a/..._types/xy/public/editor/components/options/metrics_axes/__snapshots__/index.test.tsx.snap b/..._types/xy/public/editor/components/options/metrics_axes/__snapshots__/index.test.tsx.snap
diff --git a/...y/public/editor/components/options/metrics_axes/__snapshots__/label_options.test.tsx.snap b/...y/public/editor/components/options/metrics_axes/__snapshots__/label_options.test.tsx.snap
diff --git a/...s/vis_types/xy/public/editor/components/options/metrics_axes/category_axis_panel.test.tsx b/...s/vis_types/xy/public/editor/components/options/metrics_axes/category_axis_panel.test.tsx
@@ -11,6 +11,7 @@ import { shallow } from 'enzyme';
 import { CategoryAxisPanel, CategoryAxisPanelProps } from './category_axis_panel';
 import { CategoryAxis } from '../../../../types';
 import { LabelOptions } from './label_options';
+import { TruncateLabelsOption } from '../../common';
 import { categoryAxis } from './mocks';
 import { Position } from '@elastic/charts';
 
@@ -29,6 +30,7 @@ describe('CategoryAxisPanel component', () => {
       axis,
       onPositionChanged,
       setCategoryAxis,
+      useMultiLayerAxis: false,
     };
   });
 
@@ -55,4 +57,16 @@ describe('CategoryAxisPanel component', () => {
     expect(setCategoryAxis).toHaveBeenLastCalledWith({ ...axis, position: value });
     expect(onPositionChanged).toBeCalledWith(value);
   });
+
+  it('should disable label options with multilayer axis', () => {
+    const comp = shallow(<CategoryAxisPanel {...defaultProps} useMultiLayerAxis={true} />);
+    const labelOptions = comp.find(LabelOptions).dive();
+    const rotateLabelsOption = labelOptions.find({ paramName: 'rotate' });
+    const filterLabelOption = labelOptions.find({ paramName: 'filter' });
+    const truncateLabelOption = labelOptions.find(TruncateLabelsOption);
+
+    expect(rotateLabelsOption.prop('disabled')).toBe(true);
+    expect(filterLabelOption.prop('disabled')).toBe(true);
+    expect(truncateLabelOption.prop('disabled')).toBe(true);
+  });
 });
diff --git a/...lugins/vis_types/xy/public/editor/components/options/metrics_axes/category_axis_panel.tsx b/...lugins/vis_types/xy/public/editor/components/options/metrics_axes/category_axis_panel.tsx
@@ -25,9 +25,15 @@ export interface CategoryAxisPanelProps {
   axis: CategoryAxis;
   onPositionChanged: (position: Position) => void;
   setCategoryAxis: (value: CategoryAxis) => void;
+  useMultiLayerAxis: boolean;
 }
 
-function CategoryAxisPanel({ axis, onPositionChanged, setCategoryAxis }: CategoryAxisPanelProps) {
+function CategoryAxisPanel({
+  axis,
+  onPositionChanged,
+  setCategoryAxis,
+  useMultiLayerAxis,
+}: CategoryAxisPanelProps) {
   const setAxis = useCallback(
     <T extends keyof CategoryAxis>(paramName: T, value: CategoryAxis[T]) => {
       const updatedAxis = {
@@ -95,6 +101,7 @@ function CategoryAxisPanel({ axis, onPositionChanged, setCategoryAxis }: Categor
           axisLabels={axis.labels}
           axisFilterCheckboxName={`xAxisFilterLabelsCheckbox${axis.id}`}
           setAxisLabel={setAxisLabel}
+          disableSingleLayerAxisControls={useMultiLayerAxis}
         />
       )}
     </EuiPanel>

diff --git a/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/index.test.tsx b/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/index.test.tsx
@@ -31,6 +31,11 @@ jest.mock('./category_axis_panel', () => ({
 jest.mock('./value_axes_panel', () => ({
   ValueAxesPanel: () => 'ValueAxesPanel',
 }));
+jest.mock('../../../../services', () => ({
+  getUISettings: jest.fn(() => ({
+    get: jest.fn((key: string, defaultOverride?: unknown) => defaultOverride),
+  })),
+}));
 
 const SERIES_PARAMS = 'seriesParams';
 const VALUE_AXES = 'valueAxes';

diff --git a/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/index.tsx b/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/index.tsx
@@ -10,8 +10,10 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { cloneDeep, get } from 'lodash';
 
 import { EuiSpacer } from '@elastic/eui';
+import { Position } from '@elastic/charts';
 
-import { IAggConfig } from '../../../../../../../data/public';
+import { BUCKET_TYPES, IAggConfig } from '../../../../../../../data/public';
+import { getUISettings } from '../../../../services';
 
 import { VisParams, ValueAxis, SeriesParam, CategoryAxis } from '../../../../types';
 import { ValidationVisOptionsProps } from '../../common';
@@ -27,6 +29,7 @@ import {
   mapPositionOpposingOpposite,
 } from './utils';
 import { getSeriesParams } from '../../../../utils/get_series_params';
+import { LEGACY_TIME_AXIS } from '../../../../../../../charts/common';
 
 export type SetParamByIndex = <P extends keyof ValueAxis, O extends keyof SeriesParam>(
   axesName: 'valueAxes' | 'seriesParams',
@@ -287,6 +290,20 @@ function MetricsAxisOptions(props: ValidationVisOptionsProps<VisParams>) {
     updateAxisTitle(updatedSeries);
   }, [firstValueAxesId, setValue, stateParams.seriesParams, updateAxisTitle, aggs, schemaName]);
 
+  const isTimeViz = aggs.aggs.some(
+    (agg) =>
+      agg.schema === 'segment' && agg.enabled && agg.type?.name === BUCKET_TYPES.DATE_HISTOGRAM
+  );
+  const xAxisIsHorizontal =
+    stateParams.categoryAxes[0].position === Position.Bottom ||
+    stateParams.categoryAxes[0].position === Position.Top;
+  const useLegacyTimeAxis = getUISettings().get(LEGACY_TIME_AXIS, false);
+  const linearOrStackedBars = stateParams.seriesParams.every(
+    ({ mode, type }) => type !== 'histogram' || (type === 'histogram' && mode === 'stacked')
+  );
+  const useMultiLayerAxis =
+    xAxisIsHorizontal && isTimeViz && !useLegacyTimeAxis && linearOrStackedBars;
+
   return isTabSelected ? (
     <>
       <SeriesPanel
@@ -311,6 +328,7 @@ function MetricsAxisOptions(props: ValidationVisOptionsProps<VisParams>) {
         axis={stateParams.categoryAxes[0]}
         onPositionChanged={onCategoryAxisPositionChanged}
         setCategoryAxis={setCategoryAxis}
+        useMultiLayerAxis={useMultiLayerAxis}
       />
     </>
   ) : null;

diff --git a/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/label_options.tsx b/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/label_options.tsx
@@ -8,7 +8,7 @@
 
 import React, { useCallback, useMemo } from 'react';
 
-import { EuiTitle, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import { EuiTitle, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
@@ -23,9 +23,15 @@ export interface LabelOptionsProps {
   axisLabels: Labels;
   axisFilterCheckboxName: string;
   setAxisLabel: SetAxisLabel;
+  disableSingleLayerAxisControls?: boolean;
 }
 
-function LabelOptions({ axisLabels, axisFilterCheckboxName, setAxisLabel }: LabelOptionsProps) {
+function LabelOptions({
+  axisLabels,
+  axisFilterCheckboxName,
+  setAxisLabel,
+  disableSingleLayerAxisControls,
+}: LabelOptionsProps) {
   const setAxisLabelRotate = useCallback(
     (paramName: 'rotate', value: Labels['rotate']) => {
       setAxisLabel(paramName, Number(value));
@@ -34,6 +40,15 @@ function LabelOptions({ axisLabels, axisFilterCheckboxName, setAxisLabel }: Labe
   );
 
   const rotateOptions = useMemo(getRotateOptions, []);
+  const multilayerAxisTooltipText = disableSingleLayerAxisControls
+    ? i18n.translate(
+        'visTypeXy.controls.pointSeries.categoryAxis.axisLabelsOptionsMultilayer.disabled',
+        {
+          defaultMessage: 'This option can be configured only with non-time-based axes',
+        }
+      )
+    : undefined;
+  const axisLabelControlDisabled = !axisLabels.show || disableSingleLayerAxisControls;
 
   return (
     <>
@@ -56,39 +71,43 @@ function LabelOptions({ axisLabels, axisFilterCheckboxName, setAxisLabel }: Labe
         value={axisLabels.show}
         setValue={setAxisLabel}
       />
-
       <SwitchOption
         data-test-subj={axisFilterCheckboxName}
-        disabled={!axisLabels.show}
+        disabled={axisLabelControlDisabled}
         label={i18n.translate('visTypeXy.controls.pointSeries.categoryAxis.filterLabelsLabel', {
           defaultMessage: 'Filter labels',
         })}
         paramName="filter"
         value={axisLabels.filter}
         setValue={setAxisLabel}
+        tooltip={multilayerAxisTooltipText}
       />
 
       <EuiSpacer size="m" />
 
       <EuiFlexGroup gutterSize="s">
         <EuiFlexItem>
-          <SelectOption
-            disabled={!axisLabels.show}
-            label={i18n.translate('visTypeXy.controls.pointSeries.categoryAxis.alignLabel', {
-              defaultMessage: 'Align',
-            })}
-            options={rotateOptions}
-            paramName="rotate"
-            value={axisLabels.rotate}
-            setValue={setAxisLabelRotate}
-          />
+          <EuiToolTip content={multilayerAxisTooltipText} delay="long" position="right">
+            <SelectOption
+              disabled={axisLabelControlDisabled}
+              label={i18n.translate('visTypeXy.controls.pointSeries.categoryAxis.alignLabel', {
+                defaultMessage: 'Align',
+              })}
+              options={rotateOptions}
+              paramName="rotate"
+              value={axisLabels.rotate}
+              setValue={setAxisLabelRotate}
+            />
+          </EuiToolTip>
         </EuiFlexItem>
         <EuiFlexItem>
-          <TruncateLabelsOption
-            disabled={!axisLabels.show}
-            value={axisLabels.truncate}
-            setValue={setAxisLabel}
-          />
+          <EuiToolTip content={multilayerAxisTooltipText} delay="long" position="right">
+            <TruncateLabelsOption
+              disabled={axisLabelControlDisabled}
+              value={axisLabels.truncate}
+              setValue={setAxisLabel}
+            />
+          </EuiToolTip>
         </EuiFlexItem>
       </EuiFlexGroup>
     </>