Start moving to eui grid

x-pack/plugins/observability/public/pages/alerts/alerts_flyout.tsx

@@ -22,18 +22,10 @@ import { AlertItem } from './alerts_table';
 type AlertsFlyoutProps = AlertItem & EuiFlyoutProps;
 
 export function AlertsFlyout(props: AlertsFlyoutProps) {
-  const {
-    actualValue,
-    affectedEntity,
-    expectedValue,
-    onClose,
-    reason,
-    severity,
-    severityLog,
-    status,
-    duration,
-    type,
-  } = props;
+  const { affectedEntity, expectedValue, onClose, reason, severityLog, status, type } = props;
+  const duration = props['alert.duration.us'];
+  const severity = props['alert.severity.level'];
+  const actualValue = props['alert.severity.value'];
   const timestamp = props['@timestamp'];
 
   const overviewListItems = [

x-pack/plugins/observability/public/pages/alerts/alerts_table.tsx

@@ -9,9 +9,14 @@ import {
   EuiBasicTable,
   EuiBasicTableColumn,
   EuiBasicTableProps,
+  EuiDataGrid,
+  EuiDataGridCellValueElementProps,
+  EuiDataGridColumn,
+  EuiDataGridControlColumn,
   DefaultItemAction,
   EuiTableSelectionType,
   EuiLink,
+  EuiDataGridColumnActions,
 } from '@elastic/eui';
 import React, { useState } from 'react';
 import { usePluginContext } from '../../hooks/use_plugin_context';
@@ -27,18 +32,18 @@ import { AlertsFlyout } from './alerts_flyout';
 export interface AlertItem {
   '@timestamp': number;
   reason: string;
-  severity: string;
+  'alert.severity.level'?: string;
   // These are just made up so we can make example links
-  service?: { name?: string };
+  'service.name'?: string;
   pod?: string;
   log?: boolean;
   // Other fields used in the flyout
-  actualValue?: string;
+  'alert.severity.value'?: string;
   affectedEntity?: string;
   expectedValue?: string;
   severityLog?: Array<{ '@timestamp': number; severity: string; message: string }>;
   status?: string;
-  duration?: string;
+  'alert.duration.us'?: number;
   type?: string;
 }
 
@@ -47,16 +52,18 @@ type AlertsTableProps = Omit<
   'columns' | 'isSelectable' | 'pagination' | 'selection'
 >;
 
-export function AlertsTable(props: AlertsTableProps) {
+export function AlertsTable({ items }: AlertsTableProps) {
   const [flyoutAlert, setFlyoutAlert] = useState<AlertItem | undefined>(undefined);
   const handleFlyoutClose = () => setFlyoutAlert(undefined);
   const { prepend } = usePluginContext().core.http.basePath;
 
   // This is a contrived implementation of the reason field that shows how
   // you could link to certain types of resources based on what's contained
   // in their alert data.
-  function reasonRenderer(text: string, item: AlertItem) {
-    const serviceName = item.service?.name;
+  function ReasonRenderer(props: AlertItem) {
+    const item = props;
+    const text = props.reason;
+    const serviceName = item['service.name'];
     const pod = item.pod;
     const log = item.log;
 
@@ -71,7 +78,11 @@ export function AlertsTable(props: AlertsTableProps) {
     }
   }
 
-  const actions: Array<DefaultItemAction<AlertItem>> = [
+  function ActionCellRenderer(props: EuiDataGridCellValueElementProps) {
+    return null;
+  }
+
+  const actions: EuiDataGridColumnActions = [
     {
       name: 'Alert details',
       description: 'Alert details',
@@ -82,41 +93,55 @@ export function AlertsTable(props: AlertsTableProps) {
     },
   ];
 
-  const columns: Array<EuiBasicTableColumn<AlertItem>> = [
+  const columns: EuiDataGridColumn[] = [
     {
-      field: '@timestamp',
-      name: 'Triggered',
-      dataType: 'date',
+      id: '@timestamp',
+      display: 'Triggered',
+      schema: 'datetime',
     },
     {
-      field: 'duration',
-      name: 'Duration',
+      id: 'alert.duration.us',
+      display: 'Duration',
     },
     {
-      field: 'severity',
-      name: 'Severity',
+      id: 'alert.severity.level',
+      display: 'Severity',
     },
     {
-      field: 'reason',
-      name: 'Reason',
-      dataType: 'string',
-      render: reasonRenderer,
-    },
-    {
-      actions,
-      name: 'Actions',
+      id: 'reason',
+      display: 'Reason',
     },
   ];
 
+  const trailingControlColumns: EuiDataGridControlColumn[] = [
+    { id: 'actions', headerCellRender: () => null, rowCellRender: ActionCellRenderer, width: 40 },
+  ];
+
+  function CellValueRenderer({ columnId, rowIndex }: EuiDataGridCellValueElementProps) {
+    const item = items[rowIndex];
+    const value = item[columnId as keyof AlertItem];
+    switch (columnId) {
+      case '@timestamp':
+        return <>{new Date(value as number).toISOString()}</>;
+      case 'reason':
+        return <ReasonRenderer {...item} />;
+      default:
+        return value ? <>{value}</> : null;
+    }
+  }
+
+  const [visibleColumns, setVisibleColumns] = useState(columns.map(({ id }) => id));
+
   return (
     <>
       {flyoutAlert && <AlertsFlyout {...flyoutAlert} onClose={handleFlyoutClose} />}
-      <EuiBasicTable<AlertItem>
-        {...props}
-        isSelectable={true}
-        selection={{} as EuiTableSelectionType<AlertItem>}
+      <EuiDataGrid
+        aria-label="Observability alerts"
         columns={columns}
-        pagination={{ pageIndex: 0, pageSize: 0, totalItemCount: 0 }}
+        columnVisibility={{ setVisibleColumns, visibleColumns }}
+        renderCellValue={CellValueRenderer}
+        rowCount={items.length}
+        trailingControlColumns={trailingControlColumns}
       />
     </>
   );

x-pack/plugins/observability/public/pages/alerts/example_data.ts

@@ -11,14 +11,14 @@
 export const wireframeData = [
   {
     '@timestamp': 1615392661000,
-    duration: '10 min 2 s',
-    severity: '-',
+    'alert.duration.us': 602000000,
+    'alert.severity.level': undefined,
     reason: 'Error count is greater than 100 (current value is 135) on shippingService',
-    service: { name: 'opbeans-go' },
+    'service.name': 'opbeans-go',
     affectedEntity: 'opbeans-go service',
     status: 'Active',
     expectedValue: '< 100',
-    actualValue: '135',
+    'alert.severity.value': '135',
     severityLog: [
       { '@timestamp': 1615392661000, severity: 'critical', message: 'Load is 3.5' },
       { '@timestamp': 1615392600000, severity: 'warning', message: 'Load is 2.5' },
@@ -28,42 +28,42 @@ export const wireframeData = [
   },
   {
     '@timestamp': 1615392600000,
-    duration: '11 min 1 s',
-    severity: '-',
+    'alert.duration.us': 661000000,
+    'alert.severity.level': undefined,
     reason: 'Latency is greater than 1500ms (current value is 1700ms) on frontend',
-    service: { name: 'opbeans-go' },
+    'service.name': 'opbeans-go',
     severityLog: [],
   },
   {
     '@timestamp': 1615392552000,
-    duration: '10 min 2 s',
-    severity: 'critical',
+    'alert.duration.us': 602000000,
+    'alert.severity.level': 'critical',
     reason: 'Latency anomaly score is 84 on checkoutService',
-    service: { name: 'opbeans-go' },
+    'service.name': 'opbeans-go',
     severityLog: [],
   },
   {
     '@timestamp': 1615392391000,
-    duration: '10 min 2 s',
-    severity: '-',
+    'alert.duration.us': 602000000,
+    'alert.severity.level': undefined,
     reason:
       'CPU is greater than a threshold of 75% (current value is 83%) on gke-eden-3-prod-pool-2-395ef018-06xg',
     pod: 'gke-dev-oblt-dev-oblt-pool-30f1ba48-skw',
     severityLog: [],
   },
   {
     '@timestamp': 1615392363000,
-    duration: '10 min 2 s',
-    severity: '-',
+    'alert.duration.us': 602000000,
+    'alert.severity.level': undefined,
     reason:
       "Log count with 'Log.level.error' and 'service.name; frontend' is greater than 75 (current value 122)",
     log: true,
     severityLog: [],
   },
   {
     '@timestamp': 1615392361000,
-    duration: '10 min 2 s',
-    severity: 'critical',
+    'alert.duration.us': 602000000,
+    'alert.severity.level': 'critical',
     reason: 'Load is greater than 2 (current value is 3.5) on gke-eden-3-prod-pool-2-395ef018-06xg',
     pod: 'gke-dev-oblt-dev-oblt-pool-30f1ba48-skw',
     severityLog: [],