333 lines
11 KiB
JavaScript
333 lines
11 KiB
JavaScript
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 './Modals/DevModal';
|
|
import IPMIModal from './Modals/IPMIModal';
|
|
import IPMIInfoModal from './Modals/IPMIInfoModal';
|
|
|
|
const stateDefault = ()=>({
|
|
list: [],
|
|
bmctl: [],
|
|
devSel: {
|
|
id: null,
|
|
type: null,
|
|
data: {
|
|
snmp: [],
|
|
ipmi: []
|
|
}
|
|
},
|
|
devModal: {
|
|
open: false,
|
|
type: 0,
|
|
data: {}
|
|
},
|
|
ipmiModal: {
|
|
open: false,
|
|
type: 0,
|
|
data: {}
|
|
},
|
|
ipmiInfo: {
|
|
open: false,
|
|
ipmi: [],
|
|
log: [],
|
|
sensor: [],
|
|
bmcdata: [],
|
|
bmcgroup: []
|
|
}
|
|
})
|
|
|
|
class ServerPage extends React.Component {
|
|
state = {...stateDefault()}
|
|
|
|
componentDidMount(){
|
|
this.getDevList();
|
|
this.getBMCtl();
|
|
}
|
|
|
|
getDevList = () => {
|
|
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 || []
|
|
})
|
|
})
|
|
}
|
|
|
|
getBMCtl = () => {
|
|
fetch('/api/server/getbmctl', getRequest())
|
|
.then(response=>response.json())
|
|
.then(json => {
|
|
if(json.status == 1) {
|
|
this.setState({
|
|
bmctl: json.data.record || []
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
selectDevice = (id, refresh = false) => {
|
|
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 || [];
|
|
|
|
let jdata = {
|
|
...stateDefault().devSel,
|
|
id,
|
|
data: {
|
|
ipmi,
|
|
snmp
|
|
}
|
|
};
|
|
|
|
if(refresh) jdata.type = this.state.devSel.type;
|
|
|
|
this.setState({
|
|
devSel: jdata
|
|
})
|
|
})
|
|
}
|
|
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}
|
|
delData={this.delData}
|
|
bmctl={this.state.bmctl}
|
|
runbmctl={this.runbmctl} />
|
|
|
|
default:
|
|
return null;
|
|
}
|
|
}
|
|
|
|
openModal = (mtype, type = 0, data = {}) => {
|
|
switch(mtype){
|
|
case 'device':
|
|
this.setState({
|
|
devModal: {
|
|
open: true,
|
|
type,
|
|
data
|
|
}
|
|
})
|
|
break;
|
|
case 'ipmi':
|
|
this.setState({
|
|
ipmiModal:{
|
|
open: true,
|
|
type,
|
|
data
|
|
}
|
|
});
|
|
break;
|
|
case 'ipmiinfo':
|
|
this.getIPMIData(data.id);
|
|
break;
|
|
default:
|
|
return null;
|
|
}
|
|
}
|
|
|
|
closeModal = (mtype, cb = null) => {
|
|
switch(mtype){
|
|
case 'device':
|
|
this.setState({devModal: {...stateDefault().devModal}});
|
|
break;
|
|
case 'ipmi':
|
|
this.setState({ipmiModal:{...stateDefault().ipmiModal}});
|
|
break;
|
|
case 'ipmiinfo':
|
|
this.setState({ipmiInfo: {...stateDefault().ipmiInfo}});
|
|
break;
|
|
}
|
|
|
|
if(cb && typeof cb == 'function') cb();
|
|
}
|
|
|
|
submitModal = (mtype, type = 0, data = {}) => {
|
|
if(!mtype) return ;
|
|
let {i18n, showDialog, toggleLoading, callConfirm} = this.props;
|
|
let url = '';
|
|
switch(mtype){
|
|
case 'device':
|
|
if(type == 1 && !data.id) return showDialog('資料讀取錯誤');
|
|
if(!data.name) return showDialog('請填寫設備名稱');
|
|
url = type == 1 ? '/api/server/editdevice' : '/api/server/adddevice';
|
|
fetch(url, getRequest(data))
|
|
.then(response => response.json())
|
|
.then(json => {
|
|
if(json.status != 1) return showDialog(json.message);
|
|
this.closeModal(mtype, ()=>{this.getDevList()});
|
|
});
|
|
break;
|
|
case 'ipmi':
|
|
if(type == 1 && !data.id) return showDialog('資料讀取錯誤');
|
|
if(!data.ip) return showDialog('請填寫IP');
|
|
if(!data.account) return showDialog('請填寫帳號');
|
|
if(!data.password) return showDialog('請填寫密碼');
|
|
data.devuid = this.state.devSel.id;
|
|
url = type == 1 ? '/api/server/editipmi' : '/api/server/addipmi';
|
|
fetch(url, getRequest(data))
|
|
.then(response=>response.json())
|
|
.then(json => {
|
|
if(json.status != 1) return showDialog(json.message);
|
|
this.closeModal(mtype, ()=>{ this.selectDevice(this.state.devSel.id, true); })
|
|
})
|
|
default :
|
|
return null;
|
|
}
|
|
}
|
|
|
|
delData = (mtype, id) => {
|
|
if(!mtype || !id) return ;
|
|
let {i18n, showDialog, toggleLoading, callConfirm} = this.props;
|
|
switch(mtype) {
|
|
case 'device':
|
|
callConfirm('確定刪除此裝置?', ()=>{
|
|
fetch('/api/server/deldevice', getRequest({id}))
|
|
.then(response=>response.json())
|
|
.then(json => {
|
|
if(json.status != 1) return showDialog(json.message);
|
|
this.getDevList();
|
|
})
|
|
});
|
|
break;
|
|
case 'ipmi':
|
|
callConfirm('確定刪除此筆設定?', ()=>{
|
|
fetch('/api/server/delipmi', getRequest({id}))
|
|
.then(response=>response.json())
|
|
.then(json => {
|
|
if(json.status != 1) return showDialog(json.message);
|
|
this.selectDevice(this.state.devSel.id, true);
|
|
});
|
|
});
|
|
break;
|
|
}
|
|
}
|
|
|
|
getIPMIData = (id) => {
|
|
if(!id) return ;
|
|
let {i18n, showDialog, toggleLoading, callConfirm} = this.props;
|
|
toggleLoading(1);
|
|
fetch('/api/server/getipmiinfo', getRequest({id}))
|
|
.then(response=>response.json())
|
|
.then(json => {
|
|
toggleLoading(0);
|
|
if(json.status != 1) return showDialog(json.message);
|
|
let ipmi = json.data.record || [];
|
|
let sensor = json.data.rt.sensor || [];
|
|
let log = json.data.rt.log || [];
|
|
let bmcgroup = json.data.rt.bmcgroup || [];
|
|
let bmcdata = json.data.rt.bmcdata || [];
|
|
|
|
this.setState({
|
|
ipmiInfo: {
|
|
open: true,
|
|
log,
|
|
sensor,
|
|
ipmi,
|
|
bmcdata,
|
|
bmcgroup
|
|
}
|
|
})
|
|
})
|
|
}
|
|
|
|
runbmctl = (ctlid, ipmuid) => {
|
|
if(!ctlid || !ipmuid) return ;
|
|
let {i18n, showDialog, toggleLoading, callConfirm} = this.props;
|
|
toggleLoading(1);
|
|
fetch('/api/server/runbmctl', getRequest({ctlid, ipmuid}))
|
|
.then(response=>response.json())
|
|
.then(json => {
|
|
toggleLoading(0);
|
|
if(json.status != 1) return showDialog(json.message);
|
|
return showDialog('命令執行完成');
|
|
})
|
|
}
|
|
|
|
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}
|
|
delData={this.delData} />
|
|
</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}
|
|
submitModal={this.submitModal} />
|
|
<IPMIModal i18n={i18n}
|
|
open={this.state.ipmiModal.open}
|
|
type={this.state.ipmiModal.type}
|
|
data={this.state.ipmiModal.data}
|
|
closeModal={this.closeModal}
|
|
submitModal={this.submitModal} />
|
|
<IPMIInfoModal i18n={i18n}
|
|
{...this.state.ipmiInfo}
|
|
closeModal={this.closeModal} />
|
|
</Container>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default ServerPage; |