diff --git a/x-pack/plugins/security_solution/common/endpoint/types/actions.ts b/x-pack/plugins/security_solution/common/endpoint/types/actions.ts index 3c9be9a823c49..33072e8df5cec 100644 --- a/x-pack/plugins/security_solution/common/endpoint/types/actions.ts +++ b/x-pack/plugins/security_solution/common/endpoint/types/actions.ts @@ -47,6 +47,7 @@ export interface HostIsolationResponse { export interface PendingActionsResponse { agent_id: string; pending_actions: { + /** Number of actions pending for each type. The `key` could be one of the `ISOLATION_ACTIONS` values. */ [key: string]: number; }; } diff --git a/x-pack/plugins/security_solution/public/common/components/endpoint/host_isolation/endpoint_host_isolation_status.tsx b/x-pack/plugins/security_solution/public/common/components/endpoint/host_isolation/endpoint_host_isolation_status.tsx new file mode 100644 index 0000000000000..5cde22de69738 --- /dev/null +++ b/x-pack/plugins/security_solution/public/common/components/endpoint/host_isolation/endpoint_host_isolation_status.tsx @@ -0,0 +1,73 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React, { memo, useMemo } from 'react'; +import { EuiBadge, EuiTextColor } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; + +export interface EndpointHostIsolationStatusProps { + isIsolated: boolean; + /** the count of pending isolate actions */ + pendingIsolate?: number; + /** the count of pending unisoalte actions */ + pendingUnIsolate?: number; +} + +/** + * Component will display a host isoaltion status based on whether it is currently isolated or there are + * isolate/unisolate actions pending. If none of these are applicable, no UI component will be rendered + * (`null` is returned) + */ +export const EndpointHostIsolationStatus = memo( + ({ isIsolated, pendingIsolate = 0, pendingUnIsolate = 0 }) => { + return useMemo(() => { + // If nothing is pending and host is not currently isolated, then render nothing + if (!isIsolated && !pendingIsolate && !pendingUnIsolate) { + return null; + } + + // If nothing is pending, but host is isolated, then show isolation badge + if (!pendingIsolate && !pendingUnIsolate) { + return ( + + + + ); + } + + // If there are multiple types of pending isolation actions, then show count of actions with tooltip that displays breakdown + // TODO:PT implement edge case + // if () { + // + // } + + // Show 'pending [un]isolate' depending on what's pending + return ( + + + {pendingIsolate ? ( + + ) : ( + + )} + + + ); + }, [isIsolated, pendingIsolate, pendingUnIsolate]); + } +); + +EndpointHostIsolationStatus.displayName = 'EndpointHostIsolationStatus'; diff --git a/x-pack/plugins/security_solution/public/common/components/endpoint/host_isolation/index.ts b/x-pack/plugins/security_solution/public/common/components/endpoint/host_isolation/index.ts index f5387a1b1a99c..bd8e23e3a4559 100644 --- a/x-pack/plugins/security_solution/public/common/components/endpoint/host_isolation/index.ts +++ b/x-pack/plugins/security_solution/public/common/components/endpoint/host_isolation/index.ts @@ -8,3 +8,4 @@ export * from './isolate_success'; export * from './isolate_form'; export * from './unisolate_form'; +export * from './endpoint_host_isolation_status';