[Security_Solution][Resolver] Style adjustments per UX (#71179) (#71601)

[Security_Solution][Resolver] Style adjustments per UX (#71179)
elastic · Jul 14, 2020 · 6e7d139 · 6e7d139
1 parent ef57e1d
commit 6e7d139
Show file tree

Hide file tree

Showing 5 changed files with 164 additions and 176 deletions.
diff --git a/...ck/plugins/security_solution/public/resolver/view/panels/panel_content_process_detail.tsx b/...ck/plugins/security_solution/public/resolver/view/panels/panel_content_process_detail.tsx
@@ -31,7 +31,7 @@ import { useResolverTheme } from '../assets';
 
 const StyledDescriptionList = styled(EuiDescriptionList)`
   &.euiDescriptionList.euiDescriptionList--column dt.euiDescriptionList__title.desc-title {
-    max-width: 8em;
+    max-width: 10em;
   }
 `;
 
@@ -56,73 +56,42 @@ export const ProcessDetails = memo(function ProcessDetails({
     const dateTime = eventTime ? formatDate(eventTime) : '';
 
     const createdEntry = {
-      title: i18n.translate(
-        'xpack.securitySolution.endpoint.resolver.panel.processDescList.created',
-        {
-          defaultMessage: 'Created',
-        }
-      ),
+      title: '@timestamp',
       description: dateTime,
     };
 
     const pathEntry = {
-      title: i18n.translate('xpack.securitySolution.endpoint.resolver.panel.processDescList.path', {
-        defaultMessage: 'Path',
-      }),
+      title: 'process.executable',
       description: processPath(processEvent),
     };
 
     const pidEntry = {
-      title: i18n.translate('xpack.securitySolution.endpoint.resolver.panel.processDescList.pid', {
-        defaultMessage: 'PID',
-      }),
+      title: 'process.pid',
       description: processPid(processEvent),
     };
 
     const userEntry = {
-      title: i18n.translate('xpack.securitySolution.endpoint.resolver.panel.processDescList.user', {
-        defaultMessage: 'User',
-      }),
+      title: 'user.name',
       description: (userInfoForProcess(processEvent) as { name: string }).name,
     };
 
     const domainEntry = {
-      title: i18n.translate(
-        'xpack.securitySolution.endpoint.resolver.panel.processDescList.domain',
-        {
-          defaultMessage: 'Domain',
-        }
-      ),
+      title: 'user.domain',
       description: (userInfoForProcess(processEvent) as { domain: string }).domain,
     };
 
     const parentPidEntry = {
-      title: i18n.translate(
-        'xpack.securitySolution.endpoint.resolver.panel.processDescList.parentPid',
-        {
-          defaultMessage: 'Parent PID',
-        }
-      ),
+      title: 'process.parent.pid',
       description: processParentPid(processEvent),
     };
 
     const md5Entry = {
-      title: i18n.translate(
-        'xpack.securitySolution.endpoint.resolver.panel.processDescList.md5hash',
-        {
-          defaultMessage: 'MD5',
-        }
-      ),
+      title: 'process.hash.md5',
       description: md5HashForProcess(processEvent),
     };
 
     const commandLineEntry = {
-      title: i18n.translate(
-        'xpack.securitySolution.endpoint.resolver.panel.processDescList.commandLine',
-        {
-          defaultMessage: 'Command Line',
-        }
-      ),
+      title: 'process.args',
       description: argsForProcess(processEvent),
     };
 

diff --git a/...ck/plugins/security_solution/public/resolver/view/panels/panel_content_related_detail.tsx b/...ck/plugins/security_solution/public/resolver/view/panels/panel_content_related_detail.tsx
@@ -10,7 +10,13 @@ import { EuiSpacer, EuiText, EuiDescriptionList, EuiTextColor, EuiTitle } from '
 import styled from 'styled-components';
 import { useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
-import { CrumbInfo, formatDate, StyledBreadcrumbs, BoldCode } from './panel_content_utilities';
+import {
+  CrumbInfo,
+  formatDate,
+  StyledBreadcrumbs,
+  BoldCode,
+  StyledTime,
+} from './panel_content_utilities';
 import * as event from '../../../../common/endpoint/models/event';
 import { ResolverEvent } from '../../../../common/endpoint/types';
 import * as selectors from '../../store/selectors';
@@ -321,11 +327,13 @@ export const RelatedEventDetail = memo(function RelatedEventDetail({
             defaultMessage="{category} {eventType}"
           />
         </BoldCode>
-        <FormattedMessage
-          id="xpack.securitySolution.endpoint.resolver.panel.relatedEventDetail.atTime"
-          values={{ date: formattedDate }}
-          defaultMessage="@ {date}"
-        />
+        <StyledTime dateTime={formattedDate}>
+          <FormattedMessage
+            id="xpack.securitySolution.endpoint.resolver.panel.relatedEventDetail.atTime"
+            values={{ date: formattedDate }}
+            defaultMessage="@ {date}"
+          />
+        </StyledTime>
       </EuiText>
       <EuiSpacer size="m" />
       <EuiText>
@@ -340,14 +348,15 @@ export const RelatedEventDetail = memo(function RelatedEventDetail({
         return (
           <Fragment key={index}>
             {index === 0 ? null : <EuiSpacer size="m" />}
-            <EuiTitle size="xs">
-              <EuiTextColor color="secondary">
+            <EuiTitle size="xxxs">
+              <EuiTextColor color="subdued">
                 <StyledFlexTitle>
                   {sectionTitle}
                   <TitleHr />
                 </StyledFlexTitle>
               </EuiTextColor>
             </EuiTitle>
+            <EuiSpacer size="m" />
             <StyledDescriptionList
               type="column"
               align="left"

diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_related_list.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_related_list.tsx
@@ -9,7 +9,13 @@ import { i18n } from '@kbn/i18n';
 import { EuiTitle, EuiSpacer, EuiText, EuiButtonEmpty, EuiHorizontalRule } from '@elastic/eui';
 import { useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
-import { CrumbInfo, formatDate, StyledBreadcrumbs, BoldCode } from './panel_content_utilities';
+import {
+  CrumbInfo,
+  formatDate,
+  StyledBreadcrumbs,
+  BoldCode,
+  StyledTime,
+} from './panel_content_utilities';
 import * as event from '../../../../common/endpoint/models/event';
 import { ResolverEvent, ResolverNodeStats } from '../../../../common/endpoint/types';
 import * as selectors from '../../store/selectors';
@@ -61,11 +67,13 @@ const DisplayList = memo(function DisplayList({
                     defaultMessage="{category} {eventType}"
                   />
                 </BoldCode>
-                <FormattedMessage
-                  id="xpack.securitySolution.endpoint.resolver.panel.relatedEventDetail.atTime"
-                  values={{ date: eventView.formattedDate }}
-                  defaultMessage="@ {date}"
-                />
+                <StyledTime dateTime={eventView.formattedDate}>
+                  <FormattedMessage
+                    id="xpack.securitySolution.endpoint.resolver.panel.relatedEventDetail.atTime"
+                    values={{ date: eventView.formattedDate }}
+                    defaultMessage="@ {date}"
+                  />
+                </StyledTime>
               </EuiText>
               <EuiSpacer size="xs" />
               <EuiButtonEmpty onClick={eventView.setQueryParams}>