diff --git a/spug_web/src/pages/deploy/app/AddSelect.js b/spug_web/src/pages/deploy/app/AddSelect.js index c38bb90..4db9ca4 100644 --- a/spug_web/src/pages/deploy/app/AddSelect.js +++ b/spug_web/src/pages/deploy/app/AddSelect.js @@ -5,7 +5,8 @@ */ import React from 'react'; import { observer } from 'mobx-react'; -import { Modal, Card, Icon } from 'antd'; +import { BuildOutlined, OrderedListOutlined } from '@ant-design/icons'; +import { Modal, Card } from 'antd'; import store from './store'; import styles from './index.module.css'; @@ -58,7 +59,7 @@ class AddSelect extends React.Component { bodyStyle={{display: 'flex'}} onClick={this.switchExt1}>
- +
常规发布
@@ -72,7 +73,7 @@ class AddSelect extends React.Component { bodyStyle={{display: 'flex'}} onClick={this.switchExt2}>
- +
自定义发布
diff --git a/spug_web/src/pages/deploy/app/CloneConfirm.js b/spug_web/src/pages/deploy/app/CloneConfirm.js index dc742fc..2d139ce 100644 --- a/spug_web/src/pages/deploy/app/CloneConfirm.js +++ b/spug_web/src/pages/deploy/app/CloneConfirm.js @@ -49,7 +49,7 @@ class CloneConfirm extends React.Component { render() { const options = this.handleData(Object.values(toJS(store.records))); return ( -
+ - - + + - - + + 新建环境 - + info['git_repo'] = e.target.value} @@ -58,20 +58,21 @@ export default observer(function Ext1Setup1() { 钉钉收不到通知？ }> - info['rst_notify']['mode'] = v}> - 关闭 - 钉钉 - 企业微信 - Webhook - - )} - disabled={store.isReadOnly || info['rst_notify']['mode'] === '0'} - value={info['rst_notify']['value']} - onChange={e => info['rst_notify']['value'] = e.target.value} - placeholder="请输入"/> + info['rst_notify']['mode'] = v}> + 关闭 + 钉钉 + 企业微信 + Webhook + + )} + disabled={store.isReadOnly || info['rst_notify']['mode'] === '0'} + value={info['rst_notify']['value']} + onChange={e => info['rst_notify']['value'] = e.target.value} + placeholder="请输入"/> diff --git a/spug_web/src/pages/deploy/app/Ext1Setup3.js b/spug_web/src/pages/deploy/app/Ext1Setup3.js index c22d323..4f5cfc6 100644 --- a/spug_web/src/pages/deploy/app/Ext1Setup3.js +++ b/spug_web/src/pages/deploy/app/Ext1Setup3.js @@ -5,7 +5,8 @@ */ import React from 'react'; import { observer } from 'mobx-react'; -import { Form, Row, Col, Button, Radio, Icon, Tooltip, message } from "antd"; +import { GitlabOutlined, InfoCircleOutlined, SettingOutlined, SwapOutlined } from '@ant-design/icons'; +import { Form, Row, Col, Button, Radio, Tooltip, message } from 'antd'; import { LinkButton } from 'components'; import Editor from 'react-ace'; import 'ace-builds/src-noconflict/mode-text'; @@ -51,9 +52,17 @@ class Ext1Setup3 extends React.Component { }, () => this.setState({loading: false})) }; + handleFullscreen = (id) => { + if (this.state.full) { + this.setState({full: ''}) + } else { + this.setState({full: id}) + } + } + FilterLabel = (props) => ( -
- 文件过滤: +
+
文件过滤 :
store.deploy['filter_rule']['type'] = e.target.value}> 包含 - + 排除 - + - {this.state.full === '1' ? ( - this.setState({full: ''})}>退出全屏 - ) : ( - this.setState({full: '1'})}>全屏 - )} +
+ this.handleFullscreen('1')}>{this.state.full ? '退出全屏' : '全屏'} +
); NormalLabel = (props) => ( -
- - {props.title}: - - - - - {this.state.full ? ( - this.setState({full: ''})}>退出全屏 - ) : ( - this.setState({full: props.id})}>全屏 - )} +
+
{props.title} :
+ + + +
+ this.handleFullscreen(props.id)}>{this.state.full ? '退出全屏' : '全屏'} +
); @@ -101,10 +104,8 @@ class Ext1Setup3 extends React.Component { - }> +
+ info['filter_rule']['data'] = cleanCommand(v)} style={{border: '1px solid #e8e8e8'}}/> - - }> +
+
+ info['hook_pre_server'] = cleanCommand(v)} style={{border: '1px solid #e8e8e8'}}/> - - }> +
+
+ info['hook_pre_host'] = cleanCommand(v)} style={{border: '1px solid #e8e8e8'}}/> - +
- + 基础设置
- + 检出代码
- + 版本切换
- }> +
+ info['custom_envs'] = cleanCommand(v)} style={{border: '1px solid #e8e8e8'}}/> - - }> +
+
+ info['hook_post_server'] = cleanCommand(v)} style={{border: '1px solid #e8e8e8'}}/> - - }> +
+
+ info['hook_post_host'] = cleanCommand(v)} style={{border: '1px solid #e8e8e8'}}/> - +
diff --git a/spug_web/src/pages/deploy/app/Ext2Setup1.js b/spug_web/src/pages/deploy/app/Ext2Setup1.js index 0c6c00f..2f1ad84 100644 --- a/spug_web/src/pages/deploy/app/Ext2Setup1.js +++ b/spug_web/src/pages/deploy/app/Ext2Setup1.js @@ -6,7 +6,7 @@ import React, { useState, useEffect } from 'react'; import { observer } from 'mobx-react'; import { Link } from 'react-router-dom'; -import { Switch, Col, Form, Select, Button, Input } from "antd"; +import { Form, Switch, Select, Button, Input } from "antd"; import envStore from 'pages/config/environment/store'; import store from './store'; @@ -29,17 +29,17 @@ export default observer(function Ext2Setup1() { const info = store.deploy; return ( - - + + - - + + 新建环境 - + 钉钉收不到通知？ }> - info['rst_notify']['mode'] = v}> - 关闭 - 钉钉 - 企业微信 - Webhook - - )} - disabled={store.isReadOnly || info['rst_notify']['mode'] === '0'} - value={info['rst_notify']['value']} - onChange={e => info['rst_notify']['value'] = e.target.value} - placeholder="请输入"/> + info['rst_notify']['mode'] = v}> + 关闭 + 钉钉 + 企业微信 + Webhook + + )} + disabled={store.isReadOnly || info['rst_notify']['mode'] === '0'} + value={info['rst_notify']['value']} + onChange={e => info['rst_notify']['value'] = e.target.value} + placeholder="请输入"/> diff --git a/spug_web/src/pages/deploy/app/Ext2Setup3.js b/spug_web/src/pages/deploy/app/Ext2Setup3.js index cb86f0f..0a9ec1d 100644 --- a/spug_web/src/pages/deploy/app/Ext2Setup3.js +++ b/spug_web/src/pages/deploy/app/Ext2Setup3.js @@ -5,7 +5,8 @@ */ import React from 'react'; import { observer } from 'mobx-react'; -import { Form, Input, Button, message, Divider, Alert, Icon, Select } from 'antd'; +import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'; +import { Form, Input, Button, message, Divider, Alert, Select } from 'antd'; import Editor from 'react-ace'; import 'ace-builds/src-noconflict/mode-sh'; import 'ace-builds/src-noconflict/theme-tomorrow'; @@ -81,7 +82,7 @@ class Ext2Setup3 extends React.Component { {!store.isReadOnly && (
server_actions.splice(index, 1)}> - 移除 + 移除
)}
@@ -89,7 +90,7 @@ class Ext2Setup3 extends React.Component { {!store.isReadOnly && ( )} @@ -159,7 +160,7 @@ class Ext2Setup3 extends React.Component { )} {!store.isReadOnly && (
host_actions.splice(index, 1)}> - 移除 + 移除
)}
@@ -167,14 +168,15 @@ class Ext2Setup3 extends React.Component { {!store.isReadOnly && ( )} diff --git a/spug_web/src/pages/deploy/app/Form.js b/spug_web/src/pages/deploy/app/Form.js index d62337a..51dbe81 100644 --- a/spug_web/src/pages/deploy/app/Form.js +++ b/spug_web/src/pages/deploy/app/Form.js @@ -3,65 +3,48 @@ * Copyright (c) * Released under the AGPL-3.0 License. */ -import React from 'react'; +import React, { useState } 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, - } - } +export default observer(function () { + const [form] = Form.useForm(); + const [loading, setLoading] = useState(false); - handleSubmit = () => { - this.setState({loading: true}); - const formData = this.props.form.getFieldsValue(); + function handleSubmit() { + setLoading(true); + const formData = 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']})( - - )} - - - - ) + }, () => setLoading(false)) } -} -export default Form.create()(ComForm) + return ( + store.formVisible = false} + confirmLoading={loading} + onOk={handleSubmit}> +
+ + + + + + + + + +
+ + ) +}) \ No newline at end of file diff --git a/spug_web/src/pages/deploy/app/Table.js b/spug_web/src/pages/deploy/app/Table.js index 5812aaf..c000872 100644 --- a/spug_web/src/pages/deploy/app/Table.js +++ b/spug_web/src/pages/deploy/app/Table.js @@ -4,12 +4,19 @@ * Released under the AGPL-3.0 License. */ import React from 'react'; -import { toJS } from 'mobx'; import { observer } from 'mobx-react'; -import { Table, Modal, Tag, Icon, Divider, message } from 'antd'; +import { + BuildOutlined, + DownSquareOutlined, + ExclamationCircleOutlined, + OrderedListOutlined, + UpSquareOutlined, + PlusOutlined +} from '@ant-design/icons'; +import { Table, Modal, Tag, Divider, message } from 'antd'; import { http, hasPermission } from 'libs'; import store from './store'; -import { Action } from "components"; +import { Action, TableCard, AuthButton } from "components"; import CloneConfirm from './CloneConfirm'; import envStore from 'pages/config/environment/store'; import lds from 'lodash'; @@ -32,7 +39,7 @@ class ComTable extends React.Component { e.stopPropagation(); this.cloneObj = null; Modal.confirm({ - icon: 'exclamation-circle', + icon: , title: '选择克隆对象', content: this.cloneObj = v[1]}/>, onOk: () => { @@ -88,49 +95,51 @@ class ComTable extends React.Component { store.loadDeploys(record.id) } - return - value === '1' ? - : - }/> - lds.get(envStore.idMap, `${value}.name`)}/> - `${value.length} 台`}/> - value ? 开启 : 关闭}/> - {hasPermission('deploy.app.config|deploy.app.edit') && ( - ( - - store.showExtForm(e, record.id, info, false, true)}>查看 - store.showExtForm(e, record.id, info)}>编辑 - this.handleDeployDelete(info)}>删除 - - )}/> - )} -
- }; - - render() { - let data = Object.values(toJS(store.records)); - if (store.f_name) { - data = data.filter(item => item['name'].toLowerCase().includes(store.f_name.toLowerCase())) - } - if (store.f_desc) { - data = data.filter(item => item['desc'] && item['desc'].toLowerCase().includes(store.f_desc.toLowerCase())) - } - return ( + value === '1' ? + : + }/> + lds.get(envStore.idMap, `${value}.name`)}/> + `${value.length} 台`}/> + value ? 开启 : 关闭}/> + {hasPermission('deploy.app.config|deploy.app.edit') && ( + ( + + store.showExtForm(e, record.id, info, false, true)}>查看 + store.showExtForm(e, record.id, info)}>编辑 + this.handleDeployDelete(info)}>删除 + + )}/> + )} +
+ ) + }; + + render() { + return ( + } + onClick={() => store.showForm()}>新建 + ]} pagination={{ showSizeChanger: true, showLessItems: true, @@ -140,11 +149,13 @@ class ComTable extends React.Component { }}> (
- this.handleSort(e, info, 'up')} type="up-square" - style={{cursor: 'pointer', color: '#1890ff'}}/> + this.handleSort(e, info, 'up')} + style={{cursor: 'pointer', color: '#1890ff'}}/> - this.handleSort(e, info, 'down')} type="down-square" - style={{cursor: 'pointer', color: '#1890ff'}}/> + this.handleSort(e, info, 'down')} + style={{cursor: 'pointer', color: '#1890ff'}}/>
)}/> @@ -160,7 +171,7 @@ class ComTable extends React.Component { )}/> )} - + ) } } diff --git a/spug_web/src/pages/deploy/app/index.js b/spug_web/src/pages/deploy/app/index.js index cdfa06d..65e4e45 100644 --- a/spug_web/src/pages/deploy/app/index.js +++ b/spug_web/src/pages/deploy/app/index.js @@ -5,8 +5,8 @@ */ import React from 'react'; import { observer } from 'mobx-react'; -import { Input, Button } from 'antd'; -import { SearchForm, AuthDiv, AuthCard } from 'components'; +import { Input } from 'antd'; +import { SearchForm, AuthDiv, Breadcrumb } from 'components'; import ComTable from './Table'; import ComForm from './Form'; import Ext1Form from './Ext1Form'; @@ -16,26 +16,25 @@ import store from './store'; export default observer(function () { return ( - + + + 首页 + 应用发布 + 应用管理 + - + store.f_name = e.target.value} placeholder="请输入"/> - + store.f_desc = e.target.value} placeholder="请输入"/> - - - - - - {store.formVisible && } {store.addVisible && } {store.ext1Visible && } {store.ext2Visible && } - - ) + + ); }) diff --git a/spug_web/src/pages/deploy/app/store.js b/spug_web/src/pages/deploy/app/store.js index 732bd11..fd219ef 100644 --- a/spug_web/src/pages/deploy/app/store.js +++ b/spug_web/src/pages/deploy/app/store.js @@ -3,7 +3,7 @@ * Copyright (c) * Released under the AGPL-3.0 License. */ -import { observable, computed } from "mobx"; +import { observable, computed, toJS } from 'mobx'; import http from 'libs/http'; class Store { @@ -22,6 +22,13 @@ class Store { @observable f_name; @observable f_desc; + @computed get dataSource() { + let records = Object.values(toJS(this.records)); + if (this.f_name) records = records.filter(x => x.name.toLowerCase().includes(this.f_name.toLowerCase())); + if (this.f_desc) records = records.filter(x => x.desc && x.desc.toLowerCase().includes(this.f_desc.toLowerCase())); + return records + } + @computed get currentRecord() { return this.records[`a${this.app_id}`] }