diff --git a/x-pack/plugins/observability/public/components/alert_search_bar/containers/state_container.tsx b/x-pack/plugins/observability/public/components/alert_search_bar/containers/state_container.tsx index e1fc666df20b5..5513cc62df626 100644 --- a/x-pack/plugins/observability/public/components/alert_search_bar/containers/state_container.tsx +++ b/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, diff --git a/x-pack/plugins/observability/public/components/alerts_table/get_alerts_table_configuration.tsx b/x-pack/plugins/observability/public/components/alerts_table/alerts/get_alerts_page_table_configuration.tsx similarity index 70% rename from x-pack/plugins/observability/public/components/alerts_table/get_alerts_table_configuration.tsx rename to x-pack/plugins/observability/public/components/alerts_table/alerts/get_alerts_page_table_configuration.tsx index 38eb92c2ff267..130cadce03ab2 100644 --- a/x-pack/plugins/observability/public/components/alerts_table/get_alerts_table_configuration.tsx +++ b/x-pack/plugins/observability/public/components/alerts_table/alerts/get_alerts_page_table_configuration.tsx @@ -6,27 +6,27 @@ */ 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, @@ -34,7 +34,7 @@ export const getAlertsTableConfiguration = ( }), sort: [ { - [TIMESTAMP]: { + [ALERT_START]: { order: 'desc' as SortOrder, }, }, diff --git a/x-pack/plugins/observability/public/components/alerts_table/common/cell_tooltip.test.tsx b/x-pack/plugins/observability/public/components/alerts_table/common/cell_tooltip.test.tsx new file mode 100644 index 0000000000000..b4eb7e7f3801e --- /dev/null +++ b/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(); + + fireEvent.mouseOver(screen.getByText('cell value')); + + await waitFor(() => screen.getByTestId('cell-tooltip')); + + expect(screen.getByText('tooltip content')).toBeInTheDocument(); + }); +}); diff --git a/x-pack/plugins/observability/public/components/alerts_table/common/cell_tooltip.tsx b/x-pack/plugins/observability/public/components/alerts_table/common/cell_tooltip.tsx new file mode 100644 index 0000000000000..0298f1a3f1d47 --- /dev/null +++ b/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 ( + + <>{value} + + ); +} diff --git a/x-pack/plugins/observability/public/components/alerts_table/common/get_columns.tsx b/x-pack/plugins/observability/public/components/alerts_table/common/get_columns.tsx new file mode 100644 index 0000000000000..2d2c1b1c299cf --- /dev/null +++ b/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 & ColumnHeaderOptions +> => { + const ruleNameColumn: Array< + Pick & + 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: '*', + }, + ]; +}; diff --git a/x-pack/plugins/observability/public/components/alerts_table/render_cell_value.test.tsx b/x-pack/plugins/observability/public/components/alerts_table/common/render_cell_value.test.tsx similarity index 93% rename from x-pack/plugins/observability/public/components/alerts_table/render_cell_value.test.tsx rename to x-pack/plugins/observability/public/components/alerts_table/common/render_cell_value.test.tsx index 39ea7dea2ffbd..91c6e8d2c3b4a 100644 --- a/x-pack/plugins/observability/public/components/alerts_table/render_cell_value.test.tsx +++ b/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 { diff --git a/x-pack/plugins/observability/public/components/alerts_table/render_cell_value.tsx b/x-pack/plugins/observability/public/components/alerts_table/common/render_cell_value.tsx similarity index 76% rename from x-pack/plugins/observability/public/components/alerts_table/render_cell_value.tsx rename to x-pack/plugins/observability/public/components/alerts_table/common/render_cell_value.tsx index 258a15d6721be..3bde70900d334 100644 --- a/x-pack/plugins/observability/public/components/alerts_table/render_cell_value.tsx +++ b/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 ; + 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} ); + case ALERT_RULE_NAME: + const ruleCategory = getMappedNonEcsValue({ + data, + fieldName: ALERT_RULE_CATEGORY, + }); + const tooltipContent = getRenderValue(ruleCategory); + return ; default: return <>{value}; } diff --git a/x-pack/plugins/observability/public/components/alerts_table/timestamp_tooltip.test.tsx b/x-pack/plugins/observability/public/components/alerts_table/common/timestamp_tooltip.test.tsx similarity index 100% rename from x-pack/plugins/observability/public/components/alerts_table/timestamp_tooltip.test.tsx rename to x-pack/plugins/observability/public/components/alerts_table/common/timestamp_tooltip.test.tsx diff --git a/x-pack/plugins/observability/public/components/alerts_table/timestamp_tooltip.tsx b/x-pack/plugins/observability/public/components/alerts_table/common/timestamp_tooltip.tsx similarity index 88% rename from x-pack/plugins/observability/public/components/alerts_table/timestamp_tooltip.tsx rename to x-pack/plugins/observability/public/components/alerts_table/common/timestamp_tooltip.tsx index 42a26e9e52b94..7b82455ad5932 100644 --- a/x-pack/plugins/observability/public/components/alerts_table/timestamp_tooltip.tsx +++ b/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 { /** diff --git a/x-pack/plugins/observability/public/components/alerts_table/default_columns.tsx b/x-pack/plugins/observability/public/components/alerts_table/default_columns.tsx deleted file mode 100644 index 65f1b50092382..0000000000000 --- a/x-pack/plugins/observability/public/components/alerts_table/default_columns.tsx +++ /dev/null @@ -1,58 +0,0 @@ -/* - * 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_DURATION, ALERT_REASON, ALERT_STATUS, TIMESTAMP } 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 columns: Array< - Pick & ColumnHeaderOptions -> = [ - { - columnHeaderType: 'not-filtered', - displayAsText: i18n.translate('xpack.observability.alertsTGrid.statusColumnDescription', { - defaultMessage: 'Alert Status', - }), - id: ALERT_STATUS, - initialWidth: 140, - }, - { - columnHeaderType: 'not-filtered', - displayAsText: i18n.translate('xpack.observability.alertsTGrid.lastUpdatedColumnDescription', { - defaultMessage: 'Last updated', - }), - id: TIMESTAMP, - initialWidth: 230, - schema: 'datetime', - }, - { - columnHeaderType: 'not-filtered', - displayAsText: i18n.translate('xpack.observability.alertsTGrid.durationColumnDescription', { - defaultMessage: 'Duration', - }), - id: ALERT_DURATION, - initialWidth: 116, - }, - { - columnHeaderType: 'not-filtered', - displayAsText: i18n.translate('xpack.observability.alertsTGrid.reasonColumnDescription', { - defaultMessage: 'Reason', - }), - id: ALERT_REASON, - linkField: '*', - }, -]; diff --git a/x-pack/plugins/observability/public/components/alerts_table/register_alerts_table_configuration.tsx b/x-pack/plugins/observability/public/components/alerts_table/register_alerts_table_configuration.tsx new file mode 100644 index 0000000000000..1ac236f83608b --- /dev/null +++ b/x-pack/plugins/observability/public/components/alerts_table/register_alerts_table_configuration.tsx @@ -0,0 +1,40 @@ +/* + * 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 type { ConfigSchema } from '../../plugin'; +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: ConfigSchema +) => { + // 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); +}; diff --git a/x-pack/plugins/observability/public/components/alerts_table/rule_details/get_rule_details_table_configuration.tsx b/x-pack/plugins/observability/public/components/alerts_table/rule_details/get_rule_details_table_configuration.tsx new file mode 100644 index 0000000000000..369a3d4c5c12d --- /dev/null +++ b/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 ( + + ); + }, + }), + useInternalFlyout: () => { + const { header, body, footer } = useGetAlertFlyoutComponents(observabilityRuleTypeRegistry); + return { header, body, footer }; + }, + ruleTypeIds: observabilityRuleTypeRegistry.list(), +}); diff --git a/x-pack/plugins/observability/public/components/alerts_table/slo/get_slo_alerts_table_configuration.tsx b/x-pack/plugins/observability/public/components/alerts_table/slo/get_slo_alerts_table_configuration.tsx index d43c12c4627ed..9bebb82234df6 100644 --- a/x-pack/plugins/observability/public/components/alerts_table/slo/get_slo_alerts_table_configuration.tsx +++ b/x-pack/plugins/observability/public/components/alerts_table/slo/get_slo_alerts_table_configuration.tsx @@ -5,32 +5,32 @@ * 2.0. */ -import type { GetRenderCellValue } from '@kbn/triggers-actions-ui-plugin/public'; -import { TIMESTAMP } from '@kbn/rule-data-utils'; import { SortOrder } from '@elastic/elasticsearch/lib/api/typesWithBodyKey'; +import { ALERT_DURATION } from '@kbn/rule-data-utils'; import { AlertsTableConfigurationRegistry } from '@kbn/triggers-actions-ui-plugin/public/types'; import { casesFeatureId, observabilityFeatureId } from '../../../../common'; -import { getRenderCellValue } from './render_cell_value'; +import { getRenderCellValue } from '../common/render_cell_value'; import { columns } from './default_columns'; 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 type { TopAlert } from '../../../typings/alerts'; -import { SLO_ALERTS_TABLE_CONFID } from '../../../embeddable/slo/constants'; +import { SLO_ALERTS_TABLE_CONFIG_ID } from '../../../embeddable/slo/constants'; export const getSloAlertsTableConfiguration = ( observabilityRuleTypeRegistry: ObservabilityRuleTypeRegistry, config: ConfigSchema ): AlertsTableConfigurationRegistry => ({ - id: SLO_ALERTS_TABLE_CONFID, + id: SLO_ALERTS_TABLE_CONFIG_ID, cases: { featureId: casesFeatureId, owner: [observabilityFeatureId] }, columns, - getRenderCellValue: (({ setFlyoutAlert }: { setFlyoutAlert: (data: TopAlert) => void }) => { - return getRenderCellValue({ observabilityRuleTypeRegistry, setFlyoutAlert }); - }) as unknown as GetRenderCellValue, + getRenderCellValue: ({ setFlyoutAlert }) => + getRenderCellValue({ + observabilityRuleTypeRegistry, + setFlyoutAlert, + }), sort: [ { - [TIMESTAMP]: { + [ALERT_DURATION]: { order: 'desc' as SortOrder, }, }, diff --git a/x-pack/plugins/observability/public/components/alerts_table/slo/render_cell_value.tsx b/x-pack/plugins/observability/public/components/alerts_table/slo/render_cell_value.tsx deleted file mode 100644 index a7c5f7c71d535..0000000000000 --- a/x-pack/plugins/observability/public/components/alerts_table/slo/render_cell_value.tsx +++ /dev/null @@ -1,111 +0,0 @@ -/* - * 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 { EuiLink } from '@elastic/eui'; -import React from 'react'; -import { - ALERT_DURATION, - ALERT_RULE_NAME, - ALERT_STATUS, - ALERT_STATUS_ACTIVE, - ALERT_STATUS_RECOVERED, - ALERT_REASON, - TIMESTAMP, -} from '@kbn/rule-data-utils'; -import { isEmpty } from 'lodash'; -import type { - DeprecatedCellValueElementProps, - TimelineNonEcsData, -} from '@kbn/timelines-plugin/common'; - -import { asDuration } from '../../../../common/utils/formatters'; -import { AlertStatusIndicator } from '../../alert_status_indicator'; -import { TimestampTooltip } from '../timestamp_tooltip'; -import { parseAlert } from '../../../pages/alerts/helpers/parse_alert'; -import type { ObservabilityRuleTypeRegistry } from '../../../rules/create_observability_rule_type_registry'; -import type { TopAlert } from '../../../typings/alerts'; - -export const getMappedNonEcsValue = ({ - data, - fieldName, -}: { - data: TimelineNonEcsData[]; - fieldName: string; -}): string[] | undefined => { - const item = data.find((d) => d.field === fieldName); - if (item != null && item.value != null) { - return item.value; - } - return undefined; -}; - -const getRenderValue = (mappedNonEcsValue: any) => { - // can be updated when working on https://github.com/elastic/kibana/issues/140819 - const value = Array.isArray(mappedNonEcsValue) ? mappedNonEcsValue.join() : mappedNonEcsValue; - - if (!isEmpty(value)) { - if (typeof value === 'object') { - return JSON.stringify(value); - } - return value; - } - - return '—'; -}; - -/** - * This implementation of `EuiDataGrid`'s `renderCellValue` - * accepts `EuiDataGridCellValueElementProps`, plus `data` - * from the TGrid - */ - -export const getRenderCellValue = ({ - setFlyoutAlert, - observabilityRuleTypeRegistry, -}: { - setFlyoutAlert: (data: TopAlert) => void; - observabilityRuleTypeRegistry: ObservabilityRuleTypeRegistry; -}) => { - return ({ columnId, data }: DeprecatedCellValueElementProps) => { - if (!data) return null; - const mappedNonEcsValue = getMappedNonEcsValue({ - data, - fieldName: columnId, - }); - const value = getRenderValue(mappedNonEcsValue); - - switch (columnId) { - case ALERT_STATUS: - if (value !== ALERT_STATUS_ACTIVE && value !== ALERT_STATUS_RECOVERED) { - // NOTE: This should only be needed to narrow down the type. - // Status should be either "active" or "recovered". - return null; - } - return ; - case TIMESTAMP: - return ; - case ALERT_DURATION: - return asDuration(Number(value)); - case ALERT_RULE_NAME: - return value; - case ALERT_REASON: - const dataFieldEs = data.reduce((acc, d) => ({ ...acc, [d.field]: d.value }), {}); - const alert = parseAlert(observabilityRuleTypeRegistry)(dataFieldEs); - - return ( - setFlyoutAlert && setFlyoutAlert(alert)} - > - {alert.reason} - - ); - default: - return <>{value}; - } - }; -}; diff --git a/x-pack/plugins/observability/public/constants.ts b/x-pack/plugins/observability/public/constants.ts index 40d24b18340bc..cea913c2e548b 100644 --- a/x-pack/plugins/observability/public/constants.ts +++ b/x-pack/plugins/observability/public/constants.ts @@ -9,3 +9,5 @@ export const DEFAULT_INTERVAL = '60s'; export const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD HH:mm'; export const SLO_LONG_REFETCH_INTERVAL = 60 * 1000; // 1 minute export const SLO_SHORT_REFETCH_INTERVAL = 5 * 1000; // 5 seconds + +export const RULE_DETAILS_ALERTS_TABLE_CONFIG_ID = `rule-details-alerts-table`; diff --git a/x-pack/plugins/observability/public/embeddable/slo/alerts/components/slo_alerts_table.tsx b/x-pack/plugins/observability/public/embeddable/slo/alerts/components/slo_alerts_table.tsx index 9df76482e4f39..d0d7739729903 100644 --- a/x-pack/plugins/observability/public/embeddable/slo/alerts/components/slo_alerts_table.tsx +++ b/x-pack/plugins/observability/public/embeddable/slo/alerts/components/slo_alerts_table.tsx @@ -11,7 +11,7 @@ import { ALL_VALUE } from '@kbn/slo-schema'; import { AlertsTableStateProps } from '@kbn/triggers-actions-ui-plugin/public/application/sections/alerts_table/alerts_table_state'; import { SloEmbeddableDeps } from '../slo_alerts_embeddable'; import type { SloItem } from '../types'; -import { SLO_ALERTS_TABLE_CONFID } from '../../constants'; +import { SLO_ALERTS_TABLE_CONFIG_ID } from '../../constants'; const ALERTS_PER_PAGE = 10; const ALERTS_TABLE_ID = 'xpack.observability.sloAlertsEmbeddable.alert.table'; @@ -86,7 +86,7 @@ export function SloAlertsTable({ slos, deps, timeRange, onLoaded, lastReloadRequ