1

We are creating a Telecom App dashboard. We are trying to fetch the logs using Logstash and Elastic search, and displaying it on UI using ng-Table directive of Angularjs .

We are able to obtain logs but the issue is to send the response between two controllers of different module.

Here is the code,

For retrieving logs from elastic search:

// We define an EsConnector module that depends on the elasticsearch module.     

var EsConnector = angular.module('EsConnector', ['elasticsearch']);

// Create the es service from the esFactory
EsConnector.service('es', function (esFactory) {
  return esFactory({ host: 'localhost:9200' });
});

// We define an Angular controller that returns the server health
// Inputs: $scope and the 'es' service

EsConnector.controller('ServerHealthController', function($scope, es) {
es.cluster.health(function (err, resp) {
        if (err) {
        $scope.data = err.message;
    } else {
        $scope.data = resp;
   }
});
});
// We define an Angular controller that returns query results,
// Inputs: $scope and the 'es' service
EsConnector.controller('QueryController', function($scope, es) {
// search for documents
    es.search({
    index: 'logstash-2014.08.29',
    size: 500,
    body: {
    "query":
        {
            "match": {
                "CallId":-1            }   
        },
    }      
    }).then(function (response) {
      $scope.hits = response.hits.hits;
    });

});

We need to pass the data ie hits obtained from QueryController(of EsConnector module) to MainController( of app module)

Here is the app module:-

var app = angular.module('SnapshotApp',['ngTable']);

app.controller('MainController', function($scope, ngTableParams){
 $scope.query = {} 
 $scope.queryBy = '$'
 var data = ; \\ we want to populate 'data' with 'hits' of QueryController
  $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 10           // count per page
    }, {
        total: data.length, // length of data
        getData: function($defer, params) {
        $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
    }
});

});

Another approach could be to merge both modules.

Thanks.

Bhawana Sinha
  • 11
  • 1

2 Answers2

0

You can do this in many ways, but the cleanest (loosely coupled way) would be events.

If the modules are loaded on the same page, it means they are at least the child of $rootScope and you can listen and raise events on $rootScope to communicate these info ($rootScope.$on('myEvent', function (data){}) - $rootScope.$emit('myEvent', {...}).

A less cleaner solution would be to have some sort of data managers (AngularJS services) in which you could store this information and fetch in multiple places. The receiver controller would then $watch the response of this service.getLogs() and on change you would have the latest data (this is a bit HARDCORE in terms of performance, so not really recommended).

EDIT: And in case you need to display a specific block of information when that info arrives, you can just mark your receiver controller data model with ("$scope.myModel.logs") with null and add an ng-if condition on the block that should show these logs with myModel.logs (when the event will be received, the data model will be updated and the block will be displayed)

Dragos Rusu
  • 1,508
  • 14
  • 14
0

you can checkout one of my earlier post - 

http://stackoverflow.com/questions/25301581/angular-js-newbie-link-in-a-controller-view-that-triggers-another-controller-a/25305951#25305951

I have added a plunk as a demo - http://plnkr.co/edit/1dhdPfmB1WwAkYhsz4Hv

Rabi
  • 2,210
  • 17
  • 18