Skip to content

Commit

Permalink
[Actionable Observability] Update the Rule details design and clean up (
Browse files Browse the repository at this point in the history 
elastic#132616)

* Add rule status in the rule summary

* Match design

* Remove unused imports

* code review
  • Loading branch information
@fkanout
fkanout authored May 23, 2022
1 parent c993ff2 commit 6b846af
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 42 deletions.
13 changes: 12 additions & 1 deletion x-pack/plugins/observability/public/pages/rule_details/components/page_title.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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">
Expand Down
68 changes: 27 additions & 41 deletions x-pack/plugins/observability/public/pages/rule_details/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import {
EuiButtonIcon,
EuiPanel,
EuiTitle,
EuiHealth,
EuiPopover,
EuiHorizontalRule,
EuiTabbedContent,
Expand All @@ -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';
Expand Down Expand Up @@ -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 />;
Expand All @@ -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;
Expand Down Expand Up @@ -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>,
]
Expand All @@ -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', {
Expand All @@ -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>
Expand Down

0 comments on commit 6b846af

Please sign in to comment.