Including Third party dependencies inside Kibana Plugin?

Elastic Stack Kibana
1

I am developing kibana plugin of type App in Kibana 4.5.X. I need to include the date picker https://github.com/Eonasdan/bootstrap-datetimepicker.

How to include the JavaScript file properly, before loading this datetimepickerfile, I need to include jquery, bootstrap. Any help would be really helpful.

Can anyone please share some example code.?

2

Hey there, it looks like this datetimepicker is available via NPM as well as bower. I suggest you install it and its dependencies with NPM. Because kibana uses webpack to build its bundles, you can then just require these files:

require('jquery');
require('bootstrap');
require('eonasdan-bootstrap-datetimepicker ');

At least in theory! Please try this out and let me know if it helps you. Thanks!

3

Just a note: I think webpack will search for your bower components too, if you'd rather install dependencies with bower.

4

Aaaand another thing... here's a list of known plugins that you can refer to for guidance and inspiration: https://github.com/elastic/kibana/wiki/Known-Plugins.

5

Thanks for the reply @cjcenizal
I could now able to include jquery and bootstrap and eonsadan-bootstrap-datetimepicker but dont know how to use inside the application

My index.html

  <div class="row">
    <div class='col-md-4'>
      <label for="sel1" >End Date</label>
        <div class="form-group">
          <div class='input-group date' id='datetimepicker2' ng-model="EndDate">
            <input type='text' class="form-control" ng-value="DefaultTime" ng-model="EndDate" id="usertodate" />
              <span class="input-group-addon">
              <span class="glyphicon glyphicon-calendar"></span>
              </span>
          </div>
        </div>
      </div>
    </div>
</div>

my app.js
`var $ = require('jquery');
require('bootstrap');
import moment from 'moment';
require('eonasdan-bootstrap-datetimepicker');
import chrome from 'ui/chrome';
import uiModules from 'ui/modules';
import uiRoutes from 'ui/routes';
uiModules
.get('app/hikapp', [])
.controller('hikappHelloWorld', function ($scope, $route, $interval, $http, $routeParams) {

$(function () {$('#datetimepicker2').datetimepicker();})
};
`

It throws me error $(...).datetimepicker is not a function.
Could you please point a right way to use it. :frowning:

If I include by import statement by explicitly to obtain css and js
import './bootstrap-datetimepicker.css';
import './bootstrap-datetimepicker.js';

Date Picker works perfectly. :slight_smile:

6

I'm sorry if I'm mis-understanding, but it sounds like you're saying that this works:

import './bootstrap-datetimepicker.css';
import './bootstrap-datetimepicker.js';

Is that right? If so, then I think that's fine way to do it, as long as it works! :slight_smile:

7

Thanks @cjcenizal for your valuable feedback.