Port existing js app to kibana plugin

[blueemerald (T)]

We have an existing web-application that is self contained. It makes restful calls to a service we have developed and the service then makes all the elastic search calls and returns json back to the web-app.

We want to bundle the web-app into a kibana plugin. All of the javascript code in this app is not node.js type javascript, but rather, object-based, like this:

//////////////////////////////////////////////////////////////////////////
AbstractView.prototype = Object.create(AbstractApplicationComponent.prototype);
AbstractView.prototype.constructor = AbstractView;
/**

• Abstract class to define structure for arbitrary UI elements. Inherits from AbstractApplicationComponent.
  */
  function AbstractView(containerSelector, componentSelectors) {
  // Inheritance.
  AbstractApplicationComponent.call(this);

// Members.
this._containerSelector = containerSelector ? containerSelector : document.createElement("div");
this._selectors = componentSelectors ? componentSelectors : {};

this._verifySelectors(); // Verify the provided selectors.
}

AbstractView.prototype._verifySelectors = function() {
if ($(this._containerSelector).length == 0) {
this._logWarning("Parent container '" + this._containerSelector + "' could not be found on the page.");
}

for (var name in this._selectors) {
if ($(this._selectors[name]).length == 0) {
this._logWarning("Selector '" + name + "' was provided as '" + this._selectors[name] + "' but could not be found on the page.");
}
}
};

AbstractView.prototype.getContainerSelector = function() {
return this._containerSelector;
};
////////////////////////////////////////////

In my app.js

I am doing many imports to bring in all the existing code, like this:

import './js/dragonfly/Core/ApplicationEvents.js';
import './js/dragonfly/Core/AbstractApplicationProperties.js';
import './js/dragonfly/Core/AbstractApplication.js';
...

But I find once I start kibana, and click on my new plugin "app" I get these kind of errors:

Uncaught ReferenceError: AbstractPubSub

My question(s) are.

. how do I import this existing code so I don't get the ReferenceErrors ?

. and am I even on the right track attempting to bring my existing non-node.js code into kibana like this ?

[timroes]

Hi,

(Hint: You can use triple backticks ``` around your code to format it as code.)

In general a plugin in Kibana consists of two different parts of JS code. It has node.js server code (e.g. in the index.js within the plugin), that will execute on the server, and it has code, that is delivered to the frontend in a folder called public within your plugin.

I would recommend looking at some existing plugins, to check how to load that code, in the Frontend.
Usually you either want to have your self contained app running as a visualization (a simple visualization plugin can be found here: https://github.com/elastic/kibana/tree/master/src/core_plugins/tagcloud) or as an application (i.e. having it's own entry in the navigation on the left and be it's complete own view), e.g. look at timelion.

Basically you have to specify uiExports and tell it what parts your application contains.

Cheers,
Tim