[SIEM] Alerts view - adding alerts table

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

@@ -0,0 +1,91 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+
+import { esFilters } from 'src/plugins/data/common/es_query';
+import { StatefulEventsViewer } from '../events_viewer';
+import * as i18n from './translations';
+import { alertsDefaultModel } from './default_headers';
+import { AlertsComponentPageFilterDsl } from './types';
+
+export interface OwnProps {
+  end: number;
+  id: string;
+  start: number;
+}
+
+const ALERTS_TABLE_ID = 'timeline-alerts-table';
+const filter: esFilters.Filter[] = [
+  {
+    meta: {
+      alias: null,
+      negate: false,
+      disabled: false,
+      type: 'phrase',
+      key: 'event.kind',
+      params: {
+        query: 'alert',
+      },
+    },
+    query: {
+      bool: {
+        filter: [
+          {
+            bool: {
+              should: [
+                {
+                  match: {
+                    'event.kind': 'alert',
+                  },
+                },
+              ],
+              minimum_should_match: 1,
+            },
+          },
+        ],
+      },
+    },
+  },
+];
+
+export const AlertsTable = React.memo(
+  ({
+    endDate,
+    startDate,
+    pageFilters,
+  }: {
+    endDate: number;
+    startDate: number;
+    pageFilters: AlertsComponentPageFilterDsl;
+  }) => {
+    return (
+      <StatefulEventsViewer
+        pageFilters={[
+          {
+            meta: { ...filter[0].meta },
+            query: {
+              bool: {
+                filter: [...filter[0].query.bool.filter, ...pageFilters],
+              },
+            },
+          },
+        ]}
+        defaultModel={alertsDefaultModel}
+        end={endDate}
+        id={ALERTS_TABLE_ID}
+        start={startDate}
+        timelineTypeContext={{
+          documentType: i18n.ALERTS_DOCUMENT_TYPE,
+          footerText: i18n.TOTAL_COUNT_OF_ALERTS,
+          showCheckboxes: false,
+          showRowRenderers: false,
+          title: i18n.ALERTS_TABLE_TITLE,
+        }}
+      />
+    );
+  }
+);

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

@@ -0,0 +1,68 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { ColumnHeader } from '../timeline/body/column_headers/column_header';
+import { defaultColumnHeaderType } from '../timeline/body/column_headers/default_headers';
+import { DEFAULT_COLUMN_MIN_WIDTH, DEFAULT_DATE_COLUMN_MIN_WIDTH } from '../timeline/body/helpers';
+import { timelineDefaults, SubsetTimelineModel } from '../../store/timeline/model';
+
+export const alertsHeaders: ColumnHeader[] = [
+  {
+    columnHeaderType: defaultColumnHeaderType,
+    id: '@timestamp',
+    width: DEFAULT_DATE_COLUMN_MIN_WIDTH,
+  },
+  {
+    columnHeaderType: defaultColumnHeaderType,
+    id: 'event.module',
+    width: DEFAULT_COLUMN_MIN_WIDTH,
+  },
+  {
+    columnHeaderType: defaultColumnHeaderType,
+    id: 'event.dataset',
+    width: DEFAULT_COLUMN_MIN_WIDTH,
+  },
+  {
+    columnHeaderType: defaultColumnHeaderType,
+    id: 'event.category',
+    width: DEFAULT_COLUMN_MIN_WIDTH,
+  },
+  {
+    columnHeaderType: defaultColumnHeaderType,
+    id: 'event.severity',
+    width: DEFAULT_COLUMN_MIN_WIDTH,
+  },
+  {
+    columnHeaderType: defaultColumnHeaderType,
+    id: 'observer.name',
+    width: DEFAULT_COLUMN_MIN_WIDTH,
+  },
+  {
+    columnHeaderType: defaultColumnHeaderType,
+    id: 'host.name',
+    width: DEFAULT_COLUMN_MIN_WIDTH,
+  },
+  {
+    columnHeaderType: defaultColumnHeaderType,
+    id: 'message',
+    width: DEFAULT_COLUMN_MIN_WIDTH,
+  },
+  {
+    columnHeaderType: defaultColumnHeaderType,
+    id: 'agent.id',
+    width: DEFAULT_COLUMN_MIN_WIDTH,
+  },
+  {
+    columnHeaderType: defaultColumnHeaderType,
+    id: 'agent.type',
+    width: DEFAULT_COLUMN_MIN_WIDTH,
+  },
+];
+
+export const alertsDefaultModel: SubsetTimelineModel = {
+  ...timelineDefaults,
+  columns: alertsHeaders,
+};

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

@@ -0,0 +1,57 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+
+import { EuiSpacer } from '@elastic/eui';
+import { manageQuery } from '../page/manage_query';
+import { AlertsOverTimeHistogram } from '../page/hosts/alerts_over_time';
+import { AlertsComponentsQueryProps, AlertsComponentPageFilterDsl } from './types';
+import { AlertsOverTimeQuery } from '../../containers/alerts/alerts_over_time';
+import { hostsModel } from '../../store/model';
+import { AlertsTable } from './alerts_table';
+
+const AlertsOverTimeManage = manageQuery(AlertsOverTimeHistogram);
+export const AlertsView = ({
+  deleteQuery,
+  endDate,
+  filterQuery,
+  pageFilters,
+  skip,
+  setQuery,
+  startDate,
+  type,
+  updateDateRange = () => {},
+}: AlertsComponentsQueryProps & { pageFilters: AlertsComponentPageFilterDsl }) => (
+  <>
+    <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} />
+  </>
+);
+
+AlertsView.displayName = 'AlertsView';

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

@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const ALERTS_DOCUMENT_TYPE = i18n.translate('xpack.siem.hosts.alertsDocumentType', {
+  defaultMessage: 'Alerts',
+});
+
+export const TOTAL_COUNT_OF_ALERTS = i18n.translate('xpack.siem.hosts.totalCountOfAlerts', {
+  defaultMessage: 'alerts match the search criteria',
+});
+
+export const ALERTS_TABLE_TITLE = i18n.translate('xpack.siem.hosts.alertsDocumentType', {
+  defaultMessage: 'Alerts',
+});

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

@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { HostsComponentsQueryProps } from '../../pages/hosts/navigation/types';
+import { NetworkComponentQueryProps } from '../../pages/network/navigation/types';
+
+export interface PageFilterDsl {
+  exists: {
+    field: string;
+  };
+}
+
+export type AlertsComponentPageFilterDsl = Array<{
+  bool: {
+    should: PageFilterDsl[];
+    minimum_should_match: number;
+  };
+}>;
+
+export type AlertsComponentsQueryProps = HostsComponentsQueryProps | NetworkComponentQueryProps;

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

@@ -32,6 +32,7 @@ export interface OwnProps {
   id: string;
   start: number;
   headerFilterGroup?: React.ReactNode;
+  pageFilters?: esFilters.Filter[];
   timelineTypeContext?: TimelineTypeContextProps;
   utilityBar?: (totalCount: number) => React.ReactNode;
 }
@@ -83,7 +84,7 @@ const StatefulEventsViewerComponent = React.memo<Props>(
     createTimeline,
     columns,
     dataProviders,
-    defaultFilters = [],
+    pageFilters = [],
     defaultModel,
     defaultIndices,
     deleteEventQuery,
@@ -159,7 +160,7 @@ const StatefulEventsViewerComponent = React.memo<Props>(
           id={id}
           dataProviders={dataProviders!}
           end={end}
-          filters={[...filters, ...defaultFilters]}
+          filters={[...filters, ...pageFilters]}
           headerFilterGroup={headerFilterGroup}
           indexPattern={indexPatterns ?? { fields: [], title: '' }}
           isLive={isLive}
@@ -227,7 +228,7 @@ export const StatefulEventsViewer = connect(makeMapStateToProps, {
   createTimeline: timelineActions.createTimeline,
   deleteEventQuery: inputsActions.deleteOneQuery,
   updateItemsPerPage: timelineActions.updateItemsPerPage,
-  updateSort: timelineActions.updateSort,
   removeColumn: timelineActions.removeColumn,
   upsertColumn: timelineActions.upsertColumn,
+  setSearchBarFilter: inputsActions.setSearchBarFilter,
 })(StatefulEventsViewerComponent);

x-pack/legacy/plugins/siem/public/components/navigation/breadcrumbs/index.test.ts

@@ -9,8 +9,9 @@ import { encodeIpv6 } from '../../../lib/helpers';
 
 import { getBreadcrumbsForRoute, setBreadcrumbs } from '.';
 import { HostsTableType } from '../../../store/hosts/model';
-import { RouteSpyState } from '../../../utils/route/types';
+import { RouteSpyState, SiemRouteType } from '../../../utils/route/types';
 import { TabNavigationProps } from '../tab_navigation/types';
+import { NetworkRouteType } from '../../../pages/network/navigation/types';
 
 jest.mock('ui/chrome', () => ({
   getBasePath: () => {
@@ -30,6 +31,17 @@ jest.mock('../../search_bar', () => ({
   },
 }));
 
+const mockDefaultTab = (pageName: string): SiemRouteType | undefined => {
+  switch (pageName) {
+    case 'hosts':
+      return HostsTableType.authentications;
+    case 'network':
+      return NetworkRouteType.flows;
+    default:
+      return undefined;
+  }
+};
+
 const getMockObject = (
   pageName: string,
   pathName: string,
@@ -69,7 +81,7 @@ const getMockObject = (
   pageName,
   pathName,
   search: '',
-  tabName: HostsTableType.authentications,
+  tabName: mockDefaultTab(pageName) as HostsTableType,
   query: { query: '', language: 'kuery' },
   filters: [],
   timeline: {
@@ -136,6 +148,10 @@ describe('Navigation Breadcrumbs', () => {
           href:
             '#/link-to/network?timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))',
         },
+        {
+          text: 'Flows',
+          href: '',
+        },
       ]);
     });
 
@@ -176,7 +192,11 @@ describe('Navigation Breadcrumbs', () => {
           href:
             '#/link-to/network?timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))',
         },
-        { text: '192.0.2.255', href: '' },
+        {
+          text: ipv4,
+          href: `#/link-to/network/ip/${ipv4}?timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))`,
+        },
+        { text: 'Flows', href: '' },
       ]);
     });
 
@@ -189,7 +209,11 @@ describe('Navigation Breadcrumbs', () => {
           href:
             '#/link-to/network?timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))',
         },
-        { text: '2001:db8:ffff:ffff:ffff:ffff:ffff:ffff', href: '' },
+        {
+          text: ipv6,
+          href: `#/link-to/network/ip/${ipv6Encoded}?timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))`,
+        },
+        { text: 'Flows', href: '' },
       ]);
     });
   });