-
+
diff --git a/x-pack/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.test.tsx b/x-pack/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.test.tsx
new file mode 100644
index 0000000000000..d785a30324e4e
--- /dev/null
+++ b/x-pack/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.test.tsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { NavigationPanel } from './navigation_panel';
+import { getDefaultMapSettings } from '../../reducers/default_map_settings';
+import { INITIAL_LOCATION } from '../../../common/constants';
+
+const defaultProps = {
+ center: { lat: 0, lon: 0 },
+ settings: getDefaultMapSettings(),
+ updateMapSetting: () => {},
+ zoom: 0,
+};
+
+test('should render', async () => {
+ const component = shallow(
);
+
+ expect(component).toMatchSnapshot();
+});
+
+test('should render fixed location form when initialLocation is FIXED_LOCATION', async () => {
+ const settings = {
+ ...defaultProps.settings,
+ initialLocation: INITIAL_LOCATION.FIXED_LOCATION,
+ };
+ const component = shallow(
);
+
+ expect(component).toMatchSnapshot();
+});
+
+test('should render browser location form when initialLocation is BROWSER_LOCATION', async () => {
+ const settings = {
+ ...defaultProps.settings,
+ initialLocation: INITIAL_LOCATION.BROWSER_LOCATION,
+ };
+ const component = shallow(
);
+
+ expect(component).toMatchSnapshot();
+});
diff --git a/x-pack/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx b/x-pack/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx
index ed83e838f44f6..0e12f20dd9a7a 100644
--- a/x-pack/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx
+++ b/x-pack/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx
@@ -4,25 +4,198 @@
* you may not use this file except in compliance with the Elastic License.
*/
-import React from 'react';
-import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
+import React, { ChangeEvent } from 'react';
+import {
+ EuiButtonEmpty,
+ EuiFieldNumber,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiFormRow,
+ EuiPanel,
+ EuiRadioGroup,
+ EuiSpacer,
+ EuiTitle,
+} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { MapSettings } from '../../reducers/map';
import { ValidatedDualRange, Value } from '../../../../../../src/plugins/kibana_react/public';
-import { MAX_ZOOM, MIN_ZOOM } from '../../../common/constants';
+import { INITIAL_LOCATION, MAX_ZOOM, MIN_ZOOM } from '../../../common/constants';
+import { MapCenter } from '../../../common/descriptor_types';
+// @ts-ignore
+import { ValidatedRange } from '../../components/validated_range';
interface Props {
+ center: MapCenter;
settings: MapSettings;
- updateMapSetting: (settingKey: string, settingValue: string | number | boolean) => void;
+ updateMapSetting: (settingKey: string, settingValue: string | number | boolean | object) => void;
+ zoom: number;
}
-export function NavigationPanel({ settings, updateMapSetting }: Props) {
+const initialLocationOptions = [
+ {
+ id: INITIAL_LOCATION.LAST_SAVED_LOCATION,
+ label: i18n.translate('xpack.maps.mapSettingsPanel.lastSavedLocationLabel', {
+ defaultMessage: 'Map location at save',
+ }),
+ },
+ {
+ id: INITIAL_LOCATION.FIXED_LOCATION,
+ label: i18n.translate('xpack.maps.mapSettingsPanel.fixedLocationLabel', {
+ defaultMessage: 'Fixed location',
+ }),
+ },
+ {
+ id: INITIAL_LOCATION.BROWSER_LOCATION,
+ label: i18n.translate('xpack.maps.mapSettingsPanel.browserLocationLabel', {
+ defaultMessage: 'Browser location',
+ }),
+ },
+];
+
+export function NavigationPanel({ center, settings, updateMapSetting, zoom }: Props) {
const onZoomChange = (value: Value) => {
- updateMapSetting('minZoom', Math.max(MIN_ZOOM, parseInt(value[0] as string, 10)));
- updateMapSetting('maxZoom', Math.min(MAX_ZOOM, parseInt(value[1] as string, 10)));
+ const minZoom = Math.max(MIN_ZOOM, parseInt(value[0] as string, 10));
+ const maxZoom = Math.min(MAX_ZOOM, parseInt(value[1] as string, 10));
+ updateMapSetting('minZoom', minZoom);
+ updateMapSetting('maxZoom', maxZoom);
+
+ // ensure fixed zoom and browser zoom stay within defined min/max
+ if (settings.fixedLocation.zoom < minZoom) {
+ onFixedZoomChange(minZoom);
+ } else if (settings.fixedLocation.zoom > maxZoom) {
+ onFixedZoomChange(maxZoom);
+ }
+
+ if (settings.browserLocation.zoom < minZoom) {
+ onBrowserZoomChange(minZoom);
+ } else if (settings.browserLocation.zoom > maxZoom) {
+ onBrowserZoomChange(maxZoom);
+ }
+ };
+
+ const onInitialLocationChange = (optionId: string): void => {
+ updateMapSetting('initialLocation', optionId);
+ };
+
+ const onFixedLatChange = (event: ChangeEvent
) => {
+ let value = parseFloat(event.target.value);
+ if (isNaN(value)) {
+ value = 0;
+ } else if (value < -90) {
+ value = -90;
+ } else if (value > 90) {
+ value = 90;
+ }
+ updateMapSetting('fixedLocation', { ...settings.fixedLocation, lat: value });
+ };
+
+ const onFixedLonChange = (event: ChangeEvent) => {
+ let value = parseFloat(event.target.value);
+ if (isNaN(value)) {
+ value = 0;
+ } else if (value < -180) {
+ value = -180;
+ } else if (value > 180) {
+ value = 180;
+ }
+ updateMapSetting('fixedLocation', { ...settings.fixedLocation, lon: value });
+ };
+
+ const onFixedZoomChange = (value: number) => {
+ updateMapSetting('fixedLocation', { ...settings.fixedLocation, zoom: value });
+ };
+
+ const onBrowserZoomChange = (value: number) => {
+ updateMapSetting('browserLocation', { zoom: value });
+ };
+
+ const useCurrentView = () => {
+ updateMapSetting('fixedLocation', {
+ lat: center.lat,
+ lon: center.lon,
+ zoom: Math.round(zoom),
+ });
};
+ function renderInitialLocationInputs() {
+ if (settings.initialLocation === INITIAL_LOCATION.LAST_SAVED_LOCATION) {
+ return null;
+ }
+
+ const zoomFormRow = (
+
+
+
+ );
+
+ if (settings.initialLocation === INITIAL_LOCATION.BROWSER_LOCATION) {
+ return zoomFormRow;
+ }
+
+ return (
+ <>
+
+
+
+
+
+
+ {zoomFormRow}
+
+
+
+
+
+
+
+
+ );
+ }
+
return (
@@ -50,6 +223,19 @@ export function NavigationPanel({ settings, updateMapSetting }: Props) {
allowEmptyRange={false}
compressed
/>
+
+
+
+
+ {renderInitialLocationInputs()}
);
}
diff --git a/x-pack/plugins/maps/public/reducers/default_map_settings.ts b/x-pack/plugins/maps/public/reducers/default_map_settings.ts
index fe21b37434edd..9c9b814ae6add 100644
--- a/x-pack/plugins/maps/public/reducers/default_map_settings.ts
+++ b/x-pack/plugins/maps/public/reducers/default_map_settings.ts
@@ -4,11 +4,14 @@
* you may not use this file except in compliance with the Elastic License.
*/
-import { MAX_ZOOM, MIN_ZOOM } from '../../common/constants';
+import { INITIAL_LOCATION, MAX_ZOOM, MIN_ZOOM } from '../../common/constants';
import { MapSettings } from './map';
export function getDefaultMapSettings(): MapSettings {
return {
+ initialLocation: INITIAL_LOCATION.LAST_SAVED_LOCATION,
+ fixedLocation: { lat: 0, lon: 0, zoom: 2 },
+ browserLocation: { zoom: 2 },
maxZoom: MAX_ZOOM,
minZoom: MIN_ZOOM,
showSpatialFilters: true,
diff --git a/x-pack/plugins/maps/public/reducers/map.d.ts b/x-pack/plugins/maps/public/reducers/map.d.ts
index be0700d4bdd6d..20e1dc1035e19 100644
--- a/x-pack/plugins/maps/public/reducers/map.d.ts
+++ b/x-pack/plugins/maps/public/reducers/map.d.ts
@@ -15,6 +15,7 @@ import {
MapRefreshConfig,
TooltipState,
} from '../../common/descriptor_types';
+import { INITIAL_LOCATION } from '../../common/constants';
import { Filter, TimeRange } from '../../../../../src/plugins/data/public';
export type MapContext = {
@@ -40,6 +41,15 @@ export type MapContext = {
};
export type MapSettings = {
+ initialLocation: INITIAL_LOCATION;
+ fixedLocation: {
+ lat: number;
+ lon: number;
+ zoom: number;
+ };
+ browserLocation: {
+ zoom: number;
+ };
maxZoom: number;
minZoom: number;
showSpatialFilters: boolean;
diff --git a/x-pack/plugins/ml/kibana.json b/x-pack/plugins/ml/kibana.json
index e9d4aff3484b1..038f61b3a33b7 100644
--- a/x-pack/plugins/ml/kibana.json
+++ b/x-pack/plugins/ml/kibana.json
@@ -13,9 +13,7 @@
"home",
"licensing",
"usageCollection",
- "share",
- "embeddable",
- "uiActions"
+ "share"
],
"optionalPlugins": [
"security",
diff --git a/x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx b/x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx
index decd1275fe884..9cc42a4df2f66 100644
--- a/x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx
+++ b/x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx
@@ -4,15 +4,56 @@
* you may not use this file except in compliance with the Elastic License.
*/
-import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import classNames from 'classnames';
-import TooltipTrigger from 'react-popper-tooltip';
+import React, { useRef, FC } from 'react';
import { TooltipValueFormatter } from '@elastic/charts';
+import useObservable from 'react-use/lib/useObservable';
-import './_index.scss';
+import { chartTooltip$, ChartTooltipState, ChartTooltipValue } from './chart_tooltip_service';
-import { ChildrenArg, TooltipTriggerProps } from 'react-popper-tooltip/dist/types';
-import { ChartTooltipService, ChartTooltipValue, TooltipData } from './chart_tooltip_service';
+type RefValue = HTMLElement | null;
+
+function useRefWithCallback(chartTooltipState?: ChartTooltipState) {
+ const ref = useRef(null);
+
+ return (node: RefValue) => {
+ ref.current = node;
+
+ if (
+ node !== null &&
+ node.parentElement !== null &&
+ chartTooltipState !== undefined &&
+ chartTooltipState.isTooltipVisible
+ ) {
+ const parentBounding = node.parentElement.getBoundingClientRect();
+
+ const { targetPosition, offset } = chartTooltipState;
+
+ const contentWidth = document.body.clientWidth - parentBounding.left;
+ const tooltipWidth = node.clientWidth;
+
+ let left = targetPosition.left + offset.x - parentBounding.left;
+ if (left + tooltipWidth > contentWidth) {
+ // the tooltip is hanging off the side of the page,
+ // so move it to the other side of the target
+ left = left - (tooltipWidth + offset.x);
+ }
+
+ const top = targetPosition.top + offset.y - parentBounding.top;
+
+ if (
+ chartTooltipState.tooltipPosition.left !== left ||
+ chartTooltipState.tooltipPosition.top !== top
+ ) {
+ // render the tooltip with adjusted position.
+ chartTooltip$.next({
+ ...chartTooltipState,
+ tooltipPosition: { left, top },
+ });
+ }
+ }
+ };
+}
const renderHeader = (headerData?: ChartTooltipValue, formatter?: TooltipValueFormatter) => {
if (!headerData) {
@@ -22,101 +63,48 @@ const renderHeader = (headerData?: ChartTooltipValue, formatter?: TooltipValueFo
return formatter ? formatter(headerData) : headerData.label;
};
-const Tooltip: FC<{ service: ChartTooltipService }> = React.memo(({ service }) => {
- const [tooltipData, setData] = useState([]);
- const refCallback = useRef();
+export const ChartTooltip: FC = () => {
+ const chartTooltipState = useObservable(chartTooltip$);
+ const chartTooltipElement = useRefWithCallback(chartTooltipState);
- useEffect(() => {
- const subscription = service.tooltipState$.subscribe(tooltipState => {
- if (refCallback.current) {
- // update trigger
- refCallback.current(tooltipState.target);
- }
- setData(tooltipState.tooltipData);
- });
- return () => {
- subscription.unsubscribe();
- };
- }, []);
-
- const triggerCallback = useCallback(
- (({ triggerRef }) => {
- // obtain the reference to the trigger setter callback
- // to update the target based on changes from the service.
- refCallback.current = triggerRef;
- // actual trigger is resolved by the service, hence don't render
- return null;
- }) as TooltipTriggerProps['children'],
- []
- );
-
- const tooltipCallback = useCallback(
- (({ tooltipRef, getTooltipProps }) => {
- return (
-
- {tooltipData.length > 0 && tooltipData[0].skipHeader === undefined && (
-
{renderHeader(tooltipData[0])}
- )}
- {tooltipData.length > 1 && (
-
- {tooltipData
- .slice(1)
- .map(({ label, value, color, isHighlighted, seriesIdentifier, valueAccessor }) => {
- const classes = classNames('mlChartTooltip__item', {
- /* eslint @typescript-eslint/camelcase:0 */
- echTooltip__rowHighlighted: isHighlighted,
- });
- return (
-
- {label}
- {value}
-
- );
- })}
-
- )}
-
+ {tooltipData.length > 0 && tooltipData[0].skipHeader === undefined && (
+
+ {renderHeader(tooltipData[0], tooltipHeaderFormatter)}
+
+ )}
+ {tooltipData.length > 1 && (
+
+ {tooltipData
+ .slice(1)
+ .map(({ label, value, color, isHighlighted, seriesIdentifier, valueAccessor }) => {
+ const classes = classNames('mlChartTooltip__item', {
+ /* eslint @typescript-eslint/camelcase:0 */
+ echTooltip__rowHighlighted: isHighlighted,
+ });
+ return (
+
+ {label}
+ {value}
+
+ );
+ })}
+
+ )}
+
+ {i18n.translate('xpack.ml.jobSelector.flyoutTitle', {
+ defaultMessage: 'Job selection',
+ })}
+
+
+
+
+
+
+
+ setShowAllBadges(!showAllBadges)}
+ showAllBadges={showAllBadges}
+ />
+
+
+
+
+
+ {!singleSelection && newSelection.length > 0 && (
+
+ {i18n.translate('xpack.ml.jobSelector.clearAllFlyoutButton', {
+ defaultMessage: 'Clear all',
+ })}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {i18n.translate('xpack.ml.jobSelector.applyFlyoutButton', {
+ defaultMessage: 'Apply',
+ })}
+
+
+
+
+ {i18n.translate('xpack.ml.jobSelector.closeFlyoutButton', {
+ defaultMessage: 'Close',
+ })}
+
+
+
+
+
);
}
}
@@ -184,3 +388,9 @@ export function JobSelector({ dateFormatTz, singleSelection, timeseriesOnly }: J
);
}
+
+JobSelector.propTypes = {
+ selectedJobIds: PropTypes.array,
+ singleSelection: PropTypes.bool,
+ timeseriesOnly: PropTypes.bool,
+};
diff --git a/x-pack/plugins/ml/public/application/components/job_selector/job_selector_badge/index.ts b/x-pack/plugins/ml/public/application/components/job_selector/job_selector_badge/index.js
similarity index 100%
rename from x-pack/plugins/ml/public/application/components/job_selector/job_selector_badge/index.ts
rename to x-pack/plugins/ml/public/application/components/job_selector/job_selector_badge/index.js
diff --git a/x-pack/plugins/ml/public/application/components/job_selector/job_selector_badge/job_selector_badge.tsx b/x-pack/plugins/ml/public/application/components/job_selector/job_selector_badge/job_selector_badge.js
similarity index 68%
rename from x-pack/plugins/ml/public/application/components/job_selector/job_selector_badge/job_selector_badge.tsx
rename to x-pack/plugins/ml/public/application/components/job_selector/job_selector_badge/job_selector_badge.js
index b2cae278c0e77..4d2ab01e2a054 100644
--- a/x-pack/plugins/ml/public/application/components/job_selector/job_selector_badge/job_selector_badge.tsx
+++ b/x-pack/plugins/ml/public/application/components/job_selector/job_selector_badge/job_selector_badge.js
@@ -4,32 +4,18 @@
* you may not use this file except in compliance with the Elastic License.
*/
-import React, { FC } from 'react';
-import { EuiBadge, EuiBadgeProps } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
+import React from 'react';
+import { PropTypes } from 'prop-types';
+import { EuiBadge } from '@elastic/eui';
import { tabColor } from '../../../../../common/util/group_color_utils';
+import { i18n } from '@kbn/i18n';
-interface JobSelectorBadgeProps {
- icon?: boolean;
- id: string;
- isGroup?: boolean;
- numJobs?: number;
- removeId?: Function;
-}
-
-export const JobSelectorBadge: FC