Replaced with the new context selectore

Bugzilla: 1629520 tendrl-github-id: Tendrl#1065
gnehapk · Sep 17, 2018 · ff23f10 · ff23f10
1 parent ee557b4
commit ff23f10
Show file tree

Hide file tree

Showing 14 changed files with 116 additions and 96 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -94,7 +94,6 @@ gulp.task("jsLibraries", function() {
         "node_modules/jquery/dist/jquery.min.js",
         "node_modules/bootstrap/dist/js/bootstrap.min.js", // For dropdown : temporary
         "node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.js",
-        "node_modules/bootstrap-select/dist/js/bootstrap-select.js",
         "node_modules/angular/angular.js",
         "node_modules/angular-ui-bootstrap/dist/ui-bootstrap.min.js",
         "node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js",
@@ -110,7 +109,8 @@ gulp.task("jsLibraries", function() {
         "node_modules/angular-bootstrap-switch/dist/angular-bootstrap-switch.min.js",
         "node_modules/angular-patternfly/node_modules/angular-drag-and-drop-lists/angular-drag-and-drop-lists.js",
         "node_modules/datatables/media/js/jquery.dataTables.js",
-        "node_modules/angular-patternfly/node_modules/angularjs-datatables/dist/angular-datatables.js"
+        "node_modules/angular-patternfly/node_modules/angularjs-datatables/dist/angular-datatables.js",
+        "node_modules/bootstrap-select/dist/js/bootstrap-select.js"
     ])
     .pipe(uglify())
     .pipe(concat("libraries.js"))
@@ -121,9 +121,8 @@ gulp.task("jsLibraries", function() {
 gulp.task("cssLibraries", function() {
     return gulp.src([
         "node_modules/patternfly/dist/css/patternfly.css",
-        "node_modules/patternfly/dist/css/patternfly-additions.css",
         "node_modules/angular-patternfly/styles/angular-patternfly.css",
-        "node_modules/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css"
+        "node_modules/patternfly/dist/css/patternfly-additions.css"
     ])
     .pipe(postCss([autoprefixer({ browsers: browsers })]))
     .pipe(buildMode === "dev" ? noop() : minifyCSS())

diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
         "angular-ui-bootstrap": "~2.2.0",
         "bootstrap": "^3.3.7",
         "bootstrap-datepicker": "~1.6.4",
-        "bootstrap-select": "^1.12.4",
+        "bootstrap-select": "1.12.2",
         "bootstrap-tooltip": "~3.1.1",
         "c3": "~0.4.11",
         "c3-angular": "git://github.com/jettro/c3-angular-directive#1.3.1",

diff --git a/src/commons/js/index.js b/src/commons/js/index.js
@@ -1,8 +1,8 @@
 //# sourceURL=storage-management-plugin.js
 (function() {
 
-    var storageModule = angular.module("TendrlModule", ["ui.router", "ui.bootstrap", "frapontillo.bootstrap-switch", "gridshore.c3js.chart", "patternfly.charts", "patternfly.card", "patternfly.form", "patternfly.notification", "patternfly.table", "patternfly.filters", "patternfly.modals"]);
-    
+    var storageModule = angular.module("TendrlModule", ["ui.router", "ui.bootstrap", "frapontillo.bootstrap-switch", "patternfly.charts", "patternfly.card", "patternfly.form", "patternfly.notification", "patternfly.table", "patternfly.filters", "patternfly.modals"]);
+
     /* Setting up provider for getting config data */
     storageModule.provider("config", function() {
 

diff --git a/src/commons/services/utils.js b/src/commons/services/utils.js
@@ -6,7 +6,7 @@
         .service("utils", utils);
 
     /*@ngInject*/
-    function utils($http, $rootScope, $state, $filter, config, AuthManager, $location) {
+    function utils($http, $rootScope, $state, $filter, $timeout, $location, config, AuthManager) {
 
         /* Cache the reference to this pointer */
         var vm = this,
@@ -309,5 +309,13 @@
             }
 
         };
+
+        vm.refershSelector = function() {
+            $timeout(function() {
+                //This will refersh the selectpicker in order to select the correct options
+                //TODO: Find an alternate way to do it
+                $(".selectpicker").selectpicker("refresh");
+            });
+        }
     };
 })();
diff --git a/src/commons/stores/cluster-store.js b/src/commons/stores/cluster-store.js
@@ -23,6 +23,10 @@
             clusterFactory.getClusterList()
                 .then(function(data) {
                     $rootScope.clusterData = store.formatClusterData(data.clusters);
+
+                    //Required to make the event listen in header.js file
+                    $rootScope.$broadcast("GotClusterData", $rootScope.clusterData);
+
                     deferred.resolve($rootScope.clusterData);
                 }).catch(function(e) {
                     deferred.reject(e);
@@ -328,4 +332,4 @@
         }
     }
 
-})();
+})();
diff --git a/src/index.html b/src/index.html
@@ -8,8 +8,6 @@
     <title>Tendrl</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width">
-    <!-- inject:css -->
-    <!-- endinject -->
     <link rel="stylesheet" type="text/css" href="cssLibraries/libraries.css">
     <link href="commons/scss/main.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="jsLibraries/libraries.js"></script>
@@ -38,4 +36,4 @@ <h1> Tendrl API is not reachable. </h1>
     </div> -->
 </body>
 
-</html>
+</html>
diff --git a/src/modules/base/header/header.html b/src/modules/base/header/header.html
@@ -1,4 +1,4 @@
-<nav class="navbar-pf-vertical tendrl-header-container">
+<nav class="navbar navbar-pf-vertical navbar-pf-contextselector tendrl-header-container">
     <div class="navbar-header">
         <button ng-if="!$root.forceHideNav()" ng-class="{'navigation-hide': $root.forceHideNav()}" class="navbar-toggle" type="button" href="" ng-click="header.toggleNav($event)">
             <span class="sr-only">Toggle navigation</span>
@@ -9,12 +9,13 @@
         <a class="navbar-brand" ng-click="header.homePage()" class="nav-brand-name-link">
             <img class="nav-brand-name brand-name-img" src="../images/name.png" alt="tendrl | Unified Storage Manager" />
         </a>
-        <select id="repeatSelect" ng-model="$root.selectedClusterOption" class="cluster-options btn btn-default dropdown-toggle filterSelect" ng-change="header.goToClusterPage()" uib-tooltip-html="header.getClusterName($root.selectedClusterOption)" tooltip-placement="auto bottom">
-            <option value="" disabled ng-selected="!$root.selectedClusterOption">Select a cluster...</option>
-            <option value="allClusters" ng-selected="$root.selectedClusterOption === 'allClusters'">All Clusters</option>
-            <option ng-repeat="cluster in $root.clusterData" value="{{cluster.clusterId}}" ng-selected="$root.selectedClusterOption === '{{cluster.clusterId}}'" ng-show="cluster.managed === 'Yes' && cluster.jobType !== 'UnmanageCluster'">{{cluster.name}}</option>
-            <!-- To filter managed clusters :  | filter: {is_managed: 'yes'}-->
-        </select>
+        <div class="nav contextselector-pf">
+            <select class="selectpicker" data-live-search="true" ng-model="$root.selectedClusterOption" ng-change="header.goToClusterPage()" uib-tooltip-html="header.getClusterName($root.selectedClusterOption)" tooltip-placement="auto bottom">
+                <option value="" disabled ng-selected="!$root.selectedClusterOption">Select a cluster...</option>
+                <option value="allClusters" ng-selected="$root.selectedClusterOption === 'allClusters'">All Clusters</option>
+                <option ng-repeat="cluster in $root.clusterData" value="{{cluster.clusterId}}" ng-selected="$root.selectedClusterOption === '{{cluster.clusterId}}'" ng-show="cluster.managed === 'Yes' && cluster.jobType !== 'UnmanageCluster'">{{cluster.name}}</option>
+            </select>
+        </div>
     </div>
     <nav class="collapse navbar-collapse">
         <span class="pull-right">

diff --git a/src/modules/base/header/header.js b/src/modules/base/header/header.js
@@ -46,6 +46,11 @@
             }
         });
 
+        $rootScope.$on("GotClusterData", function(event, data) {
+            //To refresh the selector selected option
+            utils.refershSelector();
+        });
+
         /*BEGIN user setting modal*/
         vm.userScope = {};
         vm.currentState = $state.current.name;
@@ -60,58 +65,57 @@
         vm.isForm = true;
 
         vm.userSettingActionButtons = [{
-                label: "Cancel",
-                isCancel: true
-            }, {
-                label: "Save",
-                class: "btn-primary custom-class",
-                actionFn: function() {
-                    vm.userScope.formSubmitInProgress = true;
-                    if (_validateUIFields()) {
-                        vm.userScope.user.notification = vm.userScope.user.email_notifications;
-                        userStore.editUser(vm.userScope.user)
-                            .then(function(data) {
-                                vm.showUserSetting = false;
-                                if (vm.currentState === "users") {
-                                    userStore.getUserList()
-                                        .then(function(data) {
-                                            if (data !== null) {
-                                                $rootScope.$broadcast("UpdatedUserList", data);
-                                            }
-
-                                        });
-                                }
-                                Notifications.message("success", "", " Profile updated Successfully.");
-                            }).catch(function(e) {
-                                var keys,
-                                    messages;
-
-                                if (e.status === 422) {
-                                    keys = Object.keys(e.data.errors);
-                                    messages = Object.values(e.data.errors)[0];
-
-                                    if (keys.indexOf("email") !== -1) {
-                                        if (messages.indexOf("is taken") !== -1) {
-                                            vm.userScope.errorMsg = "Email is already taken. Please use different one.";
-                                        } else if (messages.indexOf("is invalid") !== -1) {
-                                            vm.userScope.errorMsg = "Please enter a valid Email Id";
+            label: "Cancel",
+            isCancel: true
+        }, {
+            label: "Save",
+            class: "btn-primary custom-class",
+            actionFn: function() {
+                vm.userScope.formSubmitInProgress = true;
+                if (_validateUIFields()) {
+                    vm.userScope.user.notification = vm.userScope.user.email_notifications;
+                    userStore.editUser(vm.userScope.user)
+                        .then(function(data) {
+                            vm.showUserSetting = false;
+                            if (vm.currentState === "users") {
+                                userStore.getUserList()
+                                    .then(function(data) {
+                                        if (data !== null) {
+                                            $rootScope.$broadcast("UpdatedUserList", data);
                                         }
-                                    } else if (keys.indexOf("name") !== -1) {
-                                        vm.userScope.errorMsg = "Name is too short (minimum is 4 characters).";
+
+                                    });
+                            }
+                            Notifications.message("success", "", " Profile updated Successfully.");
+                        }).catch(function(e) {
+                            var keys,
+                                messages;
+
+                            if (e.status === 422) {
+                                keys = Object.keys(e.data.errors);
+                                messages = Object.values(e.data.errors)[0];
+
+                                if (keys.indexOf("email") !== -1) {
+                                    if (messages.indexOf("is taken") !== -1) {
+                                        vm.userScope.errorMsg = "Email is already taken. Please use different one.";
+                                    } else if (messages.indexOf("is invalid") !== -1) {
+                                        vm.userScope.errorMsg = "Please enter a valid Email Id";
                                     }
-                                } else {
-                                    vm.showUserSetting = false;
-                                    Notifications.message("danger", "", " Failed to update profile.");
+                                } else if (keys.indexOf("name") !== -1) {
+                                    vm.userScope.errorMsg = "Name is too short (minimum is 4 characters).";
                                 }
-                            });
+                            } else {
+                                vm.showUserSetting = false;
+                                Notifications.message("danger", "", " Failed to update profile.");
+                            }
+                        });
 
 
-                    } else {
-                        vm.userScope.formSubmitInProgress = false;
-                    }
+                } else {
+                    vm.userScope.formSubmitInProgress = false;
                 }
             }
-        ];
+        }];
 
         function userSetting() {
             vm.userScope.typePassword = false;
@@ -283,4 +287,4 @@
         }
     }
 
-})();
+})();
diff --git a/src/modules/base/header/header.scss b/src/modules/base/header/header.scss
@@ -89,4 +89,4 @@
         cursor: default;
         visibility: hidden;
     }
-}
+}
diff --git a/src/modules/clusters/cluster-hosts/cluster-hosts.js b/src/modules/clusters/cluster-hosts/cluster-hosts.js
@@ -40,14 +40,16 @@
                 _setClusterDetail();
                 vm.isDataLoading = false;
             }
+
+            utils.refershSelector();
         }
 
         /***Private Functions***/
 
         /**
          * @name _setClusterDetail
          * @desc set cluster detail
-         * @memberOf clusterDetailController
+         * @memberOf clusterHostsController
          */
         function _setClusterDetail() {
             vm.clusterObj = clusterStore.getClusterDetails(vm.clusterId);

diff --git a/src/modules/hosts/host-list/host-list.js b/src/modules/hosts/host-list/host-list.js
@@ -170,6 +170,7 @@
 
             var clusters;
             clusters = $rootScope.clusterData;
+            $rootScope.selectedClusterOption = vm.clusterId;
 
             clusterStore.getCluster(vm.clusterId)
                 .then(function(data) {

diff --git a/src/modules/tasks/global-task-detail/global-task-detail.html b/src/modules/tasks/global-task-detail/global-task-detail.html
@@ -22,7 +22,7 @@
         </div>
         <div class="form-group required">
             <label class="col-sm-3 col-md-1 detail-label">Status:</label>
-            <label class="col-sm-4 col-md-1 status-value"><i ng-class="{'pficon pficon-ok status-icon': (glbTaskDetailCntrl.taskDetail.status === 'finished')}"></i>{{glbTaskDetailCntrl.taskDetail.status === 'finished' ? "Completed": glbTaskDetailCntrl.taskDetail.status}}</label>
+            <label class="col-sm-4 col-md-2 status-value"><i ng-class="{'pficon pficon-ok status-icon': (glbTaskDetailCntrl.taskDetail.status === 'finished')}"></i>{{glbTaskDetailCntrl.taskDetail.status === 'finished' ? "Completed": glbTaskDetailCntrl.taskDetail.status}}</label>
             <label class="col-sm-4 col-md-2" ng-show="(glbTaskDetailCntrl.taskDetail.flow === 'ImportCluster') && (glbTaskDetailCntrl.taskDetail.status === 'finished') &&(!$root.selectedClusterOption)"><span class="spinner spinner-xs spinner-inline" ng-show="glbTaskDetailCntrl.showLoadingIcon"></span> <a href="" ng-click="glbTaskDetailCntrl.goToClusterDetail()">View cluster details</a></label>
         </div>
     </form>

diff --git a/src/modules/tasks/global-task-detail/global-task-detail.js b/src/modules/tasks/global-task-detail/global-task-detail.js
@@ -14,7 +14,7 @@
         });
 
     /*@ngInject*/
-    function globalTaskDetailController($rootScope, $scope, $interval, $state, $stateParams, taskStore, config, clusterStore) {
+    function globalTaskDetailController($rootScope, $scope, $interval, $state, $stateParams, taskStore, config, clusterStore, utils) {
 
         var vm = this,
             statusTimer,
@@ -28,6 +28,8 @@
         vm.taskDetail = [];
         vm.goToClusterDetail = goToClusterDetail;
 
+        //To refresh the selector selected option
+        utils.refershSelector();
         init();
 
         function init() {
@@ -117,4 +119,4 @@
         }
     }
 
-})();
+})();
diff --git a/src/modules/users/user-list/users.js b/src/modules/users/user-list/users.js
@@ -13,7 +13,7 @@
         });
 
     /*@ngInject*/
-    function userController($scope, $rootScope, $state, $uibModal, $interval, config, userStore, AuthManager, Notifications) {
+    function userController($scope, $rootScope, $state, $uibModal, $interval, config, userStore, AuthManager, Notifications, utils) {
 
         var vm = this,
             userList,
@@ -59,32 +59,31 @@
         vm.deleteUserModalId = "deleteUserModal";
         vm.deleteUserModalTemplate = "/modules/users/delete-user/delete-user.html";
         vm.deleteUserModalActionButtons = [{
-                label: "Cancel",
-                isCancel: true
-            }, {
-                label: "Delete",
-                class: "btn-danger custom-class",
-                actionFn: function() {
-                    userStore.deleteUser(vm.deleteUser.username)
-                        .then(function(data) {
-                            vm.showDeleteUserModal = false;
-                            userStore.getUserList()
-                                .then(function(data) {
-                                    if (data !== null) {
-                                        $rootScope.$broadcast("UpdatedUserList", data);
-                                    }
-                                    Notifications.message("success", "", vm.deleteUser.username + " deleted Successfully.");
-                                });
-
-                        }).catch(function(e) {
-                            vm.showDeleteUserModal = false;
-                            Notifications.message("danger", "", "Error deleting " + vm.deleteUser.username);
-                        });
-
-                }
+            label: "Cancel",
+            isCancel: true
+        }, {
+            label: "Delete",
+            class: "btn-danger custom-class",
+            actionFn: function() {
+                userStore.deleteUser(vm.deleteUser.username)
+                    .then(function(data) {
+                        vm.showDeleteUserModal = false;
+                        userStore.getUserList()
+                            .then(function(data) {
+                                if (data !== null) {
+                                    $rootScope.$broadcast("UpdatedUserList", data);
+                                }
+                                Notifications.message("success", "", vm.deleteUser.username + " deleted Successfully.");
+                            });
+
+                    }).catch(function(e) {
+                        vm.showDeleteUserModal = false;
+                        Notifications.message("danger", "", "Error deleting " + vm.deleteUser.username);
+                    });
 
             }
-        ];
+
+        }];
 
         function deleteUser(username) {
             vm.showDeleteUserModal = true;
@@ -95,9 +94,11 @@
         function closeDeleteUserModal(dismissCause) {
             vm.showDeleteUserModal = false;
         }
-
         /*END Delete User modal*/
 
+
+        //To refresh the selector selected option
+        utils.refershSelector();
         init();
 
         function init() {
-Original file line number
+Diff line change
@@ Expand Up / @@ -89,4 +89,4 @@ @@
             cursor: default;
             visibility: hidden;
         }
-    }
+    }