refactored code to use existing matrix histogram hook and component for custom queries

Author: yctercero

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

@@ -34,6 +34,7 @@ export type MatrixHistogramComponentProps = MatrixHistogramProps &
     defaultStackByOption: MatrixHistogramOption;
     errorMessage: string;
     headerChildren?: React.ReactNode;
+    footerChildren?: React.ReactNode;
     hideHistogramIfEmpty?: boolean;
     histogramType: MatrixHistogramType;
     id: string;
@@ -47,6 +48,7 @@ export type MatrixHistogramComponentProps = MatrixHistogramProps &
     subtitle?: string | GetSubTitle;
     timelineId?: string;
     title: string | GetTitle;
+    yTitle?: string | undefined;
   };
 
 const DEFAULT_PANEL_HEIGHT = 300;
@@ -68,6 +70,7 @@ export const MatrixHistogramComponent: React.FC<MatrixHistogramComponentProps> =
   errorMessage,
   filterQuery,
   headerChildren,
+  footerChildren,
   histogramType,
   hideHistogramIfEmpty = false,
   id,
@@ -86,6 +89,7 @@ export const MatrixHistogramComponent: React.FC<MatrixHistogramComponentProps> =
   title,
   titleSize,
   yTickFormatter,
+  yTitle,
 }) => {
   const dispatch = useDispatch();
   const handleBrushEnd = useCallback(
@@ -114,8 +118,18 @@ export const MatrixHistogramComponent: React.FC<MatrixHistogramComponentProps> =
         onBrushEnd: handleBrushEnd,
         yTickFormatter,
         showLegend,
+        yTitle,
       }),
-    [chartHeight, startDate, legendPosition, endDate, handleBrushEnd, yTickFormatter, showLegend]
+    [
+      chartHeight,
+      startDate,
+      legendPosition,
+      endDate,
+      handleBrushEnd,
+      yTickFormatter,
+      showLegend,
+      yTitle,
+    ]
   );
   const [isInitialLoading, setIsInitialLoading] = useState(true);
   const [selectedStackByOption, setSelectedStackByOption] = useState<MatrixHistogramOption>(
@@ -229,6 +243,11 @@ export const MatrixHistogramComponent: React.FC<MatrixHistogramComponentProps> =
               timelineId={timelineId}
             />
           )}
+          {footerChildren != null && (
+            <EuiFlexGroup gutterSize="none" direction="row">
+              {footerChildren}
+            </EuiFlexGroup>
+          )}
         </HistogramPanel>
       </InspectButtonContainer>
       {showSpacer && <EuiSpacer data-test-subj="spacer" size="l" />}

x-pack/plugins/security_solution/public/common/components/matrix_histogram/types.ts

@@ -105,6 +105,7 @@ export interface BarchartConfigs {
     yTickFormatter: TickFormatter;
     tickSize: number;
   };
+  yAxisTitle: string | undefined;
   settings: {
     legendPosition: Position;
     onBrushEnd: UpdateDateRange;

x-pack/plugins/security_solution/public/common/components/matrix_histogram/utils.ts

@@ -19,6 +19,7 @@ interface GetBarchartConfigsProps {
   onBrushEnd: UpdateDateRange;
   yTickFormatter?: (value: number) => string;
   showLegend?: boolean;
+  yTitle?: string | undefined;
 }
 
 export const DEFAULT_CHART_HEIGHT = 174;
@@ -32,6 +33,7 @@ export const getBarchartConfigs = ({
   onBrushEnd,
   yTickFormatter,
   showLegend,
+  yTitle,
 }: GetBarchartConfigsProps): BarchartConfigs => ({
   series: {
     xScaleType: ScaleType.Time,
@@ -43,6 +45,7 @@ export const getBarchartConfigs = ({
     yTickFormatter: yTickFormatter != null ? yTickFormatter : DEFAULT_Y_TICK_FORMATTER,
     tickSize: 8,
   },
+  yAxisTitle: yTitle,
   settings: {
     legendPosition: legendPosition ?? Position.Right,
     onBrushEnd,

x-pack/plugins/security_solution/public/common/containers/matrix_histogram/index.ts

@@ -5,7 +5,7 @@
  */
 
 import deepEqual from 'fast-deep-equal';
-import { noop } from 'lodash/fp';
+import { getOr, noop } from 'lodash/fp';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { MatrixHistogramQueryProps } from '../../components/matrix_histogram/types';
@@ -44,7 +44,15 @@ export const useMatrixHistogram = ({
   indexNames,
   stackByField,
   startDate,
-}: MatrixHistogramQueryProps): [boolean, UseMatrixHistogramArgs] => {
+  threshold,
+}: MatrixHistogramQueryProps): [
+  boolean,
+  UseMatrixHistogramArgs,
+  Array<{
+    key: string;
+    doc_count: number;
+  }>
+] => {
   const { data, notifications } = useKibana().services;
   const refetch = useRef<inputsModel.Refetch>(noop);
   const abortCtrl = useRef(new AbortController());
@@ -63,6 +71,7 @@ export const useMatrixHistogram = ({
       to: endDate,
     },
     stackByField,
+    threshold,
   });
 
   const [matrixHistogramResponse, setMatrixHistogramResponse] = useState<UseMatrixHistogramArgs>({
@@ -74,6 +83,12 @@ export const useMatrixHistogram = ({
     refetch: refetch.current,
     totalCount: -1,
   });
+  const [matrixHistogramBuckets, setMatrixHistogramBuckets] = useState<
+    Array<{
+      key: string;
+      doc_count: number;
+    }>
+  >([]);
 
   const hostsSearch = useCallback(
     (request: MatrixHistogramRequestOptions) => {
@@ -91,6 +106,10 @@ export const useMatrixHistogram = ({
             next: (response) => {
               if (isCompleteResponse(response)) {
                 if (!didCancel) {
+                  const histogramBuckets: Array<{
+                    key: string;
+                    doc_count: number;
+                  }> = getOr([], 'rawResponse.aggregations.eventActionGroup.buckets', response);
                   setLoading(false);
                   setMatrixHistogramResponse((prevResponse) => ({
                     ...prevResponse,
@@ -99,6 +118,7 @@ export const useMatrixHistogram = ({
                     refetch: refetch.current,
                     totalCount: response.totalCount,
                   }));
+                  setMatrixHistogramBuckets(histogramBuckets);
                 }
                 searchSubscription$.unsubscribe();
               } else if (isErrorResponse(response)) {
@@ -144,17 +164,18 @@ export const useMatrixHistogram = ({
           to: endDate,
         },
         stackByField,
+        threshold,
       };
       if (!deepEqual(prevRequest, myRequest)) {
         return myRequest;
       }
       return prevRequest;
     });
-  }, [indexNames, endDate, filterQuery, startDate, stackByField, histogramType]);
+  }, [indexNames, endDate, filterQuery, startDate, stackByField, histogramType, threshold]);
 
   useEffect(() => {
     hostsSearch(matrixHistogramRequest);
   }, [matrixHistogramRequest, hostsSearch]);
 
-  return [loading, matrixHistogramResponse];
+  return [loading, matrixHistogramResponse, matrixHistogramBuckets];
 };

x-pack/plugins/security_solution/public/common/containers/matrix_histogram/use_matrix_histogram_async.ts

@@ -462,6 +462,7 @@ describe('eql/helpers', () => {
         },
         lte: '2020-10-04T16:00:00.368707900Z',
         totalCount: 0,
+        warnings: [],
       });
     });
   });

x-pack/plugins/security_solution/public/common/hooks/eql/helpers.test.ts

@@ -0,0 +1,92 @@
+/*
+ * 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, { useEffect } from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiSpacer, EuiText } from '@elastic/eui';
+import styled from 'styled-components';
+
+import * as i18n from './translations';
+import { BarChart } from '../../../../common/components/charts/barchart';
+import { getHistogramConfig } from './helpers';
+import { ChartData } from '../../../../common/components/charts/common';
+import { InspectQuery } from '../../../../common/store/inputs/model';
+import { InspectButton } from '../../../../common/components/inspect';
+import { useGlobalTime } from '../../../../common/containers/use_global_time';
+import { Panel } from '../../../../common/components/panel';
+
+export const ID = 'queryEqlPreviewHistogramQuery';
+
+interface PreviewEqlQueryHistogramProps {
+  to: string;
+  from: string;
+  totalHits: number;
+  data: ChartData[];
+  query: string;
+  inspect: InspectQuery;
+}
+
+export const PreviewEqlQueryHistogram = ({
+  from,
+  to,
+  totalHits,
+  data,
+  query,
+  inspect,
+}: PreviewEqlQueryHistogramProps) => {
+  const { setQuery, isInitializing } = useGlobalTime();
+
+  useEffect((): void => {
+    if (!isInitializing) {
+      setQuery({ id: ID, inspect, loading: false, refetch: () => {} });
+    }
+  }, [setQuery, inspect, isInitializing]);
+
+  return (
+    <>
+      {totalHits > 0 && (
+        <Panel height={300}>
+          <EuiFlexGroup gutterSize="none" direction="column">
+            <EuiFlexItem grow={1}>
+              <EuiFlexGroup direction="row" justifyContent="center">
+                <EuiFlexItem grow={false}>
+                  <EuiTitle size="xs">
+                    <h2 data-test-subj="header-section-title">
+                      {i18n.QUERY_PREVIEW_TITLE(totalHits)}
+                    </h2>
+                  </EuiTitle>
+                </EuiFlexItem>
+
+                <EuiFlexItem grow={false}>
+                  <InspectButton
+                    queryId={ID}
+                    inspectIndex={0}
+                    title={i18n.QUERY_PREVIEW_INSPECT_TITLE}
+                  />
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+            <EuiFlexItem grow={1}>
+              <BarChart
+                configs={getHistogramConfig(to, from, query.includes('sequence'))}
+                barChart={[{ key: 'hits', value: data }]}
+                stackByField={undefined}
+                timelineId={undefined}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <>
+                <EuiSpacer />
+                <EuiText size="s" color="subdued">
+                  <p>{i18n.PREVIEW_QUERY_DISCLAIMER_EQL}</p>
+                </EuiText>
+              </>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </Panel>
+      )}
+    </>
+  );
+};