[Security Solution] [RAC] Add alerts count table to Security Solutions alerts page

x-pack/plugins/security_solution/common/detection_engine/schemas/request/query_signals_index_schema.ts

@@ -6,13 +6,13 @@
  */
 
 import * as t from 'io-ts';
-import { PositiveIntegerGreaterThanZero } from '@kbn/securitysolution-io-ts-types';
+import { PositiveInteger } from '@kbn/securitysolution-io-ts-types';
 
 export const querySignalsSchema = t.exact(
   t.partial({
     query: t.object,
     aggs: t.object,
-    size: PositiveIntegerGreaterThanZero,
+    size: PositiveInteger,
     track_total_hits: t.boolean,
     _source: t.array(t.string),
   })

x-pack/plugins/security_solution/cypress/integration/detection_alerts/alerts_details.spec.ts

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { CELL_TEXT, JSON_LINES, TABLE_ROWS } from '../../screens/alerts_details';
+import { ALERT_FLYOUT, CELL_TEXT, JSON_LINES, TABLE_ROWS } from '../../screens/alerts_details';
 
 import {
   expandFirstAlert,
@@ -41,12 +41,14 @@ describe('Alert details with unmapped fields', () => {
     openJsonView();
     scrollJsonViewToBottom();
 
-    cy.get(JSON_LINES).then((elements) => {
-      const length = elements.length;
-      cy.wrap(elements)
-        .eq(length - expectedUnmappedField.line)
-        .should('have.text', expectedUnmappedField.text);
-    });
+    cy.get(ALERT_FLYOUT)
+      .find(JSON_LINES)
+      .then((elements) => {
+        const length = elements.length;
+        cy.wrap(elements)
+          .eq(length - expectedUnmappedField.line)
+          .should('have.text', expectedUnmappedField.text);
+      });
   });
 
   it('Displays the unmapped field on the table', () => {
@@ -57,8 +59,8 @@ describe('Alert details with unmapped fields', () => {
     };
 
     openTable();
-
-    cy.get(TABLE_ROWS)
+    cy.get(ALERT_FLYOUT)
+      .find(TABLE_ROWS)
       .eq(expectedUnmmappedField.row)
       .within(() => {
         cy.get(CELL_TEXT).eq(2).should('have.text', expectedUnmmappedField.field);

x-pack/plugins/security_solution/cypress/screens/alerts_details.ts

@@ -5,6 +5,8 @@
  * 2.0.
  */
 
+export const ALERT_FLYOUT = '[data-test-subj="timeline:details-panel:flyout"]';
+
 export const CELL_TEXT = '.euiText';
 
 export const JSON_CONTENT = '[data-test-subj="jsonView"]';

x-pack/plugins/security_solution/public/common/components/header_section/index.tsx

@@ -49,6 +49,7 @@ export interface HeaderSectionProps extends HeaderProps {
   tooltip?: string;
   growLeftSplit?: boolean;
   inspectMultiple?: boolean;
+  hideSubtitle?: boolean;
 }
 
 const HeaderSectionComponent: React.FC<HeaderSectionProps> = ({
@@ -64,6 +65,7 @@ const HeaderSectionComponent: React.FC<HeaderSectionProps> = ({
   tooltip,
   growLeftSplit = true,
   inspectMultiple = false,
+  hideSubtitle = false,
 }) => (
   <Header data-test-subj="header-section" border={border} height={height}>
     <EuiFlexGroup alignItems="center">
@@ -82,7 +84,9 @@ const HeaderSectionComponent: React.FC<HeaderSectionProps> = ({
               </h2>
             </EuiTitle>
 
-            <Subtitle data-test-subj="header-section-subtitle" items={subtitle} />
+            {!hideSubtitle && (
+              <Subtitle data-test-subj="header-section-subtitle" items={subtitle} />
+            )}
           </EuiFlexItem>
 
           {id && (

x-pack/plugins/security_solution/public/common/components/top_n/index.tsx

@@ -26,6 +26,7 @@ import { combineQueries } from '../../../timelines/components/timeline/helpers';
 import { getOptions } from './helpers';
 import { TopN } from './top_n';
 import { TimelineId, TimelineTabs } from '../../../../common/types/timeline';
+import { AlertsStackByField } from '../../../detections/components/alerts_kpis/common/types';
 
 const EMPTY_FILTERS: Filter[] = [];
 const EMPTY_QUERY: Query = { query: '', language: 'kuery' };
@@ -153,7 +154,7 @@ const StatefulTopNComponent: React.FC<Props> = ({
       data-test-subj="top-n"
       defaultView={defaultView}
       deleteQuery={timelineId === TimelineId.active ? undefined : deleteQuery}
-      field={field}
+      field={field as AlertsStackByField}
       filters={timelineId === TimelineId.active ? EMPTY_FILTERS : globalFilters}
       from={timelineId === TimelineId.active ? activeTimelineFrom : from}
       indexPattern={indexPattern}

x-pack/plugins/security_solution/public/common/components/top_n/top_n.test.tsx

@@ -35,7 +35,7 @@ jest.mock('uuid', () => {
   };
 });
 
-const field = 'process.name';
+const field = 'host.name';
 const value = 'nice';
 const combinedQueries = {
   bool: {

x-pack/plugins/security_solution/public/common/components/top_n/top_n.tsx

@@ -22,6 +22,7 @@ import { TopNOption } from './helpers';
 import * as i18n from './translations';
 import { getIndicesSelector, IndicesSelector } from './selectors';
 import { State } from '../../store';
+import { AlertsStackByField } from '../../../detections/components/alerts_kpis/common/types';
 
 const TopNContainer = styled.div`
   width: 600px;
@@ -50,7 +51,7 @@ const TopNContent = styled.div`
 export interface Props extends Pick<GlobalTimeArgs, 'from' | 'to' | 'deleteQuery' | 'setQuery'> {
   combinedQueries?: string;
   defaultView: TimelineEventsType;
-  field: string;
+  field: AlertsStackByField;
   filters: Filter[];
   indexPattern: IIndexPattern;
   options: TopNOption[];
@@ -137,14 +138,11 @@ const TopNComponent: React.FC<Props> = ({
           <SignalsByCategory
             combinedQueries={combinedQueries}
             filters={filters}
-            from={from}
             headerChildren={headerChildren}
             onlyField={field}
             query={query}
             setAbsoluteRangeDatePickerTarget={setAbsoluteRangeDatePickerTarget}
-            setQuery={setQuery}
             timelineId={timelineId}
-            to={to}
           />
         )}
       </TopNContent>

x-pack/plugins/security_solution/public/detections/components/alerts_kpis/alerts_count_panel/alerts_count.test.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
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+
+import { AlertsCount } from './alerts_count';
+import { AlertSearchResponse } from '../../../containers/detection_engine/alerts/types';
+import { TestProviders } from '../../../../common/mock';
+import { DragDropContextWrapper } from '../../../../common/components/drag_and_drop/drag_drop_context_wrapper';
+import { mockBrowserFields } from '../../../../common/containers/source/mock';
+import { AlertsCountAggregation } from './types';
+
+jest.mock('../../../../common/lib/kibana');
+const mockDispatch = jest.fn();
+
+jest.mock('react-redux', () => {
+  const original = jest.requireActual('react-redux');
+  return {
+    ...original,
+    useDispatch: () => mockDispatch,
+  };
+});
+
+describe('AlertsCount', () => {
+  it('renders correctly', () => {
+    const wrapper = shallow(
+      <AlertsCount
+        data={{} as AlertSearchResponse<{}, AlertsCountAggregation>}
+        loading={false}
+        selectedStackByOption={'test_selected_field'}
+      />
+    );
+
+    expect(wrapper.find('[data-test-subj="alertsCountTable"]').exists()).toBeTruthy();
+  });
+
+  it('renders the given alert item', () => {
+    const alertFiedlKey = 'test_stack_by_test_key';
+    const alertFiedlCount = 999;
+    const alertData = {
+      took: 0,
+      timeout: false,
+      hits: {
+        hits: [],
+        sequences: [],
+        events: [],
+        total: {
+          relation: 'eq',
+          value: 0,
+        },
+      },
+      _shards: {
+        failed: 0,
+        skipped: 0,
+        successful: 1,
+        total: 1,
+      },
+      aggregations: {
+        alertsByGroupingCount: {
+          buckets: [
+            {
+              key: alertFiedlKey,
+              doc_count: alertFiedlCount,
+            },
+          ],
+        },
+        alertsByGrouping: { buckets: [] },
+      },
+    } as AlertSearchResponse<unknown, AlertsCountAggregation>;
+
+    const wrapper = mount(
+      <TestProviders>
+        <DragDropContextWrapper browserFields={mockBrowserFields}>
+          <AlertsCount
+            data={alertData}
+            loading={false}
+            selectedStackByOption={'test_selected_field'}
+          />
+        </DragDropContextWrapper>
+      </TestProviders>
+    );
+
+    expect(wrapper.text()).toContain(alertFiedlKey);
+    expect(wrapper.text()).toContain(alertFiedlCount);
+  });
+});