Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Security Solution][Resolver] Show origin node details in panel on load #73313

Merged
merged 3 commits into from
Jul 28, 2020
Merged

[Security Solution][Resolver] Show origin node details in panel on load #73313

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a6ba12b
show origin node details in panel on load
michaelolo24 Jul 27, 2020
be64247
added comment
michaelolo24 Jul 27, 2020
afeeb74
Merge branch 'master' into origin-process-panel
elasticmachine Jul 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 16 additions & 2 deletions x-pack/plugins/security_solution/public/resolver/view/map.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

/* eslint-disable react/display-name */

import React, { useContext } from 'react';
import React, { useContext, useEffect } from 'react';
import { useSelector } from 'react-redux';
import { useEffectOnce } from 'react-use';
import { EuiLoadingSpinner } from '@elastic/eui';
Expand Down Expand Up @@ -68,11 +68,25 @@ export const ResolverMap = React.memo(function ({
const hasError = useSelector(selectors.hasError);
const activeDescendantId = useSelector(selectors.ariaActiveDescendant);
const { colorMap } = useResolverTheme();
const { cleanUpQueryParams } = useResolverQueryParams();
const {
cleanUpQueryParams,
queryParams: { crumbId },
pushToQueryParams,
} = useResolverQueryParams();

useEffectOnce(() => {
return () => cleanUpQueryParams();
});

useEffect(() => {
// When you refresh the page after selecting a process in the table view (not the timeline view)
// The old crumbId still exists in the query string even though a resolver is no longer visible
// This just makes sure the activeDescendant and crumbId are in sync on load for that view as well as the timeline
if (activeDescendantId && crumbId !== activeDescendantId) {
Copy link
Contributor Author

@michaelolo24 michaelolo24 Jul 27, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Went this route because, when you refresh the page after selecting a process in the table view (not the timeline view), the old crumbId is still there in the query string even though you don't see a resolver anymore. This just makes sure everything is in sync on load for that view as well as the timeline

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you put that in a comment? We're probably going to schedule rewriting all query string related stuff soon and i want to have all the expected behavior somewhere

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yep, done. Thanks!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❔ This only happens when you refresh the page (like you hit f5 or something)? There is that event in panel.tsx called appDetectedNewIdFromQueryParams - I'm assuming that doesn't fire for whatever reason when you refesh? Followup ❔ - should that action fire here as well?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also want it to show on the initial load of the resolver. The panel should update with the details for the origin node. When I set it up to only work on initial load, I noticed this issue, and decided to set it up to be more general. This is more of an issue of the resolver that's opened in the table (not the timeline) not being preserved through refresh. That could leave you in a state when you open a new resolver that the activeDescendantID is set, but the crumbID isn't set. It doesn't necessarily cause any issues at the moment, but I prefer to be cautious and keep them in sync. In a refactor we should just combine those values in some way since they should always be the same

pushToQueryParams({ crumbId: activeDescendantId, crumbEvent: '' });
}
}, [crumbId, activeDescendantId, pushToQueryParams]);

return (
<StyledMapContainer className={className} backgroundColor={colorMap.resolverBackground}>
{isLoading ? (
Expand Down