AMBARI-15219. New Files View: Show error/success message count over the message button. (dipayanb)

contrib/views/files/src/main/resources/ui/app/controllers/files.js

@@ -20,6 +20,7 @@ import Ember from 'ember';
 import columnConfig from '../config/files-columns';
 
 export default Ember.Controller.extend({
+  logger: Ember.inject.service('alert-messages'),
   fileSelectionService: Ember.inject.service('files-selection'),
   lastSelectedFile: Ember.computed.oneWay('fileSelectionService.lastFileSelected'),
   selectedFilesCount: Ember.computed.oneWay('fileSelectionService.filesCount'),
@@ -32,6 +33,8 @@ export default Ember.Controller.extend({
   path: '/',
   columns: columnConfig,
 
+  currentMessagesCount: Ember.computed.alias('logger.currentMessagesCount'),
+
   hasHomePath: false,
   hasTrashPath: false,
 

contrib/views/files/src/main/resources/ui/app/models/alert.js

@@ -23,5 +23,6 @@ export default DS.Model.extend({
   message: DS.attr('string'),
   responseMessage: DS.attr('string'),
   status: DS.attr('number'),
-  trace: DS.attr('string')
+  trace: DS.attr('string'),
+  read: DS.attr('string', {defaultValue: false})
 });

contrib/views/files/src/main/resources/ui/app/routes/messages.js

@@ -26,6 +26,7 @@ export default Ember.Route.extend({
   setupController: function(controller, model) {
     this._super(controller, model);
     this.get('logger').clearMessages();
+    this.get('logger').setUnreadMessagesToRead();
     controller.set('isExpanded', true);
   }
 });

contrib/views/files/src/main/resources/ui/app/services/alert-messages.js

@@ -34,6 +34,24 @@ import Ember from 'ember';
 export default Ember.Service.extend({
   flashMessages: Ember.inject.service('flash-messages'),
   store: Ember.inject.service('store'),
+  alertsChanged: false,
+
+  currentUnreadMessages: function() {
+   return this.get('store').peekAll('alert').filter((entry) => {
+     return entry.get('read') === false;
+   });
+  },
+
+  setUnreadMessagesToRead: function() {
+    this.currentUnreadMessages().forEach((entry) => {
+      entry.set('read', true);
+    });
+    this.toggleProperty('alertsChanged');
+  },
+
+  currentMessagesCount: Ember.computed('alertsChanged', function() {
+    return this.currentUnreadMessages().get('length');
+  }),
 
   success: function(message, options = {}, alertOptions = {}) {
     this._processMessage('success', message, options, alertOptions);
@@ -59,6 +77,7 @@ export default Ember.Service.extend({
     this._clearMessagesIfRequired(alertOptions);
     let alertRecord = this._createAlert(message, type, options, alertOptions);
     if(alertRecord) {
+      this.toggleProperty('alertsChanged');
       message = this._addDetailsToMessage(message, alertRecord);
     }
     switch (type) {
@@ -96,7 +115,6 @@ export default Ember.Service.extend({
     if(alertOptions.flashOnly === true) {
       return;
     }
-
     return this.get('store').createRecord('alert', data);
   },
 

contrib/views/files/src/main/resources/ui/app/styles/app.less

@@ -127,6 +127,16 @@ body {
 
 }
 
+.message-count-button {
+  position: relative;
+  .badge {
+    position: absolute;
+    top: -5px;
+    right: -10px;
+    background-color: @brand-danger;
+  }
+}
+
 
 
 .spinner-wrap {

contrib/views/files/src/main/resources/ui/app/templates/files.hbs

@@ -57,7 +57,7 @@
             </button>
           {{new-directory path=path refreshAction="refreshCurrentRoute" currentPathIsTrash=currentPathIsTrash}}
           {{upload-file path=path refreshAction="refreshCurrentRoute" currentPathIsTrash=currentPathIsTrash}}
-          {{#link-to 'messages' class="btn btn-sm btn-default"}}{{fa-icon "comment-o"}}{{/link-to}}
+          {{#link-to 'messages' class="btn btn-sm btn-default message-count-button"}}{{fa-icon "comment-o"}}<span class="badge">{{currentMessagesCount}}</span>{{/link-to}}
         </p>
     </div>
 </div>