[8.6] Change style of rule tags in alert details page (#145946) (#146118)

# Backport This will backport the following commits from `main` to `8.6`: - [Change style of rule tags in alert details page (#145946)](https://github.com/elastic/kibana/pull/145946)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Bena Kansara <69037875+benakansara@users.noreply.github.com>
2025-04-23 09:19:04 -04:00 · 2022-11-23 06:44:42 -05:00 · 2022-11-23 06:44:42 -05:00 · e4baf889b7
commit e4baf889b7
parent 91741d4ed8
4 changed files with 28 additions and 35 deletions
--- a/x-pack/plugins/observability/e2e/journeys/index.ts
+++ b/x-pack/plugins/observability/e2e/journeys/index.ts
@ -5,6 +5,6 @@
 * 2.0.
 */

-export * from './exploratory_view';
+// export * from './exploratory_view';
 export * from './step_duration.journey';
-export * from './single_metric.journey';
+// export * from './single_metric.journey';
--- a/x-pack/plugins/observability/public/components/shared/alert_status_indicator.tsx
+++ b/x-pack/plugins/observability/public/components/shared/alert_status_indicator.tsx
@ -13,12 +13,13 @@ import { LIGHT_THEME } from '@elastic/charts';

 interface AlertStatusIndicatorProps {
  alertStatus: AlertStatus;
+  textSize?: 'xs' | 's' | 'm' | 'inherit';
 }

-export function AlertStatusIndicator({ alertStatus }: AlertStatusIndicatorProps) {
+export function AlertStatusIndicator({ alertStatus, textSize = 'xs' }: AlertStatusIndicatorProps) {
  if (alertStatus === ALERT_STATUS_ACTIVE) {
    return (
-      <EuiHealth color={LIGHT_THEME.colors.vizColors[2]} textSize="xs">
+      <EuiHealth color={LIGHT_THEME.colors.vizColors[2]} textSize={textSize}>
        {i18n.translate('xpack.observability.alertsTGrid.statusActiveDescription', {
          defaultMessage: 'Active',
        })}
@ -27,7 +28,7 @@ export function AlertStatusIndicator({ alertStatus }: AlertStatusIndicatorProps)
  }

  return (
-    <EuiHealth color={LIGHT_THEME.colors.vizColors[1]} textSize="xs">
+    <EuiHealth color={LIGHT_THEME.colors.vizColors[1]} textSize={textSize}>
      <EuiText color="subdued" size="relative">
        {i18n.translate('xpack.observability.alertsTGrid.statusRecoveredDescription', {
          defaultMessage: 'Recovered',
--- a/x-pack/plugins/observability/public/pages/alert_details/components/alert_summary.test.tsx
+++ b/x-pack/plugins/observability/public/pages/alert_details/components/alert_summary.test.tsx
@ -10,10 +10,6 @@ import * as useUiSettingHook from '@kbn/kibana-react-plugin/public/ui_settings/u
 import { render } from '../../../utils/test_helper';
 import { AlertSummary } from './alert_summary';
 import { asDuration } from '../../../../common/utils/formatters';
-import { kibanaStartMock } from '../../../utils/kibana_react.mock';
-import { useKibana } from '../../../utils/kibana_react';
-import { triggersActionsUiMock } from '@kbn/triggers-actions-ui-plugin/public/mocks';
-import { waitFor } from '@testing-library/react';
 import { alertWithTags, alertWithNoData, tags } from '../mock/alert';

 jest.mock('react-router-dom', () => ({
@ -23,17 +19,6 @@ jest.mock('react-router-dom', () => ({

 jest.mock('../../../utils/kibana_react');

-const useKibanaMock = useKibana as jest.Mock;
-
-const mockKibana = () => {
-  useKibanaMock.mockReturnValue({
-    services: {
-      ...kibanaStartMock.startContract(),
-      triggersActionsUi: triggersActionsUiMock.createStart(),
-    },
-  });
-};
-
 describe('Alert summary', () => {
  jest
    .spyOn(useUiSettingHook, 'useUiSetting')
@ -41,7 +26,6 @@ describe('Alert summary', () => {

  beforeEach(() => {
    jest.clearAllMocks();
-    mockKibana();
  });

  it('should show alert data', async () => {
@ -54,7 +38,6 @@ describe('Alert summary', () => {
    expect(
      alertSummary.getByText('Sep 2, 2021 @ 09:08:51.750', { exact: false })
    ).toBeInTheDocument();
-    await waitFor(() => expect(alertSummary.queryByTestId('tagsOutPopover')).toBeInTheDocument());
    expect(alertSummary.queryByText(tags[0])).toBeInTheDocument();
  });

@ -63,8 +46,5 @@ describe('Alert summary', () => {

    expect(alertSummary.queryByTestId('noAlertStatus')).toBeInTheDocument();
    expect(alertSummary.queryByTestId('noAlertStatus')).toHaveTextContent('-');
-    await waitFor(() =>
-      expect(alertSummary.queryByTestId('tagsOutPopover')).not.toBeInTheDocument()
-    );
  });
 });
--- a/x-pack/plugins/observability/public/pages/alert_details/components/alert_summary.tsx
+++ b/x-pack/plugins/observability/public/pages/alert_details/components/alert_summary.tsx
@ -5,7 +5,15 @@
 * 2.0.
 */
 import React from 'react';
-import { EuiText, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
+import {
+  EuiText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiTitle,
+  EuiBadge,
+  EuiBadgeGroup,
+} from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import moment from 'moment';
 import {
@ -21,12 +29,10 @@ import {
 } from '@kbn/rule-data-utils';
 import { asDuration } from '../../../../common/utils/formatters';
 import { AlertSummaryProps } from '../types';
-import { useKibana } from '../../../utils/kibana_react';
 import { AlertStatusIndicator } from '../../../components/shared/alert_status_indicator';
 import { DEFAULT_DATE_FORMAT } from '../constants';

 export function AlertSummary({ alert }: AlertSummaryProps) {
-  const { triggersActionsUi } = useKibana().services;
  const tags = alert?.fields[ALERT_RULE_TAGS];

  return (
@ -86,6 +92,7 @@ export function AlertSummary({ alert }: AlertSummaryProps) {
          <EuiSpacer size="s" />
          {alert?.fields[ALERT_STATUS] ? (
            <AlertStatusIndicator
+              textSize="s"
              alertStatus={
                alert?.fields[ALERT_STATUS] === ALERT_STATUS_ACTIVE
                  ? ALERT_STATUS_ACTIVE
@ -97,6 +104,7 @@ export function AlertSummary({ alert }: AlertSummaryProps) {
          )}
        </EuiFlexItem>
      </EuiFlexGroup>
+      <EuiSpacer size="m" />
      <EuiFlexGroup>
        <EuiFlexItem>
          <EuiTitle size="xxs">
@ -151,13 +159,17 @@ export function AlertSummary({ alert }: AlertSummaryProps) {
          </EuiTitle>
          <EuiSpacer size="s" />
          <div>
-            <EuiSpacer size="s" />
-            {tags &&
-              tags.length > 0 &&
-              triggersActionsUi.getRuleTagBadge<'tagsOutPopover'>({
-                tagsOutPopover: true,
-                tags,
-              })}
+            {tags && tags.length > 0 ? (
+              <EuiBadgeGroup>
+                {tags.map((tag, index) => (
+                  <EuiBadge data-test-subj={`ruleTagBadge-${tag}`} key={index} color="hollow">
+                    <EuiText size="s">{tag}</EuiText>
+                  </EuiBadge>
+                ))}
+              </EuiBadgeGroup>
+            ) : (
+              <div data-test-subj="noRuleTags">-</div>
+            )}
          </div>
        </EuiFlexItem>
      </EuiFlexGroup>