From b31abcd3d980a8e653f9235081f916f37c1170ea Mon Sep 17 00:00:00 2001 From: mgiota Date: Tue, 13 Jul 2021 16:17:25 +0200 Subject: [PATCH 1/9] right align duration on alerts observability table --- .../public/pages/alerts/render_cell_value.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) 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..51a91af4e78fa4 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, linkValues, setCellProps }: CellValueElementProps) => { const { observabilityRuleTypeRegistry } = usePluginContext(); const value = getMappedNonEcsValue({ data, fieldName: columnId, })?.reduce((x) => x[0]); + useEffect(() => { + if (columnId === ALERT_DURATION) { + setCellProps({ + style: { + backgroundColor: 'green', // TEMP + textAlign: 'right', + }, + }); + } + }, [columnId, data, setCellProps]); + switch (columnId) { case ALERT_STATUS: return value !== 'closed' ? ( From 91c2ab4c3f077f6894920c7df2fc5661bd8b83b8 Mon Sep 17 00:00:00 2001 From: mgiota Date: Tue, 13 Jul 2021 18:06:39 +0200 Subject: [PATCH 2/9] reason column takes up the remaining width --- .../observability/public/pages/alerts/alerts_table_t_grid.tsx | 1 - .../observability/public/pages/alerts/render_cell_value.tsx | 2 +- 2 files changed, 1 insertion(+), 2 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 5a69c7c9af1588..5a02dad1452160 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 @@ -80,7 +80,6 @@ export const columns: Array< }), linkField: '*', id: RULE_NAME, - initialWidth: 400, }, ]; 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 51a91af4e78fa4..0b360873f95452 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 @@ -52,7 +52,7 @@ export const getRenderCellValue = ({ rangeFrom: string; setFlyoutAlert: (data: TopAlert) => void; }) => { - return ({ columnId, data, linkValues, setCellProps }: CellValueElementProps) => { + return ({ columnId, data, setCellProps }: CellValueElementProps) => { const { observabilityRuleTypeRegistry } = usePluginContext(); const value = getMappedNonEcsValue({ data, From 8bb0f07bb68528a438ef35430a229f75321d28bc Mon Sep 17 00:00:00 2001 From: mgiota Date: Tue, 13 Jul 2021 23:41:09 +0200 Subject: [PATCH 3/9] add horizontal scrollbar to the table --- x-pack/plugins/timelines/public/components/t_grid/styles.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/timelines/public/components/t_grid/styles.tsx b/x-pack/plugins/timelines/public/components/t_grid/styles.tsx index bc224bea1a50c7..f5fbe1cbd89b13 100644 --- a/x-pack/plugins/timelines/public/components/t_grid/styles.tsx +++ b/x-pack/plugins/timelines/public/components/t_grid/styles.tsx @@ -203,7 +203,7 @@ export const EventsTbody = styled.div.attrs(({ className = '' }) => ({ className: `siemEventsTable__tbody ${className}`, role: 'rowgroup', }))` - overflow-x: hidden; + overflow-x: scroll; `; export const EventsTrGroup = styled.div.attrs( From 16dad65c1638cfc942f4bbb0438376981a69eb90 Mon Sep 17 00:00:00 2001 From: mgiota Date: Tue, 13 Jul 2021 23:42:23 +0200 Subject: [PATCH 4/9] add actions label temp solution --- .../pages/alerts/alerts_table_t_grid.tsx | 30 ++++++++++++++++++- .../public/pages/alerts/render_cell_value.tsx | 2 +- x-pack/plugins/timelines/public/index.ts | 1 + 3 files changed, 31 insertions(+), 2 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 5a02dad1452160..7259f279c6bcca 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,8 @@ 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 { EventsThContent } from '../../../../timelines/public'; + import { getRenderCellValue } from './render_cell_value'; import { usePluginContext } from '../../hooks/use_plugin_context'; import { decorateResponse } from './decorate_response'; @@ -34,6 +38,28 @@ interface AlertsTableTGridProps { setRefetch: (ref: () => void) => void; } +// TODO import EventsThContent from timelines plugin and customize a few css properties (position & padding-top) +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 @@ -99,7 +125,9 @@ export function AlertsTableTGrid(props: AlertsTableTGridProps) { { id: 'expand', width: 40, - headerCellRender: () => null, + headerCellRender: () => { + return Actions; // TODO: internationalization + }, 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/render_cell_value.tsx b/x-pack/plugins/observability/public/pages/alerts/render_cell_value.tsx index 0b360873f95452..09210bf16933b3 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 @@ -63,8 +63,8 @@ export const getRenderCellValue = ({ if (columnId === ALERT_DURATION) { setCellProps({ style: { - backgroundColor: 'green', // TEMP textAlign: 'right', + paddingRight: '15px', }, }); } diff --git a/x-pack/plugins/timelines/public/index.ts b/x-pack/plugins/timelines/public/index.ts index 9fe022a6703994..94eaeaca39c9a3 100644 --- a/x-pack/plugins/timelines/public/index.ts +++ b/x-pack/plugins/timelines/public/index.ts @@ -10,6 +10,7 @@ import { PluginInitializerContext } from '../../../../src/core/public'; import { TimelinesPlugin } from './plugin'; export * as tGridActions from './store/t_grid/actions'; export * as tGridSelectors from './store/t_grid/selectors'; +export { EventsThContent } from './components/t_grid/styles'; export type { Inspect, SortField, From cdd593a7050dadb5a58a368433aae5db5e0baafb Mon Sep 17 00:00:00 2001 From: mgiota Date: Wed, 14 Jul 2021 13:32:42 +0200 Subject: [PATCH 5/9] use abbreviated format for duration --- .../observability/public/pages/alerts/render_cell_value.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 09210bf16933b3..1c6ce9351292d2 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 @@ -91,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: From d08c6eb80b42e73d1fea4740dcc1c90640624ced Mon Sep 17 00:00:00 2001 From: mgiota Date: Mon, 19 Jul 2021 08:45:12 +0200 Subject: [PATCH 6/9] Internationalization for actions --- .../public/pages/alerts/alerts_table_t_grid.tsx | 10 +++++++--- .../pages/alerts/alerts_table_t_grid_actions.tsx | 10 ++++++++-- 2 files changed, 15 insertions(+), 5 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 7259f279c6bcca..54ed7e54648a11 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 @@ -22,7 +22,6 @@ 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 { EventsThContent } from '../../../../timelines/public'; import { getRenderCellValue } from './render_cell_value'; import { usePluginContext } from '../../hooks/use_plugin_context'; @@ -38,7 +37,6 @@ interface AlertsTableTGridProps { setRefetch: (ref: () => void) => void; } -// TODO import EventsThContent from timelines plugin and customize a few css properties (position & padding-top) const EventsThContent = styled.div.attrs(({ className = '' }) => ({ className: `siemEventsTable__thContent ${className}`, }))<{ textAlign?: string; width?: number }>` @@ -126,7 +124,13 @@ export function AlertsTableTGrid(props: AlertsTableTGridProps) { id: 'expand', width: 40, headerCellRender: () => { - return Actions; // TODO: internationalization + return ( + + {i18n.translate('xpack.observability.alertsTable.actionsTextLabel', { + defaultMessage: 'Actions', + })} + + ); }, rowCellRender: ({ data }: ActionProps) => { const dataFieldEs = data.reduce((acc, d) => ({ ...acc, [d.field]: d.value }), {}); 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', + })} +
From d31a9e10616d246ce9bca809b97196538ea8b20b Mon Sep 17 00:00:00 2001 From: mgiota Date: Mon, 19 Jul 2021 09:10:28 +0200 Subject: [PATCH 7/9] remove horizontal scroll and bring back initial width --- .../observability/public/pages/alerts/alerts_table_t_grid.tsx | 1 + x-pack/plugins/timelines/public/components/t_grid/styles.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) 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 54ed7e54648a11..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 @@ -104,6 +104,7 @@ export const columns: Array< }), linkField: '*', id: RULE_NAME, + initialWidth: 400, }, ]; diff --git a/x-pack/plugins/timelines/public/components/t_grid/styles.tsx b/x-pack/plugins/timelines/public/components/t_grid/styles.tsx index f5fbe1cbd89b13..bc224bea1a50c7 100644 --- a/x-pack/plugins/timelines/public/components/t_grid/styles.tsx +++ b/x-pack/plugins/timelines/public/components/t_grid/styles.tsx @@ -203,7 +203,7 @@ export const EventsTbody = styled.div.attrs(({ className = '' }) => ({ className: `siemEventsTable__tbody ${className}`, role: 'rowgroup', }))` - overflow-x: scroll; + overflow-x: hidden; `; export const EventsTrGroup = styled.div.attrs( From aae667e5fe5ff29ca5ca72af6c9a7cebdf57f5f7 Mon Sep 17 00:00:00 2001 From: mgiota Date: Mon, 19 Jul 2021 09:16:42 +0200 Subject: [PATCH 8/9] remove unused import --- x-pack/plugins/timelines/public/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/x-pack/plugins/timelines/public/index.ts b/x-pack/plugins/timelines/public/index.ts index 94eaeaca39c9a3..9fe022a6703994 100644 --- a/x-pack/plugins/timelines/public/index.ts +++ b/x-pack/plugins/timelines/public/index.ts @@ -10,7 +10,6 @@ import { PluginInitializerContext } from '../../../../src/core/public'; import { TimelinesPlugin } from './plugin'; export * as tGridActions from './store/t_grid/actions'; export * as tGridSelectors from './store/t_grid/selectors'; -export { EventsThContent } from './components/t_grid/styles'; export type { Inspect, SortField, From 697330bfc95ab164b1d54ab03b2d8665d5e0ffb4 Mon Sep 17 00:00:00 2001 From: mgiota Date: Tue, 20 Jul 2021 00:06:00 +0200 Subject: [PATCH 9/9] remove data as dependency --- .../observability/public/pages/alerts/render_cell_value.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 1c6ce9351292d2..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 @@ -68,7 +68,7 @@ export const getRenderCellValue = ({ }, }); } - }, [columnId, data, setCellProps]); + }, [columnId, setCellProps]); switch (columnId) { case ALERT_STATUS: