phoenix-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From ndimi...@apache.org
Subject [10/18] phoenix git commit: PHOENIX-2187 Creating the front-end application for Phoenix Tracing Web App (Nishani)
Date Thu, 10 Sep 2015 18:41:08 GMT
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


Mime
View raw message