From 41289fadc3b1e71dff8e4bbcc227d60fe09def03 Mon Sep 17 00:00:00 2001 From: mgiota Date: Tue, 20 Jul 2021 07:44:52 +0200 Subject: [PATCH] [Observability RAC] Improve alerts table columns (#105446) * 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 <42973632+kibanamachine@users.noreply.github.com> --- .../pages/alerts/alerts_table_t_grid.tsx | 34 ++++++++++++++++++- .../alerts/alerts_table_t_grid_actions.tsx | 10 ++++-- .../public/pages/alerts/render_cell_value.tsx | 19 ++++++++--- 3 files changed, 56 insertions(+), 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 index 5a69c7c9af158..b721650707384 100644 --- 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 ( + + {i18n.translate('xpack.observability.alertsTable.actionsTextLabel', { + defaultMessage: 'Actions', + })} + + ); + }, 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 index 38919857e86c1..1f5372c8f2fea 100644 --- 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,7 +55,9 @@ export function RowCellActionsRender({ data }: ActionProps) { anchorPosition="upCenter" button={ setIsPopoverOpen(!isPopoverOpen)} @@ -63,7 +65,11 @@ export function RowCellActionsRender({ data }: ActionProps) { } closePopover={() => setIsPopoverOpen(false)} > - Actions + + {i18n.translate('xpack.observability.alertsTable.actionsTextLabel', { + defaultMessage: 'Actions', + })} +
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 index 1cd86631197c4..389b5da4c034d 100644 --- 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 ; case ALERT_DURATION: - return asDuration(Number(value), { extended: true }); + return asDuration(Number(value)); case ALERT_SEVERITY_LEVEL: return ; case RULE_NAME: