add locales for alert module

web/src/locales/en-US.js

@@ -1,3 +1,5 @@
+import alert from './en-US/alert';
+
 export default {
   'navBar.lang': 'Languages',
 
@@ -394,4 +396,6 @@ export default {
   'app.setting.copyinfo': 'copy success，please replace defaultSettings in src/models/setting.js',
   'app.setting.production.hint':
     'Setting panel shows in development environment only, please manually modify',
+
+  ...alert,
 };

web/src/locales/en-US/alert.js

@@ -0,0 +1,68 @@
+export default {
+  'alert.button.acknowledge': 'Acknowledge',
+  'alert.button.create-monitor': 'Create monitor',
+  'alert.button.create-trigger': 'Create trigger',
+  'alert.button.add-destination': 'Add destination',
+
+  'alert.dashboard': 'Dashboard',
+  'alert.dashboard.alerts': 'Alerts',
+  'alert.dashboard.severity-options.all': 'All severity levels',
+  'alert.dashboard.state-options.all': 'All alerts',
+  'alert.dashboard.state-options.active': 'Active',
+  'alert.dashboard.state-options.acknowledged': 'Acknowledged',
+  'alert.dashboard.state-options.completed': 'Completed',
+  'alert.dashboard.state-options.error': 'Error',
+  'alert.dashboard.state-options.deleted': 'Deleted',
+  'alert.dashboard.create-monitor-text': 'There are no existing alerts. Create a monitor to add triggers and actions. Once an alarm is triggered, the state will show in this table.',
+  'alert.dashboard.create-trigger-text': 'There are no existing alerts. Create a trigger to start alerting. Once an alarm is triggered, the state will show in this table.',
+  'alert.dashboard.table.columns.start_time': 'Alert start time',
+  'alert.dashboard.table.columns.end_time': 'Alert end time',
+  'alert.dashboard.table.columns.monitor_name': 'Monitor name',
+  'alert.dashboard.table.columns.trigger_name': 'Trigger name',
+  'alert.dashboard.table.columns.severity': 'Severity',
+  'alert.dashboard.table.columns.state': 'State',
+  'alert.dashboard.table.columns.acknowledged_time': 'Time acknowledged',
+
+  'alert.monitor': 'Monitors',
+  'alert.monitor.monitors': 'Monitors',
+  'alert.monitor.actions': 'Actions',
+  'alert.monitor.actions.acknowledge': 'Acknowledge',
+  'alert.monitor.actions.enable': 'Enable',
+  'alert.monitor.actions.disable': 'Disable',
+  'alert.monitor.actions.delete': 'Delete',
+  'alert.monitor.state.all': 'All states',
+  'alert.monitor.state.enabled': 'Enabled',
+  'alert.monitor.state.disabled': 'Disabled',
+  'alert.monitor.filter-text': 'There are no monitors matching your applied filters. Reset your filters to view your monitors.',
+  'alert.monitor.empty-monitor-text': 'There are no existing monitors. Create a monitor to add triggers and actions.',
+  'alert.monitor.loading-monitors': 'Loading monitors...',
+  'alert.monitor.reset-filters': 'Reset Filters',
+  'alert.monitor.table.columns.name': 'Monitor name',
+  'alert.monitor.table.columns.user': 'Last updated by',
+  'alert.monitor.table.columns.latest_alert': 'Latest alert',
+  'alert.monitor.table.columns.state': 'State',
+  'alert.monitor.table.columns.last_notification_time': 'Last notification time',
+  'alert.monitor.table.columns.active': 'Active',
+  'alert.monitor.table.columns.acknowledged': 'Acknowledged',
+  'alert.monitor.table.columns.errors': 'Errors',
+  'alert.monitor.table.columns.ignored': 'Ignored',
+
+  'alert.destination': 'Destinations',
+  'alert.destination.destinations': 'Destinations',
+  'alert.destination.actions': 'Actions',
+  'alert.destination.actions.manger-email-senders': 'Manage email senders',
+  'alert.destination.actions.manger-email-groups': 'Manage email groups',
+  'alert.destination.loading-destinations': 'Loading destinations...',
+  'alert.destination.filter-text': 'There are no destinations matching your applied filters. Reset your filters to view all destinations.',
+  'alert.destination.empty-destination-text': 'There are no existing destinations. Add a destination.',
+  'alert.destination.reset-filters': 'Reset Filters',
+  'alert.destination.type.all': 'All type',
+  'alert.destination.type.email': 'Email',
+  'alert.destination.type.custom_webhook': 'Custom webhook',
+  'alert.destination.type.slack': 'Slack',
+  'alert.destination.type.chime': 'Amazon Chime',
+  'alert.destination.table.columns.name': 'Destination name',
+  'alert.destination.table.columns.type': 'Destination type',
+
+  'alert.trigger': 'Triggers',
+};

web/src/locales/zh-CN.js

@@ -1,3 +1,5 @@
+import alert from './zh-CN/alert';
+
 export default {
   'navBar.lang': '语言',
   
@@ -395,4 +397,6 @@ export default {
   'app.setting.copyinfo': '拷贝成功，请到 src/defaultSettings.js 中替换默认配置',
   'app.setting.production.hint':
     '配置栏只在开发环境用于预览，生产环境不会展现，请拷贝后手动修改配置文件',
+
+  ...alert,
 };

web/src/locales/zh-CN/alert.js

@@ -0,0 +1,69 @@
+export default {
+  'alert.button.acknowledge': '确认',
+  'alert.button.create-monitor': '创建监控项',
+  'alert.button.create-trigger': '创建触发器',
+  'alert.button.add-destination': '添加渠道',
+
+  'alert.dashboard': '告警概览',
+  'alert.dashboard.alerts': '告警管理',
+  'alert.dashboard.severity-options.all': '所有告警级别',
+  'alert.dashboard.state-options.all': '所有状态',
+  'alert.dashboard.state-options.active': '激活的',
+  'alert.dashboard.state-options.acknowledged': '已确认',
+  'alert.dashboard.state-options.completed': '已完成',
+  'alert.dashboard.state-options.error': '错误',
+  'alert.dashboard.state-options.deleted': '已删除',
+  'alert.dashboard.create-monitor-text': '暂无监控项。 创建监控项以添加触发器和操作。 一旦触发警报，状态将显示在此表中。',
+  'alert.dashboard.create-trigger-text': '暂无监控项。 创建触发器以开始警报。 一旦触发警报，状态将显示在此表中。',
+  'alert.dashboard.table.columns.start_time': '告警开始时间',
+  'alert.dashboard.table.columns.end_time': '告警截止时间',
+  'alert.dashboard.table.columns.monitor_name': '监控项名称',
+  'alert.dashboard.table.columns.trigger_name': '触发器名称',
+  'alert.dashboard.table.columns.severity': '告警级别',
+  'alert.dashboard.table.columns.state': '状态',
+  'alert.dashboard.table.columns.acknowledged_time': '确认时间',
+
+  'alert.monitor': '监控管理',
+  'alert.monitor.monitors': '监控管理',
+  'alert.monitor.actions': '操作',
+  'alert.monitor.actions.acknowledge': '确认',
+  'alert.monitor.actions.enable': '启用',
+  'alert.monitor.actions.disable': '禁用',
+  'alert.monitor.actions.delete': '删除',
+  'alert.monitor.state.all': '所有状态',
+  'alert.monitor.state.enabled': '已启用',
+  'alert.monitor.state.disabled': '已禁用',
+  'alert.monitor.filter-text': '未搜索到结果。',
+  'alert.monitor.empty-monitor-text': '暂无监控项。 创建监控项以添加触发器和操作。',
+  'alert.monitor.loading-monitors': '加载中...',
+  'alert.monitor.reset-filters': '重置过滤条件',
+  'alert.monitor.table.columns.name': '监控器名称',
+  'alert.monitor.table.columns.user': '最近操作者',
+  'alert.monitor.table.columns.latest_alert': '最近告警',
+  'alert.monitor.table.columns.state': '状态',
+  'alert.monitor.table.columns.last_notification_time': '最近通知时间',
+  'alert.monitor.table.columns.active': '激活的',
+  'alert.monitor.table.columns.acknowledged': '已确认',
+  'alert.monitor.table.columns.errors': '错误',
+  'alert.monitor.table.columns.ignored': '已忽略',
+
+  'alert.destination': '通知渠道',
+
+  'alert.destination.destinations': '通知渠道管理',
+  'alert.destination.actions': '操作',
+  'alert.destination.actions.manger-email-senders': '管理邮件发送者',
+  'alert.destination.actions.manger-email-groups': '管理邮件组',
+  'alert.destination.loading-destinations': '加载中...',
+  'alert.destination.filter-text': '未搜索到结果。',
+  'alert.destination.empty-destination-text': '暂无通知渠道。 添加渠道。',
+  'alert.destination.reset-filters': '重置过滤条件',
+  'alert.destination.type.all': '所有类型',
+  'alert.destination.type.email': 'Email',
+  'alert.destination.type.custom_webhook': 'Webhook',
+  'alert.destination.type.slack': 'Slack',
+  'alert.destination.type.chime': 'Amazon Chime',
+  'alert.destination.table.columns.name': '渠道名称',
+  'alert.destination.table.columns.type': '渠道类型',
+
+  'alert.trigger': '触发器',
+};

web/src/pages/Alerting/pages/Dashboard/components/DashboardControls/DashboardControls.js

@@ -16,9 +16,10 @@
 import React from 'react';
 import { EuiFieldSearch, EuiFlexGroup, EuiSelect, EuiFlexItem, EuiPagination } from '@elastic/eui';
 import { ALERT_STATE } from '../../../../utils/constants';
+import { formatMessage } from 'umi/locale';
 
 const severityOptions = [
-  { value: 'ALL', text: 'All severity levels' },
+  { value: 'ALL', text: formatMessage({ id: 'alert.dashboard.severity-options.all' }) },
   { value: '1', text: '1' },
   { value: '2', text: '2' },
   { value: '3', text: '3' },
@@ -27,12 +28,12 @@ const severityOptions = [
 ];
 
 const stateOptions = [
-  { value: 'ALL', text: 'All alerts' },
+  { value: 'ALL', text: formatMessage({ id: 'alert.dashboard.state-options.all' }) },
-  { value: ALERT_STATE.ACTIVE, text: 'Active' },
+  { value: ALERT_STATE.ACTIVE, text: formatMessage({ id: 'alert.dashboard.state-options.active' }) },
-  { value: ALERT_STATE.ACKNOWLEDGED, text: 'Acknowledged' },
+  { value: ALERT_STATE.ACKNOWLEDGED, text: formatMessage({ id: 'alert.dashboard.state-options.acknowledged' }) },
-  { value: ALERT_STATE.COMPLETED, text: 'Completed' },
+  { value: ALERT_STATE.COMPLETED, text: formatMessage({ id: 'alert.dashboard.state-options.completed' }) },
-  { value: ALERT_STATE.ERROR, text: 'Error' },
+  { value: ALERT_STATE.ERROR, text: formatMessage({ id: 'alert.dashboard.state-options.error' }) },
-  { value: ALERT_STATE.DELETED, text: 'Deleted' },
+  { value: ALERT_STATE.DELETED, text: formatMessage({ id: 'alert.dashboard.state-options.deleted' }) },
 ];
 
 const DashboardControls = ({
@@ -50,7 +51,7 @@ const DashboardControls = ({
     <EuiFlexItem>
       <EuiFieldSearch
         fullWidth={true}
-        placeholder="Search"
+        placeholder={formatMessage({ id: 'form.button.search' })}
         onChange={onSearchChange}
         value={search}
       />

web/src/pages/Alerting/pages/Dashboard/components/DashboardEmptyPrompt/DashboardEmptyPrompt.js

@@ -18,19 +18,18 @@ import PropTypes from 'prop-types';
 import { EuiButton, EuiEmptyPrompt, EuiText } from '@elastic/eui';
 
 import { APP_PATH,PLUGIN_NAME } from '../../../../utils/constants';
+import { formatMessage } from 'umi/locale';
 
-const createMonitorText =
+const createMonitorText = formatMessage({ id: 'alert.dashboard.create-monitor-text' });
-  'There are no existing alerts. Create a monitor to add triggers and actions. Once an alarm is triggered, the state will show in this table.';
+const createTriggerText = formatMessage({ id: 'alert.dashboard.create-trigger-text' });
-const createTriggerText =
-  'There are no existing alerts. Create a trigger to start alerting. Once an alarm is triggered, the state will show in this table.';
 const createMonitorButton = (
   <EuiButton fill href={`#/${PLUGIN_NAME}${APP_PATH.CREATE_MONITOR}`}>
-    Create monitor
+      {formatMessage({ id: 'alert.button.create-monitor' })}
   </EuiButton>
 );
 const createTriggerButton = onCreateTrigger => (
   <EuiButton fill onClick={onCreateTrigger}>
-    Create trigger
+      {formatMessage({ id: 'alert.button.create-trigger' })}
   </EuiButton>
 );
 

web/src/pages/Alerting/pages/Dashboard/containers/Dashboard.js

@@ -24,6 +24,7 @@ import DashboardControls from '../components/DashboardControls';
 import { columns } from '../utils/tableUtils';
 import { KIBANA_AD_PLUGIN } from '../../../utils/constants';
 import { backendErrorNotification } from '../../../utils/helpers';
+import { formatMessage } from 'umi/locale';
 
 const DEFAULT_PAGE_SIZE_OPTIONS = [5, 10, 20, 50];
 const DEFAULT_QUERY_PARAMS = {
@@ -323,7 +324,7 @@ export default class Dashboard extends Component {
     };
 
     const actions = () => {
-      const actions = [<EuiButton onClick={this.acknowledgeAlert}>Acknowledge</EuiButton>];
+      const actions = [<EuiButton onClick={this.acknowledgeAlert}>{formatMessage({ id: 'alert.button.acknowledge'})}</EuiButton>];
       // if (detectorIds.length) {
       //   actions.unshift(
       //     <EuiButton href={`${KIBANA_AD_PLUGIN}#/detectors/${detectorIds[0]}`} target="_blank">
@@ -336,7 +337,7 @@ export default class Dashboard extends Component {
 
     return (
       <ContentPanel
-        title="Alerts"
+        title={formatMessage({ id: 'alert.dashboard.alerts' })}
         titleSize={monitorIds.length ? 's' : 'l'}
         bodyStyles={{ padding: 'initial' }}
         actions={actions()}

web/src/pages/Alerting/pages/Dashboard/utils/tableUtils.js

@@ -20,6 +20,7 @@ import moment from 'moment';
 
 import { ALERT_STATE, DEFAULT_EMPTY_DATA } from '../../../utils/constants';
 import { PLUGIN_NAME } from '../../../utils/constants';
+import { formatMessage } from 'umi/locale';
 
 const renderTime = (time) => {
   const momentTime = moment(time);
@@ -30,7 +31,7 @@ const renderTime = (time) => {
 export const columns = [
   {
     field: 'start_time',
-    name: 'Alert start time',
+    name: formatMessage({ id: 'alert.dashboard.table.columns.start_time' }),
     sortable: true,
     truncateText: false,
     render: renderTime,
@@ -38,7 +39,7 @@ export const columns = [
   },
   {
     field: 'end_time',
-    name: 'Alert end time',
+    name: formatMessage({ id: 'alert.dashboard.table.columns.end_time' }),
     sortable: true,
     truncateText: false,
     render: renderTime,
@@ -46,7 +47,7 @@ export const columns = [
   },
   {
     field: 'monitor_name',
-    name: 'Monitor name',
+    name: formatMessage({ id: 'alert.dashboard.table.columns.monitor_name' }),
     sortable: true,
     truncateText: true,
     textOnly: true,
@@ -56,20 +57,20 @@ export const columns = [
   },
   {
     field: 'trigger_name',
-    name: 'Trigger name',
+    name: formatMessage({ id: 'alert.dashboard.table.columns.trigger_name' }),
     sortable: true,
     truncateText: true,
     textOnly: true,
   },
   {
     field: 'severity',
-    name: 'Severity',
+    name: formatMessage({ id: 'alert.dashboard.table.columns.severity' }),
     sortable: false,
     truncateText: false,
   },
   {
     field: 'state',
-    name: 'State',
+    name: formatMessage({ id: 'alert.dashboard.table.columns.state' }),
     sortable: false,
     truncateText: false,
     render: (state, alert) => {
@@ -80,7 +81,7 @@ export const columns = [
   },
   {
     field: 'acknowledged_time',
-    name: 'Time acknowledged',
+    name: formatMessage({ id: 'alert.dashboard.table.columns.acknowledged_time' }),
     sortable: true,
     truncateText: false,
     render: renderTime,

web/src/pages/Alerting/pages/Destinations/components/DestinationsList/DestinationsActions/DestinationsActions.js

@@ -25,6 +25,7 @@ import {
 
 import { APP_PATH } from '../../../../../utils/constants';
 import { PLUGIN_NAME } from '../../../../../utils/constants';
+import { formatMessage } from 'umi/locale';
 
 export default class DestinationsActions extends Component {
   state = {
@@ -40,7 +41,7 @@ export default class DestinationsActions extends Component {
           this.props.onClickManageSenders();
         }}
       >
-        Manage email senders
+        {formatMessage({ id: 'alert.destination.actions.manger-email-senders' })}
       </EuiContextMenuItem>,
       <EuiContextMenuItem
         key="manageEmailGroups"
@@ -49,7 +50,7 @@ export default class DestinationsActions extends Component {
           this.props.onClickManageEmailGroups();
         }}
       >
-        Manage email groups
+        {formatMessage({ id: 'alert.destination.actions.manger-email-groups' })}
       </EuiContextMenuItem>,
     ];
   };
@@ -73,7 +74,7 @@ export default class DestinationsActions extends Component {
               id="destinationActionsPopover"
               button={
                 <EuiButton onClick={this.onClickActions} iconType="arrowDown" iconSide="right">
-                  Actions
+                  {formatMessage({ id: 'alert.destination.actions' })}
                 </EuiButton>
               }
               isOpen={isActionsOpen}
@@ -87,7 +88,7 @@ export default class DestinationsActions extends Component {
         ) : null}
         <EuiFlexItem grow={false}>
           <EuiButton fill href={`#/${PLUGIN_NAME}${APP_PATH.CREATE_DESTINATION}`}>
-            Add destination
+            {formatMessage({ id: 'alert.button.add-destination' })}
           </EuiButton>
         </EuiFlexItem>
       </EuiFlexGroup>

web/src/pages/Alerting/pages/Destinations/components/DestinationsList/DestinationsControls/DestinationsControls.js

@@ -17,6 +17,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { EuiFieldSearch, EuiFlexGroup, EuiFlexItem, EuiPagination, EuiSelect } from '@elastic/eui';
 import { DESTINATION_OPTIONS } from '../../../utils/constants';
+import { formatMessage } from 'umi/locale';
 
 const filterTypes = [{ value: 'ALL', text: 'All type' }, ...DESTINATION_OPTIONS];
 
@@ -47,14 +48,14 @@ const DestinationsControls = ({
   allowList,
 }) => {
   const allowedOptions = DESTINATION_OPTIONS.filter((option) => allowList.includes(option.value));
-  const filterTypes = [{ value: 'ALL', text: 'All type' }, ...allowedOptions];
+  const filterTypes = [{ value: 'ALL', text: formatMessage({ id: 'alert.destination.type.all' }) }, ...allowedOptions];
   return (
     <EuiFlexGroup style={{ padding: '0px 5px' }}>
       <EuiFlexItem>
         <EuiFieldSearch
           fullWidth={true}
           value={search}
-          placeholder="Search"
+          placeholder={formatMessage({ id: 'form.button.search' })}
           onChange={onSearchChange}
         />
       </EuiFlexItem>

web/src/pages/Alerting/pages/Destinations/components/DestinationsList/EmptyDestinations/EmptyDestinations.js

@@ -19,19 +19,19 @@ import { EuiButton, EuiEmptyPrompt, EuiText } from '@elastic/eui';
 
 import { APP_PATH } from '../../../../../utils/constants';
 import { PLUGIN_NAME } from '../../../../../utils/constants';
+import { formatMessage } from 'umi/locale';
 
-const filterText =
+const filterText = formatMessage({ id: 'alert.destination.filter-text' });
-  'There are no destinations matching your applied filters. Reset your filters to view all destinations.';
+const emptyText = formatMessage({ id: 'alert.destination.empty-destination-text' });
-const emptyText = 'There are no existing destinations. Add a destination.';
 const createDestinationButton = (
   <EuiButton fill href={`#/${PLUGIN_NAME}${APP_PATH.CREATE_DESTINATION}`}>
-    Add destination
+    {formatMessage({ id: 'alert.button.add-destination' })}
   </EuiButton>
 );
 
 const resetFiltersButton = resetFilters => (
   <EuiButton fill onClick={resetFilters}>
-    Reset filters
+    {formatMessage({ id: 'alert.destination.reset-filters' })}
   </EuiButton>
 );
 

web/src/pages/Alerting/pages/Destinations/containers/DestinationsList/DestinationsList.js

@@ -35,6 +35,7 @@ import ManageEmailGroups from '../CreateDestination/ManageEmailGroups';
 import { getAllowList } from '../../utils/helpers';
 import { DESTINATION_TYPE } from '../../utils/constants';
 import { backendErrorNotification } from '../../../../utils/helpers';
+import { formatMessage } from 'umi/locale';
 
 class DestinationsList extends React.Component {
   constructor(props) {
@@ -67,17 +68,17 @@ class DestinationsList extends React.Component {
     this.columns = [
       ...staticColumns,
       {
-        name: 'Actions',
+        name: formatMessage({ id: 'alert.destination.actions' }),
         width: '35px',
         actions: [
           {
-            name: 'Edit',
+            name: formatMessage({ id: 'form.button.edit' }),
             description: 'Edit this destination.',
             enabled: this.isEditEnabled,
             onClick: this.handleEditDestination,
           },
           {
-            name: 'Delete',
+            name: formatMessage({ id: 'form.button.delete' }),
             description: 'Delete this destination.',
             onClick: this.handleDeleteAction,
           },
@@ -310,7 +311,7 @@ class DestinationsList extends React.Component {
         ) : null}
         <ContentPanel
           bodyStyles={{ padding: 'initial' }}
-          title="Destinations"
+          title={formatMessage({id: 'alert.destination.destinations' })}
           actions={
             <DestinationsActions
               isEmailAllowed={this.isEmailAllowed()}
@@ -368,7 +369,7 @@ class DestinationsList extends React.Component {
             pagination={pagination}
             noItemsMessage={
               isDestinationLoading ? (
-                'Loading destinations...'
+                formatMessage({id: 'alert.destination.loading-destinations' })
               ) : (
                 <EmptyDestinations
                   isFilterApplied={isFilterApplied}

web/src/pages/Alerting/pages/Destinations/containers/DestinationsList/utils/constants.js

@@ -14,6 +14,7 @@
  */
 
 import { DESTINATION_OPTIONS } from '../../../utils/constants';
+import { formatMessage } from 'umi/locale';
 
 export const DEFAULT_QUERY_PARAMS = {
   from: 0,
@@ -29,7 +30,7 @@ export const MAX_DESTINATIONS = 200;
 export const staticColumns = [
   {
     field: 'name',
-    name: 'Destination name',
+    name: formatMessage({ id: 'alert.destination.table.columns.name' }),
     sortable: true,
     truncateText: true,
     textOnly: true,
@@ -37,7 +38,7 @@ export const staticColumns = [
   },
   {
     field: 'type',
-    name: 'Destination type',
+    name: formatMessage({ id: 'alert.destination.table.columns.type' }),
     truncateText: true,
     sortable: true,
     textOnly: true,

web/src/pages/Alerting/pages/Destinations/utils/constants.js

@@ -13,18 +13,22 @@
  *   permissions and limitations under the License.
  */
 
+import React from 'react';
+import { formatMessage } from 'umi/locale';
+
 export const DESTINATION_TYPE = {
-  CHIME: 'chime',
-  SLACK: 'slack',
-  CUSTOM_HOOK: 'custom_webhook',
   EMAIL: 'email',
+  CUSTOM_HOOK: 'custom_webhook',
+  SLACK: 'slack',
+  // CHIME: 'chime',
 };
 
 export const DESTINATION_OPTIONS = [
-  { value: DESTINATION_TYPE.CHIME, text: 'Amazon Chime' },
+  { value: DESTINATION_TYPE.EMAIL, text: formatMessage({ id: 'alert.destination.type.email' }) },
-  { value: DESTINATION_TYPE.SLACK, text: 'Slack' },
+  { value: DESTINATION_TYPE.CUSTOM_HOOK, text: formatMessage({ id: 'alert.destination.type.custom_webhook' }) },
-  { value: DESTINATION_TYPE.CUSTOM_HOOK, text: 'Custom webhook' },
+  { value: DESTINATION_TYPE.SLACK, text: formatMessage({ id: 'alert.destination.type.slack' }) },
-  { value: DESTINATION_TYPE.EMAIL, text: 'Email' },
+  // { value: DESTINATION_TYPE.CHIME, text: formatMessage({ id: 'alert.destination.type.chime' }) },
+
 ];
 
 export const ALLOW_LIST_SETTING_PATH = 'opendistro.alerting.destination.allow_list';

web/src/pages/Alerting/pages/Home/Home.js

@@ -20,6 +20,7 @@ import { EuiTab, EuiTabs } from '@elastic/eui';
 import Dashboard from '../Dashboard/containers/Dashboard';
 import Monitors from '../Monitors/containers/Monitors';
 import DestinationsList from '../Destinations/containers/DestinationsList';
+import { formatMessage } from 'umi/locale';
 
 const getSelectedTabId = (pathname) => {
   if (pathname.includes('monitors')) return 'monitors';
@@ -39,17 +40,17 @@ export default class Home extends Component {
     this.tabs = [
       {
         id: 'dashboard',
-        name: 'Dashboard',
+        name: formatMessage({ id: 'alert.dashboard' }),
         route: 'dashboard',
       },
       {
         id: 'monitors',
-        name: 'Monitors',
+        name: formatMessage({ id: 'alert.monitor' }),
         route: 'monitors',
       },
       {
         id: 'destinations',
-        name: 'Destinations',
+        name: formatMessage({ id: 'alert.destination' }),
         route: 'destinations',
       },
     ];

web/src/pages/Alerting/pages/Monitors/components/MonitorActions/MonitorActions.js

@@ -25,6 +25,7 @@ import {
 
 import { APP_PATH } from '../../../../utils/constants';
 import { PLUGIN_NAME } from '../../../../utils/constants';
+import { formatMessage } from 'umi/locale';
 
 export default class MonitorActions extends Component {
   state = {
@@ -41,7 +42,7 @@ export default class MonitorActions extends Component {
           this.props.onBulkAcknowledge();
         }}
       >
-        Acknowledge
+        {formatMessage({ id: 'alert.monitor.actions.acknowledge' })}
       </EuiContextMenuItem>,
       <EuiContextMenuItem
         key="enable"
@@ -51,7 +52,7 @@ export default class MonitorActions extends Component {
           this.props.onBulkEnable();
         }}
       >
-        Enable
+          {formatMessage({ id: 'alert.monitor.actions.enable' })}
       </EuiContextMenuItem>,
       <EuiContextMenuItem
         key="disable"
@@ -61,7 +62,7 @@ export default class MonitorActions extends Component {
           this.props.onBulkDisable();
         }}
       >
-        Disable
+          {formatMessage({ id: 'alert.monitor.actions.disable' })}
       </EuiContextMenuItem>,
       <EuiContextMenuItem
         key="delete"
@@ -71,7 +72,7 @@ export default class MonitorActions extends Component {
           this.props.onBulkDelete();
         }}
       >
-        Delete
+        {formatMessage({ id: 'alert.monitor.actions.delete' })}
       </EuiContextMenuItem>,
     ];
   };
@@ -99,7 +100,7 @@ export default class MonitorActions extends Component {
                 iconSide="right"
                 data-test-subj="actionsButton"
               >
-                Actions
+                {formatMessage({ id: 'alert.monitor.actions' })}
               </EuiButton>
             }
             isOpen={isActionsOpen}
@@ -112,7 +113,7 @@ export default class MonitorActions extends Component {
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiButton disabled={isEditDisabled} onClick={onClickEdit} data-test-subj="editButton">
-            Edit
+            {formatMessage({ id: 'form.button.edit' })}
           </EuiButton>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
@@ -121,7 +122,7 @@ export default class MonitorActions extends Component {
             href={`#/${PLUGIN_NAME}${APP_PATH.CREATE_MONITOR}`}
             data-test-subj="createButton"
           >
-            Create monitor
+            {formatMessage({ id: 'alert.button.create-monitor' })}
           </EuiButton>
         </EuiFlexItem>
       </EuiFlexGroup>

web/src/pages/Alerting/pages/Monitors/components/MonitorControls/MonitorControls.js

@@ -15,11 +15,12 @@
 
 import React from 'react';
 import { EuiFieldSearch, EuiFlexGroup, EuiFlexItem, EuiPagination, EuiSelect } from '@elastic/eui';
+import { formatMessage } from 'umi/locale';
 
 const states = [
-  { value: 'all', text: 'All states' },
+  { value: 'all', text: formatMessage({ id: 'alert.monitor.state.all' }) },
-  { value: 'enabled', text: 'Enabled' },
+  { value: 'enabled', text: formatMessage({ id: 'alert.monitor.state.enabled' }) },
-  { value: 'disabled', text: 'Disabled' },
+  { value: 'disabled', text: formatMessage({ id: 'alert.monitor.state.disabled' }) },
 ];
 
 const MonitorControls = ({
@@ -36,7 +37,7 @@ const MonitorControls = ({
       <EuiFieldSearch
         fullWidth={true}
         value={search}
-        placeholder="Search"
+        placeholder={formatMessage({ id: 'form.button.search' })}
         onChange={onSearchChange}
       />
     </EuiFlexItem>

web/src/pages/Alerting/pages/Monitors/components/MonitorEmptyPrompt/MonitorEmptyPrompt.js

@@ -18,20 +18,19 @@ import { EuiButton, EuiEmptyPrompt, EuiText } from '@elastic/eui';
 
 import { APP_PATH } from '../../../../utils/constants';
 import { PLUGIN_NAME } from '../../../../utils/constants';
+import { formatMessage } from 'umi/locale';
 
-const filterText =
+const filterText = formatMessage({ id: 'alert.monitor.filter-text' });
-  'There are no monitors matching your applied filters. Reset your filters to view your monitors.';
+const emptyMonitorText = formatMessage({ id: 'alert.monitor.empty-monitor-text' });
-const emptyMonitorText =
+const loadingText = formatMessage({ id: 'loading-monitors' });
-  'There are no existing monitors. Create a monitor to add triggers and actions.';
-const loadingText = 'Loading monitors...';
 const createMonitorButton = (
   <EuiButton fill href={`#/${PLUGIN_NAME}${APP_PATH.CREATE_MONITOR}`}>
-    Create monitor
+      {formatMessage({ id: 'alert.button.create-monitor' })}
   </EuiButton>
 );
 const resetFiltersButton = resetFilters => (
   <EuiButton fill onClick={resetFilters}>
-    Reset Filters
+      {formatMessage({ id: 'reset-filters' })}
   </EuiButton>
 );
 

web/src/pages/Alerting/pages/Monitors/containers/Monitors/Monitors.js

@@ -28,6 +28,7 @@ import { getURLQueryParams } from './utils/helpers';
 import { columns as staticColumns } from './utils/tableUtils';
 import { MONITOR_ACTIONS } from '../../../../utils/constants';
 import { backendErrorNotification } from '../../../../utils/helpers';
+import { formatMessage } from 'umi/locale';
 
 const MAX_MONITOR_COUNT = 1000;
 
@@ -84,26 +85,26 @@ export default class Monitors extends Component {
     this.columns = [
       ...staticColumns,
       {
-        name: 'Actions',
+        name: formatMessage({ id: 'alert.monitor.actions' }),
         width: '75px',
         actions: [
           {
-            name: 'Acknowledge',
+            name: formatMessage({ id: 'alert.monitor.actions.acknowledge' }),
             description: 'Acknowledge this Monitor',
             onClick: this.onClickAcknowledge,
           },
           {
-            name: 'Enable',
+            name: formatMessage({ id: 'alert.monitor.actions.enable' }),
             description: 'Enable this Monitor',
             onClick: this.onClickEnable,
           },
           {
-            name: 'Disable',
+            name: formatMessage({ id: 'alert.monitor.actions.disable' }),
             description: 'Disable this Monitor',
             onClick: this.onClickDisable,
           },
           {
-            name: 'Delete',
+            name: formatMessage({ id: 'alert.monitor.actions.delete' }),
             description: 'Delete this Monitor',
             onClick: this.onClickDelete,
           },
@@ -400,7 +401,7 @@ export default class Monitors extends Component {
           />
         }
         bodyStyles={{ padding: 'initial' }}
-        title="Monitors"
+        title={formatMessage({ id: 'alert.monitor.monitors' })}
       >
         <MonitorControls
           activePage={page}

web/src/pages/Alerting/pages/Monitors/containers/Monitors/utils/tableUtils.js

@@ -18,6 +18,7 @@ import { EuiLink } from '@elastic/eui';
 import moment from 'moment';
 import { DEFAULT_EMPTY_DATA } from '../../../../../utils/constants';
 import { PLUGIN_NAME } from '../../../../../utils/constants';
+import { formatMessage } from 'umi/locale';
 
 const renderTime = (time) => {
   const momentTime = moment(time);
@@ -28,7 +29,7 @@ const renderTime = (time) => {
 export const columns = [
   {
     field: 'name',
-    name: 'Monitor name',
+    name: formatMessage({ id: 'alert.monitor.table.columns.name' }),
     sortable: true,
     truncateText: true,
     textOnly: true,
@@ -37,7 +38,7 @@ export const columns = [
   },
   {
     field: 'user',
-    name: 'Last updated by',
+    name: formatMessage({ id: 'alert.monitor.table.columns.user' }),
     sortable: true,
     truncateText: true,
     textOnly: true,
@@ -53,7 +54,7 @@ export const columns = [
   },
   {
     field: 'latestAlert',
-    name: 'Latest alert',
+    name: formatMessage({ id: 'alert.monitor.table.columns.latest_alert' }),
     sortable: false,
     truncateText: true,
     textOnly: true,
@@ -61,7 +62,7 @@ export const columns = [
   },
   {
     field: 'enabled',
-    name: 'State',
+    name: formatMessage({ id: 'alert.monitor.table.columns.state' }),
     sortable: false,
     truncateText: false,
     // width: '100px',
@@ -69,7 +70,7 @@ export const columns = [
   },
   {
     field: 'lastNotificationTime',
-    name: 'Last notification time',
+    name: formatMessage({ id: 'alert.monitor.table.columns.last_notification_time' }),
     sortable: true,
     truncateText: false,
     render: renderTime,
@@ -78,28 +79,28 @@ export const columns = [
   },
   {
     field: 'active',
-    name: 'Active',
+    name: formatMessage({ id: 'alert.monitor.table.columns.active' }),
     sortable: true,
     truncateText: false,
     // width: '100px',
   },
   {
     field: 'acknowledged',
-    name: 'Acknowledged',
+    name: formatMessage({ id: 'alert.monitor.table.columns.acknowledged' }),
     sortable: true,
     truncateText: false,
     // width: '100px',
   },
   {
     field: 'errors',
-    name: 'Errors',
+    name: formatMessage({ id: 'alert.monitor.table.columns.errors' }),
     sortable: true,
     truncateText: false,
     // width: '100px',
   },
   {
     field: 'ignored',
-    name: 'Ignored',
+    name: formatMessage({ id: 'alert.monitor.table.columns.ignored' }),
     sortable: true,
     truncateText: false,
     // width: '100px',