feat: add version data compare in the history list (#7428)

* feat: add version data compare in the history list * feat: add version data compare in the history list
alibaba · Jun 28, 2022 · 7aa74b9 · 7aa74b9
1 parent 56ee220
commit 7aa74b9
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 0 deletions.
diff --git a/console-ui/src/locales/en-US.js b/console-ui/src/locales/en-US.js
@@ -243,6 +243,10 @@ const I18N_CONF = {
     lastUpdateTime: 'Last Modified At',
     operator: 'Operator',
     operation: 'Operation',
+    compare: 'Compare',
+    historyCompareTitle: 'History Compare',
+    historyCompareLastVersion: 'Lasted Release Version',
+    historyCompareSelectedVersion: 'Selected Version',
   },
   HistoryDetail: {
     historyDetails: 'History Details',

diff --git a/console-ui/src/locales/zh-CN.js b/console-ui/src/locales/zh-CN.js
@@ -242,6 +242,10 @@ const I18N_CONF = {
     lastUpdateTime: '最后更新时间',
     operator: '操作人',
     operation: '操作',
+    compare: '比较',
+    historyCompareTitle: '历史版本比较',
+    historyCompareLastVersion: '最新版本',
+    historyCompareSelectedVersion: '当前选中版本',
   },
   HistoryDetail: {
     historyDetails: '历史详情',

diff --git a/console-ui/src/pages/ConfigurationManagement/HistoryRollback/HistoryRollback.js b/console-ui/src/pages/ConfigurationManagement/HistoryRollback/HistoryRollback.js
@@ -21,6 +21,7 @@ import RegionGroup from 'components/RegionGroup';
 import { getParams, setParams, request } from '@/globalLib';
 
 import './index.scss';
+import DiffEditorDialog from '../../../components/DiffEditorDialog';
 
 @ConfigProvider.config
 class HistoryRollback extends React.Component {
@@ -59,6 +60,7 @@ class HistoryRollback extends React.Component {
       selectValue: [],
       loading: false,
     };
+    this.diffEditorDialog = React.createRef();
   }
 
   componentDidMount() {
@@ -132,6 +134,10 @@ class HistoryRollback extends React.Component {
         <a style={{ marginRight: 5 }} onClick={this.goRollBack.bind(this, record)}>
           {locale.rollback}
         </a>
+        <span style={{ marginRight: 5 }}>|</span>
+        <a style={{ marginRight: 5 }} onClick={this.goCompare.bind(this, record)}>
+          {locale.compare}
+        </a>
       </div>
     );
   }
@@ -195,6 +201,71 @@ class HistoryRollback extends React.Component {
     );
   }
 
+  goCompare(record) {
+    let tenant = getParams('namespace') || '';
+    let serverId = getParams('serverId') || 'center';
+    this.getConfig(-1, tenant, serverId, this.dataId, this.group).then(lasted => {
+      this.getHistoryConfig(record.id, this.dataId, this.group).then(selected => {
+        this.diffEditorDialog.current.getInstance().openDialog(selected.content, lasted.content);
+      });
+    });
+  }
+
+  /**
+   * 获取最新版本配置
+   * @param id
+   * @param tenant
+   * @param serverId
+   * @param dataId
+   * @param group
+   * @returns {Promise<unknown>}
+   */
+  getConfig(id, tenant, serverId, dataId, group) {
+    return new Promise((resolve, reject) => {
+      const { locale = {} } = this.props;
+      const self = this;
+      this.tenant = tenant;
+      this.serverId = tenant;
+      const url = `v1/cs/configs?show=all&dataId=${dataId}&group=${group}`;
+      request({
+        url,
+        beforeSend() {
+          self.openLoading();
+        },
+        success(result) {
+          if (result != null) {
+            resolve(result);
+          }
+        },
+        complete() {
+          self.closeLoading();
+        },
+      });
+    });
+  }
+
+  /**
+   * 获取历史版本配置数据
+   * @param nid
+   * @param dataId
+   * @param group
+   * @returns {Promise<unknown>}
+   */
+  getHistoryConfig(nid, dataId, group) {
+    return new Promise((resolve, reject) => {
+      const { locale = {} } = this.props;
+      const self = this;
+      request({
+        url: `v1/cs/history?dataId=${dataId}&group=${group}&nid=${nid}`,
+        success(result) {
+          if (result != null) {
+            resolve(result);
+          }
+        },
+      });
+    });
+  }
+
   goRollBack(record) {
     this.serverId = getParams('serverId') || 'center';
     this.tenant = getParams('namespace') || ''; // 为当前实例保存tenant参数
@@ -367,6 +438,12 @@ class HistoryRollback extends React.Component {
             />
             ,
           </div>
+          <DiffEditorDialog
+            ref={this.diffEditorDialog}
+            title={locale.historyCompareTitle}
+            currentArea={locale.historyCompareSelectedVersion}
+            originalArea={locale.historyCompareLastVersion}
+          />
         </Loading>
       </div>
     );