From 06479a8e45fa483fb0fcd85f2b2853f7ae43bbaa Mon Sep 17 00:00:00 2001 From: vapao Date: Sun, 6 Nov 2022 22:46:11 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96HostSelector=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- spug_web/src/pages/deploy/app/Ext1Setup1.js | 10 +- spug_web/src/pages/deploy/app/Ext2Setup1.js | 11 +- spug_web/src/pages/deploy/app/store.js | 1 - spug_web/src/pages/exec/task/index.js | 22 +-- .../src/pages/exec/task/index.module.less | 6 - spug_web/src/pages/exec/task/store.js | 5 - spug_web/src/pages/exec/template/Form.js | 11 +- spug_web/src/pages/exec/transfer/index.js | 44 ++--- spug_web/src/pages/host/Selector.js | 182 +++++++++++------- spug_web/src/pages/host/index.module.less | 15 -- spug_web/src/pages/host/selector.module.less | 46 +++++ spug_web/src/pages/monitor/Step1.js | 13 +- spug_web/src/pages/schedule/Step2.js | 20 +- 13 files changed, 190 insertions(+), 196 deletions(-) create mode 100644 spug_web/src/pages/host/selector.module.less diff --git a/spug_web/src/pages/deploy/app/Ext1Setup1.js b/spug_web/src/pages/deploy/app/Ext1Setup1.js index a88f9f7..1405f38 100644 --- a/spug_web/src/pages/deploy/app/Ext1Setup1.js +++ b/spug_web/src/pages/deploy/app/Ext1Setup1.js @@ -9,7 +9,7 @@ import { Link } from 'react-router-dom'; import { Switch, Form, Input, Select, Button, Radio } from 'antd'; import Repo from './Repo'; import envStore from 'pages/config/environment/store'; -import Selector from 'pages/host/Selector'; +import HostSelector from 'pages/host/Selector'; import store from './store'; export default observer(function Ext1Setup1() { @@ -62,8 +62,7 @@ export default observer(function Ext1Setup1() { - {info.host_ids.length > 0 && 已选择 {info.host_ids.length} 台} - + info.host_ids = ids}/> setVisible(true)}>私有仓库？}> info['git_repo'] = e.target.value} @@ -116,11 +115,6 @@ export default observer(function Ext1Setup1() { disabled={!(info.env_id && info.git_repo && info.host_ids.length)} onClick={() => store.page += 1}>下一步 - store.selectorVisible = false} - onOk={(_, ids) => info.host_ids = ids}/> {visible && info['git_repo'] = v} onCancel={() => setVisible(false)}/>} ) diff --git a/spug_web/src/pages/deploy/app/Ext2Setup1.js b/spug_web/src/pages/deploy/app/Ext2Setup1.js index 90dda9e..358089a 100644 --- a/spug_web/src/pages/deploy/app/Ext2Setup1.js +++ b/spug_web/src/pages/deploy/app/Ext2Setup1.js @@ -8,12 +8,11 @@ import { observer } from 'mobx-react'; import { Link } from 'react-router-dom'; import { Form, Switch, Select, Button, Input, Radio } from 'antd'; import envStore from 'pages/config/environment/store'; -import Selector from 'pages/host/Selector'; +import HostSelector from 'pages/host/Selector'; import store from './store'; export default observer(function Ext2Setup1() { const [envs, setEnvs] = useState([]); - const [selectorVisible, setSelectorVisible] = useState(false); function updateEnvs() { const ids = store.currentRecord['deploys'].map(x => x.env_id); @@ -61,8 +60,7 @@ export default observer(function Ext2Setup1() { - {info.host_ids.length > 0 && 已选择 {info.host_ids.length} 台} - + info.host_ids = ids}/> store.page += 1}>下一步 - setSelectorVisible(false)} - onOk={(_, ids) => info.host_ids = ids}/> ) }) diff --git a/spug_web/src/pages/deploy/app/store.js b/spug_web/src/pages/deploy/app/store.js index 80d7d37..8963f55 100644 --- a/spug_web/src/pages/deploy/app/store.js +++ b/spug_web/src/pages/deploy/app/store.js @@ -20,7 +20,6 @@ class Store { @observable ext1Visible = false; @observable ext2Visible = false; @observable autoVisible = false; - @observable selectorVisible = false; @observable f_name; @observable f_desc; diff --git a/spug_web/src/pages/exec/task/index.js b/spug_web/src/pages/exec/task/index.js index a91f9eb..94dc604 100644 --- a/spug_web/src/pages/exec/task/index.js +++ b/spug_web/src/pages/exec/task/index.js @@ -6,9 +6,9 @@ import React, { useState, useEffect } from 'react'; import { observer } from 'mobx-react'; import { PlusOutlined, ThunderboltOutlined, BulbOutlined, QuestionCircleOutlined } from '@ant-design/icons'; -import { Form, Button, Alert, Radio, Tooltip } from 'antd'; +import { Form, Button, Radio, Tooltip } from 'antd'; import { ACEditor, AuthDiv, Breadcrumb } from 'components'; -import Selector from 'pages/host/Selector'; +import HostSelector from 'pages/host/Selector'; import TemplateSelector from './TemplateSelector'; import Parameter from './Parameter'; import Output from './Output'; @@ -87,17 +87,7 @@ function TaskIndex() { } - onClick={() => store.showHost = true}/> - ) : ( - - )} + store.host_ids = ids}/> @@ -144,12 +134,6 @@ function TaskIndex() { {store.showTemplate && } {store.showConsole && } {visible && setVisible(false)} onOk={v => handleSubmit(v)}/>} - store.showHost = false} - onOk={(_, ids) => store.host_ids = ids}/> - ) } diff --git a/spug_web/src/pages/exec/task/index.module.less b/spug_web/src/pages/exec/task/index.module.less index 2a229b5..2d2c04c 100644 --- a/spug_web/src/pages/exec/task/index.module.less +++ b/spug_web/src/pages/exec/task/index.module.less @@ -10,12 +10,6 @@ width: 60%; border-right: 1px solid #dfdfdf; - .area { - cursor: pointer; - width: 200px; - height: 32px; - } - .tips { position: absolute; top: 10px; diff --git a/spug_web/src/pages/exec/task/store.js b/spug_web/src/pages/exec/task/store.js index 0d0a8b8..d8d8025 100644 --- a/spug_web/src/pages/exec/task/store.js +++ b/spug_web/src/pages/exec/task/store.js @@ -11,7 +11,6 @@ class Store { @observable tag = ''; @observable host_ids = []; @observable token = null; - @observable showHost = false; @observable showConsole = false; @observable showTemplate = false; @@ -50,10 +49,6 @@ class Store { } } - switchHost = () => { - this.showHost = !this.showHost; - }; - switchTemplate = () => { this.showTemplate = !this.showTemplate }; diff --git a/spug_web/src/pages/exec/template/Form.js b/spug_web/src/pages/exec/template/Form.js index 193fc0e..7774044 100644 --- a/spug_web/src/pages/exec/template/Form.js +++ b/spug_web/src/pages/exec/template/Form.js @@ -8,7 +8,7 @@ import { observer } from 'mobx-react'; import { ExclamationCircleOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'; import { Modal, Form, Input, Select, Button, Radio, Table, Tooltip, message } from 'antd'; import { ACEditor } from 'components'; -import Selector from 'pages/host/Selector'; +import HostSelector from 'pages/host/Selector'; import Parameter from './Parameter'; import { http, cleanCommand } from 'libs'; import lds from 'lodash'; @@ -20,7 +20,6 @@ export default observer(function () { const [body, setBody] = useState(S.record.body); const [parameter, setParameter] = useState(); const [parameters, setParameters] = useState([]); - const [visible, setVisible] = useState(false); useEffect(() => { setParameters(S.record.parameters) @@ -136,18 +135,12 @@ export default observer(function () { - {info.host_ids.length > 0 && 已选择 {info.host_ids.length} 台} - + info.host_ids = ids}/> - setVisible(false)} - onOk={(_, ids) => info.host_ids = ids}/> {parameter ? ( setSProps({visible: false}), - onOk: (_, __, row) => setFiles([{id: uniqueId(), type: 'host', name: row.name, path: '', host_id: row.id}]), - }) - } - - function handleAddHost() { - setSProps({ - visible: true, - selectedRowKeys: hosts.map(x => x.id), - onCancel: () => setSProps({visible: false}), - onOk: (_, __, rows) => setHosts(rows), - }) + function makeFile(row) { + setFiles([{ + id: uniqueId(), + type: 'host', + name: row.name, + path: '', + host_id: row.id + }]) } function handleUpload(_, fileList) { @@ -131,7 +120,9 @@ function TransferIndex() { 上传本地文件 - 添加主机文件 + makeFile(row)}> + 添加主机文件 + )}> @@ -153,13 +144,7 @@ function TransferIndex() { setDir(e.target.value)} placeholder="请输入目标路径"/> - {hosts.length > 0 ? (已选择 {hosts.length} 台主机} - onClick={handleAddHost}/>) : ()} + x.id)} onChange={(_, __, rows) => setHosts(rows)}/> @@ -191,7 +176,6 @@ function TransferIndex() { - {token ? : null} ) } diff --git a/spug_web/src/pages/host/Selector.js b/spug_web/src/pages/host/Selector.js index 4bd76a0..da1c4c5 100644 --- a/spug_web/src/pages/host/Selector.js +++ b/spug_web/src/pages/host/Selector.js @@ -5,15 +5,15 @@ */ import React, { useEffect, useState } from 'react'; import { observer } from 'mobx-react'; -import { Modal, Row, Col, Tree, Table, Button, Space, Input } from 'antd'; -import { FolderOpenOutlined, FolderOutlined } from '@ant-design/icons'; +import { Modal, Row, Col, Tree, Table, Button, Space, Input, Alert } from 'antd'; +import { FolderOpenOutlined, FolderOutlined, PlusOutlined } from '@ant-design/icons'; import IPAddress from './IPAddress'; import hStore from './store'; import store from './store2'; -import styles from './index.module.less'; +import styles from './selector.module.less'; - -export default observer(function (props) { +function HostSelector(props) { + const [visible, setVisible] = useState(false) const [isReady, setIsReady] = useState(false) const [loading, setLoading] = useState(false); const [selectedRowKeys, setSelectedRowKeys] = useState([]); @@ -42,8 +42,8 @@ export default observer(function (props) { }, [store.treeData]) useEffect(() => { - setSelectedRowKeys(props.selectedRowKeys || []) - }, [props.selectedRowKeys]) + setSelectedRowKeys([...props.value]) + }, [props.value]) useEffect(() => { if (props.onlySelf) { @@ -62,20 +62,19 @@ export default observer(function (props) { } function handleSubmit() { - if (props.onOk) { + if (props.onChange) { setLoading(true); let res const selectedRows = store.rawRecords.filter(x => selectedRowKeys.includes(x.id)) if (props.onlyOne) { - res = props.onOk(store.group, selectedRowKeys[0], selectedRows[0]) + res = props.onChange(store.group, selectedRowKeys[0], selectedRows[0]) } else { - res = props.onOk(store.group, selectedRowKeys, selectedRows); + res = props.onChange(store.group, selectedRowKeys, selectedRows); } if (res && res.then) { - res.then(props.onCancel, () => setLoading(false)) + res.then(handleClose, () => setLoading(false)) } else { - props.onCancel(); - setLoading(false) + handleClose() } } } @@ -109,67 +108,104 @@ export default observer(function (props) { ) } + function handleClose() { + setSelectedRowKeys([]) + setLoading(false) + setVisible(false) + } + return ( - - - -
分组列表
- store.group = node} - /> - - -
- store.f_word = e.target.value}/> - +
+ {props.children ? ( +
setVisible(true)}>{props.children}
+ ) : ( + props.type === 'button' ? ( + props.value.length > 0 ? ( + 已选择 {props.value.length} 台主机
} + onClick={() => setVisible(true)}/> + ) : ( + + )) : ( +
+ {props.value.length > 0 && 已选择 {props.value.length} 台} +
-
{ - return { - onClick: () => handleClickRow(record) - } - }} - rowSelection={{ - selectedRowKeys, - hideSelectAll: props.onlyOne, - onSelect: handleClickRow, - onSelectAll: handleSelectAll - }}> - - ( - - - + ) + )} + + + + +
分组列表
+ store.group = node} + /> + + +
+ store.f_word = e.target.value}/> + - )}/> - -
- - - + + { + return { + onClick: () => handleClickRow(record) + } + }} + rowSelection={{ + selectedRowKeys, + hideSelectAll: props.onlyOne, + onSelect: handleClickRow, + onSelectAll: handleSelectAll + }}> + + ( + + + + + )}/> + +
+ + + + ) -}) \ No newline at end of file +} + +HostSelector.defaultProps = { + value: [], + type: 'text' +} + +export default observer(HostSelector) \ No newline at end of file diff --git a/spug_web/src/pages/host/index.module.less b/spug_web/src/pages/host/index.module.less index c502150..230f13a 100644 --- a/spug_web/src/pages/host/index.module.less +++ b/spug_web/src/pages/host/index.module.less @@ -26,21 +26,6 @@ } } -.selector { - :global(.ant-modal-footer) { - border-top: none - } - - .gTitle { - height: 44px; - line-height: 44px; - padding-left: 12px; - font-weight: bold; - margin-bottom: 12px; - background: #fafafa; - } -} - .formAddress1 { display: inline-block; diff --git a/spug_web/src/pages/host/selector.module.less b/spug_web/src/pages/host/selector.module.less new file mode 100644 index 0000000..b469812 --- /dev/null +++ b/spug_web/src/pages/host/selector.module.less @@ -0,0 +1,46 @@ +.modal { + :global(.ant-modal-footer) { + border-top: none + } + + .gTitle { + height: 44px; + line-height: 44px; + padding-left: 12px; + font-weight: bold; + margin-bottom: 12px; + background: #fafafa; + } +} + +.area { + cursor: pointer; + width: 200px; + height: 32px; +} + +.treeNode { + display: flex; + flex-direction: row; + align-items: center; + + .title { + margin-left: 8px; + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + word-break: break-all; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + } + + .number { + width: 30px; + text-align: right; + } +} + + + + diff --git a/spug_web/src/pages/monitor/Step1.js b/spug_web/src/pages/monitor/Step1.js index b7ce777..1dd1e19 100644 --- a/spug_web/src/pages/monitor/Step1.js +++ b/spug_web/src/pages/monitor/Step1.js @@ -8,7 +8,7 @@ import { observer } from 'mobx-react'; import { ExclamationCircleOutlined } from '@ant-design/icons'; import { Modal, Form, Input, Select, Button, message } from 'antd'; import TemplateSelector from '../exec/task/TemplateSelector'; -import Selector from 'pages/host/Selector'; +import HostSelector from 'pages/host/Selector'; import { LinkButton, ACEditor } from 'components'; import { http, cleanCommand } from 'libs'; import store from './store'; @@ -22,7 +22,6 @@ const helpMap = { export default observer(function () { const [loading, setLoading] = useState(false); const [showTmp, setShowTmp] = useState(false); - const [showSelector, setShowSelector] = useState(false); function handleTest() { setLoading(true) @@ -131,10 +130,7 @@ export default observer(function () { notFoundContent={null}/> - {store.record.targets?.length > 0 && ( - 已选择 {store.record.targets.length} 台 - )} - + store.record.targets = ids}/> Tips: 仅测试第一个监控地址 {showTmp && store.record.extra = body} onCancel={() => setShowTmp(false)}/>} - setShowSelector(false)} - onOk={(_, ids) => store.record.targets = ids}/> ) }) \ No newline at end of file diff --git a/spug_web/src/pages/schedule/Step2.js b/spug_web/src/pages/schedule/Step2.js index e092573..f0a781b 100644 --- a/spug_web/src/pages/schedule/Step2.js +++ b/spug_web/src/pages/schedule/Step2.js @@ -3,7 +3,7 @@ * Copyright (c) * Released under the AGPL-3.0 License. */ -import React, { useState } from 'react'; +import React from 'react'; import { observer } from 'mobx-react'; import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'; import { Form, Select, Button } from 'antd'; @@ -13,7 +13,12 @@ import hostStore from 'pages/host/store'; import styles from './index.module.css'; export default observer(function () { - const [visible, setVisible] = useState(false) + function handleChange(_, ids) { + if (store.targets.includes('local')) { + ids.unshift('local') + } + store.targets = ids + } return ( @@ -43,15 +48,10 @@ export default observer(function () { ))} - + x !== 'local')} onChange={handleChange}> + + - setVisible(false)} - onOk={(_, ids) => store.targets = ids}/>