提交 cb9acd3e 编写于 作者: Y yong.you

modify page for user Experience

上级 83bd7a81
......@@ -130,7 +130,7 @@ public class Cat {
Cat.getProducer().logMetric("default", name, Message.SUCCESS, sb.toString());
}
public static void recordMetric( String name, double value) {
public static void recordMetric(String name, double value) {
recordMetric( name, value, "SUM");
}
......
......@@ -154,7 +154,7 @@
<plugin>
<groupId>org.unidal.maven.plugins</groupId>
<artifactId>codegen-maven-plugin</artifactId>
<version>2.0.5</version>
<version>2.0.6</version>
<executions>
<execution>
<id>generate plexus component descriptor</id>
......@@ -176,7 +176,8 @@
<configuration>
<manifest>${basedir}/src/main/resources/META-INF/dal/model/threshold-template-manifest.xml,
${basedir}/src/main/resources/META-INF/dal/model/topology-graph-manifest.xml,
${basedir}/src/main/resources/META-INF/dal/model/topology-graph-config-manifest.xml,</manifest>
${basedir}/src/main/resources/META-INF/dal/model/topology-graph-config-manifest.xml,
${basedir}/src/main/resources/META-INF/dal/model/company-manifest.xml,</manifest>
</configuration>
</execution>
<execution>
......
......@@ -21,6 +21,8 @@ public class CatString {
public static final String RESPONSE_TIME = "响应时间";
public static final String EXCEPTION_COUNT = "错误数";
public static final String TOTAL_COUNT = "访问量";
public static final String EXCEPTION_INFO = "异常信息";
......
......@@ -55,6 +55,8 @@ public class TopologyGraphConfigManager implements Initializable, LogEnabled {
private static final String AVG_STR = CatString.RESPONSE_TIME;
private static final String ERROR_STR = CatString.EXCEPTION_COUNT;
private static final String TOTAL_STR = CatString.TOTAL_COUNT;
private static final String MILLISECOND = "(ms)";
......@@ -91,7 +93,7 @@ public class TopologyGraphConfigManager implements Initializable, LogEnabled {
}
public Pair<Integer, String> buildEdgeState(String domain, Dependency dependency) {
String type = dependency.getType();
String type = formatType(dependency.getType());
String from = domain;
String to = dependency.getTarget();
EdgeConfig config = queryEdgeConfig(type, from, to);
......@@ -101,6 +103,7 @@ public class TopologyGraphConfigManager implements Initializable, LogEnabled {
if (config != null) {
double avg = dependency.getAvg();
sb.append(buildDes(type,TOTAL_STR,String.valueOf(dependency.getTotalCount())));
if (avg >= config.getErrorResponseTime()) {
errorCode = ERROR;
......@@ -149,6 +152,7 @@ public class TopologyGraphConfigManager implements Initializable, LogEnabled {
if (config != null) {
double avg = index.getAvg();
long error = index.getErrorCount();
sb.append(buildDes(type,TOTAL_STR,String.valueOf(index.getTotalCount())));
if (avg >= config.getErrorResponseTime()) {
errorCode = ERROR;
......
......@@ -30,8 +30,14 @@ public class DomainNavManager implements Initializable {
@Inject
private ServerConfigManager m_serverConfigManager;
// key is domain
private static Map<String, Project> m_projects = new ConcurrentHashMap<String, Project>();
// key is product line
private static Map<String, Map<String, Project>> m_productLines = new ConcurrentHashMap<String, Map<String, Project>>();
public static final String DEFAULT = "Default";
public static Collection<String> getDomains() {
return m_projects.keySet();
}
......@@ -42,8 +48,8 @@ public class DomainNavManager implements Initializable {
synchronized (m_projects) {
for (String domain : domains) {
Project project = m_projects.get(domain);
String department = "Default";
String projectLine = "Default";
String department = DEFAULT;
String projectLine = DEFAULT;
if (project != null) {
department = project.getDepartment();
......@@ -73,13 +79,7 @@ public class DomainNavManager implements Initializable {
public void initialize() throws InitializationException {
reloadDomainInfo();
if (!m_serverConfigManager.isLocalMode()) {
try {
DomainReload reload = new DomainReload();
Threads.forGroup("Cat").start(reload);
} catch (Exception e) {
Cat.logError(e);
}
Threads.forGroup("Cat").start(new DomainReload());
}
}
......
<?xml version="1.0" encoding="UTF-8"?>
<model>
<entity name="company" root="true">
<attribute name="name" value-type="String" />
<entity-ref name="product-line" type="list" names="product-lines" />
</entity>
<entity name="product-line">
<attribute name="id" value-type="String" />
<attribute name="title" value-type="String" />
<attribute name="order" value-type="int" />
<attribute name="dashboard" value-type="boolean" />
<entity-ref name="domain" type="list" names="domains" />
</entity>
<entity name="domain">
<attribute name="id" value-type="String" />
</entity>
</model>
<?xml version="1.0" encoding="UTF-8"?>
<manifest>
<file path="company-codegen.xml" />
<file path="company-model.xml" />
</manifest>
<?xml version="1.0" encoding="UTF-8"?>
<model model-package="com.dianping.cat.home.company" enable-merger="true" enable-sax-parser="true"
enable-base-visitor="true" >
<entity name="product-line">
<attribute name="id" value-type="String" key="true"/>
<attribute name="title" value-type="String" />
<attribute name="order" value-type="double" primitive="true" />
<attribute name="important" value-type="boolean" primitive="true"/>
<entity-ref name="domain" type="map" names="domains" method-find-or-create="true"/>
</entity>
<entity name="domain">
<attribute name="id" value-type="String" key="true"/>
</entity>
</model>
......@@ -3,7 +3,6 @@
<entity name="topology-graph-config" root="true">
<entity-ref name="node-config" type="list" names="node-configs" />
<entity-ref name="edge-config" type="list" names="edge-configs" />
<entity-ref name="product-line" type="list" names="product-lines" />
</entity>
<entity name="node-config">
<attribute name="type" value-type="String" />
......@@ -30,15 +29,5 @@
<attribute name="warning-response-time" value-type="double" />
<attribute name="error-response-time" value-type="double" />
</entity>
<entity name="product-line">
<attribute name="id" value-type="String" />
<attribute name="title" value-type="String" />
<attribute name="order" value-type="int" />
<attribute name="important" value-type="boolean" />
<entity-ref name="domain" type="list" names="domains" />
</entity>
<entity name="domain">
<attribute name="id" value-type="String" />
</entity>
</model>
......@@ -6,4 +6,7 @@
<model package="com.dianping.cat.home.topology-graph-config" name="topology-graph-config">
<sample-model>/Users/youyong/Documents/workspace/cat/cat-home/src/test/resources/com/dianping/cat/report/page/dependency/topology-graph-config.xml</sample-model>
</model>
<model package="com.dianping.cat.home.company" name="company">
<sample-model>/Users/youyong/Documents/workspace/cat/cat-home/src/test/resources/com/dianping/cat/system/config/company.xml</sample-model>
</model>
</wizard>
......@@ -44,7 +44,7 @@ var lineChartOptions = {
axis:{
x:{
type:"datetime",
percent:0.8
percent:0.8
},
y:{
}
......@@ -60,7 +60,11 @@ var lineChartOptions = {
enableColumn:true
},
legend:{
},
tooltip:function(obj){
return obj.label+" "+obj.y;
}
}
function graphLineChart(container, data) {
var _data = lineChartParse(data);
......
(function(global){
var mix = function(a,b){
for(var o in b){
if(b.hasOwnProperty(o)){
a[o] = b[o];
}
}
return a;
},
PI = Math.PI;
var StarTopo = function(container, data , options){
var DEFAULT_OPTION = {
typeMap:{
},
colorMap:{
},
size:{
circle:{
width:100,
height:100
},
rect:{
width:100,
height:50
},
lozenge:{
width:100,
height:100
}
},
radius:200,
sideWeight:function(weight){
//weight ==> px
return weight + 2;
},
nodeWeight:function(weight){
return weight/10 + 1 ;
}
};
this.options = mix(DEFAULT_OPTION,options);
this.data = data;
this.points = {};
this.container = (typeof container ==="string")? document.getElementById(container): container;
this._initStage();
this._sort();
if(data.sides && data.sides.length){
this._initCenter();
this._initPoints();
this._initSides();
}else{
//平铺
this._initList();
}
}
StarTopo.prototype = {
constructor:StarTopo,
_initStage:function(){
//生成rapheal 实例
this.stage = new Raphael(this.container);
this.stageWidth = this.stage.width;
this.stageHeight = this.stage.height;
},
_sort:function(){
var data = this.data;
var self = this;
data.points && data.points.sort(function(a,b){
return a.type < b.type;
});
if(data.sides){
this.posLength = 0;
this.navLength = 0;
data.sides.sort(function(a,b){
return a.opposite < (b.opposite);
});
function findNode(id){
var res;
data.points.forEach(function(p){
if(p.id.toString() == id.toString()){
res = p;
}
})
return res;
}
var newPoints = [];
data.sides.forEach(function(side){
newPoints.push(findNode(side.target));
if(side.opposite){
self.posLength++;
}else{
self.navLength++;
}
});
data.points = newPoints;
this.twoSides = data.sides[0].opposite !== data.sides[data.sides.length-1].opposite;
}
},
_initCenter:function(){
//生成中心节点
var data = this.data;
var type = this._getNodeType(data.type);
var self = this;
this.centerNode = this._createNode(type,data.id);
this.centerNode.size(this.options.size[type].width,this.options.size[type].height);
this.centerNode.position(this.stageWidth/2,this.stageHeight/2);
this.centerNode.text(this.data.id);
this.centerNode.color(this.options.colorMap[data.status]);
this.centerNode.node.click(function(){
data.link && (location.href = data.link);
}).mouseover(function(e){
self._showTip(data.des,e.pageX,e.pageY);
}).mouseout(function(){
self._hideTip();
});;
},
_initPoints:function(){
var points = this.data.points;
var self = this;
var options = this.options;
if(!points){
return ;
}
var averageDegree = 2 * PI/points.length;
var centerNode = this.centerNode;
points.forEach(function(p,i){
var type = self._getNodeType(p.type);
var node = self._createNode(type,p.id);
var angle;
if(self.twoSides){
if(i<self.posLength){
angle = (i+1) * (PI / (self.posLength +1)) - PI/2;
}else{
angle = (i + 1 - self.posLength) * (PI / (self.navLength+1)) + PI/2
}
}else{
angle = averageDegree * i;
}
var x =parseInt( centerNode.position().x + Math.sin(angle) * options.radius ) ;
var y =parseInt( centerNode.position().y - Math.cos(angle) * options.radius ) ;
var weight = self.options.nodeWeight(p.weight)
node.size(options.size[type].width * weight,options.size[type].height * weight);
node.position(x,y);
node.text(p.id);
node.color(options.colorMap[p.status])
self.points[p.id] = node;
node.node.attr('stroke-width',2);
node.node.click(function(){
p.link && (location.href = p.link);
}).mouseover(function(e){
console.log(e);
self._showTip(p.des,e.pageX,e.pageY);
}).mouseout(function(){
self._hideTip();
});
node.textNode.click(function(){
p.link && (location.href = p.link);
});
});
},
_initSides:function(){
var sides = this.data.sides;
var self = this;
if(!sides){
return ;
}
sides.forEach(function(s){
var node = self.points[s.target];
if(!node){
return ;
}
var from = self.centerNode,
to = node;
if(s.opposite){
from = node;
to = self.centerNode;
}
var startPoint = from.getBoundPoint(to.position().x,to.position().y),
endPoint = to.getBoundPoint(from.position().x,from.position().y);
var length = Math.sqrt(Math.pow((startPoint.x - endPoint.x),2) + Math.pow((startPoint.y - endPoint.y),2));
var pathStr = ['M',startPoint.x,startPoint.y];
var alpha ;
if (startPoint.y === endPoint.y) {
if (startPoint.x > endPoint.x ) {
alpha = Math.PI;
} else {
alpha = 0;
}
} else {
alpha = ( Math.acos((endPoint.x - startPoint.x) / length ) * ( startPoint.y > endPoint.y ? 1 : -1));
}
alpha = 360 - alpha * 180 / Math.PI;
pathStr.push('h',length,'l',-10,-10,'m',10,10,'l',-10,10)
self.stage.path().attr({
'path':pathStr
}).rotate(alpha,startPoint.x,startPoint.y).attr({
'stroke':self.options.colorMap[s.status],
'stroke-width': self.options.sideWeight(s.weight || 0)
});
self.stage.text(startPoint.x+length/2,startPoint.y,s.des).rotate(alpha,startPoint.x,startPoint.y).click(function(){
s.link && (location.href = s.link);
});
});
},
_getNodeType:function(type){
var nodeType = this.options.typeMap[type];
if(!nodeType){
throw "unknow type "+ type;
}
return nodeType;
},
_createNode:function(type,id){
return Node(type).create(this.stage,id) ;
},
_initList:function(){
if(!this.data.points){
return ;
}
//4格
var col = 4;
var width = this.stageWidth/col;
var height = 150;
var self = this;
var options = this.options;
//title
self.stage.text(this.stageWidth/2,50,this.data.id);
this.data.points.forEach(function(p,i){
var x =( i % 4) * width + width/2;
var y = parseInt(i/4)* height + height/2;
var type = self._getNodeType(p.type);
var node = self._createNode(type,p.id);
node.size(options.size[type].width,options.size[type].height);
node.position(x,y);
node.text(p.id);
node.color(options.colorMap[p.status]);
node.node.click(function(){
p.link && (location.href = p.link);
}).mouseover(function(e){
self._showTip(p.des,e.pageX,e.pageY);
}).mouseout(function(){
self._hideTip();
});
node.textNode.click(function(){
p.link && (location.href = p.link);
});
self.points[p.id] = node;
});
},
_showTip:function(content,x,y){
if(!content){
return;
}
if(!this._tip){
this._tip = document.createElement('div');
this._tip.style.cssText= 'position:absolute;display:none;z-index:100000;padding:10px;border:solid 1px #ccc;box-shadow:#ccc 0 0 4px 2px;background-color:#fff;';
document.body.appendChild(this._tip);
}
this._tip.innerHTML = content;
this._tip.style.left = x+"px";
this._tip.style.top = y+"px";
this._tip.style.display = "block";
},
_hideTip:function(){
this._tip && (this._tip.style.display = 'none');
}
}
var Node = function(type){
return new Node[type];
}
//圆
var CircleNode = function(){
}
CircleNode.prototype = {
constructor:CircleNode,
create:function(stage,id){
this.id = id;
this.node = stage.circle(0,0,0);
this.stage = stage;
return this;
},
getBoundPoint:function(x,y){
//获取从 (x,y)点 到 圆点的直线和圆周的焦点
var pos = this.position();
var r = this.size().width/2;
var k = (pos.y - y)/(pos.x - x);
var x0 , y0;
if(pos.x===x){
x0 = pos.x;
if(pos.y > y){
y0 = pos.y - r;
}else{
y0 = pos.y + r;
}
}else{
if(pos.x>x){
x0 = pos.x - Math.sqrt(Math.pow(r,2)/(Math.pow(k,2)+1))
}else{
x0 = pos.x + Math.sqrt(Math.pow(r,2)/(Math.pow(k,2)+1))
}
y0 = pos.y - k*(pos.x - x0)
}
return {
x : x0,
y : y0
}
},
text:function(t){
this.textNode = this.stage.text(this.position().x,this.position().y,t).attr("cursor","pointer");
},
size:function(width){
if(arguments.length){
this.node.attr({
r:width/2
})
}else{
return {
width:this.node.attr('r')*2,
height:this.node.attr('r')*2
};
}
},
position:function(x,y){
if(arguments.length){
this.node.attr({
cx:x,
cy:y
});
this.textNode && this.textNode.attr({
x: x,
y: y
});
}else{
return {
x:this.node.attr('cx'),
y:this.node.attr('cy')
}
}
},
color:function(color){
this.node.attr('fill',color);
}
}
Node.circle = CircleNode;
//rect
var RectNode = function(){
}
RectNode.prototype = {
constructor:RectNode,
create:function(stage,id){
this.id = id;
this.node = stage.rect(0,0,0,0);
this.stage = stage;
return this;
},
getBoundPoint:function(x,y){
//获取从 (x,y)点 到 圆点的直线和圆周的焦点
var pos = this.position();
var size = this.size();
var k = (pos.y - y)/(pos.x - x);
var mk =size.height / size.width ;
var x0 , y0;
if( (k >=0 && k <= mk) || (k <0 && k >= -mk)){
if(x > pos.x){
x0 = pos.x + size.width/2;
}else{
x0 = pos.x - size.width/2;
}
y0 = k * (x0 - pos.x)+ pos.y;
}else {
if(y > pos.y){
y0 = pos.y + size.height /2;
}else{
y0 = pos.y - size.height /2;
}
x0 = (y0-pos.y) /k + pos.x;
}
return {
x : x0,
y : y0
}
},
text:function(t){
this.textNode = this.stage.text(this.position().x,this.position().y,t).attr("cursor","pointer");
},
size:function(width,height){
if(arguments.length){
this.node.attr({
width:width,
height:height
})
}else{
return {
width:this.node.attr('width'),
height:this.node.attr('height')
};
}
},
position:function(x,y){
if(arguments.length){
this.node.attr({
x:x - this.size().width/2,
y:y - this.size().height/2
});
this.textNode && this.textNode.attr({
x: x,
y: y
});
}else{
return {
x:this.node.attr('x') + this.size().width/2,
y:this.node.attr('y')+ this.size().height/2
}
}
},
color:function(color){
this.node.attr('fill',color);
}
}
Node.rect = RectNode;
//菱形
var LozengeNode = function(){
}
LozengeNode.prototype = {
constructor:LozengeNode,
create:function(stage,id){
this.id = id;
this.node = stage.rect(0,0,0,0);
this.stage = stage;
return this;
},
getBoundPoint:function(x,y){
//获取从 (x,y)点 到 圆点的直线和圆周的焦点
var pos = this.position();
var size = this.size();
size.width = Math.sqrt(2)* size.width;
var k = (pos.y - y)/(pos.x - x);
var x0 , y0;
if(x == pos.x){
x0 = x;
y0 = (pos.y < y? Math.sqrt(2)*size.height/2+ pos.y: pos.y -Math.sqrt(2)* size.height/2);
}else if(y===pos.y){
y0 = y;
x0 = pos.x < x ? Math.sqrt(2)*size.width/2 + pos.x : pos.x - Math.sqrt(2) * size.width/2;
}else {
if(x > pos.x && y < pos.y){
x0 = ((k-1) * pos.x - size.width/2) / (k-1);
}else if(x< pos.x && y> pos.y){
x0 = ((k-1) * pos.x + size.width/2) / (k-1);
}
else if(x < pos.x && y< pos.y ){
x0 = ((k+1) * pos.x - size.width/2) / (k+1);
}else{
x0 = ((k+1) * pos.x + size.width/2) / (k+1);
}
y0 = k * (x0 - pos.x)+ pos.y;
}
return {
x : x0,
y : y0
}
},
text:function(t){
this.textNode = this.stage.text(this.position().x,this.position().y,t).attr("cursor","pointer");
},
size:function(width,height){
if(arguments.length){
this.node.attr({
width:width,
height:height
})
}else{
return {
width:this.node.attr('width'),
height:this.node.attr('height')
};
}
},
position:function(x,y){
if(arguments.length){
this.node.attr({
x:x - this.size().width/2,
y:y - this.size().height/2
});
this.textNode && this.textNode.attr({
x: x,
y: y
});
this.node.rotate(45);
}else{
return {
x:this.node.attr('x') + this.size().width/2,
y:this.node.attr('y')+ this.size().height/2
}
}
},
color:function(color){
this.node.attr('fill',color);
}
}
Node.lozenge = LozengeNode;
global.StarTopo = StarTopo;
})(window);
......@@ -115,7 +115,7 @@
this.centerNode.node.click(function(){
data.link && (location.href = data.link);
}).mouseover(function(e){
self._showTip(data.des,e.pageX,e.pageY);
self._showTip(data.des,e.pageX+15,e.pageY+15);
}).mouseout(function(){
self._hideTip();
});;
......@@ -127,18 +127,28 @@
if(!points){
return ;
}
var averageDegree = 2 * PI/points.length;
var averageDegree = 2 * PI/(points.length+(self.twoSides?2:0));
var centerNode = this.centerNode;
points.forEach(function(p,i){
var type = self._getNodeType(p.type);
var node = self._createNode(type,p.id);
var angle;
//if(self.twoSides){
// if(i<self.posLength){
// angle = (i+1) * (PI / (self.posLength +1)) - PI/2;
// }else{
// angle = (i + 1 - self.posLength) * (PI / (self.navLength+1)) + PI/2
// }
//}else{
// angle = averageDegree * i;
//}
if(self.twoSides){
if(i<self.posLength){
angle = (i+1) * (PI / (self.posLength +1)) - PI/2;
angle = averageDegree * i;
}else{
angle = (i + 1 - self.posLength) * (PI / (self.navLength+1)) + PI/2
angle = averageDegree * (i+ 1);
}
}else{
angle = averageDegree * i;
......@@ -158,7 +168,7 @@
p.link && (location.href = p.link);
}).mouseover(function(e){
console.log(e);
self._showTip(p.des,e.pageX,e.pageY);
self._showTip(p.des,e.pageX+15,e.pageY+15);
}).mouseout(function(){
self._hideTip();
});
......@@ -199,16 +209,34 @@
alpha = ( Math.acos((endPoint.x - startPoint.x) / length ) * ( startPoint.y > endPoint.y ? 1 : -1));
}
alpha = 360 - alpha * 180 / Math.PI;
pathStr.push('h',length,'l',-10,-10,'m',10,10,'l',-10,10)
if(s.dashed){
var dashSpan = 3,lineSpan = 5,currentLength=0;
while(currentLength<length){
pathStr.push('h',lineSpan,'m',dashSpan,0);
currentLength+=(dashSpan+lineSpan);
}
pathStr.push('h',length - currentLength);
pathStr.push();
}else {
pathStr.push('h',length);
}
//箭头
pathStr.push('l',-10,-5,'l',5,5,'l',-5,5,'l',10,-5);
self.stage.path().attr({
'path':pathStr
}).rotate(alpha,startPoint.x,startPoint.y).attr({
'stroke':self.options.colorMap[s.status],
'stroke-width': self.options.sideWeight(s.weight || 0)
});
self.stage.text(startPoint.x+length/2,startPoint.y,s.des).rotate(alpha,startPoint.x,startPoint.y).click(function(){
s.link && (location.href = s.link);
'stroke-width': self.options.sideWeight(s.weight || 0),
'fill':self.options.colorMap[s.status]
}).mouseover(function(e){
self._showTip(s.des,e.pageX+15,e.pageY+15);
}).mouseout(function(){
self._hideTip();
});
//self.stage.text(startPoint.x+length/2,startPoint.y,s.des).rotate(alpha,startPoint.x,startPoint.y).click(function(){
// s.link && (location.href = s.link);
//});
});
},
_getNodeType:function(type){
......@@ -245,7 +273,7 @@
node.node.click(function(){
p.link && (location.href = p.link);
}).mouseover(function(e){
self._showTip(p.des,e.pageX,e.pageY);
self._showTip(p.des,e.pageX+15,e.pageY+15);
}).mouseout(function(){
self._hideTip();
});
......@@ -261,7 +289,7 @@
}
if(!this._tip){
this._tip = document.createElement('div');
this._tip.style.cssText= 'position:absolute;display:none;z-index:100000;padding:10px;border:solid 1px #ccc;box-shadow:#ccc 0 0 4px 2px;background-color:#fff;';
this._tip.style.cssText= 'position:absolute;display:none;z-index:100000;padding:10px;border:solid 1px #ccc;box-shadow:#ccc 0 0 10px 2px;background-color:#fff;';
document.body.appendChild(this._tip);
}
this._tip.innerHTML = content;
......@@ -272,7 +300,6 @@
_hideTip:function(){
this._tip && (this._tip.style.display = 'none');
}
}
......
<%@ page contentType="text/html; charset=utf-8" %>
<div id="fullScreenData">
<div class="row-fluid">
<div class='span12'>
<h4 class='text-error text-center'>当前小时内项目本身指标趋势图</h4>
......@@ -39,7 +39,7 @@
</c:forEach></table>
</div>
</div>
</div>
<script type="text/javascript">
<c:forEach var="item" items="${model.indexGraph}" varStatus="status">
_data = lineChartParse(${item});
......
<%@ page contentType="text/html; charset=utf-8" %>
<div class="row-fluid" style="margin-top:2px;">
<div class="span9 text-center">
<div class="span8 text-center">
<a id="navlineChart" class="btn btn-primary" href="?minute=${model.minute}&domain=${model.domain}&date=${model.date}">实时趋势图</a>
<a id="navdependencyGraph" class="btn btn-primary" href="?op=dependencyGraph&minute=${model.minute}&domain=${model.domain}&date=${model.date}">实时拓扑图</a>
<a id="navproductLine" class="btn btn-primary" href="?op=productLine&minute=${model.minute}&domain=${model.domain}&date=${model.date}">产品线监控</a>
<a id="navdashboard" class="btn btn-primary" href="?op=dashboard&minute=${model.minute}&domain=${model.domain}&date=${model.date}">监控仪表盘</a>
</div>
<div class="span3 text-center">
<div class="span4 text-center">
<div class='text-center'>
<a id="refresh10" class='btn btn-small btn-primary' href="?op=${payload.action.name}&refresh=true&frequency=10&domain=${model.domain}">10秒定时刷新</a>
<a id="refresh20" class='btn btn-small btn-primary' href="?op=${payload.action.name}&refresh=true&frequency=20&domain=${model.domain}">20秒定时刷新</a>
<a id="refresh30" class='btn btn-small btn-primary' href="?op=${payload.action.name}&refresh=true&frequency=30&domain=${model.domain}">30秒定时刷新</a>
<a id="fullScreen" class='btn btn-small btn-primary'>全屏幕</a>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var id = '${payload.action.name}';
$('#nav'+id).addClass('btn-danger');
......@@ -28,5 +30,15 @@ $(document).ready(function() {
},frequency*1000);
};
$('#fullScreen').click(function (e) {
var container = $('#fullScreenData')[0];
//W3C suggest to use requestFullScreen
//but webkit use webkitRequestFullScreen ,FireFox use mozRequestFullScreen
//Opera and IE don't support the fullScreen API
//careful fullScreen is called on the element but exitFullScreen is called on the document!!
//WHAT THE FUCK!!
container.requestFullScreen ? container.requestFullScreen() : (container.webkitRequestFullScreen ? container.webkitRequestFullScreen() : (container.mozRequestFullScreen && container.mozRequestFullScreen()));
});
});
</script>
\ No newline at end of file
......@@ -28,10 +28,11 @@
<div class="span2">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<c:forEach var="item" items="${model.productLines}" varStatus="status">
<c:forEach var="item" items="${model.productLines}" varStatus="status">
<li class="text-left" id="tab${item.id}"><a href="?op=productLine&productLine=${item.id}&minute=${model.minute}&domain=${model.domain}&date=${model.date}">${item.title}</a></li>
</c:forEach></ul></div></div>
<div class="span10">
<h4 class='text-center text-error' id="title"></h4>
<div class="text-center" id="container" style="width:1000px;height:600px;border:solid 1px #ccc;"></div>
</div>
</div>
......@@ -46,6 +47,8 @@
$('.switch').hide();
var data = ${model.productLineGraph};
console.log(data);
var title = data.id;
$('#title').html(title);
function parse(data){
var nodes = data.nodes;
var points = [];
......
<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<div class="tabbable " id="topMetric"> <!-- Only required for left/right tabs -->
<div class="tabbable tabs-left " id="topMetric"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs alert-info">
<li class="text-right active"><a href="#tab1" data-toggle="tab">异常最多Top${payload.topCounts}</a></li>
<li class='text-right'><a href="#tab2" data-toggle="tab">URL最慢Top${payload.topCounts}</a></li>
......@@ -11,90 +12,84 @@
</ul>
<c:set var="date" value="${w:format(model.topReport.startTime,'yyyyMMddHH')}"/>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<table><tr>
<c:forEach var="item" items="${model.topMetric.error.result}" varStatus="status">
<td><table style="float:left" border=1>
<tr><th colspan="3">${item.key}</th></tr>
<tr><th width="80%">系统</th> <th></th></tr>
<c:forEach var="detail" items="${item.value}" varStatus="status">
<tr class="${status.index mod 2 != 0 ? 'odd' : 'even'}">
<td>
<a class="hreftip" href="/cat/r/p?domain=${detail.domain}&date=${date}" data-toggle="tooltip" data-placement="top" title="" data-original-title="${detail.errorInfo}">${detail.domain}</a>
<td style="text-align:right">${w:format(detail.value,'0')}</td>
</tr>
</c:forEach>
</table></td>
</c:forEach></tr></table>
<div class="tab-pane active" id="tab1">
<c:forEach var="item" items="${model.topMetric.error.result}" varStatus="status">
<table width="20%" style="float:left" border=1>
<tr><th colspan="2" class="text-error" class="text-error">${item.key}</th></tr>
<tr><th width="80%">系统</th> <th></th></tr>
<c:forEach var="detail" items="${item.value}" varStatus="status">
<tr class="${status.index mod 2 != 0 ? 'odd' : 'even'}">
<td>
<a class="hreftip" href="/cat/r/p?domain=${detail.domain}&date=${date}" data-toggle="tooltip" data-placement="top" title="" data-original-title="${detail.errorInfo}">${detail.domain}</a>
<td style="text-align:right">${w:format(detail.value,'0')}</td>
</tr>
</c:forEach>
</table>
</c:forEach>
</div>
<div class="tab-pane" id="tab2">
<table><tr>
<c:forEach var="item" items="${model.topMetric.url.result}" varStatus="status">
<td><table style="float:left" border=1>
<tr><th colspan="2">${item.key}</th></tr>
<table width="20%" style="float:left" border=1>
<tr><th colspan="2" class="text-error">${item.key}</th></tr>
<tr><th width="80%">系统</th> <th>ms</th></tr>
<c:forEach var="detail" items="${item.value}" varStatus="status">
<tr class="${status.index mod 2 != 0 ? 'odd' : 'even'}">
<td><a href="/cat/r/t?domain=${detail.domain}&date=${date}" target="_blank">${detail.domain}</a></td><td>${w:format(detail.value,'0.0')}</td>
</tr>
</c:forEach>
</table></td>
</c:forEach></tr></table>
</table>
</c:forEach>
</div>
<div class="tab-pane" id="tab3">
<table><tr>
<c:forEach var="item" items="${model.topMetric.service.result}" varStatus="status">
<td><table style="float:left" border=1>
<tr><th colspan="2">${item.key}</th></tr>
<table width="20%" style="float:left" border=1>
<tr><th colspan="2" class="text-error">${item.key}</th></tr>
<tr><th width="80%">系统</th> <th>ms</th></tr>
<c:forEach var="detail" items="${item.value}" varStatus="status">
<tr class="${status.index mod 2 != 0 ? 'odd' : 'even'}">
<td><a href="/cat/r/t?domain=${detail.domain}&date=${date}" target="_blank">${detail.domain}</a></td><td>${w:format(detail.value,'0.0')}</td>
</tr>
</c:forEach>
</table></td>
</c:forEach></tr></table>
</table>
</c:forEach>
</div>
<div class="tab-pane" id="tab4">
<table><tr>
<c:forEach var="item" items="${model.topMetric.sql.result}" varStatus="status">
<td><table style="float:left" border=1>
<tr><th colspan="2">${item.key}</th></tr>
<table width="20%" style="float:left" border=1>
<tr><th colspan="2" class="text-error">${item.key}</th></tr>
<tr><th width="80%">系统</th> <th>ms</th></tr>
<c:forEach var="detail" items="${item.value}" varStatus="status">
<tr class="${status.index mod 2 != 0 ? 'odd' : 'even'}">
<td><a href="/cat/r/t?domain=${detail.domain}&date=${date}" target="_blank">${detail.domain}</a></td><td>${w:format(detail.value,'0.0')}</td>
</tr>
</c:forEach>
</table></td>
</c:forEach></tr></table>
</table>
</c:forEach>
</div>
<div class="tab-pane" id="tab5">
<table><tr>
<c:forEach var="item" items="${model.topMetric.call.result}" varStatus="status">
<td><table style="float:left" border=1>
<tr><th colspan="2">${item.key}</th></tr>
<c:forEach var="item" items="${model.topMetric.call.result}" varStatus="status">
<table width="20%" style="float:left" border=1>
<tr><th colspan="2" class="text-error">${item.key}</th></tr>
<tr><th width="80%">系统</th> <th>ms</th></tr>
<c:forEach var="detail" items="${item.value}" varStatus="status">
<tr class="${status.index mod 2 != 0 ? 'odd' : 'even'}">
<td><a href="/cat/r/t?domain=${detail.domain}&date=${date}" target="_blank">${detail.domain}</a></td><td>${w:format(detail.value,'0.0')}</td>
</tr>
</c:forEach>
</table></td>
</c:forEach></tr></table>
</table>
</c:forEach>
</div>
<div class="tab-pane" id="tab6">
<table><tr>
<c:forEach var="item" items="${model.topMetric.cache.result}" varStatus="status">
<td><table style="float:left" border=1>
<tr><th colspan="2">${item.key}</th></tr>
<table width="20%" style="float:left" border=1>
<tr><th colspan="2" class="text-error">${item.key}</th></tr>
<tr><th width="80%">系统</th> <th>ms</th></tr>
<c:forEach var="detail" items="${item.value}" varStatus="status">
<tr class="${status.index mod 2 != 0 ? 'odd' : 'even'}">
<td><a href="/cat/r/t?domain=${detail.domain}&date=${date}" target="_blank">${detail.domain}</a></td><td>${w:format(detail.value,'0.0')}</td>
</tr>
</c:forEach>
</table></td>
</c:forEach></tr></table>
</table>
</c:forEach>
</div>
</div></div>
\ No newline at end of file
......@@ -15,6 +15,7 @@
border-spacing: 0;
}
</style>
</style>
<a:body>
<res:useCss value='${res.css.local.table_css}' target="head-css" />
<res:useJs value="${res.js.local['bootstrap.min.js']}" target="head-js"/>
......@@ -47,12 +48,6 @@
</a:body>
<script type="text/javascript">
$(document).ready(function() {
$('i[tips]').popover();
$('#topMetric .nav-tabs a').mouseenter(function (e) {
e.preventDefault();
$(this).tab('show');
});
var refresh = ${payload.refresh};
var frequency = ${payload.frequency};
if(refresh){
......
<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<div class="tabbable tabs-left " id="topMetric"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs alert-info">
<li class="text-right active"><a href="#tab1" data-toggle="tab">异常最多Top10</a></li>
<li class='text-right'><a href="#tab2" data-toggle="tab">URL最慢Top10</a></li>
<li class='text-right'><a href="#tab3" data-toggle="tab">Service最慢Top10</a></li>
<li class='text-right'><a href="#tab4" data-toggle="tab">SQL最慢Top10</a></li>
<li class='text-right'><a href="#tab5" data-toggle="tab">Call最慢Top10</a></li>
<li class='text-right'><a href="#tab6" data-toggle="tab">Cache最慢Top10</a></li>
<li class="text-right active"><a href="#tab1" data-toggle="tab">异常最多Top${payload.topCounts}</a></li>
<li class='text-right'><a href="#tab2" data-toggle="tab">URL最慢Top${payload.topCounts}</a></li>
<li class='text-right'><a href="#tab3" data-toggle="tab">Service最慢Top${payload.topCounts}</a></li>
<li class='text-right'><a href="#tab4" data-toggle="tab">SQL最慢Top${payload.topCounts}</a></li>
<li class='text-right'><a href="#tab5" data-toggle="tab">Call最慢Top${payload.topCounts}</a></li>
<li class='text-right'><a href="#tab6" data-toggle="tab">Cache最慢Top${payload.topCounts}</a></li>
</ul>
<c:set var="date" value="${w:format(model.topReport.startTime,'yyyyMMddHH')}"/>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<c:forEach var="item" items="${model.topMetric.error.result}" varStatus="status">
<c:forEach var="item" items="${model.topMetric.error.result}" varStatus="status">
<table width="20%" style="float:left" border=1>
<tr><th colspan="3">${item.key}</th></tr>
<tr><th width="80%">系统</th> <th></th></tr>
<c:forEach var="detail" items="${item.value}" varStatus="status">
<tr class="${status.index mod 2 != 0 ? 'odd' : 'even'}">
<td>
<a class="hreftip" href="/cat/r/p?domain=${detail.domain}&date=${date}" data-toggle="tooltip" data-placement="top" title="" data-original-title="${detail.errorInfo}">${detail.domain}</a>
<td style="text-align:right">${w:format(detail.value,'0')}</td>
</tr>
</c:forEach>
<tr><th colspan="2" class="text-error" class="text-error">${item.key}</th></tr>
<tr><th width="80%">系统</th> <th></th></tr>
<c:forEach var="detail" items="${item.value}" varStatus="status">
<tr class="${status.index mod 2 != 0 ? 'odd' : 'even'}">
<td>
<a class="hreftip" href="/cat/r/p?domain=${detail.domain}&date=${date}" data-toggle="tooltip" data-placement="top" title="" data-original-title="${detail.errorInfo}">${detail.domain}</a>
<td style="text-align:right">${w:format(detail.value,'0')}</td>
</tr>
</c:forEach>
</table>
</c:forEach>
</div>
<div class="tab-pane" id="tab2">
<c:forEach var="item" items="${model.topMetric.url.result}" varStatus="status">
<table width="20%" style="float:left" border=1>
<tr><th colspan="2">${item.key}</th></tr>
<tr><th colspan="2" class="text-error">${item.key}</th></tr>
<tr><th width="80%">系统</th> <th>ms</th></tr>
<c:forEach var="detail" items="${item.value}" varStatus="status">
<tr class="${status.index mod 2 != 0 ? 'odd' : 'even'}">
......@@ -42,7 +43,7 @@
<div class="tab-pane" id="tab3">
<c:forEach var="item" items="${model.topMetric.service.result}" varStatus="status">
<table width="20%" style="float:left" border=1>
<tr><th colspan="2">${item.key}</th></tr>
<tr><th colspan="2" class="text-error">${item.key}</th></tr>
<tr><th width="80%">系统</th> <th>ms</th></tr>
<c:forEach var="detail" items="${item.value}" varStatus="status">
<tr class="${status.index mod 2 != 0 ? 'odd' : 'even'}">
......@@ -55,7 +56,7 @@
<div class="tab-pane" id="tab4">
<c:forEach var="item" items="${model.topMetric.sql.result}" varStatus="status">
<table width="20%" style="float:left" border=1>
<tr><th colspan="2">${item.key}</th></tr>
<tr><th colspan="2" class="text-error">${item.key}</th></tr>
<tr><th width="80%">系统</th> <th>ms</th></tr>
<c:forEach var="detail" items="${item.value}" varStatus="status">
<tr class="${status.index mod 2 != 0 ? 'odd' : 'even'}">
......@@ -68,7 +69,7 @@
<div class="tab-pane" id="tab5">
<c:forEach var="item" items="${model.topMetric.call.result}" varStatus="status">
<table width="20%" style="float:left" border=1>
<tr><th colspan="2">${item.key}</th></tr>
<tr><th colspan="2" class="text-error">${item.key}</th></tr>
<tr><th width="80%">系统</th> <th>ms</th></tr>
<c:forEach var="detail" items="${item.value}" varStatus="status">
<tr class="${status.index mod 2 != 0 ? 'odd' : 'even'}">
......@@ -81,7 +82,7 @@
<div class="tab-pane" id="tab6">
<c:forEach var="item" items="${model.topMetric.cache.result}" varStatus="status">
<table width="20%" style="float:left" border=1>
<tr><th colspan="2">${item.key}</th></tr>
<tr><th colspan="2" class="text-error">${item.key}</th></tr>
<tr><th width="80%">系统</th> <th>ms</th></tr>
<c:forEach var="detail" items="${item.value}" varStatus="status">
<tr class="${status.index mod 2 != 0 ? 'odd' : 'even'}">
......@@ -91,4 +92,12 @@
</table>
</c:forEach>
</div>
</div></div>
\ No newline at end of file
</div></div>
<style>
.tooltip-inner {
max-width:36555px;
}
</style>
<script>
$('.hreftip').tooltip({container:'body', html:true, delay:{show:0, hide:0}});
</script>
\ No newline at end of file
......@@ -15,10 +15,10 @@
<script type="text/javascript">
$(document).ready(function() {
$('#topylogyEdgeConfigList').addClass('active');
$('#content .nav-tabs a').mouseenter(function (e) {
/* $('#content .nav-tabs a').mouseenter(function (e) {
e.preventDefault();
$(this).tab('show');
});
}); */
$(".delete").bind("click", function() {
return confirm("确定要删除此项目吗(不可恢复)?");
});
......
......@@ -17,11 +17,11 @@
<script type="text/javascript">
$(document).ready(function() {
$('#topylogyNodeConfigList').addClass('active');
$('#content .nav-tabs a').mouseenter(function (e) {
/* $('#content .nav-tabs a').mouseenter(function (e) {
e.preventDefault();
$(this).tab('show');
});
var type = '${payload.type}';
*/ var type = '${payload.type}';
if(type==''){
type = 'URL';
}
......
......@@ -8,10 +8,5 @@
<edge-config key="PigeonCall:UserWeb:UserService" type="PigeonCall" from="UserWeb" to="UserService" warning-threshold='1' error-threshold='2' warning-response-time='50.0' error-response-time='50.0'></edge-config>
<edge-config key="PigeonCall:UserWeb:UserService" type="PigeonCall" from="UserWeb" to="UserService" warning-threshold='1' error-threshold='2' warning-response-time='50.0' error-response-time='50.0'></edge-config>
<edge-config key="sql:UserWeb:Dianping" type="sql" from="UserWeb" to="Dianping" warning-threshold='1' error-threshold='2' warning-response-time='50.0' error-response-time='50.0'></edge-config>
<product-line id="TuanGou" title="TuanGou" order="1" important="true">
<domain id="MobileApi"></domain>
<domain id="MobileApi"></domain>
</product-line>
<product-line></product-line>
</topology-graph-config>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册