[Obs Alert Table] Refactor alert table registration and change default columns

x-pack/plugins/observability/public/components/alert_search_bar/containers/state_container.tsx

@@ -35,7 +35,7 @@ interface AlertSearchBarStateTransitions {
 }
 
 const defaultState: AlertSearchBarContainerState = {
-  rangeFrom: 'now-15m',
+  rangeFrom: 'now-2h',
   rangeTo: 'now',
   kuery: '',
   status: ALL_ALERTS.status,

x-pack/plugins/observability/public/components/alerts_table/get_alerts_table_configuration.tsx → x-pack/plugins/observability/public/components/alerts_table/alerts/get_alerts_page_table_configuration.tsx

@@ -6,35 +6,35 @@
  */
 
 import React from 'react';
-import { TIMESTAMP } from '@kbn/rule-data-utils';
 import { SortOrder } from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
+import { ALERT_START } from '@kbn/rule-data-utils';
 import {
   AlertsTableConfigurationRegistry,
   RenderCustomActionsRowArgs,
 } from '@kbn/triggers-actions-ui-plugin/public/types';
-import { casesFeatureId, observabilityFeatureId } from '../../../common';
-import { getRenderCellValue } from './render_cell_value';
-import { columns } from './default_columns';
-import { AlertActions } from '../../pages/alerts/components/alert_actions';
-import { useGetAlertFlyoutComponents } from '../alerts_flyout/use_get_alert_flyout_components';
-import type { ObservabilityRuleTypeRegistry } from '../../rules/create_observability_rule_type_registry';
-import type { ConfigSchema } from '../../plugin';
+import { casesFeatureId, observabilityFeatureId } from '../../../../common';
+import { AlertActions } from '../../../pages/alerts/components/alert_actions';
+import { useGetAlertFlyoutComponents } from '../../alerts_flyout/use_get_alert_flyout_components';
+import type { ObservabilityRuleTypeRegistry } from '../../../rules/create_observability_rule_type_registry';
+import type { ConfigSchema } from '../../../plugin';
+import { getRenderCellValue } from '../common/render_cell_value';
+import { getColumns } from '../common/get_columns';
 
-export const getAlertsTableConfiguration = (
+export const getAlertsPageTableConfiguration = (
   observabilityRuleTypeRegistry: ObservabilityRuleTypeRegistry,
   config: ConfigSchema
 ): AlertsTableConfigurationRegistry => ({
   id: observabilityFeatureId,
   cases: { featureId: casesFeatureId, owner: [observabilityFeatureId] },
-  columns,
+  columns: getColumns({ showRuleName: true }),
   getRenderCellValue: ({ setFlyoutAlert }) =>
     getRenderCellValue({
       observabilityRuleTypeRegistry,
       setFlyoutAlert,
     }),
   sort: [
     {
-      [TIMESTAMP]: {
+      [ALERT_START]: {
         order: 'desc' as SortOrder,
       },
     },

x-pack/plugins/observability/public/components/alerts_table/common/cell_tooltip.test.tsx

@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { CellTooltip } from './cell_tooltip';
+
+describe('CellTooltip', () => {
+  it('should render tooltipContent on hover', async () => {
+    render(<CellTooltip value="cell value" tooltipContent="tooltip content" />);
+
+    fireEvent.mouseOver(screen.getByText('cell value'));
+
+    await waitFor(() => screen.getByTestId('cell-tooltip'));
+
+    expect(screen.getByText('tooltip content')).toBeInTheDocument();
+  });
+});

x-pack/plugins/observability/public/components/alerts_table/common/cell_tooltip.tsx

@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiToolTip } from '@elastic/eui';
+
+interface Props {
+  value: string;
+  tooltipContent: string;
+}
+
+export function CellTooltip({ value, tooltipContent }: Props) {
+  return (
+    <EuiToolTip content={tooltipContent} data-test-subj="cell-tooltip">
+      <>{value}</>
+    </EuiToolTip>
+  );
+}

x-pack/plugins/observability/public/components/alerts_table/common/get_columns.tsx

@@ -0,0 +1,131 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+/**
+ * We need to produce types and code transpilation at different folders during the build of the package.
+ * We have types and code at different imports because we don't want to import the whole package in the resulting webpack bundle for the plugin.
+ * This way plugins can do targeted imports to reduce the final code bundle
+ */
+import {
+  ALERT_EVALUATION_VALUE,
+  ALERT_EVALUATION_THRESHOLD,
+  ALERT_DURATION,
+  ALERT_REASON,
+  ALERT_RULE_NAME,
+  ALERT_START,
+  ALERT_STATUS,
+  ALERT_INSTANCE_ID,
+  TAGS,
+} from '@kbn/rule-data-utils';
+import { EuiDataGridColumn } from '@elastic/eui';
+import type { ColumnHeaderOptions } from '@kbn/timelines-plugin/common';
+import { i18n } from '@kbn/i18n';
+
+/**
+ * columns implements a subset of `EuiDataGrid`'s `EuiDataGridColumn` interface,
+ * plus additional TGrid column properties
+ */
+export const getColumns = (
+  {
+    showRuleName,
+  }: {
+    showRuleName?: boolean;
+  } = { showRuleName: false }
+): Array<
+  Pick<EuiDataGridColumn, 'display' | 'displayAsText' | 'id' | 'initialWidth'> & ColumnHeaderOptions
+> => {
+  const ruleNameColumn: Array<
+    Pick<EuiDataGridColumn, 'display' | 'displayAsText' | 'id' | 'initialWidth'> &
+      ColumnHeaderOptions
+  > = showRuleName
+    ? [
+        {
+          columnHeaderType: 'not-filtered',
+          displayAsText: i18n.translate(
+            'xpack.observability.alertsTGrid.ruleNameColumnDescription',
+            {
+              defaultMessage: 'Rule name',
+            }
+          ),
+          id: ALERT_RULE_NAME,
+          initialWidth: 150,
+        },
+      ]
+    : [];
+
+  return [
+    {
+      columnHeaderType: 'not-filtered',
+      displayAsText: i18n.translate('xpack.observability.alertsTGrid.statusColumnDescription', {
+        defaultMessage: 'Alert Status',
+      }),
+      id: ALERT_STATUS,
+      initialWidth: 120,
+    },
+    {
+      columnHeaderType: 'not-filtered',
+      displayAsText: i18n.translate('xpack.observability.alertsTGrid.triggeredColumnDescription', {
+        defaultMessage: 'Triggered',
+      }),
+      id: ALERT_START,
+      initialWidth: 190,
+      schema: 'datetime',
+    },
+    {
+      columnHeaderType: 'not-filtered',
+      displayAsText: i18n.translate('xpack.observability.alertsTGrid.durationColumnDescription', {
+        defaultMessage: 'Duration',
+      }),
+      id: ALERT_DURATION,
+      initialWidth: 70,
+    },
+    ...ruleNameColumn,
+    {
+      columnHeaderType: 'not-filtered',
+      displayAsText: i18n.translate('xpack.observability.alertsTGrid.sourceColumnDescription', {
+        defaultMessage: 'Group',
+      }),
+      id: ALERT_INSTANCE_ID,
+      initialWidth: 100,
+    },
+    {
+      columnHeaderType: 'not-filtered',
+      displayAsText: i18n.translate(
+        'xpack.observability.alertsTGrid.observedValueColumnDescription',
+        {
+          defaultMessage: 'Observed value',
+        }
+      ),
+      id: ALERT_EVALUATION_VALUE,
+      initialWidth: 100,
+    },
+    {
+      columnHeaderType: 'not-filtered',
+      displayAsText: i18n.translate('xpack.observability.alertsTGrid.thresholdColumnDescription', {
+        defaultMessage: 'Threshold',
+      }),
+      id: ALERT_EVALUATION_THRESHOLD,
+      initialWidth: 100,
+    },
+    {
+      columnHeaderType: 'not-filtered',
+      displayAsText: i18n.translate('xpack.observability.alertsTGrid.tagsColumnDescription', {
+        defaultMessage: 'Tags',
+      }),
+      id: TAGS,
+      initialWidth: 150,
+    },
+    {
+      columnHeaderType: 'not-filtered',
+      displayAsText: i18n.translate('xpack.observability.alertsTGrid.reasonColumnDescription', {
+        defaultMessage: 'Reason',
+      }),
+      id: ALERT_REASON,
+      linkField: '*',
+    },
+  ];
+};

x-pack/plugins/observability/public/components/alerts_table/render_cell_value.test.tsx → x-pack/plugins/observability/public/components/alerts_table/common/render_cell_value.test.tsx

@@ -7,8 +7,8 @@
 
 import { ALERT_STATUS, ALERT_STATUS_ACTIVE, ALERT_STATUS_RECOVERED } from '@kbn/rule-data-utils';
 import type { DeprecatedCellValueElementProps } from '@kbn/timelines-plugin/common';
-import { createObservabilityRuleTypeRegistryMock } from '../../rules/observability_rule_type_registry_mock';
-import { render } from '../../utils/test_helper';
+import { createObservabilityRuleTypeRegistryMock } from '../../../rules/observability_rule_type_registry_mock';
+import { render } from '../../../utils/test_helper';
 import { getRenderCellValue } from './render_cell_value';
 
 interface AlertsTableRow {

x-pack/plugins/observability/public/components/alerts_table/render_cell_value.tsx → x-pack/plugins/observability/public/components/alerts_table/common/render_cell_value.tsx

@@ -16,16 +16,21 @@ import {
   ALERT_REASON,
   TIMESTAMP,
   ALERT_UUID,
+  ALERT_EVALUATION_VALUE,
+  ALERT_EVALUATION_VALUES,
+  ALERT_RULE_NAME,
+  ALERT_RULE_CATEGORY,
 } from '@kbn/rule-data-utils';
 import { isEmpty } from 'lodash';
 import type { TimelineNonEcsData } from '@kbn/timelines-plugin/common';
 
-import { asDuration } from '../../../common/utils/formatters';
-import { AlertSeverityBadge } from '../alert_severity_badge';
-import { AlertStatusIndicator } from '../alert_status_indicator';
+import { asDuration } from '../../../../common/utils/formatters';
+import { AlertSeverityBadge } from '../../alert_severity_badge';
+import { AlertStatusIndicator } from '../../alert_status_indicator';
+import { parseAlert } from '../../../pages/alerts/helpers/parse_alert';
+import type { ObservabilityRuleTypeRegistry } from '../../../rules/create_observability_rule_type_registry';
+import { CellTooltip } from './cell_tooltip';
 import { TimestampTooltip } from './timestamp_tooltip';
-import { parseAlert } from '../../pages/alerts/helpers/parse_alert';
-import type { ObservabilityRuleTypeRegistry } from '../../rules/create_observability_rule_type_registry';
 
 export const getMappedNonEcsValue = ({
   data,
@@ -56,7 +61,7 @@ const getRenderValue = (mappedNonEcsValue: any) => {
     return value;
   }
 
-  return '—-';
+  return '--';
 };
 
 /**
@@ -78,7 +83,6 @@ export const getRenderCellValue = ({
       data,
       fieldName: columnId,
     });
-
     const value = getRenderValue(mappedNonEcsValue);
 
     switch (columnId) {
@@ -95,6 +99,12 @@ export const getRenderCellValue = ({
         return asDuration(Number(value));
       case ALERT_SEVERITY:
         return <AlertSeverityBadge severityLevel={value ?? undefined} />;
+      case ALERT_EVALUATION_VALUE:
+        const values = getMappedNonEcsValue({
+          data,
+          fieldName: ALERT_EVALUATION_VALUES,
+        });
+        return values ? values : value;
       case ALERT_REASON:
         const dataFieldEs = data.reduce((acc, d) => ({ ...acc, [d.field]: d.value }), {});
         const alert = parseAlert(observabilityRuleTypeRegistry)(dataFieldEs);
@@ -108,6 +118,13 @@ export const getRenderCellValue = ({
             {alert.reason}
           </EuiLink>
         );
+      case ALERT_RULE_NAME:
+        const ruleCategory = getMappedNonEcsValue({
+          data,
+          fieldName: ALERT_RULE_CATEGORY,
+        });
+        const tooltipContent = getRenderValue(ruleCategory);
+        return <CellTooltip value={value} tooltipContent={tooltipContent} />;
       default:
         return <>{value}</>;
     }

x-pack/plugins/observability/public/components/alerts_table/timestamp_tooltip.tsx → x-pack/plugins/observability/public/components/alerts_table/common/timestamp_tooltip.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { EuiToolTip } from '@elastic/eui';
-import { asAbsoluteDateTime, TimeUnit } from '../../../common/utils/formatters/datetime';
+import { asAbsoluteDateTime, TimeUnit } from '../../../../common/utils/formatters/datetime';
 
 interface Props {
   /**