From 41d036e38f27978ca693f72569a056e65f144800 Mon Sep 17 00:00:00 2001
From: zhoupzh <zhoupzh@pcl.ac.cn>
Date: Thu, 4 Aug 2022 15:40:32 +0800
Subject: [PATCH] fix issue

---
 templates/repo/cloudbrain/new.tmpl      |   1 +
 templates/repo/debugjob/index.tmpl      |  10 +
 web_src/js/components/MinioUploader.vue | 640 ++++++++++++++----------
 web_src/js/features/cloudrbanin.js      |  88 ++--
 4 files changed, 438 insertions(+), 301 deletions(-)

diff --git a/templates/repo/cloudbrain/new.tmpl b/templates/repo/cloudbrain/new.tmpl
index 9552c80c0..ea093b5b3 100755
--- a/templates/repo/cloudbrain/new.tmpl
+++ b/templates/repo/cloudbrain/new.tmpl
@@ -287,6 +287,7 @@
 </div>
 {{template "base/footer" .}}
 <script>
+    console.log({{index $.QueuesDetail "debugt4"}})
     let form = document.getElementById('form_id');
     $('#messageInfo').css('display', 'none')
     function clearValue() {
diff --git a/templates/repo/debugjob/index.tmpl b/templates/repo/debugjob/index.tmpl
index ee020a8ca..8c1bb1316 100755
--- a/templates/repo/debugjob/index.tmpl
+++ b/templates/repo/debugjob/index.tmpl
@@ -502,6 +502,16 @@
     </div>
 </div>
 
+<div class="ui mini modal debug-again">
+    <div class="header">{{$.QueuesDetail}}</div>
+    <div class="content">
+      <p>1111</p>
+    </div>
+    <div class="actions">
+        <div class="ui mini negative button">Cancel</div>
+        <div class="ui mini positive button">OK</div>
+    </div>
+  </div>
 </div>
 {{template "base/footer" .}}
 <script>
diff --git a/web_src/js/components/MinioUploader.vue b/web_src/js/components/MinioUploader.vue
index 167bb8c5a..3c975600f 100755
--- a/web_src/js/components/MinioUploader.vue
+++ b/web_src/js/components/MinioUploader.vue
@@ -1,81 +1,122 @@
 <template>
   <div class="dropzone-wrapper dataset-files">
     <div id="dataset" class="dropzone">
-        <div class="maxfilesize ui red message" style="display: none;margin: 2.5rem;"></div>
+      <div
+        class="maxfilesize ui red message"
+        style="display: none; margin: 2.5rem"
+      ></div>
     </div>
-    <el-button style="background-color: #21ba45;margin-top: 2rem;" type="success" :disabled="btnFlag" @click="startUpload">{{upload}}</el-button>
-    <el-button type="info" @click="cancelDataset">{{cancel}}</el-button>
-    <div style="margin-top: 2rem;position: relative;">
-      <label class="el-form-item__label" style="width: 140px;position: absolute;left: -140px;">上传状态:</label>
-      <div v-for="item in allUploadFiles" style="display:flex;padding: 0.8rem 0;border-bottom: 1px solid #e8e8e8;line-height: 1;" >
-          <span style="flex:4 1 0%;display: flex;max-width: 80%;"><i :class="[item.status===0?'ri-checkbox-circle-line success':'ri-close-circle-line failed']" style="margin-right: 0.5rem;"></i><span class="nowrap">{{item.name}}</span></span>
-          
-            <span style="flex:1" v-if="item.status===0"><span style="color: #21ba45;">上传成功</span></span>
-          
-          <span style="flex:1" v-else-if="item.status===1">
-            <el-tooltip class="item" effect="dark" placement="top">
-              <div slot="content">{{item.info}}</div>
-              <span style="color: red;cursor: pointer;">上传失败<span>(重复上传)</span></span>
+    <el-button
+      style="background-color: #21ba45; margin-top: 2rem"
+      type="success"
+      :disabled="btnFlag"
+      @click="startUpload"
+      >{{ upload }}</el-button
+    >
+    <el-button type="info" @click="cancelDataset">{{ cancel }}</el-button>
+    <div style="margin-top: 2rem; position: relative">
+      <label
+        class="el-form-item__label"
+        style="width: 140px; position: absolute; left: -140px"
+        >上传状态:</label
+      >
+      <div v-for="(item, index) in uploadFiles" class="datast-upload-progress">
+        <span class="dataset-name nowrap">{{ item.name }}</span>
+        <div class="dataset-progress">
+          <el-progress
+            :text-inside="true"
+            :stroke-width="14"
+            :percentage="uploadProgressList[index].progress"
+          ></el-progress>
+        </div>
+        <div class="dataset-status nowrap">
+          <div class="status-flex">
+            <i
+              v-if="
+                uploadProgressList[index].infoCode === 1 ||
+                uploadProgressList[index].infoCode === 2
+              "
+              class="ri-close-circle-line failed"
+            ></i>
+            <i
+              v-if="uploadProgressList[index].infoCode === 0"
+              class="ri-checkbox-circle-line success"
+            >
+            </i>
+            <span>{{ uploadProgressList[index].status }}</span>
+            <el-tooltip
+              v-if="uploadProgressList[index].infoCode === 1"
+              class="item"
+              effect="dark"
+              placement="top"
+            >
+              <div slot="content">
+                {{ uploadProgressList[index].failedInfo }}
+              </div>
+              <i
+                style="font-size: 16px; margin-left: 0.5rem; cursor: pointer"
+                class="ri-question-fill"
+              ></i>
             </el-tooltip>
-          </span>
-          <span style="flex:1" v-else><span style="color: red;">上传失败</span></span>
-    
+          </div>
         </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import SparkMD5 from 'spark-md5';
-import axios from 'axios';
-import qs from 'qs';
-import createDropzone from '../features/dropzone.js';
+import SparkMD5 from "spark-md5";
+import axios from "axios";
+import qs from "qs";
+import createDropzone from "../features/dropzone.js";
 
-const {_AppSubUrl, _StaticUrlPrefix, csrf} = window.config;
+const { _AppSubUrl, _StaticUrlPrefix, csrf } = window.config;
 const chunkSize = 1024 * 1024 * 64;
 const md5ChunkSize = 1024 * 1024 * 1;
 
 export default {
-  props:{
-    uploadtype:{
-      type:Number,
-      required:true
+  props: {
+    uploadtype: {
+      type: Number,
+      required: true,
+    },
+    desc: {
+      type: String,
+      default: "",
     },
-    desc:{
-      type:String,
-      default:''
-    }
   },
   data() {
     return {
       dropzoneUploader: null,
       maxFiles: 10,
-      maxFilesize: 200 ,
-      acceptedFiles: '*/*',
+      maxFilesize: 200,
+      acceptedFiles: "*/*",
       progress: 0,
-      status: '',
+      status: "",
       dropzoneParams: {},
-      file_status_text: '',
-      file:{},
-      repoPath:'',
-      btnFlag:false,
-      cancel:'',
-      upload:'',
-      uploadFiles:[],
-      uploadFilesAddId:[],
-      allUploadFiles:[],
-      uploadLength:0,
-      allUploadLength:0,
+      file_status_text: "",
+      file: {},
+      repoPath: "",
+      btnFlag: false,
+      cancel: "",
+      upload: "",
+      uploadFiles: [],
+      uploadFilesAddId: [],
+      // allUploadFiles: [],
+      uploadLength: 0,
+      allUploadLength: 0,
+      uploadProgressList: [],
     };
   },
 
   async mounted() {
-    this.dropzoneParams = $('div#minioUploader-params');
-    this.file_status_text = this.dropzoneParams.data('file-status');
-    this.status = this.dropzoneParams.data('file-init-status');
-    this.repoPath = this.dropzoneParams.data('repopath');
-    this.cancel = this.dropzoneParams.data('cancel');
-    this.upload = this.dropzoneParams.data('upload');
+    this.dropzoneParams = $("div#minioUploader-params");
+    this.file_status_text = this.dropzoneParams.data("file-status");
+    this.status = this.dropzoneParams.data("file-init-status");
+    this.repoPath = this.dropzoneParams.data("repopath");
+    this.cancel = this.dropzoneParams.data("cancel");
+    this.upload = this.dropzoneParams.data("upload");
     let previewTemplate = `
         <div class="dz-preview dz-file-preview"> 
           <div class="dz-image"> 
@@ -86,137 +127,146 @@ export default {
             <div class="dz-filename"><span data-dz-name></span></div> 
           </div> 
 
-          <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div> 
+          <div style="opacity:0" class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div> 
           <div class="dz-error-message" style="line-height: 1.5;"><span data-dz-errormessage></span></div> 
           <div class="dz-success-mark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="54" height="54"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-.997-4L6.76 11.757l1.414-1.414 2.829 2.829 5.656-5.657 1.415 1.414L11.003 16z" fill="rgba(47,204,113,1)"/></svg></div> 
           <div class="dz-error-mark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="54" height="54"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-9.414l2.828-2.829 1.415 1.415L13.414 12l2.829 2.828-1.415 1.415L12 13.414l-2.828 2.829-1.415-1.415L10.586 12 7.757 9.172l1.415-1.415L12 10.586z" fill="rgba(231,76,60,1)"/></svg></div> 
-        </div> `
-    const $dropzone = $('div#dataset');
+        </div> `;
+    const $dropzone = $("div#dataset");
     const dropzoneUploader = await createDropzone($dropzone[0], {
-      url: '/todouploader',
+      url: "/todouploader",
       maxFiles: this.maxFiles,
-      maxFilesize: 1024*200,
-      filesizeBase:1024,
+      maxFilesize: 1024 * 200,
+      filesizeBase: 1024,
       parallelUploads: this.maxFiles,
       timeout: 0,
-      addRemoveLinks:true,
+      addRemoveLinks: true,
       // autoQueue: false,
       autoProcessQueue: false, //自动上传
-      dictDefaultMessage: this.dropzoneParams.data('default-message'),
-      dictInvalidFileType: this.dropzoneParams.data('invalid-input-type'),
-      dictFileTooBig: this.dropzoneParams.data('file-too-big'),
-      dictRemoveFile: this.dropzoneParams.data('remove-file'),
-      previewTemplate:previewTemplate
+      dictDefaultMessage: this.dropzoneParams.data("default-message"),
+      dictInvalidFileType: this.dropzoneParams.data("invalid-input-type"),
+      dictFileTooBig: this.dropzoneParams.data("file-too-big"),
+      dictRemoveFile: this.dropzoneParams.data("remove-file"),
+      previewTemplate: previewTemplate,
     });
-    dropzoneUploader.on('addedfile', (file) => {
-      if(file.size/(1024*1024)>dropzoneUploader.options.maxFilesize){
-        dropzoneUploader.removeFile(file)
-        $('.maxfilesize.ui.red.message').text("单次最多上传10个文件，单个文件不超过200G")
-        $('.maxfilesize.ui.red.message').css('display','block')
-        
-      }else{
-        this.file = file
-        $('.maxfilesize.ui.red.message').css('display','none')
-        
+    dropzoneUploader.on("addedfile", (file) => {
+      if (file.size / (1024 * 1024) > dropzoneUploader.options.maxFilesize) {
+        dropzoneUploader.removeFile(file);
+        $(".maxfilesize.ui.red.message").text(
+          "单次最多上传10个文件，单个文件不超过200G"
+        );
+        $(".maxfilesize.ui.red.message").css("display", "block");
+      } else {
+        this.file = file;
+        $(".maxfilesize.ui.red.message").css("display", "none");
       }
     });
-    dropzoneUploader.on("removedfile",(file)=>{
-      $('.maxfilesize.ui.red.message').css('display','none')
-    })
-    dropzoneUploader.on('maxfilesexceeded', function (file) {
-      dropzoneUploader.removeFile(file)
-      $('.maxfilesize.ui.red.message').text("单次最多上传10个文件，单个文件不超过200G")
-      $('.maxfilesize.ui.red.message').css('display','block')
-
+    dropzoneUploader.on("removedfile", (file) => {
+      $(".maxfilesize.ui.red.message").css("display", "none");
+    });
+    dropzoneUploader.on("maxfilesexceeded", function (file) {
+      dropzoneUploader.removeFile(file);
+      $(".maxfilesize.ui.red.message").text(
+        "单次最多上传10个文件，单个文件不超过200G"
+      );
+      $(".maxfilesize.ui.red.message").css("display", "block");
     });
     this.dropzoneUploader = dropzoneUploader;
   },
-  watch:{
-    allUploadLength(len){
-        if(len===this.uploadFiles.length){
-          setTimeout(() => {
-          this.dropzoneUploader.removeAllFiles(true)
-          this.btnFlag = false
-          this.$emit('setcluster',this.btnFlag)
+  watch: {
+    allUploadLength(len) {
+      if (len === this.uploadFiles.length) {
+        setTimeout(() => {
+          this.dropzoneUploader.removeAllFiles(true);
+          this.btnFlag = false;
+          this.$emit("setcluster", this.btnFlag);
         }, 2000);
-        }
-    }
+      }
+    },
   },
   methods: {
-    startUpload(){
-      this.uploadFiles = this.dropzoneUploader.getQueuedFiles()
-      if(this.uploadFiles.length===0){
-        return
+    startUpload() {
+      this.uploadFiles = this.dropzoneUploader.getQueuedFiles();
+      if (this.uploadFiles.length === 0) {
+        return;
       }
-      this.resetStatus()
-      $('.dz-remove').remove()
-      $('.maxfilesize.ui.red.message').css('display','none')
-      this.btnFlag = true
-      this.$emit('setcluster',this.btnFlag)
-      this.uploadFiles.forEach(element => {
-        element.datasetId = document.getElementById('datasetId').getAttribute('datasetId')
-        this.computeMD5(element)
+      this.resetStatus();
+      $(".dz-remove").remove();
+      $(".maxfilesize.ui.red.message").css("display", "none");
+      this.btnFlag = true;
+      this.$emit("setcluster", this.btnFlag);
+      this.uploadFiles.forEach((element) => {
+        element.datasetId = document
+          .getElementById("datasetId")
+          .getAttribute("datasetId");
+        this.computeMD5(element);
       });
     },
-    cancelDataset(){
-      location.href = this.repoPath
-      this.dropzoneUploader.removeAllFiles(true)
+    cancelDataset() {
+      location.href = this.repoPath;
+      this.dropzoneUploader.removeAllFiles(true);
     },
     resetStatus() {
-      this.uploadLength = 0
-      this.allUploadLength = 0
-      this.allUploadFiles = []
+      this.uploadLength = 0;
+      this.allUploadLength = 0;
+      // this.allUploadFiles = [];
+      this.uploadProgressList = [];
     },
-    updateProgress(file, progress) {
-      file.previewTemplate.querySelector(
-        '.dz-upload'
-      ).style.width = `${progress}%`
-      file.previewTemplate.querySelector(
-        '.dz-upload'
-      ).style.background = '#409eff';
+    updateProgress(file, status, progress, infoCode, failedInfo = "") {
+      console.log("this.uploadProgressList:", this.uploadProgressList);
+      // file.previewTemplate.querySelector(
+      //   ".dz-upload"
+      // ).style.width = `${progress}%`;
+      // file.previewTemplate.querySelector(".dz-upload").style.background =
+      //   "#409eff";
+      // file.previewTemplate.querySelector(".dz-upload").style.opacity = 0;
+      this.uploadProgressList.forEach((item, index) => {
+        if (item.name === file.name) {
+          this.uploadProgressList[index].status = status;
+          this.uploadProgressList[index].progress = progress;
+          this.uploadProgressList[index].infoCode = infoCode;
+          this.uploadProgressList[index].failedInfo = failedInfo;
+        }
+      });
     },
-    uploadError(file,info){
-      file.previewTemplate.querySelector(
-        '.dz-error-mark'
-      ).style.opacity = 1
-      file.previewTemplate.querySelector(
-        '.dz-progress'
-      ).style.opacity = 0
-      file.previewTemplate.querySelector(
-        '.dz-error-message span'
-      ).innerHTML = info
-      file.previewTemplate.querySelector(
-        '.dz-error-message'
-      ).style.display = 'block'
-      file.previewTemplate.querySelector(
-        '.dz-details'
-      ).onmouseover = function(){file.previewTemplate.querySelector('.dz-error-message').style.opacity = 1 }
-      file.previewTemplate.querySelector(
-        '.dz-details'
-      ).onmouseout = function(){file.previewTemplate.querySelector('.dz-error-message').style.opacity = 0 }
+    uploadError(file, info) {
+      file.previewTemplate.querySelector(".dz-error-mark").style.opacity = 1;
+      file.previewTemplate.querySelector(".dz-progress").style.opacity = 0;
+      file.previewTemplate.querySelector(".dz-error-message span").innerHTML =
+        info;
+      file.previewTemplate.querySelector(".dz-error-message").style.display =
+        "block";
+      file.previewTemplate.querySelector(".dz-details").onmouseover =
+        function () {
+          file.previewTemplate.querySelector(
+            ".dz-error-message"
+          ).style.opacity = 1;
+        };
+      file.previewTemplate.querySelector(".dz-details").onmouseout =
+        function () {
+          file.previewTemplate.querySelector(
+            ".dz-error-message"
+          ).style.opacity = 0;
+        };
     },
     emitDropzoneSuccess(file) {
-      file.status = 'success';
-      this.dropzoneUploader.emit('success', file);
-      this.dropzoneUploader.emit('complete', file);
+      file.status = "success";
+      this.dropzoneUploader.emit("success", file);
+      this.dropzoneUploader.emit("complete", file);
     },
     emitDropzoneFailed(file) {
-      this.status = this.dropzoneParams.data('falied');
-      file.status = 'error';
-      this.dropzoneUploader.emit('error', file);
+      this.status = this.dropzoneParams.data("falied");
+      file.status = "error";
+      this.dropzoneUploader.emit("error", file);
       // this.dropzoneUploader.emit('complete', file);
     },
     finishUpload(file) {
-      console.log("finish",file)
-      file.previewTemplate.querySelector(
-        '.dz-success-mark'
-      ).style.opacity = 1
-      file.previewTemplate.querySelector(
-        '.dz-progress'
-      ).style.opacity = 0
-      if(this.uploadLength === this.uploadFiles.length){
+      console.log("finish", file);
+      file.previewTemplate.querySelector(".dz-success-mark").style.opacity = 1;
+      file.previewTemplate.querySelector(".dz-progress").style.opacity = 0;
+      if (this.uploadLength === this.uploadFiles.length) {
         setTimeout(() => {
-        window.location.href = this.repoPath
+          window.location.href = this.repoPath;
         }, 1000);
       }
     },
@@ -231,10 +281,16 @@ export default {
         fileReader = new FileReader();
       let currentChunk = 0;
       const time = new Date().getTime();
-      this.status = this.dropzoneParams.data('md5-computing');
+      this.status = this.dropzoneParams.data("md5-computing");
+      this.uploadProgressList.push({
+        name: file.name,
+        status: this.dropzoneParams.data("md5-computing"),
+        progress: 0,
+        infoCode: 3,
+      });
       file.totalChunkCounts = chunks;
-      if (file.size==0) {
-        file.totalChunkCounts = 1
+      if (file.size == 0) {
+        file.totalChunkCounts = 1;
       }
       loadMd5Next();
 
@@ -242,7 +298,7 @@ export default {
         fileLoaded.call(this, e);
       };
       fileReader.onerror = (err) => {
-        console.warn('oops, something went wrong.', err);
+        console.warn("oops, something went wrong.", err);
         file.cancel();
       };
 
@@ -250,11 +306,16 @@ export default {
         spark.append(e.target.result); // Append array buffer
         currentChunk++;
         if (currentChunk < chunks) {
-          this.status = `${this.dropzoneParams.data('loading-file')} ${(
+          this.status = `${this.dropzoneParams.data("loading-file")} ${(
             (currentChunk / chunks) *
             100
           ).toFixed(2)}% (${currentChunk}/${chunks})`;
-          this.updateProgress(file, ((currentChunk / chunks) * 100).toFixed(2));
+          console.log("-=-=-=-=--=", this.status);
+          // this.updateProgress(
+          //   file,
+          //   this.dropzoneParams.data("md5-computing"),
+          //   Number(((currentChunk / chunks) * 100).toFixed(1))
+          // );
           loadMd5Next();
           return;
         }
@@ -265,7 +326,11 @@ export default {
             file.size
           } 用时：${(new Date().getTime() - time) / 1000} s`
         );
-        this.updateProgress(file,100)
+        // this.updateProgress(
+        //   file,
+        //   this.dropzoneParams.data("md5-computing"),
+        //   100
+        // );
         spark.destroy(); // 释放缓存
         file.uniqueIdentifier = md5; // 将文件md5赋值给文件唯一标识
         file.cmd5 = false; // 取消计算md5状态
@@ -289,46 +354,57 @@ export default {
 
     async computeMD5Success(md5edFile) {
       const file = await this.getSuccessChunks(md5edFile);
+      console.log(file);
       try {
-        if (file.uploadID == '' || file.uuid == '') {
-        // 未上传过
+        if (file.uploadID == "" || file.uuid == "") {
+          // 未上传过
           await this.newMultiUpload(file);
-          if (file.uploadID != '' && file.uuid != '') {
-            file.chunks = '';
+          if (file.uploadID != "" && file.uuid != "") {
+            file.chunks = "";
             this.multipartUpload(file);
           } else {
-          // 失败如何处理
-          let info = "上传失败"
-          this.allUploadLength++
-          this.uploadError(file,info)
-          this.allUploadFiles.push({name:file.name,status:2,info:info})
+            // 失败如何处理
+            let info = "上传失败";
+            this.allUploadLength++;
+            this.uploadError(file, info);
+            this.updateProgress(file, "上传失败", 0, 2);
+            // this.allUploadFiles.push({
+            //   name: file.name,
+            //   status: 2,
+            //   info: info,
+            // });
             return;
           }
           return;
         }
 
-        if (file.uploaded == '1') {
-        // 已上传成功
-        // 秒传
-          if (file.attachID == '0') {
-          // 删除数据集记录，未删除文件
+        if (file.uploaded == "1") {
+          // 已上传成功
+          // 秒传
+          if (file.attachID == "0") {
+            // 删除数据集记录，未删除文件
             await addAttachment(file);
           }
           //不同数据集上传同一个文件
-          if (file.datasetID != '') {
+          if (file.datasetID != "") {
             if (file.datasetName != "" && file.realName != "") {
-              let info = `该文件已上传在数据集: ${file.datasetName}`
-              this.uploadError(file,info)
-              this.allUploadLength++
-              this.allUploadFiles.push({name:file.name,status:1,info:info})
+              let info = `该文件已上传在数据集: ${file.datasetName}`;
+              this.uploadError(file, info);
+              this.allUploadLength++;
+              this.updateProgress(file, "上传失败", 0, 1, info);
+              // this.allUploadFiles.push({
+              //   name: file.name,
+              //   status: 1,
+              //   info: info,
+              // });
             }
           }
-          console.log('文件已上传完成');
+          console.log("文件已上传完成");
           this.progress = 100;
-          this.status = this.dropzoneParams.data('upload-complete');
+          this.status = this.dropzoneParams.data("upload-complete");
           // this.finishUpload(file);
         } else {
-        // 断点续传
+          // 断点续传
           this.multipartUpload(file);
         }
       } catch (error) {
@@ -338,14 +414,14 @@ export default {
 
       async function addAttachment(file) {
         return await axios.post(
-          '/attachments/add',
+          "/attachments/add",
           qs.stringify({
             uuid: file.uuid,
             file_name: file.name,
             size: file.size,
             dataset_id: file.datasetId,
             type: this.uploadtype,
-            _csrf: csrf
+            _csrf: csrf,
           })
         );
       }
@@ -357,11 +433,11 @@ export default {
           md5: file.uniqueIdentifier,
           type: this.uploadtype,
           file_name: file.name,
-          _csrf: csrf
-        }
+          _csrf: csrf,
+        },
       };
       try {
-        const response = await axios.get('/attachments/get_chunks', params);
+        const response = await axios.get("/attachments/get_chunks", params);
         file.uploadID = response.data.uploadID;
         file.uuid = response.data.uuid;
         file.uploaded = response.data.uploaded;
@@ -373,13 +449,13 @@ export default {
         return file;
       } catch (error) {
         this.emitDropzoneFailed(file);
-        console.log('getSuccessChunks catch: ', error);
+        console.log("getSuccessChunks catch: ", error);
         return null;
       }
     },
 
     async newMultiUpload(file) {
-      const res = await axios.get('/attachments/new_multipart', {
+      const res = await axios.get("/attachments/new_multipart", {
         params: {
           totalChunkCounts: file.totalChunkCounts,
           md5: file.uniqueIdentifier,
@@ -387,8 +463,8 @@ export default {
           fileType: file.type,
           type: this.uploadtype,
           file_name: file.name,
-          _csrf: csrf
-        }
+          _csrf: csrf,
+        },
       });
       file.uploadID = res.data.uploadID;
       file.uuid = res.data.uuid;
@@ -403,7 +479,7 @@ export default {
         fileReader = new FileReader(),
         time = new Date().getTime();
       let currentChunk = 0;
-      let _this = this
+      let _this = this;
 
       function loadNext() {
         const start = currentChunk * chunkSize;
@@ -421,7 +497,7 @@ export default {
       }
 
       async function getUploadChunkUrl(currentChunk, partSize) {
-        const res = await axios.get('/attachments/get_multipart_url', {
+        const res = await axios.get("/attachments/get_multipart_url", {
           params: {
             uuid: file.uuid,
             uploadID: file.uploadID,
@@ -429,50 +505,44 @@ export default {
             chunkNumber: currentChunk + 1,
             type: _this.uploadtype,
             file_name: file.name,
-            _csrf: csrf
-          }
+            _csrf: csrf,
+          },
         });
         urls[currentChunk] = res.data.url;
       }
 
       async function uploadMinio(url, e) {
         const res = await axios.put(url, e.target.result);
-        delete e.target.result
+        delete e.target.result;
         etags[currentChunk] = res.headers.etag;
-       
       }
-      
-    async function uploadMinioNewMethod(url,e){
-    
-		 var xhr = new XMLHttpRequest();
-     xhr.open('PUT', url, false);
-     if(_this.uploadtype===0){
-      xhr.setRequestHeader('Content-Type', 'text/plain')
-      xhr.send(e.target.result);
-     
-      var etagValue = xhr.getResponseHeader('etag');
-      etags[currentChunk] = etagValue;
-     }
-     else if(_this.uploadtype===1){
-      xhr.setRequestHeader('Content-Type', '')
-      xhr.send(e.target.result);
-      var etagValue = xhr.getResponseHeader('ETag');
-      //console.log(etagValue);
-      etags[currentChunk] = etagValue;
-     }
-		 
-     
-		 
+
+      async function uploadMinioNewMethod(url, e) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("PUT", url, false);
+        if (_this.uploadtype === 0) {
+          xhr.setRequestHeader("Content-Type", "text/plain");
+          xhr.send(e.target.result);
+
+          var etagValue = xhr.getResponseHeader("etag");
+          etags[currentChunk] = etagValue;
+        } else if (_this.uploadtype === 1) {
+          xhr.setRequestHeader("Content-Type", "");
+          xhr.send(e.target.result);
+          var etagValue = xhr.getResponseHeader("ETag");
+          //console.log(etagValue);
+          etags[currentChunk] = etagValue;
+        }
       }
 
       async function updateChunk(currentChunk) {
         await axios.post(
-          '/attachments/update_chunk',
+          "/attachments/update_chunk",
           qs.stringify({
             uuid: file.uuid,
             chunkNumber: currentChunk + 1,
             etag: etags[currentChunk],
-            _csrf: csrf
+            _csrf: csrf,
           })
         );
       }
@@ -481,34 +551,35 @@ export default {
           if (!checkSuccessChunks()) {
             const start = currentChunk * chunkSize;
             const partSize =
-            start + chunkSize >= file.size ? file.size - start : chunkSize;
+              start + chunkSize >= file.size ? file.size - start : chunkSize;
             // 获取分片上传url
             await getUploadChunkUrl(currentChunk, partSize);
-            if (urls[currentChunk] != '') {
+            if (urls[currentChunk] != "") {
               // 上传到minio
               //await uploadMinio(urls[currentChunk], e);
               await uploadMinioNewMethod(urls[currentChunk], e);
-              
-              if (etags[currentChunk] != '') {
-              // 更新数据库：分片上传结果
+
+              if (etags[currentChunk] != "") {
+                // 更新数据库：分片上传结果
                 //await updateChunk(currentChunk);
               } else {
-                console.log("上传到minio uploadChunk etags[currentChunk] == ''");// TODO
+                console.log(
+                  "上传到minio uploadChunk etags[currentChunk] == ''"
+                ); // TODO
               }
             } else {
-              console.log("uploadChunk urls[currentChunk] != ''");// TODO
+              console.log("uploadChunk urls[currentChunk] != ''"); // TODO
             }
           }
         } catch (error) {
+          // this.emitDropzoneFailed(file);
           console.log(error);
-          //this.emitDropzoneFailed(file);
-          //console.log(error);
         }
       }
 
       async function completeUpload() {
         return await axios.post(
-          '/attachments/complete_multipart',
+          "/attachments/complete_multipart",
           qs.stringify({
             uuid: file.uuid,
             uploadID: file.uploadID,
@@ -517,77 +588,97 @@ export default {
             dataset_id: file.datasetId,
             type: _this.uploadtype,
             _csrf: csrf,
-            description:_this.desc
+            description: _this.desc,
           })
         );
       }
 
       const successChunks = [];
       let successParts = [];
-      successParts = file.chunks.split(',');
+      successParts = file.chunks.split(",");
       for (let i = 0; i < successParts.length; i++) {
-        successChunks[i] = successParts[i].split('-')[0];
+        successChunks[i] = successParts[i].split("-")[0];
       }
       const urls = []; // TODO const ?
       const etags = [];
-      console.log('上传分片...');
-      this.status = this.dropzoneParams.data('uploading');
+      console.log("上传分片...");
+      this.status = this.dropzoneParams.data("uploading");
       loadNext();
       fileReader.onload = async (e) => {
-        try{
+        try {
           await uploadChunk(e);
-        }catch(err){
-          console.log(err)
+        } catch (err) {
+          console.log(err);
         }
-        
+
         fileReader.abort();
         currentChunk++;
         if (currentChunk < chunks) {
           console.log(
-            `第${currentChunk}个分片上传完成, 开始第${currentChunk +
-              1}/${chunks}个分片上传`
+            `第${currentChunk}个分片上传完成, 开始第${
+              currentChunk + 1
+            }/${chunks}个分片上传`
           );
           this.progress = Math.ceil((currentChunk / chunks) * 100);
-          this.updateProgress(file, ((currentChunk / chunks) * 100).toFixed(2));
-          this.status = `${this.dropzoneParams.data('uploading')} ${(
+          this.updateProgress(
+            file,
+            this.dropzoneParams.data("uploading"),
+            Number(((currentChunk / chunks) * 100).toFixed(2)),
+            3
+          );
+          this.status = `${this.dropzoneParams.data("uploading")} ${(
             (currentChunk / chunks) *
             100
           ).toFixed(2)}%`;
           await loadNext();
         } else {
-          try{
+          try {
             await completeUpload();
-          }catch(err){
-            let info = "上传失败"
-            this.allUploadLength++
-            this.uploadError(file,info)
-            this.allUploadFiles.push({name:file.name,status:2,info:info})
-            if(err){
-              return
+          } catch (err) {
+            let info = "上传失败";
+            this.allUploadLength++;
+            this.uploadError(file, info);
+            this.updateProgress(
+              file,
+              info,
+              Number(((currentChunk / chunks) * 100).toFixed(2)) - 1,
+              2
+            );
+            // this.allUploadFiles.push({
+            //   name: file.name,
+            //   status: 2,
+            //   info: info,
+            // });
+            if (err) {
+              return;
             }
           }
-          
-          
+
           console.log(
             `文件上传完成：${file.name} \n分片：${chunks} 大小:${
               file.size
             } 用时：${(new Date().getTime() - time) / 1000} s`
           );
-          this.uploadLength++
-          this.allUploadLength++
-          this.allUploadFiles.push({name:file.name,status:0,info:'上传成功'})
-          this.updateProgress(file, 100);
+          this.uploadLength++;
+          this.allUploadLength++;
+          // this.allUploadFiles.push({
+          //   name: file.name,
+          //   status: 0,
+          //   info: "上传成功",
+          // });
+
+          this.updateProgress(file, "上传成功", 100, 0);
           this.progress = 100;
-          this.status = this.dropzoneParams.data('upload-complete');
+          this.status = this.dropzoneParams.data("upload-complete");
           this.finishUpload(file);
         }
       };
-    }
-  }
+    },
+  },
 };
 </script>
 
-<style>
+<style scoped>
 .dropzone-wrapper {
   margin: 0;
 }
@@ -607,14 +698,41 @@ export default {
   border-bottom: 1px solid #dadce0;
   min-height: 0;
 }
-.upload-info{
+.upload-info {
   margin-top: 1em;
   margin-bottom: 3em;
 }
-.success{
+.success {
   color: #21ba45;
+  font-size: 16px;
+  margin-right: 0.5rem;
 }
-.failed{
+.failed {
   color: red;
+  font-size: 16px;
+  margin-right: 0.5rem;
+}
+.datast-upload-progress {
+  display: flex;
+  align-items: center;
+}
+.datast-upload-progress .dataset-name {
+  text-align: right;
+  width: 120px;
+  margin-right: 1rem;
+}
+.datast-upload-progress .dataset-progress {
+  flex: 1;
+}
+.datast-upload-progress .dataset-status {
+  width: 100px;
+  margin-left: 1rem;
+}
+.datast-upload-progress .dataset-status .status-flex {
+  display: flex;
+  align-items: center;
+}
+/deep/ .el-progress-bar__inner {
+  background-color: #21ba45;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/web_src/js/features/cloudrbanin.js b/web_src/js/features/cloudrbanin.js
index c3f7278aa..9adacc2a7 100644
--- a/web_src/js/features/cloudrbanin.js
+++ b/web_src/js/features/cloudrbanin.js
@@ -347,7 +347,6 @@ export default async function initCloudrain() {
     e.stopPropagation();
   });
 
-  
   function refreshStatus(version_name, ID, repoPath) {
     const url = `/api/v1/repos/${repoPath}/${ID}/?version_name${version_name}`;
     $.get(url, (data) => {
@@ -405,49 +404,58 @@ export default async function initCloudrain() {
     const jobName = this.dataset.jobname;
     getModelInfo(repoPath, modelName, versionName, jobName);
   });
+  function debugAgainPost(ID, debugUrl, redirect_to) {
+    $.ajax({
+      type: "POST",
+      url: debugUrl + "restart?redirect_to=" + redirect_to,
+      data: $("#debugAgainForm-" + ID).serialize(),
+      success: function (res) {
+        if (res["WechatRedirectUrl"]) {
+          window.location.href = res["WechatRedirectUrl"];
+        } else if (res.result_code === "0") {
+          if (res.id !== ID) {
+            location.reload();
+          } else {
+            $("#" + ID + "-icon")
+              .removeClass()
+              .addClass(res.status);
+            $("#" + ID + "-text").text(res.status);
+            $("#ai-debug-" + ID)
+              .removeClass("blue")
+              .addClass("disabled");
+            $("#ai-delete-" + ID)
+              .removeClass("blue")
+              .addClass("disabled");
+            $("#ai-debug-" + ID)
+              .text(debug_button)
+              .css("margin", "0 1rem");
+          }
+        } else {
+          $(".alert")
+            .html(res.error_msg)
+            .removeClass("alert-success")
+            .addClass("alert-danger")
+            .show()
+            .delay(2000)
+            .fadeOut();
+        }
+      },
+      error: function (res) {
+        console.log(res);
+      },
+    });
+  }
   function debugAgain(ID, debugUrl, redirect_to) {
     if ($("#" + ID + "-text").text() === "RUNNING") {
       window.open(debugUrl + "debug");
     } else {
-      $.ajax({
-        type: "POST",
-        url: debugUrl + "restart?redirect_to=" + redirect_to,
-        data: $("#debugAgainForm-" + ID).serialize(),
-        success: function (res) {
-          if (res["WechatRedirectUrl"]) {
-            window.location.href = res["WechatRedirectUrl"];
-          } else if (res.result_code === "0") {
-            if (res.id !== ID) {
-              location.reload();
-            } else {
-              $("#" + ID + "-icon")
-                .removeClass()
-                .addClass(res.status);
-              $("#" + ID + "-text").text(res.status);
-              $("#ai-debug-" + ID)
-                .removeClass("blue")
-                .addClass("disabled");
-              $("#ai-delete-" + ID)
-                .removeClass("blue")
-                .addClass("disabled");
-              $("#ai-debug-" + ID)
-                .text(debug_button)
-                .css("margin", "0 1rem");
-            }
-          } else {
-            $(".alert")
-              .html(res.error_msg)
-              .removeClass("alert-success")
-              .addClass("alert-danger")
-              .show()
-              .delay(2000)
-              .fadeOut();
-          }
-        },
-        error: function (res) {
-          console.log(res);
-        },
-      });
+      $(".ui.mini.modal.debug-again")
+        .modal({
+          onApprove: function () {
+            console.log("-----------");
+          },
+        })
+        .modal("show");
     }
   }
   $(".ui.basic.ai_debug").click(function () {