From 55a65081e267139f4e6db85fa34427afc5ccb58f Mon Sep 17 00:00:00 2001 From: Jason Golieb Date: Wed, 17 Jan 2018 12:10:23 -0500 Subject: [PATCH 01/10] AMBARI-22802 Styling for install wizard --- ambari-web/app/assets/index.html | 17 +- ambari-web/app/controllers/installer.js | 30 +- .../wizard/configureDownload_controller.js | 5 + .../wizard/customMpackRepos_controller.js | 6 +- .../wizard/customProductRepos_controller.js | 6 +- .../wizard/downloadMpacks_controller.js | 6 +- .../wizard/selectMpacks_controller.js | 12 +- .../controllers/wizard/step4_controller.js | 6 +- .../controllers/wizard/step7_controller.js | 3 +- .../controllers/wizard/step9_controller.js | 6 +- .../wizard/verifyProducts_controller.js | 6 +- ambari-web/app/messages.js | 12 +- ambari-web/app/routes/installer.js | 96 +++-- ambari-web/app/styles/application.less | 140 ++++++- .../app/styles/bootstrap_overrides.less | 20 +- ambari-web/app/styles/common.less | 8 +- ambari-web/app/styles/stack_versions.less | 2 +- .../app/styles/theme/bootstrap-ambari.css | 159 ++++---- ambari-web/app/styles/wizard.less | 373 +++++++++++------- ambari-web/app/templates/installer.hbs | 2 +- .../templates/wizard/configureDownload.hbs | 84 ++-- .../app/templates/wizard/customMpackRepos.hbs | 65 ++- .../templates/wizard/customProductRepos.hbs | 153 +++---- .../app/templates/wizard/downloadMpacks.hbs | 97 ++--- .../app/templates/wizard/selectMpacks.hbs | 141 +++---- .../templates/wizard/selectMpacks/mpack.hbs | 28 +- .../selectMpacks/selectedMpackVersion.hbs | 14 +- .../templates/wizard/selectMpacks/service.hbs | 26 +- .../templates/wizard/selectMpacks/usecase.hbs | 10 +- ambari-web/app/templates/wizard/step0.hbs | 20 +- ambari-web/app/templates/wizard/step1.hbs | 6 +- ambari-web/app/templates/wizard/step2.hbs | 6 +- ambari-web/app/templates/wizard/step3.hbs | 227 ++++++----- .../app/templates/wizard/verifyProducts.hbs | 137 +++---- ambari-web/app/views/common/modal_popup.js | 2 +- .../views/wizard/configureDownload_view.js | 6 +- .../app/views/wizard/selectMpacks_view.js | 29 +- ambari-web/test/utils/date/timezone_test.js | 2 +- 38 files changed, 1133 insertions(+), 835 deletions(-) diff --git a/ambari-web/app/assets/index.html b/ambari-web/app/assets/index.html index efd3c644668..8a5453d5001 100644 --- a/ambari-web/app/assets/index.html +++ b/ambari-web/app/assets/index.html @@ -29,10 +29,19 @@ Ambari diff --git a/ambari-web/app/controllers/installer.js b/ambari-web/app/controllers/installer.js index e5d09cb3562..f0c15b81264 100644 --- a/ambari-web/app/controllers/installer.js +++ b/ambari-web/app/controllers/installer.js @@ -57,6 +57,21 @@ App.InstallerController = App.WizardController.extend(App.Persist, { "step10" ], + errors: [], + + hasErrors: function () { + return this.get('errors').length > 0; + }.property('errors'), + + addError: function (newError) { + const errors = this.get('errors'); + this.set('errors', errors.concat(newError)); + }, + + clearErrors: function () { + this.set('errors', []); + }, + getStepController: function (stepName) { if (typeof (stepName) === "number") { stepName = this.get('steps')[stepName]; @@ -266,7 +281,7 @@ App.InstallerController = App.WizardController.extend(App.Persist, { }, success: 'loadMpackServiceInfoSuccess', error: 'loadMpackServiceInfoError' - }) + }); }, loadMpackServiceInfoSuccess: function (serviceInfo) { @@ -277,10 +292,13 @@ App.InstallerController = App.WizardController.extend(App.Persist, { loadMpackServiceInfoError: function(request, status, error) { const message = Em.I18n.t('installer.error.mpackServiceInfo'); - App.showAlertPopup( - Em.I18n.t('common.error'), //header - message //body - ); + this.addError(message); + // App.showAlertPopup( + // Em.I18n.t('common.error'), //header + // message //body + // ); + + return message; console.log(`${message} ${status} - ${error}`); }, @@ -1470,7 +1488,7 @@ App.InstallerController = App.WizardController.extend(App.Persist, { * @return {object} a promise */ finishRegisteringMpacks: function (keepStackServices) { - return this.getMpackStackVersions().then(data => { + return this.getMpackStackVersions().fail(this.addErrors).always(data => { data.items.forEach(versionDefinition => App.stackMapper.map(versionDefinition)) if (!keepStackServices) { diff --git a/ambari-web/app/controllers/wizard/configureDownload_controller.js b/ambari-web/app/controllers/wizard/configureDownload_controller.js index 603b2e55506..fc7c6302f23 100644 --- a/ambari-web/app/controllers/wizard/configureDownload_controller.js +++ b/ambari-web/app/controllers/wizard/configureDownload_controller.js @@ -62,6 +62,11 @@ App.WizardConfigureDownloadController = App.WizardStepController.extend({ this.set('content.downloadConfig.proxyTestPassed', true); }, + isSubmitDisabled: function () { + return App.get('router.btnClickInProgress') + || (this.get('wizardController.errors') && this.get('wizardController.errors').length > 0); + }.property('router.btnClickInProgress', 'wizardController.errors'), + /** * Onclick handler for Next button. * Disable 'Next' button while it is already under process. (using Router's property 'nextBtnClickInProgress') diff --git a/ambari-web/app/controllers/wizard/customMpackRepos_controller.js b/ambari-web/app/controllers/wizard/customMpackRepos_controller.js index ec0461bc0dd..276881ebb07 100644 --- a/ambari-web/app/controllers/wizard/customMpackRepos_controller.js +++ b/ambari-web/app/controllers/wizard/customMpackRepos_controller.js @@ -35,8 +35,10 @@ App.WizardCustomMpackReposController = App.WizardStepController.extend({ isSubmitDisabled: function () { const mpacks = this.get('mpacks'); - return mpacks.filterProperty('downloadUrl', '').length > 0 || App.get('router.btnClickInProgress'); - }.property('mpacks.@each.downloadUrl', 'App.router.btnClickInProgress'), + return App.get('router.btnClickInProgress') + || (this.get('wizardController.errors') && this.get('wizardController.errors').length > 0) + || mpacks.filterProperty('downloadUrl', '').length > 0; + }.property('mpacks.@each.downloadUrl', 'App.router.btnClickInProgress', 'wizardController.errors'), submit: function () { if (App.get('router.nextBtnClickInProgress')) { diff --git a/ambari-web/app/controllers/wizard/customProductRepos_controller.js b/ambari-web/app/controllers/wizard/customProductRepos_controller.js index 506747b049d..3bb1385c318 100644 --- a/ambari-web/app/controllers/wizard/customProductRepos_controller.js +++ b/ambari-web/app/controllers/wizard/customProductRepos_controller.js @@ -206,11 +206,13 @@ App.WizardCustomProductReposController = App.WizardStepController.extend({ isSubmitDisabled: function () { if (this.get('anySelectedOs')) { const repos = this.get('repos'); - return repos.filterProperty('downloadUrl', '').length > 0 || App.get('router.btnClickInProgress'); + return App.get('router.btnClickInProgress') + || (this.get('wizardController.errors') && this.get('wizardController.errors').length > 0) + || repos.filterProperty('downloadUrl', '').length > 0; } return true; - }.property('anySelectedOs', 'repos.@each.downloadUrl', 'App.router.btnClickInProgress'), + }.property('anySelectedOs', 'repos.@each.downloadUrl', 'App.router.btnClickInProgress', 'wizardController.errors'), submit: function () { if (App.get('router.nextBtnClickInProgress')) { diff --git a/ambari-web/app/controllers/wizard/downloadMpacks_controller.js b/ambari-web/app/controllers/wizard/downloadMpacks_controller.js index 57550606a87..c4de24d70be 100644 --- a/ambari-web/app/controllers/wizard/downloadMpacks_controller.js +++ b/ambari-web/app/controllers/wizard/downloadMpacks_controller.js @@ -98,8 +98,10 @@ App.WizardDownloadMpacksController = App.WizardStepController.extend({ isSubmitDisabled: function () { const mpacks = this.get('mpacks'); - return mpacks.filterProperty('success', false).length > 0 || App.get('router.btnClickInProgress'); - }.property('mpacks.@each.success', 'App.router.btnClickInProgress'), + return App.get('router.btnClickInProgress') + || (this.get('wizardController.errors') && this.get('wizardController.errors').length > 0) + || mpacks.filterProperty('succeeded', false).length > 0; + }.property('mpacks.@each.succeeded', 'App.router.btnClickInProgress', 'wizardController.errors'), submit: function () { if (App.get('router.nextBtnClickInProgress')) { diff --git a/ambari-web/app/controllers/wizard/selectMpacks_controller.js b/ambari-web/app/controllers/wizard/selectMpacks_controller.js index 2029e0e3209..38047f35a6d 100644 --- a/ambari-web/app/controllers/wizard/selectMpacks_controller.js +++ b/ambari-web/app/controllers/wizard/selectMpacks_controller.js @@ -246,8 +246,10 @@ App.WizardSelectMpacksController = App.WizardStepController.extend({ isSubmitDisabled: function () { const mpackServiceVersions = this.get('content.mpackServiceVersions'); - return mpackServiceVersions.filterProperty('selected', true).length === 0 || App.get('router.btnClickInProgress'); - }.property('content.mpackServiceVersions.@each.selected', 'App.router.btnClickInProgress'), + return App.get('router.btnClickInProgress') + || (this.get('wizardController.errors') && this.get('wizardController.errors').length > 0) + || mpackServiceVersions.filterProperty('selected', true).length === 0; + }.property('content.mpackServiceVersions.@each.selected', 'App.router.btnClickInProgress', 'wizardController.errors'), getMpackVersionById: function (versionId) { const mpackVersions = this.get('content.mpackVersions'); @@ -344,7 +346,7 @@ App.WizardSelectMpacksController = App.WizardStepController.extend({ const selected = usecase.get('selected'); usecase.set('selected', !selected); - const usecasesSelected = this.get('content.mpackUsecases').filterProperty('selected'); + const usecasesSelected = this.get('selectedUseCases'); if (usecasesSelected.length > 0) { this.getUsecaseRecommendation() .done(this.getUsecaseRecommendationSucceeded.bind(this)) @@ -452,6 +454,10 @@ App.WizardSelectMpacksController = App.WizardStepController.extend({ return false; }, + selectedUseCases: function () { + return this.get('content.mpackUsecases').filterProperty('selected'); + }.property('content.mpackUsecases.@each.selected'), + selectedServices: function () { const mpackServiceVersions = this.get('content.mpackServiceVersions'); return mpackServiceVersions ? mpackServiceVersions.filter(s => s.get('selected') === true) : []; diff --git a/ambari-web/app/controllers/wizard/step4_controller.js b/ambari-web/app/controllers/wizard/step4_controller.js index 407cf51e26e..4ba8cabd7ed 100644 --- a/ambari-web/app/controllers/wizard/step4_controller.js +++ b/ambari-web/app/controllers/wizard/step4_controller.js @@ -50,8 +50,10 @@ App.WizardStep4Controller = Em.ArrayController.extend({ * @type {bool} */ isSubmitDisabled: function () { - return this.filterProperty('isSelected', true).filterProperty('isInstalled', false).length === 0 || App.get('router.btnClickInProgress'); - }.property('@each.isSelected', 'App.router.btnClickInProgress'), + return App.get('router.btnClickInProgress') + || (this.get('wizardController.errors') && this.get('wizardController.errors').length > 0) + || this.filterProperty('isSelected', true).filterProperty('isInstalled', false).length === 0; + }.property('@each.isSelected', 'App.router.btnClickInProgress', 'wizardController.errors'), /** * List of validation errors. Look to #createError method for information diff --git a/ambari-web/app/controllers/wizard/step7_controller.js b/ambari-web/app/controllers/wizard/step7_controller.js index be05a6c70fd..041b74a7e58 100644 --- a/ambari-web/app/controllers/wizard/step7_controller.js +++ b/ambari-web/app/controllers/wizard/step7_controller.js @@ -149,8 +149,9 @@ App.WizardStep7Controller = App.WizardStepController.extend(App.ServerValidatorM if (!this.get('stepConfigs.length')) return true; if (this.get('submitButtonClicked')) return true; if (App.get('router.btnClickInProgress')) return true; + if (this.get('wizardController.errors') && this.get('wizardController.errors').length > 0) return true; return !this.get('stepConfigs').filterProperty('showConfig', true).everyProperty('errorCount', 0) || this.get("miscModalVisible"); - }.property('stepConfigs.@each.errorCount', 'miscModalVisible', 'submitButtonClicked', 'App.router.btnClickInProgress'), + }.property('stepConfigs.@each.errorCount', 'miscModalVisible', 'submitButtonClicked', 'App.router.btnClickInProgress', 'wizardController.errors'), /** * List of selected to install service names diff --git a/ambari-web/app/controllers/wizard/step9_controller.js b/ambari-web/app/controllers/wizard/step9_controller.js index 07152a14f63..1f8e0f7bc7f 100644 --- a/ambari-web/app/controllers/wizard/step9_controller.js +++ b/ambari-web/app/controllers/wizard/step9_controller.js @@ -114,10 +114,12 @@ App.WizardStep9Controller = App.WizardStepController.extend(App.ReloadPopupMixin if (controllerName == 'addHostController' || controllerName == 'addServiceController') { validStates.push('INSTALL FAILED'); } - return !validStates.contains(this.get('content.cluster.status')) || App.get('router.btnClickInProgress'); + return App.get('router.btnClickInProgress') + || (this.get('wizardController.errors') && this.get('wizardController.errors').length > 0) + || !validStates.contains(this.get('content.cluster.status')); }.property('content.cluster.status'), - isNextButtonDisabled: Em.computed.or('App.router.nextBtnClickInProgress', 'isSubmitDisabled'), + isNextButtonDisabled: Em.computed.or('App.router.nextBtnClickInProgress', 'isSubmitDisabled', 'wizardController.errors'), /** * Observer function: Enables previous steps link if install task failed in installer wizard. diff --git a/ambari-web/app/controllers/wizard/verifyProducts_controller.js b/ambari-web/app/controllers/wizard/verifyProducts_controller.js index 5fd991fc2fb..6b375096123 100644 --- a/ambari-web/app/controllers/wizard/verifyProducts_controller.js +++ b/ambari-web/app/controllers/wizard/verifyProducts_controller.js @@ -140,8 +140,10 @@ App.WizardVerifyProductsController = App.WizardStepController.extend({ isSubmitDisabled: function () { const repos = this.get('repos'); - return repos.filterProperty('succeeded', false).length > 0 || App.get('router.btnClickInProgress'); - }.property('repos.@each.succeeded', 'App.router.btnClickInProgress'), + return App.get('router.btnClickInProgress') + || (this.get('wizardController.errors') && this.get('wizardController.errors').length > 0) + || repos.filterProperty('succeeded', false).length > 0; + }.property('repos.@each.succeeded', 'App.router.btnClickInProgress', 'wizardController.errors'), submit: function () { if (App.get('router.nextBtnClickInProgress')) { diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js index 11be27d2844..389a62db15a 100644 --- a/ambari-web/app/messages.js +++ b/ambari-web/app/messages.js @@ -617,7 +617,7 @@ Em.I18n.translations = { 'installer.selectMpacks.header': 'Select Management Packs', 'installer.selectMpacks.body.header': 'Select Management Packs', - 'installer.selectMpacks.body.header.useCases': 'Use Cases', + 'installer.selectMpacks.body.header.useCases': 'Select the use cases that best describe your needs, and we\'ll suggest the best Management Packs and Services.', 'installer.selectMpacks.body.header.mpacks': 'Management Packs', 'installer.selectMpacks.body.header.services': 'Services', 'installer.selectMpacks.body.selected.header': 'Selected Management Packs', @@ -628,11 +628,13 @@ Em.I18n.translations = { 'installer.selectMpacks.noMpacksSelected': 'No management packs selected.', 'installer.selectMpacks.noRecommendationAvailable': 'No management packs support the selected use cases. Please change your selection.', 'installer.selectMpacks.getRecommendationFailed': 'Could not load management macks supporting the selected use cases. The software registry may not be available.', - 'installer.selectMpacks.basicMode': 'Basic Mode', - 'installer.selectMpacks.advancedMode': 'Advanced Mode', + 'installer.selectMpacks.basicMode': 'Use Cases', + 'installer.selectMpacks.advancedMode': 'Customize', 'installer.selectMpacks.changeMode': 'Change Selection Mode', - 'installer.selectMpacks.basicModeMessage': 'Advanced Mode allows you to directly select individual management packs and services. If you proceed to Advanced Mode, you will not be able to return to Basic Mode without losing all of your selections. Choose a selection mode.', - 'installer.selectMpacks.advancedModeMessage': 'Basic Mode provides common use cases you can choose from that will automatically select appropriate management packs and services. You cannot change these selections directly. If you proceed to Basic Mode, you will lose all current selections. Choose a selection mode.', + 'installer.selectMpacks.basicModeMessage': 'Customizing your selections allows you to add or remove individual management packs and services. Continue?', + 'installer.selectMpacks.advancedModeMessage': 'If you go back to use case selection, all current selections will be removed. Continue?', + 'installer.selectMpacks.basicModeHelp': 'This step lets you choose the use case(s) that fit your needs and the management packs that fulfill those use cases will be selected for you; however, if you would rather choose individual management packs and/or services directly, click this button. Be aware that if you return to use case selection mode, any selections you have made will be removed.', + 'installer.selectMpacks.advancedModeHelp': 'By clicking this button, you can return to use case selection mode. However, any existing selections will be removed.', 'installer.configureDownload.header': 'Configure Download', 'installer.configureDownload.body.title': 'Choose download method', diff --git a/ambari-web/app/routes/installer.js b/ambari-web/app/routes/installer.js index 25dd9d801dc..2bca53fe762 100644 --- a/ambari-web/app/routes/installer.js +++ b/ambari-web/app/routes/installer.js @@ -92,7 +92,7 @@ module.exports = Em.Route.extend(App.RouterRedirections, { step0: Em.Route.extend({ route: '/step0', - + breadcrumbs: { label: Em.I18n.translations['installer.step0.header'] }, connectOutlets: function (router) { console.time('step0 connectOutlets'); var self = this; @@ -125,7 +125,7 @@ module.exports = Em.Route.extend(App.RouterRedirections, { step2: Em.Route.extend({ route: '/step2', - + breadcrumbs: { label: Em.I18n.translations['installer.step2.header'] }, connectOutlets: function (router, context) { console.time('step2 connectOutlets'); var self = this; @@ -144,7 +144,11 @@ module.exports = Em.Route.extend(App.RouterRedirections, { }); }, - back: Em.Router.transitionTo('step0'), + backTransition: function (router) { + var controller = router.get('installerController'); + controller.clearErrors(); + router.transitionTo('step0'); + }, next: function (router) { console.time('step2 next'); @@ -163,7 +167,7 @@ module.exports = Em.Route.extend(App.RouterRedirections, { step3: App.StepRoute.extend({ route: '/step3', - + breadcrumbs: { label: Em.I18n.translations['installer.step3.header'] }, connectOutlets: function (router) { console.time('step3 connectOutlets'); var self = this; @@ -180,6 +184,8 @@ module.exports = Em.Route.extend(App.RouterRedirections, { }, backTransition: function (router) { + var controller = router.get('installerController'); + controller.clearErrors(); router.transitionTo('step2'); }, @@ -227,7 +233,7 @@ module.exports = Em.Route.extend(App.RouterRedirections, { configureDownload: Em.Route.extend({ route: '/configureDownload', - + breadcrumbs: { label: Em.I18n.translations['installer.configureDownload.header'] }, connectOutlets: function (router) { console.time('configureDownload connectOutlets'); var self = this; @@ -245,7 +251,11 @@ module.exports = Em.Route.extend(App.RouterRedirections, { }); }, - back: Em.Router.transitionTo('step3'), + backTransition: function (router) { + var controller = router.get('installerController'); + controller.clearErrors(); + router.transitionTo('step3'); + }, next: function (router) { console.time('configureDownload next'); @@ -280,6 +290,8 @@ module.exports = Em.Route.extend(App.RouterRedirections, { }, backTransition: function (router) { + var controller = router.get('installerController'); + controller.clearErrors(); router.transitionTo('configureDownload'); }, @@ -317,7 +329,7 @@ module.exports = Em.Route.extend(App.RouterRedirections, { customMpackRepos: App.StepRoute.extend({ route: '/customMpackRepos', - + breadcrumbs: { label: Em.I18n.translations['installer.customMpackRepos.header'] }, connectOutlets: function (router) { console.time('customMpackRepos connectOutlets'); var self = this; @@ -345,6 +357,8 @@ module.exports = Em.Route.extend(App.RouterRedirections, { }, backTransition: function (router) { + var controller = router.get('installerController'); + controller.clearErrors(); router.transitionTo('selectMpacks'); }, @@ -363,6 +377,7 @@ module.exports = Em.Route.extend(App.RouterRedirections, { downloadMpacks: App.StepRoute.extend({ route: '/downloadMpacks', + breadcrumbs: { label: Em.I18n.translations['installer.downloadMpacks.header'] }, connectOutlets: function (router) { console.time('downloadMpacks connectOutlets'); var self = this; @@ -372,14 +387,6 @@ module.exports = Em.Route.extend(App.RouterRedirections, { var newStepIndex = controller.getStepIndex('downloadMpacks'); router.setNavigationFlow(newStepIndex); controller.setCurrentStep('downloadMpacks'); - - //disable customMpackRepos step (even though it is an earlier step) if not using custom repos - // Em.run.next(function () { - // controller.get('isStepDisabled') - // .findProperty('step', controller.getStepIndex('customMpackRepos')) - // .set('value', !controller.get('content.downloadConfig.useCustomRepo')); - // }); - controller.loadAllPriorSteps().done(function () { controller.setStepsEnable(); controller.connectOutlet('wizardDownloadMpacks', controller.get('content')); @@ -390,6 +397,7 @@ module.exports = Em.Route.extend(App.RouterRedirections, { backTransition: function (router) { const controller = router.get('installerController'); + controller.clearErrors(); const downloadConfig = controller.get('content.downloadConfig'); if (downloadConfig && downloadConfig.useCustomRepo) { router.transitionTo('customMpackRepos'); @@ -417,7 +425,7 @@ module.exports = Em.Route.extend(App.RouterRedirections, { customProductRepos: App.StepRoute.extend({ route: '/customProductRepos', - + breadcrumbs: { label: Em.I18n.translations['installer.customProductRepos.header'] }, connectOutlets: function (router) { console.time('customProductRepos connectOutlets'); var self = this; @@ -445,6 +453,8 @@ module.exports = Em.Route.extend(App.RouterRedirections, { }, backTransition: function (router) { + var controller = router.get('installerController'); + controller.clearErrors(); router.transitionTo('downloadMpacks'); }, @@ -453,6 +463,7 @@ module.exports = Em.Route.extend(App.RouterRedirections, { if (!router.get('btnClickInProgress')) { App.set('router.nextBtnClickInProgress', true); const controller = router.get('installerController'); + controller.clearErrors(); controller.save('selectedMpacks'); controller.setStepSaved('customProductRepos'); router.transitionTo('verifyProducts'); @@ -463,6 +474,7 @@ module.exports = Em.Route.extend(App.RouterRedirections, { verifyProducts: App.StepRoute.extend({ route: '/verifyProducts', + breadcrumbs: { label: Em.I18n.translations['installer.verifyProducts.header'] }, connectOutlets: function (router) { console.time('verifyProducts connectOutlets'); var self = this; @@ -472,14 +484,6 @@ module.exports = Em.Route.extend(App.RouterRedirections, { var newStepIndex = controller.getStepIndex('verifyProducts'); router.setNavigationFlow(newStepIndex); controller.setCurrentStep('verifyProducts'); - - //disable customProductRepos step (even though it is an earlier step) if not using custom repos - // Em.run.next(function () { - // controller.get('isStepDisabled') - // .findProperty('step', controller.getStepIndex('customProductRepos')) - // .set('value', !controller.get('content.downloadConfig.useCustomRepo')); - // }); - controller.loadAllPriorSteps().done(function () { controller.setStepsEnable(); controller.connectOutlet('wizardVerifyProducts', controller.get('content')); @@ -490,6 +494,7 @@ module.exports = Em.Route.extend(App.RouterRedirections, { backTransition: function (router) { const controller = router.get('installerController'); + controller.clearErrors(); const downloadConfig = controller.get('content.downloadConfig'); if (downloadConfig && downloadConfig.useCustomRepo) { router.transitionTo('customProductRepos'); @@ -512,6 +517,7 @@ module.exports = Em.Route.extend(App.RouterRedirections, { step4: App.StepRoute.extend({ route: '/step4', + breadcrumbs: { label: Em.I18n.translations['installer.step4.header'] }, connectOutlets: function (router, context) { console.time('step4 connectOutlets'); var self = this; @@ -530,6 +536,8 @@ module.exports = Em.Route.extend(App.RouterRedirections, { }, backTransition: function(router) { + var controller = router.get('installerController'); + controller.clearErrors(); router.transitionTo('step1'); }, @@ -555,6 +563,7 @@ module.exports = Em.Route.extend(App.RouterRedirections, { step5: App.StepRoute.extend({ route: '/step5', + breadcrumbs: { label: Em.I18n.translations['installer.step5.header'] }, connectOutlets: function (router, context) { console.time('step5 connectOutlets'); var self = this; @@ -575,9 +584,13 @@ module.exports = Em.Route.extend(App.RouterRedirections, { console.timeEnd('step5 connectOutlets'); }); }, - backTransition: function(router) { + + backTransition: function (router) { + var controller = router.get('installerController'); + controller.clearErrors(); router.transitionTo('verifyProducts'); }, + next: function (router) { console.time('step5 next'); if (!router.get('btnClickInProgress')) { @@ -601,6 +614,7 @@ module.exports = Em.Route.extend(App.RouterRedirections, { step6: App.StepRoute.extend({ route: '/step6', + breadcrumbs: { label: Em.I18n.translations['installer.step6.header'] }, connectOutlets: function (router, context) { console.time('step6 connectOutlets'); var self = this; @@ -619,6 +633,8 @@ module.exports = Em.Route.extend(App.RouterRedirections, { }); }, backTransition: function(router) { + var controller = router.get('installerController'); + controller.clearErrors(); router.transitionTo('step5'); }, @@ -654,7 +670,7 @@ module.exports = Em.Route.extend(App.RouterRedirections, { step7: App.StepRoute.extend({ route: '/step7', - + breadcrumbs: { label: Em.I18n.translations['installer.step7.header'] }, connectOutlets: function (router, context) { console.time('step7 connectOutlets'); var self = this; @@ -675,6 +691,9 @@ module.exports = Em.Route.extend(App.RouterRedirections, { backTransition: function (router) { console.time('step7 back'); + var controller = router.get('installerController'); + controller.clearErrors(); + var step = router.get('installerController.content.skipSlavesStep') ? 'step5' : 'step6'; var wizardStep7Controller = router.get('wizardStep7Controller'); @@ -689,6 +708,7 @@ module.exports = Em.Route.extend(App.RouterRedirections, { } console.timeEnd('step7 back'); }, + next: function (router) { console.time('step7 next'); if (!router.get('btnClickInProgress')) { @@ -712,6 +732,7 @@ module.exports = Em.Route.extend(App.RouterRedirections, { step8: App.StepRoute.extend({ route: '/step8', + breadcrumbs: { label: Em.I18n.translations['installer.step8.header'] }, connectOutlets: function (router, context) { console.time('step8 connectOutlets'); var self = this; @@ -728,11 +749,16 @@ module.exports = Em.Route.extend(App.RouterRedirections, { console.timeEnd('step8 connectOutlets'); }); }, + backTransition: function (router) { - if(router.get('wizardStep8Controller.isBackBtnDisabled') == false) { + if (router.get('wizardStep8Controller.isBackBtnDisabled') == false) { + var controller = router.get('installerController'); + controller.clearErrors(); + router.transitionTo('step7'); } }, + next: function (router) { console.time('step8 next'); if (!router.get('btnClickInProgress')) { @@ -754,7 +780,7 @@ module.exports = Em.Route.extend(App.RouterRedirections, { step9: Em.Route.extend({ route: '/step9', - + breadcrumbs: { label: Em.I18n.translations['installer.step9.header'] }, connectOutlets: function (router, context) { console.time('step9 connectOutlets'); var self = this; @@ -777,7 +803,11 @@ module.exports = Em.Route.extend(App.RouterRedirections, { }); }, - back: Em.Router.transitionTo('step8'), + backTransition: function (router) { + var controller = router.get('installerController'); + controller.clearErrors(); + router.transitionTo('step8'); + }, retry: function (router) { console.time('step9 retry'); @@ -826,7 +856,7 @@ module.exports = Em.Route.extend(App.RouterRedirections, { step10: Em.Route.extend({ route: '/step10', - + breadcrumbs: { label: Em.I18n.translations['installer.step10.header'] }, connectOutlets: function (router, context) { var self = this; var controller = router.get('installerController'); @@ -845,7 +875,11 @@ module.exports = Em.Route.extend(App.RouterRedirections, { }); }, - back: Em.Router.transitionTo('step9'), + backTransition: function (router) { + var controller = router.get('installerController'); + controller.clearErrors(); + router.transitionTo('step9'); + }, complete: function (router, context) { var controller = router.get('installerController'); diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index 7823c10b754..cab89847863 100644 --- a/ambari-web/app/styles/application.less +++ b/ambari-web/app/styles/application.less @@ -26,7 +26,7 @@ body { html, body { height: 100%; - background-color: #f0f0f0; + background-color: #fafafa; } .form-text { @@ -80,7 +80,6 @@ footer { color: #666; margin-top: -1 * @footer-height - 1; height: @footer-height - 60px; - margin-left: @side-navigation-width; } .editable-list-container { @@ -1341,7 +1340,7 @@ a:focus { } .active { .glyphicon-blackboard { - color: #f0f0f0; + color: #eee; } } @@ -2816,7 +2815,7 @@ a.abort-icon:hover { height: 22px; width: auto; border-radius: 12px; - background: #f0f0f0; + background: #eee; font-size: 10px; align-items: center; border: none; @@ -2833,4 +2832,135 @@ a.abort-icon:hover { display: -moz-flex; display: -ms-flex; display: -o-flex; -} \ No newline at end of file + &.direction-row { + flex-direction: row; + } + &.direction-col { + flex-direction: column; + } + &.align-center { + align-items: center; + } + &.justify-center { + justify-content: center; + } +} + +.no-data { + position: absolute; + color: #ccc; + width: 100%; + text-align: center; + top: 50%; + transform: translateY(-50%); + :before { + content: '\f114'; + font-family: 'FontAwesome'; + display: block; + font-size: 96px; + color: #ccc; + line-height: 1em; + } +} + +td .no-data { + position: initial; + transform: none; + margin: 15px; +} + +.row.same-col-heights { + display: table; +} +.row.same-col-heights [class*="col-"]{ + display: table-cell; + float: none; + &.wizard-content { + width: 9999999999px; + } +} + +.input-group.url-input { + width: 100%; + + .input-group-btn { + width: 1%; + + .revert-button { + padding: 0 10px; + } + } +} + +.icon-button { + border: none; + outline: none; + background-color: inherit; + padding: 0; + margin-left: 5px; + margin-right: 5px; + color: #666; + + &:after { + font-family: 'FontAwesome'; + font-size: 14px; + } + + &:hover { + color: #1491c1; + } + + &:active { + color: #fff; + text-shadow: 0 0 2px #1491c1; + } +} + +[disabled].icon-button { + color: #ccc; +} + +[data-toggle="tooltip"] [disabled] { + pointer-events: none; +} + +.retry-button:after { + content: '\f01e'; +} + +.more-info { + padding-left: 5px; + cursor: help; + &:after { + content: '\f059'; + font-family: 'FontAwesome'; + color: #666; + } +} + +.tooltip { + font-family: 'Roboto'; + font-size: 10px; +} + +.tooltip-inner { + border-radius: 2px; + background-color: #666; + padding: 5px 10px; +} + +.tooltip.top .tooltip-arrow { + border-top-color: #666; +} + +.tooltip.bottom .tooltip-arrow { + border-bottom-color: #666; +} + +.tooltip.left .tooltip-arrow { + border-left-color: #666; +} + +.tooltip.right .tooltip-arrow { + border-right-color: #666; +} diff --git a/ambari-web/app/styles/bootstrap_overrides.less b/ambari-web/app/styles/bootstrap_overrides.less index e1a5ab5b1cb..be3a9d486f1 100644 --- a/ambari-web/app/styles/bootstrap_overrides.less +++ b/ambari-web/app/styles/bootstrap_overrides.less @@ -105,14 +105,23 @@ select.form-control { .panel { background-color: #fff; + border-radius: 0; .panel-heading { - background-color: #fff; + padding: 0; + margin-bottom: 15px; .panel-title { line-height: 34px; } } } +.panel .panel-body { + padding: 0; + position: relative; + min-height: 200px; + height: 100%; +} + .row { padding-top: 5px; padding-bottom: 5px; @@ -285,10 +294,6 @@ select.form-control { color: #fff; } -.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { - background-color: #f0f0f0; -} - @media (max-width: 992px) { .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: left; @@ -434,11 +439,6 @@ select.form-control { } } - -.wizard .wizard-body { - padding: 0 !important; -} - .table.table-hover .action { padding-right: 10px; } \ No newline at end of file diff --git a/ambari-web/app/styles/common.less b/ambari-web/app/styles/common.less index 7753a59aaa0..855c03187d5 100644 --- a/ambari-web/app/styles/common.less +++ b/ambari-web/app/styles/common.less @@ -23,14 +23,14 @@ /************************************************************************ * Health status(service/host/host component health)icons class names ***********************************************************************/ -@health-status-red-icon: glyphicon-warning-sign; -@health-status-red-icon: icon-warning-sign; +@health-status-red-icon: glyphicon-remove-sign; +@health-status-red-icon: icon-remove-sign; @health-status-green-icon: glyphicon-ok-sign; @health-status-green-icon: icon-ok-sign; @health-status-yellow-icon: glyphicon-question-sign; @health-status-yellow-icon: icon-question-sign; -@health-status-orange-icon: glyphicon-minus-sign; -@health-status-orange-icon: icon-minus-sign; +@health-status-orange-icon: glyphicon-warning-sign; +@health-status-orange-icon: icon-warning-sign; @maintenance-icon: icon-medkit; /************************************************************************ * Health status(service/host/host component health)icon colors diff --git a/ambari-web/app/styles/stack_versions.less b/ambari-web/app/styles/stack_versions.less index f47e3fc7511..4a98e0fd86a 100644 --- a/ambari-web/app/styles/stack_versions.less +++ b/ambari-web/app/styles/stack_versions.less @@ -19,7 +19,7 @@ #advancedRepoAccordion{ .panel-heading { - background-color: #f0f0f0; + background-color: #eee; a:hover { text-decoration: none; } diff --git a/ambari-web/app/styles/theme/bootstrap-ambari.css b/ambari-web/app/styles/theme/bootstrap-ambari.css index 3b1ebb2cd7a..0dc7da86217 100644 --- a/ambari-web/app/styles/theme/bootstrap-ambari.css +++ b/ambari-web/app/styles/theme/bootstrap-ambari.css @@ -322,6 +322,12 @@ input.form-control:focus { border-color: #1291c1; box-shadow: none; } +.required:after { + content: ' *'; + color: #ef6162; + padding-left: 5px; + position: absolute; +} .help-block { color: #999999; font-size: 14px; @@ -338,15 +344,15 @@ input.form-control:focus { } .has-success input.form-control { color: #666; - border: 1px solid #1EB475; + border: 1px solid #3fae2a; } .has-success input.form-control:focus { - border-color: #1EB475; + border-color: #3fae2a; box-shadow: none; } .has-success .help-block.validation-block::before { content: '\e084'; - color: #1EB475; + color: #3fae2a; } .has-error input.form-control { color: #666; @@ -398,7 +404,7 @@ h2.table-title { } .table input[type="checkbox"] + label { position: relative; - line-height: 1.3em; + line-height: 1.1em; font-size: initial; top: 4px; margin-bottom: 0; @@ -472,7 +478,10 @@ h2.table-title { } .nav.nav-tabs { border: none; - margin-bottom: 20px; + margin-bottom: 15px; +} +.panel-heading .nav-tabs { + margin-bottom: 0; } .nav.nav-tabs li a { border-width: 0; @@ -481,6 +490,9 @@ h2.table-title { color: #6B6C6C; text-transform: uppercase; } +.panel-heading .nav.nav-tabs li a { + padding-top: 0; +} .nav.nav-tabs li a:hover, .nav.nav-tabs li a:active, .nav.nav-tabs li a:focus { @@ -497,7 +509,6 @@ h2.table-title { .nav.nav-tabs li.active a { color: #333; border-bottom: 3px solid #3FAE2A; - padding-bottom: 2px; } .nav-tabs-left li, .nav-tabs-right li { @@ -532,9 +543,6 @@ h2.table-title { .nav-tabs-right li.active a:focus { border-left: 3px solid #3FAE2A !important; } -.wizard { - border: 2px solid #ebecf1; -} .wizard .wizard-header h3 { font-family: 'Roboto', sans-serif; font-weight: normal; @@ -545,24 +553,16 @@ h2.table-title { margin: 15px 20px; } .wizard .wizard-body { - overflow: hidden; + position: relative; + width: 100%; margin: 0; + padding: 0; + padding-bottom: 64px; /* height of wizard-footer */ + background-color: #eee; } .wizard .wizard-body .wizard-content { - background: #ebecf1; - padding-top: 15px; + background: #eee; float: left; - margin-bottom: -99999px; - padding-bottom: 99999px; -} -.wizard .wizard-body .wizard-content .step-header { - font-family: 'Roboto', sans-serif; - font-weight: normal; - color: #666; - font-size: 14px; - font-style: normal; - line-height: 1; - margin-bottom: 5px; } .wizard .wizard-body .wizard-content .step-title { font-family: 'Roboto', sans-serif; @@ -570,33 +570,35 @@ h2.table-title { font-style: normal; line-height: 1; color: #333; - font-size: 16px; + font-size: 20px; + margin: 0; + margin-bottom: 20px; } .wizard .wizard-body .wizard-content .step-description { font-family: 'Roboto', sans-serif; font-weight: normal; font-style: normal; - line-height: 1; - color: #333; - font-size: 12px; - line-height: 1.4; - color: #999; + font-size: 14px; + color: #666; } .wizard .wizard-body .wizard-content .panel.panel-default { border: none; box-shadow: none; - margin-top: 20px; + padding: 30px; } -.wizard .wizard-body .wizard-content .panel.panel-default .panel-body { - padding: 10px 20px; +.wizard .wizard-body .wizard-content .panel { + margin-bottom: 0; } +.panel-default > .panel-heading { + border: none; + background-color: inherit; +} + .wizard .wizard-body .wizard-nav { min-height: 550px; - padding-top: 25px; - background-color: #323544; + padding: 30px; + background-color: #333; float: left; - margin-bottom: -99999px; - padding-bottom: 99999px; } .wizard .wizard-body .wizard-nav ol.nav { @@ -611,53 +613,59 @@ h2.table-title { } .wizard .wizard-body .wizard-nav .nav li { - padding: 0px 15px; + padding: 0; + margin-bottom: 30px; +} +.wizard .wizard-body .wizard-nav .nav li:last-child { + margin-bottom: 0; } .wizard .wizard-body .wizard-nav .nav li a { - height: 48px; - padding: 0px 5px; - display: table-cell; - vertical-align: middle; + min-height: 30px; + padding: 0; } .wizard .wizard-body .wizard-nav .nav li .step-marker { position: absolute; - top: 9px; line-height: 16px; text-align: center; - width: 20px; - height: 20px; - border: 2px solid #1EB475; + width: 30px; + height: 30px; + color: #3fae2a; + border: 2px solid #3fae2a; border-radius: 50%; - font-size: 12px; + font-size: 16px; font-style: inherit; - color: #1EB475; - background-color: #323544; + background-color: #333; } .wizard .wizard-body .wizard-nav .nav li .step-name { font-family: 'Roboto', sans-serif; font-weight: normal; font-style: normal; - line-height: 1; - color: #333; - font-size: 14px; + line-height: 1.3; + font-size: 16px; color: #999; - margin-left: 30px; + margin-left: 40px; + position: absolute; + top: 50%; + transform: translateY(-50%); } .wizard .wizard-body .wizard-nav .nav li .step-index { - line-height: 18px; + position: absolute; + top: calc(50% + 1px); + transform: translateY(-50%); + left: 0; + right: 0; } .wizard .wizard-body .wizard-nav .nav li .step-description { font-family: 'Roboto', sans-serif; font-weight: normal; font-style: normal; line-height: 1; - color: #333; font-size: 12px; color: #999; margin-left: 30px; } .wizard .wizard-body .wizard-nav .nav li.completed .step-marker { - background-color: #1EB475; + background-color: #3fae2a; color: white; font-size: 10px; padding-left: 2px; @@ -667,20 +675,23 @@ h2.table-title { position: absolute; } .wizard .wizard-body .wizard-nav .nav li.completed .step-marker:after { - font-family: "Glyphicons Halflings"; - content: "\e013"; - position: relative; - top: 1px; - left: -1px; + position: absolute; + top: calc(50% + 1px); + transform: translateY(-50%); + left: 1px; + right: 0; + font-family: "FontAwesome"; + font-size: 16px; + content: "\f00c"; } .wizard .wizard-body .wizard-nav .nav li.completed:after { width: 2px; height: 100%; position: absolute; - background-color: #1EB475; + background-color: #3fae2a; content: ""; - top: 25px; - left: 29px; + top: 30px; + left: 14px; } .wizard .wizard-body .wizard-nav .nav li.completed:last-child:after { content: none; @@ -697,8 +708,8 @@ h2.table-title { color: #666; } .wizard .wizard-body .wizard-nav .nav li.disabled.completed .step-marker { - background-color: #1EB475; - border: 2px solid #1EB475; + background-color: #3fae2a; + border: 2px solid #3fae2a; color: white; } .wizard .wizard-body .wizard-nav .nav-pills > li.active > a, @@ -710,10 +721,13 @@ h2.table-title { } .wizard .wizard-body .wizard-footer { background: white; - padding: 15px 20px; -} -.wizard .wizard-body .wizard-footer button { - margin: 0 10px; + padding-right: 30px; + padding-left: 30px; + padding-top: 15px; + padding-bottom: 15px; + position: absolute; + bottom: 0; + left: 0; } .checkbox-disabled-style { background-color: #b2b8c1; @@ -769,12 +783,13 @@ input[type="checkbox"] + label:before { border-color: #ddd; } input[type="checkbox"]:checked + label:after { - content: '\2714'; + content: '\f00c'; color: #FFF; position: absolute; top: 0; - left: 2px; + left: 1px; font-size: 9px; + font-family: 'FontAwesome'; } input[type="radio"] + label:before, input.radio + label:before { @@ -1513,7 +1528,7 @@ body, .description { font-family: 'Roboto', sans-serif; font-size: 12px; - color: #000; + color: #666; } a, a:visited, diff --git a/ambari-web/app/styles/wizard.less b/ambari-web/app/styles/wizard.less index d48a8b786e9..ab4de6c9f42 100644 --- a/ambari-web/app/styles/wizard.less +++ b/ambari-web/app/styles/wizard.less @@ -49,7 +49,7 @@ border-left: none; border-right: none; } - padding: 25px; + padding: 30px; background-color: #fff; } @@ -566,62 +566,94 @@ max-height: 440px; } -#download-step-content { - .panel-body .version-contents-body { - padding: 10px 0px 20px 0; - tbody > tr { - height:40px; - td { - vertical-align: middle; - padding: 6px; - button { - padding: 2px 8px; - font-size: 12px; - line-height: 1.5; - height: 25px; - } - } - .download-status { - font-size: 11px; - .progress-wrapper { - padding:0px; - .progress { - height:8px; - margin:5px 5px 5px 0; - .progress-bar { - width:100%; - } - } - } - } +#select-mpacks { + .selected-list { + background-color: #fafafa; + } + + .capsule { + background-color: #ddd; + margin-bottom: 5px; + outline: none; + &:hover { + background-color: #ccc; } } -} -#select-mpacks { - .selected-list { - background-color: #f5f5f5; - .panel-heading { - background-color: #f5f5f5; + #registry { + .option { + padding-right: 60px; } - .capsule { - background-color: #ddd; + } + + .option { + + .option-title { + margin-right: 15px; + + select { + outline: none; + border: none; + background-color: inherit; + color: #1491c1; + margin-left: -8px; + cursor: pointer; + } } - .empty-selection { - padding: 40px; - font-size: 11px; - font-style: italic; - color: #999; + + .option-description { + color: #666; } - } - .options-list, .selected-list { - margin-bottom: 20px; - .mpack-body { - padding: 15px 0px; - border-bottom: 1px solid; - border-color: #f0f0f0; - .mpack-title { - font-size: 12px; + + position: relative; + padding: 15px; + border-bottom: 1px solid; + border-color: #ddd; + &:hover { + background-color: #eee; + } + .option-add-button { + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 20px; + height: 30px; + width: 30px; + padding: 0; + border-style: solid; + border-radius: 50%; + outline: none; + &.checked:after { + content: '\f00c'; + } + &:after { + position: absolute; + top: calc(~"50% + 1px"); + transform: translateY(-50%); + left: -1px; + right: 0; + content: '\f067'; + font-family: 'FontAwesome'; + } + } + .option-remove-button { + position: absolute; + top: 15px; + right: 15px; + outline: none; + border: none; + padding: 0; + background-color: inherit; + &:hover { + &:after { + color: #666; + } + } + &:after { + font-family: 'FontAwesome'; + content: '\f00d'; + color: #999; + } } } @@ -663,7 +695,7 @@ } } -#select-stack { +#configure-download { .stacks-options { margin-bottom: 30px; } @@ -684,111 +716,140 @@ } } } - .repos-panel { - .version-contents-body { - padding: 0px 10px; - .radio-group { - padding-bottom: 10px; - color: #666; - .local-radio { - cursor: not-allowed - } - .radio.big-radio { - height: 100px; - background-color: #dddddd; - width: 120px; - margin: 15px; - padding-left: 0; - padding-right: 0; - border-radius: 2px; - p { - display: none; - font-size: 11px; - text-align: center; - padding: 0 5px 10px 5px; - line-height: 1.2em; - } - input[type="radio"] + label, p, .repo-group, { - cursor: default; - } - input[type="radio"] + label:before { - border-color: #999; - background-color: #fff; - } - input[type="radio"]:checked + label:before { - background: #fff; - border-color: #3FAE2A; - } - input[type="radio"]:checked + label:after { - background-color: #3FAE2A; - } - .repo-checkbox { - padding: 0 10px; - } - .icon { - font-size: 36px; - text-align: center; - position: absolute; - top: 20px; - padding: 0 20px; - width: 100%; - color: #fff; - } - .repo-group { - bottom: 0px; - position: absolute; - background-color: #3FAE2A; - color: white; - padding: 5px 10px; - width: 100%; - font-size: 12px; - text-align: center; - border-radius: 2px; - } - } - //for now only allow the public repo to show info on hover - //.radio:hover { - .public-radio:hover { - border: 2px solid #32BEBC; - p { - display:block; - } - .icon, .repo-group { - opacity: 0.1; - } + + .radio-group { + padding-bottom: 10px; + color: #666; + .big-radio { + display: inline-block; + height: 134px; + background-color: #ddd; + margin: 15px; + padding-left: 0; + padding-right: 0; + border-radius: 4px; + position: relative; + cursor: default; + .description { + visibility: hidden; + z-index: 999; + //border: 2px solid #1491c1; + border-radius: 4px; + background-color: #dddd; + top: 0; + bottom: 0; + left: 0; + right: 0; + position: absolute; + text-align: center; + span { + display: block; + position: absolute; + left: 0; + right: 0; + top: 50%; + transform: translateY(-50%); + padding: 0 15px; + font-size: 14px; } } + input[type="radio"] + label { + position: absolute; + z-index: 1000; + cursor: default; + } + input[type="radio"] + label:before { + border-width: 0; + background-color: #fff; + top: 10px; + left: 10px; + height: 12px; + width: 12px; + } + input[type="radio"]:checked + label:before { + background: #fff; + border-width: 4px; + border-color: #1491c1; + } + input[type="radio"]:checked + label:after { + display: none; + } + .icon { + font-size: 48px; + text-align: center; + position: absolute; + top: 26px; + color: #fff; + width: 100%; + } + .big-radio-label { + top: 96px; + position: relative; + background-color: #3FAE2A; + color: #fff; + padding: 10px 20px; //same as button padding + text-align: center; + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + white-space: nowrap; + } } - table > tbody > tr > td { - vertical-align: middle; - } - .remove-icon { - color: red; - margin: 30px 0; - text-align: center; - display: inline-block; - &.disabled { - color: grey; + + .big-radio:hover { + input[type="radio"]:not(:checked) + label:before { + background-color: #1491c1; + } + .description { + visibility: visible; } } - .repo-url input { - width: 90%; + } + + table > tbody > tr > td { + vertical-align: middle; + } + .remove-icon { + color: red; + margin: 30px 0; + text-align: center; + display: inline-block; + &.disabled { + color: grey; } - #skip-validation, #use-redhat { - label { - color: #666; - font-weight: normal; - margin-top: -2px; - &.disabled { - opacity: 0.7; - } + } + .repo-url input { + width: 90%; + } + #skip-validation, #use-redhat { + label { + color: #666; + font-weight: normal; + margin-top: -2px; + &.disabled { + opacity: 0.7; } } } + +} + +#customMpackRepos, +#downloadMpacks { + .table.table-hover > tbody { + > tr > td { + vertical-align: middle; + } + } } -#customProductRepos, #verifyProductRepos { +#customProductRepos, +#verifyProductRepos { .table.table-hover > tbody { + > tr > td { + border-width: 0; + } > tr, > tr:hover > td { border-width: 0; } @@ -801,6 +862,22 @@ } } +#downloadMpacks, +#verifyProductRepos { + .download-status { + .progress-wrapper { + padding:0px; + .progress { + height:8px; + margin:5px 5px 5px 0; + .progress-bar { + width:100%; + } + } + } + } +} + @media all and (max-width: 2560px) { .wizard-content { #serviceConfig { @@ -817,4 +894,10 @@ } } } +} + +#useCaseHeader { + flex: auto; + margin-right: 10px; + text-align: left; } \ No newline at end of file diff --git a/ambari-web/app/templates/installer.hbs b/ambari-web/app/templates/installer.hbs index d93e55d0ffb..bcd41f16c82 100644 --- a/ambari-web/app/templates/installer.hbs +++ b/ambari-web/app/templates/installer.hbs @@ -22,7 +22,7 @@ {{else}}
-
+

  1. {{t installer.step0.header}}

    2. diff --git a/ambari-web/app/templates/wizard/configureDownload.hbs b/ambari-web/app/templates/wizard/configureDownload.hbs index 37842c2c48f..9cc9b8aac2d 100644 --- a/ambari-web/app/templates/wizard/configureDownload.hbs +++ b/ambari-web/app/templates/wizard/configureDownload.hbs @@ -15,69 +15,69 @@ * See the License for the specific language governing permissions and * limitations under the License. }} -
    -

    {{t installer.configureDownload.header}}

    +
    +

    {{t installer.configureDownload.header}}

    {{#if App.router.nextBtnClickInProgress}} {{view App.SpinnerView}} {{else}} -
    -
    -

    {{t installer.configureDownload.body.title}}

    +

    {{t installer.configureDownload.body.description}}

    +
    + {{! Public Repo radio button }} +
    + {{view App.RadioButtonView selectionBinding="controller.content.downloadConfig.useCustomRepo" valueBinding="App.False"}} +
    {{t installer.configureDownload.publicRepo.description}}
    + +
    {{t installer.configureDownload.publicRepo}}
    -

    {{t installer.configureDownload.body.description}}

    -
    -
    - {{! Public Repo radio button }} -
    - {{view App.RadioButtonView checkboxClassNames="repo-checkbox" selectionBinding="controller.content.downloadConfig.useCustomRepo" valueBinding="App.False"}} -

    {{t installer.configureDownload.publicRepo.description}}

    - -
    {{t installer.configureDownload.publicRepo}}
    -
    - {{! Custom Repo radio button }} -
    - {{view App.RadioButtonView checkboxClassNames="repo-checkbox" selectionBinding="controller.content.downloadConfig.useCustomRepo" valueBinding="App.True"}} -

    {{t installer.configureDownload.customRepo.description}}

    - -
    {{t installer.configureDownload.customRepo}}
    -
    -
    + {{! Custom Repo radio button }} +
    + {{view App.RadioButtonView selectionBinding="controller.content.downloadConfig.useCustomRepo" valueBinding="App.True"}} +
    {{t installer.configureDownload.customRepo.description}}
    + +
    {{t installer.configureDownload.customRepo}}
    +
    +
    +
    +
    {{! Red Hat Satellite checkbox }} {{#if controller.content.downloadConfig.useCustomRepo}} {{view App.CheckboxView id="useRedHat" checkedBinding="controller.content.downloadConfig.useRedHatSatellite" labelTranslate="installer.configureDownload.useRedHatSatellite" changeBinding="view.useRedHatSatelliteChanged"}} {{/if}} +
    +
    {{! Use Proxy checkbox }} {{#unless controller.content.downloadConfig.useRedHatSatellite}} {{view App.CheckboxView id="useProxy" checkedBinding="controller.content.downloadConfig.useProxy" labelTranslate="installer.configureDownload.useProxy" changeBinding="view.useProxyChanged"}} - {{#if controller.content.downloadConfig.useProxy}} -
    -
    - - {{view Em.TextField id="proxyUrl" class="form-control" placeholderBinding="view.proxyUrlPlaceholder" valueBinding="controller.content.downloadConfig.proxyUrl" changeBinding="view.proxyUrlChanged"}} -
    -
    - - -
    - -
    - {{/if}} - {{/unless}}
    + {{#if controller.content.downloadConfig.useProxy}} +
    +
    + + {{view Em.TextField id="proxyUrl" class="form-control" placeholderBinding="view.proxyUrlPlaceholder" valueBinding="controller.content.downloadConfig.proxyUrl" changeBinding="view.proxyUrlChanged"}} +
    +
    + + +
    + +
    + {{/if}} + {{/unless}} {{/if}}
    +
    - -
    -
    - {{#if controller.content.advancedMode}} -
    -
    - {{#if controller.content.mpacks}} - {{#each mpack in controller.content.mpacks}} - {{view App.WizardMpackView mpackBinding="mpack"}} - {{/each}} +
    +
    + + {{#if controller.content.advancedMode}} + + {{else}} + + {{/if}}
    -
    -
    - {{#if controller.content.mpackServices}} +
    + {{#if controller.content.advancedMode}} +
    +
    + {{#if controller.content.mpacks}} + {{#each mpack in controller.content.mpacks}} + {{view App.WizardMpackView mpackBinding="mpack"}} + {{/each}} + {{else}} +
    {{t installer.selectMpacks.noMpacksAvailable}}
    + {{/if}} +
    +
    +
    +
    + {{#if controller.content.mpackServices}} {{#each service in controller.content.mpackServices}} - {{view App.WizardServiceView serviceBinding="service"}} + {{view App.WizardServiceView serviceBinding="service"}} {{/each}} - {{else}} - {{t installer.selectMpacks.noServicesAvailable}} - {{/if}} + {{else}} +
    {{t installer.selectMpacks.noServicesAvailable}}
    + {{/if}} +
    -
    - {{else}} -
    -
    - {{#if controller.content.mpackUsecases}} + {{else}} +
    +
    + {{#if controller.content.mpackUsecases}} {{#each usecase in controller.content.mpackUsecases}} - {{view App.WizardUsecaseView usecaseBinding="usecase"}} + {{view App.WizardUsecaseView usecaseBinding="usecase"}} {{/each}} - {{else}} - {{t installer.selectMpacks.noUsecasesAvailable}} - {{/if}} + {{else}} +
    {{t installer.selectMpacks.noUsecasesAvailable}}
    + {{/if}} +
    + {{/if}}
    - {{/if}}
    -
    - -
    -
    -

    {{t installer.selectMpacks.body.selected.header}} ({{controller.selectedMpackVersions.length}})

    + +
    +
    {{t installer.selectMpacks.body.selected.header}} ({{controller.selectedMpackVersions.length}})
    +
    + {{#if controller.hasSelectedMpackVersions}} + {{#each mpackVersion in controller.selectedMpackVersions}} + {{view App.WizardSelectedMpackVersionView mpackVersionBinding="mpackVersion"}} + {{/each}} + {{else}} + {{#if controller.noRecommendationAvailable}} +
    {{t installer.selectMpacks.noRecommendationAvailable}}
    + {{else}} +
    {{t installer.selectMpacks.noMpacksSelected}}
    + {{/if}} + {{/if}} +
    - {{#if controller.hasSelectedMpackVersions}} - {{#each mpackVersion in controller.selectedMpackVersions}} - {{view App.WizardSelectedMpackVersionView mpackVersionBinding="mpackVersion"}} - {{/each}} - {{else}} - {{#if controller.noRecommendationAvailable}} -
    {{t installer.selectMpacks.noRecommendationAvailable}}
    - {{else}} -
    {{t installer.selectMpacks.noMpacksSelected}}
    - {{/if}} - {{/if}} -
    diff --git a/ambari-web/app/templates/wizard/selectMpacks/mpack.hbs b/ambari-web/app/templates/wizard/selectMpacks/mpack.hbs index e2bed326da5..caae17ec86a 100644 --- a/ambari-web/app/templates/wizard/selectMpacks/mpack.hbs +++ b/ambari-web/app/templates/wizard/selectMpacks/mpack.hbs @@ -15,28 +15,32 @@ * See the License for the specific language governing permissions and * limitations under the License. }} -
    -