From 1a039f212afa165c0c4b893d97c610431ceb152f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9B=B7=E4=BA=8C=E7=8C=9B?= Date: Sat, 28 Dec 2019 22:28:07 +0800 Subject: [PATCH] A web update --- spug_api/apps/app/views.py | 2 +- spug_web/src/menus.js | 3 +- spug_web/src/pages/config/app/Form.js | 62 ++++++++++++++++ spug_web/src/pages/config/app/Table.js | 72 +++++++++++++++++++ spug_web/src/pages/config/app/index.js | 25 +++++++ spug_web/src/pages/config/app/store.js | 25 +++++++ spug_web/src/pages/config/routes.js | 2 + spug_web/src/pages/config/setting/Form.js | 11 ++- .../src/pages/config/setting/TableView.js | 15 +++- spug_web/src/pages/config/setting/index.js | 2 +- 10 files changed, 212 insertions(+), 7 deletions(-) create mode 100644 spug_web/src/pages/config/app/Form.js create mode 100644 spug_web/src/pages/config/app/Table.js create mode 100644 spug_web/src/pages/config/app/index.js create mode 100644 spug_web/src/pages/config/app/store.js diff --git a/spug_api/apps/app/views.py b/spug_api/apps/app/views.py index 45013fe..2f34122 100644 --- a/spug_api/apps/app/views.py +++ b/spug_api/apps/app/views.py @@ -35,7 +35,7 @@ class AppView(View): ).parse(request.GET) if error is None: if Deploy.objects.filter(app_id=form.id).exists(): - return json_response(error='该应用已存在关联的发布配置，请删除相关配置后再尝试删除') + return json_response(error='该应用在应用发布中已存在关联的发布配置，请删除相关发布配置后再尝试删除') if Config.objects.filter(type='app', o_id=form.id).exists(): return json_response(error='该应用在配置中心已存在关联的配置信息，请删除相关配置后再尝试删除') App.objects.filter(pk=form.id).delete() diff --git a/spug_web/src/menus.js b/spug_web/src/menus.js index 9742a52..5ef539e 100644 --- a/spug_web/src/menus.js +++ b/spug_web/src/menus.js @@ -17,7 +17,8 @@ export default [ { icon: 'deployment-unit', title: '配置中心', child: [ {title: '环境管理', path: '/config/environment'}, - {title: '服务管理', path: '/config/service'}, + {title: '服务配置', path: '/config/service'}, + {title: '应用配置', path: '/config/app'}, ] }, {icon: 'monitor', title: '监控中心', path: '/monitor'}, diff --git a/spug_web/src/pages/config/app/Form.js b/spug_web/src/pages/config/app/Form.js new file mode 100644 index 0000000..85187d8 --- /dev/null +++ b/spug_web/src/pages/config/app/Form.js @@ -0,0 +1,62 @@ +import React from 'react'; +import { observer } from 'mobx-react'; +import { Modal, Form, Input, message } from 'antd'; +import http from 'libs/http'; +import store from './store'; + +@observer +class ComForm extends React.Component { + constructor(props) { + super(props); + this.state = { + loading: false, + } + } + + handleSubmit = () => { + this.setState({loading: true}); + const formData = this.props.form.getFieldsValue(); + formData['id'] = store.record.id; + http.post('/api/app/', formData) + .then(res => { + message.success('操作成功'); + store.formVisible = false; + store.fetchRecords() + }, () => this.setState({loading: false})) + }; + + render() { + const info = store.record; + const {getFieldDecorator} = this.props.form; + return ( + store.formVisible = false} + confirmLoading={this.state.loading} + onOk={this.handleSubmit}> +
+ + {getFieldDecorator('name', {initialValue: info['name']})( + + )} + + + {getFieldDecorator('key', {initialValue: info['key']})( + + )} + + + {getFieldDecorator('desc', {initialValue: info['desc']})( + + )} + +
+ + ) + } +} + +export default Form.create()(ComForm) \ No newline at end of file diff --git a/spug_web/src/pages/config/app/Table.js b/spug_web/src/pages/config/app/Table.js new file mode 100644 index 0000000..a260c2b --- /dev/null +++ b/spug_web/src/pages/config/app/Table.js @@ -0,0 +1,72 @@ +import React from 'react'; +import { observer } from 'mobx-react'; +import { Link } from 'react-router-dom'; +import { Table, Divider, Modal, message } from 'antd'; +import ComForm from './Form'; +import http from 'libs/http'; +import store from './store'; +import { LinkButton } from "components"; + +@observer +class ComTable extends React.Component { + componentDidMount() { + store.fetchRecords() + } + + columns = [{ + title: '序号', + key: 'series', + render: (_, __, index) => index + 1, + width: 80, + }, { + title: '应用名称', + dataIndex: 'name', + }, { + title: '标识符', + dataIndex: 'key', + }, { + title: '描述信息', + dataIndex: 'desc', + ellipsis: true + }, { + title: '操作', + render: info => ( + + store.showForm(info)}>编辑 + + this.handleDelete(info)}>删除 + + 配置 + + ) + }]; + + handleDelete = (text) => { + Modal.confirm({ + title: '删除确认', + content: `确定要删除【${text['name']}】?`, + onOk: () => { + return http.delete('/api/app/', {params: {id: text.id}}) + .then(() => { + message.success('删除成功'); + store.fetchRecords() + }) + } + }) + }; + + render() { + let data = store.records; + if (store.f_name) { + data = data.filter(item => item['name'].toLowerCase().includes(store.f_name.toLowerCase())) + } + return ( + + + {store.formVisible && } + + ) + } +} + +export default ComTable \ No newline at end of file diff --git a/spug_web/src/pages/config/app/index.js b/spug_web/src/pages/config/app/index.js new file mode 100644 index 0000000..f7eeef5 --- /dev/null +++ b/spug_web/src/pages/config/app/index.js @@ -0,0 +1,25 @@ +import React from 'react'; +import { observer } from 'mobx-react'; +import { Card, Input, Button } from 'antd'; +import { SearchForm } from 'components'; +import ComTable from './Table'; +import store from './store'; + +export default observer(function () { + return ( + + + + store.f_name = e.target.value} placeholder="请输入"/> + + + + + +
+ +
+ + + ) +}) \ No newline at end of file diff --git a/spug_web/src/pages/config/app/store.js b/spug_web/src/pages/config/app/store.js new file mode 100644 index 0000000..196dd4d --- /dev/null +++ b/spug_web/src/pages/config/app/store.js @@ -0,0 +1,25 @@ +import { observable } from "mobx"; +import http from 'libs/http'; + +class Store { + @observable records = []; + @observable record = {}; + @observable isFetching = false; + @observable formVisible = false; + + @observable f_name; + + fetchRecords = () => { + this.isFetching = true; + http.get('/api/app/') + .then(res => this.records = res) + .finally(() => this.isFetching = false) + }; + + showForm = (info = {}) => { + this.formVisible = true; + this.record = info + } +} + +export default new Store() \ No newline at end of file diff --git a/spug_web/src/pages/config/routes.js b/spug_web/src/pages/config/routes.js index e315ebb..99201ac 100644 --- a/spug_web/src/pages/config/routes.js +++ b/spug_web/src/pages/config/routes.js @@ -1,11 +1,13 @@ import { makeRoute } from 'libs/router'; import Environment from './environment'; import Service from './service'; +import App from './app'; import Setting from './setting'; export default [ makeRoute('/environment', Environment), makeRoute('/service', Service), + makeRoute('/app', App), makeRoute('/setting/:type/:id', Setting), ] \ No newline at end of file diff --git a/spug_web/src/pages/config/setting/Form.js b/spug_web/src/pages/config/setting/Form.js index 3768745..938f6f3 100644 --- a/spug_web/src/pages/config/setting/Form.js +++ b/spug_web/src/pages/config/setting/Form.js @@ -1,6 +1,6 @@ import React from 'react'; import { observer } from 'mobx-react'; -import { Modal, Form, Input, Checkbox, Row, Col, message } from 'antd'; +import { Modal, Form, Input, Checkbox, Switch, Row, Col, message } from 'antd'; import http from 'libs/http'; import store from './store'; import envStore from '../environment/store' @@ -27,7 +27,7 @@ class ComForm extends React.Component { formData['type'] = store.type; formData['o_id'] = store.id; formData['envs'] = this.state.envs; - formData['is_public'] = true; + formData['is_public'] = store.type === 'src' ? true : formData['is_public']; request = http.post('/api/config/', formData) } request.then(res => { @@ -78,6 +78,13 @@ class ComForm extends React.Component { )} + {store.type === 'app' && ( + + {getFieldDecorator('is_public', {initialValue: info['is_public'] || true, valuePropName: 'checked'})( + + )} + + )} {envStore.records.map((item, index) => ( + + ; + columns = [{ title: 'Key', key: 'key', - render: info => {info.key} + render: info => { + let prefix = (store.type === 'app' && info.is_public === false) ? this.lockIcon : null; + let content = info.desc ? {info.key} : info.key; + return + {prefix} + {content} + + } }, { title: 'Value', dataIndex: 'value', diff --git a/spug_web/src/pages/config/setting/index.js b/spug_web/src/pages/config/setting/index.js index d03e9b1..60d1988 100644 --- a/spug_web/src/pages/config/setting/index.js +++ b/spug_web/src/pages/config/setting/index.js @@ -86,7 +86,7 @@ class Index extends React.Component { onClick={store.showRecord}>更改历史 - +