wangwei
/
aiforge
Not watched
1
0
Fork 0
Code
Releases 128 Wiki Activity
Issues 0 Pull Requests 0 Datasets Model Cloudbrain
Browse Source

fix issue

tags/v1.22.4.1^2
zhoupzh 3 years ago
parent
94128626f5
commit
3bec5f1763
2 changed files with 405 additions and 190 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +112
    -0
      templates/repo/cloudbrain/image/edit.tmpl
  2. +293
    -190
      web_src/js/components/Images.vue

+ 112
- 0
templates/repo/cloudbrain/image/edit.tmpl View File

@@ -0,0 +1,112 @@
<style>
.label_color{
color:#505559 !important;
width: 6% !important;
text-align: center;
}
</style>
{{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="repository">
{{template "repo/header" .}}
<div class="alert"></div>
<div class="ui container">
<div>
<h4 class="ui top attached header">
{{.i18n.Tr "repo.submit_image"}}
</h4>
<div class="submit-image-tmplvalue" style="display: none;" data-link="{{$.Link}}"></div>
<div class="ui attached segment" style="padding: 2em 3em;padding-bottom: 7rem;">
<form class="ui form" id="form_image">
{{.CsrfTokenHtml}}
<div class="inline field">
<label class="label_color" for="">{{$.i18n.Tr "dataset.dataset_available_clusters"}}</label>
<div class="ui basic label" style="border: none !important;color:#3291f8;">
<svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14"><path fill="none" d="M0 0h24v24H0z"></path><path d="M4 3h16a1 1 0 0 1 1 1v7H3V4a1 1 0 0 1 1-1zM3 13h18v7a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-7zm4 3v2h3v-2H7zM7 6v2h3V6H7z"></path></svg>
CPU/GPU
</div>
<input type="hidden" value="{{.Type}}" name="type">
</div>
<div class="inline required field">
<label class="label_color" for="">{{$.i18n.Tr "repo.images.name"}}</label>
<input type="text" name="tag" required placeholder="{{$.i18n.Tr "repo.images.name_placerholder"}}" style="width: 80%;">
<span class="tooltips" style="display: block;padding-left: 0.5rem;">{{.i18n.Tr "cloudbrain.job_name_rule"}}</span>
</div>
<div class="inline required field">
<label class="label_color" for="">{{$.i18n.Tr "dataset.description"}}</label>
<textarea style="width: 80%;" required id="description" name="description" rows="3" maxlength="255" placeholder={{.i18n.Tr "repo.modelarts.train_job.new_place"}} onchange="this.value=this.value.substring(0, 255)" onkeydown="this.value=this.value.substring(0, 255)" onkeyup="this.value=this.value.substring(0, 255)"></textarea>
</div>
<div class="inline field" style="display: flex;align-items: center;">
<label class="label_color" for="">{{$.i18n.Tr "repo.model.manage.label"}}</label>&nbsp;
<div class="ui multiple search selection dropdown" id="dropdown_image" style="width: 80%;">
<input type="hidden" name="topics" value="" required>
<div class="default text" id="default_text">{{.i18n.Tr "repo.repo_label_helpe"}}</div>
<div class="menu" id="course_label_item"></div>
</div>
</div>
<span class="tooltips" style="display: block;padding-left: 0.5rem;margin-top: 0.5rem;margin-bottom: 1rem;">{{.i18n.Tr "repo.image.label_tooltips"}}</span>
<div class="inline fields">
<label class="label_color" for="" style="visibility: hidden;"></label>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="isPrivate" checked="checked" value="false">
<label>{{.i18n.Tr "org.settings.visibility.public"}}</label>
</div>
</div>
<div class="field" style="flex: 0.15;">
<div class="ui radio checkbox" >
<input type="radio" name="isPrivate" value="true">
<label>{{.i18n.Tr "home.show_private"}}</label>
</div>
</div>
<div class="field">
<span class="label_color">{{.i18n.Tr "repo.images.public_tooltips"}}</span>
</div>
</div>
<div class="inline required field" style="padding-top: 2rem;">
<label class="label_color" for="" style="visibility: hidden;"></label>
<button class="ui create_image green button" type="button">
{{.i18n.Tr "repo.cloudbrain.commit_image"}}
</button>
<a class="ui button" id="cancel_submit_image">{{.i18n.Tr "repo.cloudbrain.cancel"}}</a>
</div>
</form>
</div>
</div>
</div>
</div>
{{template "base/footer" .}}
<script>
console.log({{$.Link}})
let url_href = {{$.Link}}
function submitImage(){
console.log($('#form_image').serialize())
$.ajax({
url:url_href,
type:'POST',
data:$('#form_image').serialize(),
success:function(res){
console.log("res",res)
},
error: function(xhr){
// 隐藏 loading
// 只有请求不正常（状态码不为200）才会执行
// $('.ui.error.message').text(xhr.responseText)
// $('.ui.error.message').css('display','block')
},
complete:function(xhr){
// $("#mask").css({"display":"none","z-index":"1"})
}
})
}
</script>

+ 293
- 190
web_src/js/components/Images.vue View File

@@ -9,7 +9,8 @@
</div>
<div class="ui container" id="header">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="公共镜像(云脑1)" name="first" v-loading="loading">
<el-tab-pane label="公开镜像" name="first" v-loading="loadingPublic">
<template v-if="tableDataPublic.length!==0">
<div class="ui sixteen wide column">
<div class="ui two column stackable grid">
<div class="column">
@@ -17,27 +18,12 @@
<el-button id="success" slot="append" icon="el-icon-search" @click="searchName()">搜索</el-button>
</el-input>
</div>

<!-- <div class="column right aligned">
<el-dropdown>
<span class="el-dropdown-link">
排序<i class="el-icon-caret-bottom"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>最早创建</el-dropdown-item>
<el-dropdown-item>最新创建</el-dropdown-item>
<el-dropdown-item divided>按镜像字母顺序排序</el-dropdown-item>
<el-dropdown-item>按镜像字母逆序排序</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div> -->
</div>
</div>

<el-row style="margin-top:15px;">

<el-table
:data="tableData"
:data="tableDataPublic"
style="width: 100%"
:header-cell-style="tableHeaderStyle"
:default-sort="{prop:'createtime',order:'descending'}">
@@ -86,91 +72,117 @@
<div class="ui container" style="margin-top:50px;text-align:center">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-size="pageSize"
:page-sizes="[5,10,20]"
@size-change="handleSizeChangePublic"
@current-change="handleCurrentChangePublic"
:current-page="currentPagePublic"
:page-size="pageSizePublic"
:page-sizes="[10,15,20]"
layout="total, sizes, prev, pager, next, jumper"
:total="totalNum">
:total="totalNumPublic">
</el-pagination>
</div>
</template>
<el-empty v-else :image-size="200"></el-empty>
</el-tab-pane>
<el-tab-pane label="自定义镜像(云脑1)" name="second" v-loading="loading1">
<el-tab-pane label="我的镜像" name="second" v-loading="loadingCustom">
<template v-if="tableDataCustom.length!==0">
<div class="ui sixteen wide column">
<div class="ui two column stackable grid">
<div class="column">
<el-input placeholder="请输入镜像名称关健词" v-model="search" class="input-with-select" @keyup.enter.native="searchName()">
<el-button slot="append" id="success" icon="el-icon-search" @click="searchName()">搜索</el-button>
</el-input>
</div>

<!-- <div class="column right aligned">
<el-dropdown>
<span class="el-dropdown-link">
排序<i class="el-icon-caret-bottom"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>最早创建</el-dropdown-item>
<el-dropdown-item>最新创建</el-dropdown-item>
<el-dropdown-item divided>按镜像字母顺序排序</el-dropdown-item>
<el-dropdown-item>按镜像字母逆序排序</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div> -->
</div>
</div>
</div>

<el-row style="margin-top:15px;">

<el-table
:data="tableData1"
:data="tableDataCustom"
style="width: 100%"
:header-cell-style="tableHeaderStyle"
:default-sort="{prop:'createtime',order:'descending'}">
>
<el-table-column
label="镜像名称"
width="350"
min-width="19%"
align="left"
prop="name"
sortable
prop="tag"
>
<template slot-scope="scope">
<a class="text-over" :title="scope.row.name" style="cursor:default;color:#426290">{{ scope.row.name }}</a>
<div style="display: flex;align-items: center;">
<a class="text-over image_title" :title="scope.row.tag">{{ scope.row.tag }}</a>
<i class="ri-lock-2-line" style="color: #fa8c16;" v-if="scope.row.isPrivate"></i>
</div>
</template>
</el-table-column>
<el-table-column
label="文件路径/镜像描述"
width="450"
label="镜像描述"
min-width="28%"
align="left"
prop="description"
>
<template slot-scope="scope">
<el-tooltip class="item" effect="dark" content="点击复制文件路径" placement="top">
<a class="text-over" style="display:block;" @click="copyUrl(scope.row.place)">{{ scope.row.place }}</a>
</el-tooltip>
<div class="image_desc" :title="scope.row.description">{{ scope.row.description}}</div>
<div v-if="!!scope.row.topics">
<span v-for="(topic,index) in scope.row.topics" class="ui repo-topic label topic">{{topic}}</span>
</div>
<span class="text-over" :title="scope.row.description | clearP">{{ scope.row.description | clearP }}</span>
</template>
</el-table-column>
<el-table-column
prop="provider"
label="提供者"
width="120"
align="left"
sortable>
prop="type"
label="可用集群"
min-width="10%"
align="center"
>
<template slot-scope="scope">
{{scope.row.type | transformType}}
</template>
</el-table-column>
<el-table-column
prop="createtime"
prop="isPrivate"
label="状态"
min-width="8%"
align="center"
>
<template slot-scope="scope">
{{scope.row.isPrivate | transformPravite}}
</template>
</el-table-column>
<el-table-column
prop="createdUnix"
label="创建时间"
align="center"
sortable>
min-width="14%"
>
<template slot-scope="scope">
{{scope.row.createtime | transformTimestamp}}
{{scope.row.createdUnix | transformTimestamp}}
</template>
</el-table-column>
<el-table-column
align="center"
min-width="21%"
label="操作"
>
<template slot-scope="scope">
<div style="display: flex;justify-content: flex-end;align-items: center;">
<div style="display: flex;align-items: center;cursor:pointer;padding: 0 1rem;">
<svg width="1.4em" height="1.4em" viewBox="0 0 32 32" class="heart-stroke"><path d="M4.4 6.54c-1.761 1.643-2.6 3.793-2.36 6.056.24 2.263 1.507 4.521 3.663 6.534a29110.9 29110.9 0 0010.296 9.633l10.297-9.633c2.157-2.013 3.424-4.273 3.664-6.536.24-2.264-.599-4.412-2.36-6.056-1.73-1.613-3.84-2.29-6.097-1.955-1.689.25-3.454 1.078-5.105 2.394l-.4.319-.398-.319c-1.649-1.316-3.414-2.143-5.105-2.394a7.612 7.612 0 00-1.113-.081c-1.838 0-3.541.694-4.983 2.038z"></path></svg>
<span style="line-height: 2;margin-left:0.3rem;">3</span>
</div>
<span style="padding: 0 1rem;color:#0366d6;cursor:pointer;" @click="copyUrl('test')">复制地址</span>
<div style="padding-left:1rem;cursor:pointer;">
<el-dropdown size="medium">
<span class="el-dropdown-link">
更多<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="eidtImage(scope.row.id)">编辑</el-dropdown-item>
<el-dropdown-item style="color: red;" @click.native="deleteImage(scope.row.id)">删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</template>
</el-table-column>
</el-table>
@@ -178,76 +190,93 @@
<div class="ui container" style="margin-top:50px;text-align:center">
<el-pagination
background
@size-change="handleSizeChange1"
@current-change="handleCurrentChange1"
:current-page="currentPage1"
:page-size="pageSize1"
:page-sizes="[5,10,20]"
@size-change="handleSizeChangeCustom"
@current-change="handleCurrentChangeCustom"
:current-page="currentPageCustom"
:page-size="pageSizeCustom"
:page-sizes="[5,15,20]"
layout="total, sizes, prev, pager, next, jumper"
:total="totalNum1">
:total="totalNumCustom">
</el-pagination>
</div>
</template>
<el-empty v-else :image-size="200"></el-empty>
</el-tab-pane>
<el-tab-pane label="公共镜像(云脑2)" name="third">
<div class="ui sixteen wide column">
<div class="ui two column stackable grid">
<div class="column">
<el-input placeholder="请输入镜像名称关健词" v-model="search" class="input-with-select">
<el-button slot="append" id="success" icon="el-icon-search">搜索</el-button>
</el-input>
<el-tab-pane label="我收藏的镜像" name="third">
<template v-if="tableDataStar.length!==0">
<div class="ui sixteen wide column">
<div class="ui two column stackable grid">
<div class="column">
<el-input placeholder="请输入镜像名称关健词" v-model="search" class="input-with-select">
<el-button slot="append" id="success" icon="el-icon-search">搜索</el-button>
</el-input>
</div>
</div>

<!-- <div class="column right aligned">
<el-dropdown>
<span class="el-dropdown-link">
排序<i class="el-icon-caret-bottom"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>最早创建</el-dropdown-item>
<el-dropdown-item>最新创建</el-dropdown-item>
<el-dropdown-item divided>按镜像字母顺序排序</el-dropdown-item>
<el-dropdown-item>按镜像字母逆序排序</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div> -->
</div>
</div>

<el-empty :image-size="200"></el-empty>
</el-tab-pane>
<el-tab-pane label="自定义镜像(云脑2)" name="fourth">
<div class="ui sixteen wide column">
<div class="ui two column stackable grid">
<div class="column">
<el-input placeholder="请输入镜像名称关健词" v-model="search" class="input-with-select">
<el-button slot="append" id="success" icon="el-icon-search">搜索</el-button>
</el-input>
</div>

<!-- <div class="column right aligned">
<el-dropdown>
<span class="el-dropdown-link">
排序<i class="el-icon-caret-bottom"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>最早创建</el-dropdown-item>
<el-dropdown-item>最新创建</el-dropdown-item>
<el-dropdown-item divided>按镜像字母顺序排序</el-dropdown-item>
<el-dropdown-item>按镜像字母逆序排序</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div> -->
<el-row style="margin-top:15px;">
<el-table
:data="tableDataStar"
style="width: 100%"
:header-cell-style="tableHeaderStyle"
:default-sort="{prop:'createtime',order:'descending'}">
<el-table-column
label="镜像名称"
width="350"
align="left"
prop="name"
sortable
>
<template slot-scope="scope">
<a class="text-over" :title="scope.row.name" style="cursor:default;color:#426290">{{ scope.row.name }}</a>
</template>
</el-table-column>
<el-table-column
label="文件路径/镜像描述"
width="450"
align="left"
>
<template slot-scope="scope">
<el-tooltip class="item" effect="dark" content="点击复制文件路径" placement="top">
<a class="text-over" style="display:block;" @click="copyUrl(scope.row.place)">{{ scope.row.place }}</a>
</el-tooltip>
<span class="text-over" :title="scope.row.description | clearP">{{ scope.row.description | clearP }}</span>
</template>
</el-table-column>
<el-table-column
prop="provider"
label="提供者"
width="120"
align="left"
sortable>
</el-table-column>
<el-table-column
prop="createtime"
label="创建时间"
align="center"
sortable>
<template slot-scope="scope">
{{scope.row.createtime | transformTimestamp}}
</template>
</el-table-column>
</el-table>
</el-row>
<div class="ui container" style="margin-top:50px;text-align:center">
<el-pagination
background
@size-change="handleSizeChangeStar"
@current-change="handleCurrentChangeStar"
:current-page="currentPageStar"
:page-size="pageSizeStar"
:page-sizes="[5,15,20]"
layout="total, sizes, prev, pager, next, jumper"
:total="totalNumStar">
</el-pagination>
</div>
</div>

<el-empty :image-size="200"></el-empty>

</template>
<el-empty v-else :image-size="200"></el-empty>
</el-tab-pane>
</el-tabs>
</div>
@@ -271,28 +300,38 @@ export default {
return {
activeName: 'first',
search:'',
currentPage:1,
pageSize:10,
totalNum:0,
params:{page:1,size:10,name:''},
tableData: [],
loading:false,

currentPage1:1,
pageSize1:10,
totalNum1:0,
params1:{page:1,size:10,name:''},
tableData1: [],
loading1:false
currentPagePublic:1,
pageSizePublic:15,
totalNumPublic:0,
paramsPublic:{page:1,pageSize:15,q:'',recommend:false},
tableDataPublic: [],
loadingPublic:false,

currentPageCustom:1,
pageSizeCustom:15,
totalNumCustom:0,
paramsCustom:{page:1,pageSize:15,q:''},
tableDataCustom: [],
loadingCustom:false,

currentPageStar:1,
pageSizeStar:15,
totalNumStar:0,
paramsStar:{page:1,pageSize:15,q:''},
tableDataStar: [],
loadingStar:false
};
},
methods: {
handleClick(tab, event) {
if(tab.name=="first"){
this.getImageList()
this.getImageListPublic()
}
if(tab.name=="second"){
this.getImageList1()
this.getImageListCustom()
}
if(tab.name=="third"){
this.getImageListStar()
}
},
@@ -303,51 +342,84 @@ export default {
}
},
handleSizeChange(val){
this.params.size = val
this.getImageList()
handleSizeChangePublic(val){
this.paramsPublic.pageSize = val
this.getImageListPublic()


},
handleCurrentChangePublic(val){
this.paramsPublic.page = val
this.getImageListPublic()

},
handleSizeChangeCustom(val){
this.paramsCustom.pageSize = val
this.getImageListCustom()


},
handleCurrentChange(val){
this.params.page = val
this.getImageList()
handleCurrentChangeCustom(val){
this.paramsCustom.page = val
this.getImageListCustom()

},
handleSizeChange1(val){
this.params1.size = val
this.getImageList1()
handleSizeChangeStar(val){
this.paramsStar.pageSize = val
this.getImageListStar()


},
handleCurrentChange1(val){
this.params1.page = val
this.getImageList1()
handleCurrentChangeStar(val){
this.paramsStar.page = val
this.getImageListStar()

},
getImageList(){
this.loading = true
this.$axios.get('/images/public',{
params:this.params
getImageListPublic(){
this.loadingPublic = true
this.$axios.get('/explore/images/public',{
params:this.paramsPublic
}).then((res)=>{
console.log("res",res.data)
this.totalNumPublic = res.data.count
this.tableDataPublic = res.data.images
this.loadingPublic = false
})
},

getImageListCustom(){
this.loadingCustom = true
this.$axios.get('/explore/images/custom',{
params:this.paramsCustom
}).then((res)=>{
console.log("res",res)
this.totalNum = res.data.count
this.tableData = res.data.rows
this.loading = false
this.totalNumCustom = res.data.count
this.tableDataCustom = res.data.images
this.loadingCustom = false
})
},

getImageList1(){
this.loading1 = true
this.$axios.get('/images/custom',{
params:this.params1
getImageListStar(){
this.loadingStar = true
this.$axios.get('/explore/images/star',{
params:this.paramsStar
}).then((res)=>{
console.log("res",res)
this.totalNum1 = res.data.count
this.tableData1 = res.data.rows
this.loading1 = false
this.totalNumStar = res.data.count
this.tableDataStar = res.data.images
this.loadingStar = false
})
},

deleteImage(id){
this.$axios.delete('/image/'+id).then((res)=>{
console.log(res)
this.getImageListCustom()
})
},
eidtImage(id){
location.href = `/image/${id}/imageSquare`
},
copyUrl(url){
const cInput = document.createElement('input')
cInput.value = url
@@ -355,38 +427,49 @@ export default {
cInput.select()
document.execCommand('Copy')
cInput.remove()

},
searchName(){
if(this.activeName=='first'){
this.params.name = this.search
this.params.page = 1
this.getImageList()
this.paramsPublic.q = this.search
this.paramsPublic.page = 1
this.getImageListPublic()
}
if(this.activeName=='second'){
this.params1.name = this.search
this.params1.page = 1
this.getImageList1()
this.paramsCustom.q = this.search
this.paramsCustom.page = 1
this.getImageListCustom()
}
if(this.activeName=='third'){
this.paramsStar.q = this.search
this.paramsStar.page = 1
this.getImageListStar()
}
}

},
filters:{



clearP(value){
if(!value) return ''
const reg = /\<\/?p\>/g;
value = value.replace(reg,'')
return value

},
transformType(val){
if(val==0){
return "GPU"
}
},
transformPravite(val){
if(val){
return "私有"
}else{
return "公开"
}
},
transformTimestamp(timestamp){
let a = new Date(timestamp).getTime();
const date = new Date(a);
// let a = new Date(timestamp).getTime();
const date = new Date(parseInt(timestamp) * 1000);
const Y = date.getFullYear() + '-';
const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
const D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
@@ -397,24 +480,26 @@ export default {
// console.log('dateString', dateString); // > dateString 2021-07-06 14:23
return dateString;
},
},
watch:{
search(val){
if(!val && this.activeName=='first'){
this.params.name = val
this.getImageList()
this.paramsPublic.q = val
this.getImageListPublic()
}
if(!val && this.activeName=='second'){
this.params1.name = val
this.getImageList1()
this.paramsCustom.q = val
this.getImageListCustom()
}
if(!val && this.activeName=='third'){
this.paramsStar.q = val
this.getImageListStar()
}
}

},
mounted() {
this.getImageList()
this.getImageListPublic()
},
created() {
@@ -500,4 +585,22 @@ export default {
vertical-align: middle;
white-space: nowrap;
}
.image_title{
display: inline-block;
width: 80%;
cursor: default;
color: rgb(66, 98, 144);
}
.image_desc{
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
text-overflow: ellipsis;
overflow: hidden;
}
.heart-stroke{
stroke: #666;
stroke-width: 2;
fill: #fff
}
</style>

Write Preview
Loading…
Cancel
Save