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 index 6910f40347f99..3e1256ab9a329 100644 --- 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(null); const [ref, dimensions] = useDimension(elementRef); - const flyoutWidth = dimensions.width ?? 600; - const fieldWidth = flyoutWidth / 6; + const fieldWidth = (dimensions.width - 20) / 7; return ( diff --git a/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/highlight_field.tsx b/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/highlight_field.tsx index ae6b6102367e0..48479fc13b1e2 100644 --- a/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/highlight_field.tsx +++ b/x-pack/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 ? ( - - + + {label} - + 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 index 68b97b3555c84..ef755c97f1f53 100644 --- 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', + } +);