AMBARI-5053. Mirroring: Manage Cluster UI tweaks. (akovalenko)

ambari-web/app/controllers/main/mirroring/manage_clusters_controller.js

@@ -26,14 +26,7 @@ App.MainMirroringManageClustersController = Em.ArrayController.extend({
 
   clusters: [],
 
-  clustersToDelete: [],
-
-  clustersToCreate: [],
-
-  queriesCount: 0,
-
-  // array of error messages
-  queryErrors: [],
+  newCluster: null,
 
   isLoaded: function () {
     return App.router.get('mainMirroringController.isLoaded');
@@ -61,8 +54,6 @@ App.MainMirroringManageClustersController = Em.ArrayController.extend({
         }
       }, this);
       this.set('clusters', clusters);
-      this.get('clustersToDelete').clear();
-      this.get('clustersToCreate').clear();
     }
   }.observes('isLoaded'),
 
@@ -75,93 +66,91 @@ App.MainMirroringManageClustersController = Em.ArrayController.extend({
 
   addCluster: function () {
     var self = this;
-    App.showPromptPopup(Em.I18n.t('mirroring.manageClusters.specifyName'),
-        function (clusterName) {
-          var newCluster = Ember.Object.create({
-            name: clusterName,
-            execute: '',
-            workflow: '',
-            write: '',
-            readonly: '',
-            staging: '',
-            working: '',
-            temp: ''
-          });
-          self.get('clusters').pushObject(newCluster);
-          self.get('clustersToCreate').pushObject(newCluster);
+    var newClusterPopup = App.ModalPopup.show({
+      header: Em.I18n.t('mirroring.manageClusters.create.cluster.popup'),
+      bodyClass: Em.View.extend({
+        controller: self,
+        templateName: require('templates/main/mirroring/create_new_cluster')
+      }),
+      classNames: ['create-target-cluster-popup'],
+      primary: Em.I18n.t('common.save'),
+      secondary: Em.I18n.t('common.cancel'),
+      onPrimary: function () {
+        if (this.get('enablePrimary')) {
+          this.set('enablePrimary', false);
+          self.createNewCluster();
         }
-    );
+      },
+      willInsertElement: function () {
+        var clusterName = App.get('clusterName');
+        var newCluster = Ember.Object.create({
+          name: '',
+          execute: '',
+          workflow: '',
+          write: '',
+          readonly: '',
+          staging: '/apps/falcon/' + clusterName + '/staging',
+          working: '/apps/falcon/' + clusterName + '/working',
+          temp: '/tmp'
+        });
+        self.set('newCluster', newCluster);
+      },
+      didInsertElement: function () {
+        this._super();
+        this.fitHeight();
+      }
+    });
+    this.set('newClusterPopup', newClusterPopup);
   },
 
   removeCluster: function () {
     var self = this;
+    var selectedClusterName = self.get('selectedCluster.name');
     App.showConfirmationPopup(function () {
-      if (self.get('clustersToCreate').mapProperty('name').contains(self.get('selectedCluster.name'))) {
-        self.set('clustersToCreate', self.get('clustersToCreate').without(self.get('selectedCluster')));
-      } else {
-        self.get('clustersToDelete').push(self.get('selectedCluster'));
-      }
-      self.set('clusters', self.get('clusters').without(self.get('selectedCluster')));
+      App.ajax.send({
+        name: 'mirroring.delete_entity',
+        sender: self,
+        data: {
+          name: selectedClusterName,
+          type: 'cluster',
+          falconServer: App.get('falconServerURL')
+        },
+        success: 'onRemoveClusterSuccess',
+        error: 'onRemoveClusterError'
+      });
+    }, Em.I18n.t('mirroring.manageClusters.remove.confirmation').format(selectedClusterName));
+  },
+
+  onRemoveClusterSuccess: function () {
+    this.set('clusters', this.get('clusters').without(this.get('selectedCluster')));
+  },
+
+  onRemoveClusterError: function () {
+    App.showAlertPopup(Em.I18n.t('common.error'), Em.I18n.t('mirroring.manageClusters.error') + ': ' + arguments[2]);
+  },
+
+  createNewCluster: function () {
+    App.ajax.send({
+      name: 'mirroring.submit_entity',
+      sender: this,
+      data: {
+        type: 'cluster',
+        entity: this.formatClusterXML(this.get('newCluster')),
+        falconServer: App.get('falconServerURL')
+      },
+      success: 'onCreateClusterSuccess',
+      error: 'onCreateClusterError'
     });
   },
 
-  save: function () {
-    // define clusters need to be deleted, modified or created
-    var clusters = this.get('clusters');
-    var clustersToCreate = this.get('clustersToCreate');
-    var clustersToDelete = this.get('clustersToDelete');
-    var queriesCount = clustersToCreate.length + clustersToDelete.length;
-    this.set('queriesCount', queriesCount);
-
-    // send request to delete, modify or create cluster
-    if (queriesCount) {
-      this.get('queryErrors').clear();
-      clustersToDelete.forEach(function (cluster) {
-        App.ajax.send({
-          name: 'mirroring.delete_entity',
-          sender: this,
-          data: {
-            name: cluster.get('name'),
-            type: 'cluster',
-            falconServer: App.get('falconServerURL')
-          },
-          success: 'onQueryResponse',
-          error: 'onQueryResponse'
-        });
-      }, this);
-      clustersToCreate.forEach(function (cluster) {
-        App.ajax.send({
-          name: 'mirroring.submit_entity',
-          sender: this,
-          data: {
-            type: 'cluster',
-            entity: this.formatClusterXML(cluster),
-            falconServer: App.get('falconServerURL')
-          },
-          success: 'onQueryResponse',
-          error: 'onQueryResponse'
-        });
-      }, this);
-    } else {
-      this.get('popup').hide();
-    }
+  onCreateClusterSuccess: function () {
+    this.get('clusters').pushObject(this.get('newCluster'));
+    this.get('newClusterPopup').hide();
   },
 
-  // close popup after getting response from all queries or show popup with errors
-  onQueryResponse: function () {
-    var queryErrors = this.get('queryErrors');
-    if (arguments.length === 4) {
-      queryErrors.push(arguments[2]);
-    }
-    var queriesCount = this.get('queriesCount');
-    this.set('queriesCount', --queriesCount);
-    if (queriesCount < 1) {
-      if (queryErrors.length) {
-        App.showAlertPopup(Em.I18n.t('common.error'), Em.I18n.t('mirroring.manageClusters.error') + ': ' + queryErrors.join(', '));
-      } else {
-        this.get('popup').hide();
-      }
-    }
+  onCreateClusterError: function () {
+    this.set('newClusterPopup.enablePrimary', true);
+    App.showAlertPopup(Em.I18n.t('common.error'), Em.I18n.t('mirroring.manageClusters.error') + ': ' + arguments[2]);
   },
 
   /**

ambari-web/app/controllers/main/mirroring_controller.js

@@ -320,17 +320,14 @@ App.MainMirroringController = Em.ArrayController.extend({
 
   manageClusters: function () {
     var self = this;
-    var manageClustersController = App.router.get('mainMirroringManageClustersController');
-    var popup = App.ModalPopup.show({
+    App.ModalPopup.show({
       header: Em.I18n.t('mirroring.dataset.manageClusters'),
+      classNames: ['sixty-percent-width-modal'],
       bodyClass: App.MainMirroringManageClusterstView.extend({
-        controller: manageClustersController
+        controller: App.router.get('mainMirroringManageClustersController')
       }),
-      primary: Em.I18n.t('common.save'),
-      secondary: null,
-      onPrimary: function () {
-        manageClustersController.save();
-      },
+      primary: null,
+      secondary: Em.I18n.t('common.close'),
       hide: function () {
         self.loadData();
         App.router.send('gotoShowJobs');
@@ -341,6 +338,5 @@ App.MainMirroringController = Em.ArrayController.extend({
         this.fitHeight();
       }
     });
-    manageClustersController.set('popup', popup);
   }
 });

ambari-web/app/messages.js

@@ -1860,6 +1860,7 @@ Em.I18n.translations = {
 
   'mirroring.manageClusters.ambariServer':'Ambari Server',
   'mirroring.manageClusters.interfaces':'Interfaces',
+  'mirroring.manageClusters.locations':'Locations',
   'mirroring.manageClusters.specifyName':'Specify name for new target cluster:',
   'mirroring.manageClusters.execute':'Execute',
   'mirroring.manageClusters.readonly':'Readonly',
@@ -1869,6 +1870,8 @@ Em.I18n.translations = {
   'mirroring.manageClusters.working':'Working',
   'mirroring.manageClusters.temp':'Temp',
   'mirroring.manageClusters.error' :'Error in saving changes',
+  'mirroring.manageClusters.create.cluster.popup' :'Create Target Cluster',
+  'mirroring.manageClusters.remove.confirmation' :'Are you sure you want to delete the target cluster {0}?',
 
   'mirroring.table.noDatasets':'No datasets to display',
   'mirroring.table.datasetStatus':'Status',

ambari-web/app/styles/application.less

@@ -1123,7 +1123,7 @@ a:focus {
   .modal {
     width: 60%;
     margin: 0 0 0 -30%;
-    max-height: 544px;
+    max-height: 563px;
     min-width: 590px;
     top: 5%;
   }
@@ -4243,7 +4243,7 @@ ul.filter {
   }
 }
 
-#mirroring-manage-clusters {
+.mirroring-manage-clusters {
   .cluster-select {
     width: 100%;
     height: 250px;
@@ -4258,11 +4258,29 @@ ul.filter {
     margin-left: 15px;
     margin-bottom: 10px;
   }
-  .accordion-inner {
-    padding: 9px 0;
+  .category-title {
+    margin-bottom: 15px
+  }
+  .target-cluster-name {
+    margin-left: 40px
+  }
+  .target-cluster-form {
+    padding-left: 15px
+  }
+}
+
+.create-target-cluster-popup {
+  .modal {
+    width: 650px;
   }
 }
 
+.form-category {
+  border: 1px solid #eeeeee;
+  border-radius: 4px;
+  padding: 10px;
+}
+
 .dataset-delete {
   width: 15%;
 }

ambari-web/app/templates/main/mirroring/create_new_cluster.hbs

@@ -0,0 +1,59 @@
+{{!
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+}}
+<div class="mirroring-manage-clusters">
+  <form class="form-horizontal">
+    <div class="control-group target-cluster-name">
+      <label class="control-label-manage-clusters">{{t common.name}}</label>
+      {{view Ember.TextField class="span5" valueBinding="controller.newCluster.name"}}
+    </div>
+    <div class="control-group form-category">
+      <div class="category-title">{{t mirroring.manageClusters.interfaces}}</div>
+      <div class="control-group">
+        <label class="control-label-manage-clusters">{{t mirroring.manageClusters.execute}}</label>
+        {{view Ember.TextField class="span5" valueBinding="controller.newCluster.execute" placeholder="resourcemanager-host:8050"}}
+      </div>
+      <div class="control-group">
+        <label class="control-label-manage-clusters">{{t mirroring.manageClusters.readonly}}</label>
+        {{view Ember.TextField class="span5" valueBinding="controller.newCluster.readonly" placeholder="hftp://namenode-host:50070"}}
+      </div>
+      <div class="control-group">
+        <label class="control-label-manage-clusters">{{t mirroring.manageClusters.workflow}}</label>
+        {{view Ember.TextField class="span5" valueBinding="controller.newCluster.workflow" placeholder="http://oozie-host:11000/oozie"}}
+      </div>
+      <div class="control-group">
+        <label class="control-label-manage-clusters">{{t mirroring.manageClusters.write}}</label>
+        {{view Ember.TextField class="span5" valueBinding="controller.newCluster.write" placeholder="hdfs://namenode-host:8020"}}
+      </div>
+    </div>
+    <div class="control-group form-category">
+      <div class="category-title">{{t mirroring.manageClusters.locations}}</div>
+      <div class="control-group">
+        <label class="control-label-manage-clusters">{{t mirroring.manageClusters.staging}}</label>
+        {{view Ember.TextField class="span5" valueBinding="controller.newCluster.staging"}}
+      </div>
+      <div class="control-group">
+        <label class="control-label-manage-clusters">{{t mirroring.manageClusters.working}}</label>
+        {{view Ember.TextField class="span5" valueBinding="controller.newCluster.working"}}
+      </div>
+      <div class="control-group">
+        <label class="control-label-manage-clusters">{{t mirroring.manageClusters.temp}}</label>
+        {{view Ember.TextField class="span5" valueBinding="controller.newCluster.temp"}}
+      </div>
+    </div>
+  </form>
+</div>

ambari-web/app/templates/main/mirroring/manage_clusters.hbs

@@ -15,59 +15,49 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-<div id="mirroring-manage-clusters">
+<div class="mirroring-manage-clusters">
   <div class="row-fluid">
-    <div class="span5">
+    <div class="span4">
       {{view view.clusterSelect}}
       <div class="btn-toolbar pull-right">
         <button class="btn" {{action addCluster target="controller"}}><i class="icon-plus"></i></button>
         <button class="btn" {{action removeCluster target="controller"}} {{bindAttr disabled="view.removeDisabled"}}><i class="icon-minus"></i></button>
       </div>
     </div>
-    <div class="span7" style="padding-left: 15px">
+    <div class="span8 target-cluster-form">
       <form class="form-horizontal">
-        <div class="control-group">
-          <div style="margin-bottom: 15px">{{t mirroring.manageClusters.interfaces}}</div>
+        <div class="control-group form-category">
+          <div class="category-title">{{t mirroring.manageClusters.interfaces}}</div>
           <div class="control-group">
             <label class="control-label-manage-clusters">{{t mirroring.manageClusters.execute}}</label>
-            {{view Ember.TextField class="span8" valueBinding="controller.selectedCluster.execute" disabledBinding="controller.isEditDisabled"}}
+            {{view Ember.TextField class="span9" valueBinding="controller.selectedCluster.execute" disabled="disabled"}}
           </div>
           <div class="control-group">
             <label class="control-label-manage-clusters">{{t mirroring.manageClusters.readonly}}</label>
-            {{view Ember.TextField class="span8" valueBinding="controller.selectedCluster.readonly" disabledBinding="controller.isEditDisabled"}}
+            {{view Ember.TextField class="span9" valueBinding="controller.selectedCluster.readonly" disabled="disabled"}}
           </div>
           <div class="control-group">
             <label class="control-label-manage-clusters">{{t mirroring.manageClusters.workflow}}</label>
-            {{view Ember.TextField class="span8" valueBinding="controller.selectedCluster.workflow" disabledBinding="controller.isEditDisabled"}}
+            {{view Ember.TextField class="span9" valueBinding="controller.selectedCluster.workflow" disabled="disabled"}}
           </div>
           <div class="control-group">
             <label class="control-label-manage-clusters">{{t mirroring.manageClusters.write}}</label>
-            {{view Ember.TextField class="span8" valueBinding="controller.selectedCluster.write" disabledBinding="controller.isEditDisabled"}}
+            {{view Ember.TextField class="span9" valueBinding="controller.selectedCluster.write" disabled="disabled"}}
           </div>
         </div>
-        <div class="accordion control-group" id="advanced-fields">
-          <div class="accordion-group">
-            <div class="accordion-heading">
-              <a class="accordion-toggle" data-toggle="collapse" data-parent="#advanced-fields" href="#collapse-fields">
-                <i class="icon-caret-down"></i> {{t common.advanced}}
-              </a>
-            </div>
-            <div id="collapse-fields" class="accordion-body collapse in">
-              <div class="accordion-inner">
-                <div class="control-group">
-                  <label class="control-label-manage-clusters">{{t mirroring.manageClusters.staging}}</label>
-                  {{view Ember.TextField class="span8" valueBinding="controller.selectedCluster.staging" disabledBinding="controller.isEditDisabled"}}
-                </div>
-                <div class="control-group">
-                  <label class="control-label-manage-clusters">{{t mirroring.manageClusters.working}}</label>
-                  {{view Ember.TextField class="span8" valueBinding="controller.selectedCluster.working" disabledBinding="controller.isEditDisabled"}}
-                </div>
-                <div class="control-group">
-                  <label class="control-label-manage-clusters">{{t mirroring.manageClusters.temp}}</label>
-                  {{view Ember.TextField class="span8" valueBinding="controller.selectedCluster.temp" disabledBinding="controller.isEditDisabled"}}
-                </div>
-              </div>
-            </div>
+        <div class="control-group form-category">
+          <div class="category-title">{{t mirroring.manageClusters.locations}}</div>
+          <div class="control-group">
+            <label class="control-label-manage-clusters">{{t mirroring.manageClusters.staging}}</label>
+            {{view Ember.TextField class="span9" valueBinding="controller.selectedCluster.staging" disabled="disabled"}}
+          </div>
+          <div class="control-group">
+            <label class="control-label-manage-clusters">{{t mirroring.manageClusters.working}}</label>
+            {{view Ember.TextField class="span9" valueBinding="controller.selectedCluster.working" disabled="disabled"}}
+          </div>
+          <div class="control-group">
+            <label class="control-label-manage-clusters">{{t mirroring.manageClusters.temp}}</label>
+            {{view Ember.TextField class="span9" valueBinding="controller.selectedCluster.temp" disabled="disabled"}}
           </div>
         </div>
       </form>