http://git-wip-us.apache.org/repos/asf/phoenix/blob/f76062c9/phoenix-tracing-webapp/src/main/webapp/fonts/glyphicons-halflings-regular.ttf ---------------------------------------------------------------------- diff --git a/phoenix-tracing-webapp/src/main/webapp/fonts/glyphicons-halflings-regular.ttf b/phoenix-tracing-webapp/src/main/webapp/fonts/glyphicons-halflings-regular.ttf new file mode 100755 index 0000000..1413fc6 Binary files /dev/null and b/phoenix-tracing-webapp/src/main/webapp/fonts/glyphicons-halflings-regular.ttf differ
http://git-wip-us.apache.org/repos/asf/phoenix/blob/f76062c9/phoenix-tracing-webapp/src/main/webapp/fonts/glyphicons-halflings-regular.woff ---------------------------------------------------------------------- diff --git a/phoenix-tracing-webapp/src/main/webapp/fonts/glyphicons-halflings-regular.woff b/phoenix-tracing-webapp/src/main/webapp/fonts/glyphicons-halflings-regular.woff new file mode 100755 index 0000000..9e61285 Binary files /dev/null and b/phoenix-tracing-webapp/src/main/webapp/fonts/glyphicons-halflings-regular.woff differ http://git-wip-us.apache.org/repos/asf/phoenix/blob/f76062c9/phoenix-tracing-webapp/src/main/webapp/fonts/glyphicons-halflings-regular.woff2 ---------------------------------------------------------------------- diff --git a/phoenix-tracing-webapp/src/main/webapp/fonts/glyphicons-halflings-regular.woff2 b/phoenix-tracing-webapp/src/main/webapp/fonts/glyphicons-halflings-regular.woff2 new file mode 100755 index 0000000..64539b5 Binary files /dev/null and b/phoenix-tracing-webapp/src/main/webapp/fonts/glyphicons-halflings-regular.woff2 differ http://git-wip-us.apache.org/repos/asf/phoenix/blob/f76062c9/phoenix-tracing-webapp/src/main/webapp/index.html ---------------------------------------------------------------------- diff --git a/phoenix-tracing-webapp/src/main/webapp/index.html b/phoenix-tracing-webapp/src/main/webapp/index.html index 7f131fc..7ce6f2f 100755 --- a/phoenix-tracing-webapp/src/main/webapp/index.html +++ b/phoenix-tracing-webapp/src/main/webapp/index.html @@ -1,16 +1,110 @@ -<html> +<html ng-app="TracingAppCtrl"> - <head> +<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Phoenix Tracing WebApp"> <meta name="author" content="nishani"> + <link rel="icon" href="../../favicon.ico"> + <title>Phoenix Tracing WebApp</title> - </head> - <body> - <h1>Phoenix Tracing Web App</h1> - </body> + <!-- Bootstrap core CSS --> + <link href="css/bootstrap.css" rel="stylesheet"> + <link href="/css/bootstrap-theme.css" rel="stylesheet"> + <link href="css/font-awesome.css" rel="stylesheet"> + <!-- Bootstrap theme --> + <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> + <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif] + <script src="../../assets/js/ie-emulation-modes-warning.js"></script>--> + + <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> + <!--[if lt IE 9]> + <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js";></script> + <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js";></script> + <![endif]--> + + <script src="js/lib/jquery.min.js"></script> + <script src="js/lib/bootstrap.js"></script> + <!--angularjs --> + <script src="js/lib/angular.js"></script> + <script src="js/lib/angular-route.js"></script> + <script src="js/app.js"></script> + <!--Trace app controllers--> + <script src="js/controllers/list-controllers.js"></script> + <script src="js/controllers/trace-count-controllers.js"></script> + <script src="js/controllers/trace-distribution-controllers.js"></script> + <script src="js/controllers/accordion-controllers.js"></script> + <script src="js/controllers/timeline-controllers.js"></script> + <script src="js/controllers/search-controllers.js"></script> + <script src="js/controllers/dependency-tree-controllers.js"></script> + <!--End of the app controllers--> + <script src="js/api/chart-model.js"></script> + + <!-- count trace chart--> + <script src="js/lib/ng-google-chart.js"></script> + <script src="js/lib/ui-bootstrap-tpls.js"></script> + <!--factory --> + <script src="js/factories/statement-factory-config.js"></script> + <script src="js/factories/statement-factory.js"></script> + <!--services--> + <script src="js/services/generate-statement-service.js"></script> + + + +</head> + +<body role="document"> + + <!-- Fixed navbar --> + <nav class="navbar navbar-inverse navbar-fixed-top"> + <div class="container"> + <div class="navbar-header"> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + <a class="navbar-brand" href="#dashboard">Phoenix Tracing</a> + </div> + <div id="navbar" class="navbar-collapse collapse"> + <ul class="nav navbar-nav"> + <li class="active"><a href="#home">Home</a></li> + <li><a href="#list">List</a></li> + <li><a href="#dependency-tree">Dependency Tree</a></li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Features<span class="caret"></span></a> + <ul class="dropdown-menu" role="menu"> + <!--li><a href="#search">Search</a></li--> + <li><a href="#count-chart">Count Chart</a></li> + <li><a href="#trace-distribution">Trace Distribution</a></li> + <li><a href="#trace-timeline">Trace TimeLine</a></li> + <li class="divider"></li> + <li><a href="#help">Help</a></li> + </ul> + </li> + <li><a href="#about">About</a></li> + + </ul> + </div> + <!--/.nav-collapse --> + </div> + </nav> + + <div class="container theme-showcase" role="main"> + + + <div ng-view></div> + + </div> + <script> + $(".navbar a").on("click", function() { + $(".navbar").find(".active").removeClass("active"); + $(this).parent().addClass("active"); + }); + </script> +</body> </html> http://git-wip-us.apache.org/repos/asf/phoenix/blob/f76062c9/phoenix-tracing-webapp/src/main/webapp/js/api/chart-model.js ---------------------------------------------------------------------- diff --git a/phoenix-tracing-webapp/src/main/webapp/js/api/chart-model.js b/phoenix-tracing-webapp/src/main/webapp/js/api/chart-model.js new file mode 100644 index 0000000..9189bdf --- /dev/null +++ b/phoenix-tracing-webapp/src/main/webapp/js/api/chart-model.js @@ -0,0 +1,177 @@ +var timeLine = {}; +var dependencyChart = {}; +var chartObject = { + "type": "PieChart", + "displayed": true, + "data": { + "cols": [ + { + "id": "node", + "label": "Node", + "type": "string", + "p": {} + }, + { + "id": "traceCount", + "label": "trace Count", + "type": "number", + "p": {} + } + ], + "rows": [ + { + "c": [ + { + "v": "Node1" + }, + { + "v": 0, + } + ] + } + ] + }, + "options": { + "height": 400, + "width": 700, + "fill": 20, + "displayExactValues": true, + "vAxis": { + "title": "Trace count", + "gridlines": { + "count": 10 + } + }, + "hAxis": { + "title": "Node" + } + }, + "formatters": {} +} +//getting time line model +timeLine = { + "type": "Timeline", + "displayed": true, + "data": { + "cols": [ + { + "id": "TraceID", + "label": "TraceID", + "type": "string", + "p": {} + }, + { + "id": "Label", + "label": "Label", + "type": "string", + "p": {} + }, + { + "id": "Start", + "label": "Start", + "type": "date", + "p": {} + }, + { + "id": "End", + "label": "End", + "type": "date", + "p": {} + }, + { + "type": "string", + "role": "tooltip", + "p": { + "html": true, + "role": "tooltip" + } + } + ], + "rows": [ + { + "c": [ + { + "v": "Trace 01" + }, + { + "v": "Writing mutation batch for table: MY_TABLE1" + }, + { + "v": new Date(1434196101623) + }, + { + "v": new Date(1434196101784) + }, + { + "v": 'Mock tooltip' + } + ] + } + ] + }, + "options": {'tooltip': { + 'isHtml': true + }}, + "formatters": {} +}; +// model of the dependency chart (org chart model) +dependencyChart = +{"type": "OrgChart", + "displayed": true, + "data": { + "cols": [ + { + "id": "TraceID", + "label": "TraceID", + "type": "string" + }, + { + "id": "Label", + "label": "Label", + "type": "string" + }, + { + "id": "ToolTip", + "label": "ToolTip", + "type": "string" + } + ], + "rows": [ + { + "c": [ + { + "v": "Trace01" + }, + { + "v": "" + }, + { + "v": "root" + } + ] + } + ] + }, + "options": { + allowHtml:true, + allowCollapse:true, + tooltip: { isHtml: true } + }, + "formatters": {} +}; +//model for clearing tree +var ClearRow = [ + { + "c": [ + { + "v": "" + }, + { + "v": "" + }, + { + "v": "" + } + ] + } + ]; \ No newline at end of file http://git-wip-us.apache.org/repos/asf/phoenix/blob/f76062c9/phoenix-tracing-webapp/src/main/webapp/js/app.js ---------------------------------------------------------------------- diff --git a/phoenix-tracing-webapp/src/main/webapp/js/app.js b/phoenix-tracing-webapp/src/main/webapp/js/app.js new file mode 100755 index 0000000..3ab4974 --- /dev/null +++ b/phoenix-tracing-webapp/src/main/webapp/js/app.js @@ -0,0 +1,52 @@ +var TraceApp = angular.module('TracingAppCtrl', [ + 'ngRoute', + 'TracingCtrl', + 'UICtrl', + 'TimeLineCtrl', + 'DepTreeCtrl', + 'SearchCtrl' +]); + +TraceApp.config(['$routeProvider', + function($routeProvider) { + $routeProvider. + when('/about', { + templateUrl: 'partials/about.html' + }). + when('/search', { + templateUrl: 'partials/search.html', + controller: 'SearchTraceCtrl' + }). + when('/count-chart', { + templateUrl: 'partials/chart.html', + controller: 'TraceCountChartCtrl' + }). + when('/trace-distribution', { + templateUrl: 'partials/chart.html', + controller: 'TraceDistChartCtrl' + }). + when('/trace-timeline', { + templateUrl: 'partials/google-chart.html', + controller: 'TraceTimeLineCtrl' + }). + when('/help', { + templateUrl: 'partials/help.html' + }). + when('/list', { + templateUrl: 'partials/list.html', + controller: 'TraceListCtrl' + }). + when('/dependency-tree', { + templateUrl: 'partials/dependency-tree.html', + controller: 'TraceDepTreeCtrl' + }). + when('/home', { + templateUrl: 'partials/home.html' + }). + when('/dashboard', { + templateUrl: 'partials/phoenix-trace.html' + }). + otherwise({ + redirectTo: '/home' + }); + }]); \ No newline at end of file http://git-wip-us.apache.org/repos/asf/phoenix/blob/f76062c9/phoenix-tracing-webapp/src/main/webapp/js/config/chart-config.js ---------------------------------------------------------------------- diff --git a/phoenix-tracing-webapp/src/main/webapp/js/config/chart-config.js b/phoenix-tracing-webapp/src/main/webapp/js/config/chart-config.js new file mode 100644 index 0000000..5516fd1 --- /dev/null +++ b/phoenix-tracing-webapp/src/main/webapp/js/config/chart-config.js @@ -0,0 +1,45 @@ +'use strict'; + +angular.module('TimeLineCtrl') + .constant('chartModels', { + 'timeLineModel': { + "type": "Timeline", + "displayed": true, + "data": { + "cols": [{ + "id": "TraceID", + "label": "TraceID", + "type": "string", + "p": {} + }, { + "id": "Label", + "label": "Label", + "type": "string", + "p": {} + }, { + "id": "Start", + "label": "Start", + "type": "date", + "p": {} + }, { + "id": "End", + "label": "End", + "type": "date", + "p": {} + }], + "rows": [{ + "c": [{ + "v": "Trace 01" + }, { + "v": "Writing mutation batch for table: MY_TABLE1" + }, { + "v": new Date(1434196101623) + }, { + "v": new Date(1434196101784) + }] + }] + }, + "options": {}, + "formatters": {} + } + }); \ No newline at end of file http://git-wip-us.apache.org/repos/asf/phoenix/blob/f76062c9/phoenix-tracing-webapp/src/main/webapp/js/controllers/accordion-controllers.js ---------------------------------------------------------------------- diff --git a/phoenix-tracing-webapp/src/main/webapp/js/controllers/accordion-controllers.js b/phoenix-tracing-webapp/src/main/webapp/js/controllers/accordion-controllers.js new file mode 100755 index 0000000..81a2231 --- /dev/null +++ b/phoenix-tracing-webapp/src/main/webapp/js/controllers/accordion-controllers.js @@ -0,0 +1,29 @@ +'use strict'; + +var UICtrl = angular.module('UICtrl', ['ui.bootstrap']); +UICtrl.controller('AccordionDemoCtrl', function($scope) { + $scope.oneAtATime = true; + + $scope.groups = [ + { + title: 'Dynamic Group Header - 1', + content: 'Dynamic Group Body - 1' + }, + { + title: 'Dynamic Group Header - 2', + content: 'Dynamic Group Body - 2' + } + ]; + + $scope.items = ['Item 1', 'Item 2', 'Item 3']; + + $scope.addItem = function() { + var newItemNo = $scope.items.length + 1; + $scope.items.push('Item ' + newItemNo); + }; + + $scope.status = { + isFirstOpen: true, + isFirstDisabled: false + }; +}); http://git-wip-us.apache.org/repos/asf/phoenix/blob/f76062c9/phoenix-tracing-webapp/src/main/webapp/js/controllers/dependency-tree-controllers.js ---------------------------------------------------------------------- diff --git a/phoenix-tracing-webapp/src/main/webapp/js/controllers/dependency-tree-controllers.js b/phoenix-tracing-webapp/src/main/webapp/js/controllers/dependency-tree-controllers.js new file mode 100644 index 0000000..01d5aa6 --- /dev/null +++ b/phoenix-tracing-webapp/src/main/webapp/js/controllers/dependency-tree-controllers.js @@ -0,0 +1,143 @@ +'use strict'; + +var DepTreeCtrl = angular.module('DepTreeCtrl', ['ui.bootstrap']); +DepTreeCtrl.controller('TraceDepTreeCtrl', function($scope, $http, $location) { + var searchURL = "../trace/?action=searchTrace&traceid="; + var sqlQuery = null; + var rootId = null; + $scope.page = { + title: 'Dependency Tree for Trace' + }; + $scope.page = { + alertType: 'alert-info' + }; + + $scope.rootId = ""; + $scope.loadDependencyTree = function(url) { + $scope.clearTree(); + $scope.page.alertType = 'alert-info'; + $scope.reqStatus = "Loading Phoenix Tracing data"; + var searchObject = $location.search(); + $scope.traceId = searchObject.traceid + if($scope.traceId != null){ + getTreeData(url + $scope.traceId); + $scope.chartObject = null; + $scope.chartObject = dependencyChart; + }else{ + $scope.page.alertType = 'alert-warning'; + $scope.reqStatus = "Please Enter the TraceID."; + } + }; + + $scope.drawTree = function() { + $scope.clearTree(); + if ($scope.traceId != null) { + getTreeData(searchURL + $scope.traceId); + $scope.chartObject = dependencyChart; + } else { + $scope.reqStatus = "Please Enter TraceID"; + } + }; + + $scope.clearTree = function() { + if ($scope.chartObject != null) { + for (var i = 0; i < $scope.chartObject.data.rows.length; i++) { + $scope.chartObject.data.rows[i] = ClearRow[0]; + } + $scope.page.alertType = 'alert-info'; + $scope.reqStatus = "Tree is Cleared"; + } else { + $scope.reqStatus = "There is no Tree to clear"; + } + }; + + //shortning description + function getDescription(description) { + var shortDescription = ''; + var haveBracket = description.indexOf("("); + if (haveBracket != -1) { + shortDescription = description.substring(0, description.indexOf("(")) + } else { + shortDescription = description; + } + return shortDescription; + } + + function getToolTip(data) { + var toolTip = ''; + var dst = getDescription(data.description); + var start_time = new Date(parseFloat(data.start_time)); + var end_time = new Date(parseFloat(data.end_time)); + var duration = (data.end_time - data.start_time) + ' ns'; + var hostname = data.hostname; + toolTip = 'Hostname : ' + hostname + '\nDescription : ' + dst + + '\nStart At : ' + start_time + '\nEnd At : ' + end_time + + '\nTrace Id : ' + + data.trace_id + '\nParent Id : ' + data.parent_id + '\nSpan Id : ' + + data.span_id + '\nDuration : ' + duration; + return toolTip; + } + + function setSQLQuery(data) { + for (var i = 0; i < data.length; i++) { + var currentParentID = data[i].parent_id; + //console.log('p '+currentParentID); + for (var j = 0; j < data.length; j++) { + var currentSpanID = data[j].span_id; + //console.log('s '+currentSpanID); + if (currentSpanID == currentParentID) { + break; + } else if (j == data.length - 1) { + sqlQuery = data[i].description; + rootId = currentParentID; + } + } + } + } + + //get Dependancy tree with data model + function getTreeData(url) { + $scope.reqStatus = "Retriving data from Phoenix."; + $http.get(url). + success(function(data, status, headers, config) { + //getRootID(data); + setSQLQuery(data); + for (var i = 0; i < data.length; i++) { + var currentData = data[i]; + var currentDataParentId = currentData.parent_id; + //check for root id + if (currentDataParentId == rootId) { + currentDataParentId = ''; + } + var toolTip = getToolTip(currentData); + var datamodel = [{ + "v": currentData.span_id, + 'f': getDescription(currentData.description) + }, { + "v": currentDataParentId + }, { + "v": toolTip + }] + dependencyChart.data.rows[i] = { + "c": datamodel + } + } + $scope.page.alertType = 'alert-success'; + $scope.reqStatus = "Data retrieved on SQL Query - " + + sqlQuery; + }). + error(function(data, status, headers, config) { + console.log('error of loading dependencyChart'); + $scope.page.alertType = 'alert-warning'; + if ($scope.traceId == null) { + $scope.reqStatus = "Please Enter the TraceID."; + } else { + $scope.reqStatus = "Error in data retrieving."; + } + }); + //$scope.reqStatus = "Data retrieved on "+sqlQuery; + return dependencyChart; + }; + + $scope.loadDependencyTree(searchURL); +}); \ No newline at end of file http://git-wip-us.apache.org/repos/asf/phoenix/blob/f76062c9/phoenix-tracing-webapp/src/main/webapp/js/controllers/list-controllers.js ---------------------------------------------------------------------- diff --git a/phoenix-tracing-webapp/src/main/webapp/js/controllers/list-controllers.js b/phoenix-tracing-webapp/src/main/webapp/js/controllers/list-controllers.js new file mode 100755 index 0000000..8d0fcd6 --- /dev/null +++ b/phoenix-tracing-webapp/src/main/webapp/js/controllers/list-controllers.js @@ -0,0 +1,22 @@ +'use strict'; + +var TraceCtrl = angular.module('TracingCtrl', ['googlechart', 'ui.bootstrap']); + +//listing trace from json +TraceCtrl.controller('TraceListCtrl', function($scope, $http) { + //$scope.traces = sampleTrace; + $scope.traces = []; + $scope.tracesLimit =100; + $scope.letterLimit =100; + $scope.loadTrace = function() { + var httpRequest = $http({ + method: 'GET', + url: '../trace?action=getall&limit='+$scope.tracesLimit + + }).success(function(data, status) { + $scope.traces = data; + }); + + }; + $scope.loadTrace(); +}); \ No newline at end of file http://git-wip-us.apache.org/repos/asf/phoenix/blob/f76062c9/phoenix-tracing-webapp/src/main/webapp/js/controllers/search-controllers.js ---------------------------------------------------------------------- diff --git a/phoenix-tracing-webapp/src/main/webapp/js/controllers/search-controllers.js b/phoenix-tracing-webapp/src/main/webapp/js/controllers/search-controllers.js new file mode 100755 index 0000000..b66ad0a --- /dev/null +++ b/phoenix-tracing-webapp/src/main/webapp/js/controllers/search-controllers.js @@ -0,0 +1,71 @@ +'use strict'; + +var SearchCtrl = angular.module('SearchCtrl', ['ui.bootstrap']); +SearchCtrl.controller('SearchTraceCtrl', function($scope, GenerateStatementService) { + +$scope.sqlQuery="select * from MyTabel"; +$scope.search = function(sqlQuery) { + GenerateStatementService.setSQLQuery(sqlQuery); + console.log(GenerateStatementService.getSQLQuery()); + console.log(GenerateStatementService.getTracingStatement()); + $scope.tracingStatement = ' ---> ' +GenerateStatementService.getTracingStatement(); +}; + //Date picker + $scope.edt = new Date(); + $scope.today = function() { + $scope.dt = new Date(); + }; + $scope.today(); + + $scope.clear = function () { + $scope.dt = null; + }; + + + $scope.open = function($event) { + $event.preventDefault(); + $event.stopPropagation(); + + $scope.opened = true; + }; + + $scope.dateOptions = { + formatYear: 'yy', + startingDay: 1 + }; + + $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate']; + $scope.format = $scope.formats[0]; + + var tomorrow = new Date(); + tomorrow.setDate(tomorrow.getDate() + 1); + var afterTomorrow = new Date(); + afterTomorrow.setDate(tomorrow.getDate() + 2); + $scope.events = + [ + { + date: tomorrow, + status: 'full' + }, + { + date: afterTomorrow, + status: 'partially' + } + ]; + + $scope.getDayClass = function(date, mode) { + if (mode === 'day') { + var dayToCheck = new Date(date).setHours(0,0,0,0); + + for (var i=0;i<$scope.events.length;i++){ + var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0); + + if (dayToCheck === currentDay) { + return $scope.events[i].status; + } + } + } + + return ''; + }; +}); \ No newline at end of file http://git-wip-us.apache.org/repos/asf/phoenix/blob/f76062c9/phoenix-tracing-webapp/src/main/webapp/js/controllers/timeline-controllers.js ---------------------------------------------------------------------- diff --git a/phoenix-tracing-webapp/src/main/webapp/js/controllers/timeline-controllers.js b/phoenix-tracing-webapp/src/main/webapp/js/controllers/timeline-controllers.js new file mode 100755 index 0000000..d44e344 --- /dev/null +++ b/phoenix-tracing-webapp/src/main/webapp/js/controllers/timeline-controllers.js @@ -0,0 +1,153 @@ +'use strict'; + +var TimeLineCtrl = angular.module('TimeLineCtrl', ['ui.bootstrap']); +TimeLineCtrl.controller('TraceTimeLineCtrl', function($scope, $http, $location) { + $scope.page = { + title: 'Timeline for Trace' + }; + + $scope.clear = function() { + var nextid = $scope.chartObject.data.rows.length; + $scope.chartObject.data.rows.splice(1, nextid - 2); + } + + $scope.myItemID = "Trace 01"; + $scope.clearId = function() { + var count = $scope.chartObject.data.rows.length; + for (var i = 0; i < count; i++) { + var obj = $scope.chartObject.data.rows[i]; + if (obj === $scope.myItemID) { + $scope.chartObject.data.rows.splice(i, 1); + } + } + } + + $scope.trace = {}; + + //Appending items for time line + $scope.addItemToTimeLine = function(clear) { + if (clear == true) { + $scope.chartObject.data.rows[0].c = []; + $scope.loadTimeLine('../trace?action=searchTrace&traceid=' + $scope + .traceID); + } else { + console.log($scope.traceID) + if ($scope.traceID) { + var url = '../trace?action=searchTrace&traceid=' + $scope.traceID + $http.get(url). + success(function(data, status, headers, config) { + $scope.trace = data[0]; + var nextid = $scope.chartObject.data.rows.length; + console.log(data[0]); + //adding to the time line + for (var i = 0; i < data.length; i++) { + var currentData = data[i]; + var dest = getDescription(currentData.description); + $scope.chartObject.data.rows[nextid + i] = { + "c": [{ + "v": "Trace " + (nextid + i) + }, { + "v": dest + }, { + "v": new Date(parseFloat(currentData.start_time)) + }, { + "v": new Date(parseFloat(currentData.end_time)) + }, { + "v": dest + }] + } + } //end of for loop + }). + error(function(data, status, headers, config) { + console.log('error in loading time line item'); + }); + } else { + alert('Please, Add trace id'); + } + } + }; + + //loading timeline items for exisiting timeline chart + $scope.loadTimeLine = function(url) { + var searchURL = "../trace/?action=searchTrace&traceid="; + $scope.chartObject = timeLine; + var searchObject = $location.search(); + $scope.traceID = searchObject.traceid + console.log($scope.traceID); + var newsurl = searchURL + $scope.traceID; + if ($scope.traceID == null) { + getTimeLineChart(url); + } else { + //TODO draw chart in start of the page. + getTimeLineChart(newsurl); + //getTimeLineChart(url); + } + + $scope.clearId(); + }; + + //shortning description + function getDescription(description) { + var dst = ''; + var haveBracket = description.indexOf("("); + if (haveBracket != -1) { + dst = description.substring(0, description.indexOf("(")) + } else { + dst = description; + } + console.log(dst); + return dst; + } + + //trace item to show current time + var cdatamodel = [{ + "v": "Trace 01" + }, { + "v": "Current Time" + }, { + "v": new Date() + }, { + "v": new Date() + }, { + "v": "Current time" + }]; + + //getting TimeLine chart with data + function getTimeLineChart(url) { + $http.get(url). + success(function(data, status, headers, config) { + for (var i = 0; i < data.length; i++) { + console.log(data[i]) + var datax = data[i]; + var dest = getDescription(datax.description); + var datamodel = [{ + "v": "Trace " + i + }, { + "v": dest + }, { + "v": new Date(parseFloat(datax.start_time)) + }, { + "v": new Date(parseFloat(datax.end_time)) + }, { + "v": dest + }] + console.log(i) + timeLine.data.rows[i] = { + "c": datamodel + } + } + timeLine.data.rows[data.length] = { + "c": cdatamodel + } + console.log(timeLine); + $scope.chartObject = timeLine; + }). + error(function(data, status, headers, config) { + console.log('error of loading timeline in start'); + }); + console.log(timeLine); + return timeLine; + } + + $scope.loadTimeLine('../trace?action=getall&limit=7'); +}); \ No newline at end of file http://git-wip-us.apache.org/repos/asf/phoenix/blob/f76062c9/phoenix-tracing-webapp/src/main/webapp/js/controllers/trace-count-controllers.js ---------------------------------------------------------------------- diff --git a/phoenix-tracing-webapp/src/main/webapp/js/controllers/trace-count-controllers.js b/phoenix-tracing-webapp/src/main/webapp/js/controllers/trace-count-controllers.js new file mode 100755 index 0000000..8d2db7c --- /dev/null +++ b/phoenix-tracing-webapp/src/main/webapp/js/controllers/trace-count-controllers.js @@ -0,0 +1,40 @@ +'use strict'; + +TraceCtrl.controller('TraceCountChartCtrl', function($scope,$http) { + $scope.page = { + title: 'Trace Count Chart Graph' + }; + $scope.loadData = function() { + console.log('data is loading for getCount'); + $http.get('../trace/?action=getCount'). + success(function(data, status, headers, config) { + console.log('recived the data'); + console.log(data); + for(var i = 0; i < data.length; i++) { + var datax = data[i]; + var datamodel =[{ + "v": datax.description + }, { + "v": parseFloat(datax.count) + }] + chartObject.data.rows[i] = {"c": datamodel} + chartObject.options.width = '800'; + chartObject.options.hAxis.title = 'Traces'; + } + }). + error(function(data, status, headers, config) { + console.log('error of loading timeline in start'); + }); + + $scope.chartObject = chartObject; + }; + + $scope.setChartType = function(type) { + $scope.chartObject.type = type; + }; + + $scope.chartObject = {}; + $scope.loadData(); + $scope.chartObject.type = "ColumnChart"; + +}); \ No newline at end of file http://git-wip-us.apache.org/repos/asf/phoenix/blob/f76062c9/phoenix-tracing-webapp/src/main/webapp/js/controllers/trace-distribution-controllers.js ---------------------------------------------------------------------- diff --git a/phoenix-tracing-webapp/src/main/webapp/js/controllers/trace-distribution-controllers.js b/phoenix-tracing-webapp/src/main/webapp/js/controllers/trace-distribution-controllers.js new file mode 100755 index 0000000..efe7247 --- /dev/null +++ b/phoenix-tracing-webapp/src/main/webapp/js/controllers/trace-distribution-controllers.js @@ -0,0 +1,39 @@ +'use strict'; + +TraceCtrl.controller('TraceDistChartCtrl', function($scope, $http) { + + $scope.page = { + title: 'Trace Distribution' + }; + $scope.loadData = function() { + console.log('data is loading for getDistribution'); + $http.get('../trace/?action=getDistribution'). + success(function(data, status, headers, config) { + console.log('recived the data'); + console.log(data); + for(var i = 0; i < data.length; i++) { + var datax = data[i]; + var datamodel =[{ + "v": datax.hostname + }, { + "v": parseFloat(datax.count) + }] + chartObject.data.rows[i] = {"c": datamodel + } + } + }). + error(function(data, status, headers, config) { + console.log('error of loading timeline in start'); + }); + + $scope.chartObject = chartObject; + }; + + $scope.setChartType = function(type) { + $scope.chartObject.type = type; + }; + + $scope.chartObject = {}; + $scope.loadData(); + //$scope.chartObject = chartObject +}); \ No newline at end of file http://git-wip-us.apache.org/repos/asf/phoenix/blob/f76062c9/phoenix-tracing-webapp/src/main/webapp/js/factories/statement-factory-config.js ---------------------------------------------------------------------- diff --git a/phoenix-tracing-webapp/src/main/webapp/js/factories/statement-factory-config.js b/phoenix-tracing-webapp/src/main/webapp/js/factories/statement-factory-config.js new file mode 100755 index 0000000..4c38738 --- /dev/null +++ b/phoenix-tracing-webapp/src/main/webapp/js/factories/statement-factory-config.js @@ -0,0 +1,14 @@ +'use strict'; +/** + * @ngdoc function + * @name TracingAppCtrl.statment configure + * @description + * # configures will contains the configure for statement factory. + * + */ +angular.module('TracingAppCtrl') + .constant('stateConfig', { + 'command': {'select': 'FULL SCAN OVER '}, + 'start': 'Creating basic query for [', + 'end': ']' + }); \ No newline at end of file http://git-wip-us.apache.org/repos/asf/phoenix/blob/f76062c9/phoenix-tracing-webapp/src/main/webapp/js/factories/statement-factory.js ---------------------------------------------------------------------- diff --git a/phoenix-tracing-webapp/src/main/webapp/js/factories/statement-factory.js b/phoenix-tracing-webapp/src/main/webapp/js/factories/statement-factory.js new file mode 100755 index 0000000..7a11f80 --- /dev/null +++ b/phoenix-tracing-webapp/src/main/webapp/js/factories/statement-factory.js @@ -0,0 +1,29 @@ +'use strict'; + +/** + * SQL Convert Statement Factory + * + */ + +angular.module('TracingAppCtrl').factory('StatementFactory', function(stateConfig) { + + var StatementFactory = function(command,tableName) { + this.start = stateConfig.start; + this.command = stateConfig.command[command]; + this.tableName = tableName; + this.filters = {}; + this.groupBy = {}; + this.keys = {}; + this.end = stateConfig.end; + }; + + StatementFactory.setKeys = function(keys) { + ChartFactory.keys = keys; + }; + + StatementFactory.setCommands = function(command) { + ChartFactory.command = command; + }; + + return StatementFactory; +}); \ No newline at end of file
