From 4e0c889b309d34576366560c63c2a5ba3445db91 Mon Sep 17 00:00:00 2001
From: Paul Tavares <56442535+paul-tavares@users.noreply.github.com>
Date: Wed, 9 Jun 2021 14:27:47 -0400
Subject: [PATCH] [Security Solution][Endpoint] Adds Endpoint Host Isolation
 Status common component (#101782)

* Common component for displaying Endpoint Host Isolation status
---
 .../common/endpoint/types/actions.ts          |  1 +
 .../endpoint_host_isolation_status.tsx        | 73 +++++++++++++++++++
 .../endpoint/host_isolation/index.ts          |  1 +
 3 files changed, 75 insertions(+)
 create mode 100644 x-pack/plugins/security_solution/public/common/components/endpoint/host_isolation/endpoint_host_isolation_status.tsx

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 3c9be9a823c498..33072e8df5cec5 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 00000000000000..5cde22de697386
--- /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<EndpointHostIsolationStatusProps>(
+  ({ 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 (
+          <EuiBadge color="hollow">
+            <FormattedMessage
+              id="xpack.securitySolution.endpoint.hostIsolationStatus.isolated"
+              defaultMessage="Isolated"
+            />
+          </EuiBadge>
+        );
+      }
+
+      // 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 (
+        <EuiBadge color="hollow">
+          <EuiTextColor color="subdued">
+            {pendingIsolate ? (
+              <FormattedMessage
+                id="xpack.securitySolution.endpoint.hostIsolationStatus.isIsolating"
+                defaultMessage="Isolating pending"
+              />
+            ) : (
+              <FormattedMessage
+                id="xpack.securitySolution.endpoint.hostIsolationStatus.isUnIsolating"
+                defaultMessage="Unisolating pending"
+              />
+            )}
+          </EuiTextColor>
+        </EuiBadge>
+      );
+    }, [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 f5387a1b1a99c6..bd8e23e3a4559f 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';