Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[SIEM] Add chart interactions - update date picker after brush selection on charts #42440

Merged
merged 4 commits into from
Aug 3, 2019
Merged

[SIEM] Add chart interactions - update date picker after brush selection on charts #42440

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
962b167
add click and brush events
angorayc Jul 31, 2019
b2beb83
replace setAbsoluteRangeDatePicker
angorayc Aug 1, 2019
79ff522
fix type error
angorayc Aug 1, 2019
276ecf6
remove a not necessary export
angorayc Aug 2, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions x-pack/legacy/plugins/siem/public/components/charts/areachart.tsx
View file
Open in desktop
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
8 changes: 6 additions & 2 deletions x-pack/legacy/plugins/siem/public/components/charts/barchart.tsx
View file
Open in desktop
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
View file
Open in desktop
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;
export const chartDefaultRotation: Rotation = 0;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this need to be exported? I don't see any usages outside this file currently.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right, let me remove that, Thanks @spong ! You've got eagle eyes!
eagle eyes

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
33 changes: 29 additions & 4 deletions x-pack/legacy/plugins/siem/public/components/page/hosts/kpi_hosts/index.test.tsx
View file
Open in desktop
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);
});
});
});
12 changes: 11 additions & 1 deletion x-pack/legacy/plugins/siem/public/components/page/hosts/kpi_hosts/index.tsx
View file
Open in desktop
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
2 changes: 2 additions & 0 deletions ...plugins/siem/public/components/page/network/kpi_network/__snapshots__/index.test.tsx.snap
View file
Open in desktop

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

3 changes: 3 additions & 0 deletions x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/index.test.tsx
View file
Open in desktop
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
17 changes: 15 additions & 2 deletions x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/index.tsx
View file
Open in desktop
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
3 changes: 3 additions & 0 deletions x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/mock.ts
View file
Open in desktop
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