@@ -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%, | |||