fix export file access log (#6944)

* fix

* update

* optimize export log

* update

* update

* update

* fomrat-update

---------

Co-authored-by: 孙永强 <11704063+s-yongqiang@user.noreply.gitee.com>
Co-authored-by: r350178982 <32759763+r350178982@users.noreply.github.com>

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

@@ -7,6 +7,7 @@ import { systemAdminAPI } from '../../../utils/system-admin-api';
 import { userAPI } from '../../../utils/user-api';
 import toaster from '../../../components/toast';
 import { Utils } from '../../../utils/utils';
+import SeahubIODialog from '../../dialog/seahub-io-dialog';
 
 class LogsExportExcelDialog extends React.Component {
 
@@ -18,6 +19,7 @@ class LogsExportExcelDialog extends React.Component {
       endDateStr: '',
       errMsg: '',
       taskId: '',
+      isShowIODialog: false,
     };
   }
 
@@ -41,45 +43,67 @@ class LogsExportExcelDialog extends React.Component {
     }
   };
 
+  queryIOStatus = (task_id, logType) => {
+    userAPI.queryIOStatus(task_id).then(res => {
+      if (res.data.is_finished === true) {
+        this.setState({
+          isShowIODialog: false
+        });
+        this.props.toggle();
+        location.href = siteRoot + 'sys/log/export-excel/?task_id=' + task_id + '&log_type=' + logType;
+
+      } else {
+        setTimeout(() => {
+          this.queryIOStatus(task_id, logType);
+        }, 1000);
+      }
+    }).catch(err => {
+      this.setState({
+        isShowIODialog: false
+      });
+      toaster.danger(gettext('Failed to export. Please check whether the size of table attachments exceeds the limit.'));
+    });
+  };
+
   sysExportLogs = (logType) => {
     let { startDateStr, endDateStr } = this.state;
     let task_id = '';
-    systemAdminAPI.sysAdminExportLogsExcel(startDateStr, endDateStr, logType).then(res => {
-      task_id = res.data.task_id;
-      this.setState({
-        taskId: task_id
-      });
-      this.props.toggle();
-      return userAPI.queryIOStatus(task_id);
-    }).then(res => {
-      if (res.data.is_finished === true) {
-        location.href = siteRoot + 'sys/log/export-excel/?task_id=' + task_id + '&log_type=' + logType;
-      } else {
-        this.timer = setInterval(() => {
-          userAPI.queryIOStatus(task_id).then(res => {
-            if (res.data.is_finished === true) {
-              clearInterval(this.timer);
-              location.href = siteRoot + 'sys/log/export-excel/?task_id=' + task_id + '&log_type=' + logType;
-            }
-          }).catch(err => {
-            clearInterval(this.timer);
-            toaster.danger(gettext('Failed to export. Please check whether the size of table attachments exceeds the limit.'));
+    this.setState({
+      isShowIODialog: true
+    }, () => {
+      systemAdminAPI.sysAdminExportLogsExcel(startDateStr, endDateStr, logType).then(res => {
+        task_id = res.data.task_id;
+        this.setState({
+          taskId: task_id,
+        });
+        return userAPI.queryIOStatus(task_id);
+      }).then(res => {
+        if (res.data.is_finished === true) {
+          this.setState({
+            isShowIODialog: false,
           });
-        }, 1000);
-      }
-    }).catch(error => {
-      this.props.toggle();
-      if (error.response && error.response.status === 500) {
-        const error_msg = error.response.data ? error.response.data['error_msg'] : null;
-        if (error_msg && error_msg !== 'Internal Server Error') {
-          toaster.danger(error_msg);
+          this.props.toggle();
+          location.href = siteRoot + 'sys/log/export-excel/?task_id=' + task_id + '&log_type=' + logType;
         } else {
-          toaster.danger(gettext('Internal Server Error'));
+          this.queryIOStatus(task_id, logType);
         }
-      } else {
-        let errMessage = Utils.getErrorMsg(error);
-        toaster.danger(errMessage);
-      }
+      }).catch(error => {
+        if (error.response && error.response.status === 500) {
+          const error_msg = error.response.data ? error.response.data['error_msg'] : null;
+          if (error_msg && error_msg !== 'Internal Server Error') {
+            toaster.danger(error_msg);
+          } else {
+            toaster.danger(gettext('Internal Server Error'));
+          }
+        } else {
+          let errMessage = Utils.getErrorMsg(error);
+          toaster.danger(errMessage);
+        }
+        this.setState({
+          isShowIODialog: false
+        });
+        this.props.toggle();
+      });
     });
   };
 
@@ -114,39 +138,56 @@ class LogsExportExcelDialog extends React.Component {
     });
   };
 
+  onExportToggle = (e) => {
+    this.setState({
+      isShowIODialog: !this.state.isShowIODialog,
+    });
+    this.props.toggle();
+  };
+
   render() {
     return (
-      <Modal isOpen={true} toggle={this.props.toggle} autoFocus={false}>
-        <ModalHeader toggle={this.props.toggle}>{gettext('Choose date')}</ModalHeader>
-        <ModalBody>
-          <FormGroup>
-            <Label>{gettext('Start date')}</Label>
-            <Input
-              value={this.state.startDateStr}
-              onChange={this.handleStartChange}
-              placeholder='yyyy-mm-dd'
-              autoFocus={true}
-            />
-          </FormGroup>
-          <FormGroup>
-            <Label>{gettext('End date')}</Label>
-            <Input
-              value={this.state.endDateStr}
-              onChange={this.handleEndChange}
-              placeholder='yyyy-mm-dd'
-            />
-          </FormGroup>
-          {this.state.errMsg &&
+      <React.Fragment>
+        {!this.state.isShowIODialog &&
+        <Modal isOpen={true} toggle={this.props.toggle} autoFocus={false}>
+          <ModalHeader toggle={this.props.toggle}>{gettext('Choose date')}</ModalHeader>
+          <ModalBody>
+            <FormGroup>
+              <Label>{gettext('Start date')}</Label>
+              <Input
+                value={this.state.startDateStr}
+                onChange={this.handleStartChange}
+                placeholder='yyyy-mm-dd'
+                autoFocus={true}
+              />
+            </FormGroup>
+            <FormGroup>
+              <Label>{gettext('End date')}</Label>
+              <Input
+                value={this.state.endDateStr}
+                onChange={this.handleEndChange}
+                placeholder='yyyy-mm-dd'
+              />
+            </FormGroup>
+            {this.state.errMsg &&
             <Alert className="mt-2" color="danger">
               {gettext(this.state.errMsg)}
             </Alert>
-          }
-        </ModalBody>
-        <ModalFooter>
-          <Button color="secondary" onClick={this.props.toggle}>{gettext('Cancel')}</Button>
-          <Button color="primary" onClick={this.downloadExcel}>{gettext('Submit')}</Button>
-        </ModalFooter>
-      </Modal>
+            }
+          </ModalBody>
+          <ModalFooter>
+            <Button color="secondary" onClick={this.props.toggle}>{gettext('Cancel')}</Button>
+            <Button color="primary" onClick={this.downloadExcel}>{gettext('Submit')}</Button>
+          </ModalFooter>
+
+        </Modal>
+        }
+        {this.state.isShowIODialog &&
+        <SeahubIODialog
+          toggle={this.onExportToggle}
+        />
+        }
+      </React.Fragment>
     );
   }
 }