Skip to content

[AMBARI-22804] Install Wizard final deployment of services from multiple mpacks #199

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ishanbha merged 18 commits into from
Jan 30, 2018
Merged

[AMBARI-22804] Install Wizard final deployment of services from multiple mpacks #199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
55a6508
AMBARI-22802 Styling for install wizard
Jan 17, 2018
053ee22
Install services from multiple mpacks. Service groups are created wit…
Jan 18, 2018
e9d71b6
Merge branch 'branch-feature-AMBARI-14714-ui' into AMBARI-22804_multi…
Jan 19, 2018
6c25530
Fixed unit tests.
Jan 19, 2018
b587381
Moved style changes out of bootstrap-ambari.css
Jan 22, 2018
c80d437
Merge branch 'branch-feature-AMBARI-14714-ui' into AMBARI-22802
Jan 22, 2018
1f0da9c
Merge branch 'AMBARI-22802' into AMBARI-22804_multi-mpack-deployment
Jan 22, 2018
e415b97
Additional style tweaks.
Jan 23, 2018
ee65609
Additional style tweaks.
Jan 23, 2018
cdcd8a2
Merge branch 'branch-feature-AMBARI-14714-ui' into AMBARI-22802
Jan 23, 2018
83fdff8
Restore line removed by wrong conflict resolution.
Jan 23, 2018
cc734cc
Merge branch 'AMBARI-22802' into AMBARI-22804_multi-mpack-deployment
Jan 23, 2018
4a64a5e
More style tweaks.
Jan 23, 2018
3af294b
Moved tooltip activation to individual components.
Jan 24, 2018
dbeb8f1
Merge branch 'AMBARI-22802' into AMBARI-22804_multi-mpack-deployment
Jan 24, 2018
2cffe9e
Merge branch 'branch-feature-AMBARI-14714-ui' into AMBARI-22804_multi…
Jan 25, 2018
4a231be
Merge branch 'branch-feature-AMBARI-14714-ui' into AMBARI-22804_multi…
Jan 25, 2018
6b9fc3d
Merge branch 'branch-feature-AMBARI-14714-ui' into AMBARI-22804_multi…
Jan 29, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 2 additions & 5 deletions ambari-web/app/controllers/installer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1523,11 +1523,8 @@ App.InstallerController = App.WizardController.extend(App.Persist, {
this.set('content.clients', clients);
this.save('clients');

//TODO: mpacks
// - for now, pull the stack from the single mpack that we can install
// - when we can support multiple mpacks, make this an array of selectedStacks (or just use the selectedServices array?) and add the repo data to it
const selectedService = selectedServices[0];
this.set('content.selectedStack', { name: selectedService.stackName, version: selectedService.stackVersion });
//TODO: mpacks - hard coding this for now. We need to get rid of the concept of "selected stack".
this.set('content.selectedStack', { name: "HDP", version: "3.0.0" });
this.save('selectedStack');
});
});
Expand Down
2 changes: 0 additions & 2 deletions ambari-web/app/controllers/wizard/downloadMpacks_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,8 +118,6 @@ App.WizardDownloadMpacksController = App.WizardStepController.extend({
)
);

//TODO: mpacks
//var versionData = installerController.getSelectedRepoVersionData(); //This would be used to post a VDF xml for a local repo (I think), but do we still need to do this when we will just be using mpacks?
$.when(...stackVersionsRegistered).always(() => { //this uses always() because the api call made by createMpackStackVersion will return a 500 error
//if the stack version has already been registered, but we want to proceed anyway
App.router.send('next');
Expand Down
2 changes: 1 addition & 1 deletion ambari-web/app/controllers/wizard/selectMpacks_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ App.WizardSelectMpacksController = App.WizardStepController.extend({
const mpacks = this.get('content.mpacks');

if (mpacks) {
//TODO: mpacks - reinstate this if/when the test runner can handle it
//reinstate this if/when the test runner can handle for..of loops
//for (let mpack of mpacks) {
//if (mpack.get('name') === mpackName) {
// return mpack.get('versions')[0]; //TODO: mpacks - change this to the last item when sort order is fixed
Expand Down
90 changes: 51 additions & 39 deletions ambari-web/app/controllers/wizard/step8_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ App.WizardStep8Controller = App.WizardStepController.extend(App.AddSecurityConfi
getSelectedStack: function() {
const selectedStack = this.get('content.selectedStack');
const stack = this.get('wizardController').getStack(selectedStack.name, selectedStack.version);
return stack;
return stack;
},

installedServices: function() {
Expand Down Expand Up @@ -916,32 +916,13 @@ App.WizardStep8Controller = App.WizardStepController.extend(App.AddSecurityConfi
}
},

/**
* To Start deploy process
* @method startDeploy
*/
//TODO: mpacks
startDeploy: function () {
const self = this;

if (!this.get('isInstaller')) {
this._startDeploy();
} else {
const selectedStack = this.getSelectedStack();
//skip this because we already updated the repo URLs if they were customized in the customProductRepos step's submit action
//this.get('wizardController').updateRepoOSInfo({ id: selectedStack.get('id'), stackName: selectedStack.get('stackName'), stackVersion: selectedStack.get('stackVersion') }, selectedStack).done(function() {
self._startDeploy();
//});
}
},

/**
* Start deploy process
* @method startDeploy
*/
_startDeploy: function () {
startDeploy: function () {
this.createCluster();
this.createServiceGroup();
this.createServiceGroups();
this.createSelectedServices();
if (!this.get('isAddHost')) {
if (this.get('isAddService')) {
Expand Down Expand Up @@ -983,7 +964,6 @@ App.WizardStep8Controller = App.WizardStepController.extend(App.AddSecurityConfi
* Queued request
* @method createCluster
*/
//TODO: mpacks
createCluster: function () {
if (!this.get('isInstaller')) return;
const selectedStack = this.getSelectedStack()
Expand All @@ -1001,18 +981,45 @@ App.WizardStep8Controller = App.WizardStepController.extend(App.AddSecurityConfi
},

/**
* Creates the servcegroup
* Creates one service group per mpack.
* Skip if no mpacks were selected.
* Queued request
* @method createServiceGroup
*/
createServiceGroup: function () {
createServiceGroups: function () {
if (!this.get('isInstaller')) return;
this.addRequestToAjaxQueue({
name: 'wizard.step8.create_service_group',
data: {
data: JSON.stringify({ "ServiceGroupInfo": { "cluster_name": App.get('clusterName') || App.clusterStatus.get('clusterName'), "service_group_name": App.get('defaultServiceGroupName') }})
}
});

var data = this.createServiceGroupsData();
if (data) {
this.addRequestToAjaxQueue({
name: 'wizard.step8.create_service_group',
data: {
data: JSON.stringify(data)
}
});
}
},

/**
* Format data for <code>createServiceGroups</code> request
* @returns {Object[]}
* @method createServiceGroupsData
*/
createServiceGroupsData: function () {
const mpacks = this.get('selectedMpacks');

if (mpacks) {
const serviceGroups = mpacks.map(mpack => ({
"ServiceGroupInfo": {
"service_group_name": `${mpack.name}-${mpack.version}`,
}
})
);

return serviceGroups;
}

return null;
},

/**
Expand All @@ -1037,15 +1044,20 @@ App.WizardStep8Controller = App.WizardStepController.extend(App.AddSecurityConfi
* @returns {Object[]}
* @method createSelectedServicesData
*/
//TODO: mpacks
createSelectedServicesData: function () {
var selectedStack;
if (this.get('isInstaller')) {
selectedStack = this.getSelectedStack();
}
return this.get('selectedServices').map(service => selectedStack ?
{"ServiceInfo": { "service_name": service.get('serviceName'), "service_type": service.get('serviceName'), "service_group_name": App.get('defaultServiceGroupName'), "desired_repository_version_id": selectedStack.get('id') }} :
{"ServiceInfo": { "service_name": service.get('serviceName'), "service_type": service.get('serviceName'), "service_group_name": App.get('defaultServiceGroupName'), }});
const services = this.get('selectedServices');
const data = services.map(service => ({
"ServiceInfo": {
"service_name": service.get('serviceName'),
"service_type": service.get('serviceName'),
//TODO: mpacks - needs to be revisited when we are no longer hard coding service groups to be named
// for mpacks and when the concept of a "selected stack" is no longer a thing
"service_group_name": `${service.get('stackName')}-${service.get('stackVersion')}`,
"desired_stack": `${service.get('stackName')}-${service.get('stackVersion')}`,
}
})
);
return data;
},

/**
Expand Down
1 change: 0 additions & 1 deletion ambari-web/app/messages.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -591,7 +591,6 @@ Em.I18n.translations = {
'installer.header':'Cluster Install Wizard',
'installer.navigation.warning.header':'Navigation Warning',
'installer.navigation.warning':'If you make changes to a previous step you will lose any changes saved in subsequent steps.',
'installer.warning.changes.header':'Warning',
'installer.warning.changes':'If you make changes to this step you will lose any changes saved in subsequent steps.',
'installer.noHostsAssigned':'No host assigned',
'installer.slaveComponentHosts.selectHosts':'select hosts for this group',
Expand Down
7 changes: 5 additions & 2 deletions ambari-web/app/models/repository.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,8 +80,11 @@ App.Repository = DS.Model.extend({
* @type {boolean}
*/
showRepo: function () {
const isGPLAccepted = App.router.get('clusterController.ambariProperties')['gpl.license.accepted'] === 'true';
return isGPLAccepted || !this.get('isGPL');
const ambariProperties = App.router.get('clusterController.ambariProperties');
if (ambariProperties && ambariProperties['gpl.license.accepted'] === true) {
return true;
}
return !this.get('isGPL');
}.property('isGPL'),

undo: Em.computed.notEqualProperties('baseUrl', 'baseUrlInit'),
Expand Down
16 changes: 11 additions & 5 deletions ambari-web/app/styles/application.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2825,12 +2825,13 @@ a.abort-icon:hover {
font-style: normal;
}
}

.display-flex {
display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex !important;
display: -webkit-flex !important;
display: -moz-flex !important;
display: -ms-flex !important;
display: -o-flex !important;
&.direction-row {
flex-direction: row;
}
Expand All @@ -2843,8 +2844,13 @@ a.abort-icon:hover {
&.justify-center {
justify-content: center;
}

.flex-fill {
flex: auto;
}
}


.no-data {
position: absolute;
color: #ccc;
Expand Down
1 change: 1 addition & 0 deletions ambari-web/app/styles/bootstrap_overrides.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -506,6 +506,7 @@ select.form-control {
background-color: inherit;
}
.wizard .wizard-body .wizard-nav {
min-width: 250px;
Copy link
Contributor

@atkach atkach Jan 26, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On narrow screen wizard-body will jump to bottom, better to leave previous styles

Copy link
Author

@jgolieb jgolieb Jan 26, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, my changes ensure that the wizard-body stays where it should even if the screen is very narrow (although hopefully nobody is using Ambari on that small of a screen, since the UI is really not designed for it).

image

padding: 30px;
background-color: #333;
margin-bottom: 0;
Expand Down
30 changes: 13 additions & 17 deletions ambari-web/app/styles/wizard.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -873,7 +873,7 @@
}
input[type="radio"]:checked + label:before {
background: #fff;
border-width: 4px;
border-width: 3px;
border-color: #1491c1;
}
input[type="radio"]:checked + label:after {
Expand Down Expand Up @@ -945,6 +945,7 @@
.table.table-hover > tbody {
> tr > td {
vertical-align: middle;
line-height: 20px;
}
}
}
Expand All @@ -954,6 +955,7 @@
.table.table-hover > tbody {
> tr > td {
border-width: 0;
line-height: 20px;
}
> tr, > tr:hover > td {
border-width: 0;
Expand All @@ -969,16 +971,11 @@

#downloadMpacks,
#verifyProductRepos {
.download-status {
.progress-wrapper {
padding:0px;
.progress {
height:8px;
margin:5px 5px 5px 0;
.progress-bar {
width:100%;
}
}
.progress {
width: 75%;
margin: 0;
.progress-bar {
width: 100%;
}
}
}
Expand All @@ -995,12 +992,6 @@
padding: 0;
.wizard {
border: none;
.wizard-nav {
width: 250px;
}
.wizard-content.col-md-9 {
width: calc(~"100% - 250px");
}
}
}
}
Expand All @@ -1027,4 +1018,9 @@
flex: auto;
margin-right: 10px;
text-align: left;
}

.dropdown-menu input[type="checkbox"]:checked + label:after,
.table input[type="checkbox"]:checked + label:after {
line-height: 2;
}
10 changes: 5 additions & 5 deletions ambari-web/app/templates/common/assign_master_components.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,17 @@
}}
<div id="assign-masters" class="wizard-content col-md-9">
{{#if view.showTitle}}
<h4 class="step-header">{{view.title}}</h4>
<h4 class="step-title">{{view.title}}</h4>
{{/if}}
<p class="step-description">
{{{view.alertMessage}}}
</p>
{{#if isSaved}}
<div class="alert alert-warning" role="alert"><strong>{{t installer.warning.changes.header}}</strong> {{t installer.warning.changes}}</div>
<div class="alert alert-warning" role="alert"><strong>{{t common.warning}}:</strong> {{t installer.warning.changes}}</div>
{{/if}}

<div class="panel panel-default">
<div class="panel-body">
<p class="step-description">
{{{view.alertMessage}}}
</p>
{{#each msg in controller.generalErrorMessages}}
<div class="alert alert-danger">{{msg}}</div>
{{/each}}
Expand Down
12 changes: 7 additions & 5 deletions ambari-web/app/templates/wizard/downloadMpacks.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,8 @@
<td class="col-sm-6">{{mpack.displayName}}&nbsp;{{mpack.version}}</td>
<td class="download-status col-sm-4">
{{#if mpack.inProgress}}
<div class="progress-wrapper">
<div class="progress">
<div class="active progress-bar-striped progress-bar"}}></div>
</div>
<div class="progress">
<div class="active progress-bar-striped progress-bar"></div>
</div>
{{else}}
{{#if mpack.succeeded}}
Expand All @@ -56,7 +54,11 @@
</td>
<td class="col-sm-2">
<span data-toggle="tooltip" data-placement="bottom" {{translateAttr title="common.retry"}}>
<button type="button" class="icon-button retry-button" {{bindAttr disabled="mpack.succeeded"}} {{action retryDownload mpack target="controller"}}></button>
{{#if mpack.failed}}
<button type="button" class="icon-button retry-button" {{action retryDownload mpack target="controller"}}></button>
{{else}}
<button type="button" class="icon-button retry-button" disabled="disabled"></button>
{{/if}}
</span>
Copy link
Contributor

@ishanbha ishanbha Jan 29, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMO we can directly bind it and use bootstrap classes instead.
{{bindAttr class=":btn :btn-default :retry-button mpack.failed::disabled"}}

Copy link
Contributor

@ishanbha ishanbha Jan 30, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mpack.failed:disabled would have inverted the logic. mpack.failed::disabled disables it when mpack.failed is false. So as long as the value of mpack.failed is false (or null) the button would remain disabled, doesn't matter it is in-progress or it succeeds. Your if else code above is also doing the exact same thing

Copy link
Author

@jgolieb jgolieb Jan 30, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried this suggestion and a couple other options, including binding the disabled attribute directly, but the results were not satisfactory. It looks like in this specific situation, the existing code is a satisfactory solution, if not the most elegant.

</td>
</tr>
Expand Down
10 changes: 5 additions & 5 deletions ambari-web/app/templates/wizard/selectMpacks.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@
<div id="select-mpacks" class="wizard-content col-md-9">
<h4 class="step-title">{{t installer.selectMpacks.body.header}}</h4>
{{#if isSaved}}
<div class="alert alert-warning" role="alert"><strong>{{t installer.warning.changes.header}}</strong> {{t installer.warning.changes}}</div>
<div class="alert alert-warning" role="alert"><strong>{{t common.warning}}:</strong> {{t installer.warning.changes}}</div>
{{/if}}
<div class="display-flex">
<!-- Registry -->
<div id="registry" class="panel panel-default col-md-8">
<div id="registry" class="panel panel-default col-md-8 display-flex direction-col">
<div class="panel-heading display-flex align-center">
<div id="useCaseHeader">
{{#if controller.content.advancedMode}}
Expand Down Expand Up @@ -51,7 +51,7 @@
<span class="more-info" data-toggle="tooltip" data-placement="bottom" {{translateAttr title="installer.selectMpacks.basicModeHelp"}}></span>
{{/if}}
</div>
<div class="panel-body tab-content">
<div class="panel-body tab-content flex-fill">
{{#if controller.content.advancedMode}}
<div role="tabpanel" class="tab-pane active" id="mpacks">
<div class="options-list">
Expand Down Expand Up @@ -91,9 +91,9 @@
</div>
</div>
<!-- Selection -->
<div class="panel panel-default col-md-4 selected-list">
<div class="panel panel-default col-md-4 selected-list display-flex direction-col">
<div class="panel-heading">{{t installer.selectMpacks.body.selected.header}}&nbsp;({{controller.selectedMpackVersions.length}})</div>
<div class="panel-body">
<div class="panel-body flex-fill">
{{#if controller.hasSelectedMpackVersions}}
{{#each mpackVersion in controller.selectedMpackVersions}}
{{view App.WizardSelectedMpackVersionView mpackVersionBinding="mpackVersion"}}
Expand Down
Loading