haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-06 17:33:18 +00:00
Code Issues Releases Wiki Activity

[system admin] statistic/traffic: fixed sort for users/orgs traffic (#4677)

Browse Source
This commit is contained in:
llj
2020-09-22 14:03:58 +08:00
committed by GitHub
parent d719fc1c90
commit 7474616129
5 changed files with 81 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
frontend/src/pages/sys-admin/statistic/traffic-organizations-table.js → frontend/src/pages/sys-admin/statistic/statistic-traffic-orgs.js
View File

@@ -10,19 +10,20 @@ import Loading from '../../../components/loading';
import { Utils } from '../../../utils/utils';
import toaster from '../../../components/toast';
class TrafficOrganizationsTable extends React.Component {
class OrgsTraffic extends React.Component {
constructor(props) {
super(props);
this.state = {
userTrafficList: [],
orgTrafficList: [],
perPage: 25,
currentPage: 1,
hasNextPage: false,
month: moment().format('YYYYMM'),
isLoading: false,
errorMessage: '',
sortOrder: 'asc'
sortBy: 'link_file_download',
sortOrder: 'desc'
};
this.initPage = 1;
this.initMonth = moment().format('YYYYMM');
@@ -35,16 +36,16 @@ class TrafficOrganizationsTable extends React.Component {
perPage: parseInt(urlParams.get('per_page') || perPage),
currentPage: parseInt(urlParams.get('page') || currentPage)
}, () => {
this.onGenerateReports(this.initMonth, this.state.currentPage);
this.getTrafficList(this.initMonth, this.state.currentPage);
});
}
getPreviousPage = () => {
this.onGenerateReports(this.state.month, this.state.currentPage - 1);
this.getTrafficList(this.state.month, this.state.currentPage - 1);
}
getNextPage = () => {
this.onGenerateReports(this.state.month, this.state.currentPage + 1);
this.getTrafficList(this.state.month, this.state.currentPage + 1);
}
handleChange = (e) => {
@@ -65,28 +66,22 @@ class TrafficOrganizationsTable extends React.Component {
});
return;
}
this.onGenerateReports(month, this.initPage);
this.getTrafficList(month, this.initPage);
e.target.blur();
e.preventDefault();
}
}
sortBySize = (sortByType, sortOrder) => {
let { userTrafficList } = this.state;
let newUserTrafficList = Utils.sortTraffic(userTrafficList, sortByType, sortOrder);
this.setState({
userTrafficList: newUserTrafficList,
sortOrder: sortOrder
});
}
onGenerateReports = (month, page) => {
let { perPage } = this.state;
getTrafficList = (month, page) => {
const { perPage, sortBy, sortOrder } = this.state;
const orderBy = `${sortBy}_${sortOrder}`;
this.setState({isLoading: true, errorMessage: ''});
seafileAPI.sysAdminListOrgTraffic(month, page, perPage).then(res => {
let userTrafficList = res.data.org_monthly_traffic_list.slice(0);
seafileAPI.sysAdminListOrgTraffic(month, page, perPage, orderBy).then(res => {
let orgTrafficList = res.data.org_monthly_traffic_list.slice(0);
this.setState({
userTrafficList: userTrafficList,
month: month,
currentPage: page,
orgTrafficList: orgTrafficList,
hasNextPage: res.data.has_next_page,
isLoading: false
});
@@ -96,14 +91,28 @@ class TrafficOrganizationsTable extends React.Component {
});
}
sortItems = (sortBy) => {
this.setState({
sortBy: sortBy,
sortOrder: this.state.sortOrder == 'asc' ? 'desc' : 'asc'
}, () => {
const { month, currentPage } = this.state;
this.getTrafficList(month, currentPage);
});
}
resetPerPage = (newPerPage) => {
this.setState({
perPage: newPerPage,
}, () => this.onGenerateReports(this.initPage, this.initMonth));
}, () => this.getTrafficList(this.initPage, this.initMonth));
}
render() {
let { userTrafficList, currentPage, hasNextPage, perPage, isLoading, errorMessage, sortOrder } = this.state;
const {
isLoading, errorMessage, orgTrafficList,
currentPage, hasNextPage, perPage,
sortBy, sortOrder
} = this.state;
return (
<Fragment>
<div className="d-flex align-items-center mt-4">
@@ -118,8 +127,8 @@ class TrafficOrganizationsTable extends React.Component {
</div>
{isLoading && <Loading />}
{!isLoading &&
<TrafficTable type={'org'} sortOrder={sortOrder} sortBySize={this.sortBySize} >
{userTrafficList.length > 0 && userTrafficList.map((item, index) => {
<TrafficTable type={'org'} sortItems={this.sortItems} sortBy={sortBy} sortOrder={sortOrder}>
{orgTrafficList.length > 0 && orgTrafficList.map((item, index) => {
return(
<TrafficTableBody
key={index}
@@ -143,4 +152,4 @@ class TrafficOrganizationsTable extends React.Component {
}
}
export default TrafficOrganizationsTable;
export default OrgsTraffic;

53
frontend/src/pages/sys-admin/statistic/traffic-user-table.js → frontend/src/pages/sys-admin/statistic/statistic-traffic-users.js
View File

@@ -10,7 +10,7 @@ import { gettext } from '../../../utils/constants';
import { Utils } from '../../../utils/utils';
import toaster from '../../../components/toast';
class TrafficOrganizationsTable extends React.Component {
class UsersTraffic extends React.Component {
constructor(props) {
super(props);
@@ -22,7 +22,8 @@ class TrafficOrganizationsTable extends React.Component {
month: moment().format('YYYYMM'),
isLoading: false,
errorMessage: '',
sortOrder: 'asc'
sortBy: 'link_file_download',
sortOrder: 'desc'
};
this.initPage = 1;
this.initMonth = moment().format('YYYYMM');
@@ -35,16 +36,16 @@ class TrafficOrganizationsTable extends React.Component {
perPage: parseInt(urlParams.get('per_page') || perPage),
currentPage: parseInt(urlParams.get('page') || currentPage)
}, () => {
this.onGenerateReports(this.initMonth, this.state.currentPage);
this.getTrafficList(this.initMonth, this.state.currentPage);
});
}
getPreviousPage = () => {
this.onGenerateReports(this.state.month, this.state.currentPage - 1);
this.getTrafficList(this.state.month, this.state.currentPage - 1);
}
getNextPage = () => {
this.onGenerateReports(this.state.month, this.state.currentPage + 1);
this.getTrafficList(this.state.month, this.state.currentPage + 1);
}
handleChange = (e) => {
@@ -54,15 +55,6 @@ class TrafficOrganizationsTable extends React.Component {
});
}
sortBySize = (sortByType, sortOrder) => {
let { userTrafficList } = this.state;
let newUserTrafficList = Utils.sortTraffic(userTrafficList, sortByType, sortOrder);
this.setState({
userTrafficList: newUserTrafficList,
sortOrder: sortOrder
});
}
handleKeyPress = (e) => {
let { month } = this.state;
if (e.key === 'Enter') {
@@ -74,21 +66,24 @@ class TrafficOrganizationsTable extends React.Component {
});
return;
}
this.onGenerateReports(month, this.initPage);
this.getTrafficList(month, this.initPage);
e.target.blur();
e.preventDefault();
}
}
onGenerateReports = (month, page) => {
let { perPage } = this.state;
getTrafficList = (month, page) => {
const { perPage, sortBy, sortOrder } = this.state;
const orderBy = `${sortBy}_${sortOrder}`;
this.setState({
isLoading: true,
errorMessage: ''
});
seafileAPI.sysAdminListUserTraffic(month, page, perPage).then(res => {
seafileAPI.sysAdminListUserTraffic(month, page, perPage, orderBy).then(res => {
let userTrafficList = res.data.user_monthly_traffic_list.slice(0);
this.setState({
month: month,
currentPage: page,
userTrafficList: userTrafficList,
hasNextPage: res.data.has_next_page,
isLoading: false
@@ -99,14 +94,28 @@ class TrafficOrganizationsTable extends React.Component {
});
}
sortItems = (sortBy) => {
this.setState({
sortBy: sortBy,
sortOrder: this.state.sortOrder == 'asc' ? 'desc' : 'asc'
}, () => {
const { month, currentPage } = this.state;
this.getTrafficList(month, currentPage);
});
}
resetPerPage = (newPerPage) => {
this.setState({
perPage: newPerPage,
}, () => this.onGenerateReports(this.initMonth, this.initPage));
}, () => this.getTrafficList(this.initMonth, this.initPage));
}
render() {
let { userTrafficList, currentPage, hasNextPage, perPage, isLoading, errorMessage, sortOrder } = this.state;
const {
isLoading, errorMessage, userTrafficList,
currentPage, hasNextPage, perPage,
sortBy, sortOrder
} = this.state;
return (
<Fragment>
<div className="d-flex align-items-center mt-4">
@@ -121,7 +130,7 @@ class TrafficOrganizationsTable extends React.Component {
</div>
{isLoading && <Loading />}
{!isLoading &&
<TrafficTable type={'user'} sortBySize={this.sortBySize} sortOrder={sortOrder}>
<TrafficTable type={'user'} sortItems={this.sortItems} sortBy={sortBy} sortOrder={sortOrder}>
{userTrafficList.length > 0 && userTrafficList.map((item, index) => {
return(
<TrafficTableBody
@@ -146,4 +155,4 @@ class TrafficOrganizationsTable extends React.Component {
}
}
export default TrafficOrganizationsTable;
export default UsersTraffic;

8
frontend/src/pages/sys-admin/statistic/statistic-traffic.js
View File

@@ -6,8 +6,8 @@ import MainPanelTopbar from '../main-panel-topbar';
import StatisticNav from './statistic-nav';
import StatisticCommonTool from './statistic-common-tool';
import Loading from '../../../components/loading';
import TrafficOrganizationsTable from './traffic-organizations-table';
import TrafficUserTable from './traffic-user-table';
import OrgsTraffic from './statistic-traffic-orgs';
import UsersTraffic from './statistic-traffic-users';
import StatisticChart from './statistic-chart';
import { Utils } from '../../../utils/utils';
import toaster from '../../../components/toast';
@@ -204,10 +204,10 @@ class StatisticTraffic extends React.Component {
</div>
}
{!isLoading && tabActive === 'user' &&
<TrafficUserTable />
<UsersTraffic />
}
{!isLoading && tabActive === 'organizations' &&
<TrafficOrganizationsTable />
<OrgsTraffic />
}
</div>
</div>

37
frontend/src/pages/sys-admin/statistic/traffic-table.js
View File

@@ -4,6 +4,9 @@ import { gettext } from '../../../utils/constants';
const propTypes = {
type: PropTypes.string.isRequired,
sortBy: PropTypes.string.isRequired,
sortOrder: PropTypes.string.isRequired,
sortItems: PropTypes.func.isRequired,
children: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
};
@@ -11,30 +14,10 @@ class TrafficTable extends React.Component {
constructor(props) {
super(props);
this.state = {
showIconName: 'link_file_download'
};
}
componentDidMount() {
let { showIconName } = this.state;
let { sortOrder } = this.props;
this.props.sortBySize(showIconName, sortOrder);
}
sortBySize = (sortByType) => {
let { sortOrder } = this.props;
let newSortOrder = sortOrder === 'asc' ? 'desc' : 'asc';
this.setState({
showIconName: sortByType
});
this.props.sortBySize(sortByType, newSortOrder);
}
render() {
const { type, sortOrder } = this.props;
const { showIconName } = this.state;
const { type, sortBy, sortOrder } = this.props;
const sortIcon = sortOrder == 'asc' ? <span className="fas fa-caret-up"></span> : <span className="fas fa-caret-down"></span>;
return (
@@ -42,12 +25,12 @@ class TrafficTable extends React.Component {
<thead>
<tr>
<th width="16%">{type == 'user' ? gettext('User') : gettext('Organization')}</th>
<th width="11%"><div className="d-block table-sort-op cursor-pointer" onClick={this.sortBySize.bind(this, 'sync_file_upload')}>{gettext('Sync Upload')} {showIconName === 'sync_file_upload' && sortIcon}</div></th>
<th width="14%"><div className="d-block table-sort-op cursor-pointer" onClick={this.sortBySize.bind(this, 'sync_file_donwload')}>{gettext('Sync Download')} {showIconName === 'sync_file_donwload' && sortIcon}</div></th>
<th width="11%"><div className="d-block table-sort-op cursor-pointer" onClick={this.sortBySize.bind(this, 'web_file_upload')}>{gettext('Web Upload')} {showIconName === 'web_file_upload' && sortIcon}</div></th>
<th width="14%"><div className="d-block table-sort-op cursor-pointer" onClick={this.sortBySize.bind(this, 'web_file_download')}>{gettext('Web Download')} {showIconName === 'web_file_download' && sortIcon}</div></th>
<th width="17%"><div className="d-block table-sort-op cursor-pointer" onClick={this.sortBySize.bind(this, 'link_file_upload')}>{gettext('Share link upload')} {showIconName === 'link_file_upload' && sortIcon}</div></th>
<th width="17%"><div className="d-block table-sort-op cursor-pointer" onClick={this.sortBySize.bind(this, 'link_file_download')}>{gettext('Share link download')} {showIconName === 'link_file_download' && sortIcon}</div></th>
<th width="11%"><div className="d-block table-sort-op cursor-pointer" onClick={this.props.sortItems.bind(this, 'sync_file_upload')}>{gettext('Sync Upload')} {sortBy === 'sync_file_upload' && sortIcon}</div></th>
<th width="14%"><div className="d-block table-sort-op cursor-pointer" onClick={this.props.sortItems.bind(this, 'sync_file_download')}>{gettext('Sync Download')} {sortBy === 'sync_file_download' && sortIcon}</div></th>
<th width="11%"><div className="d-block table-sort-op cursor-pointer" onClick={this.props.sortItems.bind(this, 'web_file_upload')}>{gettext('Web Upload')} {sortBy === 'web_file_upload' && sortIcon}</div></th>
<th width="14%"><div className="d-block table-sort-op cursor-pointer" onClick={this.props.sortItems.bind(this, 'web_file_download')}>{gettext('Web Download')} {sortBy === 'web_file_download' && sortIcon}</div></th>
<th width="17%"><div className="d-block table-sort-op cursor-pointer" onClick={this.props.sortItems.bind(this, 'link_file_upload')}>{gettext('Share link upload')} {sortBy === 'link_file_upload' && sortIcon}</div></th>
<th width="17%"><div className="d-block table-sort-op cursor-pointer" onClick={this.props.sortItems.bind(this, 'link_file_download')}>{gettext('Share link download')} {sortBy === 'link_file_download' && sortIcon}</div></th>
</tr>
</thead>
<tbody>

18
frontend/src/utils/utils.js
View File

@@ -1042,24 +1042,6 @@ export const Utils = {
return items;
},
sortTraffic(items, sortBy, sortOrder) {
let comparator;
switch(sortOrder) {
case 'asc':
comparator = function(a, b) {
return a[sortBy] < b[sortBy] ? -1 : 1;
};
break;
case 'desc':
comparator = function(a, b) {
return a[sortBy] < b[sortBy] ? 1 : -1;
};
break;
}
items.sort(comparator);
return items;
},
/*
* only used in the 'catch' part of a seafileAPI request
*/