From 6b846af084b60d0eba3bfcda3ee754b8584b4cfa Mon Sep 17 00:00:00 2001
From: Faisal Kanout <faisal.kanout@elastic.co>
Date: Mon, 23 May 2022 14:11:04 +0300
Subject: [PATCH] [Actionable Observability] Update the Rule details design and
 clean up (#132616)

* Add rule status in the rule summary

* Match design

* Remove unused imports

* code review
---
 .../rule_details/components/page_title.tsx    | 13 +++-
 .../public/pages/rule_details/index.tsx       | 68 ++++++++-----------
 2 files changed, 39 insertions(+), 42 deletions(-)

diff --git a/x-pack/plugins/observability/public/pages/rule_details/components/page_title.tsx b/x-pack/plugins/observability/public/pages/rule_details/components/page_title.tsx
index 478fbf69a226c0..d75be330df548e 100644
--- a/x-pack/plugins/observability/public/pages/rule_details/components/page_title.tsx
+++ b/x-pack/plugins/observability/public/pages/rule_details/components/page_title.tsx
@@ -6,11 +6,12 @@
  */
 import React, { useState } from 'react';
 import moment from 'moment';
-import { EuiText, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiText, EuiFlexGroup, EuiFlexItem, EuiBadge, EuiSpacer } from '@elastic/eui';
 import { ExperimentalBadge } from '../../../components/shared/experimental_badge';
 import { PageHeaderProps } from '../types';
 import { useKibana } from '../../../utils/kibana_react';
 import { LAST_UPDATED_MESSAGE, CREATED_WORD, BY_WORD, ON_WORD } from '../translations';
+import { getHealthColor } from '../../rules/config';
 
 export function PageTitle({ rule }: PageHeaderProps) {
   const { triggersActionsUi } = useKibana().services;
@@ -23,6 +24,16 @@ export function PageTitle({ rule }: PageHeaderProps) {
   return (
     <>
       {rule.name} <ExperimentalBadge />
+      <EuiFlexItem grow={false}>
+        <EuiSpacer size="xs" />
+        <EuiText size="xs">
+          <EuiBadge color={getHealthColor(rule.executionStatus.status)}>
+            {rule.executionStatus.status.charAt(0).toUpperCase() +
+              rule.executionStatus.status.slice(1)}
+          </EuiBadge>
+        </EuiText>
+        <EuiSpacer size="s" />
+      </EuiFlexItem>
       <EuiFlexGroup alignItems="baseline">
         <EuiFlexItem component="span" grow={false}>
           <EuiText color="subdued" size="xs">
diff --git a/x-pack/plugins/observability/public/pages/rule_details/index.tsx b/x-pack/plugins/observability/public/pages/rule_details/index.tsx
index 5cc12452e57e14..9ca155ab7ef256 100644
--- a/x-pack/plugins/observability/public/pages/rule_details/index.tsx
+++ b/x-pack/plugins/observability/public/pages/rule_details/index.tsx
@@ -18,7 +18,6 @@ import {
   EuiButtonIcon,
   EuiPanel,
   EuiTitle,
-  EuiHealth,
   EuiPopover,
   EuiHorizontalRule,
   EuiTabbedContent,
@@ -42,13 +41,8 @@ import { ALERTS_FEATURE_ID } from '@kbn/alerting-plugin/common';
 
 import { DeleteModalConfirmation } from '../rules/components/delete_modal_confirmation';
 import { CenterJustifiedSpinner } from '../rules/components/center_justified_spinner';
-import { getHealthColor, OBSERVABILITY_SOLUTIONS } from '../rules/config';
-import {
-  RuleDetailsPathParams,
-  EVENT_ERROR_LOG_TAB,
-  EVENT_LOG_LIST_TAB,
-  ALERT_LIST_TAB,
-} from './types';
+import { OBSERVABILITY_SOLUTIONS } from '../rules/config';
+import { RuleDetailsPathParams, EVENT_LOG_LIST_TAB, ALERT_LIST_TAB } from './types';
 import { useBreadcrumbs } from '../../hooks/use_breadcrumbs';
 import { usePluginContext } from '../../hooks/use_plugin_context';
 import { useFetchRule } from '../../hooks/use_fetch_rule';
@@ -188,14 +182,6 @@ export function RuleDetailsPage() {
       'data-test-subj': 'ruleAlertListTab',
       content: <EuiText>Alerts</EuiText>,
     },
-    {
-      id: EVENT_ERROR_LOG_TAB,
-      name: i18n.translate('xpack.observability.ruleDetails.rule.errorLogTabText', {
-        defaultMessage: 'Error log',
-      }),
-      'data-test-subj': 'errorLogTab',
-      content: <EuiText>Error log</EuiText>,
-    },
   ];
 
   if (isPageLoading || isRuleLoading) return <CenterJustifiedSpinner />;
@@ -222,6 +208,20 @@ export function RuleDetailsPage() {
         />
       </EuiPanel>
     );
+
+  const getRuleStatusComponent = () =>
+    getRuleStatusDropdown({
+      rule,
+      enableRule: async () => await enableRule({ http, id: rule.id }),
+      disableRule: async () => await disableRule({ http, id: rule.id }),
+      onRuleChanged: () => reloadRule(),
+      isEditable: hasEditButton,
+      snoozeRule: async (snoozeEndTime: string | -1) => {
+        await snoozeRule({ http, id: rule.id, snoozeEndTime });
+      },
+      unsnoozeRule: async () => await unsnoozeRule({ http, id: rule.id }),
+    });
+
   const getNotifyText = () =>
     NOTIFY_WHEN_OPTIONS.find((option) => option.value === rule?.notifyWhen)?.inputDisplay ||
     rule.notifyWhen;
@@ -284,17 +284,7 @@ export function RuleDetailsPage() {
                     </EuiFlexItem>
                   </EuiTitle>
 
-                  {getRuleStatusDropdown({
-                    rule,
-                    enableRule: async () => await enableRule({ http, id: rule.id }),
-                    disableRule: async () => await disableRule({ http, id: rule.id }),
-                    onRuleChanged: () => reloadRule(),
-                    isEditable: hasEditButton,
-                    snoozeRule: async (snoozeEndTime: string | -1) => {
-                      await snoozeRule({ http, id: rule.id, snoozeEndTime });
-                    },
-                    unsnoozeRule: async () => await unsnoozeRule({ http, id: rule.id }),
-                  })}
+                  {getRuleStatusComponent()}
                 </EuiFlexItem>
               </EuiFlexGroup>,
             ]
@@ -304,21 +294,8 @@ export function RuleDetailsPage() {
       <EuiFlexGroup wrap={true} gutterSize="m">
         {/* Left side of Rule Summary */}
         <EuiFlexItem grow={1}>
-          <EuiPanel
-            color={getHealthColor(rule.executionStatus.status)}
-            hasBorder={false}
-            paddingSize={'m'}
-          >
+          <EuiPanel color="subdued" hasBorder={false} paddingSize={'m'}>
             <EuiFlexGroup direction="column" gutterSize="xs">
-              <EuiFlexItem>
-                <EuiTitle size="s">
-                  <EuiHealth textSize="inherit" color={getHealthColor(rule.executionStatus.status)}>
-                    {rule.executionStatus.status.charAt(0).toUpperCase() +
-                      rule.executionStatus.status.slice(1)}
-                  </EuiHealth>
-                </EuiTitle>
-              </EuiFlexItem>
-              <EuiSpacer size="m" />
               <EuiFlexGroup>
                 <ItemTitleRuleSummary>
                   {i18n.translate('xpack.observability.ruleDetails.lastRun', {
@@ -330,6 +307,15 @@ export function RuleDetailsPage() {
                   itemValue={moment(rule.executionStatus.lastExecutionDate).fromNow()}
                 />
               </EuiFlexGroup>
+              <EuiSpacer size="m" />
+              <EuiFlexGroup>
+                <ItemTitleRuleSummary>
+                  {i18n.translate('xpack.observability.ruleDetails.ruleIs', {
+                    defaultMessage: 'Rule is',
+                  })}
+                </ItemTitleRuleSummary>
+                <EuiFlexItem>{getRuleStatusComponent()}</EuiFlexItem>
+              </EuiFlexGroup>
               <EuiHorizontalRule margin="s" />
               <EuiFlexGroup>
                 <ItemTitleRuleSummary>