mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 09:19:04 -04:00
# Backport This will backport the following commits from `main` to `8.11`: - [[Security Solution] Fix analyzer panel width (#172026)](https://github.com/elastic/kibana/pull/172026) <!--- Backport version: 8.9.7 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"christineweng","email":"18648970+christineweng@users.noreply.github.com"},"sourceCommit":{"committedDate":"2023-11-30T21:14:57Z","message":"[Security Solution] Fix analyzer panel width (#172026)\n\n## Summary\r\n\r\nFixes column not breaking correctly in analyzer. 3 places where this bug\r\noccured: node details, event details and control panel. Event details\r\npanel was fixed in [PR](https://github.com/elastic/kibana/pull/170329).\r\nThis PR covers the other two.\r\n\r\n\r\n\r\n\r\n### Checklist\r\n\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"2e52943bc70f49b7b3dab448d839c4af0e636328","branchLabelMapping":{"^v8.12.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team: SecuritySolution","Team:Threat Hunting:Investigations","v8.12.0","v8.11.2"],"number":172026,"url":"https://github.com/elastic/kibana/pull/172026","mergeCommit":{"message":"[Security Solution] Fix analyzer panel width (#172026)\n\n## Summary\r\n\r\nFixes column not breaking correctly in analyzer. 3 places where this bug\r\noccured: node details, event details and control panel. Event details\r\npanel was fixed in [PR](https://github.com/elastic/kibana/pull/170329).\r\nThis PR covers the other two.\r\n\r\n\r\n\r\n\r\n### Checklist\r\n\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"2e52943bc70f49b7b3dab448d839c4af0e636328"}},"sourceBranch":"main","suggestedTargetBranches":["8.11"],"targetPullRequestStates":[{"branch":"main","label":"v8.12.0","labelRegex":"^v8.12.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/172026","number":172026,"mergeCommit":{"message":"[Security Solution] Fix analyzer panel width (#172026)\n\n## Summary\r\n\r\nFixes column not breaking correctly in analyzer. 3 places where this bug\r\noccured: node details, event details and control panel. Event details\r\npanel was fixed in [PR](https://github.com/elastic/kibana/pull/170329).\r\nThis PR covers the other two.\r\n\r\n\r\n\r\n\r\n### Checklist\r\n\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"2e52943bc70f49b7b3dab448d839c4af0e636328"}},{"branch":"8.11","label":"v8.11.2","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: christineweng <18648970+christineweng@users.noreply.github.com>
This commit is contained in:
Kibana Machine
GitHub
parent
3c9b73edec
commit
fb019230f0
4 changed files with 38 additions and 85 deletions
|
|
@ -59,14 +59,14 @@ const StyledGraphControlsColumn = styled.div`
|
|||
}
|
||||
`;
|
||||
|
||||
const COLUMN_WIDTH = ['fit-content(10em)', 'auto'];
|
||||
|
||||
const StyledEuiDescriptionListTitle = styled(EuiDescriptionListTitle)`
|
||||
text-transform: uppercase;
|
||||
max-width: 25%;
|
||||
`;
|
||||
|
||||
const StyledEuiDescriptionListDescription = styled(EuiDescriptionListDescription)`
|
||||
min-width: 75%;
|
||||
width: 75%;
|
||||
lineheight: '2.2em'; // lineHeight to align center vertically
|
||||
`;
|
||||
|
||||
const StyledEuiButtonIcon = styled(EuiButtonIcon)<StyledGraphControlProps>`
|
||||
|
|
@ -386,52 +386,35 @@ const SchemaInformation = ({
|
|||
<StyledDescriptionList
|
||||
data-test-subj="resolver:graph-controls:schema-info"
|
||||
type="column"
|
||||
columnWidths={COLUMN_WIDTH}
|
||||
align="left"
|
||||
compressed
|
||||
>
|
||||
<>
|
||||
<StyledEuiDescriptionListTitle
|
||||
data-test-subj="resolver:graph-controls:schema-info:title"
|
||||
style={{ width: '30%' }}
|
||||
>
|
||||
<StyledEuiDescriptionListTitle data-test-subj="resolver:graph-controls:schema-info:title">
|
||||
{i18n.translate('xpack.securitySolution.resolver.graphControls.schemaSource', {
|
||||
defaultMessage: 'source',
|
||||
})}
|
||||
</StyledEuiDescriptionListTitle>
|
||||
<StyledEuiDescriptionListDescription
|
||||
data-test-subj="resolver:graph-controls:schema-info:description"
|
||||
style={{ width: '70%' }}
|
||||
>
|
||||
<EuiDescriptionListDescription data-test-subj="resolver:graph-controls:schema-info:description">
|
||||
<GeneratedText>{sourceAndSchema?.dataSource ?? unknownSchemaValue}</GeneratedText>
|
||||
</StyledEuiDescriptionListDescription>
|
||||
<StyledEuiDescriptionListTitle
|
||||
data-test-subj="resolver:graph-controls:schema-info:title"
|
||||
style={{ width: '30%' }}
|
||||
>
|
||||
</EuiDescriptionListDescription>
|
||||
<StyledEuiDescriptionListTitle data-test-subj="resolver:graph-controls:schema-info:title">
|
||||
{i18n.translate('xpack.securitySolution.resolver.graphControls.schemaID', {
|
||||
defaultMessage: 'id',
|
||||
})}
|
||||
</StyledEuiDescriptionListTitle>
|
||||
<StyledEuiDescriptionListDescription
|
||||
data-test-subj="resolver:graph-controls:schema-info:description"
|
||||
style={{ width: '70%' }}
|
||||
>
|
||||
<EuiDescriptionListDescription data-test-subj="resolver:graph-controls:schema-info:description">
|
||||
<GeneratedText>{sourceAndSchema?.schema.id ?? unknownSchemaValue}</GeneratedText>
|
||||
</StyledEuiDescriptionListDescription>
|
||||
<StyledEuiDescriptionListTitle
|
||||
data-test-subj="resolver:graph-controls:schema-info:title"
|
||||
style={{ width: '30%' }}
|
||||
>
|
||||
</EuiDescriptionListDescription>
|
||||
<StyledEuiDescriptionListTitle data-test-subj="resolver:graph-controls:schema-info:title">
|
||||
{i18n.translate('xpack.securitySolution.resolver.graphControls.schemaEdge', {
|
||||
defaultMessage: 'edge',
|
||||
})}
|
||||
</StyledEuiDescriptionListTitle>
|
||||
<StyledEuiDescriptionListDescription
|
||||
data-test-subj="resolver:graph-controls:schema-info:description"
|
||||
style={{ width: '70%' }}
|
||||
>
|
||||
<EuiDescriptionListDescription data-test-subj="resolver:graph-controls:schema-info:description">
|
||||
<GeneratedText>{sourceAndSchema?.schema.parent ?? unknownSchemaValue}</GeneratedText>
|
||||
</StyledEuiDescriptionListDescription>
|
||||
</EuiDescriptionListDescription>
|
||||
</>
|
||||
</StyledDescriptionList>
|
||||
</div>
|
||||
|
|
@ -493,14 +476,12 @@ const NodeLegend = ({
|
|||
<StyledDescriptionList
|
||||
data-test-subj="resolver:graph-controls:node-legend"
|
||||
type="column"
|
||||
columnWidths={COLUMN_WIDTH}
|
||||
align="left"
|
||||
compressed
|
||||
>
|
||||
<>
|
||||
<StyledEuiDescriptionListTitle
|
||||
data-test-subj="resolver:graph-controls:node-legend:title"
|
||||
style={{ width: '20% ' }}
|
||||
>
|
||||
<StyledEuiDescriptionListTitle data-test-subj="resolver:graph-controls:node-legend:title">
|
||||
<CubeForProcess
|
||||
id={id}
|
||||
size="2.5em"
|
||||
|
|
@ -508,10 +489,7 @@ const NodeLegend = ({
|
|||
state="running"
|
||||
/>
|
||||
</StyledEuiDescriptionListTitle>
|
||||
<StyledEuiDescriptionListDescription
|
||||
data-test-subj="resolver:graph-controls:node-legend:description"
|
||||
style={{ width: '80%', lineHeight: '2.2em' }} // lineHeight to align center vertically
|
||||
>
|
||||
<StyledEuiDescriptionListDescription data-test-subj="resolver:graph-controls:node-legend:description">
|
||||
<GeneratedText>
|
||||
{i18n.translate(
|
||||
'xpack.securitySolution.resolver.graphControls.runningProcessCube',
|
||||
|
|
@ -521,10 +499,7 @@ const NodeLegend = ({
|
|||
)}
|
||||
</GeneratedText>
|
||||
</StyledEuiDescriptionListDescription>
|
||||
<StyledEuiDescriptionListTitle
|
||||
data-test-subj="resolver:graph-controls:node-legend:title"
|
||||
style={{ width: '20% ' }}
|
||||
>
|
||||
<StyledEuiDescriptionListTitle data-test-subj="resolver:graph-controls:node-legend:title">
|
||||
<CubeForProcess
|
||||
id={id}
|
||||
size="2.5em"
|
||||
|
|
@ -532,10 +507,7 @@ const NodeLegend = ({
|
|||
state="terminated"
|
||||
/>
|
||||
</StyledEuiDescriptionListTitle>
|
||||
<StyledEuiDescriptionListDescription
|
||||
data-test-subj="resolver:graph-controls:node-legend:description"
|
||||
style={{ width: '80%', lineHeight: '2.2em' }}
|
||||
>
|
||||
<StyledEuiDescriptionListDescription data-test-subj="resolver:graph-controls:node-legend:description">
|
||||
<GeneratedText>
|
||||
{i18n.translate(
|
||||
'xpack.securitySolution.resolver.graphControls.terminatedProcessCube',
|
||||
|
|
@ -545,10 +517,7 @@ const NodeLegend = ({
|
|||
)}
|
||||
</GeneratedText>
|
||||
</StyledEuiDescriptionListDescription>
|
||||
<StyledEuiDescriptionListTitle
|
||||
data-test-subj="resolver:graph-controls:node-legend:title"
|
||||
style={{ width: '20% ' }}
|
||||
>
|
||||
<StyledEuiDescriptionListTitle data-test-subj="resolver:graph-controls:node-legend:title">
|
||||
<CubeForProcess
|
||||
id={id}
|
||||
size="2.5em"
|
||||
|
|
@ -556,10 +525,7 @@ const NodeLegend = ({
|
|||
state="loading"
|
||||
/>
|
||||
</StyledEuiDescriptionListTitle>
|
||||
<StyledEuiDescriptionListDescription
|
||||
data-test-subj="resolver:graph-controls:node-legend:description"
|
||||
style={{ width: '80%', lineHeight: '2.2em' }}
|
||||
>
|
||||
<StyledEuiDescriptionListDescription data-test-subj="resolver:graph-controls:node-legend:description">
|
||||
<GeneratedText>
|
||||
{i18n.translate(
|
||||
'xpack.securitySolution.resolver.graphControls.currentlyLoadingCube',
|
||||
|
|
@ -569,10 +535,7 @@ const NodeLegend = ({
|
|||
)}
|
||||
</GeneratedText>
|
||||
</StyledEuiDescriptionListDescription>
|
||||
<StyledEuiDescriptionListTitle
|
||||
data-test-subj="resolver:graph-controls:node-legend:title"
|
||||
style={{ width: '20% ' }}
|
||||
>
|
||||
<StyledEuiDescriptionListTitle data-test-subj="resolver:graph-controls:node-legend:title">
|
||||
<CubeForProcess
|
||||
id={id}
|
||||
size="2.5em"
|
||||
|
|
@ -580,10 +543,7 @@ const NodeLegend = ({
|
|||
state="error"
|
||||
/>
|
||||
</StyledEuiDescriptionListTitle>
|
||||
<StyledEuiDescriptionListDescription
|
||||
data-test-subj="resolver:graph-controls:node-legend:description"
|
||||
style={{ width: '80%', lineHeight: '2.2em' }}
|
||||
>
|
||||
<StyledEuiDescriptionListDescription data-test-subj="resolver:graph-controls:node-legend:description">
|
||||
<GeneratedText>
|
||||
{i18n.translate('xpack.securitySolution.resolver.graphControls.errorCube', {
|
||||
defaultMessage: 'Error Process',
|
||||
|
|
|
|||
|
|
@ -11,18 +11,11 @@ import React, { memo, useMemo, Fragment } from 'react';
|
|||
import { i18n } from '@kbn/i18n';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
import type { EuiBreadcrumb } from '@elastic/eui';
|
||||
import {
|
||||
EuiSpacer,
|
||||
EuiText,
|
||||
EuiDescriptionList,
|
||||
EuiHorizontalRule,
|
||||
EuiTextColor,
|
||||
EuiTitle,
|
||||
} from '@elastic/eui';
|
||||
import { EuiSpacer, EuiText, EuiHorizontalRule, EuiTextColor, EuiTitle } from '@elastic/eui';
|
||||
import styled from 'styled-components';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { StyledPanel } from '../styles';
|
||||
import { BoldCode, StyledTime } from './styles';
|
||||
import { StyledDescriptionList, BoldCode, StyledTime } from './styles';
|
||||
import { GeneratedText } from '../generated_text';
|
||||
import { CopyablePanelField } from './copyable_panel_field';
|
||||
import { Breadcrumbs } from './breadcrumbs';
|
||||
|
|
@ -329,16 +322,6 @@ function EventDetailBreadcrumbs({
|
|||
return <Breadcrumbs breadcrumbs={breadcrumbs} />;
|
||||
}
|
||||
|
||||
const StyledDescriptionList = memo(styled(EuiDescriptionList)`
|
||||
.euiDescriptionList__title {
|
||||
word-break: normal;
|
||||
}
|
||||
.euiDescriptionList__title,
|
||||
.euiDescriptionList__description {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
`);
|
||||
|
||||
// Also prevents horizontal scrollbars on long descriptive names
|
||||
const StyledDescriptiveName = memo(styled(EuiText)`
|
||||
padding-right: 1em;
|
||||
|
|
|
|||
|
|
@ -35,6 +35,8 @@ const StyledCubeForProcess = styled(CubeForProcess)`
|
|||
position: relative;
|
||||
`;
|
||||
|
||||
const COLUMN_WIDTH = ['fit-content(10em)', 'auto'];
|
||||
|
||||
const nodeDetailError = i18n.translate('xpack.securitySolution.resolver.panel.nodeDetail.Error', {
|
||||
defaultMessage: 'Node details were unable to be retrieved',
|
||||
});
|
||||
|
|
@ -249,6 +251,7 @@ const NodeDetailView = memo(function ({
|
|||
<StyledDescriptionList
|
||||
data-test-subj="resolver:node-detail"
|
||||
type="column"
|
||||
columnWidths={COLUMN_WIDTH}
|
||||
align="left"
|
||||
titleProps={
|
||||
{
|
||||
|
|
|
|||
|
|
@ -5,16 +5,23 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import { memo } from 'react';
|
||||
import { EuiCode, EuiBreadcrumbs, EuiDescriptionList } from '@elastic/eui';
|
||||
|
||||
import styled from 'styled-components';
|
||||
|
||||
/**
|
||||
* Used by the nodeDetail view to show attributes of the related events.
|
||||
* Used by the nodeDetail view, eventDetail view and control panel to show attributes of the related events.
|
||||
*/
|
||||
export const StyledDescriptionList = styled(EuiDescriptionList).attrs({
|
||||
columnWidths: ['fit-content(10em)', 'auto'], // Sets a max-width of 10em on titles
|
||||
})``;
|
||||
export const StyledDescriptionList = memo(styled(EuiDescriptionList)`
|
||||
.euiDescriptionList__title {
|
||||
word-break: normal;
|
||||
}
|
||||
.euiDescriptionList__title,
|
||||
.euiDescriptionList__description {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
`);
|
||||
|
||||
/**
|
||||
* Used by the nodeDetail view for the label of the node.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue