[7.x] [SIEM] Adds Signals Histogram (#53742)

x-pack/legacy/plugins/siem/public/containers/detection_engine/signals/api.ts

@@ -42,7 +42,7 @@ export const fetchQuerySignals = async <Hit, Aggregations>({
       'content-type': 'application/json',
       'kbn-xsrf': 'true',
     },
-    body: query,
+    body: JSON.stringify(query),
     signal,
   });
   await throwIfNotOk(response);

x-pack/legacy/plugins/siem/public/containers/detection_engine/signals/types.ts

@@ -10,15 +10,16 @@ export interface BasicSignals {
   signal: AbortSignal;
 }
 export interface QuerySignals extends BasicSignals {
-  query: string;
+  query: object;
 }
 
 export interface SignalsResponse {
   took: number;
   timeout: boolean;
 }
 
-export interface SignalSearchResponse<Hit = {}, Aggregations = undefined> extends SignalsResponse {
+export interface SignalSearchResponse<Hit = {}, Aggregations = {} | undefined>
+  extends SignalsResponse {
   _shards: {
     total: number;
     successful: number;

x-pack/legacy/plugins/siem/public/containers/detection_engine/signals/use_query.tsx

@@ -4,20 +4,25 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { useEffect, useState } from 'react';
+import React, { SetStateAction, useEffect, useState } from 'react';
 
 import { fetchQuerySignals } from './api';
 import { SignalSearchResponse } from './types';
 
-type Return<Hit, Aggs> = [boolean, SignalSearchResponse<Hit, Aggs> | null];
+type Return<Hit, Aggs> = [
+  boolean,
+  SignalSearchResponse<Hit, Aggs> | null,
+  React.Dispatch<SetStateAction<object>>
+];
 
 /**
  * Hook for using to get a Signals from the Detection Engine API
  *
- * @param query convert a dsl into string
+ * @param initialQuery query dsl object
  *
  */
-export const useQuerySignals = <Hit, Aggs>(query: string): Return<Hit, Aggs> => {
+export const useQuerySignals = <Hit, Aggs>(initialQuery: object): Return<Hit, Aggs> => {
+  const [query, setQuery] = useState(initialQuery);
   const [signals, setSignals] = useState<SignalSearchResponse<Hit, Aggs> | null>(null);
   const [loading, setLoading] = useState(true);
 
@@ -53,5 +58,5 @@ export const useQuerySignals = <Hit, Aggs>(query: string): Return<Hit, Aggs> =>
     };
   }, [query]);
 
-  return [loading, signals];
+  return [loading, signals, setQuery];
 };

x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/config.ts

@@ -0,0 +1,21 @@
+/*
+ * 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 * as i18n from './translations';
+import { SignalsHistogramOption } from './types';
+
+export const signalsHistogramOptions: SignalsHistogramOption[] = [
+  { text: i18n.STACK_BY_RISK_SCORES, value: 'signal.rule.risk_score' },
+  { text: i18n.STACK_BY_SEVERITIES, value: 'signal.rule.severity' },
+  { text: i18n.STACK_BY_DESTINATION_IPS, value: 'destination.ip' },
+  { text: i18n.STACK_BY_ACTIONS, value: 'event.action' },
+  { text: i18n.STACK_BY_CATEGORIES, value: 'event.category' },
+  { text: i18n.STACK_BY_HOST_NAMES, value: 'host.name' },
+  { text: i18n.STACK_BY_RULE_TYPES, value: 'signal.rule.type' },
+  { text: i18n.STACK_BY_RULE_NAMES, value: 'signal.rule.name' },
+  { text: i18n.STACK_BY_SOURCE_IPS, value: 'source.ip' },
+  { text: i18n.STACK_BY_USERS, value: 'user.name' },
+];

x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/index.tsx

@@ -0,0 +1,112 @@
+/*
+ * 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 { Position } from '@elastic/charts';
+import { EuiButton, EuiPanel, EuiSelect } from '@elastic/eui';
+import numeral from '@elastic/numeral';
+import React, { memo, useCallback, useMemo, useState } from 'react';
+
+import { HeaderSection } from '../../../../components/header_section';
+import { SignalsHistogram } from './signals_histogram';
+
+import * as i18n from './translations';
+import { Query } from '../../../../../../../../../src/plugins/data/common/query';
+import { esFilters } from '../../../../../../../../../src/plugins/data/common/es_query';
+import { SignalsHistogramOption, SignalsTotal } from './types';
+import { signalsHistogramOptions } from './config';
+import { getDetectionEngineUrl } from '../../../../components/link_to';
+import { DEFAULT_NUMBER_FORMAT } from '../../../../../common/constants';
+import { useUiSetting$ } from '../../../../lib/kibana';
+
+const defaultTotalSignalsObj: SignalsTotal = {
+  value: 0,
+  relation: 'eq',
+};
+
+interface SignalsHistogramPanelProps {
+  defaultStackByOption?: SignalsHistogramOption;
+  filters?: esFilters.Filter[];
+  from: number;
+  query?: Query;
+  legendPosition?: Position;
+  loadingInitial?: boolean;
+  showLinkToSignals?: boolean;
+  showTotalSignalsCount?: boolean;
+  stackByOptions?: SignalsHistogramOption[];
+  title?: string;
+  to: number;
+  updateDateRange: (min: number, max: number) => void;
+}
+
+export const SignalsHistogramPanel = memo<SignalsHistogramPanelProps>(
+  ({
+    defaultStackByOption = signalsHistogramOptions[0],
+    filters,
+    query,
+    from,
+    legendPosition = 'bottom',
+    loadingInitial = false,
+    showLinkToSignals = false,
+    showTotalSignalsCount = false,
+    stackByOptions,
+    to,
+    title = i18n.HISTOGRAM_HEADER,
+    updateDateRange,
+  }) => {
+    const [defaultNumberFormat] = useUiSetting$<string>(DEFAULT_NUMBER_FORMAT);
+    const [totalSignalsObj, setTotalSignalsObj] = useState<SignalsTotal>(defaultTotalSignalsObj);
+    const [selectedStackByOption, setSelectedStackByOption] = useState<SignalsHistogramOption>(
+      defaultStackByOption
+    );
+
+    const totalSignals = useMemo(
+      () =>
+        i18n.SHOWING_SIGNALS(
+          numeral(totalSignalsObj.value).format(defaultNumberFormat),
+          totalSignalsObj.value,
+          totalSignalsObj.relation === 'gte' ? '>' : totalSignalsObj.relation === 'lte' ? '<' : ''
+        ),
+      [totalSignalsObj]
+    );
+
+    const setSelectedOptionCallback = useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
+      setSelectedStackByOption(
+        stackByOptions?.find(co => co.value === event.target.value) ?? defaultStackByOption
+      );
+    }, []);
+
+    return (
+      <EuiPanel>
+        <HeaderSection title={title} subtitle={showTotalSignalsCount && totalSignals}>
+          {stackByOptions && (
+            <EuiSelect
+              onChange={setSelectedOptionCallback}
+              options={stackByOptions}
+              prepend={i18n.STACK_BY_LABEL}
+              value={selectedStackByOption.value}
+            />
+          )}
+          {showLinkToSignals && (
+            <EuiButton href={getDetectionEngineUrl()}>{i18n.VIEW_SIGNALS}</EuiButton>
+          )}
+        </HeaderSection>
+
+        <SignalsHistogram
+          filters={filters}
+          from={from}
+          legendPosition={legendPosition}
+          loadingInitial={loadingInitial}
+          query={query}
+          to={to}
+          setTotalSignalsCount={setTotalSignalsObj}
+          stackByField={selectedStackByOption.value}
+          updateDateRange={updateDateRange}
+        />
+      </EuiPanel>
+    );
+  }
+);
+
+SignalsHistogramPanel.displayName = 'SignalsHistogramPanel';