1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-08-02 07:47:32 +00:00

sysadmin reconstruct admin logs page (#4184)

* sysadmin reconstruct admin logs page

* optimize code
This commit is contained in:
Leo 2019-10-25 10:15:30 +08:00 committed by Daniel Pan
parent b0e4d21b82
commit 6e755e9c46
11 changed files with 517 additions and 7 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -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 = (

View File

@ -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 = (

View File

@ -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 = (

View File

@ -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 = (

View File

@ -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/'}>
<span className="sf2-icon-admin-log" aria-hidden="true"></span>
<Link
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 &&

View File

@ -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 : '';

View File

@ -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"),