From 3571c045a92e2027d2e1d3e879c24694de364106 Mon Sep 17 00:00:00 2001 From: Faisal Kanout Date: Fri, 20 May 2022 14:08:54 +0200 Subject: [PATCH 1/4] Add rule status in the rule summary --- .../public/pages/rule_details/index.tsx | 36 +++++++++++-------- 1 file changed, 22 insertions(+), 14 deletions(-) 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 5cc12452e57e1..6bb66881e5e96 100644 --- a/x-pack/plugins/observability/public/pages/rule_details/index.tsx +++ b/x-pack/plugins/observability/public/pages/rule_details/index.tsx @@ -43,12 +43,7 @@ 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 { 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 +183,6 @@ export function RuleDetailsPage() { 'data-test-subj': 'ruleAlertListTab', content: Alerts, }, - { - id: EVENT_ERROR_LOG_TAB, - name: i18n.translate('xpack.observability.ruleDetails.rule.errorLogTabText', { - defaultMessage: 'Error log', - }), - 'data-test-subj': 'errorLogTab', - content: Error log, - }, ]; if (isPageLoading || isRuleLoading) return ; @@ -330,6 +317,27 @@ export function RuleDetailsPage() { itemValue={moment(rule.executionStatus.lastExecutionDate).fromNow()} /> + + + + {i18n.translate('xpack.observability.ruleDetails.ruleIs', { + defaultMessage: 'Rule is', + })} + + + {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 }), + })} + + From 08a2ed46f16919753006ebf74b525e8222323369 Mon Sep 17 00:00:00 2001 From: Faisal Kanout Date: Fri, 20 May 2022 14:24:20 +0200 Subject: [PATCH 2/4] Match desgin --- .../pages/rule_details/components/page_title.tsx | 13 ++++++++++++- .../public/pages/rule_details/index.tsx | 15 +-------------- 2 files changed, 13 insertions(+), 15 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 478fbf69a226c..d75be330df548 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} + + + + + {rule.executionStatus.status.charAt(0).toUpperCase() + + rule.executionStatus.status.slice(1)} + + + + 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 6bb66881e5e96..535e4e5da3218 100644 --- a/x-pack/plugins/observability/public/pages/rule_details/index.tsx +++ b/x-pack/plugins/observability/public/pages/rule_details/index.tsx @@ -291,21 +291,8 @@ export function RuleDetailsPage() { {/* Left side of Rule Summary */} - + - - - - {rule.executionStatus.status.charAt(0).toUpperCase() + - rule.executionStatus.status.slice(1)} - - - - {i18n.translate('xpack.observability.ruleDetails.lastRun', { From 32d91a10d5f962c0f1ca6caff8ffecfb7b9e49d4 Mon Sep 17 00:00:00 2001 From: Faisal Kanout Date: Fri, 20 May 2022 14:36:28 +0200 Subject: [PATCH 3/4] Remove unsed imports --- .../plugins/observability/public/pages/rule_details/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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 535e4e5da3218..cbc406d123e36 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,7 +41,7 @@ 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 { 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'; From ce1f4a8904e86a880577e80563a4aa630f023a0a Mon Sep 17 00:00:00 2001 From: Faisal Kanout Date: Mon, 23 May 2022 12:10:04 +0200 Subject: [PATCH 4/4] code review --- .../public/pages/rule_details/index.tsx | 40 ++++++++----------- 1 file changed, 16 insertions(+), 24 deletions(-) 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 cbc406d123e36..9ca155ab7ef25 100644 --- a/x-pack/plugins/observability/public/pages/rule_details/index.tsx +++ b/x-pack/plugins/observability/public/pages/rule_details/index.tsx @@ -208,6 +208,20 @@ export function RuleDetailsPage() { /> ); + + 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; @@ -270,17 +284,7 @@ export function RuleDetailsPage() { - {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()} , ] @@ -310,19 +314,7 @@ export function RuleDetailsPage() { defaultMessage: 'Rule is', })} - - {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()}