{
+ return !!(!displayOptions?.verboseMode && searchQuery && searchResults?.length === 0);
+ }, [displayOptions?.verboseMode, searchResults, searchQuery]);
+
const onProcessSelected = useCallback((process: Process | null) => {
setSelectedProcess(process);
}, []);
@@ -194,6 +199,7 @@ export const SessionView = ({
@@ -273,8 +279,8 @@ export const SessionView = ({
setSearchResults={setSearchResults}
updatedAlertsStatus={updatedAlertsStatus}
onShowAlertDetails={onShowAlertDetails}
- timeStampOn={displayOptions?.timestamp}
- verboseModeOn={displayOptions?.verboseMode}
+ showTimestamp={displayOptions?.timestamp}
+ verboseMode={displayOptions?.verboseMode}
/>
)}
diff --git a/x-pack/plugins/session_view/public/components/session_view_display_options/index.tsx b/x-pack/plugins/session_view/public/components/session_view_display_options/index.tsx
index 7970a3b523e8b..ab381ca757f9f 100644
--- a/x-pack/plugins/session_view/public/components/session_view_display_options/index.tsx
+++ b/x-pack/plugins/session_view/public/components/session_view_display_options/index.tsx
@@ -5,9 +5,10 @@
* 2.0.
*/
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect, useRef } from 'react';
import { i18n } from '@kbn/i18n';
import {
+ EuiToolTip,
EuiPopover,
EuiSelectable,
EuiPopoverTitle,
@@ -22,17 +23,50 @@ import { useStyles } from './styles';
const TIMESTAMP_OPTION_KEY = 'Timestamp';
const VERBOSE_MODE_OPTION_KEY = 'Verbose mode';
+const TOOLTIP_SHOW_DELAY = 3000;
+const TOOLTIP_HIDE_DELAY = 5000;
+
+const VERBOSE_TOOLTIP_TITLE = i18n.translate(
+ 'xpack.sessionView.sessionViewToggle.sessionViewVerboseTipTitle',
+ {
+ defaultMessage: 'Some results may be hidden',
+ }
+);
+
+const VERBOSE_TOOLTIP_CONTENT = i18n.translate(
+ 'xpack.sessionView.sessionViewToggle.sessionViewVerboseTipContent',
+ {
+ defaultMessage: 'For a complete set of results, turn on Verbose mode.',
+ }
+);
export const SessionViewDisplayOptions = ({
onChange,
displayOptions,
+ showVerboseSearchTooltip,
}: {
onChange: (vars: DisplayOptionsState) => void;
displayOptions: DisplayOptionsState;
+ showVerboseSearchTooltip: boolean;
}) => {
const [isOptionDropdownOpen, setOptionDropdownOpen] = useState(false);
-
const styles = useStyles();
+ const tooltipRef = useRef(null);
+
+ useEffect(() => {
+ if (tooltipRef.current) {
+ setTimeout(() => {
+ if (tooltipRef.current) {
+ (tooltipRef.current as EuiToolTip).onFocus();
+ setTimeout(() => {
+ if (tooltipRef.current) {
+ (tooltipRef.current as EuiToolTip).onBlur();
+ }
+ }, TOOLTIP_HIDE_DELAY);
+ }
+ }, TOOLTIP_SHOW_DELAY);
+ }
+ }, [showVerboseSearchTooltip]);
const optionsList: EuiSelectableOption[] = useMemo(
() => [
@@ -106,27 +140,38 @@ export const SessionViewDisplayOptions = ({
onChange(updateOptionState);
};
- return (
- <>
-
-
- {(list) => (
-
-
-
-
- {list}
-
- )}
-
-
-
+ const popOver = (
+
+
+ {(list) => (
+
+
+
+
+ {list}
+
+ )}
+
+
+ );
+
+ return !isOptionDropdownOpen && showVerboseSearchTooltip ? (
+
+ {popOver}
+
+ ) : (
+ popOver
);
};
diff --git a/x-pack/plugins/session_view/public/components/session_view_search_bar/index.tsx b/x-pack/plugins/session_view/public/components/session_view_search_bar/index.tsx
index 05154fca40769..9c24f6b94199c 100644
--- a/x-pack/plugins/session_view/public/components/session_view_search_bar/index.tsx
+++ b/x-pack/plugins/session_view/public/components/session_view_search_bar/index.tsx
@@ -24,6 +24,10 @@ const translatePlaceholder = {
}),
};
+const NO_RESULTS = i18n.translate('xpack.sessionView.searchBar.searchBarNoResults', {
+ defaultMessage: 'No results',
+});
+
/**
* The main wrapper component for the session view.
*/
@@ -33,7 +37,8 @@ export const SessionViewSearchBar = ({
onProcessSelected,
searchResults,
}: SessionViewSearchBarDeps) => {
- const showPagination = !!searchResults?.length;
+ const showPagination = !!searchQuery && searchResults?.length !== 0;
+ const noResults = !!searchQuery && searchResults?.length === 0;
const styles = useStyles({ hasSearchResults: showPagination });
@@ -62,11 +67,12 @@ export const SessionViewSearchBar = ({
return (
+ {noResults && {NO_RESULTS}}
{showPagination && (
{
position: 'absolute',
top: euiTheme.size.s,
right: euiTheme.size.xxl,
+ 'button[data-test-subj="pagination-button-last"]': {
+ display: 'none',
+ },
+ 'button[data-test-subj="pagination-button-first"]': {
+ display: 'none',
+ },
+ };
+
+ const noResults: CSSObject = {
+ position: 'absolute',
+ color: euiTheme.colors.subdued,
+ top: euiTheme.size.m,
+ right: euiTheme.size.xxl,
};
const searchBarWithResult: CSSObject = {
@@ -33,6 +46,7 @@ export const useStyles = ({ hasSearchResults }: StylesDeps) => {
return {
pagination,
searchBarWithResult,
+ noResults,
};
}, [euiTheme, hasSearchResults]);