Update widths on columns in Alert Detail view (#83823)

* Update widths on columns * Add custom class for truncation fix * Use euiTruncate mixin and shrink column width of status column * Update imports to fix checks Co-authored-by: Kibana Machine <[email protected]>
elastic · Dec 8, 2020 · 0a0ead8 · 0a0ead8
1 parent caa14d4
commit 0a0ead8
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/...gers_actions_ui/public/application/sections/alert_details/components/alert_instances.scss b/...gers_actions_ui/public/application/sections/alert_details/components/alert_instances.scss
@@ -0,0 +1,11 @@
+// Add truncation to heath status
+
+.actionsInstanceList__health {
+  width: 100%;
+
+  .euiFlexItem:last-of-type {
+    @include euiTextTruncate;
+    min-width: 0;
+    width: 85%;
+  }
+}
diff --git a/...ggers_actions_ui/public/application/sections/alert_details/components/alert_instances.tsx b/...ggers_actions_ui/public/application/sections/alert_details/components/alert_instances.tsx
@@ -24,6 +24,7 @@ import {
   withBulkAlertOperations,
 } from '../../common/components/with_bulk_alert_api_operations';
 import { DEFAULT_SEARCH_PAGE_SIZE } from '../../../constants';
+import './alert_instances.scss';
 
 type AlertInstancesProps = {
   alert: Alert;
@@ -46,6 +47,7 @@ export const alertInstancesTableColumns = (
     ),
     sortable: false,
     truncateText: true,
+    width: '45%',
     'data-test-subj': 'alertInstancesTableCell-instance',
     render: (value: string) => {
       return (
@@ -61,10 +63,10 @@ export const alertInstancesTableColumns = (
       'xpack.triggersActionsUI.sections.alertDetails.alertInstancesList.columns.status',
       { defaultMessage: 'Status' }
     ),
-    width: '100px',
+    width: '15%',
     render: (value: AlertInstanceListItemStatus, instance: AlertInstanceListItem) => {
       return (
-        <EuiHealth color={value.healthColor}>
+        <EuiHealth color={value.healthColor} className="actionsInstanceList__health">
           {value.label}
           {value.actionGroup ? ` (${value.actionGroup})` : ``}
         </EuiHealth>
@@ -75,7 +77,7 @@ export const alertInstancesTableColumns = (
   },
   {
     field: 'start',
-    width: '200px',
+    width: '190px',
     render: (value: Date | undefined, instance: AlertInstanceListItem) => {
       return value ? moment(value).format('D MMM YYYY @ HH:mm:ss') : '';
     },
@@ -88,7 +90,6 @@ export const alertInstancesTableColumns = (
   },
   {
     field: 'duration',
-    align: CENTER_ALIGNMENT,
     render: (value: number, instance: AlertInstanceListItem) => {
       return value ? durationAsString(moment.duration(value)) : '';
     },
@@ -97,7 +98,7 @@ export const alertInstancesTableColumns = (
       { defaultMessage: 'Duration' }
     ),
     sortable: false,
-    width: '100px',
+    width: '80px',
     'data-test-subj': 'alertInstancesTableCell-duration',
   },
   {
@@ -192,6 +193,7 @@ export function AlertInstances({
         columns={alertInstancesTableColumns(onMuteAction, readOnly)}
         data-test-subj="alertInstancesList"
         tableLayout="fixed"
+        className="alertInstancesList"
       />
     </Fragment>
   );