[SLO] Alerts embeddable

x-pack/plugins/observability/kibana.jsonc

@@ -20,6 +20,7 @@
       "dataViews",
       "dataViewEditor",
       "embeddable",
+      "uiActions",
       "exploratoryView",
       "features",
       "files",

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

@@ -47,12 +47,16 @@ const getRenderValue = (mappedNonEcsValue: any) => {
 
   if (!isEmpty(value)) {
     if (typeof value === 'object') {
-      return JSON.stringify(value);
+      try {
+        return JSON.stringify(value);
+      } catch (e) {
+        return 'Error: Unable to parse JSON value.';
+      }
     }
     return value;
   }
 
-  return '—';
+  return '—-';
 };
 
 /**

x-pack/plugins/observability/public/components/alerts_table/slo/default_columns.tsx

@@ -0,0 +1,60 @@
+/*
+ * 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, ALERT_RULE_NAME } 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<EuiDataGridColumn, 'display' | 'displayAsText' | 'id' | 'initialWidth'> & ColumnHeaderOptions
+> = [
+  {
+    columnHeaderType: 'not-filtered',
+    displayAsText: i18n.translate(
+      'xpack.observability.sloAlertsEmbeddable.alertsTGrid.statusColumnDescription',
+      {
+        defaultMessage: 'Status',
+      }
+    ),
+    id: ALERT_STATUS,
+    initialWidth: 110,
+  },
+  {
+    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.sloColumnDescription', {
+      defaultMessage: 'Rule name',
+    }),
+    id: ALERT_RULE_NAME,
+    initialWidth: 110,
+  },
+  {
+    columnHeaderType: 'not-filtered',
+    displayAsText: i18n.translate('xpack.observability.alertsTGrid.reasonColumnDescription', {
+      defaultMessage: 'Reason',
+    }),
+    id: ALERT_REASON,
+    linkField: '*',
+  },
+];

x-pack/plugins/observability/public/components/alerts_table/slo/get_slo_alerts_table_configuration.tsx

@@ -0,0 +1,43 @@
+/*
+ * 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 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 { AlertsTableConfigurationRegistry } 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 { 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';
+
+export const getSloAlertsTableConfiguration = (
+  observabilityRuleTypeRegistry: ObservabilityRuleTypeRegistry,
+  config: ConfigSchema
+): AlertsTableConfigurationRegistry => ({
+  id: SLO_ALERTS_TABLE_CONFID,
+  cases: { featureId: casesFeatureId, owner: [observabilityFeatureId] },
+  columns,
+  getRenderCellValue: (({ setFlyoutAlert }: { setFlyoutAlert: (data: TopAlert) => void }) => {
+    return getRenderCellValue({ observabilityRuleTypeRegistry, setFlyoutAlert });
+  }) as unknown as GetRenderCellValue,
+  sort: [
+    {
+      [TIMESTAMP]: {
+        order: 'desc' as SortOrder,
+      },
+    },
+  ],
+
+  useInternalFlyout: () => {
+    const { header, body, footer } = useGetAlertFlyoutComponents(observabilityRuleTypeRegistry);
+    return { header, body, footer };
+  },
+});

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

@@ -0,0 +1,111 @@
+/*
+ * 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 <AlertStatusIndicator alertStatus={value} />;
+      case TIMESTAMP:
+        return <TimestampTooltip time={new Date(value ?? '').getTime()} timeUnit="milliseconds" />;
+      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 (
+          <EuiLink
+            data-test-subj="o11yGetRenderCellValueLink"
+            css={{ display: 'contents' }}
+            onClick={() => setFlyoutAlert && setFlyoutAlert(alert)}
+          >
+            {alert.reason}
+          </EuiLink>
+        );
+      default:
+        return <>{value}</>;
+    }
+  };
+};

x-pack/plugins/observability/public/embeddable/slo/alerts/components/slo_alerts_summary.tsx

@@ -0,0 +1,77 @@
+/*
+ * 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, { useMemo } from 'react';
+import type { TimeRange } from '@kbn/es-query';
+import { useSloAlertsQuery } from './slo_alerts_table';
+import { getAlertSummaryTimeRange } from '../../../../utils/alert_summary_widget';
+import { observabilityAlertFeatureIds } from '../../../../../common/constants';
+import { useTimeBuckets } from '../../../../hooks/use_time_buckets';
+import { calculateTimeRangeBucketSize } from '../../../../pages/overview/helpers/calculate_bucket_size';
+import { SloEmbeddableDeps } from '../slo_alerts_embeddable';
+import { SloItem } from '../types';
+
+const DEFAULT_INTERVAL = '60s';
+const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD HH:mm';
+
+interface Props {
+  deps: SloEmbeddableDeps;
+  slos: SloItem[];
+  timeRange: TimeRange;
+  onLoaded?: () => void;
+}
+
+export function SloAlertsSummary({ slos, deps, timeRange, onLoaded }: Props) {
+  const {
+    charts,
+    triggersActionsUi: { getAlertSummaryWidget: AlertSummaryWidget },
+  } = deps;
+
+  const esQuery = useSloAlertsQuery(slos, timeRange);
+  const timeBuckets = useTimeBuckets();
+  const bucketSize = useMemo(
+    () =>
+      calculateTimeRangeBucketSize(
+        {
+          from: timeRange.from,
+          to: timeRange.to,
+        },
+        timeBuckets
+      ),
+    [timeRange.from, timeRange.to, timeBuckets]
+  );
+  const alertSummaryTimeRange = useMemo(
+    () =>
+      getAlertSummaryTimeRange(
+        {
+          from: timeRange.from,
+          to: timeRange.to,
+        },
+        bucketSize?.intervalString ?? DEFAULT_INTERVAL,
+        bucketSize?.dateFormat ?? DEFAULT_DATE_FORMAT
+      ),
+    [timeRange.from, timeRange.to, bucketSize]
+  );
+
+  const chartProps = {
+    theme: charts.theme.useChartsTheme(),
+    baseTheme: charts.theme.useChartsBaseTheme(),
+  };
+  return (
+    <AlertSummaryWidget
+      featureIds={observabilityAlertFeatureIds}
+      filter={esQuery}
+      timeRange={alertSummaryTimeRange}
+      chartProps={chartProps}
+      fullSize
+      onLoaded={() => {
+        if (onLoaded) {
+          onLoaded();
+        }
+      }}
+    />
+  );
+}