From 3c2fc9dfee3f0a6666d4ac67653ab82d3e1f6cca Mon Sep 17 00:00:00 2001 From: Hongyuan Ma Date: Sat, 7 Jul 2018 18:57:06 +0800 Subject: [PATCH] add MachineTable in portal page --- front-end/src/page/portal/index.css | 3 +- front-end/src/page/portal/index.jsx | 27 ++++- front-end/src/service/user-service.jsx | 10 ++ front-end/src/util/machine-table/index.css | 43 +++++++ front-end/src/util/machine-table/index.jsx | 133 +++++++++++++++++++++ front-end/src/util/util.jsx | 4 + web/apps/user_operation/views.py | 1 + web/pgperffarm/settings.py | 3 + 8 files changed, 219 insertions(+), 5 deletions(-) create mode 100644 front-end/src/util/machine-table/index.css create mode 100644 front-end/src/util/machine-table/index.jsx diff --git a/front-end/src/page/portal/index.css b/front-end/src/page/portal/index.css index d53a1d5..efe47f7 100644 --- a/front-end/src/page/portal/index.css +++ b/front-end/src/page/portal/index.css @@ -1,3 +1,4 @@ .panel-blue{ - border-top: 3px solid #2497ba; + /*border-top: 3px solid #2497ba;*/ + border-top: 3px solid rgb(2,141,193); } \ No newline at end of file diff --git a/front-end/src/page/portal/index.jsx b/front-end/src/page/portal/index.jsx index 3f4ca85..fe4ecfe 100644 --- a/front-end/src/page/portal/index.jsx +++ b/front-end/src/page/portal/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 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' @@ -15,15 +15,34 @@ class Portal extends React.Component { 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); }); @@ -65,7 +84,7 @@ class Portal extends React.Component {

Welcome Back, {this.state.username}

- + diff --git a/front-end/src/service/user-service.jsx b/front-end/src/service/user-service.jsx index 1ca1f0d..bbb600e 100644 --- a/front-end/src/service/user-service.jsx +++ b/front-end/src/service/user-service.jsx @@ -54,6 +54,16 @@ class User{ } }); } + + getUserInfo(){ + let url = PGConstant.base_url + '/userinfo'; + return _util.request({ + type : 'get', + url : url, + data : {} + }); + } + } export default User; \ No newline at end of file diff --git a/front-end/src/util/machine-table/index.css b/front-end/src/util/machine-table/index.css new file mode 100644 index 0000000..0fe34f8 --- /dev/null +++ b/front-end/src/util/machine-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/machine-table/index.jsx b/front-end/src/util/machine-table/index.jsx new file mode 100644 index 0000000..356bc32 --- /dev/null +++ b/front-end/src/util/machine-table/index.jsx @@ -0,0 +1,133 @@ +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 ( + + ); +} + +// 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 ( + + + {/*alias*/} + {alias} + + {/*system*/} + {system} + + {/*State*/} + acitve + + {/*lastest-records*/} + + + + + + + {/*machine history*/} + + + Link + + + + {/*date*/} + {record.add_time} + + ); + }); + + return ( + + + {/**/} + {/*Branch: 10_STABLE*/} + {/**/} + + Alias + System + {/*Branch*/} + State + Lastest + History + Date + + {/**/} + {/*improvement*/} + {/*status quo*/} + {/*regression*/} + {/**/} + + + + + {listBody} + + + + + + this.onPageNumChange(current)} pageSize={2} + current={this.state.currentPage} total={this.props.total}/> + + + + +
+ ); + + } + + +} + +export default MachineTable; \ No newline at end of file diff --git a/front-end/src/util/util.jsx b/front-end/src/util/util.jsx index 0af29a2..3492750 100644 --- a/front-end/src/util/util.jsx +++ b/front-end/src/util/util.jsx @@ -4,11 +4,15 @@ import PGConstant from 'util/constant.jsx' class PGUtil { request(param) { return new Promise((resolve, reject) => { + let user = this.getStorage('userInfo') $.ajax({ type: param.type || 'get', url: param.url || '', dataType: param.dataType || 'json', data: param.data || null, + headers:{ + 'Authorization': 'Token ' + user.token + }, success: res => { // request success diff --git a/web/apps/user_operation/views.py b/web/apps/user_operation/views.py index 5e8ea8a..fb46d05 100644 --- a/web/apps/user_operation/views.py +++ b/web/apps/user_operation/views.py @@ -16,6 +16,7 @@ class UserMachineListViewSet(mixins.ListModelMixin, viewsets.GenericViewSet): List test records """ authentication_classes = (JSONWebTokenAuthentication, authentication.SessionAuthentication ) + permission_classes = (permissions.IsAuthenticated, ) queryset = UserMachine.objects.all().order_by('add_time') serializer_class = UserMachineManageSerializer # pagination_class = StandardResultsSetPagination diff --git a/web/pgperffarm/settings.py b/web/pgperffarm/settings.py index 8606f39..2a62143 100644 --- a/web/pgperffarm/settings.py +++ b/web/pgperffarm/settings.py @@ -1,4 +1,5 @@ # Build paths inside the project like this: os.path.join(BASE_DIR, ...) +import datetime import os import sys @@ -192,4 +193,6 @@ ALLOWED_HOSTS = ['*'] JWT_AUTH = { 'JWT_RESPONSE_PAYLOAD_HANDLER': 'users.jwt_handler.jwt_response_payload_handler', + 'JWT_EXPIRATION_DELTA': datetime.timedelta(seconds=7200), + 'JWT_AUTH_HEADER_PREFIX': 'Token', } \ No newline at end of file -- 2.39.5