Problem with an application kibana plugin

Elastic Stack Kibana
1

I'm trying to create a kibana plugin of type app (named myplugin below). I did the following:

app.js file:
require('ui/autoload/all');
require('plugins/myplugin/mypluginController');
require('plugins/myplugin/less/main.less');

var chrome = require('ui/chrome');
chrome.setNavBackground('#222222')
.setTabs([])
.setRootTemplate(require('plugins/myplugin/templates/index.html'))
.setRootController('myplugin', 'MypluginController');

mypluginController.js file:
// Create an Angular module for this plugin
var module = require('ui/modules').get('myplugin');

module.controller('MypluginController', function ($scope, $route, $interval) {
$scope.title = 'My Plugin';
$scope.description = 'My simple app plugin doing nothing';
});

index.html file:

Congratulations

You've successfully created your first Kibana Plugin!

{{title}}

{{description}}

index.js file:
module.exports = function (kibana) {
return new kibana.Plugin({
id: 'myplugin',
name: 'myplugin',
require: ['kibana', 'elasticsearch'],
uiExports: {
app: {
title: 'MyPlugin',
description: 'My simple plugin doing nothing',
main: 'plugins/myplugin/app',
injectVars: function(server, options) {
return options;
}
}
},

config: function (Joi) {
  return Joi.object({
    enabled: Joi.boolean().default(true),
  }).default();
},

init: require('./init.js')

});

};

I installed the plugin onto installedPlugins of my kibana server started in dev mode. I correctly see myplugin application among the ones I have installed (kibana, sense, timelion). However, when I select myplugin I cannot see the angular expressions {{...}} resolved in the index.html template. It seems like myplugin angular module was not bootstrapped. What did I miss ? Thanks in advance.

p.s. I'm using the Kibana 5.0.0-snapshot (what I read from the README.md file), which I git cloned a couple of days ago.

2

Hrm, that's not good; something might be wrong with the generator. I'm looking into it now, I'll let you know what I find.

3

OK, I think I figured it out.

In your controller, you are still using the $route provider, even though you aren't consuming it.

Best solution is to remove it.

If you want to use that provider, you need to include the module where it's defined, as used in the generator. require('ui/routes').enable(); would get you there, but you're not using it here, just remove it for now.

As an aside, you've encouraged me to fix the generator now, so thanks for that ;). Now I just need to get a hold of someone with npm publish access.

4

Thanks Joe,

I made progress following your suggestions: removing the $route parameter from the myplyginController.js file works, I get {{}} expressions resolved.

So, I tried to get the generator stub working. I modified the code as follows:

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

var html = require('plugins/myplugin/templates/index.html');

var routes = require('ui/routes');
routes.enable();

routes.when('/myplugin', {
  template: html,
  resolve: {
    currentTime: function ($http) {
      return $http.get('/myplugin/api/example')
      .then(function (resp) {
        return resp.data.time;
      });
    }
  }
});

module.controller('MypluginController', function ($scope, $route, $interval) {
  $scope.title = 'My Plugin';
  $scope.description = 'My simple app plugin doing nothing';

  var moment = require('moment');
  var currentTime = moment($route.current.locals.currentTime);
  $scope.currentTime = currentTime.format('HH:mm:ss');
  var unsubscribe = $interval(function () {
    $scope.currentTime = currentTime.add(1, 'second').format('HH:mm:ss');
  }, 1000);
  $scope.$watch('$destroy', unsubscribe);
});

With those changes the plugin got back in error: {{}} expressions not resolved, as reported in my first post.
I'm able to see expressions resolved only if I remove any reference to $route.current. I changed the code to inspect $route:

module.controller('MypluginController', function ($scope, $route, $interval) {
  $scope.title = 'My Plugin';
  $scope.description = 'My simple app plugin doing nothing';

  $scope.currentTime = JSON.stringify($route);
});

and I get this json for the $route. It seems $route.current is not set.

{
    "routes": {
        "/": {
            "template": "<div class=\"container\" ng-controller=\"MypluginController\">\n <div class=\"row\">\n <div class=\"col-12-sm\">\n <div class=\"well\">\n <h2>Congratulations</h2>\n <p class=\"lead\">You've successfully created your first Kibana Plugin!</p>\n </div>\n <h1>{{title}}</h1>\n <p class=\"lead\">{{description}}</p>\n <p>The current time is {{currentTime}}</p>\n </div>\n </div>\n</div>\n",
            "resolve": {
                
            },
            "reloadOnSearch": false,
            "caseInsensitiveMatch": false,
            "originalPath": "/",
            "regexp": {
                
            },
            "keys": []
        },
        "": {
            "redirectTo": "/",
            "originalPath": "",
            "regexp": {
                
            },
            "keys": []
        }
    }
}

Can you explain (or point me to any article) how the route provider works? I think I missed the basics of kibana architecture. Which other providers should I know to effectively implement a plugin? Thanks very very much for your help.

5

I don't immediately see anything wrong with what you've posted, but I also haven't tried running it yet.

One thing that comes to mind is if you're running against the master branch of Kibana, we made a change where we're forcing development to use SSL and a basePath now, two things a lot of our plugins were doing wrong. I fixed this in the generator last week, but it's not on npm yet. So, it's possible that's the issue.

I'd recommend checking your browser's developer console and seeing what errors you see. I'm sure there's something being reported, and seeing the error will hopefully guide you to a solution. At the very least, you can post the error and we'll be better able to help out.

6

Thanks, I'll try the fix you made in the generator. Actually I'm running
kibana with npm start -- --no-ssl. Is that a problem?

7

--no-ssl is fine. You can also use --no-basepath if you rather not deal with that right now as well.

It's good to run with both enabled, to make sure your plugin actually works in all configurations, but as a short-term fix, it's an option.

We did push a new version of the generator to npm a little while ago too. If you made that small change by hand though, you should be fine.

8

Joe,

I updated the generator and created a brand new plugin using it. Now it works, thanks.