优化执行指令时选择资产的方式 close #85
This commit is contained in:
dushixiang
parent
c3cdb720e5
commit
60f9289fb1
427
web/src/components/command/ChooseAsset.js
Normal file
427
web/src/components/command/ChooseAsset.js
Normal file
@ -0,0 +1,427 @@
|
|||||||
|
import React, {Component} from 'react';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Badge,
|
||||||
|
Button,
|
||||||
|
Col,
|
||||||
|
Divider,
|
||||||
|
Input,
|
||||||
|
Layout,
|
||||||
|
Modal,
|
||||||
|
Row,
|
||||||
|
Select,
|
||||||
|
Space,
|
||||||
|
Table,
|
||||||
|
Tag,
|
||||||
|
Tooltip,
|
||||||
|
Typography
|
||||||
|
} from "antd";
|
||||||
|
import qs from "qs";
|
||||||
|
import request from "../../common/request";
|
||||||
|
import {message} from "antd/es";
|
||||||
|
|
||||||
|
|
||||||
|
import {PlusOutlined, SyncOutlined, UndoOutlined} from '@ant-design/icons';
|
||||||
|
import {PROTOCOL_COLORS} from "../../common/constants";
|
||||||
|
import {isEmpty} from "../../utils/utils";
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
|
||||||
|
const confirm = Modal.confirm;
|
||||||
|
const {Search} = Input;
|
||||||
|
const {Content} = Layout;
|
||||||
|
const {Title, Text} = Typography;
|
||||||
|
|
||||||
|
class ChooseAsset extends Component {
|
||||||
|
|
||||||
|
inputRefOfName = React.createRef();
|
||||||
|
inputRefOfIp = React.createRef();
|
||||||
|
changeOwnerFormRef = React.createRef();
|
||||||
|
|
||||||
|
state = {
|
||||||
|
items: [],
|
||||||
|
total: 0,
|
||||||
|
queryParams: {
|
||||||
|
pageIndex: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
protocol: 'ssh'
|
||||||
|
},
|
||||||
|
loading: false,
|
||||||
|
tags: [],
|
||||||
|
model: {},
|
||||||
|
selectedRowKeys: [],
|
||||||
|
selectedRows: [],
|
||||||
|
delBtnLoading: false,
|
||||||
|
changeOwnerModalVisible: false,
|
||||||
|
changeSharerModalVisible: false,
|
||||||
|
changeOwnerConfirmLoading: false,
|
||||||
|
changeSharerConfirmLoading: false,
|
||||||
|
users: [],
|
||||||
|
selected: {},
|
||||||
|
totalSelectedRows: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
checkedAssets = undefined
|
||||||
|
|
||||||
|
async componentDidMount() {
|
||||||
|
this.checkedAssets = this.props.setCheckedAssets;
|
||||||
|
this.loadTableData();
|
||||||
|
let result = await request.get('/tags');
|
||||||
|
if (result['code'] === 1) {
|
||||||
|
this.setState({
|
||||||
|
tags: result['data']
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async loadTableData(queryParams) {
|
||||||
|
this.setState({
|
||||||
|
loading: true
|
||||||
|
});
|
||||||
|
|
||||||
|
queryParams = queryParams || this.state.queryParams;
|
||||||
|
|
||||||
|
// queryParams
|
||||||
|
let paramsStr = qs.stringify(queryParams);
|
||||||
|
|
||||||
|
let data = {
|
||||||
|
items: [],
|
||||||
|
total: 0
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
let result = await request.get('/assets/paging?' + paramsStr);
|
||||||
|
if (result['code'] === 1) {
|
||||||
|
data = result['data'];
|
||||||
|
} else {
|
||||||
|
message.error(result['message']);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
|
||||||
|
} finally {
|
||||||
|
let sharer = this.state.sharer;
|
||||||
|
const items = data.items.map(item => {
|
||||||
|
let disabled = false;
|
||||||
|
if (sharer === item['owner']) {
|
||||||
|
disabled = true;
|
||||||
|
}
|
||||||
|
return {...item, 'key': item['id'], 'disabled': disabled}
|
||||||
|
})
|
||||||
|
let totalSelectedRows = this.state.totalSelectedRows;
|
||||||
|
let selectedRowKeys = totalSelectedRows.map(item => item['id']);
|
||||||
|
this.setState({
|
||||||
|
items: items,
|
||||||
|
total: data.total,
|
||||||
|
queryParams: queryParams,
|
||||||
|
loading: false,
|
||||||
|
selectedRowKeys: selectedRowKeys
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
handleChangPage = async (pageIndex, pageSize) => {
|
||||||
|
let queryParams = this.state.queryParams;
|
||||||
|
queryParams.pageIndex = pageIndex;
|
||||||
|
queryParams.pageSize = pageSize;
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
queryParams: queryParams
|
||||||
|
});
|
||||||
|
|
||||||
|
await this.loadTableData(queryParams)
|
||||||
|
};
|
||||||
|
|
||||||
|
handleSearchByName = name => {
|
||||||
|
let query = {
|
||||||
|
...this.state.queryParams,
|
||||||
|
'pageIndex': 1,
|
||||||
|
'pageSize': this.state.queryParams.pageSize,
|
||||||
|
'name': name,
|
||||||
|
}
|
||||||
|
|
||||||
|
this.loadTableData(query);
|
||||||
|
};
|
||||||
|
|
||||||
|
handleSearchByIp = ip => {
|
||||||
|
let query = {
|
||||||
|
...this.state.queryParams,
|
||||||
|
'pageIndex': 1,
|
||||||
|
'pageSize': this.state.queryParams.pageSize,
|
||||||
|
'ip': ip,
|
||||||
|
}
|
||||||
|
|
||||||
|
this.loadTableData(query);
|
||||||
|
};
|
||||||
|
|
||||||
|
handleTagsChange = tags => {
|
||||||
|
console.log(tags)
|
||||||
|
// this.setState({
|
||||||
|
// tags: tags
|
||||||
|
// })
|
||||||
|
let query = {
|
||||||
|
...this.state.queryParams,
|
||||||
|
'pageIndex': 1,
|
||||||
|
'pageSize': this.state.queryParams.pageSize,
|
||||||
|
'tags': tags.join(','),
|
||||||
|
}
|
||||||
|
|
||||||
|
this.loadTableData(query);
|
||||||
|
}
|
||||||
|
|
||||||
|
unSelectRow = async (assetId) => {
|
||||||
|
const selectedRowKeys = this.state.selectedRowKeys.filter(key => key !== assetId);
|
||||||
|
const totalSelectedRows = this.state.totalSelectedRows.filter(item => item['id'] !== assetId);
|
||||||
|
this.setState({
|
||||||
|
selectedRowKeys: selectedRowKeys,
|
||||||
|
totalSelectedRows: totalSelectedRows
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
|
||||||
|
const columns = [{
|
||||||
|
title: '序号',
|
||||||
|
dataIndex: 'id',
|
||||||
|
key: 'id',
|
||||||
|
render: (id, record, index) => {
|
||||||
|
return index + 1;
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
title: '资产名称',
|
||||||
|
dataIndex: 'name',
|
||||||
|
key: 'name',
|
||||||
|
render: (name, record) => {
|
||||||
|
let short = name;
|
||||||
|
if (short && short.length > 20) {
|
||||||
|
short = short.substring(0, 20) + " ...";
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<Tooltip placement="topLeft" title={name}>
|
||||||
|
{short}
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
title: '连接协议',
|
||||||
|
dataIndex: 'protocol',
|
||||||
|
key: 'protocol',
|
||||||
|
render: (text, record) => {
|
||||||
|
const title = `${record['ip'] + ':' + record['port']}`
|
||||||
|
return (
|
||||||
|
<Tooltip title={title}>
|
||||||
|
<Tag color={PROTOCOL_COLORS[text]}>{text}</Tag>
|
||||||
|
</Tooltip>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
title: '标签',
|
||||||
|
dataIndex: 'tags',
|
||||||
|
key: 'tags',
|
||||||
|
render: tags => {
|
||||||
|
if (!isEmpty(tags)) {
|
||||||
|
let tagDocuments = []
|
||||||
|
let tagArr = tags.split(',');
|
||||||
|
for (let i = 0; i < tagArr.length; i++) {
|
||||||
|
if (tags[i] === '-') {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
tagDocuments.push(<Tag>{tagArr[i]}</Tag>)
|
||||||
|
}
|
||||||
|
return tagDocuments;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
title: '状态',
|
||||||
|
dataIndex: 'active',
|
||||||
|
key: 'active',
|
||||||
|
render: text => {
|
||||||
|
|
||||||
|
if (text) {
|
||||||
|
return (
|
||||||
|
<Tooltip title='运行中'>
|
||||||
|
<Badge status="processing"/>
|
||||||
|
</Tooltip>
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<Tooltip title='不可用'>
|
||||||
|
<Badge status="error"/>
|
||||||
|
</Tooltip>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
title: '所有者',
|
||||||
|
dataIndex: 'ownerName',
|
||||||
|
key: 'ownerName'
|
||||||
|
}, {
|
||||||
|
title: '创建日期',
|
||||||
|
dataIndex: 'created',
|
||||||
|
key: 'created',
|
||||||
|
render: (text, record) => {
|
||||||
|
return (
|
||||||
|
<Tooltip title={text}>
|
||||||
|
{dayjs(text).fromNow()}
|
||||||
|
</Tooltip>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const selectedRowKeys = this.state.selectedRowKeys;
|
||||||
|
const rowSelection = {
|
||||||
|
selectedRowKeys: this.state.selectedRowKeys,
|
||||||
|
onChange: (selectedRowKeys, selectedRows) => {
|
||||||
|
this.setState({selectedRowKeys, selectedRows});
|
||||||
|
},
|
||||||
|
getCheckboxProps: (record) => ({
|
||||||
|
disabled: record['disabled'],
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
let hasSelected = false;
|
||||||
|
if (selectedRowKeys.length > 0) {
|
||||||
|
let totalSelectedRows = this.state.totalSelectedRows;
|
||||||
|
let allSelectedRowKeys = totalSelectedRows.map(item => item['id']);
|
||||||
|
for (let i = 0; i < selectedRowKeys.length; i++) {
|
||||||
|
let selectedRowKey = selectedRowKeys[i];
|
||||||
|
if (!allSelectedRowKeys.includes(selectedRowKey)) {
|
||||||
|
hasSelected = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Title level={3}>已选择资产列表</Title>
|
||||||
|
<div>
|
||||||
|
{
|
||||||
|
this.state.totalSelectedRows.map(item => {
|
||||||
|
return <Tag color={PROTOCOL_COLORS[item['protocol']]} closable
|
||||||
|
onClose={() => this.unSelectRow(item['id'])}
|
||||||
|
key={item['id']}>{item['name']}</Tag>
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Divider/>
|
||||||
|
<Content key='page-content' className="site-layout-background">
|
||||||
|
<div style={{marginBottom: 20}}>
|
||||||
|
<Row justify="space-around" align="middle" gutter={24}>
|
||||||
|
<Col span={4} key={1}>
|
||||||
|
<Title level={3}>全部资产列表</Title>
|
||||||
|
</Col>
|
||||||
|
<Col span={20} key={2} style={{textAlign: 'right'}}>
|
||||||
|
<Space>
|
||||||
|
|
||||||
|
<Search
|
||||||
|
ref={this.inputRefOfName}
|
||||||
|
placeholder="资产名称"
|
||||||
|
allowClear
|
||||||
|
onSearch={this.handleSearchByName}
|
||||||
|
style={{width: 200}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Search
|
||||||
|
ref={this.inputRefOfIp}
|
||||||
|
placeholder="资产IP"
|
||||||
|
allowClear
|
||||||
|
onSearch={this.handleSearchByIp}
|
||||||
|
style={{width: 200}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Select mode="multiple"
|
||||||
|
allowClear
|
||||||
|
placeholder="资产标签" onChange={this.handleTagsChange}
|
||||||
|
style={{minWidth: 150}}>
|
||||||
|
{this.state.tags.map(tag => {
|
||||||
|
if (tag === '-') {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
return (<Select.Option key={tag}>{tag}</Select.Option>)
|
||||||
|
})}
|
||||||
|
</Select>
|
||||||
|
|
||||||
|
<Tooltip title='重置查询'>
|
||||||
|
|
||||||
|
<Button icon={<UndoOutlined/>} onClick={() => {
|
||||||
|
this.inputRefOfName.current.setValue('');
|
||||||
|
this.inputRefOfIp.current.setValue('');
|
||||||
|
this.loadTableData({
|
||||||
|
...this.state.queryParams,
|
||||||
|
pageIndex: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
protocol: 'ssh',
|
||||||
|
name: '',
|
||||||
|
ip: ''
|
||||||
|
})
|
||||||
|
}}>
|
||||||
|
|
||||||
|
</Button>
|
||||||
|
</Tooltip>
|
||||||
|
|
||||||
|
<Divider type="vertical"/>
|
||||||
|
|
||||||
|
<Tooltip title="刷新列表">
|
||||||
|
<Button icon={<SyncOutlined/>} onClick={() => {
|
||||||
|
this.loadTableData(this.state.queryParams)
|
||||||
|
}}>
|
||||||
|
|
||||||
|
</Button>
|
||||||
|
</Tooltip>
|
||||||
|
|
||||||
|
<Tooltip title="添加选择">
|
||||||
|
<Button type="primary" disabled={!hasSelected} icon={<PlusOutlined/>}
|
||||||
|
onClick={async () => {
|
||||||
|
console.log(this.state.selectedRows)
|
||||||
|
let totalSelectedRows = this.state.totalSelectedRows;
|
||||||
|
let totalSelectedRowKeys = totalSelectedRows.map(item => item['id']);
|
||||||
|
|
||||||
|
let selectedRows = this.state.selectedRows;
|
||||||
|
let newRowKeys = []
|
||||||
|
for (let i = 0; i < selectedRows.length; i++) {
|
||||||
|
let selectedRow = selectedRows[i];
|
||||||
|
if (totalSelectedRowKeys.includes(selectedRow['id'])) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
totalSelectedRows.push(selectedRow);
|
||||||
|
newRowKeys.push(selectedRow['id']);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
totalSelectedRows: totalSelectedRows
|
||||||
|
})
|
||||||
|
if (this.checkedAssets) {
|
||||||
|
this.checkedAssets(totalSelectedRows);
|
||||||
|
}
|
||||||
|
}}>
|
||||||
|
</Button>
|
||||||
|
</Tooltip>
|
||||||
|
</Space>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Table key='assets-table'
|
||||||
|
rowSelection={rowSelection}
|
||||||
|
dataSource={this.state.items}
|
||||||
|
columns={columns}
|
||||||
|
position={'both'}
|
||||||
|
size="middle"
|
||||||
|
pagination={{
|
||||||
|
showSizeChanger: true,
|
||||||
|
current: this.state.queryParams.pageIndex,
|
||||||
|
pageSize: this.state.queryParams.pageSize,
|
||||||
|
onChange: this.handleChangPage,
|
||||||
|
onShowSizeChange: this.handleChangPage,
|
||||||
|
total: this.state.total,
|
||||||
|
showTotal: total => `总计 ${total} 条`
|
||||||
|
}}
|
||||||
|
loading={this.state.loading}
|
||||||
|
/>
|
||||||
|
</Content>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ChooseAsset;
|
||||||
@ -32,10 +32,10 @@ import {
|
|||||||
SyncOutlined,
|
SyncOutlined,
|
||||||
UndoOutlined
|
UndoOutlined
|
||||||
} from '@ant-design/icons';
|
} from '@ant-design/icons';
|
||||||
import {compare} from "../../utils/utils";
|
|
||||||
|
|
||||||
import {hasPermission, isAdmin} from "../../service/permission";
|
import {hasPermission, isAdmin} from "../../service/permission";
|
||||||
import dayjs from "dayjs";
|
import dayjs from "dayjs";
|
||||||
|
import ChooseAsset from "./ChooseAsset";
|
||||||
|
|
||||||
const confirm = Modal.confirm;
|
const confirm = Modal.confirm;
|
||||||
const {Content} = Layout;
|
const {Content} = Layout;
|
||||||
@ -191,6 +191,12 @@ class DynamicCommand extends Component {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
setCheckedAssets = (checkedAssets) => {
|
||||||
|
this.setState({
|
||||||
|
checkedAssets: checkedAssets
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
executeCommand = e => {
|
executeCommand = e => {
|
||||||
let checkedAssets = this.state.checkedAssets;
|
let checkedAssets = this.state.checkedAssets;
|
||||||
if (checkedAssets.length === 0) {
|
if (checkedAssets.length === 0) {
|
||||||
@ -198,18 +204,10 @@ class DynamicCommand extends Component {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
let assets = this.state.assets;
|
|
||||||
let cAssets = checkedAssets.map(item => {
|
let cAssets = checkedAssets.map(item => {
|
||||||
let name = '';
|
|
||||||
for (let i = 0; i < assets.length; i++) {
|
|
||||||
if (assets[i]['id'] === item) {
|
|
||||||
name = assets[i]['name'];
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return {
|
return {
|
||||||
id: item,
|
id: item['id'],
|
||||||
name: name
|
name: item['name']
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -474,17 +472,6 @@ class DynamicCommand extends Component {
|
|||||||
assetsVisible: true,
|
assetsVisible: true,
|
||||||
commandId: record['id']
|
commandId: record['id']
|
||||||
});
|
});
|
||||||
|
|
||||||
let result = await request.get('/assets?protocol=ssh');
|
|
||||||
if (result.code === 1) {
|
|
||||||
let assets = result.data;
|
|
||||||
assets.sort(compare('name'));
|
|
||||||
this.setState({
|
|
||||||
assets: assets
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
message.error(result.message);
|
|
||||||
}
|
|
||||||
}}>执行</Button>
|
}}>执行</Button>
|
||||||
|
|
||||||
<Dropdown overlay={menu}>
|
<Dropdown overlay={menu}>
|
||||||
@ -640,7 +627,8 @@ class DynamicCommand extends Component {
|
|||||||
<Modal
|
<Modal
|
||||||
title="选择资产"
|
title="选择资产"
|
||||||
visible={this.state.assetsVisible}
|
visible={this.state.assetsVisible}
|
||||||
|
width={window.innerWidth * 0.8}
|
||||||
|
centered={true}
|
||||||
onOk={this.executeCommand}
|
onOk={this.executeCommand}
|
||||||
onCancel={() => {
|
onCancel={() => {
|
||||||
this.setState({
|
this.setState({
|
||||||
@ -648,19 +636,11 @@ class DynamicCommand extends Component {
|
|||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Checkbox indeterminate={this.state.indeterminate} onChange={this.onCheckAllChange}
|
<ChooseAsset
|
||||||
checked={this.state.checkAllChecked}>
|
setCheckedAssets={this.setCheckedAssets}
|
||||||
全选
|
>
|
||||||
</Checkbox>
|
|
||||||
<Divider/>
|
|
||||||
|
|
||||||
<CheckboxGroup options={this.state.assets.map((item) => {
|
</ChooseAsset>
|
||||||
return {
|
|
||||||
label: item.name,
|
|
||||||
value: item.id,
|
|
||||||
key: item.id,
|
|
||||||
}
|
|
||||||
})} value={this.state.checkedAssets} onChange={this.onChange}/>
|
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user