Ember js service and filterBy

I have a service to manage all errors and warnings in my application. and the code looks like this:

Service

import Ember from 'ember';

export default Ember.Service.extend({
messages: null,

init() {
    this._super(...arguments);
    this.set('messages', []);
},

add: function (severity, msg, messageType) {
    if (severity === 'error') {severity = 'danger';}

    var msgObject ={
        severity: severity,
        messageType: messageType,
        msg: msg,
        msgId: new Date()
    };      
    this.get('messages').pushObject(msgObject);
},

remove(msgId) {     
    this.get('messages').removeObject(msgId);
},

empty() {
    this.get('messages').clear();
}
});

      

        
        
        
      

    

Component

import Ember from 'ember';

export default Ember.Component.extend({
messageType:'global',
messageHandler: Ember.inject.service(),

messages: function(){
    return this.get('messageHandler.messages').filterBy('messageType',this.get('messageType'));
}.property('messageHandler.messages'),

actions : {
    dismissAllAlerts: function(){
        this.get('messageHandler').empty();
    },
    dismissAlert: function(msgId){
        this.get('messageHandler').remove(msgId);
    }
}    
}); 

      

        
        
        
      

    

Initializer

export function initialize(container, application) {
application.inject('component', 'messageHandler', 'service:message-handler');
}

export default {
name: 'message-handler',
initialize : initialize
};

      

        
        
        
      

    

Template

import Ember from 'ember';

export default Ember.Component.extend({
messageType:'global',
messageHandler: Ember.inject.service(),

messages: function(){
    return this.get('messageHandler.messages');
}.property('messageHandler.messages'),

actions : {
    dismissAllAlerts: function(){
        this.get('messageHandler').empty();
    },
    dismissAlert: function(msgId){
        this.get('messageHandler').remove(msgId);
    }
}    
}); 

      

        
        
        
      

    

and whenever there is an error i will add this as

this.get('messageHandler').add('error',"Unable to get ossoi details","global");

      

        
        
        
      

    

my problem is the filterBy in the component is not working. if i remove filterBy () it works and i see an error in the template. am kinda new to ember, so if anyone can help me figure out what's missing here, or if there is a better way to do it, please let me know