update ipmi page

src/components/AdminPage/Server/Modals/IPMIInfoModal.js

@@ -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 {
         }
     }
 
-    render() {
+    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;

src/components/AdminPage/Server/index.js

@@ -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>
         )
     }