[Observability RAC] Improve alerts table columns (#105446) (#106196)

* right align duration on alerts observability table * reason column takes up the remaining width * add horizontal scrollbar to the table * add actions label temp solution * use abbreviated format for duration * Internationalization for actions * remove horizontal scroll and bring back initial width * remove unused import * remove data as dependency Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: mgiota <[email protected]>
elastic · Jul 20, 2021 · 5bada6f · 5bada6f
1 parent 9aa5c80
commit 5bada6f
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 7 deletions.
diff --git a/x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid.tsx b/x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid.tsx
@@ -7,6 +7,8 @@
 
 import { EuiButtonIcon, EuiDataGridColumn } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import styled from 'styled-components';
+
 import React, { Suspense, useState } from 'react';
 import {
   ALERT_DURATION,
@@ -20,6 +22,7 @@ import type { TimelinesUIStart } from '../../../../timelines/public';
 import type { TopAlert } from './';
 import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
 import type { ActionProps, ColumnHeaderOptions, RowRenderer } from '../../../../timelines/common';
+
 import { getRenderCellValue } from './render_cell_value';
 import { usePluginContext } from '../../hooks/use_plugin_context';
 import { decorateResponse } from './decorate_response';
@@ -34,6 +37,27 @@ interface AlertsTableTGridProps {
   setRefetch: (ref: () => void) => void;
 }
 
+const EventsThContent = styled.div.attrs(({ className = '' }) => ({
+  className: `siemEventsTable__thContent ${className}`,
+}))<{ textAlign?: string; width?: number }>`
+  font-size: ${({ theme }) => theme.eui.euiFontSizeXS};
+  font-weight: ${({ theme }) => theme.eui.euiFontWeightSemiBold};
+  line-height: ${({ theme }) => theme.eui.euiLineHeight};
+  min-width: 0;
+  position: relative;
+  top: 3px;
+  padding: ${({ theme }) => theme.eui.paddingSizes.xs};
+  text-align: ${({ textAlign }) => textAlign};
+  width: ${({ width }) =>
+    width != null
+      ? `${width}px`
+      : '100%'}; /* Using width: 100% instead of flex: 1 and max-width: 100% for IE11 */
+
+  > button.euiButtonIcon,
+  > .euiToolTipAnchor > button.euiButtonIcon {
+    margin-left: ${({ theme }) => `-${theme.eui.paddingSizes.xs}`};
+  }
+`;
 /**
  * columns implements a subset of `EuiDataGrid`'s `EuiDataGridColumn` interface,
  * plus additional TGrid column properties
@@ -100,7 +124,15 @@ export function AlertsTableTGrid(props: AlertsTableTGridProps) {
     {
       id: 'expand',
       width: 40,
-      headerCellRender: () => null,
+      headerCellRender: () => {
+        return (
+          <EventsThContent>
+            {i18n.translate('xpack.observability.alertsTable.actionsTextLabel', {
+              defaultMessage: 'Actions',
+            })}
+          </EventsThContent>
+        );
+      },
       rowCellRender: ({ data }: ActionProps) => {
         const dataFieldEs = data.reduce((acc, d) => ({ ...acc, [d.field]: d.value }), {});
         const decoratedAlerts = decorateResponse(

diff --git a/x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid_actions.tsx b/x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid_actions.tsx
@@ -55,15 +55,21 @@ export function RowCellActionsRender({ data }: ActionProps) {
         anchorPosition="upCenter"
         button={
           <EuiButtonIcon
-            aria-label="show actions"
+            aria-label={i18n.translate('xpack.observability.alertsTable.actionsTextAriaLabel', {
+              defaultMessage: 'show actions',
+            })}
             iconType="boxesHorizontal"
             color="text"
             onClick={() => setIsPopoverOpen(!isPopoverOpen)}
           />
         }
         closePopover={() => setIsPopoverOpen(false)}
       >
-        <EuiPopoverTitle>Actions</EuiPopoverTitle>
+        <EuiPopoverTitle>
+          {i18n.translate('xpack.observability.alertsTable.actionsTextLabel', {
+            defaultMessage: 'Actions',
+          })}
+        </EuiPopoverTitle>
         <div style={{ width: 150 }}>
           <EuiButtonEmpty href={prepend(link ?? '')}>
             <EuiFlexGroup alignItems="center" component="span" gutterSize="s">

diff --git a/x-pack/plugins/observability/public/pages/alerts/render_cell_value.tsx b/x-pack/plugins/observability/public/pages/alerts/render_cell_value.tsx
@@ -4,10 +4,9 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-
 import { EuiIconTip, EuiLink } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
   ALERT_DURATION,
   ALERT_SEVERITY_LEVEL,
@@ -43,6 +42,7 @@ const getMappedNonEcsValue = ({
  * accepts `EuiDataGridCellValueElementProps`, plus `data`
  * from the TGrid
  */
+
 export const getRenderCellValue = ({
   rangeTo,
   rangeFrom,
@@ -52,13 +52,24 @@ export const getRenderCellValue = ({
   rangeFrom: string;
   setFlyoutAlert: (data: TopAlert) => void;
 }) => {
-  return ({ columnId, data, linkValues }: CellValueElementProps) => {
+  return ({ columnId, data, setCellProps }: CellValueElementProps) => {
     const { observabilityRuleTypeRegistry } = usePluginContext();
     const value = getMappedNonEcsValue({
       data,
       fieldName: columnId,
     })?.reduce((x) => x[0]);
 
+    useEffect(() => {
+      if (columnId === ALERT_DURATION) {
+        setCellProps({
+          style: {
+            textAlign: 'right',
+            paddingRight: '15px',
+          },
+        });
+      }
+    }, [columnId, setCellProps]);
+
     switch (columnId) {
       case ALERT_STATUS:
         return value !== 'closed' ? (
@@ -80,7 +91,7 @@ export const getRenderCellValue = ({
       case ALERT_START:
         return <TimestampTooltip time={new Date(value ?? '').getTime()} timeUnit="milliseconds" />;
       case ALERT_DURATION:
-        return asDuration(Number(value), { extended: true });
+        return asDuration(Number(value));
       case ALERT_SEVERITY_LEVEL:
         return <SeverityBadge severityLevel={value ?? undefined} />;
       case RULE_NAME: