update ipmi page

This commit is contained in:
Jay 2017-05-25 15:53:26 +08:00
parent 432ff46ecd
commit 58057bcfa0
2 changed files with 123 additions and 6 deletions

View File

@ -1,12 +1,13 @@
import React from 'react';
import {Modal, Segment} from 'semantic-ui-react';
import {Modal, Segment, Menu, Label, Container, Header, List, Table} from 'semantic-ui-react';
import {convertTime} from '../../../../tools';
const stateDefault = () => ({
open: false,
tabIdx: 1
})
class IPMIInfoModal extends React.Component {
state = {...stateDefault()}
componentWillReceiveProps(nextProps){
if(nextProps.open != this.state.open){
if(nextProps.open == false){
@ -19,16 +20,129 @@ class IPMIInfoModal extends React.Component {
}
}
changeIdx = (idx) => {
this.setState({
tabIdx: idx
})
}
getInfoView = () => {
switch(this.state.tabIdx){
case 1:
return <BMCContent group={this.props.bmcgroup} data={this.props.bmcdata} />
case 2:
return <SensorContent sensor={this.props.sensor} />
case 3:
return <LogContent log={this.props.log} />
default:
return null;
}
}
render() {
let {closeModal} = this.props;
return (
<Modal fluid open={this.state.open} onClose={()=>null}>
<Modal size="fullscreen" open={this.state.open} onClose={()=>closeModal('ipmiinfo')}>
<Modal.Header content="IPMI Info" />
<Modal.Content>
<Menu attached="top" tabular>
<Menu.Item name="BMC Info" active={this.state.tabIdx == 1} onClick={()=>this.changeIdx(1)} />
<Menu.Item name="Sensor" active={this.state.tabIdx == 2} onClick={()=>this.changeIdx(2)} />
<Menu.Item name="Log" active={this.state.tabIdx == 3} onClick={()=>this.changeIdx(3)} />
</Menu>
<Segment attached="bottom">
{this.getInfoView()}
</Segment>
</Modal.Content>
</Modal>
)
}
}
const BMCContent = ({group, data}) => {
return (
<Container fluid>
{
group.map((t,idx) => (
<Segment key={idx}>
<Header as="h3" color="blue">
{t.name}
<Header.Subheader>{t.value}</Header.Subheader>
</Header>
<List>
{
data.map((t2, idx) => (
<List.Item key={idx}>
<Label content={t2.name} basic />
{t2.value}
</List.Item>
))
}
</List>
</Segment>
))
}
</Container>
)
}
const LogContent = ({log}) => {
return (
<Container fluid>
<Table>
<Table.Header>
<Table.Row>
<Table.HeaderCell>行號</Table.HeaderCell>
<Table.HeaderCell>時間</Table.HeaderCell>
<Table.HeaderCell>內容</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{
log.map((t,idx) => (
<Table.Row>
<Table.Cell>{t.line}</Table.Cell>
<Table.Cell>{convertTime(t.time, true)}</Table.Cell>
<Table.Cell>{t.content}</Table.Cell>
</Table.Row>
))
}
</Table.Body>
</Table>
</Container>
)
}
const SensorContent = ({sensor}) => {
return (
<Container fluid>
<Table>
<Table.Header>
<Table.Row>
<Table.HeaderCell>名稱</Table.HeaderCell>
<Table.HeaderCell>數值</Table.HeaderCell>
<Table.HeaderCell>單位</Table.HeaderCell>
<Table.HeaderCell>狀態</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{
sensor.map((t,idx) => (
<Table.Row>
<Table.Cell>{t.name}</Table.Cell>
<Table.Cell>{t.value}</Table.Cell>
<Table.Cell>{t.unit}</Table.Cell>
<Table.Cell>{t.status}</Table.Cell>
</Table.Row>
))
}
</Table.Body>
</Table>
</Container>
)
}
export default IPMIInfoModal;

View File

@ -5,7 +5,7 @@ import DevList from './DevList';
import IPMIPage from './IPMIPage';
import DevModal from './Modals/DevModal';
import IPMIModal from './Modals/IPMIModal';
import IPMIInfoModal from './Modals'
import IPMIInfoModal from './Modals/IPMIInfoModal';
const stateDefault = ()=>({
list: [],
@ -293,6 +293,9 @@ class ServerPage extends React.Component {
data={this.state.ipmiModal.data}
closeModal={this.closeModal}
submitModal={this.submitModal} />
<IPMIInfoModal i18n={i18n}
{...this.state.ipmiInfo}
closeModal={this.closeModal} />
</Container>
)
}