From 962b167024f1b7a5992fab890c1c035cad881074 Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Wed, 31 Jul 2019 10:36:56 +0800 Subject: [PATCH 1/4] add click and brush events --- .../public/components/charts/areachart.tsx | 8 +- .../public/components/charts/barchart.tsx | 8 +- .../siem/public/components/charts/common.tsx | 15 +- .../page/hosts/kpi_hosts/index.test.tsx | 46 ++++- .../components/page/hosts/kpi_hosts/index.tsx | 17 +- .../page/network/kpi_network/index.tsx | 26 ++- .../__snapshots__/index.test.tsx.snap | 21 +++ .../public/components/stat_items/index.tsx | 51 +++++- .../siem/public/pages/hosts/host_details.tsx | 1 + .../plugins/siem/public/pages/hosts/hosts.tsx | 157 +++++++++--------- .../siem/public/pages/network/network.tsx | 1 + 11 files changed, 252 insertions(+), 99 deletions(-) diff --git a/x-pack/legacy/plugins/siem/public/components/charts/areachart.tsx b/x-pack/legacy/plugins/siem/public/components/charts/areachart.tsx index 4784e3dc45d1c..6f41b1f2c99cd 100644 --- a/x-pack/legacy/plugins/siem/public/components/charts/areachart.tsx +++ b/x-pack/legacy/plugins/siem/public/components/charts/areachart.tsx @@ -24,6 +24,7 @@ import { getTheme, ChartSeriesConfigs, browserTimezone, + chartDefaultSettings, } from './common'; import { AutoSizer } from '../auto_sizer'; @@ -68,11 +69,14 @@ export const AreaChartBaseComponent = React.memo<{ const yTickFormatter = get('configs.axis.yTickFormatter', chartConfigs); const xAxisId = getAxisId(`group-${data[0].key}-x`); const yAxisId = getAxisId(`group-${data[0].key}-y`); - + const settings = { + ...chartDefaultSettings, + ...get('configs.settings', chartConfigs), + }; return chartConfigs.width && chartConfigs.height ? (
- + {data.map(series => { const seriesKey = series.key; const seriesSpecId = getSpecId(seriesKey); diff --git a/x-pack/legacy/plugins/siem/public/components/charts/barchart.tsx b/x-pack/legacy/plugins/siem/public/components/charts/barchart.tsx index f63b1699e2f4d..4408879ec729c 100644 --- a/x-pack/legacy/plugins/siem/public/components/charts/barchart.tsx +++ b/x-pack/legacy/plugins/siem/public/components/charts/barchart.tsx @@ -18,6 +18,7 @@ import { getTheme, ChartSeriesConfigs, browserTimezone, + chartDefaultSettings, } from './common'; import { AutoSizer } from '../auto_sizer'; @@ -32,10 +33,13 @@ export const BarChartBaseComponent = React.memo<{ const yTickFormatter = get('configs.axis.yTickFormatter', chartConfigs); const xAxisId = getAxisId(`stat-items-barchart-${data[0].key}-x`); const yAxisId = getAxisId(`stat-items-barchart-${data[0].key}-y`); - + const settings = { + ...chartDefaultSettings, + ...get('configs.settings', chartConfigs), + }; return chartConfigs.width && chartConfigs.height ? ( - + {data.map(series => { const barSeriesKey = series.key; const barSeriesSpecId = getSpecId(barSeriesKey); diff --git a/x-pack/legacy/plugins/siem/public/components/charts/common.tsx b/x-pack/legacy/plugins/siem/public/components/charts/common.tsx index c8646900e5250..e53d6431f793b 100644 --- a/x-pack/legacy/plugins/siem/public/components/charts/common.tsx +++ b/x-pack/legacy/plugins/siem/public/components/charts/common.tsx @@ -17,11 +17,14 @@ import { ScaleType, } from '@elastic/charts'; import { i18n } from '@kbn/i18n'; -import { TickFormatter } from '@elastic/charts/dist/lib/series/specs'; +import { TickFormatter, Rotation, Rendering } from '@elastic/charts/dist/lib/series/specs'; import chrome from 'ui/chrome'; import moment from 'moment-timezone'; +import { SettingSpecProps } from '@elastic/charts/dist/specs/settings'; const chartHeight = 74; +export const chartDefaultRotation: Rotation = 0; +const chartDefaultRendering: Rendering = 'canvas'; const FlexGroup = styled(EuiFlexGroup)` height: 100%; `; @@ -38,6 +41,15 @@ export const ChartHolder = () => ( ); +export const chartDefaultSettings = { + rotation: chartDefaultRotation, + rendering: chartDefaultRendering, + animatedData: false, + showLegend: false, + showLegendDisplayValue: false, + debug: false, +}; + export interface ChartData { x: number | string | null; y: number | string | null; @@ -54,6 +66,7 @@ export interface ChartSeriesConfigs { xTickFormatter?: TickFormatter | undefined; yTickFormatter?: TickFormatter | undefined; }; + settings?: Partial; } export interface ChartConfigsData { diff --git a/x-pack/legacy/plugins/siem/public/components/page/hosts/kpi_hosts/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/page/hosts/kpi_hosts/index.test.tsx index 671514062e394..82c2437941fed 100644 --- a/x-pack/legacy/plugins/siem/public/components/page/hosts/kpi_hosts/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/page/hosts/kpi_hosts/index.test.tsx @@ -12,22 +12,43 @@ import { KpiHostsComponent } from '.'; import * as statItems from '../../../stat_items'; import { kpiHostsMapping } from './kpi_hosts_mapping'; import { kpiHostDetailsMapping } from './kpi_host_details_mapping'; +import { ActionCreator } from 'typescript-fsa'; +import { InputsModelId } from '../../../../store/inputs/constants'; describe('kpiHostsComponent', () => { const ID = 'kpiHost'; const from = new Date('2019-06-15T06:00:00.000Z').valueOf(); const to = new Date('2019-06-18T06:00:00.000Z').valueOf(); + const setAbsoluteRangeDatePicker = (jest.fn() as unknown) as ActionCreator<{ + id: InputsModelId; + from: number; + to: number; + }>; describe('render', () => { test('it should render spinner if it is loading', () => { const wrapper: ShallowWrapper = shallow( - + ); expect(toJson(wrapper)).toMatchSnapshot(); }); test('it should render KpiHostsData', () => { const wrapper: ShallowWrapper = shallow( - + ); expect(toJson(wrapper)).toMatchSnapshot(); }); @@ -40,6 +61,7 @@ describe('kpiHostsComponent', () => { id={ID} loading={false} to={to} + setAbsoluteRangeDatePicker={setAbsoluteRangeDatePicker} /> ); expect(toJson(wrapper)).toMatchSnapshot(); @@ -56,7 +78,16 @@ describe('kpiHostsComponent', () => { }); beforeEach(() => { - shallow(); + shallow( + + ); }); afterEach(() => { @@ -68,7 +99,14 @@ describe('kpiHostsComponent', () => { }); test(`it should apply correct mapping by given data type`, () => { - expect(mockUseKpiMatrixStatus).toBeCalledWith(mapping, data, ID, from, to); + expect(mockUseKpiMatrixStatus).toBeCalledWith( + mapping, + data, + ID, + from, + to, + setAbsoluteRangeDatePicker + ); }); }); }); diff --git a/x-pack/legacy/plugins/siem/public/components/page/hosts/kpi_hosts/index.tsx b/x-pack/legacy/plugins/siem/public/components/page/hosts/kpi_hosts/index.tsx index b8fa63c8d55e5..21dcbd32ab628 100644 --- a/x-pack/legacy/plugins/siem/public/components/page/hosts/kpi_hosts/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/page/hosts/kpi_hosts/index.tsx @@ -9,10 +9,12 @@ import React from 'react'; import { EuiLoadingSpinner } from '@elastic/eui'; import { EuiFlexItem } from '@elastic/eui'; import styled from 'styled-components'; +import { ActionCreator } from 'typescript-fsa'; import { KpiHostsData, KpiHostDetailsData } from '../../../../graphql/types'; import { StatItemsComponent, StatItemsProps, useKpiMatrixStatus } from '../../../stat_items'; import { kpiHostsMapping } from './kpi_hosts_mapping'; import { kpiHostDetailsMapping } from './kpi_host_details_mapping'; +import { InputsModelId } from '../../../../store/inputs/constants'; const kpiWidgetHeight = 247; @@ -21,6 +23,11 @@ interface GenericKpiHostProps { id: string; loading: boolean; to: number; + setAbsoluteRangeDatePicker: ActionCreator<{ + id: InputsModelId; + from: number; + to: number; + }>; } interface KpiHostsProps extends GenericKpiHostProps { @@ -43,10 +50,18 @@ export const KpiHostsComponent = ({ loading, id, to, + setAbsoluteRangeDatePicker, }: KpiHostsProps | KpiHostDetailsProps) => { const mappings = (data as KpiHostsData).hosts !== undefined ? kpiHostsMapping : kpiHostDetailsMapping; - const statItemsProps: StatItemsProps[] = useKpiMatrixStatus(mappings, data, id, from, to); + const statItemsProps: StatItemsProps[] = useKpiMatrixStatus( + mappings, + data, + id, + from, + to, + setAbsoluteRangeDatePicker + ); return loading ? ( diff --git a/x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/index.tsx b/x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/index.tsx index 9cf34029f5433..0f15afc478f62 100644 --- a/x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/index.tsx @@ -11,6 +11,7 @@ import { EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui'; import styled from 'styled-components'; import { EuiSpacer } from '@elastic/eui'; import { chunk as _chunk } from 'lodash/fp'; +import { ActionCreator } from 'typescript-fsa'; import { StatItemsComponent, StatItemsProps, @@ -20,6 +21,7 @@ import { import { KpiNetworkData } from '../../../../graphql/types'; import * as i18n from './translations'; +import { InputsModelId } from '../../../../store/inputs/constants'; const kipsPerRow = 2; const kpiWidgetHeight = 228; @@ -34,6 +36,11 @@ interface KpiNetworkProps { id: string; loading: boolean; to: number; + setAbsoluteRangeDatePicker: ActionCreator<{ + id: InputsModelId; + from: number; + to: number; + }>; } export const fieldTitleChartMapping: Readonly = [ @@ -124,14 +131,27 @@ export const KpiNetworkBaseComponent = ({ id, from, to, + setAbsoluteRangeDatePicker, }: { fieldsMapping: Readonly; data: KpiNetworkData; id: string; from: number; to: number; + setAbsoluteRangeDatePicker: ActionCreator<{ + id: InputsModelId; + from: number; + to: number; + }>; }) => { - const statItemsProps: StatItemsProps[] = useKpiMatrixStatus(fieldsMapping, data, id, from, to); + const statItemsProps: StatItemsProps[] = useKpiMatrixStatus( + fieldsMapping, + data, + id, + from, + to, + setAbsoluteRangeDatePicker + ); return ( @@ -143,7 +163,7 @@ export const KpiNetworkBaseComponent = ({ }; export const KpiNetworkComponent = React.memo( - ({ data, from, id, loading, to }) => { + ({ data, from, id, loading, to, setAbsoluteRangeDatePicker }) => { return loading ? ( @@ -162,6 +182,7 @@ export const KpiNetworkComponent = React.memo( fieldsMapping={mappingsPerLine} from={from} to={to} + setAbsoluteRangeDatePicker={setAbsoluteRangeDatePicker} /> ))} @@ -173,6 +194,7 @@ export const KpiNetworkComponent = React.memo( fieldsMapping={fieldTitleChartMapping} from={from} to={to} + setAbsoluteRangeDatePicker={setAbsoluteRangeDatePicker} /> diff --git a/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap index fb0e584d032bc..995b643821d58 100644 --- a/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap +++ b/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap @@ -973,6 +973,10 @@ exports[`Stat Items Component rendering kpis with charts it renders the default "xScaleType": "ordinal", "yScaleType": "linear", }, + "settings": Object { + "onElementClick": [Function], + "rotation": 90, + }, } } > @@ -996,6 +1000,10 @@ exports[`Stat Items Component rendering kpis with charts it renders the default "xScaleType": "ordinal", "yScaleType": "linear", }, + "settings": Object { + "onElementClick": [Function], + "rotation": 90, + }, } } data={ @@ -1033,6 +1041,10 @@ exports[`Stat Items Component rendering kpis with charts it renders the default "xScaleType": "ordinal", "yScaleType": "linear", }, + "settings": Object { + "onElementClick": [Function], + "rotation": 90, + }, } } data={ @@ -1126,6 +1138,9 @@ exports[`Stat Items Component rendering kpis with charts it renders the default "xScaleType": "time", "yScaleType": "linear", }, + "settings": Object { + "onBrushEnd": [Function], + }, } } > @@ -1150,6 +1165,9 @@ exports[`Stat Items Component rendering kpis with charts it renders the default "xScaleType": "time", "yScaleType": "linear", }, + "settings": Object { + "onBrushEnd": [Function], + }, } } data={ @@ -1204,6 +1222,9 @@ exports[`Stat Items Component rendering kpis with charts it renders the default "xScaleType": "time", "yScaleType": "linear", }, + "settings": Object { + "onBrushEnd": [Function], + }, } } data={ diff --git a/x-pack/legacy/plugins/siem/public/components/stat_items/index.tsx b/x-pack/legacy/plugins/siem/public/components/stat_items/index.tsx index 3caee78ce6775..b658ba5855185 100644 --- a/x-pack/legacy/plugins/siem/public/components/stat_items/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/stat_items/index.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { ScaleType, niceTimeFormatter } from '@elastic/charts'; +import { ScaleType, niceTimeFormatter, Rotation } from '@elastic/charts'; import { EuiFlexGroup, EuiFlexItem, @@ -18,6 +18,8 @@ import { get, getOr } from 'lodash/fp'; import React, { useState, useEffect } from 'react'; import styled from 'styled-components'; +import { BrushEndListener, ElementClickListener } from '@elastic/charts/dist/state/chart_state'; +import { ActionCreator } from 'typescript-fsa'; import { KpiHostsData, KpiNetworkData } from '../../graphql/types'; import { AreaChart } from '../charts/areachart'; import { BarChart } from '../charts/barchart'; @@ -25,6 +27,7 @@ import { ChartConfigsData, ChartData, ChartSeriesConfigs } from '../charts/commo import { getEmptyTagValue } from '../empty_value'; import { InspectButton } from '../inspect'; +import { InputsModelId } from '../../store/inputs/constants'; const FlexItem = styled(EuiFlexItem)` min-width: 0; @@ -62,22 +65,35 @@ export interface StatItemsProps extends StatItems { barChart?: ChartConfigsData[]; from: number; id: string; - to: number; + setAbsoluteRangeDatePicker: ActionCreator<{ + id: InputsModelId; + from: number; + to: number; + }>; } export const numberFormatter = (value: string | number): string => value.toLocaleString(); -export const areachartConfigs = (from: number, to: number) => ({ +const statItemBarchartRotation: Rotation = 90; + +export const areachartConfigs = (config?: { + xTickFormatter: (value: number) => string; + onBrushEnd?: BrushEndListener; +}) => ({ series: { xScaleType: ScaleType.Time, yScaleType: ScaleType.Linear, }, axis: { - xTickFormatter: niceTimeFormatter([from, to]), + xTickFormatter: get('xTickFormatter', config), yTickFormatter: numberFormatter, }, + settings: { + onBrushEnd: getOr(() => {}, 'onBrushEnd', config), + }, }); -export const barchartConfigs = { + +export const barchartConfigs = (config?: { onElementClick?: ElementClickListener }) => ({ series: { xScaleType: ScaleType.Ordinal, yScaleType: ScaleType.Linear, @@ -85,7 +101,11 @@ export const barchartConfigs = { axis: { xTickFormatter: numberFormatter, }, -}; + settings: { + onElementClick: getOr(() => {}, 'onElementClick', config), + rotation: statItemBarchartRotation, + }, +}); export const addValueToFields = ( fields: StatItem[], @@ -137,7 +157,8 @@ export const useKpiMatrixStatus = ( data: KpiHostsData | KpiNetworkData, id: string, from: number, - to: number + to: number, + setAbsoluteRangeDatePicker: ActionCreator<{ id: InputsModelId; from: number; to: number }> ): StatItemsProps[] => { const [statItemsProps, setStatItemsProps] = useState(mappings as StatItemsProps[]); @@ -153,6 +174,7 @@ export const useKpiMatrixStatus = ( key: `kpi-summary-${stat.key}`, from, to, + setAbsoluteRangeDatePicker, }; }) ); @@ -174,6 +196,7 @@ export const StatItemsComponent = React.memo( id, index, to, + setAbsoluteRangeDatePicker, }) => { const [isHover, setIsHover] = useState(false); const isBarChartDataAvailable = @@ -235,13 +258,23 @@ export const StatItemsComponent = React.memo( {enableBarChart && ( - + )} {enableAreaChart && from != null && to != null && ( - + { + setTimeout(() => { + setAbsoluteRangeDatePicker({ id: 'global', from: min, to: max }); + }, 500); + }, + })} + /> )} diff --git a/x-pack/legacy/plugins/siem/public/pages/hosts/host_details.tsx b/x-pack/legacy/plugins/siem/public/pages/hosts/host_details.tsx index f6ad586a83b2b..96d8ff4da182f 100644 --- a/x-pack/legacy/plugins/siem/public/pages/hosts/host_details.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/hosts/host_details.tsx @@ -151,6 +151,7 @@ const HostDetailsComponent = pure( refetch={refetch} setQuery={setQuery} to={to} + setAbsoluteRangeDatePicker={setAbsoluteRangeDatePicker} /> )} diff --git a/x-pack/legacy/plugins/siem/public/pages/hosts/hosts.tsx b/x-pack/legacy/plugins/siem/public/pages/hosts/hosts.tsx index 66352265c00e3..2f7d85358cb47 100644 --- a/x-pack/legacy/plugins/siem/public/pages/hosts/hosts.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/hosts/hosts.tsx @@ -96,6 +96,7 @@ const HostsComponent = pure(({ filterQuery, setAbsoluteRang refetch={refetch} setQuery={setQuery} to={to} + setAbsoluteRangeDatePicker={setAbsoluteRangeDatePicker} /> )} @@ -120,25 +121,25 @@ const HostsComponent = pure(({ filterQuery, setAbsoluteRang inspect, refetch, }) => ( - - )} + + )} @@ -161,24 +162,24 @@ const HostsComponent = pure(({ filterQuery, setAbsoluteRang inspect, refetch, }) => ( - - )} + + )} @@ -201,24 +202,24 @@ const HostsComponent = pure(({ filterQuery, setAbsoluteRang inspect, refetch, }) => ( - - )} + + )} @@ -258,24 +259,24 @@ const HostsComponent = pure(({ filterQuery, setAbsoluteRang pageInfo, loadPage, }) => ( - - )} + + )} )} @@ -284,11 +285,11 @@ const HostsComponent = pure(({ filterQuery, setAbsoluteRang ) : ( - <> - - - - ) + <> + + + + ) } ); diff --git a/x-pack/legacy/plugins/siem/public/pages/network/network.tsx b/x-pack/legacy/plugins/siem/public/pages/network/network.tsx index 3fa8cbe623d03..e4532f7b3341d 100644 --- a/x-pack/legacy/plugins/siem/public/pages/network/network.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/network/network.tsx @@ -85,6 +85,7 @@ const NetworkComponent = pure( loading={loading} from={from} to={to} + setAbsoluteRangeDatePicker={setAbsoluteRangeDatePicker} /> )} From b2beb83812b82bc29f56793ca4e74af5f68394ab Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Thu, 1 Aug 2019 21:27:39 +0800 Subject: [PATCH 2/4] replace setAbsoluteRangeDatePicker --- .../siem/public/components/charts/common.tsx | 1 + .../page/hosts/kpi_hosts/index.test.tsx | 25 +-- .../components/page/hosts/kpi_hosts/index.tsx | 13 +- .../page/network/kpi_network/index.tsx | 25 +-- .../public/components/stat_items/index.tsx | 22 +-- .../siem/public/pages/hosts/host_details.tsx | 6 +- .../plugins/siem/public/pages/hosts/hosts.tsx | 162 +++++++++--------- .../siem/public/pages/network/network.tsx | 6 +- 8 files changed, 118 insertions(+), 142 deletions(-) diff --git a/x-pack/legacy/plugins/siem/public/components/charts/common.tsx b/x-pack/legacy/plugins/siem/public/components/charts/common.tsx index e53d6431f793b..459365e91cb6c 100644 --- a/x-pack/legacy/plugins/siem/public/components/charts/common.tsx +++ b/x-pack/legacy/plugins/siem/public/components/charts/common.tsx @@ -28,6 +28,7 @@ const chartDefaultRendering: Rendering = 'canvas'; const FlexGroup = styled(EuiFlexGroup)` height: 100%; `; +export type UpdateDateRange = (min: number, max: number) => void; export const ChartHolder = () => ( diff --git a/x-pack/legacy/plugins/siem/public/components/page/hosts/kpi_hosts/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/page/hosts/kpi_hosts/index.test.tsx index 82c2437941fed..f9e23b2810916 100644 --- a/x-pack/legacy/plugins/siem/public/components/page/hosts/kpi_hosts/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/page/hosts/kpi_hosts/index.test.tsx @@ -12,18 +12,12 @@ import { KpiHostsComponent } from '.'; import * as statItems from '../../../stat_items'; import { kpiHostsMapping } from './kpi_hosts_mapping'; import { kpiHostDetailsMapping } from './kpi_host_details_mapping'; -import { ActionCreator } from 'typescript-fsa'; -import { InputsModelId } from '../../../../store/inputs/constants'; describe('kpiHostsComponent', () => { const ID = 'kpiHost'; const from = new Date('2019-06-15T06:00:00.000Z').valueOf(); const to = new Date('2019-06-18T06:00:00.000Z').valueOf(); - const setAbsoluteRangeDatePicker = (jest.fn() as unknown) as ActionCreator<{ - id: InputsModelId; - from: number; - to: number; - }>; + const narrowDateRange = () => {}; describe('render', () => { test('it should render spinner if it is loading', () => { const wrapper: ShallowWrapper = shallow( @@ -33,7 +27,7 @@ describe('kpiHostsComponent', () => { id={ID} loading={true} to={to} - setAbsoluteRangeDatePicker={setAbsoluteRangeDatePicker} + narrowDateRange={narrowDateRange} /> ); expect(toJson(wrapper)).toMatchSnapshot(); @@ -47,7 +41,7 @@ describe('kpiHostsComponent', () => { id={ID} loading={false} to={to} - setAbsoluteRangeDatePicker={setAbsoluteRangeDatePicker} + narrowDateRange={narrowDateRange} /> ); expect(toJson(wrapper)).toMatchSnapshot(); @@ -61,7 +55,7 @@ describe('kpiHostsComponent', () => { id={ID} loading={false} to={to} - setAbsoluteRangeDatePicker={setAbsoluteRangeDatePicker} + narrowDateRange={narrowDateRange} /> ); expect(toJson(wrapper)).toMatchSnapshot(); @@ -85,7 +79,7 @@ describe('kpiHostsComponent', () => { id={ID} loading={false} to={to} - setAbsoluteRangeDatePicker={setAbsoluteRangeDatePicker} + narrowDateRange={narrowDateRange} /> ); }); @@ -99,14 +93,7 @@ describe('kpiHostsComponent', () => { }); test(`it should apply correct mapping by given data type`, () => { - expect(mockUseKpiMatrixStatus).toBeCalledWith( - mapping, - data, - ID, - from, - to, - setAbsoluteRangeDatePicker - ); + expect(mockUseKpiMatrixStatus).toBeCalledWith(mapping, data, ID, from, to, narrowDateRange); }); }); }); diff --git a/x-pack/legacy/plugins/siem/public/components/page/hosts/kpi_hosts/index.tsx b/x-pack/legacy/plugins/siem/public/components/page/hosts/kpi_hosts/index.tsx index 21dcbd32ab628..c7dafa224142e 100644 --- a/x-pack/legacy/plugins/siem/public/components/page/hosts/kpi_hosts/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/page/hosts/kpi_hosts/index.tsx @@ -9,12 +9,11 @@ import React from 'react'; import { EuiLoadingSpinner } from '@elastic/eui'; import { EuiFlexItem } from '@elastic/eui'; import styled from 'styled-components'; -import { ActionCreator } from 'typescript-fsa'; import { KpiHostsData, KpiHostDetailsData } from '../../../../graphql/types'; import { StatItemsComponent, StatItemsProps, useKpiMatrixStatus } from '../../../stat_items'; import { kpiHostsMapping } from './kpi_hosts_mapping'; import { kpiHostDetailsMapping } from './kpi_host_details_mapping'; -import { InputsModelId } from '../../../../store/inputs/constants'; +import { UpdateDateRange } from '../../../charts/common'; const kpiWidgetHeight = 247; @@ -23,11 +22,7 @@ interface GenericKpiHostProps { id: string; loading: boolean; to: number; - setAbsoluteRangeDatePicker: ActionCreator<{ - id: InputsModelId; - from: number; - to: number; - }>; + narrowDateRange: UpdateDateRange; } interface KpiHostsProps extends GenericKpiHostProps { @@ -50,7 +45,7 @@ export const KpiHostsComponent = ({ loading, id, to, - setAbsoluteRangeDatePicker, + narrowDateRange, }: KpiHostsProps | KpiHostDetailsProps) => { const mappings = (data as KpiHostsData).hosts !== undefined ? kpiHostsMapping : kpiHostDetailsMapping; @@ -60,7 +55,7 @@ export const KpiHostsComponent = ({ id, from, to, - setAbsoluteRangeDatePicker + narrowDateRange ); return loading ? ( diff --git a/x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/index.tsx b/x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/index.tsx index 0f15afc478f62..88c895eeb8af4 100644 --- a/x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/index.tsx @@ -11,7 +11,6 @@ import { EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui'; import styled from 'styled-components'; import { EuiSpacer } from '@elastic/eui'; import { chunk as _chunk } from 'lodash/fp'; -import { ActionCreator } from 'typescript-fsa'; import { StatItemsComponent, StatItemsProps, @@ -21,7 +20,7 @@ import { import { KpiNetworkData } from '../../../../graphql/types'; import * as i18n from './translations'; -import { InputsModelId } from '../../../../store/inputs/constants'; +import { UpdateDateRange } from '../../../charts/common'; const kipsPerRow = 2; const kpiWidgetHeight = 228; @@ -36,11 +35,7 @@ interface KpiNetworkProps { id: string; loading: boolean; to: number; - setAbsoluteRangeDatePicker: ActionCreator<{ - id: InputsModelId; - from: number; - to: number; - }>; + narrowDateRange: UpdateDateRange; } export const fieldTitleChartMapping: Readonly = [ @@ -131,18 +126,14 @@ export const KpiNetworkBaseComponent = ({ id, from, to, - setAbsoluteRangeDatePicker, + narrowDateRange, }: { fieldsMapping: Readonly; data: KpiNetworkData; id: string; from: number; to: number; - setAbsoluteRangeDatePicker: ActionCreator<{ - id: InputsModelId; - from: number; - to: number; - }>; + narrowDateRange: UpdateDateRange; }) => { const statItemsProps: StatItemsProps[] = useKpiMatrixStatus( fieldsMapping, @@ -150,7 +141,7 @@ export const KpiNetworkBaseComponent = ({ id, from, to, - setAbsoluteRangeDatePicker + narrowDateRange ); return ( @@ -163,7 +154,7 @@ export const KpiNetworkBaseComponent = ({ }; export const KpiNetworkComponent = React.memo( - ({ data, from, id, loading, to, setAbsoluteRangeDatePicker }) => { + ({ data, from, id, loading, to, narrowDateRange }) => { return loading ? ( @@ -182,7 +173,7 @@ export const KpiNetworkComponent = React.memo( fieldsMapping={mappingsPerLine} from={from} to={to} - setAbsoluteRangeDatePicker={setAbsoluteRangeDatePicker} + narrowDateRange={narrowDateRange} /> ))} @@ -194,7 +185,7 @@ export const KpiNetworkComponent = React.memo( fieldsMapping={fieldTitleChartMapping} from={from} to={to} - setAbsoluteRangeDatePicker={setAbsoluteRangeDatePicker} + narrowDateRange={narrowDateRange} /> diff --git a/x-pack/legacy/plugins/siem/public/components/stat_items/index.tsx b/x-pack/legacy/plugins/siem/public/components/stat_items/index.tsx index b658ba5855185..1bac959c7f688 100644 --- a/x-pack/legacy/plugins/siem/public/components/stat_items/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/stat_items/index.tsx @@ -19,15 +19,13 @@ import React, { useState, useEffect } from 'react'; import styled from 'styled-components'; import { BrushEndListener, ElementClickListener } from '@elastic/charts/dist/state/chart_state'; -import { ActionCreator } from 'typescript-fsa'; import { KpiHostsData, KpiNetworkData } from '../../graphql/types'; import { AreaChart } from '../charts/areachart'; import { BarChart } from '../charts/barchart'; -import { ChartConfigsData, ChartData, ChartSeriesConfigs } from '../charts/common'; +import { ChartConfigsData, ChartData, ChartSeriesConfigs, UpdateDateRange } from '../charts/common'; import { getEmptyTagValue } from '../empty_value'; import { InspectButton } from '../inspect'; -import { InputsModelId } from '../../store/inputs/constants'; const FlexItem = styled(EuiFlexItem)` min-width: 0; @@ -66,11 +64,7 @@ export interface StatItemsProps extends StatItems { from: number; id: string; to: number; - setAbsoluteRangeDatePicker: ActionCreator<{ - id: InputsModelId; - from: number; - to: number; - }>; + narrowDateRange: UpdateDateRange; } export const numberFormatter = (value: string | number): string => value.toLocaleString(); @@ -158,7 +152,7 @@ export const useKpiMatrixStatus = ( id: string, from: number, to: number, - setAbsoluteRangeDatePicker: ActionCreator<{ id: InputsModelId; from: number; to: number }> + narrowDateRange: UpdateDateRange ): StatItemsProps[] => { const [statItemsProps, setStatItemsProps] = useState(mappings as StatItemsProps[]); @@ -174,7 +168,7 @@ export const useKpiMatrixStatus = ( key: `kpi-summary-${stat.key}`, from, to, - setAbsoluteRangeDatePicker, + narrowDateRange, }; }) ); @@ -196,7 +190,7 @@ export const StatItemsComponent = React.memo( id, index, to, - setAbsoluteRangeDatePicker, + narrowDateRange, }) => { const [isHover, setIsHover] = useState(false); const isBarChartDataAvailable = @@ -268,11 +262,7 @@ export const StatItemsComponent = React.memo( areaChart={areaChart} configs={areachartConfigs({ xTickFormatter: niceTimeFormatter([from, to]), - onBrushEnd: (min: number, max: number) => { - setTimeout(() => { - setAbsoluteRangeDatePicker({ id: 'global', from: min, to: max }); - }, 500); - }, + onBrushEnd: narrowDateRange, })} /> diff --git a/x-pack/legacy/plugins/siem/public/pages/hosts/host_details.tsx b/x-pack/legacy/plugins/siem/public/pages/hosts/host_details.tsx index 96d8ff4da182f..271d490a003fd 100644 --- a/x-pack/legacy/plugins/siem/public/pages/hosts/host_details.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/hosts/host_details.tsx @@ -151,7 +151,11 @@ const HostDetailsComponent = pure( refetch={refetch} setQuery={setQuery} to={to} - setAbsoluteRangeDatePicker={setAbsoluteRangeDatePicker} + narrowDateRange={(min: number, max: number) => { + setTimeout(() => { + setAbsoluteRangeDatePicker({ id: 'global', from: min, to: max }); + }, 500); + }} /> )} diff --git a/x-pack/legacy/plugins/siem/public/pages/hosts/hosts.tsx b/x-pack/legacy/plugins/siem/public/pages/hosts/hosts.tsx index 2f7d85358cb47..7040fd3dc609d 100644 --- a/x-pack/legacy/plugins/siem/public/pages/hosts/hosts.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/hosts/hosts.tsx @@ -96,7 +96,11 @@ const HostsComponent = pure(({ filterQuery, setAbsoluteRang refetch={refetch} setQuery={setQuery} to={to} - setAbsoluteRangeDatePicker={setAbsoluteRangeDatePicker} + narrowDateRange={(min: number, max: number) => { + setTimeout(() => { + setAbsoluteRangeDatePicker({ id: 'global', from: min, to: max }); + }, 500); + }} /> )} @@ -121,25 +125,25 @@ const HostsComponent = pure(({ filterQuery, setAbsoluteRang inspect, refetch, }) => ( - - )} + + )} @@ -162,24 +166,24 @@ const HostsComponent = pure(({ filterQuery, setAbsoluteRang inspect, refetch, }) => ( - - )} + + )} @@ -202,24 +206,24 @@ const HostsComponent = pure(({ filterQuery, setAbsoluteRang inspect, refetch, }) => ( - - )} + + )} @@ -259,24 +263,24 @@ const HostsComponent = pure(({ filterQuery, setAbsoluteRang pageInfo, loadPage, }) => ( - - )} + + )} )} @@ -285,11 +289,11 @@ const HostsComponent = pure(({ filterQuery, setAbsoluteRang ) : ( - <> - - - - ) + <> + + + + ) } ); diff --git a/x-pack/legacy/plugins/siem/public/pages/network/network.tsx b/x-pack/legacy/plugins/siem/public/pages/network/network.tsx index e4532f7b3341d..a0d7f6c1a444e 100644 --- a/x-pack/legacy/plugins/siem/public/pages/network/network.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/network/network.tsx @@ -85,7 +85,11 @@ const NetworkComponent = pure( loading={loading} from={from} to={to} - setAbsoluteRangeDatePicker={setAbsoluteRangeDatePicker} + narrowDateRange={(min: number, max: number) => { + setTimeout(() => { + setAbsoluteRangeDatePicker({ id: 'global', from: min, to: max }); + }, 500); + }} /> )} From 79ff522e20451b1b41f7226d421b840a93d6039c Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Fri, 2 Aug 2019 00:28:40 +0800 Subject: [PATCH 3/4] fix type error --- .../kpi_network/__snapshots__/index.test.tsx.snap | 2 ++ .../components/page/network/kpi_network/index.test.tsx | 3 +++ .../public/components/page/network/kpi_network/mock.ts | 3 +++ .../stat_items/__snapshots__/index.test.tsx.snap | 9 ++++++--- .../siem/public/components/stat_items/index.test.tsx | 7 ++++++- 5 files changed, 20 insertions(+), 4 deletions(-) diff --git a/x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/__snapshots__/index.test.tsx.snap index 2895b3b41a3a8..912a383d09e43 100644 --- a/x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/__snapshots__/index.test.tsx.snap +++ b/x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/__snapshots__/index.test.tsx.snap @@ -35,6 +35,7 @@ exports[`KpiNetwork Component rendering it renders loading icons 1`] = ` from={1560578400000} id="kpiNetwork" loading={true} + narrowDateRange={[MockFunction]} to={1560837600000} /> `; @@ -74,6 +75,7 @@ exports[`KpiNetwork Component rendering it renders the default widget 1`] = ` from={1560578400000} id="kpiNetwork" loading={false} + narrowDateRange={[MockFunction]} to={1560837600000} /> `; diff --git a/x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/index.test.tsx index cfcbbfd682879..eb6204044bdb7 100644 --- a/x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/index.test.tsx @@ -19,6 +19,7 @@ describe('KpiNetwork Component', () => { const state: State = mockGlobalState; const from = new Date('2019-06-15T06:00:00.000Z').valueOf(); const to = new Date('2019-06-18T06:00:00.000Z').valueOf(); + const narrowDateRange = jest.fn(); let store = createStore(state, apolloClientObservable); @@ -36,6 +37,7 @@ describe('KpiNetwork Component', () => { id="kpiNetwork" loading={true} to={to} + narrowDateRange={narrowDateRange} /> ); @@ -52,6 +54,7 @@ describe('KpiNetwork Component', () => { id="kpiNetwork" loading={false} to={to} + narrowDateRange={narrowDateRange} /> ); diff --git a/x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/mock.ts b/x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/mock.ts index 69e14b4796fbe..d7f0686dc5b69 100644 --- a/x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/mock.ts +++ b/x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/mock.ts @@ -7,6 +7,8 @@ import { KpiNetworkData } from '../../../../graphql/types'; import { StatItems } from '../../../stat_items'; +export const mockNarrowDateRange = jest.fn(); + export const mockData: { KpiNetwork: KpiNetworkData } = { KpiNetwork: { networkEvents: 16, @@ -216,4 +218,5 @@ export const mockEnableChartsData = { id: 'statItem', index: 4, to: 1560837600000, + narrowDateRange: mockNarrowDateRange, }; diff --git a/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap index 995b643821d58..a26a654c80940 100644 --- a/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap +++ b/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap @@ -28,6 +28,7 @@ exports[`Stat Items Component disable charts it renders the default widget 1`] = id="statItems" index={0} key="mock-keys" + narrowDateRange={[MockFunction]} to={1560837600000} > @@ -271,6 +272,7 @@ exports[`Stat Items Component disable charts it renders the default widget 2`] = id="statItems" index={0} key="mock-keys" + narrowDateRange={[MockFunction]} to={1560837600000} > @@ -587,6 +589,7 @@ exports[`Stat Items Component rendering kpis with charts it renders the default id="statItems" index={0} key="mock-keys" + narrowDateRange={[MockFunction]} to={1560837600000} > @@ -1139,7 +1142,7 @@ exports[`Stat Items Component rendering kpis with charts it renders the default "yScaleType": "linear", }, "settings": Object { - "onBrushEnd": [Function], + "onBrushEnd": [MockFunction], }, } } @@ -1166,7 +1169,7 @@ exports[`Stat Items Component rendering kpis with charts it renders the default "yScaleType": "linear", }, "settings": Object { - "onBrushEnd": [Function], + "onBrushEnd": [MockFunction], }, } } @@ -1223,7 +1226,7 @@ exports[`Stat Items Component rendering kpis with charts it renders the default "yScaleType": "linear", }, "settings": Object { - "onBrushEnd": [Function], + "onBrushEnd": [MockFunction], }, } } diff --git a/x-pack/legacy/plugins/siem/public/components/stat_items/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/stat_items/index.test.tsx index e171e1d853c00..b6185d7f0d12d 100644 --- a/x-pack/legacy/plugins/siem/public/components/stat_items/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/stat_items/index.test.tsx @@ -25,6 +25,7 @@ import { mockData, mockEnableChartsData, mockNoChartMappings, + mockNarrowDateRange, } from '../page/network/kpi_network/mock'; import { mockGlobalState, apolloClientObservable } from '../../mock'; import { State, createStore } from '../../store'; @@ -50,6 +51,7 @@ describe('Stat Items Component', () => { index={0} key="mock-keys" to={to} + narrowDateRange={mockNarrowDateRange} /> ), @@ -67,6 +69,7 @@ describe('Stat Items Component', () => { index={0} key="mock-keys" to={to} + narrowDateRange={mockNarrowDateRange} /> ), @@ -151,6 +154,7 @@ describe('Stat Items Component', () => { index: 0, key: 'mock-keys', to, + narrowDateRange: mockNarrowDateRange, }; let wrapper: ReactWrapper; beforeAll(() => { @@ -229,7 +233,8 @@ describe('useKpiMatrixStatus', () => { data, 'statItem', from, - to + to, + mockNarrowDateRange ); return ( From 276ecf6bb06bda03683ccb168aefaa17f570a878 Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Sat, 3 Aug 2019 03:18:26 +0800 Subject: [PATCH 4/4] remove a not necessary export --- x-pack/legacy/plugins/siem/public/components/charts/common.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/legacy/plugins/siem/public/components/charts/common.tsx b/x-pack/legacy/plugins/siem/public/components/charts/common.tsx index 459365e91cb6c..05ca3d29dafa6 100644 --- a/x-pack/legacy/plugins/siem/public/components/charts/common.tsx +++ b/x-pack/legacy/plugins/siem/public/components/charts/common.tsx @@ -23,7 +23,7 @@ import moment from 'moment-timezone'; import { SettingSpecProps } from '@elastic/charts/dist/specs/settings'; const chartHeight = 74; -export const chartDefaultRotation: Rotation = 0; +const chartDefaultRotation: Rotation = 0; const chartDefaultRendering: Rendering = 'canvas'; const FlexGroup = styled(EuiFlexGroup)` height: 100%;