Skip to content

Commit

Permalink
[SIEM] Add chart interactions - update date picker after brush select…
Browse files Browse the repository at this point in the history
…ion on charts (#42440) (#42559)

* add click and brush events

* replace setAbsoluteRangeDatePicker

* fix type error

* remove a not necessary export
  • Loading branch information
angorayc authored Aug 3, 2019
1 parent 5b00284 commit ef4e54a
Show file tree
Hide file tree
Showing 15 changed files with 168 additions and 23 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import {
getTheme,
ChartSeriesConfigs,
browserTimezone,
chartDefaultSettings,
} from './common';
import { AutoSizer } from '../auto_sizer';

Expand Down Expand Up @@ -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);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
getTheme,
ChartSeriesConfigs,
browserTimezone,
chartDefaultSettings,
} from './common';
import { AutoSizer } from '../auto_sizer';

Expand All @@ -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);
Expand Down
16 changes: 15 additions & 1 deletion x-pack/legacy/plugins/siem/public/components/charts/common.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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;
Expand All @@ -54,6 +67,7 @@ export interface ChartSeriesConfigs {
xTickFormatter?: TickFormatter | undefined;
yTickFormatter?: TickFormatter | undefined;
};
settings?: Partial<SettingSpecProps>;
}

export interface ChartConfigsData {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
Expand All @@ -40,6 +55,7 @@ describe('kpiHostsComponent', () => {
id={ID}
loading={false}
to={to}
narrowDateRange={narrowDateRange}
/>
);
expect(toJson(wrapper)).toMatchSnapshot();
Expand All @@ -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(() => {
Expand All @@ -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);
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -21,6 +22,7 @@ interface GenericKpiHostProps {
id: string;
loading: boolean;
to: number;
narrowDateRange: UpdateDateRange;
}

interface KpiHostsProps extends GenericKpiHostProps {
Expand All @@ -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}>
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -36,6 +37,7 @@ describe('KpiNetwork Component', () => {
id="kpiNetwork"
loading={true}
to={to}
narrowDateRange={narrowDateRange}
/>
</ReduxStoreProvider>
);
Expand All @@ -52,6 +54,7 @@ describe('KpiNetwork Component', () => {
id="kpiNetwork"
loading={false}
to={to}
narrowDateRange={narrowDateRange}
/>
</ReduxStoreProvider>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -34,6 +35,7 @@ interface KpiNetworkProps {
id: string;
loading: boolean;
to: number;
narrowDateRange: UpdateDateRange;
}

export const fieldTitleChartMapping: Readonly<StatItems[]> = [
Expand Down Expand Up @@ -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>
Expand All @@ -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}>
Expand All @@ -162,6 +173,7 @@ export const KpiNetworkComponent = React.memo<KpiNetworkProps>(
fieldsMapping={mappingsPerLine}
from={from}
to={to}
narrowDateRange={narrowDateRange}
/>
</React.Fragment>
))}
Expand All @@ -173,6 +185,7 @@ export const KpiNetworkComponent = React.memo<KpiNetworkProps>(
fieldsMapping={fieldTitleChartMapping}
from={from}
to={to}
narrowDateRange={narrowDateRange}
/>
</EuiFlexItem>
</EuiFlexGroup>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -216,4 +218,5 @@ export const mockEnableChartsData = {
id: 'statItem',
index: 4,
to: 1560837600000,
narrowDateRange: mockNarrowDateRange,
};
Loading

0 comments on commit ef4e54a

Please sign in to comment.