Fix system admin export log bug (#8093)

* fix system admin export log bug

* change system logs image size

* fix some typo

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

@@ -29,16 +29,16 @@ class LogsExportExcelDialog extends React.Component {
       return;
     }
     switch (this.props.logType) {
-      case 'login':
+      case 'loginLogs':
         this.sysExportLogs('loginadmin');
         break;
-      case 'file-access':
+      case 'fileAccessLogs':
         this.sysExportLogs('fileaudit');
         break;
-      case 'file-update':
+      case 'fileUpdateLogs':
         this.sysExportLogs('fileupdate');
         break;
-      case 'share-permission':
+      case 'sharePermissionLogs':
         this.sysExportLogs('permaudit');
         break;
     }
@@ -52,7 +52,6 @@ class LogsExportExcelDialog extends React.Component {
         });
         this.props.toggle();
         location.href = siteRoot + 'sys/log/export-excel/?task_id=' + task_id + '&log_type=' + logType;
-
       } else {
         setTimeout(() => {
           this.queryIOStatus(task_id, logType);
@@ -109,18 +108,16 @@ class LogsExportExcelDialog extends React.Component {
   };
 
   isValidDateStr = () => {
-    let { startDateStr, endDateStr } = this.state;
-    if (dayjs(startDateStr, 'YYYY-MM-DD', true).isValid() &&
-      dayjs(endDateStr, 'YYYY-MM-DD', true).isValid() &&
-      dayjs(startDateStr).isBefore(endDateStr)
-    ) {
-      return true;
-    } else {
+    const { startDateStr, endDateStr } = this.state;
+    const startDate = dayjs(startDateStr, 'YYYY-MM-DD', true);
+    const endDate = dayjs(endDateStr, 'YYYY-MM-DD', true);
+    if (!startDate.isValid() || !endDate.isValid() || !startDate.isBefore(endDate)) {
       this.setState({
         errMsg: gettext('Date Invalid.')
       });
       return false;
     }
+    return true;
   };
 
   handleStartChange = (e) => {
@@ -180,7 +177,6 @@ class LogsExportExcelDialog extends React.Component {
             <Button color="secondary" onClick={this.props.toggle}>{gettext('Cancel')}</Button>
             <Button color="primary" onClick={this.downloadExcel}>{gettext('Submit')}</Button>
           </ModalFooter>
-
         </Modal>
         }
         {this.state.isShowIODialog &&

frontend/src/pages/lib-content-view/lib-content-view.js

@@ -109,7 +109,7 @@ class LibContentView extends React.Component {
       currentDirent: null,
     };
 
-    this.oldonpopstate = window.onpopstate;
+    this.oldOnpopstate = window.onpopstate;
     window.onpopstate = this.onpopstate;
     this.lastModifyTime = new Date();
     this.isNeedUpdateHistoryState = true; // Load, refresh page, switch mode for the first time, no need to set historyState
@@ -169,7 +169,7 @@ class LibContentView extends React.Component {
     /**
      * noticeData structure:
      * {
-     *  type: 'file-lock-changed', // opertaion type
+     *  type: 'file-lock-changed', // operation type
      *  content: {}
      * }
      */
@@ -323,7 +323,7 @@ class LibContentView extends React.Component {
   };
 
   componentWillUnmount() {
-    window.onpopstate = this.oldonpopstate;
+    window.onpopstate = this.oldOnpopstate;
     this.unsubscribeEvent();
     this.unsubscribeOpenTreePanel();
     this.unsubscribeEventBus && this.unsubscribeEventBus();
@@ -993,7 +993,7 @@ class LibContentView extends React.Component {
     let dirNames = this.getSelectedDirentNames();
 
     this.setState({ currentDirent: null });
-    seafileAPI.deleteMutipleDirents(repoID, this.state.path, dirNames).then(res => {
+    seafileAPI.deleteMultipleDirents(repoID, this.state.path, dirNames).then(res => {
       this.deleteItemsAjaxCallback(direntPaths, dirNames);
 
       let msg = '';
@@ -1812,14 +1812,14 @@ class LibContentView extends React.Component {
       this.recalculateSelectedDirents([name], direntList);
       this.setState({ direntList: direntList });
     } else if (Utils.isAncestorPath(direntPath, this.state.path)) {
-      // the deleted item is ancester of the current item
+      // the deleted item is ancestor of the current item
       let parentPath = Utils.getDirName(direntPath);
       this.showDir(parentPath);
     }
     // else do nothing
   }
 
-  // only one scence: The deleted items are inside current path
+  // only one scene: The deleted items are inside current path
   deleteDirents = (direntNames) => {
     let direntList = this.state.direntList.filter(item => {
       return direntNames.indexOf(item.name) === -1;
@@ -1841,7 +1841,7 @@ class LibContentView extends React.Component {
     this.setState({ direntList: direntList });
   };
 
-  // only one scence: The moved items are inside current path
+  // only one scene: The moved items are inside current path
   moveDirents = (direntNames) => {
     let direntList = this.state.direntList.filter(item => {
       return direntNames.indexOf(item.name) === -1;

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

@@ -1,4 +1,4 @@
-import React, { Fragment, useState } from 'react';
+import React, { useState } from 'react';
 import MainPanelTopbar from '../main-panel-topbar';
 import { Button } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
@@ -6,6 +6,7 @@ import LogsNav from '../logs-page/logs-nav';
 import { useLocation } from '@gatsbyjs/reach-router';
 import ModalPortal from '../../../components/modal-portal';
 import LogsExportExcelDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-logs-export-excel-dialog';
+import './logs.css';
 
 const LOG_PATH_NAME_MAP = {
   'login': 'loginLogs',
@@ -37,7 +38,7 @@ const Logs = ({ children, ...commonProps }) => {
         </MainPanelTopbar>
       )}
       <LogsNav currentItem={curTab} {...commonProps} />
-      <div className="h-100 d-flex overflow-auto">{children}</div>
+      <div className="system-admin-logs h-100 w-100 d-flex overflow-auto">{children}</div>
       {isExportExcelDialogOpen &&
         <ModalPortal>
           <LogsExportExcelDialog

frontend/src/pages/sys-admin/logs-page/logs.css

@@ -0,0 +1,3 @@
+.system-admin-logs>div {
+  width: 100%;  
+}

frontend/src/utils/seafile-api.js

@@ -986,7 +986,7 @@ class SeafileAPI {
     return this.req.delete(url, { data: params });
   }
 
-  deleteMutipleDirents(repoID, parentDir, direntNames) {
+  deleteMultipleDirents(repoID, parentDir, direntNames) {
     const url = this.server + '/api/v2.1/repos/batch-delete-item/';
     let operation = {
       'repo_id': repoID,