[SIEM] Add chart interactions - update date picker after brush select…

…ion on charts (#42440) (#42559) * add click and brush events * replace setAbsoluteRangeDatePicker * fix type error * remove a not necessary export
elastic · Aug 3, 2019 · ef4e54a · ef4e54a
1 parent 5b00284
commit ef4e54a
Show file tree

Hide file tree

Showing 15 changed files with 168 additions and 23 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
@@ -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 ? (
     <div style={{ height: chartConfigs.height, width: chartConfigs.width, position: 'relative' }}>
       <Chart>
-        <Settings theme={getTheme()} />
+        <Settings {...settings} theme={getTheme()} />
         {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
@@ -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 ? (
     <Chart>
-      <Settings rotation={90} theme={getTheme()} />
+      <Settings {...settings} theme={getTheme()} />
       {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
@@ -17,14 +17,18 @@ 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;
+const chartDefaultRotation: Rotation = 0;
+const chartDefaultRendering: Rendering = 'canvas';
 const FlexGroup = styled(EuiFlexGroup)`
   height: 100%;
 `;
+export type UpdateDateRange = (min: number, max: number) => void;
 
 export const ChartHolder = () => (
   <FlexGroup justifyContent="center" alignItems="center">
@@ -38,6 +42,15 @@ export const ChartHolder = () => (
   </FlexGroup>
 );
 
+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 +67,7 @@ export interface ChartSeriesConfigs {
     xTickFormatter?: TickFormatter | undefined;
     yTickFormatter?: TickFormatter | undefined;
   };
+  settings?: Partial<SettingSpecProps>;
 }
 
 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
@@ -17,17 +17,32 @@ 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 narrowDateRange = () => {};
   describe('render', () => {
     test('it should render spinner if it is loading', () => {
       const wrapper: ShallowWrapper = shallow(
-        <KpiHostsComponent data={mockKpiHostsData} from={from} id={ID} loading={true} to={to} />
+        <KpiHostsComponent
+          data={mockKpiHostsData}
+          from={from}
+          id={ID}
+          loading={true}
+          to={to}
+          narrowDateRange={narrowDateRange}
+        />
       );
       expect(toJson(wrapper)).toMatchSnapshot();
     });
 
     test('it should render KpiHostsData', () => {
       const wrapper: ShallowWrapper = shallow(
-        <KpiHostsComponent data={mockKpiHostsData} from={from} id={ID} loading={false} to={to} />
+        <KpiHostsComponent
+          data={mockKpiHostsData}
+          from={from}
+          id={ID}
+          loading={false}
+          to={to}
+          narrowDateRange={narrowDateRange}
+        />
       );
       expect(toJson(wrapper)).toMatchSnapshot();
     });
@@ -40,6 +55,7 @@ describe('kpiHostsComponent', () => {
           id={ID}
           loading={false}
           to={to}
+          narrowDateRange={narrowDateRange}
         />
       );
       expect(toJson(wrapper)).toMatchSnapshot();
@@ -56,7 +72,16 @@ describe('kpiHostsComponent', () => {
     });
 
     beforeEach(() => {
-      shallow(<KpiHostsComponent data={data} from={from} id={ID} loading={false} to={to} />);
+      shallow(
+        <KpiHostsComponent
+          data={data}
+          from={from}
+          id={ID}
+          loading={false}
+          to={to}
+          narrowDateRange={narrowDateRange}
+        />
+      );
     });
 
     afterEach(() => {
@@ -68,7 +93,7 @@ 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, 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
@@ -13,6 +13,7 @@ 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 { UpdateDateRange } from '../../../charts/common';
 
 const kpiWidgetHeight = 247;
 
@@ -21,6 +22,7 @@ interface GenericKpiHostProps {
   id: string;
   loading: boolean;
   to: number;
+  narrowDateRange: UpdateDateRange;
 }
 
 interface KpiHostsProps extends GenericKpiHostProps {
@@ -43,10 +45,18 @@ export const KpiHostsComponent = ({
   loading,
   id,
   to,
+  narrowDateRange,
 }: 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,
+    narrowDateRange
+  );
   return loading ? (
     <FlexGroupSpinner justifyContent="center" alignItems="center">
       <EuiFlexItem grow={false}>

diff --git a/...plugins/siem/public/components/page/network/kpi_network/__snapshots__/index.test.tsx.snap b/...plugins/siem/public/components/page/network/kpi_network/__snapshots__/index.test.tsx.snap
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
@@ -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}
           />
         </ReduxStoreProvider>
       );
@@ -52,6 +54,7 @@ describe('KpiNetwork Component', () => {
             id="kpiNetwork"
             loading={false}
             to={to}
+            narrowDateRange={narrowDateRange}
           />
         </ReduxStoreProvider>
       );

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
@@ -20,6 +20,7 @@ import {
 import { KpiNetworkData } from '../../../../graphql/types';
 
 import * as i18n from './translations';
+import { UpdateDateRange } from '../../../charts/common';
 
 const kipsPerRow = 2;
 const kpiWidgetHeight = 228;
@@ -34,6 +35,7 @@ interface KpiNetworkProps {
   id: string;
   loading: boolean;
   to: number;
+  narrowDateRange: UpdateDateRange;
 }
 
 export const fieldTitleChartMapping: Readonly<StatItems[]> = [
@@ -124,14 +126,23 @@ export const KpiNetworkBaseComponent = ({
   id,
   from,
   to,
+  narrowDateRange,
 }: {
   fieldsMapping: Readonly<StatItems[]>;
   data: KpiNetworkData;
   id: string;
   from: number;
   to: number;
+  narrowDateRange: UpdateDateRange;
 }) => {
-  const statItemsProps: StatItemsProps[] = useKpiMatrixStatus(fieldsMapping, data, id, from, to);
+  const statItemsProps: StatItemsProps[] = useKpiMatrixStatus(
+    fieldsMapping,
+    data,
+    id,
+    from,
+    to,
+    narrowDateRange
+  );
 
   return (
     <EuiFlexGroup wrap>
@@ -143,7 +154,7 @@ export const KpiNetworkBaseComponent = ({
 };
 
 export const KpiNetworkComponent = React.memo<KpiNetworkProps>(
-  ({ data, from, id, loading, to }) => {
+  ({ data, from, id, loading, to, narrowDateRange }) => {
     return loading ? (
       <FlexGroup justifyContent="center" alignItems="center">
         <EuiFlexItem grow={false}>
@@ -162,6 +173,7 @@ export const KpiNetworkComponent = React.memo<KpiNetworkProps>(
                 fieldsMapping={mappingsPerLine}
                 from={from}
                 to={to}
+                narrowDateRange={narrowDateRange}
               />
             </React.Fragment>
           ))}
@@ -173,6 +185,7 @@ export const KpiNetworkComponent = React.memo<KpiNetworkProps>(
             fieldsMapping={fieldTitleChartMapping}
             from={from}
             to={to}
+            narrowDateRange={narrowDateRange}
           />
         </EuiFlexItem>
       </EuiFlexGroup>

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
@@ -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,
 };