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

55
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 { Utils } from '../../../utils/utils';
import toaster from '../../../components/toast'; import toaster from '../../../components/toast';
class TrafficOrganizationsTable extends React.Component { class UsersTraffic extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
@@ -22,7 +22,8 @@ class TrafficOrganizationsTable extends React.Component {
month: moment().format('YYYYMM'), month: moment().format('YYYYMM'),
isLoading: false, isLoading: false,
errorMessage: '', errorMessage: '',
sortOrder: 'asc' sortBy: 'link_file_download',
sortOrder: 'desc'
}; };
this.initPage = 1; this.initPage = 1;
this.initMonth = moment().format('YYYYMM'); this.initMonth = moment().format('YYYYMM');
@@ -35,16 +36,16 @@ class TrafficOrganizationsTable extends React.Component {
perPage: parseInt(urlParams.get('per_page') || perPage), perPage: parseInt(urlParams.get('per_page') || perPage),
currentPage: parseInt(urlParams.get('page') || currentPage) currentPage: parseInt(urlParams.get('page') || currentPage)
}, () => { }, () => {
this.onGenerateReports(this.initMonth, this.state.currentPage); this.getTrafficList(this.initMonth, this.state.currentPage);
}); });
} }
getPreviousPage = () => { getPreviousPage = () => {
this.onGenerateReports(this.state.month, this.state.currentPage - 1); this.getTrafficList(this.state.month, this.state.currentPage - 1);
} }
getNextPage = () => { getNextPage = () => {
this.onGenerateReports(this.state.month, this.state.currentPage + 1); this.getTrafficList(this.state.month, this.state.currentPage + 1);
} }
handleChange = (e) => { 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) => { handleKeyPress = (e) => {
let { month } = this.state; let { month } = this.state;
if (e.key === 'Enter') { if (e.key === 'Enter') {
@@ -74,21 +66,24 @@ class TrafficOrganizationsTable extends React.Component {
}); });
return; return;
} }
this.onGenerateReports(month, this.initPage); this.getTrafficList(month, this.initPage);
e.target.blur(); e.target.blur();
e.preventDefault(); e.preventDefault();
} }
} }
onGenerateReports = (month, page) => { getTrafficList = (month, page) => {
let { perPage } = this.state; const { perPage, sortBy, sortOrder } = this.state;
const orderBy = `${sortBy}_${sortOrder}`;
this.setState({ this.setState({
isLoading: true, isLoading: true,
errorMessage: '' 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); let userTrafficList = res.data.user_monthly_traffic_list.slice(0);
this.setState({ this.setState({
month: month,
currentPage: page,
userTrafficList: userTrafficList, userTrafficList: userTrafficList,
hasNextPage: res.data.has_next_page, hasNextPage: res.data.has_next_page,
isLoading: false 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) => { resetPerPage = (newPerPage) => {
this.setState({ this.setState({
perPage: newPerPage, perPage: newPerPage,
}, () => this.onGenerateReports(this.initMonth, this.initPage)); }, () => this.getTrafficList(this.initMonth, this.initPage));
} }
render() { render() {
let { userTrafficList, currentPage, hasNextPage, perPage, isLoading, errorMessage, sortOrder } = this.state; const {
isLoading, errorMessage, userTrafficList,
currentPage, hasNextPage, perPage,
sortBy, sortOrder
} = this.state;
return ( return (
<Fragment> <Fragment>
<div className="d-flex align-items-center mt-4"> <div className="d-flex align-items-center mt-4">
@@ -121,7 +130,7 @@ class TrafficOrganizationsTable extends React.Component {
</div> </div>
{isLoading && <Loading />} {isLoading && <Loading />}
{!isLoading && {!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) => { {userTrafficList.length > 0 && userTrafficList.map((item, index) => {
return( return(
<TrafficTableBody <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 StatisticNav from './statistic-nav';
import StatisticCommonTool from './statistic-common-tool'; import StatisticCommonTool from './statistic-common-tool';
import Loading from '../../../components/loading'; import Loading from '../../../components/loading';
import TrafficOrganizationsTable from './traffic-organizations-table'; import OrgsTraffic from './statistic-traffic-orgs';
import TrafficUserTable from './traffic-user-table'; import UsersTraffic from './statistic-traffic-users';
import StatisticChart from './statistic-chart'; import StatisticChart from './statistic-chart';
import { Utils } from '../../../utils/utils'; import { Utils } from '../../../utils/utils';
import toaster from '../../../components/toast'; import toaster from '../../../components/toast';
@@ -204,10 +204,10 @@ class StatisticTraffic extends React.Component {
</div> </div>
} }
{!isLoading && tabActive === 'user' && {!isLoading && tabActive === 'user' &&
<TrafficUserTable /> <UsersTraffic />
} }
{!isLoading && tabActive === 'organizations' && {!isLoading && tabActive === 'organizations' &&
<TrafficOrganizationsTable /> <OrgsTraffic />
} }
</div> </div>
</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 = { const propTypes = {
type: PropTypes.string.isRequired, type: PropTypes.string.isRequired,
sortBy: PropTypes.string.isRequired,
sortOrder: PropTypes.string.isRequired,
sortItems: PropTypes.func.isRequired,
children: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]), children: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
}; };
@@ -11,30 +14,10 @@ class TrafficTable extends React.Component {
constructor(props) { constructor(props) {
super(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() { render() {
const { type, sortOrder } = this.props; const { type, sortBy, sortOrder } = this.props;
const { showIconName } = this.state;
const sortIcon = sortOrder == 'asc' ? <span className="fas fa-caret-up"></span> : <span className="fas fa-caret-down"></span>; const sortIcon = sortOrder == 'asc' ? <span className="fas fa-caret-up"></span> : <span className="fas fa-caret-down"></span>;
return ( return (
@@ -42,12 +25,12 @@ class TrafficTable extends React.Component {
<thead> <thead>
<tr> <tr>
<th width="16%">{type == 'user' ? gettext('User') : gettext('Organization')}</th> <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="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.sortBySize.bind(this, 'sync_file_donwload')}>{gettext('Sync Download')} {showIconName === 'sync_file_donwload' && 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.sortBySize.bind(this, 'web_file_upload')}>{gettext('Web Upload')} {showIconName === 'web_file_upload' && 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.sortBySize.bind(this, 'web_file_download')}>{gettext('Web Download')} {showIconName === 'web_file_download' && 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.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.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.sortBySize.bind(this, 'link_file_download')}>{gettext('Share link download')} {showIconName === 'link_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_download')}>{gettext('Share link download')} {sortBy === 'link_file_download' && sortIcon}</div></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>

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

@@ -1042,24 +1042,6 @@ export const Utils = {
return items; 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 * only used in the 'catch' part of a seafileAPI request
*/ */