[Security Solution][Endpoint][Admin] Endpoint Details UX Enhancements by parkiino · Pull Request #90870 · elastic/kibana

parkiino · 2021-02-09T22:50:58Z

Summary

In Endpoint Details flyout

Expands flyout size to M
Adds a row for Agent Status (aka host status)
Changes policy status to a clickable badge
Ensures each IP address is on its own line and truncates
Revision number is on the same line as the integration policy name
Policy Response drawer spacing is closer together, and "Policy Response" header is closer to the endpoint details back button
Removes icon next to Reassign Policy link

Screenshots

^above image is not updated, but the icon next to the REASSIGN POLICY link is updated to use the management icon

Policy Response BEFORE

Policy Response AFTER

…point-details

elasticmachine · 2021-02-11T14:56:11Z

Pinging @elastic/esecurity-onboarding-and-lifecycle-mgt (Feature:Endpoint)

elasticmachine · 2021-02-11T14:56:12Z

Pinging @elastic/security-onboarding-and-lifecycle-mgt (Team:Onboarding and Lifecycle Mgt)

kevinlog · 2021-02-11T15:08:03Z

@parkiino could update the image asset for "reassign policy" here so that it matches the mock?

I know there wasn't a specific callout in the original ticket for that, but it would be good to pull that in

Mock:

…point-details

kevinlog · 2021-02-11T23:23:58Z

...s/security_solution/public/management/pages/endpoint_hosts/view/details/endpoint_details.tsx

-            <EuiHealth
-              color={POLICY_STATUS_TO_HEALTH_COLOR[policyStatus] || 'subdued'}
-              data-test-subj="policyStatusHealth"
+            /** EuiBadge requires additional unnecessary props when the href prop is defined */


what does it require? Is it possible to pass empty values so that we can avoid the @ts-ignore ?

so there's actually a bug where euibadge uses the wrong type when both an onclick and an href are used, it's being tracked in this ticket: elastic/eui#4530

kevinlog · 2021-02-11T23:30:41Z

Checked it out and it looks good to me, left a comment about ts-ignore that should get answered.

One thing I noticed in the mock that we never called out in the ticket was a Host page link. I'm ok to add that in a follow up ticket/PR so that we can get this improvement in before FF.

fyi @bfishel ^^

paul-tavares

Approving but left some comments/questions. Those, if applicable, can be addressed in a subsequent PR.

paul-tavares · 2021-02-16T16:34:48Z

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

  query_strategy_version: MetadataQueryStrategyVersions;
  /* policy IDs and versions */
  policy_info?: HostInfo['policy_info'];
+  host_status?: HostStatus;


Curious: was this missing? or was it introduced recently and part of an merge upstream?

i believe it was in the hostInfo type (aka the type for the endpoint list) but not for the details

paul-tavares · 2021-02-16T16:35:52Z

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

+export const hostStatusInfo: (state: Immutable<EndpointState>) => HostStatus = createSelector(
+  (state) => state.hostStatus,
+  (hostStatus) => {
+    return hostStatus ? hostStatus : HostStatus.ERROR;


I assume we don't have an UNKNOWN type? If we do, would it make more sense here to set it to UNKOWN?

yup there is no unknown type, do you think it's better to make another type, or just set it to a different type?

paul-tavares · 2021-02-16T16:37:50Z

...s/security_solution/public/management/pages/endpoint_hosts/view/details/endpoint_details.tsx

+              <EuiText size="m">
+                <FormattedMessage
+                  id="xpack.securitySolution.endpoint.list.hostStatusValue"
+                  defaultMessage="{hostStatus, select, online {Online} error {Error} unenrolling {Unenrolling} other {Offline}}"


So here we use Offline for antyhing that is not online, error or unenrolling

yup -- this is just following the pattern from the endpoint list, since it already shows Agent status. i'm not sure if we wanted to further differentiate things.

paul-tavares · 2021-02-16T16:41:13Z

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


 EndpointDetailsFlyout.displayName = 'EndpointDetailsFlyout';

+const PolicyResponseFlyout = styled.div`


😨
Just want to confirm that this deviation from Eui is absolutely needed.

cc:/ @bfishel

there is a lot of space in between the back to endpoint details link and the beginning of the policy response, which is why the padding adjusted was added

…point-details

kibanamachine · 2021-02-17T01:09:34Z

💚 Build Succeeded

Metrics [docs]

Async chunks

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

id	before	after	diff
`securitySolution`	7.5MB	7.6MB	+2.1KB

History

💔 Build #107034 failed 63beff2
💚 Build #106270 succeeded 27ef8e4
💚 Build #106250 succeeded 0dff7b7
💚 Build #106204 succeeded 0cb37b0
💔 Build #105829 failed 1a75c0a

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

…#90870) (#91600)

* master: (157 commits) [DOCS] Adds machine learning to the security section of alerting (elastic#91501) [Uptime] Ping list step screenshot caption formatting (elastic#91403) [Vislib] Use timestamp on brush event instead of iso dates (elastic#91483) [Application Usage] Remove deprecated & unused legacy.appChanged API (elastic#91464) Migrate logstash, monitoring, url_drilldowns, xpack_legacy to ts projects (elastic#91194) [APM] Wrap Elasticsearch client errors (elastic#91125) [APM] Fix optimize-tsconfig script (elastic#91487) [Discover][docs] Add searchFieldsFromSource description (elastic#90980) Adds support for 'ip' data type (elastic#85087) [Detection Rules] Add updates from 7.11.2 rules (elastic#91553) [SECURITY SOLUTION] Eql in timeline (elastic#90816) [APM] Correlations Beta (elastic#86477) (elastic#89952) [Security Solutions][Detection Engine] Adds a warning banner when the alerts data has not been migrated yet. (elastic#90258) [Security Solution] [Timeline] Endpoint row renderers (2nd batch) (elastic#91446) skip flaky suite (elastic#91450) skip flaky suite (elastic#91592) [Security Solution][Endpoint][Admin] Endpoint Details UX Enhancements (elastic#90870) [ML] Add better UI support for runtime fields Transforms (elastic#90363) [Security Solution] [Detections] Replace 'partial failure' with 'warning' for rule statuses (elastic#91167) [Security Solution][Detections] Adds Indicator path config for indicator match rules (elastic#91260) ...

parkiino added 4 commits February 8, 2021 15:12

m flyout, agent status

b640a50

Merge remote-tracking branch 'upstream/master' into task/prettify-end…

decfc2b

…point-details

policy status to badge, policy version same line

ce28b6b

add ts-ignore for eui badge

1a75c0a

parkiino added Feature:Endpoint Elastic Endpoint feature release_note:skip Skip the PR/issue when compiling release notes Team:Defend Workflows “EDR Workflows” sub-team of Security Solution v7.12.0 v8.0.0 labels Feb 11, 2021

parkiino marked this pull request as ready for review February 11, 2021 14:56

parkiino requested a review from a team as a code owner February 11, 2021 14:56

parkiino added 4 commits February 11, 2021 15:13

modify tests, policy response spacing alts

0cb37b0

add tests

48bf508

Merge remote-tracking branch 'upstream/master' into task/prettify-end…

0dff7b7

…point-details

updated management icon

27ef8e4

kevinlog reviewed Feb 11, 2021

View reviewed changes

paul-tavares approved these changes Feb 16, 2021

View reviewed changes

parkiino added 3 commits February 16, 2021 16:34

add github issue, removes extraneous hoststatus update

f570137

Merge remote-tracking branch 'upstream/master' into task/prettify-end…

63beff2

…point-details

typecheck

99e5c77

kevinlog approved these changes Feb 16, 2021

View reviewed changes

parkiino merged commit e2a288e into elastic:master Feb 17, 2021

parkiino deleted the task/prettify-endpoint-details branch February 17, 2021 02:34

parkiino mentioned this pull request Feb 17, 2021

[7.x] [Security Solution][Endpoint][Admin] Endpoint Details UX Enhancements (#90870) #91600

Merged

parkiino added a commit that referenced this pull request Feb 17, 2021

[Security Solution][Endpoint][Admin] Endpoint Details UX Enhancements (…

c5599fe

…#90870) (#91600)


		EndpointDetailsFlyout.displayName = 'EndpointDetailsFlyout';

		const PolicyResponseFlyout = styled.div`

Conversation

parkiino commented Feb 9, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Screenshots

Uh oh!

elasticmachine commented Feb 11, 2021

Uh oh!

elasticmachine commented Feb 11, 2021

Uh oh!

kevinlog commented Feb 11, 2021

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!

kevinlog commented Feb 11, 2021

Uh oh!

paul-tavares 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!

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!

kibanamachine commented Feb 17, 2021

💚 Build Succeeded

Metrics [docs]

Async chunks

History

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

parkiino commented Feb 9, 2021 •

edited

Loading