github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Session View] Display Option bug fix (#129262)

Browse source 
* added localstorage for display option

* linting

* addressing PR comments

* Check Fixes + small fix for Display Option button state

* addressing PR comments

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Rickyanto Ang 2022-04-06 15:02:53 -07:00 • committed by GitHub
parent c92064040b
commit 9295f13dd9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

1
x-pack/plugins/session_view/common/constants.ts
View file

@ -50,6 +50,7 @@ export const ALERT_COUNT_THRESHOLD = 999;
// react-query caching keys
export const QUERY_KEY_PROCESS_EVENTS = 'sessionViewProcessEvents';
export const QUERY_KEY_ALERTS = 'sessionViewAlerts';
export const LOCAL_STORAGE_DISPLAY_OPTIONS_KEY = 'sessionView:displayOptions';
export const MOUSE_EVENT_PLACEHOLDER = { stopPropagation: () => undefined } as React.MouseEvent;

28
x-pack/plugins/session_view/public/components/session_view/index.tsx
View file

@ -15,6 +15,7 @@ import {
EuiFlexGroup,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import useLocalStorage from 'react-use/lib/useLocalStorage';
import { SectionLoading } from '../../shared_imports';
import { ProcessTree } from '../process_tree';
import {
@ -33,6 +34,7 @@ import {
useFetchSessionViewProcessEvents,
useFetchSessionViewAlerts,
} from './hooks';
import { LOCAL_STORAGE_DISPLAY_OPTIONS_KEY } from '../../../common/constants';
/**
* The main wrapper component for the session view.
@ -55,10 +57,13 @@ export const SessionView = ({
const [selectedProcess, setSelectedProcess] = useState<Process | null>(null);
const [searchQuery, setSearchQuery] = useState('');
const [searchResults, setSearchResults] = useState<Process[] | null>(null);
const [displayOptions, setDisplayOptions] = useState<DisplayOptionsState>({
timestamp: true,
verboseMode: true,
});
const [displayOptions, setDisplayOptions] = useLocalStorage<DisplayOptionsState>(
LOCAL_STORAGE_DISPLAY_OPTIONS_KEY,
{
timestamp: true,
verboseMode: true,
}
);
const [fetchAlertStatus, setFetchAlertStatus] = useState<string[]>([]);
const [updatedAlertsStatus, setUpdatedAlertsStatus] = useState<AlertStatusEventEntityIdMap>({});
const [currentJumpToCursor, setCurrentJumpToCursor] = useState(jumpToCursor);
@ -136,9 +141,12 @@ export const SessionView = ({
[loadAlertDetails, handleOnAlertDetailsClosed]
);
const handleOptionChange = useCallback((checkedOptions: DisplayOptionsState) => {
setDisplayOptions(checkedOptions);
}, []);
const handleOptionChange = useCallback(
(checkedOptions: DisplayOptionsState) => {
setDisplayOptions(checkedOptions);
},
[setDisplayOptions]
);
if (!isFetching && !hasData) {
return (
@ -183,7 +191,7 @@ export const SessionView = ({
<EuiFlexItem grow={false} css={styles.buttonsEyeDetail}>
<SessionViewDisplayOptions
displayOptions={displayOptions}
displayOptions={displayOptions!}
onChange={handleOptionChange}
/>
</EuiFlexItem>
@ -264,8 +272,8 @@ export const SessionView = ({
setSearchResults={setSearchResults}
updatedAlertsStatus={updatedAlertsStatus}
onShowAlertDetails={onShowAlertDetails}
timeStampOn={displayOptions.timestamp}
verboseModeOn={displayOptions.verboseMode}
timeStampOn={displayOptions?.timestamp}
verboseModeOn={displayOptions?.verboseMode}
/>
</div>
)}

2
x-pack/plugins/session_view/public/components/session_view_display_options/index.tsx
View file

@ -82,7 +82,7 @@ export const SessionViewDisplayOptions = ({
<EuiFlexItem grow={false}>
<EuiButtonIcon
iconType="eye"
display={displayOptions.verboseMode ? 'fill' : 'empty'}
display={displayOptions.verboseMode || displayOptions.timestamp ? 'fill' : 'empty'}
onClick={toggleOptionButton}
size="m"
aria-label="Session view display option"