Using `callWithRequest` inside a controller

Elastic Stack Kibana
1

Hi Kibana Team,

I am working on developing a custom visualization plugin for learning purpose.

I have created a below folder structure:

> intalledPlugins
   |- JDVisual
         |-  public
         |      |-  jdvisual.js
         |      |-  jdvisual.css
         |      |-  jd.html
         |      |-  aggregation-editor.html
         |-  server
         |      |- routes.js
         |- index.js
         |- package.json

I am following the base code from elasticsearch_status.

I have configured my routes.js same as in elasticsearch_status/server/rotes.js.

And as per the example, I have added

   import api from './server/routes';

to index.js in order to use callWithRequest.

Now in my jdvisual.js, I have the below code:

// Include our custom CSS (LESS also works)
require('plugins/JDVisual/jdvisual.css');

// Create an Angular module for this plugin
var module = require('ui/modules').get('JDVisual');

// Add a controller to this module
module.controller('JDVisualController', function($scope, $timeout) {
	$scope.$watch('vis.params.jduid',function() {
		var jduid = $scope.vis.params.jduid;
	});
});
// The provider function must return the visualization
function JDProvider(Private) {
	// Load TemplateVisType
	var TemplateVisType = Private(require('ui/template_vis_type/TemplateVisType'));

	// Return a new instance describing this visualization
	return new TemplateVisType({
		name: 'JD Visual', // the internal id of the visualization
		title: 'JD Visual', // the name shown in the visualize list
		icon: 'fa-desktop', // the class of the font awesome icon for this
		description: 'JD Custom Visualization', // description shown to the user
		requiresSearch: false, // Cannot be linked to a search
		template: require('plugins/JDVisual/jd.html'), // Load the template of the visualization
		params: {
			editor: require('plugins/JDVisual/aggregation-editor.html'), // Use this HTML as an options editor for this vis
		}
	});
}
// Register the above provider to the visualization registry
require('ui/registry/vis_types').register(JDProvider);

I wish to use callWithRequest inside

$scope.$watch('vis.params.jduid', function() {
        //How to use callWithRequest Here.
});

Is it possible or am I doing something wrong. If this can be achieved then how?

Thanks,

2

In his example, the code in elasticsearch_status/server/routes.js is running on the kibana server, and is not part of the application that is running in the browser. This is code that exposes url endpoints which wrap the access to elasticsearch.

For example here is he is creating a url endpoint at /api/elasticsearch_status/indices which he then can call from a controller in angular using the $http service here.