diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_process_detail.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_process_detail.tsx index 3127c7132df3d..5d90cd11d31af 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_process_detail.tsx +++ b/x-pack/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/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_related_detail.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_related_detail.tsx index 152cc6b7001ca..4544381d94955 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_related_detail.tsx +++ b/x-pack/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}" /> - + + + @@ -340,14 +348,15 @@ export const RelatedEventDetail = memo(function RelatedEventDetail({ return ( {index === 0 ? null : } - - + + {sectionTitle} + - + + + diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_utilities.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_utilities.tsx index 93cc67fb67d23..374c4c94c7768 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_utilities.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_utilities.tsx @@ -1,122 +1,122 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import { i18n } from '@kbn/i18n'; -import { EuiBreadcrumbs, EuiCode, EuiBetaBadge } from '@elastic/eui'; -import styled from 'styled-components'; -import React, { memo } from 'react'; -import { useResolverTheme } from '../assets'; - -/** - * A bold version of EuiCode to display certain titles with - */ -export const BoldCode = styled(EuiCode)` - &.euiCodeBlock code.euiCodeBlock__code { - font-weight: 900; - } -`; - -const BetaHeader = styled(`header`)` - margin-bottom: 1em; -`; - -/** - * The two query parameters we read/write on to control which view the table presents: - */ -export interface CrumbInfo { - readonly crumbId: string; - readonly crumbEvent: string; -} - -const ThemedBreadcrumbs = styled(EuiBreadcrumbs)<{ background: string; text: string }>` - &.euiBreadcrumbs.euiBreadcrumbs--responsive { - background-color: ${(props) => props.background}; - color: ${(props) => props.text}; - padding: 1em; - border-radius: 5px; - } - - & .euiBreadcrumbSeparator { - background: ${(props) => props.text}; - } -`; - -const betaBadgeLabel = i18n.translate( - 'xpack.securitySolution.enpdoint.resolver.panelutils.betaBadgeLabel', - { - defaultMessage: 'BETA', - } -); - -/** - * A component to keep time representations in blocks so they don't wrap - * and look bad. - */ -export const StyledTime = memo(styled('time')` - display: inline-block; - text-align: start; -`); - -type Breadcrumbs = Parameters[0]['breadcrumbs']; -/** - * Breadcrumb menu with adjustments per direction from UX team - */ -export const StyledBreadcrumbs = memo(function StyledBreadcrumbs({ - breadcrumbs, -}: { - breadcrumbs: Breadcrumbs; -}) { - const { - colorMap: { resolverBreadcrumbBackground, resolverEdgeText }, - } = useResolverTheme(); - return ( - <> - - - - - - ); -}); - -/** - * Long formatter (to second) for DateTime - */ -export const formatter = new Intl.DateTimeFormat(i18n.getLocale(), { - year: 'numeric', - month: '2-digit', - day: '2-digit', - hour: '2-digit', - minute: '2-digit', - second: '2-digit', -}); - -const invalidDateText = i18n.translate( - 'xpack.securitySolution.enpdoint.resolver.panelutils.invaliddate', - { - defaultMessage: 'Invalid Date', - } -); -/** - * @returns {string} A nicely formatted string for a date - */ -export function formatDate( - /** To be passed through Date->Intl.DateTimeFormat */ timestamp: ConstructorParameters< - typeof Date - >[0] -): string { - const date = new Date(timestamp); - if (isFinite(date.getTime())) { - return formatter.format(date); - } else { - return invalidDateText; - } -} +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { i18n } from '@kbn/i18n'; +import { EuiBreadcrumbs, EuiCode, EuiBetaBadge } from '@elastic/eui'; +import styled from 'styled-components'; +import React, { memo } from 'react'; +import { useResolverTheme } from '../assets'; + +/** + * A bold version of EuiCode to display certain titles with + */ +export const BoldCode = styled(EuiCode)` + &.euiCodeBlock code.euiCodeBlock__code { + font-weight: 900; + } +`; + +const BetaHeader = styled(`header`)` + margin-bottom: 1em; +`; + +/** + * The two query parameters we read/write on to control which view the table presents: + */ +export interface CrumbInfo { + readonly crumbId: string; + readonly crumbEvent: string; +} + +const ThemedBreadcrumbs = styled(EuiBreadcrumbs)<{ background: string; text: string }>` + &.euiBreadcrumbs.euiBreadcrumbs--responsive { + background-color: ${(props) => props.background}; + color: ${(props) => props.text}; + padding: 1em; + border-radius: 5px; + } + + & .euiBreadcrumbSeparator { + background: ${(props) => props.text}; + } +`; + +const betaBadgeLabel = i18n.translate( + 'xpack.securitySolution.enpdoint.resolver.panelutils.betaBadgeLabel', + { + defaultMessage: 'BETA', + } +); + +/** + * A component to keep time representations in blocks so they don't wrap + * and look bad. + */ +export const StyledTime = memo(styled('time')` + display: inline-block; + text-align: start; +`); + +type Breadcrumbs = Parameters[0]['breadcrumbs']; +/** + * Breadcrumb menu with adjustments per direction from UX team + */ +export const StyledBreadcrumbs = memo(function StyledBreadcrumbs({ + breadcrumbs, +}: { + breadcrumbs: Breadcrumbs; +}) { + const { + colorMap: { resolverBreadcrumbBackground, resolverEdgeText }, + } = useResolverTheme(); + return ( + <> + + + + + + ); +}); + +/** + * Long formatter (to second) for DateTime + */ +export const formatter = new Intl.DateTimeFormat(i18n.getLocale(), { + year: 'numeric', + month: '2-digit', + day: '2-digit', + hour: '2-digit', + minute: '2-digit', + second: '2-digit', +}); + +const invalidDateText = i18n.translate( + 'xpack.securitySolution.enpdoint.resolver.panelutils.invaliddate', + { + defaultMessage: 'Invalid Date', + } +); +/** + * @returns {string} A nicely formatted string for a date + */ +export function formatDate( + /** To be passed through Date->Intl.DateTimeFormat */ timestamp: ConstructorParameters< + typeof Date + >[0] +): string { + const date = new Date(timestamp); + if (isFinite(date.getTime())) { + return formatter.format(date); + } else { + return invalidDateText; + } +} diff --git a/x-pack/plugins/security_solution/public/resolver/view/styles.tsx b/x-pack/plugins/security_solution/public/resolver/view/styles.tsx index 2a1e67f4a9fdc..4cdb29b283f1e 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/styles.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/styles.tsx @@ -48,6 +48,8 @@ export const StyledPanel = styled(Panel)` overflow: auto; width: 25em; max-width: 50%; + border-radius: 0; + border-top: none; `; /**