mirror of https://github.com/openspug/spug
120 lines
3.8 KiB
JavaScript
120 lines
3.8 KiB
JavaScript
/**
|
||
* Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
|
||
* Copyright (c) <spug.dev@gmail.com>
|
||
* Released under the MIT License.
|
||
*/
|
||
import React from 'react';
|
||
import { Link } from 'react-router-dom';
|
||
import { observer } from 'mobx-react';
|
||
import { Modal, Button, Menu, Spin, Icon, Input, Tooltip } from 'antd';
|
||
import store from './store';
|
||
import styles from './index.module.css';
|
||
import envStore from 'pages/config/environment/store';
|
||
import lds from 'lodash';
|
||
|
||
@observer
|
||
class SelectApp extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
env_id: 0,
|
||
search: ''
|
||
}
|
||
}
|
||
|
||
componentDidMount() {
|
||
store.loadDeploys();
|
||
if (envStore.records.length === 0) {
|
||
envStore.fetchRecords().then(this._initEnv)
|
||
} else {
|
||
this._initEnv()
|
||
}
|
||
}
|
||
|
||
componentWillUnmount() {
|
||
store.refs = {}
|
||
}
|
||
|
||
_initEnv = () => {
|
||
if (envStore.records.length) {
|
||
this.setState({env_id: envStore.records[0].id})
|
||
}
|
||
};
|
||
|
||
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
|
||
}
|
||
store.addVisible = false
|
||
};
|
||
|
||
handleRef = (el, id) => {
|
||
if (el && !store.refs.hasOwnProperty(id)) {
|
||
setTimeout(() => store.refs[id] = el.scrollWidth > el.clientWidth, 200)
|
||
}
|
||
};
|
||
|
||
render() {
|
||
const {env_id} = this.state;
|
||
let records = store.deploys.filter(x => x.env_id === Number(env_id));
|
||
if (this.state.search) {
|
||
records = records.filter(x => x['app_name'].toLowerCase().includes(this.state.search.toLowerCase()))
|
||
}
|
||
return (
|
||
<Modal
|
||
visible
|
||
width={800}
|
||
maskClosable={false}
|
||
title="选择应用"
|
||
bodyStyle={{padding: 0}}
|
||
onCancel={() => store.addVisible = false}
|
||
footer={null}>
|
||
<div className={styles.container}>
|
||
<div className={styles.left}>
|
||
<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}>
|
||
<Spin spinning={store.isLoading}>
|
||
<div className={styles.title}>
|
||
<div>{lds.get(envStore.idMap, `${env_id}.name`)}</div>
|
||
<Input.Search
|
||
allowClear
|
||
style={{width: 200}}
|
||
placeholder="请输入快速搜应用"
|
||
onChange={e => this.setState({search: e.target.value})}/>
|
||
</div>
|
||
{records.map(item => (
|
||
<Tooltip key={item.id} title={store.refs[item.id] ? item['app_name'] : null}>
|
||
<Button type="primary" className={styles.appBlock} onClick={() => this.handleClick(item)}>
|
||
<div ref={el => this.handleRef(el, item.id)}
|
||
style={{width: 135, overflow: 'hidden', textOverflow: 'ellipsis'}}>
|
||
<Icon type={item.extend === '1' ? 'ordered-list' : 'build'}
|
||
style={{marginRight: 10}}/>{item['app_name']}
|
||
</div>
|
||
</Button>
|
||
</Tooltip>
|
||
))}
|
||
{records.length === 0 &&
|
||
<div className={styles.tips}>该环境下还没有可发布的应用哦，快去<Link to="/deploy/app">应用管理</Link>创建应用发布配置吧。</div>}
|
||
</Spin>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
)
|
||
}
|
||
}
|
||
|
||
export default SelectApp
|