150 lines
4.9 KiB
JavaScript
150 lines
4.9 KiB
JavaScript
import React from '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){
|
|
this.setState({...stateDefault()})
|
|
}else{
|
|
this.setState({
|
|
open: true
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
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 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) => {
|
|
if(t2.guid != t.guid) return null;
|
|
return (
|
|
<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; |