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

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

@@ -12,21 +12,21 @@ 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,

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_GROUP_VALUE,
+  ALERT_REASON,
+  ALERT_RULE_NAME,
+  ALERT_START,
+  ALERT_STATUS,
+  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_GROUP_VALUE,
+      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,18 @@ import {
   ALERT_REASON,
   TIMESTAMP,
   ALERT_UUID,
+  ALERT_EVALUATION_VALUE,
+  ALERT_EVALUATION_VALUES,
 } 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 { 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 +58,7 @@ const getRenderValue = (mappedNonEcsValue: any) => {
     return value;
   }
 
-  return '—-';
+  return '--';
 };
 
 /**
@@ -78,7 +80,6 @@ export const getRenderCellValue = ({
       data,
       fieldName: columnId,
     });
-
     const value = getRenderValue(mappedNonEcsValue);
 
     switch (columnId) {
@@ -95,6 +96,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);

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 {
   /**

x-pack/plugins/observability/public/components/alerts_table/register_alerts_table_configuration.tsx

@@ -0,0 +1,39 @@
+/*
+ * 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 { AlertTableConfigRegistry } from '@kbn/triggers-actions-ui-plugin/public/application/alert_table_config_registry';
+import { ObservabilityRuleTypeRegistry } from '../..';
+import { getAlertsPageTableConfiguration } from './alerts/get_alerts_page_table_configuration';
+import { getRuleDetailsTableConfiguration } from './rule_details/get_rule_details_table_configuration';
+import { getSloAlertsTableConfiguration } from './slo/get_slo_alerts_table_configuration';
+
+export const registerAlertsTableConfiguration = (
+  alertTableConfigRegistry: AlertTableConfigRegistry,
+  observabilityRuleTypeRegistry: ObservabilityRuleTypeRegistry,
+  config: any
+) => {
+  // Alert page
+  const alertsPageAlertsTableConfig = getAlertsPageTableConfiguration(
+    observabilityRuleTypeRegistry,
+    config
+  );
+  alertTableConfigRegistry.register(alertsPageAlertsTableConfig);
+
+  // Rule details page
+  const ruleDetailsAlertsTableConfig = getRuleDetailsTableConfiguration(
+    observabilityRuleTypeRegistry,
+    config
+  );
+  alertTableConfigRegistry.register(ruleDetailsAlertsTableConfig);
+
+  // SLO
+  const sloAlertsTableConfig = getSloAlertsTableConfiguration(
+    observabilityRuleTypeRegistry,
+    config
+  );
+  alertTableConfigRegistry.register(sloAlertsTableConfig);
+};

x-pack/plugins/observability/public/components/alerts_table/rule_details/get_rule_details_table_configuration.tsx

@@ -0,0 +1,59 @@
+/*
+ * 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 { TIMESTAMP } from '@kbn/rule-data-utils';
+import { SortOrder } from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
+import {
+  AlertsTableConfigurationRegistry,
+  RenderCustomActionsRowArgs,
+} from '@kbn/triggers-actions-ui-plugin/public/types';
+import { RULE_DETAILS_ALERTS_TABLE_CONFIG_ID } from '../../../constants';
+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 getRuleDetailsTableConfiguration = (
+  observabilityRuleTypeRegistry: ObservabilityRuleTypeRegistry,
+  config: ConfigSchema
+): AlertsTableConfigurationRegistry => ({
+  id: RULE_DETAILS_ALERTS_TABLE_CONFIG_ID,
+  cases: { featureId: casesFeatureId, owner: [observabilityFeatureId] },
+  columns: getColumns(),
+  getRenderCellValue: ({ setFlyoutAlert }) =>
+    getRenderCellValue({
+      observabilityRuleTypeRegistry,
+      setFlyoutAlert,
+    }),
+  sort: [
+    {
+      [TIMESTAMP]: {
+        order: 'desc' as SortOrder,
+      },
+    },
+  ],
+  useActionsColumn: () => ({
+    renderCustomActionsRow: (props: RenderCustomActionsRowArgs) => {
+      return (
+        <AlertActions
+          {...props}
+          config={config}
+          observabilityRuleTypeRegistry={observabilityRuleTypeRegistry}
+        />
+      );
+    },
+  }),
+  useInternalFlyout: () => {
+    const { header, body, footer } = useGetAlertFlyoutComponents(observabilityRuleTypeRegistry);
+    return { header, body, footer };
+  },
+  ruleTypeIds: observabilityRuleTypeRegistry.list(),
+});