Skip to content
Permalink
Browse files

update ui

  • Loading branch information...
sunface committed Apr 15, 2019
1 parent db967e8 commit b6ae516e53c59f05e11214bc72146b3f4095b243
@@ -4,5 +4,5 @@ const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
WEB_ADDR: '"http://10.50.11.66:8085/"'
WEB_ADDR: '"http://10.50.6.51:8085/"'
})
@@ -13,7 +13,7 @@ module.exports = {
proxyTable: {},

// Various Dev Server settings
host: '10.50.11.66', // can be overwritten by process.env.HOST
host: '10.50.6.51', // can be overwritten by process.env.HOST
port: 9530, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true,
errorOverlay: true,
@@ -66,6 +66,9 @@
.margin-top-20 {
margin-top: 20px
}
.margin-top-30 {
margin-top: 30px
}
.margin-top-40 {
margin-top: 40px
}
@@ -76,7 +76,7 @@ export default {
format: '{value: %m-%d %H:%M}',
setp: 1
},
tickPositions: [],
// tickPositions: [],
startOnTick: true,
endOnTick: true,
showLastLabel: false,
@@ -111,13 +111,13 @@ export default {
plotOptions: {
scatter: {
marker: {
radius: 3,
states: {
hover: {
enabled: true,
// lineColor: 'rgb(100,100,100)'
}
}
radius: 3
// states: {
// hover: {
// enabled: true,
// // lineColor: 'rgb(100,100,100)'
// }
// }
},
states: {
hover: {
@@ -126,10 +126,10 @@ export default {
}
}
},
tooltip: {
pointFormat: '{point.x: %m-%d %H:%M:%S}'
},
enableMouseTracking: true,
// tooltip: {
// pointFormat: '{point.x: %m-%d %H:%M:%S}'
// },
enableMouseTracking: false,
turboThreshold: "disable"
}
},
@@ -140,13 +140,11 @@ export default {
function selectPointsByDrag(e) {
if (e.xAxis && e.yAxis) {
var traces = [];
// if (self.tracesChart.series[0].visible === undefined || self.tracesChart.series[0].visible === true) {
var succesdata = self.tracesChart.series[0].data;
for (var i = 0; i < succesdata.length; i++) {
var point = succesdata[i];
if (point.x >= e.xAxis[0].min && point.x <= e.xAxis[0].max &&
point.y >= e.yAxis[0].min && point.y <= e.yAxis[0].max) {
// traces += point.traceId + ":" + point.agentId + ":" + point.startTime + ","
var trace = {
traceId: point.id,
agentId: point.agent_id,
@@ -160,14 +158,11 @@ export default {
}
}
// }
// if (self.tracesChart.series[1].visible === undefined || self.tracesChart.series[1].visible === true) {
var errordata = self.tracesChart.series[1].data;
for (var j = 0; j < errordata.length; j++) {
var point2 = errordata[j];
if (point2.x >= e.xAxis[0].min && point2.x <= e.xAxis[0].max &&
point2.y >= e.yAxis[0].min && point2.y <= e.yAxis[0].max) {
// traces += point2.traceId + ":" + point2.agentId + ":" + point2.startTime + ","
var trace2 = {
traceId: point2.id,
agentId: point2.agent_id,
@@ -180,7 +175,6 @@ export default {
traces.push(trace2);
}
}
// }
if (traces !== "") {
self.$emit("selTraces", traces)
@@ -1,7 +1,7 @@
<template>
<div>
<Row class="subnav" style="background-color:#595959;border-bottom: 1px solid #474747;color:#eaeaea;padding: 8px 10px;padding-bottom:6px;vertical-align:middle;font-size:13px;margin-top:0px">
<span class="item">总应用数:<span class="count bg-second">300</span></span>
<span class="item">总应用数:<span class="count bg-second">{{appList.length}}</span></span>
<span class="item">不健康应用数: <span class="count bg-second">0</span></span>
<span class="item">最近3小时告警数: <span class="count bg-second">0</span></span>
</Row>
@@ -16,7 +16,7 @@
<div class="font-size-16">最低响应时间(ms)</div>
<Input v-model="minElapsed" placeholder="e.g. 100,留空代表不限制" style="width: 100%" size="large" />
</div>
<div class="margin-top-40">
<div class="margin-top-40">
<div class="font-size-16">最大响应时间(ms)</div>
<Input v-model="maxElapsed" placeholder="e.g. 3000,留空代表并不限制" style="width: 100%" size="large" />
</div>
@@ -77,20 +77,25 @@
</div>
</div>

<div class="padding-top-5 trace-pane">
<div class="padding-top-5 trace-pane" style="padding-bottom:50px">
<Row>
<Col span="10" class="title split-border">方法(点击具体方法名可查看详情)</Col>
<Col span="5" class="title split-border">参数</Col>
<Col span="3" class="title split-border">耗时(ms)</Col>
<Col span="3" class="title split-border">API</Col>
<Col span="11" class="title split-border">方法(点击具体方法名可查看详情)</Col>
<Col span="5" class="title">参数</Col>
<Col span="2" class="title">耗时(ms)</Col>
<Col span="3" class="title">API</Col>
<Col span="3" class="title">所属应用</Col>
</Row>
<div class="body">
<Row v-for="r in traceData.value" v-show="isShow(r)" class="hover-cursor" @click.native="spanDetail(r)" :class="classObject(r)" >
<Col span="10" class="item split-border" :style="{paddingLeft:r.paddingLeft+'px'}"> {{getMethod(r.method)}}</Col>
<Col span="5" class="item split-border"> {{r.params}}</Col>
<Col span="3" class="item split-border">{{r.self}}</Col>
<Col span="3" class="item split-border"> {{r.api}}</Col>
<Col span="11" class="item split-border" :style="{paddingLeft:r.paddingLeft+'px'}">
<Icon v-if="r.show=='expand'" type="ios-add" @click.stop="expand(r)" style="padding:3px 3px" />
<Icon v-else-if="r.show=='collapse'" type="ios-remove" @click.stop="collapse(r)" style="padding:3px 3px"/>
<!-- 这里的padding-left是为了让没有展开/收缩符号的文字跟有符号的文字左对齐 -->
<span :style="{paddingLeft:calcTextMarginLeft(r)+'px'}">{{getMethod(r.method)}}</span>
</Col>
<Col span="5" class="item"> {{r.params}}</Col>
<Col span="2" class="item">{{r.self}}</Col>
<Col span="3" class="item"> {{r.api}}</Col>
<Col span="3" class="item">{{r.agentName}}</Col>
</Row>
</div>
@@ -120,9 +125,9 @@
<FormItem label="参数">
{{selItem.params}}
</FormItem>
<FormItem label="层级(Debug)">
<!-- <FormItem label="层级(Debug)">
{{selItem.name}}
</FormItem>
</FormItem> -->
</Form>
</Drawer>
</div>
@@ -192,6 +197,24 @@ export default {
},
methods: {
calcTextMarginLeft(r) {
if (r.show != 'expand' && r.show != 'collapse') {
return 21
}
return 0
},
expand(r) {
r.show = 'collapse'
for (var i=0;i<this.collapseList.length;i++) {
if (this.collapseList[i] == r.name) {
this.collapseList.splice(i,1)
}
}
},
collapse(r) {
r.show='expand'
this.collapseList.push(r.name)
},
queryTraces() {
this.$Loading.start();
request({
@@ -209,6 +232,8 @@ export default {
}
}).then(res => {
this.tracesData = res.data.data
this.selectedTraces = []
console.log("query traces:",this.tracesData)
this.$Loading.finish();
if (!this.tracesData.is_suc) {
this.$Message.info({
@@ -224,6 +249,9 @@ export default {
// 对于collapseList中的每个值,判断当前行是否在它的子树中,若在,则不显示,跳出循环
// 若当前name是以collapseList的值为前缀,说明在子树中
for (var i=0;i<this.collapseList.length;i++) {
if (r.name == this.collapseList[i]) {
continue
}
var j = r.name.indexOf(this.collapseList[i]);
if(j == 0){
return false
@@ -276,10 +304,15 @@ export default {
url: '/apm/web/trace',
method: 'GET',
params: {
traceId : t.traceId
trace_id : t.traceId
}
}).then(res => {
this.traceData = JSON.parse(res.data.data)
for (var i=0;i<this.traceData.value.length;i++) {
if (this.traceData.value[i].hasChildren) {
this.traceData.value[i].show = 'collapse'
}
}
this.traceVisible = true
console.log(this.selectedTrace)
console.log(this.traceData)
@@ -318,7 +351,7 @@ export default {
background: #f3f3f3;
padding-left:5px;
padding-top:6px;
padding-bottom:6px
padding-bottom:6px;
}
.body {
.item {
@@ -11,7 +11,9 @@
<li class="product ng-scope insights active">
</li>
<li class="product ng-scope apm not-active">
<a href="/apm/ui/list">应用监控</a>
<router-link to="/apm/ui/list">
<a>应用监控</a>
</router-link >
</li>
<li class="product ng-scope browser not-active">
业务监控
@@ -20,7 +22,9 @@
系统监控
</li> -->
<li class="product ng-scope alerts not-active">
<a href="/apm/ui/alerts">告警平台</a>
<router-link to="/apm/ui/alerts">
<a>告警平台</a>
</router-link >
</li>
<li class="product ng-scope infrastructure not-active">
使用帮助
@@ -108,7 +108,7 @@ func QueryTraces(c echo.Context) error {
ct.Suc = false
} else {
ct.Suc = true
ct.Xaxis = []int64{start.UnixNano() / 1e6, end.UnixNano() / 1e6}
ct.Xaxis = []int64{start.Unix() / 1e6, end.Unix() / 1e6}
ct.Title = fmt.Sprintf("success: %d, error: %d", len(traces), 0)

sucData := &TraceSeries{
@@ -132,7 +132,48 @@ func QueryTraces(c echo.Context) error {
})
}

type TraceSpan struct {
ID int64 `json:"id"`
AppName string `json:"app_name"`
Method string `json:"method"`
Duration int `json:"duration"`
Api string `json:"api"`
Params string `json:"params"`
ServiceType string `json:"service_type"`
AgentID string `json:"agent_id"`
Class string `json:"class"`
StartTime string `json:"start_time"`
}

func QueryTrace(c echo.Context) error {
tid := c.FormValue("trace_id")

q := misc.Cql.Query(`SELECT span_id,parent_id,app_name,agent_id,input_date,elapsed,api,service_type,
end_point,remote_addr,err,span_event_list,method_id,annotations from traces where trace_id=?`, tid)
iter := q.Iter()

var spanID, pid, inputDate int64
var elapsed, serviceType, err, methodID int
var appName, agentID, api, endPoint, remoteAddr, events, annotations string
for iter.Scan(&spanID, &pid, &appName, &agentID, &inputDate, &elapsed, &api, &serviceType,
&endPoint, &remoteAddr, &err, &events, &methodID, &annotations) {
fmt.Println(spanID, pid, appName, agentID, inputDate, elapsed, api, serviceType, endPoint, remoteAddr, err, events, methodID, annotations)

q = misc.Cql.Query(`SELECT method_info,line FROM app_methods WHERE app_name = ? and method_id=?`, appName, methodID)
var apiInfo string
var line int
err := q.Scan(&apiInfo, &line)
if err != nil {
g.L.Info("access database error", zap.Error(err), zap.String("query", q.String()))

continue
}
fmt.Println(apiInfo, line)
}

if err := iter.Close(); err != nil {
g.L.Warn("close iter error:", zap.Error(err))
}
return c.JSON(http.StatusOK, g.Result{
Status: http.StatusOK,
Data: tests.SingleTraceData,
Oops, something went wrong.

0 comments on commit b6ae516

Please sign in to comment.
You can’t perform that action at this time.