Add more actions

elastic · Nov 9, 2023 · 7ac3862 · 7ac3862
1 parent 892892d
commit 7ac3862
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 8 deletions.
diff --git a/x-pack/plugins/log_explorer/public/components/flyout_detail/flyout_highlights.tsx b/x-pack/plugins/log_explorer/public/components/flyout_detail/flyout_highlights.tsx
@@ -46,8 +46,7 @@ export function FlyoutHighlights({
 }) {
   const elementRef = useRef<HTMLDivElement>(null);
   const [ref, dimensions] = useDimension<HTMLDivElement>(elementRef);
-  const flyoutWidth = dimensions.width ?? 600;
-  const fieldWidth = flyoutWidth / 6;
+  const fieldWidth = (dimensions.width - 20) / 7;
   return (
     <DiscoverActionsProvider value={actions}>
       <HighlightContainer ref={ref}>

diff --git a/...k/plugins/log_explorer/public/components/flyout_detail/sub_components/highlight_field.tsx b/...k/plugins/log_explorer/public/components/flyout_detail/sub_components/highlight_field.tsx
@@ -6,9 +6,14 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
-import React, { ReactNode, useMemo } from 'react';
+import React, { ReactNode, useMemo, useState } from 'react';
 import { HoverAction, HoverActionType } from './hover_action';
-import { flyoutHoverActionFilterForText, flyoutHoverActionFilterOutText } from '../translations';
+import {
+  flyoutHoverActionFilterForText,
+  flyoutHoverActionFilterOutText,
+  flyoutHoverActionFilterForFieldPresentText,
+  flyoutHoverActionToggleColumnText,
+} from '../translations';
 import { useDiscoverActionsContext } from '../../../hooks/use_discover_action';
 
 interface HighlightFieldProps {
@@ -31,6 +36,7 @@ export function HighlightField({
   const filterForText = flyoutHoverActionFilterForText(value);
   const filterOutText = flyoutHoverActionFilterOutText(value);
   const actions = useDiscoverActionsContext();
+  const [columnAdded, setColumnAdded] = useState(false);
 
   const hoverActions: HoverActionType[] = useMemo(
     () => [
@@ -48,17 +54,40 @@ export function HighlightField({
         onClick: () => actions?.addFilter && actions.addFilter(field, value, '-'),
         display: true,
       },
+      {
+        id: 'filterForFieldPresentAction',
+        tooltipContent: flyoutHoverActionFilterForFieldPresentText,
+        iconType: 'filter',
+        onClick: () => actions?.addFilter && actions.addFilter('_exists_', field, '+'),
+        display: true,
+      },
+      {
+        id: 'toggleColumnAction',
+        tooltipContent: flyoutHoverActionToggleColumnText,
+        iconType: 'listAdd',
+        onClick: () => {
+          if (actions) {
+            if (columnAdded) {
+              actions?.removeColumn?.(field);
+            } else {
+              actions?.addColumn?.(field);
+            }
+            setColumnAdded(!columnAdded);
+          }
+        },
+        display: true,
+      },
     ],
-    [actions, field, value, filterForText, filterOutText]
+    [filterForText, filterOutText, actions, field, value, columnAdded]
   );
   return formattedValue ? (
     <EuiFlexGroup direction="column" gutterSize="none" data-test-subj={dataTestSubj}>
-      <EuiFlexItem grow={false}>
-        <EuiText color="subdued" size="xs" grow={false}>
+      <EuiFlexItem>
+        <EuiText color="subdued" size="xs">
           {label}
         </EuiText>
       </EuiFlexItem>
-      <EuiFlexItem grow={false}>
+      <EuiFlexItem>
         <HoverAction displayText={formattedValue} actions={hoverActions} width={width} />
       </EuiFlexItem>
     </EuiFlexGroup>

diff --git a/x-pack/plugins/log_explorer/public/components/flyout_detail/translations.ts b/x-pack/plugins/log_explorer/public/components/flyout_detail/translations.ts
@@ -137,3 +137,17 @@ export const flyoutHoverActionFilterOutText = (text: unknown) =>
       value: text as string,
     },
   });
+
+export const flyoutHoverActionFilterForFieldPresentText = i18n.translate(
+  'xpack.logExplorer.flyoutDetail.value.hover.filterForFieldPresent',
+  {
+    defaultMessage: 'Filter for field present',
+  }
+);
+
+export const flyoutHoverActionToggleColumnText = i18n.translate(
+  'xpack.logExplorer.flyoutDetail.value.hover.toggleColumn',
+  {
+    defaultMessage: 'Toggle column in table',
+  }
+);