mirror of https://github.com/openspug/spug
92 lines
3.3 KiB
JavaScript
92 lines
3.3 KiB
JavaScript
/**
|
||
* Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
|
||
* Copyright (c) <spug.dev@gmail.com>
|
||
* Released under the AGPL-3.0 License.
|
||
*/
|
||
import React, { useState, useEffect } from 'react';
|
||
import { Link } from 'react-router-dom';
|
||
import { observer } from 'mobx-react';
|
||
import { Modal, Menu, Spin, Input } from 'antd';
|
||
import { OrderedListOutlined, BuildOutlined, SearchOutlined } from '@ant-design/icons';
|
||
import { includes, http } from 'libs';
|
||
import styles from './index.module.less';
|
||
import envStore from 'pages/config/environment/store';
|
||
import lds from 'lodash';
|
||
|
||
export default observer(function AppSelector(props) {
|
||
const [fetching, setFetching] = useState(false);
|
||
const [env_id, setEnvId] = useState();
|
||
const [search, setSearch] = useState();
|
||
const [deploys, setDeploys] = useState([]);
|
||
|
||
useEffect(() => {
|
||
setFetching(true);
|
||
http.get('/api/app/deploy/')
|
||
.then(res => setDeploys(res))
|
||
.finally(() => setFetching(false))
|
||
if (!envStore.records.length) {
|
||
envStore.fetchRecords().then(_initEnv)
|
||
} else {
|
||
_initEnv()
|
||
}
|
||
}, [])
|
||
|
||
function _initEnv() {
|
||
if (envStore.records.length) {
|
||
setEnvId(envStore.records[0].id)
|
||
}
|
||
}
|
||
|
||
let records = deploys.filter(x => x.env_id === Number(env_id));
|
||
if (search) records = records.filter(x => includes(x['app_name'], search) || includes(x['app_key'], search));
|
||
if (props.filter) records = records.filter(x => props.filter(x));
|
||
return (
|
||
<Modal
|
||
visible={props.visible}
|
||
width={800}
|
||
maskClosable={false}
|
||
title="选择应用"
|
||
bodyStyle={{padding: 0}}
|
||
onCancel={props.onCancel}
|
||
footer={null}>
|
||
<div className={styles.appSelector}>
|
||
<div className={styles.left}>
|
||
<Spin spinning={envStore.isFetching}>
|
||
<Menu
|
||
mode="inline"
|
||
selectedKeys={[String(env_id)]}
|
||
style={{border: 'none'}}
|
||
items={envStore.records.map(x => ({key: x.id, label: x.name, title: x.name}))}
|
||
onSelect={({selectedKeys}) => setEnvId(selectedKeys[0])}/>
|
||
</Spin>
|
||
</div>
|
||
|
||
<div className={styles.right}>
|
||
<Spin spinning={fetching}>
|
||
<div className={styles.title}>
|
||
<div className={styles.text}>{lds.get(envStore.idMap, `${env_id}.name`)}</div>
|
||
<Input
|
||
allowClear
|
||
style={{width: 200}}
|
||
placeholder="请输入快速检索应用"
|
||
prefix={<SearchOutlined style={{color: 'rgba(0, 0, 0, 0.25)'}}/>}
|
||
onChange={e => setSearch(e.target.value)}/>
|
||
</div>
|
||
<div style={{height: 540, overflow: 'auto'}}>
|
||
{records.map(item => (
|
||
<div key={item.id} className={styles.appItem} onClick={() => props.onSelect(item)}>
|
||
{item.extend === '1' ? <OrderedListOutlined/> : <BuildOutlined/>}
|
||
<div className={styles.body}>{item.app_name}</div>
|
||
<div style={{color: '#999'}}>{item.app_key}</div>
|
||
</div>
|
||
))}
|
||
{records.length === 0 &&
|
||
<div className={styles.tips}>该环境下还没有可发布或构建的应用哦，快去<Link to="/deploy/app">应用管理</Link>创建应用发布配置吧。</div>}
|
||
</div>
|
||
</Spin>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
)
|
||
})
|