Skip to content

[AMBARI-22872] Register/Confirm Host for modular deployment. #225

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 5 commits into from
Feb 1, 2018
Merged

[AMBARI-22872] Register/Confirm Host for modular deployment. #225

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4df2dee
[AMBARI-22872] Register/Confirm Host for modular deployment.
ishanbha Jan 29, 2018
be0990f
Moved removeselectedhost function to the view and added a few tests
ishanbha Jan 30, 2018
410e383
Merge branch 'branch-feature-AMBARI-14714-ui' into AMBARI-22872-branc…
ishanbha Jan 31, 2018
99d5ed3
Minor tweaks
ishanbha Feb 1, 2018
86be553
Merge branch 'branch-feature-AMBARI-14714-ui' into AMBARI-22872-branc…
ishanbha Feb 1, 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
10 changes: 0 additions & 10 deletions ambari-web/app/controllers/wizard/step3_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -330,16 +330,6 @@ App.WizardStep3Controller = App.WizardStepController.extend(App.ReloadPopupMixin
this.removeHosts([hostInfo]);
},

/**
* Remove selected hosts (click-handler)
* @return App.ModalPopup
* @method removeSelectedHosts
*/
removeSelectedHosts: function () {
var selectedHosts = this.get('hosts').filterProperty('isChecked', true);
return this.removeHosts(selectedHosts);
},

/**
* Show popup with the list of hosts which are selected
* @return App.ModalPopup
Expand Down
7 changes: 2 additions & 5 deletions ambari-web/app/messages.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -821,8 +821,7 @@ Em.I18n.translations = {
'installer.step2.refresh.table': 'REFRESH TABLE',

'installer.step3.header':'Confirm Hosts',
'installer.step3.body':'Registering your hosts.<br>' +
'Please confirm the host list and remove any hosts that you do not want to include in the cluster.',
'installer.step3.body':'Registering your hosts. Please confirm the host list and remove any hosts that you do not want to include in the cluster.',
'installer.step3.hostLog.popup.header':'Registration log for {0}',
'installer.step3.hosts.remove.popup.header':'Remove Hosts',
'installer.step3.hosts.remove.popup.body':'Are you sure you want to remove the selected host(s)?',
Expand Down Expand Up @@ -942,8 +941,6 @@ Em.I18n.translations = {
'installer.step3.warning.registeredHosts': '{0} Other Registered Hosts',
'installer.step3.warning.loading':'Please wait while the hosts are being checked for potential problems...',
'installer.step3.registeredHostsPopup': 'These are the hosts that have registered with the server, but do not appear in the list of hosts that you are adding.',
'installer.step3.removeSelected':'Remove Selected',
'installer.step3.retryFailed':'Retry Failed',
'installer.step3.hosts.status.registering':'Registering',
'installer.step3.hosts.status.installing':'Installing',
'installer.step3.hosts.bootLog.failed':'\nRegistration with the server failed.',
Expand Down Expand Up @@ -3200,7 +3197,7 @@ Em.I18n.translations = {
'tableView.filters.all': 'All',
'tableView.filters.filtered': 'Filtered',
'tableView.filters.clearFilters': 'Clear filters',
'tableView.filters.itemsPerPage': 'Items per page:',
'tableView.filters.rowsPerPage': 'Rows per page:',
Copy link

@jgolieb jgolieb Jan 31, 2018

Choose a reason for hiding this comment

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

Not a fan of "Rows per page" as it is a bit too literal. "Items" wasn't much better. I would rather see this string be contextual, like "Hosts per page" or whatever the table rows represent.

Copy link
Contributor Author

@ishanbha ishanbha Jan 31, 2018

Choose a reason for hiding this comment

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

Currently the way this is implemented is using App.PaginationView which doesn't allow this customization, so this has to be generic (there could be tables not having any hosts but processes or services or components instead). We can of course change the way view is implemented to make it more customizable but that requires a larger effort and the change would need to be reflected in other parts of the code. We can leave it for now, and can re-visit it later if there is a more pressing need.

'tableView.filters.paginationInfo': '{0} - {1} of {2}',
'tableView.filters.clearAllFilters': 'clear filters',
'tableView.filters.showAll': 'Show All',
Expand Down
56 changes: 21 additions & 35 deletions ambari-web/app/styles/wizard.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,45 +236,18 @@
}

#host-filter {

ul {
margin: 3px;
font-size: 12px;
li.filter-status.active a {
text-decoration: none;
color: #fff;
}
li.filter-status.active,
li.filter-status.active:hover {
background-color: #666;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
border-radius: 5px;
}
li.filter-status:hover {
background-color: #d8d8d8;
border-radius: 5px;
}
li.divider {
color: #666;
padding: 4px 2px;
}
li {
list-style: none;
display: block;
float: left;
padding: 4px;
a {
text-decoration: underline;
}
}
li.first {
font-weight: bold;
}
padding-top: 5px;
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
background-color: transparent;
}
}
.progress {
margin-bottom: 0;
}
.pre-scrollable {
float: left;
max-height: 440px;
}
#confirm-hosts-table {
td.host {
max-width: 290px;
Expand All @@ -290,6 +263,19 @@
#display-action {
visibility:visible;
}
.step3-table-progress {
.progress {
height: 8px;
margin: 5px 5px 5px 0;
border-radius: 2px;
width: 80%;
}
}
.step3-table-action {
.icon {
color: #999;
}
}
}
Copy link

@jgolieb jgolieb Jan 31, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

We really need to standardize the styles around the icons in the Actions columns of tables. That's why I introduced the ".icon-button" and associated styles. Doesn't need to be done in this pull request, but we should restyle these for consistency whenever we come across them. Overly specific style rules like this shouldn't be necessary very often.

#warningsSection {
margin: 0px 10px;
Expand Down Expand Up @@ -1027,4 +1013,4 @@

.filter-input {
margin: 15px;
}
}
2 changes: 1 addition & 1 deletion ambari-web/app/templates/common/pagination.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
}}

<div class="pagination-block-item">
{{t tableView.filters.itemsPerPage}}
{{t tableView.filters.rowsPerPage}}
{{view view.rowsPerPageSelectView selectionBinding="view.dataView.displayLength" data-qa="pagination-select"}}
</div>
<div class="pagination-block-item">{{view.dataView.paginationInfo}}</div>
Expand Down
209 changes: 113 additions & 96 deletions ambari-web/app/templates/wizard/step3.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,137 +19,154 @@
<div id="confirm-hosts" class="wizard-content col-md-9">
<h4 class="step-title">{{t installer.step3.header}}</h4>
{{#if isSaved}}
<div class="alert alert-warning" role="alert"><strong>{{t common.warning}}:</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" {{QAAttr "step3-description"}}>{{t installer.step3.body}}</p>
<div class="panel-heading compact-panel-heading">
<div class="button-section">
{{#unless view.noHostsSelected}}
<button class="btn btn-primary" {{action removeSelectedHosts target="controller"}} {{QAAttr "remove-selected-button"}}>
<i class="glyphicon glyphicon-trash glyphicon-white"></i>
<span class="hidden-sm">{{t installer.step3.removeSelected}}</span>
<div class="pull-right btn-group">
<button class="dropdown-toggle btn btn-default" data-toggle="dropdown" href="#">
{{t common.actions}}
&nbsp;
<i class="caret"></i>
</button>
{{/unless}}
{{#unless isRetryDisabled}}
<button class="btn btn-primary" {{action retrySelectedHosts target="view"}} {{QAAttr "retry-failed-button"}}>
<i class="glyphicon glyphicon-repeat glyphicon-white"></i>
<span class="hidden-sm">{{t installer.step3.retryFailed}}</span>
</button>
{{/unless}}

<div id="host-filter" class="pull-right">
<ul class="clearfix">
<li class="first">{{t common.show}}:</li>
<ul class="dropdown-menu">
<li {{bindAttr class="view.noHostsSelected:disabled"}}>
<a {{bindAttr class="view.noHostsSelected:disabled"}} {{action removeSelectedHosts target="view"}}
{{QAAttr "remove-selected-button"}}>
<i class="glyphicon glyphicon-trash"></i>&nbsp;
{{t common.remove}}
</a>
</li>
<li {{bindAttr class="isRetryDisabled:disabled"}}>
<a {{bindAttr class="isRetryDisabled:disabled"}} {{action retrySelectedHosts target="view"}}
{{QAAttr "retry-failed-button"}}>
<i class="glyphicon glyphicon-repeat"></i>&nbsp;
{{t common.retry }}
</a>
</li>
</ul>
</div>
<div id="host-filter" class="pull-left">
<ul class="nav nav-tabs">
{{#each category in view.categories}}
<li {{bindAttr class=":filter-status category.itemClass"}}>
<a {{action selectCategory category target="view"}} {{QAAttr "hosts-filter-{category.hostsBootStatus}"}} href="#">
<a {{action selectCategory category target="view"}} {{QAAttr "hosts-filter-{category.hostsBootStatus}"}}
href="#">
{{category.label}}
</a>
</li>
{{#unless category.last}}
<li class="divider">|</li>
{{/unless}}
&nbsp;
{{/each}}
</ul>
</div>
</div>
<div class="clearfix"></div>
<div class="pre-scrollable col-sm-12" style="max-height: 440px;"></div>
<table id="confirm-hosts-table" class="table table-hover" {{QAAttr "confirm-hosts-table"}}>
<thead>
<tr>
<th class="col-md-5" {{QAAttr "confirm-hosts-table-heading-cell"}}>{{t common.host}}</th>
<!-- retrieved from local storage initially -->
<th class="col-md-2" {{QAAttr "confirm-hosts-table-heading-cell"}}>{{t common.progress}}</th>
<th class="col-md-2" {{QAAttr "confirm-hosts-table-heading-cell"}}>{{t common.status}}</th>
<!-- given by the parsing function that parses data from bootstrap call, dynamically assign the color -->
<th class="col-md-2" {{QAAttr "confirm-hosts-table-heading-cell"}}>{{t common.action}}</th>
<!-- trash icon -->
<!-- retry icon -->
<th {{QAAttr "confirm-hosts-table-heading-cell"}}>
{{view App.CheckboxView checkedBinding="view.pageChecked"}}
</th>
</tr>
</thead>
<tbody {{QAAttr "confirm-hosts-table-body"}}>
{{#if view.pageContent}}
{{#each host in view.pageContent}}
{{#view App.WizardHostView categoryBinding="controller.category" hostInfoBinding="host" data-qa="confirm-hosts-table-body-row"}}
<td class="host" {{QAAttr "confirm-hosts-table-body-cell"}}>
<span title="{{unbound host.name}}" class="trim_hostname" {{QAAttr "confirm-hosts-table-host-name"}}>{{host.name}}</span>
</td>
<td class="step3-table-progress" {{QAAttr "confirm-hosts-table-body-cell"}}>
<div class="progress">
<div {{bindAttr class="host.bootBarColor host.isBootDone::progress-bar-striped host.isBootDone::active :progress-bar"}}
{{QAAttr "{host.bootBarColor}"}}
style="width:100%">
</div>
<div class="panel-body">
<div class="pre-scrollable col-sm-12">
<table id="confirm-hosts-table" class="table table-hover" {{QAAttr "confirm-hosts-table"}}>
<thead>
<tr>
<th {{QAAttr "confirm-hosts-table-heading-cell"}}>
{{view App.CheckboxView checkedBinding="view.pageChecked"}}
</th>
<th class="col-md-6" {{QAAttr "confirm-hosts-table-heading-cell"}}>{{t common.host}}</th>
<!-- retrieved from local storage initially -->
<th class="col-md-3" {{QAAttr "confirm-hosts-table-heading-cell"}}>{{t common.progress}}</th>
<th class="col-md-2" {{QAAttr "confirm-hosts-table-heading-cell"}}>{{t common.status}}</th>
<!-- given by the parsing function that parses data from bootstrap call, dynamically assign the color -->
<th class="col-md-2" {{QAAttr "confirm-hosts-table-heading-cell"}}>{{t common.action}}</th>
<!-- trash icon -->
<!-- retry icon -->
</tr>
</thead>
<tbody {{QAAttr "confirm-hosts-table-body"}}>
{{#if view.pageContent}}
{{#each host in view.pageContent}}
{{#view App.WizardHostView categoryBinding="controller.category" hostInfoBinding="host" data-qa="confirm-hosts-table-body-row"}}
<td class="step3-table-checkbox" {{QAAttr "confirm-hosts-table-body-cell"}}>
{{view App.CheckboxView checkedBinding="host.isChecked" labelIdentifier="select-host-checkbox"}}
</td>
<td class="host" {{QAAttr "confirm-hosts-table-body-cell"}}>
<span title="{{unbound host.name}}"
class="trim_hostname" {{QAAttr "confirm-hosts-table-host-name"}}>{{host.name}}</span>
</td>
<td class="step3-table-progress" {{QAAttr "confirm-hosts-table-body-cell"}}>
<div class="progress">
<div {{bindAttr class="host.bootBarColor host.isBootDone::progress-bar-striped host.isBootDone::active :progress-bar"}}
{{QAAttr "{host.bootBarColor}"}}
style="width:100%">
</div>
</div>
</div>
</td>
<td class="step3-table-status" {{QAAttr "confirm-hosts-table-body-cell"}}>
<a href="javascript:void(null)" data-toggle="modal" {{action hostLogPopup host target="controller"}} {{QAAttr "host-status-link"}}>
<span {{bindAttr class="host.bootStatusColor"}} {{QAAttr "host-status-{host.bootStatus}"}}>{{host.bootStatusForDisplay}}</span>
</a>
</td>
<td class="step3-table-action" {{QAAttr "confirm-hosts-table-body-cell"}}>
<a class="action" id="display-action" href="#" {{action remove target="view"}} {{bindAttr disabled="isBackDisabled"}} {{QAAttr "remove-host-button"}}>
<i class="glyphicon glyphicon-trash" {{translateAttr title="common.remove"}}></i>
</a>
</td>
<td class="step3-table-checkbox" {{QAAttr "confirm-hosts-table-body-cell"}}>
{{view App.CheckboxView checkedBinding="host.isChecked" labelIdentifier="select-host-checkbox"}}
</td>
<td class="step3-table-status" {{QAAttr "confirm-hosts-table-body-cell"}}>
<a href="javascript:void(null)"
data-toggle="modal" {{action hostLogPopup host target="controller"}} {{QAAttr "host-status-link"}}>
<span {{bindAttr class="host.bootStatusColor"}} {{QAAttr "host-status-{host.bootStatus}"}}>{{host.bootStatusForDisplay}}</span>
</a>
</td>
<td class="step3-table-action" {{QAAttr "confirm-hosts-table-body-cell"}}>
<a class="action" id="display-action"
href="#" {{action remove target="view"}} {{bindAttr disabled="isBackDisabled"}} {{QAAttr "remove-host-button"}}>
<i class="icon icon-remove-sign" {{translateAttr title="common.remove"}}></i>
</a>
</td>
{{/view}}
{{/each}}
{{else}}
<tr {{QAAttr "confirm-hosts-table-body-row"}}>
<td class="step3-table-no-hosts" colspan="5" {{QAAttr "confirm-hosts-table-body-cell"}}>
{{t hosts.table.noHosts}}
</td>
{{/view}}
{{/each}}
{{else}}
<tr {{QAAttr "confirm-hosts-table-body-row"}}>
<td class="step3-table-no-hosts" colspan="5" {{QAAttr "confirm-hosts-table-body-cell"}}>
{{t hosts.table.noHosts}}
</td>
</tr>
{{/if}}
</tbody>
<tfoot>
</tr>
{{/if}}
</tbody>
<tfoot>
<tr>
<td colspan="5">
{{view App.PaginationView}}
</td>
</tr>
</tfoot>
</table>
<div id="warningsSection">
{{#if hasMoreRegisteredHosts}}
<div {{bindAttr class=":alert :alert-warning"}} {{QAAttr "alert-warning"}}>
<a href="#" {{action registeredHostsPopup target="controller"}} {{QAAttr "alert-link"}}><span {{QAAttr "other-hosts-link"}}>{{view.registeredHostsMessage}}</span></a>
</div>
{{/if}}
{{#unless disableHostCheck}}
<div {{bindAttr class=":alert :alert-warning view.status isWarningsBoxVisible::hidden"}} {{QAAttr "{view.status}"}}>
{{view.message}}
<a href="#" {{action hostWarningsPopup warnings target="controller"}} {{QAAttr "alert-link"}}>{{view.linkText}}</a>
{{#unless isBootstrapFailed}}
{{#unless isWarningsLoaded}}
{{view App.SpinnerView data-qa="spinner"}}
{{/unless}}
{{/unless}}
</div>
{{/unless}}
</tfoot>
</table>
</div>
</div>
<div id="warningsSection">
{{#if hasMoreRegisteredHosts}}
<div {{bindAttr class=":alert :alert-warning"}} {{QAAttr "alert-warning"}}>
<a href="#" {{action registeredHostsPopup target="controller"}} {{QAAttr "alert-link"}}><span {{QAAttr "other-hosts-link"}}>{{view.registeredHostsMessage}}</span></a>
</div>
{{/if}}
{{#unless disableHostCheck}}
<div {{bindAttr class=":alert :alert-warning view.status isWarningsBoxVisible::hidden"}} {{QAAttr "{view.status}"}}>
{{view.message}}
<a href="#" {{action hostWarningsPopup warnings target="controller"}} {{QAAttr "alert-link"}}>{{view.linkText}}</a>
{{#unless isBootstrapFailed}}
{{#unless isWarningsLoaded}}
{{view App.SpinnerView data-qa="spinner"}}
{{/unless}}
{{/unless}}
</div>
{{/unless}}
</div>
</div>
</div>
</div>

<div class="wizard-footer col-md-12">
<div class="btn-area">
<button type="button" class="btn btn-default pull-left installer-back-btn" {{bindAttr disabled="isBackButtonDisabled"}} {{action back}} {{QAAttr "wizard-back"}}>
<button type="button"
class="btn btn-default pull-left installer-back-btn" {{bindAttr disabled="isBackButtonDisabled"}} {{action back}} {{QAAttr "wizard-back"}}>
&larr; {{t common.back}}
{{#if App.router.backBtnClickInProgress}}
{{view App.SpinnerView tagName="span" classNames="service-button-spinner"}}
{{/if}}
</button>
<button type="button" class="btn btn-success pull-right" {{bindAttr disabled="isNextButtonDisabled"}} {{action submit target="controller"}} {{QAAttr "wizard-next"}}>
<button type="button"
class="btn btn-success pull-right" {{bindAttr disabled="isNextButtonDisabled"}} {{action submit target="controller"}} {{QAAttr "wizard-next"}}>
{{#if App.router.nextBtnClickInProgress}}
{{view App.SpinnerView tagName="span" classNames="service-button-spinner"}}
{{/if}}
Expand Down
Loading