[Security Solution] Fix analyzer panel width (elastic#172026)

## Summary Fixes column not breaking correctly in analyzer. 3 places where this bug occured: node details, event details and control panel. Event details panel was fixed in [PR](elastic#170329). This PR covers the other two. ![image](https://github.com/elastic/kibana/assets/18648970/e0bf64d2-06f9-42e9-b3fd-d26be1a1a48c) After ![image](https://github.com/elastic/kibana/assets/18648970/bb5b3061-6b3b-4701-acf5-cf8db292ef4e) ### Checklist - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
joeypoon · Nov 30, 2023 · 2e52943 · 2e52943
1 parent 2403bc8
commit 2e52943
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 85 deletions.
diff --git a/x-pack/plugins/security_solution/public/resolver/view/graph_controls.tsx b/x-pack/plugins/security_solution/public/resolver/view/graph_controls.tsx
@@ -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,25 +476,20 @@ 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"
                 data-test-subj="resolver:node-detail:title-icon"
                 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,21 +499,15 @@ 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"
                 data-test-subj="resolver:node-detail:title-icon"
                 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,21 +517,15 @@ 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"
                 data-test-subj="resolver:node-detail:title-icon"
                 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,21 +535,15 @@ 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"
                 data-test-subj="resolver:node-detail:title-icon"
                 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',

diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/event_detail.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/event_detail.tsx
@@ -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;

diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/node_detail.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/node_detail.tsx
@@ -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={
           {

diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/styles.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/styles.tsx
@@ -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.