Landing page adoption

Since testapi have done some changes on scenarios api,
so landing page should do some adoption.

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

4 files changed, 244 insertions, 370 deletions

diff --git a/reporting/api/handlers/landing.py b/reporting/api/handlers/landing.py
index 749916f..0bf602d 100644
--- a/reporting/api/handlers/landing.py
+++ b/reporting/api/handlers/landing.py
@@ -7,6 +7,7 @@
 # http://www.apache.org/licenses/LICENSE-2.0
 ##############################################################################
 import requests
+import time
 
 from tornado.escape import json_encode
 from tornado.escape import json_decode
@@ -24,7 +25,7 @@ class FiltersHandler(BaseHandler):
                 'status': ['success', 'warning', 'danger'],
                 'projects': ['functest', 'yardstick'],
                 'installers': ['apex', 'compass', 'fuel', 'joid'],
-                'version': ['colorado', 'master'],
+                'version': ['master', 'colorado', 'danube'],
                 'loops': ['daily', 'weekly', 'monthly'],
                 'time': ['10 days', '30 days']
             }
@@ -53,27 +54,27 @@ class ScenariosHandler(BaseHandler):
     def _get_scenario_result(self, scenario, data, args):
         result = {
             'status': data.get('status'),
-            'installers': self._get_installers_result(data['installers'], args)
+            'installers': self._get_installers_result(data, 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']}
+        return {k: func(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_installer_result(self, data, args):
+        return self._get_version_data(data.get(args['version'], {}), args)
 
-    def _get_project_data(self, projects, project):
+    def _get_version_data(self, data, args):
+        return {k: self._get_project_data(data.get(k, {}))
+                for k in args['projects']}
+
+    def _get_project_data(self, data):
         atom = {
-            'project': project,
-            'score': None,
-            'status': None
+            'score': data.get('score', ''),
+            'status': data.get('status', '')
         }
-        for p in projects:
-            if p['project'] == project:
-                return p
+
         return atom
 
     def _get_scenarios(self):
@@ -88,41 +89,42 @@ class ScenariosHandler(BaseHandler):
                                                                     [])
                                                               ) for a in data}
         scenario = {
-            'status': self._get_status(),
-            'installers': installers
+            'status': self._get_status()
         }
+        scenario.update(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}
+        return {a.get('version'): self._get_version(a.get('projects'))
+                for a in data}
 
     def _get_version(self, data):
+        return {a.get('project'): self._get_project(a) for a in data}
+
+    def _get_project(self, data):
+        scores = data.get('scores', [])
+        trusts = data.get('trust_indicators', [])
+
         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}
+            date = sorted(scores, reverse=True)[0].get('date')
+        except IndexError:
+            data = time.time()
+
+        try:
+            score = sorted(scores, reverse=True)[0].get('score')
+        except IndexError:
+            score = None
+
+        try:
+            status = sorted(trusts, reverse=True)[0].get('status')
+        except IndexError:
+            status = None
+
+        return {'date': date, 'score': score, 'status': status}
 
     def _change_to_utf8(self, obj):
         if isinstance(obj, dict):
diff --git a/reporting/pages/app/scripts/controllers/table.controller.js b/reporting/pages/app/scripts/controllers/table.controller.js
index 44d9441..8d494c3 100644
--- a/reporting/pages/app/scripts/controllers/table.controller.js
+++ b/reporting/pages/app/scripts/controllers/table.controller.js
@@ -11,396 +11,268 @@ angular.module('opnfvApp')
     .controller('TableController', ['$scope', '$state', '$stateParams', '$http', 'TableFactory', '$timeout',
         function($scope, $state, $stateParams, $http, TableFactory, $timeout) {
 
-            $scope.filterlist = [];
-            $scope.selection = [];
-            $scope.statusList = [];
-            $scope.projectList = [];
-            $scope.installerList = [];
-            $scope.versionlist = [];
-            $scope.loopci = [];
-            $scope.time = [];
-            $scope.tableDataAll = {};
-            $scope.tableInfoAll = {};
-            $scope.scenario = {};
-            // $scope.selectProjects = [];
-
-
-            $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();
+            init();
 
-                }
-            }
+            function init() {
+                $scope.filterlist = [];
+                $scope.selection = [];
 
-            $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.statusList = [];
+                $scope.projectList = [];
+                $scope.installerList = [];
+                $scope.versionlist = [];
+                $scope.loopList = [];
+                $scope.timeList = [];
 
-                }
-            }
+                $scope.selectStatus = [];
+                $scope.selectProjects = [];
+                $scope.selectInstallers = [];
+                $scope.selectVersion = null;
+                $scope.selectLoop = null;
+                $scope.selectTime = null;
+
+                $scope.statusClicked = false;
+                $scope.installerClicked = false;
+                $scope.projectClicked = false;
 
-            $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();
+                $scope.scenarios = {};
 
+                $scope.VersionConfig = {
+                    create: true,
+                    valueField: 'title',
+                    labelField: 'title',
+                    delimiter: '|',
+                    maxItems: 1,
+                    placeholder: 'Version',
+                    onChange: function(value) {
+                        $scope.selectVersion = value;
 
+                        getScenarioData();
+
+                    }
                 }
-            }
 
+                $scope.LoopConfig = {
+                    create: true,
+                    valueField: 'title',
+                    labelField: 'title',
+                    delimiter: '|',
+                    maxItems: 1,
+                    placeholder: 'Loop',
+                    onChange: function(value) {
+                        $scope.selectLoop = value;
 
-            init();
+                        getScenarioData();
+
+                    }
+                }
+
+                $scope.TimeConfig = {
+                    create: true,
+                    valueField: 'title',
+                    labelField: 'title',
+                    delimiter: '|',
+                    maxItems: 1,
+                    placeholder: 'Time',
+                    onChange: function(value) {
+                        $scope.selectTime = value;
+
+                        getScenarioData();
+                    }
+                }
 
-            function init() {
-                $scope.toggleSelection = toggleSelection;
-                getScenarioData();
                 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);
+                        $scope.versionList = toSelectList(response.filters.version);
+                        $scope.loopList = toSelectList(response.filters.loops);
+                        $scope.timeList = toSelectList(response.filters.time);
+
+                        $scope.selectStatus = copy($scope.statusList);
+                        $scope.selectInstallers = copy($scope.installerList);
+                        $scope.selectProjects = copy($scope.projectList);
+                        $scope.selectVersion = response.filters.version[0];
+                        $scope.selectLoop = response.filters.loops[0];
+                        $scope.selectTime = response.filters.time[0];
+
+                        getScenarioData();
 
                     } else {
-                        alert("网络错误");
                     }
-                })
+                });
+            }
+
+            function toSelectList(arr){
+                var tempList = [];
+                angular.forEach(arr, function(ele){
+                    tempList.push({'title': ele});
+                });
+                return tempList;
+            }
+
+            function copy(arr){
+                var tempList = [];
+                angular.forEach(arr, function(ele){
+                    tempList.push(ele);
+                });
+                return tempList;
             }
 
             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
+                    'status': $scope.selectStatus,
+                    'projects': $scope.selectProjects,
+                    'installers': $scope.selectInstallers,
+                    'version': $scope.selectVersion,
+                    'loops': $scope.selectLoop,
+                    'time': $scope.selectTime
                 };
 
                 TableFactory.getScenario(data).then(function(response) {
                     if (response.status == 200) {
-                        $scope.scenario = response.data;
-
-                        reSettingcolspan();
+                        $scope.scenarios = response.data.scenarios;
+                        getScenario();
                     }
 
                 }, function(error) {
-
-                })
+                });
 
             }
 
-            function reSettingcolspan() {
-                if ($scope.selectProjects == undefined || $scope.selectProjects == null) {
-                    constructJson();
-                    $scope.colspan = $scope.tableDataAll.colspan;
+            function getScenario(){
 
-                } else {
-                    constructJson();
-                    $scope.colspan = $scope.tempColspan;
-                }
-                // console.log("test")
-            }
-
-            //construct json 
-            function constructJson(selectProject) {
+                $scope.project_row = [];
+                angular.forEach($scope.selectInstallers, function(installer){
+                    angular.forEach($scope.selectProjects, function(project){
+                        var temp = {
+                            'installer': installer,
+                            'project': project
+                        }
+                        $scope.project_row.push(temp);
 
-                var colspan;
-                var InstallerData;
-                var projectsInfo;
-                $scope.tableDataAll["scenario"] = [];
+                    });
+                });
 
 
-                for (var item in $scope.scenario.scenarios) {
+                $scope.scenario_rows = [];
+                angular.forEach($scope.scenarios, function(scenario, name){
+                    var scenario_row = {
+                        'name': null,
+                        'status': null,
+                        'statusDisplay': null,
+                        'datadisplay': [],
+                    };
+                    scenario_row.name = name;
+                    scenario_row.status = scenario.status;
 
-                    var headData = Object.keys($scope.scenario.scenarios[item].installers).sort();
-                    var scenarioStatus = $scope.scenario.scenarios[item].status;
                     var scenarioStatusDisplay;
-                    if (scenarioStatus == "success") {
+                    if (scenario.status == "success") {
                         scenarioStatusDisplay = "navy";
-                    } else if (scenarioStatus == "danger") {
+                    } else if (scenario.status == "danger") {
                         scenarioStatusDisplay = "danger";
-                    } else if (scenarioStatus == "warning") {
+                    } else if (scenario.status == "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]]);
-                    }
-                    for (var j = 0; j < projectData.length; j++) {
-
-                        for (var k = 0; k < projectData[j].length; k++) {
-                            projects.push(projectData[j][k].project);
-                            var temArray = [];
-                            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");
+                    scenario_row.statusDisplay = scenarioStatusDisplay;
+
+                    angular.forEach($scope.selectInstallers, function(installer){
+                        angular.forEach($scope.selectProjects, function(project){
+                            var datadisplay = {
+                                'installer': null,
+                                'project': null,
+                                'value': null,
+                                'label': null,
+                                'label_value': null
+                            };
+                            datadisplay.installer = installer;
+                            datadisplay.project = project;
+                            datadisplay.value = scenario.installers[installer][project].score;
+
+                            var single_status = scenario.installers[installer][project].status;
+                            if (single_status == "platinium") {
+                                datadisplay.label = 'primary';
+                                datadisplay.label_value = 'P';
+                            } else if (single_status == "gold") {
+                                datadisplay.label = 'danger';
+                                datadisplay.label_value = 'G';
+                            } else if (single_status == "silver") {
+                                datadisplay.label = 'warning';
+                                datadisplay.label_value = 'S';
+                            } else if (single_status == null) {
                             }
+                            scenario_row.datadisplay.push(datadisplay);
 
-                            datadisplay.push(temArray);
-
-                        }
-
-                    }
-
-                    colspan = projects.length / headData.length;
-
-                    var tabledata = {
-                        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);
-
-                }
-
-
-                projectsInfo = $scope.tableDataAll.scenario[0].projects;
-
-                var tempHeadData = [];
-
-                for (var i = 0; i < InstallerData.length; i++) {
-                    for (var j = 0; j < colspan; j++) {
-                        tempHeadData.push(InstallerData[i]);
-                    }
-                }
-
-                //console.log(tempHeadData);
-
-                var projectsInfoAll = [];
-
-                for (var i = 0; i < projectsInfo.length; i++) {
-                    var tempA = [];
-                    tempA.push(projectsInfo[i]);
-                    tempA.push(tempHeadData[i]);
-                    projectsInfoAll.push(tempA);
-
-                }
-                //console.log(projectsInfoAll);
-
-                $scope.tableDataAll["colspan"] = colspan;
-                $scope.tableDataAll["Installer"] = InstallerData;
-                $scope.tableDataAll["Projects"] = projectsInfoAll;
-
-                // console.log($scope.tableDataAll);
-                $scope.colspan = $scope.tableDataAll.colspan;
-                console.log($scope.tableDataAll);
-
-            }
-
-            //get json element size
-            function getSize(jsondata) {
-                var size = 0;
-                for (var item in jsondata) {
-                    size++;
-                }
-                return size;
+                        });
+                    });
+                    $scope.scenario_rows.push(scenario_row);
+                });
             }
 
 
-            // console.log($scope.colspan);
-
-
-            //find all same element index 
-            function getSameElementIndex(array, element) {
-                var indices = [];
-                var idx = array.indexOf(element);
-                while (idx != -1) {
-                    indices.push(idx);
-                    idx = array.indexOf(element, idx + 1);
+            function clickBase(eleList, ele){
+                var idx = eleList.indexOf(ele);
+                if(idx > -1){
+                    eleList.splice(idx, 1);
+                }else{
+                    eleList.push(ele);
                 }
-                //return indices;
-                var result = { element: element, index: indices };
-                JSON.stringify(result);
-                return result;
             }
 
-            //delete element in array
-            function deletElement(array, index) {
-                array.splice(index, 1);
+            $scope.clickStatus = function(status){
+                if($scope.selectStatus.length == $scope.statusList.length && $scope.statusClicked == false){
+                    $scope.selectStatus = [];
+                    $scope.statusClicked = true;
+                }
 
-            }
+                clickBase($scope.selectStatus, status);
 
-            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);
-                }
-                for (var i = 0; i < array2.length; i++) {
-                    var temp = {
-                        title: array2[i]
-                    };
-                    tempLoop.push(temp);
+                if($scope.selectStatus.length == 0 && $scope.statusClicked == true){
+                    $scope.selectStatus = copy($scope.statusList);
+                    $scope.statusClicked = false;
                 }
-                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
-            function removeArrayValue(arr, value) {
-                for (var i = 0; i < arr.length; i++) {
-                    if (arr[i] == value) {
-                        arr.splice(i, 1);
-                        break;
-                    }
-                }
+                getScenarioData();
             }
 
-            //check if exist element
-            function checkElementArrayValue(arrayA, arrayB) {
-                for (var i = 0; i < arrayB.length; i++) {
-                    if (arrayA.indexOf(arrayB[i].title) > -1) {
-                        removeArrayValue(arrayA, arrayB[i].title);
-                    }
+            $scope.clickInstaller = function(installer){
+                if($scope.selectInstallers.length == $scope.installerList.length && $scope.installerClicked == false){
+                    $scope.selectInstallers = [];
+                    $scope.installerClicked = true;
                 }
-            }
 
-            function toggleSelection(status) {
-                var idx = $scope.selection.indexOf(status);
+                clickBase($scope.selectInstallers, installer);
 
-                if (idx > -1) {
-                    $scope.selection.splice(idx, 1);
-                    filterData($scope.selection)
-                } else {
-                    $scope.selection.push(status);
-                    filterData($scope.selection)
+                if($scope.selectInstallers.length == 0 && $scope.installerClicked == true){
+                    $scope.selectInstallers = copy($scope.installerList);
+                    $scope.installerClicked = false;
                 }
-                // console.log($scope.selection);
 
+                getScenarioData();
             }
 
-            //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.clickProject = function(project){
+                if($scope.selectProjects.length == $scope.projectList.length && $scope.projectClicked == false){
+                    $scope.selectProjects = [];
+                    $scope.projectClicked = true;
                 }
 
+                clickBase($scope.selectProjects, project);
 
-                // $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;
-                } else {
-                    $scope.colspan = $scope.selectProjects.length;
-                    $scope.tempColspan = $scope.colspan;
-                }
-                if ($scope.selectStatus.length == 0) {
-                    $scope.selectStatus = $scope.statusList
+                if($scope.selectProjects.length == 0 && $scope.projectClicked == true){
+                    $scope.selectProjects = copy($scope.projectList);
+                    $scope.projectClicked = false;
                 }
 
-                // console.log($scope.selectStatus);
-                // console.log($scope.selectProjects);
-
+                getScenarioData();
             }
 
-
         }
-    ]);
\ No newline at end of file
+    ]);
diff --git a/reporting/pages/app/scripts/factory/table.factory.js b/reporting/pages/app/scripts/factory/table.factory.js
index f0af34f..e715c5c 100644
--- a/reporting/pages/app/scripts/factory/table.factory.js
+++ b/reporting/pages/app/scripts/factory/table.factory.js
@@ -28,7 +28,7 @@ angular.module('opnfvApp')
                     }
                 });
             },
-            getScenario: function() {
+            getScenario: function(data) {
 
                 var config = {
                     headers: {
@@ -36,7 +36,7 @@ angular.module('opnfvApp')
                     }
                 }
 
-                return $http.post(BASE_URL + '/landing-page/scenarios', {}, config);
+                return $http.post(BASE_URL + '/landing-page/scenarios', data, config);
             },
 
 
diff --git a/reporting/pages/app/views/commons/table.html b/reporting/pages/app/views/commons/table.html
index f504bd7..a33c483 100644
--- a/reporting/pages/app/views/commons/table.html
+++ b/reporting/pages/app/views/commons/table.html
@@ -29,9 +29,9 @@
                     <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="selectStatus.indexOf(status)>-1" ng-click="clickStatus(status)">
                               <input type="checkbox"  disabled="disabled" > {{status}}
-                            
+
                           </label>
                     </div>
 
@@ -39,7 +39,7 @@
 
                     <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 class="btn btn-outline btn-success btn-sm " style="height:25px;margin-right: 5px;" ng-repeat="project in projectList" value={{project}} ng-checked="selectProjects.indexOf(project)>-1" ng-click="clickProject(project)">
                             <input type="checkbox" disabled="disabled"> {{project}}
                         </label>
 
@@ -47,7 +47,7 @@
                     <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)>-1" 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="selectInstallers.indexOf(installer)>-1" ng-click="clickInstaller(installer)">
                             <input type="checkbox" disabled="disabled"> {{installer}}
                             </label>
                     </div>
@@ -56,17 +56,17 @@
 
 
                     <div class=" col-md-1" style="margin-top:5px;margin-right: 5px;">
-                        <selectize options="VersionOption" ng-model="VersionSelected" config="VersionConfig"></selectize>
+                        <selectize options="versionList" ng-model="selectVersion" config="VersionConfig"></selectize>
 
                     </div>
 
                     <div class=" col-md-1" style="margin-top:5px;margin-right: 5px;">
-                        <selectize options="LoopOption" ng-model="LoopCiSelected" config="LoopConfig"></selectize>
+                        <selectize options="loopList" ng-model="selectLoop" config="LoopConfig"></selectize>
 
                     </div>
 
                     <div class=" col-md-1" style="margin-top:5px;margin-right: 5px;">
-                        <selectize options="TimeOption" ng-model="TimeSelected" config="TimeConfig"></selectize>
+                        <selectize options="timeList" ng-model="selectTime" config="TimeConfig"></selectize>
                     </div>
                 </div>
                 <div class="table-responsive">
@@ -75,25 +75,25 @@
                         <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>
+                                <th colspan={{selectProjects.length}} ng-show="selectInstallers.indexOf(key)!=-1" value={{key}} ng-repeat="key in selectInstallers"><a href="notfound.html">{{key}}</a> </th>
                             </tr>
 
                             <tr>
 
                                 <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>
+                                <td ng-show="selectProjects.indexOf(project.project)!=-1 && selectInstallers.indexOf(project.installer)!=-1" ng-repeat="project in project_row track by $index" data={{project.installer}} value={{project.project}}>{{ project.project }}</td>
 
                             </tr>
                         </thead>
                         <tbody class="tbody">
-                            <tr ng-repeat="scenario in tableDataAll.scenario" ng-show="selectStatus.indexOf(scenario.status)!=-1">
+                            <tr ng-repeat="scenario in scenario_rows" ng-show="selectStatus.indexOf(scenario.status)!=-1">
 
-                                <td nowrap="nowrap" data={{scenario.status}}><span class="fa fa-circle text-{{scenario.statusDisplay}}"></span> <a href="notfound.html">{{scenario.scenarioName}}</a> </td>
+                                <td nowrap="nowrap" data={{scenario.status}}><span class="fa fa-circle text-{{scenario.statusDisplay}}"></span> <a href="notfound.html">{{scenario.name}}</a> </td>
 
                                 <!--<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 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>
+                                <td nowrap="nowrap" ng-show="selectInstallers.indexOf(data.installer)!=-1 && selectProjects.indexOf(data.project)!=-1" ng-repeat="data in scenario.datadisplay track by $index" data={{data.project}} value={{data.installer}} class={{data.value}}>
+                                    <span class="label label-{{data.label}}">{{data.label_value}}</a></span> {{data.value}}</td>
 
 
                             </tr>
@@ -110,4 +110,4 @@
         </div>
     </div>
 
-</section>
\ No newline at end of file
+</section>