adds hardcoded description blurb

elastic · Feb 24, 2020 · 83994e6 · 83994e6
1 parent 0e7fdc3
commit 83994e6
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 16 deletions.
diff --git a/...ns/endpoint/view/alerts/alert_details.tsx → ...nt/view/alerts/alert_details_overview.tsx b/...ns/endpoint/view/alerts/alert_details.tsx → ...nt/view/alerts/alert_details_overview.tsx
@@ -5,12 +5,19 @@
  */
 import React, { useMemo } from 'react';
 import { memo } from 'react';
-import { EuiAccordion, EuiSpacer, EuiDescriptionList } from '@elastic/eui';
+import {
+  EuiAccordion,
+  EuiSpacer,
+  EuiDescriptionList,
+  EuiTitle,
+  EuiText,
+  EuiHealth,
+} from '@elastic/eui';
 import { FormattedDate } from 'react-intl';
 import { useAlertListSelector } from './hooks/use_alerts_selector';
 import * as selectors from '../../store/alerts/selectors';
 
-export const AlertDetails = memo(() => {
+export const AlertDetailsOverview = memo(() => {
   const alertDetailsData = useAlertListSelector(selectors.selectedAlertDetailsData);
   if (alertDetailsData === undefined) {
     return null;
@@ -118,11 +125,11 @@ export const AlertDetails = memo(() => {
     return [
       {
         title: 'File Name',
-        description: alertDetailsData.host.hostname,
+        description: 'TODO',
       },
       {
         title: 'File Path',
-        description: alertDetailsData.host.ip,
+        description: 'TODO',
       },
       {
         title: 'File Size',
@@ -149,7 +156,7 @@ export const AlertDetails = memo(() => {
         description: 'TODO',
       },
     ];
-  }, [alertDetailsData]);
+  }, []);
 
   const sourceProcessDetailsColumns = useMemo(() => {
     return [
@@ -204,23 +211,43 @@ export const AlertDetails = memo(() => {
     return [
       {
         title: 'SID',
-        description: alertDetailsData.host.hostname,
+        description: 'TODO',
       },
       {
         title: 'Integrity Level',
-        description: alertDetailsData.host.ip,
+        description: 'TODO',
       },
       {
         title: 'Privileges',
         description: 'TODO',
       },
     ];
-  }, [alertDetailsData]);
+  }, []);
 
   return (
     <>
+      {/* Hard coded top level alert details component. TODO: maybe abstract somewhere else? */}
+      <EuiTitle size="s">
+        <h3>Detected Malicious File</h3>
+      </EuiTitle>
+      <EuiSpacer />
+      <EuiText>
+        <p>
+          Endgame MalwareScore detected the opening of a document with a blah blah blah on{' '}
+          {alertDetailsData.host.hostname} on {AlertDetailsDate}
+        </p>
+      </EuiText>
+      <EuiSpacer />
+      <EuiText>
+        Endpoint Status: <EuiHealth color="success">Online</EuiHealth>
+      </EuiText>
+      <EuiSpacer />
+      <EuiText>Alert Status: Open</EuiText>
+      <EuiSpacer />
+
+      {/* Start of Alert Details overview component TODO: delete this comment eventually */}
       <EuiAccordion
-        id="alertDetailsAlertAccordian"
+        id="alertDetailsAlertAccordion"
         buttonContent="Alert"
         paddingSize="l"
         initialIsOpen={true}
@@ -235,7 +262,7 @@ export const AlertDetails = memo(() => {
       <EuiSpacer />
 
       <EuiAccordion
-        id="alertDetailsHostAccordian"
+        id="alertDetailsHostAccordion"
         buttonContent="Host"
         paddingSize="l"
         initialIsOpen={true}
@@ -250,7 +277,7 @@ export const AlertDetails = memo(() => {
       <EuiSpacer />
 
       <EuiAccordion
-        id="alertDetailsHashAccordian"
+        id="alertDetailsHashAccordion"
         buttonContent="Hash"
         paddingSize="l"
         initialIsOpen={true}
@@ -265,7 +292,7 @@ export const AlertDetails = memo(() => {
       <EuiSpacer />
 
       <EuiAccordion
-        id="alertDetailsFileAccordian"
+        id="alertDetailsFileAccordion"
         buttonContent="File"
         paddingSize="l"
         initialIsOpen={true}
@@ -280,7 +307,7 @@ export const AlertDetails = memo(() => {
       <EuiSpacer />
 
       <EuiAccordion
-        id="alertDetailsSourceProcessAccordian"
+        id="alertDetailsSourceProcessAccordion"
         buttonContent="Source Process"
         paddingSize="l"
         initialIsOpen={true}
@@ -295,7 +322,7 @@ export const AlertDetails = memo(() => {
       <EuiSpacer />
 
       <EuiAccordion
-        id="alertDetailsSourceProcessTokenAccordian"
+        id="alertDetailsSourceProcessTokenAccordion"
         buttonContent="Source Process Token"
         paddingSize="l"
         initialIsOpen={true}

diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/view/alerts/index.tsx b/x-pack/plugins/endpoint/public/applications/endpoint/view/alerts/index.tsx
@@ -26,7 +26,7 @@ import { urlFromQueryParams } from './url_from_query_params';
 import { AlertData } from '../../../../../common/types';
 import * as selectors from '../../store/alerts/selectors';
 import { useAlertListSelector } from './hooks/use_alerts_selector';
-import { AlertDetails } from './alert_details';
+import { AlertDetailsOverview } from './alert_details_overview';
 
 export const AlertIndex = memo(() => {
   const history = useHistory();
@@ -218,7 +218,7 @@ export const AlertIndex = memo(() => {
             </EuiTitle>
           </EuiFlyoutHeader>
           <EuiFlyoutBody>
-            {selectedAlertData ? <AlertDetails /> : <EuiLoadingSpinner size="xl" />}
+            {selectedAlertData ? <AlertDetailsOverview /> : <EuiLoadingSpinner size="xl" />}
           </EuiFlyoutBody>
         </EuiFlyout>
       )}