- modal kombat

elastic · Mar 25, 2020 · 37e2ca9 · 37e2ca9
1 parent 176d2c2
commit 37e2ca9
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 61 deletions.
diff --git a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.tsx b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.tsx
@@ -102,7 +102,6 @@ const getStyle = (
 export const DraggableWrapper = React.memo<Props>(
  ({ dataProvider, onFilterAdded, render, truncate }) => {
  const [showTopN, setShowTopN] = useState<boolean>(false);
-
  const toggleTopN = useCallback(() => {
  setShowTopN(!showTopN);
  }, [setShowTopN, showTopN]);
@@ -133,10 +132,15 @@ export const DraggableWrapper = React.memo<Props>(
  const hoverContent = useMemo(
  () => (
  <DraggableWrapperHoverContent
- dataProvider={dataProvider}
+ field={dataProvider.queryMatch.field}
+ onFilterAdded={onFilterAdded}
  showTopN={showTopN}
  toggleTopN={toggleTopN}
- onFilterAdded={onFilterAdded}
+ value={
+ typeof dataProvider.queryMatch.value !== 'number'
+ ? dataProvider.queryMatch.value
+ : `${dataProvider.queryMatch.value}`
+ }
  />
  ),
  [dataProvider, showTopN]

diff --git a/...k/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper_hover_content.tsx b/...k/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper_hover_content.tsx
@@ -5,7 +5,7 @@
  */
 
 import { contains } from 'lodash/fp';
-import { EuiButtonIcon, EuiOutsideClickDetector, EuiToolTip } from '@elastic/eui';
+import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
 import React, { useCallback } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 import styled from 'styled-components';
@@ -19,14 +19,26 @@ import { EventsByDataset } from '../../pages/overview/events_by_dataset';
 import { Query, Filter } from '../../../../../../../src/plugins/data/public';
 import { inputsSelectors, State } from '../../store';
 import { setAbsoluteRangeDatePicker as dispatchSetAbsoluteRangeDatePicker } from '../../store/inputs/actions';
-import { DataProvider } from '../timeline/data_providers/data_provider';
 
 import * as i18n from './translations';
 
 const TopNContainer = styled.div`
  width: 600px;
 `;
 
+const CloseButtonFlexItem = styled(EuiFlexItem)`
+ z-index: 999999;
+ position: absolute;
+ right: 4px;
+ top: 4px;
+`;
+
+const EventsByDatasetFlexItem = styled(EuiFlexItem)`
+ .euiPanel {
+ border: none;
+ }
+`;
+
 const makeMapStateToProps = () => {
  const getGlobalFiltersQuerySelector = inputsSelectors.globalFiltersQuerySelector();
  const getGlobalQuerySelector = inputsSelectors.globalQuerySelector();
@@ -44,10 +56,11 @@ const mapDispatchToProps = { setAbsoluteRangeDatePicker: dispatchSetAbsoluteRang
 const connector = connect(makeMapStateToProps, mapDispatchToProps);
 
 interface OwnProps {
- dataProvider: DataProvider;
+ field: string;
  showTopN: boolean;
  toggleTopN: () => void;
  onFilterAdded?: () => void;
+ value?: string;
 }
 type PropsFromRedux = ConnectedProps<typeof connector>;
 type Props = OwnProps & PropsFromRedux;
@@ -79,22 +92,18 @@ const NO_FILTERS: Filter[] = [];
 const DEFAULT_QUERY: Query = { query: '', language: 'kuery' };
 
 const DraggableWrapperHoverContentComponent: React.FC<Props> = ({
- dataProvider,
  filters = NO_FILTERS,
+ field,
  onFilterAdded,
  query = DEFAULT_QUERY,
  showTopN,
  toggleTopN,
+ value,
 }) => {
  const { filterManager } = useKibana().services.data.query;
 
  const addToKql = useCallback(() => {
- const filter = createFilter(
- dataProvider.queryMatch.field,
- typeof dataProvider.queryMatch.value !== 'number'
- ? dataProvider.queryMatch.value
- : `${dataProvider.queryMatch.value}`
- );
+ const filter = createFilter(field, value);
 
  if (filterManager != null) {
  filterManager.addFilters(filter);
@@ -103,11 +112,11 @@ const DraggableWrapperHoverContentComponent: React.FC<Props> = ({
  onFilterAdded();
  }
  }
- }, [dataProvider.queryMatch.field, dataProvider.queryMatch.value, filterManager]);
+ }, [field, value, filterManager]);
 
  return (
  <>
- {!showTopN && addToKql != null && (
+ {!showTopN && value != null && (
  <EuiToolTip content={i18n.FILTER_FOR_VALUE}>
  <EuiButtonIcon
  aria-label={i18n.FILTER_FOR_VALUE}
@@ -123,14 +132,14 @@ const DraggableWrapperHoverContentComponent: React.FC<Props> = ({
  {({ browserFields, indexPattern }) => (
  <>
  {allowTopN({
- browserField: getAllFieldsByName(browserFields)[dataProvider.queryMatch.field],
- fieldName: dataProvider.queryMatch.field,
+ browserField: getAllFieldsByName(browserFields)[field],
+ fieldName: field,
  }) && (
  <>
  {!showTopN && (
- <EuiToolTip content={i18n.SHOW_TOP(dataProvider.queryMatch.field)}>
+ <EuiToolTip content={i18n.SHOW_TOP(field)}>
  <EuiButtonIcon
- aria-label={i18n.SHOW_TOP(dataProvider.queryMatch.field)}
+ aria-label={i18n.SHOW_TOP(field)}
  color="text"
  iconType="visBarVertical"
  onClick={toggleTopN}
@@ -139,25 +148,39 @@ const DraggableWrapperHoverContentComponent: React.FC<Props> = ({
  )}
 
  {showTopN && (
- <EuiOutsideClickDetector onOutsideClick={toggleTopN}>
- <GlobalTime>
- {({ from, deleteQuery, setQuery, to }) => (
- <TopNContainer>
- <EventsByDataset
- deleteQuery={deleteQuery}
- filters={filters}
- from={from}
- indexPattern={indexPattern}
- onlyField={dataProvider.queryMatch.field}
- query={query}
- setQuery={setQuery}
- showSpacer={false}
- to={to}
- />
- </TopNContainer>
- )}
- </GlobalTime>
- </EuiOutsideClickDetector>
+ <GlobalTime>
+ {({ from, deleteQuery, setQuery, to }) => (
+ <TopNContainer>
+ <EuiFlexGroup
+ direction="column"
+ gutterSize="s"
+ justifyContent="spaceBetween"
+ >
+ <CloseButtonFlexItem grow={false}>
+ <EuiButtonIcon
+ aria-label={i18n.CLOSE}
+ iconType="cross"
+ onClick={toggleTopN}
+ />
+ </CloseButtonFlexItem>
+
+ <EventsByDatasetFlexItem>
+ <EventsByDataset
+ deleteQuery={deleteQuery}
+ filters={filters}
+ from={from}
+ indexPattern={indexPattern}
+ onlyField={field}
+ query={query}
+ setQuery={setQuery}
+ showSpacer={false}
+ to={to}
+ />
+ </EventsByDatasetFlexItem>
+ </EuiFlexGroup>
+ </TopNContainer>
+ )}
+ </GlobalTime>
  )}
  </>
  )}
@@ -169,8 +192,7 @@ const DraggableWrapperHoverContentComponent: React.FC<Props> = ({
  <EuiToolTip content={i18n.COPY_TO_CLIPBOARD}>
  <WithCopyToClipboard
  data-test-subj="copy-to-clipboard"
- text={`${dataProvider.queryMatch.field} : "${dataProvider.queryMatch.displayValue ||
- dataProvider.queryMatch.value}"`}
+ text={`${field} : "${value}"`}
  titleSummary={i18n.FIELD}
  />
  </EuiToolTip>

diff --git a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/translations.ts b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/translations.ts
@@ -18,6 +18,10 @@ export const FILTER_FOR_VALUE = i18n.translate('xpack.siem.dragAndDrop.filterFor
  defaultMessage: 'Filter for value on all pages',
 });
 
+export const CLOSE = i18n.translate('xpack.siem.dragAndDrop.closeButtonLabel', {
+ defaultMessage: 'Close',
+});
+
 export const SHOW_TOP = (fieldName: string) =>
  i18n.translate('xpack.siem.overview.showTopTooltip', {
  values: { fieldName },

diff --git a/x-pack/legacy/plugins/siem/public/components/fields_browser/field_name.tsx b/x-pack/legacy/plugins/siem/public/components/fields_browser/field_name.tsx
@@ -5,7 +5,7 @@
  */
 
 import { EuiButtonIcon, EuiHighlight, EuiIcon, EuiText, EuiToolTip } from '@elastic/eui';
-import React, { useCallback, useContext, useMemo } from 'react';
+import React, { useCallback, useContext, useState, useMemo } from 'react';
 import styled from 'styled-components';
 
 import { WithCopyToClipboard } from '../../lib/clipboard/with_copy_to_clipboard';
@@ -15,6 +15,7 @@ import { TimelineContext } from '../timeline/timeline_context';
 import { WithHoverActions } from '../with_hover_actions';
 import { LoadingSpinner } from './helpers';
 import * as i18n from './translations';
+import { DraggableWrapperHoverContent } from '../drag_and_drop/draggable_wrapper_hover_content';
 
 /**
  * The name of a (draggable) field
@@ -117,28 +118,17 @@ export const FieldName = React.memo<{
  fieldId: string;
  highlight?: string;
  onUpdateColumns: OnUpdateColumns;
-}>(({ categoryId, categoryColumns, fieldId, highlight = '', onUpdateColumns }) => {
+}>(({ fieldId, highlight = '' }) => {
+ const [showTopN, setShowTopN] = useState<boolean>(false);
+ const toggleTopN = useCallback(() => {
+ setShowTopN(!showTopN);
+ }, [setShowTopN, showTopN]);
+
  const hoverContent = useMemo(
  () => (
- <>
- {categoryColumns.length > 0 && (
- <ViewCategory
- categoryId={categoryId}
- categoryColumns={categoryColumns}
- onUpdateColumns={onUpdateColumns}
- />
- )}
-
- <EuiToolTip content={i18n.COPY_TO_CLIPBOARD}>
- <WithCopyToClipboard
- data-test-subj="copy-to-clipboard"
- text={fieldId}
- titleSummary={i18n.FIELD}
- />
- </EuiToolTip>
- </>
+ <DraggableWrapperHoverContent field={fieldId} showTopN={showTopN} toggleTopN={toggleTopN} />
  ),
- [categoryId, categoryColumns, fieldId, onUpdateColumns]
+ [fieldId, showTopN, toggleTopN]
  );
 
  const render = useCallback(
@@ -151,7 +141,7 @@ export const FieldName = React.memo<{
  </FieldNameContainer>
  </EuiText>
  ),
- [fieldId, highlight]
+ [fieldId, highlight, showTopN]
  );
 
  return <WithHoverActions hoverContent={hoverContent} render={render} />;