Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Observability RAC] Improve alerts table columns #105446

Merged
merged 10 commits into from
Jul 20, 2021
Merged

[Observability RAC] Improve alerts table columns #105446

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
b31abcd
right align duration on alerts observability table
mgiota Jul 13, 2021
91c2ab4
reason column takes up the remaining width
mgiota Jul 13, 2021
8bb0f07
add horizontal scrollbar to the table
mgiota Jul 13, 2021
16dad65
add actions label temp solution
mgiota Jul 13, 2021
cdd593a
use abbreviated format for duration
mgiota Jul 14, 2021
d08c6eb
Internationalization for actions
mgiota Jul 19, 2021
d31a9e1
remove horizontal scroll and bring back initial width
mgiota Jul 19, 2021
aae667e
remove unused import
mgiota Jul 19, 2021
6e287df
Merge branch 'master' into 105227-rac-alerts-table-columns
kibanamachine Jul 19, 2021
697330b
remove data as dependency
mgiota Jul 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 33 additions & 1 deletion x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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';
Expand All @@ -34,6 +37,27 @@ interface AlertsTableTGridProps {
setRefetch: (ref: () => void) => void;
}

const EventsThContent = styled.div.attrs(({ className = '' }) => ({
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@XavierM Requirement here was to add an Actions header, so temporarily I copied the styled EventsThContent component from the styles file of the t_grid component. I was thinking to import the component instead of copying, but I was wondering if there is another way to do custom styling on elements.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The EventsThContent styled component may be deleted when the transition to EuiDataGrid is complete, so it's reasonable to copy it here, as opposed to making it part of the public API of tgrid (so it can be imported).

I was wondering if there is another way to do custom styling on elements.

The EuiDataGridControlColumn interface exposes headerCellRender to enable custom styling of header cells. This PR is correctly using it here:

headerCellRender: () => {
        return <EventsThContent>Actions</EventsThContent>; // TODO: internationalization
      },

to provide the custom styled header. I'm not aware of another way to do it, and this looks good to me. 😄

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
Expand Down Expand Up @@ -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(
Expand Down
10 changes: 8 additions & 2 deletions x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid_actions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
19 changes: 15 additions & 4 deletions x-pack/plugins/observability/public/pages/alerts/render_cell_value.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -43,6 +42,7 @@ const getMappedNonEcsValue = ({
* accepts `EuiDataGridCellValueElementProps`, plus `data`
* from the TGrid
*/

export const getRenderCellValue = ({
rangeTo,
rangeFrom,
Expand All @@ -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, data, setCellProps]);
mgiota marked this conversation as resolved.
Show resolved Hide resolved
mgiota marked this conversation as resolved.
Show resolved Hide resolved

switch (columnId) {
case ALERT_STATUS:
return value !== 'closed' ? (
Expand All @@ -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:
Expand Down