[ISSUE-#3855] Provided a feature to view version comparisons in the configDetails page

config/src/main/java/com/alibaba/nacos/config/server/controller/HistoryController.java

@@ -46,11 +46,11 @@ public class HistoryController {
     /**
      * Query the list history config.
      *
-     * @param dataId dataId string value.
-     * @param group group string value.
-     * @param tenant tenant string value.
-     * @param appName appName string value.
-     * @param pageNo pageNo string value.
+     * @param dataId   dataId string value.
+     * @param group    group string value.
+     * @param tenant   tenant string value.
+     * @param appName  appName string value.
+     * @param pageNo   pageNo string value.
      * @param pageSize pageSize string value.
      * @param modelMap modeMap.
      * @return
@@ -72,12 +72,20 @@ public Page<ConfigHistoryInfo> listConfigHistory(@RequestParam("dataId") String
     }
 
     /**
-     * Query the detailed configuration history informations.
+     * Query the detailed configuration history information.
      */
     @GetMapping
     public ConfigHistoryInfo getConfigHistoryInfo(HttpServletRequest request, HttpServletResponse response,
             @RequestParam("nid") Long nid, ModelMap modelMap) {
         return persistService.detailConfigHistory(nid);
     }
 
+    /**
+     * Query previous config history information.
+     */
+    @GetMapping(value = "/previous")
+    public ConfigHistoryInfo getPreviousConfigHistoryInfo(@RequestParam("id") Long id) {
+        return persistService.detailPreviousConfigHistory(id);
+    }
+
 }

config/src/main/java/com/alibaba/nacos/config/server/service/repository/PersistService.java

@@ -1077,6 +1077,15 @@ void insertConfigHistoryAtomic(long id, ConfigInfo configInfo, String srcIp, Str
      */
     ConfigHistoryInfo detailConfigHistory(Long nid);
 
+    /**
+     * Get previous config detail.
+     *
+     * @param id id
+     * @return {@link ConfigHistoryInfo}
+     */
+    ConfigHistoryInfo detailPreviousConfigHistory(Long id);
+
+
     /**
      * insert tenant info.
      *
@@ -1229,4 +1238,5 @@ Map<String, Object> batchInsertOrUpdate(List<ConfigAllInfo> configInfoList, Stri
      * @return count by tenantId
      */
     int tenantInfoCountByTenantId(String tenantId);
+
 }

config/src/main/java/com/alibaba/nacos/config/server/service/repository/embedded/EmbeddedStoragePersistServiceImpl.java

@@ -2059,6 +2059,12 @@ public ConfigHistoryInfo detailConfigHistory(Long nid) {
         return databaseOperate.queryOne(sqlFetchRows, new Object[] {nid}, HISTORY_DETAIL_ROW_MAPPER);
     }
 
+    @Override
+    public ConfigHistoryInfo detailPreviousConfigHistory(Long id) {
+        String sqlFetchRows = "SELECT nid,data_id,group_id,tenant_id,app_name,content,md5,src_user,src_ip,op_type,gmt_create,gmt_modified FROM his_config_info WHERE nid = (select max(nid) from his_config_info where id = ?)";
+        return databaseOperate.queryOne(sqlFetchRows, new Object[] {id}, HISTORY_DETAIL_ROW_MAPPER);
+    }
+
     @Override
     public void insertTenantInfoAtomic(String kp, String tenantId, String tenantName, String tenantDesc,
             String createResoure, final long time) {
@@ -2299,7 +2305,7 @@ public Map<String, Object> batchInsertOrUpdate(List<ConfigAllInfo> configInfoLis
         int skipCount = 0;
         List<Map<String, String>> failData = null;
         List<Map<String, String>> skipData = null;
-
+        
         final BiConsumer<Boolean, Throwable> callFinally = (result, t) -> {
             if (t != null) {
                 throw new NacosRuntimeException(0, t);

config/src/main/java/com/alibaba/nacos/config/server/service/repository/extrnal/ExternalStoragePersistServiceImpl.java

@@ -2297,6 +2297,19 @@ public ConfigHistoryInfo detailConfigHistory(Long nid) {
         }
     }
 
+    @Override
+    public ConfigHistoryInfo detailPreviousConfigHistory(Long id) {
+        String sqlFetchRows = "SELECT nid,data_id,group_id,tenant_id,app_name,content,md5,src_user,src_ip,op_type,gmt_create,gmt_modified FROM his_config_info WHERE nid = (select max(nid) from his_config_info where id = ?) ";
+        try {
+            ConfigHistoryInfo historyInfo = jt
+                    .queryForObject(sqlFetchRows, new Object[] {id}, HISTORY_DETAIL_ROW_MAPPER);
+            return historyInfo;
+        } catch (DataAccessException e) {
+            LogUtil.FATAL_LOG.error("[detail-previous-config-history] error, id:{}", new Object[] {id}, e);
+            throw e;
+        }
+    }
+
     @Override
     public void insertTenantInfoAtomic(String kp, String tenantId, String tenantName, String tenantDesc,
             String createResoure, final long time) {

console/src/main/resources/static/console-fe/src/components/DiffEditorDialog/DiffEditorDialog.js

@@ -32,6 +32,9 @@ class DiffEditorDialog extends React.Component {
 
   static propTypes = {
     publishConfig: PropTypes.func,
+    title: PropTypes.string,
+    currentArea: PropTypes.string,
+    originalArea: PropTypes.string,
   };
 
   constructor(props) {
@@ -71,6 +74,7 @@ class DiffEditorDialog extends React.Component {
       highlightDifferences: true,
       connect: 'align',
       collapseIdentical: false,
+      revertButtons: typeof this.props.publishConfig === 'function',
     });
   }
 
@@ -80,19 +84,29 @@ class DiffEditorDialog extends React.Component {
   }
 
   render() {
-    const { locale = {} } = this.props;
+    const { locale = {}, title, currentArea, originalArea } = this.props;
+    const publishButton = (
+      <Button type="primary" onClick={this.confirmPub.bind(this)}>
+        {locale.publish}
+      </Button>
+    );
     const footer = (
       <div>
         {' '}
-        <Button type="primary" onClick={this.confirmPub.bind(this)}>
-          {locale.publish}
-        </Button>
+        {typeof this.props.publishConfig === 'function' ? (
+          publishButton
+        ) : (
+          <Button type="primary" onClick={this.closeDialog.bind(this)}>
+            {locale.back}
+          </Button>
+        )}
       </div>
     );
+    console.log(footer);
     return (
       <div>
         <Dialog
-          title={locale.contents}
+          title={title}
           style={{ width: '80%' }}
           visible={this.state.dialogvisible}
           footer={footer}
@@ -101,8 +115,8 @@ class DiffEditorDialog extends React.Component {
           <div style={{ height: 400 }}>
             <div>
               <Row>
-                <Col style={{ textAlign: 'center' }}>{locale.currentArea}</Col>
-                <Col style={{ textAlign: 'center' }}>{locale.originalValue}</Col>
+                <Col style={{ textAlign: 'center' }}>{currentArea}</Col>
+                <Col style={{ textAlign: 'center' }}>{originalArea}</Col>
               </Row>
             </div>
             <div style={{ clear: 'both', height: 480 }} ref={this.diffeditor} />

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

@@ -378,9 +378,7 @@ const I18N_CONF = {
   },
   DiffEditorDialog: {
     publish: 'Publish',
-    contents: 'Content Comparison',
-    currentArea: 'Current Value',
-    originalValue: 'Original Value',
+    back: 'Back',
   },
   ConfigEditor: {
     official: 'Official',
@@ -411,6 +409,9 @@ const I18N_CONF = {
     publish: 'Publish',
     back: 'Back',
     codeValErrorPrompt: 'Configuration information may have syntax errors. Are you sure to submit?',
+    dialogTitle: 'Content Comparison',
+    dialogCurrentArea: 'Current Value',
+    dialogOriginalArea: 'Original Value',
   },
   EditorNameSpace: {
     notice: 'Notice',
@@ -498,6 +499,9 @@ const I18N_CONF = {
     betaRelease: 'Beta Publish:',
     configuration: 'Configuration Content:',
     back: 'Back',
+    versionComparison: 'Version Comparison',
+    dialogCurrentArea: 'Current Version',
+    dialogOriginalArea: 'Previous Version',
   },
   ConfigRollback: {
     rollBack: 'Roll Back',

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

@@ -376,9 +376,7 @@ const I18N_CONF = {
   },
   DiffEditorDialog: {
     publish: '确认发布',
-    contents: '内容比较',
-    currentArea: '当前值',
-    originalValue: '原始值',
+    back: '返回',
   },
   ConfigEditor: {
     official: '正式',
@@ -409,6 +407,9 @@ const I18N_CONF = {
     publish: '发布',
     back: '返回',
     codeValErrorPrompt: '配置信息可能有语法错误, 确定提交吗?',
+    dialogTitle: '内容比较',
+    dialogCurrentArea: '当前值',
+    dialogOriginalArea: '原始值',
   },
   EditorNameSpace: {
     notice: '提示',
@@ -495,6 +496,9 @@ const I18N_CONF = {
     betaRelease: 'Beta发布：',
     configuration: '配置内容：',
     back: '返回',
+    versionComparison: '版本对比',
+    dialogCurrentArea: '当前版本',
+    dialogOriginalArea: '上一版本',
   },
   ConfigRollback: {
     rollBack: '回滚配置',

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

@@ -15,15 +15,27 @@
  */
 
 import React from 'react';
-import { Button, ConfigProvider, Dialog, Field, Form, Input, Loading, Tab } from '@alifd/next';
+import {
+  Button,
+  ConfigProvider,
+  Dialog,
+  Field,
+  Form,
+  Input,
+  Loading,
+  Tab,
+  Grid,
+} from '@alifd/next';
 import { getParams, request } from '../../../globalLib';
 import { generateUrl } from '../../../utils/nacosutil';
+import DiffEditorDialog from '../../../components/DiffEditorDialog';
 
 import './index.scss';
 import PropTypes from 'prop-types';
 
 const TabPane = Tab.Item;
 const FormItem = Form.Item;
+const { Row, Col } = Grid;
 
 @ConfigProvider.config
 class ConfigDetail extends React.Component {
@@ -56,6 +68,7 @@ class ConfigDetail extends React.Component {
     this.searchGroup = getParams('searchGroup') || '';
     this.pageSize = getParams('pageSize');
     this.pageNo = getParams('pageNo');
+    this.diffEditorDialog = React.createRef();
     // this.params = window.location.hash.split('?')[1]||'';
   }
 
@@ -188,6 +201,32 @@ class ConfigDetail extends React.Component {
     }
   }
 
+  openDiff() {
+    let self = this;
+    const { locale = {} } = this.props;
+    let leftvalue = this.monacoEditor.getValue();
+    let url = `v1/cs/history/previous?id=${this.valueMap.normal.id}`;
+    request({
+      url,
+      beforeSend() {
+        self.openLoading();
+      },
+      success(result) {
+        if (result != null) {
+          let rightvalue = result.content;
+          leftvalue = leftvalue.replace(/\r\n/g, '\n').replace(/\n/g, '\r\n');
+          rightvalue = rightvalue.replace(/\r\n/g, '\n').replace(/\n/g, '\r\n');
+          self.diffEditorDialog.current.getInstance().openDialog(leftvalue, rightvalue);
+        } else {
+          Dialog.alert({ title: locale.error, content: result.message });
+        }
+      },
+      complete() {
+        self.closeLoading();
+      },
+    });
+  }
+
   render() {
     const { locale = {} } = this.props;
     const { init } = this.field;
@@ -276,12 +315,23 @@ class ConfigDetail extends React.Component {
             <FormItem label={locale.configuration} required {...formItemLayout}>
               <div style={{ clear: 'both', height: 300 }} id="container" />
             </FormItem>
-            <FormItem label={' '} {...formItemLayout}>
-              <Button type={'primary'} onClick={this.goList.bind(this)}>
+          </Form>
+          <Row>
+            <Col span="24" className="button-list">
+              <Button size="large" type="primary" onClick={this.openDiff.bind(this)}>
+                {locale.versionComparison}
+              </Button>{' '}
+              <Button size="large" type="normal" onClick={this.goList.bind(this)}>
                 {locale.back}
               </Button>
-            </FormItem>
-          </Form>
+            </Col>
+          </Row>
+          <DiffEditorDialog
+            ref={this.diffEditorDialog}
+            title={locale.versionComparison}
+            currentArea={locale.dialogCurrentArea}
+            originalArea={locale.dialogOriginalArea}
+          />
         </Loading>
       </div>
     );

console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/ConfigDetail/index.scss

@@ -13,3 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+ .button-list {
+  text-align: right;
+  button {
+    margin-left: 1em;
+    font-size: 14px;
+  }
+}

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

@@ -605,6 +605,9 @@ class ConfigEditor extends React.Component {
                 });
               });
             }}
+            title={locale.dialogTitle}
+            currentArea={locale.dialogCurrentArea}
+            originalArea={locale.dialogOriginalArea}
           />
           <SuccessDialog ref={this.successDialog} />
         </Loading>