sysadmin reconstruct logs page (#4171)

* sysadmin reconstruct logs page * modify date check logic in logs export excel * close dialog after download excel
2025-09-14 06:11:16 +00:00 · 2019-10-22 19:49:30 +08:00
parent ad9fe20735
commit 7dafe5a0e7
9 changed files with 1085 additions and 3 deletions
--- a/frontend/src/pages/sys-admin/logs-page/file-access-logs.js
+++ b/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;