zhoupzh
3 years ago
7 changed files with 389 additions and 1050 deletions
Split View
Diff Options
-
+2 -117templates/repo/cloudbrain/inference/show.tmpl
-
+1 -118templates/repo/cloudbrain/trainjob/show.tmpl
-
+1 -253templates/repo/grampus/trainjob/show.tmpl
-
+2 -239templates/repo/modelarts/inferencejob/show.tmpl
-
+3 -254templates/repo/modelarts/trainjob/show.tmpl
-
+309 -0web_src/js/features/cloudbrainShow.js
-
+71 -69web_src/js/index.js
+ 2
- 117
templates/repo/cloudbrain/inference/show.tmpl
View File
| @@ -234,8 +234,8 @@ | |||
| <a class="item" data-tab="second" | |||
| onclick="javascript:parseInfo()">{{$.i18n.Tr "repo.cloudbrain.runinfo"}}</a> | |||
| <a class="item" data-tab="four" | |||
| onclick="loadModelFile({{.VersionName}},'','','init')">{{$.i18n.Tr "repo.model_download"}}</a> | |||
| <a class="item load-model-file" data-tab="four" | |||
| data-path="{{$.RepoLink}}/cloudbrain/inference-job/{{.JobID}}/result_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"> | |||
| <div style="padding-top: 10px;"> | |||
| @@ -562,122 +562,7 @@ | |||
| e.cancelBubble = true; //ie兼容 | |||
| } | |||
| } | |||
| function loadModelFile(version_name, parents, filename, init) { | |||
| parents = parents || '' | |||
| filename = filename || '' | |||
| init = init || '' | |||
| console.log("start") | |||
| $.get(`/api/v1/repos/${userName}/${repoPath}/cloudbrain/inference-job/${jobID}/result_list?version_name=${version_name}&parentDir=${parents}`, (data) => { | |||
| $(`#dir_list${version_name}`).empty() | |||
| renderDir(data, version_name) | |||
| if (init === "init") { | |||
| $(`input[name=model${version_name}]`).val("") | |||
| $(`input[name=modelback${version_name}]`).val(version_name) | |||
| $(`#file_breadcrumb${version_name}`).empty() | |||
| let htmlBread = "" | |||
| htmlBread += `<div class='active section'>${version_name}</div>` | |||
| htmlBread += "<div class='divider'> / </div>" | |||
| $(`#file_breadcrumb${version_name}`).append(htmlBread) | |||
| } else { | |||
| renderBrend(version_name, parents, filename, init) | |||
| } | |||
| }).fail(function (err) { | |||
| console.log(err, version_name); | |||
| }); | |||
| } | |||
| function renderBrend(version_name, parents, filename, init) { | |||
| if (init == "folder") { | |||
| let htmlBrend = "" | |||
| let sectionName = $(`#file_breadcrumb${version_name} .active.section`).text() | |||
| let parents1 = $(`input[name=model${version_name}]`).val() | |||
| let filename1 = $(`input[name=modelback${version_name}]`).val() | |||
| if (parents1 === "") { | |||
| $(`#file_breadcrumb${version_name} .active.section`).replaceWith(`<a class='section' onclick="loadModelFile('${version_name}','${parents1}','','init')">${sectionName}</a>`) | |||
| } else { | |||
| $(`#file_breadcrumb${version_name} .active.section`).replaceWith(`<a class='section' onclick="loadModelFile('${version_name}','${parents1}','${filename1}')">${sectionName}</a>`) | |||
| } | |||
| htmlBrend += `<div class='active section'>${filename}</div>` | |||
| htmlBrend += "<div class='divider'> / </div>" | |||
| $(`#file_breadcrumb${version_name}`).append(htmlBrend) | |||
| $(`input[name=model${version_name}]`).val(parents) | |||
| $(`input[name=modelback${version_name}]`).val(filename) | |||
| } 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>") | |||
| } | |||
| } | |||
| function renderDir(data, version_name) { | |||
| let html = "" | |||
| html += "<div class='ui grid' style='margin:0;'>" | |||
| html += "<div class='row' style='padding: 0;'>" | |||
| html += "<div class='ui sixteen wide column' style='padding:1rem;'>" | |||
| html += "<div class='dir list'>" | |||
| html += "<table id='repo-files-table' class='ui single line table pad20'>" | |||
| html += '<tbody>' | |||
| // html += "</tbody>" | |||
| for (let i = 0; i < data.Dirs.length; i++) { | |||
| let dirs_size = renderSize(data.Dirs[i].Size) | |||
| html += "<tr>" | |||
| html += "<td class='name six wid'>" | |||
| html += "<span class='truncate'>" | |||
| html += "<span class='octicon octicon-file-directory'>" | |||
| html += "</span>" | |||
| if (data.Dirs[i].IsDir) { | |||
| html += `<a onclick="loadModelFile('${version_name}','${data.Dirs[i].ParenDir}','${data.Dirs[i].FileName}','folder')">` | |||
| html += "<span class='fitted'><i class='folder icon' width='16' height='16' aria-hidden='true'></i>" + data.Dirs[i].FileName + "</span>" | |||
| } else { | |||
| if (downlaodFlag) { | |||
| html += `<a href="${location.href}/result_download?version_name=${version_name}&fileName=${data.Dirs[i].FileName}&parentDir=${data.Dirs[i].ParenDir}&jobName=${realJobName}">` | |||
| } | |||
| else { | |||
| html += `<a class="disabled">` | |||
| } | |||
| html += "<span class='fitted'><i class='file icon' width='16' height='16' aria-hidden='true'></i>" + data.Dirs[i].FileName + "</span>" | |||
| } | |||
| html += '</a>' | |||
| html += "</span>" | |||
| html += "</td>" | |||
| html += "<td class='message seven wide'>" | |||
| if (data.Dirs[i].IsDir) { | |||
| html += "<span class='truncate has-emoji'></span>" | |||
| } else { | |||
| html += "<span class='truncate has-emoji'>" + `${dirs_size}` + "</span>" | |||
| } | |||
| html += "</td>" | |||
| html += "<td class='text right age three wide'>" | |||
| html += "<span class='truncate has-emoji'>" + data.Dirs[i].ModTime + "</span>" | |||
| html += "</td>" | |||
| html += "</tr>" | |||
| } | |||
| html += "</tbody>" | |||
| html += "</table>" | |||
| html += "</div>" | |||
| html += "</div>" | |||
| html += "</div>" | |||
| html += "</div>" | |||
| $(`#dir_list${version_name}`).append(html) | |||
| } | |||
| function renderSize(value) { | |||
| if (null == value || value == '') { | |||
| return "0 Bytes"; | |||
| } | |||
| var unitArr = new Array("Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"); | |||
| var index = 0; | |||
| var srcsize = parseFloat(value); | |||
| index = Math.floor(Math.log(srcsize) / Math.log(1024)); | |||
| var size = srcsize / Math.pow(1024, index); | |||
| size = size.toFixed(0);//保留的小数位数 | |||
| return size + unitArr[index]; | |||
| } | |||
| function refreshStatus(version_name) { | |||
| $.get(`/api/v1/repos/${userName}/${repoPath}/cloudbrain/${taskID}?version_name=${versionname}`, (data) => { | |||
+ 1
- 118
templates/repo/cloudbrain/trainjob/show.tmpl
View File
| @@ -264,8 +264,7 @@ | |||
| onclick="javascript:parseInfo()">{{$.i18n.Tr "repo.cloudbrain.runinfo"}}</a> | |||
| <a class="item" data-tab="third{{$k}}" | |||
| onclick="loadLog({{.VersionName}})">{{$.i18n.Tr "repo.modelarts.log"}}</a> | |||
| <a class="item" data-tab="four{{$k}}" | |||
| onclick="loadModelFile({{.VersionName}},'','','init')">{{$.i18n.Tr "repo.model_download"}}</a> | |||
| <a class="item load-model-file" data-tab="four{{$k}}" data-path="{{$.RepoLink}}/cloudbrain/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}}"> | |||
| <div style="padding-top: 10px;"> | |||
| @@ -554,122 +553,6 @@ | |||
| document.getElementById("mask").style.display = "none" | |||
| }); | |||
| } | |||
| function loadModelFile(version_name, parents, filename, init) { | |||
| parents = parents || '' | |||
| filename = filename || '' | |||
| init = init || '' | |||
| console.log("start") | |||
| $.get(`/api/v1/repos/${userName}/${repoPath}/cloudbrain/train-job/${jobID}/model_list?version_name=${version_name}&parentDir=${parents}`, (data) => { | |||
| $(`#dir_list${version_name}`).empty() | |||
| renderDir(data, version_name) | |||
| if (init === "init") { | |||
| $(`input[name=model${version_name}]`).val("") | |||
| $(`input[name=modelback${version_name}]`).val(version_name) | |||
| $(`#file_breadcrumb${version_name}`).empty() | |||
| let htmlBread = "" | |||
| htmlBread += `<div class='active section'>${version_name}</div>` | |||
| htmlBread += "<div class='divider'> / </div>" | |||
| $(`#file_breadcrumb${version_name}`).append(htmlBread) | |||
| } else { | |||
| renderBrend(version_name, parents, filename, init) | |||
| } | |||
| }).fail(function (err) { | |||
| console.log(err, version_name); | |||
| }); | |||
| } | |||
| function renderBrend(version_name, parents, filename, init) { | |||
| if (init == "folder") { | |||
| let htmlBrend = "" | |||
| let sectionName = $(`#file_breadcrumb${version_name} .active.section`).text() | |||
| let parents1 = $(`input[name=model${version_name}]`).val() | |||
| let filename1 = $(`input[name=modelback${version_name}]`).val() | |||
| if (parents1 === "") { | |||
| $(`#file_breadcrumb${version_name} .active.section`).replaceWith(`<a class='section' onclick="loadModelFile('${version_name}','${parents1}','','init')">${sectionName}</a>`) | |||
| } else { | |||
| $(`#file_breadcrumb${version_name} .active.section`).replaceWith(`<a class='section' onclick="loadModelFile('${version_name}','${parents1}','${filename1}')">${sectionName}</a>`) | |||
| } | |||
| htmlBrend += `<div class='active section'>${filename}</div>` | |||
| htmlBrend += "<div class='divider'> / </div>" | |||
| $(`#file_breadcrumb${version_name}`).append(htmlBrend) | |||
| $(`input[name=model${version_name}]`).val(parents) | |||
| $(`input[name=modelback${version_name}]`).val(filename) | |||
| } 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>") | |||
| } | |||
| } | |||
| function renderDir(data, version_name) { | |||
| let html = "" | |||
| html += "<div class='ui grid' style='margin:0;'>" | |||
| html += "<div class='row' style='padding: 0;'>" | |||
| html += "<div class='ui sixteen wide column' style='padding:1rem;'>" | |||
| html += "<div class='dir list'>" | |||
| html += "<table id='repo-files-table' class='ui single line table pad20'>" | |||
| html += '<tbody>' | |||
| // html += "</tbody>" | |||
| for (let i = 0; i < data.Dirs.length; i++) { | |||
| let dirs_size = renderSize(data.Dirs[i].Size) | |||
| html += "<tr>" | |||
| html += "<td class='name six wid'>" | |||
| html += "<span class='truncate'>" | |||
| html += "<span class='octicon octicon-file-directory'>" | |||
| html += "</span>" | |||
| if (data.Dirs[i].IsDir) { | |||
| html += `<a onclick="loadModelFile('${version_name}','${data.Dirs[i].ParenDir}','${data.Dirs[i].FileName}','folder')">` | |||
| html += "<span class='fitted'><i class='folder icon' width='16' height='16' aria-hidden='true'></i>" + data.Dirs[i].FileName + "</span>" | |||
| } else { | |||
| if (downlaodFlag) { | |||
| html += `<a href="${location.href}/download_model?version_name=${version_name}&fileName=${data.Dirs[i].FileName}&parentDir=${data.Dirs[i].ParenDir}&jobName=${realJobName}">` | |||
| } | |||
| else { | |||
| html += `<a class="disabled">` | |||
| } | |||
| html += "<span class='fitted'><i class='file icon' width='16' height='16' aria-hidden='true'></i>" + data.Dirs[i].FileName + "</span>" | |||
| } | |||
| html += '</a>' | |||
| html += "</span>" | |||
| html += "</td>" | |||
| html += "<td class='message seven wide'>" | |||
| if (data.Dirs[i].IsDir) { | |||
| html += "<span class='truncate has-emoji'></span>" | |||
| } else { | |||
| html += "<span class='truncate has-emoji'>" + `${dirs_size}` + "</span>" | |||
| } | |||
| html += "</td>" | |||
| html += "<td class='text right age three wide'>" | |||
| html += "<span class='truncate has-emoji'>" + data.Dirs[i].ModTime + "</span>" | |||
| html += "</td>" | |||
| html += "</tr>" | |||
| } | |||
| html += "</tbody>" | |||
| html += "</table>" | |||
| html += "</div>" | |||
| html += "</div>" | |||
| html += "</div>" | |||
| html += "</div>" | |||
| $(`#dir_list${version_name}`).append(html) | |||
| } | |||
| function renderSize(value) { | |||
| if (null == value || value == '') { | |||
| return "0 Bytes"; | |||
| } | |||
| var unitArr = new Array("Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"); | |||
| var index = 0; | |||
| var srcsize = parseFloat(value); | |||
| index = Math.floor(Math.log(srcsize) / Math.log(1024)); | |||
| var size = srcsize / Math.pow(1024, index); | |||
| size = size.toFixed(0);//保留的小数位数 | |||
| return size + unitArr[index]; | |||
| } | |||
| function refreshStatus(version_name) { | |||
| $.get(`/api/v1/repos/${userName}/${repoPath}/cloudbrain/${taskID}?version_name=${versionname}`, (data) => { | |||
+ 1
- 253
templates/repo/grampus/trainjob/show.tmpl
View File
| @@ -273,8 +273,7 @@ | |||
| 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="item" data-tab="third{{$k}}" | |||
| onclick="loadModelFile({{.VersionName}},'','','init')">{{$.i18n.Tr "repo.model_download"}}</a> | |||
| <a class="item load-model-file" data-tab="third{{$k}}" 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}}"> | |||
| <div style="padding-top: 10px;"> | |||
| @@ -658,18 +657,6 @@ | |||
| $('#name').val(modelName) | |||
| $('#version').val("0.0.1") | |||
| } | |||
| function renderSize(value) { | |||
| if (null == value || value == '') { | |||
| return "0 Bytes"; | |||
| } | |||
| var unitArr = new Array("Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"); | |||
| var index = 0; | |||
| var srcsize = parseFloat(value); | |||
| index = Math.floor(Math.log(srcsize) / Math.log(1024)); | |||
| var size = srcsize / Math.pow(1024, index); | |||
| size = size.toFixed(0);//保留的小数位数 | |||
| return size + unitArr[index]; | |||
| } | |||
| function refreshStatus(version_name) { | |||
| $.get(`/api/v1/repos/${userName}/${repoPath}/grampus/train-job/${jobID}?version_name=${version_name}`, (data) => { | |||
| // header status and duration | |||
| @@ -740,243 +727,4 @@ | |||
| console.log(err); | |||
| }); | |||
| } | |||
| function loadModelFile(version_name, parents, filename, init) { | |||
| parents = parents || '' | |||
| filename = filename || '' | |||
| init = init || '' | |||
| $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/model_list?version_name=${version_name}&parentDir=${parents}`, (data) => { | |||
| $(`#dir_list${version_name}`).empty() | |||
| renderDir(data, version_name) | |||
| if (init === "init") { | |||
| $(`input[name=model${version_name}]`).val("") | |||
| $(`input[name=modelback${version_name}]`).val(version_name) | |||
| $(`#file_breadcrumb${version_name}`).empty() | |||
| let htmlBread = "" | |||
| htmlBread += `<div class='active section'>${version_name}</div>` | |||
| htmlBread += "<div class='divider'> / </div>" | |||
| $(`#file_breadcrumb${version_name}`).append(htmlBread) | |||
| } else { | |||
| renderBrend(version_name, parents, filename, init) | |||
| } | |||
| }).fail(function (err) { | |||
| console.log(err, version_name); | |||
| }); | |||
| } | |||
| function renderBrend(version_name, parents, filename, init) { | |||
| if (init == "folder") { | |||
| let htmlBrend = "" | |||
| let sectionName = $(`#file_breadcrumb${version_name} .active.section`).text() | |||
| let parents1 = $(`input[name=model${version_name}]`).val() | |||
| let filename1 = $(`input[name=modelback${version_name}]`).val() | |||
| if (parents1 === "") { | |||
| $(`#file_breadcrumb${version_name} .active.section`).replaceWith(`<a class='section' onclick="loadModelFile('${version_name}','${parents1}','','init')">${sectionName}</a>`) | |||
| } else { | |||
| $(`#file_breadcrumb${version_name} .active.section`).replaceWith(`<a class='section' onclick="loadModelFile('${version_name}','${parents1}','${filename1}')">${sectionName}</a>`) | |||
| } | |||
| htmlBrend += `<div class='active section'>${filename}</div>` | |||
| htmlBrend += "<div class='divider'> / </div>" | |||
| $(`#file_breadcrumb${version_name}`).append(htmlBrend) | |||
| $(`input[name=model${version_name}]`).val(parents) | |||
| $(`input[name=modelback${version_name}]`).val(filename) | |||
| } 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>") | |||
| } | |||
| } | |||
| function renderDir(data, version_name) { | |||
| let html = "" | |||
| html += "<div class='ui grid' style='margin:0;'>" | |||
| html += "<div class='row' style='padding: 0;'>" | |||
| html += "<div class='ui sixteen wide column' style='padding:1rem;'>" | |||
| html += "<div class='dir list'>" | |||
| html += "<table id='repo-files-table' class='ui single line table pad20'>" | |||
| html += '<tbody>' | |||
| // html += "</tbody>" | |||
| for (let i = 0; i < data.Dirs.length; i++) { | |||
| let dirs_size = renderSize(data.Dirs[i].Size) | |||
| html += "<tr>" | |||
| html += "<td class='name six wid'>" | |||
| html += "<span class='truncate'>" | |||
| html += "<span class='octicon octicon-file-directory'>" | |||
| html += "</span>" | |||
| if (data.Dirs[i].IsDir) { | |||
| html += `<a onclick="loadModelFile('${version_name}','${data.Dirs[i].ParenDir}','${data.Dirs[i].FileName}','folder')">` | |||
| html += "<span class='fitted'><i class='folder icon' width='16' height='16' aria-hidden='true'></i>" + data.Dirs[i].FileName + "</span>" | |||
| } else { | |||
| if (downlaodFlag) { | |||
| html += `<a href="${location.href}/model_download?version_name=${version_name}&file_name=${data.Dirs[i].FileName}&parent_dir=${data.Dirs[i].ParenDir}">` | |||
| } | |||
| else { | |||
| html += `<a class="disabled">` | |||
| } | |||
| html += "<span class='fitted'><i class='file icon' width='16' height='16' aria-hidden='true'></i>" + data.Dirs[i].FileName + "</span>" | |||
| } | |||
| html += '</a>' | |||
| html += "</span>" | |||
| html += "</td>" | |||
| html += "<td class='message seven wide'>" | |||
| if (data.Dirs[i].IsDir) { | |||
| html += "<span class='truncate has-emoji'></span>" | |||
| } else { | |||
| html += "<span class='truncate has-emoji'>" + `${dirs_size}` + "</span>" | |||
| } | |||
| html += "</td>" | |||
| html += "<td class='text right age three wide'>" | |||
| html += "<span class='truncate has-emoji'>" + data.Dirs[i].ModTime + "</span>" | |||
| html += "</td>" | |||
| html += "</tr>" | |||
| } | |||
| html += "</tbody>" | |||
| html += "</table>" | |||
| html += "</div>" | |||
| html += "</div>" | |||
| html += "</div>" | |||
| html += "</div>" | |||
| $(`#dir_list${version_name}`).append(html) | |||
| } | |||
| 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}/grampus/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}/grampus/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}/grampus/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); | |||
| }) | |||
| }) | |||
| </script> | |||
+ 2
- 239
templates/repo/modelarts/inferencejob/show.tmpl
View File
| @@ -183,7 +183,7 @@ td, th { | |||
| <a class="active item" data-tab="first">{{$.i18n.Tr "repo.modelarts.train_job.config"}}</a> | |||
| <a class="item" data-tab="second" onclick="loadLog({{.VersionName}})">{{$.i18n.Tr "repo.modelarts.log"}}</a> | |||
| <a class="item" data-tab="third" onclick="loadModelFile({{.VersionName}},'','','init')">{{$.i18n.Tr "repo.model_download"}}</a> | |||
| <a class="item load-model-file" data-tab="third" data-path="{{$.RepoLink}}/modelarts/inference-job/{{.JobID}}/result_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"> | |||
| @@ -440,7 +440,7 @@ td, th { | |||
| <div class="ui message message{{.VersionName}}" style="display: none;"> | |||
| <div id="header"></div> | |||
| </div> | |||
| <div class="ui attached log" onscroll="logScroll({{.VersionName}})" id="log{{.VersionName}}" style="height: 300px !important; overflow: auto;"> | |||
| <div class="ui attached log log-scroll" data-version="{{.VersionName}}" id="log{{.VersionName}}" style="height: 300px !important; overflow: auto;"> | |||
| <input type="hidden" name="end_line" value> | |||
| <input type="hidden" name="start_line" value> | |||
| <pre id="log_file{{.VersionName}}"></pre> | |||
| @@ -516,241 +516,4 @@ function loadLog(version_name){ | |||
| console.log(err); | |||
| }); | |||
| } | |||
| 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) && (scrollLeft===0)){ | |||
| 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`, (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(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`, (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 renderSize(value){ | |||
| if(null==value||value==''){ | |||
| return "0 Bytes"; | |||
| } | |||
| var unitArr = new Array("Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"); | |||
| var index=0; | |||
| var srcsize = parseFloat(value); | |||
| index=Math.floor(Math.log(srcsize)/Math.log(1024)); | |||
| var size =srcsize/Math.pow(1024,index); | |||
| size=size.toFixed(0);//保留的小数位数 | |||
| return size+unitArr[index]; | |||
| } | |||
| function loadModelFile(version_name,parents,filename,init){ | |||
| parents = parents || '' | |||
| filename = filename || '' | |||
| init = init || '' | |||
| $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/inference-job/${jobID}/result_list?version_name=${version_name}&parentDir=${parents}`, (data) => { | |||
| $(`#dir_list${version_name}`).empty() | |||
| renderDir(data,version_name) | |||
| if(init==="init"){ | |||
| $(`input[name=model${version_name}]`).val("") | |||
| $(`input[name=modelback${version_name}]`).val(version_name) | |||
| $(`#file_breadcrumb${version_name}`).empty() | |||
| let htmlBread = "" | |||
| htmlBread += `<div class='active section'>result</div>` | |||
| htmlBread += "<div class='divider'> / </div>" | |||
| $(`#file_breadcrumb${version_name}`).append(htmlBread) | |||
| }else{ | |||
| renderBrend(version_name,parents,filename,init) | |||
| } | |||
| }).fail(function(err) { | |||
| console.log(err,version_name); | |||
| }); | |||
| } | |||
| function renderBrend(version_name,parents,filename,init){ | |||
| if(init=="folder"){ | |||
| let htmlBrend = "" | |||
| let sectionName=$(`#file_breadcrumb${version_name} .active.section`).text() | |||
| let parents1 = $(`input[name=model${version_name}]`).val() | |||
| let filename1 = $(`input[name=modelback${version_name}]`).val() | |||
| if(parents1===""){ | |||
| $(`#file_breadcrumb${version_name} .active.section`).replaceWith(`<a class='section' onclick="loadModelFile('${version_name}','${parents1}','','init')">${sectionName}</a>`) | |||
| }else{ | |||
| $(`#file_breadcrumb${version_name} .active.section`).replaceWith(`<a class='section' onclick="loadModelFile('${version_name}','${parents1}','${filename1}')">${sectionName}</a>`) | |||
| } | |||
| htmlBrend += `<div class='active section'>${filename}</div>` | |||
| htmlBrend += "<div class='divider'> / </div>" | |||
| $(`#file_breadcrumb${version_name}`).append(htmlBrend) | |||
| $(`input[name=model${version_name}]`).val(parents) | |||
| $(`input[name=modelback${version_name}]`).val(filename) | |||
| }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>") | |||
| } | |||
| } | |||
| function renderDir(data,version_name){ | |||
| let html="" | |||
| html += "<div class='ui grid' style='margin:0;'>" | |||
| html += "<div class='row' style='padding: 0;'>" | |||
| html += "<div class='ui sixteen wide column' style='padding:1rem;'>" | |||
| html += "<div class='dir list'>" | |||
| html += "<table id='repo-files-table' class='ui single line table pad20'>" | |||
| html += '<tbody>' | |||
| // html += "</tbody>" | |||
| for(let i=0;i<data.Dirs.length;i++){ | |||
| let dirs_size = renderSize(data.Dirs[i].Size) | |||
| html += "<tr>" | |||
| html += "<td class='name six wid'>" | |||
| html += "<span class='truncate'>" | |||
| html += "<span class='octicon octicon-file-directory'>" | |||
| html += "</span>" | |||
| if(data.Dirs[i].IsDir){ | |||
| html += `<a onclick="loadModelFile('${version_name}','${data.Dirs[i].ParenDir}','${data.Dirs[i].FileName}','folder')">` | |||
| html += "<span class='fitted'><i class='folder icon' width='16' height='16' aria-hidden='true'></i>" + data.Dirs[i].FileName + "</span>" | |||
| }else{ | |||
| if(downlaodFlag){ | |||
| html += `<a href="${location.href}/result_download?version_name=${version_name}&file_name=${data.Dirs[i].FileName}&parent_dir=${data.Dirs[i].ParenDir}">` | |||
| } | |||
| else{ | |||
| html += `<a class="disabled">` | |||
| } | |||
| html += "<span class='fitted'><i class='file icon' width='16' height='16' aria-hidden='true'></i>" + data.Dirs[i].FileName + "</span>" | |||
| } | |||
| html += '</a>' | |||
| html += "</span>" | |||
| html += "</td>" | |||
| html += "<td class='message seven wide'>" | |||
| if(data.Dirs[i].IsDir){ | |||
| html += "<span class='truncate has-emoji'></span>" | |||
| }else{ | |||
| html += "<span class='truncate has-emoji'>"+ `${dirs_size}` + "</span>" | |||
| } | |||
| html += "</td>" | |||
| html += "<td class='text right age three wide'>" | |||
| html += "<span class='truncate has-emoji'>" + data.Dirs[i].ModTime + "</span>" | |||
| html += "</td>" | |||
| html += "</tr>" | |||
| } | |||
| html += "</tbody>" | |||
| html += "</table>" | |||
| html += "</div>" | |||
| html += "</div>" | |||
| html += "</div>" | |||
| html += "</div>" | |||
| $(`#dir_list${version_name}`).append(html) | |||
| } | |||
| 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); | |||
| }) | |||
| }) | |||
| </script> | |||
+ 3
- 254
templates/repo/modelarts/trainjob/show.tmpl
View File
| @@ -313,8 +313,7 @@ | |||
| <a class="item log_bottom" data-tab="second{{$k}}" | |||
| data-version="{{.VersionName}}">{{$.i18n.Tr "repo.modelarts.log"}}</a> | |||
| <a class="item metric_chart" data-tab="four{{$k}}" data-version="{{.VersionName}}">资源占用情况</a> | |||
| <a class="item" data-tab="third{{$k}}" | |||
| onclick="loadModelFile({{.VersionName}},'','','init')">{{$.i18n.Tr "repo.model_download"}}</a> | |||
| <a class="item load-model-file" data-tab="third{{$k}}" 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}}"> | |||
| <div style="padding-top: 10px;"> | |||
| @@ -509,7 +508,7 @@ | |||
| <div class="ui message message{{.VersionName}}" style="display: none;"> | |||
| <div id="header"></div> | |||
| </div> | |||
| <div class="ui attached log" onscroll="fn({{.VersionName}})" id="log{{.VersionName}}" | |||
| <div class="ui attached log log-scroll" id="log{{.VersionName}}" | |||
| style="height: 300px !important; overflow: auto;"> | |||
| <input type="hidden" name="end_line" value> | |||
| <input type="hidden" name="start_line" value> | |||
| @@ -727,18 +726,6 @@ | |||
| $('#name').val(modelName) | |||
| $('#version').val("0.0.1") | |||
| } | |||
| function renderSize(value) { | |||
| if (null == value || value == '') { | |||
| return "0 Bytes"; | |||
| } | |||
| var unitArr = new Array("Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"); | |||
| var index = 0; | |||
| var srcsize = parseFloat(value); | |||
| index = Math.floor(Math.log(srcsize) / Math.log(1024)); | |||
| var size = srcsize / Math.pow(1024, index); | |||
| size = size.toFixed(0);//保留的小数位数 | |||
| return size + unitArr[index]; | |||
| } | |||
| function refreshStatus(version_name) { | |||
| $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}?version_name=${version_name}`, (data) => { | |||
| // header status and duration | |||
| @@ -811,243 +798,5 @@ | |||
| console.log(err); | |||
| }); | |||
| } | |||
| function loadModelFile(version_name, parents, filename, init) { | |||
| parents = parents || '' | |||
| filename = filename || '' | |||
| init = init || '' | |||
| $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/model_list?version_name=${version_name}&parentDir=${parents}`, (data) => { | |||
| $(`#dir_list${version_name}`).empty() | |||
| renderDir(data, version_name) | |||
| if (init === "init") { | |||
| $(`input[name=model${version_name}]`).val("") | |||
| $(`input[name=modelback${version_name}]`).val(version_name) | |||
| $(`#file_breadcrumb${version_name}`).empty() | |||
| let htmlBread = "" | |||
| htmlBread += `<div class='active section'>${version_name}</div>` | |||
| htmlBread += "<div class='divider'> / </div>" | |||
| $(`#file_breadcrumb${version_name}`).append(htmlBread) | |||
| } else { | |||
| renderBrend(version_name, parents, filename, init) | |||
| } | |||
| }).fail(function (err) { | |||
| console.log(err, version_name); | |||
| }); | |||
| } | |||
| function renderBrend(version_name, parents, filename, init) { | |||
| if (init == "folder") { | |||
| let htmlBrend = "" | |||
| let sectionName = $(`#file_breadcrumb${version_name} .active.section`).text() | |||
| let parents1 = $(`input[name=model${version_name}]`).val() | |||
| let filename1 = $(`input[name=modelback${version_name}]`).val() | |||
| if (parents1 === "") { | |||
| $(`#file_breadcrumb${version_name} .active.section`).replaceWith(`<a class='section' onclick="loadModelFile('${version_name}','${parents1}','','init')">${sectionName}</a>`) | |||
| } else { | |||
| $(`#file_breadcrumb${version_name} .active.section`).replaceWith(`<a class='section' onclick="loadModelFile('${version_name}','${parents1}','${filename1}')">${sectionName}</a>`) | |||
| } | |||
| htmlBrend += `<div class='active section'>${filename}</div>` | |||
| htmlBrend += "<div class='divider'> / </div>" | |||
| $(`#file_breadcrumb${version_name}`).append(htmlBrend) | |||
| $(`input[name=model${version_name}]`).val(parents) | |||
| $(`input[name=modelback${version_name}]`).val(filename) | |||
| } 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>") | |||
| } | |||
| } | |||
| function renderDir(data, version_name) { | |||
| let html = "" | |||
| html += "<div class='ui grid' style='margin:0;'>" | |||
| html += "<div class='row' style='padding: 0;'>" | |||
| html += "<div class='ui sixteen wide column' style='padding:1rem;'>" | |||
| html += "<div class='dir list'>" | |||
| html += "<table id='repo-files-table' class='ui single line table pad20'>" | |||
| html += '<tbody>' | |||
| // html += "</tbody>" | |||
| for (let i = 0; i < data.Dirs.length; i++) { | |||
| let dirs_size = renderSize(data.Dirs[i].Size) | |||
| html += "<tr>" | |||
| html += "<td class='name six wid'>" | |||
| html += "<span class='truncate'>" | |||
| html += "<span class='octicon octicon-file-directory'>" | |||
| html += "</span>" | |||
| if (data.Dirs[i].IsDir) { | |||
| html += `<a onclick="loadModelFile('${version_name}','${data.Dirs[i].ParenDir}','${data.Dirs[i].FileName}','folder')">` | |||
| html += "<span class='fitted'><i class='folder icon' width='16' height='16' aria-hidden='true'></i>" + data.Dirs[i].FileName + "</span>" | |||
| } else { | |||
| if (downlaodFlag) { | |||
| html += `<a href="${location.href}/model_download?version_name=${version_name}&file_name=${data.Dirs[i].FileName}&parent_dir=${data.Dirs[i].ParenDir}">` | |||
| } | |||
| else { | |||
| html += `<a class="disabled">` | |||
| } | |||
| html += "<span class='fitted'><i class='file icon' width='16' height='16' aria-hidden='true'></i>" + data.Dirs[i].FileName + "</span>" | |||
| } | |||
| html += '</a>' | |||
| html += "</span>" | |||
| html += "</td>" | |||
| html += "<td class='message seven wide'>" | |||
| if (data.Dirs[i].IsDir) { | |||
| html += "<span class='truncate has-emoji'></span>" | |||
| } else { | |||
| html += "<span class='truncate has-emoji'>" + `${dirs_size}` + "</span>" | |||
| } | |||
| html += "</td>" | |||
| html += "<td class='text right age three wide'>" | |||
| html += "<span class='truncate has-emoji'>" + data.Dirs[i].ModTime + "</span>" | |||
| html += "</td>" | |||
| html += "</tr>" | |||
| } | |||
| html += "</tbody>" | |||
| html += "</table>" | |||
| html += "</div>" | |||
| html += "</div>" | |||
| html += "</div>" | |||
| html += "</div>" | |||
| $(`#dir_list${version_name}`).append(html) | |||
| } | |||
| 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); | |||
| }) | |||
| }) | |||
| </script> | |||
+ 309
- 0
web_src/js/features/cloudbrainShow.js
View File
| @@ -0,0 +1,309 @@ | |||
| export default async function initCloudrainSow() { | |||
| function debounce(fn, delay) { | |||
| let timer; | |||
| return (...args) => { | |||
| // 判断定时器是否存在，清除定时器 | |||
| if (timer) { | |||
| clearTimeout(timer); | |||
| } | |||
| // 重新调用setTimeout | |||
| timer = setTimeout(() => { | |||
| fn.apply(this, args); | |||
| }, delay); | |||
| }; | |||
| } | |||
| 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) && | |||
| scrollLeft === 0 | |||
| ) { | |||
| 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`, | |||
| (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 (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`, | |||
| (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); | |||
| }); | |||
| } | |||
| } | |||
| const fn = debounce(logScroll, 500); | |||
| $(".log-scroll").scroll(function () { | |||
| let version_name = $(this).data("version"); | |||
| fn(version_name); | |||
| }); | |||
| 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 | |||
| ); | |||
| } | |||
| ); | |||
| }); | |||
| // | |||
| $(".content-pad").on("click", ".load-model-file", function () { | |||
| console.log("11111111111"); | |||
| let version_name = $(this).data("version"); | |||
| let parents = $(this).data("parents") || ""; | |||
| let filename = $(this).data("filename") || ""; | |||
| let init = $(this).data("init") || ""; | |||
| let path = $(this).data("path"); | |||
| let url = `/api/v1/repos${path}?version_name=${version_name}&parentDir=${parents}`; | |||
| console.log(url); | |||
| $.get(url, (data) => { | |||
| $(`#dir_list${version_name}`).empty(); | |||
| renderDir(path, data, version_name); | |||
| if (init === "init") { | |||
| $(`input[name=model${version_name}]`).val(""); | |||
| $(`input[name=modelback${version_name}]`).val(version_name); | |||
| $(`#file_breadcrumb${version_name}`).empty(); | |||
| let htmlBread = ""; | |||
| htmlBread += `<div class='active section'>${version_name}</div>`; | |||
| htmlBread += "<div class='divider'> / </div>"; | |||
| $(`#file_breadcrumb${version_name}`).append(htmlBread); | |||
| } else { | |||
| renderBrend(path, version_name, parents, filename, init); | |||
| } | |||
| }).fail(function (err) { | |||
| console.log(err, version_name); | |||
| }); | |||
| }); | |||
| function renderSize(value) { | |||
| if (null == value || value == "") { | |||
| return "0 Bytes"; | |||
| } | |||
| var unitArr = new Array( | |||
| "Bytes", | |||
| "KB", | |||
| "MB", | |||
| "GB", | |||
| "TB", | |||
| "PB", | |||
| "EB", | |||
| "ZB", | |||
| "YB" | |||
| ); | |||
| var index = 0; | |||
| var srcsize = parseFloat(value); | |||
| index = Math.floor(Math.log(srcsize) / Math.log(1024)); | |||
| var size = srcsize / Math.pow(1024, index); | |||
| size = size.toFixed(0); //保留的小数位数 | |||
| return size + unitArr[index]; | |||
| } | |||
| function renderBrend(path, version_name, parents, filename, init) { | |||
| if (init == "folder") { | |||
| let htmlBrend = ""; | |||
| let sectionName = $( | |||
| `#file_breadcrumb${version_name} .active.section` | |||
| ).text(); | |||
| let parents1 = $(`input[name=model${version_name}]`).val(); | |||
| let filename1 = $(`input[name=modelback${version_name}]`).val(); | |||
| if (parents1 === "") { | |||
| $(`#file_breadcrumb${version_name} .active.section`).replaceWith( | |||
| `<a class='section load-model-file' data-path='${path}' data-version='${version_name}' data-parents='${parents1}' data-filename='' data-init='init'>${sectionName}</a>` | |||
| ); | |||
| } else { | |||
| $(`#file_breadcrumb${version_name} .active.section`).replaceWith( | |||
| `<a class='section load-model-file' data-path='${path}' data-version='${version_name}' data-parents='${parents1}' data-filename='${filename1}'>${sectionName}</a>` | |||
| ); | |||
| } | |||
| htmlBrend += `<div class='active section'>${filename}</div>`; | |||
| htmlBrend += "<div class='divider'> / </div>"; | |||
| $(`#file_breadcrumb${version_name}`).append(htmlBrend); | |||
| $(`input[name=model${version_name}]`).val(parents); | |||
| $(`input[name=modelback${version_name}]`).val(filename); | |||
| } 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>"); | |||
| } | |||
| } | |||
| function renderDir(path, data, version_name) { | |||
| let html = ""; | |||
| html += "<div class='ui grid' style='margin:0;'>"; | |||
| html += "<div class='row' style='padding: 0;'>"; | |||
| html += "<div class='ui sixteen wide column' style='padding:1rem;'>"; | |||
| html += "<div class='dir list'>"; | |||
| html += "<table id='repo-files-table' class='ui single line table pad20'>"; | |||
| html += "<tbody>"; | |||
| // html += "</tbody>" | |||
| for (let i = 0; i < data.Dirs.length; i++) { | |||
| let dirs_size = renderSize(data.Dirs[i].Size); | |||
| html += "<tr>"; | |||
| html += "<td class='name six wid'>"; | |||
| html += "<span class='truncate'>"; | |||
| html += "<span class='octicon octicon-file-directory'>"; | |||
| html += "</span>"; | |||
| if (data.Dirs[i].IsDir) { | |||
| html += `<a class='load-model-file' data-path='${path}' data-version='${version_name}' data-parents='${data.Dirs[i].ParenDir}' data-filename='${data.Dirs[i].FileName}' data-init='folder'>`; | |||
| html += | |||
| "<span class='fitted'><i class='folder icon' width='16' height='16' aria-hidden='true'></i>" + | |||
| data.Dirs[i].FileName + | |||
| "</span>"; | |||
| } else { | |||
| if (downlaodFlag) { | |||
| html += `<a href="${location.href}/result_download?version_name=${version_name}&file_name=${data.Dirs[i].FileName}&parent_dir=${data.Dirs[i].ParenDir}">`; | |||
| } else { | |||
| html += `<a class="disabled">`; | |||
| } | |||
| html += | |||
| "<span class='fitted'><i class='file icon' width='16' height='16' aria-hidden='true'></i>" + | |||
| data.Dirs[i].FileName + | |||
| "</span>"; | |||
| } | |||
| html += "</a>"; | |||
| html += "</span>"; | |||
| html += "</td>"; | |||
| html += "<td class='message seven wide'>"; | |||
| if (data.Dirs[i].IsDir) { | |||
| html += "<span class='truncate has-emoji'></span>"; | |||
| } else { | |||
| html += | |||
| "<span class='truncate has-emoji'>" + `${dirs_size}` + "</span>"; | |||
| } | |||
| html += "</td>"; | |||
| html += "<td class='text right age three wide'>"; | |||
| html += | |||
| "<span class='truncate has-emoji'>" + data.Dirs[i].ModTime + "</span>"; | |||
| html += "</td>"; | |||
| html += "</tr>"; | |||
| } | |||
| html += "</tbody>"; | |||
| html += "</table>"; | |||
| html += "</div>"; | |||
| html += "</div>"; | |||
| html += "</div>"; | |||
| html += "</div>"; | |||
| $(`#dir_list${version_name}`).append(html); | |||
| } | |||
| } | |||
+ 71
- 69
web_src/js/index.js
View File
| @@ -43,6 +43,7 @@ import Contributors from "./components/Contributors.vue"; | |||
| import Model from "./components/Model.vue"; | |||
| import WxAutorize from "./components/WxAutorize.vue"; | |||
| import initCloudrain from "./features/cloudrbanin.js"; | |||
| import initCloudrainSow from "./features/cloudbrainShow.js"; | |||
| import initImage from "./features/images.js"; | |||
| import selectDataset from "./components/dataset/selectDataset.vue"; | |||
| // import $ from 'jquery.js' | |||
| @@ -2917,6 +2918,7 @@ $(document).ready(async () => { | |||
| initTribute(); | |||
| initDropDown(); | |||
| initCloudrain(); | |||
| initCloudrainSow(); | |||
| initImage(); | |||
| initContextMenu(); | |||
| @@ -3711,9 +3713,9 @@ function initVueDataset() { | |||
| if (!el) { | |||
| return; | |||
| } | |||
| let link = $('#square-link').data('link') | |||
| let repolink = $('.dataset-repolink').data('repolink') | |||
| let datasetType = $('.dataset-repolink').data('dataset-type') | |||
| let link = $("#square-link").data("link"); | |||
| let repolink = $(".dataset-repolink").data("repolink"); | |||
| let datasetType = $(".dataset-repolink").data("dataset-type"); | |||
| const clearBtn = document.getElementsByClassName("clear_dataset_value"); | |||
| const params = new URLSearchParams(location.search); | |||
| for (let i = 0; i < clearBtn.length; i++) { | |||
| @@ -3873,10 +3875,10 @@ function initVueDataset() { | |||
| mounted() { | |||
| this.getTypeList(); | |||
| if (!!document.getElementById('dataset-repolink-init')) { | |||
| if (!!document.getElementById("dataset-repolink-init")) { | |||
| // this.datasetType = location.href.indexOf('cloudbrain') !== -1 ? 0 : 1 | |||
| this.datasetType = $('#dataset-repolink-init').data("dataset-type") | |||
| this.getCurrentRepoDataset(this.repolink, this.datasetType) | |||
| this.datasetType = $("#dataset-repolink-init").data("dataset-type"); | |||
| this.getCurrentRepoDataset(this.repolink, this.datasetType); | |||
| } | |||
| const params = new URLSearchParams(location.search); | |||
| @@ -3897,13 +3899,13 @@ function initVueDataset() { | |||
| this.ruleForm1 = ruleForm; | |||
| // this.getEditInit() | |||
| this.starItems = starItems | |||
| this.starActives = starActives | |||
| this.taskLists = taskLists | |||
| this.licenseLists = licenseLists | |||
| this.descfile = dataset_file_desc | |||
| this.repolink = repolink | |||
| this.datasetType = datasetType | |||
| this.starItems = starItems; | |||
| this.starActives = starActives; | |||
| this.taskLists = taskLists; | |||
| this.licenseLists = licenseLists; | |||
| this.descfile = dataset_file_desc; | |||
| this.repolink = repolink; | |||
| this.datasetType = datasetType; | |||
| }, | |||
| methods: { | |||
| copyUrl(url) { | |||
| @@ -3924,18 +3926,18 @@ function initVueDataset() { | |||
| handleCurrentChange(val) { | |||
| this.page = val; | |||
| switch (this.activeName) { | |||
| case 'first': | |||
| this.getCurrentRepoDataset(this.repolink, this.datasetType) | |||
| break | |||
| case 'second': | |||
| this.getMyDataset(this.repolink, this.datasetType) | |||
| break | |||
| case 'third': | |||
| this.getPublicDataset(this.repolink, this.datasetType) | |||
| break | |||
| case 'fourth': | |||
| this.getStarDataset(this.repolink, this.datasetType) | |||
| break | |||
| case "first": | |||
| this.getCurrentRepoDataset(this.repolink, this.datasetType); | |||
| break; | |||
| case "second": | |||
| this.getMyDataset(this.repolink, this.datasetType); | |||
| break; | |||
| case "third": | |||
| this.getPublicDataset(this.repolink, this.datasetType); | |||
| break; | |||
| case "fourth": | |||
| this.getStarDataset(this.repolink, this.datasetType); | |||
| break; | |||
| } | |||
| }, | |||
| handleCheckedChange(val) { | |||
| @@ -4276,18 +4278,18 @@ function initVueDataset() { | |||
| }, | |||
| refreshStatusDataset() { | |||
| switch (this.activeName) { | |||
| case 'first': | |||
| this.getCurrentRepoDataset(this.repolink, this.datasetType) | |||
| break | |||
| case 'second': | |||
| this.getMyDataset(this.repolink, this.datasetType) | |||
| break | |||
| case 'third': | |||
| this.getPublicDataset(this.repolink, this.datasetType) | |||
| break | |||
| case 'fourth': | |||
| this.getStarDataset(this.repolink, this.datasetType) | |||
| break | |||
| case "first": | |||
| this.getCurrentRepoDataset(this.repolink, this.datasetType); | |||
| break; | |||
| case "second": | |||
| this.getMyDataset(this.repolink, this.datasetType); | |||
| break; | |||
| case "third": | |||
| this.getPublicDataset(this.repolink, this.datasetType); | |||
| break; | |||
| case "fourth": | |||
| this.getStarDataset(this.repolink, this.datasetType); | |||
| break; | |||
| } | |||
| }, | |||
| getCurrentRepoDataset(repoLink, type) { | |||
| @@ -4398,44 +4400,44 @@ function initVueDataset() { | |||
| }, | |||
| searchDataset() { | |||
| switch (this.activeName) { | |||
| case 'first': | |||
| this.page = 1 | |||
| this.getCurrentRepoDataset(this.repolink, this.datasetType) | |||
| break | |||
| case 'second': | |||
| this.page = 1 | |||
| this.getMyDataset(this.repolink, this.datasetType) | |||
| break | |||
| case 'third': | |||
| this.page = 1 | |||
| this.getPublicDataset(this.repolink, this.datasetType) | |||
| break | |||
| case 'fourth': | |||
| this.page = 1 | |||
| this.getStarDataset(this.repolink, this.datasetType) | |||
| break | |||
| case "first": | |||
| this.page = 1; | |||
| this.getCurrentRepoDataset(this.repolink, this.datasetType); | |||
| break; | |||
| case "second": | |||
| this.page = 1; | |||
| this.getMyDataset(this.repolink, this.datasetType); | |||
| break; | |||
| case "third": | |||
| this.page = 1; | |||
| this.getPublicDataset(this.repolink, this.datasetType); | |||
| break; | |||
| case "fourth": | |||
| this.page = 1; | |||
| this.getStarDataset(this.repolink, this.datasetType); | |||
| break; | |||
| } | |||
| }, | |||
| }, | |||
| watch: { | |||
| searchDataItem() { | |||
| switch (this.activeName) { | |||
| case 'first': | |||
| this.page = 1 | |||
| this.getCurrentRepoDataset(this.repolink, this.datasetType) | |||
| break | |||
| case 'second': | |||
| this.page = 1 | |||
| this.getMyDataset(this.repolink, this.datasetType) | |||
| break | |||
| case 'third': | |||
| this.page = 1 | |||
| this.getPublicDataset(this.repolink, this.datasetType) | |||
| break | |||
| case 'fourth': | |||
| this.page = 1 | |||
| this.getStarDataset(this.repolink, this.datasetType) | |||
| break | |||
| case "first": | |||
| this.page = 1; | |||
| this.getCurrentRepoDataset(this.repolink, this.datasetType); | |||
| break; | |||
| case "second": | |||
| this.page = 1; | |||
| this.getMyDataset(this.repolink, this.datasetType); | |||
| break; | |||
| case "third": | |||
| this.page = 1; | |||
| this.getPublicDataset(this.repolink, this.datasetType); | |||
| break; | |||
| case "fourth": | |||
| this.page = 1; | |||
| this.getStarDataset(this.repolink, this.datasetType); | |||
| break; | |||
| } | |||
| }, | |||
| }, | |||