add config compare feat (#5102)

console-ui/src/locales/en-US.js

@@ -512,6 +512,14 @@ const I18N_CONF = {
     versionComparison: 'Version Comparison',
     dialogCurrentArea: 'Current Version',
     dialogOriginalArea: 'Previous Version',
+    configComparison: 'Config Comparison',
+    dialogCurrentConfig: 'Current Config',
+    dialogComparedConfig: 'Compared Config',
+    configComparisonTitle: 'Select Config',
+    dataIdInput: 'Please Enter Data Id',
+    groupInput: 'Please Enter Group',
+    namespaceSelect: 'Please Select namespace',
+    configNotFind: 'The Configuration is not found, Please select again',
   },
   ConfigRollback: {
     rollBack: 'Roll Back',

console-ui/src/locales/zh-CN.js

@@ -508,6 +508,14 @@ const I18N_CONF = {
     versionComparison: '版本对比',
     dialogCurrentArea: '当前版本',
     dialogOriginalArea: '上一版本',
+    configComparison: '配置对比',
+    dialogCurrentConfig: '当前配置',
+    dialogComparedConfig: '被比较配置',
+    configComparisonTitle: '选择配置',
+    dataIdInput: '请输入Data Id',
+    groupInput: '请输入Group',
+    namespaceSelect: '请选择命名空间',
+    configNotFind: '未查询到指定配置,请重新选择',
   },
   ConfigRollback: {
     rollBack: '回滚配置',

console-ui/src/pages/ConfigurationManagement/ConfigDetail/ConfigCompared.js

@@ -0,0 +1,136 @@
+/*
+ * Copyright 1999-2018 Alibaba Group Holding Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Field, Form, Input, Dialog, ConfigProvider, Select } from '@alifd/next';
+import { connect } from 'react-redux';
+import { getNamespaces } from '../../../reducers/namespace';
+import { request } from '../../../globalLib';
+const FormItem = Form.Item;
+const { Option } = Select;
+
+const formItemLayout = {
+  labelCol: { fixedSpan: 4 },
+  wrapperCol: { span: 19 },
+};
+@connect(state => ({ namespaces: state.namespace.namespaces }), { getNamespaces })
+@ConfigProvider.config
+class ConfigCompared extends React.Component {
+  static displayName = 'ConfigCompare';
+
+  field = new Field(this);
+
+  static propTypes = {
+    locale: PropTypes.object,
+    dataId: PropTypes.string,
+    group: PropTypes.string,
+    visible: PropTypes.bool,
+    onOk: PropTypes.func,
+    onCancel: PropTypes.func,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      namespacesDataSource: [],
+    };
+  }
+
+  componentDidMount() {
+    this.getNamespaces();
+  }
+
+  getNamespaces() {
+    request({
+      type: 'get',
+      url: 'v1/console/namespaces',
+      success: res => {
+        if (res.code === 200) {
+          const { namespacesDataSource } = this.state;
+          this.setState({ namespacesDataSource: res.data });
+        } else {
+          Dialog.alert({
+            title: prompt,
+            content: res.message,
+          });
+        }
+      },
+      error: res => {
+        window.namespaceList = [
+          {
+            namespace: '',
+            namespaceShowName: '公共空间',
+            type: 0,
+          },
+        ];
+      },
+    });
+  }
+
+  render() {
+    const { locale = {} } = this.props;
+    const { getError } = this.field;
+    const { visible, onOk, onCancel, dataId, group } = this.props;
+    const { namespacesDataSource } = this.state;
+    return (
+      <>
+        <Dialog
+          title={locale.configComparisonTitle}
+          visible={visible}
+          onOk={() => {
+            const fields = {
+              dataId: 'dataId',
+              group: 'group',
+              namespace: 'namespace',
+            };
+            const vals = Object.keys(fields).map(key => {
+              return this.field.getValue(key);
+            });
+            onOk(vals);
+          }}
+          onClose={onCancel}
+          onCancel={onCancel}
+          afterClose={() => this.field.reset()}
+        >
+          <Form style={{ width: 430 }} {...formItemLayout} field={this.field}>
+            <FormItem label={'namespace'} help={getError('namespace')}>
+              <Select
+                name="namespace"
+                placeholder={locale.namespaceSelect}
+                style={{ width: '100%' }}
+              >
+                {namespacesDataSource.map(({ namespace, namespaceShowName }) => (
+                  <Option value={namespace}>
+                    {namespaceShowName} {namespace ? `(${namespace})` : ''}
+                  </Option>
+                ))}
+              </Select>
+            </FormItem>
+            <FormItem label={'Data Id'} required help={getError('Data Id')}>
+              <Input name="dataId" trim placeholder={locale.dataIdInput} defaultValue={dataId} />
+            </FormItem>
+            <FormItem label={'Group'} required help={getError('Group')}>
+              <Input name="group" trim placeholder={locale.configComparison} defaultValue={group} />
+            </FormItem>
+          </Form>
+        </Dialog>
+      </>
+    );
+  }
+}
+
+export default ConfigCompared;

console-ui/src/pages/ConfigurationManagement/ConfigDetail/ConfigDetail.js

@@ -32,6 +32,8 @@ import DiffEditorDialog from '../../../components/DiffEditorDialog';
 
 import './index.scss';
 import PropTypes from 'prop-types';
+import requestUtils from '../../../utils/request';
+import ConfigCompared from './ConfigCompared';
 
 const TabPane = Tab.Item;
 const FormItem = Form.Item;
@@ -69,6 +71,7 @@ class ConfigDetail extends React.Component {
     this.pageSize = getParams('pageSize');
     this.pageNo = getParams('pageNo');
     this.diffEditorDialog = React.createRef();
+    this.compareEditorDialog = React.createRef();
     // this.params = window.location.hash.split('?')[1]||'';
   }
 
@@ -227,8 +230,39 @@ class ConfigDetail extends React.Component {
     });
   }
 
+  openCompare = ([dataId, group, tenant]) => {
+    let self = this;
+    const { locale = {} } = this.props;
+    let leftvalue = this.monacoEditor.getValue();
+    const params = {
+      show: 'all',
+      group,
+      dataId,
+      tenant,
+    };
+    requestUtils.get('v1/cs/configs', { params }).then(res => {
+      if (res != null && res !== '') {
+        let rightvalue = res.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.compareEditorDialog.current.getInstance().openDialog(leftvalue, rightvalue);
+      } else {
+        Dialog.alert({ title: locale.error, content: locale.configNotFind });
+      }
+    });
+  };
+
+  onClickConfigCompare() {
+    this.setState({ configCompareVisible: true });
+  }
+
+  closeConfigCompare() {
+    this.setState({ configCompareVisible: false });
+  }
+
   render() {
     const { locale = {} } = this.props;
+    const { configCompareVisible } = this.state;
     const { init } = this.field;
     const formItemLayout = {
       labelCol: {
@@ -318,6 +352,9 @@ class ConfigDetail extends React.Component {
           </Form>
           <Row>
             <Col span="24" className="button-list">
+              <Button size="large" type="primary" onClick={() => this.onClickConfigCompare()}>
+                {locale.configComparison}
+              </Button>{' '}
               <Button size="large" type="primary" onClick={this.openDiff.bind(this)}>
                 {locale.versionComparison}
               </Button>{' '}
@@ -332,7 +369,22 @@ class ConfigDetail extends React.Component {
             currentArea={locale.dialogCurrentArea}
             originalArea={locale.dialogOriginalArea}
           />
+          <DiffEditorDialog
+            ref={this.compareEditorDialog}
+            title={locale.configComparison}
+            currentArea={locale.dialogCurrentConfig}
+            originalArea={locale.dialogComparedConfig}
+          />
         </Loading>
+        <ConfigCompared
+          visible={configCompareVisible}
+          dataId={this.dataId}
+          group={this.group}
+          onOk={config => {
+            this.openCompare(config);
+          }}
+          onCancel={() => this.closeConfigCompare()}
+        />
       </div>
     );
   }