forked from JointCloud/JCC-RIP
fix
This commit is contained in:
ann
parent
9250ea601e
commit
4d5680c783
|
|
@ -28,24 +28,15 @@
|
|||
<i class="el-icon-caret-bottom" />
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<router-link v-if="menus.includes('monitorOverview')" to="/monitorSelect">
|
||||
<el-dropdown-item>云际计算基础平台</el-dropdown-item>
|
||||
</router-link>
|
||||
<el-dropdown-item v-if="this.$route.path !== '/cluster'" @click.native="toMoniter">
|
||||
<!-- <el-dropdown-item v-if="this.$route.path !== '/cluster'" @click.native="toMoniter">
|
||||
资源监控
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item v-if="menus.includes('permissionManagement')" @click.native="toAdmin">
|
||||
</el-dropdown-item> -->
|
||||
<!-- <el-dropdown-item v-if="menus.includes('permissionManagement')" @click.native="toAdmin">
|
||||
权限管理
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item v-if="menus.includes('monitorManagement')" @click.native="toMonitorManagement">
|
||||
</el-dropdown-item> -->
|
||||
<el-dropdown-item @click.native="toMonitorManagement">
|
||||
告警中心
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item v-if="menus.includes('setting')" @click.native="toSetting">
|
||||
设置中心
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item v-if="menus.includes('resourceManagement')" @click.native="toResourceManagement">
|
||||
公共资源管理
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item divided @click.native="logout">
|
||||
<span style="display:block;">退出登录</span>
|
||||
</el-dropdown-item>
|
||||
|
|
|
|||
|
|
@ -371,7 +371,8 @@ export default {
|
|||
20: '20'
|
||||
},
|
||||
ProtocolList,
|
||||
settingFlag: false
|
||||
settingFlag: false,
|
||||
requiredKey: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -477,12 +478,17 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.form-wrap .el-form-item__label-wrap .el-form-item__label{
|
||||
text-indent: -1rem!important;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.list-item.flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,436 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form
|
||||
ref="formData"
|
||||
class="form-wrap"
|
||||
label-width="auto"
|
||||
label-position="left"
|
||||
:model="formData"
|
||||
:rules="formDataRules"
|
||||
>
|
||||
<el-form-item label="Cron表达式" prop="appName">
|
||||
<el-input
|
||||
v-model="formData.appName"
|
||||
placeholder="字母开头，仅能包含小写字母、数字和 -"
|
||||
:max-length="30"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="镜像源" prop="password">
|
||||
<div class="list">
|
||||
<el-radio-group v-model="formData.secret.use" @change="change_use">
|
||||
<el-radio-button :label="false">公有</el-radio-button>
|
||||
<el-radio-button :label="true">私有</el-radio-button>
|
||||
</el-radio-group>
|
||||
<div class="list-item">
|
||||
<p>镜像名</p>
|
||||
<el-input v-model="formData.imageName" placeholder="镜像名" />
|
||||
</div>
|
||||
<template v-if="formData.secret.use">
|
||||
<div class="list-item">
|
||||
<p>用户名</p>
|
||||
<el-input v-model="formData.secret.username" placeholder="镜像仓库的用户名" />
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<p>密码</p>
|
||||
<el-input v-model="formData.secret.password" placeholder="镜像仓库的密码" />
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<p>镜像仓库地址</p>
|
||||
<el-input v-model="formData.secret.serverAddress" placeholder="镜像仓库地址" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="部署模式" prop="password">
|
||||
<div class="list">
|
||||
<el-radio-group v-model="formData.hpa.use" @change="change_use">
|
||||
<el-radio-button :label="false">
|
||||
固定实例
|
||||
</el-radio-button>
|
||||
<el-radio-button :label="true">
|
||||
弹性伸缩
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
<template v-if="formData.hpa.use">
|
||||
<div class="list-item flex">
|
||||
<el-select v-model="formData.hpa.target" style="width: 80px">
|
||||
<el-option value="cpu" label="CPU" />
|
||||
<el-option value="memory" label="内存" /></el-select>
|
||||
<el-input-number v-model="formData.hpa.value" :min="1" :max="100" />
|
||||
<span>%</span>
|
||||
<span class="tips">CPU 目标值为任一容器的 CPU 利用率</span>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<p>实例数(范围)</p>
|
||||
<el-input-number v-model="formData.hpa.minReplicas" :min="1" :max="19" />
|
||||
<span>--</span>
|
||||
<el-input-number
|
||||
v-model="formData.hpa.maxReplicas"
|
||||
:min="formData.hpa.minReplicas + 1"
|
||||
:max="20"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="list-item">
|
||||
<p>实例数</p>
|
||||
<el-input-number v-model="formData.replicas" :min="1" :max="20" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<!-- {/* cpu && memory */} -->
|
||||
<el-form-item label="CPU (core)" has-feedback prop="cpu">
|
||||
<el-select v-model="formData.cpu" style="width: 100%">
|
||||
<el-option v-for="item in SliderList.cpu" :key="item.value" :value="item.value" :label="item.label" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="内存" has-feedback prop="memory">
|
||||
<el-select v-model="formData.memory" style="width: 100%">
|
||||
<el-option v-for="item in SliderList.memory" :key="item.value" :value="item.value" :label="item.label" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- {/* network */} -->
|
||||
<el-form-item label="网络配置">
|
||||
<el-button
|
||||
v-if="formData.networks.length === 0"
|
||||
type="primary"
|
||||
icon="el-icon-circle-plus"
|
||||
@click="appendNetworks"
|
||||
/>
|
||||
<template v-else>
|
||||
<div class="networkArea">
|
||||
<div v-for="(network, index) in formData.networks" :key="network.id" class="network-wrap">
|
||||
<div class="list-item">
|
||||
<p>容器暴露端口</p>
|
||||
<el-input-number v-model="network.port" :min="1" :max="65535" />
|
||||
</div>
|
||||
<div class="list-item" style="width: 80px;">
|
||||
<p>外网访问</p>
|
||||
<el-switch
|
||||
v-model="network.openPublicDomain"
|
||||
@change="change_openPublicDomain(network)"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="network.openPublicDomain" class="list-item">
|
||||
<p />
|
||||
<el-input-group compact style="display: flex;">
|
||||
<el-select v-model="network.protocol" :options="ProtocolList" />
|
||||
<el-input v-model="network.oldPublicDomain" style="width: 260px;" />
|
||||
</el-input-group>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<p />
|
||||
|
||||
<el-button
|
||||
v-if="index === 0 && formData.networks.length < 5"
|
||||
type="primary"
|
||||
icon="el-icon-circle-plus"
|
||||
@click="appendNetworks"
|
||||
/>
|
||||
<el-button
|
||||
v-if="index > 0"
|
||||
icon="el-icon-delete-solid"
|
||||
type="primary"
|
||||
@click="removeNetworks(index)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-form-item>
|
||||
|
||||
<!-- {/* settings */} -->
|
||||
<el-form-item label="高级设置(选填)">
|
||||
<el-switch v-model="settingFlag" />
|
||||
</el-form-item>
|
||||
<el-divider />
|
||||
|
||||
<template v-if="settingFlag">
|
||||
<el-form-item label="启动命令">
|
||||
<span class="tips">不填则为默认命令</span>
|
||||
</el-form-item>
|
||||
<!-- {/* command && param */} -->
|
||||
<el-form-item label="运行命令">
|
||||
<el-input v-model="formData.runCMD" placeholder="例如: /bin/bash -c" />
|
||||
</el-form-item>
|
||||
<el-form-item label="命令参数">
|
||||
<el-input
|
||||
v-model="formData.cmdParam"
|
||||
placeholder="例如: sleep 10 && /entrypoint.sh db createdb"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-divider />
|
||||
<el-form-item label="环境变量">
|
||||
<el-button
|
||||
v-if="formData.envs.length === 0"
|
||||
type="primary"
|
||||
icon="el-icon-circle-plus"
|
||||
@click="appendEnvs"
|
||||
/>
|
||||
<template v-else>
|
||||
<div v-for="(env, index) in formData.envs" :key="env.id" class="network-wrap">
|
||||
<div class="list-item">
|
||||
<el-input v-model="env.key" placeholder="key" />
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<!-- <el-select v-model="env.center" style="width: 60px">
|
||||
<el-option value="=">=</el-option>
|
||||
<el-option value=":">:</el-option>
|
||||
</el-select> -->
|
||||
<span>=</span>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<el-input v-model="env.value" placeholder="value" />
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<el-button
|
||||
v-if="index === 0"
|
||||
icon="el-icon-circle-plus"
|
||||
style="margin-right:8px"
|
||||
@click="appendEnvs"
|
||||
/>
|
||||
<el-button v-else icon="el-icon-delete-solid" @click="removeEnvs(index)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-form-item>
|
||||
<el-divider />
|
||||
<el-form-item label="配置文件">
|
||||
<el-button
|
||||
v-if="formData.configMapList.length === 0"
|
||||
type="primary"
|
||||
icon="el-icon-circle-plus"
|
||||
@click="appendConfigMapList"
|
||||
/>
|
||||
<template v-else>
|
||||
<div
|
||||
v-for="(config, index) in formData.configMapList"
|
||||
:key="config.id"
|
||||
class="network-wrap configMapList-wrap"
|
||||
>
|
||||
<div class="list-item">
|
||||
<p>文件名</p>
|
||||
<el-input
|
||||
v-model="config.mountPath"
|
||||
placeholder="例如：/etc/kubernetes/admin.conf"
|
||||
/>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<p>文件值</p>
|
||||
<el-input v-model="config.value" type="textarea" :rows="2" placeholder="value" />
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<p />
|
||||
<el-button
|
||||
v-if="index === 0"
|
||||
icon="el-icon-circle-plus"
|
||||
style="margin-right:8px"
|
||||
@click="appendConfigMapList"
|
||||
/>
|
||||
<el-button icon="el-icon-delete-solid" @click="removeConfigMapList(index)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-form-item>
|
||||
<el-divider />
|
||||
<el-form-item label="本地存储">
|
||||
<el-button
|
||||
v-if="formData.storeList.length === 0"
|
||||
type="primary"
|
||||
icon="el-icon-circle-plus"
|
||||
@click="appendStoreList"
|
||||
/>
|
||||
<template v-else>
|
||||
<div v-for="(store, index) in formData.storeList" :key="store.id" class="network-wrap">
|
||||
<div class="list-item" :title="'容量范围：' + store.oldValue + '~20 Gi'">
|
||||
<p>容量 (Gi)</p>
|
||||
<el-input-number
|
||||
v-model="store.value"
|
||||
:min="store.oldValue"
|
||||
:max="20"
|
||||
placeholder="Gi"
|
||||
/>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<p>路径</p>
|
||||
<el-input
|
||||
v-model="store.path"
|
||||
placeholder="例如：/data"
|
||||
/>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<p />
|
||||
<el-button
|
||||
v-if="index === 0"
|
||||
type="primary"
|
||||
icon="el-icon-circle-plus"
|
||||
style="margin-right:8px"
|
||||
@click="appendStoreList"
|
||||
/>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-delete-solid"
|
||||
@click="removeStoreList(index)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
// defaultEditVal,
|
||||
formSliderListConfig,
|
||||
noGpuSliderKey,
|
||||
sliderNumber2MarkList,
|
||||
ProtocolList
|
||||
// downLoadBold,
|
||||
// adaptEditAppData,
|
||||
// adaptAppDetail
|
||||
} from './app_config.js'
|
||||
|
||||
// import { addNewApp, getAppDetail } from '@/api/task'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
jobType: 'launchpad',
|
||||
jobName: '',
|
||||
schedule: '* * * * *',
|
||||
imageName: '',
|
||||
runCMD: '',
|
||||
cmdParam: '',
|
||||
secret: {
|
||||
use: false,
|
||||
username: '',
|
||||
password: '',
|
||||
serverAddress: 'docker.io'
|
||||
},
|
||||
envs: [],
|
||||
url: '',
|
||||
enableNumberCopies: true,
|
||||
enableResources: true,
|
||||
replicas: 1,
|
||||
cpu: 0,
|
||||
memory: 0,
|
||||
launchpadName: '',
|
||||
launchpadId: '',
|
||||
serviceAccountName: '',
|
||||
status: 'Running',
|
||||
isPause: false,
|
||||
creatTime: '',
|
||||
_schedule: '',
|
||||
nextExecutionTime: ''
|
||||
},
|
||||
formDataRules: {
|
||||
appName: [
|
||||
{ required: true, message: '请输入名称' },
|
||||
{
|
||||
pattern: /^[a-z]([-a-z0-9]*[a-z0-9])?$/,
|
||||
message: '名称格式不合法。字母开头，仅能包含小写字母、数字和-。'
|
||||
},
|
||||
{ validator: this.nameValidator }
|
||||
],
|
||||
imageName: [{ required: true, message: '必选项', trigger: 'change' }]
|
||||
},
|
||||
// confirmLoading: false,
|
||||
minReplicasMarks: {
|
||||
0: '0',
|
||||
1: '1',
|
||||
2: '2',
|
||||
3: '3',
|
||||
4: '4',
|
||||
5: '5',
|
||||
6: '6',
|
||||
7: '7',
|
||||
8: '8',
|
||||
20: '20'
|
||||
},
|
||||
ProtocolList,
|
||||
settingFlag: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
SliderList() {
|
||||
const gpuType = this.formData.gpu.type
|
||||
const key = gpuType && formSliderListConfig[gpuType] ? gpuType : noGpuSliderKey
|
||||
|
||||
return {
|
||||
cpu: sliderNumber2MarkList({
|
||||
val: formSliderListConfig[key].cpu,
|
||||
type: 'cpu',
|
||||
gpuAmount: this.formData.gpu.amount
|
||||
}),
|
||||
memory: sliderNumber2MarkList({
|
||||
val: formSliderListConfig[key].memory,
|
||||
type: 'memory',
|
||||
gpuAmount: this.formData.gpu.amount
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkForm() {
|
||||
console.log('whwhwhw')
|
||||
this.$refs['formData'].validate((valid) => {
|
||||
if (valid) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list-item.flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.list-item {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
p{
|
||||
line-height: 0;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
margin: 0;
|
||||
margin-top: 10px;
|
||||
// padding-right: 10px;
|
||||
// word-break: keep-all;
|
||||
}
|
||||
}
|
||||
|
||||
.form-wrap {
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.networkArea{
|
||||
border: 1px solid #2B3948;
|
||||
padding: 0 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.network-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// margin: 0 10px;
|
||||
.list-item+.list-item {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.configMapList-wrap {
|
||||
align-items: flex-start;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -48,6 +48,7 @@
|
|||
</el-row>
|
||||
<div class="taskForm">
|
||||
<application-form v-if="formData.taskType === 'application'" ref="applicationForm" />
|
||||
<!-- <job-form ref="jobForm" /> -->
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
|
|
@ -64,6 +65,7 @@
|
|||
import { createImages, putImagesYaml } from '@/api/virtual-machine/virtualMachine'
|
||||
import { set } from 'lodash'
|
||||
import applicationForm from './components/applicationForm'
|
||||
// import jobForm from './components/jobForm.vue'
|
||||
export default {
|
||||
components: { applicationForm },
|
||||
data() {
|
||||
|
|
@ -131,7 +133,7 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
this.$router.push({ path: '/virtual/images' })
|
||||
this.$router.push({ path: '/taskManagement/taskList' })
|
||||
},
|
||||
addTag() {
|
||||
this.formData.labels.push({ key: '', value: '' })
|
||||
|
|
@ -184,7 +186,7 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
.formcontainer{
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue