validate group and dataId not empty

console/src/main/resources/static/src/i18ndoc.js

@@ -418,6 +418,8 @@ module.exports = {
     "com.alibaba.nacos.page.configurationManagement.details": "详情",
     "nacos.page.namespace.details": "详情",
     "com.alibaba.nacos.page.listeningToQuery.query_results:_query": "查询结果：共查询到",
+    "com.alibaba.nacos.page.form.Data_Id_can_not_be_empty": "Data ID不能为空",
+    "com.alibaba.nacos.page.listeningToQuery.group_can_not_be_empty": "Group不能为空",
     "com.alibaba.nacos.page.configurationManagement.fuzzyg": "模糊查询请输入Group",
     "nacos.component.NameSpaceList.Forum": "论坛",
     "nacos.component.ShowCodeing.,_new_ConfigChangeListener()_{_public_void_receiveConfigInfo(String": "\", new ConfigChangeListener() {\t\t\t\tpublic void receiveConfigInfo(String configInfo) {\t\t\t\t\t// 当配置更新后，通过该回调函数将最新值吐给用户。\t\t\t\t\t// 注意回调函数中不要做阻塞操作，否则阻塞通知线程。\t\t\t\t\tconfig = configInfo;\t\t\t\t\tSystem.out.println(configInfo);\t\t\t\t}\t\t\t});\t\t\t\t\t\t/**\t\t\t * 如果配置值的內容为properties格式（key=value）, 可使用下面监听器。以便一个配置管理多个配置项\t\t\t */\t\t\t\t\t\t/**\t\t\tConfigService.addListener(\"",
@@ -915,6 +917,8 @@ module.exports = {
     "com.alibaba.nacos.page.pushTrajectory.interval:": "Time Range:",
     "nacos.component.ImportDialog.skip1": "Skip",
     "com.alibaba.nacos.page.listeningToQuery.query_results:_query": "Search Results: Found",
+    "com.alibaba.nacos.page.form.Data_Id_can_not_be_empty": "Data ID cannot be empty",
+    "com.alibaba.nacos.page.listeningToQuery.group_can_not_be_empty": "Group cannot be empty",
     "com.alibaba.nacos.page.pushTrajectory.please_input_Group": "Enter Group",
     "com.alibaba.nacos.page.configRollback.rollback_successful": "Rollback Successful",
     "com.alibaba.nacos.component.MiddleWareEnv.payTM_daily": "payTM Daily",

console/src/main/resources/static/src/pages/ConfigurationManagement/HistoryRollback/HistoryRollback.js

@@ -12,7 +12,7 @@
  */
 
 import React from 'react';
-import { Button, Field, Form, Input, Loading, Pagination, Table } from '@alifd/next';
+import { Field, Form, Input, Loading, Pagination, Table } from '@alifd/next';
 import RegionGroup from '../../../components/RegionGroup';
 import { getParams, setParams, request, aliwareIntl } from '../../../globalLib';
 import './index.less';
@@ -57,7 +57,8 @@ class HistoryRollback extends React.Component {
     }
 
     componentDidMount() {
-
+        this.field.setValue('group', this.group);
+        this.field.setValue('dataId', this.dataId);
         //this.getData()
     }
     openLoading() {
@@ -195,6 +196,11 @@ class HistoryRollback extends React.Component {
         });
     }
     selectAll() {
+        this.dataId = this.field.getValue("dataId");
+        this.group = this.field.getValue("group");
+        if (!this.dataId || !this.group) {
+            return false;
+        }
         if (this.dataId !== this.preDataId) {
             setParams('dataId', this.dataId);
             this.preDataId = this.dataId;
@@ -243,6 +249,10 @@ class HistoryRollback extends React.Component {
         const locale = {
             empty: pubnodedata
         };
+
+        const { init } = this.field;
+        this.init = init;
+
         return (
             <div style={{ padding: 10 }}>
                 <Loading shape="flower" style={{ position: 'relative', width: "100%" }} visible={this.state.loading} tip="Loading..." color="#333">
@@ -252,22 +262,29 @@ class HistoryRollback extends React.Component {
                            </div>**/}
 
                     <div>
-                        <Form inline>
+                        <Form inline field={this.field}>
 
-                            <Form.Item label="Data ID:">
+                            <Form.Item label="Data ID:" required>
-                                <Input htmlType="text" placeholder={aliwareIntl.get('com.alibaba.nacos.page.historyRollback.dataid')}
+                                <Input placeholder={aliwareIntl.get('com.alibaba.nacos.page.historyRollback.dataid')}
-                                    style={{ width: 200 }} value={this.state.dataId} onChange={this.getDataId.bind(this)} />
+                                        style={{ width: 200 }}
+                                        {...this.init('dataId', {
+                                            rules: [{
+                                                required: true,
+                                                message: aliwareIntl.get('com.alibaba.nacos.page.form.Data_Id_can_not_be_empty')
+                                            }]
+                                })} />
                             </Form.Item>
-                            <Form.Item label="Group:">
+                            <Form.Item label="Group:" required>
-                                <Input placeholder={aliwareIntl.get('com.alibaba.nacos.page.historyRollback.group')} id="userName" name="userName" value={this.state.group}
+                                <Input placeholder={aliwareIntl.get('com.alibaba.nacos.page.historyRollback.group')} style={{ width: 200 }} {...this.init('group', {
-                                    style={{ width: 200 }} onChange={this.getGroup.bind(this)} />
+                                            rules: [{
+                                                required: true,
+                                                message: aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.group_can_not_be_empty')
+                                            }]
+                                })} />
                             </Form.Item>
 
                             <Form.Item label="">
-                                <Button type="primary" style={{ marginRight: 10 }} onClick={this.selectAll.bind(this)}>
+                                <Form.Submit validate type="primary" onClick={this.selectAll.bind(this)} style={{ marginRight: 10 }}>{aliwareIntl.get('com.alibaba.nacos.page.historyrollback.query')}</Form.Submit>
-                                    {aliwareIntl.get('com.alibaba.nacos.page.historyrollback.query')}</Button>
-                                {}
-
                             </Form.Item>
 
                         </Form>

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

@@ -15,7 +15,7 @@ import React from 'react';
 import RegionGroup from '../../../components/RegionGroup';
 import { getParams, request, aliwareIntl } from '../../../globalLib';
 import './index.less';
-import { Button, Field, Form, Grid, Input, Loading, Pagination, Select, Table } from '@alifd/next';
+import { Field, Form, Grid, Input, Loading, Pagination, Select, Table } from '@alifd/next';
 const FormItem = Form.Item;
 const { Row, Col } = Grid;
 
@@ -72,7 +72,7 @@ class ListeningToQuery extends React.Component {
         } else {
             var dataId = this.getValue('dataId');
             var group = this.getValue('group');
-            if (!dataId) return false;
+            if (!dataId || !group) return false;
             queryUrl = `/nacos/v1/cs/configs/listener?dataId=${dataId}&group=${group}`;
         }
         request({
@@ -164,13 +164,25 @@ class ListeningToQuery extends React.Component {
                                 </FormItem>
                                 <FormItem label="Data ID:" style={{
                                     display: this.getValue('type') === 0 ? '' : 'none'
-                                }}>
+                                }} required>
-                                    <Input placeholder={aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.please_enter_the_dataid')} style={{ width: 200 }} {...this.init('dataId')} />
+                                    <Input placeholder={aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.please_enter_the_dataid')}
+                                            style={{ width: 200 }}
+                                            {...this.init('dataId', {
+                                                rules: [{
+                                                    required: true,
+                                                    message: aliwareIntl.get('com.alibaba.nacos.page.form.Data_Id_can_not_be_empty')
+                                                }]
+                                    })} />
                                 </FormItem>
                                 <FormItem label="Group:" style={{
                                     display: this.getValue('type') === 0 ? '' : 'none'
-                                }}>
+                                }} required>
-                                    <Input placeholder={aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.please_input_group')} style={{ width: 200 }} {...this.init('group')} />
+                                    <Input placeholder={aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.please_input_group')} style={{ width: 200 }} {...this.init('group', {
+                                                rules: [{
+                                                    required: true,
+                                                    message: aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.group_can_not_be_empty')
+                                                }]
+                                    })} />
                                 </FormItem>
                                 <FormItem label="IP:" style={{
                                     display: this.getValue('type') === 0 ? 'none' : ''
@@ -178,7 +190,7 @@ class ListeningToQuery extends React.Component {
                                     <Input placeholder={aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.please_input_ip')} style={{ width: 200, boxSize: 'border-box' }} {...this.init('ip')} />
                                 </FormItem>
                                 <FormItem label="">
-                                    <Button type="primary" onClick={this.queryTrackQuery.bind(this)} style={{ marginRight: 10 }}>{aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.query')}</Button>
+                                    <Form.Submit validate type="primary" onClick={this.queryTrackQuery.bind(this)} style={{ marginRight: 10 }}>{aliwareIntl.get('com.alibaba.nacos.page.listeningToQuery.query')}</Form.Submit>
                                     {}
                                 </FormItem>
                             </Form>