A web update

pull/22/head
雷二猛 2019-12-28 20:54:57 +08:00
parent 1b64090f89
commit c57b6d078a
7 changed files with 47 additions and 33 deletions

View File

@ -1,7 +1,7 @@
import React from 'react';
import { observer } from 'mobx-react';
import { Link } from 'react-router-dom';
import { Switch, Col, Form, Input, Select, Button } from "antd";
import { Switch, Col, Form, Select, Button } from "antd";
import envStore from 'pages/config/environment/store';
import store from './store';

View File

@ -28,9 +28,9 @@ class Store {
.finally(() => this.isFetching = false)
};
loadDeploys = (id) => {
http.get('/api/app/deploy/', {params: {id}})
.then(res => this.records[id]['deploys'] = res)
loadDeploys = (app_id) => {
http.get('/api/app/deploy/', {params: {app_id}})
.then(res => this.records[app_id]['deploys'] = res)
};
showForm = (info) => {

View File

@ -31,7 +31,7 @@ class Ext1Form extends React.Component {
fetchVersions = () => {
this.setState({fetching: true});
http.get(`/api/app/${store.record.app_id}/versions/`)
http.get(`/api/app/deploy/${store.record.deploy_id}/versions/`)
.then(res => {
this.setState({versions: res}, this._initExtra1);
})
@ -78,7 +78,7 @@ class Ext1Form extends React.Component {
const {git_type, extra1, extra2} = this.state;
const formData = this.props.form.getFieldsValue();
formData['id'] = store.record.id;
formData['app_id'] = store.record.app_id;
formData['deploy_id'] = store.record.deploy_id;
formData['host_ids'] = this.state.host_ids;
formData['extra'] = [git_type, extra1, extra2];
http.post('/api/deploy/request/', formData)

View File

@ -30,7 +30,7 @@ class Ext2Form extends React.Component {
this.setState({loading: true});
const formData = this.props.form.getFieldsValue();
formData['id'] = store.record.id;
formData['app_id'] = store.record.app_id;
formData['deploy_id'] = store.record.deploy_id;
formData['extra'] = [formData['extra']];
formData['host_ids'] = this.state.host_ids;
http.post('/api/deploy/request/', formData)

View File

@ -1,11 +1,10 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { observer } from 'mobx-react';
import { Modal, Button, Menu, Icon } from 'antd';
import { Modal, Button, Menu, Spin, Icon } from 'antd';
import store from './store';
import styles from './index.module.css';
import envStore from 'pages/config/environment/store';
import appStore from '../app/store';
import lds from 'lodash';
@observer
@ -23,8 +22,8 @@ class SelectApp extends React.Component {
} else {
this._initEnv()
}
if (appStore.records.length === 0) {
appStore.fetchRecords()
if (store.deploys.length === 0) {
store.loadDeploys()
}
}
@ -34,9 +33,9 @@ class SelectApp extends React.Component {
}
};
handleClick = (app) => {
store.record = {app_id: app.id, app_host_ids: app.host_ids};
if (app.extend === '1') {
handleClick = (deploy) => {
store.record = {deploy_id: deploy.id, app_host_ids: deploy.host_ids};
if (deploy.extend === '1') {
store.ext1Visible = true
} else {
store.ext2Visible = true
@ -46,7 +45,7 @@ class SelectApp extends React.Component {
render() {
const {env_id} = this.state;
const records = appStore.records.filter(x => String(x.env_id) === env_id);
const records = store.deploys.filter(x => x.env_id === Number(env_id));
return (
<Modal
visible
@ -58,25 +57,31 @@ class SelectApp extends React.Component {
footer={null}>
<div className={styles.container}>
<div className={styles.left}>
<Menu
mode="inline"
selectedKeys={[String(env_id)]}
style={{border: 'none'}}
onSelect={({selectedKeys}) => this.setState({env_id: selectedKeys[0]})}>
{envStore.records.map(item => <Menu.Item key={item.id}>{item.name}</Menu.Item>)}
</Menu>
<Spin spinning={envStore.isFetching}>
<Menu
mode="inline"
selectedKeys={[String(env_id)]}
style={{border: 'none'}}
onSelect={({selectedKeys}) => this.setState({env_id: selectedKeys[0]})}>
{envStore.records.map(item => <Menu.Item key={item.id}>{item.name}</Menu.Item>)}
</Menu>
</Spin>
</div>
<div className={styles.right}>
<div className={styles.title}>{lds.get(envStore.idMap, `${env_id}.name`)}</div>
{records.map(item => (
<Button key={item.id} type="primary" className={styles.appBlock} onClick={() => this.handleClick(item)}>
<div style={{width: 135, overflow: 'hidden', textOverflow: 'ellipsis'}}>
<Icon type={item.extend === '1' ? 'ordered-list' : 'build'} style={{marginRight: 10}}/>{item.name}
</div>
</Button>
))}
{records.length === 0 &&
<div className={styles.tips}>该环境下还没有可发布的应用哦快去<Link to="/deploy/app">应用管理</Link></div>}
<Spin spinning={store.isLoading}>
<div className={styles.title}>{lds.get(envStore.idMap, `${env_id}.name`)}</div>
{records.map(item => (
<Button key={item.id} type="primary" className={styles.appBlock} onClick={() => this.handleClick(item)}>
<div style={{width: 135, overflow: 'hidden', textOverflow: 'ellipsis'}}>
<Icon type={item.extend === '1' ? 'ordered-list' : 'build'}
style={{marginRight: 10}}/>{item['app_name']}
</div>
</Button>
))}
{records.length === 0 &&
<div className={styles.tips}>该环境下还没有可发布的应用哦快去<Link to="/deploy/app">应用管理</Link></div>}
</Spin>
</div>
</div>
</Modal>

View File

@ -143,7 +143,7 @@ class ComTable extends React.Component {
title: '删除确认',
content: `确定要删除【${info['name']}】?`,
onOk: () => {
return http.delete('/api/exec/template/', {params: {id: info.id}})
return http.delete('/api/deploy/request/', {params: {id: info.id}})
.then(() => {
message.success('删除成功');
store.fetchRecords()

View File

@ -3,8 +3,10 @@ import http from 'libs/http';
class Store {
@observable records = [];
@observable deploys = [];
@observable types = [];
@observable record = {};
@observable isLoading = false;
@observable isFetching = false;
@observable addVisible = false;
@observable ext1Visible = false;
@ -21,6 +23,13 @@ class Store {
.finally(() => this.isFetching = false)
};
loadDeploys = () => {
this.isLoading = true;
http.get('/api/app/deploy/')
.then(res => this.deploys = res)
.finally(() => this.isLoading = false)
};
showForm = (info) => {
this.record = info;
if (info['app_extend'] === '1') {