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>
  );