From 5fd2026ba7d01c76ff1ca765981ec04d0a26c8ec Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Wed, 29 Apr 2020 12:30:00 +0200 Subject: [PATCH 1/6] build: upgrade @elastic/charts to 19.0.0 --- package.json | 2 +- packages/kbn-ui-shared-deps/package.json | 2 +- yarn.lock | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 0ad304fdf2f690..712c0e08e9b454 100644 --- a/package.json +++ b/package.json @@ -122,7 +122,7 @@ "@babel/core": "^7.9.0", "@babel/register": "^7.9.0", "@elastic/apm-rum": "^5.1.1", - "@elastic/charts": "18.4.2", + "@elastic/charts": "19.0.0", "@elastic/datemath": "5.0.3", "@elastic/ems-client": "7.8.0", "@elastic/eui": "22.3.0", diff --git a/packages/kbn-ui-shared-deps/package.json b/packages/kbn-ui-shared-deps/package.json index a60e2b0449d958..340941979c93cb 100644 --- a/packages/kbn-ui-shared-deps/package.json +++ b/packages/kbn-ui-shared-deps/package.json @@ -9,7 +9,7 @@ "kbn:watch": "node scripts/build --watch" }, "dependencies": { - "@elastic/charts": "18.4.2", + "@elastic/charts": "19.0.0", "@elastic/eui": "22.3.0", "@kbn/i18n": "1.0.0", "abortcontroller-polyfill": "^1.4.0", diff --git a/yarn.lock b/yarn.lock index ee00ef283f07c0..1758a93ee27373 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1262,10 +1262,10 @@ dependencies: "@elastic/apm-rum-core" "^5.2.0" -"@elastic/charts@18.4.2": - version "18.4.2" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-18.4.2.tgz#7d3c40dca8a7a701fb7227382191b84d36d8b32a" - integrity sha512-fmEDRUeFEtVWGurafhp/5bHBypOjdXiRXY074tCqnez43hA2iA4v1KrZL8tPFlMePgc/kpZf9wb8aEwxlfWumw== +"@elastic/charts@19.0.0": + version "19.0.0" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-19.0.0.tgz#d789054dfcc134f6483c5dc5f11fc2cdf4cefdd2" + integrity sha512-2iwgCR2oTxwfCC+Cq5mYfLXQPnEizy7Itjr6ZX8wdSbV5hOW8O6Y4q3ewgLXzX1N1qmJ6ziu2XcbJi2oJgY2uw== dependencies: classnames "^2.2.6" d3-array "^1.2.4" From 8208c7c9bbcb95aaf2dceddcc01a9bede257422c Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Wed, 29 Apr 2020 12:30:50 +0200 Subject: [PATCH 2/6] refactor: onBrushEnd breaking changes --- .../np_ready/angular/directives/histogram.tsx | 14 ++-- .../visualizations/views/timeseries/index.js | 10 ++- .../common/charts/duration_chart.tsx | 16 ++++- .../common/charts/monitor_bar_series.tsx | 7 +- .../common/charts/ping_histogram.tsx | 16 ++++- .../sections/anomalies/chart.tsx | 9 ++- .../sections/log_rate/bar_chart.tsx | 9 ++- .../components/chart_section_vis.tsx | 18 ++++- .../metrics_explorer/components/chart.tsx | 16 ++++- .../plugins/infra/types/eui_experimental.d.ts | 70 ------------------- .../siem/public/components/charts/common.tsx | 3 +- .../components/matrix_histogram/index.tsx | 10 ++- .../signals_histogram_panel/index.tsx | 3 +- .../signals_histogram.tsx | 4 +- .../detection_engine/detection_engine.tsx | 9 ++- .../detection_engine/rules/details/index.tsx | 9 ++- .../pages/hosts/details/details_tabs.tsx | 9 ++- .../siem/public/pages/hosts/hosts_tabs.tsx | 9 ++- .../network/navigation/network_routes.tsx | 9 ++- .../overview/signals_by_category/index.tsx | 9 ++- 20 files changed, 148 insertions(+), 111 deletions(-) delete mode 100644 x-pack/plugins/infra/types/eui_experimental.d.ts diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/histogram.tsx b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/histogram.tsx index 8c55622e4c6041..3436a341ae6e56 100644 --- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/histogram.tsx +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/histogram.tsx @@ -39,6 +39,7 @@ import { TooltipType, ElementClickListener, XYChartElementEvent, + BrushEndListener, } from '@elastic/charts'; import { i18n } from '@kbn/i18n'; @@ -143,13 +144,12 @@ export class DiscoverHistogram extends Component { - const range = { - from: min, - to: max, - }; - - this.props.timefilterUpdateHandler(range); + public onBrushEnd: BrushEndListener = ({ x }) => { + if (!x) { + return; + } + const [from, to] = x; + this.props.timefilterUpdateHandler({ from, to }); }; public onElementClick = (xInterval: number): ElementClickListener => ([elementData]) => { diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js b/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js index 5cf1619150e5c7..874fc037c48961 100644 --- a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js +++ b/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js @@ -100,13 +100,21 @@ export const TimeSeries = ({ const { colors } = getChartsSetup(); colors.mappedColors.mapKeys(series.filter(({ color }) => !color).map(({ label }) => label)); + const onBrushEndListener = ({ x }) => { + if (!x) { + return; + } + const [min, max] = x; + onBrush(min, max); + }; + return ( ([]); - const onBrushEnd = (minX: number, maxX: number) => { + const onBrushEnd: BrushEndListener = ({ x }) => { + if (!x) { + return; + } + const [minX, maxX] = x; updateUrlParams({ dateRangeStart: moment(minX).toISOString(), dateRangeEnd: moment(maxX).toISOString(), diff --git a/x-pack/legacy/plugins/uptime/public/components/common/charts/monitor_bar_series.tsx b/x-pack/legacy/plugins/uptime/public/components/common/charts/monitor_bar_series.tsx index 5e11685e361400..1dccb39b21412e 100644 --- a/x-pack/legacy/plugins/uptime/public/components/common/charts/monitor_bar_series.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/common/charts/monitor_bar_series.tsx @@ -12,6 +12,7 @@ import { Settings, Position, timeFormatter, + BrushEndListener, } from '@elastic/charts'; import { i18n } from '@kbn/i18n'; import React, { useContext } from 'react'; @@ -42,7 +43,11 @@ export const MonitorBarSeries = ({ histogramSeries }: MonitorBarSeriesProps) => const [getUrlParams, updateUrlParams] = useUrlParams(); const { absoluteDateRangeStart, absoluteDateRangeEnd } = getUrlParams(); - const onBrushEnd = (min: number, max: number) => { + const onBrushEnd: BrushEndListener = ({ x }) => { + if (!x) { + return; + } + const [min, max] = x; updateUrlParams({ dateRangeStart: moment(min).toISOString(), dateRangeEnd: moment(max).toISOString(), diff --git a/x-pack/legacy/plugins/uptime/public/components/common/charts/ping_histogram.tsx b/x-pack/legacy/plugins/uptime/public/components/common/charts/ping_histogram.tsx index 66e86d67312360..6b86009a6c70aa 100644 --- a/x-pack/legacy/plugins/uptime/public/components/common/charts/ping_histogram.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/common/charts/ping_histogram.tsx @@ -4,7 +4,15 @@ * you may not use this file except in compliance with the Elastic License. */ -import { Axis, BarSeries, Chart, Position, Settings, timeFormatter } from '@elastic/charts'; +import { + Axis, + BarSeries, + Chart, + Position, + Settings, + timeFormatter, + BrushEndListener, +} from '@elastic/charts'; import { EuiTitle } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React, { useContext } from 'react'; @@ -79,7 +87,11 @@ export const PingHistogramComponent: React.FC = ({ defaultMessage: 'Up', }); - const onBrushEnd = (min: number, max: number) => { + const onBrushEnd: BrushEndListener = ({ x }) => { + if (!x) { + return; + } + const [min, max] = x; updateUrlParams({ dateRangeStart: moment(min).toISOString(), dateRangeEnd: moment(max).toISOString(), diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/chart.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/chart.tsx index 1a3a7d9e2b572e..46e41f227c08d7 100644 --- a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/chart.tsx +++ b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/chart.tsx @@ -15,6 +15,7 @@ import { LIGHT_THEME, DARK_THEME, RectAnnotation, + BrushEndListener, } from '@elastic/charts'; import numeral from '@elastic/numeral'; import { i18n } from '@kbn/i18n'; @@ -53,8 +54,12 @@ export const AnomaliesChart: React.FunctionComponent<{ [dateFormat] ); - const handleBrushEnd = useCallback( - (startTime: number, endTime: number) => { + const handleBrushEnd = useCallback( + ({ x }) => { + if (!x) { + return; + } + const [startTime, endTime] = x; setTimeRange({ endTime, startTime, diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/log_rate/bar_chart.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/log_rate/bar_chart.tsx index 3a244b6834c59f..263c888ca60005 100644 --- a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/log_rate/bar_chart.tsx +++ b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/log_rate/bar_chart.tsx @@ -11,6 +11,7 @@ import { niceTimeFormatter, Settings, TooltipValue, + BrushEndListener, LIGHT_THEME, DARK_THEME, } from '@elastic/charts'; @@ -43,8 +44,12 @@ export const LogEntryRateBarChart: React.FunctionComponent<{ [dateFormat] ); - const handleBrushEnd = useCallback( - (startTime: number, endTime: number) => { + const handleBrushEnd = useCallback( + ({ x }) => { + if (!x) { + return; + } + const [startTime, endTime] = x; setTimeRange({ endTime, startTime, diff --git a/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/chart_section_vis.tsx b/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/chart_section_vis.tsx index 588a0d84918c6c..7bf5dd6caae481 100644 --- a/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/chart_section_vis.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/chart_section_vis.tsx @@ -6,7 +6,15 @@ import React, { useCallback, useMemo } from 'react'; import moment from 'moment'; import { i18n } from '@kbn/i18n'; -import { Axis, Chart, niceTimeFormatter, Position, Settings, TooltipValue } from '@elastic/charts'; +import { + Axis, + Chart, + niceTimeFormatter, + Position, + Settings, + TooltipValue, + BrushEndListener, +} from '@elastic/charts'; import { EuiPageContentBody } from '@elastic/eui'; import { getChartTheme } from '../../metrics_explorer/components/helpers/get_chart_theme'; import { SeriesChart } from './series_chart'; @@ -45,8 +53,12 @@ export const ChartSectionVis = ({ () => (metric != null ? niceTimeFormatter(getMaxMinTimestamp(metric)) : undefined), [metric] ); - const handleTimeChange = useCallback( - (from: number, to: number) => { + const handleTimeChange = useCallback( + ({ x }) => { + if (!x) { + return; + } + const [from, to] = x; if (onChangeRangeTime) { if (isLiveStreaming && stopLiveStreaming) { stopLiveStreaming(); diff --git a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/chart.tsx b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/chart.tsx index 089e1abfc4c912..9bd53118cf0ece 100644 --- a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/chart.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/chart.tsx @@ -7,7 +7,15 @@ import React, { useCallback, useMemo } from 'react'; import { EuiTitle, EuiToolTip, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; -import { Axis, Chart, niceTimeFormatter, Position, Settings, TooltipValue } from '@elastic/charts'; +import { + Axis, + Chart, + niceTimeFormatter, + Position, + Settings, + TooltipValue, + BrushEndListener, +} from '@elastic/charts'; import { first, last } from 'lodash'; import moment from 'moment'; import { MetricsExplorerSeries } from '../../../../../common/http_api/metrics_explorer'; @@ -58,7 +66,11 @@ export const MetricsExplorerChart = ({ const isDarkMode = useUiSetting('theme:darkMode'); const { metrics } = options; const [dateFormat] = useKibanaUiSetting('dateFormat'); - const handleTimeChange = (from: number, to: number) => { + const handleTimeChange: BrushEndListener = ({ x }) => { + if (!x) { + return; + } + const [from, to] = x; onTimeChange(moment(from).toISOString(), moment(to).toISOString()); }; const dateFormatter = useMemo( diff --git a/x-pack/plugins/infra/types/eui_experimental.d.ts b/x-pack/plugins/infra/types/eui_experimental.d.ts deleted file mode 100644 index 6b01bd8066adc4..00000000000000 --- a/x-pack/plugins/infra/types/eui_experimental.d.ts +++ /dev/null @@ -1,70 +0,0 @@ -/* - * 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. - */ - -declare module '@elastic/eui/lib/experimental' { - import { CommonProps } from '@elastic/eui/src/components/common'; - export type EuiSeriesChartProps = CommonProps & { - xType?: string; - stackBy?: string; - statusText?: string; - yDomain?: number[]; - showCrosshair?: boolean; - showDefaultAxis?: boolean; - enableSelectionBrush?: boolean; - crosshairValue?: number; - onSelectionBrushEnd?: (args: any) => void; - onCrosshairUpdate?: (crosshairValue: number) => void; - animateData?: boolean; - marginLeft?: number; - }; - export const EuiSeriesChart: React.FC; - - type EuiSeriesProps = CommonProps & { - data: Array<{ x: number; y: number; y0?: number }>; - lineSize?: number; - name: string; - color?: string; - marginLeft?: number; - }; - export const EuiLineSeries: React.FC; - export const EuiAreaSeries: React.FC; - export const EuiBarSeries: React.FC; - - type EuiYAxisProps = CommonProps & { - tickFormat: (value: number) => string; - marginLeft?: number; - }; - export const EuiYAxis: React.FC; - - type EuiXAxisProps = CommonProps & { - tickFormat?: (value: number) => string; - marginLeft?: number; - }; - export const EuiXAxis: React.FC; - - export interface EuiDataPoint { - seriesIndex: number; - x: number; - y: number; - originalValues: { - x: number; - y: number; - x0?: number; - }; - } - - export interface EuiFormattedValue { - title: any; - value: any; - } - type EuiCrosshairXProps = CommonProps & { - marginLeft?: number; - seriesNames: string[]; - titleFormat?: (dataPoints: EuiDataPoint[]) => EuiFormattedValue | undefined; - itemsFormat?: (dataPoints: EuiDataPoint[]) => EuiFormattedValue[]; - }; - export const EuiCrosshairX: React.FC; -} diff --git a/x-pack/plugins/siem/public/components/charts/common.tsx b/x-pack/plugins/siem/public/components/charts/common.tsx index 74d728e65f0189..7e4b3079160421 100644 --- a/x-pack/plugins/siem/public/components/charts/common.tsx +++ b/x-pack/plugins/siem/public/components/charts/common.tsx @@ -15,6 +15,7 @@ import { SettingsSpecProps, TickFormatter, Position, + BrushEndListener, } from '@elastic/charts'; import React, { useMemo } from 'react'; import styled from 'styled-components'; @@ -27,7 +28,7 @@ export const defaultChartWidth = '100%'; const chartDefaultRotation: Rotation = 0; const chartDefaultRendering: Rendering = 'canvas'; -export type UpdateDateRange = (min: number, max: number) => void; +export type UpdateDateRange = BrushEndListener; export interface ChartData { x?: number | string | null; diff --git a/x-pack/plugins/siem/public/components/matrix_histogram/index.tsx b/x-pack/plugins/siem/public/components/matrix_histogram/index.tsx index 3d4eebd68319ca..ba3cb4f62af864 100644 --- a/x-pack/plugins/siem/public/components/matrix_histogram/index.tsx +++ b/x-pack/plugins/siem/public/components/matrix_histogram/index.tsx @@ -108,11 +108,15 @@ export const MatrixHistogramComponent: React.FC { + onBrushEnd: ({ x }) => { + if (!x) { + return; + } + const [from, to] = x; dispatchSetAbsoluteRangeDatePicker({ id: setAbsoluteRangeDatePickerTarget, - from: min, - to: max, + from, + to, }); }, yTickFormatter, diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/index.tsx index cf6730ea3ec3d7..9b336766b1724f 100644 --- a/x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/index.tsx +++ b/x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/index.tsx @@ -12,6 +12,7 @@ import { isEmpty } from 'lodash/fp'; import uuid from 'uuid'; import { DEFAULT_NUMBER_FORMAT } from '../../../../../common/constants'; +import { UpdateDateRange } from '../../../../components/charts/common'; import { LegendItem } from '../../../../components/charts/draggable_legend_item'; import { escapeDataProviderId } from '../../../../components/drag_and_drop/helpers'; import { HeaderSection } from '../../../../components/header_section'; @@ -70,7 +71,7 @@ interface SignalsHistogramPanelProps { stackByOptions?: SignalsHistogramOption[]; title?: string; to: number; - updateDateRange: (min: number, max: number) => void; + updateDateRange: UpdateDateRange; } const getHistogramOption = (fieldName: string): MatrixHistogramOption => ({ diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/signals_histogram.tsx b/x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/signals_histogram.tsx index 4bb7e9f6e122fd..a031f2542b8779 100644 --- a/x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/signals_histogram.tsx +++ b/x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/signals_histogram.tsx @@ -15,7 +15,7 @@ import { import { EuiFlexGroup, EuiFlexItem, EuiProgress } from '@elastic/eui'; import React, { useMemo } from 'react'; -import { useTheme } from '../../../../components/charts/common'; +import { useTheme, UpdateDateRange } from '../../../../components/charts/common'; import { histogramDateTimeFormatter } from '../../../../components/utils'; import { DraggableLegend } from '../../../../components/charts/draggable_legend'; import { LegendItem } from '../../../../components/charts/draggable_legend_item'; @@ -32,7 +32,7 @@ interface HistogramSignalsProps { loading: boolean; to: number; data: HistogramData[]; - updateDateRange: (min: number, max: number) => void; + updateDateRange: UpdateDateRange; } export const SignalsHistogram = React.memo( ({ diff --git a/x-pack/plugins/siem/public/pages/detection_engine/detection_engine.tsx b/x-pack/plugins/siem/public/pages/detection_engine/detection_engine.tsx index a26d7f5672106d..3e23700b08e66d 100644 --- a/x-pack/plugins/siem/public/pages/detection_engine/detection_engine.tsx +++ b/x-pack/plugins/siem/public/pages/detection_engine/detection_engine.tsx @@ -13,6 +13,7 @@ import { connect, ConnectedProps } from 'react-redux'; import { GlobalTime } from '../../containers/global_time'; import { indicesExistOrDataTemporarilyUnavailable, WithSource } from '../../containers/source'; import { AlertsTable } from '../../components/alerts_viewer/alerts_table'; +import { UpdateDateRange } from '../../components/charts/common'; import { FiltersGlobal } from '../../components/filters_global'; import { getDetectionEngineTabUrl, @@ -77,8 +78,12 @@ export const DetectionEnginePageComponent: React.FC = ({ const [lastSignals] = useSignalInfo({}); - const updateDateRangeCallback = useCallback( - (min: number, max: number) => { + const updateDateRangeCallback = useCallback( + ({ x }) => { + if (!x) { + return; + } + const [min, max] = x; setAbsoluteRangeDatePicker({ id: 'global', from: min, to: max }); }, [setAbsoluteRangeDatePicker] diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/details/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/details/index.tsx index 14e5f2b90882e0..3e45c892e23ddf 100644 --- a/x-pack/plugins/siem/public/pages/detection_engine/rules/details/index.tsx +++ b/x-pack/plugins/siem/public/pages/detection_engine/rules/details/index.tsx @@ -22,6 +22,7 @@ import { Redirect, useParams } from 'react-router-dom'; import { StickyContainer } from 'react-sticky'; import { connect, ConnectedProps } from 'react-redux'; +import { UpdateDateRange } from '../../../../components/charts/common'; import { FiltersGlobal } from '../../../../components/filters_global'; import { FormattedDate } from '../../../../components/formatted_date'; import { @@ -209,8 +210,12 @@ export const RuleDetailsPageComponent: FC = ({ signalIndexName, ]); - const updateDateRangeCallback = useCallback( - (min: number, max: number) => { + const updateDateRangeCallback = useCallback( + ({ x }) => { + if (!x) { + return; + } + const [min, max] = x; setAbsoluteRangeDatePicker({ id: 'global', from: min, to: max }); }, [setAbsoluteRangeDatePicker] diff --git a/x-pack/plugins/siem/public/pages/hosts/details/details_tabs.tsx b/x-pack/plugins/siem/public/pages/hosts/details/details_tabs.tsx index f5efd9248029da..d6c0211901ff05 100644 --- a/x-pack/plugins/siem/public/pages/hosts/details/details_tabs.tsx +++ b/x-pack/plugins/siem/public/pages/hosts/details/details_tabs.tsx @@ -7,6 +7,7 @@ import React, { useCallback } from 'react'; import { Route, Switch } from 'react-router-dom'; +import { UpdateDateRange } from '../../../components/charts/common'; import { scoreIntervalToDateTime } from '../../../components/ml/score/score_interval_to_datetime'; import { Anomaly } from '../../../components/ml/types'; import { HostsTableType } from '../../../store/hosts/model'; @@ -50,8 +51,12 @@ export const HostDetailsTabs = React.memo( [setAbsoluteRangeDatePicker] ); - const updateDateRange = useCallback( - (min: number, max: number) => { + const updateDateRange = useCallback( + ({ x }) => { + if (!x) { + return; + } + const [min, max] = x; setAbsoluteRangeDatePicker({ id: 'global', from: min, to: max }); }, [setAbsoluteRangeDatePicker] diff --git a/x-pack/plugins/siem/public/pages/hosts/hosts_tabs.tsx b/x-pack/plugins/siem/public/pages/hosts/hosts_tabs.tsx index 80c35e5563c1db..de25deeb5b477c 100644 --- a/x-pack/plugins/siem/public/pages/hosts/hosts_tabs.tsx +++ b/x-pack/plugins/siem/public/pages/hosts/hosts_tabs.tsx @@ -13,6 +13,7 @@ import { Anomaly } from '../../components/ml/types'; import { HostsTableType } from '../../store/hosts/model'; import { AnomaliesQueryTabBody } from '../../containers/anomalies/anomalies_query_tab_body'; import { AnomaliesHostTable } from '../../components/ml/tables/anomalies_host_table'; +import { UpdateDateRange } from '../../components/charts/common'; import { HostsQueryTabBody, @@ -55,8 +56,12 @@ export const HostsTabs = memo( }, [setAbsoluteRangeDatePicker] ), - updateDateRange: useCallback( - (min: number, max: number) => { + updateDateRange: useCallback( + ({ x }) => { + if (!x) { + return; + } + const [min, max] = x; setAbsoluteRangeDatePicker({ id: 'global', from: min, to: max }); }, [setAbsoluteRangeDatePicker] diff --git a/x-pack/plugins/siem/public/pages/network/navigation/network_routes.tsx b/x-pack/plugins/siem/public/pages/network/navigation/network_routes.tsx index b6b54b68ac06a0..fc8b632f87c597 100644 --- a/x-pack/plugins/siem/public/pages/network/navigation/network_routes.tsx +++ b/x-pack/plugins/siem/public/pages/network/navigation/network_routes.tsx @@ -22,6 +22,7 @@ import { NetworkRoutesProps, NetworkRouteType } from './types'; import { TlsQueryTabBody } from './tls_query_tab_body'; import { Anomaly } from '../../../components/ml/types'; import { NetworkAlertsQueryTabBody } from './alerts_query_tab_body'; +import { UpdateDateRange } from '../../../components/charts/common'; export const NetworkRoutes = React.memo( ({ @@ -46,8 +47,12 @@ export const NetworkRoutes = React.memo( }, [setAbsoluteRangeDatePicker] ); - const updateDateRange = useCallback( - (min: number, max: number) => { + const updateDateRange = useCallback( + ({ x }) => { + if (!x) { + return; + } + const [min, max] = x; setAbsoluteRangeDatePicker({ id: 'global', from: min, to: max }); }, [setAbsoluteRangeDatePicker] diff --git a/x-pack/plugins/siem/public/pages/overview/signals_by_category/index.tsx b/x-pack/plugins/siem/public/pages/overview/signals_by_category/index.tsx index 6357d93d7ba71b..e5863effa906d4 100644 --- a/x-pack/plugins/siem/public/pages/overview/signals_by_category/index.tsx +++ b/x-pack/plugins/siem/public/pages/overview/signals_by_category/index.tsx @@ -14,6 +14,7 @@ import { Filter, IIndexPattern, Query } from '../../../../../../../src/plugins/d import { inputsModel } from '../../../store'; import { InputsModelId } from '../../../store/inputs/constants'; import * as i18n from '../translations'; +import { UpdateDateRange } from '../../../components/charts/common'; const DEFAULT_QUERY: Query = { query: '', language: 'kuery' }; const DEFAULT_STACK_BY = 'signal.rule.threat.tactic.name'; @@ -52,8 +53,12 @@ const SignalsByCategoryComponent: React.FC = ({ to, }) => { const { signalIndexName } = useSignalIndex(); - const updateDateRangeCallback = useCallback( - (min: number, max: number) => { + const updateDateRangeCallback = useCallback( + ({ x }) => { + if (!x) { + return; + } + const [min, max] = x; setAbsoluteRangeDatePicker({ id: setAbsoluteRangeDatePickerTarget, from: min, to: max }); }, [setAbsoluteRangeDatePicker] From a7d7e76c12a1f2e5b9b93c60210f8227140afe18 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Wed, 29 Apr 2020 15:51:26 +0200 Subject: [PATCH 3/6] fix: missing onBrushEnd argument changes --- x-pack/plugins/siem/public/pages/hosts/details/index.tsx | 9 +++++++-- x-pack/plugins/siem/public/pages/hosts/hosts.tsx | 9 +++++++-- x-pack/plugins/siem/public/pages/network/network.tsx | 9 +++++++-- 3 files changed, 21 insertions(+), 6 deletions(-) diff --git a/x-pack/plugins/siem/public/pages/hosts/details/index.tsx b/x-pack/plugins/siem/public/pages/hosts/details/index.tsx index ef04288aa1b6fe..730c93b43709c2 100644 --- a/x-pack/plugins/siem/public/pages/hosts/details/index.tsx +++ b/x-pack/plugins/siem/public/pages/hosts/details/index.tsx @@ -9,6 +9,7 @@ import React, { useEffect, useCallback, useMemo } from 'react'; import { connect, ConnectedProps } from 'react-redux'; import { StickyContainer } from 'react-sticky'; +import { UpdateDateRange } from '../../../components/charts/common'; import { FiltersGlobal } from '../../../components/filters_global'; import { HeaderPage } from '../../../components/header_page'; import { LastEventTime } from '../../../components/last_event_time'; @@ -68,8 +69,12 @@ const HostDetailsComponent = React.memo( detailName, ]); const getFilters = () => [...hostDetailsPageFilters, ...filters]; - const narrowDateRange = useCallback( - (min: number, max: number) => { + const narrowDateRange = useCallback( + ({ x }) => { + if (!x) { + return; + } + const [min, max] = x; setAbsoluteRangeDatePicker({ id: 'global', from: min, to: max }); }, [setAbsoluteRangeDatePicker] diff --git a/x-pack/plugins/siem/public/pages/hosts/hosts.tsx b/x-pack/plugins/siem/public/pages/hosts/hosts.tsx index 028c804f4d48fe..2fbbc0d96a1e35 100644 --- a/x-pack/plugins/siem/public/pages/hosts/hosts.tsx +++ b/x-pack/plugins/siem/public/pages/hosts/hosts.tsx @@ -10,6 +10,7 @@ import { connect, ConnectedProps } from 'react-redux'; import { StickyContainer } from 'react-sticky'; import { useParams } from 'react-router-dom'; +import { UpdateDateRange } from '../../components/charts/common'; import { FiltersGlobal } from '../../components/filters_global'; import { HeaderPage } from '../../components/header_page'; import { LastEventTime } from '../../components/last_event_time'; @@ -61,8 +62,12 @@ export const HostsComponent = React.memo( } return filters; }, [tabName, filters]); - const narrowDateRange = useCallback( - (min: number, max: number) => { + const narrowDateRange = useCallback( + ({ x }) => { + if (!x) { + return; + } + const [min, max] = x; setAbsoluteRangeDatePicker({ id: 'global', from: min, to: max }); }, [setAbsoluteRangeDatePicker] diff --git a/x-pack/plugins/siem/public/pages/network/network.tsx b/x-pack/plugins/siem/public/pages/network/network.tsx index 65b3142c8c0745..698f51efbb451c 100644 --- a/x-pack/plugins/siem/public/pages/network/network.tsx +++ b/x-pack/plugins/siem/public/pages/network/network.tsx @@ -11,6 +11,7 @@ import { useParams } from 'react-router-dom'; import { StickyContainer } from 'react-sticky'; import { esQuery } from '../../../../../../src/plugins/data/public'; +import { UpdateDateRange } from '../../components/charts/common'; import { EmbeddedMap } from '../../components/embeddables/embedded_map'; import { FiltersGlobal } from '../../components/filters_global'; import { HeaderPage } from '../../components/header_page'; @@ -61,8 +62,12 @@ const NetworkComponent = React.memo( return filters; }, [tabName, filters]); - const narrowDateRange = useCallback( - (min: number, max: number) => { + const narrowDateRange = useCallback( + ({ x }) => { + if (!x) { + return; + } + const [min, max] = x; setAbsoluteRangeDatePicker({ id: 'global', from: min, to: max }); }, [setAbsoluteRangeDatePicker] From 51e89461cfdf77669c440c99184934688c336e9b Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Thu, 30 Apr 2020 23:16:00 +0200 Subject: [PATCH 4/6] fix: update ech to 19.1.1 --- package.json | 2 +- packages/kbn-ui-shared-deps/package.json | 2 +- yarn.lock | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 712c0e08e9b454..6fdb23163f8724 100644 --- a/package.json +++ b/package.json @@ -122,7 +122,7 @@ "@babel/core": "^7.9.0", "@babel/register": "^7.9.0", "@elastic/apm-rum": "^5.1.1", - "@elastic/charts": "19.0.0", + "@elastic/charts": "19.1.1", "@elastic/datemath": "5.0.3", "@elastic/ems-client": "7.8.0", "@elastic/eui": "22.3.0", diff --git a/packages/kbn-ui-shared-deps/package.json b/packages/kbn-ui-shared-deps/package.json index 340941979c93cb..d0886a77925518 100644 --- a/packages/kbn-ui-shared-deps/package.json +++ b/packages/kbn-ui-shared-deps/package.json @@ -9,7 +9,7 @@ "kbn:watch": "node scripts/build --watch" }, "dependencies": { - "@elastic/charts": "19.0.0", + "@elastic/charts": "19.1.1", "@elastic/eui": "22.3.0", "@kbn/i18n": "1.0.0", "abortcontroller-polyfill": "^1.4.0", diff --git a/yarn.lock b/yarn.lock index 97757c3c03a74a..3b53449aa0863f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1262,10 +1262,10 @@ dependencies: "@elastic/apm-rum-core" "^5.2.0" -"@elastic/charts@19.0.0": - version "19.0.0" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-19.0.0.tgz#d789054dfcc134f6483c5dc5f11fc2cdf4cefdd2" - integrity sha512-2iwgCR2oTxwfCC+Cq5mYfLXQPnEizy7Itjr6ZX8wdSbV5hOW8O6Y4q3ewgLXzX1N1qmJ6ziu2XcbJi2oJgY2uw== +"@elastic/charts@19.1.1": + version "19.1.1" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-19.1.1.tgz#8794ae7df470cf838e882322b2d973f923869b35" + integrity sha512-smoq6CYI28uvZloUtHTDYb0lOv8aYkmuWaUlKkvcq7Eylw+WJxAcZuS5LQzUMDV04HxDu0tuJGE1JeZGfRM/jg== dependencies: classnames "^2.2.6" d3-array "^1.2.4" From 7049d2e284d2c8dc37cbf9ce33843aaed0ab4aeb Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Thu, 30 Apr 2020 23:31:59 +0200 Subject: [PATCH 5/6] fix: lens onBrushEnd breaking changes --- .../lens/public/xy_visualization/xy_expression.test.tsx | 2 +- .../plugins/lens/public/xy_visualization/xy_expression.tsx | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_expression.test.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_expression.test.tsx index dd2f32b63e34a5..92a09f361230c6 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_expression.test.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/xy_expression.test.tsx @@ -609,7 +609,7 @@ describe('xy_expression', () => { wrapper .find(Settings) .first() - .prop('onBrushEnd')!(1585757732783, 1585758880838); + .prop('onBrushEnd')!({ x: [1585757732783, 1585758880838] }); expect(executeTriggerActions).toHaveBeenCalledWith('SELECT_RANGE_TRIGGER', { data: { diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx index 2cd9ae7acb203e..81ae57a5ee6384 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx @@ -277,7 +277,11 @@ export function XYChart({ theme={chartTheme} rotation={shouldRotate ? 90 : 0} xDomain={xDomain} - onBrushEnd={(min: number, max: number) => { + onBrushEnd={({ x }) => { + if (!x) { + return; + } + const [min, max] = x; // in the future we want to make it also for histogram if (!xAxisColumn || !isTimeViz) { return; From 202310f410fc22cc29ed963928a32b79a5cde967 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Mon, 4 May 2020 23:13:21 +0200 Subject: [PATCH 6/6] update to 19.1.2 --- package.json | 2 +- packages/kbn-ui-shared-deps/package.json | 2 +- yarn.lock | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 15eb41dd709c74..1f0658bd2a1383 100644 --- a/package.json +++ b/package.json @@ -122,7 +122,7 @@ "@babel/core": "^7.9.0", "@babel/register": "^7.9.0", "@elastic/apm-rum": "^5.1.1", - "@elastic/charts": "19.1.1", + "@elastic/charts": "19.1.2", "@elastic/datemath": "5.0.3", "@elastic/ems-client": "7.8.0", "@elastic/eui": "22.3.0", diff --git a/packages/kbn-ui-shared-deps/package.json b/packages/kbn-ui-shared-deps/package.json index c8e61e7ec452a8..a2248f1ae655e8 100644 --- a/packages/kbn-ui-shared-deps/package.json +++ b/packages/kbn-ui-shared-deps/package.json @@ -9,7 +9,7 @@ "kbn:watch": "node scripts/build --watch" }, "dependencies": { - "@elastic/charts": "19.1.1", + "@elastic/charts": "19.1.2", "@elastic/eui": "22.3.0", "@kbn/i18n": "1.0.0", "abortcontroller-polyfill": "^1.4.0", diff --git a/yarn.lock b/yarn.lock index b318d3b58dae73..7c2282fc2915bd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1262,10 +1262,10 @@ dependencies: "@elastic/apm-rum-core" "^5.2.0" -"@elastic/charts@19.1.1": - version "19.1.1" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-19.1.1.tgz#8794ae7df470cf838e882322b2d973f923869b35" - integrity sha512-smoq6CYI28uvZloUtHTDYb0lOv8aYkmuWaUlKkvcq7Eylw+WJxAcZuS5LQzUMDV04HxDu0tuJGE1JeZGfRM/jg== +"@elastic/charts@19.1.2": + version "19.1.2" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-19.1.2.tgz#b78730eb11bdcb4fcf17b213411bc48ae9cb770d" + integrity sha512-Qu4Sgp9Uh5Ic7Te3mCi19wlt8qw9Io8+MmCwpeyUi0TeGCPEIrpHp+aL9JkP+qTQJk+oCrJcjeXo2MhzcwOdCw== dependencies: classnames "^2.2.6" d3-array "^1.2.4"