http://git-wip-us.apache.org/repos/asf/phoenix/blob/8e27399c/phoenix-tracing-webapp/src/main/webapp/js/services/generate-statement-service.js
----------------------------------------------------------------------
diff --git 
a/phoenix-tracing-webapp/src/main/webapp/js/services/generate-statement-service.js
 
b/phoenix-tracing-webapp/src/main/webapp/js/services/generate-statement-service.js
new file mode 100755
index 0000000..a736656
--- /dev/null
+++ 
b/phoenix-tracing-webapp/src/main/webapp/js/services/generate-statement-service.js
@@ -0,0 +1,46 @@
+'use strict';
+/**
+ * this services was writtern following different pattern.
+ * Generate Statement Service mainly converting SQL Statement to Tracing 
Decription Label
+ * To-Do Switching controllers to this pattern of coding
+ *
+ */
+angular.module('TracingAppCtrl').service('GenerateStatementService', function(
+  StatementFactory) {
+  /*using statement facotry - It is in progress*/
+  var SQLQuery = null;
+  var tracingStatement = null;
+  //following Grammar @ http://phoenix.apache.org/language/index.html
+  //To-Do this model will improve as developing is going on
+  var SQLQueryObject = {
+    commands: {},
+    keys: [],
+    schema: null,
+    tabel: null,
+    filters: {},
+    groupBy: {},
+    orderBy: {},
+    limits: {}
+  }
+  this.setSQLQuery = function(sqlQuery) {
+    SQLQuery = sqlQuery;
+  };
+  this.getSQLQuery = function() {
+    return SQLQuery;
+  };
+  this.getTracingStatement = function() {
+    //will using partitioningSQLQuery to convert SQL to TracingStatement
+    partitioningSQLQuery();
+    var statementFactory = new StatementFactory(SQLQueryObject.commands,
+      SQLQueryObject.tabel);
+    tracingStatement = statementFactory.start + statementFactory.command +
+      statementFactory.tableName + statementFactory.end;
+    return tracingStatement;
+  };
+  //sql statements partitioning
+  function partitioningSQLQuery() {
+    //Building SQLQueryObject
+    SQLQueryObject.commands = SQLQuery.split(" ")[0];
+    SQLQueryObject.tabel = SQLQuery.split("from ")[1].split(" ")[0];
+  };
+});
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/phoenix/blob/8e27399c/phoenix-tracing-webapp/src/main/webapp/partials/about.html
----------------------------------------------------------------------
diff --git a/phoenix-tracing-webapp/src/main/webapp/partials/about.html 
b/phoenix-tracing-webapp/src/main/webapp/partials/about.html
new file mode 100755
index 0000000..9dc76d7
--- /dev/null
+++ b/phoenix-tracing-webapp/src/main/webapp/partials/about.html
@@ -0,0 +1,10 @@
+<div class="jumbotron">
+  <h1>About</h1>
+</div>
+
+
+<div class="page-header">
+<p>The tracing web app for Apache Phoenix contains features list, dependency 
tree, trace count, trace distribution and timeline.</p>
+<p>In List the most recent traces are listed down. The limiting value is used 
to determine the trace count displayed. With each trace there is an option to 
view either the dependency tree or the timeline.The dependency tree views the 
traces belonging to a trace id in a tree view. The trace id is the input to the 
system. The parent child relationship of the traces can be viewed clearly. The 
tooltip gives the host name, parent id, span id,start time,end time, 
description and duration. Each node is collapsable and expandable. The SQL 
Query is viewed for each search. In the trace count the trace list is 
categorized by the description.</p>
+<p>The trace count chart can be viewed as pie charts, line charts, bar charts 
and area charts. The chart changing option is collapseble and could be hidden. 
The trace distribution chart shows the traces across phoenix hosts on which 
they are running. The charts used are pie charts, line charts, bar charts and 
area charts. The chart changing option is collapseble and could be hidden. In 
the traces can be viewed along the timeline for a given trace id. Traces can be 
added or cleared from the timeline. There should be a minimum of two traces 
starting at two different times for the system to draw its timeline. <p>
+</div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/phoenix/blob/8e27399c/phoenix-tracing-webapp/src/main/webapp/partials/chart.html
----------------------------------------------------------------------
diff --git a/phoenix-tracing-webapp/src/main/webapp/partials/chart.html 
b/phoenix-tracing-webapp/src/main/webapp/partials/chart.html
new file mode 100755
index 0000000..f41a431
--- /dev/null
+++ b/phoenix-tracing-webapp/src/main/webapp/partials/chart.html
@@ -0,0 +1,24 @@
+<div class="jumbotron">
+  <h1>{{page.title}}</h1>
+</div>
+
+<div ng-controller="AccordionDemoCtrl">
+ <accordion close-others="oneAtATime">
+    <accordion-group is-open="status.isFirstOpen" 
is-disabled="status.isFirstDisabled" >
+     <accordion-heading>
+     Controller Panel
+     <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': 
status.open, 'glyphicon-chevron-right': !status.open}"></i>
+     </accordion-heading>
+      <div class="col-md-4">
+        <label>Chart Type</label><br>
+        <div class="btn-group">
+          <label class="btn btn-primary" ng-model="checkModel.left" 
ng-click="setChartType('PieChart')">Pie</label>
+          <label class="btn btn-primary" ng-model="checkModel.middle" 
ng-click="setChartType('LineChart')">Line</label>
+          <label class="btn btn-primary" ng-model="checkModel.right" 
ng-click="setChartType('BarChart')">Bar</label>
+          <label class="btn btn-primary" ng-model="checkModel.left" 
ng-click="setChartType('AreaChart')">Area</label>
+        </div>
+      </div>
+    </accordion-group>
+</accordion>
+</div>
+<div google-chart chart="chartObject" style="{{cssStyle}}"></div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/phoenix/blob/8e27399c/phoenix-tracing-webapp/src/main/webapp/partials/contact.html
----------------------------------------------------------------------
diff --git a/phoenix-tracing-webapp/src/main/webapp/partials/contact.html 
b/phoenix-tracing-webapp/src/main/webapp/partials/contact.html
new file mode 100755
index 0000000..8f707f8
--- /dev/null
+++ b/phoenix-tracing-webapp/src/main/webapp/partials/contact.html
@@ -0,0 +1,5 @@
+<div class="jumbotron">
+    <h1>Contacts</h1>
+</div>
+
+<div class="page-header"></div>

http://git-wip-us.apache.org/repos/asf/phoenix/blob/8e27399c/phoenix-tracing-webapp/src/main/webapp/partials/dependency-tree.html
----------------------------------------------------------------------
diff --git 
a/phoenix-tracing-webapp/src/main/webapp/partials/dependency-tree.html 
b/phoenix-tracing-webapp/src/main/webapp/partials/dependency-tree.html
new file mode 100755
index 0000000..c5ba316
--- /dev/null
+++ b/phoenix-tracing-webapp/src/main/webapp/partials/dependency-tree.html
@@ -0,0 +1,11 @@
+<div class="jumbotron">
+  <h1>{{page.title}}</h1>
+</div>
+
+<label>Trace ID:
+  <input type="text" ng-model="traceId"/>
+  <a class="btn btn-default" ng-click="drawTree()">Draw</i></a>
+  <a class="btn btn-default" ng-click="clearTree()">Clear</i></a>
+</label>
+<div class="alert {{page.alertType}}" role="alert">{{reqStatus}}</div>
+<div google-chart chart="chartObject" style="height: 70%;"></div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/phoenix/blob/8e27399c/phoenix-tracing-webapp/src/main/webapp/partials/google-chart.html
----------------------------------------------------------------------
diff --git a/phoenix-tracing-webapp/src/main/webapp/partials/google-chart.html 
b/phoenix-tracing-webapp/src/main/webapp/partials/google-chart.html
new file mode 100755
index 0000000..f8ac4ae
--- /dev/null
+++ b/phoenix-tracing-webapp/src/main/webapp/partials/google-chart.html
@@ -0,0 +1,23 @@
+<div class="jumbotron">
+  <h1>{{page.title}}</h1>
+</div>
+
+<div class="panel panel-default">
+  <div class="panel-heading">Trace Picker</div>
+  <div class="panel-body">
+    <div class="col-xs-6">
+    <label>Trace ID:
+      <input type="text" ng-model="traceID" >
+      <a class="btn btn-primary" ng-click="addItemToTimeLine(false)">Add 
Trace</a>
+    </div>
+    <div class="col-xs-2">
+      <select class="form-control" ng-model="myItemID"
+      ng-options="line.c[0].v for line in chartObject.data.rows"></select>
+    </div>
+    <div class="col-xs-4">
+      <label class="btn btn-primary" ng-click="clearId()">Clear Trace</label>
+      <label class="btn btn-primary" ng-click="clear()">Clear</label>
+    </div>
+  </div>
+</div>
+<div google-chart chart="chartObject" style="height: 100%;"></div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/phoenix/blob/8e27399c/phoenix-tracing-webapp/src/main/webapp/partials/help.html
----------------------------------------------------------------------
diff --git a/phoenix-tracing-webapp/src/main/webapp/partials/help.html 
b/phoenix-tracing-webapp/src/main/webapp/partials/help.html
new file mode 100755
index 0000000..557892e
--- /dev/null
+++ b/phoenix-tracing-webapp/src/main/webapp/partials/help.html
@@ -0,0 +1,36 @@
+ <!-- Main jumbotron for a primary marketing message or call to action -->
+<div class="jumbotron">
+  <h1>Help</h1>
+</div>
+
+
+<div class="page-header">
+  <div class="list-group">
+    <div href="#" class="list-group-item">
+      <h4 class="list-group-item-heading">1. Enable tracing for Apache Phoenix 
[1]</h4>
+      <p class="list-group-item-text"><a href= 
"https://phoenix.apache.org/tracing.html";>https://phoenix.apache.org/tracing.html</a></p>
+    </div>
+  </div>
+
+  <div class="list-group">
+    <div href="#" class="list-group-item">
+      <h4 class="list-group-item-heading">2. Start the web app</h4>
+      <p class="list-group-item-text"><code>python traceserver.py 
start</code></p>
+    </div>
+  </div>
+
+  <div class="list-group">
+    <div href="#" class="list-group-item ">
+      <h4 class="list-group-item-heading">3. Open following address on a web 
browser</h4>
+      <p 
class="list-group-item-text"><code>-Dphoenix.traceserver.http.port=8887</code></p>
+    </div>
+  </div>
+
+  <div class="list-group">
+    <div class="list-group-item">
+      <h4 class="list-group-item-heading">4. Stop trace web app</h4>
+      <p class="list-group-item-text"><code>python traceserver.py 
stop</code></p>
+    </div>
+  </div>
+
+</div>

http://git-wip-us.apache.org/repos/asf/phoenix/blob/8e27399c/phoenix-tracing-webapp/src/main/webapp/partials/home.html
----------------------------------------------------------------------
diff --git a/phoenix-tracing-webapp/src/main/webapp/partials/home.html 
b/phoenix-tracing-webapp/src/main/webapp/partials/home.html
new file mode 100755
index 0000000..4473af2
--- /dev/null
+++ b/phoenix-tracing-webapp/src/main/webapp/partials/home.html
@@ -0,0 +1,20 @@
+ <!-- Main jumbotron for a primary marketing message or call to action -->
+<div class="jumbotron">
+  <h1>Phoenix Tracing</h1>
+  <p>You have more interaction with Phoenix Tracing. This User Interface 
allows you to see and search each important step in a query or insertion,
+  all they way from the client through into the HBase side, and back again.</p>
+</div>
+<div class="page-header">
+  <h4><span class="label label-success">Apache Phoenix</span> is sql query 
engine for Apache Hbase.</h4>
+  <h4>It helps managing and querying the Hbase tables. The web app is used to 
visualize the tracing information. It helps to predict and analyze query 
information and system matrices</h4>
+
+  <h4><span class="label label-success">The Apache Phoenix Tracing Web 
app</span> has 5 features.</h4>
+
+  <ol>
+    <li>List - lists the the traces with user preferred limits with access to 
it's dependency tree and timelines. </li>
+    <li>Count Chart - Categorizing the traces according to the description. 
</li>
+    <li>Trace Distribution -  Visualizing the trace counts based on the host 
they are running.</li>
+    <li>Trace Timeline - Visualizing the traces along the time axis. </li>
+    <li>Dependency Tree - Creating the tree view of the traces.</li>
+   </ol>
+</div>

http://git-wip-us.apache.org/repos/asf/phoenix/blob/8e27399c/phoenix-tracing-webapp/src/main/webapp/partials/list.html
----------------------------------------------------------------------
diff --git a/phoenix-tracing-webapp/src/main/webapp/partials/list.html 
b/phoenix-tracing-webapp/src/main/webapp/partials/list.html
new file mode 100755
index 0000000..36b3b94
--- /dev/null
+++ b/phoenix-tracing-webapp/src/main/webapp/partials/list.html
@@ -0,0 +1,39 @@
+<!-- Main jumbotron for a primary marketing message or call to action -->
+<div class="jumbotron">
+  <h1>Phoenix Tracing List</h1>
+</div>
+
+
+<div class="page-header">
+  <label>Size:
+  <input type="number" name="input" ng-model="tracesLimit"
+         min="1" max="1500" required>
+  <a class="btn btn-default" ng-click="loadTrace()">Load</a>
+  </label>
+<div class="row">
+  <div class="col-md-12">
+  <table class="table table-striped">
+    <thead>
+      <tr>
+        <th>Parent ID</th>
+        <th>Span ID</th>
+        <th>Description</th>
+        <th>View Models</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr ng-repeat="trace in traces">
+        <td>{{trace.parent_id}}</td>
+        <td>{{trace.span_id}}</td>
+        <td>{{trace.description | limitTo:letterLimit}}</td>
+        <td>
+          <div class="btn-group " role="group" aria-label="...">
+             <a href="./#/dependency-tree?traceid={{trace.trace_id}}" 
class="btn btn-info" role="button"><i class="fa fa-sort-amount-asc"></i></a>
+             <a href="./#/trace-timeline?traceid={{trace.trace_id}}" 
class="btn btn-info" role="button"><i class="fa fa-sliders"></i></a>
+          </div>
+        </td>
+      </tr>
+     </tbody>
+  </table>
+</div></div>
+</div>

http://git-wip-us.apache.org/repos/asf/phoenix/blob/8e27399c/phoenix-tracing-webapp/src/main/webapp/partials/phoenix-trace.html
----------------------------------------------------------------------
diff --git a/phoenix-tracing-webapp/src/main/webapp/partials/phoenix-trace.html 
b/phoenix-tracing-webapp/src/main/webapp/partials/phoenix-trace.html
new file mode 100644
index 0000000..08e38ac
--- /dev/null
+++ b/phoenix-tracing-webapp/src/main/webapp/partials/phoenix-trace.html
@@ -0,0 +1,60 @@
+ <!-- Main jumbotron for a primary marketing message or call to action -->
+<div class="jumbotron">
+  <h1>Phoenix Tracing</h1>
+</div>
+<div class="page-header">
+
+<div class="row">
+  <div class="col-sm-6 col-md-4">
+    <div class="thumbnail">
+      <div class="caption">
+        <h3><i class="fa fa-list fa-5"></i>  List</h3>
+        <p>The most recent traces are listed down. The limiting value is used 
to determine the trace count displayed. With each trace there is an option to 
view either the dependency tree or the timeline.</p>
+        <p><a href="#list" class="btn btn-primary" role="button">View</a></p>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-sm-6 col-md-4">
+    <div class="thumbnail">
+      <div class="caption">
+        <h3><i class="fa fa-bar-chart"></i>  Trace Count</h3>
+        <p>The trace list is categorized by the description. The trace count 
chart can be viewed as pie charts, line charts, bar charts and area charts. The 
chart changing option is collapseble and could be hidden.</p>
+        <p><a href="#count-chart" class="btn btn-primary" 
role="button">View</a></p>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-sm-6 col-md-4">
+    <div class="thumbnail">
+      <div class="caption">
+        <h3><i class="fa fa-pie-chart"></i>  Trace Distribution</h3>
+        <p>The trace distribution chart shows the traces across phoenix hosts 
on which they are running. The charts used are pie charts, line charts, bar 
charts and area charts. The chart changing option is collapseble and could be 
hidden.</p>
+        <p><a href="#trace-distribution" class="btn btn-primary" 
role="button">View</a>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-sm-6 col-md-4">
+    <div class="thumbnail">
+      <div class="caption">
+        <h3><i class="fa fa-sitemap"></i>  Dependency Tree</h3>
+        <p>The dependency tree views the traces belonging to a trace id in a 
tree view. The trace id is the input to the system. The parentchild 
relationship of the traces can be viewed clearly. The tooltip gives the host 
name, parent id, span id,start time,end time,description and duration. Each 
node is collapsable and expandable. The SQL Query is viewed for each search.</p>
+        <p><a href="#dependency-tree" class="btn btn-primary" 
role="button">View</a></p>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-sm-6 col-md-4">
+    <div class="thumbnail">
+      <div class="caption">
+        <h3><i class="fa fa-sliders"></i>  Timeline</h3>
+        <p>The traces can be viewed along the timeline for a given trace id. 
Traces can be added or cleared from the timeline. There should be a minimum of 
two traces starting at two different times for the system to draw its 
timeline.</p>
+        <p><a href="#trace-timeline" class="btn btn-primary" 
role="button">View</a></p>
+      </div>
+    </div>
+  </div>
+ </div>
+</div>

http://git-wip-us.apache.org/repos/asf/phoenix/blob/8e27399c/phoenix-tracing-webapp/src/main/webapp/partials/search.html
----------------------------------------------------------------------
diff --git a/phoenix-tracing-webapp/src/main/webapp/partials/search.html 
b/phoenix-tracing-webapp/src/main/webapp/partials/search.html
new file mode 100755
index 0000000..7111676
--- /dev/null
+++ b/phoenix-tracing-webapp/src/main/webapp/partials/search.html
@@ -0,0 +1,58 @@
+<div class="jumbotron">
+  <h1>Search</h1>
+</div>
+
+<div class="page-header">
+
+  <!--To-Add for main.CSS-->
+  <div ng-controller="SearchTraceCtrl">
+    <pre>Start Date is: <em>{{dt | date:'fullDate' }}</em>
+End Date is: <em>{{edt | date:'fullDate' }}</em>
+SQL Statment is: <em>{{sqlQuery}}</em> <em><b>{{tracingStatement}}</b></em>
+    </pre>
+
+    <div class="row">
+      <div class="col-md-3">
+        <p>Start Date: </p>
+      </div>
+      <div class="col-md-3">
+        <p class="input-group">
+          <input type="date" class="form-control" datepicker-popup 
ng-model="dt" is-open="opened"
+          min-date="minDate" max-date="maxDate" 
datepicker-options="dateOptions"
+          date-disabled="disabled(date, mode)" ng-required="true" 
close-text="Close"
+          />
+          <span class="input-group-btn">
+                <button type="button" class="btn btn-default" 
ng-click="open($event)"><i class="fa fa-calendar"></i></button>
+              </span>
+        </p>
+      </div>
+
+    <div class="col-md-3">
+      <p>End Date: </p>
+    </div>
+    <div class="col-md-3">
+      <p class="input-group">
+        <input type="date" class="form-control" datepicker-popup 
ng-model="edt" is-open="opened"
+        min-date="minDate" max-date="maxDate" datepicker-options="dateOptions"
+        date-disabled="disabled(date, mode)" ng-required="true" 
close-text="Close"
+        />
+        <span class="input-group-btn">
+                <button type="button" class="btn btn-default" 
ng-click="open($event)"><i class="fa fa-calendar"></i></button>
+              </span>
+      </p>
+    </div>
+  </div>
+  <!--SQL uery mapping-->
+    <div class="row">
+      <div class="col-md-3">
+      <p>SQL Query: </p>
+        </div>
+         <div class="col-md-9">
+      <p><input type="text" class="form-control" ng-model="sqlQuery"/></p>
+        </div>
+      </div> <!-- /row -->
+    <button type="button" class="btn btn-default" 
ng-click="search(sqlQuery)"><i class="fa fa-search"></i> Search</button>
+  <hr />
+
+</div>
+</div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/phoenix/blob/8e27399c/phoenix-tracing-webapp/src/test/webapp/js/specs/app-route-spec.js
----------------------------------------------------------------------
diff --git a/phoenix-tracing-webapp/src/test/webapp/js/specs/app-route-spec.js 
b/phoenix-tracing-webapp/src/test/webapp/js/specs/app-route-spec.js
new file mode 100644
index 0000000..63b665b
--- /dev/null
+++ b/phoenix-tracing-webapp/src/test/webapp/js/specs/app-route-spec.js
@@ -0,0 +1,55 @@
+'use strict';
+
+
+describe('The Tracing Web App Routes', function() {
+
+  describe('Checking Ctrls and Partials', function() {
+    // load the module
+    beforeEach(module('TracingAppCtrl'));
+
+    it('/about',
+      inject(function($route) {
+        
expect($route.routes['/about'].templateUrl).toEqual('partials/about.html');
+      }));
+
+    it('/count-chart',
+      inject(function($route) {
+        
expect($route.routes['/count-chart'].controller).toBe('TraceCountChartCtrl');
+        
expect($route.routes['/count-chart'].templateUrl).toEqual('partials/chart.html');
+      }));
+
+    it('/trace-distribution',
+      inject(function($route) {
+        
expect($route.routes['/trace-distribution'].controller).toBe('TraceDistChartCtrl');
+        
expect($route.routes['/trace-distribution'].templateUrl).toEqual('partials/chart.html');
+      }));
+
+    it('/trace-timeline',
+      inject(function($route) {
+        
expect($route.routes['/trace-timeline'].controller).toBe('TraceTimeLineCtrl');
+        
expect($route.routes['/trace-timeline'].templateUrl).toEqual('partials/google-chart.html');
+      }));
+
+    it('/list',
+      inject(function($route) {
+        expect($route.routes['/list'].controller).toBe('TraceListCtrl');
+        
expect($route.routes['/list'].templateUrl).toEqual('partials/list.html');
+      }));
+
+    it('/home',
+      inject(function($route) {
+        
expect($route.routes['/home'].templateUrl).toEqual('partials/home.html');
+      }));
+
+    it('/help',
+      inject(function($route) {
+        
expect($route.routes['/help'].templateUrl).toEqual('partials/help.html');
+      }));
+
+    it('/',
+      inject(function($route) {
+        expect($route.routes[null].redirectTo).toEqual('/home');
+      }));
+
+  });
+});
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/phoenix/blob/8e27399c/phoenix-tracing-webapp/src/test/webapp/js/specs/timeline-ctrl-spec.js
----------------------------------------------------------------------
diff --git 
a/phoenix-tracing-webapp/src/test/webapp/js/specs/timeline-ctrl-spec.js 
b/phoenix-tracing-webapp/src/test/webapp/js/specs/timeline-ctrl-spec.js
new file mode 100644
index 0000000..1527345
--- /dev/null
+++ b/phoenix-tracing-webapp/src/test/webapp/js/specs/timeline-ctrl-spec.js
@@ -0,0 +1,27 @@
+'use strict';
+
+
+describe('Controller : TimeLineCtrl', function() {
+/*
+  beforeEach(module('TimeLineCtrl'));
+
+  beforeEach(inject(function($rootScope, $controller) {
+    scope = $rootScope.$new();
+    traceTimeLineCtrl = $controller('TraceTimeLineCtrl', {
+      $scope: scope
+    });
+  }));
+
+
+
+  it('should to be defined', function() {
+    expect(scope).toBeDefined();
+  });
+
+  it('scope level variable should to be defined', function() {
+    expect(scope.chartObject).toBeDefined();
+    expect(scope.loadTimeLine).toBeDefined();
+    expect(scope.clear).toBeDefined();
+  });
+*/
+});
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/phoenix/blob/8e27399c/phoenix-tracing-webapp/src/test/webapp/js/specs/trace-list-ctrl-spec.js
----------------------------------------------------------------------
diff --git 
a/phoenix-tracing-webapp/src/test/webapp/js/specs/trace-list-ctrl-spec.js 
b/phoenix-tracing-webapp/src/test/webapp/js/specs/trace-list-ctrl-spec.js
new file mode 100644
index 0000000..c024013
--- /dev/null
+++ b/phoenix-tracing-webapp/src/test/webapp/js/specs/trace-list-ctrl-spec.js
@@ -0,0 +1,89 @@
+'use strict';
+
+
+describe('TracingCtrl', function() {
+
+  beforeEach(module('TracingCtrl'));
+  beforeEach(inject(function($rootScope, $controller) {
+    scope = $rootScope.$new();
+    traceListCtrl = $controller('TraceListCtrl', {
+      $scope: scope
+    });
+  }));
+
+
+  beforeEach(inject(function($injector) {
+    // Set up the mock http service responses
+    $httpBackend = $injector.get('$httpBackend');
+    // backend definition common for trace of phoenix
+    authRequestHandler = $httpBackend.when('GET', 
'../trace?action=getall&limit=100')
+      .respond([{
+        "start_time": 1438582622482,
+        "trace_id": -9223359832482284828,
+        "hostname": "pc",
+        "span_id": -876665211183522462,
+        "parent_id": -4694507801564472011,
+        "end_time": 1438582622483,
+        "count": 0,
+        "description": "Committing mutations to tables"
+      }]);
+    // Get hold of a scope (i.e. the root scope)
+    $rootScope = $injector.get('$rootScope');
+    // The $controller service is used to create instances of controllers
+    var $controller = $injector.get('$controller');
+
+    createController = function() {
+      return $controller('TraceListCtrl', {
+        '$scope': $rootScope
+      });
+    };
+  }));
+
+  it('should to be defined', function() {
+    expect(scope).toBeDefined();
+  });
+
+  it('scope level variable should to be defined', function() {
+    expect(scope.tracesLimit).toBeDefined();
+    expect(scope.traces).toBeDefined();
+    expect(scope.loadTrace).toBeDefined();
+  });
+
+  it('tracesLimit value', function() {
+    expect(scope.tracesLimit).toBe(100);
+  });
+
+  it('changing traces limit value', function() {
+    scope.tracesLimit = 25;
+    expect(scope.tracesLimit).toBe(25);
+    scope.tracesLimit = 124;
+    expect(scope.tracesLimit).toBe(124);
+  });
+
+  it('should fetch trace from phoenix', function() {
+    $httpBackend.expectGET('../trace?action=getall&limit=100');
+    var controller = createController();
+    $httpBackend.flush();
+  });
+
+  it('updating trace list after retriving phoenix trace', function() {
+    var controller = createController();
+    $httpBackend.flush();
+    expect($rootScope.traces).toBeDefined();
+    expect($rootScope.traces.length).toBe(1);
+  });
+
+  it('checking trace list attributes of phoenix trace', function() {
+    var controller = createController();
+    $httpBackend.flush();
+    expect($rootScope.traces[0].start_time).toBe(1438582622482);
+    expect($rootScope.traces[0].trace_id).toBe(-9223359832482284828);
+    expect($rootScope.traces[0].hostname).toBe('pc');
+    expect($rootScope.traces[0].span_id).toBe(-876665211183522462);
+    expect($rootScope.traces[0].parent_id).toBe(-4694507801564472011);
+    expect($rootScope.traces[0].end_time).toBe(1438582622483);
+    expect($rootScope.traces[0].count).toBe(0);
+    expect($rootScope.traces[0].description).toBe('Committing mutations to 
tables');
+  });
+
+});
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/phoenix/blob/8e27399c/phoenix-tracing-webapp/src/test/webapp/js/specs/tracing-app-ctrl-spec.js
----------------------------------------------------------------------
diff --git 
a/phoenix-tracing-webapp/src/test/webapp/js/specs/tracing-app-ctrl-spec.js 
b/phoenix-tracing-webapp/src/test/webapp/js/specs/tracing-app-ctrl-spec.js
new file mode 100644
index 0000000..8984d7f
--- /dev/null
+++ b/phoenix-tracing-webapp/src/test/webapp/js/specs/tracing-app-ctrl-spec.js
@@ -0,0 +1,23 @@
+'use strict';
+
+
+//beforeEach(module('TracingAppCtrl'));
+describe('The Tracing Web App ', function() {
+
+  describe('Controller: TracingAppCtrl', function() {
+
+    // load the controller's module
+    beforeEach(module('TracingAppCtrl'));
+
+
+    //testing all the main controllers in app
+    var TraceListCtrl, scope;
+    it('Controllers should to be defined', function() {
+      expect(TraceCtrl).toBeDefined();
+      expect(UICtrl).toBeDefined();
+      expect(TimeLineCtrl).toBeDefined();
+      expect(SearchCtrl).toBeDefined();
+    });
+  });
+
+});
\ No newline at end of file

Reply via email to