| @@ -214,47 +214,6 @@ func GetOneLevelAllObjectUnderDirMinio(bucket string, prefixRootPath string, rel | |||
| ParenDir: ParenDir, | |||
| } | |||
| fileInfos = append(fileInfos, fileInfo) | |||
| // log.Info("val key=" + val.Key) | |||
| // var isDir bool | |||
| // var fileName string | |||
| // if val.Key == Prefix { | |||
| // continue | |||
| // } | |||
| // fileName = val.Key[prefixLen:] | |||
| // log.Info("fileName =" + fileName) | |||
| // files := strings.Split(fileName, "/") | |||
| // if fileMap[files[0]] { | |||
| // continue | |||
| // } else { | |||
| // fileMap[files[0]] = true | |||
| // } | |||
| // ParenDir := relativePath | |||
| // fileName = files[0] | |||
| // if len(files) > 1 { | |||
| // isDir = true | |||
| // ParenDir += fileName + "/" | |||
| // } else { | |||
| // isDir = false | |||
| // } | |||
| // // if strings.HasSuffix(val.Key, "/") { | |||
| // // isDir = true | |||
| // // fileName = val.Key[prefixLen : len(val.Key)-1] | |||
| // // relativePath += val.Key[prefixLen:] | |||
| // // } else { | |||
| // // isDir = false | |||
| // // fileName = val.Key[prefixLen:] | |||
| // // } | |||
| // fileInfo := FileInfo{ | |||
| // ModTime: val.LastModified.Local().Format("2006-01-02 15:04:05"), | |||
| // FileName: fileName, | |||
| // Size: val.Size, | |||
| // IsDir: isDir, | |||
| // ParenDir: relativePath, | |||
| // } | |||
| // fileInfos = append(fileInfos, fileInfo) | |||
| } | |||
| return fileInfos, err | |||
| } else { | |||
| @@ -3117,7 +3117,8 @@ dataset_path_rule = The dataset location is stored in the environment variable d | |||
| view_sample = View sample | |||
| inference_output_path_rule = The inference output path is stored in the environment variable result_url. | |||
| model_file_path_rule=The model file location is stored in the environment variable ckpt_url | |||
| model_file_postfix_rule = The supported format of the model file is [ckpt, pb, h5, json, pkl, pth, t7, pdparams, onnx, pbtxt, keras, mlmodel, cfg, pt] | |||
| model_convert_postfix_rule = The supported format of the model file is [.pth, .pkl, .onnx, .mindir, .ckpt, .pb] | |||
| delete_task = Delete task | |||
| task_delete_confirm = Are you sure you want to delete this task? Once this task is deleted, it cannot be recovered. | |||
| operate_confirm = confirm | |||
| @@ -3132,7 +3132,8 @@ dataset_path_rule = 数据集位置存储在环境变量data_url中,训练输 | |||
| view_sample = 查看样例 | |||
| inference_output_path_rule = 推理输出路径存储在环境变量result_url中。 | |||
| model_file_path_rule = 模型文件位置存储在环境变量ckpt_url中。 | |||
| model_file_postfix_rule = 模型文件支持的格式为 [ckpt, pb, h5, json, pkl, pth, t7, pdparams, onnx, pbtxt, keras, mlmodel, cfg, pt] | |||
| model_convert_postfix_rule = 模型文件支持的格式为 [.pth, .pkl, .onnx, .mindir, .ckpt, .pb] | |||
| delete_task = 删除任务 | |||
| task_delete_confirm = 你确认删除该任务么?此任务一旦删除不可恢复。 | |||
| operate_confirm = 确定操作 | |||
| @@ -805,7 +805,13 @@ func generateCommand(repoName, processorType, codeRemotePath, dataRemotePath, bo | |||
| } | |||
| } | |||
| commandCode := "cd " + workDir + "code/" + strings.ToLower(repoName) + ";python " + bootFile + paramCode + ";" | |||
| var commandCode string | |||
| if processorType == grampus.ProcessorTypeNPU { | |||
| commandCode = "/bin/bash /home/work/run_train_for_openi.sh " + workDir + "code/" + strings.ToLower(repoName) + "/" + bootFile + " /tmp/log/train.log" + paramCode + ";" | |||
| } else if processorType == grampus.ProcessorTypeGPU { | |||
| commandCode = "cd " + workDir + "code/" + strings.ToLower(repoName) + ";python " + bootFile + paramCode + ";" | |||
| } | |||
| command += commandCode | |||
| //get exec result | |||
| @@ -0,0 +1,21 @@ | |||
| <div id="mask"> | |||
| <div class="loadingWrap"> | |||
| <div id="loading-page"> | |||
| <div class="rect1"></div> | |||
| <div class="rect2"></div> | |||
| <div class="rect3"></div> | |||
| <div class="rect4"></div> | |||
| <div class="rect5"></div> | |||
| </div> | |||
| <div | |||
| style=" | |||
| margin-top: 10%; | |||
| font-size: 14px; | |||
| color: #101010; | |||
| font-family: SourceHanSansSC-regular; | |||
| " | |||
| > | |||
| 任务正在准备中,喝杯水回来再看看~ | |||
| </div> | |||
| </div> | |||
| </div> | |||
| @@ -3,7 +3,7 @@ | |||
| {{template "repo/header" .}} | |||
| <div class="ui container"> | |||
| <input type="hidden" id="postPath" value="{{.Link}}"> | |||
| <div style="width: 80%;margin: auto;"> | |||
| <div> | |||
| <h4 class="ui top attached header"> | |||
| {{$.i18n.Tr "dataset.upload_dataset_file"}} | |||
| </h4> | |||
| @@ -54,7 +54,7 @@ | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div style="width: 80%;margin: auto;padding-top: 2em;"> | |||
| <div style="padding-top: 2em;"> | |||
| <!-- <p>说明:<br> | |||
| - 只有<span class="text blue">zip格式</span>zip格式的数据集才能发起云脑任务;<br> | |||
| - 云脑1提供 <span class="text blue">CPU / GPU</span> 资源,云脑2提供 <span class="text blue">Ascend NPU</span> 资源;调试使用的数据集也需要上传到对应的环境。 | |||
| @@ -28,18 +28,7 @@ | |||
| white-space: nowrap !important; | |||
| } | |||
| </style> | |||
| <!-- <div class="ui page dimmer"> | |||
| <div class="ui text loader">{{.i18n.Tr "loading"}}</div> | |||
| </div> --> | |||
| <div id="mask"> | |||
| <div id="loadingPage"> | |||
| <div class="rect1"></div> | |||
| <div class="rect2"></div> | |||
| <div class="rect3"></div> | |||
| <div class="rect4"></div> | |||
| <div class="rect5"></div> | |||
| </div> | |||
| </div> | |||
| {{template "custom/global_mask" .}} | |||
| <div class="repository"> | |||
| {{template "repo/header" .}} | |||
| <div class="ui container"> | |||
| @@ -36,15 +36,7 @@ | |||
| white-space: nowrap !important; | |||
| } | |||
| </style> | |||
| <div id="mask"> | |||
| <div id="loadingPage"> | |||
| <div class="rect1"></div> | |||
| <div class="rect2"></div> | |||
| <div class="rect3"></div> | |||
| <div class="rect4"></div> | |||
| <div class="rect5"></div> | |||
| </div> | |||
| </div> | |||
| {{template "custom/global_mask" .}} | |||
| <div class="repository"> | |||
| {{template "repo/header" .}} | |||
| <div class="ui container"> | |||
| @@ -141,6 +133,9 @@ | |||
| </div> | |||
| </div> | |||
| <span > | |||
| <i class="question circle icon" data-content="{{.i18n.Tr "cloudbrain.model_file_postfix_rule"}}" data-position="top center" data-variation="inverted mini"></i> | |||
| </span> | |||
| </div> | |||
| <!-- AI引擎 --> | |||
| @@ -1,91 +1,7 @@ | |||
| {{template "base/head" .}} | |||
| <style> | |||
| /* 遮罩层css效果图 */ | |||
| #mask { | |||
| position: fixed; | |||
| top: 0px; | |||
| left: 0px; | |||
| right: 0px; | |||
| bottom: 0px; | |||
| filter: alpha(opacity=60); | |||
| background-color: #777; | |||
| z-index: 1000; | |||
| display: none; | |||
| opacity: 0.8; | |||
| -moz-opacity: 0.5; | |||
| padding-top: 100px; | |||
| color: #000000 | |||
| } | |||
| /* 加载圈css效果图 */ | |||
| #loadingPage { | |||
| margin: 200px auto; | |||
| width: 50px; | |||
| height: 40px; | |||
| text-align: center; | |||
| font-size: 10px; | |||
| display: block; | |||
| } | |||
| #loadingPage>div { | |||
| background-color: green; | |||
| height: 100%; | |||
| width: 6px; | |||
| display: inline-block; | |||
| -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; | |||
| animation: sk-stretchdelay 1.2s infinite ease-in-out; | |||
| } | |||
| #loadingPage .rect2 { | |||
| -webkit-animation-delay: -1.1s; | |||
| animation-delay: -1.1s; | |||
| } | |||
| #loadingPage .rect3 { | |||
| -webkit-animation-delay: -1.0s; | |||
| animation-delay: -1.0s; | |||
| } | |||
| #loadingPage .rect4 { | |||
| -webkit-animation-delay: -0.9s; | |||
| animation-delay: -0.9s; | |||
| } | |||
| #loadingPage .rect5 { | |||
| -webkit-animation-delay: -0.8s; | |||
| animation-delay: -0.8s; | |||
| } | |||
| @-webkit-keyframes sk-stretchdelay { | |||
| 0%, | |||
| 40%, | |||
| 100% { | |||
| -webkit-transform: scaleY(0.4) | |||
| } | |||
| 20% { | |||
| -webkit-transform: scaleY(1.0) | |||
| } | |||
| } | |||
| @keyframes sk-stretchdelay { | |||
| 0%, | |||
| 40%, | |||
| 100% { | |||
| transform: scaleY(0.4); | |||
| -webkit-transform: scaleY(0.4); | |||
| } | |||
| 20% { | |||
| transform: scaleY(1.0); | |||
| -webkit-transform: scaleY(1.0); | |||
| } | |||
| } | |||
| .inline.required.field.cloudbrain_benchmark { | |||
| display: none; | |||
| } | |||
| @@ -97,25 +13,11 @@ | |||
| .inline.required.field.cloudbrain_brainscore { | |||
| display: none; | |||
| } | |||
| .icons { | |||
| /* position: absolute !important; | |||
| right: 150px; | |||
| top: 14px; | |||
| z-index: 2; */ | |||
| } | |||
| </style> | |||
| <div id="mask"> | |||
| <div id="loadingPage"> | |||
| <div class="rect1"></div> | |||
| <div class="rect2"></div> | |||
| <div class="rect3"></div> | |||
| <div class="rect4"></div> | |||
| <div class="rect5"></div> | |||
| </div> | |||
| </div> | |||
| {{template "custom/global_mask" .}} | |||
| <div class="repository"> | |||
| {{template "repo/header" .}} | |||
| @@ -330,7 +232,6 @@ | |||
| let min_value_task = value_task.toLowerCase() | |||
| $("input[name='display_job_name']").attr("value", min_value_task) | |||
| document.getElementById("mask").style.display = "block" | |||
| } | |||
| // 页面加载完毕后遮罩层隐藏 | |||
| @@ -345,44 +246,11 @@ | |||
| .dropdown({ | |||
| placeholder: "选择数据集类别", | |||
| }) | |||
| console.log("=======================") | |||
| // $(document).ready(function(){ | |||
| // let waitNums = $('.cloudbrain-type').data('queue').split('map')[1] | |||
| // let test = new Map() | |||
| // let waitNumsArray = waitNums.split(' ') | |||
| // waitNumsArray.forEach((element,index) => { | |||
| // if(index===0){ | |||
| // test.set(element.slice(1,-2),parseInt(element.slice(-1))) | |||
| // }else if(index===waitNumsArray.length-1){ | |||
| // test.set(element.slice(0,-3),parseInt(element.slice(-2,-1))) | |||
| // }else{ | |||
| // test.set(element.slice(0,-2),parseInt(element.slice(-1))) | |||
| // } | |||
| // }); | |||
| // console.log(test) | |||
| // $('.ui.search.dropdown.gpu-type').dropdown({ | |||
| // onChange: function(value, text, $selectedItem) { | |||
| // console.log("=-------------",value) | |||
| // console.log("=-------------",test.get(value)) | |||
| // let gpuTypeNums= test.get(value) | |||
| // $('#gpu-nums').text("{{.i18n.Tr "repo.wait_count_start"}}"+gpuTypeNums+"{{.i18n.Tr "repo.wait_count_end"}}") | |||
| // } | |||
| // }); | |||
| // }) | |||
| // $('#cloudbrain_image').select2({ | |||
| // placeholder: "选择镜像" | |||
| // }); | |||
| $(".ui.button.reset").click(function (e) { | |||
| e.preventDefault() | |||
| $('#cloudbrain_benchmark_category') | |||
| .dropdown("clear", true) | |||
| }) | |||
| $(".ui.positive.button.active.all_selected").click(function (e) { | |||
| e.preventDefault() | |||
| var selected_value = new Array() | |||
| @@ -64,18 +64,7 @@ | |||
| } | |||
| </style> | |||
| <!-- <div class="ui page dimmer"> | |||
| <div class="ui text loader">{{.i18n.Tr "loading"}}</div> | |||
| </div> --> | |||
| <div id="mask"> | |||
| <div id="loadingPage"> | |||
| <div class="rect1"></div> | |||
| <div class="rect2"></div> | |||
| <div class="rect3"></div> | |||
| <div class="rect4"></div> | |||
| <div class="rect5"></div> | |||
| </div> | |||
| </div> | |||
| {{template "custom/global_mask" .}} | |||
| <div class="repository"> | |||
| {{template "repo/header" .}} | |||
| <div class="ui container"> | |||
| @@ -272,6 +272,8 @@ | |||
| class="cti-mgRight-sm">{{$.i18n.Tr "repo.modelarts.train_job.dura_time"}}:</span> | |||
| <span class="cti-mgRight-sm uc-accordionTitle-black" | |||
| id="{{.VersionName}}-duration-span">{{$.duration}}</span> | |||
| <span id="refresh-status" data-tooltip="刷新" style="cursor: pointer;" data-inverted="" data-version="{{.VersionName}}"><i | |||
| class="redo icon redo-color"></i></span> | |||
| </div> | |||
| </span> | |||
| @@ -19,90 +19,6 @@ | |||
| height: 100%; | |||
| } | |||
| /* 弹窗 */ | |||
| #mask { | |||
| position: fixed; | |||
| top: 0px; | |||
| left: 0px; | |||
| right: 0px; | |||
| bottom: 0px; | |||
| filter: alpha(opacity=60); | |||
| background-color: #777; | |||
| z-index: 1000; | |||
| display: none; | |||
| opacity: 0.8; | |||
| -moz-opacity: 0.5; | |||
| padding-top: 100px; | |||
| color: #000000 | |||
| } | |||
| #loadingPage { | |||
| margin: 200px auto; | |||
| width: 50px; | |||
| height: 40px; | |||
| text-align: center; | |||
| font-size: 10px; | |||
| display: block; | |||
| } | |||
| #loadingPage>div { | |||
| background-color: green; | |||
| height: 100%; | |||
| width: 6px; | |||
| display: inline-block; | |||
| -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; | |||
| animation: sk-stretchdelay 1.2s infinite ease-in-out; | |||
| } | |||
| #loadingPage .rect2 { | |||
| -webkit-animation-delay: -1.1s; | |||
| animation-delay: -1.1s; | |||
| } | |||
| #loadingPage .rect3 { | |||
| -webkit-animation-delay: -1.0s; | |||
| animation-delay: -1.0s; | |||
| } | |||
| #loadingPage .rect4 { | |||
| -webkit-animation-delay: -0.9s; | |||
| animation-delay: -0.9s; | |||
| } | |||
| #loadingPage .rect5 { | |||
| -webkit-animation-delay: -0.8s; | |||
| animation-delay: -0.8s; | |||
| } | |||
| @-webkit-keyframes sk-stretchdelay { | |||
| 0%, | |||
| 40%, | |||
| 100% { | |||
| -webkit-transform: scaleY(0.4) | |||
| } | |||
| 20% { | |||
| -webkit-transform: scaleY(1.0) | |||
| } | |||
| } | |||
| @keyframes sk-stretchdelay { | |||
| 0%, | |||
| 40%, | |||
| 100% { | |||
| transform: scaleY(0.4); | |||
| -webkit-transform: scaleY(0.4); | |||
| } | |||
| 20% { | |||
| transform: scaleY(1.0); | |||
| -webkit-transform: scaleY(1.0); | |||
| } | |||
| } | |||
| /* 消息框 */ | |||
| .alert { | |||
| @@ -203,17 +119,6 @@ | |||
| } | |||
| </style> | |||
| <!-- 弹窗 --> | |||
| <div id="mask"> | |||
| <div id="loadingPage"> | |||
| <div class="rect1"></div> | |||
| <div class="rect2"></div> | |||
| <div class="rect3"></div> | |||
| <div class="rect4"></div> | |||
| <div class="rect5"></div> | |||
| </div> | |||
| </div> | |||
| <div class="alert"></div> | |||
| <div class="repository release dataset-list view"> | |||
| {{template "repo/header" .}} | |||
| @@ -502,6 +407,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> | |||
| @@ -56,18 +56,7 @@ | |||
| font-size: 14px !important; | |||
| } | |||
| </style> | |||
| <!-- <div class="ui page dimmer"> | |||
| <div class="ui text loader">{{.i18n.Tr "loading"}}</div> | |||
| </div> --> | |||
| <div id="mask"> | |||
| <div id="loadingPage"> | |||
| <div class="rect1"></div> | |||
| <div class="rect2"></div> | |||
| <div class="rect3"></div> | |||
| <div class="rect4"></div> | |||
| <div class="rect5"></div> | |||
| </div> | |||
| </div> | |||
| {{template "custom/global_mask" .}} | |||
| <div class="repository"> | |||
| {{template "repo/header" .}} | |||
| <div class="ui container"> | |||
| @@ -51,18 +51,7 @@ | |||
| font-size: 14px !important; | |||
| } | |||
| </style> | |||
| <!-- <div class="ui page dimmer"> | |||
| <div class="ui text loader">{{.i18n.Tr "loading"}}</div> | |||
| </div> --> | |||
| <div id="mask"> | |||
| <div id="loadingPage"> | |||
| <div class="rect1"></div> | |||
| <div class="rect2"></div> | |||
| <div class="rect3"></div> | |||
| <div class="rect4"></div> | |||
| <div class="rect5"></div> | |||
| </div> | |||
| </div> | |||
| {{template "custom/global_mask" .}} | |||
| <div class="repository"> | |||
| {{template "repo/header" .}} | |||
| <div class="ui container"> | |||
| @@ -209,15 +209,7 @@ | |||
| box-shadow: 0 2px 3px 0 rgb(34 36 38 / 15%); | |||
| } | |||
| </style> | |||
| <div id="mask"> | |||
| <div id="loadingPage"> | |||
| <div class="rect1"></div> | |||
| <div class="rect2"></div> | |||
| <div class="rect3"></div> | |||
| <div class="rect4"></div> | |||
| <div class="rect5"></div> | |||
| </div> | |||
| </div> | |||
| {{template "custom/global_mask" .}} | |||
| <div class="repository"> | |||
| {{template "repo/header" .}} | |||
| <div class="ui container"> | |||
| @@ -289,10 +281,8 @@ | |||
| <div class="content-pad"> | |||
| <div class="ui pointing secondary menu" style="border-bottom: 1px solid rgba(34,36,38,.15);"> | |||
| <a class="active item" | |||
| data-tab="first{{$k}}">{{$.i18n.Tr "repo.modelarts.train_job.config"}}</a> | |||
| <a class="item" data-tab="second{{$k}}" | |||
| onclick="loadLog({{.VersionName}})">{{$.i18n.Tr "repo.modelarts.log"}}</a> | |||
| <a class="active item" data-tab="first{{$k}}">{{$.i18n.Tr "repo.modelarts.train_job.config"}}</a> | |||
| <a class="item log_bottom" data-tab="second{{$k}}" data-version="{{.VersionName}}">{{$.i18n.Tr "repo.modelarts.log"}}</a> | |||
| <a class="item load-model-file" data-tab="third{{$k}}" data-download-flag="{{$.canDownload}}" data-path="{{$.RepoLink}}/modelarts/train-job/{{.JobID}}/model_list" data-version="{{.VersionName}}" data-parents="" data-filename="" data-init="init" >{{$.i18n.Tr "repo.model_download"}}</a> | |||
| </div> | |||
| <div class="ui tab active" data-tab="first{{$k}}"> | |||
| @@ -479,11 +469,23 @@ | |||
| </div> | |||
| <div class="ui tab" data-tab="second{{$k}}"> | |||
| <div style="position: relative;"> | |||
| <span> | |||
| <a title="滚动到顶部" style="position: absolute; right: -32px;cursor: pointer;" | |||
| class="log_top" data-version="{{.VersionName}}"><i class="icon-to-top"></i></a> | |||
| </span> | |||
| <span class="log-info"> | |||
| <a title="滚动到底部" style="position: absolute; bottom: 10px;right: -32px;cursor: pointer;" | |||
| class="log_bottom" data-version="{{.VersionName}}"><i | |||
| class="icon-to-bottom"></i></a> | |||
| </span> | |||
| <div class="ui message message{{.VersionName}}" style="display: none;"> | |||
| <div id="header"></div> | |||
| </div> | |||
| <div class="ui attached log" id="log{{.VersionName}}" | |||
| <div class="ui attached log" id="log{{.VersionName}}" | |||
| style="height: 300px !important; overflow: auto;"> | |||
| <div class="ui inverted active dimmer"> | |||
| <div class="ui loader"></div> | |||
| </div> | |||
| <input type="hidden" name="end_line" value> | |||
| <input type="hidden" name="start_line" value> | |||
| <pre id="log_file{{.VersionName}}"></pre> | |||
| @@ -771,7 +773,7 @@ | |||
| } | |||
| if (srcEngine == 'mindspore') { | |||
| $('#choice_Engine .default.text').text("MindSpore"); | |||
| $('#choice_Engine input[name="Engine"]').val(1) | |||
| $('#choice_Engine input[name="Engine"]').val(2) | |||
| } | |||
| } | |||
| }else{ | |||
| @@ -868,17 +870,4 @@ | |||
| size = size.toFixed(0);//保留的小数位数 | |||
| return size + unitArr[index]; | |||
| } | |||
| function loadLog(version_name) { | |||
| document.getElementById("mask").style.display = "block" | |||
| $.get(`/api/v1/repos/${userName}/${repoPath}/grampus/train-job/${jobID}/log?version_name=${version_name}&lines=50&order=asc`, (data) => { | |||
| $('input[name=end_line]').val(data.EndLine) | |||
| $('input[name=start_line]').val(data.StartLine) | |||
| $(`#log_file${version_name}`).text(data.Content) | |||
| document.getElementById("mask").style.display = "none" | |||
| }).fail(function (err) { | |||
| document.getElementById("mask").style.display = "none" | |||
| console.log(err); | |||
| }); | |||
| } | |||
| </script> | |||
| @@ -10,16 +10,6 @@ | |||
| } | |||
| </style> | |||
| <!-- 弹窗 --> | |||
| <div id="mask"> | |||
| <div id="loadingPage"> | |||
| <div class="rect1"></div> | |||
| <div class="rect2"></div> | |||
| <div class="rect3"></div> | |||
| <div class="rect4"></div> | |||
| <div class="rect5"></div> | |||
| </div> | |||
| </div> | |||
| <!-- 提示框 --> | |||
| <div class="alert"></div> | |||
| @@ -35,15 +35,7 @@ | |||
| white-space: nowrap !important; | |||
| } | |||
| </style> | |||
| <div id="mask"> | |||
| <div id="loadingPage"> | |||
| <div class="rect1"></div> | |||
| <div class="rect2"></div> | |||
| <div class="rect3"></div> | |||
| <div class="rect4"></div> | |||
| <div class="rect5"></div> | |||
| </div> | |||
| </div> | |||
| {{template "custom/global_mask" .}} | |||
| <div class="repository"> | |||
| {{template "repo/header" .}} | |||
| <div class="ui container"> | |||
| @@ -141,7 +133,7 @@ | |||
| </div> | |||
| <span > | |||
| <i class="question circle icon" data-content="{{.i18n.Tr "cloudbrain.model_file_path_rule"}}" data-position="top center" data-variation="inverted mini"></i> | |||
| <i class="question circle icon" data-content="{{.i18n.Tr "cloudbrain.model_file_path_rule"}} {{.i18n.Tr "cloudbrain.model_file_postfix_rule"}}" data-position="top center" data-variation="inverted mini"></i> | |||
| </span> | |||
| </div> | |||
| <!-- AI引擎 --> | |||
| @@ -465,7 +465,7 @@ td, th { | |||
| <a title="滚动到顶部" style="position: absolute; right: -32px;cursor: pointer;" | |||
| class="log_top" data-version="{{.VersionName}}"><i class="icon-to-top"></i></a> | |||
| </span> | |||
| <span> | |||
| <span class="log-info"> | |||
| <a title="滚动到底部" style="position: absolute; bottom: 10px;right: -32px;cursor: pointer;" | |||
| class="log_bottom" data-version="{{.VersionName}}"><i | |||
| class="icon-to-bottom"></i></a> | |||
| @@ -474,6 +474,9 @@ td, th { | |||
| <div id="header"></div> | |||
| </div> | |||
| <div class="ui attached log log-scroll" data-version="{{.VersionName}}" id="log{{.VersionName}}" style="height: 300px !important; overflow: auto;"> | |||
| <div class="ui inverted active dimmer"> | |||
| <div class="ui loader"></div> | |||
| </div> | |||
| <input type="hidden" name="end_line" value> | |||
| <input type="hidden" name="start_line" value> | |||
| <pre id="log_file{{.VersionName}}"></pre> | |||
| @@ -5,15 +5,7 @@ | |||
| } | |||
| </style> | |||
| <div id="mask"> | |||
| <div id="loadingPage"> | |||
| <div class="rect1"></div> | |||
| <div class="rect2"></div> | |||
| <div class="rect3"></div> | |||
| <div class="rect4"></div> | |||
| <div class="rect5"></div> | |||
| </div> | |||
| </div> | |||
| {{template "custom/global_mask" .}} | |||
| <div class="repository"> | |||
| {{template "repo/header" .}} | |||
| <div class="repository new repo ui middle very relaxed page grid"> | |||
| @@ -208,15 +208,6 @@ | |||
| padding-top: 0.5rem; | |||
| } | |||
| </style> | |||
| <div id="mask"> | |||
| <div id="loadingPage"> | |||
| <div class="rect1"></div> | |||
| <div class="rect2"></div> | |||
| <div class="rect3"></div> | |||
| <div class="rect4"></div> | |||
| <div class="rect5"></div> | |||
| </div> | |||
| </div> | |||
| <div class="repository"> | |||
| {{template "repo/header" .}} | |||
| <div class="ui container"> | |||
| @@ -58,15 +58,7 @@ | |||
| <!-- <div class="ui page dimmer"> | |||
| <div class="ui text loader">{{.i18n.Tr "loading"}}</div> | |||
| </div> --> | |||
| <div id="mask"> | |||
| <div id="loadingPage"> | |||
| <div class="rect1"></div> | |||
| <div class="rect2"></div> | |||
| <div class="rect3"></div> | |||
| <div class="rect4"></div> | |||
| <div class="rect5"></div> | |||
| </div> | |||
| </div> | |||
| {{template "custom/global_mask" .}} | |||
| <div class="repository"> | |||
| {{template "repo/header" .}} | |||
| <div class="ui container"> | |||
| @@ -215,15 +215,7 @@ | |||
| box-shadow: 0 2px 3px 0 rgb(34 36 38 / 15%); | |||
| } | |||
| </style> | |||
| <div id="mask"> | |||
| <div id="loadingPage"> | |||
| <div class="rect1"></div> | |||
| <div class="rect2"></div> | |||
| <div class="rect3"></div> | |||
| <div class="rect4"></div> | |||
| <div class="rect5"></div> | |||
| </div> | |||
| </div> | |||
| {{template "custom/global_mask" .}} | |||
| <div class="repository"> | |||
| {{template "repo/header" .}} | |||
| <div class="ui container"> | |||
| @@ -518,7 +510,7 @@ | |||
| <a title="滚动到顶部" style="position: absolute; right: -32px;cursor: pointer;" | |||
| class="log_top" data-version="{{.VersionName}}"><i class="icon-to-top"></i></a> | |||
| </span> | |||
| <span> | |||
| <span class="log-info"> | |||
| <a title="滚动到底部" style="position: absolute; bottom: 10px;right: -32px;cursor: pointer;" | |||
| class="log_bottom" data-version="{{.VersionName}}"><i | |||
| class="icon-to-bottom"></i></a> | |||
| @@ -528,6 +520,9 @@ | |||
| </div> | |||
| <div class="ui attached log log-scroll" id="log{{.VersionName}}" data-version="{{.VersionName}}" | |||
| style="height: 300px !important; overflow: auto;"> | |||
| <div class="ui inverted active dimmer"> | |||
| <div class="ui loader"></div> | |||
| </div> | |||
| <input type="hidden" name="end_line" value> | |||
| <input type="hidden" name="start_line" value> | |||
| <pre id="log_file{{.VersionName}}"></pre> | |||
| @@ -911,154 +906,7 @@ | |||
| } | |||
| function loadLog(version_name) { | |||
| $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&lines=50&order=asc`, (data) => { | |||
| $('input[name=end_line]').val(data.EndLine) | |||
| $('input[name=start_line]').val(data.StartLine) | |||
| $(`#log_file${version_name}`).text(data.Content) | |||
| if(!data.CanLogDownload){ | |||
| $(`#${version_name}-log-down`).removeClass('ti-download-file').addClass('disabled') | |||
| } | |||
| }).fail(function (err) { | |||
| console.log(err); | |||
| }); | |||
| } | |||
| function debounce(fn, delay) { | |||
| let timer; | |||
| return (...args) => { | |||
| // 判断定时器是否存在,清除定时器 | |||
| if (timer) { | |||
| clearTimeout(timer); | |||
| } | |||
| // 重新调用setTimeout | |||
| timer = setTimeout(() => { | |||
| fn.apply(this, args); | |||
| }, delay); | |||
| }; | |||
| } | |||
| const fn = debounce(logScroll, 500) | |||
| function logScroll(version_name) { | |||
| let container = document.querySelector(`#log${version_name}`) | |||
| let scrollTop = container.scrollTop | |||
| let scrollHeight = container.scrollHeight | |||
| let clientHeight = container.clientHeight | |||
| let scrollLeft = container.scrollLeft | |||
| if (((parseInt(scrollTop) + clientHeight == scrollHeight || parseInt(scrollTop) + clientHeight + 1 == scrollHeight || parseInt(scrollTop) + clientHeight - 1 == scrollHeight)) && parseInt(scrollTop) !== 0 && scrollLeft == 0) { | |||
| let end_line = $(`#log${version_name} input[name=end_line]`).val() | |||
| $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&base_line=${end_line}&lines=50&order=desc`, (data) => { | |||
| if (data.Lines == 0) { | |||
| $(`.message${version_name} #header`).text('您已翻阅至日志底部') | |||
| $(`.message${version_name}`).css('display', 'block') | |||
| setTimeout(function () { | |||
| $(`.message${version_name}`).css('display', 'none') | |||
| }, 1000) | |||
| } else { | |||
| if (end_line === data.EndLine) { | |||
| return | |||
| } | |||
| else { | |||
| $(`#log${version_name} input[name=end_line]`).val(data.EndLine) | |||
| $(`#log${version_name}`).append('<pre>' + data.Content) | |||
| } | |||
| } | |||
| }).fail(function (err) { | |||
| console.log(err); | |||
| }); | |||
| } | |||
| if ([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].includes(scrollTop) && scrollLeft == 0) { | |||
| let start_line = $(`#log${version_name} input[name=start_line]`).val() | |||
| $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&base_line=${start_line}&lines=50&order=asc`, (data) => { | |||
| if (data.Lines == 0) { | |||
| $(`.message${version_name} #header`).text('您已翻阅至日志顶部') | |||
| $(`.message${version_name}`).css('display', 'block') | |||
| setTimeout(function () { | |||
| $(`.message${version_name}`).css('display', 'none') | |||
| }, 1000) | |||
| } else { | |||
| $(`#log${version_name} input[name=start_line]`).val(data.StartLine) //如果变动就改变所对应的值 | |||
| $(`#log${version_name}`).prepend('<pre>' + data.Content) | |||
| } | |||
| }).fail(function (err) { | |||
| console.log(err); | |||
| }); | |||
| } | |||
| } | |||
| function scrollAnimation(dom, currentY, targetY, currentX) { | |||
| let needScrollTop = targetY - currentY; | |||
| let _currentY = currentY; | |||
| setTimeout(() => { | |||
| // 一次调用滑动帧数,每次调用会不一样 | |||
| //取总距离的十分之一 | |||
| const dist = Math.ceil(needScrollTop / 10); | |||
| _currentY += dist; | |||
| //移动一个十分之一 | |||
| dom.scrollTo(currentX || 0, _currentY, 'smooth'); | |||
| // 如果移动幅度小于十个像素,直接移动,否则递归调用,实现动画效果 | |||
| if (needScrollTop > 10 || needScrollTop < -10) { | |||
| scrollAnimation(dom, _currentY, targetY) | |||
| } else { | |||
| dom.scrollTo(0, targetY, 'smooth') | |||
| } | |||
| }, 1) | |||
| } | |||
| $('.log_top').click(function () { | |||
| // let logContentDom = document.querySelector('.log') | |||
| // if(!logContentDom) | |||
| // return | |||
| // let version_name = $('.log_top').data('version') | |||
| let version_name = $(this).data('version') | |||
| let logContentDom = document.querySelector(`#log${version_name}`) | |||
| $(`#log_file${version_name}`).siblings('pre').remove() | |||
| $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&base_line=&lines=50&order=asc`, (data) => { | |||
| $(`#log${version_name} input[name=end_line]`).val(data.EndLine) //如果变动就改变所对应的值 | |||
| $(`#log${version_name} input[name=start_line]`).val(data.StartLine) | |||
| $(`#log${version_name}`).prepend('<pre>' + data.Content) | |||
| $(`.message${version_name} #header`).text('您已翻阅至日志顶部') | |||
| $(`.message${version_name}`).css('display', 'block') | |||
| setTimeout(function () { | |||
| $(`.message${version_name}`).css('display', 'none') | |||
| }, 1000) | |||
| scrollAnimation(logContentDom, logContentDom.scrollTop, 0); | |||
| }) | |||
| }) | |||
| $('.log_bottom').click(function (e) { | |||
| let version_name = $(this).data('version') | |||
| let logContentDom = document.querySelector(`#log${version_name}`) | |||
| $(`#log_file${version_name}`).siblings('pre').remove() | |||
| $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&base_line=&lines=50&order=desc`, (data) => { | |||
| $(`#log${version_name} input[name=end_line]`).val(data.EndLine) //如果变动就改变所对应的值 | |||
| $(`#log${version_name} input[name=start_line]`).val(data.StartLine) | |||
| $(`#log${version_name}`).append('<pre>' + data.Content) | |||
| $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&base_line=${data.EndLine}&lines=50&order=desc`, (data) => { | |||
| if (data.Lines == 0) { | |||
| $(`.message${version_name} #header`).text('您已翻阅至日志底部') | |||
| $(`.message${version_name}`).css('display', 'block') | |||
| setTimeout(function () { | |||
| $(`.message${version_name}`).css('display', 'none') | |||
| }, 1000) | |||
| } else { | |||
| if (end_line === data.EndLine) { | |||
| return | |||
| } | |||
| else { | |||
| $(`#log${version_name} input[name=end_line]`).val(data.EndLine) | |||
| $(`#log${version_name}`).append('<pre>' + data.Content) | |||
| } | |||
| } | |||
| }).fail(function (err) { | |||
| console.log(err); | |||
| }); | |||
| scrollAnimation(logContentDom, logContentDom.scrollTop + 1, logContentDom.scrollHeight - logContentDom.clientHeight); | |||
| }) | |||
| }) | |||
| @@ -51,18 +51,7 @@ | |||
| } | |||
| </style> | |||
| <!-- <div class="ui page dimmer"> | |||
| <div class="ui text loader">{{.i18n.Tr "loading"}}</div> | |||
| </div> --> | |||
| <div id="mask"> | |||
| <div id="loadingPage"> | |||
| <div class="rect1"></div> | |||
| <div class="rect2"></div> | |||
| <div class="rect3"></div> | |||
| <div class="rect4"></div> | |||
| <div class="rect5"></div> | |||
| </div> | |||
| </div> | |||
| {{template "custom/global_mask" .}} | |||
| <div class="repository"> | |||
| {{template "repo/header" .}} | |||
| <div class="ui container"> | |||
| @@ -254,6 +254,10 @@ | |||
| </div> | |||
| </div> | |||
| <div data-tooltip="{{.i18n.Tr "cloudbrain.model_convert_postfix_rule"}}" data-inverted="" data-variation="mini"> | |||
| <i class="question circle icon"></i> | |||
| </div> | |||
| </div> | |||
| <div class="unite min_title inline fields required"> | |||
| <div class="three wide field right aligned"> | |||
| @@ -347,7 +351,6 @@ | |||
| return true; | |||
| } | |||
| } | |||
| $('#submitId').click(function(){ | |||
| let data={}; | |||
| data['_csrf']=csrf | |||
| @@ -166,15 +166,7 @@ td, th { | |||
| padding-top: 0.5rem ; | |||
| } | |||
| </style> | |||
| <div id="mask"> | |||
| <div id="loadingPage"> | |||
| <div class="rect1"></div> | |||
| <div class="rect2"></div> | |||
| <div class="rect3"></div> | |||
| <div class="rect4"></div> | |||
| <div class="rect5"></div> | |||
| </div> | |||
| </div> | |||
| {{template "custom/global_mask" .}} | |||
| <div class="repository"> | |||
| {{template "repo/header" .}} | |||
| <div class="ui container"> | |||
| @@ -325,6 +325,7 @@ | |||
| $('#name').val(modelName) | |||
| $('#version').val("0.0.1") | |||
| } | |||
| let dirKey="isOnlyDir--:&"; | |||
| function showcreate(obj) { | |||
| $('.ui.modal.second') | |||
| .modal({ | |||
| @@ -460,7 +461,7 @@ | |||
| var zNodes=[]; | |||
| var nodesMap={}; | |||
| for (let i=0;i<n_length;i++){ | |||
| parentNodeMap = nodesMap; | |||
| var parentNodeMap = nodesMap; | |||
| var fileSplits = data[i].FileName.split("/"); | |||
| for(let j=0;j < fileSplits.length;j++){ | |||
| if(fileSplits[j] == ""){ | |||
| @@ -469,7 +470,22 @@ | |||
| if(parentNodeMap[fileSplits[j]] == null){ | |||
| parentNodeMap[fileSplits[j]] = {}; | |||
| } | |||
| parentNodeMap = parentNodeMap[fileSplits[j]] | |||
| parentNodeMap = parentNodeMap[fileSplits[j]]; | |||
| } | |||
| } | |||
| for (let i=0;i<n_length;i++){ | |||
| var parentNodeMap = nodesMap; | |||
| var fileSplits = data[i].FileName.split("/"); | |||
| for(let j=0;j < fileSplits.length;j++){ | |||
| if(fileSplits[j] == ""){ | |||
| if(data[i].FileName[data[i].FileName.length -1] =="/"){ | |||
| if(Object.keys(parentNodeMap).length ==0){ | |||
| parentNodeMap[dirKey]="true"; | |||
| } | |||
| } | |||
| break; | |||
| } | |||
| parentNodeMap = parentNodeMap[fileSplits[j]]; | |||
| } | |||
| } | |||
| convertToNode(zNodes,nodesMap); | |||
| @@ -488,12 +504,18 @@ | |||
| node["name"] = keyList[i]; | |||
| nodeList.push(node); | |||
| if(nodesMap[keyList[i]] != null && Object.keys(nodesMap[keyList[i]]).length >0){ | |||
| node["children"]=[]; | |||
| if(isFirst){ | |||
| node["open"] = true; | |||
| isFirst= false; | |||
| if(nodesMap[keyList[i]][dirKey] != null){ | |||
| node["open"] = false; | |||
| node["isParent"] = true; | |||
| }else{ | |||
| node["children"]=[]; | |||
| if(isFirst){ | |||
| node["open"] = true; | |||
| isFirst= false; | |||
| } | |||
| convertToNode(node["children"],nodesMap[keyList[i]]); | |||
| } | |||
| convertToNode(node["children"],nodesMap[keyList[i]]); | |||
| } | |||
| } | |||
| } | |||
| @@ -472,10 +472,15 @@ function renderBrend(ID,version_name,parents,filename,init){ | |||
| $('input[name=modelback]').val(filename) | |||
| }else{ | |||
| $('input[name=model]').val(parents) | |||
| $('input[name=modelbac]').val(filename) | |||
| $('#file_breadcrumb a.section:contains(${filename})').nextAll().remove() | |||
| $('#file_breadcrumb a.section:contains(${filename})').replaceWith(`<div class='active section'>${filename}</div>`) | |||
| $('#file_breadcrumb div.section:contains(${filename})').append("<div class='divider'> / </div>") | |||
| $('input[name=modelback]').val(filename) | |||
| let selectEle = $('#file_breadcrumb a.section').filter( | |||
| (index, item) => { | |||
| return item.text == filename; | |||
| } | |||
| ); | |||
| selectEle.nextAll().remove(); | |||
| selectEle.after("<div class='divider'> / </div>"); | |||
| selectEle.replaceWith(`<div class='active section'>${filename}</div>`); | |||
| } | |||
| } | |||
| @@ -1,14 +1,4 @@ | |||
| {{template "base/head" .}} | |||
| <!-- 弹窗 --> | |||
| <div id="mask"> | |||
| <div id="loadingPage"> | |||
| <div class="rect1"></div> | |||
| <div class="rect2"></div> | |||
| <div class="rect3"></div> | |||
| <div class="rect4"></div> | |||
| <div class="rect5"></div> | |||
| </div> | |||
| </div> | |||
| <!-- 提示框 --> | |||
| <div class="alert"></div> | |||
| <div class="explore users"> | |||
| @@ -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> | |||
| </style> | |||
| @@ -14,7 +14,7 @@ export default async function initCloudrainSow() { | |||
| }; | |||
| } | |||
| function logScroll(version_name) { | |||
| function logScroll(version_name, repoPath, ID) { | |||
| let container = document.querySelector(`#log${version_name}`); | |||
| let scrollTop = container.scrollTop; | |||
| let scrollHeight = container.scrollHeight; | |||
| @@ -28,7 +28,7 @@ export default async function initCloudrainSow() { | |||
| ) { | |||
| let end_line = $(`#log${version_name} input[name=end_line]`).val(); | |||
| $.get( | |||
| `/api/v1/repos/${userName}/${repoPath}/modelarts/inference-job/${jobID}/log?version_name=${version_name}&base_line=${end_line}&lines=50&order=desc`, | |||
| `/api/v1/repos/${repoPath}/${ID}/log?version_name=${version_name}&base_line=${end_line}&lines=50&order=desc`, | |||
| (data) => { | |||
| if (data.Lines == 0) { | |||
| $(`.message${version_name} #header`).text("您已翻阅至日志底部"); | |||
| @@ -52,7 +52,7 @@ export default async function initCloudrainSow() { | |||
| if (scrollTop == 0 && scrollLeft == 0) { | |||
| let start_line = $(`#log${version_name} input[name=start_line]`).val(); | |||
| $.get( | |||
| `/api/v1/repos/${userName}/${repoPath}/modelarts/inference-job/${jobID}/log?version_name=${version_name}&base_line=${start_line}&lines=50&order=asc`, | |||
| `/api/v1/repos/${repoPath}/${ID}/log?version_name=${version_name}&base_line=${start_line}&lines=50&order=asc`, | |||
| (data) => { | |||
| if (data.Lines == 0) { | |||
| $(`.message${version_name} #header`).text("您已翻阅至日志顶部"); | |||
| @@ -73,7 +73,9 @@ export default async function initCloudrainSow() { | |||
| const fn = debounce(logScroll, 500); | |||
| $(".log-scroll").scroll(function () { | |||
| let version_name = $(this).data("version"); | |||
| fn(version_name); | |||
| let ID = $(`#accordion${version_name}`).data("jobid"); | |||
| let repoPath = $(`#accordion${version_name}`).data("repopath"); | |||
| fn(version_name, repoPath, ID); | |||
| }); | |||
| function scrollAnimation(dom, currentY, targetY, currentX) { | |||
| let needScrollTop = targetY - currentY; | |||
| @@ -101,11 +103,14 @@ export default async function initCloudrainSow() { | |||
| // let version_name = $('.log_top').data('version') | |||
| let version_name = $(this).data("version"); | |||
| let logContentDom = document.querySelector(`#log${version_name}`); | |||
| let ID = $(`#accordion${version_name}`).data("jobid"); | |||
| let repoPath = $(`#accordion${version_name}`).data("repopath"); | |||
| $(`#log_file${version_name}`).siblings("pre").remove(); | |||
| $(".ui.inverted.active.dimmer").css("display", "block"); | |||
| $.get( | |||
| `/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&base_line=&lines=50&order=asc`, | |||
| `/api/v1/repos/${repoPath}/${ID}/log?version_name=${version_name}&base_line=&lines=50&order=asc`, | |||
| (data) => { | |||
| $(".ui.inverted.active.dimmer").css("display", "none"); | |||
| $(`#log${version_name} input[name=end_line]`).val(data.EndLine); //如果变动就改变所对应的值 | |||
| $(`#log${version_name} input[name=start_line]`).val(data.StartLine); | |||
| $(`#log${version_name}`).prepend("<pre>" + data.Content); | |||
| @@ -121,10 +126,15 @@ export default async function initCloudrainSow() { | |||
| $(".log_bottom").click(function (e) { | |||
| let version_name = $(this).data("version"); | |||
| let logContentDom = document.querySelector(`#log${version_name}`); | |||
| let ID = $(`#accordion${version_name}`).data("jobid"); | |||
| let repoPath = $(`#accordion${version_name}`).data("repopath"); | |||
| $(`#log_file${version_name}`).siblings("pre").remove(); | |||
| let end_line = $(`#log${version_name} input[name=end_line]`).val(); | |||
| $(".ui.inverted.active.dimmer").css("display", "block"); | |||
| $.get( | |||
| `/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&base_line=&lines=50&order=desc`, | |||
| `/api/v1/repos/${repoPath}/${ID}/log?version_name=${version_name}&base_line=&lines=50&order=desc`, | |||
| (data) => { | |||
| $(".ui.inverted.active.dimmer").css("display", "none"); | |||
| if (!data.CanLogDownload) { | |||
| $(`#${version_name}-log-down`) | |||
| .removeClass("ti-download-file") | |||
| @@ -134,8 +144,9 @@ export default async function initCloudrainSow() { | |||
| $(`#log${version_name} input[name=start_line]`).val(data.StartLine); | |||
| $(`#log${version_name}`).append("<pre>" + data.Content); | |||
| $.get( | |||
| `/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&base_line=${data.EndLine}&lines=50&order=desc`, | |||
| `/api/v1/repos/${repoPath}/${ID}/log?version_name=${version_name}&base_line=${data.EndLine}&lines=50&order=desc`, | |||
| (data) => { | |||
| $(".ui.inverted.active.dimmer").css("display", "none"); | |||
| if (data.Lines == 0) { | |||
| $(`.message${version_name} #header`).text("您已翻阅至日志底部"); | |||
| $(`.message${version_name}`).css("display", "block"); | |||
| @@ -143,7 +154,7 @@ export default async function initCloudrainSow() { | |||
| $(`.message${version_name}`).css("display", "none"); | |||
| }, 1000); | |||
| } else { | |||
| if (end_line === data.EndLine) { | |||
| if (end_line === data.EndLine || end_line === "") { | |||
| return; | |||
| } else { | |||
| $(`#log${version_name} input[name=end_line]`).val(data.EndLine); | |||
| @@ -163,6 +174,49 @@ export default async function initCloudrainSow() { | |||
| ); | |||
| }); | |||
| function loadLog(version_name) { | |||
| document.getElementById("mask").style.display = "block"; | |||
| $.get( | |||
| `/api/v1/repos/${userName}/${repoPath}/grampus/train-job/${jobID}/log?version_name=${version_name}&lines=50&order=asc`, | |||
| (data) => { | |||
| $("input[name=end_line]").val(data.EndLine); | |||
| $("input[name=start_line]").val(data.StartLine); | |||
| $(`#log_file${version_name}`).text(data.Content); | |||
| document.getElementById("mask").style.display = "none"; | |||
| } | |||
| ).fail(function (err) { | |||
| document.getElementById("mask").style.display = "none"; | |||
| console.log(err); | |||
| }); | |||
| } | |||
| $("#refresh-status").click(function (e) { | |||
| let version_name = $(this).data("version"); | |||
| let ID = $(`#accordion${version_name}`).data("jobid"); | |||
| let repoPath = $(`#accordion${version_name}`).data("repopath"); | |||
| refreshStatusShow(version_name, ID, repoPath); | |||
| $(".log-info .log_bottom").trigger("click"); | |||
| e.stopPropagation(); | |||
| }); | |||
| function refreshStatusShow(version_name, ID, repoPath) { | |||
| $.get( | |||
| `/api/v1/repos/${repoPath}/${ID}?version_name=${version_name}`, | |||
| (data) => { | |||
| //accroding下的状态 | |||
| $(`#${version_name}-status-span span`).text(data.JobStatus); | |||
| //accroding下的状态图标 | |||
| $(`#${version_name}-status-span i`).attr("class", data.JobStatus); | |||
| //accroding下的运行时长 | |||
| $(`#${version_name}-duration-span`).text(data.JobDuration); | |||
| //配置信息详情页的状态 | |||
| $(`#${version_name}-status`).text(data.JobStatus); | |||
| //配置信息详情页的状态 | |||
| $(`#${version_name}-duration`).text(data.JobDuration); | |||
| } | |||
| ).fail(function (err) { | |||
| console.log(err); | |||
| }); | |||
| } | |||
| // | |||
| $(".content-pad").on("click", ".load-model-file", function () { | |||
| let downloadFlag = $(this).data("download-flag") || ""; | |||
| @@ -175,8 +229,8 @@ export default async function initCloudrainSow() { | |||
| let url = `/api/v1/repos${path}?version_name=${version_name}&parentDir=${parents}`; | |||
| $.get(url, (data) => { | |||
| $(`#dir_list${version_name}`).empty(); | |||
| if(data.Dirs){ | |||
| renderDir(path, data, version_name, downloadFlag, gpuFlag); | |||
| if (data.Dirs) { | |||
| renderDir(path, data, version_name, downloadFlag, gpuFlag); | |||
| } | |||
| if (init === "init") { | |||
| $(`input[name=model${version_name}]`).val(""); | |||
| @@ -191,7 +245,15 @@ export default async function initCloudrainSow() { | |||
| htmlBread += "<div class='divider'> / </div>"; | |||
| $(`#file_breadcrumb${version_name}`).append(htmlBread); | |||
| } else { | |||
| renderBrend(path, version_name, parents, filename, init, downloadFlag,gpuFlag); | |||
| renderBrend( | |||
| path, | |||
| version_name, | |||
| parents, | |||
| filename, | |||
| init, | |||
| downloadFlag, | |||
| gpuFlag | |||
| ); | |||
| } | |||
| }).fail(function (err) { | |||
| console.log(err, version_name); | |||
| @@ -253,15 +315,15 @@ export default async function initCloudrainSow() { | |||
| } else { | |||
| $(`input[name=model${version_name}]`).val(parents); | |||
| $(`input[name=modelback${version_name}]`).val(filename); | |||
| $(`#file_breadcrumb${version_name} a.section:contains(${filename})`) | |||
| .nextAll() | |||
| .remove(); | |||
| $( | |||
| `#file_breadcrumb${version_name} a.section:contains(${filename})` | |||
| ).replaceWith(`<div class='active section'>${filename}</div>`); | |||
| $( | |||
| `#file_breadcrumb${version_name} div.section:contains(${filename})` | |||
| ).append("<div class='divider'> / </div>"); | |||
| let selectEle = $(`#file_breadcrumb${version_name} a.section`).filter( | |||
| (index, item) => { | |||
| return item.text == filename; | |||
| } | |||
| ); | |||
| selectEle.nextAll().remove(); | |||
| selectEle.after("<div class='divider'> / </div>"); | |||
| selectEle.replaceWith(`<div class='active section'>${filename}</div>`); | |||
| } | |||
| } | |||
| @@ -347,33 +347,6 @@ export default async function initCloudrain() { | |||
| e.stopPropagation(); | |||
| }); | |||
| $("#refresh-status").click(function (e) { | |||
| let version_name = $(this).data("version"); | |||
| let ID = $(`#accordion${version_name}`).data("jobid"); | |||
| let repoPath = $(`#accordion${version_name}`).data("repopath"); | |||
| refreshStatusShow(version_name, ID, repoPath); | |||
| e.stopPropagation(); | |||
| }); | |||
| function refreshStatusShow(version_name, ID, repoPath) { | |||
| $.get( | |||
| `/api/v1/repos/${repoPath}/${ID}?version_name=${version_name}`, | |||
| (data) => { | |||
| //accroding下的状态 | |||
| $(`#${version_name}-status-span span`).text(data.JobStatus); | |||
| //accroding下的状态图标 | |||
| $(`#${version_name}-status-span i`).attr("class", data.JobStatus); | |||
| //accroding下的运行时长 | |||
| $(`#${version_name}-duration-span`).text(data.JobDuration); | |||
| //配置信息详情页的状态 | |||
| $(`#${version_name}-status`).text(data.JobStatus); | |||
| //配置信息详情页的状态 | |||
| $(`#${version_name}-duration`).text(data.JobDuration); | |||
| } | |||
| ).fail(function (err) { | |||
| console.log(err); | |||
| }); | |||
| } | |||
| function refreshStatus(version_name, ID, repoPath) { | |||
| const url = `/api/v1/repos/${repoPath}/${ID}/?version_name${version_name}`; | |||
| $.get(url, (data) => { | |||
| @@ -522,6 +522,60 @@ i.SUCCEEDED { | |||
| // } | |||
| /* 弹窗 */ | |||
| // #mask { | |||
| // position: fixed; | |||
| // top: 0px; | |||
| // left: 0px; | |||
| // right: 0px; | |||
| // bottom: 0px; | |||
| // filter: alpha(opacity=60); | |||
| // background-color: #777; | |||
| // z-index: 1000; | |||
| // display: none; | |||
| // opacity: 0.8; | |||
| // -moz-opacity: 0.5; | |||
| // padding-top: 100px; | |||
| // color: #000000; | |||
| // } | |||
| #loadingPage { | |||
| margin: 300px auto; | |||
| width: 50px; | |||
| height: 40px; | |||
| text-align: center; | |||
| font-size: 10px; | |||
| display: block; | |||
| } | |||
| #loadingPage > div { | |||
| background-color: green; | |||
| height: 100%; | |||
| width: 6px; | |||
| display: inline-block; | |||
| -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; | |||
| animation: sk-stretchdelay 1.2s infinite ease-in-out; | |||
| } | |||
| #loadingPage .rect2 { | |||
| -webkit-animation-delay: -1.1s; | |||
| animation-delay: -1.1s; | |||
| } | |||
| #loadingPage .rect3 { | |||
| -webkit-animation-delay: -1s; | |||
| animation-delay: -1s; | |||
| } | |||
| #loadingPage .rect4 { | |||
| -webkit-animation-delay: -0.9s; | |||
| animation-delay: -0.9s; | |||
| } | |||
| #loadingPage .rect5 { | |||
| -webkit-animation-delay: -0.8s; | |||
| animation-delay: -0.8s; | |||
| } | |||
| #mask { | |||
| position: fixed; | |||
| top: 0px; | |||
| @@ -529,17 +583,29 @@ i.SUCCEEDED { | |||
| right: 0px; | |||
| bottom: 0px; | |||
| filter: alpha(opacity=60); | |||
| background-color: #777; | |||
| background-color: rgba(119, 119, 119, 0.8); | |||
| z-index: 1000; | |||
| display: none; | |||
| opacity: 0.8; | |||
| -moz-opacity: 0.5; | |||
| padding-top: 100px; | |||
| color: #000000; | |||
| } | |||
| #loadingPage { | |||
| margin: 200px auto; | |||
| .loadingWrap { | |||
| width: 20%; | |||
| height: 25%; | |||
| border: 1px solid #bbb; | |||
| background-color: #fff; | |||
| margin: auto; | |||
| position: absolute; | |||
| left: 0; | |||
| right: 0; | |||
| top: 0; | |||
| bottom: 0; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| flex-direction: column; | |||
| border-radius: 20px; | |||
| } | |||
| #loading-page { | |||
| width: 50px; | |||
| height: 40px; | |||
| text-align: center; | |||
| @@ -547,7 +613,7 @@ i.SUCCEEDED { | |||
| display: block; | |||
| } | |||
| #loadingPage > div { | |||
| #loading-page > div { | |||
| background-color: green; | |||
| height: 100%; | |||
| width: 6px; | |||
| @@ -556,26 +622,25 @@ i.SUCCEEDED { | |||
| animation: sk-stretchdelay 1.2s infinite ease-in-out; | |||
| } | |||
| #loadingPage .rect2 { | |||
| #loading-page .rect2 { | |||
| -webkit-animation-delay: -1.1s; | |||
| animation-delay: -1.1s; | |||
| } | |||
| #loadingPage .rect3 { | |||
| #loadin-page .rect3 { | |||
| -webkit-animation-delay: -1s; | |||
| animation-delay: -1s; | |||
| } | |||
| #loadingPage .rect4 { | |||
| #loading-page .rect4 { | |||
| -webkit-animation-delay: -0.9s; | |||
| animation-delay: -0.9s; | |||
| } | |||
| #loadingPage .rect5 { | |||
| #loading-page .rect5 { | |||
| -webkit-animation-delay: -0.8s; | |||
| animation-delay: -0.8s; | |||
| } | |||
| @-webkit-keyframes sk-stretchdelay { | |||
| 0%, | |||
| 40%, | |||