Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Security_Solution][Resolver] Style adjustments per UX #71179

Merged
merged 13 commits into from
Jul 13, 2020
Merged

[Security_Solution][Resolver] Style adjustments per UX #71179

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
ab6c260
SQUASH
Jul 8, 2020
4145a43
Merge remote-tracking branch 'upstream/master' into resolver/stylefix…
Jul 8, 2020
ee0e7bb
WIP 2
Jul 8, 2020
8fbb775
add block formatting on time to related list as well
Jul 9, 2020
1e89258
M. Sherrier review: untranslate timestamp / remove top border on panel
Jul 9, 2020
f7ce53d
Merge branch 'master' into resolver/stylefix-related-detail-panel
bkimmel Jul 9, 2020
63087bb
Merge remote-tracking branch 'upstream/master' into resolver/stylefix…
Jul 10, 2020
ae56aca
Merge branch 'master' into resolver/stylefix-related-detail-panel
elasticmachine Jul 10, 2020
5939079
Merge remote-tracking branch 'upstream/master' into resolver/stylefix…
Jul 10, 2020
8082a7e
redo dep
Jul 12, 2020
dcd9717
Merge remote-tracking branch 'upstream/master' into resolver/stylefix…
Jul 12, 2020
90f9820
Merge branch 'resolver/stylefix-related-detail-panel' of https://gith…
Jul 12, 2020
fff971a
CI: replace missing import with type
Jul 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 9 additions & 40 deletions ...ck/plugins/security_solution/public/resolver/view/panels/panel_content_process_detail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
`;

Expand All @@ -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),
Copy link
Contributor

@michaelolo24 michaelolo24 Jul 9, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

double checking, but should the description still be processPath()

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for checking, yeah that's what they call it in ECS:
image

};

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),
};

Expand Down
27 changes: 18 additions & 9 deletions ...ck/plugins/security_solution/public/resolver/view/panels/panel_content_related_detail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -308,7 +314,7 @@ export const RelatedEventDetail = memo(function RelatedEventDetail({

return (
<>
<StyledBreadcrumbs truncate={false} breadcrumbs={crumbs} />
<StyledBreadcrumbs breadcrumbs={crumbs} />
<EuiSpacer size="l" />
<EuiText size="s">
<BoldCode>
Expand All @@ -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>
Expand All @@ -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"
Expand Down
20 changes: 14 additions & 6 deletions x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_related_list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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}>
Expand Down
13 changes: 10 additions & 3 deletions x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_utilities.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,22 @@ const ThemedBreadcrumbs = styled(EuiBreadcrumbs)<{ background: string; text: str
}
`;

/**
* 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;
`);

/**
* Breadcrumb menu with adjustments per direction from UX team
*/
export const StyledBreadcrumbs = memo(function StyledBreadcrumbs({
breadcrumbs,
truncate,
}: {
breadcrumbs: Breadcrumb[];
truncate?: boolean;
}) {
const {
colorMap: { resolverBreadcrumbBackground, resolverEdgeText },
Expand All @@ -58,7 +65,7 @@ export const StyledBreadcrumbs = memo(function StyledBreadcrumbs({
background={resolverBreadcrumbBackground}
text={resolverEdgeText}
breadcrumbs={breadcrumbs}
truncate={truncate}
truncate={false}
/>
);
});
Expand Down
2 changes: 2 additions & 0 deletions x-pack/plugins/security_solution/public/resolver/view/styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,8 @@ export const StyledPanel = styled(Panel)`
overflow: auto;
width: 25em;
max-width: 50%;
border-radius: 0;
border-top: none;
`;

/**
Expand Down