sysadmin reconstruct admin logs page (#4184)

* sysadmin reconstruct admin logs page

* optimize code

frontend/src/pages/sys-admin/admin-logs/login-logs.js

@@ -0,0 +1,180 @@
+import React, { Component, Fragment } from 'react';
+import { seafileAPI } from '../../../utils/seafile-api';
+import { gettext, loginUrl, siteRoot } from '../../../utils/constants';
+import { Utils } from '../../../utils/utils';
+import EmptyTip from '../../../components/empty-tip';
+import moment from 'moment';
+import Loading from '../../../components/loading';
+import Paginator from '../../../components/paginator';
+import LogsNav from './logs-nav';
+import MainPanelTopbar from '../main-panel-topbar';
+
+
+class Content extends Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  getPreviousPage = () => {
+    this.props.getLogsByPage(this.props.currentPage - 1);
+  }
+
+  getNextPage = () => {
+    this.props.getLogsByPage(this.props.currentPage + 1);
+  }
+
+  render() {
+    const { loading, errorMsg, items, perPage, currentPage, hasNextPage } = this.props;
+    if (loading) {
+      return <Loading />;
+    } else if (errorMsg) {
+      return <p className="error text-center">{errorMsg}</p>;
+    } else {
+      const emptyTip = (
+        <EmptyTip>
+          <h2>{gettext('No Admin Login Logs.')}</h2>
+        </EmptyTip>
+      );
+      const table = (
+        <Fragment>
+          <table className="table-hover">
+            <thead>
+              <tr>
+                <th width="25%">{gettext('Name')}</th>
+                <th width="25%">{gettext('IP')}</th>
+                <th width="25%">{gettext('Status')}</th>
+                <th width="25%">{gettext('Time')}</th>
+              </tr>
+            </thead>
+            {items &&
+              <tbody>
+                {items.map((item, index) => {
+                  return (<Item
+                    key={index}
+                    item={item}
+                  />);
+                })}
+              </tbody>
+            }
+          </table>
+          <Paginator
+            gotoPreviousPage={this.getPreviousPage}
+            gotoNextPage={this.getNextPage}
+            currentPage={currentPage}
+            hasNextPage={hasNextPage}
+            canResetPerPage={true}
+            curPerPage={perPage}
+            resetPerPage={this.props.resetPerPage}
+          />
+        </Fragment>
+      );
+      return items.length ? table : emptyTip; 
+    }
+  }
+}
+
+class Item extends Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let { item } = this.props;
+    return (
+      <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+        <td><a href={siteRoot + 'useradmin/info/' + item.email + '/'}>{item.name}</a></td>
+        <td>{item.login_ip}</td>
+        <td>{item.login_success ? gettext('Success') : gettext('Failed')}</td>
+        <td>{moment(item.login_time).fromNow()}</td>
+      </tr>
+    );
+  }
+}
+
+class AdminLoginLogs extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      errorMsg: '',
+      logList: [],
+      perPage: 100,
+      currentPage: 1,
+      hasNextPage: false,
+    };
+    this.initPage = 1;
+  }
+
+  componentDidMount () {
+    this.getLogsByPage(this.initPage);
+  }
+
+  getLogsByPage = (page) => {
+    let { perPage } = this.state;
+    seafileAPI.sysAdminListAdminLoginLogs(page, perPage).then((res) => {
+      this.setState({
+        logList: res.data.data,
+        loading: false,
+        currentPage: page,
+        hasNextPage: Utils.hasNextPage(page, perPage, res.data.total_count),
+      });
+    }).catch((error) => {
+      if (error.response) {
+        if (error.response.status == 403) {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Permission denied')
+          });
+          location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
+        } else {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Error')
+          });
+        }
+      } else {
+        this.setState({
+          loading: false,
+          errorMsg: gettext('Please check the network.')
+        });
+      }
+    });
+  }
+
+  resetPerPage = (newPerPage) => {
+    this.setState({
+      perPage: newPerPage,
+    }, () => this.getLogsByPage(this.initPage));
+  }
+
+  render() {
+    let { logList, currentPage, perPage, hasNextPage } = this.state;
+    return (
+      <Fragment>
+        <MainPanelTopbar />
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <LogsNav currentItem="adminLoginLogs" />
+            <div className="cur-view-content">
+              <Content
+                loading={this.state.loading}
+                errorMsg={this.state.errorMsg}
+                items={logList}
+                currentPage={currentPage}
+                perPage={perPage}
+                hasNextPage={hasNextPage}
+                getLogsByPage={this.getLogsByPage}
+                resetPerPage={this.resetPerPage}
+              />
+            </div>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+export default AdminLoginLogs;

frontend/src/pages/sys-admin/admin-logs/logs-nav.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from '@reach/router';
+import { siteRoot, gettext } from '../../../utils/constants';
+
+const propTypes = {
+  currentItem: PropTypes.string.isRequired
+};
+
+class LogsNav extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.navItems = [
+      {name: 'adminOperationLogs', urlPart:'admin-logs/operation', text: gettext('Admin Operation Logs')},
+      {name: 'adminLoginLogs', urlPart:'admin-logs/login', text: gettext('Admin Login Logs')},
+    ];
+  }
+
+  render() {
+    const { currentItem } = this.props;
+    return (
+      <div className="cur-view-path tab-nav-container">
+        <ul className="nav">
+          {this.navItems.map((item, index) => {
+            return (
+              <li className="nav-item" key={index}>
+                <Link to={`${siteRoot}sys/${item.urlPart}/`} className={`nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    );
+  }
+}
+
+LogsNav.propTypes = propTypes;
+
+export default LogsNav;

frontend/src/pages/sys-admin/admin-logs/operation-logs.js

@@ -0,0 +1,278 @@
+import React, { Component, Fragment } from 'react';
+import { seafileAPI } from '../../../utils/seafile-api';
+import { gettext, loginUrl, siteRoot, enableSysAdminViewRepo, isPro } from '../../../utils/constants';
+import { Utils } from '../../../utils/utils';
+import EmptyTip from '../../../components/empty-tip';
+import moment from 'moment';
+import Loading from '../../../components/loading';
+import Paginator from '../../../components/paginator';
+import LogsNav from './logs-nav';
+import MainPanelTopbar from '../main-panel-topbar';
+
+
+class Content extends Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  getPreviousPage = () => {
+    this.props.getLogsByPage(this.props.currentPage - 1);
+  }
+
+  getNextPage = () => {
+    this.props.getLogsByPage(this.props.currentPage + 1);
+  }
+
+  render() {
+    const { loading, errorMsg, items, perPage, currentPage, hasNextPage } = this.props;
+    if (loading) {
+      return <Loading />;
+    } else if (errorMsg) {
+      return <p className="error text-center">{errorMsg}</p>;
+    } else {
+      const emptyTip = (
+        <EmptyTip>
+          <h2>{gettext('No Admin Operation Logs.')}</h2>
+        </EmptyTip>
+      );
+      const table = (
+        <Fragment>
+          <table className="table-hover">
+            <thead>
+              <tr>
+                <th width="20%">{gettext('Name')}</th>
+                <th width="15%">{gettext('Operation')}</th>
+                <th width="50%">{gettext('Detail')}</th>
+                <th width="15%">{gettext('Time')}</th>
+              </tr>
+            </thead>
+            {items && 
+              <tbody>
+                {items.map((item, index) => {
+                  return (<Item
+                    key={index}
+                    item={item}
+                  />);
+                })}
+              </tbody>
+            }
+          </table>
+          <Paginator
+            gotoPreviousPage={this.getPreviousPage}
+            gotoNextPage={this.getNextPage}
+            currentPage={currentPage}
+            hasNextPage={hasNextPage}
+            canResetPerPage={true}
+            curPerPage={perPage}
+            resetPerPage={this.props.resetPerPage}
+          />
+        </Fragment>
+      );
+      return items.length ? table : emptyTip; 
+    }
+  }
+}
+
+class Item extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpIconShown: false,
+    };
+  }
+
+  getOperationText = (operationType) => {
+    switch (operationType) {
+      case 'repo_create': return gettext('Create Library');
+      case 'repo_delete': return gettext('Delete Library');
+      case 'repo_transfer': return gettext('Transfer Library');
+      case 'group_create': return gettext('Create Group');
+      case 'group_transfer': return gettext('Transfer Group');
+      case 'group_delete': return gettext('Delete Group');
+      case 'user_add': return gettext('Add User');
+      case 'user_delete': return gettext('Delete User');
+      default: return '';
+    }
+  }
+
+  getOperationDetail = (item) => {
+    let detail = item.detail;
+
+    let ownerPageUrl = '';
+    if (detail.owner) {
+      ownerPageUrl = siteRoot + 'useradmin/info/' + detail.owner + '/';
+    }
+    let userPageUrl = '';
+    if (detail.email) {
+      userPageUrl = siteRoot + 'useradmin/info/' + detail.email + '/';
+    }
+    let detailText = '';
+    let repoPageUrl = '';
+    let groupPageUrl = '';
+    if (item.operation == 'repo_create' || item.operation == 'repo_delete' || item.operation == 'repo_transfer') {
+      repoPageUrl = siteRoot + 'sys/libraries/' + detail.id + '/' + detail.name + '/';
+    }
+    if (item.operation == 'group_create' || item.operation == 'group_delete' || item.operation == 'group_transfer') {
+      groupPageUrl = siteRoot + 'sys/groups/' + detail.id + '/libraries/';
+    }
+
+    switch (item.operation) {
+      case 'repo_create':
+        detailText = gettext('Created library {library_name} with {owner} as its owner')
+          .replace('{owner}', '<a href="' + ownerPageUrl + '">' + detail.owner + '</a>');
+        if (isPro && enableSysAdminViewRepo) {
+          detailText.replace('{library_name}', '<a href="' + repoPageUrl + '">' + detail.name + '</a>');
+        } else {
+          detailText.replace('{library_name}', '<span class="font-weight-bold">' + detail.name + '</span>');
+        }
+        return detailText;
+
+      case 'repo_delete':
+        detailText = gettext('Deleted library {library_name}')
+          .replace('{library_name}', '<span class="font-weight-bold">' + detail.name + '</span>');
+        return detailText;
+
+      case 'repo_transfer':
+        detailText = gettext('Transferred library {library_name} from {user_from} to {user_to}')
+          .replace('{user_from}', '<span class="font-weight-bold">' + detail.from + '</span>')
+          .replace('{user_to}', '<span class="font-weight-bold">' + detail.to+ '</span>');
+        if (isPro && enableSysAdminViewRepo) {
+          detailText.replace('{library_name}', '<a href="' + repoPageUrl + '">' + detail.name + '</a>');
+        } else {
+          detailText.replace('{library_name}', '<span class="font-weight-bold">' + detail.name + '</span>');
+        }
+        return detailText;
+
+      case 'group_create':
+        detailText = gettext('Created group {group_name}')
+          .replace('{group_name}', '<a href="' + groupPageUrl + '">' + detail.name+ '</a>');
+        return detailText;
+
+      case 'group_transfer':
+        detailText = gettext('Transferred group {group_name} from {user_from} to {user_to}')
+          .replace('{user_from}', '<span class="font-weight-bold">' + detail.from + '</span>')
+          .replace('{user_to}', '<span class="font-weight-bold">' + detail.to+ '</span>')
+          .replace('{group_name}', '<a href="' + groupPageUrl + '">' + detail.name+ '</a>');
+        return detailText;
+
+      case 'group_delete':
+        detailText = gettext('Deleted group {group_name}')
+          .replace('{group_name}', '<span class="font-weight-bold">' + detail.name + '</span>');
+        return detailText;
+
+      case 'user_add':
+        detailText = gettext('Added user {user}')
+          .replace('{user}', '<a href="' + userPageUrl + '">' + detail.email+ '</a>');
+        return detailText;
+
+      case 'user_delete':
+        detailText = gettext('Deleted user {user}')
+          .replace('{user}', '<span class="font-weight-bold">' + detail.email+ '</span>');
+        return detailText;
+
+      default: return '';
+    }
+  }
+
+  render() {
+    let { item } = this.props;
+    return (
+      <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+        <td><a href={siteRoot + 'useradmin/info/' + item.email + '/'}>{item.name}</a></td>
+        <td>{this.getOperationText(item.operation)}</td>
+        <td>
+          <span dangerouslySetInnerHTML={{__html: this.getOperationDetail(item)}}></span>
+        </td>
+        <td>{moment(item.datetime).fromNow()}</td>
+      </tr>
+    );
+  }
+}
+
+class AdminOperationLogs extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      errorMsg: '',
+      logList: [],
+      perPage: 100,
+      currentPage: 1,
+      hasNextPage: false,
+    };
+    this.initPage = 1;
+  }
+
+  componentDidMount () {
+    this.getLogsByPage(this.initPage);
+  }
+
+  getLogsByPage = (page) => {
+    let { perPage } = this.state;
+    seafileAPI.sysAdminListAdminLogs(page, perPage).then((res) => {
+      this.setState({
+        logList: res.data.data,
+        loading: false,
+        currentPage: page,
+        hasNextPage: Utils.hasNextPage(page, perPage, res.data.total_count),
+      });
+    }).catch((error) => {
+      if (error.response) {
+        if (error.response.status == 403) {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Permission denied')
+          });
+          location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
+        } else {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Error')
+          });
+        }
+      } else {
+        this.setState({
+          loading: false,
+          errorMsg: gettext('Please check the network.')
+        });
+      }
+    });
+  }
+
+  resetPerPage = (newPerPage) => {
+    this.setState({
+      perPage: newPerPage,
+    }, () => this.getLogsByPage(this.initPage));
+  }
+
+  render() {
+    let { logList, currentPage, perPage, hasNextPage } = this.state;
+    return (
+      <Fragment>
+        <MainPanelTopbar />
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <LogsNav currentItem="adminOperationLogs" />
+            <div className="cur-view-content">
+              <Content
+                loading={this.state.loading}
+                errorMsg={this.state.errorMsg}
+                items={logList}
+                currentPage={currentPage}
+                perPage={perPage}
+                hasNextPage={hasNextPage}
+                getLogsByPage={this.getLogsByPage}
+                resetPerPage={this.resetPerPage}
+              />
+            </div>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+export default AdminOperationLogs;

frontend/src/pages/sys-admin/index.js

@@ -38,6 +38,9 @@ import FileAccessLogs from './logs-page/file-access-logs';
 import FileUpdateLogs from './logs-page/file-update-logs';
 import SharePermissionLogs from './logs-page/share-permission-logs';
 
+import AdminOperationLogs from './admin-logs/operation-logs';
+import AdminLoginLogs from './admin-logs/login-logs';
+
 import WebSettings from './web-settings/web-settings';
 import Notifications from './notifications/notifications';
 import FileScanRecords from './file-scan-records';
@@ -149,6 +152,8 @@ class SysAdmin extends React.Component {
             <FileAccessLogs path={siteRoot + 'sys/logs/file-access'} />
             <FileUpdateLogs path={siteRoot + 'sys/logs/file-update'} />
             <SharePermissionLogs path={siteRoot + 'sys/logs/share-permission'} />
+            <AdminOperationLogs path={siteRoot + 'sys/admin-logs/operation'} />
+            <AdminLoginLogs path={siteRoot + 'sys/admin-logs/login'} />
             <FileScanRecords
               path={siteRoot + 'sys/file-scan-records'}
               currentTab={currentTab} 

frontend/src/pages/sys-admin/logs-page/file-access-logs.js

@@ -35,7 +35,7 @@ class Content extends Component {
     } else {
       const emptyTip = (
         <EmptyTip>
-          <h2>{gettext('No Share Links.')}</h2>
+          <h2>{gettext('No File Access Logs.')}</h2>
         </EmptyTip>
       );
       const table = (

frontend/src/pages/sys-admin/logs-page/file-update-logs.js

@@ -35,7 +35,7 @@ class Content extends Component {
     } else {
       const emptyTip = (
         <EmptyTip>
-          <h2>{gettext('No Share Links.')}</h2>
+          <h2>{gettext('No File Update Logs.')}</h2>
         </EmptyTip>
       );
       const table = (

frontend/src/pages/sys-admin/logs-page/login-logs.js

@@ -36,7 +36,7 @@ class Content extends Component {
     } else {
       const emptyTip = (
         <EmptyTip>
-          <h2>{gettext('No Share Links.')}</h2>
+          <h2>{gettext('No Login Logs.')}</h2>
         </EmptyTip>
       );
       const table = (

frontend/src/pages/sys-admin/logs-page/share-permission-logs.js

@@ -35,7 +35,7 @@ class Content extends Component {
     } else {
       const emptyTip = (
         <EmptyTip>
-          <h2>{gettext('No Share Links.')}</h2>
+          <h2>{gettext('No Permission Logs.')}</h2>
         </EmptyTip>
       );
       const table = (

frontend/src/pages/sys-admin/side-panel.js

@@ -213,10 +213,14 @@ class SidePanel extends React.Component {
                 }
                 {isPro && canViewAdminLog &&
                   <li className="nav-item">
-                    <a className='nav-link ellipsis' href={siteRoot + 'sysadmin/#admin-operation-logs/'}>
+                    <Link
-                      <span className="sf2-icon-admin-log" aria-hidden="true"></span>
+                      className={`nav-link ellipsis ${this.getActiveClass('adminLogs')}`}
+                      to={siteRoot + 'sys/admin-logs/operation'}
+                      onClick={() => this.props.tabItemClick('adminLogs')}
+                    >
+                      <span className="sf2-icon-msgs" aria-hidden="true"></span>
                       <span className="nav-text">{gettext('Admin Logs')}</span>
-                    </a>
+                    </Link>
                   </li>
                 }
                 {isDefaultAdmin && enableWorkWeixin &&

frontend/src/utils/constants.js

@@ -124,3 +124,4 @@ export const canManageGroup = window.sysadmin ? window.sysadmin.pageOptions.admi
 export const canViewUserLog = window.sysadmin ? window.sysadmin.pageOptions.admin_permissions.can_view_user_log : '';
 export const canViewAdminLog = window.sysadmin ? window.sysadmin.pageOptions.admin_permissions.can_view_admin_log : '';
 export const enableWorkWeixin = window.sysadmin ? window.sysadmin.pageOptions.enable_work_weixin : '';
+export const enableSysAdminViewRepo = window.sysadmin ? window.sysadmin.pageOptions.enableSysAdminViewRepo : '';

seahub/urls.py

@@ -682,6 +682,8 @@ urlpatterns = [
     url(r'^sys/logs/file-access/$', sysadmin_react_fake_view, name="sys_logs_file_access"),
     url(r'^sys/logs/file-update/$', sysadmin_react_fake_view, name="sys_logs_file_update"),
     url(r'^sys/logs/share-permission/$', sysadmin_react_fake_view, name="sys_logs_share_permission"),
+    url(r'^sys/admin-logs/operation/$', sysadmin_react_fake_view, name="sys_admin_logs_operation"),
+    url(r'^sys/admin-logs/login/$', sysadmin_react_fake_view, name="sys_admin_logs_login"),
     url(r'^sys/organizations/$', sysadmin_react_fake_view, name="sys_organizations"),
     url(r'^sys/organizations/(?P<org_id>\d+)/info/$', sysadmin_react_fake_view, name="sys_organization_info"),
     url(r'^sys/organizations/(?P<org_id>\d+)/users/$', sysadmin_react_fake_view, name="sys_organization_users"),