Add toast message for scenarios page

Change-Id: I27833535288ad6302d2fc85b543b196e28179a22
Signed-off-by: thuva4 <tharma.thuva@gmail.com>

3 files changed, 81 insertions, 39 deletions

diff --git a/testapi/opnfv_testapi/tests/UI/e2e/scenariosControllerSpec.js b/testapi/opnfv_testapi/tests/UI/e2e/scenariosControllerSpec.js
index e7c5fb0..55922ad 100644
--- a/testapi/opnfv_testapi/tests/UI/e2e/scenariosControllerSpec.js
+++ b/testapi/opnfv_testapi/tests/UI/e2e/scenariosControllerSpec.js
@@ -119,7 +119,7 @@ describe('testing the scenarios page for anonymous user', function () {
 
     it('Sort scenarios', function () {
         browser.get(baseURL+"#/scenarios");
-        var sort = element(by.xpath('//*[@id="ng-app"]/body/div/div[4]/div/table/thead/tr/th[2]/a[2]/span'))
+        var sort = element(by.xpath('//*[@id="ng-app"]/body/div/div[5]/div/table/thead/tr/th[2]/a[2]/span'))
         sort.click();
         var row = element.all(by.repeater('(index, scenario) in ctrl.data.scenarios')).first();
         var cells = row.all(by.tagName('td'));
@@ -284,8 +284,11 @@ describe('testing the scenarios page for user', function () {
         name.sendKeys('test');
         var buttonOK = element(by.buttonText('Ok'));
         buttonOK.click();
-        expect(element(by.cssContainingText(".alert","Scenario is successfully created."))
+        browser.ignoreSynchronization = true;
+        expect(element(by.cssContainingText(".success.show","Scenario is successfully created."))
         .isDisplayed()).toBe(true);
+        browser.sleep(500);
+        browser.ignoreSynchronization = false;
     });
 
     it('create scenarrio by user with installers ', function () {
@@ -304,8 +307,11 @@ describe('testing the scenarios page for user', function () {
         buttonOK.click();
         var buttonOK = element(by.buttonText('Ok'));
         buttonOK.click();
-        expect(element(by.cssContainingText(".alert","Scenario is successfully created."))
+        browser.ignoreSynchronization = true;
+        expect(element(by.cssContainingText(".success.show","Scenario is successfully created."))
         .isDisplayed()).toBe(true);
+        browser.sleep(500);
+        browser.ignoreSynchronization = false;
     });
 
     it('create scenarrio by user with installers with versions ', function () {
@@ -333,8 +339,11 @@ describe('testing the scenarios page for user', function () {
         buttonOK.click();
         var buttonOK = element(by.buttonText('Ok'));
         buttonOK.click();
-        expect(element(by.cssContainingText(".alert","Scenario is successfully created."))
+        browser.ignoreSynchronization = true;
+        expect(element(by.cssContainingText(".success.show","Scenario is successfully created."))
         .isDisplayed()).toBe(true);
+        browser.sleep(500);
+        browser.ignoreSynchronization = false;
     });
 
     it('create scenarrio by user with installers with versions with project', function () {
@@ -369,8 +378,11 @@ describe('testing the scenarios page for user', function () {
         buttonOK.click();
         var buttonOK = element(by.buttonText('Ok'));
         buttonOK.click();
-        expect(element(by.cssContainingText(".alert","Scenario is successfully created."))
+        browser.ignoreSynchronization = true;
+        expect(element(by.cssContainingText(".success.show","Scenario is successfully created."))
         .isDisplayed()).toBe(true);
+        browser.sleep(500);
+        browser.ignoreSynchronization = false;
     });
 
     it('create scenarrio by user with installers with versions with project with custom', function () {
@@ -412,8 +424,11 @@ describe('testing the scenarios page for user', function () {
         buttonOK.click();
         var buttonOK = element(by.buttonText('Ok'));
         buttonOK.click();
-        expect(element(by.cssContainingText(".alert","Scenario is successfully created."))
+        browser.ignoreSynchronization = true;
+        expect(element(by.cssContainingText(".success.show","Scenario is successfully created."))
         .isDisplayed()).toBe(true);
+        browser.sleep(500);
+        browser.ignoreSynchronization = false;
     });
 
     it('view scenarrio by user ', function () {
@@ -443,8 +458,11 @@ describe('testing the scenarios page for user', function () {
         .isDisplayed()).toBe(true);
         var buttonOK = element(by.buttonText('Ok'));
         buttonOK.click();
-        expect(element(by.cssContainingText(".alert","Scenario is successfully deleted."))
+        browser.ignoreSynchronization = true;
+        expect(element(by.cssContainingText(".success.show","Scenario is successfully deleted."))
         .isDisplayed()).toBe(true);
+        browser.sleep(500);
+        browser.ignoreSynchronization = false;
     });
 
     it('Batch Delete the scenarios ', function () {
@@ -455,8 +473,11 @@ describe('testing the scenarios page for user', function () {
         buttonDelete.click();
         var buttonOK = element(by.buttonText('Ok'));
 		buttonOK.click();
-        expect(element(by.cssContainingText(".alert","Scenario is successfully deleted."))
+        browser.ignoreSynchronization = true;
+        expect(element(by.cssContainingText(".success.show","Scenario is successfully deleted."))
         .isDisplayed()).toBe(true);
+        browser.sleep(500);
+        browser.ignoreSynchronization = false;
     });
 
     it('Edit the scenarios ', function () {
@@ -469,8 +490,11 @@ describe('testing the scenarios page for user', function () {
         name.sendKeys('test2');
         var buttonOK = element(by.buttonText('Ok'));
         buttonOK.click()
-        expect(element(by.cssContainingText(".alert","Scenario is successfully Updated."))
+        browser.ignoreSynchronization = true;
+        expect(element(by.cssContainingText(".success.show","Scenario is successfully Updated."))
         .isDisplayed()).toBe(true);
+        browser.sleep(500);
+        browser.ignoreSynchronization = false;
     });
 
 });
\ No newline at end of file
diff --git a/testapi/opnfv_testapi/ui/components/scenarios/scenarios.html b/testapi/opnfv_testapi/ui/components/scenarios/scenarios.html
index bde946c..8d23449 100644
--- a/testapi/opnfv_testapi/ui/components/scenarios/scenarios.html
+++ b/testapi/opnfv_testapi/ui/components/scenarios/scenarios.html
@@ -10,16 +10,12 @@
           <i class="fa fa-plus"></i>Create</button>
     </div>
 </div>
-<div class='clo-md-12'>
-    <div ng-show="ctrl.showError" class="alert alert-danger" role="alert">
-        <span class="pull-right">&nbsp;{{ctrl.error}}</span>
-        <span class="glyphicon glyphicon-exclamation-sign pull-right" aria-hidden="true" >Error:</span>
-    </div>
-    <div ng-show="ctrl.showCreateSuccess" class="alert alert-success" role="alert">
-        <span class="pull-right">&nbsp;{{ctrl.success}}</span>
-        <span class="glyphicon glyphicon-ok pull-right" aria-hidden="true"></span>
-    </div>
-</div>
+<div ng-class="{'show': ctrl.showError}" id="toast" class="error">
+    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true" ></span>
+    {{ctrl.error}}</div>
+<div ng-class="{'show': ctrl.showSuccess}" id="toast" class="success">
+    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
+    {{ctrl.success}}</div>
 <div class='clo-md-12' style="padding-right:0px">
     <div class="table-responsive">
         <table class="table table-bordered table-hover"  ng-data="ctrl.data.scenarios">
diff --git a/testapi/opnfv_testapi/ui/components/scenarios/scenariosController.js b/testapi/opnfv_testapi/ui/components/scenarios/scenariosController.js
index 240287c..744ba36 100644
--- a/testapi/opnfv_testapi/ui/components/scenarios/scenariosController.js
+++ b/testapi/opnfv_testapi/ui/components/scenarios/scenariosController.js
@@ -21,7 +21,7 @@
 
         ScenariosController.$inject = [
         '$scope', '$http', '$filter', '$state', '$window', '$uibModal', 'testapiApiUrl',
-        'raiseAlert', 'confirmModal', 'sortService'
+        'raiseAlert', 'confirmModal', 'sortService', '$timeout'
     ];
 
     /**
@@ -30,7 +30,7 @@
      * through projects declared in TestAPI.
      */
     function ScenariosController($scope, $http, $filter, $state, $window, $uibModal, testapiApiUrl,
-        raiseAlert, confirmModal, sortService) {
+        raiseAlert, confirmModal, sortService, $timeout) {
         var ctrl = this;
         ctrl.url = testapiApiUrl + '/scenarios';
 
@@ -47,6 +47,18 @@
         ctrl.sortBy = sortBy
         ctrl.checkBox = [];
         ctrl.sortName = false
+        ctrl.toastError = toastError
+        ctrl.toastSuccess = toastSuccess
+
+        function toastError() {
+            ctrl.showError = true
+            $timeout(function(){ ctrl.showError = false;}, 3000);
+        }
+
+        function toastSuccess() {
+            ctrl.showSuccess = true
+            $timeout(function(){ ctrl.showSuccess = false;}, 3000);
+        }
 
         function openUpdateModal(name){
             $uibModal.open({
@@ -78,12 +90,12 @@
             var scenarioURL = ctrl.url+"/"+name;
             ctrl.scenarioRequest =
                 $http.delete(scenarioURL).success(function (data){
-                    ctrl.showCreateSuccess = true;
                     ctrl.success = "Scenario is successfully deleted.";
                     ctrl.listScenarios();
+                    ctrl.toastSuccess();
                 }).catch(function (data) {
-                    ctrl.showError = true;
                     ctrl.error = data.statusText;
+                    ctrl.toastError()
                 });
         }
 
@@ -117,15 +129,21 @@
             var body = {
                 "name": newName
             }
-            ctrl.scenarioRequest =
-                $http.put(scenarioURL, body).success(function (data){
-                    ctrl.showCreateSuccess = true;
+            if(newName){
+            ctrl.scenarioRequest = $http.put(scenarioURL, body)
+            ctrl.scenarioRequest.success(function (data){
                     ctrl.success = "Scenario is successfully Updated."
-                    ctrl.listScenarios()
+                    ctrl.listScenarios();
+                    ctrl.toastSuccess();
                 }).catch(function (data) {
-                    ctrl.showError = true;
                     ctrl.error = data.statusText;
+                    ctrl.toastError();
                 });
+            return  ctrl.scenarioRequest
+            }else{
+                ctrl.error = "Name is missing";
+                ctrl.toastError();
+            }
         }
 
         function viewScenario(name){
@@ -133,14 +151,17 @@
         }
 
         function createScenario(scenario) {
-            ctrl.scenarioRequest =
-                $http.post(ctrl.url, scenario).success(function (data){
-                    ctrl.showCreateSuccess = true;
-                    ctrl.success = "Scenario is successfully created."
+            ctrl.scenarioRequest = $http.post(ctrl.url, scenario)
+
+                ctrl.scenarioRequest.success(function (data){
+                    ctrl.success = "Scenario is successfully created.";
+                    ctrl.toastSuccess();
                 }).catch(function (data) {
-                    ctrl.showError = true;
                     ctrl.error = data.statusText;
+                    ctrl.toastError();
                 });
+
+            return ctrl.scenarioRequest;
         }
 
        function listScenarios() {
@@ -151,8 +172,8 @@
                    ctrl.sortBy()
                }).catch(function (data)  {
                    ctrl.data = null;
-                   ctrl.showError = true;
                    ctrl.error = data.statusText;
+                   ctrl.toastError();
                });
        }
 
@@ -201,8 +222,9 @@
          * inputs.
          */
         function confirm() {
-            ctrl.data.successHandler(ctrl.scenario);
-            $uibModalInstance.dismiss('cancel');
+            ctrl.data.successHandler(ctrl.scenario).success(function(){
+                $uibModalInstance.dismiss('cancel');
+            });
 
         }
 
@@ -472,9 +494,9 @@
          * inputs.
          */
         function confirm() {
-            ctrl.data.successHandler(ctrl.name,ctrl.data.name);
-            $uibModalInstance.dismiss('cancel');
-
+            ctrl.data.successHandler(ctrl.name,ctrl.data.name).success( function() {
+                $uibModalInstance.dismiss('cancel');
+            })
         }
 
         /**