This is an automated email from the ASF dual-hosted git repository. akovalenko pushed a commit to branch branch-feature-AMBARI-14714-ui in repository https://gitbox.apache.org/repos/asf/ambari.git
The following commit(s) were added to refs/heads/branch-feature-AMBARI-14714-ui by this push: new 1384106 AMBARI-23007. Create Upgrade Plan menu item and popup 1384106 is described below commit 13841066d06c79c22c8386380285d6d3403f0543 Author: Jason Golieb <j...@golieb.net> AuthorDate: Thu Feb 22 08:47:06 2018 -0500 AMBARI-23007. Create Upgrade Plan menu item and popup --- ambari-web/app/messages.js | 11 ++++ ambari-web/app/styles/application.less | 69 ++++++++++++++++++++++ ambari-web/app/styles/modal_popups.less | 12 ++++ ambari-web/app/templates/common/modal_popup.hbs | 2 +- .../app/templates/main/admin/serviceGroups.hbs | 2 +- .../main/admin/serviceGroups/startUpgradePlan.hbs | 42 +++++++++++++ ambari-web/app/views/common/modal_popup.js | 37 ++++++++++++ .../app/views/main/admin/serviceGroups_view.js | 20 ++++++- ambari-web/test/utils/date/date_test.js | 13 +++- 9 files changed, 202 insertions(+), 6 deletions(-) diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js index 6ec70b2..057d9ba 100644 --- a/ambari-web/app/messages.js +++ b/ambari-web/app/messages.js @@ -1975,6 +1975,17 @@ Em.I18n.translations = { 'admin.serviceGroups.createUpgradePlan': "Create Upgrade Plan", 'admin.serviceGroups.addServiceGroup': "Add Management Pack", 'admin.serviceGroups.removeOldVersions': "Remove Old Versions", + 'admin.serviceGroups.startUpgradePlan.title': "Upgrade Process", + 'admin.serviceGroups.startUpgradePlan.description': "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.", + 'admin.serviceGroups.startUpgradePlan.step1Title': "Upgrade Plan", + 'admin.serviceGroups.startUpgradePlan.step1Description': "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.", + 'admin.serviceGroups.startUpgradePlan.step2Title': "Prerequisites", + 'admin.serviceGroups.startUpgradePlan.step2Description': "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.", + 'admin.serviceGroups.startUpgradePlan.step3Title': "Install", + 'admin.serviceGroups.startUpgradePlan.step3Description': "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.", + 'admin.serviceGroups.startUpgradePlan.step4Title': "Upgrade", + 'admin.serviceGroups.startUpgradePlan.step4Description': "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.", + 'admin.serviceGroups.startUpgradePlan.buttonLabel': 'Create Upgrade Plan', 'admin.stackUpgrade.downgrade.proceed': "Proceed with Downgrade", 'admin.stackUpgrade.downgrade.body': "Are you sure you wish to abort the upgrade process and downgrade to <b>{0}</b>?", diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index 83d515e..5239708 100644 --- a/ambari-web/app/styles/application.less +++ b/ambari-web/app/styles/application.less @@ -2894,4 +2894,73 @@ td .no-data { #notifications-dropdown.dropdown-menu .notifications-header .notifications-title { line-height: 30px; +} + +#start-upgrade-plan { + text-align: center; + padding: 30px 0; + max-width: 1000px; + + h3 { + margin-top: 0; + color: #333; + } + + #description { + width: 60%; + margin-left: auto; + margin-right: auto; + color: #999; + } + + ol { + display: flex; + justify-content: space-around; + margin: 40px auto; + counter-reset: items; + + li { + list-style-type: none; + width: 225px; + margin: 20px 15px; + margin-bottom: 0; + color: #999; + + h4 { + color: #333; + } + + &:before { + display: block; + position: relative; + left: 50%; + transform: translateX(-50%); + bottom: 20px; + height: 30px; + width: 30px; + counter-increment: items; + content: counter(items); + border: #999 1px solid; + border-radius: 100%; + font-size: 20px; + line-height: 28px; + } + + &:not(:last-child):after { + width: ~"calc(100% + 1px)"; + height: 1px; + background-color: #999; + content: ""; + position: relative; + display: block; + bottom: 138px; + left: 123px; + } + } + } +} + +.btn-lg { + text-transform: uppercase; + outline: none; } \ No newline at end of file diff --git a/ambari-web/app/styles/modal_popups.less b/ambari-web/app/styles/modal_popups.less index b26bf1a..a02abca 100644 --- a/ambari-web/app/styles/modal_popups.less +++ b/ambari-web/app/styles/modal_popups.less @@ -99,6 +99,18 @@ } } } + + &.wide-modal { + right: initial; + left: 50%; + transform: translateX(-50%); + } + + &.no-header { + .modal-header { + display: none; + } + } } .modal-body { max-height: 600px; diff --git a/ambari-web/app/templates/common/modal_popup.hbs b/ambari-web/app/templates/common/modal_popup.hbs index afc5d9f..715e416 100644 --- a/ambari-web/app/templates/common/modal_popup.hbs +++ b/ambari-web/app/templates/common/modal_popup.hbs @@ -18,7 +18,7 @@ <div class="modal-backdrop in"></div> -<div {{bindAttr class=":modal view.showFooter:with-footer:no-footer"}} id="modal" tabindex="-1" role="dialog" aria-labelledby="modal-label" aria-hidden="true" {{QAAttr "modal"}}> +<div {{bindAttr class=":modal view.modalWrapperClassesStr view.showFooter:with-footer:no-footer view.showHeader::no-header"}} id="modal" tabindex="-1" role="dialog" aria-labelledby="modal-label" aria-hidden="true" {{QAAttr "modal"}}> <div {{bindAttr class="view.modalDialogClassesStr :modal-dialog"}}> <div class="modal-content"> {{! Modal header }} diff --git a/ambari-web/app/templates/main/admin/serviceGroups.hbs b/ambari-web/app/templates/main/admin/serviceGroups.hbs index 81f27b7..911a472 100644 --- a/ambari-web/app/templates/main/admin/serviceGroups.hbs +++ b/ambari-web/app/templates/main/admin/serviceGroups.hbs @@ -32,7 +32,7 @@ <div class="dropdown pull-right"> <button class="btn btn-primary dropdown-toggle" type="button" id="actions-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Actions <span class="caret"></span></button> <ul class="dropdown-menu" aria-labelledby="actions-menu"> - <li><a href="#"><i class="icon-arrow-up"></i> {{t admin.serviceGroups.createUpgradePlan}}</a></li> + <li><a href="#" {{action handleCreateUpgradePlan target="view"}}><i class="icon-arrow-up"></i> {{t admin.serviceGroups.createUpgradePlan}}</a></li> <li><a href="#"><i class="icon-plus"></i> {{t admin.serviceGroups.addServiceGroup}}</a></li> <li><a href="#"><i class="icon-trash"></i> {{t admin.serviceGroups.removeOldVersions}}</a></li> <li><a href="#"><i class="icon-book"></i> {{t common.documentation}}</a></li> diff --git a/ambari-web/app/templates/main/admin/serviceGroups/startUpgradePlan.hbs b/ambari-web/app/templates/main/admin/serviceGroups/startUpgradePlan.hbs new file mode 100644 index 0000000..3ccdf1e --- /dev/null +++ b/ambari-web/app/templates/main/admin/serviceGroups/startUpgradePlan.hbs @@ -0,0 +1,42 @@ +{{! +* 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. +}} + +<a class="close" {{action close target="view"}}>×</a> +<div id="start-upgrade-plan"> + <h3>{{t admin.serviceGroups.startUpgradePlan.title}}</h3> + <p id="description">{{t admin.serviceGroups.startUpgradePlan.description}}</p> + <ol> + <li> + <h4>{{t admin.serviceGroups.startUpgradePlan.step1Title}}</h4> + <p>{{t admin.serviceGroups.startUpgradePlan.step1Description}}</p> + </li> + <li> + <h4>{{t admin.serviceGroups.startUpgradePlan.step2Title}}</h4> + <p>{{t admin.serviceGroups.startUpgradePlan.step2Description}}</p> + </li> + <li> + <h4>{{t admin.serviceGroups.startUpgradePlan.step3Title}}</h4> + <p>{{t admin.serviceGroups.startUpgradePlan.step3Description}}</p> + </li> + <li> + <h4>{{t admin.serviceGroups.startUpgradePlan.step4Title}}</h4> + <p>{{t admin.serviceGroups.startUpgradePlan.step4Description}}</p> + </li> + </ol> + <button type="button" class="btn-lg btn-primary" {{action createUpgradePlan target="view"}}>{{t admin.serviceGroups.startUpgradePlan.buttonLabel}}</button> +</div> \ No newline at end of file diff --git a/ambari-web/app/views/common/modal_popup.js b/ambari-web/app/views/common/modal_popup.js index 33e9534..238ca5f 100644 --- a/ambari-web/app/views/common/modal_popup.js +++ b/ambari-web/app/views/common/modal_popup.js @@ -21,7 +21,9 @@ var App = require('app'); App.ModalPopup = Ember.View.extend({ viewName: 'modalPopup', + modalWrapperClasses: [], modalDialogClasses: [], + modalId: "modal", templateName: require('templates/common/modal_popup'), header: ' ', body: ' ', @@ -31,6 +33,7 @@ App.ModalPopup = Ember.View.extend({ secondary: Em.I18n.t('common.cancel'), third: null, autoHeight: true, + autoWidth: true, marginBottom: 300, disablePrimary: false, disableSecondary: false, @@ -38,6 +41,13 @@ App.ModalPopup = Ember.View.extend({ primaryClass: 'btn-success', secondaryClass: 'btn-secondary', thirdClass: 'btn-default', + modalWrapperClassesStr: function () { + var modalWrapperClasses = this.get('modalWrapperClasses'); + if (!Em.isArray(modalWrapperClasses)) { + return ''; + } + return modalWrapperClasses.join(' '); + }.property('modalWrapperClasses.[]'), modalDialogClassesStr: function () { var modalDialogClasses = this.get('modalDialogClasses'); if (!Em.isArray(modalDialogClasses)) { @@ -72,6 +82,8 @@ App.ModalPopup = Ember.View.extend({ this.destroy(); }, + showHeader: true, + showFooter: true, /** @@ -109,6 +121,11 @@ App.ModalPopup = Ember.View.extend({ this.fitHeight(); $(window).on('resize', this.fitHeight.bind(this)); } + + if (this.get('autoWidth') && !$.mocho) { + this.fitWidth(); + $(window).on('resize', this.fitWidth.bind(this)); + } }, willDestroyElement: function() { @@ -116,6 +133,9 @@ App.ModalPopup = Ember.View.extend({ if (this.get('autoHeight') && !$.mocho) { $(window).off('resize', this.fitHeight); } + if (this.get('autoWidth') && !$.mocho) { + $(window).off('resize', this.fitWidth); + } }, escapeKeyPressed: function (event) { @@ -176,6 +196,23 @@ App.ModalPopup = Ember.View.extend({ newMaxHeight = Math.max(newMaxHeight, 500); block.css('max-height', newMaxHeight); + }, + + fitWidth: function () { + if (this.get('state') === 'destroyed') return; + var popup = this.$().find('#modal'), + wrapper = $(popup).find('.modal-dialog'), + //block = $(popup).find('.modal-body'), + ww = $(window).width(), + margin = ww * 0.05, + newMaxWidth = ww - margin * 2; + + newMaxWidth = Math.min(newMaxWidth, 1400); + wrapper.css({ + 'max-width': newMaxWidth, + 'min-width': 600, + 'width': 'auto' + }); } }); diff --git a/ambari-web/app/views/main/admin/serviceGroups_view.js b/ambari-web/app/views/main/admin/serviceGroups_view.js index 89ff8e6..a2a06b7 100644 --- a/ambari-web/app/views/main/admin/serviceGroups_view.js +++ b/ambari-web/app/views/main/admin/serviceGroups_view.js @@ -19,5 +19,23 @@ var App = require('app'); App.MainAdminServiceGroupsView = App.DashRow.extend({ - templateName: require('templates/main/admin/serviceGroups') + templateName: require('templates/main/admin/serviceGroups'), + + handleCreateUpgradePlan: function () { + App.ModalPopup.show({ + modalWrapperClasses: [ "wide-modal" ], + showHeader: false, + showFooter: false, + bodyClass: Ember.View.extend({ + templateName: require('templates/main/admin/serviceGroups/startUpgradePlan'), + close: function () { + this.get('parentView').hide(); + }, + createUpgradePlan: function () { + this.get('parentView').hide(); + App.router.transitionTo(); + } + }) + }); + } }); \ No newline at end of file diff --git a/ambari-web/test/utils/date/date_test.js b/ambari-web/test/utils/date/date_test.js index 5613eaf..241739a 100644 --- a/ambari-web/test/utils/date/date_test.js +++ b/ambari-web/test/utils/date/date_test.js @@ -33,9 +33,16 @@ describe('date', function () { describe('#dateFormat', function () { it('Should format dates passed as timestamp integers', function () { - var input = 0;//.toUTCString(); - var expected = "Wed, Dec 31, 1969 19:00"; - var actual = date.dateFormat(input); + //This test may seem circular, but we have to test this way because + //dateFormat() uses "new Date(timestamp)" to convert the timestamp integer + //into a Date object.The Date constructor automatically uses the timezone + //of the local system to produce a date representation from the timestamp, + //and this cannot be changed. Therefore, to test the formatted string output, + //we parse it back into a timestamp and check that it equals the original integer. + + var expected = 0; + var dateString = date.dateFormat(expected); + var actual = Date.parse(dateString); expect(actual).to.equal(expected); }); -- To stop receiving notification emails like this one, please contact akovale...@apache.org.