Repository: ambari Updated Branches: refs/heads/branch-1.6.0.slider ac209bf3b -> 9647152dc
AMBARI-5969. Slider App details page: styling and adding usability (alexantonenko) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/9647152d Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/9647152d Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/9647152d Branch: refs/heads/branch-1.6.0.slider Commit: 9647152dc4745ed84a66daf7c7057f3fc3583e9c Parents: ac209bf Author: Alex Antonenko <[email protected]> Authored: Fri May 30 19:22:02 2014 +0300 Committer: Alex Antonenko <[email protected]> Committed: Fri May 30 19:26:25 2014 +0300 ---------------------------------------------------------------------- .../slider_app/summary_controller.js | 42 +++++++++++++++++++- .../ui/app/controllers/slider_app_controller.js | 2 +- .../src/main/resources/ui/app/helpers/helper.js | 2 +- .../main/resources/ui/app/models/slider_app.js | 2 +- .../resources/ui/app/styles/application.less | 22 ++++++++-- .../ui/app/templates/slider_app/summary.hbs | 36 ++++++++++++----- .../src/main/resources/ui/app/translations.js | 3 +- .../ui/app/views/slider_app/summary_view.js | 38 +++++++++++++++++- 8 files changed, 128 insertions(+), 19 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/9647152d/contrib/views/slider/src/main/resources/ui/app/controllers/slider_app/summary_controller.js ---------------------------------------------------------------------- diff --git a/contrib/views/slider/src/main/resources/ui/app/controllers/slider_app/summary_controller.js b/contrib/views/slider/src/main/resources/ui/app/controllers/slider_app/summary_controller.js index 23bf2a6..11883d7 100644 --- a/contrib/views/slider/src/main/resources/ui/app/controllers/slider_app/summary_controller.js +++ b/contrib/views/slider/src/main/resources/ui/app/controllers/slider_app/summary_controller.js @@ -19,5 +19,45 @@ App.SliderAppSummaryController = Ember.Controller.extend({ appType: function () { return this.get('model.appType.displayName'); - }.property('model.appType') + }.property('model.appType'), + + sumComponents: function () { + var componentsResult = [], + appStatus = this.get('model.status'), + components = this.get('model.components.content'); + if(!components){ + return []; + } + componentsNames = components.mapBy('componentName').uniq(); + componentsNames.splice(componentsNames.indexOf("slider-appmaster"), 1); + componentsNames.forEach(function (componentName) { + var live = components.filterBy('componentName', componentName).filterBy('isRunning', true).length, + total = components.filterBy('componentName', componentName).length, + color = (total - live == 0) ? 'green' : 'red'; + color = (appStatus == 'FROZEN') ? '' : color; + + componentsResult.push({ + name : componentName, + live : live, + total: total, + color: color + }); + }); + return componentsResult; + }.property('model.components.@each'), + + componentsSection: function () { + var components = this.get('model.components.content') || []; + var result = []; + components.forEach(function (component){ + if(component.get('componentName') != "slider-appmaster"){ + result.push({ + isRunning: component.get('isRunning'), + host: component.get('host'), + componentName: component.get('componentName') + }); + } + }); + return result; + }.property('model.components.@each') }); http://git-wip-us.apache.org/repos/asf/ambari/blob/9647152d/contrib/views/slider/src/main/resources/ui/app/controllers/slider_app_controller.js ---------------------------------------------------------------------- diff --git a/contrib/views/slider/src/main/resources/ui/app/controllers/slider_app_controller.js b/contrib/views/slider/src/main/resources/ui/app/controllers/slider_app_controller.js index a29b46c..50eafb3 100644 --- a/contrib/views/slider/src/main/resources/ui/app/controllers/slider_app_controller.js +++ b/contrib/views/slider/src/main/resources/ui/app/controllers/slider_app_controller.js @@ -108,7 +108,7 @@ App.SliderAppController = Ember.ObjectController.extend({ * @method componentsForFlexObs */ componentsForFlexObs: function() { - if (!this.get('updateFlexComponents')) return; + if (!this.get('updateFlexComponents') || !this.get('model.appType.components')) return; this.set('componentsForFlex', this.get('model.appType.components').map(function(c) { return Ember.Object.create({ name: c.get('displayName'), http://git-wip-us.apache.org/repos/asf/ambari/blob/9647152d/contrib/views/slider/src/main/resources/ui/app/helpers/helper.js ---------------------------------------------------------------------- diff --git a/contrib/views/slider/src/main/resources/ui/app/helpers/helper.js b/contrib/views/slider/src/main/resources/ui/app/helpers/helper.js index 63a0b39..1fbfaf9 100644 --- a/contrib/views/slider/src/main/resources/ui/app/helpers/helper.js +++ b/contrib/views/slider/src/main/resources/ui/app/helpers/helper.js @@ -75,6 +75,6 @@ App.registerBoundHelper('formatWordBreak', Em.View.extend({ * @type {string} */ result: function() { - return this.get('content') && this.get('content').replace(/\//g, '/<wbr />'); + return this.get('content') && this.get('content').replace(/\//g, '/<wbr />').replace(/\./g, '/.<wbr />'); }.property('content') })); \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ambari/blob/9647152d/contrib/views/slider/src/main/resources/ui/app/models/slider_app.js ---------------------------------------------------------------------- diff --git a/contrib/views/slider/src/main/resources/ui/app/models/slider_app.js b/contrib/views/slider/src/main/resources/ui/app/models/slider_app.js index 9e55b3a..6d6820f 100644 --- a/contrib/views/slider/src/main/resources/ui/app/models/slider_app.js +++ b/contrib/views/slider/src/main/resources/ui/app/models/slider_app.js @@ -61,7 +61,7 @@ App.SliderApp = DS.Model.extend({ /** * @type {App.SliderAppComponent[]} */ - components: DS.hasMany('sliderAppComponent', {async:true}), + components: DS.hasMany('sliderAppComponent'), /** * @type {App.QuickLink[]} http://git-wip-us.apache.org/repos/asf/ambari/blob/9647152d/contrib/views/slider/src/main/resources/ui/app/styles/application.less ---------------------------------------------------------------------- diff --git a/contrib/views/slider/src/main/resources/ui/app/styles/application.less b/contrib/views/slider/src/main/resources/ui/app/styles/application.less index 4454787..f4b14b6 100644 --- a/contrib/views/slider/src/main/resources/ui/app/styles/application.less +++ b/contrib/views/slider/src/main/resources/ui/app/styles/application.less @@ -529,6 +529,25 @@ a { .container { padding-left: 0; width: 95%; + .components-wrapp{ + #collapseOne{ + max-height: 400px; + overflow-y: scroll; + } + } + #components-table{ + .label-row{ + cursor: pointer; + } + } + table { + .red { + color: #FF0000; + } + .green { + color: #008000; + } + } } } @@ -540,9 +559,6 @@ a { .table.section-table { border: none !important; - tr td:first-child { - text-align: right; - } } .table.section-table th, .table.section-table td { http://git-wip-us.apache.org/repos/asf/ambari/blob/9647152d/contrib/views/slider/src/main/resources/ui/app/templates/slider_app/summary.hbs ---------------------------------------------------------------------- diff --git a/contrib/views/slider/src/main/resources/ui/app/templates/slider_app/summary.hbs b/contrib/views/slider/src/main/resources/ui/app/templates/slider_app/summary.hbs index f9d8679..e756d18 100644 --- a/contrib/views/slider/src/main/resources/ui/app/templates/slider_app/summary.hbs +++ b/contrib/views/slider/src/main/resources/ui/app/templates/slider_app/summary.hbs @@ -42,6 +42,12 @@ <td>{{t common.diagnostics}}</td> <td>{{formatWordBreak controller.model.diagnostics}}</td> </tr> + {{#each controller.sumComponents}} + <tr> + <td>{{name}}</td> + <td><span {{bind-attr class="color"}}>{{live}}/{{total}}</span> {{t common.live}}</td> + </tr> + {{/each}} {{#each controller.model.jmx}} <tr> <td>{{key}}</td> @@ -52,18 +58,28 @@ </table> {{/bs-panel}} </div> - <div class="col-md-6"> + <div class="col-md-6 components-wrapp"> {{#bs-panel heading="Components"}} - <table class="table section-table table-condensed"> + <table class="table section-table table-condensed" id="components-table"> + <thead> + {{#view view.parentView.sortView classNames="label-row" contentBinding="view.parentView.filteredContent"}} + {{view view.parentView.parentView.componentNameSort}} + {{view view.parentView.parentView.hostSort}} + {{/view}} + </thead> <tbody> - {{#each controller.model.components}} - <tr> - <td> - <i {{bind-attr class="isRunning:icon-ok-sign:icon-warning-sign"}}></i><span> </span>{{componentName}} - </td> - <td>{{host}}</td> - </tr> - {{/each}} + {{#if view.parentView.pageContent}} + {{#each component in view.parentView.pageContent}} + <tr> + <td><i {{bind-attr class="component.isRunning:icon-ok-sign:icon-warning-sign"}}></i><span> </span>{{component.componentName}}</td> + <td>{{component.host}}</td> + </tr> + {{/each}} + {{else}} + <tr> + <td colspan="2">{{t tableView.filters.noItems}}</td> + </tr> + {{/if}} </tbody> </table> {{/bs-panel}} http://git-wip-us.apache.org/repos/asf/ambari/blob/9647152d/contrib/views/slider/src/main/resources/ui/app/translations.js ---------------------------------------------------------------------- diff --git a/contrib/views/slider/src/main/resources/ui/app/translations.js b/contrib/views/slider/src/main/resources/ui/app/translations.js index 84ac330..4e09acd 100644 --- a/contrib/views/slider/src/main/resources/ui/app/translations.js +++ b/contrib/views/slider/src/main/resources/ui/app/translations.js @@ -43,7 +43,8 @@ Em.I18n.translations = { 'status': 'Status', 'started': 'Started', 'finished': 'Finished', - 'diagnostics': 'Diagnostics' + 'diagnostics': 'Diagnostics', + 'live': 'Live' }, 'popup.confirmation.commonHeader': 'Confirmation', http://git-wip-us.apache.org/repos/asf/ambari/blob/9647152d/contrib/views/slider/src/main/resources/ui/app/views/slider_app/summary_view.js ---------------------------------------------------------------------- diff --git a/contrib/views/slider/src/main/resources/ui/app/views/slider_app/summary_view.js b/contrib/views/slider/src/main/resources/ui/app/views/slider_app/summary_view.js index bd1e488..02f0b88 100644 --- a/contrib/views/slider/src/main/resources/ui/app/views/slider_app/summary_view.js +++ b/contrib/views/slider/src/main/resources/ui/app/views/slider_app/summary_view.js @@ -15,11 +15,47 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +var filters = require('views/common/filter_view'); +var sort = require('views/common/sort_view'); -App.SliderAppSummaryView = Ember.View.extend({ +App.SliderAppSummaryView = App.TableView.extend({ classNames: ['app_summary'], + content: function () { + return this.get('controller.componentsSection'); + }.property('controller.componentsSection.length'), + + didInsertElement: function () { + this.set('pagination', false); + this.set('filteredContent',this.get('content')); + }, + + sortView: sort.wrapperView, + componentNameSort: sort.fieldView.extend({ + column: 0, + name:'componentName', + displayName: "Name" + }), + + hostSort: sort.fieldView.extend({ + column: 1, + name:'host', + displayName: "Host" + }), + + /** + * associations between host property and column index + * @type {Array} + */ + colPropAssoc: function(){ + var associations = []; + associations[0] = 'componentName'; + associations[1] = 'host'; + return associations; + }.property(), + + /** * List of graphs shown on page * Format:
