Can we integrate kibana with kendo-ui? - elasticsearch

Question

I tried to integrated kibana with kendo-ui to view the visuals at the kibana dashboard.Is that possible to do like that?

Answer 1

yes.. but there is no official process provided by kibana #team.. I have done this using creating custom visualization plugin..
Plugin index.js
'use strict';
module.exports = function (kibana) {
return new kibana.Plugin({
uiExports: {
visTypes: ['plugins/kendo_vislib_vis_types/kendo_vislib_vis_types']
}
});
};
kendo_vislib_vis_types
define(function (require) {
const visTypes = require('ui/registry/vis_types');
visTypes.register(require('plugins/kendo_vislib_vis_types/line'));
visTypes.register(require('plugins/kendo_vislib_vis_types/bar'));
visTypes.register(require('plugins/kendo_vislib_vis_types/pie'));
visTypes.register(require('plugins/kendo_vislib_vis_types/metric'));
});
Remaining followed http://logz.io/blog/kibana-visualizations/
esResponse Data should be formatted in kendo required format using
$scope.$watch('esResponse', function (resp) {
if (resp) {
var currentState = $scope.vis.getState();
$scope.vis.setState(ktInterval.changeInterval(currentState));
$scope.kendoOptionGroup = [];
// console.log(tabifyAggResponse($scope.vis, resp));
$scope.resp = +moment();
$scope.processTableGroups(tabifyAggResponse($scope.vis, resp));
}
});
Note: CSS files injected with hardcoded way directly into src/ui/ui_app.jade, because though plugin means css images path should be in kibana understandable format which need modify manually in kendo.*.min.css.
kendo CSS files injecting to kibana
var files = [
bundleFile('commons.style.css'),
bundleFile('kendo/styles/kendo.default.min.css'),
bundleFile('kendo/styles/kendo.common.min.css'),
bundleFile('#{app.id}.style.css'),
bundleFile('custom.style.css'),
bundleFile('commons.bundle.js'),
bundleFile('#{app.id}.bundle.js')
];