abstract logEntry component logic

review changes
elastic · Jun 10, 2021 · 6cae67f · 6cae67f
1 parent d49e254
commit 6cae67f
Show file tree

Hide file tree

Showing 3 changed files with 139 additions and 69 deletions.
diff --git a/...ity_solution/public/management/pages/endpoint_hosts/view/details/components/log_entry.tsx b/...ity_solution/public/management/pages/endpoint_hosts/view/details/components/log_entry.tsx
@@ -8,11 +8,11 @@
 import React, { memo } from 'react';
 import styled from 'styled-components';
 
-import { EuiAvatar, EuiAvatarProps, EuiCommentProps, EuiComment, EuiText } from '@elastic/eui';
+import { EuiComment, EuiCommentProps, EuiText } from '@elastic/eui';
 import { Immutable, ActivityLogEntry } from '../../../../../../../common/endpoint/types';
 import { FormattedDateAndTime } from '../../../../../../common/components/endpoint/formatted_date_time';
-import { useEuiTheme } from '../../../../../../common/lib/theme/use_eui_theme';
-import * as i18 from '../../translations';
+import { LogEntryTimelineIcon } from './log_entry_timeline_icon';
+import { useLogEntryUIElements } from '../../hooks/hooks';
 
 const StyledEuiComment = styled(EuiComment)`
   .euiCommentEvent__headerTimestamp {
@@ -33,81 +33,34 @@ const StyledEuiComment = styled(EuiComment)`
     }
   }
 `;
-export const LogEntry = memo(({ logEntry }: { logEntry: Immutable<ActivityLogEntry> }) => {
-  const euiTheme = useEuiTheme();
-  let iconType = 'dot';
-  let commentType: EuiCommentProps['type'] = 'update';
-  let commentText;
-  let avatarSize: EuiAvatarProps['size'] = 's';
-  let isIsolateAction = false;
-  let isSuccessful = false;
-  let displayComment = false;
-  let displayResponseEvent = true;
-  let username: EuiCommentProps['username'] = '';
-  if (logEntry.type === 'action') {
-    avatarSize = 'm';
-    commentType = 'regular';
-    commentText = logEntry.item.data.data.comment ?? '';
-    displayResponseEvent = false;
-    iconType = 'lockOpen';
-    username = logEntry.item.data.user_id;
-    if (logEntry.item.data.data) {
-      const data = logEntry.item.data.data;
-      if (data.command === 'isolate') {
-        iconType = 'lock';
-        isIsolateAction = true;
-      }
-      if (data.comment) {
-        displayComment = true;
-      }
-    }
-  } else if (logEntry.type === 'response') {
-    if (logEntry.item.data.action_data.command === 'isolate') {
-      isIsolateAction = true;
-    }
-    if (!!logEntry.item.data.completed_at && !logEntry.item.data.error) {
-      isSuccessful = true;
-    }
-  }
 
-  const timelineIcon = (
-    <EuiAvatar
-      name="Timeline Icon"
-      size={avatarSize}
-      color={
-        logEntry.type === 'response' && !isSuccessful
-          ? euiTheme.euiColorVis9_behindText
-          : euiTheme.euiColorLightestShade
-      }
-      iconColor="default"
-      iconType={iconType}
-    />
-  );
-  const actionEventTitle = `${
-    isIsolateAction
-      ? i18.ACTIVITY_LOG.LogEntry.action.isolated
-      : i18.ACTIVITY_LOG.LogEntry.action.unisolated
-  } ${i18.ACTIVITY_LOG.LogEntry.host}`;
-  const responseEventTitle = `${i18.ACTIVITY_LOG.LogEntry.host}  ${
-    isIsolateAction
-      ? i18.ACTIVITY_LOG.LogEntry.response.isolation
-      : i18.ACTIVITY_LOG.LogEntry.response.unisolation
-  } ${
-    isSuccessful
-      ? i18.ACTIVITY_LOG.LogEntry.response.successful
-      : i18.ACTIVITY_LOG.LogEntry.response.failed
-  }`;
+export const LogEntry = memo(({ logEntry }: { logEntry: Immutable<ActivityLogEntry> }) => {
+  const {
+    actionEventTitle,
+    avatarSize,
+    commentText,
+    commentType,
+    displayComment,
+    displayResponseEvent,
+    iconType,
+    isResponseEvent,
+    isSuccessful,
+    responseEventTitle,
+    username,
+  } = useLogEntryUIElements(logEntry);
 
   return (
     <StyledEuiComment
-      type={commentType}
+      type={(commentType ?? 'regular') as EuiCommentProps['type']}
       username={username}
       timestamp={FormattedDateAndTime({
         date: new Date(logEntry.item.data['@timestamp']),
         showRelativeTime: true,
       })}
       event={<b>{displayResponseEvent ? responseEventTitle : actionEventTitle}</b>}
-      timelineIcon={timelineIcon}
+      timelineIcon={
+        <LogEntryTimelineIcon {...{ avatarSize, iconType, isResponseEvent, isSuccessful }} />
+      }
       data-test-subj="timelineEntry"
     >
       {displayComment ? (

diff --git a/...ublic/management/pages/endpoint_hosts/view/details/components/log_entry_timeline_icon.tsx b/...ublic/management/pages/endpoint_hosts/view/details/components/log_entry_timeline_icon.tsx
@@ -0,0 +1,42 @@
+/*
+ * 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 } from 'react';
+import { EuiAvatar, EuiAvatarProps } from '@elastic/eui';
+import { useEuiTheme } from '../../../../../../common/lib/theme/use_eui_theme';
+
+export const LogEntryTimelineIcon = memo(
+  ({
+    avatarSize,
+    isResponseEvent,
+    isSuccessful,
+    iconType,
+  }: {
+    avatarSize: EuiAvatarProps['size'];
+    isResponseEvent: boolean;
+    isSuccessful: boolean;
+    iconType: EuiAvatarProps['iconType'];
+  }) => {
+    const euiTheme = useEuiTheme();
+
+    return (
+      <EuiAvatar
+        name="Timeline Icon"
+        size={avatarSize ?? 's'}
+        color={
+          isResponseEvent && !isSuccessful
+            ? euiTheme.euiColorVis9_behindText
+            : euiTheme.euiColorLightestShade
+        }
+        iconColor="default"
+        iconType={iconType ?? 'dot'}
+      />
+    );
+  }
+);
+
+LogEntryTimelineIcon.displayName = 'LogEntryTimelineIcon';
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks/hooks.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks/hooks.ts
@@ -5,15 +5,19 @@
  * 2.0.
  */
 
+import { EuiAvatarProps, EuiCommentProps, IconType } from '@elastic/eui';
+
 import { useSelector } from 'react-redux';
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 import { EndpointState } from '../../types';
 import { State } from '../../../../../common/store';
 import {
   MANAGEMENT_STORE_ENDPOINTS_NAMESPACE,
   MANAGEMENT_STORE_GLOBAL_NAMESPACE,
 } from '../../../../common/constants';
 import { useKibana } from '../../../../../common/lib/kibana';
+import { Immutable, ActivityLogEntry } from '../../../../../../common/endpoint/types';
+import * as i18 from '../translations';
 
 export function useEndpointSelector<TSelected>(selector: (state: EndpointState) => TSelected) {
   return useSelector(function (state: State) {
@@ -55,3 +59,74 @@ export const useAgentDetailsIngestUrl = (
     };
   }, [services.application, agentId]);
 };
+
+export const useLogEntryUIElements = (logEntry: Immutable<ActivityLogEntry>) => {
+  const iconType = useRef<IconType>('dot');
+  const commentType = useRef<EuiCommentProps['type']>('update');
+  const commentText = useRef<string | undefined>();
+  const avatarSize = useRef<EuiAvatarProps['size']>('s');
+  const isIsolateAction = useRef<boolean>(false);
+  const isResponseEvent = useRef<boolean>(false);
+  const isSuccessful = useRef<boolean>(false);
+  const displayComment = useRef<boolean>(false);
+  const displayResponseEvent = useRef<boolean>(true);
+  const username = useRef<EuiCommentProps['username']>('');
+
+  return useMemo(() => {
+    if (logEntry.type === 'action') {
+      avatarSize.current = 'm';
+      commentType.current = 'regular';
+      commentText.current = logEntry.item.data.data.comment ?? '';
+      displayResponseEvent.current = false;
+      iconType.current = 'lockOpen';
+      username.current = logEntry.item.data.user_id;
+      if (logEntry.item.data.data) {
+        const data = logEntry.item.data.data;
+        if (data.command === 'isolate') {
+          iconType.current = 'lock';
+          isIsolateAction.current = true;
+        }
+        if (data.comment) {
+          displayComment.current = true;
+        }
+      }
+    } else if (logEntry.type === 'response') {
+      isResponseEvent.current = true;
+      if (logEntry.item.data.action_data.command === 'isolate') {
+        isIsolateAction.current = true;
+      }
+      if (!!logEntry.item.data.completed_at && !logEntry.item.data.error) {
+        isSuccessful.current = true;
+      }
+    }
+
+    const actionEventTitle = `${
+      isIsolateAction.current
+        ? i18.ACTIVITY_LOG.LogEntry.action.isolated
+        : i18.ACTIVITY_LOG.LogEntry.action.unisolated
+    } ${i18.ACTIVITY_LOG.LogEntry.host}`;
+    const responseEventTitle = `${i18.ACTIVITY_LOG.LogEntry.host}  ${
+      isIsolateAction.current
+        ? i18.ACTIVITY_LOG.LogEntry.response.isolation
+        : i18.ACTIVITY_LOG.LogEntry.response.unisolation
+    } ${
+      isSuccessful.current
+        ? i18.ACTIVITY_LOG.LogEntry.response.successful
+        : i18.ACTIVITY_LOG.LogEntry.response.failed
+    }`;
+
+    return {
+      actionEventTitle,
+      avatarSize: avatarSize.current,
+      commentText: commentText.current,
+      commentType: commentType.current,
+      displayComment: displayComment.current,
+      displayResponseEvent: displayResponseEvent.current,
+      iconType: iconType.current,
+      isResponseEvent: isResponseEvent.current,
+      isSuccessful: isSuccessful.current,
+      responseEventTitle,
+      username: username.current,
+    };
+  }, [logEntry]);
+};