How to use third-party angular component in kibana/dashboard

Elastic Stack Kibana
1

for example, I wanna use angular-xeditable in dashboard_listing.js, what should I do?

PS: dashboard_listing.js located at src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js

I tried below but failed with Unknown provider: xeditableProvider <- xeditable

//src/core_plugins/kibana/public/kibana.js
import 'angular-xeditable/dist/css/xeditable.min.css';
import 'angular-xeditable/dist/js/xeditable.min';

...

modules.get('kibana', ['xeditable']).run(Notifier.pullMessageFromUrl);


//src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js

...

export function DashboardListingController($injector, $scope) {
  const $filter = $injector.get('$filter');
  const confirmModal = $injector.get('confirmModal');
  
  const xeditable = $injector.get('xeditable'); //error here
  ...
}
2

We don't recommend forking and modifying the code directly as it makes upgrades painful. What are you trying to achieve with xeditable? If Kibana is missing some functionality, filing a github issue might be a good route, or alternatively, if it's very specific functionality you are looking for, writing a plugin might be another avenue to explore.

3

change is under control, I wanna know why cannot inject third-party angular component

4

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.