[Alerting] "Create alert" and alert list design improvements (#63515)

* added header to actions section * adjusted some spacing in Create Alert * lighter text in Actions section headings * fixed bulk actions dropdown * improve alert collapsed item actions * improve dropdown and adjust some buttos * adjust font size of steps to match hierarchy * need to check master * improve collapsed actions menu * added periods to help texts * going back to EuiButtonEmpty to be able to use isLoading * fix prop * remove Fragment * remove translations we're not using * Fix functional tests Co-authored-by: Mike Cote <[email protected]>
elastic · Apr 17, 2020 · c13a026 · c13a026
1 parent dc9bfb5
commit c13a026
Show file tree

Hide file tree

Showing 14 changed files with 426 additions and 328 deletions.
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -15960,7 +15960,7 @@
     "xpack.triggersActionsUI.sections.alertAdd.saveButtonLabel": "保存",
     "xpack.triggersActionsUI.sections.alertAdd.saveErrorNotificationText": "アラートを作成できません。",
     "xpack.triggersActionsUI.sections.alertAdd.saveSuccessNotificationText": "「{alertName}」 を保存しました",
-    "xpack.triggersActionsUI.sections.alertAdd.selectIndex": "インデックスを選択してください。",
+    "xpack.triggersActionsUI.sections.alertAdd.selectIndex": "インデックスを選択してください",
     "xpack.triggersActionsUI.sections.alertAdd.threshold.closeIndexPopoverLabel": "閉じる",
     "xpack.triggersActionsUI.sections.alertAdd.threshold.fixErrorInExpressionBelowValidationMessage": "下の表現のエラーを修正してください。",
     "xpack.triggersActionsUI.sections.alertAdd.threshold.howToBroadenSearchQueryDescription": "* で検索クエリの範囲を広げます。",
@@ -16044,7 +16044,6 @@
     "xpack.triggersActionsUI.sections.alertsList.bulkActionPopover.muteAllTitle": "ミュート",
     "xpack.triggersActionsUI.sections.alertsList.bulkActionPopover.unmuteAllTitle": "ミュート解除",
     "xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.deleteTitle": "削除",
-    "xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.enableTitle": "有効にする",
     "xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.muteTitle": "ミュート",
     "xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.popoverButtonTitle": "アクション",
     "xpack.triggersActionsUI.components.emptyPrompt.emptyButton": "アラートの作成",
@@ -16757,4 +16756,4 @@
     "xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "フィールドを選択してください。",
     "xpack.watcher.watcherDescription": "アラートの作成、管理、監視によりデータへの変更を検知します。"
   }
-}
+}
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -15957,15 +15957,15 @@
     "xpack.triggersActionsUI.sections.addModalConnectorForm.updateSuccessNotificationText": "已创建“{connectorName}”",
     "xpack.triggersActionsUI.sections.alertAdd.betaBadgeTooltipContent": "{pluginName} 为公测版，可能会进行更改。设计和代码相对于正式发行版功能还不够成熟，将按原样提供，且不提供任何保证。公测版功能不受正式发行版功能支持 SLA 的约束。",
     "xpack.triggersActionsUI.sections.alertAdd.cancelButtonLabel": "取消",
-    "xpack.triggersActionsUI.sections.alertAdd.conditionPrompt": "定义条件。",
+    "xpack.triggersActionsUI.sections.alertAdd.conditionPrompt": "定义条件",
     "xpack.triggersActionsUI.sections.alertAdd.errorLoadingAlertVisualizationTitle": "无法加载告警可视化",
     "xpack.triggersActionsUI.sections.alertAdd.flyoutTitle": "创建告警",
     "xpack.triggersActionsUI.sections.alertAdd.loadingAlertVisualizationDescription": "正在加载告警可视化……",
     "xpack.triggersActionsUI.sections.alertAdd.previewAlertVisualizationDescription": "完成表达式以生成预览。",
     "xpack.triggersActionsUI.sections.alertAdd.saveButtonLabel": "保存",
     "xpack.triggersActionsUI.sections.alertAdd.saveErrorNotificationText": "无法创建告警。",
     "xpack.triggersActionsUI.sections.alertAdd.saveSuccessNotificationText": "已保存“{alertName}”",
-    "xpack.triggersActionsUI.sections.alertAdd.selectIndex": "选择索引。",
+    "xpack.triggersActionsUI.sections.alertAdd.selectIndex": "选择索引",
     "xpack.triggersActionsUI.sections.alertAdd.threshold.closeIndexPopoverLabel": "关闭",
     "xpack.triggersActionsUI.sections.alertAdd.threshold.fixErrorInExpressionBelowValidationMessage": "表达式包含错误。",
     "xpack.triggersActionsUI.sections.alertAdd.threshold.howToBroadenSearchQueryDescription": "使用 * 可扩大您的查询范围。",
@@ -16049,7 +16049,6 @@
     "xpack.triggersActionsUI.sections.alertsList.bulkActionPopover.muteAllTitle": "静音",
     "xpack.triggersActionsUI.sections.alertsList.bulkActionPopover.unmuteAllTitle": "取消静音",
     "xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.deleteTitle": "删除",
-    "xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.enableTitle": "启用",
     "xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.muteTitle": "静音",
     "xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.popoverButtonTitle": "操作",
     "xpack.triggersActionsUI.components.emptyPrompt.emptyButton": "创建告警",
@@ -16762,4 +16761,4 @@
     "xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "此字段必填。",
     "xpack.watcher.watcherDescription": "通过创建、管理和监测警报来检测数据中的更改。"
   }
-}
+}
diff --git a/...rs_actions_ui/public/application/components/builtin_alert_types/threshold/expression.scss b/...rs_actions_ui/public/application/components/builtin_alert_types/threshold/expression.scss
@@ -1,3 +1,13 @@
 .actAlertVisualization__chart {
-  height: $euiSize * 15;
+  height: $euiSize * 14;
+}
+
+.actAddAlertSteps {
+  .euiStep__titleWrapper {
+    align-items: center;
+  }
+
+  .euiStep__title {
+    @include euiTitle('xs');
+  }
 }
diff --git a/...ers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx b/...ers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx
@@ -283,7 +283,7 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
   const firstSetOfSteps = [
     {
       title: i18n.translate('xpack.triggersActionsUI.sections.alertAdd.selectIndex', {
-        defaultMessage: 'Select an index.',
+        defaultMessage: 'Select an index',
       }),
       children: (
         <>
@@ -396,7 +396,7 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
     },
     {
       title: i18n.translate('xpack.triggersActionsUI.sections.alertAdd.conditionPrompt', {
-        defaultMessage: 'Define the condition.',
+        defaultMessage: 'Define the condition',
       }),
       children: (
         <>
@@ -445,12 +445,10 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
         </Fragment>
       ) : null}
       <EuiSpacer size="l" />
-      <EuiSteps steps={firstSetOfSteps} />
-      <EuiSpacer size="l" />
+      <EuiSteps className="actAddAlertSteps" steps={firstSetOfSteps} />
       <div className="actAlertVisualization__chart">
         {canShowVizualization ? (
           <Fragment>
-            <EuiSpacer size="xl" />
             <EuiEmptyPrompt
               iconType="visBarVertical"
               body={

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/prompts/empty_prompt.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/prompts/empty_prompt.tsx
@@ -33,8 +33,6 @@ export const EmptyPrompt = ({ onCTAClicked }: { onCTAClicked: () => void }) => (
         data-test-subj="createFirstAlertButton"
         key="create-action"
         fill
-        iconType="plusInCircle"
-        iconSide="left"
         onClick={onCTAClicked}
       >
         <FormattedMessage