web/src/main/resources/static/detail.html - servicecomb-pack - Git at Google

 <!DOCTYPE HTML>
 <!--
   ~ Licensed to the Apache Software Foundation (ASF) under one or more
   ~ contributor license agreements.  See the NOTICE file distributed with
   ~ this work for additional information regarding copyright ownership.
   ~ The ASF licenses this file to You under the Apache License, Version 2.0
   ~ (the "License"); you may not use this file except in compliance with
   ~ the License.  You may obtain a copy of the License at
   ~
   ~      http://www.apache.org/licenses/LICENSE-2.0
   ~
   ~ Unless required by applicable law or agreed to in writing, software
   ~ distributed under the License is distributed on an "AS IS" BASIS,
   ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   -->
 <html>
 <head>
   <title>Detail</title>
   <script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/1.3.2/raphael-min.js" integrity="sha256-5C/soUzPY/Tqibm8m0ScOsVh++6jF/FIe7EwzCJNc9I=" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/graphdracula/1.0.3/dracula.min.js" integrity="sha384-aXfg8XqWGUVAJP52yC2HsTDAqjI2PMGT+Ssh3/UtNXIhwnQLsL2sa8EA/VPSQqfn" crossorigin="anonymous"></script>
   <script type="text/javascript">
     var redraw;
 	var height = 600;
 	var width = 600;

     function getQueryString(name, url) {
       var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
       var r = url.match(reg);
       if (r != null) {
         return unescape(r[2]);
       }
       return null;
     }

     var sagaId = "";
     if (location.href.split('?').length > 1) {
       var par = location.href.split('?')[1];
       sagaId = getQueryString("sagaId", par);
     }
     var url = "/saga-service/requests/" + sagaId;
     var render = function (r, n) {
       /* the Raphael set is obligatory, containing all you want to display */
       var set = r.set().push(
           /* custom objects go here */
           r.rect(n.point[0] - 30, n.point[1] - 13, 60, 44).attr(
               {"fill": "#5b9bd5", r: "12px", "stroke-width": n.distance == 0 ? "3px" : "1px"})).push(
           r.text(n.point[0], n.point[1] + 10, (n.label || n.id)));
       return set;
     };

     var render_false = function (r, n) {
       /* the Raphael set is obligatory, containing all you want to display */
       var set = r.set().push(
           /* custom objects go here */
           r.rect(n.point[0] - 30, n.point[1] - 13, 60, 44).attr(
               {"fill": "#d16d2a", r: "12px", "stroke-width": n.distance == 0 ? "3px" : "1px"})).push(
           r.text(n.point[0], n.point[1] + 10, (n.label || n.id)));
       return set;
     };

     var render_no = function (r, n) {
       /* the Raphael set is obligatory, containing all you want to display */
       var set = r.set().push(
           /* custom objects go here */
           r.rect(n.point[0] - 30, n.point[1] - 13, 60, 44).attr(
               {"fill": "#f2f2f2", r: "12px", "stroke-width": n.distance == 0 ? "3px" : "1px"})).push(
           r.text(n.point[0], n.point[1] + 10, (n.label || n.id)));
       return set;
     };

     var g = new Graph();
     /* modify the edge creation to attach random weights */
     g.edgeFactory.build = function (source, target) {
       var e = jQuery.extend(true, {}, this.template);
       e.source = source;
       e.target = target;
       e.style.label = e.weight = Math.floor(Math.random() * 10) + 1;
       return e;
     }

     var render_st = function (r, n) {
       /* the Raphael set is obligatory, containing all you want to display */
       var set = r.set().push(
           /* custom objects go here */
           r.rect(n.point[0] - 30, n.point[1] - 13, 60, 44).attr(
               {"fill": "#7b92f1", r: "22px", "stroke-width": n.distance == 0 ? "3px" : "1px"})).push(
           r.text(n.point[0], n.point[1] + 10, (n.label || n.id)));
       return set;
     };

     window.onload = function () {
       $.ajax({
         type: 'GET',
         url: url,
         dataType: "json",
         success: function (datas) {
           console.log(datas);
           //var datas = {"router":{"request-aaa":["request-bbb"],"saga-start":["request-aaa"],"request-bbb":["saga-end"]},"status":{"request-aaa":"OK","request-bbb":"OK"},"error":{}};
           var datas_status = datas.status;
           $.each(datas.router,function(key,value){
 				$.each(value,function(k,val){
 					if(datas_status[key] == 'Failed'){
 						if(key.indexOf("saga-start") >= 0){
 							g.addNode(key, {render:render_st});
 						}else if(val.indexOf("saga-end") >= 0){
 							g.addNode(val, {render:render_st});
 						}
 						g.addNode(key, {render:render_no});
 						g.addNode(val, {render:render_no});

 						g.addEdge(key, val, {
 							stroke: '#adadad',
 							//fill: '#f2f2f2',
 							label: '',
 							directed : true
 						});
 					}else if(datas_status[val] == 'Failed'){
 						if(key.indexOf("saga-start") >= 0){
 							g.addNode(key, {render:render_st});
 						}else if(val.indexOf("saga-end") >= 0){
 							g.addNode(val, {render:render_st});
 						}
 						g.addNode(key, {render:render});
 						g.addNode(val, {render:render_false});

 						g.addEdge(key, val, {
 							stroke: '#adadad',
 							//fill: '#f2f2f2',
 							label: '',
 							directed : true
 						});
 					}else{
 						if(key.indexOf("saga-start") >= 0){
 							g.addNode(key, {render:render_st});
 						}else if(val.indexOf("saga-end") >= 0){
 							g.addNode(val, {render:render_st});
 						}
 						g.addNode(key, {render:render});
 						g.addNode(val, {render:render});

 						g.addEdge(key, val, {
 							stroke: '#5b9bd5',
 							//fill: '#5b9bd5',
 							label: '',
 							directed : true
 						});
 					}
 				})
 			})

           /* layout the graph using the Spring layout implementation */
           var layouter = new Graph.Layout.Spring(g);
           layouter.layout();

           /* draw the graph using the RaphaelJS draw implementation */
           var renderer = new Graph.Renderer.Raphael('canvas', g, width, height);
           renderer.draw();

           redraw = function () {
             layouter.layout();
             renderer.draw();
           };
         }
       });
     };
   </script>
 </head>
 <body>
 <div id="canvas" style="height: 600px; width: 100%;text-align: center;"></div>
 </body>
 </html>
	<!DOCTYPE HTML>
	<!--
	~ Licensed to the Apache Software Foundation (ASF) under one or more
	~ contributor license agreements. See the NOTICE file distributed with
	~ this work for additional information regarding copyright ownership.
	~ The ASF licenses this file to You under the Apache License, Version 2.0
	~ (the "License"); you may not use this file except in compliance with
	~ the License. You may obtain a copy of the License at
	~
	~ http://www.apache.org/licenses/LICENSE-2.0
	~
	~ Unless required by applicable law or agreed to in writing, software
	~ distributed under the License is distributed on an "AS IS" BASIS,
	~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	~ See the License for the specific language governing permissions and
	~ limitations under the License.
	-->
	<html>
	<head>
	<title>Detail</title>
	<script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/1.3.2/raphael-min.js" integrity="sha256-5C/soUzPY/Tqibm8m0ScOsVh++6jF/FIe7EwzCJNc9I=" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/graphdracula/1.0.3/dracula.min.js" integrity="sha384-aXfg8XqWGUVAJP52yC2HsTDAqjI2PMGT+Ssh3/UtNXIhwnQLsL2sa8EA/VPSQqfn" crossorigin="anonymous"></script>
	<script type="text/javascript">
	var redraw;
	var height = 600;
	var width = 600;

	function getQueryString(name, url) {
	var reg = new RegExp("(^\|&)" + name + "=([^&]*)(&\|$)", "i");
	var r = url.match(reg);
	if (r != null) {
	return unescape(r[2]);
	}
	return null;
	}

	var sagaId = "";
	if (location.href.split('?').length > 1) {
	var par = location.href.split('?')[1];
	sagaId = getQueryString("sagaId", par);
	}
	var url = "/saga-service/requests/" + sagaId;
	var render = function (r, n) {
	/* the Raphael set is obligatory, containing all you want to display */
	var set = r.set().push(
	/* custom objects go here */
	r.rect(n.point[0] - 30, n.point[1] - 13, 60, 44).attr(
	{"fill": "#5b9bd5", r: "12px", "stroke-width": n.distance == 0 ? "3px" : "1px"})).push(
	r.text(n.point[0], n.point[1] + 10, (n.label \|\| n.id)));
	return set;
	};

	var render_false = function (r, n) {
	/* the Raphael set is obligatory, containing all you want to display */
	var set = r.set().push(
	/* custom objects go here */
	r.rect(n.point[0] - 30, n.point[1] - 13, 60, 44).attr(
	{"fill": "#d16d2a", r: "12px", "stroke-width": n.distance == 0 ? "3px" : "1px"})).push(
	r.text(n.point[0], n.point[1] + 10, (n.label \|\| n.id)));
	return set;
	};

	var render_no = function (r, n) {
	/* the Raphael set is obligatory, containing all you want to display */
	var set = r.set().push(
	/* custom objects go here */
	r.rect(n.point[0] - 30, n.point[1] - 13, 60, 44).attr(
	{"fill": "#f2f2f2", r: "12px", "stroke-width": n.distance == 0 ? "3px" : "1px"})).push(
	r.text(n.point[0], n.point[1] + 10, (n.label \|\| n.id)));
	return set;
	};

	var g = new Graph();
	/* modify the edge creation to attach random weights */
	g.edgeFactory.build = function (source, target) {
	var e = jQuery.extend(true, {}, this.template);
	e.source = source;
	e.target = target;
	e.style.label = e.weight = Math.floor(Math.random() * 10) + 1;
	return e;
	}

	var render_st = function (r, n) {
	/* the Raphael set is obligatory, containing all you want to display */
	var set = r.set().push(
	/* custom objects go here */
	r.rect(n.point[0] - 30, n.point[1] - 13, 60, 44).attr(
	{"fill": "#7b92f1", r: "22px", "stroke-width": n.distance == 0 ? "3px" : "1px"})).push(
	r.text(n.point[0], n.point[1] + 10, (n.label \|\| n.id)));
	return set;
	};

	window.onload = function () {
	$.ajax({
	type: 'GET',
	url: url,
	dataType: "json",
	success: function (datas) {
	console.log(datas);
	//var datas = {"router":{"request-aaa":["request-bbb"],"saga-start":["request-aaa"],"request-bbb":["saga-end"]},"status":{"request-aaa":"OK","request-bbb":"OK"},"error":{}};
	var datas_status = datas.status;
	$.each(datas.router,function(key,value){
	$.each(value,function(k,val){
	if(datas_status[key] == 'Failed'){
	if(key.indexOf("saga-start") >= 0){
	g.addNode(key, {render:render_st});
	}else if(val.indexOf("saga-end") >= 0){
	g.addNode(val, {render:render_st});
	}
	g.addNode(key, {render:render_no});
	g.addNode(val, {render:render_no});

	g.addEdge(key, val, {
	stroke: '#adadad',
	//fill: '#f2f2f2',
	label: '',
	directed : true
	});
	}else if(datas_status[val] == 'Failed'){
	if(key.indexOf("saga-start") >= 0){
	g.addNode(key, {render:render_st});
	}else if(val.indexOf("saga-end") >= 0){
	g.addNode(val, {render:render_st});
	}
	g.addNode(key, {render:render});
	g.addNode(val, {render:render_false});

	g.addEdge(key, val, {
	stroke: '#adadad',
	//fill: '#f2f2f2',
	label: '',
	directed : true
	});
	}else{
	if(key.indexOf("saga-start") >= 0){
	g.addNode(key, {render:render_st});
	}else if(val.indexOf("saga-end") >= 0){
	g.addNode(val, {render:render_st});
	}
	g.addNode(key, {render:render});
	g.addNode(val, {render:render});

	g.addEdge(key, val, {
	stroke: '#5b9bd5',
	//fill: '#5b9bd5',
	label: '',
	directed : true
	});
	}
	})
	})

	/* layout the graph using the Spring layout implementation */
	var layouter = new Graph.Layout.Spring(g);
	layouter.layout();

	/* draw the graph using the RaphaelJS draw implementation */
	var renderer = new Graph.Renderer.Raphael('canvas', g, width, height);
	renderer.draw();

	redraw = function () {
	layouter.layout();
	renderer.draw();
	};
	}
	});
	};
	</script>
	</head>
	<body>
	<div id="canvas" style="height: 600px; width: 100%;text-align: center;"></div>
	</body>
	</html>