Skip to content

A
apaas-ui
Commit 399607ff authored by 张俊's avatar 张俊
Browse files
Options

部署应用运行状态

parent 0251e56c
Hide whitespace changes
Inline Side-by-side
Showing with 105 additions and 108 deletions
src/components/table/table-um.vue
View file @ 399607ff
...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
<template slot-scope="scope"> <template slot-scope="scope">
<!-- 操作按钮 --> <!-- 操作按钮 -->
<span v-if="item.type === 'Button'"> <span v-if="item.type === 'Button'">
<b v-for="(btn, key) in item.btnList" :key="key"> <b v-for="(btn, key) in item.btnList" :key="key" :style="{marginRight:item.btngap}" v-if="!item.public_flag||item.public_flag==false?true:get_show_func(key,scope)">
<em v-if="btn.label == '分配'"> <em v-if="btn.label == '分配'">
<em <em
v-if="btn.label == '分配' && scope.row.state == 0" v-if="btn.label == '分配' && scope.row.state == 0"
...@@ -97,7 +97,11 @@ ...@@ -97,7 +97,11 @@
<em v-if="btn.label == '分配' && scope.row.state == 1">已分配</em> <em v-if="btn.label == '分配' && scope.row.state == 1">已分配</em>
</em> </em>
<em v-if="btn.type == 'goods-shelf'"> <em v-else-if="btn.label == '当前版本'">
<em style="pointer-events:none;color:#a9aec0;">{{btn.label}}</em>
</em>
<!-- <em v-if="btn.type == 'goods-shelf'">
<em <em
v-if="scope.row.state == 0" v-if="scope.row.state == 0"
class="cur_pointer" class="cur_pointer"
...@@ -111,7 +115,7 @@ ...@@ -111,7 +115,7 @@
@click="handleClick(btn.type, scope.row)" @click="handleClick(btn.type, scope.row)"
>下架</em> >下架</em>
<em v-if="scope.row.state == 2">下架</em> <em v-if="scope.row.state == 2">下架</em>
</em> </em> -->
<em <em
class="cur_pointer" class="cur_pointer"
...@@ -363,6 +367,10 @@ export default { ...@@ -363,6 +367,10 @@ export default {
type: Array, type: Array,
default: null default: null
}, },
public_arr: {
type: Array,
default: null
},
getSelectBtn: { getSelectBtn: {
type: Boolean, type: Boolean,
default: false default: false
...@@ -434,6 +442,22 @@ export default { ...@@ -434,6 +442,22 @@ export default {
} }
}, },
methods: { methods: {
get_show_func(btn,val){
// return true
console.log(btn,val);
this.public_arr.forEach(e => {
if(e.tag==val.row.tag){
// if(btn == 3){
// return true
// }else{
// return false
// }
return true
}else{
return true
}
});
},
//本地删除 //本地删除
deleteLocal(val) { deleteLocal(val) {
this.selectedTabsPage.splice(val.$index, 1); this.selectedTabsPage.splice(val.$index, 1);
......
src/pages/workbench/yygl/deploy_app_detail.vue
View file @ 399607ff
...@@ -130,7 +130,7 @@ ...@@ -130,7 +130,7 @@
</p> </p>
<div style="overflow:hidden;height:700px;" class="limit-elscroll"> <div style="overflow:hidden;height:700px;" class="limit-elscroll">
<el-scrollbar class="service_list"> <el-scrollbar class="service_list">
<div class="service_box" v-for="(item,index) in service_list_arr" :key="index+60000">{{item.service}} <span v-if="item.is_unhealth" class="service_tips">故障</span> </div> <div class="service_box" @click="change_micor(index)" :style="now_micor_service==index?{paddingLeft:'30px',borderLeft:'8px solid #515fe7',backgroundColor:'#fbfcfe'}:''" v-for="(item,index) in service_list_arr" :key="index+60000">{{item.service}} <span v-if="item.is_unhealth" class="service_tips">故障</span> </div>
</el-scrollbar> </el-scrollbar>
<div class="service_detail"> <div class="service_detail">
<nor-card title="服务概况" flag="true"> <nor-card title="服务概况" flag="true">
...@@ -140,27 +140,27 @@ ...@@ -140,27 +140,27 @@
<p <p
style="color: #707693;font-size: 16px;text-align:center;" style="color: #707693;font-size: 16px;text-align:center;"
>服务状态</p> >服务状态</p>
<waveIcon :state="yx_state.state" style="margin:10px auto;"></waveIcon> <waveIcon :state="micor_state.state" style="margin:10px auto;"></waveIcon>
<p <p
style="color: #58617a;font-size: 16px;text-align:center;" style="color: #58617a;font-size: 16px;text-align:center;"
>{{ yx_state.state }}</p> >{{ micor_state.state }}</p>
</div> </div>
<div style="height:115px;" class="service_num service_card_box"> <div style="height:115px;" class="service_num service_card_box">
<span style="color: #707693;font-size: 16px;text-align:center;margin-bottom:26px;display:inline-block;">服务平均响应时间</span> <span style="color: #707693;font-size: 16px;text-align:center;margin-bottom:26px;display:inline-block;">服务平均响应时间</span>
<p>{{ yx_state.averageTime }}</p> <p>{{ micor_state.averageTime }}</p>
<p>最大响应时间：{{ yx_state.maxTime }}</p> <p>最大响应时间：{{ micor_state.maxTime }}</p>
</div> </div>
<div style="height:115px;" class="service_num service_card_box"> <div style="height:115px;" class="service_num service_card_box">
<span style="color: #707693;font-size: 16px;text-align:center;margin-bottom:26px;display:inline-block;">吞吐率</span> <span style="color: #707693;font-size: 16px;text-align:center;margin-bottom:26px;display:inline-block;">吞吐率</span>
<p>{{ yx_state.averageTraffic }}</p> <p>{{ micor_state.averageTraffic }}</p>
<p>最大吞吐率：{{ yx_state.maxTraffic }}</p> <p>最大吞吐率：{{ micor_state.maxTraffic }}</p>
</div> </div>
<div style="height:115px;padding-top:30px;" class="service_num service_card_box"> <div style="height:115px;padding-top:30px;" class="service_num service_card_box">
<span style="color: #707693;font-size: 16px;text-align:center;margin-bottom:26px;display:inline-block;">内存使用</span> <span style="color: #707693;font-size: 16px;text-align:center;margin-bottom:26px;display:inline-block;">内存使用</span>
<p>{{ yx_state.memory }}</p> <p>{{ micor_state.memory }}</p>
</div> </div>
</div> </div>
...@@ -169,9 +169,9 @@ ...@@ -169,9 +169,9 @@
<nor-card title="服务设置" flag="true"> <nor-card title="服务设置" flag="true">
<div class="addimage">多版本回滚</div> <div class="addimage">多版本回滚</div>
<!-- <p class="imagebox"> <p class="imagebox">
<span <span
@click="image_select = index" @click="image_select = index;getImageInfo()"
:style=" :style="
image_select == index image_select == index
? { backgroundColor: '#8390ee', color: '#f8f9fd' } ? { backgroundColor: '#8390ee', color: '#f8f9fd' }
...@@ -180,15 +180,16 @@ ...@@ -180,15 +180,16 @@
v-for="(item, index) in image_arr" v-for="(item, index) in image_arr"
:key="index + 6000" :key="index + 6000"
>{{ item.name }}</span> >{{ item.name }}</span>
</p> --> </p>
<table-um <table-um
v-for="(item, index) in image_arr" v-for="(item, index) in image_arr"
:key="index+7000" :key="index+7000"
:height="300"
v-show="image_select == index" v-show="image_select == index"
:headers="header_image_arr" :headers="header_image_arr"
:datas="image_arr[index].data" :datas="image_arr[index].data"
:public_arr="now_image_version"
:stripe="true" :stripe="true"
:paginationShow="true"
@update="update" @update="update"
@rollback="rollback" @rollback="rollback"
@grouppublic="grouppublic" @grouppublic="grouppublic"
...@@ -236,84 +237,7 @@ export default { ...@@ -236,84 +237,7 @@ export default {
imgList: [], imgList: [],
imgList1: [], imgList1: [],
header_data:"", header_data:"",
service_list_arr:[ service_list_arr:[],
{
service:'cemplat-api1',
is_unhealth:1
},
{
service:'cemplat-api1',
is_unhealth:1
},
{
service:'cemplat-api1',
is_unhealth:0
},
{
service:'cemplat-api1',
is_unhealth:0
},
{
service:'cemplat-api1',
is_unhealth:0
},
{
service:'cemplat-api1',
is_unhealth:0
},
{
service:'cemplat-api1',
is_unhealth:0
},
{
service:'cemplat-api1',
is_unhealth:0
},
{
service:'cemplat-api1',
is_unhealth:0
},
{
service:'cemplat-api1',
is_unhealth:0
},
{
service:'cemplat-api1',
is_unhealth:0
},
{
service:'cemplat-api1',
is_unhealth:0
},
{
service:'cemplat-api1',
is_unhealth:0
},
{
service:'cemplat-api1',
is_unhealth:0
},
{
service:'cemplat-api1',
is_unhealth:0
},
{
service:'cemplat-api1',
is_unhealth:0
},
{
service:'cemplat-api1',
is_unhealth:0
},
{
service:'cemplat-api1',
is_unhealth:0
},
{
service:'cemplat-api1',
is_unhealth:0
},
],
yx_state: { yx_state: {
state: "", state: "",
averageTime: "", averageTime: "",
...@@ -322,6 +246,15 @@ export default { ...@@ -322,6 +246,15 @@ export default {
maxTraffic: "", maxTraffic: "",
memory: "" memory: ""
}, },
micor_state: {
state: "",
averageTime: "",
maxTime: "",
averageTraffic: "",
maxTraffic: "",
memory: ""
},
now_micor_service:0,
image_arr: [], image_arr: [],
area_arr: [ area_arr: [
{ {
...@@ -369,6 +302,7 @@ export default { ...@@ -369,6 +302,7 @@ export default {
value: 10 value: 10
} }
], ],
now_image_version:[],
form: { form: {
name: "", name: "",
fileList: "", fileList: "",
...@@ -393,28 +327,21 @@ export default { ...@@ -393,28 +327,21 @@ export default {
}, },
header_image_arr: [ header_image_arr: [
{ {
prop: "vision", prop: "tag",
label: "版本号", label: "版本号",
minWidth: "20%",
align: "center"
},
{
prop: "state",
label: "状态",
minWidth: "20%",
align: "center" align: "center"
}, },
{ {
prop: "date", prop: "date",
label: "在线日期", label: "在线日期",
minWidth: "30%",
align: "center" align: "center"
}, },
{ {
label: "操作", label: "操作",
type: "Button", type: "Button",
align: "center", align: "center",
minWidth: "30%", btngap:'15px',
public_flag:true,
btnList: [ btnList: [
{ {
type: "update", type: "update",
...@@ -422,7 +349,7 @@ export default { ...@@ -422,7 +349,7 @@ export default {
}, },
{ {
type: "rollback", type: "rollback",
label: "回退" label: "回滚"
}, },
{ {
type: "grouppublic", type: "grouppublic",
...@@ -430,8 +357,12 @@ export default { ...@@ -430,8 +357,12 @@ export default {
}, },
{ {
type: "online", type: "online",
label: "下线" label: "当前版本",
} },
{
type: "delete",
label: "删除"
},
] ]
} }
], ],
...@@ -654,13 +585,52 @@ export default { ...@@ -654,13 +585,52 @@ export default {
} }
}) })
}, },
get_micro_service(){
this.$http
.get(`/apaas/istio/service/${this.header_data.namespace}/overview/${this.service_list_arr[this.now_micor_service].service}`)
.then(response => {
if(response.data.success){
let data = response.data.data
this.image_arr = []
data.imageNames.forEach(e => {
this.image_arr.push({
name:e,
data:[]
})
});
this.micor_state= {
state: data.appState,
averageTime: data.respTime.avg,
maxTime: data.respTime.max,
averageTraffic: data.throughput.avg,
maxTraffic: data.throughput.max,
memory: data.resource.memory
}
this.getImageInfo()
}
})
},
change_micor(n){
this.now_micor_service = n
this.get_micro_service()
},
compare(property){
return function(a,b){
var value1 = a[property];
var value2 = b[property];
// return value2 - value1;
return value1 - value2;
}
},
getImageInfo() { getImageInfo() {
this.$http this.$http
.get("./static/deployappdetail.json") .get(`/apaas/istio/service/${this.header_data.namespace}/image/${this.service_list_arr[this.now_micor_service].service}/${this.image_arr[this.image_select].name}/versions`)
.then(response => { .then(response => {
console.log(response); console.log(response);
let data = response.data.data; let data = response.data.data;
this.image_arr = data.imagearr; // this.image_arr = data.imagearr;
this.$set(this.image_arr[this.image_select],'data',data.list.sort(this.compare('date')))
this.now_image_version = data.runnings
}) })
.catch(function(response) {}); .catch(function(response) {});
}, },
...@@ -812,6 +782,9 @@ export default { ...@@ -812,6 +782,9 @@ export default {
.then(response => { .then(response => {
if(response.data.success){ if(response.data.success){
this.service_list_arr = response.data.data this.service_list_arr = response.data.data
if(this.service_list_arr&&this.service_list_arr.length){
this.get_micro_service()
}
} }
}) })
} }
......
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