release v1.2.0
This commit is contained in:
dushixiang
324
web/src/components/asset/MyAsset.js
Normal file
324
web/src/components/asset/MyAsset.js
Normal file
@ -0,0 +1,324 @@
|
||||
import React, {Component} from 'react';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Col,
|
||||
Descriptions,
|
||||
Divider,
|
||||
Input,
|
||||
Layout,
|
||||
List,
|
||||
Row,
|
||||
Select,
|
||||
Space,
|
||||
Tag,
|
||||
Tooltip,
|
||||
Typography
|
||||
} from "antd";
|
||||
import {
|
||||
CheckCircleOutlined,
|
||||
CodeOutlined,
|
||||
DesktopOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
SyncOutlined,
|
||||
TagsOutlined,
|
||||
UndoOutlined
|
||||
} from "@ant-design/icons";
|
||||
import request from "../../common/request";
|
||||
import {message} from "antd/es";
|
||||
import qs from "qs";
|
||||
|
||||
const {Content} = Layout;
|
||||
const {Title} = Typography;
|
||||
const {Search} = Input;
|
||||
|
||||
class MyAsset extends Component {
|
||||
|
||||
inputRefOfName = React.createRef();
|
||||
inputRefOfIp = React.createRef();
|
||||
|
||||
state = {
|
||||
items: [],
|
||||
tags: [],
|
||||
queryParams: {
|
||||
pageIndex: 1,
|
||||
pageSize: 8,
|
||||
protocol: '',
|
||||
tags: ''
|
||||
},
|
||||
loading: false,
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
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('/account/assets?' + paramsStr);
|
||||
if (result['code'] === 1) {
|
||||
data = result['data'];
|
||||
} else {
|
||||
message.error(result['message']);
|
||||
}
|
||||
} catch (e) {
|
||||
|
||||
} finally {
|
||||
const items = data.items.map(item => {
|
||||
return {'key': item['id'], ...item}
|
||||
})
|
||||
this.setState({
|
||||
items: items,
|
||||
total: data.total,
|
||||
queryParams: queryParams,
|
||||
loading: false
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
renderTags(tags) {
|
||||
let tagDocuments = []
|
||||
let tagArr = tags.split(',');
|
||||
for (let i = 0; i < tagArr.length; i++) {
|
||||
if (tags[i] === '-') {
|
||||
continue;
|
||||
}
|
||||
tagDocuments.push(<Tag key={tagArr[i]}>{tagArr[i]}</Tag>)
|
||||
}
|
||||
return tagDocuments;
|
||||
}
|
||||
|
||||
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 => {
|
||||
this.setState({
|
||||
selectedTags: tags
|
||||
})
|
||||
let query = {
|
||||
...this.state.queryParams,
|
||||
'pageIndex': 1,
|
||||
'pageSize': this.state.queryParams.pageSize,
|
||||
'tags': tags.join(','),
|
||||
}
|
||||
|
||||
this.loadTableData(query);
|
||||
}
|
||||
|
||||
handleSearchByProtocol = protocol => {
|
||||
let query = {
|
||||
...this.state.queryParams,
|
||||
'pageIndex': 1,
|
||||
'pageSize': this.state.queryParams.pageSize,
|
||||
'protocol': protocol,
|
||||
}
|
||||
this.loadTableData(query);
|
||||
}
|
||||
|
||||
handleChangPage = async (pageIndex, pageSize) => {
|
||||
let queryParams = this.state.queryParams;
|
||||
queryParams.pageIndex = pageIndex;
|
||||
queryParams.pageSize = pageSize;
|
||||
|
||||
this.setState({
|
||||
queryParams: queryParams
|
||||
});
|
||||
|
||||
await this.loadTableData(queryParams)
|
||||
};
|
||||
|
||||
handleTableChange = (pagination, filters, sorter) => {
|
||||
let query = {
|
||||
...this.state.queryParams,
|
||||
'order': sorter.order,
|
||||
'field': sorter.field
|
||||
}
|
||||
|
||||
this.loadTableData(query);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div style={{marginTop: 20}}>
|
||||
<Content style={{background: 'white', padding: 24}}>
|
||||
<div>
|
||||
<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
|
||||
value={this.state.selectedTags}
|
||||
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>
|
||||
|
||||
<Select onChange={this.handleSearchByProtocol}
|
||||
value={this.state.queryParams.protocol ? this.state.queryParams.protocol : ''}
|
||||
style={{width: 100}}>
|
||||
<Select.Option value="">全部协议</Select.Option>
|
||||
<Select.Option value="rdp">rdp</Select.Option>
|
||||
<Select.Option value="ssh">ssh</Select.Option>
|
||||
<Select.Option value="vnc">vnc</Select.Option>
|
||||
<Select.Option value="telnet">telnet</Select.Option>
|
||||
<Select.Option value="kubernetes">kubernetes</Select.Option>
|
||||
</Select>
|
||||
|
||||
<Tooltip title='重置查询'>
|
||||
|
||||
<Button icon={<UndoOutlined/>} onClick={() => {
|
||||
this.inputRefOfName.current.setValue('');
|
||||
this.inputRefOfIp.current.setValue('');
|
||||
this.setState({
|
||||
selectedTags: []
|
||||
})
|
||||
this.loadTableData({pageIndex: 1, pageSize: 10, protocol: '', tags: ''})
|
||||
}}>
|
||||
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<Divider type="vertical"/>
|
||||
|
||||
<Tooltip title="刷新列表">
|
||||
<Button icon={<SyncOutlined/>} onClick={() => {
|
||||
this.loadTableData(this.state.queryParams)
|
||||
}}>
|
||||
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
</Content>
|
||||
|
||||
<div style={{marginTop: 20}}>
|
||||
<List
|
||||
loading={this.state.loading}
|
||||
grid={{gutter: 16, column: 4}}
|
||||
dataSource={this.state.items}
|
||||
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} 条`,
|
||||
pageSizeOptions: [8, 16, 32, 64, 128]
|
||||
}}
|
||||
renderItem={item => {
|
||||
|
||||
const id = item['id'];
|
||||
const protocol = item['protocol'];
|
||||
const name = item['name'];
|
||||
const sshMode = item['sshMode'];
|
||||
let url = '';
|
||||
if (protocol === 'ssh' && sshMode === 'naive') {
|
||||
url = `#/term?assetId=${id}&assetName=${name}`;
|
||||
} else {
|
||||
url = `#/access?assetId=${id}&assetName=${name}&protocol=${protocol}`;
|
||||
}
|
||||
|
||||
return (
|
||||
<List.Item>
|
||||
<a target='_blank' href={url}>
|
||||
<Card title={item['name']}
|
||||
hoverable
|
||||
extra={item['active'] ?
|
||||
<Tag icon={<CheckCircleOutlined/>} color="success">
|
||||
运行中
|
||||
</Tag> : <Tag icon={<ExclamationCircleOutlined/>} color="error">
|
||||
不可用
|
||||
</Tag>}
|
||||
actions={[]}>
|
||||
<Descriptions title="" column={1}>
|
||||
<Descriptions.Item label={<div><CodeOutlined/> 资产协议</div>}>
|
||||
<strong>{item['protocol']}</strong>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={<div><DesktopOutlined/> 主机地址</div>}>
|
||||
<strong>{item['ip'] + ':' + item['port']}</strong>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={<div><TagsOutlined/> 标签</div>}>
|
||||
<strong>{this.renderTags(item['tags'])}</strong>
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</Card>
|
||||
</a>
|
||||
</List.Item>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default MyAsset;
|
||||
Reference in New Issue
Block a user