Repository: ambari Updated Branches: refs/heads/trunk eeed6fca5 -> 611cb6582
AMBARI-5053. Mirroring: Manage Cluster UI tweaks. (akovalenko) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/611cb658 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/611cb658 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/611cb658 Branch: refs/heads/trunk Commit: 611cb6582a28ae2350b5d204b4ce59f9f685035c Parents: eeed6fc Author: Aleksandr Kovalenko <[email protected]> Authored: Wed Mar 12 18:45:15 2014 +0200 Committer: Aleksandr Kovalenko <[email protected]> Committed: Wed Mar 12 18:45:15 2014 +0200 ---------------------------------------------------------------------- .../mirroring/manage_clusters_controller.js | 161 +++++++++---------- .../controllers/main/mirroring_controller.js | 14 +- ambari-web/app/messages.js | 3 + ambari-web/app/styles/application.less | 26 ++- .../main/mirroring/create_new_cluster.hbs | 59 +++++++ .../main/mirroring/manage_clusters.hbs | 54 +++---- 6 files changed, 186 insertions(+), 131 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/611cb658/ambari-web/app/controllers/main/mirroring/manage_clusters_controller.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/controllers/main/mirroring/manage_clusters_controller.js b/ambari-web/app/controllers/main/mirroring/manage_clusters_controller.js index 8b97a6a..efcfa78 100644 --- a/ambari-web/app/controllers/main/mirroring/manage_clusters_controller.js +++ b/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]); }, /** http://git-wip-us.apache.org/repos/asf/ambari/blob/611cb658/ambari-web/app/controllers/main/mirroring_controller.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/controllers/main/mirroring_controller.js b/ambari-web/app/controllers/main/mirroring_controller.js index 340a2bf..5db3980 100644 --- a/ambari-web/app/controllers/main/mirroring_controller.js +++ b/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); } }); http://git-wip-us.apache.org/repos/asf/ambari/blob/611cb658/ambari-web/app/messages.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js index e153adf..fbcdf1c 100644 --- a/ambari-web/app/messages.js +++ b/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', http://git-wip-us.apache.org/repos/asf/ambari/blob/611cb658/ambari-web/app/styles/application.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index d376898..75fa393 100644 --- a/ambari-web/app/styles/application.less +++ b/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%; } http://git-wip-us.apache.org/repos/asf/ambari/blob/611cb658/ambari-web/app/templates/main/mirroring/create_new_cluster.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/mirroring/create_new_cluster.hbs b/ambari-web/app/templates/main/mirroring/create_new_cluster.hbs new file mode 100644 index 0000000..207cd75 --- /dev/null +++ b/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> http://git-wip-us.apache.org/repos/asf/ambari/blob/611cb658/ambari-web/app/templates/main/mirroring/manage_clusters.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/mirroring/manage_clusters.hbs b/ambari-web/app/templates/main/mirroring/manage_clusters.hbs index 3c95c84..7124f30 100644 --- a/ambari-web/app/templates/main/mirroring/manage_clusters.hbs +++ b/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>
