AMBARI-14880. Add popup that will show desired messages upon login (alexantonenko)

ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/loginActivities/LoginMessageMainCtrl.js

@@ -18,17 +18,21 @@
 'use strict';
 
 angular.module('ambariAdminConsole')
-  .controller('LoginMessageMainCtrl',['$scope', 'Alert', '$timeout', '$http', '$translate', function($scope, Alert, $timeout, $http, $translate) {
-    var $t = $translate.instant;
+  .controller('LoginMessageMainCtrl',['$scope', 'Alert', '$timeout', '$location', '$http', '$translate', 'UnsavedDialog', function($scope, Alert, $timeout, $location, $http, $translate, UnsavedDialog) {
+    var $t = $translate.instant,
+      targetUrl = '/loginActivities';
+
     $scope.status = false;
     $scope.motdExists = false;
     $scope.text = "";
+    $scope.buttonText = "Ok";
     $scope.submitDisabled = true;
 
     $http.get('/api/v1/admin-settings/motd').then(function (res) {
-      var respons = JSON.parse(res.data.AdminSettings.content);
-      $scope.text = respons.text ? respons.text : "";
-      $scope.status = respons.status && respons.status == "true" ? true : false;
+      var response = JSON.parse(res.data.AdminSettings.content);
+      $scope.text = response.text ? response.text : "";
+      $scope.buttonText = response.button ? response.button : "";
+      $scope.status = response.status && response.status == "true" ? true : false;
       $scope.motdExists = true;
     });
 
@@ -40,28 +44,57 @@ angular.module('ambariAdminConsole')
       $scope.submitDisabled = false;
     };
 
-    $scope.saveLoginMsg = function(form) {
+    $scope.$watch(function(scope) {
+      return scope.submitDisabled;
+    }, function(submitDisabled) {
+      $scope.form.$dirty = !submitDisabled
+    });
+
+    $scope.saveLoginMsg = function(targetUrl) {
       var method = $scope.motdExists ? 'PUT' : 'POST';
       var data = {
         'AdminSettings' : {
-          'content' : '{"text":"' + $scope.text + '", "status":"' + $scope.status + '"}',
+          'content' : '{"text":"' + $scope.text + '", "button":"' + $scope.buttonText + '", "status":"' + $scope.status + '"}',
           'name' : 'motd',
           'setting_type' : 'ambari-server'
         }
       };
-      form.submitted = true;
-      if (form.$valid){
+      $scope.form.submitted = true;
+      if ($scope.form.$valid){
         $scope.submitDisabled = true;
-        $http({
+        return $http({
           method: method,
           url: '/api/v1/admin-settings/' + ($scope.motdExists ? 'motd' : ''),
           data: data
         }).then(function successCallback() {
           $scope.motdExists = true;
+          targetUrl ? $location.path(targetUrl) : "";
         }, function errorCallback(data) {
           $scope.submitDisabled = false;
           Alert.error($t('common.loginActivities.saveError'), data.data.message);
         });
       }
     };
+
+    $scope.$on('$locationChangeStart', function(event, __targetUrl) {
+      if( $scope.form.$dirty ){
+        UnsavedDialog().then(function(action) {
+          targetUrl = __targetUrl.split('#').pop();
+          switch(action){
+            case 'save':
+              $scope.saveLoginMsg(targetUrl);
+              break;
+            case 'discard':
+              $scope.form.$setPristine();
+              $location.path(targetUrl);
+              break;
+            case 'cancel':
+              targetUrl = '/loginActivities';
+              break;
+          }
+        });
+        event.preventDefault();
+      }
+    });
+
   }]);

ambari-admin/src/main/resources/ui/admin-web/app/scripts/i18n.config.js

@@ -85,9 +85,13 @@ angular.module('ambariAdminConsole')
         'loginActivities':'Login Activities',
         'loginMessage': 'Login Message',
         'loginMessage.placeholder': 'Please enter login message',
+        'buttonText.placeholder': 'Please enter text for the "ok" button',
         'homeDirectory': 'Home Directory',
         'onlySimpleChars': 'Must contain only simple characters.',
-        'saveError': 'Save error'
+        'saveError': 'Save error',
+        'message': 'Message',
+        'buttonText': 'Button text',
+        'switch': 'On/Off'
       },
 
       'controls': {

ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css

@@ -682,11 +682,13 @@ table.no-border tr td{
   min-height: 63px;
 }
 
-.login-message-pane .active, .inactive {font-size:30px;cursor:pointer;float: left;margin-left: 17px;}
+.login-message-pane .active, .inactive {font-size:30px;cursor:pointer;float: left;}
 .login-message-pane i.active {color: #5cb85c;margin-top: 3px;}
 .login-message-pane i.inactive {color: #d9534f;margin-top: 2px;}
-.login-message-pane .well {height: 74px;}
-.login-message-pane input {margin-left: 3px;}
+.login-message-pane .on-off-switch-wrap {height:32px;}
+
+/*.login-message-pane .well {height: 74px;}
+.login-message-pane input {margin-left: 3px;}*/
 
 .views-permissions-panel .panel-body{
   padding-bottom: 0;

ambari-admin/src/main/resources/ui/admin-web/app/views/loginActivities/loginMessage.html

@@ -18,44 +18,68 @@
 
 <br/>
 <div class="login-message-pane" ng-controller="LoginMessageMainCtrl">
-
   <form class="form-horizontal" novalidate name="form" autocomplete="off">
     <div class="well">
-      <div class="form-group" ng-class="{'has-error' : (form.login_text.$error.pattern) && form.submitted}">
-        <i class="fa fa-toggle-on active"
-           ng-if="status == true"
-           ng-click="changeStatus();">
-        </i>
-        <i class="fa fa-toggle-on fa-rotate-180 inactive"
-           ng-if="status == false"
-           ng-click="changeStatus();">
-        </i>
-        <div class="col-sm-11">
-          <input type="text"
-                 ng-disabled="!status"
+      <fieldset>
+        <div class="form-group" ng-class="{'has-error' : (form.login_text.$error.pattern) && form.submitted}">
+          <label class="col-sm-2 control-label">{{'common.loginActivities.switch' | translate}}</label>
+          <div class="on-off-switch-wrap col-sm-10">
+            <i class="fa fa-toggle-on active"
+               ng-if="status == true"
+               ng-click="changeStatus();">
+            </i>
+            <i class="fa fa-toggle-on fa-rotate-180 inactive"
+               ng-if="status == false"
+               ng-click="changeStatus();">
+            </i>
+            <input type="checkbox" name="status" class="hidden" ng-model="status">
+          </div>
+        </div>
+        <div class="form-group" ng-class="{'has-error' : (form.login_text.$error.pattern) && form.submitted}">
+          <label class="col-sm-2 control-label">{{'common.loginActivities.message' | translate}}</label>
+          <div class="col-sm-10">
+            <input type="text"
                  class="form-control"
                  name="login_text"
                  placeholder="{{'common.loginActivities.loginMessage.placeholder' | translate}}"
                  ng-model="text"
                  ng-change="inputChangeEvent()"
                  ng-pattern="/^([a-zA-Z0-9._\s]+)$/"
+                 ng-disabled="!status"
                  autocomplete="off">
 
-          <div class="alert alert-danger top-margin" ng-show="form.login_text.$error.pattern && form.submitted">
-            {{'common.loginActivities.onlySimpleChars' | translate}}
+            <div class="alert alert-danger top-margin" ng-show="form.login_text.$error.pattern && form.submitted">
+             {{'common.loginActivities.onlySimpleChars' | translate}}
+            </div>
           </div>
         </div>
+        <div class="form-group" ng-class="{'has-error' : (form.login_text.$error.pattern) && form.submitted}">
+          <label class="col-sm-2 control-label">{{'common.loginActivities.buttonText' | translate}}</label>
+          <div class="col-sm-5">
+            <input type="text"
+                   class="form-control"
+                   name="button_text"
+                   placeholder="{{'common.loginActivities.buttonText.placeholder' | translate}}"
+                   ng-model="buttonText"
+                   ng-change="inputChangeEvent()"
+                   ng-disabled="!status"
+                   ng-pattern="/^([a-zA-Z0-9._\s]+)$/"
+                   autocomplete="off">
+
+            <div class="alert alert-danger top-margin" ng-show="form.button_text.$error.pattern && form.submitted">
+              {{'common.loginActivities.onlySimpleChars' | translate}}
+            </div>
+          </div>
+        </div>
+        <div class="col-sm-offset-2 col-sm-10">
+          <button
+            class="btn btn-primary groupcreate-btn pull-right left-margin"
+            ng-disabled="submitDisabled"
+            ng-click="saveLoginMsg()">
+            {{'common.controls.save' | translate}}
+          </button>
       </div>
-    </div>
-    <div class="form-group">
-      <div class="col-sm-offset-2 col-sm-10">
-        <button
-          class="btn btn-primary groupcreate-btn pull-right left-margin"
-          ng-disabled="submitDisabled"
-          ng-click="saveLoginMsg(form)">
-          {{'common.controls.save' | translate}}
-        </button>
-      </div>
+      </fieldset>
     </div>
   </form>
 </div>

ambari-web/app/assets/data/clusters/info.json

@@ -1,11 +0,0 @@
-{
-  "items" : [
-    {
-      "Clusters" : {
-        "cluster_name" : "tdk",
-        "provisioning_state" : "INSTALLED",
-        "version" : "HDP-2.0.1"
-      }
-    }
-  ]
-}

ambari-web/app/assets/data/settings/motd.json

@@ -0,0 +1,10 @@
+{
+  "href" : "/api/v1/admin-settings/motd",
+  "AdminSettings" : {
+    "content" : "{\"text\":\"You are using test mode\", \"button\":\"\", \"status\":\"true\"}",
+    "name" : "motd",
+    "setting_type" : "ambari-server",
+    "update_timestamp" : 1454428666251,
+    "updated_by" : "admin"
+  }
+}

ambari-web/app/messages.js

@@ -424,6 +424,7 @@ Em.I18n.translations = {
   'popup.jdkValidation.body': 'The {0} Stack requires JDK {1} but Ambari is configured for JDK {2}. This could result in error or problems with running your cluster.',
 
   'login.header':'Sign in',
+  'login.message.title':'Login Message',
   'login.username':'Username',
   'login.loginButton':'Sign in',
   'login.error.bad.credentials':'Unable to sign in. Invalid username/password combination.',

ambari-web/app/router.js

@@ -317,6 +317,13 @@ App.Router = Em.Router.extend({
       loginData: data
     };
     App.router.get('clusterController').loadAuthorizations().complete(function() {
+      App.ajax.send({
+        name: 'router.login.message',
+        sender: self,
+        success: 'showLoginMessage'
+
+    });
+
       // no need to load cluster data if it's already loaded
       if (self.get('clusterData')) {
         self.loginGetClustersSuccessCallback(self.get('clusterData'), {}, requestData);
@@ -351,6 +358,40 @@ App.Router = Em.Router.extend({
 
   },
 
+  /**
+   * success callback of router.login.message
+   * @param {object} data
+   */
+  showLoginMessage: function (data){
+    var response = JSON.parse(data.AdminSettings.content),
+      text = response.text ? response.text : "",
+      buttonText = response.button ? response.button : Em.I18n.t('ok'),
+      status = response.status && response.status == "true" ? true : false;
+
+    if(text && status){
+      return App.ModalPopup.show({
+        classNames: ['sixty-percent-width-modal'],
+        header: Em.I18n.t('login.message.title'),
+        bodyClass: Ember.View.extend({
+          template: Ember.Handlebars.compile(text)
+        }),
+        primary: buttonText,
+        secondary: null,
+
+        onPrimary: function () {
+          this.hide();
+        },
+        onClose: function () {
+          this.hide();
+        },
+        didInsertElement: function () {
+          this.fitHeight();
+        }
+      });
+    }
+  },
+
+
   /**
    * success callback of login request
    * @param {object} clustersData

ambari-web/app/utils/ajax/ajax.js

@@ -2088,6 +2088,10 @@ var urls = {
     'real': '/clusters?fields=Clusters/provisioning_state',
     'mock': '/data/clusters/info.json'
   },
+  'router.login.message': {
+    'real': '/admin-settings/motd',
+    'mock': '/data/settings/motd.json'
+  },
   'router.logoff': {
     'real': '/logout',
     'mock': '',