You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@griffin.apache.org by gu...@apache.org on 2017/06/01 06:55:50 UTC

[2/7] incubator-griffin git commit: Schedule2

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/1fa4f243/ui/pages/rules/createrule-va.html
----------------------------------------------------------------------
diff --git a/ui/pages/rules/createrule-va.html b/ui/pages/rules/createrule-va.html
deleted file mode 100644
index 7a6bf01..0000000
--- a/ui/pages/rules/createrule-va.html
+++ /dev/null
@@ -1,403 +0,0 @@
-<!--
-	Copyright (c) 2016 eBay Software Foundation.
-	Licensed under the Apache License, Version 2.0 (the "License");
-	you may not use this file except in compliance with the License.
-	You may obtain a copy of the License at
-
-	    http://www.apache.org/licenses/LICENSE-2.0
-
-	Unless required by applicable law or agreed to in writing, software
-	distributed under the License is distributed on an "AS IS" BASIS,
-	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-	See the License for the specific language governing permissions and
-	limitations under the License.
- -->
-<div class="container-fluid">
-  <div class="row">
-    <h5 class="over-title margin-bottom-15">Create DQ Model</h5>
-  </div><!--//row-->
-  <div class="row">
-    <form name="Form" id="form" novalidate>
-      <div id="wizard" class="swMain" >
-        <ul>
-						<li ng-click="form.goTo(Form, 1)">
-							<a href="" ng-class="{'selected' : currentStep >= 1, 'done' : currentStep > 1}" class="selected" style="">
-								<div class="stepNumber">
-									1
-								</div>
-								<span class="stepDesc text-small"> Choose Target </span>
-							</a>
-						</li>
-						<li ng-click="form.goTo(Form, 2)">
-							<a href="" ng-class="{'selected' : currentStep >= 2, 'done' : currentStep > 2}" class="" style="">
-								<div class="stepNumber">
-									2
-								</div>
-								<span class="stepDesc text-small"> Select Models </span>
-							</a>
-						</li>
-						<li ng-click="form.goTo(Form, 3)">
-							<a href="" ng-class="{'selected' : currentStep >= 3, 'done' : currentStep > 3}" class="" style="">
-								<div class="stepNumber">
-									3
-								</div>
-								<span class="stepDesc text-small"> Configuration </span>
-							</a>
-						</li>
-
-					</ul>
-
-        <div id="step-1" ng-show="currentStep == 1" class="formStep" >
-          <label class="stepDesc">This step let you choose the target for data quality comparision with target, Apollo datasets are enabled, other platofrms are coming soon. Currently you can only select the attributes from one schema</label>
-					<div class="container-fluid">
-            <!-- select db tree -->
-						<div class="col-md-4 col-lg-4 col-sm-4">
-							<fieldset>
-							  <legend>Please select schema</legend>
-                <div class="add-dataset" style="color:#b2c831">
-                    <a class="bark-link" href="#/createdataasset">Cannot find your DataAsset? Click here to add</a>
-                </div>
-                <div angular-treeview="true"
-                      tree-model="dbList"
-                      node-id="id"
-                      node-label="name"
-                      node-children="children"
-                      l1-icon="fa fa-database"
-                      l2-icon="fa fa-table"
-                      l3-icon="fa fa-file-text-o"
-                      class="y-scrollable">
-                </div>
-
-              </fieldset>
-						</div>
-
-            <!-- schema definition list -->
-						<div class="col-md-8 col-lg-8 col-sm-8">
-							<fieldset>
-								<legend>
-									Select one attribute
-								</legend>
-
-								<div class="y-scrollable">
-                  <div>
-                   <label>View schema:</label> <i ng-show="currentNode.parent" style="color:#fff;font-weight: bold;">{{currentNode.parent.name}}.{{currentNode.name}}</i>
-                  </div>
-                  <div>
-                   <label>Selected Column:</label> <i style="color:#fff;font-weight: bold;">{{form.selection}}</i>
-                  </div>
-                 <div>
-                   <table st-table="schemaCollection" class="table table-striped">
-                   	<thead>
-                     	<tr style="background-color:#7D95CC">
-                        <th></th>
-                     		<th>Column Name</th>
-                     		<th>Description</th>
-                     		<th>Data Type</th>
-                     		<th>Sample Data</th>
-
-                     	</tr>
-                   	</thead>
-                   	<tbody>
-                       <tr ng-if="!schemaCollection || schemaCollection.length == 0">
-                         <td colspan="5" style="text-align:center" ><span class="highlight">Please select a schema from the left tree first</span></td>
-                       </tr>
-                     	<tr ng-repeat="row in schemaCollection">
-                        <td><input type="radio"
-                              name="selAttr"
-                              value="{{row.name}}"
-                              ng-model="form.selection"
-                            />
-                        </td>
-                        <td>{{row.name}}</td>
-                     		<td>{{row.desc}}</td>
-                        <td>{{row.type}}</td>
-                        <td class="highlight">{{row.sample}}</td>
-                     	</tr>
-                   	</tbody>
-                   </table>
-                 </div>
-                </div>
-              </fieldset>
-            </div>
-
-            <div class="form-group btn-container">
-							<button class="btn btn-primary btn-o next-step btn-wide pull-right" ng-click="form.next(Form)">
-								Next <i class="fa fa-arrow-circle-right"></i>
-							</button>
-						</div>
-
-          </div>
-
-      </div>
-
-
-
-
-      <div id="step-2" ng-show="currentStep == 2" class="formStep" >
-        <label class="stepDesc">Please choose one of the validity models provided below:</label>
-        <div class="container-fluid">
-          <div class="col-md-12 col-lg-12 col-sm-12">
-            <fieldset>
-              <div class="y-scrollable">
-                <div class="container col-md-12 col-lg-12 col-sm-12">
-                  <div class="row">
-                    <div class="col-md-3 col-lg-3 col-sm-3">
-                      <h5>Simple Statistics</h5>
-                      <div class="container-fluid">
-                        <div class="col-md-12 col-lg-12 col-sm-12">
-                          <input name="vaType" type="radio" ng-model="form.vaType" value="2" ng-init="form.vaType=2" /> <label>Null Count</label>
-                        </div>
-                      </div>
-                      <div class="container-fluid">
-                        <div class="col-md-12 col-lg-12 col-sm-12">
-                          <input name="vaType" type="radio" ng-model="form.vaType"   value="3"/> <label>Unique Count</label>
-                        </div>
-                      </div>
-                      <div class="container-fluid">
-                        <div class="col-md-12 col-lg-12 col-sm-12">
-                          <input name="vaType" type="radio" ng-model="form.vaType" value="4"/> <label>Duplicate Count</label>
-                        </div>
-                      </div>
-                      <h5>Summary Statistics</h5>
-                      <div class="container-fluid">
-                        <div class="col-md-12 col-lg-12 col-sm-12">
-                          <input name="vaType" type="radio" ng-model="form.vaType"  value="5"/> <label>Maximum</label>
-                        </div>
-                      </div>
-                      <div class="container-fluid">
-                        <div class="col-md-12 col-lg-12 col-sm-12">
-                          <input name="vaType" type="radio" ng-model="form.vaType" value="6"/> <label>Minimum</label>
-                        </div>
-                      </div>
-                      <div class="container-fluid">
-                        <div class="col-md-12 col-lg-12 col-sm-12">
-                          <input name="vaType" type="radio" ng-model="form.vaType" value="7"/> <label>Mean</label>
-                        </div>
-                      </div>
-                      <div class="container-fluid">
-                        <div class="col-md-12 col-lg-12 col-sm-12">
-                          <input name="vaType" type="radio" ng-model="form.vaType" value="8"/> <label>Median</label>
-                        </div>
-                      </div>
-                      <h5>Advanced Statistics</h5>
-                      <div class="container-fluid">
-                        <div class="col-md-12 col-lg-12 col-sm-12">
-                          <input name="vaType" type="radio" ng-model="form.vaType" value="9" disabled/> <label>Regular Expression Match</label>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="col-md-9 col-lg-9 col-sm-9" ng-include="'/pages/rules/va-explaination.html'">
-                      <!-- <ng-include src="'/models.html'"/> -->
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </fieldset>
-          </div>
-
-          <div class="form-group btn-container" >
-            <button class="btn btn-primary btn-o back-step btn-wide pull-left" ng-click="form.prev(Form)">
-                <i class="fa fa-arrow-circle-left"></i> Back
-            </button>
-            <button class="btn btn-primary btn-o next-step btn-wide pull-right" ng-click="form.next(Form)">
-                Next <i class="fa fa-arrow-circle-right"></i>
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div id="step-3" ng-show="currentStep == 3" class="formStep" >
-        <label class="stepDesc">Please setup the model required information</label>
-        <div class="container-fluid">
-
-          <!-- schema definition list -->
-          <div class="col-md-12 col-lg-12 col-sm-12">
-            <fieldset>
-              <legend>
-                Required Information
-              </legend>
-              <div class="y-scrollable">
-                <div class="col-md-12 col-lg-12 col-sm-12">
-                  <div class="form-group" ng-class="{'has-error':Form.ruleName.$dirty&&Form.ruleName.$invalid, 'has-success':Form.ruleName.$valid}">
-                    <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                      Model Name<span class="symbol required"></span>:
-                    </label>
-
-                    <div class="col-md-10 col-lg-10 col-sm-10 ">
-                      <input type="text" class="form-control" ng-model="form.basic.name" name="ruleName" placeholder="Please input the rule name" required ng-pattern="'([0-9a-zA-Z\\_\\-])+'">
-                      <span class="error text-small block " ng-if="Form.ruleName.$dirty && Form.ruleName.$error.required">Model Name is required</span>
-                      <span class="error text-small block " ng-if="Form.ruleName.$dirty && Form.ruleName.$error.pattern">Only letter, number, "-" and "_" are allowed</span>
-                    </div>
-
-                  </div>
-                </div>
-                <div class="col-md-12 col-lg-12 col-sm-12">
-                  <div class="form-group">
-                    <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                      Model Definition:
-                    </label>
-
-                    <div class="col-md-10 col-lg-10 col-sm-10 ">
-                      <input type="text" class="form-control" ng-model="form.basic.desc" placeholder="Please input detail description of your model">
-                    </div>
-                  </div>
-                </div>
-                <div class="col-md-12 col-lg-12 col-sm-12">
-                  <div class="form-group">
-                    <label for="typeSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
-                      Model Type:
-                    </label>
-
-                    <div class="col-md-10 col-lg-10 col-sm-10 ">
-                      <select id="typeSelector" class="form-control" ng-model="form.basic.type" ng-init="form.basic.type='1'" disabled required>
-                        <option ng-repeat="row in ruleTypes" value="{{$index}}" >{{row}}</option>
-                      </select>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-md-12 col-lg-12 col-sm-12">
-                  <div class="form-group">
-                    <label for="systemSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
-                      Organization:
-                    </label>
-
-                    <div class="col-md-10 col-lg-10 col-sm-10 ">
-                      <select id="systemSelector" class="form-control" ng-model="form.basic.system" required disabled>
-                        <option ng-repeat="row in ruleSystems" value="{{$index}}" >{{row}}</option>
-                      </select>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-md-12 col-lg-12 col-sm-12">
-                  <div class="form-group">
-                    <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                      DataAsset:
-                    </label>
-
-                    <div class="col-md-10 col-lg-10 col-sm-10">
-                      <input type="text" class="form-control" ng-model="currentNode.name" disabled>
-                    </div>
-                  </div>
-                </div>
-                <div ng-show="form.vaType==9" class="col-md-12 col-lg-12 col-sm-12" ng-class="{'has-error':Form.regex.$dirty && Form.regex.$invalid, 'has-success':Form.regex.$valid}">
-                  <div class="form-group">
-                    <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                      Regular Expression<span class="symbol required"></span>:
-                    </label>
-
-                    <div class="col-md-10 col-lg-10 col-sm-10">
-                      <div class="row">
-                        <div class="col-md-10 col-lg-10 col-sm-10">
-                          <input type="text"  class="form-control" ng-model="form.basic.regex" name="regex" placeholder="Some expression like ^[A-Za-z]+$" ng-required="form.vaType==9" ng-change="form.testRegex(Form)">
-                          <span class="error text-small block" ng-if="Form.regex.$dirty && Form.regex.$invalid">Please input valid regular expression.</span>
-                        </div>
-                        <div class="col-md-2 col-lg-2 col-sm-2">
-                          <button type="button" class="btn btn-primary btn-o next-step" style="width:100%;" ng-click="needTestRegex=!needTestRegex" ng-init="needTestRegex=false;"><i class="faChevron" ng-class="needTestRegex ?'fa fa-angle-down':'fa fa-angle-right'" style="width:10px"></i>&nbsp;Test Regex</button>
-                        </div>
-                      </div>
-                      <div class="row" ng-show="needTestRegex">
-                        <div class="col-md-10 col-lg-10 col-sm-10">
-                          <input type="text"  class="form-control" ng-model="form.basic.regexTestStr" name="regexTestStr" placeholder="Please input the test string here" ng-change="form.testRegex(Form)">
-                        </div>
-                        <div class="col-md-2 col-lg-2 col-sm-2" style="padding-top:8px;">
-                          <span class="test-result" ng-class="{'bg-success': regexTestResult=='Matched', 'bg-danger': regexTestResult=='Unmatched'}">{{regexTestResult}}</span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-md-12 col-lg-12 col-sm-12">
-                  <div class="form-group" ng-class="{'has-error':Form.threshold.$invalid}">
-                    <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                      Threshold:
-                    </label>
-
-                    <div class="col-md-10 col-lg-10 col-sm-10">
-                        <input type="number" class="form-control" ng-model="form.basic.threshold" name="threshold">
-                        <span class="error text-small block" ng-if="Form.threshold.$error.number">Only number is allowed</span>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-md-12 col-lg-12 col-sm-12">
-                  <div class="form-group">
-                    <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                      Schedule Type:
-                    </label>
-
-                    <div class="col-md-10 col-lg-10 col-sm-10 ">
-                      <select class="form-control" ng-init="form.basic.scheduleType='1'" ng-model="form.basic.scheduleType" ng-init="form.basic.scheduleType='0'">
-                        <option ng-repeat="row in scheduleTypes" value="{{$index}}" >{{row}}</option>
-                      </select>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-md-12 col-lg-12 col-sm-12">
-                  <div class="form-group" ng-class="{'has-error':Form.email.$dirty&&Form.email.$invalid, 'has-success':Form.email.$valid}">
-                    <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                      Notification email<span class="symbol required"></span>:
-                    </label>
-
-                    <div class="col-md-10 col-lg-10 col-sm-10">
-                      <input type="email"  class="form-control" ng-model="form.basic.email" name="email" ng-required="currentStep==3" placeholder="Please input valid email address" ng-pattern="'^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$'">
-                      <span class="error text-small block" ng-if="Form.email.$dirty&&Form.email.$invalid">Please, enter a valid email address.</span>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-md-12 col-lg-12 col-sm-12">
-                  <div class="form-group">
-                    <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                      Owner:
-                    </label>
-
-                    <div class="col-md-10 col-lg-10 col-sm-10">
-                      <input type="text"  class="form-control" ng-model="form.basic.owner" ng-init="form.basic.owner=ntAccount" disabled>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <!-- <div style="color:#fff">
-                <label style="color:#b2c831">Tips: </label>After submitted, please go to "Rule Repository" to check the rule status
-              </div> -->
-
-              <div style="color:#b2c831">
-                <p>
-                  <i class="fa fa-info-circle"></i> After submitted, please go to "<a class="bark-link" href="#/rules">Models</a>" to check the model status
-                </p>
-              </div>
-
-            </fieldset>
-          </div>
-
-          <div class="form-group btn-container" >
-            <button class="btn btn-primary btn-o back-step btn-wide pull-left" ng-click="form.prev(Form)">
-                <i class="fa fa-arrow-circle-left"></i> Back
-            </button>
-            <button class="btn btn-primary btn-o next-step btn-wide pull-right" ng-click="form.submit(Form)">
-            <!-- <button class="btn btn-primary btn-o next-step btn-wide pull-right" data-toggle="modal" data-target="#confirm"> -->
-                Submit
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div class="modal fade" id="confirm-va" role="dialog">
-        <div class="modal-dialog modal-xg modal-lg">
-          <div class="modal-content">
-            <div class="modal-header">
-              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-              <h4 class="modal-title">Save the model with the below information?</h4>
-            </div>
-            <div class="modal-body">
-              <ng-include src="'/pages/rules/confirmation-va.html'"/>
-            </div>
-            <div class="modal-footer">
-              <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-              <button type="button" class="btn btn-primary" ng-click="form.save()">Save</button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </form>
-  </div><!--//row-->
-</div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/1fa4f243/ui/pages/rules/createrule0.html
----------------------------------------------------------------------
diff --git a/ui/pages/rules/createrule0.html b/ui/pages/rules/createrule0.html
deleted file mode 100644
index 3e14f48..0000000
--- a/ui/pages/rules/createrule0.html
+++ /dev/null
@@ -1,251 +0,0 @@
-<!--
-	Copyright (c) 2016 eBay Software Foundation.
-	Licensed under the Apache License, Version 2.0 (the "License");
-	you may not use this file except in compliance with the License.
-	You may obtain a copy of the License at
-
-	    http://www.apache.org/licenses/LICENSE-2.0
-
-	Unless required by applicable law or agreed to in writing, software
-	distributed under the License is distributed on an "AS IS" BASIS,
-	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-	See the License for the specific language governing permissions and
-	limitations under the License.
- -->
-<div class="container-fluid" id="main" >
-  <div class="row">
-    <h5 class="over-title margin-bottom-15">Create DQ Model</h5>
-  </div><!--//row-->
-  <div class="row">
-
-    <div class="col-lg-6 col-md-6 col-sm-6 ruletypes">
-      <section id="panel-1" class="panel panel-red" style="cursor:pointer" ng-click="click('ac')">
-        <div class="panel-heading">
-          <span style="font-size:20px">Accuracy</span>
-          <span class="pull-right" style="font-size:20px">
-                <span class="fa fa-arrow-circle-right" ng-click="click()"></span>
-          </span>
-        </div>
-        <div class="swMain panel-body" >
-
-          <label class="label-definition">Definition: Measured by how the values agree with an identified source of truth</label>
-
-          <ul style="border-radius:0; background: none">
-              <li >
-                <a href="" class="selected" >
-                  <div class="stepNumber">
-                    1
-                  </div>
-                  <span class="stepDesc text-small"> Choose Source </span>
-                </a>
-              </li>
-              <li>
-                <a href=""  >
-                  <div class="stepNumber">
-                    2
-                  </div>
-                  <span class="stepDesc text-small"> Choose Target </span>
-                </a>
-              </li>
-              <li >
-                <a href=""  >
-                  <div class="stepNumber">
-                    3
-                  </div>
-                  <span class="stepDesc text-small"> Mapping Source and Target </span>
-                </a>
-              </li>
-              <li>
-                <a href="" >
-                  <div class="stepNumber">
-                    4
-                  </div>
-                  <span class="stepDesc text-small"> Configuration </span>
-                </a>
-              </li>
-
-            </ul>
-            <div>
-
-              <ol>
-                <li>Select the source dataset and fields which will be used for comparision</li>
-                <li>Select the target dataset and fields which will be used for comparision</li>
-                <li>Mapping the target fields with source</li>
-                <li>Set basic configuration for your model (name, system, threshold, etc.)</li>
-              </ol>
-            </div>
-
-
-          </div>
-          <div class="panel-footer stepDesc">
-            <label>Example:</label> suppose source table A has 1000 records and target table B only has 999 records pefectly matched with A for selected fields, then
-            Accuracy Rate(%) = 999/1000 * 100% = 99.9%
-          </div>
-        </section>
-      </div>
-      <div class="col-lg-6 col-md-6 col-sm-6 ruletypes">
-        <section id="panel-2"  class="panel panel-primary"  ng-click="click('va')">
-          <div class="panel-heading">
-            <span style="font-size:20px">Data Profiling</span>
-            <span class="pull-right" style="font-size:20px">
-                  <span class="fa fa-arrow-circle-right"></span>
-            </span>
-          </div>
-          <div class="swMain panel-body" >
-
-            <label class="label-definition">Definition: Data profiling is the process of examining the data available in an existing data set and collecting statistics and information about that data</label>
-
-            <ul style="border-radius:0; background: none">
-                <li >
-                  <a href="" class="done" style="cursor:default">
-                    <div class="stepNumber">
-                      1
-                    </div>
-                    <span class="stepDesc text-small"> Choose Target </span>
-                  </a>
-                </li>
-                <li>
-                  <a href="" class="selected" style="cursor:default" >
-                    <div class="stepNumber">
-                      2
-                    </div>
-                    <span class="stepDesc text-small">Define/Select Models </span>
-                  </a>
-                </li>
-                <li >
-                  <a href="" style="cursor:default" >
-                    <div class="stepNumber">
-                      3
-                    </div>
-                    <span class="stepDesc text-small"> Configuration </span>
-                  </a>
-                </li>
-
-
-              </ul>
-              <div>
-
-                <ol>
-                  <li>Select the target dataset and fields which want to be checked</li>
-                  <li>Define your syntax check logic which will be applied on the selected fields</li>
-                  <li>Set basic configuration for your model(name, system, threshold, etc.)</li>
-                </ol>
-
-
-              </div>
-
-
-            </div>
-            <div class="panel-footer stepDesc">
-
-              <label>Example:</label> Check the data range(minimum, maximum) within a set of allowable values
-            </div>
-          </section>
-      </div>
-
-    </div><!--//row-->
-
-    <div class="row">
-        <div class="col-lg-6 col-md-6 col-sm-6 ruletypes">
-          <section id="panel-3" class="panel panel-yellow" ng-click="click('an')">
-            <div class="panel-heading">
-              <span style="font-size:20px">Anomaly Detection</span>
-              <span class="pull-right" style="font-size:20px">
-                    <span class="fa fa-arrow-circle-right"></span>
-              </span>
-            </div>
-            <div class="swMain panel-body" >
-
-              <label class="label-definition">Definition: Identification of items, events or observations which do not conform to an expected pattern or other items in a dataset</label>
-
-              <ul style="border-radius:0; background: none">
-                  <li >
-                    <a href="" class="done" style="cursor:default">
-                      <div class="stepNumber">
-                        1
-                      </div>
-                      <span class="stepDesc text-small"> Choose Target </span>
-                    </a>
-                  </li>
-                  <li>
-                    <a href="" class="selected" style="cursor:default" >
-                      <div class="stepNumber">
-                        2
-                      </div>
-                      <span class="stepDesc text-small">Define/Select Models </span>
-                    </a>
-                  </li>
-                  <li >
-                    <a href="" style="cursor:default" >
-                      <div class="stepNumber">
-                        3
-                      </div>
-                      <span class="stepDesc text-small"> Configuration </span>
-                    </a>
-                  </li>
-
-
-                </ul>
-                <div>
-
-                  <ol>
-                    <li>Select the target dataset and fields which want to be checked</li>
-                    <li>Select the pre-defined anomaly detection methods which will be applied on the selected fields</li>
-                    <li>Set basic configuration for your model(name, system, threshold, etc.)</li>
-                  </ol>
-                </div>
-              </div>
-              <div class="panel-footer stepDesc">
-                <label>Example1:</label> Check the total row count changed day over day (or hour over hour) on one Dataset
-                <label>Example2:</label> Check the values of all records in Column A should be matched with one expression pattern (first 3 character is 'abc') in one Dataset
-              </div>
-            </section>
-        </div>
-
-        <div class="col-lg-6 col-md-6 col-sm-6 ruletypes">
-          <section id="panel-4" class="panel panel-green" ng-click="click('pu')">
-            <div class="panel-heading">
-              <span style="font-size:20px">Publish DQ Metrics Directly</span>
-              <span class="pull-right" style="font-size:20px">
-                    <span class="fa fa-arrow-circle-right"></span>
-              </span>
-            </div>
-            <div class="swMain panel-body" >
-
-              <label class="label-definition">Definition: This is used to publish DQ results which already calculated offline by customers</label>
-
-              <ul style="border-radius:0; background: none">
-                  <li >
-                    <a href="" style="cursor:default" class="onlyone selected">
-                      <div class="stepNumber">
-                        1
-                      </div>
-                      <span class="stepDesc text-small"> Configuration </span>
-                    </a>
-                  </li>
-
-
-
-
-                </ul>
-                <div>
-
-                  <ol>
-                    <li>Set basic configuration for your model(name, system, threshold, etc.)</li>
-                  </ol>
-                </div>
-              </div>
-              <div class="panel-footer stepDesc">
-                <label>Example:</label> This example shows how to publish viewitem accuracy result with RESTful service
-<pre style="background-color:transparent;color:inherit;border:none;overflow:hidden;margin:0 0;padding:0 0">Method: POST
-Endpoint: {{publishURL}}
-Body:{"metricName": "viewitem_accuracy", "timestamp": 1463373496583, "value": "99.9"}</pre>
-              </div>
-            </section>
-        </div>
-
-      </div><!--//row-->
-
-
-
-</div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/1fa4f243/ui/pages/rules/delete-confirm.html
----------------------------------------------------------------------
diff --git a/ui/pages/rules/delete-confirm.html b/ui/pages/rules/delete-confirm.html
deleted file mode 100644
index 682b050..0000000
--- a/ui/pages/rules/delete-confirm.html
+++ /dev/null
@@ -1,91 +0,0 @@
-<!--
-	Copyright (c) 2016 eBay Software Foundation.
-	Licensed under the Apache License, Version 2.0 (the "License");
-	you may not use this file except in compliance with the License.
-	You may obtain a copy of the License at
-
-	    http://www.apache.org/licenses/LICENSE-2.0
-
-	Unless required by applicable law or agreed to in writing, software
-	distributed under the License is distributed on an "AS IS" BASIS,
-	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-	See the License for the specific language governing permissions and
-	limitations under the License.
- -->
-<div class="container-fluid" id="deleteContent" style="overflow:auto;">
-  <div class="row">
-    <h5 class="over-title margin-bottom-15">Basic information</h5>
-  </div><!--//row-->
-  <div class="row">
-
-    <div  class="col-lg-12 col-md-12 col-sm-12">
-      <div id="viewrule-definition" class="viewrule-content">
-        <div class="row">
-          <label class="col-md-4 col-lg-4 col-sm-4">
-            Model Name:
-          </label>
-
-          <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-            {{deletedRow.name}}
-          </div>
-        </div>
-
-        <div class="row">
-          <label class="col-md-4 col-lg-4 col-sm-4">
-            Model Definition:
-          </label>
-
-          <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-            {{deletedRow.description}}
-          </div>
-        </div>
-
-        <div class="row">
-          <label class="col-md-4 col-lg-4 col-sm-4">
-            Model Type:
-          </label>
-
-          <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-            {{deletedRow.type|strmap:'modeltype'}}
-          </div>
-        </div>
-
-        <div class="row">
-          <label for="systemSelector" class="col-md-4 col-lg-4 col-sm-4">
-            Organization:
-          </label>
-
-          <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-            {{deletedRow.organization|strmap:'modelsystem'}}
-          </div>
-        </div>
-
-        <div class="row">
-          <label class="col-md-4 col-lg-4 col-sm-4">
-            DataAsset:
-          </label>
-
-          <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
-            {{deletedRow.source.config.tableName}}&nbsp;&nbsp;{{deletedRow.target.config.tableName}}
-          </div>
-        </div>
-
-        <div class="row">
-          <label class="col-md-4 col-lg-4 col-sm-4">
-            Owner:
-          </label>
-
-          <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
-            {{deletedRow.owner}}
-          </div>
-        </div>
-
-
-      </div>
-    </div>
-
-
-  </div><!--//row-->
-
-
-</div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/1fa4f243/ui/pages/rules/rule.css
----------------------------------------------------------------------
diff --git a/ui/pages/rules/rule.css b/ui/pages/rules/rule.css
deleted file mode 100644
index e4df215..0000000
--- a/ui/pages/rules/rule.css
+++ /dev/null
@@ -1,341 +0,0 @@
-/*
-	Copyright (c) 2016 eBay Software Foundation.
-	Licensed under the Apache License, Version 2.0 (the "License");
-	you may not use this file except in compliance with the License.
-	You may obtain a copy of the License at
-
-	    http://www.apache.org/licenses/LICENSE-2.0
-
-	Unless required by applicable law or agreed to in writing, software
-	distributed under the License is distributed on an "AS IS" BASIS,
-	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-	See the License for the specific language governing permissions and
-	limitations under the License.
- */
-.pagination > li > a{
-  cursor:pointer;
-}
-
-
-.swMain>ul {
-    display: table;
-    list-style: none;
-    margin: 0 0 20px;
-    padding: 10px 0;
-    position: relative;
-    width: 100%;
-    background: #f7f7f8;
-    border-radius: 5px
-}
-
-.swMain>div.formStep{
-  background-color: #000000;
-  border-radius: 5px;
-  padding:10px;
-  /*height:800px;*/
-}
-
-.swMain>ul li {
-    display: table-cell;
-    text-align: center;
-    width: 1%
-}
-
-.swMain>ul li>a:before {
-    border-top: 4px solid #c8c7cc;
-    content: "";
-    display: block;
-    font-size: 0;
-    height: 1px;
-    overflow: hidden;
-    position: relative;
-    top: 21px;
-    width: 100%;
-    z-index: 1
-}
-
-.swMain>ul li:first-child>a:before {
-    left: 50%;
-    max-width: 51%
-}
-
-.swMain>ul li:last-child>a:before {
-    max-width: 50%;
-    width: 50%
-}
-
-.swMain li>a.done:before,.swMain>ul li>a.selected:before {
-    border-color: #007AFF
-}
-
-.onlyone:before{
-  left:0  !important;
-  max-width: 100% !important;
-  width: 100% !important;
-}
-
-.swMain>ul .stepNumber {
-    background-color: #fff;
-    border: 5px solid #c8c7cc;
-    border-radius: 100%;
-    color: #546474;
-    display: inline-block;
-    font-size: 15px;
-    height: 40px;
-    line-height: 30px;
-    position: relative;
-    text-align: center;
-    width: 40px;
-    z-index: 2
-}
-
-.swMain>ul li>a.selected .stepNumber {
-    border-color: #007AFF
-}
-
-/*.swMain ul li>a.done .stepNumber,.swMain>ul li:last-child>a.selected .stepNumber {*/
-.swMain ul li>a.done .stepNumber{
-    border-color: #007AFF;
-    background-color: #007AFF;
-    color: #fff;
-    text-indent: -9999px
-}
-
-/*.swMain ul li>a.done .stepNumber:before,.swMain>ul li:last-child>a.selected .stepNumber:before {*/
-.swMain ul li>a.done .stepNumber:before {
-    content: "\f00c";
-    display: inline;
-    float: right;
-    font-family: FontAwesome;
-    font-weight: 300;
-    height: auto;
-    text-shadow: none;
-    margin-right: 7px;
-    text-indent: 0
-}
-
-.swMain ul li>a.done.wait .stepNumber {
-    background-color: #F6F6F6!important;
-    color: #CCC!important;
-    text-indent: 0!important
-}
-
-.swMain ul li>a.done.wait .stepNumber:before {
-    content: ""!important
-}
-
-.swMain>ul li .stepDesc {
-    color: #8e8e93;
-    display: block;
-    font-size: 14px;
-    margin-top: 4px;
-    max-width: 100%;
-    table-layout: fixed;
-    text-align: center;
-    word-wrap: break-word;
-    z-index: 104
-}
-
-.swMain li>a.done .stepDesc,.swMain>ul li>a.selected .stepDesc {
-    /*color: #2B3D53*/
-    color: #007AFF
-}
-
-.swMain>ul li>a.disabled {
-    cursor: default
-}
-
-.swMain .progress {
-    margin-bottom: 30px
-}
-
-.swMain .stepContainer {
-    height: auto!important
-}
-
-/*.swMain .close,.swMain .loader,.swMain [class*=" button"],.swMain [class^=button] {
-    display: none
-}*/
-
-.swMain .y-scrollable{
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 600px;
-}
-
-fieldset{
-  border: 1px solid #e6e8e8;
-  border-radius: 5px;
-  margin:20px 0;
-  padding: 25px;
-  position:relative;
-  min-width:0;
-  display:block;
-
-}
-
-fieldset legend{
-  background-color: black;
-  /*font-family: Lato,sans-serif;*/
-  /*color: #007AFF;*/
-  /*font-size: 15px;*/
-  left: 10px;
-  padding: 0 10px;
-  position: absolute;
-  top: -12px;
-  font-weight: 400;
-  width: auto!important;
-  border: none!important;
-}
-
-.btn-o{
-  background:0 0!important;
-}
-
-.btn-wide{
-  min-width:120px;
-}
-
-.highlight {
-    background: rgba(255, 230, 0, 0.5);
-    padding: 3px 5px;
-    margin: -3px -5px;
-    line-height: 1.7;
-    word-break: break-word;
-    /*border-radius: 3px;*/
-    /*display:inline-block;*/
-}
-
-.label-definition{
-  color:#fff;
-}
-.formStep>.stepDesc{
-  color: #b2c831;
-}
-
-.formStep>.container-fluid{
-  /*position:relative;*/
-}
-
-.btn-container{
-  height:50px;
-  /*position: absolute;
-  bottom: 10;*/
-}
-
-.panel-disabled {
-  border-color: #B9D3DF;
-}
-.panel-disabled > .panel-heading {
-  background-color: #B9D3DF;
-  border-color: #B9D3DF;
-}
-
-.panel-body>ul{
-  border-radius:0;
-  background: none;
-  margin:0;
-}
-
-
-.panel-green {
-    border-color: #5cb85c;
-}
-
-.panel-green .panel-heading {
-    border-color: #5cb85c;
-    color: #fff;
-    background-color: #5cb85c;
-}
-
-.panel-green a {
-    color: #5cb85c;
-}
-
-.panel-green a:hover {
-    color: #3d8b3d;
-}
-
-.panel-red {
-    border-color: #d9534f;
-}
-
-.panel-red .panel-heading {
-    border-color: #d9534f;
-    color: #fff;
-    background-color: #d9534f;
-}
-
-.panel-red a {
-    color: #d9534f;
-}
-
-.panel-red a:hover {
-    color: #b52b27;
-}
-
-.panel-yellow {
-    border-color: #f0ad4e;
-}
-
-.panel-yellow .panel-heading {
-    border-color: #f0ad4e;
-    color: #fff;
-    background-color: #f0ad4e;
-}
-
-.panel-yellow a {
-    color: #f0ad4e;
-}
-
-.panel-yellow a:hover {
-    color: #df8a13;
-}
-
-.viewrule-content{
-  border:1px solid #fff;
-  border-radius:4px;
-  padding:10px;
-}
-
-.ruletypes>.panel{
-  cursor:pointer
-}
-
-.ruletypes>.panel:hover{
-  box-shadow:         3px 3px 5px 6px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
-  -webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-  -moz-box-shadow:    3px 3px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */
-}
-
-.createrule-hint{
-  color:#b2c831;
-  padding-top:10px;
-}
-
-
-::-webkit-scrollbar {
-    width: 6px;
-}
-::-webkit-scrollbar-track {
-    background-color: #eaeaea;
-    /*background-color: #0a0a0a;*/
-    border-left: 1px solid #ccc;
-}
-::-webkit-scrollbar-thumb {
-    background-color: #ccc;
-}
-::-webkit-scrollbar-thumb:hover {
-    background-color: #aaa;
-}
-
-.disabled {
-    pointer-events: none;
-    cursor: default;
-    opacity: 0.6;
-}
-
-.test-result {
-  border-radius: 5px;
-  padding: 1px 5px;
-}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/1fa4f243/ui/pages/rules/rules.html
----------------------------------------------------------------------
diff --git a/ui/pages/rules/rules.html b/ui/pages/rules/rules.html
deleted file mode 100644
index cd5a908..0000000
--- a/ui/pages/rules/rules.html
+++ /dev/null
@@ -1,101 +0,0 @@
-<!--
-	Copyright (c) 2016 eBay Software Foundation.
-	Licensed under the Apache License, Version 2.0 (the "License");
-	you may not use this file except in compliance with the License.
-	You may obtain a copy of the License at
-
-	    http://www.apache.org/licenses/LICENSE-2.0
-
-	Unless required by applicable law or agreed to in writing, software
-	distributed under the License is distributed on an "AS IS" BASIS,
-	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-	See the License for the specific language governing permissions and
-	limitations under the License.
- -->
-<div >
-    <p>
-        <a class="btn btn-primary btn-o btn-wide" href="#/createrule0"><i class="fa fa-plus"></i> Create DQ Model</a>
-    </p>
-
-    <div id="modelContainer">
-        <table st-table="displayed" st-pipe="paging" class="table table-striped">
-            <thead>
-            <!-- <tr>
-
-                    <th colspan="7">
-                        <input st-search placeholder="Search..." type="search" style="color:#000000"/>
-                    </th>
-                </tr> -->
-            <tr style="background-color:#7D95CC">
-                <th st-ratio="15">Model Name</th>
-                <!--<th st-ratio="15">Organization</th>-->
-                <th st-ratio="15">Model Type</th>
-                <th st-ratio="20">Description</th>
-                <!--<th st-ratio="15">Create Date</th>-->
-                <!--<th st-ratio="10">Model Stage</th>-->
-                <th st-ratio="5">Organization</th>
-                <th st-ratio="5">Action</th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr ng-if="!rowCollection || rowCollection.length == 0">
-                <td colspan="7" style="text-align:center">No content!</td>
-            </tr>
-            <tr ng-repeat="row in displayed">
-                <td><a href="#/viewrule/{{row.name}}">{{row.name}}</a></td>
-                <!--<td>{{row.system|strmap:'modelsystem'}}</td>-->
-                <td>{{row.type|strmap:'modeltype'}}</td>
-                <td>{{row.description}}</td>
-                <!--<td>{{row.createDate | date:'short':'-0700'}}</td>-->
-                <!--<td><label class="label" ng-class="row.status==0?'label-default':row.status==1?'label-info':'label-success'" >{{row.status|strmap:'modelstatus'}}</label></td>-->
-                <td>{{row.organization}}</td>
-                <td>
-                    &nbsp;
-                    <a ng-class="" href="" ng-click="remove(row)" title="delete">
-                        <i class="fa fa-trash-o"></i>
-                    </a>
-                    &nbsp;
-                    <a href="#/viewrule/{{row.name}}" title="subscribe">
-                        <i class="fa fa-eye"></i>
-                    </a>
-                </td>
-                <!-- <td>
-                    <button class="btn btn-sm" popover-placement="top" popover="{{row.email}}" type="button">
-                        <i class="glyphicon glyphicon-eye-open"></i>
-                    </button>
-                    <a ng-href="mailto:{{row.email}}">email</a></td>
-                <td>
-                    <button type="button" ng-click="removeRow(row)" class="btn btn-sm btn-danger">
-                        <i class="glyphicon glyphicon-remove-circle">
-                        </i>
-                    </button>
-                </td> -->
-            </tr>
-            </tbody>
-            <tfoot>
-            <tr>
-                <td colspan="8" class="text-right">
-                    <div  st-items-by-page="10" st-pagination="" st-displayed-pages="10"></div>
-                </td>
-            </tr>
-            </tfoot>
-        </table>
-    </div>
-    <div class="modal fade" id="deleteConfirmation" role="dialog">
-        <div class="modal-dialog modal-xg modal-lg">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                    <h4 class="modal-title">Delete the model with the below information?</h4>
-                </div>
-                <div class="modal-body">
-                    <ng-include src="'/pages/rules/delete-confirm.html'"/>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-primary" ng-click="confirmDelete()">Yes</button>
-                    <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/1fa4f243/ui/pages/rules/va-explaination.html
----------------------------------------------------------------------
diff --git a/ui/pages/rules/va-explaination.html b/ui/pages/rules/va-explaination.html
deleted file mode 100644
index 1131613..0000000
--- a/ui/pages/rules/va-explaination.html
+++ /dev/null
@@ -1,767 +0,0 @@
-<!--
-	Copyright (c) 2016 eBay Software Foundation.
-	Licensed under the Apache License, Version 2.0 (the "License");
-	you may not use this file except in compliance with the License.
-	You may obtain a copy of the License at
-
-	    http://www.apache.org/licenses/LICENSE-2.0
-
-	Unless required by applicable law or agreed to in writing, software
-	distributed under the License is distributed on an "AS IS" BASIS,
-	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-	See the License for the specific language governing permissions and
-	limitations under the License.
- -->
-<!-- Simple Statistics -->
-	<!-- Null Count -->
-<div class="container-fluid" ng-show="form.vaType==2">
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<h5 class="text-left" style="margin-left: 0px">What is Null Count ?</h5>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-			  	<label class="text-left">
-			  		Null is a special marker used to indicate that a data value does not exist.
-			  	</label>
-			</div>
-		</div>
-	</div>
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<h5 class="text-left" style="margin-left: 0px">Example</h5>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<label class="text-left">
-						Suppose we have the below data table, then the Null Count of "FIRSTNAME" is <kbd style="font-size: 16px">3</kbd>
-			  	</label>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<table class="table table-bordered text-center">
-					<thead>
-						<tr class="success">
-							<td>ID</td>
-							<td>FRISTNAME</td>
-							<td>LASTNAME</td>
-						</tr>
-					</thead>
-					<tbody>
-						<tr>
-							<td>1</td>
-							<td>lei</td>
-							<td>li</td>
-						</tr>
-						<tr>
-							<td>2</td>
-							<td>lei</td>
-							<td>li</td>
-						</tr>
-						<tr>
-							<td>3</td>
-							<td>lei</td>
-							<td>li</td>
-						</tr>
-						<tr>
-							<td>4</td>
-							<td>
-								<abbr title="the value isn't necessary " class="initialism"><mark>null</mark></abbr>
-							</td>
-							<td>stone</td>
-						</tr>
-						<tr>
-							<td>5</td>
-							<td>lei</td>
-							<td>li</td>
-						</tr>
-						<tr>
-							<td>6</td>
-							<td>lei</td>
-							<td>li</td>
-						</tr>
-						<tr>
-							<td>7</td>
-							<td>
-								<abbr title="the value isn't necessary " class="initialism"><mark>null</mark></abbr>
-							</td>
-							<td>stone</td>
-						</tr>
-						<tr>
-							<td>8</td>
-							<td>
-								<abbr title="the value isn't necessary " class="initialism"><mark>null</mark></abbr>
-							</td>
-							<td>zhang</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-	</div>
-</div>
-	<!-- Unique Count -->
-<div class="container-fluid" ng-show="form.vaType==3">
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<h5 class="text-left" style="margin-left: 0px">What is Unique Count ?</h5>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-			  	<label class="text-left">
-			  		The UNIQUE Constraint prevents two records from having identical values in a particular column.
-			  	</label>
-			</div>
-		</div>
-	</div>
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<h5 class="text-left" style="margin-left: 0px">Example</h5>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<label class="text-left">
-			  		Suppose we have the below data table which has four attributes-ID, NAME, AGE and FAVOURITE FOOD. Then the Unique Count is <kbd style="font-size: 16px">2</kbd>
-			  	</label>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<table class="table table-bordered text-center">
-					<colgroup>
-					    <col span="2" style="background-color:#064225">
-					 </colgroup>
-					<thead>
-						<tr class="success">
-							<td>ID</td>
-							<td>NAME</td>
-							<td>AGE</td>
-							<td>FAVOURITE FOOD</td>
-						</tr>
-					</thead>
-					<tbody>
-						<tr>
-							<td>1</td>
-							<td>Lily</td>
-							<td>20</td>
-							<td>APPLE</td>
-						</tr>
-						<tr>
-							<td>2</td>
-							<td>Lucy</td>
-							<td>20</td>
-							<td>APPLE</td>
-						</tr>
-						<tr>
-							<td>3</td>
-							<td>John</td>
-							<td>20</td>
-							<td>APPLE</td>
-						</tr>
-						<tr>
-							<td>4</td>
-							<td>David</td>
-							<td>20</td>
-							<td>APPLE</td>
-						</tr>
-						<tr>
-							<td>5</td>
-							<td>Sam</td>
-							<td>35</td>
-							<td>banana</td>
-						</tr>
-						<tr>
-							<td>6</td>
-							<td>Kaka</td>
-							<td>35</td>
-							<td>banana</td>
-						</tr>
-						<tr>
-							<td>7</td>
-							<td>stone</td>
-							<td>35</td>
-							<td>banana</td>
-						</tr>
-						<tr>
-							<td>8</td>
-							<td>Adison</td>
-							<td>35</td>
-							<td>banana</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-	</div>
-</div>
-    <!--  Duplicate Count -->
-<div class="container-fluid" ng-show="form.vaType==4">
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<h5 class="text-left" style="margin-left: 0px">What is Duplicate Count ?</h5>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-			  	<label class="text-left">
-			  		Duplicate Count is the number of duplicate rows in a table and generate an output column that shows how many times each row occurs.
-			  	</label>
-			</div>
-		</div>
-	</div>
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<h5 class="text-left" style="margin-left: 0px">Example</h5>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<label class="text-left">
-			  		Suppose we have the below data table, and we only count the  the number of duplicate rows for age. Then the Duplicate Count is <kbd style="font-size: 16px">2</kbd>
-			  	</label>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<table class="table table-bordered text-center">
-					<thead>
-						<tr class="success">
-							<td>ID</td>
-							<td>NAME</td>
-							<td>AGE</td>
-							<td>FAVOURITE FOOD</td>
-						</tr>
-					</thead>
-					<tbody>
-						<tr>
-							<td>1</td>
-							<td>Lily</td>
-							<td>21</td>
-							<td>APPLE</td>
-						</tr>
-						<tr>
-							<td>2</td>
-							<td>Lucy</td>
-							<td class="info">20</td>
-							<td>APPLE</td>
-						</tr>
-						<tr>
-							<td>3</td>
-							<td>John</td>
-							<td class="info">20</td>
-							<td>APPLE</td>
-						</tr>
-						<tr>
-							<td>4</td>
-							<td>David</td>
-							<td class="info">20</td>
-							<td>APPLE</td>
-						</tr>
-						<tr>
-							<td>5</td>
-							<td>Sam</td>
-							<td>37</td>
-							<td>banana</td>
-						</tr>
-						<tr>
-							<td>6</td>
-							<td>Kaka</td>
-							<td class="warning">35</td>
-							<td>banana</td>
-						</tr>
-						<tr>
-							<td>7</td>
-							<td>stone</td>
-							<td class="warning">35</td>
-							<td>banana</td>
-						</tr>
-						<tr>
-							<td>8</td>
-							<td>Adison</td>
-							<td>38</td>
-							<td>banana</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-	</div>
-</div>
-<!-- Summary Statistics -->
-	<!-- Maximum -->
-<div class="container-fluid" ng-show="form.vaType==5">
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<h5 class="text-left" style="margin-left: 0px">What is Maximum ?</h5>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-			  	<label class="text-left">
-			  		Maximum is the biggest value of the selected column.
-			  	</label>
-			</div>
-		</div>
-	</div>
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-					<h5 class="text-left" style="margin-left: 0px">Example</h5>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				Suppose we have the below data table, then the maximum is: 26 <kbd style="font-size: 16px">26</kbd>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<table class="table table-bordered text-center">
-					<thead>
-						<tr class="success">
-							<td>ID</td>
-							<td>NAME</td>
-							<td>AGE</td>
-						</tr>
-					</thead>
-					<tbody>
-						<tr>
-							<td>1</td>
-							<td>lei</td>
-							<td>17</td>
-						</tr>
-						<tr>
-							<td>2</td>
-							<td>lei</td>
-							<td>18</td>
-						</tr>
-						<tr>
-							<td>3</td>
-							<td>lei</td>
-							<td>18</td>
-						</tr>
-						<tr>
-							<td>4</td>
-							<td>lei</td>
-							<td>21</td>
-						</tr>
-						<tr>
-							<td>5</td>
-							<td>lei</td>
-							<td>23</td>
-						</tr>
-						<tr>
-							<td>6</td>
-							<td>lei</td>
-							<td>23</td>
-						</tr>
-						<tr>
-							<td>7</td>
-							<td>lei</td>
-							<td>24</td>
-						</tr>
-						<tr>
-							<td>8</td>
-							<td>lei</td>
-							<td>
-								<abbr title="the value is the biggest number " class="initialism"><mark>26</mark></abbr>
-							</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-	</div>
-</div>
-	<!-- Minimum -->
-<div class="container-fluid" ng-show="form.vaType==6">
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<h5 class="text-left" style="margin-left: 0px">What is Minimum ?</h5>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-			  	<label class="text-left">
-			  		Minimum is smallest value of the selected column.
-			  	</label>
-			</div>
-		</div>
-	</div>
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-					<h5 class="text-left" style="margin-left: 0px">Example</h5>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				Suppose we have the below data table, then the minimum is: <kbd style="font-size: 16px">14</kbd>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<table class="table table-bordered text-center">
-					<thead>
-						<tr class="success">
-							<td>ID</td>
-							<td>NAME</td>
-							<td>AGE</td>
-						</tr>
-					</thead>
-					<tbody>
-						<tr>
-							<td>1</td>
-							<td>lei</td>
-							<td>17</td>
-						</tr>
-						<tr>
-							<td>2</td>
-							<td>lei</td>
-							<td>18</td>
-						</tr>
-						<tr>
-							<td>3</td>
-							<td>lei</td>
-							<td>18</td>
-						</tr>
-						<tr>
-							<td>4</td>
-							<td>lei</td>
-							<td>
-								<abbr title="the value is the minimum number " class="initialism"><mark>14</mark></abbr>
-							</td>
-						</tr>
-						<tr>
-							<td>5</td>
-							<td>lei</td>
-							<td>23</td>
-						</tr>
-						<tr>
-							<td>6</td>
-							<td>lei</td>
-							<td>23</td>
-						</tr>
-						<tr>
-							<td>7</td>
-							<td>lei</td>
-							<td>24</td>
-						</tr>
-						<tr>
-							<td>8</td>
-							<td>lei</td>
-							<td>26</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-	</div>
-</div>
-	<!-- Mean -->
-<div class="container-fluid" ng-show="form.vaType==7">
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<h5 class="text-left" style="margin-left: 0px">What is Mean ?</h5>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-			  	<label class="text-left">
-			  		Mean is the usual average.
-			  	</label>
-			</div>
-		</div>
-	</div>
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-					<h5 class="text-left" style="margin-left: 0px">Example</h5>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				Suppose we have the below data table, then the mean of AGE is: <kbd style="font-size: 16px">20</kbd>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<table class="table table-bordered text-center">
-					<thead>
-						<tr class="success">
-							<td>ID</td>
-							<td>NAME</td>
-							<td>AGE</td>
-						</tr>
-					</thead>
-					<tbody>
-						<tr>
-							<td>1</td>
-							<td>lei</td>
-							<td>18</td>
-						</tr>
-						<tr>
-							<td>2</td>
-							<td>lei</td>
-							<td>18</td>
-						</tr>
-						<tr>
-							<td>3</td>
-							<td>lei</td>
-							<td>19</td>
-						</tr>
-						<tr>
-							<td>4</td>
-							<td>lei</td>
-							<td>19</td>
-						</tr>
-						<tr>
-							<td>5</td>
-							<td>lei</td>
-							<td>21</td>
-						</tr>
-						<tr>
-							<td>6</td>
-							<td>lei</td>
-							<td>21</td>
-						</tr>
-						<tr>
-							<td>7</td>
-							<td>lei</td>
-							<td>22</td>
-						</tr>
-						<tr>
-							<td>8</td>
-							<td>lei</td>
-							<td>22</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-	</div>
-</div>
-	<!-- Median -->
-<div class="container-fluid" ng-show="form.vaType==8">
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<h5 class="text-left" style="margin-left: 0px">What is Median ?</h5>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-			  	<label class="text-left">
-			  		Median is the middle value.
-			  	</label>
-			</div>
-		</div>
-	</div>
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-					<h5 class="text-left" style="margin-left: 0px">Example</h5>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				Suppose we have the below data table, then the median of AGE is: <kbd style="font-size: 16px">21</kbd>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<table class="table table-bordered text-center">
-					<thead>
-						<tr class="success">
-							<td>ID</td>
-							<td>NAME</td>
-							<td>AGE</td>
-						</tr>
-					</thead>
-					<tbody>
-						<tr>
-							<td>1</td>
-							<td>lei</td>
-							<td>17</td>
-						</tr>
-						<tr>
-							<td>2</td>
-							<td>lei</td>
-							<td>18</td>
-						</tr>
-						<tr>
-							<td>3</td>
-							<td>lei</td>
-							<td>19</td>
-						</tr>
-						<tr>
-							<td>4</td>
-							<td>lei</td>
-							<td>20</td>
-						</tr>
-						<tr>
-							<td>5</td>
-							<td>lei</td>
-							<td>21</td>
-						</tr>
-						<tr>
-							<td>6</td>
-							<td>lei</td>
-							<td>21</td>
-						</tr>
-						<tr>
-							<td>7</td>
-							<td>lei</td>
-							<td>22</td>
-						</tr>
-						<tr>
-							<td>8</td>
-							<td>lei</td>
-							<td>22</td>
-						</tr>
-						<tr>
-							<td>9</td>
-							<td>lei</td>
-							<td>23</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-	</div>
-</div>
-<!-- Regular Expression Matching -->
-<div class="container-fluid" ng-show="form.vaType==9">
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<h5 class="text-left" style="margin-left: 0px">What is the Regular Expression Match?</h5>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-			  	<label class="text-left">
-			  		In theoretical computer science and formal language theory, a regular expression (sometimes called a rational expression) is a sequence of characters that define a search pattern, mainly for use in pattern matching with strings, or string matching, i.e. "find and replace"-like operations.
-			  	</label>
-			</div>
-		</div>
-	</div>
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<h5 class="text-left" style="margin-left: 0px">Example</h5>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-			  	<label class="text-left">
-			  		There is a series characters of in the column of IDENTIFIER in the following table, and we can use a kind of Regular Expression Matching to search it.
-			  	</label>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<table class="table table-bordered text-center">
-					<thead>
-						<tr class="success">
-							<td>IDENTIFIER</td>
-							<td>NAME</td>
-							<td>AGE</td>
-						</tr>
-					</thead>
-					<tbody>
-						<tr>
-							<td>#1111</td>
-							<td>lei</td>
-							<td>17</td>
-						</tr>
-						<tr>
-							<td>#1245</td>
-							<td>lei</td>
-							<td>18</td>
-						</tr>
-						<tr>
-							<td>15245</td>
-							<td>lei</td>
-							<td>18</td>
-						</tr>
-						<tr>
-							<td>87956</td>
-							<td>lei</td>
-							<td>21</td>
-						</tr>
-						<tr>
-							<td>
-								<abbr title="the value is the biggest number " class="initialism">
-									<mark>monkey</mark>
-								</abbr>
-							</td>
-							<td>lei</td>
-							<td>23</td>
-						</tr>
-						<tr>
-							<td>
-								<abbr title="the value is the biggest number " class="initialism">
-									<mark>tiger</mark>
-								</abbr>
-							</td>
-							<td>lei</td>
-							<td>23</td>
-						</tr>
-						<tr>
-							<td>456</td>
-							<td>lei</td>
-							<td>24</td>
-						</tr>
-						<tr>
-							<td>324</td>
-							<td>lei</td>
-							<td>26</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-	</div>
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-			  	<p class="text-left">
-					<strong>Suppose Regular Expression is :</strong> ^[A-Za-z]+$
-				</p>
-			</div>
-		</div>
-	</div>
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-			  	<p class="text-left">
-					<strong>The regular expression matching means :</strong> Matches a string consisting of 26 english letters
-				</p>
-			</div>
-		</div>
-	</div>
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-			  	<p class="text-left">
-			  		The result is: <kbd>2 (MONKEY AND TIGER)</kbd>
-				</p>
-			</div>
-		</div>
-	</div>
-</div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/1fa4f243/ui/pages/rules/viewrule.html
----------------------------------------------------------------------
diff --git a/ui/pages/rules/viewrule.html b/ui/pages/rules/viewrule.html
deleted file mode 100644
index 3e7955c..0000000
--- a/ui/pages/rules/viewrule.html
+++ /dev/null
@@ -1,210 +0,0 @@
-<!--
-	Copyright (c) 2016 eBay Software Foundation.
-	Licensed under the Apache License, Version 2.0 (the "License");
-	you may not use this file except in compliance with the License.
-	You may obtain a copy of the License at
-
-	    http://www.apache.org/licenses/LICENSE-2.0
-
-	Unless required by applicable law or agreed to in writing, software
-	distributed under the License is distributed on an "AS IS" BASIS,
-	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-	See the License for the specific language governing permissions and
-	limitations under the License.
- -->
-<div class="container-fluid" id="viewruleContent">
-    <div class="row">
-        <h5 class="over-title margin-bottom-15">View Model</h5>
-    </div><!--//row-->
-    <div class="row">
-
-        <div  class="col-sm-6 col-xs-12">
-            <div id="viewruleDefinition" class="viewrule-content">
-                <div class="row">
-                    <label class="col-xs-4">
-                        Model Name:
-                    </label>
-
-                    <div class="col-xs-8 " style="color: #fff">
-                        {{ruleData.name}}
-                    </div>
-                </div>
-
-                <div class="row">
-                    <label class="col-xs-4">
-                        Model Description:
-                    </label>
-
-                    <div class="col-xs-8 " style="color: #fff">
-                        {{ruleData.description}}
-                    </div>
-                </div>
-
-                <div class="row">
-                    <label class="col-xs-4">
-                        Model Type:
-                    </label>
-
-                    <div class="col-xs-8 " style="color: #fff">
-                        {{ruleData.type|strmap:'modeltype'}}
-                    </div>
-                </div>
-
-                <div class="row">
-                    <label for="systemSelector" class="col-xs-4">
-                        Organization:
-                    </label>
-
-                    <div class="col-xs-8 " style="color: #fff">
-                        {{ruleData.organization|strmap:'modelsystem'}}
-                    </div>
-                </div>
-
-                <div class="row">
-                    <label class="col-xs-4">
-                        DataAsset:
-                    </label>
-
-                    <div class="col-xs-8" style="color: #fff">
-                        {{ruleData.source.config.tableName}}&nbsp;&nbsp;{{ruleData.target.config.tableName}}
-                    </div>
-                </div>
-
-                <div class="row">
-                    <label class="col-xs-4">
-                        Owner:
-                    </label>
-
-                    <div class="col-xs-8" style="color: #fff">
-                        {{ruleData.owner}}
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div><!--//row-->
-    <div class="container-fluid" ng-show="ruleData.basic.status==1" >
-        <br/>
-        <label style="color:#B2C831">This model is ready to deploy now, if you are the owner, please click the deploy button after you verify all the information.</label>
-        <button ng-click="confirmDeploy()" ng-disabled="(ntAccount!=ruleData.basic.owner && !adminAccess)" class="btn btn-primary pull-right"> Deploy</button>
-        </p>
-    </div>
-    <br/>
-    <div ng-if="ruleData.type=='accuracy'"><!--Accuracy-->
-        <h5 class="row">Mapping rules</h5>
-        <div class="">
-            <p>{{ruleData.evaluateRule.rules}}</p>
-            <p>
-                <label style="color:#B2C831">Accuracy Calculation Formula as Below:</label>
-            </p>
-
-            <div class="col-md-12 col-lg-12 col-sm-12" style="color:#fff;font-size:16px;display: flex;align-items: center">
-
-                <div class="" style="text-align:right;display:block;float:left;width:20%;">
-                    Accuracy Rate(%) =
-                </div>
-                <div class="" style="text-align:center;display:block;float:left;margin:0 10px 0 10px">
-                    <div class="formula-text-up" style="border-bottom:1px solid;">
-                        Total Count of Matched records between <span class="badge">{{sourceLength}}</span> <span style="color:green;">{{ruleData.target.config.database}}</span>  and <span class="badge">{{sourceLength}}</span> <span style="color:green;">{{ruleData.source.config.database}}</span>  fields
-                    </div>
-                    <div class="">
-                        Total Count of records in <span style="color:green;font-weight:bold;">{{ruleData.target.config.database}}&nbsp;&nbsp;{{ruleData.target.config.tableName}}</span>
-                    </div>
-                </div>
-                <div class="" style="text-align:left;display:block;float:left;width:10%;">
-                    x 100%
-                </div>
-
-            </div>
-
-
-        </div>
-    </div>
-
-    <div ng-if="ruleData.basic.type==1"><!--Validity-->
-        <h5 class="row">Validity metrics</h5>
-        <div  class="">
-            <div id="viewrule-definition" class="viewrule-content">
-                <div class="row">
-                    <label class="col-xs-4">
-                        Validity type:
-                    </label>
-
-                    <div class="col-xs-8 " style="color: #fff">
-                        {{ruleData.extra.vaType|strmap:'vatype'}}
-                    </div>
-                </div>
-
-                <div class="row">
-                    <label class="col-xs-4">
-                        Selected column:
-                    </label>
-
-                    <div class="col-xs-8 " style="color: #fff">
-                        {{ruleData.extra.column}}
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <div ng-if="ruleData.basic.type==2"><!--Anomaly Detection-->
-        <h5 class="row">Key information</h5>
-        <div class="row">
-            <div  class="col-lg-12 col-md-12 col-sm-12">
-                <div id="viewrule-definition" class="viewrule-content">
-                    <div class="row">
-                        <label class="col-xs-4">
-                            Detection type:
-                        </label>
-
-                        <div class="col-xs-8 " style="color: #fff">
-                            {{ruleData.extra.anType|strmap:'antype'}}
-                        </div>
-                    </div>
-                    <div class="row-fluid">
-                        <img ng-if="ruleData.extra.anType==1" src="/img/yoy.png" style="max-height: 300px;width:100%"/>
-                        <img ng-if="ruleData.extra.anType==2" src="/img/bollinger.png" style="max-height: 400px;width:100%"/>
-                        <img ng-if="ruleData.extra.anType==3" src="/img/mad.png" style="max-height: 300px;width:100%"/>
-                    </div>
-
-
-                </div>
-            </div>
-
-        </div>
-    </div>
-
-    <div ng-if="ruleData.basic.type==3"><!--Publish Metrics-->
-        <h5 class="row">Publish Metrics URL</h5>
-        <div id="viewrule-definition" class="viewrule-content">
-
-            <div class="row">
-                <label class="col-xs-4">
-                    Publish URL:
-                </label>
-
-                <div class="col-xs-8" style="color: #fff">
-                    {{ruleData.extra.publishUrl}}
-                </div>
-            </div>
-
-            <div class="row">
-                <label class="col-xs-4">
-                    Publish data format:
-                </label>
-
-                <div class="col-xs-8" style="color: #fff">
-              <pre style="background-color:transparent;color:inherit;border:none">Method: POST
-Endpoint: {{ruleData.extra.publishUrl}}
-Body:
-{
-"metricName": "{{ruleData.basic.name}}",
-"timestamp": 1463373496583,
-"value": 99.9
-}</pre>
-                </div>
-            </div>
-        </div>
-    </div>
-
-</div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/1fa4f243/ui/pages/template/bigchart.css
----------------------------------------------------------------------
diff --git a/ui/pages/template/bigchart.css b/ui/pages/template/bigchart.css
index 755180a..b87939d 100644
--- a/ui/pages/template/bigchart.css
+++ b/ui/pages/template/bigchart.css
@@ -1,17 +1,19 @@
-/*
-	Copyright (c) 2016 eBay Software Foundation.
-	Licensed under the Apache License, Version 2.0 (the "License");
-	you may not use this file except in compliance with the License.
-	You may obtain a copy of the License at
+/*-
 
-	    http://www.apache.org/licenses/LICENSE-2.0
+   Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
 
-	Unless required by applicable law or agreed to in writing, software
-	distributed under the License is distributed on an "AS IS" BASIS,
-	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-	See the License for the specific language governing permissions and
-	limitations under the License.
  */
+
 .big-chart-container{
   z-index:1040;
   display:block;

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/1fa4f243/ui/pages/template/bigchart.html
----------------------------------------------------------------------
diff --git a/ui/pages/template/bigchart.html b/ui/pages/template/bigchart.html
index ab7da14..34859f7 100644
--- a/ui/pages/template/bigchart.html
+++ b/ui/pages/template/bigchart.html
@@ -1,17 +1,18 @@
 <!--
-	Copyright (c) 2016 eBay Software Foundation.
-	Licensed under the Apache License, Version 2.0 (the "License");
-	you may not use this file except in compliance with the License.
-	You may obtain a copy of the License at
 
-	    http://www.apache.org/licenses/LICENSE-2.0
+  Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-	Unless required by applicable law or agreed to in writing, software
-	distributed under the License is distributed on an "AS IS" BASIS,
-	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-	See the License for the specific language governing permissions and
-	limitations under the License.
- -->
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
 <!-- <div id="bigChartShow" style="display: none;"> -->
 	
 <div id="bigChartContainer"  class="big-chart-container" style="display:none;">

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/1fa4f243/ui/pages/template/undercons.html
----------------------------------------------------------------------
diff --git a/ui/pages/template/undercons.html b/ui/pages/template/undercons.html
index 349ed24..e855a67 100644
--- a/ui/pages/template/undercons.html
+++ b/ui/pages/template/undercons.html
@@ -1,17 +1,18 @@
 <!--
-	Copyright (c) 2016 eBay Software Foundation.
-	Licensed under the Apache License, Version 2.0 (the "License");
-	you may not use this file except in compliance with the License.
-	You may obtain a copy of the License at
 
-	    http://www.apache.org/licenses/LICENSE-2.0
+  Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-	Unless required by applicable law or agreed to in writing, software
-	distributed under the License is distributed on an "AS IS" BASIS,
-	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-	See the License for the specific language governing permissions and
-	limitations under the License.
- -->
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
 <div style="height:400px;line-height:400px;text-align:center;width:100%;font-size:48px">
 	<img src="/img/construction.gif" style="max-height:120px;"/>
 	Under construction! Coming soon!

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/1fa4f243/ui/sidebar.html
----------------------------------------------------------------------
diff --git a/ui/sidebar.html b/ui/sidebar.html
index 189a81c..4b4f011 100644
--- a/ui/sidebar.html
+++ b/ui/sidebar.html
@@ -1,17 +1,18 @@
 <!--
-    Copyright (c) 2016 eBay Software Foundation.
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
 
-        http://www.apache.org/licenses/LICENSE-2.0
+  Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
- -->
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
 
 <div id="rightbar" ng-controller="SideBarCtrl" class="" style="background-color:#262626;">
 

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/1fa4f243/ui/src/main/java/jar/App.java
----------------------------------------------------------------------
diff --git a/ui/src/main/java/jar/App.java b/ui/src/main/java/jar/App.java
index 9772ca4..4e434a7 100644
--- a/ui/src/main/java/jar/App.java
+++ b/ui/src/main/java/jar/App.java
@@ -1,3 +1,18 @@
+/*-
+ * Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+ */
+
 package jar;
 
 /**

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/1fa4f243/ui/src/test/java/jar/AppTest.java
----------------------------------------------------------------------
diff --git a/ui/src/test/java/jar/AppTest.java b/ui/src/test/java/jar/AppTest.java
index 4f2fe94..7bfbb4f 100644
--- a/ui/src/test/java/jar/AppTest.java
+++ b/ui/src/test/java/jar/AppTest.java
@@ -1,3 +1,18 @@
+/*-
+ * Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+ */
+
 package jar;
 
 import junit.framework.Test;

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/1fa4f243/ui/tests/ut/karma.conf.js
----------------------------------------------------------------------
diff --git a/ui/tests/ut/karma.conf.js b/ui/tests/ut/karma.conf.js
index 4f8a5e1..2c80655 100644
--- a/ui/tests/ut/karma.conf.js
+++ b/ui/tests/ut/karma.conf.js
@@ -1,16 +1,16 @@
-/*
-	Copyright (c) 2016 eBay Software Foundation.
-	Licensed under the Apache License, Version 2.0 (the "License");
-	you may not use this file except in compliance with the License.
-	You may obtain a copy of the License at
-
-	    http://www.apache.org/licenses/LICENSE-2.0
-
-	Unless required by applicable law or agreed to in writing, software
-	distributed under the License is distributed on an "AS IS" BASIS,
-	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-	See the License for the specific language governing permissions and
-	limitations under the License.
+/*-
+ * Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
  */
 // Karma configuration
 // Generated on Thu Apr 07 2016 15:02:00 GMT+0800 (China Standard Time)

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/1fa4f243/ui/tests/ut/specs/controllers/createjob-ac-ctrl.spec.js
----------------------------------------------------------------------
diff --git a/ui/tests/ut/specs/controllers/createjob-ac-ctrl.spec.js b/ui/tests/ut/specs/controllers/createjob-ac-ctrl.spec.js
new file mode 100644
index 0000000..bd729d7
--- /dev/null
+++ b/ui/tests/ut/specs/controllers/createjob-ac-ctrl.spec.js
@@ -0,0 +1,58 @@
+/*-
+ * Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+ */
+
+define(['angular', 'angularMocks', 'js/controllers/createjob-ac-ctrl'],
+  function(angular, mocks, CreateJobACCtrl) {
+    describe('Test /js/controllers/createjob-ac-ctrl.js', function(){
+      	beforeEach(function(){
+	        module('app.controllers');
+	        module('app.services');
+      	});
+    	var $scope, $rootScope, $controller, $httpBackend, $config, $location, toaster, $timeout, $route;
+
+	    beforeEach(inject(function(_$rootScope_ , _$controller_, _$httpBackend_, _$config_, _$location_, _$timeout_){
+	    	$rootScope = _$rootScope_;
+	    	$controller = _$controller_;
+	        $httpBackend = _$httpBackend_;
+	        $config = _$config_;
+	        $location = _$location_;
+	        $timeout = _$timeout_;
+	        toaster = {};
+	        $route = {};
+	    }));
+
+        beforeEach(function(){
+          	$scope =  $rootScope.$new();
+	        controller = $controller('CreateJobACCtrl', {$scope: $scope, $route: $route, toaster: toaster });
+        });
+
+        describe("if the controller of CreateJobACCtrl exists",function(){
+        	it('controller exists', function(){
+	          	expect(controller).toBeDefined();
+	        });
+        })
+
+        describe("check if createRowCollection",function(){
+
+	        it('createRowCollection', function(){
+	          	expect($scope.rowCollection).not.toEqual([]);
+	        });
+
+      	})
+
+
+    });
+  }
+)
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/1fa4f243/ui/tests/ut/specs/controllers/createrule-ac-ctrl.spec.js
----------------------------------------------------------------------
diff --git a/ui/tests/ut/specs/controllers/createrule-ac-ctrl.spec.js b/ui/tests/ut/specs/controllers/createrule-ac-ctrl.spec.js
index bf34dcb..17e61b3 100644
--- a/ui/tests/ut/specs/controllers/createrule-ac-ctrl.spec.js
+++ b/ui/tests/ut/specs/controllers/createrule-ac-ctrl.spec.js
@@ -1,16 +1,16 @@
-/*
-	Copyright (c) 2016 eBay Software Foundation.
-	Licensed under the Apache License, Version 2.0 (the "License");
-	you may not use this file except in compliance with the License.
-	You may obtain a copy of the License at
-
-	    http://www.apache.org/licenses/LICENSE-2.0
-
-	Unless required by applicable law or agreed to in writing, software
-	distributed under the License is distributed on an "AS IS" BASIS,
-	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-	See the License for the specific language governing permissions and
-	limitations under the License.
+/*-
+ * Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
  */
 define(['angular', 'angularMocks', 'js/controllers/createrule-ac-ctrl'],
   function(angular, mocks, CreateRuleACCtrl) {

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/1fa4f243/ui/tests/ut/specs/controllers/createrule-pu-ctrl.spec.js
----------------------------------------------------------------------
diff --git a/ui/tests/ut/specs/controllers/createrule-pu-ctrl.spec.js b/ui/tests/ut/specs/controllers/createrule-pu-ctrl.spec.js
index 9bf9af2..fce2a27 100644
--- a/ui/tests/ut/specs/controllers/createrule-pu-ctrl.spec.js
+++ b/ui/tests/ut/specs/controllers/createrule-pu-ctrl.spec.js
@@ -1,16 +1,16 @@
-/*
-	Copyright (c) 2016 eBay Software Foundation.
-	Licensed under the Apache License, Version 2.0 (the "License");
-	you may not use this file except in compliance with the License.
-	You may obtain a copy of the License at
-
-	    http://www.apache.org/licenses/LICENSE-2.0
-
-	Unless required by applicable law or agreed to in writing, software
-	distributed under the License is distributed on an "AS IS" BASIS,
-	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-	See the License for the specific language governing permissions and
-	limitations under the License.
+/*-
+ * Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
  */
 define(['angular', 'angularMocks', 'js/controllers/createrule-pu-ctrl'],
   function(angular, mocks, CreateRulePUCtrl) {