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 5a69c7c9af1588..b721650707384f 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 38919857e86c11..1f5372c8f2fead 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 1cd86631197c41..389b5da4c034d1 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: