Skip to content

Commit

Permalink
Merge pull request #10 from ryankeairns/rule-error-logs
Browse files Browse the repository at this point in the history 
Design tweaks to header, status dropdown, mobile
  • Loading branch information
@XavierM
XavierM authored Apr 2, 2022
2 parents 76cc235 + 8676edd commit 9b5a393
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 91 deletions.
2 changes: 1 addition & 1 deletion .../plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,14 +162,14 @@ export function RuleComponent({

return (
<>
<EuiHorizontalRule />
<EuiFlexGroup>
<EuiFlexItem grow={1}>
<EuiPanel color="subdued" hasBorder={false}>
<EuiFlexGroup
gutterSize="none"
direction="column"
justifyContent="spaceBetween"
responsive={false}
style={{ height: '100%' }}
>
<EuiFlexItem>
Expand Down
178 changes: 90 additions & 88 deletions .../triggers_actions_ui/public/application/sections/rule_details/components/rule_details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -263,6 +263,96 @@ export const RuleDetails: React.FunctionComponent<RuleDetailsProps> = ({
values={{ ruleName: rule.name }}
/>
}
description={
<EuiFlexGroup gutterSize="m">
<EuiFlexItem grow={false}>
<EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
<EuiText size="s">
<p>
<FormattedMessage
id="xpack.triggersActionsUI.sections.ruleDetails.triggerActionsTitle"
defaultMessage="Trigger actions"
/>
</p>
</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<RuleStatusDropdown
disableRule={async () => await disableRule(rule)}
enableRule={async () => await enableRule(rule)}
snoozeRule={async (snoozeEndTime: string | -1) =>
await snoozeRule(rule, snoozeEndTime)
}
unsnoozeRule={async () => await unsnoozeRule(rule)}
item={rule as RuleTableItem}
onRuleChanged={requestRefresh}
direction="row"
isEditable={hasEditButton}
previousSnoozeInterval={null}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
<EuiText size="s">
<p>
<FormattedMessage
id="xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.ruleTypeTitle"
defaultMessage="Type"
/>
</p>
</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiBadge data-test-subj="ruleTypeLabel">{ruleType.name}</EuiBadge>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow={1}>
{uniqueActions && uniqueActions.length ? (
<EuiFlexGroup responsive={false} gutterSize="xs">
<EuiFlexItem>
<EuiText size="s">
<FormattedMessage
id="xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.actionsTex"
defaultMessage="Actions"
/>{' '}
{hasActionsWithBrokenConnector && (
<EuiIconTip
data-test-subj="actionWithBrokenConnector"
type="alert"
color="danger"
content={i18n.translate(
'xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.actionsWarningTooltip',
{
defaultMessage:
'Unable to load one of the connectors associated with this rule. Edit the rule to select a new connector.',
}
)}
position="right"
/>
)}
</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGroup wrap gutterSize="s">
{uniqueActions.map((action, index) => (
<EuiFlexItem key={index} grow={false}>
<EuiBadge color="hollow" data-test-subj="actionTypeLabel">
{actionTypesByTypeId[action].name ?? action}
</EuiBadge>
</EuiFlexItem>
))}
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
) : null}
</EuiFlexItem>
</EuiFlexGroup>
}
rightSideItems={[
<ViewInApp rule={rule} />,
<EuiButtonEmpty
Expand All @@ -282,94 +372,6 @@ export const RuleDetails: React.FunctionComponent<RuleDetailsProps> = ({
/>
<EuiSpacer size="l" />
<EuiPageContentBody>
<EuiFlexGroup responsive={false} gutterSize="m">
<EuiFlexItem grow={false}>
<EuiFlexGroup responsive={false} gutterSize="xs">
<EuiFlexItem grow={false} style={{ flexBasis: 'fit-content' }}>
<EuiText size="s">
<p>
<FormattedMessage
id="xpack.triggersActionsUI.sections.ruleDetails.triggerActionsTitle"
defaultMessage="Trigger actions"
/>
</p>
</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<RuleStatusDropdown
disableRule={async () => await disableRule(rule)}
enableRule={async () => await enableRule(rule)}
snoozeRule={async (snoozeEndTime: string | -1) =>
await snoozeRule(rule, snoozeEndTime)
}
unsnoozeRule={async () => await unsnoozeRule(rule)}
item={rule as RuleTableItem}
onRuleChanged={requestRefresh}
direction="row"
isEditable={hasEditButton}
previousSnoozeInterval={null}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexGroup responsive={false} gutterSize="xs">
<EuiFlexItem>
<EuiText size="s">
<p>
<FormattedMessage
id="xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.ruleTypeTitle"
defaultMessage="Type"
/>
</p>
</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<EuiBadge data-test-subj="ruleTypeLabel">{ruleType.name}</EuiBadge>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow={1}>
{uniqueActions && uniqueActions.length ? (
<EuiFlexGroup responsive={false} gutterSize="xs">
<EuiFlexItem>
<EuiText size="s">
<FormattedMessage
id="xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.actionsTex"
defaultMessage="Actions"
/>{' '}
{hasActionsWithBrokenConnector && (
<EuiIconTip
data-test-subj="actionWithBrokenConnector"
type="alert"
color="danger"
content={i18n.translate(
'xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.actionsWarningTooltip',
{
defaultMessage:
'Unable to load one of the connectors associated with this rule. Edit the rule to select a new connector.',
}
)}
position="right"
/>
)}
</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGroup wrap gutterSize="s">
{uniqueActions.map((action, index) => (
<EuiFlexItem key={index} grow={false}>
<EuiBadge color="hollow" data-test-subj="actionTypeLabel">
{actionTypesByTypeId[action].name ?? action}
</EuiBadge>
</EuiFlexItem>
))}
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
) : null}
</EuiFlexItem>
</EuiFlexGroup>
{rule.enabled &&
rule.executionStatus.error?.reason === AlertExecutionStatusErrorReasons.License ? (
<EuiFlexGroup>
Expand Down
5 changes: 3 additions & 2 deletions ...ers_actions_ui/public/application/sections/rules_list/components/rule_status_dropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,9 +158,10 @@ export const RuleStatusDropdown: React.FunctionComponent<ComponentOpts> = ({
return (
<EuiFlexGroup
direction={direction}
alignItems={direction === 'row' ? 'flexEnd' : 'flexStart'}
alignItems={direction === 'row' ? 'center' : 'flexStart'}
justifyContent="flexStart"
gutterSize="s"
gutterSize={direction === 'row' ? 's' : 'xs'}
responsive={false}
>
<EuiFlexItem grow={false}>
{isEditable ? (
Expand Down

0 comments on commit 9b5a393

Please sign in to comment.