diff --git a/src/plugins/unified_doc_viewer/public/components/doc_viewer_table/table.tsx b/src/plugins/unified_doc_viewer/public/components/doc_viewer_table/table.tsx index 62f5ed497067b..b6183c496342e 100644 --- a/src/plugins/unified_doc_viewer/public/components/doc_viewer_table/table.tsx +++ b/src/plugins/unified_doc_viewer/public/components/doc_viewer_table/table.tsx @@ -9,6 +9,7 @@ import './table.scss'; import React, { useCallback, useMemo, useState } from 'react'; import useWindowSize from 'react-use/lib/useWindowSize'; +import useLocalStorage from 'react-use/lib/useLocalStorage'; import { EuiFlexGroup, EuiFlexItem, @@ -22,6 +23,8 @@ import { EuiText, EuiCallOut, useResizeObserver, + EuiSwitch, + useEuiTheme, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { css } from '@emotion/react'; @@ -72,6 +75,7 @@ const DEFAULT_PAGE_SIZE = 25; const PINNED_FIELDS_KEY = 'discover:pinnedFields'; const PAGE_SIZE = 'discover:pageSize'; const SEARCH_TEXT = 'discover:searchText'; +const HIDE_NULL_VALUES = 'discover:hideNullValues'; const GRID_COLUMN_FIELD_NAME = 'name'; const GRID_COLUMN_FIELD_VALUE = 'value'; @@ -135,11 +139,13 @@ export const DocViewerTable = ({ columnsMeta, hit, dataView, + textBasedHits, filter, decreaseAvailableHeightBy, onAddColumn, onRemoveColumn, }: DocViewRenderProps) => { + const isEsqlMode = Array.isArray(textBasedHits); const [containerRef, setContainerRef] = useState(null); const { fieldFormats, storage, uiSettings, fieldsMetadata } = getUnifiedDocViewerServices(); const showMultiFields = uiSettings.get(SHOW_MULTIFIELDS); @@ -149,6 +155,9 @@ export const DocViewerTable = ({ const [pinnedFields, setPinnedFields] = useState( getPinnedFields(currentDataViewId, storage) ); + const [areNullValuesHidden, setAreNullValuesHidden] = useLocalStorage(HIDE_NULL_VALUES, false); + + const { euiTheme } = useEuiTheme(); const flattened = hit.flattened; const shouldShowFieldHandler = useMemo( @@ -265,7 +274,11 @@ export const DocViewerTable = ({ if (!shouldShowFieldHandler(curFieldName)) { return acc; } - + const shouldHideNullValue = + areNullValuesHidden && flattened[curFieldName] == null && isEsqlMode; + if (shouldHideNullValue) { + return acc; + } if (pinnedFields.includes(curFieldName)) { acc.pinnedItems.push(fieldToItem(curFieldName, true)); } else { @@ -358,6 +371,13 @@ export const DocViewerTable = ({ [fieldCellActions, fieldValueCellActions, containerWidth] ); + const onHideNullValuesChange = useCallback( + (e) => { + setAreNullValuesHidden(e.target.checked); + }, + [setAreNullValuesHidden] + ); + const renderCellValue: EuiDataGridProps['renderCellValue'] = useCallback( ({ rowIndex, columnId, isDetails }) => { const row = rows[rowIndex]; @@ -493,6 +513,25 @@ export const DocViewerTable = ({ + {isEsqlMode && ( + + + + )} { + await PageObjects.discover.selectTextBaseLang(); + await PageObjects.header.waitUntilLoadingHasFinished(); + await PageObjects.discover.waitUntilSearchingHasFinished(); + await PageObjects.unifiedFieldList.waitUntilSidebarHasLoaded(); + + const testQuery = 'from logstash-* | sort @timestamp | limit 10000'; + await monacoEditor.setCodeEditorValue(testQuery); + await testSubjects.click('querySubmitButton'); + await PageObjects.header.waitUntilLoadingHasFinished(); + await PageObjects.discover.waitUntilSearchingHasFinished(); + await PageObjects.unifiedFieldList.waitUntilSidebarHasLoaded(); + await dataGrid.clickRowToggle(); + await PageObjects.discover.isShowingDocViewer(); + }); + + afterEach(async () => { + const fieldSearch = await testSubjects.find('clearSearchButton'); + await fieldSearch.click(); // clear search + const hideNullValuesSwitch = await testSubjects.find( + 'unifiedDocViewerHideNullValuesSwitch' + ); + await hideNullValuesSwitch.click(); // make sure the switch is off + }); + + it('should hide fields with null values ', async function () { + await PageObjects.discover.findFieldByNameInDocViewer('machine'); + const results = (await find.allByCssSelector('.kbnDocViewer__fieldName')).length; + const hideNullValuesSwitch = await testSubjects.find( + 'unifiedDocViewerHideNullValuesSwitch' + ); + await hideNullValuesSwitch.click(); + + await retry.waitFor('updates', async () => { + return (await find.allByCssSelector('.kbnDocViewer__fieldName')).length < results; + }); + }); + }); }); }