Skip to content

A
apaas-ui
Commit 6352017d authored by 徐一鸣's avatar 徐一鸣
Browse files
Options

一键部署调试

parent 17d1ccd4
Hide whitespace changes
Inline Side-by-side
Showing with 236 additions and 308 deletions
src/pages/workbench/yygl/deployment.vue
View file @ 6352017d
......@@ -50,7 +50,11 @@
</el-form-item>
</el-form>
<div class="apass_button step_action">
<el-button type="primary" :disabled="is_loading" @click="sub_yy_form('step1_form',1)">
<el-button
type="primary"
:disabled="is_loading"
@click="sub_yy_form('step1_form', 1)"
>
下一步
</el-button>
</div>
......@@ -68,85 +72,91 @@
label-position="top"
:rules="app_set_rules"
>
<div v-for="(item,index) in step2_arr" :key="index+10000">
<el-form-item :label="item.text" v-if="item.type=='text'">
<el-input
v-model="item.value"
></el-input>
</el-form-item>
<div v-for="(item, index) in step2_arr" :key="index + 10000">
<el-form-item :label="item.text" v-if="item.type == 'text'">
<el-input v-model="item.value"></el-input>
</el-form-item>
<el-form-item :label="item.text" v-if="item.type=='radio'">
<div
:class="{ select_box: true, is_select: item.val == vision }"
v-for="vision in item.value"
:key="vision"
@click="change_appset(item,'val',vision)"
>
{{ vision}}
</div>
</el-form-item>
<el-form-item :label="item.text+'-内存：'" class="limitsd" v-if="item.type=='resource'">
<el-input
type="number"
class="limitinput"
v-model="item.memory"
placeholder="请输入内存"
></el-input>
<el-select
v-model="item.memory_type"
class="timeslect"
placeholder="请选择内存"
>
<el-option
v-for="item in memory_arr"
:key="item.value"
:label="item.label"
:value="item.value"
<el-form-item :label="item.text" v-if="item.type == 'radio'">
<div
:class="{ select_box: true, is_select: item.val == vision }"
v-for="vision in item.value"
:key="vision"
@click="change_appset(item, 'val', vision)"
>
</el-option>
</el-select>
</el-form-item>
{{ vision }}
</div>
</el-form-item>
<el-form-item :label="item.text+'-CPU：'" v-if="item.type=='resource'">
<el-input
type="number"
v-model="item.cpu"
placeholder="请输入标题"
<el-form-item
:label="item.text + '-内存：'"
class="limitsd"
v-if="item.type == 'resource'"
>
<template slot="append">M</template>
</el-input>
</el-form-item>
<el-input
type="number"
class="limitinput"
v-model="item.memory"
placeholder="请输入内存"
></el-input>
<el-select
v-model="item.memory_type"
class="timeslect"
placeholder="请选择内存"
>
<el-option
v-for="item in memory_arr"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item :label="item.text" v-if="item.type=='switch'">
<div
class="openbgc"
@click="openstart(item,'value')"
:style="
!item.value
? {
backgroundImage:
'url(' + require('@/assets/imgs/btn_off_hov.png') + ')',
}
: {}
"
></div>
</el-form-item>
<el-form-item :label="item.text" v-if="item.type=='storage'">
<div
:class="{
select_box: true,
is_select: item.storage == save,
}"
v-for="save in save_arr[item.dwtype]"
:key="save"
@click="change_appset(item,'storage',save)"
<el-form-item
:label="item.text + '-CPU：'"
v-if="item.type == 'resource'"
>
{{ save }}
</div>
</el-form-item>
</div>
<el-input
type="number"
v-model="item.cpu"
placeholder="请输入标题"
>
<template slot="append">M</template>
</el-input>
</el-form-item>
<el-form-item :label="item.text" v-if="item.type == 'switch'">
<div
class="openbgc"
@click="openstart(item, 'value')"
:style="
!item.value
? {
backgroundImage:
'url(' +
require('@/assets/imgs/btn_off_hov.png') +
')',
}
: {}
"
></div>
</el-form-item>
<el-form-item :label="item.text" v-if="item.type == 'storage'">
<div
:class="{
select_box: true,
is_select: item.storage == save,
}"
v-for="save in save_arr[item.dwtype]"
:key="save"
@click="change_appset(item, 'storage', save)"
>
{{ save }}
</div>
</el-form-item>
</div>
</el-form>
<div class="senior_box" @click="senior_flag = true" v-if="!senior_flag">
高级配置
......@@ -155,7 +165,11 @@
<el-button type="primary" plain @click="pre_step">
上一步
</el-button>
<el-button type="primary" :disabled="is_loading" @click="sub_app_set()">
<el-button
type="primary"
:disabled="is_loading"
@click="sub_app_set()"
>
下一步
</el-button>
</div>
......@@ -170,7 +184,11 @@
<el-button type="primary" plain @click="deal_code(0)">
取消
</el-button>
<el-button type="primary" :disabled="is_loading" @click="deal_code(1)">
<el-button
type="primary"
:disabled="is_loading"
@click="deal_code(1)"
>
下一步
</el-button>
</div>
......@@ -261,36 +279,16 @@ export default {
},
],
save_arr: [
[
"2Gi",
"4Gi",
"8Gi",
"16Gi",
"32Gi",
"64Gi",
"128Gi",
"256Gi",
"512Gi",
],
[
"2TB",
"4TB",
"8TB",
"16TB",
"32TB",
"64TB",
"128TB",
"256TB",
"512TB",
],
["2Gi", "4Gi", "8Gi", "16Gi", "32Gi", "64Gi", "128Gi", "256Gi", "512Gi"],
["2TB", "4TB", "8TB", "16TB", "32TB", "64TB", "128TB", "256TB", "512TB"],
],
memory_arr: [
{
value: 'Mi',
value: "Mi",
label: "Mi",
},
{
value: 'Gi',
value: "Gi",
label: "Gi",
},
],
......@@ -303,9 +301,9 @@ export default {
{ validator: checkName, trigger: "blur" },
],
},
app_set_code:'',
is_change:false,
is_loading:false,
app_set_code: "",
is_change: false,
is_loading: false,
app_set_rules: {
title: [{ required: true, message: "请输入标题", trigger: "blur" }],
memory: [
......@@ -321,167 +319,161 @@ export default {
{ required: true, message: "请选择存储容量", trigger: "change" },
],
},
step2_arr:[],
step2_arr: [],
evtUuid: "",
evtSource: null,
stateList: [],
finallyState: 0,
}),
methods: {
get_name_space(){
this.$http
.get(`/apaas/hubApi/market/namespaces`)
.then((response) => {
console.log(response);
this.area_options = response.data.data
});
get_name_space() {
this.$http.get(`/apaas/hubApi/market/namespaces`).then((response) => {
console.log(response);
this.area_options = response.data.data;
});
},
get_step_info() {
this.$http
.get(`/apaas/hubApi/market/step/${this.$route.params.app_id}`)
.then((response) => {
let step2_arr = JSON.parse(response.data.data).configInfo
let step2_arr = JSON.parse(response.data.data).configInfo;
console.log(step2_arr);
step2_arr.forEach(e => {
if(e.type=='radio'){
e['val'] = e.value[0]
step2_arr.forEach((e) => {
if (e.type == "radio") {
e["val"] = e.value[0];
// this.deal_key_value(this.app_set_info,e.name,e.type,e.value[0])
}else if(e.type=='storage'){
e['dwtype'] = e.storage.indexOf('Gi')==-1?1:0
} else if (e.type == "storage") {
e["dwtype"] = e.storage.indexOf("Gi") == -1 ? 1 : 0;
// this.deal_key_value(this.app_set_info,e.name,e.type,e.storage)
}else if(e.type=='resource'){
let memory = e.memory
let cpu = e.cpu
e['memory_type'] = memory.indexOf('Mi')==-1?'Gi':'Mi'
e['memory'] = parseInt(memory)
e['cpu'] = parseInt(cpu)
} else if (e.type == "resource") {
let memory = e.memory;
let cpu = e.cpu;
e["memory_type"] = memory.indexOf("Mi") == -1 ? "Gi" : "Mi";
e["memory"] = parseInt(memory);
e["cpu"] = parseInt(cpu);
// this.deal_key_value(this.app_set_info,e.name,'resource',[memory,cpu])
}else{
} else {
// this.deal_key_value(this.app_set_info,e.name,e.type,e.value)
}
});
this.step2_arr=step2_arr;
this.step2_arr = step2_arr;
console.log(this.app_set_info);
});
},
get_step_file(){
get_step_file() {
this.$http
.get(`/apaas/hubApi/market/values/${this.$route.params.app_id}`)
.then((response) => {
this.app_set_code = response.data.data
})
this.app_set_code = response.data.data;
});
},
change_appset(obj,key,val){
console.log(key,val);
this.$set(obj,key,val)
change_appset(obj, key, val) {
console.log(key, val);
this.$set(obj, key, val);
},
deal_key_value(key_string,type,value){
var key_arr = key_string.split('.')
var temp = this.app_set_info
key_arr.forEach((e,index) => {
if(key_arr.length-1==index){
if(type == 'resource'){
deal_key_value(key_string, type, value) {
var key_arr = key_string.split(".");
var temp = this.app_set_info;
key_arr.forEach((e, index) => {
if (key_arr.length - 1 == index) {
if (type == "resource") {
temp[e] = {
limits:{
memory: value[1]+value[0],
cpu:value[2]+'m'
limits: {
memory: value[1] + value[0],
cpu: value[2] + "m",
},
requests:{
memory: value[1]+value[0],
cpu:value[2]+'m'
}
}
}else if(type == 'storage'){
requests: {
memory: value[1] + value[0],
cpu: value[2] + "m",
},
};
} else if (type == "storage") {
temp[e] = {
"volumeClaimTemplate":{
"spec":{
"storageClassName":"nfs-client",
"accessModes":[
"ReadWriteOnce"],
"resources":{
"requests":{
"storage":value
}
}
volumeClaimTemplate: {
spec: {
storageClassName: "nfs-client",
accessModes: ["ReadWriteOnce"],
resources: {
requests: {
storage: value,
},
"selector":{
}
}
}
}else{
temp[e] = value
},
},
selector: {},
},
};
} else {
temp[e] = value;
}
}else{
if(temp[e]){
}else{
temp[e] = {}
} else {
if (temp[e]) {
} else {
temp[e] = {};
}
temp = temp[e]
temp = temp[e];
}
});
},
deal_key_text(obj,key_string){
var key_arr = key_string.split('.')
deal_key_text(obj, key_string) {
var key_arr = key_string.split(".");
var temp = obj;
key_arr.forEach((e,index) => {
if(key_arr.length-1==index){
}else{
temp = temp[e]
key_arr.forEach((e, index) => {
if (key_arr.length - 1 == index) {
} else {
temp = temp[e];
}
});
},
deal_code(n) {
if (n) {
//调用接口
this.change_form_aploy(0)
this.change_form_aploy(0);
}
this.senior_flag = false;
},
change_form_aploy(n){
this.is_loading = true
if(n==1){
change_form_aploy(n) {
this.is_loading = true;
if (n == 1) {
//表单提交
var temp = {
"app_id": parseInt(this.$route.params.app_id),
"up_userid": this.$store.state.userInfo.user_id,
"name": this.baseInfoForm.name,
"namespace": this.baseInfoForm.namespace,
"uu": this.evtUuid,
"values": this.app_set_info
}
}else{
app_id: parseInt(this.$route.params.app_id),
up_userid: this.$store.state.userInfo.user_id,
name: this.baseInfoForm.name,
namespace: this.baseInfoForm.namespace,
uu: this.evtUuid,
values: this.app_set_info,
};
} else {
//编辑提交
var temp = {
"app_id": parseInt(this.$route.params.app_id),
"up_userid": this.$store.state.userInfo.user_id,
"name": this.baseInfoForm.name,
"namespace": this.baseInfoForm.namespace,
"uu": this.evtUuid,
"values": yaml.load(this.app_set_code)
}
app_id: parseInt(this.$route.params.app_id),
up_userid: this.$store.state.userInfo.user_id,
name: this.baseInfoForm.name,
namespace: this.baseInfoForm.namespace,
uu: this.evtUuid,
values: yaml.load(this.app_set_code),
};
}
this.$http
.post(`/apaas/hubApi/market/build`,temp)
.post(`/apaas/hubApi/market/build`, temp)
.then((response) => {
this.is_loading = false
if(response.data.data){
this.$message.success('开始部署成功')
this.next_step()
this.is_loading = false;
if (response.data.data) {
this.$message.success("开始部署成功");
this.next_step();
}
}).catch(()=>{
this.is_loading = false
})
.catch(() => {
this.is_loading = false;
});
},
sub_yy_form(formName,n) {
sub_yy_form(formName, n) {
this.$refs[formName].validate((valid) => {
if (valid) {
if(n==1){
this.get_work_name()
}else if(n==2){
this.sub_app_set()
if (n == 1) {
this.get_work_name();
} else if (n == 2) {
this.sub_app_set();
}
} else {
console.log("error submit!!");
......@@ -489,51 +481,58 @@ export default {
}
});
},
get_work_name(){
this.is_loading = true
get_work_name() {
this.is_loading = true;
this.$http
.get(`/apaas/hubApi/market/exist/${this.baseInfoForm.namespace}?name=${this.baseInfoForm.name}`)
.get(
`/apaas/hubApi/market/exist/${this.baseInfoForm.namespace}?name=${this.baseInfoForm.name}`
)
.then((response) => {
console.log(response);
this.is_loading = false
if(response.data.success){
if(response.data.data){
this.$message.error('工作名称已存在')
}else{
this.is_loading = false;
if (response.data.success) {
if (response.data.data) {
this.$message.error("工作名称已存在");
} else {
this.next_step();
}
}
}).catch(()=>{
this.is_loading = false
})
.catch(() => {
this.is_loading = false;
});
},
sub_app_set(){
this.is_loading = true
this.step2_arr.forEach(e => {
if(e.type=='radio'){
this.deal_key_value(e.name,e.type,e.val)
}else if(e.type=='storage'){
this.deal_key_value(e.name,e.type,e.storage)
}else if(e.type=='resource'){
let memory = e.memory
let cpu = e.cpu
this.deal_key_value(e.name,'resource',[e.memory_type,e.memory,e.cpu])
}else{
this.deal_key_value(e.name,e.type,e.value)
sub_app_set() {
this.is_loading = true;
this.step2_arr.forEach((e) => {
if (e.type == "radio") {
this.deal_key_value(e.name, e.type, e.val);
} else if (e.type == "storage") {
this.deal_key_value(e.name, e.type, e.storage);
} else if (e.type == "resource") {
let memory = e.memory;
let cpu = e.cpu;
this.deal_key_value(e.name, "resource", [
e.memory_type,
e.memory,
e.cpu,
]);
} else {
this.deal_key_value(e.name, e.type, e.value);
}
});
console.log(this.app_set_info);
console.log(this.step2_arr);
//表单提交调用接口
this.change_form_aploy(1)
this.change_form_aploy(1);
},
openstart(item,key) {
openstart(item, key) {
if (item[key]) {
this.$set(item,key,false)
this.$set(item, key, false);
// item[key] = false;
} else {
// item[key] = true;
this.$set(item,key,true)
this.$set(item, key, true);
}
},
pre_step() {
......@@ -553,83 +552,12 @@ export default {
this.evtUuid = evtUuid;
this.evtSource = evtSource;
[
{
id: "values",
type: "message",
data: {
state: "notes",
data: "======================================",
},
},
{
id: "values",
type: "message",
data: {
state: "notes",
data:
"host: mapvideo.wodcloud.com\nrepository: hub.wodcloud.com/apaas/apaas-mapvideos\ntag: 1.0.0\n",
},
},
{
id: "values",
type: "message",
data: {
state: "notes",
data: "======================================",
},
},
{
id: "pull-chart",
type: "message",
data: {
state: "notes",
data: "正在下载charts文件 apaas-mapvideos-1.0",
},
},
{
id: "pull-chart",
type: "message",
data: {
state: "notes",
data: "下载charts文件apaas-mapvideos-1.0成功",
},
},
{
id: "pull-chart",
type: "message",
data: { state: "notes", data: "正在解压 apaas-ui-1.0.0.tgz" },
},
{
id: "pull-chart",
type: "message",
data: { state: "notes", data: "解压 apaas-ui-1.0.0.tgz 完成" },
},
{
id: "install",
type: "message",
data: {
state: "notes",
data:
"NAME: ram001\nLAST DEPLOYED: Wed Jul 1 16:09:25 2020\nNAMESPACE: test\nSTATUS: DEPLOYED\n\nRESOURCES:\n==\u003e v1/Pod(related)\nNAME READY STATUS RESTARTS AGE\nram001-65c84bfd8d-xmt2k 0/1 ContainerCreating 0 \u003cinvalid\u003e\n\n==\u003e v1/Service\nNAME TYPE CLUSTER-IP EXTERNAL-IP PORT(S) AGE\nram001 ClusterIP 10.3.181.74 \u003cnone\u003e 80/TCP \u003cinvalid\u003e\n\n==\u003e v1beta1/Deployment\nNAME READY UP-TO-DATE AVAILABLE AGE\nram001 0/1 1 0 \u003cinvalid\u003e\n\n==\u003e v1beta1/Ingress\nNAME HOSTS ADDRESS PORTS AGE\nram001 mapvideo.wodcloud.com 80 \u003cinvalid\u003e\n\n\n",
},
},
{
id: "deploy-status",
type: "message",
data: {
state: "success",
data: "在命名空间 test 下部署 ram001 成功!",
},
},
].forEach((msg, index) => {
setTimeout(() => {
this.update_status(msg);
}, (index + 1) * 200);
});
evtSource.addEventListener("message", (event) => {
console.log(event);
this.update_status({
id: event.lastEventId,
data: JSON.parse(event.data),
});
});
},
update_status(event) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment