Merge "feat: Support download file progress and abort download"

releasenotes/notes/Support-Progress-And-Abort-For-Download-cf85833aaac25fec.yaml

@@ -0,0 +1,10 @@
+---
+features:
+  - |
+    `Feature #1990355 <https://bugs.launchpad.net/skyline-console/+bug/1990355>`_:
+
+    Support progress add abort when use modal form to download file:
+
+    * Support showing download progress when download file.
+
+    * Support abort request when download file.

src/components/Form/index.jsx

@@ -268,6 +268,10 @@ export default class BaseForm extends React.Component {
     return null;
   }
 
+  get progressType() {
+    return 'upload';
+  }
+
   getRightExtraSpan() {
     return {
       left: 18,
@@ -368,7 +372,11 @@ export default class BaseForm extends React.Component {
   onCancel = () => {
     if (this.isSubmitting && this.cancel) {
       this.cancel();
-      Notify.success(t('Cancel upload successfully.'));
+      const message =
+        this.progressType === 'download'
+          ? t('Cancel download successfully.')
+          : t('Cancel upload successfully.');
+      Notify.success(message);
     }
   };
 
@@ -478,6 +486,21 @@ export default class BaseForm extends React.Component {
     };
   };
 
+  onDownloadProgress = (progressEvent) => {
+    const { loaded, total } = progressEvent;
+    const percent = Math.floor((loaded / total) * 100);
+    this.setState({
+      percent,
+    });
+  };
+
+  getDownloadRequestConf = () => {
+    return {
+      onDownloadProgress: this.onDownloadProgress,
+      cancelToken: this.cancelToken,
+    };
+  };
+
   checkContextValue() {
     const { context } = this.props;
     const names = this.nameForStateUpdate;
@@ -653,9 +676,13 @@ export default class BaseForm extends React.Component {
       return;
     }
     const { percent } = this.state;
+    const message =
+      this.progressType === 'download'
+        ? t('Download progress')
+        : t('Upload progress');
     return (
       <div className={styles['submit-tip']}>
-        {t('Upload progress')}
+        {message}
         <div className={styles['progress-wrapper']}>
           <Progress percent={percent} size="small" />
         </div>

src/components/Form/index.less

@@ -4,7 +4,7 @@
   position: relative;
   height: 100%;
   padding-top: @body-padding;
-  overflow: hidden;
+  // overflow: hidden;
   background-color: #fff;
 
   :global {

src/locales/en.json

@@ -297,6 +297,7 @@
   "Cancel Download": "Cancel Download",
   "Cancel Select": "Cancel Select",
   "Cancel Transfer": "Cancel Transfer",
+  "Cancel download successfully.": "Cancel download successfully.",
   "Cancel upload successfully.": "Cancel upload successfully.",
   "Capacity & Type": "Capacity & Type",
   "Capacity (GiB)": "Capacity (GiB)",
@@ -773,6 +774,7 @@
   "Download all data": "Download all data",
   "Download canceled!": "Download canceled!",
   "Download current data": "Download current data",
+  "Download progress": "Download progress",
   "Downloading": "Downloading",
   "Draining": "Draining",
   "Driver": "Driver",

src/locales/zh.json

@@ -297,6 +297,7 @@
   "Cancel Download": "取消下载",
   "Cancel Select": "取消选择",
   "Cancel Transfer": "取消云硬盘转让",
+  "Cancel download successfully.": "取消下载成功。",
   "Cancel upload successfully.": "取消上传成功。",
   "Capacity & Type": "容量和类型",
   "Capacity (GiB)": "容量 (GiB)",
@@ -773,6 +774,7 @@
   "Download all data": "下载所有数据",
   "Download canceled!": "下载已取消！",
   "Download current data": "下载当前数据",
+  "Download progress": "下载进度",
   "Downloading": "下载中",
   "Draining": "满载",
   "Driver": "驱动",