locales:add alert monitor create

This commit is contained in:
shiyang 2021-09-05 18:52:27 +08:00
parent 0ee5b1918b
commit 6851e29986
14 changed files with 97 additions and 32 deletions

View File

@ -64,7 +64,9 @@ export default {
'form.publicUsers.option.C': 'Colleague C',
'form.button.search': 'Search',
'form.button.new': 'New',
'form.button.Create': 'Create',
'form.button.edit': 'Edit',
'form.button.update': 'Update',
'form.button.delete': 'Delete',
'form.button.cancel': 'Cancel',
'form.button.collapse': 'Collapse',

View File

@ -30,6 +30,7 @@ export default {
'alert.dashboard.table.columns.acknowledged_time': 'Time acknowledged',
'alert.monitor': 'Monitors',
'alert.monitor.self': 'monitor',
'alert.monitor.monitors': 'Monitors',
'alert.monitor.actions': 'Actions',
'alert.monitor.actions.acknowledge': 'Acknowledge',
@ -53,7 +54,32 @@ export default {
'alert.monitor.table.columns.errors': 'Errors',
'alert.monitor.table.columns.ignored': 'Ignored',
'alert.monitor.create.configure-monitor': 'Configure monitor',
'alert.monitor.create.state.title': 'Monitor state',
'alert.monitor.create.state.description': 'Disabled monitors do not run.',
'alert.monitor.create.state.disable': 'Disable monitor',
'alert.monitor.create.define-monitor': 'Define monitor',
'alert.monitor.create.define.method': 'Method of definition',
'alert.monitor.create.define.method.query': 'Define using extraction query',
'alert.monitor.create.define.method.graph': 'Define using visual graph',
'alert.monitor.create.define.index': 'Index',
'alert.monitor.create.define.index.help-text': 'You can use a * as a wildcard in your index pattern',
'alert.monitor.create.define.index.select.placeholder': 'Select indices',
'alert.monitor.create.define.index.empty-message': 'You must specify an index.',
'alert.monitor.create.define.time_field': 'Time field',
'alert.monitor.create.define.time_field.help-text': 'Choose the time field you want to use for your x-axis',
'alert.monitor.create.define.time_field.empty-message': 'You must specify a time field.',
'alert.monitor.create.define.query-performance': 'Query performance',
'alert.monitor.create.define.query-performance.tips': 'Check the performance of your query and make sure to follow best practices.',
'alert.monitor.create.define.query-performance.query-duration': 'Query duration',
'alert.monitor.create.define.query-performance.request-duration': 'Request duration',
'alert.monitor.create.define.query-performance.hits': 'Hits',
'alert.monitor.create.schedule-monitor': 'Monitor schedule',
'alert.monitor.create.schedule.when-text': 'When do you want this monitor to run?',
'alert.monitor.create.schedule.advise-text': 'Define how often the monitor collects data and determines how often you may receive alerts. We recommend two times of detector interval to avoid missing anomaly results due to any potential delay of processing time.',
'alert.destination': 'Destinations',
'alert.destination.self': 'destination',
'alert.destination.destinations': 'Destinations',
'alert.destination.actions': 'Actions',
'alert.destination.actions.manager-email-senders': 'Manage email senders',
@ -71,4 +97,5 @@ export default {
'alert.destination.table.columns.type': 'Destination type',
'alert.trigger': 'Triggers',
'alert.trigger.self': 'trigger',
};

View File

@ -70,7 +70,9 @@ export default {
'form.logstash.kafkaconf.placeholder':"请输入Kafka配置",
'form.button.search': '搜索',
'form.button.new': '新建',
'form.button.create': '创建',
'form.button.edit': '编辑',
'form.button.update': '更新',
'form.button.delete': '删除',
'form.button.cancel': '取消',
'form.button.collapse': '收起',

View File

@ -30,6 +30,7 @@ export default {
'alert.dashboard.table.columns.acknowledged_time': '确认时间',
'alert.monitor': '监控管理',
'alert.monitor.self': '监控项',
'alert.monitor.monitors': '监控管理',
'alert.monitor.actions': '操作',
'alert.monitor.actions.acknowledge': '确认',
@ -53,8 +54,33 @@ export default {
'alert.monitor.table.columns.errors': '错误',
'alert.monitor.table.columns.ignored': '已忽略',
'alert.destination': '通知渠道',
'alert.monitor.create.configure-monitor': '配置监控项',
'alert.monitor.create.state.title': '监控项状态',
'alert.monitor.create.state.description': '禁用监控项。',
'alert.monitor.create.state.disable': '禁用',
'alert.monitor.create.define-monitor': '定义监控项',
'alert.monitor.create.define.method': '定义方式',
'alert.monitor.create.define.method.query': '使用提取查询定义',
'alert.monitor.create.define.method.graph': '使用可视化图定义',
'alert.monitor.create.define.index': '索引',
'alert.monitor.create.define.index.help-text': '您可以在索引模式中使用 * 作为通配符',
'alert.monitor.create.define.index.select.placeholder': '选择索引',
'alert.monitor.create.define.index.empty-message': '您必须指定一个索引。',
'alert.monitor.create.define.time_field': '时间字段',
'alert.monitor.create.define.time_field.help-text': '选择要用于 x 轴的时间字段',
'alert.monitor.create.define.time_field.empty-message': '您必须指定一个时间字段。',
'alert.monitor.create.define.query-performance': '查询性能',
'alert.monitor.create.define.query-performance.tips': '检查查询的性能并确保遵循最佳实践。',
'alert.monitor.create.define.query-performance.query-duration': '查询时长',
'alert.monitor.create.define.query-performance.request-duration': '请求时长',
'alert.monitor.create.define.query-performance.hits': '命中数',
'alert.monitor.create.schedule-monitor': '监控计划',
'alert.monitor.create.schedule.when-text': '您希望此监视器何时运行?',
'alert.monitor.create.schedule.advise-text': '定义监视器收集数据的频率并确定您接收警报的频率。 我们建议两倍检测器间隔,以避免由于处理时间的任何潜在延迟而遗漏异常结果。',
'alert.destination': '通知渠道',
'alert.destination.self': '通知渠道',
'alert.destination.destinations': '通知渠道管理',
'alert.destination.actions': '操作',
'alert.destination.actions.manager-email-senders': '管理邮件发送者',

View File

@ -16,10 +16,11 @@
import React from 'react';
import FormikSelect from '../../../../components/FormControls/FormikSelect/FormikSelect';
import { ES_AD_PLUGIN } from '../../../../utils/constants';
import { formatMessage } from 'umi/locale';
const defaultSelectDefinitions = [
{ value: 'graph', text: 'Define using visual graph' },
{ value: 'query', text: 'Define using extraction query' },
{ value: 'query', text: formatMessage({ id: 'alert.monitor.create.define.method.query'}) },
{ value: 'graph', text: formatMessage({ id: 'alert.monitor.create.define.method.graph'}) },
];
const onChangeDefinition = (e, form, resetResponse) => {
@ -39,7 +40,7 @@ const MonitorDefinition = ({ resetResponse, plugins }) => (
name="searchType"
formRow
rowProps={{
label: 'Method of definition',
label: formatMessage({ id: 'alert.monitor.create.define.method'}),
style: { paddingLeft: '10px' },
}}
inputProps={{

View File

@ -18,19 +18,20 @@ import { EuiSpacer } from '@elastic/eui';
import SubHeader from '../../../../components/SubHeader';
import { FormikCheckbox } from '../../../../components/FormControls';
import { formatMessage } from 'umi/locale';
const MonitorState = () => (
<Fragment>
<SubHeader
title={<h4>Monitor state</h4>}
description={<span>Disabled monitors do not run.</span>}
title={<h4>{formatMessage({ id: 'alert.monitor.create.state.title'})}</h4>}
description={<span>{formatMessage({ id: 'alert.monitor.create.state.description'})}</span>}
/>
<EuiSpacer size="s" />
<FormikCheckbox
name="disabled"
formRow
rowProps={{ style: { paddingLeft: '10px' } }}
inputProps={{ label: 'Disable monitor' }}
inputProps={{ label: formatMessage({ id: 'alert.monitor.create.state.disable'}) }}
/>
</Fragment>
);

View File

@ -18,6 +18,7 @@ import PropTypes from 'prop-types';
import FormikSelect from '../../../../components/FormControls/FormikSelect/FormikSelect';
import { hasError, isInvalid } from '../../../../utils/validate';
import { validateTimeField } from './utils/validation';
import { formatMessage } from 'umi/locale';
const MonitorTimeField = ({ dataTypes }) => {
// Default empty option + options from index mappings mapped to ui select form
@ -29,9 +30,9 @@ const MonitorTimeField = ({ dataTypes }) => {
formRow
fieldProps={{ validate: validateTimeField(dateFields) }}
rowProps={{
label: 'Time field',
label: formatMessage({ id: 'alert.monitor.create.define.time_field'}),
style: { paddingLeft: '10px' },
helpText: 'Choose the time field you want to use for your x-axis',
helpText: formatMessage({ id: 'alert.monitor.create.define.time_field.help-text'}),
isInvalid,
error: hasError,
}}

View File

@ -20,15 +20,16 @@ import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
import SubHeader from '../../../../components/SubHeader';
import { DEFAULT_EMPTY_DATA } from '../../../../utils/constants';
import { URL } from '../../../../utils/constants';
import { formatMessage } from 'umi/locale';
const QueryPerformance = ({ response }) => (
<Fragment>
<SubHeader
title={<h4>Query performance</h4>}
title={<h4>{formatMessage({ id: 'alert.monitor.create.define.query-performance'})}</h4>}
description={
<span>
Check the performance of your query and make sure to follow best practices.{' '}
<a href={URL.DOCUMENTATION}>Learn more</a>
{formatMessage({ id: 'alert.monitor.create.define.query-performance.tips'})}{' '}
{/*<a href={URL.DOCUMENTATION}>Learn more</a>*/}
</span>
}
/>
@ -41,7 +42,7 @@ const QueryPerformance = ({ response }) => (
>
<EuiFlexItem>
<EuiText size="xs">
<strong>Query duration</strong>
<strong>{formatMessage({ id: 'alert.monitor.create.define.query-performance.query-duration'})}</strong>
<span style={{ display: 'block' }}>
{`${_.get(response, 'took', DEFAULT_EMPTY_DATA)} ms`}
</span>
@ -49,7 +50,7 @@ const QueryPerformance = ({ response }) => (
</EuiFlexItem>
<EuiFlexItem>
<EuiText size="xs">
<strong>Request duration</strong>
<strong>{formatMessage({ id: 'alert.monitor.create.define.query-performance.request-duration'})}</strong>
<span style={{ display: 'block' }}>
{_.get(response, 'invalid.path', DEFAULT_EMPTY_DATA)}
</span>
@ -57,7 +58,7 @@ const QueryPerformance = ({ response }) => (
</EuiFlexItem>
<EuiFlexItem>
<EuiText size="xs">
<strong>Hits</strong>
<strong>{formatMessage({ id: 'alert.monitor.create.define.query-performance.hits'})}</strong>
<span style={{ display: 'block' }}>
{_.get(response, 'hits.total.value', DEFAULT_EMPTY_DATA)}
</span>

View File

@ -18,18 +18,17 @@ import { EuiSpacer, EuiText } from '@elastic/eui';
import { Frequency, FrequencyPicker } from './Frequencies';
import Interval from './Frequencies/Interval';
import { formatMessage } from 'umi/locale';
const Schedule = ({ isAd }) => (
<Fragment>
<EuiText size="xs" style={{ paddingLeft: '10px', maxWidth: '400px' }}>
{isAd ? (
<p>
Define how often the monitor collects data and determines how often you may receive
alerts. We recommend two times of detector interval to avoid missing anomaly results due
to any potential delay of processing time.
{formatMessage({ id: 'alert.monitor.create.schedule.advise-text'})}
</p>
) : (
'When do you want this monitor to run?'
formatMessage({ id: 'alert.monitor.create.schedule.when-text'})
)}
</EuiText>
<EuiSpacer size="s" />

View File

@ -20,15 +20,16 @@ import ContentPanel from '../../../../components/ContentPanel';
import MonitorState from '../../components/MonitorState';
import { hasError, isInvalid, required, validateMonitorName } from '../../../../utils/validate';
import FormikFieldText from '../../../../components/FormControls/FormikFieldText';
import { formatMessage } from 'umi/locale';
const ConfigureMonitor = ({ httpClient, monitorToEdit }) => (
<ContentPanel title="Configure monitor" titleSize="s" bodyStyles={{ padding: 'initial' }}>
<ContentPanel title={formatMessage({ id: 'alert.monitor.create.configure-monitor'})} titleSize="s" bodyStyles={{ padding: 'initial' }}>
<FormikFieldText
name="name"
formRow
fieldProps={{ validate: validateMonitorName(httpClient, monitorToEdit) }}
rowProps={{
label: 'Monitor name',
label: formatMessage({ id: 'alert.monitor.table.columns.name'}),
style: { paddingLeft: '10px' },
isInvalid,
error: hasError,

View File

@ -36,6 +36,7 @@ import { TRIGGER_ACTIONS, SEARCH_TYPE } from '../../../../utils/constants';
import { initializeFromQueryParams } from './utils/monitorQueryParams';
import { SubmitErrorHandler } from '../../../../utils/SubmitErrorHandler';
import { backendErrorNotification } from '../../../../utils/helpers';
import { formatMessage } from 'umi/locale';
export default class CreateMonitor extends Component {
static defaultProps = {
@ -137,7 +138,7 @@ export default class CreateMonitor extends Component {
{({ values, errors, handleSubmit, isSubmitting, isValid }) => (
<Fragment>
<EuiTitle size="l">
<h1>{edit ? 'Edit' : 'Create'} monitor</h1>
<h1>{edit ? formatMessage({ id: 'form.button.edit'}) : formatMessage({ id: 'form.button.create'})} {formatMessage({ id: 'alert.monitor.self'})}</h1>
</EuiTitle>
<EuiSpacer />
<ConfigureMonitor httpClient={httpClient} monitorToEdit={monitorToEdit} />
@ -158,11 +159,11 @@ export default class CreateMonitor extends Component {
<EuiSpacer />
<EuiFlexGroup alignItems="center" justifyContent="flexEnd">
<EuiFlexItem grow={false}>
<EuiButtonEmpty onClick={this.onCancel}>Cancel</EuiButtonEmpty>
<EuiButtonEmpty onClick={this.onCancel}>{formatMessage({ id: 'form.button.cancel'})}</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton fill onClick={handleSubmit} isLoading={isSubmitting}>
{edit ? 'Update' : 'Create'}
{edit ? formatMessage({ id: 'form.button.update'}) : formatMessage({ id: 'form.button.create'})}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>

View File

@ -31,6 +31,7 @@ import { buildSearchRequest } from './utils/searchRequests';
import { SEARCH_TYPE, ES_AD_PLUGIN } from '../../../../utils/constants';
import AnomalyDetectors from '../AnomalyDetectors/AnomalyDetectors';
import { backendErrorNotification } from '../../../../utils/helpers';
import { formatMessage } from 'umi/locale';
function renderEmptyMessage(message) {
return (
@ -250,9 +251,9 @@ class DefineMonitor extends Component {
if (index.length) {
content = timeField
? this.renderGraph()
: renderEmptyMessage('You must specify a time field.');
: renderEmptyMessage(formatMessage({ id: 'alert.monitor.create.define.time_field.empty-message'}));
} else {
content = renderEmptyMessage('You must specify an index.');
content = renderEmptyMessage(formatMessage({ id: 'alert.monitor.create.define.index.empty-message'}));
}
return {
actions: [],
@ -277,7 +278,7 @@ class DefineMonitor extends Component {
invalidJSON = true;
}
const runIsDisabled = invalidJSON || !values.index.length;
let content = renderEmptyMessage('You must specify an index.');
let content = renderEmptyMessage(formatMessage({ id: 'alert.monitor.create.define.index.empty-message'}));
if (values.index.length) {
content = (
<ExtractionQuery
@ -342,7 +343,7 @@ class DefineMonitor extends Component {
const monitorContent = this.getMonitorContent();
return (
<ContentPanel
title="Define monitor"
title={formatMessage({ id: 'alert.monitor.create.define-monitor'})}
titleSize="s"
bodyStyles={{ padding: 'initial' }}
actions={monitorContent.actions}

View File

@ -16,9 +16,10 @@
import React from 'react';
import ContentPanel from '../../../../components/ContentPanel';
import Schedule from '../../components/Schedule';
import { formatMessage } from 'umi/locale';
const MonitorSchedule = ({ httpClient, monitorToEdit, isAd }) => (
<ContentPanel title="Monitor schedule" titleSize="s" bodyStyles={{ padding: 'initial' }}>
<ContentPanel title={formatMessage({ id: 'alert.monitor.create.schedule-monitor'})} titleSize="s" bodyStyles={{ padding: 'initial' }}>
<Schedule isAd={isAd} />
</ContentPanel>
);

View File

@ -21,6 +21,7 @@ import { EuiHealth, EuiHighlight } from '@elastic/eui';
import { FormikComboBox } from '../../../../components/FormControls';
import { validateIndex, hasError, isInvalid } from '../../../../utils/validate';
import { canAppendWildcard, createReasonableWait, getMatchedOptions } from './utils/helpers';
import { formatMessage } from 'umi/locale';
const CustomOption = ({ option, searchValue, contentClassName }) => {
const { health, label, index } = option;
@ -231,14 +232,14 @@ class MonitorIndex extends React.Component {
formRow
fieldProps={{ validate: validateIndex }}
rowProps={{
label: 'Index',
helpText: 'You can use a * as a wildcard in your index pattern',
label: formatMessage({ id: 'alert.monitor.create.define.index'}),
helpText: formatMessage({ id: 'alert.monitor.create.define.index.help-text'}),
isInvalid,
error: hasError,
style: { paddingLeft: '10px' },
}}
inputProps={{
placeholder: 'Select indices',
placeholder: formatMessage({ id: 'alert.monitor.create.define.index.select.placeholder'}),
async: true,
isLoading,
options: visibleOptions,