Repository: ambari Updated Branches: refs/heads/trunk e0c8df5a9 -> 996a07b4b
AMBARI-8597. Alerts UI: Minor edit Alert Definition cleanups (srimanth) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/996a07b4 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/996a07b4 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/996a07b4 Branch: refs/heads/trunk Commit: 996a07b4bbcf6f69e1871254a6a6980bf48dbc9b Parents: e0c8df5 Author: Srimanth Gunturi <sgunt...@hortonworks.com> Authored: Mon Dec 8 19:16:05 2014 -0800 Committer: Srimanth Gunturi <sgunt...@hortonworks.com> Committed: Mon Dec 8 22:52:51 2014 -0800 ---------------------------------------------------------------------- .../alerts/definition_configs_controller.js | 11 +++- .../app/mappers/alert_definitions_mapper.js | 1 + ambari-web/app/models/alert_config.js | 45 ++++++++++++++- ambari-web/app/models/alert_definition.js | 3 +- ambari-web/app/styles/alerts.less | 36 ++++++------ .../alerts/configs/alert_config_threshold.hbs | 20 +++---- .../main/alerts/definition_details.hbs | 59 +++++++++++--------- .../app/views/main/alert_definitions_view.js | 5 +- .../main/alerts/definition_details_view.js | 4 +- ambari-web/test/models/alert_config_test.js | 29 ++++++++++ 10 files changed, 154 insertions(+), 59 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/996a07b4/ambari-web/app/controllers/main/alerts/definition_configs_controller.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/controllers/main/alerts/definition_configs_controller.js b/ambari-web/app/controllers/main/alerts/definition_configs_controller.js index e283e16..8b6f551 100644 --- a/ambari-web/app/controllers/main/alerts/definition_configs_controller.js +++ b/ambari-web/app/controllers/main/alerts/definition_configs_controller.js @@ -165,10 +165,12 @@ App.MainAlertDefinitionConfigsController = Em.Controller.extend({ }), App.AlertConfigProperties.Thresholds.OkThreshold.create({ label: 'Thresholds', + showInputForValue: false, text: isWizard ? '' : this.getThresholdsProperty('ok', 'text'), value: isWizard ? '' : this.getThresholdsProperty('ok', 'value') }), App.AlertConfigProperties.Thresholds.CriticalThreshold.create({ + showInputForValue: false, text: isWizard ? '' : this.getThresholdsProperty('critical', 'text'), value: isWizard ? '' : this.getThresholdsProperty('critical', 'value') }) @@ -282,14 +284,17 @@ App.MainAlertDefinitionConfigsController = Em.Controller.extend({ }), App.AlertConfigProperties.Thresholds.OkThreshold.create({ label: 'Thresholds', + showInputForValue: false, text: isWizard ? '' : this.getThresholdsProperty('ok', 'text'), value: isWizard ? '' : this.getThresholdsProperty('ok', 'value') }), App.AlertConfigProperties.Thresholds.WarningThreshold.create({ + showInputForValue: false, text: isWizard ? '' : this.getThresholdsProperty('warning', 'text'), value: isWizard ? '' : this.getThresholdsProperty('warning', 'value') }), App.AlertConfigProperties.Thresholds.CriticalThreshold.create({ + showInputForValue: false, text: isWizard ? '' : this.getThresholdsProperty('critical', 'text'), value: isWizard ? '' : this.getThresholdsProperty('critical', 'value') }) @@ -318,11 +323,13 @@ App.MainAlertDefinitionConfigsController = Em.Controller.extend({ }), App.AlertConfigProperties.Thresholds.WarningThreshold.create({ text: isWizard ? '' : this.getThresholdsProperty('warning', 'text'), - value: isWizard ? '' : this.getThresholdsProperty('warning', 'value') + value: isWizard ? '' : this.getThresholdsProperty('warning', 'value'), + valueMetric: '%' }), App.AlertConfigProperties.Thresholds.CriticalThreshold.create({ text: isWizard ? '' : this.getThresholdsProperty('critical', 'text'), - value: isWizard ? '' : this.getThresholdsProperty('critical', 'value') + value: isWizard ? '' : this.getThresholdsProperty('critical', 'value'), + valueMetric: '%' }) ]; }, http://git-wip-us.apache.org/repos/asf/ambari/blob/996a07b4/ambari-web/app/mappers/alert_definitions_mapper.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/mappers/alert_definitions_mapper.js b/ambari-web/app/mappers/alert_definitions_mapper.js index b2da3e3..b83231d 100644 --- a/ambari-web/app/mappers/alert_definitions_mapper.js +++ b/ambari-web/app/mappers/alert_definitions_mapper.js @@ -35,6 +35,7 @@ App.alertDefinitionsMapper = App.QuickDataMapper.create({ config: { id: 'AlertDefinition.id', name: 'AlertDefinition.name', + description: 'AlertDefinition.description', label: 'AlertDefinition.label', service_id: 'AlertDefinition.service_name', service_name: 'AlertDefinition.service_name', http://git-wip-us.apache.org/repos/asf/ambari/blob/996a07b4/ambari-web/app/models/alert_config.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/models/alert_config.js b/ambari-web/app/models/alert_config.js index 948a38a..0eaf7b7 100644 --- a/ambari-web/app/models/alert_config.js +++ b/ambari-web/app/models/alert_config.js @@ -248,6 +248,18 @@ App.AlertConfigProperties = { value: '', /** + * Type of value. This will be a fixed set of types (like %). + */ + valueMetric: null, + + /** + * Value actually displayed to the user. This value is transformed + * based on the limited types of 'valueMetric's. Mappings from + * 'value' to 'displayValue' is handled by observers. + */ + displayValue: '', + + /** * threshold-text * @type {string} */ @@ -259,6 +271,11 @@ App.AlertConfigProperties = { apiProperty: [], + init:function () { + this.valueWasChanged(); + this._super(); + }, + /** * @type {string[]} */ @@ -300,7 +317,33 @@ App.AlertConfigProperties = { wasChanged: function () { return (this.get('previousValue') !== null && this.get('value') !== this.get('previousValue')) || (this.get('previousText') !== null && this.get('text') !== this.get('previousText')); - }.property('value', 'text', 'previousValue', 'previousText') + }.property('value', 'text', 'previousValue', 'previousText'), + + valueWasChanged : function() { + var value = this.get('value'); + var valueMetric = this.get('valueMetric'); + var displayValue = this.get('displayValue'); + var newDisplayValue = value; + if ('%' == valueMetric) { + newDisplayValue = (Number(value) * 100) + ''; + } + if (newDisplayValue != displayValue) { + this.set('displayValue', newDisplayValue); + } + }.observes('value', 'valueMetric'), + + displayValueWasChanged: function () { + var value = this.get('value'); + var valueMetric = this.get('valueMetric'); + var displayValue = this.get('displayValue'); + var newValue = displayValue; + if ('%' == valueMetric) { + newValue = (Number(displayValue) / 100) + ''; + } + if (newValue != value) { + this.set('value', newValue); + } + }.observes('displayValue', 'valueMetric') }), http://git-wip-us.apache.org/repos/asf/ambari/blob/996a07b4/ambari-web/app/models/alert_definition.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/models/alert_definition.js b/ambari-web/app/models/alert_definition.js index 92f395a..75f55c4 100644 --- a/ambari-web/app/models/alert_definition.js +++ b/ambari-web/app/models/alert_definition.js @@ -23,6 +23,7 @@ App.AlertDefinition = DS.Model.extend({ name: DS.attr('string'), label: DS.attr('string'), + description: DS.attr('string'), service: DS.belongsTo('App.Service'), serviceName: DS.attr('string'), componentName: DS.attr('string'), @@ -214,8 +215,6 @@ App.AlertDefinition = DS.Model.extend({ order: ['OK', 'WARNING', 'CRITICAL', 'UNKNOWN'], // todo: in future be mapped from server response - description: 'Description for the Alert Definition.', - // todo: in future be mapped from server response thresholds: '5-10' }); http://git-wip-us.apache.org/repos/asf/ambari/blob/996a07b4/ambari-web/app/styles/alerts.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/alerts.less b/ambari-web/app/styles/alerts.less index 02ac2fa..cf813d1 100644 --- a/ambari-web/app/styles/alerts.less +++ b/ambari-web/app/styles/alerts.less @@ -158,24 +158,19 @@ .col1, td:first-child + td, th:first-child + th { - width: 15%; + width: 20%; } .col2, td:first-child + td + td, th:first-child + th + th { - width: 15%; + width: 10% } + .col3, td:first-child + td + td + td, th:first-child + th + th + th { - width: 10% - } - - .col4, - td:first-child + td + td + td + td, - th:first-child + th + th + th + th { - width: 30%; + width: 40%; } .alert-text { @@ -188,6 +183,15 @@ } #alert-definition-details { + .box { + .box-header { + .edit-link { + margin: 5px; + } + } + margin-top: 20px; + margin-bottom: 0px; + } .definition-details-block { margin-top: 30px; .multiline-text { @@ -207,7 +211,7 @@ .status { margin-bottom: 30px; - text-align: center; + text-align: right; .label { font-size: 14px; padding: 5px 8px; @@ -258,7 +262,8 @@ .edit-buttons { text-align: right; - margin-bottom: 20px; + margin-bottom: 10px; + margin-right: 10px; } .text-area-edit { @@ -273,11 +278,6 @@ cursor: pointer; } - .buttons-block { - button { - font-size: 1.1em; - } - } } .alert-configs { @@ -302,6 +302,10 @@ } } + .input-append { + padding-right: 13px; + } + .alert-interval-input { input { width: 20%; http://git-wip-us.apache.org/repos/asf/ambari/blob/996a07b4/ambari-web/app/templates/main/alerts/configs/alert_config_threshold.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/alerts/configs/alert_config_threshold.hbs b/ambari-web/app/templates/main/alerts/configs/alert_config_threshold.hbs index 79e88b6..14d1c35 100644 --- a/ambari-web/app/templates/main/alerts/configs/alert_config_threshold.hbs +++ b/ambari-web/app/templates/main/alerts/configs/alert_config_threshold.hbs @@ -18,17 +18,17 @@ <div class="control-group"> <div class="span3"><span {{bindAttr class="view.property.badgeCssClass :alert-state-single-host :label"}}>{{view.property.badge}}</span> </div> - <div class="span2"> - {{#if view.property.showInputForValue}} - {{view Em.TextField valueBinding="view.property.value" disabledBinding="view.property.isDisabled" class="span11"}} - {{/if}} - </div> - <div class="span7"> + {{#if view.property.showInputForValue}} + <div {{bindAttr class=":span2 view.property.valueMetric:input-append"}}> + {{view Em.TextField valueBinding="view.property.displayValue" disabledBinding="view.property.isDisabled" class="span11"}} + {{#if view.property.valueMetric}} + <span class="add-on">{{view.property.valueMetric}}</span> + {{/if}} + </div> + {{/if}} + <div {{bindAttr class=":alert-text-input view.property.showInputForValue:span7:span9"}}> {{#if view.property.showInputForText}} {{view Em.TextField valueBinding="view.property.text" disabledBinding="view.property.isDisabled"}} {{/if}} </div> -</div> - - - +</div> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ambari/blob/996a07b4/ambari-web/app/templates/main/alerts/definition_details.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/alerts/definition_details.hbs b/ambari-web/app/templates/main/alerts/definition_details.hbs index 93a24bd..c959caf 100644 --- a/ambari-web/app/templates/main/alerts/definition_details.hbs +++ b/ambari-web/app/templates/main/alerts/definition_details.hbs @@ -51,8 +51,12 @@ <div><a href="javascript:void(null)" data-toggle="modal" {{action back}}><i class="icon-arrow-left"></i> {{t common.back}}</a></div> {{! Alert Definition Configs }} - <div class="definition-details-block"> - <strong>{{t common.configuration}}</strong> + <div class="box"> + <div class="box-header"> + <div class="pull-left"> + <h4>{{t common.configuration}}</h4> + </div> + <div class="pull-right span5 row-fluid" style="padding:0 10px;"> {{#isAccessible ADMIN}} {{#unless App.router.mainAlertDefinitionConfigsController.canEdit}} <a {{action editConfigs target="App.router.mainAlertDefinitionConfigsController"}} class="pull-right edit-link"> @@ -60,7 +64,8 @@ </a> {{/unless}} {{/isAccessible}} - <hr> + </div> + </div> {{view App.AlertDefinitionConfigsView contentBinding="view.controller.content" alertDefinitionTypeBinding="view.controller.content.type" canEdit=false}} {{#if App.router.mainAlertDefinitionConfigsController.canEdit}} <div class="edit-buttons"> @@ -72,7 +77,6 @@ {{/if}} </div> {{! Alert Definition Configs end }} - </div> {{! Left column end }} @@ -81,31 +85,38 @@ <div class="status"> {{{controller.content.status}}} </div> - <div class="buttons-block"> - {{#isAccessible ADMIN}} - {{#if controller.content.enabled}} - <button {{action toggleState target="controller"}} class="btn btn-danger disable-button"><i - class="icon-power-off"></i> {{t alerts.definition.details.disable}}</button> - {{else}} - <button {{action toggleState target="controller"}} class="btn btn-success enable-button"><i - class="icon-power-off"></i> {{t alerts.definition.details.enable}}</button> - {{/if}} - <button {{action deleteAlertDefinition target="controller"}} class="btn delete-button"><i - class="icon-trash"></i> {{t common.delete}}</button> - {{/isAccessible}} - </div> <div class="properties-list"> <div class="row-fluid"> <div class="span4 property-name">{{t alerts.table.state}}:</div> <div class="span8"> {{#if controller.content.enabled}} - <span {{bindAttr class="controller.content.enabled:alert-definition-enable:alert-definition-disable"}}> - <span class="icon-off"></span> {{t alerts.table.state.enabled}} - </span> + {{#isAccessible ADMIN}} + <span class="enable-disable-button" {{translateAttr data-original-title="alerts.table.state.enabled.tooltip"}}> + <a href="#" {{action "toggleState" controller.content target="controller"}} {{bindAttr class="controller.content.enabled:alert-definition-enable:alert-definition-disable"}}> + <span class="icon-off"></span> + {{t alerts.table.state.enabled}} + </a> + </span> + {{/isAccessible}} + {{#isAccessible NON_ADMIN}} + <span {{bindAttr class="controller.content.enabled:alert-definition-enable:alert-definition-disable"}}> + {{t alerts.table.state.enabled}} + </span> + {{/isAccessible}} {{else}} - <span {{bindAttr class="controller.content.enabled:alert-definition-enable:alert-definition-disable"}}> - <span class="icon-off"></span> {{t alerts.table.state.disabled}} - </span> + {{#isAccessible ADMIN}} + <span class="enable-disable-button" {{translateAttr data-original-title="alerts.table.state.disabled.tooltip"}}> + <a href="#" {{action "toggleState" controller.content target="controller"}} {{bindAttr class="controller.content.enabled:alert-definition-enable:alert-definition-disable"}}> + <span class="icon-off"></span> + {{t alerts.table.state.disabled}} + </a> + </span> + {{/isAccessible}} + {{#isAccessible NON_ADMIN}} + <span {{bindAttr class="controller.content.enabled:alert-definition-enable:alert-definition-disable"}}> + {{t alerts.table.state.disabled}} + </span> + {{/isAccessible}} {{/if}} </div> </div> @@ -160,7 +171,6 @@ <thead> <tr> <th class="first">{{t alerts.definition.details.serviceHost}}</th> - <th>{{t alerts.table.header.lastTriggered}}</th> <th>{{t common.status}}</th> <th>{{t alerts.definition.details.24-hour}}</th> <th>{{t alerts.table.header.text}}</th> @@ -179,7 +189,6 @@ <a {{action goToHostAlerts instance.host target="controller"}} href="#">{{instance.host.hostName}}</a> {{/if}} </td> - <td>{{instance.lastTriggeredFormatted}}</td> <td>{{{instance.status}}} <time class="timeago" {{bindAttr data-original-title="instance.lastTriggeredFormatted"}}>{{instance.lastTriggeredForFormatted}}</time></td> <td>{{view view.lastDayCount hostBinding="instance.host"}}</td> <td><span class="alert-text" {{bindAttr data-original-title="instance.text"}} class="alert-text">{{instance.text}}</span></td> http://git-wip-us.apache.org/repos/asf/ambari/blob/996a07b4/ambari-web/app/views/main/alert_definitions_view.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/alert_definitions_view.js b/ambari-web/app/views/main/alert_definitions_view.js index 23302ef..425242a 100644 --- a/ambari-web/app/views/main/alert_definitions_view.js +++ b/ambari-web/app/views/main/alert_definitions_view.js @@ -376,7 +376,10 @@ App.MainAlertDefinitionsView = App.TableView.extend({ if (value != undefined ) { this.get('content').setEach('selected', false); this.set('selected', this.get('content').findProperty('value', value)); - this.get('content').findProperty('value', value).set('selected', true); + var selectEntry = this.get('content').findProperty('value', value); + if (selectEntry) { + selectEntry.set('selected', true); + } } }.observes('value') }), http://git-wip-us.apache.org/repos/asf/ambari/blob/996a07b4/ambari-web/app/views/main/alerts/definition_details_view.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/alerts/definition_details_view.js b/ambari-web/app/views/main/alerts/definition_details_view.js index ee9201b..ea4acfc 100644 --- a/ambari-web/app/views/main/alerts/definition_details_view.js +++ b/ambari-web/app/views/main/alerts/definition_details_view.js @@ -65,9 +65,9 @@ App.MainAlertDefinitionDetailsView = App.TableView.extend({ */ tooltipsUpdater: function () { Em.run.next(function () { - App.tooltip($(".timeago, .alert-text")); + App.tooltip($(".timeago, .alert-text, .enable-disable-button")); }); - }.observes('pageContent.@each'), + }.observes('pageconte...@each.text', 'controller.content.enabled'), /** * View calculates and represents count of alerts on appropriate host during last day http://git-wip-us.apache.org/repos/asf/ambari/blob/996a07b4/ambari-web/test/models/alert_config_test.js ---------------------------------------------------------------------- diff --git a/ambari-web/test/models/alert_config_test.js b/ambari-web/test/models/alert_config_test.js index 6d13e66..5c7bb57 100644 --- a/ambari-web/test/models/alert_config_test.js +++ b/ambari-web/test/models/alert_config_test.js @@ -52,6 +52,35 @@ describe('App.AlertConfigProperties', function () { }); + describe('#valueWasChanged', function () { + + it('value change should effect displayValue', function () { + + model = App.AlertConfigProperties.Threshold.create({ + value: '0.4', + valueMetric: '%', + text: 'text', + showInputForValue: false, + showInputForText: false + }); + + expect(model.get('displayValue')).to.eql('40'); + }); + + it('value change should not effect displayValue', function () { + + model = App.AlertConfigProperties.Threshold.create({ + value: '0.4', + text: 'text', + showInputForValue: false, + showInputForText: false + }); + + expect(model.get('displayValue')).to.eql('0.4'); + }); + + }); + describe('#badgeCssClass', function () { it ('should be based on badge', function () {
