Skip to content

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

应用调试

parent efd742cf
Hide whitespace changes
Inline Side-by-side
Showing with 774 additions and 136 deletions
package.json
View file @ e3c79497
...@@ -31,7 +31,10 @@ ...@@ -31,7 +31,10 @@
"vue-i18n": "^8.17.7", "vue-i18n": "^8.17.7",
"vue-resource": "^1.5.1", "vue-resource": "^1.5.1",
"vue-router": "^3.0.2", "vue-router": "^3.0.2",
"vuex": "^3.1.0" "vuex": "^3.1.0",
"xterm": "^4.7.0",
"xterm-addon-fit": "^0.4.0",
"yaml2json": "^1.0.2"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.4.0", "@babel/core": "^7.4.0",
......
src/components/apass-dialog.vue
View file @ e3c79497
...@@ -34,6 +34,7 @@ ...@@ -34,6 +34,7 @@
type="primary" type="primary"
size="mini" size="mini"
v-text="sunbmitText || '确定'" v-text="sunbmitText || '确定'"
:disabled="submitDisable"
@click="dialogSubmit" @click="dialogSubmit"
> >
</el-button> </el-button>
...@@ -66,6 +67,10 @@ export default { ...@@ -66,6 +67,10 @@ export default {
type: String, type: String,
default: () => "", default: () => "",
}, },
submitDisable: {
type: Boolean,
default: () => false,
},
submit: { submit: {
type: Function, type: Function,
default: () => null, default: () => null,
......
src/components/apass-table.vue
View file @ e3c79497
<template> <template>
<div class="apass_table"> <div class="apass_table">
<el-table :data="data" :height="height"> <el-table :data="data">
<el-table-column v-if="paddingLeft > 10" :width="paddingLeft - 10"></el-table-column> <el-table-column v-if="paddingLeft > 10" :width="paddingLeft - 10"></el-table-column>
<el-table-column <el-table-column
v-for="(item, index) in header" v-for="(item, index) in header"
...@@ -44,7 +44,10 @@ ...@@ -44,7 +44,10 @@
></a> ></a>
</div> </div>
<div v-else-if="item.type === 'icon'"> <div v-else-if="item.type === 'icon'">
<img src="../assets/imgs/btn_off_hov.png" alt="" v-if="scope.row[item.prop]==1" style="width:100%;height:100%;"> <img src="../assets/imgs/ic_true.png" alt="" v-if="scope.row[item.prop]==1" style="width:100%;height:100%;">
<img src="../assets/imgs/ic_yiwancheng.png" alt="" v-if="scope.row[item.prop]==2" style="width:100%;height:100%;">
<img src="../assets/imgs/ic_restart.png" alt="" v-if="scope.row[item.prop]==3" style="width:100%;height:100%;">
<img src="../assets/imgs/ic_failed.png" alt="" v-if="scope.row[item.prop]==4" style="width:100%;height:100%;">
</div> </div>
<div v-else-if="item.type === 'tag'" class="table_tag"> <div v-else-if="item.type === 'tag'" class="table_tag">
<el-tag <el-tag
...@@ -52,8 +55,8 @@ ...@@ -52,8 +55,8 @@
:key="index+5515"> :key="index+5515">
{{ item }} {{ item }}
</el-tag> </el-tag>
<div class="tagclo" v-if="tag_flag_arr[scope.$index]==0&&scope.row[item.prop].length>2" @click="change_tag(scope.$index,1)">下</div> <div class="tagclo btn_down" v-if="tag_flag_arr[scope.$index]==0&&scope.row[item.prop].length>2" @click="change_tag(scope.$index,1)"></div>
<div class="tagclo" v-if="tag_flag_arr[scope.$index]==1&&scope.row[item.prop].length>2" @click="change_tag(scope.$index,0)">上</div> <div class="tagclo btn_up" v-if="tag_flag_arr[scope.$index]==1&&scope.row[item.prop].length>2" @click="change_tag(scope.$index,0)"></div>
</div> </div>
<div v-else-if="item.type === 'chart'" class="charts"> <div v-else-if="item.type === 'chart'" class="charts">
<sparkline :indicatorStyles="spIndicatorStyles1"> <sparkline :indicatorStyles="spIndicatorStyles1">
...@@ -174,6 +177,14 @@ export default { ...@@ -174,6 +177,14 @@ export default {
text-align: center; text-align: center;
line-height: 22px; line-height: 22px;
cursor: pointer; cursor: pointer;
background-size: contain;
margin-top: -3px;
}
.btn_down{
background-image: url('../assets/imgs/btn_expand.png');
}
.btn_up{
background-image: url('../assets/imgs/btn_fold.png');
} }
.charts{ .charts{
position: relative; position: relative;
......
src/components/service-header.vue
View file @ e3c79497
<template> <template>
<div class="info_logo"> <div class="info_logo">
<div class="logo"> <div class="logo">
<img :src="data.url" alt=""> <img :src="data.url" alt="" />
</div> </div>
<div class="info"> <div class="info">
<p class="info_title"> <p class="info_title">
<span>{{ data.name }}</span> <span>{{ data.name }}</span>
<span class="bs" v-if="data.aqdetail" @click="subevent(0)">一键部署</span> <span class="bs" v-if="data.aqdetail" @click="subevent(0)"
<span class="info_fix" v-if="data.fxdetail" @click="subevent(1)">我要编辑</span> >一键部署</span
<span class="info_fix" v-if="data.yydebugger" @click="subevent(5)">应用调试</span> >
<span class="right gap" v-if="data.yydetail||data.xxdetail||data.yydev">|</span> <span class="info_fix" v-if="data.fxdetail" @click="subevent(1)"
<span class="right underline" v-if="data.xxdetail" @click="subevent(2)" title="申请下线至开发者应用">{{data.xxdetail}}</span> >我要编辑</span
<span class="right undersell" v-if="data.yydetail" @click="subevent(3)">{{data.yydetail}}</span> >
<span class="right undersell undermy" v-if="data.bsdetail" @click="subevent(4)">申请密钥</span> <span class="info_fix" v-if="data.yydebugger" @click="subevent(5)"
<span class="info_fix" v-if="data.fixed" @click="goto_page(data.fixedurl)">我要修改</span> >应用调试</span
<span class="info_fix" v-if="data.yydev" @click="subevent(6)">应用开发</span> >
<span
class="right gap"
v-if="data.yydetail || data.xxdetail || data.yydev"
>|</span
>
<span
class="right underline"
v-if="data.xxdetail"
@click="subevent(2)"
title="申请下线至开发者应用"
>{{ data.xxdetail }}</span
>
<span
class="right undersell"
v-if="data.yydetail"
@click="subevent(3)"
>{{ data.yydetail }}</span
>
<span
class="right undersell undermy"
v-if="data.bsdetail"
@click="subevent(4)"
>申请密钥</span
>
<span
class="info_fix"
v-if="data.fixed"
@click="goto_page(data.fixedurl)"
>我要修改</span
>
<span class="info_fix" v-if="data.yydev" @click="subevent(6)"
>应用开发</span
>
</p> </p>
<div class="info_detail"> <div class="info_detail">
<p> <p>
...@@ -35,7 +68,9 @@ ...@@ -35,7 +68,9 @@
:href="item.text" :href="item.text"
>{{ item.text }}</a >{{ item.text }}</a
> >
<span v-else :style="item.color ? { color: item.color } : {}">{{ item.text }}</span> <span v-else :style="item.color ? { color: item.color } : {}">{{
item.text
}}</span>
</label> </label>
</p> </p>
</div> </div>
...@@ -73,7 +108,7 @@ export default { ...@@ -73,7 +108,7 @@ export default {
this.$emit('applymy') this.$emit('applymy')
}else if(val == 5){ }else if(val == 5){
// /yygl/:level/:type/appdebugger/:deploy_id // /yygl/:level/:type/appdebugger/:deploy_id
this.$router.push(`/yygl/${this.$route.params.level}/${this.$route.params.type}/appdebugger/111`) this.$emit('debuggerfunc')
}else if(val == 6){ }else if(val == 6){
this.$emit('applymy') this.$emit('applymy')
} }
...@@ -100,7 +135,7 @@ export default { ...@@ -100,7 +135,7 @@ export default {
background-size: cover; background-size: cover;
text-align: center; text-align: center;
} }
.logo img{ .logo img {
width: 100%; width: 100%;
} }
.info { .info {
...@@ -128,7 +163,7 @@ export default { ...@@ -128,7 +163,7 @@ export default {
cursor: pointer; cursor: pointer;
float: right; float: right;
} }
.bs{ .bs {
display: inline-block; display: inline-block;
width: 76px; width: 76px;
height: 32px; height: 32px;
...@@ -143,39 +178,39 @@ export default { ...@@ -143,39 +178,39 @@ export default {
border: solid 2px #a5afd6; border: solid 2px #a5afd6;
color: #0f2683; color: #0f2683;
} }
.gap{ .gap {
color: #b4c0f5; color: #b4c0f5;
margin: 0 10px; margin: 0 10px;
line-height: 30px; line-height: 30px;
} }
.underline{ .underline {
width: 76px; width: 76px;
height: 32px; height: 32px;
background-color: #f6f7fb; background-color: #f6f7fb;
border-radius: 8px; border-radius: 8px;
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
color: #0f2683; color: #0f2683;
line-height: 32px; line-height: 32px;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
margin-left: 10px; margin-left: 10px;
} }
.undersell{ .undersell {
width: 76px; width: 76px;
height: 32px; height: 32px;
background-color: #0f2683; background-color: #0f2683;
border-radius: 8px; border-radius: 8px;
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
color: #f8f9fd; color: #f8f9fd;
line-height: 32px; line-height: 32px;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
} }
.undermy{ .undermy {
background-color: #515fe7; background-color: #515fe7;
color: #e6ebfe; color: #e6ebfe;
} }
.info_detail { .info_detail {
width: 100%; width: 100%;
...@@ -193,7 +228,7 @@ export default { ...@@ -193,7 +228,7 @@ export default {
font-weight: 600; font-weight: 600;
margin-right: 48px; margin-right: 48px;
} }
.right{ .right {
float: right; float: right;
} }
</style> </style>
src/pages/workbench/yygl/app_debugger.vue
View file @ e3c79497
<template> <template>
<div class="detail_contain"> <div class="detail_contain">
<p class="now_page_title"> <p class="now_page_title">
我的应用 / 部署的应用 / 我的应用 / 部署的应用 / 应用详情 /
<span>应用详情</span> <span>应用调试</span>
</p> </p>
<div class="search_header"> <div class="search_header">
<el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="工作区域"> <el-form-item label="工作区域">
<el-select v-model="formInline.area" placeholder="工作区域"> <el-select v-model="formInline.area" placeholder="工作区域">
<el-option :label="item.label" :value="item.value" v-for="(item,index) in area_arr" :key="index+7800"></el-option> <el-option :label="item.text" :value="item.value" v-for="(item,index) in area_arr" :key="index+7800"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="应用"> <el-form-item label="应用">
<el-select v-model="formInline.name" placeholder="应用"> <el-select v-model="formInline.name" placeholder="应用">
<el-option :label="item.label" :value="item.value" v-for="(item,index) in app_arr" :key="index+7800"></el-option> <el-option :label="item.deploy_name" :value="item.deploy_name" v-for="(item,index) in app_arr" :key="index+7800"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item style="float:right;"> <el-form-item style="float:right;">
<el-button type="primary" style="width:90px;backgroundColor:#495feb;color:#e6ebfe;" @click="onSubmit">查询</el-button> <el-button type="primary" style="width:90px;backgroundColor:#495feb;color:#e6ebfe;" @click="get_list_pod">查询</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<div class="search_list"> <div class="search_list">
<div class="list_header"> <div class="list_header">
<span></span>容器组 <span></span>容器组
<el-input placeholder="请输入内容" style="float:right;" v-model="pod_name" prefix-icon="el-icon-search"></el-input> <el-input placeholder="请输入内容" style="float:right;" @change="get_list_pod" v-model="pod_name" prefix-icon="el-icon-search"></el-input>
</div> </div>
<div style="padding:20px;padding-top:0px;"> <div style="padding:20px;padding-top:0px;display: flex;flex-direction: column;height: calc(100% - 80px);align-items:stretch;">
<apass-table :header="header_arr" :data="tableData" :icon="false" :height="560" :paddingLeft="5"></apass-table> <apass-table :header="header_arr" :data="tableData" :icon="false" style="flex-grow:1;" :paddingLeft="5"></apass-table>
<list-pagination <list-pagination
:total="listTotal" :total="listTotal"
:page-sizes="pageSizes" :page-sizes="pageSizes"
...@@ -38,16 +38,47 @@ ...@@ -38,16 +38,47 @@
></list-pagination> ></list-pagination>
</div> </div>
</div> </div>
<apass-dialog
ref="actiondialog"
title="资源详情"
width="904px"
>
<template slot="content">
<div>
<div style="margin:20px;">
<div class="yaml_json">
<div @click="changyaml(0)" :style="now_yaml==0?{color:'#f8f9fd',backgroundColor:'#0f2683'}:''">YAML</div>
<div @click="changyaml(1)" :style="now_yaml==1?{color:'#f8f9fd',backgroundColor:'#0f2683'}:''">JSON</div>
</div>
<div class="tips">
<i class="el-icon-warning-outline"></i><span>此操作相当于：kubectl apply -f {{'<'+'spec.yaml'+'>'}}</span>
</div>
<v-apaas-code :datas="code_arr"></v-apaas-code>
</div>
</div>
</template>
<template slot="action">
<div>
</div>
</template>
</apass-dialog>
</div> </div>
</template> </template>
<script> <script>
import apassTable from "@/components/apass-table"; import apassTable from "@/components/apass-table";
import ListPagination from "@/components/comments-pagination"; import ListPagination from "@/components/comments-pagination";
import apassDialog from '@/components/apass-dialog'
import codes from "@/components/general/codes";
import yaml from "json2yaml"
import json from 'js-yaml'
export default { export default {
components: { components: {
apassTable, apassTable,
ListPagination ListPagination,
apassDialog,
"v-apaas-code": codes,
}, },
data() { data() {
return { return {
...@@ -59,69 +90,29 @@ export default { ...@@ -59,69 +90,29 @@ export default {
area:'', area:'',
name:'' name:''
}, },
now_yaml:0,
pod_name:'', pod_name:'',
area_arr:[ code_arr:'',
{ area_arr:[],
value:1, app_arr:[],
label:'apaas', tableData:[],
},
{
value:2,
label:'apaas1',
},
{
value:3,
label:'apaas2',
},
],
app_arr:[
{
value:1,
label:'mapvideos',
},
{
value:2,
label:'mapvideos1',
},
{
value:3,
label:'mapvideos2',
},
],
tableData:[
{
icon:'1',
name:'1',
tag:['1','222'],
node:'1',
state:'1',
times:'1',
cpu:[1,2,34,5],
cpu_use:34,
mermoy:[1,2,34,10],
memory_use:45,
time:'1'
},
{
icon:'1',
name:'1',
tag:['1','2','3'],
node:'1',
state:'1',
times:'1',
cpu:[1,2,34,5],
cpu_use:4,
mermoy:[1,2,34,50],
memory_use:45,
time:'1'
},
],
header_arr:[] header_arr:[]
}; };
}, },
computed:{
// table_height(){
// return document.body.clientHeight - 390
// }
},
created() { created() {
console.log(json,yaml);
this.get_namespace_list()
this.get_app_list()
this.formInline={
area:this.$route.query.namespace,
name:this.$route.query.app
}
this.get_list_pod()
}, },
mounted() { mounted() {
this.header_arr = [ this.header_arr = [
...@@ -135,24 +126,21 @@ export default { ...@@ -135,24 +126,21 @@ export default {
{ {
prop: "name", prop: "name",
label: "名称", label: "名称",
minWidth: "20%", minWidth: "40%",
align: "left", align: "left",
type: "button", type: "button"
callback(item) {
_this.$router.push(`/authority/users/detail/${item.user_id}`);
},
}, },
{ {
prop: "tag", prop: "tag",
label: "标签", label: "标签",
minWidth: "20%", minWidth: "60%",
align: "left", align: "left",
type: "tag", type: "tag",
}, },
{ {
prop: "node", prop: "node",
label: "节点", label: "节点",
width: 80, width: 120,
align: "left", align: "left",
}, },
{ {
...@@ -164,7 +152,7 @@ export default { ...@@ -164,7 +152,7 @@ export default {
{ {
prop: "times", prop: "times",
label: "重启", label: "重启",
width: 50, width: 80,
align: "center", align: "center",
}, },
{ {
...@@ -184,7 +172,7 @@ export default { ...@@ -184,7 +172,7 @@ export default {
{ {
prop: "time", prop: "time",
label: "创建时间", label: "创建时间",
width: 140, width: 200,
align: "center", align: "center",
}, },
{ {
...@@ -196,36 +184,128 @@ export default { ...@@ -196,36 +184,128 @@ export default {
actionList: [ actionList: [
{ {
label: "日志", label: "日志",
callback: this.adelete, callback: this.gotopage,
}, },
{ {
label: "调试", label: "调试",
callback: this.adelete, callback: this.gotopage1,
}, },
{ {
label: "查看", label: "查看",
callback: this.adelete, callback: this.lookrecord,
}, },
{ {
label: "删除", label: "删除",
callback: this.adelete, callback: this.adelete,
class:'warn'
}, },
], ],
}, },
]; ];
}, },
methods: { methods: {
get_list_app(){ changyaml(n){
this.now_yaml = n
if(n==0){
this.code_arr = yaml.stringify(this.code_arr)
}else{
console.log(json.load(this.code_arr));
console.log(JSON.stringify(json.load(this.code_arr), null, 2));
this.code_arr = JSON.stringify(json.load(this.code_arr), null, 2);
}
},
get_namespace_list(){
this.$http
.get(`/apaas/hubApi/market/namespaces`)
.then(response => {
if(response.data.success){
this.area_arr = response.data.data
}
})
},
get_app_list(){
this.$http
.get(`/apaas/hubApi/cloud/podApps/${this.$route.query.namespace}`)
.then(response => {
if(response.data.success){
this.app_arr = response.data.data
}
})
},
gotopage(){
this.$router.push(`/yygl/${this.$route.params.level}/${this.$route.params.type}/appdebuggerdetail/${this.$route.params.deploy_id}?content=0`)
},
gotopage1(){
this.$router.push(`/yygl/${this.$route.params.level}/${this.$route.params.type}/appdebuggerdetail/${this.$route.params.deploy_id}?content=1`)
},
get_list_pod(){
this.$http this.$http
.get(`/apaas/hubApi/market/services/${this.$route.params.deploy_id}`) .get(`/apaas/hubApi/cloud/podList/${this.formInline.area}?itemsPerPage=${this.pageSize}&page=${this.currentPage}&label=${this.formInline.name}&filterBy=${this.pod_name}`)
.then(response => { .then(response => {
if(response.data.success){ if(response.data.success){
this.service_list_arr = response.data.data this.listTotal = response.data.data.listMeta.totalItems
this.tableData = []
response.data.data.pods.forEach(e => {
var temp_tag = []
for (const key in e.objectMeta.labels) {
temp_tag.push(
key+':'+e.objectMeta.labels[key]
)
}
var temp_time = this.time_deal(e.objectMeta.creationTimestamp)
this.tableData.push({
icon:e.podStatus.status=="Running"?'1':e.podStatus.status=="Succeeded"?'2':'3',
name:e.objectMeta.name,
tag:temp_tag,
node:e.nodeName,
state:e.podStatus.status,
times:e.restartCount,
cpu:this.cpu_deal(e.metrics.cpuUsageHistory),
cpu_use:e.metrics.cpuUsage,
mermoy:this.cpu_deal(e.metrics.memoryUsageHistory),
memory_use:e.metrics.memoryUsage,
time:temp_time,
namespace:this.formInline.area
})
});
} }
}) })
}, },
onSubmit(){ cpu_deal(arr){
var temp = []
arr.forEach(e => {
temp.push(e.value)
});
return temp
},
time_deal(data){
data = data.replace('Z','')
var temp = data.split('T')
var temp_all = [...temp[0].split('-'),...temp[1].split(':')]
if(parseInt(temp_all[3])+8>=24){
temp_all[3]=parseInt(temp_all[3])-16>=10?parseInt(temp_all[3])-16:"0"+(parseInt(temp_all[3])-16)
temp_all[2]=parseInt(temp_all[2])+1>=10?parseInt(temp_all[2])+1:"0"+(parseInt(temp_all[2])+1)
}else if(parseInt(temp_all[3])+8>=10){
temp_all[3] = parseInt(temp_all[3])+8
}else{
temp_all[3] = '0'+(parseInt(temp_all[3])+8)
}
return temp_all[0]+'-'+temp_all[1]+'-'+temp_all[2]+' '+temp_all[3]+':'+temp_all[4]+':'+temp_all[5]
},
lookrecord(val){
console.log(val);
this.$http
.get(`/awecloud/rest/kubernetes/api/v1/_raw/pod/namespace/${val.namespace}/name/${val.name}`)
.then(response => {
console.log(response.data);
debugger
this.code_arr = yaml.stringify(response.data)
this.$refs.actiondialog.show();
})
}, },
changePageSize(value) { changePageSize(value) {
this.pageSize = value; this.pageSize = value;
...@@ -296,4 +376,39 @@ export default { ...@@ -296,4 +376,39 @@ export default {
margin-top: 10px; margin-top: 10px;
vertical-align: -2px; vertical-align: -2px;
} }
.yaml_json{
width: 176px;
height: 44px;
background-color: #f7f8f9;
border-radius: 6px;
padding: 7px;
}
.yaml_json div{
width: 77px;
height: 30px;
line-height: 30px;
text-align: center;
color: #0f2683;
border-radius: 6px;
float: left;
font-size: 14px;
cursor: pointer;
}
.yaml_json div:nth-of-type(2){
float: right;
}
.tips{
font-size: 12px;
color: #8890a7;
height: 34px;
line-height: 34px;
text-align: left;
background-color: #f8f9fd;
border-radius: 8px;
margin: 18px 0;
padding-left: 10px;
}
.tips i{
margin-right: 10px;
}
</style> </style>
\ No newline at end of file
src/pages/workbench/yygl/app_debugger_detail.vue 0 → 100644
View file @ e3c79497
<template>
<div class="detail_contain">
<p class="now_page_title">
我的应用 / 部署的应用 / 应用详情 /
<span>应用调试</span>
</p>
<div class="search_list">
<div class="list_header">
<span></span>
<span>{{ $route.query.content == 1 ? "命令行" : "容器日志" }}</span>
<el-select v-model="pod" placeholder="请选择">
<el-option
v-for="item in pod_arr"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<span v-if="$route.query.content == 0">位于</span>
<el-select
v-model="pod_group"
placeholder="请选择"
v-if="$route.query.content == 0"
>
<el-option
v-for="item in pod_group_arr"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<span v-if="$route.query.content == 1">在请问请问1212</span>
<div v-if="$route.query.content == 0" style="float:right;">
<el-tooltip class="item" effect="dark" content="显示时间戳" placement="top">
<div class="time" @click="change_contl(0)" :style="control_arr[0]?{backgroundImage:'url('+require('../../../assets/imgs/rqrz_btn_time_sel.png')+')'}:''"></div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="自动刷新（每10s）" placement="top">
<div class="restart" @click="change_contl(1)" :style="control_arr[1]?{backgroundImage:'url('+require('../../../assets/imgs/rqrz_btn_refresh_sel.png')+')'}:''"></div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="显示以前的日志" placement="top">
<div class="recode" @click="change_contl(2)" :style="control_arr[2]?{backgroundImage:'url('+require('../../../assets/imgs/rqrz_btn_look_sel.png')+')'}:''"></div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="下载" placement="top">
<div class="download" @click="download"></div>
</el-tooltip>
</div>
</div>
<el-scrollbar class="record_contain" v-if="$route.query.content == 0">
<p
v-for="(item, index) in data_arr"
:key="index + 89000"
v-html="(control_arr[0]?'1111':'')+item"
></p>
</el-scrollbar>
<div id="xterm_contain" v-if="$route.query.content == 1"></div>
<p class="code" v-if="$route.query.content == 0">
<span>日志范围从 4/22/20 3:05 AM 到 4/22/20 3:05 AM UTC</span>
<img
:src="item"
alt=""
v-for="(item, index) in image_arr"
:key="index + 12000"
/>
</p>
<div class="back" @click="$router.back(-1)">返回</div>
</div>
<apass-dialog
ref="actiondialog"
title="下载日志文件"
sunbmitText="保存"
:submitDisable="download_flag"
@submit="save_file"
>
<template slot="content">
<div>
<div style="margin:20px 0;line-height:30px;">
<p>请等待下载完成</p>
<p>已下载： {{process}}</p>
</div>
<el-progress :percentage="process" :format="format"></el-progress>
</div>
</template>
</apass-dialog>
</div>
</template>
<script>
import "xterm/css/xterm.css";
import { Terminal } from "xterm";
import { FitAddon } from 'xterm-addon-fit';
import apassDialog from '@/components/apass-dialog'
export default {
props: [],
components: {
apassDialog
},
data() {
return {
pod: "",
image_arr: [],
control_arr:[0,0,0],
pod_arr: [
{
value: 1,
label: "jakdsj",
},
{
value: 2,
label: "容器1",
},
{
value: 3,
label: "容器2",
},
],
pod_group: "",
process:0,
pod_group_arr: [
{
value: 1,
label: "jakdsj",
},
{
value: 2,
label: "容器1",
},
{
value: 3,
label: "容器2",
},
],
temp_time:'',
download_flag:true,
data_arr: [
"1231231233",
"jhabshjdabshdbasjdhb",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsdiquhdiw",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
"iquhdiwqbdjkbaskjdbajsd",
],
};
},
watch: {},
computed: {},
created() {},
mounted() {
if (this.$route.query.content == 1) {
var _this = this
var term = new Terminal();
const fitAddon = new FitAddon();
term.loadAddon(fitAddon);
term.open(document.getElementById("xterm_contain"));
fitAddon.fit();
var temp = ''
function runFakeTerminal() {
if (term._initialized) {
return;
}
term._initialized = true;
term.prompt = () => {
term.write("\r\n$ ");
};
prompt(term,false);
term.onKey((e) => {
const printable =
!e.domEvent.altKey &&
!e.domEvent.altGraphKey &&
!e.domEvent.ctrlKey &&
!e.domEvent.metaKey;
if (e.domEvent.keyCode === 13) {
//enter
prompt(term);
} else if (e.domEvent.keyCode === 8) {
// Do not delete the prompt
if (term._core.buffer.x > 2) {
term.write("\b \b");
}
} else if (printable) {
term.write(e.key);
}
});
}
function prompt(term,val=true) {
// term.write("\r\n$ ");
if(val){
term.write("\r\n");
term.write(_this.getdata())
}
term.write("\r\n$ ");
}
runFakeTerminal();
}
},
methods: {
getdata(){
return '54555555'
},
change_contl(n){
if(this.control_arr[n]){
this.$set(this.control_arr,n,0)
}else{
this.$set(this.control_arr,n,1)
}
if(n==1){
if(this.control_arr[n]==1){
this.temp_time=setInterval(()=>{
this.data_arr = []
this.data_arr.push(this.getrecode(!this.control_arr[2]==1))
},1000)
}else{
if(this.temp_time){
clearInterval(this.temp_time)
}
}
}
if(n==2){
this.data_arr = []
if(this.control_arr[n]==1){
this.data_arr.push(this.getrecode(false))
}else{
this.data_arr.push(this.getrecode())
}
}
},
getrecode(n=true){
if(n){
return '124123432423432324'
}else{
return '555555555555555'
}
},
download(){
var temp = setInterval(()=>{
this.process=this.process+1
if(this.process>=99){
clearInterval(temp)
this.process = 100
this.download_flag = false
}
},10)
this.$refs.actiondialog.show();
},
format(n){
return ''
},
save_file(){
console.log('1111');
}
},
};
</script>
<style>
.search_list .el-scrollbar__wrap {
overflow-x: hidden;
}
.search_list .el-scrollbar {
border-radius: 0px;
}
#xterm_contain ::-webkit-scrollbar {
width: 0px; /*对垂直流动条有效*/
height: 10px; /*对水平流动条有效*/
}
/*定义滚动条的轨道颜色、内阴影及圆角*/
#xterm_contain ::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: rosybrown;
border-radius: 3px;
}
/*定义滑块颜色、内阴影及圆角*/
#xterm_contain ::-webkit-scrollbar-thumb{
border-radius: 7px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #E8E8E8;
}
/*定义两端按钮的样式*/
#xterm_contain ::-webkit-scrollbar-button {
background-color:cyan;
}
/*定义右下角汇合处的样式*/
#xterm_contain ::-webkit-scrollbar-corner {
background:khaki;
}
</style>
<style scoped>
.detail_contain {
width: 100%;
padding: 0 20px;
height: calc(100% - 25px);
}
.now_page_title {
margin: 15px 0;
color: #898d9e;
}
.now_page_title span {
color: #242c43;
}
.search_list {
width: 100%;
height: calc(100% - 45px);
margin-top: 20px;
background-color: #ffffff;
box-shadow: 0px 3px 6px 0px #f4f7fc;
border-radius: 12px;
}
.list_header {
height: 80px;
padding: 20px;
}
.list_header span:nth-of-type(1) {
width: 4px;
height: 16px;
background-color: #515fe7;
border-radius: 2px;
display: inline-block;
margin-right: 10px;
margin-top: 10px;
vertical-align: -2px;
}
.list_header span:nth-of-type(2) {
font-size: 16px;
font-weight: 600;
margin-right: 50px;
}
.list_header span:nth-of-type(3) {
margin-left: 10px;
margin-right: 10px;
}
.record_contain {
width: 100%;
height: calc(100% - 200px);
background-color: #1d1e20;
padding: 30px;
padding-right: 0;
}
.record_contain p {
font-size: 14px;
color: #e3e5ef;
}
#xterm_contain{
height: calc(100% - 200px);
}
.code {
margin-left: 32px;
margin-top: 15px;
}
.code span {
color: #1a2236;
}
.code img {
float: right;
}
.back {
width: 124px;
height: 44px;
line-height: 44px;
text-align: center;
background-color: #0f2683;
border-radius: 8px;
font-size: 16px;
margin-left: 32px;
color: #f8f9fd;
cursor: pointer;
margin-top: 15px;
}
.time,.restart,.recode,.download{
width: 18px;
height: 18px;
background-size: contain;
margin-top: 10px;
margin-right: 40px;
float: left;
cursor: pointer;
}
.time{
background-image: url('../../../assets/imgs/rqrz_btn_time.png');
}
.time:hover{
background-image: url('../../../assets/imgs/rqrz_btn_time_sel.png');
}
.restart{
background-image: url('../../../assets/imgs/rqrz_btn_refresh.png');
}
.restart:hover{
background-image: url('../../../assets/imgs/rqrz_btn_refresh_sel.png');
}
.recode{
background-image: url('../../../assets/imgs/rqrz_btn_look.png');
}
.recode:hover{
background-image: url('../../../assets/imgs/rqrz_btn_look_sel.png');
}
.download{
background-image: url('../../../assets/imgs/rqrz_btn_download.png');
}
</style>
src/pages/workbench/yygl/deploy_app_detail.vue
View file @ e3c79497
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<span>应用详情</span> <span>应用详情</span>
</p> </p>
<div class="info_contain"> <div class="info_contain">
<service-header :data="service_header_arr" ></service-header> <service-header :data="service_header_arr" @debuggerfunc="debuggerfunc"></service-header>
<div class="type_box"> <div class="type_box">
<div class="type_title"> <div class="type_title">
<div <div
...@@ -234,6 +234,7 @@ export default { ...@@ -234,6 +234,7 @@ export default {
oldpag_name: "镜像文件002.rar", oldpag_name: "镜像文件002.rar",
imgList: [], imgList: [],
imgList1: [], imgList1: [],
header_data:"",
service_list_arr:[ service_list_arr:[
{ {
service:'cemplat-api1', service:'cemplat-api1',
...@@ -635,6 +636,9 @@ export default { ...@@ -635,6 +636,9 @@ export default {
online(val) { online(val) {
console.log(val); console.log(val);
}, },
debuggerfunc(){
this.$router.push(`/yygl/${this.$route.params.level}/${this.$route.params.type}/appdebugger?namespace=${this.header_data.namespace}&app=${this.header_data.deploy_name}`)
},
getImageInfo() { getImageInfo() {
this.$http this.$http
.get("./static/deployappdetail.json") .get("./static/deployappdetail.json")
...@@ -735,6 +739,7 @@ export default { ...@@ -735,6 +739,7 @@ export default {
.get(`/apaas/hubApi/market/deployInfo/${this.$route.params.deploy_id}`) .get(`/apaas/hubApi/market/deployInfo/${this.$route.params.deploy_id}`)
.then(response => { .then(response => {
let data = response.data.data; let data = response.data.data;
this.header_data = data
this.$set( this.$set(
this.service_header_arr, this.service_header_arr,
"name", "name",
......
src/router/index.js
View file @ e3c79497
...@@ -98,11 +98,17 @@ export default new Router({ ...@@ -98,11 +98,17 @@ export default new Router({
import("@/pages/workbench/yygl/deploy_app_detail"), import("@/pages/workbench/yygl/deploy_app_detail"),
}, },
{ {
path: "/yygl/:level/:type/appdebugger/:deploy_id", // 我部署的应用详情-应用调试 path: "/yygl/:level/:type/appdebugger", // 我部署的应用详情-应用调试
name: "app_debugger", name: "app_debugger",
component: () => component: () =>
import("@/pages/workbench/yygl/app_debugger"), import("@/pages/workbench/yygl/app_debugger"),
}, },
{
path: "/yygl/:level/:type/appdebuggerdetail/:deploy_id", // 我部署的应用详情-应用调试-详情
name: "app_debugger_detail",
component: () =>
import("@/pages/workbench/yygl/app_debugger_detail"),
},
{ {
path: "/yygl/:level/:type/applydetail/:id/:app_id", // 我申请的应用详情 path: "/yygl/:level/:type/applydetail/:id/:app_id", // 我申请的应用详情
name: "apply_app_detail", name: "apply_app_detail",
......
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