fix: ListeningToQuery internationalization

console/src/main/resources/static/console-fe/src/locales/en-US.js

@@ -127,5 +127,21 @@ const I18N_CONF = {
     updateInstance: 'Update Instance',
     whetherOnline: 'Whether Online',
   },
+  ListeningToQuery: {
+    success: 'Success',
+    failure: 'Failure',
+    configuration: 'Configuration',
+    pubNoData: 'No results found.',
+    listenerQuery: 'Listening Query',
+    queryDimension: 'Dimension',
+    pleaseEnterTheDataId: 'Enter Data ID',
+    dataIdCanNotBeEmpty: 'Data ID cannot be empty',
+    pleaseInputGroup: 'Enter Group',
+    groupCanNotBeEmpty: 'Group cannot be empty',
+    pleaseInputIp: 'Enter IP',
+    query: 'Search',
+    queryResultsQuery: 'Search Results: Found',
+    articleMeetRequirementsConfiguration: 'configuration items.',
+  },
 };
 export default I18N_CONF;

console/src/main/resources/static/console-fe/src/locales/zh-CN.js

@@ -127,5 +127,21 @@ const I18N_CONF = {
     updateInstance: '编辑实例',
     whetherOnline: '是否上线',
   },
+  ListeningToQuery: {
+    success: '成功',
+    failure: '失败',
+    configuration: '配置',
+    pubNoData: '没有数据',
+    listenerQuery: '监听查询',
+    queryDimension: '查询维度',
+    pleaseEnterTheDataId: '请输入Data ID',
+    dataIdCanNotBeEmpty: 'Data ID不能为空',
+    pleaseInputGroup: '请输入Group',
+    groupCanNotBeEmpty: 'Group不能为空',
+    pleaseInputIp: '请输入IP',
+    query: '查询',
+    queryResultsQuery: '查询结果：共查询到',
+    articleMeetRequirementsConfiguration: '条满足要求的配置。',
+  },
 };
 export default I18N_CONF;

console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/ListeningToQuery/ListeningToQuery.js

@@ -13,15 +13,28 @@
 
 import React from 'react';
 import RegionGroup from '../../../components/RegionGroup';
-import { getParams, request, aliwareIntl } from '../../../globalLib';
+import { getParams, request } from '../../../globalLib';
-import { Field, Form, Grid, Input, Loading, Pagination, Select, Table } from '@alifd/next';
+import {
+  ConfigProvider,
+  Field,
+  Form,
+  Grid,
+  Input,
+  Loading,
+  Pagination,
+  Select,
+  Table,
+} from '@alifd/next';
 
 import './index.scss';
 
 const FormItem = Form.Item;
 const { Row, Col } = Grid;
 
+@ConfigProvider.config
 class ListeningToQuery extends React.Component {
+  static displayName = 'ListeningToQuery';
+
   constructor(props) {
     super(props);
     this.state = {
@@ -129,16 +142,13 @@ class ListeningToQuery extends React.Component {
   }
 
   renderStatus(values, index, record) {
+    const { locale = {} } = this.props;
     return (
       <div>
         {record.pushStatus === true ? (
-          <span style={{ color: 'green' }}>
+          <span style={{ color: 'green' }}>{locale.success}</span>
-            {aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.success')}
-          </span>
         ) : (
-          <span style={{ color: 'red' }}>
+          <span style={{ color: 'red' }}>{locale.failure}</span>
-            {aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.failure')}
-          </span>
         )}
       </div>
     );
@@ -152,17 +162,14 @@ class ListeningToQuery extends React.Component {
   };
 
   render() {
+    const { locale = {} } = this.props;
     const { init, getValue } = this.field;
     this.init = init;
     this.getValue = getValue;
-    const pubnodedata = aliwareIntl.get('pubnodata');
 
-    const locale = {
-      empty: pubnodedata,
-    };
     const selectDataSource = [
       {
-        label: aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.configuration'),
+        label: locale.configuration,
         value: 0,
       },
       {
@@ -179,21 +186,15 @@ class ListeningToQuery extends React.Component {
           tip="Loading..."
           color="#333"
         >
-          <RegionGroup
+          <RegionGroup left={locale.listenerQuery} namespaceCallBack={this.getQueryLater} />
-            left={aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.listener_query')}
-            namespaceCallBack={this.getQueryLater}
-          />
           <Row className="demo-row" style={{ marginBottom: 10, padding: 0 }}>
             <Col span="24">
               <Form inline field={this.field}>
-                <FormItem
+                <FormItem label={`${locale.queryDimension}:`}>
-                  label={aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.query_dimension')}
-                >
                   <Select
                     dataSource={selectDataSource}
                     style={{ width: 200 }}
                     {...this.init('type')}
-                    language={aliwareIntl.currentLanguageCode}
                   />
                 </FormItem>
                 <FormItem
@@ -204,17 +205,13 @@ class ListeningToQuery extends React.Component {
                   required
                 >
                   <Input
-                    placeholder={aliwareIntl.get(
+                    placeholder={locale.pleaseEnterTheDataId}
-                      'com.alibaba.nacos.page.listeningToQuery.please_enter_the_dataid'
-                    )}
                     style={{ width: 200 }}
                     {...this.init('dataId', {
                       rules: [
                         {
                           required: true,
-                          message: aliwareIntl.get(
+                          message: locale.dataIdCanNotBeEmpty,
-                            'com.alibaba.nacos.page.form.Data_Id_can_not_be_empty'
-                          ),
                         },
                       ],
                     })}
@@ -228,17 +225,13 @@ class ListeningToQuery extends React.Component {
                   required
                 >
                   <Input
-                    placeholder={aliwareIntl.get(
+                    placeholder={locale.pleaseInputGroup}
-                      'com.alibaba.nacos.page.listeningToQuery.please_input_group'
-                    )}
                     style={{ width: 200 }}
                     {...this.init('group', {
                       rules: [
                         {
                           required: true,
-                          message: aliwareIntl.get(
+                          message: locale.groupCanNotBeEmpty,
-                            'com.alibaba.nacos.page.listeningToQuery.group_can_not_be_empty'
-                          ),
                         },
                       ],
                     })}
@@ -251,9 +244,7 @@ class ListeningToQuery extends React.Component {
                   }}
                 >
                   <Input
-                    placeholder={aliwareIntl.get(
+                    placeholder={locale.pleaseInputIp}
-                      'com.alibaba.nacos.page.listeningToQuery.please_input_ip'
-                    )}
                     style={{ width: 200, boxSize: 'border-box' }}
                     {...this.init('ip')}
                   />
@@ -265,9 +256,8 @@ class ListeningToQuery extends React.Component {
                     onClick={this.queryTrackQuery}
                     style={{ marginRight: 10 }}
                   >
-                    {aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.query')}
+                    {locale.query}
                   </Form.Submit>
-                  {}
                 </FormItem>
               </Form>
             </Col>
@@ -284,11 +274,9 @@ class ListeningToQuery extends React.Component {
                 fontSize: 16,
               }}
             >
-              {aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.query_results:_query')}
+              {locale.queryResultsQuery}
               <strong style={{ fontWeight: 'bold' }}> {this.state.total} </strong>
-              {aliwareIntl.get(
+              {locale.articleMeetRequirementsConfiguration}
-                'com.alibaba.nacos.page.listeningToQuery.article_meet_the_requirements_of_the_configuration.'
-              )}
             </h3>
           </div>
           <Row style={{ padding: 0 }}>
@@ -298,8 +286,7 @@ class ListeningToQuery extends React.Component {
                   dataSource={this.state.dataSource}
                   fixedHeader
                   maxBodyHeight={500}
-                  locale={locale}
+                  locale={{ empty: locale.pubNoData }}
-                  language={aliwareIntl.currentLanguageCode}
                 >
                   <Table.Column title="Data ID" dataIndex="dataId" />
                   <Table.Column title="Group" dataIndex="group" />
@@ -310,8 +297,7 @@ class ListeningToQuery extends React.Component {
                   dataSource={this.state.dataSource}
                   fixedHeader
                   maxBodyHeight={400}
-                  locale={locale}
+                  locale={{ empty: locale.pubNoData }}
-                  language={aliwareIntl.currentLanguageCode}
                 >
                   <Table.Column title="IP" dataIndex="ip" />
                   <Table.Column title="MD5" dataIndex="md5" />
@@ -325,7 +311,6 @@ class ListeningToQuery extends React.Component {
               total={this.state.total}
               pageSize={this.state.pageSize}
               onChange={this.changePage}
-              language={aliwareIntl.currentLanguageCode}
             />
             ,
           </div>