sysadmin reconstruct logs page (#4171)

* sysadmin reconstruct logs page

* modify date check logic in logs export excel

* close dialog after download excel

frontend/src/components/dialog/sysadmin-dialog/sysadmin-logs-export-excel-dialog.js

@@ -0,0 +1,120 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Alert } from 'reactstrap';
+import { gettext, siteRoot } from '../../../utils/constants';
+import moment from 'moment';
+
+class LogsExportExcelDialog extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      startDateStr: '',
+      endDateStr: '',
+      errMsg: '',
+    };
+    this.newInput = React.createRef();
+  }
+
+  componentDidMount() {
+    this.newInput.focus();
+  }
+
+  downloadExcel = () => {
+    if (!this.isValidDateStr()) {
+      return;
+    }
+    let { startDateStr, endDateStr } = this.state;
+    let url = siteRoot;
+
+    switch (this.props.logType) {
+      case 'login':
+        url += 'sys/loginadmin/export-excel/';
+        break;
+      case 'fileAccess':
+        url += 'sys/log/fileaudit/export-excel/';
+        break;
+      case 'fileUpdate':
+        url += 'sys/log/fileupdate/export-excel/';
+        break;
+      case 'sharePermission':
+        url += 'sys/log/permaudit/export-excel/';
+        break;
+    }
+    location.href = url + '?start=' + startDateStr + '&end=' + endDateStr;
+    this.props.toggle();
+  }
+
+  isValidDateStr = () => {
+    let { startDateStr, endDateStr } = this.state;
+    if (moment(startDateStr, 'YYYY-MM-DD', true).isValid() &&
+      moment(endDateStr, 'YYYY-MM-DD', true).isValid() &&
+      moment(startDateStr).isBefore(endDateStr)
+    ) {
+      return true;
+    } else {
+      this.setState({
+        errMsg: gettext('Date Invalid.')
+      });
+      return false;
+    }
+  }
+
+  handleStartChange = (e) => {
+    const startDateStr = e.target.value.trim();
+    this.setState({
+      startDateStr: startDateStr,
+      errMsg: ''
+    });
+  }
+
+  handleEndChange = (e) => {
+    const endDateStr = e.target.value.trim();
+    this.setState({ 
+      endDateStr: endDateStr,
+      errMsg: '',
+    });
+  }
+
+  render() {
+    return (
+      <Modal isOpen={true} toggle={this.props.toggle}>
+        <ModalHeader toggle={this.props.toggle}>{gettext('Choose date')}</ModalHeader>
+        <ModalBody>
+          {gettext('Start date')}
+          <Input
+            value={this.state.startDateStr}
+            onChange={this.handleStartChange}
+            placeholder='YYYY-mm-dd'
+            innerRef={input => {this.newInput = input;}}
+          />
+          <br/>
+          {gettext('End date')}
+          <Input
+            value={this.state.endDateStr}
+            onChange={this.handleEndChange}
+            placeholder='YYYY-mm-dd'
+          />
+          {this.state.errMsg &&
+            <Alert className="mt-2" color="danger">
+              {gettext(this.state.errMsg)}
+            </Alert>
+          }
+        </ModalBody>
+        <ModalFooter>
+          <Button color="primary" onClick={this.downloadExcel}>{gettext('Submit')}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+const propTypes = {
+  toggle: PropTypes.func.isRequired,
+  logType: PropTypes.string.isRequired,
+};
+
+LogsExportExcelDialog.propTypes = propTypes;
+
+export default LogsExportExcelDialog;

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

@@ -33,6 +33,11 @@ import OrgUsers from './orgs/org-users';
 import OrgGroups from './orgs/org-groups';
 import OrgRepos from './orgs/org-repos';
 
+import LoginLogs from './logs-page/login-logs';
+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 WebSettings from './web-settings/web-settings';
 import Notifications from './notifications/notifications';
 import FileScanRecords from './file-scan-records';
@@ -140,6 +145,10 @@ class SysAdmin extends React.Component {
             <OrgUsers path={siteRoot + 'sys/organizations/:orgID/users'} />
             <OrgGroups path={siteRoot + 'sys/organizations/:orgID/groups'} />
             <OrgRepos path={siteRoot + 'sys/organizations/:orgID/libraries'} />
+            <LoginLogs path={siteRoot + 'sys/logs/login'} />
+            <FileAccessLogs path={siteRoot + 'sys/logs/file-access'} />
+            <FileUpdateLogs path={siteRoot + 'sys/logs/file-update'} />
+            <SharePermissionLogs path={siteRoot + 'sys/logs/share-permission'} />
             <FileScanRecords
               path={siteRoot + 'sys/file-scan-records'}
               currentTab={currentTab} 

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

@@ -0,0 +1,216 @@
+import React, { Component, Fragment } from 'react';
+import { seafileAPI } from '../../../utils/seafile-api';
+import { gettext, loginUrl, siteRoot } from '../../../utils/constants';
+import EmptyTip from '../../../components/empty-tip';
+import { Button } from 'reactstrap';
+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';
+import LogsExportExcelDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-logs-export-excel-dialog';
+import ModalPortal from '../../../components/modal-portal';
+
+
+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 Share Links.')}</h2>
+        </EmptyTip>
+      );
+      const table = (
+        <Fragment>
+          <table className="table-hover">
+            <thead>
+              <tr>
+                <th width="20%">{gettext('Name')}</th>
+                <th width="10%">{gettext('Type')}</th>
+                <th width="20%">{gettext('IP')}{' / '}{gettext('Device')}</th>
+                <th width="20%">{gettext('Date')}</th>
+                <th width="15%">{gettext('Library')}</th>
+                <th width="15%">{gettext('File')}{' / '}{gettext('Folder')}</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,
+    };
+  }
+
+  handleMouseOver = () => {
+    this.setState({
+      isOpIconShown: true
+    });
+  }
+
+  handleMouseOut = () => {
+    this.setState({
+      isOpIconShown: false
+    });
+  }
+
+  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.event_type}</td>
+        <td>{item.ip}{' / '}{item.device}</td>
+        <td>{moment(item.time).fromNow()}</td>
+        <td>{item.repo_name ? item.repo_name : gettext('Deleted')}</td>
+        <td>{item.file_or_dir_name}</td>
+      </tr>
+    );
+  }
+}
+
+class FileAccessLogs extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      errorMsg: '',
+      logList: [],
+      perPage: 100,
+      currentPage: 1,
+      hasNextPage: false,
+      isExportExcelDialogOpen: false,
+    };
+    this.initPage = 1;
+  }
+
+  toggleExportExcelDialog = () => {
+    this.setState({isExportExcelDialogOpen: !this.state.isExportExcelDialogOpen});
+  }
+
+  componentDidMount () {
+    this.getLogsByPage(this.initPage);
+  }
+
+  getLogsByPage = (page) => {
+    let { perPage } = this.state;
+    seafileAPI.sysAdminListFileAccessLogs(page, perPage).then((res) => {
+      this.setState({
+        logList: res.data.file_access_log_list,
+        loading: false,
+        currentPage: page,
+        hasNextPage: res.data.has_next_page,
+      });
+    }).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, isExportExcelDialogOpen } = this.state;
+    return (
+      <Fragment>
+        <MainPanelTopbar>
+          <Button className="btn btn-secondary operation-item" onClick={this.toggleExportExcelDialog}>{gettext('Export Excel')}</Button>
+        </MainPanelTopbar>
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <LogsNav currentItem="fileAccessLogs" />
+            <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>
+        {isExportExcelDialogOpen &&
+        <ModalPortal>
+          <LogsExportExcelDialog
+            logType={'fileAccess'}
+            toggle={this.toggleExportExcelDialog}
+          />
+        </ModalPortal>
+        }
+      </Fragment>
+    );
+  }
+}
+
+export default FileAccessLogs;

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

@@ -0,0 +1,244 @@
+import React, { Component, Fragment } from 'react';
+import { seafileAPI } from '../../../utils/seafile-api';
+import { gettext, loginUrl, siteRoot } from '../../../utils/constants';
+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 { Button } from 'reactstrap';
+import MainPanelTopbar from '../main-panel-topbar';
+import ModalPortal from '../../../components/modal-portal';
+import CommitDetails from '../../../components/dialog/commit-details';
+import LogsExportExcelDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-logs-export-excel-dialog';
+
+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 Share Links.')}</h2>
+        </EmptyTip>
+      );
+      const table = (
+        <Fragment>
+          <table className="table-hover">
+            <thead>
+              <tr>
+                <th width="25%">{gettext('Name')}</th>
+                <th width="25%">{gettext('Date')}</th>
+                <th width="25%">{gettext('Library')}</th>
+                <th width="25%">{gettext('Action')}</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,
+      isCommitDetailsDialogOpen: false,
+    };
+  }
+
+  handleMouseOver = () => {
+    this.setState({
+      isOpIconShown: true
+    });
+  }
+
+  handleMouseOut = () => {
+    this.setState({
+      isOpIconShown: false
+    });
+  }
+
+
+  toggleCommitDetailsDialog = () => {
+    this.setState({
+      isCommitDetailsDialogOpen: !this.state.isCommitDetailsDialogOpen
+    });
+  }
+
+  showCommitDetails = (e) => {
+    e.preventDefault();
+    this.setState({
+      isCommitDetailsDialogOpen: !this.state.isCommitDetailsDialogOpen
+    });
+  }
+
+  render() {
+    let { item } = this.props;
+    return (
+      <Fragment>
+        <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+          <td><a href={siteRoot + 'useradmin/info/' + item.email + '/'}>{item.name}</a></td>
+          <td>{moment(item.time).fromNow()}</td>
+          <td>{item.repo_name ? item.repo_name : gettext('Deleted')}</td>
+          <td>
+            {item.file_operation}
+            {item.repo_name && !item.repo_encrypted &&
+              <a className="ml-1" href="#" onClick={this.showCommitDetails}>{gettext('Details')}</a>
+            }
+          </td>
+        </tr>
+        {this.state.isCommitDetailsDialogOpen &&
+          <ModalPortal>
+            <CommitDetails
+              repoID={item.repo_id}
+              commitID={item.commit_id}
+              commitTime={item.time}
+              toggleDialog={this.toggleCommitDetailsDialog}
+            />
+          </ModalPortal>
+        }
+      </Fragment>
+    );
+  }
+}
+
+class FileUpdateLogs extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      errorMsg: '',
+      logList: [],
+      perPage: 100,
+      currentPage: 1,
+      hasNextPage: false,
+      isExportExcelDialogOpen: false,
+    };
+    this.initPage = 1;
+  }
+
+  toggleExportExcelDialog = () => {
+    this.setState({isExportExcelDialogOpen: !this.state.isExportExcelDialogOpen});
+  }
+
+  componentDidMount () {
+    this.getLogsByPage(this.initPage);
+  }
+
+  getLogsByPage = (page) => {
+    let { perPage } = this.state;
+    seafileAPI.sysAdminListFileUpdateLogs(page, perPage).then((res) => {
+      this.setState({
+        logList: res.data.file_update_log_list,
+        loading: false,
+        currentPage: page,
+        hasNextPage: res.data.has_next_page,
+      });
+    }).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, isExportExcelDialogOpen } = this.state;
+    return (
+      <Fragment>
+        <MainPanelTopbar>
+          <Button className="btn btn-secondary operation-item" onClick={this.toggleExportExcelDialog}>{gettext('Export Excel')}</Button>
+        </MainPanelTopbar>
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <LogsNav currentItem="fileUpdateLogs" />
+            <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>
+        {isExportExcelDialogOpen &&
+        <ModalPortal>
+          <LogsExportExcelDialog
+            logType={'fileUpdate'}
+            toggle={this.toggleExportExcelDialog}
+          />
+        </ModalPortal>
+        }
+      </Fragment>
+    );
+  }
+}
+
+export default FileUpdateLogs;

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

@@ -0,0 +1,213 @@
+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 { Button } from 'reactstrap';
+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';
+import LogsExportExcelDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-logs-export-excel-dialog';
+import ModalPortal from '../../../components/modal-portal';
+
+
+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 Share Links.')}</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);
+    this.state = {
+      isOpIconShown: false,
+    };
+  }
+
+  handleMouseOver = () => {
+    this.setState({
+      isOpIconShown: true
+    });
+  }
+
+  handleMouseOut = () => {
+    this.setState({
+      isOpIconShown: false
+    });
+  }
+
+  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.log_success ? gettext('Success') : gettext('Failed')}</td>
+        <td>{moment(item.login_time).fromNow()}</td>
+      </tr>
+    );
+  }
+}
+
+class LoginLogs extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      errorMsg: '',
+      logList: [],
+      perPage: 100,
+      currentPage: 1,
+      hasNextPage: false,
+      isExportExcelDialogOpen: false,
+    };
+    this.initPage = 1;
+  }
+
+  toggleExportExcelDialog = () => {
+    this.setState({isExportExcelDialogOpen: !this.state.isExportExcelDialogOpen});
+  }
+
+  componentDidMount () {
+    this.getLogsByPage(this.initPage);
+  }
+
+  getLogsByPage = (page) => {
+    let { perPage } = this.state;
+    seafileAPI.sysAdminListLoginLogs(page, perPage).then((res) => {
+      this.setState({
+        logList: res.data.login_log_list,
+        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, isExportExcelDialogOpen } = this.state;
+    return (
+      <Fragment>
+        <MainPanelTopbar>
+          <Button className="btn btn-secondary operation-item" onClick={this.toggleExportExcelDialog}>{gettext('Export Excel')}</Button>
+        </MainPanelTopbar>
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <LogsNav currentItem="loginLogs" />
+            <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>
+        {isExportExcelDialogOpen &&
+        <ModalPortal>
+          <LogsExportExcelDialog
+            logType={'login'}
+            toggle={this.toggleExportExcelDialog}
+          />
+        </ModalPortal>
+        }
+      </Fragment>
+    );
+  }
+}
+
+export default LoginLogs;

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

@@ -0,0 +1,42 @@
+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 Nav extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.navItems = [
+      {name: 'loginLogs', urlPart:'logs/login', text: gettext('Login')},
+      {name: 'fileAccessLogs', urlPart:'logs/file-access', text: gettext('File Access')},
+      {name: 'fileUpdateLogs', urlPart:'logs/file-update', text: gettext('File Update')},
+      {name: 'sharePermissionLogs', urlPart:'logs/share-permission', text: gettext('Permission')},
+    ];
+  }
+
+  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>
+    );
+  }
+}
+
+Nav.propTypes = propTypes;
+
+export default Nav;

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

@@ -0,0 +1,230 @@
+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 { 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 LogsExportExcelDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-logs-export-excel-dialog';
+import ModalPortal from '../../../components/modal-portal';
+
+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 Share Links.')}</h2>
+        </EmptyTip>
+      );
+      const table = (
+        <Fragment>
+          <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="10%">{gettext('Permission')}</th>
+                <th width="20%">{gettext('Library')}</th>
+                <th width="15%">{gettext('Folder')}</th> 
+                <th width="15%">{gettext('Date')}</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,
+    };
+  }
+
+  handleMouseOver = () => {
+    this.setState({
+      isOpIconShown: true
+    });
+  }
+
+  handleMouseOut = () => {
+    this.setState({
+      isOpIconShown: false
+    });
+  }
+
+  getActionTextByEType = (etype) => {
+    if (etype.indexOf('add') != -1) {
+      return gettext('Add');
+    } else if (etype.indexOf('modify') != -1) {
+      return gettext('Modify');
+    } else if (etype.indexOf('delete') != -1) {
+      return gettext('Delete');
+    } else {
+      return '';
+    }
+  }
+
+  render() {
+    let { item } = this.props;
+    return (
+      <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+        <td><a href={siteRoot + 'useradmin/info/' + item.from_user_email + '/'}>{item.from_user_name}</a></td>
+        <td><a href={siteRoot + 'useradmin/info/' + item.to_user_email + '/'}>{item.to_user_name}</a></td>
+        <td>{this.getActionTextByEType(item.etype)}</td>
+        <td>{Utils.sharePerms(item.permission)}</td>
+        <td>{item.repo_name ? item.repo_name : gettext('Deleted')}</td>
+        <td>{item.folder}</td>
+        <td>{moment(item.date).fromNow()}</td>
+      </tr>
+    );
+  }
+}
+
+class SharePermissionLogs extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      errorMsg: '',
+      logList: [],
+      perPage: 100,
+      currentPage: 1,
+      hasNextPage: false,
+      isExportExcelDialogOpen: false,
+    };
+    this.initPage = 1;
+  }
+
+  toggleExportExcelDialog = () => {
+    this.setState({isExportExcelDialogOpen: !this.state.isExportExcelDialogOpen});
+  }
+
+  componentDidMount () {
+    this.getLogsByPage(this.initPage);
+  }
+
+  getLogsByPage = (page) => {
+    let { perPage } = this.state;
+    seafileAPI.sysAdminListSharePermissionLogs(page, perPage).then((res) => {
+      this.setState({
+        logList: res.data.share_permission_log_list,
+        loading: false,
+        currentPage: page,
+        hasNextPage: res.data.has_next_page,
+      });
+    }).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, isExportExcelDialogOpen } = this.state;
+    return (
+      <Fragment>
+        <MainPanelTopbar>
+          <Button className="btn btn-secondary operation-item" onClick={this.toggleExportExcelDialog}>{gettext('Export Excel')}</Button>
+        </MainPanelTopbar>
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <LogsNav currentItem="sharePermissionLogs" />
+            <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>
+        {isExportExcelDialogOpen &&
+        <ModalPortal>
+          <LogsExportExcelDialog
+            logType={'sharePermission'}
+            toggle={this.toggleExportExcelDialog}
+          />
+        </ModalPortal>
+        }
+      </Fragment>
+    );
+  }
+}
+
+export default SharePermissionLogs;

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

@@ -165,10 +165,14 @@ class SidePanel extends React.Component {
                 }
                 {sysadminExtraEnabled && canViewUserLog &&
                   <li className="nav-item">
-                    <a className='nav-link ellipsis' href={siteRoot + 'sys/loginadmin/'}>
+                    <Link
-                      <span className="sf2-icon-clock" aria-hidden="true"></span>
+                      className={`nav-link ellipsis ${this.getActiveClass('logs')}`}
+                      to={siteRoot + 'sys/logs/login'}
+                      onClick={() => this.props.tabItemClick('logs')}
+                    >
+                      <span className="sf2-icon-msgs" aria-hidden="true"></span>
                       <span className="nav-text">{gettext('Logs')}</span>
-                    </a>
+                    </Link>
                   </li>
                 }
                 {isPro && isDefaultAdmin && enableFileScan &&

seahub/urls.py

@@ -680,6 +680,10 @@ urlpatterns = [
     url(r'^sys/users-all/$', sysadmin_react_fake_view, name="sys_users_all"),
     url(r'^sys/users-admin/$', sysadmin_react_fake_view, name="sys_users_admin"),
     url(r'^sys/user-info/(?P<email>[^/]+)/$', sysadmin_react_fake_view, name="sys_users"),
+    url(r'^sys/logs/login/$', sysadmin_react_fake_view, name="sys_logs_login"),
+    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/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"),