[Security Solution] [Endpoint] Add endpoint details activity log by ashokaditya · Pull Request #99795 · elastic/kibana

ashokaditya · 2021-05-11T14:39:24Z

add tabs for endpoint details

Summary

Checklist

Delete any items that are not applicable to this PR.

Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)(https://github.com/elastic/kibana/blob/c29adfef29e921cc447d2a5ed06ac2047ceab552/src/dev/build/tasks/os_packages/docker_generator/resources/bin/kibana-docker)
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

For maintainers

This was checked for breaking API changes and was labeled appropriately

add tabs for endpoint details

this is work in progress with dummy data

x-pack/plugins/security_solution/common/endpoint/types/index.ts

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.ts

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/reducer.ts

ashokaditya · 2021-05-18T06:50:06Z

@elasticmachine merge upstream

paul-tavares

Some feedback left. I did not check it out, but its looking good.

Just FYI - I'm also making changes to the endpoint details in support of Host Isolation, so you, me or both might encounter some merge conflicts

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/action.ts

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/index.test.ts

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.ts

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts

...urity_solution/public/management/pages/endpoint_hosts/view/details/endpoint_activity_log.tsx

x-pack/plugins/security_solution/server/endpoint/routes/actions/audit_log.ts

paul-tavares · 2021-05-18T13:43:31Z

x-pack/plugins/security_solution/server/endpoint/routes/actions/audit_log_handler.ts

+    const esClient = context.core.elasticsearch.client.asCurrentUser;
+    let result;
+    try {
+      result = await esClient.search({


This is a simple one, but if it get a bit more complicated we should consider moving the retrieval, status code validation of the result mapping to a service and leave the route handler as light as possible.

I'm inclined to move it to a service already. Also cause I'm doing a bunch of refactoring already.

x-pack/plugins/security_solution/server/endpoint/routes/actions/audit_log_handler.ts

ashokaditya · 2021-05-19T18:14:23Z

@elasticmachine merge upstream

ashokaditya · 2021-05-20T06:02:53Z

@elasticmachine merge upstream

in order to use it in endpoint_hosts as well as in trusted _apps review suggestion

review suggestion

ashokaditya · 2021-05-25T06:36:33Z

@elasticmachine merge upstream

kibanamachine · 2021-05-25T06:36:34Z

merge conflict between base and head

ashokaditya · 2021-05-25T10:06:14Z

@elasticmachine merge upstream

kibanamachine · 2021-05-25T10:06:16Z

merge conflict between base and head

refs 3722552

review suggestions

this needs to be fleshed out in a later PR

pzl

This doesn't seem to include action-responses yet, is that going to be a different PR?

pzl · 2021-05-28T15:44:02Z

x-pack/plugins/security_solution/common/endpoint/schema/actions.ts

can either leave this off this PR until we add the query definition, or at least add a comment saying this is for yet-to-come pagination query params

pzl · 2021-05-28T15:51:47Z

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts

getting a bit long. Can probably refactor ( ['...',].includes(value) is probably fine, or extract up if it makes sense)

This doesn't seem to include action-responses yet, is that going to be a different PR?

Yes, I'll do that in the PR for the API that we discussed. Else the types were getting complex and hence more changes in this PR.

paul-tavares

Provided some comments and will wait to hear from you on them.

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts

paul-tavares · 2021-05-28T18:06:07Z

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts

+            if (
+              value === 'policy_response' ||
+              value === 'details' ||
+              value === 'activity-log' ||


perhaps it does not matter - but for the most part, we been using _ in values like this instead of -.

Indeed. Let's keep it consistent with naming conventions. Snake case it is. 👍

done 1c54aaa

paul-tavares · 2021-05-28T18:11:02Z

...y_solution/public/management/pages/endpoint_hosts/view/details/components/timeline_entry.tsx

+import { EuiAvatar, EuiComment, EuiText } from '@elastic/eui';
+import { Immutable, EndpointAction } from '../../../../../../../common/endpoint/types';
+
+export const TimelineEntry = memo(


Not for this PR.

The naming "timeline" might get confusing in our code based because we actually have an entire section of security solution named timeline. My suggestion would be to rename anything with timeline to a more specific name - like log_entry?

That makes sense 👍 I'd change that.

done e38e202

paul-tavares · 2021-05-28T18:17:23Z

...ion/public/management/pages/endpoint_hosts/view/details/components/endpoint_details_tabs.tsx

+
+const StyledEuiTabbedContent = styled(EuiTabbedContent)`
+  overflow: hidden;
+  padding-bottom: 48px;


We should not be using hard coded px values (or colors), but rather grabbing these values from the theme variable that is available when you defined the value here as a code function in the string template. Example:

Suggested change

padding-bottom: 48px;

padding-bottom: {(props) => props.theme.eui.paddingSizes.xl};

In this case, it seems as if you need a padding value that might not exist. I would work with Bonnie to see if we can keep to defined sizes (xs, s, m, l, xl). If not then this might work (never tried it):

padding-bottom: calc( {(props) => props.theme.eui.paddingSizes.l} + {(props) => props.theme.eui.paddingSizes.l} );

styled components might also already provide some calc like functions - not sure.

FYI - a while back I created this gist for my use in trying to understand what's available for use in the theme.eui:

https://gist.github.com/paul-tavares/303d718ac7f514d6ee681a3851407a7e

I agree that hardcoded values are not maintainable. I'm quite sure this won't be needed when we refactor the tabs component to use the flyout#more-complicated-flyout component version. I'll change this to use the xl padding for now.

done 31cf7af

paul-tavares · 2021-05-28T18:21:43Z

...y_solution/public/management/pages/endpoint_hosts/view/details/components/timeline_entry.tsx

+      <EuiComment
+        type={commentType}
+        username={endpointAction.user_id}
+        timestamp={moment(endpointAction['@timestamp']).fromNow().toString()}


We should be using our own relative date component -

kibana/x-pack/plugins/security_solution/public/common/components/endpoint/formatted_date_time.tsx

Lines 11 to 25 in 4584a8b

export const FormattedDateAndTime: React.FC<{ date: Date }> = ({ date }) => {

// If date is greater than or equal to 1h (ago), then show it as a date

// else, show it as relative to "now"

return Date.now() - date.getTime() >= 3.6e6 ? (

<>

<FormattedDate value={date} year="numeric" month="short" day="2-digit" />

{' @'}

<FormattedTime value={date} />

</>

) : (

<>

<FormattedRelative value={date} />

</>

);

};

Looks like timestamp prop accepts a ReactNode, so there should be no problem defining a component here

done e38e202

...urity_solution/public/management/pages/endpoint_hosts/view/details/endpoint_activity_log.tsx

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/index.tsx

paul-tavares · 2021-05-28T18:28:53Z

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/index.tsx

 import { FlyoutBodyNoTopPadding } from './components/flyout_body_no_top_padding';
 import { getEndpointListPath } from '../../../../common/routing';

+const contentLoadingMarkup = (


Instead of a singleton, can you either convert this to a function (or Component) or defined inside of EndpointDetailsFlyout using useMemo().

Just not sure that we want to reuse the same JSX across multiple instances of EndpointDetailsFlyout

done e38e202

paul-tavares · 2021-05-28T18:34:10Z

x-pack/plugins/security_solution/server/endpoint/routes/actions/audit_log_handler.ts

+      });
+    }
+    if (result?.statusCode !== 200) {
+      return res.customError({


No need to use customError() - kibana takes care of 500 errors if you just throw.

Suggestion:

throw new Error(`Error fetching actions log for agent_id ${req.params.agent_id}`);

Also, since this is a controlled failure and we're not returning anything about the actual error that happen in elasticsearch, you should log the error to kibana logs. You can get a logger instance from the endpoint context I think.

Does Kibana take care of 4xx errors as well?

done 8d46a98

ashokaditya · 2021-05-31T07:45:38Z

@elasticmachine merge upstream

review changes

review change

review changes

kibanamachine · 2021-06-02T08:54:13Z

expected head sha didn’t match current head ref.

ashokaditya · 2021-06-02T09:12:29Z

@elasticmachine merge upstream

paul-tavares

🔥 🔥 🔥

Left minor comments, but nothing that should hold this up. I'm good if you merge it. Great Job on this. Looks awesome.

paul-tavares · 2021-06-02T12:22:24Z

.../plugins/security_solution/public/management/pages/endpoint_hosts/store/mock_activity_log.ts

+import { EndpointAction } from '../../../../../common/endpoint/types';
+
+export const mockActivityLogResponse = (agentId: string): EndpointAction[] => {
+  const activityLog: EndpointAction[] = [


ℹ️ we also now have an Action generator, case that helps here in minimizing amount of mocks. See:

kibana/x-pack/plugins/security_solution/common/endpoint/data_generators/fleet_action_generator.ts

Line 15 in 57f59bd

export class FleetActionGenerator extends BaseDataGenerator {

If you do end up using it, I would suggest you initialize the class instance with a seed (argument to the class constructor)

done 6a2cace

paul-tavares · 2021-06-02T12:24:53Z

x-pack/plugins/security_solution/public/common/components/endpoint/formatted_date_time.tsx

-export const FormattedDateAndTime: React.FC<{ date: Date }> = ({ date }) => {
+export const FormattedDateAndTime: React.FC<{ date: Date; showRelativeTime?: boolean }> = ({
+  date,
+  showRelativeTime = false,


Why add the new prop? do you want relative time to always be shown? if so, you might just want to use <FormattedRelativeTime> directly in your component. But if that is the case, I would also talk to Bonnie about that - always showing relative time (IMO) is not a good after the first 1h.

Ah, I see what you mean. I guess I misunderstood you earlier. I assumed that we always want to show relative time. At least that's what it looked like in the mocks. This UX is still going to be worked on more in subsequent PRs. So we've time to make this slicker. 🙏

paul-tavares · 2021-06-02T12:32:21Z

.../plugins/security_solution/public/management/pages/endpoint_hosts/store/mock_activity_log.ts

+  const activityLog: EndpointAction[] = [
+    {
+      action_id: `${agentId}-action_id`,
+      '@timestamp': new Date().toJSON(),


👏 did not know about the .toJSON() method of the Date class 👍

now I redundant mock file 6a2cace 😄

paul-tavares · 2021-06-02T12:34:44Z

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/index.tsx

+          defaultMessage: 'Could not find activity log for host',
+        }),
+        text: i18n.translate('xpack.securitySolution.endpoint.activityLog.errorBody', {
+          defaultMessage: 'Please exit the flyout and select another host with actions.',


ℹ️ Seems a bit weird to me that we're instructing the user to go find another host with actions. I don't think that is an activity that the user is normally doing across hosts (or is it? 🤔 😄 ). If they came to the actions log for the host it is because they are investigating this particular host.

cc/ @bfishel

Indeed. This is going to be part of the empty state and the not-found details banner that we saw the other day. Not sure if we've nailed it down yet. So the idea is if we don't have a host then we also won't have host actions log.

Here's the link https://www.figma.com/file/BeTJy7bpHRPtHiNJtWU7Pj/OLM-7.12%2B?node-id=4476%3A0

review changes

ashokaditya · 2021-06-02T19:35:13Z

@kibanamachine merge upstream

kibanamachine · 2021-06-02T21:24:33Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`securitySolution`	2225	2229	+4

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`securitySolution`	6.9MB	6.9MB	+10.2KB

History

💔 Build #128632 failed 6a2cace
💔 Build #128585 failed 8fb56f5
💚 Build #128184 succeeded 8d46a98
💚 Build #128175 succeeded 31cf7af
💚 Build #128138 succeeded 1c54aaa

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

…stic#99795) * WIP add tabs for endpoint details * fetch activity log for endpoint this is work in progress with dummy data * refactor to hold host details and activity log within endpointDetails * api for fetching actions log * add a selector for getting selected agent id * use the new api to show actions log * review changes * move util function to common/utils in order to use it in endpoint_hosts as well as in trusted _apps review suggestion * use util function to get API path review suggestion * sync url params with details active tab review suggestion * fix types due to merge commit refs 3722552 * use AsyncResourseState type review suggestions * sort entries chronologically with recent at the top * adjust icon sizes within entries to match mocks * remove endpoint list paging stuff (not for now) * fix import after sync with master * make the search bar work (sort of) this needs to be fleshed out in a later PR * add tests to middleware for now * use snake case for naming routes review changes * rename and use own relative time function review change * use euiTheme tokens review change * add a comment review changes * log errors to kibana log and unwind stack review changes * use FleetActionGenerator for mocking data review changes Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

kibanamachine · 2021-06-03T07:26:11Z

💚 Backport successful

Status	Branch	Result
✅	7.x

This backport PR will be merged automatically after passing CI.

) (#101244) * WIP add tabs for endpoint details * fetch activity log for endpoint this is work in progress with dummy data * refactor to hold host details and activity log within endpointDetails * api for fetching actions log * add a selector for getting selected agent id * use the new api to show actions log * review changes * move util function to common/utils in order to use it in endpoint_hosts as well as in trusted _apps review suggestion * use util function to get API path review suggestion * sync url params with details active tab review suggestion * fix types due to merge commit refs 3722552 * use AsyncResourseState type review suggestions * sort entries chronologically with recent at the top * adjust icon sizes within entries to match mocks * remove endpoint list paging stuff (not for now) * fix import after sync with master * make the search bar work (sort of) this needs to be fleshed out in a later PR * add tests to middleware for now * use snake case for naming routes review changes * rename and use own relative time function review change * use euiTheme tokens review change * add a comment review changes * log errors to kibana log and unwind stack review changes * use FleetActionGenerator for mocking data review changes Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Ashokaditya <am.struktr@gmail.com>

ashokaditya added 2 commits May 11, 2021 16:33

WIP

c26a7d4

add tabs for endpoint details

fetch activity log for endpoint

b8fba34

this is work in progress with dummy data

ashokaditya requested review from paul-tavares and pzl May 12, 2021 19:04

ashokaditya commented May 12, 2021

View reviewed changes

x-pack/plugins/security_solution/common/endpoint/types/index.ts Outdated Show resolved Hide resolved

ashokaditya commented May 12, 2021

View reviewed changes

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.ts Outdated Show resolved Hide resolved

ashokaditya commented May 12, 2021

View reviewed changes

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/reducer.ts Outdated Show resolved Hide resolved

ashokaditya added 4 commits May 14, 2021 13:19

refactor to hold host details and activity log within endpointDetails

a2eb777

api for fetching actions log

24d392f

add a selector for getting selected agent id

62e38fe

use the new api to show actions log

b6aa967

Merge branch 'master' into sec-team-1105/endpoint-details-activity-log

21fe79e

paul-tavares reviewed May 18, 2021

View reviewed changes

review changes

2dd22ed

Merge branch 'master' into sec-team-1105/endpoint-details-activity-log

567af29

kibanamachine and others added 4 commits May 20, 2021 02:02

Merge branch 'master' into sec-team-1105/endpoint-details-activity-log

13e8963

move util function to common/utils

46c187d

in order to use it in endpoint_hosts as well as in trusted _apps review suggestion

use util function to get API path

691b90a

review suggestion

sync url params with details active tab

3859af9

review suggestion

elastic deleted a comment from kibanamachine May 25, 2021

ashokaditya added 3 commits May 25, 2021 12:17

Merge branch 'master' into sec-team-1105/endpoint-details-activity-log

3722552

fix types due to merge commit

923a157

refs 3722552

use AsyncResourseState type

c5ade7b

review suggestions

kibanamachine and others added 2 commits May 28, 2021 05:28

Merge branch 'master' into sec-team-1105/endpoint-details-activity-log

fd390c8

make the search bar work (sort of)

f9b95b9

this needs to be fleshed out in a later PR

pzl reviewed May 28, 2021

View reviewed changes

add tests to middleware for now

299dc91

paul-tavares reviewed May 28, 2021

View reviewed changes

kibanamachine and others added 6 commits May 31, 2021 03:45

Merge branch 'master' into sec-team-1105/endpoint-details-activity-log

0d907f8

use snake case for naming routes

1c54aaa

review changes

rename and use own relative time function

e38e202

review change

use euiTheme tokens

31cf7af

review change

add a comment

33f7d0b

review changes

log errors to kibana log and unwind stack

8d46a98

review changes

ashokaditya mentioned this pull request Jun 1, 2021

[Security Solution][Endpoint] Actions Log API #101032

Merged

6 tasks

Merge branch 'master' into sec-team-1105/endpoint-details-activity-log

a77204e

Merge branch 'master' into sec-team-1105/endpoint-details-activity-log

8fb56f5

paul-tavares approved these changes Jun 2, 2021

View reviewed changes

use FleetActionGenerator for mocking data

6a2cace

review changes

ashokaditya added the auto-backport Deprecated - use backport:version if exact versions are needed label Jun 2, 2021

Merge branch 'master' into sec-team-1105/endpoint-details-activity-log

453d034

ashokaditya merged commit d4ecee6 into elastic:master Jun 3, 2021

ashokaditya deleted the sec-team-1105/endpoint-details-activity-log branch June 3, 2021 07:23

kibanamachine mentioned this pull request Jun 3, 2021

[7.x] [Security Solution] [Endpoint] Add endpoint details activity log (#99795) #101244

Merged

ashokaditya mentioned this pull request Jun 16, 2021

[Security Solution][Endpoint] Paginate actions log with infinite scroll #102261

Merged

5 tasks

	padding-bottom: 48px;
	padding-bottom: {(props) => props.theme.eui.paddingSizes.xl};

	export const FormattedDateAndTime: React.FC<{ date: Date }> = ({ date }) => {
	// If date is greater than or equal to 1h (ago), then show it as a date
	// else, show it as relative to "now"
	return Date.now() - date.getTime() >= 3.6e6 ? (
	<>
	<FormattedDate value={date} year="numeric" month="short" day="2-digit" />
	{' @'}
	<FormattedTime value={date} />
	</>
	) : (
	<>
	<FormattedRelative value={date} />
	</>
	);
	};

Conversation

ashokaditya commented May 11, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Checklist

For maintainers

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ashokaditya commented May 18, 2021

Uh oh!

paul-tavares left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ashokaditya commented May 19, 2021

Uh oh!

ashokaditya commented May 20, 2021

Uh oh!

ashokaditya commented May 25, 2021

Uh oh!

kibanamachine commented May 25, 2021

Uh oh!

ashokaditya commented May 25, 2021

Uh oh!

kibanamachine commented May 25, 2021

Uh oh!

pzl left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

paul-tavares left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ashokaditya May 31, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ashokaditya commented May 11, 2021 •

edited

Loading

ashokaditya May 31, 2021 •

edited

Loading