mirror of https://github.com/openspug/spug
fix issue
parent
10c782e186
commit
5aeac11c6e
|
@ -14,7 +14,7 @@ class App extends Component {
|
|||
return (
|
||||
<Switch>
|
||||
<Route path="/" exact component={Login} />
|
||||
<Route path="/ssh/:id" exact component={WebSSH} />
|
||||
<Route path="/ssh" exact component={WebSSH} />
|
||||
<Route component={Layout} />
|
||||
</Switch>
|
||||
);
|
||||
|
|
|
@ -27,7 +27,10 @@ export default class extends React.Component {
|
|||
<Breadcrumb>
|
||||
{this.props.children}
|
||||
</Breadcrumb>
|
||||
<div className={styles.title}>{title}</div>
|
||||
<div className={styles.title}>
|
||||
<span>{title}</span>
|
||||
{this.props.extra}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -141,6 +141,8 @@
|
|||
border-bottom: 1px solid #e8e8e8;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 9px;
|
||||
font-size: 20px;
|
||||
line-height: 50px;
|
||||
|
|
|
@ -22,7 +22,7 @@ export default observer(function () {
|
|||
<Descriptions.Item label="所属分组">
|
||||
<List >
|
||||
{group_ids.map(g_id => (
|
||||
<List.Item style={{padding: '6px 0'}}>{store.groups[g_id]}</List.Item>
|
||||
<List.Item key={g_id} style={{padding: '6px 0'}}>{store.groups[g_id]}</List.Item>
|
||||
))}
|
||||
</List>
|
||||
</Descriptions.Item>
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
* Copyright (c) <spug.dev@gmail.com>
|
||||
* Released under the AGPL-3.0 License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import { Table, Modal, message } from 'antd';
|
||||
import { PlusOutlined, ImportOutlined } from '@ant-design/icons';
|
||||
|
@ -11,17 +11,12 @@ import { Action, TableCard, AuthButton } from 'components';
|
|||
import { http, hasPermission } from 'libs';
|
||||
import store from './store';
|
||||
|
||||
@observer
|
||||
class ComTable extends React.Component {
|
||||
componentDidMount() {
|
||||
function ComTable() {
|
||||
useEffect(() => {
|
||||
store.fetchRecords()
|
||||
}
|
||||
}, [])
|
||||
|
||||
handleConsole = (info) => {
|
||||
window.open(`/ssh/${info.id}`)
|
||||
};
|
||||
|
||||
handleDelete = (text) => {
|
||||
function handleDelete(text) {
|
||||
Modal.confirm({
|
||||
title: '删除确认',
|
||||
content: `确定要删除【${text['name']}】?`,
|
||||
|
@ -33,55 +28,52 @@ class ComTable extends React.Component {
|
|||
})
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<TableCard
|
||||
rowKey="id"
|
||||
title={<TableCard.Search keys={['f_name/主机名称', 'f_host/连接地址']} onChange={(k, v) => store[k] = v}/>}
|
||||
loading={store.isFetching}
|
||||
dataSource={store.dataSource}
|
||||
onReload={store.fetchRecords}
|
||||
actions={[
|
||||
<AuthButton
|
||||
auth="host.host.add"
|
||||
type="primary"
|
||||
icon={<PlusOutlined/>}
|
||||
onClick={() => store.showForm()}>新建</AuthButton>,
|
||||
<AuthButton
|
||||
auth="host.host.add"
|
||||
type="primary"
|
||||
icon={<ImportOutlined/>}
|
||||
onClick={() => store.importVisible = true}>批量导入</AuthButton>
|
||||
]}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
showLessItems: true,
|
||||
hideOnSinglePage: true,
|
||||
showTotal: total => `共 ${total} 条`,
|
||||
pageSizeOptions: ['10', '20', '50', '100']
|
||||
}}>
|
||||
<Table.Column
|
||||
showSorterTooltip={false}
|
||||
title="主机名称"
|
||||
render={info => <Action.Button onClick={() => store.showDetail(info)}>{info.name}</Action.Button>}
|
||||
sorter={(a, b) => a.name.localeCompare(b.name)}/>
|
||||
<Table.Column title="连接地址" dataIndex="hostname" sorter={(a, b) => a.name.localeCompare(b.name)}/>
|
||||
<Table.Column hide width={100} title="端口" dataIndex="port"/>
|
||||
<Table.Column title="备注信息" dataIndex="desc"/>
|
||||
{hasPermission('host.host.edit|host.host.del|host.host.console') && (
|
||||
<Table.Column width={200} title="操作" render={info => (
|
||||
<Action>
|
||||
<Action.Button auth="host.host.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
|
||||
<Action.Button auth="host.host.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
|
||||
<Action.Button auth="host.host.console" onClick={() => this.handleConsole(info)}>Console</Action.Button>
|
||||
</Action>
|
||||
)}/>
|
||||
)}
|
||||
</TableCard>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<TableCard
|
||||
rowKey="id"
|
||||
title={<TableCard.Search keys={['f_name/主机名称', 'f_host/连接地址']} onChange={(k, v) => store[k] = v}/>}
|
||||
loading={store.isFetching}
|
||||
dataSource={store.dataSource}
|
||||
onReload={store.fetchRecords}
|
||||
actions={[
|
||||
<AuthButton
|
||||
auth="host.host.add"
|
||||
type="primary"
|
||||
icon={<PlusOutlined/>}
|
||||
onClick={() => store.showForm()}>新建</AuthButton>,
|
||||
<AuthButton
|
||||
auth="host.host.add"
|
||||
type="primary"
|
||||
icon={<ImportOutlined/>}
|
||||
onClick={() => store.importVisible = true}>批量导入</AuthButton>
|
||||
]}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
showLessItems: true,
|
||||
hideOnSinglePage: true,
|
||||
showTotal: total => `共 ${total} 条`,
|
||||
pageSizeOptions: ['10', '20', '50', '100']
|
||||
}}>
|
||||
<Table.Column
|
||||
showSorterTooltip={false}
|
||||
title="主机名称"
|
||||
render={info => <Action.Button onClick={() => store.showDetail(info)}>{info.name}</Action.Button>}
|
||||
sorter={(a, b) => a.name.localeCompare(b.name)}/>
|
||||
<Table.Column title="连接地址" dataIndex="hostname" sorter={(a, b) => a.name.localeCompare(b.name)}/>
|
||||
<Table.Column hide width={100} title="端口" dataIndex="port"/>
|
||||
<Table.Column title="备注信息" dataIndex="desc"/>
|
||||
{hasPermission('host.host.edit|host.host.del|host.host.console') && (
|
||||
<Table.Column width={160} title="操作" render={info => (
|
||||
<Action>
|
||||
<Action.Button auth="host.host.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
|
||||
<Action.Button auth="host.host.del" onClick={() => handleDelete(info)}>删除</Action.Button>
|
||||
</Action>
|
||||
)}/>
|
||||
)}
|
||||
</TableCard>
|
||||
)
|
||||
}
|
||||
|
||||
export default ComTable
|
||||
export default observer(ComTable)
|
||||
|
|
|
@ -5,7 +5,8 @@
|
|||
*/
|
||||
import React from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import { Row, Col } from 'antd';
|
||||
import { Row, Col, Button } from 'antd';
|
||||
import { RobotOutlined } from '@ant-design/icons';
|
||||
import { AuthDiv, Breadcrumb } from 'components';
|
||||
import Group from './Group';
|
||||
import ComTable from './Table';
|
||||
|
@ -16,9 +17,13 @@ import Selector from './Selector';
|
|||
import store from './store';
|
||||
|
||||
export default observer(function () {
|
||||
function openTerminal() {
|
||||
window.open('/ssh')
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthDiv auth="host.host.view">
|
||||
<Breadcrumb>
|
||||
<Breadcrumb extra={<Button type="primary" icon={<RobotOutlined/>} onClick={openTerminal}>Web 终端</Button>}>
|
||||
<Breadcrumb.Item>首页</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>主机管理</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
|
|
Loading…
Reference in New Issue