This is an automated email from the ASF dual-hosted git repository.
atkach pushed a commit to branch trunk
in repository https://gitbox.apache.org/repos/asf/ambari.git
The following commit(s) were added to refs/heads/trunk by this push:
new fd4176e AMBARI-23358 Service page layout updates
fd4176e is described below
commit fd4176e7d698d6ec31ae91ac9a266643b16ac670
Author: Andrii Tkach <[email protected]>
AuthorDate: Mon Mar 26 15:12:21 2018 +0300
AMBARI-23358 Service page layout updates
---
ambari-web/app/assets/index.html | 2 +-
ambari-web/app/messages.js | 1 +
ambari-web/app/styles/application.less | 10 +-
.../templates/main/alerts/definition_details.hbs | 161 +++++++++++----------
.../main/charts/heatmap/heatmap_host_detail.hbs | 4 +
.../app/views/common/widget/heatmap_widget_view.js | 2 +-
.../app/views/main/charts/heatmap/heatmap_host.js | 35 +++--
.../common/widget/heatmap_widget_view_test.js | 4 +-
.../views/main/charts/heatmap/heatmap_host_test.js | 40 ++++-
9 files changed, 161 insertions(+), 98 deletions(-)
diff --git a/ambari-web/app/assets/index.html b/ambari-web/app/assets/index.html
index efd3c64..539a3e2 100644
--- a/ambari-web/app/assets/index.html
+++ b/ambari-web/app/assets/index.html
@@ -44,7 +44,7 @@
<!-- ApplicationView -->
</div>
<footer>
- <div class="container">
+ <div class="container footer-links">
<a data-qa="license-link"
href="http://www.apache.org/licenses/LICENSE-2.0"; target="_blank">Licensed
under the Apache License, Version 2.0</a>.<br>
<a data-qa="third-party-link" href="/licenses/NOTICE.txt"
target="_blank">See third-party tools/resources that Ambari uses and their
respective authors</a>
</div>
diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js
index 3efe86a..9b30f8f 100644
--- a/ambari-web/app/messages.js
+++ b/ambari-web/app/messages.js
@@ -1204,6 +1204,7 @@ Em.I18n.translations = {
'alerts.definition.details.notification': 'Notification',
'alerts.definition.details.noAlerts': 'No alert instances to display',
'alerts.definition.details.configs.thresholdsErrorMsg': 'Critical threshold
should be larger than warning threshold',
+ 'alerts.definition.details.infoSection': 'Alert Info',
'alerts.notifications.error.email': 'Must be a valid email address',
'alerts.notifications.error.integer': 'Must be an integer',
diff --git a/ambari-web/app/styles/application.less
b/ambari-web/app/styles/application.less
index 0d70ce4..43415dc 100644
--- a/ambari-web/app/styles/application.less
+++ b/ambari-web/app/styles/application.less
@@ -79,6 +79,9 @@ footer {
color: #666;
margin-top: -1 * @footer-height - 1;
height: @footer-height - 60px;
+ .footer-links {
+ font-size: @smaller-font-size;
+ }
}
.editable-list-container {
@@ -388,6 +391,11 @@ table.diff {
}
}
+.row.no-vertical-padding {
+ padding-top: 0;
+ padding-bottom: 0;
+}
+
.ru-badge {
text-align: center;
a:hover {
@@ -853,7 +861,7 @@ a:focus {
}
.col-md-3 {
- min-height: 100px;
+ min-height: 80px;
margin-left: 2px;
min-width: 180px;
}
diff --git a/ambari-web/app/templates/main/alerts/definition_details.hbs
b/ambari-web/app/templates/main/alerts/definition_details.hbs
index 6991efe..7423cb0 100644
--- a/ambari-web/app/templates/main/alerts/definition_details.hbs
+++ b/ambari-web/app/templates/main/alerts/definition_details.hbs
@@ -67,11 +67,11 @@
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading">
- <div class="row">
- <div class="pull-left col-md-7">
+ <div class="row no-vertical-padding">
+ <div class="col-md-7">
<h4 class="panel-title">{{t common.configuration}}</h4>
</div>
- <div class="pull-right col-md-5">
+ <div class="col-md-5">
{{#isAuthorized "SERVICE.TOGGLE_ALERTS"}}
{{#unless
App.router.mainAlertDefinitionConfigsController.canEdit}}
<a href="#" {{action editConfigs
target="App.router.mainAlertDefinitionConfigsController"}} class="pull-right
btn btn-link">
@@ -101,97 +101,102 @@
{{! Right column }}
<div class="col-md-4 right-column">
- <div class="properties-list background-text">
- <div class="row">
- <div class="col-md-5 property-name">{{t alerts.table.state}}:</div>
- <div class="col-md-7">
- {{#if controller.content.enabled}}
- {{#isAuthorized "SERVICE.TOGGLE_ALERTS"}}
- <a href="#" {{action "toggleState" controller.content
target="controller"}} {{bindAttr
class="controller.content.enabled:alert-definition-enable:alert-definition-disable"}}>
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ <h4 class="panel-title">{{t
alerts.definition.details.infoSection}}</h4>
+ </div>
+ <div class="properties-list background-text panel-body">
+ <div class="row">
+ <div class="col-md-5 property-name">{{t alerts.table.state}}:</div>
+ <div class="col-md-7">
+ {{#if controller.content.enabled}}
+ {{#isAuthorized "SERVICE.TOGGLE_ALERTS"}}
+ <a href="#" {{action "toggleState" controller.content
target="controller"}} {{bindAttr
class="controller.content.enabled:alert-definition-enable:alert-definition-disable"}}>
<span
- class="enable-disable-button" {{translateAttr
data-original-title="alerts.table.state.enabled.tooltip"}}>
+ class="enable-disable-button" {{translateAttr
data-original-title="alerts.table.state.enabled.tooltip"}}>
{{view.enabledDisplay}}
</span>
- </a>
+ </a>
+ {{else}}
+ {{view.enabledDisplay}}
+ {{/isAuthorized}}
{{else}}
- {{view.enabledDisplay}}
- {{/isAuthorized}}
- {{else}}
- {{#isAuthorized "SERVICE.TOGGLE_ALERTS"}}
- <a href="#" {{action "toggleState" controller.content
target="controller"}} {{bindAttr
class="controller.content.enabled:alert-definition-enable:alert-definition-disable"}}>
+ {{#isAuthorized "SERVICE.TOGGLE_ALERTS"}}
+ <a href="#" {{action "toggleState" controller.content
target="controller"}} {{bindAttr
class="controller.content.enabled:alert-definition-enable:alert-definition-disable"}}>
<span
- class="enable-disable-button" {{translateAttr
data-original-title="alerts.table.state.disabled.tooltip"}}>
+ class="enable-disable-button" {{translateAttr
data-original-title="alerts.table.state.disabled.tooltip"}}>
{{view.disabledDisplay}}
</span>
- </a>
- {{else}}
- {{view.disabledDisplay}}
- {{/isAuthorized}}
- {{/if}}
- </div>
- </div>
- {{#if controller.content.serviceDisplayName}}
- <div class="row">
- <div class="col-md-5 property-name">{{t common.service}}:</div>
- <div
class="col-md-7"><span>{{controller.content.serviceDisplayName}}</span></div>
- </div>
- {{/if}}
- {{#if controller.content.componentNameFormatted}}
- <div class="row">
- <div class="col-md-5 property-name">{{t common.component}}:</div>
- <div
class="col-md-7">{{controller.content.componentNameFormatted}}</div>
- </div>
- {{/if}}
- <div class="row">
- <div class="col-md-5 property-name">{{t common.type}}:</div>
- <div class="col-md-7">
- <span {{bindAttr class=":type-icon
controller.content.typeIconClass"}}></span> {{controller.content.type}}
+ </a>
+ {{else}}
+ {{view.disabledDisplay}}
+ {{/isAuthorized}}
+ {{/if}}
+ </div>
</div>
- </div>
- {{#if controller.groupsList.length}}
+ {{#if controller.content.serviceDisplayName}}
+ <div class="row">
+ <div class="col-md-5 property-name">{{t common.service}}:</div>
+ <div
class="col-md-7"><span>{{controller.content.serviceDisplayName}}</span></div>
+ </div>
+ {{/if}}
+ {{#if controller.content.componentNameFormatted}}
+ <div class="row">
+ <div class="col-md-5 property-name">{{t common.component}}:</div>
+ <div
class="col-md-7">{{controller.content.componentNameFormatted}}</div>
+ </div>
+ {{/if}}
<div class="row">
- <div class="col-md-5 property-name">{{t
alerts.definition.details.groups}}:</div>
+ <div class="col-md-5 property-name">{{t common.type}}:</div>
<div class="col-md-7">
- <ul class="list-unstyled">
- {{#each groupName in controller.groupsList}}
- <li>{{groupName}}</li>
- {{/each}}
- </ul>
+ <span {{bindAttr class=":type-icon
controller.content.typeIconClass"}}></span> {{controller.content.type}}
</div>
</div>
- {{/if}}
- <div class="row">
- <div class="col-md-5 property-name">{{t
alerts.table.header.lastTrigger}}:</div>
- <div
class="col-md-7">{{controller.content.lastTriggeredFormatted}}</div>
- </div>
- {{#unless controller.content.isTypeAggregate}}
+ {{#if controller.groupsList.length}}
+ <div class="row">
+ <div class="col-md-5 property-name">{{t
alerts.definition.details.groups}}:</div>
+ <div class="col-md-7">
+ <ul class="list-unstyled">
+ {{#each groupName in controller.groupsList}}
+ <li>{{groupName}}</li>
+ {{/each}}
+ </ul>
+ </div>
+ </div>
+ {{/if}}
<div class="row">
- <div class="col-md-5 property-name">{{t
alerts.table.header.repeatTolerance}}:</div>
- <div class="col-md-7">
- {{#if controller.content.repeat_tolerance_enabled}}
- <span>
- {{controller.content.repeat_tolerance}}
- </span>
- {{else}}
- <span>
+ <div class="col-md-5 property-name">{{t
alerts.table.header.lastTrigger}}:</div>
+ <div
class="col-md-7">{{controller.content.lastTriggeredFormatted}}</div>
+ </div>
+ {{#unless controller.content.isTypeAggregate}}
+ <div class="row">
+ <div class="col-md-5 property-name">{{t
alerts.table.header.repeatTolerance}}:</div>
+ <div class="col-md-7">
+ {{#if controller.content.repeat_tolerance_enabled}}
+ <span>
+ {{controller.content.repeat_tolerance}}
+ </span>
+ {{else}}
+ <span>
{{controller.globalAlertsRepeatTolerance}}
- {{t alerts.table.header.default}}
+ {{t alerts.table.header.default}}
</span>
- {{/if}}
- {{#isAuthorized "SERVICE.TOGGLE_ALERTS"}}
- <a href="#" {{action editRepeatTolerance target="controller"}}
class="edit-description-button">
- <i class="glyphicon glyphicon-pencil"></i>
- </a>
- {{/isAuthorized}}
+ {{/if}}
+ {{#isAuthorized "SERVICE.TOGGLE_ALERTS"}}
+ <a href="#" {{action editRepeatTolerance
target="controller"}} class="edit-description-button">
+ <i class="glyphicon glyphicon-pencil"></i>
+ </a>
+ {{/isAuthorized}}
+ </div>
</div>
- </div>
- {{/unless}}
- {{#if controller.content.hasHelpUrl}}
- <div class="row">
- <div class="col-md-5 property-name">{{t
alerts.table.header.helpUrl}}:</div>
- <div class="col-md-7"><label for=""><a {{bindAttr
href="controller.content.helpUrl"}} target="_blank">{{t
common.link}}</a></label></div>
- </div>
- {{/if}}
+ {{/unless}}
+ {{#if controller.content.hasHelpUrl}}
+ <div class="row">
+ <div class="col-md-5 property-name">{{t
alerts.table.header.helpUrl}}:</div>
+ <div class="col-md-7"><label for=""><a {{bindAttr
href="controller.content.helpUrl"}} target="_blank">{{t
common.link}}</a></label></div>
+ </div>
+ {{/if}}
+ </div>
</div>
</div>
</div>
diff --git
a/ambari-web/app/templates/main/charts/heatmap/heatmap_host_detail.hbs
b/ambari-web/app/templates/main/charts/heatmap/heatmap_host_detail.hbs
index c2311e3..e158b64 100644
--- a/ambari-web/app/templates/main/charts/heatmap/heatmap_host_detail.hbs
+++ b/ambari-web/app/templates/main/charts/heatmap/heatmap_host_detail.hbs
@@ -24,6 +24,10 @@
</thead>
<tbody>
<tr>
+ <td>{{view.details.metricName}}</td>
+ <td>{{view.details.metricValue}}</td>
+ </tr>
+ <tr>
<td>{{t common.os}}</td>
<td>{{view.details.osType}}</td>
</tr>
diff --git a/ambari-web/app/views/common/widget/heatmap_widget_view.js
b/ambari-web/app/views/common/widget/heatmap_widget_view.js
index 6fbb7e7..cc2a7c4 100644
--- a/ambari-web/app/views/common/widget/heatmap_widget_view.js
+++ b/ambari-web/app/views/common/widget/heatmap_widget_view.js
@@ -91,7 +91,7 @@ App.HeatmapWidgetView = Em.View.extend(App.WidgetMixin, {
}
var metricObject = App.MainChartHeatmapMetric.create({
- name: this.get('content.displayName'),
+ name: this.get('content.widgetName'),
units: this.get('content.properties.display_unit'),
maximumValue: this.get('controller.inputMaximum'),
hostNames: hostNames,
diff --git a/ambari-web/app/views/main/charts/heatmap/heatmap_host.js
b/ambari-web/app/views/main/charts/heatmap/heatmap_host.js
index b324570..78c1970 100644
--- a/ambari-web/app/views/main/charts/heatmap/heatmap_host.js
+++ b/ambari-web/app/views/main/charts/heatmap/heatmap_host.js
@@ -15,9 +15,9 @@
* the License.
*/
-var date = require('utils/date/date');
-
-var App = require('app');
+const date = require('utils/date/date');
+const numberUtils = require('utils/number_utils');
+const App = require('app');
App.MainChartsHeatmapHostView = Em.View.extend({
templateName: require('templates/main/charts/heatmap/heatmap_host'),
@@ -70,6 +70,25 @@ App.MainChartsHeatmapHostView = Em.View.extend({
},
/**
+ *
+ * @param {string} number
+ * @param {string} units
+ * @returns {string}
+ */
+ convertValue: function(number, units) {
+ if (Number.isFinite(Number(number)) && Number(number) > 0) {
+ if (units === 'MB') {
+ return (Number(number) / numberUtils.BYTES_IN_MB).toFixed(2) + units;
+ } else if (units === 'ms') {
+ return date.timingFormat(number);
+ } else {
+ return number + units;
+ }
+ }
+ return number;
+ },
+
+ /**
* get relative usage of metric in percents
* @param {number} total
* @param {number} free
@@ -143,14 +162,10 @@ App.MainChartsHeatmapHostView = Em.View.extend({
if (Em.isNone(value)) {
value = this.t('charts.heatmap.unknown');
} else {
- if (metricName === 'Garbage Collection Time') {
- value = date.timingFormat(parseInt(value));
+ if (isNaN(Number(value))) {
+ value = this.t('charts.heatmap.unknown');
} else {
- if (isNaN(value)) {
- value = this.t('charts.heatmap.unknown');
- } else {
- value = value + selectedMetric.get('units');
- }
+ value = this.convertValue(value, selectedMetric.get('units'));
}
}
view.set('details.metricName', metricName);
diff --git a/ambari-web/test/views/common/widget/heatmap_widget_view_test.js
b/ambari-web/test/views/common/widget/heatmap_widget_view_test.js
index 7ed9256..5af6e66 100644
--- a/ambari-web/test/views/common/widget/heatmap_widget_view_test.js
+++ b/ambari-web/test/views/common/widget/heatmap_widget_view_test.js
@@ -124,7 +124,7 @@ describe('App.HeatmapWidgetView', function () {
isLoaded: true,
racks: [],
content: Em.Object.create({
- displayName: 'm1',
+ widgetName: 'm1',
properties: {
display_unit: 'u1'
}
@@ -152,7 +152,7 @@ describe('App.HeatmapWidgetView', function () {
isLoaded: true
}],
content: Em.Object.create({
- displayName: 'm1',
+ widgetName: 'm1',
properties: {
display_unit: 'u1'
}
diff --git a/ambari-web/test/views/main/charts/heatmap/heatmap_host_test.js
b/ambari-web/test/views/main/charts/heatmap/heatmap_host_test.js
index e7fe267..3f7dc62 100644
--- a/ambari-web/test/views/main/charts/heatmap/heatmap_host_test.js
+++ b/ambari-web/test/views/main/charts/heatmap/heatmap_host_test.js
@@ -430,14 +430,14 @@ describe('App.MainChartsHeatmapHostView', function () {
var viewObject;
beforeEach(function () {
- sinon.stub(date, 'timingFormat').returns('time');
+ sinon.stub(view, 'convertValue').returns('converted');
viewObject = Em.Object.create({
details: {}
});
});
afterEach(function () {
- date.timingFormat.restore();
+ view.convertValue.restore();
});
it("selected metric is null", function () {
@@ -470,14 +470,15 @@ describe('App.MainChartsHeatmapHostView', function () {
it("metric name is 'Garbage Collection Time'", function () {
view.set('controller.selectedMetric', Em.Object.create({
name: 'Garbage Collection Time',
+ units: 'ms',
hostToValueMap: {
- host1: 'val'
+ host1: '111'
}
}));
view.setMetric(viewObject, {hostName: 'host1'});
expect(viewObject.get('details')).to.eql({
metricName: 'Garbage Collection Time',
- metricValue: 'time'
+ metricValue: 'converted'
});
});
@@ -506,8 +507,37 @@ describe('App.MainChartsHeatmapHostView', function () {
view.setMetric(viewObject, {hostName: 'host1'});
expect(viewObject.get('details')).to.eql({
metricName: 'm1',
- metricValue: '10mb'
+ metricValue: 'converted'
});
});
});
+
+ describe('#convertValue', function() {
+ beforeEach(function() {
+ sinon.stub(date, 'timingFormat').returns('time');
+ });
+ afterEach(function() {
+ date.timingFormat.restore();
+ });
+
+ it('should return null', function() {
+ expect(view.convertValue(null, null)).to.be.null;
+ });
+
+ it('should return 40', function() {
+ expect(view.convertValue('40', '')).to.be.equal('40');
+ });
+
+ it('should return 40%', function() {
+ expect(view.convertValue('40', '%')).to.be.equal('40%');
+ });
+
+ it('should return 1MB', function() {
+ expect(view.convertValue('1048576', 'MB')).to.be.equal('1.00MB');
+ });
+
+ it('should return time', function() {
+ expect(view.convertValue('1', 'ms')).to.be.equal('time');
+ });
+ });
});
--
To stop receiving notification emails like this one, please contact
[email protected].
