[org admin / users] fixup for sort by 'Space Used' (#4682)

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');
   }

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}

frontend/src/pages/org-admin/org-user-item.js

@@ -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 />

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}