github
/
spug
mirror of https://github.com/openspug/spug
1
0
Fork 0
Code Issues Releases Wiki Activity

优化HostSelector组件

pull/605/head
vapao 2023-03-29 18:30:06 +08:00
parent c95c7fee5d
commit 7902a8727c
9 changed files with 49 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
spug_web/src/pages/deploy/app/Ext1Setup1.js
View File

@ -62,7 +62,7 @@ export default observer(function Ext1Setup1() {
</Form.Item> </Form.Item>
</Form.Item> </Form.Item>
<Form.Item required label="目标主机" tooltip="该发布配置作用于哪些目标主机。"> <Form.Item required label="目标主机" tooltip="该发布配置作用于哪些目标主机。">
<HostSelector value={info.host_ids} onChange={(_, ids) => info.host_ids = ids}/> <HostSelector value={info.host_ids} onChange={ids => info.host_ids = ids}/>
</Form.Item> </Form.Item>
<Form.Item required label="Git仓库地址" extra={<span className="btn" onClick={() => setVisible(true)}>私有仓库？</span>}> <Form.Item required label="Git仓库地址" extra={<span className="btn" onClick={() => setVisible(true)}>私有仓库？</span>}>
<Input disabled={store.isReadOnly} value={info['git_repo']} onChange={e => info['git_repo'] = e.target.value} <Input disabled={store.isReadOnly} value={info['git_repo']} onChange={e => info['git_repo'] = e.target.value}

2
spug_web/src/pages/deploy/app/Ext2Setup1.js
View File

@ -60,7 +60,7 @@ export default observer(function Ext2Setup1() {
</Form.Item> </Form.Item>
</Form.Item> </Form.Item>
<Form.Item required label="目标主机" tooltip="该发布配置作用于哪些目标主机。"> <Form.Item required label="目标主机" tooltip="该发布配置作用于哪些目标主机。">
<HostSelector value={info.host_ids} onChange={(_, ids) => info.host_ids = ids}/> <HostSelector value={info.host_ids} onChange={ids => info.host_ids = ids}/>
</Form.Item> </Form.Item>
<Form.Item label="发布模式" tooltip="串行即发布时一台完成后再发布下一台，期间出现异常则终止发布。并行则每个主机相互独立发布同时进行。"> <Form.Item label="发布模式" tooltip="串行即发布时一台完成后再发布下一台，期间出现异常则终止发布。并行则每个主机相互独立发布同时进行。">
<Radio.Group <Radio.Group

2
spug_web/src/pages/exec/task/index.js
View File

@ -87,7 +87,7 @@ function TaskIndex() {
<div className={style.index} hidden={store.showConsole}> <div className={style.index} hidden={store.showConsole}>
<Form layout="vertical" className={style.left}> <Form layout="vertical" className={style.left}>
<Form.Item required label="目标主机"> <Form.Item required label="目标主机">
<HostSelector type="button" value={store.host_ids} onChange={(_, ids) => store.host_ids = ids}/> <HostSelector type="button" value={store.host_ids} onChange={ids => store.host_ids = ids}/>
</Form.Item> </Form.Item>
<Form.Item required label="执行命令" style={{position: 'relative'}}> <Form.Item required label="执行命令" style={{position: 'relative'}}>

2
spug_web/src/pages/exec/template/Form.js
View File

@ -135,7 +135,7 @@ export default observer(function () {
<Button type="link" style={{padding: 0}} onClick={() => setParameter({})}>添加参数</Button> <Button type="link" style={{padding: 0}} onClick={() => setParameter({})}>添加参数</Button>
</Form.Item> </Form.Item>
<Form.Item label="目标主机"> <Form.Item label="目标主机">
<HostSelector value={info.host_ids} onChange={(_, ids) => info.host_ids = ids}/> <HostSelector value={info.host_ids} onChange={ids => info.host_ids = ids}/>
</Form.Item> </Form.Item>
<Form.Item name="desc" label="备注信息"> <Form.Item name="desc" label="备注信息">
<Input.TextArea placeholder="请输入模板备注信息"/> <Input.TextArea placeholder="请输入模板备注信息"/>

4
spug_web/src/pages/exec/transfer/index.js
View File

@ -120,7 +120,7 @@ function TransferIndex() {
<Card type="inner" title={`数据源${files.length ? `（${files.length}）` : ''}`} extra={(<Space size={24}> <Card type="inner" title={`数据源${files.length ? `（${files.length}）` : ''}`} extra={(<Space size={24}>
<Upload multiple beforeUpload={handleUpload}><Space <Upload multiple beforeUpload={handleUpload}><Space
className="btn"><UploadOutlined/>上传本地文件</Space></Upload> className="btn"><UploadOutlined/>上传本地文件</Space></Upload>
<HostSelector onlyOne onChange={(_, __, row) => makeFile(row)}> <HostSelector onlyOne mode="rows" onChange={row => makeFile(row)}>
<Space className="btn"><CloudServerOutlined/>添加主机文件</Space> <Space className="btn"><CloudServerOutlined/>添加主机文件</Space>
</HostSelector> </HostSelector>
</Space>)}> </Space>)}>
@ -144,7 +144,7 @@ function TransferIndex() {
<Input value={dir} onChange={e => setDir(e.target.value)} placeholder="请输入目标路径"/> <Input value={dir} onChange={e => setDir(e.target.value)} placeholder="请输入目标路径"/>
</Form.Item> </Form.Item>
<Form.Item required label="目标主机"> <Form.Item required label="目标主机">
<HostSelector type="button" value={hosts.map(x => x.id)} onChange={(_, __, rows) => setHosts(rows)}/> <HostSelector type="button" mode="rows" value={hosts.map(x => x.id)} onChange={rows => setHosts(rows)}/>
</Form.Item> </Form.Item>
</Form> </Form>
</Card> </Card>

74
spug_web/src/pages/host/Selector.js
View File

@ -62,20 +62,17 @@ function HostSelector(props) {
} }
function handleSubmit() { function handleSubmit() {
if (props.onChange) { if (props.mode === 'ids') {
setLoading(true); props.onChange(props.onlyOne ? selectedRowKeys[0] : selectedRowKeys)
let res handleClose()
const selectedRows = store.rawRecords.filter(x => selectedRowKeys.includes(x.id)) } else if (props.mode === 'rows') {
if (props.onlyOne) { const value = store.rawRecords.filter(x => selectedRowKeys.includes(x.id))
res = props.onChange(store.group, selectedRowKeys[0], selectedRows[0]) props.onChange(props.onlyOne ? value[0] : value)
} else { handleClose()
res = props.onChange(store.group, selectedRowKeys, selectedRows); } else if (props.mode === 'group') {
} setLoading(true)
if (res && res.then) { props.onChange(store.group, selectedRowKeys)
res.then(handleClose, () => setLoading(false)) .then(handleClose, () => setLoading(false))
} else {
handleClose()
}
} }
} }
@ -112,34 +109,39 @@ function HostSelector(props) {
setSelectedRowKeys([]) setSelectedRowKeys([])
setLoading(false) setLoading(false)
setVisible(false) setVisible(false)
if (props.onCancel) {
props.onCancel()
}
} }
return ( return (
<div className={styles.selector}> <div className={styles.selector}>
{props.children ? ( {props.mode !== 'group' && (
<div onClick={() => setVisible(true)}>{props.children}</div> props.children ? (
) : ( <div onClick={() => setVisible(true)}>{props.children}</div>
props.type === 'button' ? ( ) : (
props.value.length > 0 ? ( props.type === 'button' ? (
<Alert props.value.length > 0 ? (
type="info" <Alert
className={styles.area} type="info"
message={<div>已选择 <b style={{fontSize: 18, color: '#1890ff'}}>{props.value.length}</b> 台主机</div>} className={styles.area}
onClick={() => setVisible(true)}/> message={<div>已选择 <b style={{fontSize: 18, color: '#1890ff'}}>{props.value.length}</b> 台主机</div>}
) : ( onClick={() => setVisible(true)}/>
<Button icon={<PlusOutlined/>} onClick={() => setVisible(true)}> ) : (
添加目标主机 <Button icon={<PlusOutlined/>} onClick={() => setVisible(true)}>
</Button> 添加目标主机
)) : ( </Button>
<div style={{display: 'flex', alignItems: 'center'}}> )) : (
{props.value.length > 0 && <span style={{marginRight: 16}}>已选择 {props.value.length} 台</span>} <div style={{display: 'flex', alignItems: 'center'}}>
<Button type="link" style={{padding: 0}} onClick={() => setVisible(true)}>选择主机</Button> {props.value.length > 0 && <span style={{marginRight: 16}}>已选择 {props.value.length} 台</span>}
</div> <Button type="link" style={{padding: 0}} onClick={() => setVisible(true)}>选择主机</Button>
</div>
)
) )
)} )}
<Modal <Modal
visible={visible} visible={props.mode === 'group' || visible}
width={1000} width={1000}
className={styles.modal} className={styles.modal}
title={props.title || '主机列表'} title={props.title || '主机列表'}
@ -205,7 +207,9 @@ function HostSelector(props) {
HostSelector.defaultProps = { HostSelector.defaultProps = {
value: [], value: [],
type: 'text' type: 'text',
mode: 'ids',
onChange: () => null
} }
export default observer(HostSelector) export default observer(HostSelector)

3
spug_web/src/pages/host/index.js
View File

@ -51,9 +51,10 @@ export default observer(function () {
{store.syncVisible && <BatchSync/>} {store.syncVisible && <BatchSync/>}
{store.selectorVisible && {store.selectorVisible &&
<Selector <Selector
mode="group"
onlySelf={!store.addByCopy} onlySelf={!store.addByCopy}
onCancel={() => store.selectorVisible = false} onCancel={() => store.selectorVisible = false}
onOk={store.updateGroup} onChange={store.updateGroup}
/>} />}
</AuthDiv> </AuthDiv>
); );

2
spug_web/src/pages/monitor/Step1.js
View File

@ -130,7 +130,7 @@ export default observer(function () {
notFoundContent={null}/> notFoundContent={null}/>
</Form.Item> </Form.Item>
<Form.Item required label="监控主机" style={getStyle(['3', '4'])}> <Form.Item required label="监控主机" style={getStyle(['3', '4'])}>
<HostSelector value={targets} onChange={(_, ids) => store.record.targets = ids}/> <HostSelector value={targets} onChange={ids => store.record.targets = ids}/>
</Form.Item> </Form.Item>
<Form.Item label="响应时间" style={getStyle(['1'])}> <Form.Item label="响应时间" style={getStyle(['1'])}>
<Input suffix="ms" value={extra} placeholder="最长响应时间（毫秒），不设置则默认10秒超时" <Input suffix="ms" value={extra} placeholder="最长响应时间（毫秒），不设置则默认10秒超时"

2
spug_web/src/pages/schedule/Step2.js
View File

@ -13,7 +13,7 @@ import hostStore from 'pages/host/store';
import styles from './index.module.css'; import styles from './index.module.css';
export default observer(function () { export default observer(function () {
function handleChange(_, ids) { function handleChange(ids) {
if (store.targets.includes('local')) { if (store.targets.includes('local')) {
ids.unshift('local') ids.unshift('local')
} }