|
|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div style="padding:16px;">
|
|
|
- <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px" @submit.native.prevent>
|
|
|
+ <!-- <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px" @submit.native.prevent>
|
|
|
<el-form-item label="" prop="url">
|
|
|
<el-input
|
|
|
v-model="queryParams.url"
|
|
|
@@ -10,19 +10,18 @@
|
|
|
@keyup.enter.native="handleQuery"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
- </el-form>
|
|
|
+ </el-form> -->
|
|
|
|
|
|
- <el-row :gutter="10" class="mb8">
|
|
|
+ <!-- <el-row :gutter="10" class="mb8">
|
|
|
<el-col :span="1.5">
|
|
|
<el-button
|
|
|
- v-permisaction="['disposition:index:add']"
|
|
|
type="primary"
|
|
|
icon="el-icon-plus"
|
|
|
size="mini"
|
|
|
@click="handleAdd"
|
|
|
>新增</el-button>
|
|
|
</el-col>
|
|
|
- </el-row>
|
|
|
+ </el-row> -->
|
|
|
|
|
|
<div>
|
|
|
<!-- v-el-table-infinite-scroll="loadMore" :height="tableHeight"-->
|
|
|
@@ -33,10 +32,14 @@
|
|
|
@row-click="handleRowClick"
|
|
|
>
|
|
|
<el-table-column header-align="left" label="接口名" prop="name" align="left" :show-overflow-tooltip="true"/>
|
|
|
- <el-table-column header-align="left" label="URL组" prop="url" align="left" :show-overflow-tooltip="true">
|
|
|
+ <el-table-column header-align="left" label="ServiceName" prop="service_name" align="left" :show-overflow-tooltip="true">
|
|
|
<template slot-scope="scope">
|
|
|
- <!-- <span style="cursor:pointer" @click="toogleExpand(row,$index)">{{scope.row.url}}</span> -->
|
|
|
- <span>{{scope.row.url}}</span>
|
|
|
+ <span>{{scope.row.service_name}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column header-align="left" label="SpanName" prop="span_name" align="left" :show-overflow-tooltip="true">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{scope.row.span_name}}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column header-align="center" label="rpm" sortable prop="rpm" align="center" :show-overflow-tooltip="true">
|
|
|
@@ -71,12 +74,12 @@
|
|
|
<el-tag v-if="scope.row.avg<2000">{{ Number(scope.row.avg).toFixed(2) }}</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column header-align="center" label="延迟比例" prop="duration_stats" align="center">
|
|
|
+ <!-- <el-table-column header-align="center" label="延迟比例" prop="duration_stats" align="center">
|
|
|
<template slot-scope="scope">
|
|
|
{{ drawEchartsp5(scope.row, scope.$index, 'five') }}
|
|
|
<div :id="`tiger-five-trend-index` + scope.$index" class="tiger-trend-charts"></div>
|
|
|
</template>
|
|
|
- </el-table-column>
|
|
|
+ </el-table-column> -->
|
|
|
<el-table-column
|
|
|
label="操作"
|
|
|
align="center"
|
|
|
@@ -123,7 +126,7 @@
|
|
|
:total="total"
|
|
|
:page.sync="childQueryParams.pageIndex"
|
|
|
:limit.sync="childQueryParams.pageSize"
|
|
|
- @pagination="handelgetUrlMappingRange"
|
|
|
+ @pagination="handelgetBizDetail"
|
|
|
/> -->
|
|
|
|
|
|
<!-- 添加或修改应用配置对话框 -->
|
|
|
@@ -232,7 +235,7 @@
|
|
|
:total="total"
|
|
|
:page.sync="childQueryParams.pageIndex"
|
|
|
:limit.sync="childQueryParams.pageSize"
|
|
|
- @pagination="handelgetUrlMappingRange"
|
|
|
+ @pagination="handelgetBizDetail"
|
|
|
/>
|
|
|
</div>
|
|
|
</el-drawer>
|
|
|
@@ -293,13 +296,11 @@ export default {
|
|
|
queryParams: {
|
|
|
// start_time:Math.round((new Date().getTime())/1000 - (5*60)),
|
|
|
// end_time:Math.round(new Date().getTime()/1000),
|
|
|
- start_time:0,
|
|
|
- end_time:0,
|
|
|
- app_id:undefined,
|
|
|
- favor:'',
|
|
|
- url:'',
|
|
|
- pageIndex: 1,
|
|
|
- pageSize: 50,
|
|
|
+ app_id:'',
|
|
|
+ start_time:'',
|
|
|
+ end_time:'',
|
|
|
+ pageIndex:1,
|
|
|
+ pageSize:10,
|
|
|
},
|
|
|
// 表单参数
|
|
|
form: {
|
|
|
@@ -323,10 +324,7 @@ export default {
|
|
|
// end_time:Math.round(new Date().getTime()/1000),
|
|
|
start_time:0,
|
|
|
end_time:0,
|
|
|
- id:0,
|
|
|
- app_id:0,
|
|
|
- kind:'',
|
|
|
- only_error:0,
|
|
|
+ biz_id:1,
|
|
|
pageIndex: 1,
|
|
|
pageSize: 10,
|
|
|
},
|
|
|
@@ -337,6 +335,7 @@ export default {
|
|
|
start_time:'',
|
|
|
end_time:'',
|
|
|
},
|
|
|
+ tempList:[],
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -345,6 +344,8 @@ export default {
|
|
|
if(newValue){
|
|
|
this.queryParams.start_time = newValue.startTime;
|
|
|
this.queryParams.end_time = newValue.endTime
|
|
|
+ this.BizStatsQuery.start_time= newValue.start_time;
|
|
|
+ this.BizStatsQuery.end_time= newValue.end_time;
|
|
|
this.childQueryParams.start_time = newValue.startTime;
|
|
|
this.childQueryParams.end_time = newValue.endTime
|
|
|
this.queryParams.pageIndex = 1
|
|
|
@@ -384,11 +385,13 @@ export default {
|
|
|
|
|
|
this.appItem=storage.get('appsItem');
|
|
|
if(JSON.stringify(this.appItem) !="{}"){
|
|
|
- this.queryTrace.app_id = this.appItem.id;
|
|
|
- this.queryTrace.start_time = this.appItem.start_time;
|
|
|
- this.queryTrace.end_time = this.appItem.end_time;
|
|
|
- // this.BizStatsQuery.start_time= this.appItem.start_time;
|
|
|
- // this.BizStatsQuery.end_time= this.appItem.end_time;
|
|
|
+ this.queryParams.app_id = this.appItem.id;
|
|
|
+ this.queryParams.start_time = this.appItem.start_time;
|
|
|
+ this.queryParams.end_time = this.appItem.end_time;
|
|
|
+ this.BizStatsQuery.start_time= this.appItem.start_time;
|
|
|
+ this.BizStatsQuery.end_time= this.appItem.end_time;
|
|
|
+ this.childQueryParams.start_time = this.appItem.start_time;
|
|
|
+ this.childQueryParams.end_time = this.appItem.end_time;
|
|
|
this.getList()
|
|
|
}
|
|
|
// this.columnChange();
|
|
|
@@ -418,7 +421,7 @@ export default {
|
|
|
console.log(row,'点击展开行');
|
|
|
this.drawer=true;
|
|
|
this.childQueryParams.id = row.id;
|
|
|
- this.handelgetUrlMappingRange();
|
|
|
+ this.handelgetBizDetail();
|
|
|
},
|
|
|
handleRowClick(row, column, event){
|
|
|
console.log(row,'点击行');
|
|
|
@@ -429,14 +432,14 @@ export default {
|
|
|
setTimeout(()=>{
|
|
|
|
|
|
// this.childQueryParams.id = row.id;
|
|
|
- this.childQueryParams.kind = row.kind;
|
|
|
- this.handelgetUrlMappingRange();
|
|
|
+ this.childQueryParams.biz_id = row.id;
|
|
|
+ this.handelgetBizDetail();
|
|
|
},0)
|
|
|
},
|
|
|
- handelgetUrlMappingRange(){
|
|
|
+ handelgetBizDetail(){
|
|
|
this.tableLoading = true
|
|
|
console.log(this.childQueryParams,'this.childQueryParams')
|
|
|
- getUrlMappingRange(this.childQueryParams).then(res => {
|
|
|
+ getBizDetail(this.childQueryParams).then(res => {
|
|
|
if(res.code == 200){
|
|
|
this.tableLoading = false;
|
|
|
console.log(res.data.list,'业务映射获取行的数据')
|
|
|
@@ -491,12 +494,24 @@ export default {
|
|
|
this.loading = true
|
|
|
listBiz(this.queryParams).then(res => {
|
|
|
if(res.code == 200){
|
|
|
- console.log(res.data.list,'业务映射')
|
|
|
+ console.log(res.data.list,'解析列表')
|
|
|
this.loading = false;
|
|
|
this.serveceMapList= this.serveceMapList.concat(res.data.list);
|
|
|
- console.log(this.serveceMapList,'this.serveceMapList 所有接口映射内容')
|
|
|
+ console.log(this.serveceMapList,'this.serveceMapList 解析列表')
|
|
|
this.tableCount = res.data.count;
|
|
|
this.queryParams.pageIndex = res.data.pageIndex;
|
|
|
+
|
|
|
+ this.tempList = this.tempList.concat(res.data.list);
|
|
|
+ if(this.tempList.length>0){
|
|
|
+ for(let i=0;i<this.tempList.length;i++){
|
|
|
+ this.BizStatsQuery.biz_id = this.tempList[i].id
|
|
|
+ listBizStats(this.BizStatsQuery).then(resq=>{
|
|
|
+ console.log(resq,'第二次获取数据，用于拼接')
|
|
|
+ this.tempList[i] = {...this.tempList[i],...resq.data}
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.serveceMapList = this.tempList;
|
|
|
+ }
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
@@ -533,6 +548,7 @@ export default {
|
|
|
handleQuery() {
|
|
|
this.queryParams.pageIndex = 1
|
|
|
this.serveceMapList=[];
|
|
|
+ this.tempList=[];
|
|
|
this.getList()
|
|
|
// this.getList()
|
|
|
// if(this.queryParams.url != ''){
|
|
|
@@ -608,6 +624,7 @@ export default {
|
|
|
this.open = false
|
|
|
this.queryParams.pageIndex =1;
|
|
|
this.serveceMapList=[];
|
|
|
+ this.tempList=[];
|
|
|
this.getList()
|
|
|
} else {
|
|
|
this.msgError(response.msg)
|
|
|
@@ -620,6 +637,7 @@ export default {
|
|
|
this.open = false
|
|
|
this.queryParams.pageIndex =1;
|
|
|
this.serveceMapList=[];
|
|
|
+ this.tempList=[];
|
|
|
this.getList()
|
|
|
} else {
|
|
|
this.msgError(response.msg)
|
|
|
@@ -642,6 +660,7 @@ export default {
|
|
|
}).then((response) => {
|
|
|
this.queryParams.pageIndex =1;
|
|
|
this.serveceMapList=[];
|
|
|
+ this.tempList=[];
|
|
|
this.msgSuccess(response.msg);
|
|
|
this.getList()
|
|
|
}).catch(function() {})
|
|
|
@@ -658,6 +677,7 @@ export default {
|
|
|
this.msgSuccess(res.msg);
|
|
|
this.queryParams.pageIndex =1;
|
|
|
this.serveceMapList=[];
|
|
|
+ this.tempList=[];
|
|
|
this.getList()
|
|
|
}
|
|
|
})
|
|
|
@@ -720,7 +740,7 @@ export default {
|
|
|
type: 'category',
|
|
|
boundaryGap: false,
|
|
|
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
|
- data: row.duration_stats.time,
|
|
|
+ data: row.quantiles.time,
|
|
|
show:false
|
|
|
},
|
|
|
yAxis: {
|
|
|
@@ -735,7 +755,7 @@ export default {
|
|
|
symbol: 'none',
|
|
|
// // data: [120, 132, 101, 134, 90, 230, 210]
|
|
|
// data: Number(row.duration_stats.p50).toFixed(2)
|
|
|
- data:row.duration_stats.p50
|
|
|
+ data:row.quantiles.p50
|
|
|
},
|
|
|
{
|
|
|
name: 'P.95',
|
|
|
@@ -744,7 +764,7 @@ export default {
|
|
|
symbol: 'none',
|
|
|
// data: [320, 332, 301, 334, 390, 330, 320]
|
|
|
// data: Number(row.duration_stats.p90).toFixed(2)
|
|
|
- data:row.duration_stats.p90
|
|
|
+ data:row.quantiles.p90
|
|
|
},
|
|
|
{
|
|
|
name: 'P.99',
|
|
|
@@ -753,7 +773,7 @@ export default {
|
|
|
symbol: 'none',
|
|
|
// data: [820, 932, 901, 934, 1290, 1330, 1320]
|
|
|
// data: Number(row.duration_stats.p99).toFixed(2)
|
|
|
- data:row.duration_stats.p99
|
|
|
+ data:row.quantiles.p99
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
@@ -810,7 +830,7 @@ export default {
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
boundaryGap: false,
|
|
|
- data: row.duration_stats.time,
|
|
|
+ data: row.quantiles.time,
|
|
|
// show:true
|
|
|
},
|
|
|
yAxis: {
|
|
|
@@ -837,7 +857,7 @@ export default {
|
|
|
stack: 'Total',
|
|
|
symbol: 'none',
|
|
|
// symbol: 'emptyCircle',//拐点
|
|
|
- data:row.duration_stats.p50
|
|
|
+ data:row.quantiles.p50
|
|
|
},
|
|
|
{
|
|
|
name: 'P.95',
|
|
|
@@ -845,7 +865,7 @@ export default {
|
|
|
stack: 'Total',
|
|
|
symbol: 'none',//拐点
|
|
|
// symbol: 'emptyCircle',//拐点
|
|
|
- data:row.duration_stats.p90
|
|
|
+ data:row.quantiles.p90
|
|
|
},
|
|
|
{
|
|
|
name: 'P.99',
|
|
|
@@ -853,7 +873,7 @@ export default {
|
|
|
stack: 'Total',
|
|
|
symbol: 'none',//拐点
|
|
|
// symbol: 'emptyCircle',//拐点
|
|
|
- data:row.duration_stats.p99
|
|
|
+ data:row.quantiles.p99
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
@@ -882,7 +902,7 @@ export default {
|
|
|
|
|
|
_this.childQueryParams.start_time = timestamp
|
|
|
_this.childQueryParams.end_time =timestamp
|
|
|
- _this.handelgetUrlMappingRange();
|
|
|
+ _this.handelgetBizDetail();
|
|
|
})
|
|
|
},
|
|
|
drawEchartsp99() {
|
