Skip to content

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

一键部署调试

parent 17d1ccd4
Show 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 @@ ...@@ -50,7 +50,11 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="apass_button step_action"> <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> </el-button>
</div> </div>
...@@ -68,25 +72,27 @@ ...@@ -68,25 +72,27 @@
label-position="top" label-position="top"
:rules="app_set_rules" :rules="app_set_rules"
> >
<div v-for="(item,index) in step2_arr" :key="index+10000"> <div v-for="(item, index) in step2_arr" :key="index + 10000">
<el-form-item :label="item.text" v-if="item.type=='text'"> <el-form-item :label="item.text" v-if="item.type == 'text'">
<el-input <el-input v-model="item.value"></el-input>
v-model="item.value"
></el-input>
</el-form-item> </el-form-item>
<el-form-item :label="item.text" v-if="item.type=='radio'"> <el-form-item :label="item.text" v-if="item.type == 'radio'">
<div <div
:class="{ select_box: true, is_select: item.val == vision }" :class="{ select_box: true, is_select: item.val == vision }"
v-for="vision in item.value" v-for="vision in item.value"
:key="vision" :key="vision"
@click="change_appset(item,'val',vision)" @click="change_appset(item, 'val', vision)"
> >
{{ vision}} {{ vision }}
</div> </div>
</el-form-item> </el-form-item>
<el-form-item :label="item.text+'-内存：'" class="limitsd" v-if="item.type=='resource'"> <el-form-item
:label="item.text + '-内存：'"
class="limitsd"
v-if="item.type == 'resource'"
>
<el-input <el-input
type="number" type="number"
class="limitinput" class="limitinput"
...@@ -108,7 +114,10 @@ ...@@ -108,7 +114,10 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item :label="item.text+'-CPU：'" v-if="item.type=='resource'"> <el-form-item
:label="item.text + '-CPU：'"
v-if="item.type == 'resource'"
>
<el-input <el-input
type="number" type="number"
v-model="item.cpu" v-model="item.cpu"
...@@ -118,21 +127,23 @@ ...@@ -118,21 +127,23 @@
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item :label="item.text" v-if="item.type=='switch'"> <el-form-item :label="item.text" v-if="item.type == 'switch'">
<div <div
class="openbgc" class="openbgc"
@click="openstart(item,'value')" @click="openstart(item, 'value')"
:style=" :style="
!item.value !item.value
? { ? {
backgroundImage: backgroundImage:
'url(' + require('@/assets/imgs/btn_off_hov.png') + ')', 'url(' +
require('@/assets/imgs/btn_off_hov.png') +
')',
} }
: {} : {}
" "
></div> ></div>
</el-form-item> </el-form-item>
<el-form-item :label="item.text" v-if="item.type=='storage'"> <el-form-item :label="item.text" v-if="item.type == 'storage'">
<div <div
:class="{ :class="{
select_box: true, select_box: true,
...@@ -140,13 +151,12 @@ ...@@ -140,13 +151,12 @@
}" }"
v-for="save in save_arr[item.dwtype]" v-for="save in save_arr[item.dwtype]"
:key="save" :key="save"
@click="change_appset(item,'storage',save)" @click="change_appset(item, 'storage', save)"
> >
{{ save }} {{ save }}
</div> </div>
</el-form-item> </el-form-item>
</div> </div>
</el-form> </el-form>
<div class="senior_box" @click="senior_flag = true" v-if="!senior_flag"> <div class="senior_box" @click="senior_flag = true" v-if="!senior_flag">
高级配置 高级配置
...@@ -155,7 +165,11 @@ ...@@ -155,7 +165,11 @@
<el-button type="primary" plain @click="pre_step"> <el-button type="primary" plain @click="pre_step">
上一步 上一步
</el-button> </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> </el-button>
</div> </div>
...@@ -170,7 +184,11 @@ ...@@ -170,7 +184,11 @@
<el-button type="primary" plain @click="deal_code(0)"> <el-button type="primary" plain @click="deal_code(0)">
取消 取消
</el-button> </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> </el-button>
</div> </div>
...@@ -261,36 +279,16 @@ export default { ...@@ -261,36 +279,16 @@ export default {
}, },
], ],
save_arr: [ save_arr: [
[ ["2Gi", "4Gi", "8Gi", "16Gi", "32Gi", "64Gi", "128Gi", "256Gi", "512Gi"],
"2Gi", ["2TB", "4TB", "8TB", "16TB", "32TB", "64TB", "128TB", "256TB", "512TB"],
"4Gi",
"8Gi",
"16Gi",
"32Gi",
"64Gi",
"128Gi",
"256Gi",
"512Gi",
],
[
"2TB",
"4TB",
"8TB",
"16TB",
"32TB",
"64TB",
"128TB",
"256TB",
"512TB",
],
], ],
memory_arr: [ memory_arr: [
{ {
value: 'Mi', value: "Mi",
label: "Mi", label: "Mi",
}, },
{ {
value: 'Gi', value: "Gi",
label: "Gi", label: "Gi",
}, },
], ],
...@@ -303,9 +301,9 @@ export default { ...@@ -303,9 +301,9 @@ export default {
{ validator: checkName, trigger: "blur" }, { validator: checkName, trigger: "blur" },
], ],
}, },
app_set_code:'', app_set_code: "",
is_change:false, is_change: false,
is_loading:false, is_loading: false,
app_set_rules: { app_set_rules: {
title: [{ required: true, message: "请输入标题", trigger: "blur" }], title: [{ required: true, message: "请输入标题", trigger: "blur" }],
memory: [ memory: [
...@@ -321,167 +319,161 @@ export default { ...@@ -321,167 +319,161 @@ export default {
{ required: true, message: "请选择存储容量", trigger: "change" }, { required: true, message: "请选择存储容量", trigger: "change" },
], ],
}, },
step2_arr:[], step2_arr: [],
evtUuid: "", evtUuid: "",
evtSource: null, evtSource: null,
stateList: [], stateList: [],
finallyState: 0, finallyState: 0,
}), }),
methods: { methods: {
get_name_space(){ get_name_space() {
this.$http this.$http.get(`/apaas/hubApi/market/namespaces`).then((response) => {
.get(`/apaas/hubApi/market/namespaces`)
.then((response) => {
console.log(response); console.log(response);
this.area_options = response.data.data this.area_options = response.data.data;
}); });
}, },
get_step_info() { get_step_info() {
this.$http this.$http
.get(`/apaas/hubApi/market/step/${this.$route.params.app_id}`) .get(`/apaas/hubApi/market/step/${this.$route.params.app_id}`)
.then((response) => { .then((response) => {
let step2_arr = JSON.parse(response.data.data).configInfo let step2_arr = JSON.parse(response.data.data).configInfo;
console.log(step2_arr); console.log(step2_arr);
step2_arr.forEach(e => { step2_arr.forEach((e) => {
if(e.type=='radio'){ if (e.type == "radio") {
e['val'] = e.value[0] e["val"] = e.value[0];
// this.deal_key_value(this.app_set_info,e.name,e.type,e.value[0]) // this.deal_key_value(this.app_set_info,e.name,e.type,e.value[0])
}else if(e.type=='storage'){ } else if (e.type == "storage") {
e['dwtype'] = e.storage.indexOf('Gi')==-1?1:0 e["dwtype"] = e.storage.indexOf("Gi") == -1 ? 1 : 0;
// this.deal_key_value(this.app_set_info,e.name,e.type,e.storage) // this.deal_key_value(this.app_set_info,e.name,e.type,e.storage)
}else if(e.type=='resource'){ } else if (e.type == "resource") {
let memory = e.memory let memory = e.memory;
let cpu = e.cpu let cpu = e.cpu;
e['memory_type'] = memory.indexOf('Mi')==-1?'Gi':'Mi' e["memory_type"] = memory.indexOf("Mi") == -1 ? "Gi" : "Mi";
e['memory'] = parseInt(memory) e["memory"] = parseInt(memory);
e['cpu'] = parseInt(cpu) e["cpu"] = parseInt(cpu);
// this.deal_key_value(this.app_set_info,e.name,'resource',[memory,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.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); console.log(this.app_set_info);
}); });
}, },
get_step_file(){ get_step_file() {
this.$http this.$http
.get(`/apaas/hubApi/market/values/${this.$route.params.app_id}`) .get(`/apaas/hubApi/market/values/${this.$route.params.app_id}`)
.then((response) => { .then((response) => {
this.app_set_code = response.data.data this.app_set_code = response.data.data;
}) });
}, },
change_appset(obj,key,val){ change_appset(obj, key, val) {
console.log(key,val); console.log(key, val);
this.$set(obj,key,val) this.$set(obj, key, val);
}, },
deal_key_value(key_string,type,value){ deal_key_value(key_string, type, value) {
var key_arr = key_string.split('.') var key_arr = key_string.split(".");
var temp = this.app_set_info var temp = this.app_set_info;
key_arr.forEach((e,index) => { key_arr.forEach((e, index) => {
if(key_arr.length-1==index){ if (key_arr.length - 1 == index) {
if(type == 'resource'){ if (type == "resource") {
temp[e] = { temp[e] = {
limits:{ limits: {
memory: value[1]+value[0], memory: value[1] + value[0],
cpu:value[2]+'m' cpu: value[2] + "m",
}, },
requests:{ requests: {
memory: value[1]+value[0], memory: value[1] + value[0],
cpu:value[2]+'m' cpu: value[2] + "m",
} },
} };
}else if(type == 'storage'){ } else if (type == "storage") {
temp[e] = { temp[e] = {
"volumeClaimTemplate":{ volumeClaimTemplate: {
"spec":{ spec: {
"storageClassName":"nfs-client", storageClassName: "nfs-client",
"accessModes":[ accessModes: ["ReadWriteOnce"],
"ReadWriteOnce"], resources: {
"resources":{ requests: {
"requests":{ storage: value,
"storage":value
}
}
}, },
"selector":{ },
} },
} selector: {},
} },
}else{ };
temp[e] = value } else {
temp[e] = value;
} }
}else{ } else {
if(temp[e]){ if (temp[e]) {
} else {
}else{ temp[e] = {};
temp[e] = {}
} }
temp = temp[e] temp = temp[e];
} }
}); });
}, },
deal_key_text(obj,key_string){ deal_key_text(obj, key_string) {
var key_arr = key_string.split('.') var key_arr = key_string.split(".");
var temp = obj; var temp = obj;
key_arr.forEach((e,index) => { key_arr.forEach((e, index) => {
if(key_arr.length-1==index){ if (key_arr.length - 1 == index) {
} else {
}else{ temp = temp[e];
temp = temp[e]
} }
}); });
}, },
deal_code(n) { deal_code(n) {
if (n) { if (n) {
//调用接口 //调用接口
this.change_form_aploy(0) this.change_form_aploy(0);
} }
this.senior_flag = false; this.senior_flag = false;
}, },
change_form_aploy(n){ change_form_aploy(n) {
this.is_loading = true this.is_loading = true;
if(n==1){ if (n == 1) {
//表单提交 //表单提交
var temp = { var temp = {
"app_id": parseInt(this.$route.params.app_id), app_id: parseInt(this.$route.params.app_id),
"up_userid": this.$store.state.userInfo.user_id, up_userid: this.$store.state.userInfo.user_id,
"name": this.baseInfoForm.name, name: this.baseInfoForm.name,
"namespace": this.baseInfoForm.namespace, namespace: this.baseInfoForm.namespace,
"uu": this.evtUuid, uu: this.evtUuid,
"values": this.app_set_info values: this.app_set_info,
} };
}else{ } else {
//编辑提交 //编辑提交
var temp = { var temp = {
"app_id": parseInt(this.$route.params.app_id), app_id: parseInt(this.$route.params.app_id),
"up_userid": this.$store.state.userInfo.user_id, up_userid: this.$store.state.userInfo.user_id,
"name": this.baseInfoForm.name, name: this.baseInfoForm.name,
"namespace": this.baseInfoForm.namespace, namespace: this.baseInfoForm.namespace,
"uu": this.evtUuid, uu: this.evtUuid,
"values": yaml.load(this.app_set_code) values: yaml.load(this.app_set_code),
} };
} }
this.$http this.$http
.post(`/apaas/hubApi/market/build`,temp) .post(`/apaas/hubApi/market/build`, temp)
.then((response) => { .then((response) => {
this.is_loading = false this.is_loading = false;
if(response.data.data){ if (response.data.data) {
this.$message.success('开始部署成功') this.$message.success("开始部署成功");
this.next_step() 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) => { this.$refs[formName].validate((valid) => {
if (valid) { if (valid) {
if(n==1){ if (n == 1) {
this.get_work_name() this.get_work_name();
}else if(n==2){ } else if (n == 2) {
this.sub_app_set() this.sub_app_set();
} }
} else { } else {
console.log("error submit!!"); console.log("error submit!!");
...@@ -489,51 +481,58 @@ export default { ...@@ -489,51 +481,58 @@ export default {
} }
}); });
}, },
get_work_name(){ get_work_name() {
this.is_loading = true this.is_loading = true;
this.$http 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) => { .then((response) => {
console.log(response); console.log(response);
this.is_loading = false this.is_loading = false;
if(response.data.success){ if (response.data.success) {
if(response.data.data){ if (response.data.data) {
this.$message.error('工作名称已存在') this.$message.error("工作名称已存在");
}else{ } else {
this.next_step(); this.next_step();
} }
} }
}).catch(()=>{
this.is_loading = false
}) })
.catch(() => {
this.is_loading = false;
});
}, },
sub_app_set(){ sub_app_set() {
this.is_loading = true this.is_loading = true;
this.step2_arr.forEach(e => { this.step2_arr.forEach((e) => {
if(e.type=='radio'){ if (e.type == "radio") {
this.deal_key_value(e.name,e.type,e.val) this.deal_key_value(e.name, e.type, e.val);
}else if(e.type=='storage'){ } else if (e.type == "storage") {
this.deal_key_value(e.name,e.type,e.storage) this.deal_key_value(e.name, e.type, e.storage);
}else if(e.type=='resource'){ } else if (e.type == "resource") {
let memory = e.memory let memory = e.memory;
let cpu = e.cpu let cpu = e.cpu;
this.deal_key_value(e.name,'resource',[e.memory_type,e.memory,e.cpu]) this.deal_key_value(e.name, "resource", [
}else{ e.memory_type,
this.deal_key_value(e.name,e.type,e.value) e.memory,
e.cpu,
]);
} else {
this.deal_key_value(e.name, e.type, e.value);
} }
}); });
console.log(this.app_set_info); console.log(this.app_set_info);
console.log(this.step2_arr); console.log(this.step2_arr);
//表单提交调用接口 //表单提交调用接口
this.change_form_aploy(1) this.change_form_aploy(1);
}, },
openstart(item,key) { openstart(item, key) {
if (item[key]) { if (item[key]) {
this.$set(item,key,false) this.$set(item, key, false);
// item[key] = false; // item[key] = false;
} else { } else {
// item[key] = true; // item[key] = true;
this.$set(item,key,true) this.$set(item, key, true);
} }
}, },
pre_step() { pre_step() {
...@@ -553,83 +552,12 @@ export default { ...@@ -553,83 +552,12 @@ export default {
this.evtUuid = evtUuid; this.evtUuid = evtUuid;
this.evtSource = evtSource; 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) => { evtSource.addEventListener("message", (event) => {
console.log(event); console.log(event);
this.update_status({
id: event.lastEventId,
data: JSON.parse(event.data),
});
}); });
}, },
update_status(event) { 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