From 5a24a0442545ba5730316305cae4f4c1bfea87d3 Mon Sep 17 00:00:00 2001 From: Hongyuan Ma Date: Sat, 28 Jul 2018 23:45:29 +0800 Subject: [PATCH] replace the table component in status page --- front-end/src/page/status/index.jsx | 45 +++-- front-end/src/service/record-service.jsx | 21 +++ front-end/src/util/record-table/index.css | 43 +++++ front-end/src/util/record-table/index.jsx | 205 ++++++++++++++++++++++ 4 files changed, 298 insertions(+), 16 deletions(-) create mode 100644 front-end/src/util/record-table/index.css create mode 100644 front-end/src/util/record-table/index.jsx diff --git a/front-end/src/page/status/index.jsx b/front-end/src/page/status/index.jsx index 3c1cd95..3093d1b 100644 --- a/front-end/src/page/status/index.jsx +++ b/front-end/src/page/status/index.jsx @@ -1,7 +1,7 @@ import React from 'react'; // import './index.css'; import ResultFilter from 'component/result-filter/index.jsx'; -import BasicTable from 'util/basic-table/index.jsx'; +import RecordTable from 'util/record-table/index.jsx'; import Record from 'service/record-service.jsx' import PGUtil from 'util/util.jsx' @@ -13,8 +13,9 @@ class Status extends React.Component { this.state = { isLoading: false, currentPage: 1, - total:3, + total: 3, filter: {}, + branch_list: [], list: [ // { // 'alias': 'a_name', @@ -31,30 +32,42 @@ class Status extends React.Component { }, - this.onPageChange = this.onPageChange.bind(this); + this.onPageChange = this.onPageChange.bind(this); this.onIsLoadingChange = this.onIsLoadingChange.bind(this); this.handleApplyBtnClick = this.handleApplyBtnClick.bind(this); this.loadRecordList = this.loadRecordList.bind(this); } - componentDidMount() { - this.loadRecordList(); + componentWillMount() { + this.loadBranchList(); } handleApplyBtnClick(params) { console.log('handle apply!') let self = this - this.setState({filter: params}, ()=> { + this.setState({filter: params}, () => { self.loadRecordList() }); } + loadBranchList() { + _record.getBranchList().then(res => { + this.setState({ + branch_list: res.results, + }); + console.dir(res.results) + }, errMsg => { + _util.errorTips('get branch list error'); + }); + } + + // load record list - loadRecordList(page=1) { + loadRecordList(page = 1) { let _this = this; let listParam = {}; - listParam= this.state.filter; + listParam = this.state.filter; listParam.page = page; _record.getRecordList(listParam).then(res => { @@ -105,6 +118,12 @@ class Status extends React.Component { let style = { display: show }; + console.log('hi') + console.dir(this.state.branch_list) + console.log('done') + let table_list = this.state.branch_list.map((value, index) => ( + + )) return (
@@ -118,14 +137,8 @@ class Status extends React.Component { - - {/**/} - {/*{listBody}*/} - {/**/} - {/**/} - - - {/**/} + {table_list} + {/**/}
) diff --git a/front-end/src/service/record-service.jsx b/front-end/src/service/record-service.jsx index 1e5a9b4..3aa81c4 100644 --- a/front-end/src/service/record-service.jsx +++ b/front-end/src/service/record-service.jsx @@ -4,6 +4,27 @@ import PGConstant from 'util/constant.jsx' const _util = new PGUtil(); class Record{ + // get branch list + getBranchList(){ + let url = PGConstant.base_url + '/branches'; + + return _util.request({ + type : 'get', + url : url, + }); + } + + getRecordListByBranch(listParam){ + let url = PGConstant.base_url + '/records-by-branch'; + + let data = {}; + data = listParam; + return _util.request({ + type : 'get', + url : url, + data : data + }); + } // get record list getRecordList(listParam){ let url = PGConstant.base_url + '/records'; diff --git a/front-end/src/util/record-table/index.css b/front-end/src/util/record-table/index.css new file mode 100644 index 0000000..0fe34f8 --- /dev/null +++ b/front-end/src/util/record-table/index.css @@ -0,0 +1,43 @@ +.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 diff --git a/front-end/src/util/record-table/index.jsx b/front-end/src/util/record-table/index.jsx new file mode 100644 index 0000000..d68eb7b --- /dev/null +++ b/front-end/src/util/record-table/index.jsx @@ -0,0 +1,205 @@ +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 Record from 'service/record-service.jsx' +import './index.css'; +const _record = new Record(); +function Bubble(props) { + + if (props.num <= 0) { + return null; + } + let className = props.name + 'IconClassName'; + return ( + + ); +} + +//todo +// function TrendCell(trend) { +// const isNull = !list; +// const isEmpty = !isNull && !list.length; +// let improvedIconClassName = trend.improved > 0 ? 'improved' : 'anonymous' +// let quoIconClassName = trend.quo > 0 ? 'quo' : 'anonymous' +// let regressiveIconClassName = trend.regressive > 0 ? 'regressive' : 'anonymous' +// if (!trend.is_first) { +// return ( +// +// first report +// +// ); +// } else { +// return ( +//
+// +// +// +// +// +// +// +// +// +// +// +// +//
+// ); +// } +// +// } + +// general basic table +class RecordTable extends React.Component { + constructor(props) { + super(props); + this.state = { + branch: this.props.branch, + isFirstLoading: true, + total: this.props.total, + currentPage: 1, + list: [] + } + } + + componentWillMount() { + this.loadRecordListByBranch(this.state.branch); + } + loadRecordListByBranch(branch,page=1) { + let _this = this; + let listParam = {}; + listParam.page = page; + listParam.branch = branch; + + _record.getRecordListByBranch(listParam).then(res => { + console.log('branch res is:' + res) + this.setState({ + list: res.results, + total: res.count, + isLoading: false + }); + }, errMsg => { + this.setState({ + list: [] + }); + _util.errorTips(errMsg); + console.log(errMsg) + }); + + console.log(this.state.list) + } + 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.state.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 ( + + + {/*alias*/} + {alias} + + {/*system*/} + {system} + + {/*branch*/} + {/*{branch}*/} + + {/*trending-data*/} + + + + + + + + + + + + + + + + + + Link + + + + + {/*date*/} + {record.add_time} + + ); + }); + + return ( + + + {/**/} + {/*Branch: {this.state.branch}*/} + {/**/} + + Alias + System + {/*Branch*/} + Trending + Detail + Date + + + improvement + status quo + regression + + + + + + {listBody} + + + + + this.onPageNumChange(current)} pageSize={2} + current={this.state.currentPage} total={this.props.total}/> + + + + + +
+ ); + + } + + +} + +export default RecordTable; \ No newline at end of file -- 2.39.5