import React from 'react';
import './index.css';
import ResultFilter from 'component/result-filter/index.jsx';
-import BasicTable from 'util/basic-table/index.jsx';
+import MachineTable from 'util/machine-table/index.jsx';
import UserInfoCard from 'component/userinfo-card/index.jsx'
import Record from 'service/record-service.jsx'
import PGUtil from 'util/util.jsx'
super(props);
this.state = {
isLoading: false,
+ machines:[],
+ userinfo: {}
}
}
componentDidMount(){
+ let user = _util.getStorage('userInfo')
+ console.log(user.token)
this.loadUserMachineManageList();
}
- loadUserMachineManageList(){
+
+ loadUserInfo(){
+ _user.getUserInfo().then(res => {
+ this.setState({
+ userinfo: res.userinfo,
+ });
+ }, errMsg => {
+ _mm.errorTips(errMsg);
+ });
+ }
+
+ loadUserMachineManageList(page=1){
_user.getUserMachineManageList().then(res => {
- this.setState(res);
+ this.setState({
+ machines: res.machines,
+ total: res.count,
+ isLoading: false
+ });
}, errMsg => {
_mm.errorTips(errMsg);
});
<h2 >Welcome Back, {this.state.username}</h2>
</div>
-
+ <MachineTable list={this.state.machines} total={this.state.total} current={this.state.currentPage} loadfunc={this.loadRecordList}/>
</div>
</div>
--- /dev/null
+.ReactTable .rt-th{
+ background-color: #ffffff;
+}
+
+.ReactTable .-pagination{
+ background-color: #ffffff;
+}
+
+.ReactTable .rt-tr-group:nth-child(2n) {
+ background-color: #ffffff;
+}
+
+.bgc-clear{
+ background-color: #ffffff;
+}
+
+.anonymous {
+ color: #e8e8e8;
+}
+
+.anonymous :hover {
+ color: lightgrey;
+}
+.improved {
+ color: #7cb305;
+}
+
+.quo {
+ color: #40a9ff;
+}
+
+.regressive {
+ color: #fa541c;
+}
+
+.mini-label {
+ font-weight: 100!important;
+ font-size: 0.1em!important;
+ min-width: 1.3em!important;
+ min-height: 0.1em!important;
+ padding: .2em!important;
+ line-height: 0.5em!important;
+}
\ No newline at end of file
--- /dev/null
+import React from 'react';
+import {Link} from 'react-router-dom';
+import {Icon, Table, Label, Message, Button} from 'semantic-ui-react'
+import Pagination from 'util/pagination/index.jsx'
+import './index.css';
+
+function Bubble(props) {
+
+ if (props.num <= 0) {
+ return null;
+ }
+ let className = props.name + 'IconClassName';
+ return (
+ <Label circular size="mini" className={"mini-label " + className}>
+ {props.num}
+ </Label>
+ );
+}
+
+// general basic table
+class MachineTable extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ isFirstLoading: true,
+ total: this.props.total,
+ currentPage: 1,
+ }
+ }
+
+
+ onPageNumChange(current) {
+ this.setState({
+ currentPage: current
+ }, () => {
+ this.props.loadfunc(current);
+ });
+ console.log('current:' + this.state.currentPage)
+ }
+
+ render() {
+ // let branch = record.pg_info.pg_branch;
+ let _list = this.props.list || []
+ let style = {
+ display: 'show'
+ };
+ let listBody = _list.map((record, index) => {
+ let machine = record.machine_info[0];
+ let system = machine.os_name + ' ' + machine.os_version + ' ' + machine.comp_name + ' ' + machine.comp_version;
+ let alias = machine.alias;
+
+
+ let trend = record.trend
+ let improvedIconClassName = trend.improved > 0 ? 'improved' : 'anonymous'
+ let quoIconClassName = trend.quo > 0 ? 'quo' : 'anonymous'
+ let regressiveIconClassName = trend.regressive > 0 ? 'regressive' : 'anonymous'
+ return (
+
+ <Table.Row key={index}>
+ {/*alias*/}
+ <Table.Cell><a href="#">{alias}</a></Table.Cell>
+
+ {/*system*/}
+ <Table.Cell><a href="#">{system}</a></Table.Cell>
+
+ {/*State*/}
+ <Table.Cell>acitve</Table.Cell>
+
+ {/*lastest-records*/}
+
+ <Table.Cell textAlign='center'>
+ <Icon className={"bgc-clear " + improvedIconClassName} name='smile outline' size='large'/>
+ <Bubble num={trend.improved} name="improved"/>
+ </Table.Cell>
+
+ {/*machine history*/}
+ <Table.Cell textAlign='center'>
+ <Link color='linkedin' to={'machineInfo/' + record.uuid}>
+ <Icon name='linkify'/> Link
+ </Link>
+ </Table.Cell>
+
+ {/*date*/}
+ <Table.Cell>{record.add_time}</Table.Cell>
+ </Table.Row>
+ );
+ });
+
+ return (
+ <Table celled structured compact textAlign='center'>
+ <Table.Header>
+ {/*<Table.Row>*/}
+ {/*<Table.HeaderCell rowSpan='9'>Branch: 10_STABLE</Table.HeaderCell>*/}
+ {/*</Table.Row>*/}
+ <Table.Row>
+ <Table.HeaderCell rowSpan='2'>Alias</Table.HeaderCell>
+ <Table.HeaderCell rowSpan='2'>System</Table.HeaderCell>
+ {/*<Table.HeaderCell rowSpan='2'>Branch</Table.HeaderCell>*/}
+ <Table.HeaderCell rowSpan='2'>State</Table.HeaderCell>
+ <Table.HeaderCell rowSpan='3'>Lastest</Table.HeaderCell>
+ <Table.HeaderCell rowSpan='2'>History</Table.HeaderCell>
+ <Table.HeaderCell rowSpan='2'>Date</Table.HeaderCell>
+ </Table.Row>
+ {/*<Table.Row>*/}
+ {/*<Table.HeaderCell>improvement</Table.HeaderCell>*/}
+ {/*<Table.HeaderCell>status quo</Table.HeaderCell>*/}
+ {/*<Table.HeaderCell>regression</Table.HeaderCell>*/}
+ {/*</Table.Row>*/}
+
+ </Table.Header>
+
+ <Table.Body>
+ {listBody}
+ </Table.Body>
+ <Table.Footer>
+ <Table.Row>
+ <Table.HeaderCell colSpan='10'>
+
+ <Pagination style={style} onChange={(current) => this.onPageNumChange(current)} pageSize={2}
+ current={this.state.currentPage} total={this.props.total}/>
+ </Table.HeaderCell>
+
+ </Table.Row>
+ </Table.Footer>
+ </Table>
+ );
+
+ }
+
+
+}
+
+export default MachineTable;
\ No newline at end of file
projects / pgperffarm.git / commitdiff