A web update

spug_web/src/pages/config/setting/DiffConfig.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { Modal, Table, Row, Col, Checkbox, Form, Button, Alert } from 'antd';
+import http from 'libs/http';
+import envStore from '../environment/store';
+import store from './store';
+
+@observer
+class Record extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: false,
+      records: [],
+      envs: [],
+      page: 0,
+      hideSame: false
+    }
+  }
+
+  handleEnvCheck = (env) => {
+    const index = this.state.envs.indexOf(env);
+    if (index !== -1) {
+      this.state.envs.splice(index, 1);
+    } else {
+      this.state.envs.push(env);
+    }
+    this.setState({envs: this.state.envs})
+  };
+
+  handleNext = () => {
+    this.setState({page: this.state.page + 1, loading: true});
+    const envs = this.state.envs.map(x => x.id);
+    http.post('/api/config/diff/', {type: store.type, o_id: store.id, envs})
+      .then(res => this.setState({records: res}))
+      .finally(() => this.setState({loading: false}))
+  };
+
+  getColumns = () => {
+    const columns = [{title: 'Key', dataIndex: 'key'}];
+    for (let env of this.state.envs) {
+      columns.push({title: `${env.name} (${env.key})`, dataIndex: env.id})
+    }
+    return columns
+  };
+
+  render() {
+    let records = this.state.records;
+    const {loading, envs, page, hideSame} = this.state;
+    if (hideSame) {
+      records = records.filter(item => new Set(envs.map(x => item[x.id])).size !== 1)
+    }
+    return (
+      <Modal
+        visible
+        width={1000}
+        maskClosable={false}
+        title="对比配置"
+        onCancel={() => store.diffVisible = false}
+        footer={null}>
+        <div style={{display: page === 0 ? 'block' : 'none'}}>
+          <Alert style={{width: 500, margin: '10px auto 20px', color: '#31708f !important'}} type="info"
+                 message="Tips: 通过对比配置功能，可以查看多个环境间的配置差异"/>
+          <Form.Item labelCol={{span: 6}} wrapperCol={{span: 14, offset: 1}} label="要对比的环境">
+            {envStore.records.map((item, index) => (
+              <Row
+                key={item.id}
+                onClick={() => this.handleEnvCheck(item)}
+                style={{cursor: 'pointer', borderTop: index ? '1px solid #e8e8e8' : ''}}>
+                <Col span={2}><Checkbox checked={envs.map(x => x.id).includes(item.id)}/></Col>
+                <Col span={3}>{item.key}</Col>
+                <Col span={4}>{item.name}</Col>
+                <Col span={15}>{item.desc}</Col>
+              </Row>
+            ))}
+          </Form.Item>
+          <Form.Item labelCol={{span: 6}} wrapperCol={{span: 14, offset: 7}}>
+            <Button disabled={envs.length < 2} type="primary" onClick={this.handleNext}>下一步</Button>
+          </Form.Item>
+        </div>
+        <div style={{display: page === 1 ? 'block' : 'none'}}>
+          <Button type="link" icon="arrow-left" style={{marginRight: 20}}
+                  onClick={() => this.setState({page: page - 1})}>上一步</Button>
+          <Checkbox checked={hideSame} onChange={() => this.setState({hideSame: !hideSame})}>隐藏相同配置</Checkbox>
+          <Table pagination={false} dataSource={records} loading={loading} columns={this.getColumns()}/>
+        </div>
+      </Modal>
+    )
+  }
+}
+
+export default Record

spug_web/src/pages/config/setting/Record.js

@@ -16,7 +16,7 @@ class Record extends React.Component {
   }
 
   componentDidMount() {
-    const formData = {type: store.type, id: store.id, env_id: store.env.id};
+    const formData = {type: store.type, o_id: store.id, env_id: store.env.id};
     http.post('/api/config/history/', formData)
       .then(res => this.setState({records: res}))
       .finally(() => this.setState({loading: false}))

spug_web/src/pages/config/setting/index.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Menu, Input, Button, Select, Icon } from 'antd';
+import { Menu, Input, Button, Select, PageHeader, Icon } from 'antd';
 import envStore from '../environment/store';
 import styles from './index.module.css';
+import history from 'libs/history';
 import { SearchForm } from 'components';
+import DiffConfig from './DiffConfig';
 import TableView from './TableView';
 import TextView from './TextView';
 import JSONView from './JSONView';
@@ -38,7 +40,7 @@ class Index extends React.Component {
   };
 
   handleRefresh = () => {
-     store.fetchRecords().then(() => {
+    store.fetchRecords().then(() => {
       if (this.textView) this.textView.updateValue();
       if (this.JSONView) this.JSONView.updateValue();
     })
@@ -49,6 +51,11 @@ class Index extends React.Component {
     return (
       <div className={styles.container}>
         <div className={styles.left}>
+          <PageHeader
+            title="环境列表"
+            style={{padding: '0 0 10px 10px'}}
+            onBack={() => history.goBack()}
+            extra={<Button type="link" icon="diff" onClick={store.showDiff}>对比配置</Button>}/>
           <Menu
             mode="inline"
             selectedKeys={[String(store.env.id)]}
@@ -63,9 +70,9 @@ class Index extends React.Component {
           <SearchForm>
             <SearchForm.Item span={5} title="视图">
               <Select value={view} style={{width: '100%'}} onChange={v => this.setState({view: v})}>
-                <Select.Option value="1"><Icon type="table" style={{marginRight: 10}} />表格</Select.Option>
-                <Select.Option value="2"><Icon type="unordered-list" style={{marginRight: 10}} />文本</Select.Option>
-                <Select.Option value="3"><Icon type="number" style={{marginRight: 10}} />JSON</Select.Option>
+                <Select.Option value="1"><Icon type="table" style={{marginRight: 10}}/>表格</Select.Option>
+                <Select.Option value="2"><Icon type="unordered-list" style={{marginRight: 10}}/>文本</Select.Option>
+                <Select.Option value="3"><Icon type="number" style={{marginRight: 10}}/>JSON</Select.Option>
               </Select>
             </SearchForm.Item>
             <SearchForm.Item span={7} title="Key">
@@ -83,11 +90,12 @@ class Index extends React.Component {
             </SearchForm.Item>
           </SearchForm>
 
-          {view === '1' && <TableView />}
-          {view === '2' && <TextView ref={ref => this.textView = ref} />}
-          {view === '3' && <JSONView ref={ref => this.JSONView = ref} />}
+          {view === '1' && <TableView/>}
+          {view === '2' && <TextView ref={ref => this.textView = ref}/>}
+          {view === '3' && <JSONView ref={ref => this.JSONView = ref}/>}
         </div>
-        {store.recordVisible && <Record />}
+        {store.recordVisible && <Record/>}
+        {store.diffVisible && <DiffConfig/>}
       </div>
     )
   }

spug_web/src/pages/config/setting/index.module.css

@@ -4,11 +4,11 @@
     padding: 16px 0;
 }
 .left {
-    flex: 2;
+    width: 250px;
     border-right: 1px solid #e8e8e8;
 }
 .right {
-    flex: 9;
+    flex: 1;
     padding: 8px 40px;
 }
 

spug_web/src/pages/config/setting/store.js

@@ -10,6 +10,7 @@ class Store {
   @observable isFetching = false;
   @observable formVisible = false;
   @observable recordVisible = false;
+  @observable diffVisible = false;
 
   @observable f_name;
 
@@ -28,6 +29,10 @@ class Store {
 
   showRecord = () => {
     this.recordVisible = true
+  };
+
+  showDiff = () => {
+    this.diffVisible = true
   }
 }