Merge branch 'master' of https://gitlink.org.cn/JointCloud/JCC-RIP
Former-commit-id: a3079017b4
This commit is contained in:
commit
5fd24f17c6
|
|
@ -564,6 +564,10 @@
|
|||
"allOperation": "All Operation",
|
||||
"selectInstance": "Select Instance",
|
||||
"selectSubInstance": "Select SubInstance",
|
||||
"instanceDes": "Instance Description"
|
||||
"instanceDes": "Instance Description",
|
||||
"application": "Application",
|
||||
"deployment": "Deployment",
|
||||
"instanceCenter": "Instance Center",
|
||||
"instanceType": "Instance Type"
|
||||
}
|
||||
}
|
||||
|
|
@ -564,6 +564,10 @@
|
|||
"allOperation": "全部操作",
|
||||
"selectInstance": "选择主实例",
|
||||
"selectSubInstance": "选择子实例",
|
||||
"instanceDes": "实例描述"
|
||||
"instanceDes": "实例描述",
|
||||
"application": "应用",
|
||||
"deployment": "部署",
|
||||
"instanceCenter": "实例中心",
|
||||
"instanceType": "实例类型"
|
||||
}
|
||||
}
|
||||
|
|
@ -34,6 +34,10 @@ export const getTrainingTaskStat = () => {
|
|||
return request({ url: '/pcm/v1/ai/trainingTaskStat', method: 'get' })
|
||||
}
|
||||
|
||||
export const getInstanceList = (params) => {
|
||||
return request({ url: '/pcm/v1/inference/instanceCenter', method: 'get', params })
|
||||
}
|
||||
|
||||
export const getAppPodsByAppName = (name, params) => {
|
||||
return request({ url: '/pcm/v1/apps/pods/' + name, method: 'get', params })
|
||||
}
|
||||
|
|
|
|||
|
|
@ -308,11 +308,15 @@ export default {
|
|||
this.$emit('total-fetched', this.total)
|
||||
this.tableData = this.listKey ? ListData?.data?.[this.listKey] || ListData[this.listKey] || [] : ListData?.data || ListData || []
|
||||
} else {
|
||||
const clusterName = this.clusterName
|
||||
const ListData = await this.$HandleFunc[this.funcName](clusterName, params)
|
||||
this.total = ListData.total || 0
|
||||
this.$emit('total-fetched', this.total)
|
||||
this.tableData = ListData.rows
|
||||
if (this.funcName) {
|
||||
const clusterName = this.clusterName
|
||||
const ListData = await this.$HandleFunc[this.funcName](clusterName, params)
|
||||
this.total = ListData.total || 0
|
||||
this.$emit('total-fetched', this.total)
|
||||
this.tableData = ListData.rows
|
||||
} else {
|
||||
this.$emit('get-list', params)
|
||||
}
|
||||
}
|
||||
},
|
||||
setCurrentRow(row) {
|
||||
|
|
|
|||
|
|
@ -22,6 +22,13 @@ const taskManagementRouter = {
|
|||
meta: { activeMenu: '/taskManagement/taskList' },
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: 'instanceCenter',
|
||||
component: () => import('@/views/taskManagement/aiList/instanceCenter'),
|
||||
name: 'instanceCenter',
|
||||
meta: { activeMenu: '/taskManagement/taskList' },
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: 'detail',
|
||||
component: () => import('@/views/taskManagement/taskList/detail'),
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ export function formatTime(time, option) {
|
|||
const diff = (now - d) / 1000
|
||||
|
||||
if (diff < 30) {
|
||||
return '刚刚'
|
||||
return '小于1分钟'
|
||||
} else if (diff < 3600) {
|
||||
// less 1 hour
|
||||
return Math.ceil(diff / 60) + '分钟前'
|
||||
|
|
@ -119,7 +119,7 @@ export function formatTime(time, option) {
|
|||
*/
|
||||
export function runtimeFormat(diff) {
|
||||
if (diff < 30) {
|
||||
return '刚刚'
|
||||
return '小于1分钟'
|
||||
} else if (diff < 3600) {
|
||||
// less 1 hour
|
||||
return Math.round(diff / 60) + '分钟'
|
||||
|
|
|
|||
|
|
@ -0,0 +1,229 @@
|
|||
<template>
|
||||
<el-card v-loading="loading" class="list-detail">
|
||||
<el-page-header :content="$t('message.create')" @back="goBack" />
|
||||
<h2>{{ $t('message.create') + $t('page.application') }}</h2>
|
||||
<div class="formcontainer">
|
||||
<div class="taskForm">
|
||||
<el-form
|
||||
ref="formData"
|
||||
class="form-wrap"
|
||||
label-position="left"
|
||||
:model="formData"
|
||||
:rules="formDataRules"
|
||||
>
|
||||
<el-form-item :label="$t('page.instanceName')" prop="taskName">
|
||||
<el-input
|
||||
v-model="formData.taskName"
|
||||
:placeholder="$t('page.inputWarn')"
|
||||
:max-length="30"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('page.instanceDes')" prop="taskDesc">
|
||||
<el-input
|
||||
v-model="formData.taskDesc"
|
||||
:max-length="100"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('page.modelType')" prop="modelType">
|
||||
<el-select v-model="formData.modelType" style="width: 280px;margin-right: 10px;">
|
||||
<el-option v-for="item in modelTypeList" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('page.modelName')" prop="modelName">
|
||||
<el-select v-model="formData.modelName" style="width: 280px;margin-right: 10px;">
|
||||
<el-option v-for="item in modelNameList" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div>
|
||||
<el-form-item :label="$t('page.selectCluster')" prop="aiClusterIds">
|
||||
<!-- <el-select v-model="formData.aiClusterIds" style="width: 280px;margin-right: 10px;">
|
||||
<el-option v-for="item in formData.staticWeightMap" :key="item.id" :label="item.key" :value="item.id" />
|
||||
</el-select> -->
|
||||
<table class="tableInput">
|
||||
<tr v-for="env in clusterList" :key="env.adapterId">
|
||||
<td>
|
||||
<el-checkbox v-model="env.selected" size="small" />
|
||||
{{ env.adapterName }}</td>
|
||||
<td>
|
||||
<el-select v-model="env.selectedclusters" style="width: 280px;margin-right: 10px;" multiple>
|
||||
<el-option v-for="item in env.clusters" :key="item.clusterId" :label="item.clusterName" :value="item.clusterId" />
|
||||
</el-select>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
</el-form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<el-row type="flex" justify="end">
|
||||
<el-col :span="2.5">
|
||||
<el-button size="medium" @click="goBack">{{ $t("message.cancel") }}</el-button>
|
||||
<el-button size="medium" type="primary" :disabled="submitLoading" @click="saveForm">{{ $t("message.create") }}</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import List from '@/components/list'
|
||||
import { getClusterList } from '@/api/container/cluster'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { getModelType, getModelName, createDeployTask, getClustersByModel } from '@/api/task/task'
|
||||
|
||||
// import jobForm from './components/jobForm.vue'
|
||||
export default {
|
||||
// components: { List },
|
||||
data() {
|
||||
return {
|
||||
getClusterList,
|
||||
tableListData: [],
|
||||
isEdit: false,
|
||||
loading: false,
|
||||
submitLoading: false,
|
||||
selectCluster: false,
|
||||
strategySetting: false,
|
||||
formData: {
|
||||
taskName: '',
|
||||
taskDesc: '',
|
||||
modelName: '',
|
||||
modelType: '',
|
||||
adapterClusterMap: []
|
||||
},
|
||||
clusterList: {
|
||||
},
|
||||
modelTypeList: [],
|
||||
modelNameList: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'dict'
|
||||
]),
|
||||
columns() {
|
||||
return this.setColumn()
|
||||
},
|
||||
formDataRules() {
|
||||
return {
|
||||
taskName: [
|
||||
{ required: true, message: this.$t('check.input') + this.$t('message.name') }
|
||||
// {
|
||||
// pattern: /^[a-z]([-a-z0-9]*[a-z0-9])?$/,
|
||||
// message: this.$t('check.inputInvalid')
|
||||
// }
|
||||
// { validator: this.nameValidator }
|
||||
],
|
||||
taskDesc: [
|
||||
{ required: true, message: this.$t('check.input') + this.$t('page.taskDes') }
|
||||
],
|
||||
modelType: [{ required: true, message: this.$t('check.requireSelect'), trigger: 'change' }],
|
||||
modelName: [{ required: true, message: this.$t('check.requireSelect'), trigger: 'change' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'formData.modelType'(val) {
|
||||
if (val) {
|
||||
this.formData.modelName = ''
|
||||
getModelName(val).then(e => {
|
||||
this.modelNameList = e.data.models
|
||||
})
|
||||
}
|
||||
},
|
||||
'formData.modelName'(val) {
|
||||
if (val && this.formData.modelType) {
|
||||
this.clusterList = {}
|
||||
getClustersByModel({ modelType: this.formData.modelType, modelName: val }).then(e => {
|
||||
this.clusterList = e.data.adapters
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
getModelType().then(e => {
|
||||
this.modelTypeList = e.data.types
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getCluster() {
|
||||
const query = { 'type': this.taskType === 'application' ? '0' : (this.taskType === 'aiBase' || this.taskType === 'aiCard') ? '1' : this.taskType === 'hpcBase' ? '2' : '0', 'adapterId': this.formData.adapterId, pageNum: 1, pageSize: 1000 }
|
||||
this.getClusterList(query).then(e => {
|
||||
this.currentClusterList = e.data.list || []
|
||||
})
|
||||
},
|
||||
goBack() {
|
||||
this.$router.push({ path: '/taskManagement/aiList' })
|
||||
},
|
||||
saveForm() {
|
||||
this.$refs.formData.validate((valid) => {
|
||||
if (valid) {
|
||||
this.submitLoading = true
|
||||
this.formData.adapterClusterMap = {}
|
||||
this.clusterList.forEach(e => {
|
||||
if (e.selected) {
|
||||
this.formData.adapterClusterMap[e.adapterId] = e.selectedclusters
|
||||
}
|
||||
})
|
||||
const form = new FormData()
|
||||
form.set('taskName', this.formData.taskName)
|
||||
form.set('taskDesc', this.formData.taskDesc)
|
||||
form.set('modelName', this.formData.modelName)
|
||||
form.set('modelType', this.formData.modelType)
|
||||
form.set('adapterClusterMap', JSON.stringify(this.formData.adapterClusterMap))
|
||||
|
||||
createDeployTask(form).then(e => {
|
||||
this.$message.success(this.$t('page.createdSuccess'))
|
||||
this.$router.push({ path: '/taskManagement/aiList' })
|
||||
}).catch(e => {
|
||||
this.submitLoading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.formcontainer{
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.taskForm{
|
||||
border: 1px solid #2B3948;
|
||||
padding: 20px;
|
||||
}
|
||||
.tableInput{
|
||||
width: 50%;
|
||||
border: 1px solid gray;
|
||||
border-collapse: collapse;
|
||||
.el-form-item{
|
||||
margin: 0!important;
|
||||
}
|
||||
td, th{
|
||||
padding: 1em;
|
||||
border-left: 1px solid gray;
|
||||
|
||||
}
|
||||
td:first-child, th:first-child{
|
||||
border-left: 0;
|
||||
}
|
||||
tr{
|
||||
border-top: 1px solid gray;
|
||||
}
|
||||
tr:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
.sliderSet{
|
||||
.el-slider__marks-text:last-child{
|
||||
width: 100px!important;
|
||||
}
|
||||
.el-slider__marks-text:first-child{
|
||||
text-align: right;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,236 @@
|
|||
<template>
|
||||
<div class="instanceList">
|
||||
<el-card>
|
||||
<h2>{{ $t('page.instanceCenter') }}</h2>
|
||||
<div class="list-btns">
|
||||
<el-form :inline="true" class="demo-form-inline">
|
||||
<el-form-item :label="$t('page.instanceType')">
|
||||
<el-select
|
||||
v-model="filterData.instance_type"
|
||||
size="medium"
|
||||
>
|
||||
<el-option label="全部" :value="0" />
|
||||
<el-option label="应用实例" :value="1" />
|
||||
<el-option label="模型实例" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('page.instanceName')"
|
||||
>
|
||||
<el-input
|
||||
v-model="filterData.instance_name"
|
||||
size="medium"
|
||||
@enter="onSearchClick"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
size="medium"
|
||||
type="info"
|
||||
@click="onSearchClick"
|
||||
>
|
||||
{{ $t('message.search') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
size="medium"
|
||||
@click="resetSearch"
|
||||
>
|
||||
{{ $t('message.reset') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-row :gutter="20">
|
||||
<el-col v-for="(item,index) in instanceList" :key="index" :span="6">
|
||||
<el-card class="instanceCard">
|
||||
<img :src="item.logo_path" alt="">
|
||||
<p class="title">{{ item.instance_name }}</p>
|
||||
<el-tag>{{ item.instance_type === 1 ? '应用实例' : '模型实例' }}</el-tag>
|
||||
<el-tag>{{ item.instance_class_chinese }}</el-tag>
|
||||
<br>
|
||||
<p>描述： </p>
|
||||
<div class="desc">{{ item.description }}</div>
|
||||
<p class="version">版本： {{ item.version }}</p>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="goDetail(item)"
|
||||
>立即部署</el-button>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-pagination
|
||||
background
|
||||
:hide-on-single-page="true"
|
||||
:current-page="page"
|
||||
:page-size="10"
|
||||
layout="prev, pager, next"
|
||||
:total="total"
|
||||
@current-change="currentChange"
|
||||
/>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getInstanceList } from '@/api/task/task'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
filterData: {
|
||||
instance_type: 0,
|
||||
instance_name: ''
|
||||
},
|
||||
instanceList: [
|
||||
],
|
||||
fileList: [],
|
||||
page: 1,
|
||||
size: 12,
|
||||
total: 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
currentChange(e) {
|
||||
this.page = e
|
||||
this.getList()
|
||||
},
|
||||
getList() {
|
||||
getInstanceList(this.filterData).then(e => {
|
||||
this.instanceList = e.instanceCenterList
|
||||
this.total = e.totalCount
|
||||
})
|
||||
},
|
||||
onSearchClick() {
|
||||
this.getList()
|
||||
},
|
||||
resetSearch() {
|
||||
this.filterData = {
|
||||
instance_type: 0,
|
||||
instance_name: ''
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
handleClick() {
|
||||
if (this.activeName === '1') {
|
||||
this.form = { env: 'python' }
|
||||
}
|
||||
},
|
||||
goDetail(val) {
|
||||
// this.form = val;
|
||||
// this.activeName = '2';
|
||||
this.form = val
|
||||
this.result = ''
|
||||
this.dialogExecuteVisible = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.instanceList{
|
||||
// margin: 30px 20px;
|
||||
// .opr-btn{
|
||||
// font-size: 16px;
|
||||
// padding: 10px 36px;
|
||||
// margin-bottom: 30px;
|
||||
// }
|
||||
.el-button--primary{
|
||||
background-color: #468EFC;
|
||||
}
|
||||
}
|
||||
.instanceCard{
|
||||
img{
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
display: block;
|
||||
float: left;
|
||||
background: #ddd;
|
||||
margin: 0 2rem;
|
||||
margin-right: 0rem;
|
||||
}
|
||||
margin: 30px auto;
|
||||
margin-top: 0;
|
||||
.el-tag{
|
||||
margin-left:1rem;
|
||||
float: left;
|
||||
}
|
||||
.desc{
|
||||
margin: 0.05rem 2rem;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #b1b0b0;
|
||||
text-indent: 1rem;
|
||||
text-align: left;
|
||||
height: 12vh;
|
||||
/* white-space: nowrap; */
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-card__body{
|
||||
padding:0;
|
||||
padding-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
p{
|
||||
margin: 10px 30px;
|
||||
clear: both;
|
||||
// margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
text-indent: 1em;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
p:before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
background: #2FB4AA;
|
||||
border-radius: 50%;
|
||||
top: 1.25rem;
|
||||
left: 0em;
|
||||
}
|
||||
.title{
|
||||
margin:20px 0;
|
||||
// margin-bottom: 10px;
|
||||
font-size: 18px;
|
||||
text-indent: 1rem;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
clear: none;
|
||||
padding-top: 0;
|
||||
}
|
||||
.title:before{
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.version{
|
||||
height: 3vh;
|
||||
padding-top: 0rem
|
||||
}
|
||||
.version:before{
|
||||
top: 0.25rem;
|
||||
|
||||
}
|
||||
.el-button--text{
|
||||
line-height: 1.1rem;
|
||||
}
|
||||
.el-button{
|
||||
margin:10px;
|
||||
border:1px solid #468EFC ;
|
||||
border-radius: 0;
|
||||
}
|
||||
.el-button--default{
|
||||
color: #468EFC;
|
||||
}
|
||||
.insideFloatRight {
|
||||
margin: 0;
|
||||
padding:0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -77,11 +77,19 @@
|
|||
page-key="pageNum"
|
||||
limit-key="pageSize"
|
||||
tooltip-effect="dark"
|
||||
@get-list="getDeployInstanceList"
|
||||
>
|
||||
<template v-slot:filterBtns>
|
||||
<el-button size="medium" type="primary" @click="createItem">{{ $t('message.create') + $t('message.instance') }}</el-button>
|
||||
<el-button size="medium" type="primary" @click="createItem">{{ $t('page.application') + $t('message.instance') + $t('page.deployment') }}</el-button>
|
||||
</template>
|
||||
</List>
|
||||
<el-pagination
|
||||
background
|
||||
:hide-on-single-page="true"
|
||||
:current-page="pageNum"
|
||||
:total="total"
|
||||
@current-change="currentChange"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="智算应用任务" name="second" />
|
||||
</el-tabs>
|
||||
|
|
@ -113,7 +121,13 @@ export default {
|
|||
total: 0
|
||||
},
|
||||
freshList: null,
|
||||
tableData: []
|
||||
tableData: [],
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
filterData: {
|
||||
pageNum: 1, pageSize: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -163,17 +177,29 @@ export default {
|
|||
clearInterval(this.freshList)
|
||||
},
|
||||
methods: {
|
||||
getDeployInstanceList() {
|
||||
getAiTaskList({ pageNum: 1, pageSize: 10 }).then(e => {
|
||||
getDeployInstanceList(params) {
|
||||
if (params) {
|
||||
this.filterData = params
|
||||
this.pageNum = params.pageNum
|
||||
}
|
||||
getAiTaskList(this.filterData).then(e => {
|
||||
this.tableData = []
|
||||
e.data.list.forEach(i => {
|
||||
i.instances ? i.instances.forEach(p => {
|
||||
this.tableData.push({ ...p, name: i.name, desc: i.desc, mainId: i.id })
|
||||
}) : ''
|
||||
})
|
||||
this.total = e.data.total
|
||||
// console.log(this.tableData)
|
||||
})
|
||||
},
|
||||
currentChange(page) {
|
||||
this.pageNum = page
|
||||
this.filterData.pageNum = page
|
||||
// if (!this.paginationAuto) {
|
||||
this.getDeployInstanceList()
|
||||
// }
|
||||
},
|
||||
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
||||
if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 11) {
|
||||
if (
|
||||
|
|
@ -267,7 +293,7 @@ export default {
|
|||
this.$router.push({ path: `detail`, query: { id: row.id }})
|
||||
},
|
||||
createItem() {
|
||||
this.$router.push({ path: `createInstance` })
|
||||
this.$router.push({ path: `instanceCenter` })
|
||||
},
|
||||
handleClick() {
|
||||
console.log('switch')
|
||||
|
|
|
|||
Loading…
Reference in New Issue