Create Test Reporting landing page

JIRA: RELENG-165

In this patch, I upload the backend code

usage:
docker run -itd -p 8000:8000 -e SERVER_URL=server_ip:8000 opnfv/reporting:<tag>

note: must point SERVER_URL, it is the api server.

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

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

22 files changed, 805 insertions, 726 deletions

diff --git a/utils/test/reporting/api/handlers/landing.py b/utils/test/reporting/api/handlers/landing.py
index 137c05007..ae1fd2037 100644
--- a/utils/test/reporting/api/handlers/landing.py
+++ b/utils/test/reporting/api/handlers/landing.py
@@ -6,15 +6,172 @@
 # which accompanies this distribution, and is available at
 # http://www.apache.org/licenses/LICENSE-2.0
 ##############################################################################
+import requests
+
 from tornado.web import RequestHandler
 from tornado.escape import json_encode
+from tornado.escape import json_decode
 
 
-class FiltersHandler(RequestHandler):
-    def get(self):
-        return self.write(json_encode({'status': 'SUCCESS'}))
+class BaseHandler(RequestHandler):
+    def _set_header(self):
+        self.set_header('Access-Control-Allow-Origin', '*')
+        self.set_header('Access-Control-Allow-Headers',
+                        'Content-Type, Content-Length, Authorization, \
+                        Accept, X-Requested-With , PRIVATE-TOKEN')
+        self.set_header('Access-Control-Allow-Methods',
+                        'PUT, POST, GET, DELETE, OPTIONS')
 
 
-class ScenariosHandler(RequestHandler):
+class FiltersHandler(BaseHandler):
     def get(self):
-        return self.write(json_encode({'status': 'SUCCESS'}))
+        self._set_header()
+
+        filters = {
+            'filters': {
+                'status': ['success', 'warning', 'danger'],
+                'projects': ['functest', 'yardstick'],
+                'installers': ['apex', 'compass', 'fuel', 'joid'],
+                'version': ['colorado', 'master'],
+                'loops': ['daily', 'weekly', 'monthly'],
+                'time': ['10 days', '30 days']
+            }
+        }
+        return self.write(json_encode(filters))
+
+
+class ScenariosHandler(BaseHandler):
+    def post(self):
+        self._set_header()
+
+        body = json_decode(self.request.body)
+        args = self._get_args(body)
+
+        scenarios = self._get_result_data(self._get_scenarios(), args)
+
+        return self.write(json_encode(dict(scenarios=scenarios)))
+
+    def _get_result_data(self, data, args):
+        data = self._filter_status(data, args)
+        return {s: self._get_scenario_result(s, data[s], args) for s in data}
+
+    def _filter_status(self, data, args):
+        return {k: v for k, v in data.items() if v['status'] in args['status']}
+
+    def _get_scenario_result(self, scenario, data, args):
+        result = {
+            'status': data.get('status'),
+            'installers': self._get_installers_result(data['installers'], args)
+        }
+        return result
+
+    def _get_installers_result(self, data, args):
+        func = self._get_installer_result
+        return {k: func(k, data.get(k, {}), args) for k in args['installers']}
+
+    def _get_installer_result(self, installer, data, args):
+        projects = data.get(args['version'], [])
+        return [self._get_project_data(projects, p) for p in args['projects']]
+
+    def _get_project_data(self, projects, project):
+        atom = {
+            'project': project,
+            'score': None,
+            'status': None
+        }
+        for p in projects:
+            if p['project'] == project:
+                return p
+        return atom
+
+    def _get_scenarios(self):
+        url = 'http://testresults.opnfv.org/test/api/v1/scenarios'
+        resp = requests.get(url).json()
+        data = self._change_to_utf8(resp).get('scenarios', {})
+        return {a.get('name'): self._get_scenario(a.get('installers', [])
+                                                  ) for a in data}
+
+    def _get_scenario(self, data):
+        installers = {a.get('installer'): self._get_installer(a.get('versions',
+                                                                    [])
+                                                              ) for a in data}
+        scenario = {
+            'status': self._get_status(),
+            'installers': installers
+        }
+        return scenario
+
+    def _get_status(self):
+        return 'success'
+
+    def _get_installer(self, data):
+        return {a.get('version'): self._get_version(a) for a in data}
+
+    def _get_version(self, data):
+        try:
+            scores = data.get('score', {}).get('projects')[0]
+            trusts = data.get('trust_indicator', {}).get('projects')[0]
+        except (TypeError, IndexError):
+            return []
+        else:
+            scores = {key: [dict(date=a.get('date')[:10],
+                                 score=a.get('score')
+                                 ) for a in scores[key]] for key in scores}
+            trusts = {key: [dict(date=a.get('date')[:10],
+                                 status=a.get('status')
+                                 ) for a in trusts[key]] for key in trusts}
+            atom = self._get_atom(scores, trusts)
+            return [dict(project=k,
+                         score=sorted(atom[k], reverse=True)[0].get('score'),
+                         status=sorted(atom[k], reverse=True)[0].get('status')
+                         ) for k in atom if atom[k]]
+
+    def _get_atom(self, scores, trusts):
+        s = {k: {a['date']: a['score'] for a in scores[k]} for k in scores}
+        t = {k: {a['date']: a['status'] for a in trusts[k]} for k in trusts}
+        return {k: [dict(score=s[k][a], status=t[k][a], data=a
+                         ) for a in s[k] if a in t[k]] for k in s}
+
+    def _change_to_utf8(self, obj):
+        if isinstance(obj, dict):
+            return {str(k): self._change_to_utf8(v) for k, v in obj.items()}
+        elif isinstance(obj, list):
+            return [self._change_to_utf8(ele) for ele in obj]
+        else:
+            try:
+                new = eval(obj)
+                if isinstance(new, int):
+                    return obj
+                return self._change_to_utf8(new)
+            except (NameError, TypeError, SyntaxError):
+                return str(obj)
+
+    def _get_args(self, body):
+        status = self._get_status_args(body)
+        projects = self._get_projects_args(body)
+        installers = self._get_installers_args(body)
+
+        args = {
+            'status': status,
+            'projects': projects,
+            'installers': installers,
+            'version': body.get('version', 'master').lower(),
+            'loops': body.get('loops', 'daily').lower(),
+            'time': body.get('times', '10 days')[:2].lower()
+        }
+        return args
+
+    def _get_status_args(self, body):
+        status_all = ['success', 'warning', 'danger']
+        status = [a.lower() for a in body.get('status', ['all'])]
+        return status_all if 'all' in status else status
+
+    def _get_projects_args(self, body):
+        project_all = ['functest', 'yardstick']
+        projects = [a.lower() for a in body.get('projects', ['all'])]
+        return project_all if 'all' in projects else projects
+
+    def _get_installers_args(self, body):
+        installer_all = ['apex', 'compass', 'fuel', 'joid']
+        installers = [a.lower() for a in body.get('installers', ['all'])]
+        return installer_all if 'all' in installers else installers
diff --git a/utils/test/reporting/api/install.sh b/utils/test/reporting/api/install.sh
new file mode 100755
index 000000000..55d6b77ec
--- /dev/null
+++ b/utils/test/reporting/api/install.sh
@@ -0,0 +1,3 @@
+apt-get install -y python-pip
+pip install tornado
+pip install requests
diff --git a/utils/test/reporting/docker/reporting.sh b/utils/test/reporting/docker/reporting.sh
index 78bcc4e82..1de13ae32 100755
--- a/utils/test/reporting/docker/reporting.sh
+++ b/utils/test/reporting/docker/reporting.sh
@@ -79,10 +79,4 @@ echo "daemon off;" >> /etc/nginx/nginx.conf
 # supervisor config
 cp /home/opnfv/utils/test/reporting/docker/supervisor.conf /etc/supervisor/conf.d/
 
-# build pages
-cd pages
 ln -s /usr/bin/nodejs /usr/bin/node
-npm install
-npm install -g grunt bower
-bower install --allow-root
-grunt build
diff --git a/utils/test/reporting/docker/supervisor.conf b/utils/test/reporting/docker/supervisor.conf
index 0c2207793..1e0eed9c8 100644
--- a/utils/test/reporting/docker/supervisor.conf
+++ b/utils/test/reporting/docker/supervisor.conf
@@ -14,3 +14,9 @@ autorestart = true
 user = root
 command = service nginx restart
 autorestart = true
+
+[program:reporting_angular]
+user = root
+directory = /home/opnfv/utils/test/reporting/pages
+command = bash angular.sh
+autorestart = true
diff --git a/utils/test/reporting/pages/angular.sh b/utils/test/reporting/pages/angular.sh
new file mode 100755
index 000000000..a7f167516
--- /dev/null
+++ b/utils/test/reporting/pages/angular.sh
@@ -0,0 +1,10 @@
+: ${SERVER_URL:='http://testresults.opnfv.org/reporting/api'}
+
+echo "var BASE_URL = 'http://${SERVER_URL}/landing-page'" > app/scripts/app.config.js
+
+apt-get install -y nodejs
+apt-get install -y npm
+npm install
+npm install -g grunt bower
+bower install --allow-root
+grunt build
diff --git a/utils/test/reporting/pages/app/images/green.png b/utils/test/reporting/pages/app/images/green.png
new file mode 100644
index 000000000..57fc59927
--- /dev/null
+++ b/utils/test/reporting/pages/app/images/green.png
diff --git a/utils/test/reporting/pages/app/images/green@2x.png b/utils/test/reporting/pages/app/images/green@2x.png
new file mode 100644
index 000000000..3bda5beb6
--- /dev/null
+++ b/utils/test/reporting/pages/app/images/green@2x.png
diff --git a/utils/test/reporting/pages/app/index.html b/utils/test/reporting/pages/app/index.html
index 7673a4cc2..1159c2176 100644
--- a/utils/test/reporting/pages/app/index.html
+++ b/utils/test/reporting/pages/app/index.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html ng-app="opnfvApp">
-  <head>
+
+<head>
     <meta charset="utf-8">
     <title>OPNFV-DASHBOARD EXAMPLE</title>
     <meta name="description" content="">
@@ -13,17 +14,22 @@
     <link rel="stylesheet" href="bower_components/chosen/chosen.css" />
     <link rel="stylesheet" href="bower_components/selectize/dist/css/selectize.css" />
     <link rel="stylesheet" href="bower_components/components-font-awesome/css/font-awesome.css" />
+    <link rel="stylesheet" href="bower_components/angular-tooltips/dist/angular-tooltips.min.css" />
+    <link rel="stylesheet" href="bower_components/animate.css/animate.css" />
+    <link rel="stylesheet" href="bower_components/ng-dialog/css/ngDialog.css" />
+    <link rel="stylesheet" href="bower_components/ng-dialog/css/ngDialog-theme-default.css" />
+    <link rel="stylesheet" href="bower_components/inspiniacss/style.css" />
     <!-- endbower -->
     <!-- endbuild -->
     <!-- build:css(.tmp) styles/style.css -->
-    <!--<link rel="stylesheet" href="styles/main.css">-->
-    <link rel="stylesheet" href="styles/animate.css">
-    <link rel="stylesheet" href="styles/style.css">
+
     <link rel="stylesheet" href="styles/custome.css">
 
+
     <!-- endbuild -->
-  </head>
-  <body class="{{$state.current.data.specialClass}}" id="page-top">
+</head>
+
+<body class="{{$state.current.data.specialClass}}" id="page-top">
     <!--[if lte IE 8]>
       <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
     <![endif]-->
@@ -31,7 +37,7 @@
     <!-- Add your site or application content here -->
     <div ui-view></div>
     <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
-     <!--<script>
+    <!--<script>
        !function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
        (A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
        r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
@@ -59,17 +65,27 @@
     <script src="bower_components/microplugin/src/microplugin.js"></script>
     <script src="bower_components/selectize/dist/js/selectize.js"></script>
     <script src="bower_components/angular-selectize2/dist/angular-selectize.js"></script>
+    <script src="bower_components/angular-tooltips/dist/angular-tooltips.min.js"></script>
+    <script src="bower_components/jQuery-rwdImageMaps/jquery.rwdImageMaps.min.js"></script>
+    <script src="bower_components/ng-dialog/js/ngDialog.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
 
-        <!-- build:js({.tmp,app}) scripts/scripts.js -->
-        <script src="scripts/app.js"></script>
-        <!--<script src="scripts/controllers/main.js"></script>-->
-        <script src="scripts/config.router.js"></script>
-        <script src="scripts/controllers/table.controller.js"></script>
-        <script src="scripts/config.js"></script>
-        <script src="scripts/directives/mydirective.js"></script>
-        <script src="scripts/factory/table.factory.js"></script>
-        <!-- endbuild -->
+    <!-- build:js({.tmp,app}) scripts/scripts.js -->
+    <script src="scripts/app.js"></script>
+    <!--<script src="scripts/controllers/main.js"></script>-->
+    <script src="scripts/config.router.js"></script>
+    <script src="scripts/controllers/table.controller.js"></script>
+    <script src="scripts/config.js"></script>
+    <script src="scripts/factory/table.factory.js"></script>
+    <script src="scripts/controllers/case.controller.js"></script>
+    <script src="scripts/controllers/auth.controller.js"></script>
+    <script src="scripts/controllers/admin.controller.js"></script>
+    <script src="scripts/controllers/main.controller.js"></script>
+    <script src="scripts/app.config.js"></script>
+    <script src="scripts/controllers/testvisual.controller.js"></script>
+
+    <!-- endbuild -->
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/utils/test/reporting/pages/app/scripts/app.config.js b/utils/test/reporting/pages/app/scripts/app.config.js
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/utils/test/reporting/pages/app/scripts/app.config.js
diff --git a/utils/test/reporting/pages/app/scripts/app.js b/utils/test/reporting/pages/app/scripts/app.js
index 6e99ce3d7..d06019c55 100644
--- a/utils/test/reporting/pages/app/scripts/app.js
+++ b/utils/test/reporting/pages/app/scripts/app.js
@@ -9,12 +9,13 @@
  * Main module of the application.
  */
 angular
-  .module('opnfvApp', [
-    'ngAnimate',
-    'ui.router',
-    'oc.lazyLoad',
-    'ui.bootstrap',
-    'ngResource',
-    'selectize'
+    .module('opnfvApp', [
+        'ngAnimate',
+        'ui.router',
+        'oc.lazyLoad',
+        'ui.bootstrap',
+        'ngResource',
+        'selectize',
+        '720kb.tooltips'
 
-  ]);
+    ]);
\ No newline at end of file
diff --git a/utils/test/reporting/pages/app/scripts/config.js b/utils/test/reporting/pages/app/scripts/config.js
index 838460a38..1010169d3 100644
--- a/utils/test/reporting/pages/app/scripts/config.js
+++ b/utils/test/reporting/pages/app/scripts/config.js
@@ -7,8 +7,13 @@
  * Main config file of the application.
  */
 angular
-    .module('opnfvApp').config(function () {
+    .module('opnfvApp').config(['$httpProvider', '$qProvider', function($httpProvider, $qProvider) {
 
-    }
+            $httpProvider.defaults.useXDomain = true;
+            delete $httpProvider.defaults.headers.common['X-Requested-With'];
 
-    )
+            $qProvider.errorOnUnhandledRejections(false);
+
+        }
+
+    ]);
\ No newline at end of file
diff --git a/utils/test/reporting/pages/app/scripts/config.router.js b/utils/test/reporting/pages/app/scripts/config.router.js
index 641ea6a74..d38ad7507 100644
--- a/utils/test/reporting/pages/app/scripts/config.router.js
+++ b/utils/test/reporting/pages/app/scripts/config.router.js
@@ -23,7 +23,7 @@ angular.module('opnfvApp')
             $stateProvider
                 .state('landingpage', {
                     url: "/landingpage",
-                    //controller: 'MainCtrl',
+                    controller: 'MainController',
                     templateUrl: "views/main.html",
                     data: { pageTitle: '首页', specialClass: 'landing-page' },
                     resolve: {
diff --git a/utils/test/reporting/pages/app/scripts/controllers/main.controller.js b/utils/test/reporting/pages/app/scripts/controllers/main.controller.js
new file mode 100644
index 000000000..2054dc2dd
--- /dev/null
+++ b/utils/test/reporting/pages/app/scripts/controllers/main.controller.js
@@ -0,0 +1,32 @@
+'use strict';
+
+/**
+ * @ngdoc function
+ * @name opnfvdashBoardAngularApp.controller:MainPageController
+ * @description
+ * # TableController
+ * Controller of the opnfvdashBoardAngularApp
+ */
+angular.module('opnfvApp')
+    .controller('MainController', ['$scope', '$state', '$stateParams', function($scope, $state, $stateParams) {
+
+        init();
+
+        function init() {
+            $scope.goTest = goTest;
+            $scope.goLogin = goLogin;
+
+        }
+
+        function goTest() {
+            $state.go("select.selectTestCase");
+        }
+
+        function goLogin() {
+            $state.go("login");
+        }
+
+
+
+
+    }]);
\ No newline at end of file
diff --git a/utils/test/reporting/pages/app/scripts/controllers/table.controller.js b/utils/test/reporting/pages/app/scripts/controllers/table.controller.js
index 8ca1e474c..0f3a17a03 100644
--- a/utils/test/reporting/pages/app/scripts/controllers/table.controller.js
+++ b/utils/test/reporting/pages/app/scripts/controllers/table.controller.js
@@ -8,255 +8,131 @@
  * Controller of the opnfvdashBoardAngularApp
  */
 angular.module('opnfvApp')
-    .controller('TableController', ['$scope', '$state', '$stateParams', 'TableFactory', function ($scope, $state, $stateParams, TableFactory) {
+    .controller('TableController', ['$scope', '$state', '$stateParams', '$http', 'TableFactory', function($scope, $state, $stateParams, $http, TableFactory) {
 
         $scope.filterlist = [];
         $scope.selection = [];
-        $scope.statusList = ["Success", "Warning", "Danger"];
-        $scope.projectList = ["Deployment", "Functest", "Yardstick"];
-        $scope.installerList = ["apex", "compass", "fuel", "joid"];
-        $scope.versionlist = ["Colorado", "Master"];
-        $scope.loopci = ["Daily", "Weekly", "Monthly"];
-        $scope.time = ["10 days", "1 Month"];
+        $scope.statusList = [];
+        $scope.projectList = [];
+        $scope.installerList = [];
+        $scope.versionlist = [];
+        $scope.loopci = [];
+        $scope.time = [];
         $scope.tableDataAll = {};
         $scope.tableInfoAll = {};
+        $scope.scenario = {};
 
+        $scope.VersionConfig = {
+            create: true,
+            valueField: 'title',
+            labelField: 'title',
+            delimiter: '|',
+            maxItems: 1,
+            placeholder: 'Version',
+            onChange: function(value) {
+                checkElementArrayValue($scope.selection, $scope.VersionOption);
+                $scope.selection.push(value);
+                // console.log($scope.selection);
+                getScenarioData();
 
+            }
+        }
 
-        $scope.scenario =
-            {
-                "scenarios": {
-                    "os-nosdn-kvm-noha": {
-                        "status": "Success",
-                        "installers": {
-                            "apex": [
-                                {
-                                    "project": "Deployment",
-                                    "score": "13/14",
-                                    "status": "SUCCESS",
-
-
-                                },
-                                {
-                                    "project": "Functest",
-                                    "score": "null",
-                                    "status": "SUCCESS"
-                                },
-                                {
-                                    "project": "Yardstick",
-                                    "score": "13/14",
-                                    "status": "SUCCESS"
-                                }
-                            ],
-                            "compass": [
-                                {
-                                    "project": "Deployment",
-                                    "score": "13/14",
-                                    "status": "SUCCESS"
-                                },
-                                {
-                                    "project": "Functest",
-                                    "score": "13/14",
-                                    "status": "SUCCESS"
-                                },
-                                {
-                                    "project": "Yardstick",
-                                    "score": "13/14",
-                                    "status": "SUCCESS"
-                                }
-                            ],
-                            "fuel": [
-                                {
-                                    "project": "Deployment",
-                                    "score": "13/14",
-                                    "status": "SUCCESS"
-                                },
-                                {
-                                    "project": "Functest",
-                                    "score": "13/14",
-                                    "status": "SUCCESS"
-                                },
-                                {
-                                    "project": "Yardstick",
-                                    "score": "13/14",
-                                    "status": "SUCCESS"
-                                }
-                            ],
-                            "joid": [
-                                {
-                                    "project": "Deployment",
-                                    "score": "13/14",
-                                    "status": "SUCCESS"
-                                },
-                                {
-                                    "project": "Functest",
-                                    "score": "13/14",
-                                    "status": "SUCCESS"
-                                },
-                                {
-                                    "project": "Yardstick",
-                                    "score": "13/14",
-                                    "status": "SUCCESS"
-                                }
-                            ]
-                        }
-                    },
-                    "os-nosdn-ovs-ha": {
-                        "status": "Danger",
-                        "installers": {
-                            "apex": [
-                                {
-                                    "project": "Deployment",
-                                    "score": "13/14",
-                                    "status": "SUCCESS",
-
-
-                                },
-                                {
-                                    "project": "Functest",
-                                    "score": "13/14",
-                                    "status": "SUCCESS"
-                                },
-                                {
-                                    "project": "Yardstick",
-                                    "score": "13/14",
-                                    "status": "SUCCESS"
-                                }
-                            ],
-                            "compass": [
-                                {
-                                    "project": "Deployment",
-                                    "score": "13/14",
-                                    "status": "SUCCESS"
-                                },
-                                {
-                                    "project": "Functest",
-                                    "score": "13/14",
-                                    "status": "SUCCESS"
-                                },
-                                {
-                                    "project": "Yardstick",
-                                    "score": "13/14",
-                                    "status": "SUCCESS"
-                                }
-                            ],
-                            "fuel": [
-                                {
-                                    "project": "Deployment",
-                                    "score": "13/14",
-                                    "status": "SUCCESS"
-                                },
-                                {
-                                    "project": "Functest",
-                                    "score": "13/14",
-                                    "status": "SUCCESS"
-                                },
-                                {
-                                    "project": "Yardstick",
-                                    "score": "13/14",
-                                    "status": "SUCCESS"
-                                }
-                            ],
-                            "joid": [
-                                {
-                                    "project": "Deployment",
-                                    "score": "13/14",
-                                    "status": "SUCCESS"
-                                },
-                                {
-                                    "project": "Functest",
-                                    "score": "13/14",
-                                    "status": "SUCCESS"
-                                },
-                                {
-                                    "project": "Yardstick",
-                                    "score": "13/14",
-                                    "status": "SUCCESS"
-                                }
-                            ]
-                        }
-                    },
-                    "os-nosdn-ovs-noha": {
-                        "status": "Warning",
-                        "installers": {
-                            "apex": [
-                                {
-                                    "project": "Deployment",
-                                    "score": "13/14",
-                                    "status": "SUCCESS",
-
-
-                                },
-                                {
-                                    "project": "Functest",
-                                    "score": "13/14",
-                                    "status": "SUCCESS"
-                                },
-                                {
-                                    "project": "Yardstick",
-                                    "score": "13/14",
-                                    "status": "SUCCESS"
-                                }
-                            ],
-                            "compass": [
-                                {
-                                    "project": "Deployment",
-                                    "score": "13/14",
-                                    "status": "SUCCESS"
-                                },
-                                {
-                                    "project": "Functest",
-                                    "score": "13/14",
-                                    "status": "SUCCESS"
-                                },
-                                {
-                                    "project": "Yardstick",
-                                    "score": "13/14",
-                                    "status": "SUCCESS"
-                                }
-                            ],
-                            "fuel": [
-                                {
-                                    "project": "Deployment",
-                                    "score": "13/14",
-                                    "status": "SUCCESS"
-                                },
-                                {
-                                    "project": "Functest",
-                                    "score": "13/14",
-                                    "status": "SUCCESS"
-                                },
-                                {
-                                    "project": "Yardstick",
-                                    "score": "13/14",
-                                    "status": "SUCCESS"
-                                }
-                            ],
-                            "joid": [
-                                {
-                                    "project": "Deployment",
-                                    "score": "13/14",
-                                    "status": "SUCCESS"
-                                },
-                                {
-                                    "project": "Functest",
-                                    "score": "13/14",
-                                    "status": "SUCCESS"
-                                },
-                                {
-                                    "project": "Yardstick",
-                                    "score": "13/14",
-                                    "status": "SUCCESS"
-                                }
-                            ]
-                        }
-                    }
+        $scope.LoopConfig = {
+            create: true,
+            valueField: 'title',
+            labelField: 'title',
+            delimiter: '|',
+            maxItems: 1,
+            placeholder: 'Loop',
+            onChange: function(value) {
+                checkElementArrayValue($scope.selection, $scope.LoopOption);
+                $scope.selection.push(value);
+                // console.log($scope.selection);
+                getScenarioData();
+
+            }
+        }
+
+        $scope.TimeConfig = {
+            create: true,
+            valueField: 'title',
+            labelField: 'title',
+            delimiter: '|',
+            maxItems: 1,
+            placeholder: 'Time',
+            onChange: function(value) {
+                checkElementArrayValue($scope.selection, $scope.TimeOption);
+                $scope.selection.push(value);
+                // console.log($scope.selection)
+                getScenarioData();
+
+
+            }
+        }
+
+
+        init();
+
+        function init() {
+            $scope.toggleSelection = toggleSelection;
+            getScenarioData();
+            // radioSetting();
+            getFilters();
+        }
+
+        function getFilters() {
+            TableFactory.getFilter().get({
+
+
+            }).$promise.then(function(response) {
+                if (response != null) {
+                    $scope.statusList = response.filters.status;
+                    $scope.projectList = response.filters.projects;
+                    $scope.installerList = response.filters.installers;
+                    $scope.versionlist = response.filters.version;
+                    $scope.loopci = response.filters.loops;
+                    $scope.time = response.filters.time;
+
+                    $scope.statusListString = $scope.statusList.toString();
+                    $scope.projectListString = $scope.projectList.toString();
+                    $scope.installerListString = $scope.installerList.toString();
+                    $scope.VersionSelected = $scope.versionlist[1];
+                    $scope.LoopCiSelected = $scope.loopci[0];
+                    $scope.TimeSelected = $scope.time[0];
+                    radioSetting($scope.versionlist, $scope.loopci, $scope.time);
+
+                } else {
+                    alert("网络错误");
                 }
+            })
+        }
+
+        function getScenarioData() {
+
+            var utl = BASE_URL + '/scenarios';
+            var data = {
+                'status': ['success', 'danger', 'warning'],
+                'projects': ['functest', 'yardstick'],
+                'installers': ['apex', 'compass', 'fuel', 'joid'],
+                'version': $scope.VersionSelected,
+                'loops': $scope.LoopCiSelected,
+                'time': $scope.TimeSelected
             };
+            var config = {
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
+                }
+            }
+            $http.post(utl, data, config).then(function(response) {
+                if (response.status == 200) {
+                    $scope.scenario = response.data;
+                    constructJson();
+                }
+            })
+        }
 
-        // var headData = Object.keys($scope.scenario.scenarios.os_nosdn_kvm_noha.installers);
-        // $scope.headData = headData;
-        //construct json
+        //construct json 
         function constructJson() {
 
             var colspan;
@@ -267,19 +143,22 @@ angular.module('opnfvApp')
 
             for (var item in $scope.scenario.scenarios) {
 
-
-
-
-                var headData = Object.keys($scope.scenario.scenarios[item].installers);
+                var headData = Object.keys($scope.scenario.scenarios[item].installers).sort();
                 var scenarioStatus = $scope.scenario.scenarios[item].status;
-
+                var scenarioStatusDisplay;
+                if (scenarioStatus == "success") {
+                    scenarioStatusDisplay = "navy";
+                } else if (scenarioStatus == "danger") {
+                    scenarioStatusDisplay = "danger";
+                } else if (scenarioStatus == "warning") {
+                    scenarioStatusDisplay = "warning";
+                }
 
                 InstallerData = headData;
                 var projectData = [];
                 var datadisplay = [];
                 var projects = [];
 
-
                 for (var j = 0; j < headData.length; j++) {
 
                     projectData.push($scope.scenario.scenarios[item].installers[headData[j]]);
@@ -289,9 +168,30 @@ angular.module('opnfvApp')
                     for (var k = 0; k < projectData[j].length; k++) {
                         projects.push(projectData[j][k].project);
                         var temArray = [];
-                        temArray.push(projectData[j][k].score);
-                        temArray.push(projectData[j][k].project);
-                        temArray.push(headData[j]);
+                        if (projectData[j][k].score == null) {
+                            temArray.push("null");
+                            temArray.push(projectData[j][k].project);
+                            temArray.push(headData[j]);
+                        } else {
+                            temArray.push(projectData[j][k].score);
+                            temArray.push(projectData[j][k].project);
+                            temArray.push(headData[j]);
+                        }
+
+
+                        if (projectData[j][k].status == "platinium") {
+                            temArray.push("primary");
+                            temArray.push("P");
+                        } else if (projectData[j][k].status == "gold") {
+                            temArray.push("danger");
+                            temArray.push("G");
+                        } else if (projectData[j][k].status == "silver") {
+                            temArray.push("warning");
+                            temArray.push("S");
+                        } else if (projectData[j][k].status == null) {
+                            temArray.push("null");
+                        }
+
                         datadisplay.push(temArray);
 
                     }
@@ -301,13 +201,21 @@ angular.module('opnfvApp')
                 colspan = projects.length / headData.length;
 
                 var tabledata = {
-                    scenarioName: item, Installer: InstallerData, projectData: projectData, projects: projects,
-                    datadisplay: datadisplay, colspan: colspan, status: scenarioStatus
+                    scenarioName: item,
+                    Installer: InstallerData,
+                    projectData: projectData,
+                    projects: projects,
+                    datadisplay: datadisplay,
+                    colspan: colspan,
+                    status: scenarioStatus,
+                    statusDisplay: scenarioStatusDisplay
                 };
 
                 JSON.stringify(tabledata);
                 $scope.tableDataAll.scenario.push(tabledata);
 
+                // console.log(tabledata);
+
             }
 
 
@@ -315,15 +223,13 @@ angular.module('opnfvApp')
 
             var tempHeadData = [];
 
-
-
             for (var i = 0; i < InstallerData.length; i++) {
                 for (var j = 0; j < colspan; j++) {
                     tempHeadData.push(InstallerData[i]);
                 }
             }
 
-            console.log(tempHeadData);
+            //console.log(tempHeadData);
 
             var projectsInfoAll = [];
 
@@ -334,13 +240,14 @@ angular.module('opnfvApp')
                 projectsInfoAll.push(tempA);
 
             }
-            console.log(projectsInfoAll);
+            //console.log(projectsInfoAll);
 
             $scope.tableDataAll["colspan"] = colspan;
             $scope.tableDataAll["Installer"] = InstallerData;
             $scope.tableDataAll["Projects"] = projectsInfoAll;
 
-            console.log($scope.tableDataAll);
+            // console.log($scope.tableDataAll);
+            $scope.colspan = $scope.tableDataAll.colspan;
 
         }
 
@@ -353,58 +260,11 @@ angular.module('opnfvApp')
             return size;
         }
 
-        init();
-        function init() {
-            $scope.toggleSelection = toggleSelection;
-
-            constructJson();
-
-        }
-
-        // $scope.test=false;
+        $scope.colspan = $scope.tableDataAll.colspan;
+        // console.log($scope.colspan);
 
-        var statusListString = $scope.statusList.toString();
-        var projectListString = $scope.projectList.toString();
-        var installerListString = $scope.installerList.toString();
 
-
-        $scope.colspan=$scope.tableDataAll.colspan;
-        //filter function
-        function filterData() {
-
-
-            $scope.selectInstallers = [];
-            $scope.selectProjects = [];
-            $scope.selectStatus = [];
-            for (var i = 0; i < $scope.selection.length; i++) {
-                if (statusListString.indexOf($scope.selection[i]) > -1) {
-                    $scope.selectStatus.push($scope.selection[i]);
-                }
-                if (projectListString.indexOf($scope.selection[i]) > -1) {
-                    $scope.selectProjects.push($scope.selection[i]);
-                }
-                if (installerListString.indexOf($scope.selection[i]) > -1) {
-                    $scope.selectInstallers.push($scope.selection[i]);
-                }
-            }
-
-            $scope.colspan=$scope.selectProjects.length;
-            //when some selection is empty, we set it full
-            if($scope.selectInstallers.length==0){
-                $scope.selectInstallers=$scope.installerList;
-
-            }
-            if($scope.selectProjects.length==0){
-                $scope.selectProjects=$scope.projectList;
-                $scope.colspan=$scope.tableDataAll.colspan;
-            }
-            if($scope.selectStatus.length==0){
-                $scope.selectStatus=$scope.statusList
-            }
-        }
-
-
-        //find all same element index
+        //find all same element index 
         function getSameElementIndex(array, element) {
             var indices = [];
             var idx = array.indexOf(element);
@@ -424,64 +284,31 @@ angular.module('opnfvApp')
 
         }
 
-
-        $scope.VersionOption = [
-            { title: 'Colorado' },
-            { title: 'Master' }
-        ];
-        $scope.VersionConfig = {
-            create: true,
-            valueField: 'title',
-            labelField: 'title',
-            delimiter: '|',
-            maxItems: 1,
-            placeholder: 'Version',
-            onChange: function (value) {
-                checkElementArrayValue($scope.selection, $scope.VersionOption);
-                $scope.selection.push(value);
-                // console.log($scope.selection);
-
+        function radioSetting(array1, array2, array3) {
+            var tempVersion = [];
+            var tempLoop = [];
+            var tempTime = [];
+            for (var i = 0; i < array1.length; i++) {
+                var temp = {
+                    title: array1[i]
+                };
+                tempVersion.push(temp);
             }
-
-        }
-
-        $scope.LoopOption = [
-            { title: 'Daily' },
-            { title: 'Weekly' },
-            { title: 'Monthly' }
-        ];
-        $scope.LoopConfig = {
-            create: true,
-            valueField: 'title',
-            labelField: 'title',
-            delimiter: '|',
-            maxItems: 1,
-            placeholder: 'Loop',
-            onChange: function (value) {
-                checkElementArrayValue($scope.selection, $scope.LoopOption);
-                $scope.selection.push(value);
-                // console.log($scope.selection);
-
+            for (var i = 0; i < array2.length; i++) {
+                var temp = {
+                    title: array2[i]
+                };
+                tempLoop.push(temp);
             }
-        }
-
-        $scope.TimeOption = [
-            { title: '10 days' },
-            { title: '1 month' }
-        ];
-        $scope.TimeConfig = {
-            create: true,
-            valueField: 'title',
-            labelField: 'title',
-            delimiter: '|',
-            maxItems: 1,
-            placeholder: 'Time',
-            onChange: function (value) {
-                checkElementArrayValue($scope.selection, $scope.TimeOption);
-                $scope.selection.push(value);
-                // console.log($scope.selection)
-
+            for (var i = 0; i < array3.length; i++) {
+                var temp = {
+                    title: array3[i]
+                };
+                tempTime.push(temp);
             }
+            $scope.VersionOption = tempVersion;
+            $scope.LoopOption = tempLoop;
+            $scope.TimeOption = tempTime;
         }
 
         //remove element in the array
@@ -508,13 +335,51 @@ angular.module('opnfvApp')
 
             if (idx > -1) {
                 $scope.selection.splice(idx, 1);
-            }
-            else {
+                filterData($scope.selection)
+            } else {
                 $scope.selection.push(status);
+                filterData($scope.selection)
             }
-            console.log($scope.selection);
-            filterData();
+            // console.log($scope.selection);
 
         }
 
-    }]);
+        //filter function
+        function filterData(selection) {
+
+            $scope.selectInstallers = [];
+            $scope.selectProjects = [];
+            $scope.selectStatus = [];
+            for (var i = 0; i < selection.length; i++) {
+                if ($scope.statusListString.indexOf(selection[i]) > -1) {
+                    $scope.selectStatus.push(selection[i]);
+                }
+                if ($scope.projectListString.indexOf(selection[i]) > -1) {
+                    $scope.selectProjects.push(selection[i]);
+                }
+                if ($scope.installerListString.indexOf(selection[i]) > -1) {
+                    $scope.selectInstallers.push(selection[i]);
+                }
+            }
+
+            $scope.colspan = $scope.selectProjects.length;
+            //when some selection is empty, we set it full
+            if ($scope.selectInstallers.length == 0) {
+                $scope.selectInstallers = $scope.installerList;
+
+            }
+            if ($scope.selectProjects.length == 0) {
+                $scope.selectProjects = $scope.projectList;
+                $scope.colspan = $scope.tableDataAll.colspan;
+            }
+            if ($scope.selectStatus.length == 0) {
+                $scope.selectStatus = $scope.statusList
+            }
+
+            // console.log($scope.selectStatus);
+            // console.log($scope.selectProjects);
+
+        }
+
+
+    }]);
\ No newline at end of file
diff --git a/utils/test/reporting/pages/app/scripts/data.json b/utils/test/reporting/pages/app/scripts/data.json
deleted file mode 100644
index a15fdf37e..000000000
--- a/utils/test/reporting/pages/app/scripts/data.json
+++ /dev/null
@@ -1,76 +0,0 @@
-
-{"scenarios": {
-    "os-nosdn-kvm-noha": {
-        "status": "Success",
-        "installers": {
-            "apex": [
-                {
-                    "project": "Deployment",
-                    "score": "13/14",
-                    "status": "SUCCESS"
-                },
-                {
-                    "project": "Functest",
-                    "score": "13/14",
-                    "status": "SUCCESS"
-                },
-                {
-                    "project": "Yardstick",
-                    "socre": "13/14",
-                    "status": "SUCCESS"
-                }
-            ],
-            "compass": [
-                {
-                    "project": "Deployment",
-                    "score": "13/14",
-                    "status": "SUCCESS"
-                },
-                {
-                    "project": "Functest",
-                    "score": "13/14",
-                    "status": "SUCCESS"
-                },
-                {
-                    "project": "Yardstick",
-                    "socre": "13/14",
-                    "status": "SUCCESS"
-                }
-            ],
-            "fuel": [
-                {
-                    "project": "Deployment",
-                    "score": "13/14",
-                    "status": "SUCCESS"
-                },
-                {
-                    "project": "Functest",
-                    "score": "13/14",
-                    "status": "SUCCESS"
-                },
-                {
-                    "project": "Yardstick",
-                    "socre": "13/14",
-                    "status": "SUCCESS"
-                }
-            ],
-            "joid": [
-                {
-                    "project": "Deployment",
-                    "score": "13/14",
-                    "status": "SUCCESS"
-                },
-                {
-                    "project": "Functest",
-                    "score": "13/14",
-                    "status": "SUCCESS"
-                },
-                {
-                    "project": "Yardstick",
-                    "socre": "13/14",
-                    "status": "SUCCESS"
-                }
-            ]
-        }
-    }
-}}
diff --git a/utils/test/reporting/pages/app/scripts/factory/table.factory.js b/utils/test/reporting/pages/app/scripts/factory/table.factory.js
index 22443221e..a2e2aeff0 100644
--- a/utils/test/reporting/pages/app/scripts/factory/table.factory.js
+++ b/utils/test/reporting/pages/app/scripts/factory/table.factory.js
@@ -4,17 +4,23 @@
  * get data factory
  */
 angular.module('opnfvApp')
-    .factory('TableFactory', function ($resource, $rootScope) {
-        // var baseUrl = base_Url;
+    .factory('TableFactory', function($resource, $rootScope) {
 
         return {
-            getFilter: function () {
-                return $resource(baseUrl + '/', {}, {
-                    'post': {
-                        method: 'POST',
+            getFilter: function() {
+                return $resource(BASE_URL + '/filters', {}, {
+                    'get': {
+                        method: 'GET',
 
                     }
                 });
+            },
+            getScenario: function() {
+                return $resource(BASE_URL + '/scenarios', {}, {
+                    'post': {
+                        method: 'POST',
+                    }
+                })
             }
         };
-    });
+    });
\ No newline at end of file
diff --git a/utils/test/reporting/pages/app/styles/custome.css b/utils/test/reporting/pages/app/styles/custome.css
index dadc68a03..b498cf04d 100644
--- a/utils/test/reporting/pages/app/styles/custome.css
+++ b/utils/test/reporting/pages/app/styles/custome.css
@@ -1,8 +1,8 @@
 .container-tablesize {
-     margin: auto 5%;
+    margin: auto 5%;
 }
 
-.btn-outline  {
+.btn-outline {
     border-color: white;
 }
 
@@ -29,6 +29,68 @@
 }
 
 .myhr {
-    border:0.5px dashed #e7eaec;
-    border-top:1px;margin-bottom: 3px;
-}
\ No newline at end of file
+    border: 0.5px dashed #e7eaec;
+    border-top: 1px;
+    margin-bottom: 3px;
+}
+
+td.null {
+    background-color: #e7eaec;
+    color: #e7eaec;
+}
+
+input[type="radio"][disabled],
+input[type="checkbox"][disabled],
+input[type="radio"].disabled,
+input[type="checkbox"].disabled,
+fieldset[disabled] input[type="radio"],
+fieldset[disabled] input[type="checkbox"] {
+    cursor: not-allowed;
+    display: none;
+}
+
+body,
+html {
+    margin: 0;
+    padding: 0;
+    min-height: 100%;
+}
+
+
+/*img[usemap] {
+    border: none;
+    height: auto;
+    max-width: 100%;
+    width: auto;
+}*/
+
+.popup {
+    position: absolute;
+    display: none;
+    /*background-color: #dd8;*/
+    border-radius: 5px 5px 5px 5px;
+    background-color: #f3f3f4;
+    opacity: 0.9;
+}
+
+
+/*
+body {
+    height: 1200px;
+}
+
+html {
+    min-height: 100%;
+}*/
+
+
+/*html,
+body {
+    height: 100%;
+}
+
+#page-wrapper {
+    position: inherit;
+    margin: 0 0 0 220px;
+    min-height: 773px;
+}*/
\ No newline at end of file
diff --git a/utils/test/reporting/pages/app/styles/fonts/glyphicons-halflings-regular.svg b/utils/test/reporting/pages/app/styles/fonts/glyphicons-halflings-regular.svg
index 187805af6..94fb5490a 100644
--- a/utils/test/reporting/pages/app/styles/fonts/glyphicons-halflings-regular.svg
+++ b/utils/test/reporting/pages/app/styles/fonts/glyphicons-halflings-regular.svg
@@ -285,4 +285,4 @@
 <glyph unicode="&#x1f511;" d="M250 1200h600q21 0 35.5 -14.5t14.5 -35.5v-400q0 -21 -14.5 -35.5t-35.5 -14.5h-150v-500l-255 -178q-19 -9 -32 -1t-13 29v650h-150q-21 0 -35.5 14.5t-14.5 35.5v400q0 21 14.5 35.5t35.5 14.5zM400 1100v-100h300v100h-300z" />
 <glyph unicode="&#x1f6aa;" d="M250 1200h750q39 0 69.5 -40.5t30.5 -84.5v-933l-700 -117v950l600 125h-700v-1000h-100v1025q0 23 15.5 49t34.5 26zM500 525v-100l100 20v100z" />
 </font>
-</defs></svg>
+</defs></svg> 
\ No newline at end of file
diff --git a/utils/test/reporting/pages/app/views/commons/table.html b/utils/test/reporting/pages/app/views/commons/table.html
index ed9300edd..f504bd76b 100644
--- a/utils/test/reporting/pages/app/views/commons/table.html
+++ b/utils/test/reporting/pages/app/views/commons/table.html
@@ -29,81 +29,85 @@
                     <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)">
+                        <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">
+                    <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)">
+                        <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">
+                    <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)">
+                        <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)>-1" ng-click="toggleSelection(installer)">
                             <input type="checkbox" disabled="disabled"> {{installer}}
                             </label>
-                   </div>
+                    </div>
 
-                <hr style="border:0.5px dashed #e7eaec;border-top:1px;margin-bottom:10px;">
+                    <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 class=" col-md-1" style="margin-top:5px;margin-right: 5px;">
+                        <selectize options="VersionOption" ng-model="VersionSelected" config="VersionConfig"></selectize>
 
-                </div>
+                    </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 class=" col-md-1" style="margin-top:5px;margin-right: 5px;">
+                        <selectize options="LoopOption" ng-model="LoopCiSelected" config="LoopConfig"></selectize>
 
-                </div>
+                    </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 class=" col-md-1" style="margin-top:5px;margin-right: 5px;">
+                        <selectize options="TimeOption" ng-model="TimeSelected" config="TimeConfig"></selectize>
+                    </div>
                 </div>
+                <div class="table-responsive">
+
+                    <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>
 
-</div>
+                                <td></td>
+                                <td 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>
 
-<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>
+                        </thead>
+                        <tbody class="tbody">
+                            <tr ng-repeat="scenario in tableDataAll.scenario" ng-show="selectStatus.indexOf(scenario.status)!=-1">
 
-        <tr>
+                                <td nowrap="nowrap" data={{scenario.status}}><span class="fa fa-circle text-{{scenario.statusDisplay}}"></span> <a href="notfound.html">{{scenario.scenarioName}}</a> </td>
 
-            <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 style="background-color:#e7eaec" align="justify" ng-if="data[0]=='Not Support'" ng-repeat="data in scenario.datadisplay track by $index" data={{data[1]}} value={{data[2]}}></td>-->
 
-            <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>
+                                <td nowrap="nowrap" 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]}} class={{data[0]}}>
+                                    <span class="label label-{{data[3]}}">{{data[4]}}</a></span> {{data[0]}}</td>
 
-                <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>
 
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div class="pull-right" style="margin-top: 5px">
+                    <span class="label label-danger">G</span>gold<span style="padding-left:20px"></span>
+                    <span class="label label-primary">P</span><span>platinium</span><span style="padding-left:20px"></span>
+                    <span class="label label-warning">S</span><span>silver</span>
                 </div>
+            </div>
         </div>
     </div>
-</div>
 
-</section>
+</section>
\ No newline at end of file
diff --git a/utils/test/reporting/pages/app/views/main.html b/utils/test/reporting/pages/app/views/main.html
index 1e3fe9e5a..cca893713 100644
--- a/utils/test/reporting/pages/app/views/main.html
+++ b/utils/test/reporting/pages/app/views/main.html
@@ -1,186 +1,171 @@
-
 <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">
+    <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>
+                <a class="navbar-brand" href="index.html">OPNFV-DASHBOARD</a>
+            </div>
+            <div 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 ui-sref="select.selectTestCase">TestCase</a></li>
+                    <li><a ui-sref="login">Login</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>
+                </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>
+    <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>
+    </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>-->
+                    <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>
+            <!-- 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="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">
+<section id="DashBoard" class="container services">
+    <div class="row">
 
-            <h1>
-                OPNFV’s goals are to:
-            </h1>
-            <div class="col-sm-3">
+        <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>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>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>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>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>
+            <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>
-    </section>
+    </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>
+    <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>
+                <address>
           <strong><span class="navy">OPNFV Events</span></strong><br/> events@opnfv.org
           <br/>
         </address>
-        <address>
+                <address>
           <strong><span class="navy">IT Support</span></strong><br/>opnfv-helpdesk@rt.linuxfoundation.org
           <br/>
         </address>
-      </div>
+            </div>
 
-      <div class="col-lg-4">
-        <address>
+            <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>
+                <address>
           <strong><span class="navy">Newsletter</span></strong><br/>Sign up for the OPNFV newsletter
           <br/>
         </address>
-        <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-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>
+        <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>
-  </div>
 </section>
 
 <script>
+    $(document).ready(function() {
 
-    $(document).ready(function () {
+        // $('body').scrollspy({
+        //     target: '.navbar-fixed-top',
+        //     offset: 80
+        // });
 
-        $('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');
         });
 
-        // Page scrolling feature
         $('a.page-scroll').bind('click', function(event) {
             var link = $(this);
             $('html, body').stop().animate({
@@ -190,63 +175,56 @@
             $("#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]);
-            }
+        '.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;
+            header = document.querySelector('.navbar-default'),
+            didScroll = false,
+            changeHeaderOn = 200;
+
         function init() {
-            window.addEventListener( 'scroll', function( event ) {
-                if( !didScroll ) {
+            window.addEventListener('scroll', function(event) {
+                if (!didScroll) {
                     didScroll = true;
-                    setTimeout( scrollPage, 250 );
+                    setTimeout(scrollPage, 250);
                 }
-            }, false );
+            }, false);
         }
+
         function scrollPage() {
             var sy = scrollY();
-            if ( sy >= changeHeaderOn ) {
+            if (sy >= changeHeaderOn) {
                 $(header).addClass('navbar-scroll')
-            }
-            else {
+            } else {
                 $(header).removeClass('navbar-scroll')
             }
             didScroll = false;
         }
+
         function scrollY() {
             return window.pageYOffset || docElem.scrollTop;
         }
         init();
 
     })();
-
-
-</script>
+</script>
\ No newline at end of file
diff --git a/utils/test/reporting/pages/bower.json b/utils/test/reporting/pages/bower.json
index dd0996d18..bfc4df3d9 100644
--- a/utils/test/reporting/pages/bower.json
+++ b/utils/test/reporting/pages/bower.json
@@ -1,32 +1,47 @@
 {
-  "name": "opnfv",
-  "version": "0.0.0",
-  "dependencies": {
-    "angular": "^1.4.0",
-    "bootstrap": "^3.2.0",
-    "angular-animate": "^1.4.0",
-    "jquery-slimscroll": "slimscroll#^1.3.8",
-    "metisMenu": "~2.0.2",
-    "chosen": "^1.6.2",
-    "oclazyload": "^1.0.9",
-    "angular-bootstrap": "~1.1.2",
-    "angular-ui-router": "~0.2.15",
-    "angular-resource": "^1.6.0",
-    "angular-selectize2": "^3.0.1",
-    "components-font-awesome": "^4.7.0"
-  },
-  "devDependencies": {
-    "angular-mocks": "^1.4.0"
-  },
-  "appPath": "app",
-  "moduleName": "opnfvApp",
-  "overrides": {
-    "bootstrap": {
-      "main": [
-        "less/bootstrap.less",
-        "dist/css/bootstrap.css",
-        "dist/js/bootstrap.js"
-      ]
+    "name": "opnfv",
+    "version": "0.0.0",
+    "dependencies": {
+        "angular": "^1.4.0",
+        "bootstrap": "^3.2.0",
+        "angular-animate": "^1.4.0",
+        "jquery-slimscroll": "slimscroll#^1.3.8",
+        "metisMenu": "~2.0.2",
+        "chosen": "^1.6.2",
+        "oclazyload": "^1.0.9",
+        "angular-bootstrap": "~1.1.2",
+        "angular-ui-router": "~0.2.15",
+        "angular-resource": "^1.6.0",
+        "angular-selectize2": "^3.0.1",
+        "components-font-awesome": "^4.7.0",
+        "angular-tooltips": "^1.1.8",
+        "jQuery-rwdImageMaps": "*",
+        "animate.css": "^3.5.2",
+        "ng-dialog": "^1.0.0",
+        "inspiniacss": "^0.0.1"
+    },
+    "devDependencies": {
+        "angular-mocks": "^1.4.0"
+    },
+    "appPath": "app",
+    "moduleName": "opnfvApp",
+    "overrides": {
+        "bootstrap": {
+            "main": [
+                "less/bootstrap.less",
+                "dist/css/bootstrap.css",
+                "dist/js/bootstrap.js"
+            ]
+        },
+        "jQuery-rwdImageMaps": {
+            "main": [
+                "jquery.rwdImageMaps.min.js"
+            ]
+        },
+        "inspiniacss": {
+            "main": [
+                "style.css"
+            ]
+        }
     }
-  }
-}
+}
\ No newline at end of file
diff --git a/utils/test/reporting/pages/test/karma.conf.js b/utils/test/reporting/pages/test/karma.conf.js
index 2b0f41cd3..5c2e79b9f 100644
--- a/utils/test/reporting/pages/test/karma.conf.js
+++ b/utils/test/reporting/pages/test/karma.conf.js
@@ -36,6 +36,7 @@ module.exports = function(config) {
       'bower_components/microplugin/src/microplugin.js',
       'bower_components/selectize/dist/js/selectize.js',
       'bower_components/angular-selectize2/dist/angular-selectize.js',
+      'bower_components/angular-tooltips/dist/angular-tooltips.min.js',
       'bower_components/angular-mocks/angular-mocks.js',
       // endbower
       'app/scripts/**/*.js',