phoenix-commits mailing list archives

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


Mime
View raw message