From 4d92dafa9eb9b313b958b8b854e5fca5ecf42fbc Mon Sep 17 00:00:00 2001
From: Andrew Goldstein <andrew-goldstein@users.noreply.github.com>
Date: Tue, 27 Jul 2021 14:41:19 -0600
Subject: [PATCH] [Observability RAC] Alerts table post-`EuiDataGrid` style
 updates (#106349)

## [Observability RAC] Alerts table post-`EuiDataGrid` style updates

This PR updates styles in the Observability `Alerts` table, as a follow-up to the [TGrid migrating to use `EuiDataGrid` for rendering](https://github.com/elastic/kibana/pull/106199), and [this PR](https://github.com/elastic/kibana/pull/105446), which improved the alerts table columns.

- The `Reason` column uses up the remaining width, a follow-up task from https://github.com/elastic/kibana/pull/105446
  - This task was originally tracked by https://github.com/elastic/kibana/issues/105227
- Increased the font weight and vertically aligned the `Actions` header with the other columns
- ~Removed the `Status` column~ (EDIT: we won't remove this, per a discussion w/ UX)
- Increased the width of the `Triggered` column
- ~Renamed the `Duration` column to `Alert duration`~ (EDIT: we won't rename this, per a discussion w/ UX)
- Eliminated the gap between actions
- Added truncation to the `Reason` column

### Before

![before](https://user-images.githubusercontent.com/4459398/126430458-89440150-c10b-43b1-b0b4-2044ddfc22a8.png)

### After

<img width="1280" alt="after" src="https://user-images.githubusercontent.com/4459398/126716690-be310fdf-3760-4014-998b-3c89099c2564.png">

### Desk testing

- To desk test the `Observability > Alerts` page, add the following settings to `config/kibana.dev.yml`:

```
xpack.observability.unsafe.cases.enabled: true
xpack.observability.unsafe.alertingExperience.enabled: true
xpack.ruleRegistry.write.enabled: true
```

cc @mdefazio
---
 .../public/pages/alerts/alerts_table_t_grid.tsx | 11 ++++-------
 .../public/pages/alerts/render_cell_value.tsx   | 17 +++++++++++++----
 2 files changed, 17 insertions(+), 11 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 b721650707384f..bd6844915459c0 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
@@ -41,11 +41,9 @@ 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};
+  font-weight: ${({ theme }) => theme.eui.euiFontWeightBold};
   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 }) =>
@@ -79,7 +77,7 @@ export const columns: Array<
       defaultMessage: 'Triggered',
     }),
     id: ALERT_START,
-    initialWidth: 116,
+    initialWidth: 176,
   },
   {
     columnHeaderType: 'not-filtered',
@@ -104,7 +102,6 @@ export const columns: Array<
     }),
     linkField: '*',
     id: RULE_NAME,
-    initialWidth: 400,
   },
 ];
 
@@ -123,7 +120,7 @@ export function AlertsTableTGrid(props: AlertsTableTGridProps) {
   const leadingControlColumns = [
     {
       id: 'expand',
-      width: 40,
+      width: 20,
       headerCellRender: () => {
         return (
           <EventsThContent>
@@ -152,7 +149,7 @@ export function AlertsTableTGrid(props: AlertsTableTGridProps) {
     },
     {
       id: 'view_in_app',
-      width: 40,
+      width: 20,
       headerCellRender: () => null,
       rowCellRender: ({ data }: ActionProps) => {
         const dataFieldEs = data.reduce((acc, d) => ({ ...acc, [d.field]: d.value }), {});
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 389b5da4c034d1..bb6d0ae6c0e407 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
@@ -60,11 +60,10 @@ export const getRenderCellValue = ({
     })?.reduce((x) => x[0]);
 
     useEffect(() => {
-      if (columnId === ALERT_DURATION) {
+      if (columnId === ALERT_STATUS) {
         setCellProps({
           style: {
-            textAlign: 'right',
-            paddingRight: '15px',
+            textAlign: 'center',
           },
         });
       }
@@ -103,7 +102,17 @@ export const getRenderCellValue = ({
         const alert = decoratedAlerts[0];
 
         return (
-          <EuiLink onClick={() => setFlyoutAlert && setFlyoutAlert(alert)}>{alert.reason}</EuiLink>
+          // NOTE: EuiLink automatically renders links using a <button>
+          // instead of an <a> when an `onClick` prop is provided, but this
+          // breaks text-truncation in `EuiDataGrid`, because (per the HTML
+          // spec), buttons are *always* rendered as `inline-block`, even if
+          // `display` is overridden. Passing an empty `href` prop forces
+          // `EuiLink` to render the link as an (inline) <a>, which enables
+          // text truncation, but requires overriding the linter warning below:
+          // eslint-disable-next-line @elastic/eui/href-or-on-click
+          <EuiLink href="" onClick={() => setFlyoutAlert && setFlyoutAlert(alert)}>
+            {alert.reason}
+          </EuiLink>
         );
       default:
         return <>{value}</>;