Create Test Reporting landing page

JIRA: RELENG-165

In this patch, I do the follow things:
1.deploy tornado server(currently I haven't write any backend code,
since the backend code depend on the testapi and I need to
communicate with Serena).

2.landing page code(almostly finished. But I haven't the data, so
for now, the data this page shows is a mock json. When the testapi
and my backend code ready, this page will finally finished)

3.deployment: supervisor + nginx + tornado + angular

usage:
docker run -itd -p 8000:8000 opnfv/reporting:<tag>

visit landing page:
http://server_ip:8000/reporting/index.html

test api:
http://server_ip:8000/landing-page/filters

visit old reporting page:
http://server_ip:8000/display/master/yardstick/status-apex.html

Change-Id: I527ab2661ce9e84b2942ebe673afbf5f2bc7878f
Signed-off-by: chenjiankun <chenjiankun1@huawei.com>

2 files changed, 361 insertions, 0 deletions

diff --git a/reporting/pages/app/views/commons/table.html b/reporting/pages/app/views/commons/table.html
new file mode 100644
index 0000000..ed9300e
--- /dev/null
+++ b/reporting/pages/app/views/commons/table.html
@@ -0,0 +1,109 @@
+<section class="container-tablesize">
+    <div class="row  border-bottom white-bg dashboard-header">
+        <div class="row">
+
+            <div class="ibox float-e-margins">
+                <div class="ibox-title">
+                    <h5>Reporting </h5>
+                    <div class="ibox-tools">
+                        <a class="collapse-link">
+                            <i class="fa fa-chevron-up"></i>
+                        </a>
+                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                            <i class="fa fa-wrench"></i>
+                        </a>
+                        <ul class="dropdown-menu dropdown-user">
+                            <li><a href="#">Config option 1</a>
+                            </li>
+                            <li><a href="#">Config option 2</a>
+                            </li>
+                        </ul>
+                        <a class="close-link">
+                            <i class="fa fa-times"></i>
+                        </a>
+                    </div>
+                </div>
+
+                <div class="ibox-content row">
+
+                    <div class=" col-md-12" data-toggle="buttons" aria-pressed="false">
+
+                        <label> Status </label> &nbsp;&nbsp; &nbsp;
+                          <label class="btn btn-outline btn-success btn-sm" style="height:25px; margin-right: 5px;" ng-repeat="status in statusList"
+                           value={{status}} ng-checked="selection.indexOf(status)>-1" ng-click="toggleSelection(status)">
+                              <input type="checkbox"  disabled="disabled" > {{status}}
+                          </label>
+                    </div>
+
+                <hr class="myhr">
+
+                    <div class=" col-md-12" data-toggle="buttons">
+                     <label> Projects </label> &nbsp;
+                        <label class="btn btn-outline btn-success btn-sm " style="height:25px;margin-right: 5px;" ng-repeat="project in projectList"
+                        value={{project}} ng-checked="selection.indexOf(project)>-1" ng-click="toggleSelection(project)">
+                            <input type="checkbox" disabled="disabled"> {{project}}
+                        </label>
+
+                    </div>
+              <hr class="myhr">
+                    <div class=" col-md-12" data-toggle="buttons">
+                        <label> Installers </label>
+                            <label class="btn btn-outline btn-success btn-sm" style="height:25px;margin-right: 5px;" ng-repeat="installer in installerList"
+                            value={{installer}} ng-checked="selection.indexOf(installer)" ng-click="toggleSelection(installer)">
+                            <input type="checkbox" disabled="disabled"> {{installer}}
+                            </label>
+                   </div>
+
+                <hr style="border:0.5px dashed #e7eaec;border-top:1px;margin-bottom:10px;">
+
+
+                <div class=" col-md-1" style="margin-top:5px;margin-right: 5px;">
+                    <selectize options="VersionOption" ng-model="VersionSelected" config="VersionConfig"></selectize>
+
+                </div>
+
+                <div class=" col-md-1" style="margin-top:5px;margin-left: 5px;margin-right: 5px;">
+                     <selectize options="LoopOption" ng-model="LoopCiSelected" config="LoopConfig"></selectize>
+
+                </div>
+
+                <div class=" col-md-1" style="margin-top:5px;margin-left: 5px;margin-right: 5px;">
+                     <selectize options="TimeOption" ng-model="TimeSelected" config="TimeConfig"></selectize>
+                </div>
+
+
+</div>
+
+<table class="table table-bordered" id="table" ng-model="tableDataAll">
+    <thead class="thead">
+        <tr >
+            <th>Scenario </th>
+            <th colspan={{colspan}} ng-show="selectInstallers.indexOf(key)!=-1" value={{key}} ng-repeat="key in tableDataAll.Installer"><a href="notfound.html">{{key}}</a> </th>
+        </tr>
+
+        <tr>
+
+            <td align="justify"></td>
+            <td align="justify" ng-show="selectProjects.indexOf(project[0])!=-1 && selectInstallers.indexOf(project[1])!=-1" ng-repeat="project in tableDataAll.Projects track by $index" data={{project[1]}} value={{project[0]}}>{{project[0]}}</td>
+        </tr>
+    </thead>
+    <tbody class="tbody">
+        <tr ng-repeat="scenario in tableDataAll.scenario" ng-show="selectStatus.indexOf(scenario.status)!=-1" >
+
+            <td align="justify" data={{scenario.status}}><span class="fa fa-circle text-warning"><a href="notfound.html">{{scenario.scenarioName}}</a></span> </td>
+            <td align="justify" ng-show="selectInstallers.indexOf(data[2])!=-1 && selectProjects.indexOf(data[1])!=-1" ng-repeat="data in scenario.datadisplay track by $index" data={{data[1]}} value={{data[2]}} ><span class="label label-danger">D<a href="notfound.html"></a></span> {{data[0]}}</td>
+        </tr>
+    </tbody>
+</table>
+
+                <div class="pull-right">
+                <span class="label label-danger">D</span>danger<span style="padding-left:20px"></span>
+                <span class="label label-primary">S</span><span>success</span><span style="padding-left:20px"></span>
+                <span class="label label-warning">W</span><span>warning</span>
+
+                </div>
+        </div>
+    </div>
+</div>
+
+</section>
diff --git a/reporting/pages/app/views/main.html b/reporting/pages/app/views/main.html
new file mode 100644
index 0000000..1e3fe9e
--- /dev/null
+++ b/reporting/pages/app/views/main.html
@@ -0,0 +1,252 @@
+
+<div class="navbar-wrapper">
+  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+    <div class="container">
+      <div class="navbar-header page-scroll">
+        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
+          aria-controls="navbar">
+                        <span class="sr-only">Toggle navigation</span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+        <a class="navbar-brand" href="index.html">OPNFV-DASHBOARD</a>
+      </div>
+      <div id="navbar" class="navbar-collapse collapse">
+        <ul class="nav navbar-nav navbar-right">
+          <li><a href="#page-top">Home</a></li>
+          <li><a href="#DashBoard">DashBoard</a></li>
+          <!--<li><a href="#team">Team</a></li>
+                        <li><a href="#testimonials">Testimonials</a></li>
+                        <li><a href="#pricing">Pricing</a></li>
+                        <li><a href="#contact">Contact</a></li>-->
+        </ul>
+      </div>
+    </div>
+  </nav>
+</div>
+
+
+<div id="inSlider" class="carousel carousel-fade" data-ride="carousel">
+  <ol class="carousel-indicators">
+    <!--<li data-target="#inSlider" data-slide-to="0" class="active"></li>
+        <li data-target="#inSlider" data-slide-to="1"></li>-->
+  </ol>
+  <div class="carousel-inner" role="listbox">
+    <div class="item active">
+      <div class="container">
+        <div class="carousel-caption">
+          <h1>OPNFV<br/> facilitates the development and evolution<br/> of NFV components across<br/> various open source ecosystems<br/>
+          </h1>
+          <!--<p>Lorem Ipsum is simply dummy text of the printing.</p>
+                    <p>-->
+          <a class="btn btn-lg btn-primary" href="#" role="button">READ MORE</a>
+          <!--<a class="caption-link" href="#" role="button">Inspinia Theme</a>-->
+          <!--</p>-->
+        </div>
+        <!--<div class="carousel-image wow zoomIn">
+                    <img src="img/landing/laptop.png" alt="laptop"/>
+                </div>-->
+      </div>
+      <!-- Set background for slide in css -->
+      <div class="header-back one" style="background: url('images/header_one.jpg') 50% 0 no-repeat;"></div>
+
+    </div>
+    <!--<div class="item">
+            <div class="container">
+                <div class="carousel-caption blank">
+                    <h1>We create meaningful <br/> interfaces that inspire.</h1>
+                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+                    <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
+                </div>
+            </div>-->
+    <!-- Set background for slide in css -->
+    <!--<div class="header-back two"></div>
+        </div>-->
+  </div>
+  <!--<a class="left carousel-control" href="#inSlider" role="button" data-slide="prev">
+        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+        <span class="sr-only">Previous</span>
+    </a>
+    <a class="right carousel-control" href="#inSlider" role="button" data-slide="next">
+        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+        <span class="sr-only">Next</span>
+    </a>-->
+</div>
+
+  <section id="DashBoard" class="container services">
+        <div class="row">
+
+            <h1>
+                OPNFV’s goals are to:
+            </h1>
+            <div class="col-sm-3">
+
+                <p>Develop an integrated and tested open source platform that can be used to build NFV functionality--accelerating
+                    the introduction of new products and services</p>
+                <p><a class="navy-link" href="#" role="button">Details &raquo;</a></p>
+            </div>
+            <div class="col-sm-3">
+
+                <p>Include participation of leading end users to validate that OPNFV meets the needs of user community</p>
+                <p><a class="navy-link" href="#" role="button">Details &raquo;</a></p>
+            </div>
+            <div class="col-sm-3">
+
+                <p>Contribute to and participate in relevant open source projects that will be leveraged in the OPNFV platform;
+                    ensuring consistency, performance and interoperability among open source components</p>
+                <p><a class="navy-link" href="#" role="button">Details &raquo;</a></p>
+            </div>
+            <div class="col-sm-3">
+
+                <p>Establish an ecosystem for NFV solutions based on open standards and software to meet the needs of end users</p>
+                <p><a class="navy-link" href="#" role="button">Details &raquo;</a></p>
+            </div>
+            <div class="col-sm-3">
+
+                <p>Promote OPNFV as the preferred platform and community for open source NFV</p>
+                <p><a class="navy-link" href="#" role="button">Details &raquo;</a></p>
+            </div>
+        </div>
+    </section>
+
+
+<div ui-view></div>
+
+<section id="contact" class="gray-section contact" style="background-image: url(images/word_map.png)">
+  <div class="container">
+    <div class="row m-b-lg">
+      <div class="col-lg-12 text-center">
+        <div class="navy-line"></div>
+        <h1>Contact Us</h1>
+      </div>
+    </div>
+    <div class="row m-b-lg">
+      <div class="col-lg-3 col-lg-offset-3">
+        <address>
+          <strong><span class="navy">Press, Analyst, or Speaking Inquiries</span></strong><br/> pr@opnfv.org
+          <br/>
+        </address>
+        <address>
+          <strong><span class="navy">OPNFV Events</span></strong><br/> events@opnfv.org
+          <br/>
+        </address>
+        <address>
+          <strong><span class="navy">IT Support</span></strong><br/>opnfv-helpdesk@rt.linuxfoundation.org
+          <br/>
+        </address>
+      </div>
+
+      <div class="col-lg-4">
+        <address>
+          <strong><span class="navy">To submit and track bugs related to OPNFV</span></strong><br/>Please visit https://jira.opnfv.org
+          <br/>
+        </address>
+        <address>
+          <strong><span class="navy">Newsletter</span></strong><br/>Sign up for the OPNFV newsletter
+          <br/>
+        </address>
+        <address>
+          <strong><span class="navy">Membership</span></strong><br/>Please visit the Join as a Member page
+          <br/>
+        </address>
+
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-lg-12 text-center">
+        <img src="images/logo.png" />
+
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-lg-8 col-lg-offset-2 text-center m-t-lg m-b-lg">
+        <p><strong>&copy; 2016 Open Platform for NFV Project, Inc</strong><br/> A Linux Foundation Collaborative Project. All
+          Rights Reserved. Open Platform for NFV and OPNFV are trademarks of the Open Platform for NFV Project, Inc. Linux
+          Foundation is a registered trademark of The Linux Foundation. Linux is a registered trademark of Linus Torvalds.
+          Please see our terms of use, trademark policy, and privacy policy.
+        </p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<script>
+
+    $(document).ready(function () {
+
+        $('body').scrollspy({
+            target: '.navbar-fixed-top',
+            offset: 80
+        });
+
+        // Page scrolling feature
+        $('a.page-scroll').bind('click', function(event) {
+            var link = $(this);
+            $('html, body').stop().animate({
+                scrollTop: $(link.attr('href')).offset().top - 50
+            }, 500);
+            event.preventDefault();
+            $("#navbar").collapse('hide');
+        });
+
+
+          console.log(  $("selectVersion").val());
+
+    });
+
+            // $(".select2_demo_1").select2();
+            // $(".select2_demo_2").select2();
+            // $(".select2_demo_3").select2({
+            //     placeholder: "Version",
+            //     allowClear: true
+            // });
+            //   $(".select2_demo_4").select2({
+            //     placeholder: "Period",
+            //     allowClear: true
+            // });
+
+
+    var config = {
+                '.chosen-select'           : {},
+                '.chosen-select-deselect'  : {allow_single_deselect:true},
+                '.chosen-select-no-single' : {disable_search_threshold:10},
+                '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
+                '.chosen-select-width'     : {width:"95%"}
+                }
+            for (var selector in config) {
+                $(selector).chosen(config[selector]);
+            }
+
+    var cbpAnimatedHeader = (function() {
+        var docElem = document.documentElement,
+                header = document.querySelector( '.navbar-default' ),
+                didScroll = false,
+                changeHeaderOn = 200;
+        function init() {
+            window.addEventListener( 'scroll', function( event ) {
+                if( !didScroll ) {
+                    didScroll = true;
+                    setTimeout( scrollPage, 250 );
+                }
+            }, false );
+        }
+        function scrollPage() {
+            var sy = scrollY();
+            if ( sy >= changeHeaderOn ) {
+                $(header).addClass('navbar-scroll')
+            }
+            else {
+                $(header).removeClass('navbar-scroll')
+            }
+            didScroll = false;
+        }
+        function scrollY() {
+            return window.pageYOffset || docElem.scrollTop;
+        }
+        init();
+
+    })();
+
+
+</script>