update ipmi page not fin
This commit is contained in:
@@ -0,0 +1,40 @@
|
||||
import React from 'react';
|
||||
import { Menu, List, Icon } from 'semantic-ui-react';
|
||||
|
||||
|
||||
class DevList extends React.Component {
|
||||
|
||||
|
||||
render() {
|
||||
let {list, sel,selectDevice, openModal} = this.props;
|
||||
return (
|
||||
<Menu vertical>
|
||||
<Menu.Item>
|
||||
<Menu.Header className="clearfix">
|
||||
裝置列表
|
||||
<Icon name="plus"
|
||||
style={{float: 'right',cursor:'pointer'}}
|
||||
onClick={()=>openModal('device')} />
|
||||
</Menu.Header>
|
||||
<Menu.Menu>
|
||||
{
|
||||
list.map((t,idx)=>(
|
||||
<Menu.Item key={idx} active={sel == t.devuid}>
|
||||
<span style={{cursor:'pointer'}} onClick={()=>selectDevice(t.devuid)}>{t.name}</span>
|
||||
<Icon name="trash"
|
||||
style={{cursor:'pointer'}}
|
||||
onClick={()=>null} />
|
||||
<Icon name="edit"
|
||||
style={{cursor:'pointer'}}
|
||||
onClick={()=>openModal('device', 1, t)} />
|
||||
</Menu.Item>
|
||||
))
|
||||
}
|
||||
</Menu.Menu>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default DevList;
|
||||
@@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
import {Table, Button} from 'semantic-ui-react';
|
||||
|
||||
const SetListItem = ({ i18n, data, openModal }) => {
|
||||
|
||||
return (
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Button content="修改" basic onClick={()=>null} />
|
||||
<Button content="刪除" basic onClick={()=>null} />
|
||||
<Button content="ShowInfo" basic onClick={()=>null} />
|
||||
</Table.Cell>
|
||||
<Table.Cell>{data.ip}</Table.Cell>
|
||||
<Table.Cell>{data.account}</Table.Cell>
|
||||
<Table.Cell>{data.mac}</Table.Cell>
|
||||
</Table.Row>
|
||||
)
|
||||
}
|
||||
|
||||
export default SetListItem;
|
||||
@@ -0,0 +1,38 @@
|
||||
import React from 'react';
|
||||
import {Container, Segment, Button, Table} from 'semantic-ui-react';
|
||||
import SelListItem from './SetListItem';
|
||||
|
||||
const IPMIPage = ({i18n, list, openModal}) => {
|
||||
return (
|
||||
<Container>
|
||||
<Segment className="clearfix">
|
||||
<Button content="新增設定" icon="plus" floated="right" basic color="green" style={{marginBottom: '15px'}} />
|
||||
<Table>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell>操作</Table.HeaderCell>
|
||||
<Table.HeaderCell>IP</Table.HeaderCell>
|
||||
<Table.HeaderCell>帳號</Table.HeaderCell>
|
||||
<Table.HeaderCell>MAC Address</Table.HeaderCell>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{
|
||||
list.map((t,idx) => {
|
||||
return (
|
||||
<SelListItem key={idx}
|
||||
i18n={i18n}
|
||||
data={t}
|
||||
openModal={openModal}
|
||||
closeModal={closeModal} />
|
||||
)
|
||||
})
|
||||
}
|
||||
</Table.Body>
|
||||
</Table>
|
||||
</Segment>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
export default IPMIPage;
|
||||
@@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
import {Modal, Form, Input, Button, Grid} from 'semantic-ui-react';
|
||||
|
||||
const DevModel = ({ i18n, open, type, data, closeModal }) => {
|
||||
|
||||
return (
|
||||
<Modal open={open}>
|
||||
<Modal.Header content={type == 1 ? '修改裝置' : '新增裝置'} />
|
||||
<Modal.Content>
|
||||
<Form>
|
||||
<Form.Field>
|
||||
<Input label="裝置名稱" name="name" defaultValue={data.name} />
|
||||
</Form.Field>
|
||||
|
||||
<Grid columns={2}>
|
||||
<Grid.Column>
|
||||
<Button type="submit" content="送出" basic fluid/>
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
<Button type="button" fluid content="取消" basic onClick={()=>closeModal('device')} />
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
</Form>
|
||||
</Modal.Content>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export default DevModel;
|
||||
@@ -0,0 +1,18 @@
|
||||
import React from 'react';
|
||||
import {Container, Segment} from 'semantic-ui-react';
|
||||
|
||||
class SNMPPage extends React.Component {
|
||||
|
||||
render() {
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Segment>
|
||||
|
||||
</Segment>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default SNMPPage;
|
||||
@@ -0,0 +1,173 @@
|
||||
import React from 'react';
|
||||
import { Container, Segment, Menu, List, Grid } from 'semantic-ui-react';
|
||||
import {getRequest} from '../../../actions';
|
||||
import DevList from './DevList';
|
||||
import IPMIPage from './IPMIPage';
|
||||
import DevModal from './Models/DevModal';
|
||||
|
||||
const stateDefault = ()=>({
|
||||
list: [],
|
||||
devSel: {
|
||||
id: null,
|
||||
type: null,
|
||||
data: {
|
||||
snmp: [],
|
||||
ipmi: []
|
||||
}
|
||||
},
|
||||
devModal: {
|
||||
open: false,
|
||||
type: 0,
|
||||
data: {}
|
||||
},
|
||||
openedModal: null
|
||||
})
|
||||
|
||||
class ServerPage extends React.Component {
|
||||
state = {...stateDefault()}
|
||||
|
||||
componentDidMount(){
|
||||
this.getList();
|
||||
}
|
||||
|
||||
getList = () => {
|
||||
let {showDialog, toggleLoading} = this.props;
|
||||
toggleLoading(1);
|
||||
fetch('/api/server/getdevicelist', getRequest())
|
||||
.then(response => response.json())
|
||||
.then(json => {
|
||||
toggleLoading(0);
|
||||
if(json.status != 1) return showDialog(json.message);
|
||||
this.setState({
|
||||
list: json.data.record || []
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
selectDevice = (id) => {
|
||||
if(!id) return ;
|
||||
let {showDialog, toggleLoading} = this.props;
|
||||
toggleLoading(1);
|
||||
fetch('/api/server/getdevice', getRequest({id}))
|
||||
.then(response=>response.json())
|
||||
.then(json => {
|
||||
toggleLoading(0);
|
||||
if(json.status != 1) return showDialog(json.message);
|
||||
let ipmi = json.data.rt.ipmi || [];
|
||||
let snmp = json.data.rt.snmp || [];
|
||||
|
||||
this.setState({
|
||||
devSel: {
|
||||
...stateDefault().devSel,
|
||||
id,
|
||||
data: {
|
||||
ipmi,
|
||||
snmp
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
selectDataType = (type) => {
|
||||
this.setState({
|
||||
devSel: {
|
||||
...this.state.devSel,
|
||||
type: type
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
genSubPage = () => {
|
||||
let {i18n, showDialog, toggleLoading, callConfirm} = this.props;
|
||||
switch(this.state.devSel.type){
|
||||
case 'ipmi':
|
||||
return <IPMIPage i18n={i18n}
|
||||
showDialog={showDialog}
|
||||
toggleLoading={toggleLoading}
|
||||
callConfirm={callConfirm}
|
||||
list={this.state.devSel.data.ipmi}
|
||||
openModal={this.openModal}
|
||||
closeModal={this.closeModal} />
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
openModal = (mtype, type = 0, data = {}) => {
|
||||
switch(mtype){
|
||||
case 'device':
|
||||
this.setState({
|
||||
devModal: {
|
||||
open: true,
|
||||
type,
|
||||
data
|
||||
},
|
||||
openedModal: mtype
|
||||
})
|
||||
break;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
closeModal = (mtype) => {
|
||||
switch(mtype){
|
||||
case 'device':
|
||||
this.setState({devModal: {...stateDefault().devModal}, openedModal: null});
|
||||
break;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
submitModal = (type, data) => {
|
||||
let open = this.state.openedModal;
|
||||
if(open == null) return ;
|
||||
}
|
||||
|
||||
render() {
|
||||
let {i18n, showDialog, toggleLoading, callConfirm} = this.props;
|
||||
return (
|
||||
<Container fluid>
|
||||
<Grid>
|
||||
<Grid.Column width={3}>
|
||||
<DevList i18n={i18n}
|
||||
toggleLoading={toggleLoading}
|
||||
showDialog={showDialog}
|
||||
callConfirm={callConfirm}
|
||||
sel={this.state.devSel.id}
|
||||
selectDevice={this.selectDevice}
|
||||
list={this.state.list}
|
||||
openModal={this.openModal} />
|
||||
</Grid.Column>
|
||||
<Grid.Column width={13}>
|
||||
{
|
||||
this.state.devSel.id != null ?
|
||||
(
|
||||
<Container style={{marginBottom: '10px'}}>
|
||||
<Menu fluid widths={2}>
|
||||
<Menu.Item name="SNMP"
|
||||
active={this.state.devSel.type == 'snmp'}
|
||||
onClick={()=>this.selectDataType('snmp')}/>
|
||||
<Menu.Item name="IPMI"
|
||||
active={this.state.devSel.type == 'ipmi'}
|
||||
onClick={()=>this.selectDataType('ipmi')}/>
|
||||
</Menu>
|
||||
</Container>
|
||||
) : null
|
||||
}
|
||||
{this.genSubPage()}
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
<DevModal i18n={i18n}
|
||||
open={this.state.devModal.open}
|
||||
type={this.state.devModal.type}
|
||||
data={this.state.devModal.data}
|
||||
closeModal={this.closeModal} />
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default ServerPage;
|
||||
@@ -22,6 +22,7 @@ const MainMenu = ({i18n, show, toggleMenu, children, permissions, showDashboard,
|
||||
<MItem toLink="/admin/link" txt={i18n && 't' in i18n ? i18n.t('menu.item.link') : ''} permission={permissions.link} onClick={()=>toggleMenu()} />
|
||||
<MItem toLink="/admin/ipcam" txt={i18n && 't' in i18n ? i18n.t('menu.item.ipcam') : ''} permission={permissions.ipcam} onClick={()=>toggleMenu()} />
|
||||
<MItem toLink="/admin/wristband" txt={i18n && 't' in i18n ? i18n.t('menu.item.wristband') : ''} permission={permissions.wristband} onClick={()=>toggleMenu()} />
|
||||
<MItem toLink="/admin/server" txt="伺服器(Server)" permission={permissions.server} onClick={()=>toggleMenu()} />
|
||||
<MItem toLink="/admin" txt={i18n && 't' in i18n ? i18n.t('menu.item.logout') : ''} permission={true} onClick={()=>{
|
||||
sessionStorage.clear();
|
||||
location.replace('/');
|
||||
|
||||
Reference in New Issue
Block a user