|
|
@@ -7,7 +7,7 @@ |
|
|
|
:close-on-click-modal="false" |
|
|
|
@closed="handleClose" |
|
|
|
> |
|
|
|
<div class="wrapper" v-loading="loading"> |
|
|
|
<div class="wrapper" v-loading="loading" element-loading-spinner="el-icon-loading"> |
|
|
|
<div style="text-align: center;padding-bottom: 12px;"> |
|
|
|
<span class="text-tip">{{$t('notebook.tips')}}</span> |
|
|
|
</div> |
|
|
@@ -47,57 +47,58 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div |
|
|
|
class="three-resource-type" |
|
|
|
:class="{ active: selectIndex == 1 }" |
|
|
|
@click="selectResource(1)" |
|
|
|
:class="{ active: selectIndex == 2 }" |
|
|
|
@click="selectResource(2)" |
|
|
|
> |
|
|
|
<div class="resource-child-node"> |
|
|
|
<div class="resource-type-icon background-G"> |
|
|
|
<span class="text">G</span> |
|
|
|
<div class="resource-type-icon background-N"> |
|
|
|
<span class="text">N</span> |
|
|
|
</div> |
|
|
|
<div class="resource-type-detail"> |
|
|
|
<div class="detail-title"><span>{{$t('notebook.gpuEnv')}}</span></div> |
|
|
|
<div class="detail-title"><span>{{$t('notebook.npuEnv')}}</span></div> |
|
|
|
<div class="detail-spec"> |
|
|
|
<span>{{gpuSpec}}</span> |
|
|
|
<span>{{npuSpec}}</span> |
|
|
|
</div> |
|
|
|
<div class="detail-spec"> |
|
|
|
<span>{{$t('image')}}:{{notebookInfo.imageGpuDescription}}</span> |
|
|
|
<span>{{$t('image')}}:{{notebookInfo.imageNpuDescription}}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="resource-select"> |
|
|
|
<i v-if="selectIndex===1 && !initSelect" :class="[slideActive && !initSelect ?'slide-in-top':'slide-in-bottom']" class="ri-checkbox-circle-line green"></i> |
|
|
|
<i v-if="selectIndex===1 && initSelect" class="ri-checkbox-circle-line green"></i> |
|
|
|
<i v-if="selectIndex===2" :class="{'slide-in-top': slideActive && !initSelect}" class="ri-checkbox-circle-line green"></i> |
|
|
|
<i |
|
|
|
class="ri-checkbox-blank-circle-line gray" |
|
|
|
:class="{'fade-out':selectIndex===1}" |
|
|
|
:class="{'fade-out':selectIndex===2}" |
|
|
|
></i> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class="three-resource-type" |
|
|
|
:class="{ active: selectIndex == 2 }" |
|
|
|
@click="selectResource(2)" |
|
|
|
:class="{ active: selectIndex == 1 }" |
|
|
|
@click="selectResource(1)" |
|
|
|
> |
|
|
|
<div class="resource-child-node"> |
|
|
|
<div class="resource-type-icon background-N"> |
|
|
|
<span class="text">N</span> |
|
|
|
<div class="resource-type-icon background-G"> |
|
|
|
<span class="text">G</span> |
|
|
|
</div> |
|
|
|
<div class="resource-type-detail"> |
|
|
|
<div class="detail-title"><span>{{$t('notebook.npuEnv')}}</span></div> |
|
|
|
<div class="detail-title"><span>{{$t('notebook.gpuEnv')}}</span></div> |
|
|
|
<div class="detail-spec"> |
|
|
|
<span>{{npuSpec}}</span> |
|
|
|
<span>{{gpuSpec}}</span> |
|
|
|
</div> |
|
|
|
<div class="detail-spec"> |
|
|
|
<span>{{$t('image')}}:{{notebookInfo.imageNpuDescription}}</span> |
|
|
|
<span>{{$t('image')}}:{{notebookInfo.imageGpuDescription}}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="resource-select"> |
|
|
|
<i v-if="selectIndex===2" :class="{'slide-in-top': slideActive && !initSelect}" class="ri-checkbox-circle-line green"></i> |
|
|
|
<i v-if="selectIndex===1 && !initSelect" :class="[slideActive && !initSelect ?'slide-in-top':'slide-in-bottom']" class="ri-checkbox-circle-line green"></i> |
|
|
|
<i v-if="selectIndex===1 && initSelect" class="ri-checkbox-circle-line green"></i> |
|
|
|
<i |
|
|
|
class="ri-checkbox-blank-circle-line gray" |
|
|
|
:class="{'fade-out':selectIndex===2}" |
|
|
|
:class="{'fade-out':selectIndex===1}" |
|
|
|
></i> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@@ -107,7 +108,7 @@ |
|
|
|
<div v-if="btnStatus[0]===0"> |
|
|
|
<button class="ui green small button" @click="createTask(0)"></i>{{$t('notebook.newTask')}}</button> |
|
|
|
<span v-if="notebookInfo.waitCountGpu==0" class="text">{{$t('notebook.noQuene')}}</span> |
|
|
|
<span v-else class="text">{{$t('notebook.queneTips1')}} <span style="color: red;">{{notebookInfo.waitCountGpu}}</span> {{$t('notebook.queneTips2')}}</span> |
|
|
|
<span v-else class="text">{{$t('notebook.queneTips1')}} <span style="color: red;">{{notebookInfo.waitCountGpu}}</span> {{$t('notebook.queneTips2')}}</span> |
|
|
|
</div> |
|
|
|
<div v-else-if="btnStatus[0]===1"> |
|
|
|
<button class="ui disabled small button" style="background-color: #888;"><i class="loading spinner icon" style="color: #fff;"></i>{{$t('notebook.newTask')}}</button> |
|
|
@@ -125,51 +126,51 @@ |
|
|
|
<button class="ui disabled small button" style="background-color: #888;"><i class="loading spinner icon" style="color: #fff;"></i>{{$t('notebook.stopping')}}</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="resource-operate" v-if="selectIndex==1"> |
|
|
|
<div v-if="btnStatus[1]===0"> |
|
|
|
<button class="ui green small button" @click="createTask(1)"></i>{{$t('notebook.newTask')}}</button> |
|
|
|
<span v-if="notebookInfo.waitCountGpu==0" class="text">{{$t('notebook.noQuene')}}</span> |
|
|
|
<span v-else class="text">{{$t('notebook.queneTips1')}} <span style="color: red;">{{notebookInfo.waitCountGpu}}</span> {{$t('notebook.queneTips2')}}</span> |
|
|
|
|
|
|
|
<div class="resource-operate" v-if="selectIndex==2"> |
|
|
|
<div v-if="btnStatus[2]===0"> |
|
|
|
<button class="ui green small button" @click="createTask(2)"></i>{{$t('notebook.newTask')}}</button> |
|
|
|
<span v-if="notebookInfo.waitCountNpu==0" class="text">{{$t('notebook.noQuene')}}</span> |
|
|
|
<span v-else class="text">{{$t('notebook.queneTips1')}} <span style="color: red;">{{notebookInfo.waitCountNpu}}</span> {{$t('notebook.queneTips2')}}</span> |
|
|
|
</div> |
|
|
|
<div v-else-if="btnStatus[1]===1"> |
|
|
|
<div v-else-if="btnStatus[2]===1"> |
|
|
|
<button class="ui disabled small button" style="background-color: #888;"><i class="loading spinner icon" style="color: #fff;"></i>{{$t('notebook.newTask')}}</button> |
|
|
|
<span class="text">{{$t('notebook.watiResource')}}</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-else-if="btnStatus[1]===2"> |
|
|
|
<div v-else-if="btnStatus[2]===2"> |
|
|
|
<button class="ui small button" style="background-color: #1684fc;"> |
|
|
|
<a style="color:#fff" :href="deubgUrlGpu" target="_blank">{{$t('notebook.debug')}}</a> |
|
|
|
<a style="color:#fff" :href="deubgUrlNpu" target="_blank">{{$t('notebook.debug')}}</a> |
|
|
|
</button> |
|
|
|
<button class="ui small button" @click="stopDebug(1)">{{$t('notebook.stop')}}</button> |
|
|
|
<button class="ui small button" @click="stopDebug(2)">{{$t('notebook.stop')}}</button> |
|
|
|
<span class="text">{{$t('notebook.notebookRunning')}}</span> |
|
|
|
</div> |
|
|
|
<div v-else> |
|
|
|
<button class="ui disabled small button" style="background-color: #888;"><i class="loading spinner icon" style="color: #fff;"></i>{{$t('notebook.stopping')}}</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="resource-operate" v-if="selectIndex==2"> |
|
|
|
<div v-if="btnStatus[2]===0"> |
|
|
|
<button class="ui green small button" @click="createTask(2)"></i>{{$t('notebook.newTask')}}</button> |
|
|
|
<span v-if="notebookInfo.waitCountNpu==0" class="text">{{$t('notebook.noQuene')}}</span> |
|
|
|
<span v-else class="text">{{$t('notebook.queneTips1')}} <span style="color: red;">{{notebookInfo.waitCountNpu}}</span> {{$t('notebook.queneTips2')}}</span> |
|
|
|
<div class="resource-operate" v-if="selectIndex==1"> |
|
|
|
<div v-if="btnStatus[1]===0"> |
|
|
|
<button class="ui green small button" @click="createTask(1)"></i>{{$t('notebook.newTask')}}</button> |
|
|
|
<span v-if="notebookInfo.waitCountGpu==0" class="text">{{$t('notebook.noQuene')}}</span> |
|
|
|
<span v-else class="text">{{$t('notebook.queneTips1')}} <span style="color: red;">{{notebookInfo.waitCountGpu}}</span> {{$t('notebook.queneTips2')}}</span> |
|
|
|
</div> |
|
|
|
<div v-else-if="btnStatus[2]===1"> |
|
|
|
<div v-else-if="btnStatus[1]===1"> |
|
|
|
<button class="ui disabled small button" style="background-color: #888;"><i class="loading spinner icon" style="color: #fff;"></i>{{$t('notebook.newTask')}}</button> |
|
|
|
<span class="text">{{$t('notebook.watiResource')}}</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-else-if="btnStatus[2]===2"> |
|
|
|
<div v-else-if="btnStatus[1]===2"> |
|
|
|
<button class="ui small button" style="background-color: #1684fc;"> |
|
|
|
<a style="color:#fff" :href="deubgUrlNpu" target="_blank">{{$t('notebook.debug')}}</a> |
|
|
|
<a style="color:#fff" :href="deubgUrlGpu" target="_blank">{{$t('notebook.debug')}}</a> |
|
|
|
</button> |
|
|
|
<button class="ui small button" @click="stopDebug(2)">{{$t('notebook.stop')}}</button> |
|
|
|
<button class="ui small button" @click="stopDebug(1)">{{$t('notebook.stop')}}</button> |
|
|
|
<span class="text">{{$t('notebook.notebookRunning')}}</span> |
|
|
|
</div> |
|
|
|
<div v-else> |
|
|
|
<button class="ui disabled small button" style="background-color: #888;"><i class="loading spinner icon" style="color: #fff;"></i>{{$t('notebook.stopping')}}</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
@@ -215,6 +216,7 @@ export default { |
|
|
|
branch_name:'', |
|
|
|
owner_name:'', |
|
|
|
project_name:'', |
|
|
|
sign_name:'' |
|
|
|
}, |
|
|
|
btnStatus:{0:0,1:0,2:0}, |
|
|
|
alertCb:false, |
|
|
@@ -222,7 +224,8 @@ export default { |
|
|
|
deubgUrlGpu:'', |
|
|
|
deubgUrlNpuStop:'', |
|
|
|
deubgUrlGpuStop:'', |
|
|
|
loading:false |
|
|
|
loading:false, |
|
|
|
activeLoadFirst:true |
|
|
|
}; |
|
|
|
}, |
|
|
|
methods: { |
|
|
@@ -245,7 +248,10 @@ export default { |
|
|
|
this.alertCb = false |
|
|
|
}, |
|
|
|
getNotebookInfo(){ |
|
|
|
this.loading = true |
|
|
|
if(this.activeLoadFirst){ |
|
|
|
this.loading = true |
|
|
|
} |
|
|
|
|
|
|
|
getFileNotebook().then((res)=>{ |
|
|
|
|
|
|
|
if(res.data.code==0){ |
|
|
@@ -254,9 +260,11 @@ export default { |
|
|
|
Message.error(res.data.message) |
|
|
|
} |
|
|
|
this.loading = false |
|
|
|
this.activeLoadFirst = false |
|
|
|
}).catch((err)=>{ |
|
|
|
Message.error(err) |
|
|
|
this.loading = false |
|
|
|
this.activeLoadFirst = false |
|
|
|
}) |
|
|
|
}, |
|
|
|
getCb1NotebookInfo(path,id,index){ |
|
|
@@ -264,8 +272,8 @@ export default { |
|
|
|
if(res.status===200){ |
|
|
|
if(res.data.JobStatus==="RUNNING"){ |
|
|
|
this.btnStatus[index]=2 |
|
|
|
this.deubgUrlGpu = `${AppSubUrl}/${this.fileInfo.owner_name}/${this.notebookInfo.projectName}/cloudbrain/${id}/debug` |
|
|
|
this.deubgUrlGpuStop = `${AppSubUrl}/${this.fileInfo.owner_name}/${this.notebookInfo.projectName}/cloudbrain/${id}/stop` |
|
|
|
this.deubgUrlGpu = `${AppSubUrl}/${this.fileInfo.sign_name}/${this.notebookInfo.projectName}/cloudbrain/${id}/debug` |
|
|
|
this.deubgUrlGpuStop = `${AppSubUrl}/${this.fileInfo.sign_name}/${this.notebookInfo.projectName}/cloudbrain/${id}/stop` |
|
|
|
clearInterval(timerCb1) |
|
|
|
} |
|
|
|
if(finalState.includes(res.data.JobStatus)){ |
|
|
@@ -280,8 +288,8 @@ export default { |
|
|
|
if(res.status===200){ |
|
|
|
if(res.data.JobStatus==="RUNNING"){ |
|
|
|
this.btnStatus[2]=2 |
|
|
|
this.deubgUrlNpu = `${AppSubUrl}/${this.fileInfo.owner_name}/${this.notebookInfo.projectName}/modelarts/notebook/${id}/debug` |
|
|
|
this.deubgUrlNpuStop = `${AppSubUrl}/${this.fileInfo.owner_name}/${this.notebookInfo.projectName}/modelarts/notebook/${id}/stop` |
|
|
|
this.deubgUrlNpu = `${AppSubUrl}/${this.fileInfo.sign_name}/${this.notebookInfo.projectName}/modelarts/notebook/${id}/debug` |
|
|
|
this.deubgUrlNpuStop = `${AppSubUrl}/${this.fileInfo.sign_name}/${this.notebookInfo.projectName}/modelarts/notebook/${id}/stop` |
|
|
|
clearInterval(timerCb2) |
|
|
|
} |
|
|
|
if(finalState.includes(res.data.JobStatus)){ |
|
|
@@ -369,6 +377,7 @@ export default { |
|
|
|
this.fileInfo.branch_name = selfData.getAttribute('data-branch') |
|
|
|
this.fileInfo.owner_name = selfData.getAttribute('data-owner') |
|
|
|
this.fileInfo.project_name = selfData.getAttribute('data-project') |
|
|
|
this.fileInfo.sign_name = selfData.getAttribute('data-name') |
|
|
|
let that = this; |
|
|
|
document |
|
|
|
.querySelector("#notebook-debug") |
|
|
|