Merge branch '7.1' into master

2025-09-15 23:00:57 +00:00 · 2020-09-30 11:05:44 +08:00
parent 267e9f525c 1241f21462
commit 0bff0c1104
27 changed files with 524 additions and 220 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -12022,9 +12022,9 @@
      }
    },
    "seafile-js": {
-      "version": "0.2.154",
-      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.154.tgz",
-      "integrity": "sha512-8Vy+RIK4P7yZowr/smgd/6eLOOpT4pq4UbJXhjE0XDp6s6WERmLr1nZUMA1QjMERMlfJ3ymq2Jk30rLsN82Lrg==",
+      "version": "0.2.156",
+      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.156.tgz",
+      "integrity": "sha512-D8ZUwNNay8WTFqIMF6AzysKFFkzFAdGgGapHsvpijOl2lETg9Pg+OlWawlFzDxaTKu4JxSTk2g9On/RGvqswpQ==",
      "requires": {
        "axios": "^0.18.0",
        "form-data": "^2.3.2",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -44,7 +44,7 @@
    "react-responsive": "^6.1.2",
    "react-select": "^2.4.1",
    "reactstrap": "^6.4.0",
-    "seafile-js": "^0.2.154",
+    "seafile-js": "0.2.156",
    "socket.io-client": "^2.2.0",
    "sw-precache-webpack-plugin": "0.11.4",
    "unified": "^7.0.0",
--- a/frontend/src/components/dialog/confirm-unlink-device.js
+++ b/frontend/src/components/dialog/confirm-unlink-device.js
@@ -0,0 +1,59 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalHeader, ModalBody, ModalFooter, Button, FormGroup, Label, Input } from 'reactstrap';
+import { gettext } from '../../utils/constants';
+
+const propTypes = {
+  executeOperation: PropTypes.func.isRequired,
+  toggleDialog: PropTypes.func.isRequired
+};
+
+class ConfirmUnlinkDevice extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isChecked: false
+    };
+  }
+
+  toggle = () => {
+    this.props.toggleDialog();
+  }
+
+  executeOperation = () => {
+    this.toggle();
+    this.props.executeOperation(this.state.isChecked);
+  }
+
+  onInputChange = (e) => {
+    this.setState({
+      isChecked: e.target.checked
+    });
+  }
+
+  render() {
+    return (
+      <Modal isOpen={true} toggle={this.toggle}>
+        <ModalHeader toggle={this.toggle}>{gettext('Unlink device')}</ModalHeader>
+        <ModalBody>
+          <p>{gettext('Are you sure you want to unlink this device?')}</p>
+          <FormGroup check>
+            <Label check>
+              <Input type="checkbox" checked={this.state.isChecked} onChange={this.onInputChange} />
+              <span>{gettext('Delete files from this device the next time it comes online.')}</span>
+            </Label>
+          </FormGroup>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
+          <Button color="primary" onClick={this.executeOperation}>{gettext('Unlink')}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+ConfirmUnlinkDevice.propTypes = propTypes;
+
+export default ConfirmUnlinkDevice;
--- a/frontend/src/components/dialog/org-add-user-dialog.js
+++ b/frontend/src/components/dialog/org-add-user-dialog.js
@@ -30,7 +30,7 @@ class AddOrgUserDialog extends React.Component {
    if (isValid) {
      let { email, name, password } = this.state;
      this.setState({isAddingUser: true});
-      this.props.handleSubmit(email, name, password);
+      this.props.handleSubmit(email, name.trim(), password);
    }
  } 

@@ -71,7 +71,7 @@ class AddOrgUserDialog extends React.Component {
  }

  inputName = (e) => {
-    let name = e.target.value.trim();
+    let name = e.target.value;
    this.setState({name: name});
  }

@@ -107,7 +107,7 @@ class AddOrgUserDialog extends React.Component {
      this.setState({errMessage: errMessage});
      return false;
    }
-    let name = this.state.name;
+    let name = this.state.name.trim();
    if (!name.length) {
      errMessage = gettext('Name is required');
      this.setState({errMessage: errMessage});
--- a/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
+++ b/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
@@ -4,11 +4,13 @@ import moment from 'moment';
 import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
 import { Link } from '@reach/router';
 import { Utils } from '../../utils/utils';
-import { gettext, siteRoot, isPro, username, folderPermEnabled, isSystemStaff } from '../../utils/constants';
+import { gettext, siteRoot, isPro, username, folderPermEnabled, isSystemStaff, enableResetEncryptedRepoPassword, isEmailConfigured } from '../../utils/constants';
 import ModalPortal from '../../components/modal-portal';
 import ShareDialog from '../../components/dialog/share-dialog';
 import LibSubFolderPermissionDialog from '../../components/dialog/lib-sub-folder-permission-dialog';
 import DeleteRepoDialog from '../../components/dialog/delete-repo-dialog';
+import ChangeRepoPasswordDialog from '../../components/dialog/change-repo-password-dialog';
+import ResetEncryptedRepoPasswordDialog from '../../components/dialog/reset-encrypted-repo-password-dialog';
 import Rename from '../rename';
 import { seafileAPI } from '../../utils/seafile-api';
 import LibHistorySettingDialog from '../dialog/lib-history-setting-dialog';
@@ -46,6 +48,8 @@ class SharedRepoListItem extends React.Component {
      isAPITokenDialogShow: false,
      isRepoShareUploadLinksDialogOpen: false,
      isRepoDeleted: false,
+      isChangePasswordDialogShow: false,
+      isResetPasswordDialogShow: false
    };
    this.isDeparementOnwerGroupMember = false;
  }
@@ -141,6 +145,12 @@ class SharedRepoListItem extends React.Component {
      case 'Share Links Admin':
        this.toggleRepoShareUploadLinksDialog();
        break;
+      case 'Change Password':
+        this.onChangePasswordToggle();
+        break;
+      case 'Reset Password':
+        this.onResetPasswordToggle();
+        break;
      default:
        break;
    }
@@ -231,6 +241,14 @@ class SharedRepoListItem extends React.Component {
    this.setState({isAPITokenDialogShow: !this.state.isAPITokenDialogShow});
  }

+  onChangePasswordToggle = () => {
+    this.setState({isChangePasswordDialogShow: !this.state.isChangePasswordDialogShow});
+  }
+
+  onResetPasswordToggle = () => {
+    this.setState({isResetPasswordDialogShow: !this.state.isResetPasswordDialogShow});
+  }
+
  translateMenuItem = (menuItem) => {
    let translateResult = '';
    switch(menuItem) {
@@ -255,6 +273,12 @@ class SharedRepoListItem extends React.Component {
      case 'Share Links Admin':
        translateResult = gettext('Share Links Admin');
        break;
+      case 'Change Password':
+        translateResult = gettext('Change Password');
+        break;
+      case 'Reset Password':
+        translateResult = gettext('Reset Password');
+        break;
      case 'API Token':
        translateResult = 'API Token'; // translation is not needed here
        break;
@@ -280,7 +304,14 @@ class SharedRepoListItem extends React.Component {
            if (folderPermEnabled) {
              operations.push('Folder Permission');
            }
-            operations.push('Share Links Admin', 'History Setting', 'API Token', 'Details');
+            operations.push('Share Links Admin');
+            if (repo.encrypted) {
+              operations.push('Change Password');
+            }   
+            if (repo.encrypted && enableResetEncryptedRepoPassword && isEmailConfigured) {
+              operations.push('Reset Password');
+            }   
+            operations.push('History Setting', 'API Token', 'Details');
          } else {
            operations.push('Unshare');
          }
@@ -538,6 +569,23 @@ class SharedRepoListItem extends React.Component {
            />
          </ModalPortal>
        )}
+        {this.state.isChangePasswordDialogShow && (
+          <ModalPortal>
+            <ChangeRepoPasswordDialog
+              repoID={repo.repo_id}
+              repoName={repo.repo_name}
+              toggleDialog={this.onChangePasswordToggle}
+            />
+          </ModalPortal>
+        )}
+        {this.state.isResetPasswordDialogShow && (
+          <ModalPortal>
+            <ResetEncryptedRepoPasswordDialog
+              repoID={repo.repo_id}
+              toggleDialog={this.onResetPasswordToggle}
+            />
+          </ModalPortal>
+        )}
      </Fragment>
    );
  }
--- a/frontend/src/models/org-user.js
+++ b/frontend/src/models/org-user.js
@@ -11,8 +11,8 @@ class OrgUserInfo {
    this.email = object.email;
    this.contact_email = object.owner_contact_email;
    this.is_active = object.is_active;
-    this.quota = object.quota > 0 ? Utils.bytesToSize(object.quota) : '';
-    this.self_usage = Utils.bytesToSize(object.self_usage);
+    this.quota_usage = object.quota_usage;
+    this.quota_total = object.quota_total;
    this.last_login = object.last_login ? moment(object.last_login).fromNow() : '--';
    this.ctime = moment(object.ctime).format('YYYY-MM-DD HH:mm:ss');
  }
--- a/frontend/src/pages/linked-devices/linked-devices.js
+++ b/frontend/src/pages/linked-devices/linked-devices.js
@@ -5,6 +5,7 @@ import { seafileAPI } from '../../utils/seafile-api';
 import { gettext } from '../../utils/constants';
 import toaster from '../../components/toast';
 import EmptyTip from '../../components/empty-tip';
+import ConfirmUnlinkDeviceDialog from '../../components/dialog/confirm-unlink-device';
 import { Utils } from '../../utils/utils';

 class Content extends Component {
@@ -65,8 +66,9 @@ class Item extends Component {
    super(props);
    this.state = {
      isOpMenuOpen: false, // for mobile
-      showOpIcon: false,
-      unlinked: false
+      isOpIconShown: false,
+      unlinked: false,
+      isConfirmUnlinkDialogOpen: false
    };
  }

@@ -78,13 +80,19 @@ class Item extends Component {

  handleMouseOver = () => {
    this.setState({
-      showOpIcon: true
+      isOpIconShown: true
    });
  }

  handleMouseOut = () => {
    this.setState({
-      showOpIcon: false
+      isOpIconShown: false
+    });
+  }
+
+  toggleDialog = () => {
+    this.setState({
+      isConfirmUnlinkDialogOpen: !this.state.isConfirmUnlinkDialogOpen 
    });
  }

@@ -92,14 +100,23 @@ class Item extends Component {
    e.preventDefault();

    const data = this.props.data;
+    if (data.is_desktop_client) {
+      this.toggleDialog();
+    } else {
+      const wipeDevice = true;
+      this.unlinkDevice(wipeDevice);
+    }
+  }

-    seafileAPI.unlinkDevice(data.platform, data.device_id).then((res) => {
+  unlinkDevice = (wipeDevice) => {
+    const data = this.props.data;
+    seafileAPI.unlinkDevice(data.platform, data.device_id, wipeDevice).then((res) => {
      this.setState({
        unlinked: true
      });
-      let msg_s = gettext('Successfully unlinked %(name)s.');
-      msg_s = msg_s.replace('%(name)s', data.device_name);
-      toaster.success(msg_s);
+      let msg = gettext('Successfully unlinked %(name)s.');
+      msg = msg.replace('%(name)s', data.device_name);
+      toaster.success(msg);
    }).catch((error) => {
      let errMessage = Utils.getErrorMsg(error);
      toaster.danger(errMessage);
@@ -114,7 +131,7 @@ class Item extends Component {
    const data = this.props.data;

    let opClasses = 'sf2-icon-delete unlink-device action-icon';
-    opClasses += this.state.showOpIcon ? '' : ' invisible';
+    opClasses += this.state.isOpIconShown ? '' : ' invisible';

    const desktopItem = (
      <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
@@ -156,7 +173,17 @@ class Item extends Component {
      </tr>
    );

-    return this.props.isDesktop ? desktopItem : mobileItem;
+    return (
+      <React.Fragment>
+        {this.props.isDesktop ? desktopItem : mobileItem}
+        {this.state.isConfirmUnlinkDialogOpen &&
+        <ConfirmUnlinkDeviceDialog
+          executeOperation={this.unlinkDevice}
+          toggleDialog={this.toggleDialog} 
+        />
+        }
+      </React.Fragment>
+    );
  }
 }

--- a/frontend/src/pages/org-admin/org-admin-list.js
+++ b/frontend/src/pages/org-admin/org-admin-list.js
@@ -53,7 +53,7 @@ class OrgAdminList extends React.Component {
            {orgAdminUsers.map(item => {
              return (
                <UserItem 
-                  key={item.id}
+                  key={item.index}
                  user={item}
                  currentTab="admins"
                  isItemFreezed={this.state.isItemFreezed}
--- a/frontend/src/pages/org-admin/org-user-item.js
+++ b/frontend/src/pages/org-admin/org-user-item.js
@@ -55,13 +55,13 @@ class UserItem extends React.Component {
  }        
           
  toggleResetPW = () => {
-    const email = this.props.user.email;
+    const { email, name } = this.props.user;
    toaster.success(gettext('Resetting user\'s password, please wait for a moment.'));
    seafileAPI.orgAdminResetOrgUserPassword(orgID, email).then(res => {
      let msg;
      msg = gettext('Successfully reset password to %(passwd)s for user %(user)s.');
      msg = msg.replace('%(passwd)s', res.data.new_password);
-      msg = msg.replace('%(user)s', email);
+      msg = msg.replace('%(user)s', name);
      toaster.success(msg, {
        duration: 15
      });
@@ -122,6 +122,17 @@ class UserItem extends React.Component {
    );
  }

+  getQuotaTotal = (data) => {
+    switch (data) {
+      case -1: // failed to fetch quota
+        return gettext('Failed');
+      case -2:
+        return '--';
+      default: // data > 0
+        return Utils.formatSize({bytes: data});
+    }
+  }
+
  render() {
    let { user, currentTab } = this.props;
    let href = siteRoot + 'org/useradmin/info/' + encodeURIComponent(user.email) + '/';
@@ -141,7 +152,7 @@ class UserItem extends React.Component {
            onStatusChanged={this.changeStatus}
          />
        </td>
-        <td>{`${user.self_usage} / ${user.quota || '--'}`}</td>
+        <td>{`${Utils.formatSize({bytes: user.quota_usage})} / ${this.getQuotaTotal(user.quota_total)}`}</td>
        <td>
          {user.ctime} /
          <br />
--- a/frontend/src/pages/org-admin/org-users-list.js
+++ b/frontend/src/pages/org-admin/org-users-list.js
@@ -71,10 +71,10 @@ class OrgUsersList extends React.Component {
            </tr>
          </thead>
          <tbody>
-            {orgUsers.map(item => {
+            {orgUsers.map((item, index) => {
              return (
                <UserItem 
-                  key={item.id}
+                  key={index}
                  user={item}
                  currentTab="users"
                  isItemFreezed={this.state.isItemFreezed}
--- a/frontend/src/pages/sys-admin/logs-page/share-permission-logs.js
+++ b/frontend/src/pages/sys-admin/logs-page/share-permission-logs.js
@@ -1,17 +1,18 @@
 import React, { Component, Fragment } from 'react';
+import { Link } from '@reach/router';
+import moment from 'moment';
+import { Button } from 'reactstrap';
 import { seafileAPI } from '../../../utils/seafile-api';
 import { gettext, siteRoot } from '../../../utils/constants';
 import { Utils } from '../../../utils/utils';
-import EmptyTip from '../../../components/empty-tip';
-import moment from 'moment';
-import { Button } from 'reactstrap';
-import Loading from '../../../components/loading';
-import Paginator from '../../../components/paginator';
-import LogsNav from './logs-nav';
-import MainPanelTopbar from '../main-panel-topbar';
-import UserLink from '../user-link';
 import LogsExportExcelDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-logs-export-excel-dialog';
 import ModalPortal from '../../../components/modal-portal';
+import EmptyTip from '../../../components/empty-tip';
+import Loading from '../../../components/loading';
+import Paginator from '../../../components/paginator';
+import MainPanelTopbar from '../main-panel-topbar';
+import UserLink from '../user-link';
+import LogsNav from './logs-nav';

 class Content extends Component {

@@ -44,9 +45,9 @@ class Content extends Component {
          <table className="table-hover">
            <thead>
              <tr>
-                <th width="10%">{gettext('Share From')}</th>
-                <th width="10%">{gettext('Share To')}</th>
-                <th width="20%">{gettext('Actions')}</th>
+                <th width="15%">{gettext('Share From')}</th>
+                <th width="15%">{gettext('Share To')}</th>
+                <th width="10%">{gettext('Actions')}</th>
                <th width="13%">{gettext('Permission')}</th>
                <th width="20%">{gettext('Library')}</th>
                <th width="12%">{gettext('Folder')}</th> 
@@ -112,12 +113,27 @@ class Item extends Component {
    }
  }

+  getShareTo = (item) => {
+    switch(item.share_type) {
+      case 'user':
+        return <UserLink email={item.to_user_email} name={item.to_user_name} />;
+      case 'group':
+        return <Link to={`${siteRoot}sys/groups/${item.to_group_id}/libraries/`}>{item.to_group_name}</Link>; 
+      case 'department':
+        return <Link to={`${siteRoot}sys/departments/${item.to_group_id}/`}>{item.to_group_name}</Link>; 
+      case 'all':  
+        return <Link to={`${siteRoot}org/`}>{gettext('All')}</Link>; 
+      default:
+        return gettext('Deleted'); 
+    }
+  }
+
  render() {
    let { item } = this.props;
    return (
      <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
        <td><UserLink email={item.from_user_email} name={item.from_user_name} /></td>
-        <td><UserLink email={item.to_user_email} name={item.to_user_name} /></td>
+        <td>{this.getShareTo(item)}</td>
        <td>{this.getActionTextByEType(item.etype)}</td>
        <td>{Utils.sharePerms(item.permission)}</td>
        <td>{item.repo_name ? item.repo_name : gettext('Deleted')}</td>
--- a/frontend/src/pages/sys-admin/statistic/traffic-organizations-table.js
+++ b/frontend/src/pages/sys-admin/statistic/traffic-organizations-table.js
@@ -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;
--- a/frontend/src/pages/sys-admin/statistic/statistic-traffic-users.js
+++ b/frontend/src/pages/sys-admin/statistic/statistic-traffic-users.js
@@ -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;
--- a/frontend/src/pages/sys-admin/statistic/statistic-traffic.js
+++ b/frontend/src/pages/sys-admin/statistic/statistic-traffic.js
@@ -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>
--- a/frontend/src/pages/sys-admin/statistic/traffic-table.js
+++ b/frontend/src/pages/sys-admin/statistic/traffic-table.js
@@ -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>
--- a/frontend/src/utils/utils.js
+++ b/frontend/src/utils/utils.js
@@ -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
   */