A web update

pull/22/head
雷二猛 2019-12-08 17:57:29 +08:00
parent 5235c5a37e
commit d1d642fba7
5 changed files with 117 additions and 12 deletions

View File

@ -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

View File

@ -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}))

View File

@ -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>
)
}

View File

@ -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;
}

View File

@ -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
}
}