[SIEM] Histogram enhancement

x-pack/legacy/plugins/siem/public/components/alerts_viewer/index.tsx

@@ -3,57 +3,73 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-
 import { noop } from 'lodash/fp';
-import React from 'react';
-
+import React, { useEffect, useCallback } from 'react';
 import { EuiSpacer } from '@elastic/eui';
-import { manageQuery } from '../page/manage_query';
-import { AlertsOverTimeHistogram } from '../page/hosts/alerts_over_time';
+
 import { AlertsComponentsQueryProps } from './types';
-import { AlertsOverTimeQuery } from '../../containers/alerts/alerts_over_time';
-import { hostsModel } from '../../store/model';
 import { AlertsTable } from './alerts_table';
+import * as i18n from './translations';
+import { MatrixHistogramOption } from '../matrix_histogram/types';
+import { MatrixHistogramContainer } from '../../containers/matrix_histogram';
+import { MatrixHistogramGqlQuery } from '../../containers/matrix_histogram/index.gql_query';
+const ID = 'alertsOverTimeQuery';
+const alertsStackByOptions: MatrixHistogramOption[] = [
+  {
+    text: i18n.ALERTS_STACK_BY_MODULE,
+    value: 'event.module',
+  },
+];
+const dataKey = 'AlertsHistogram';
 
-const AlertsOverTimeManage = manageQuery(AlertsOverTimeHistogram);
 export const AlertsView = ({
-  defaultFilters,
   deleteQuery,
   endDate,
   filterQuery,
   pageFilters,
-  skip,
   setQuery,
+  skip,
   startDate,
   type,
   updateDateRange = noop,
-}: AlertsComponentsQueryProps) => (
-  <>
-    <AlertsOverTimeQuery
-      endDate={endDate}
-      filterQuery={filterQuery}
-      sourceId="default"
-      startDate={startDate}
-      type={hostsModel.HostsType.page}
-    >
-      {({ alertsOverTime, loading, id, inspect, refetch, totalCount }) => (
-        <AlertsOverTimeManage
-          data={alertsOverTime!}
-          endDate={endDate}
-          id={id}
-          inspect={inspect}
-          loading={loading}
-          refetch={refetch}
-          setQuery={setQuery}
-          startDate={startDate}
-          totalCount={totalCount}
-          updateDateRange={updateDateRange}
-        />
-      )}
-    </AlertsOverTimeQuery>
-    <EuiSpacer size="l" />
-    <AlertsTable endDate={endDate} startDate={startDate} pageFilters={pageFilters} />
-  </>
-);
+}: AlertsComponentsQueryProps) => {
+  useEffect(() => {
+    return () => {
+      if (deleteQuery) {
+        deleteQuery({ id: ID });
+      }
+    };
+  }, []);
+
+  const getSubtitle = useCallback(
+    (totalCount: number) => `${i18n.SHOWING}: ${totalCount} ${i18n.UNIT(totalCount)}`,
+    []
+  );
 
+  return (
+    <>
+      <MatrixHistogramContainer
+        alertsType={true}
+        dataKey={dataKey}
+        deleteQuery={deleteQuery}
+        defaultStackByOption={alertsStackByOptions[0]}
+        endDate={endDate}
+        filterQuery={filterQuery}
+        id={ID}
+        query={MatrixHistogramGqlQuery}
+        setQuery={setQuery}
+        skip={skip}
+        sourceId="default"
+        stackByOptions={alertsStackByOptions}
+        startDate={startDate}
+        subtitle={getSubtitle}
+        title={`${i18n.ALERTS_DOCUMENT_TYPE}`}
+        type={type}
+        updateDateRange={updateDateRange}
+      />
+      <EuiSpacer size="l" />
+      <AlertsTable endDate={endDate} startDate={startDate} pageFilters={pageFilters} />
+    </>
+  );
+};
 AlertsView.displayName = 'AlertsView';

x-pack/legacy/plugins/siem/public/components/alerts_viewer/translations.ts

@@ -17,3 +17,20 @@ export const TOTAL_COUNT_OF_ALERTS = i18n.translate('xpack.siem.hosts.totalCount
 export const ALERTS_TABLE_TITLE = i18n.translate('xpack.siem.hosts.alertsDocumentType', {
   defaultMessage: 'Alerts',
 });
+
+export const ALERTS_STACK_BY_MODULE = i18n.translate(
+  'xpack.siem.histogram.alertsStackByOptions.eventActions',
+  {
+    defaultMessage: 'modules',
+  }
+);
+
+export const SHOWING = i18n.translate('xpack.siem.histogram.showing', {
+  defaultMessage: 'Showing',
+});
+
+export const UNIT = (totalCount: number) =>
+  i18n.translate('xpack.siem.histogram.unit', {
+    values: { totalCount },
+    defaultMessage: `{totalCount, plural, =1 {alert} other {alerts}}`,
+  });

x-pack/legacy/plugins/siem/public/components/alerts_viewer/types.ts

@@ -7,6 +7,7 @@
 import { esFilters } from '../../../../../../../src/plugins/data/common';
 import { HostsComponentsQueryProps } from '../../pages/hosts/navigation/types';
 import { NetworkComponentQueryProps } from '../../pages/network/navigation/types';
+import { MatrixHistogramOption } from '../matrix_histogram/types';
 
 type CommonQueryProps = HostsComponentsQueryProps | NetworkComponentQueryProps;
 export interface AlertsComponentsQueryProps
@@ -22,5 +23,7 @@ export interface AlertsComponentsQueryProps
     | 'updateDateRange'
   > {
   pageFilters: esFilters.Filter[];
+  stackByOptions?: MatrixHistogramOption[];
   defaultFilters?: esFilters.Filter[];
+  defaultStackByOption?: MatrixHistogramOption;
 }

x-pack/legacy/plugins/siem/public/components/charts/common.tsx

@@ -14,6 +14,7 @@ import {
   ScaleType,
   SettingsSpecProps,
   TickFormatter,
+  Position,
 } from '@elastic/charts';
 import styled from 'styled-components';
 import { useUiSetting } from '../../lib/kibana';
@@ -35,6 +36,7 @@ export interface ChartData {
 
 export interface ChartSeriesConfigs {
   customHeight?: number;
+  customSeriesColors?: string[];
   series?: {
     xScaleType?: ScaleType | undefined;
     yScaleType?: ScaleType | undefined;
@@ -105,6 +107,7 @@ export const chartDefaultSettings = {
   showLegend: false,
   showLegendDisplayValue: false,
   debug: false,
+  legendPosition: Position.Bottom,
 };
 
 export const getChartHeight = (customHeight?: number, autoSizerHeight?: number): string => {

x-pack/legacy/plugins/siem/public/components/matrix_histogram/index.test.tsx

@@ -10,6 +10,7 @@ import { shallow } from 'enzyme';
 import React from 'react';
 
 import { MatrixHistogram } from '.';
+import { MatrixHistogramGqlQuery as mockQuery } from '../../containers/matrix_histogram/index.gql_query';
 
 jest.mock('../../lib/kibana');
 
@@ -31,18 +32,26 @@ jest.mock('../charts/barchart', () => {
   };
 });
 
-describe('Load More Events Table Component', () => {
+describe('Matrix Histogram Component', () => {
   const mockMatrixOverTimeHistogramProps = {
-    data: [],
     dataKey: 'mockDataKey',
+    defaultIndex: ['defaultIndex'],
+    defaultStackByOption: { text: 'text', value: 'value' },
     endDate: new Date('2019-07-18T20:00:00.000Z').valueOf(),
     id: 'mockId',
-    loading: true,
-    updateDateRange: () => {},
+    isInspected: false,
+    isPtrIncluded: false,
+    query: mockQuery,
+    setQuery: jest.fn(),
+    skip: false,
+    sourceId: 'default',
+    stackByField: 'mockStackByField',
+    stackByOptions: [{ text: 'text', value: 'value' }],
     startDate: new Date('2019-07-18T19:00: 00.000Z').valueOf(),
     subtitle: 'mockSubtitle',
     totalCount: -1,
     title: 'mockTitle',
+    updateDateRange: jest.fn(),
   };
   describe('rendering', () => {
     test('it renders EuiLoadingContent on initialLoad', () => {