Compatibility with 7.5.1

Question

Compatibility with 7.5.1

srouthiau opened this issue 4 years ago · comments

I have tried the plugin on 7.5.1

I have managed to solve loading issue in time.js but the component still don't work i have an error in timeController.js

commons.bundle.js:3 Uncaught (in promise) TypeError: emitter.on is not a function
at ChildScope._modules.uiModules.get.run.$rootScope.constructor.$listen (commons.bundle.js:3)
at Object. (commons.bundle.js:13)
at Object.invoke (vendors.bundle.dll.js:435)
at $controllerInit (vendors.bundle.dll.js:435)
at nodeLinkFn (vendors.bundle.dll.js:435)

Please help us.

Here's my modification of time.js

import 'ui/angular-bootstrap';
import 'plugins/kibana-time-plugin/lib/angular-bootstrap/css/btn-group.less';
import 'plugins/kibana-time-plugin/lib/angular-bootstrap/css/carousel.less';
import 'plugins/kibana-time-plugin/lib/angular-bootstrap/js/carousel.js';
import 'plugins/kibana-time-plugin/bower_components/bootstrap-addons/dist/css/bootstrap-addons.css';
import 'plugins/kibana-time-plugin/bower_components/bootstrap-addons/dist/js/bootstrap-addons.js';
import 'plugins/kibana-time-plugin/time.less';
import 'plugins/kibana-time-plugin/timeController';

import { AngularVisController } from 'ui/vis/vis_types/angular_vis_type';
import { visFactory } from 'ui/vis/vis_factory';
import { setup as visualizations } from '../../../src/legacy/core_plugins/visualizations/public/np_ready/public/legacy';

import visTemplate from 'plugins/kibana-time-plugin/time.html';
import optionsTemplate from 'plugins/kibana-time-plugin/timeOptions.html';

// register the provider with the visTypes registry
visualizations.types.registerVisualization(TimeVisProvider);

function TimeVisProvider() {
return visFactory.createBaseVisualization({
name: 'time',
title: 'Time widget',
icon: 'clock',
description: 'Add time inputs to your dashboards.',
visualization: AngularVisController,
visConfig: {
template: visTemplate,
defaults: {
enable_quick: false,
enable_relative: false,
enable_absolut: true,
enable_animation: false,
}
},
editorConfig: {
optionsTemplate: optionsTemplate
},
requestHandler: 'none',
responseHandler: 'none'
});
}

deepakmldeveloper · Answer 1 · Mon Apr 27 2020 15:58:16 GMT+0800 (China Standard Time)

Hi,

Are you able to resolve the issues?

Thanks

Nathan Reese · Answer 2 · Thu Apr 30 2020 20:51:57 GMT+0800 (China Standard Time)

There has been a lot of refactoring in Kibana between 7.0 and 7.5.

It looks like SimpleEmitter used at https://github.com/nreese/kibana-time-plugin/blob/master/public/timeController.js#L9 no longer exists in 7.5. Try replacing it with import EventEmitter from 'events';

deepakmldeveloper · Answer 3 · Thu Apr 30 2020 21:42:12 GMT+0800 (China Standard Time)

Hi, Thanks for your reply. I did following changes: [image: image.png] But still following error is coming: [image: image.png]

…

On Thu, Apr 30, 2020 at 6:22 PM Nathan Reese ***@***.***> wrote: There has been a lot of refactoring in Kibana between 7.0 and 7.5. It looks like SimpleEmitter used at https://github.com/nreese/kibana-time-plugin/blob/master/public/timeController.js#L9 no longer exists in 7.5. Try replacing it with import EventEmitter from 'events'; — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#62 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APLLFCWJOHD2WHZRIML5KDTRPFX7ZANCNFSM4KE3AXDQ> .

deepakmldeveloper · Answer 4 · Sat May 02 2020 18:07:19 GMT+0800 (China Standard Time)

Hi,

I made following changes:

//import { SimpleEmitter } from 'events';
import { EventEmitter } from 'events';

and

//const msearchEmitter = new SimpleEmitter();
const msearchEmitter = new EventEmitter();

in timeController.js file. But still following error is coming:

TypeError: emitter.on is not a function
listen.js:34
Detected an unhandled Promise rejection.
TypeError: emitter.on is not a function fatal_errors_service.tsx:118

Any suggestion?

Thanks

Nathan Reese · Answer 5 · Sun May 03 2020 04:25:23 GMT+0800 (China Standard Time)

try putting a break point in listen.js and seeing what is getting passed in.

deepakmldeveloper · Answer 6 · Mon May 04 2020 14:07:30 GMT+0800 (China Standard Time)

Hi, I tried to find the steps to add break point in listen.js but could not find any. I am using yarn start to run the kiban with all the plugins for development. Can you please provide any tutorial url which explains the steps to debug Kibana plugin? Regards Deepak Kumar

…

On Sun, May 3, 2020 at 1:55 AM Nathan Reese ***@***.***> wrote: try putting a break point in listen.js and seeing what is getting passed in. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#62 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APLLFCXYNJCJVLMWBA5FJ4TRPR6T7ANCNFSM4KE3AXDQ> .

deepakmldeveloper · Answer 7 · Wed May 13 2020 17:50:35 GMT+0800 (China Standard Time)

Hi,

Did you get chance to work on this bug?

Thanks

Nathan Reese · Answer 8 · Wed May 13 2020 21:33:22 GMT+0800 (China Standard Time)

I have not had time to look into the issue

here is a guide for using chrome debugger to isolate the issue https://dzone.com/articles/debug-javascript-using-chrome-developer-tools

deepakmldeveloper · Answer 9 · Mon May 18 2020 17:13:10 GMT+0800 (China Standard Time)

HI,

Following code is not executing:
$scope.$listen(timefilter, 'timeUpdate', () => {
$scope.$evalAsync(() => setTime());
});
it throws
message: "emitter.on is not a function"
stack: "TypeError: emitter.on is not a function↵ at ChildScope.$rootScope.constructor.$listen (http://localhost:5601/fya/bundles/commons.bundle.js:151308:13)↵ at Object. (http://localhost:5601/fya/bundles/commons.bundle.js:25847:10)↵ at Object.invoke (webpack://%5Bname%5D/./node_modules/angular/angular.js?:5143:19)↵ at $controllerInit (webpack://%5Bname%5D/./node_modules/angular/angular.js?:11707:34)↵ at nodeLinkFn (webpack://%5Bname%5D/./node_modules/angular/angular.js?:10520:33)↵ at compositeLinkFn (webpack://%5Bname%5D/./node_modules/angular/angular.js?:9835:13)↵ at publicLinkFn (webpack://%5Bname%5D/./node_modules/angular/angular.js?:9700:30)↵ at _callee$ (http://localhost:5601/fya/bundles/commons.bundle.js:183443:84)↵ at tryCatch (webpack://%5Bname%5D/./node_modules/regenerator-runtime/runtime.js?:45:40)↵ at Generator.invoke [as _invoke] (webpack://%5Bname%5D/./node_modules/regenerator-runtime/runtime.js?:271:22)"
proto: Error
constructor: ƒ TypeError()
message: ""
name: "TypeError"
toString: ƒ toString()
proto: Object

Let's know if you have any idea?

Thanks

deepakmldeveloper · Answer 10 · Mon May 18 2020 17:34:55 GMT+0800 (China Standard Time)

Hi,

I commented following function in timeContoller.js

/*
$scope.$listen(timefilter, 'timeUpdate', () => {
$scope.$evalAsync(() => setTime());
});
*/

After that plugin is getting displayed, but I don't know how it will affect the whole plugin. Please let me know what to do next? How should i re-rewrite this code?

Thanks

Nathan Reese · Answer 11 · Tue May 19 2020 09:11:00 GMT+0800 (China Standard Time)

After that plugin is getting displayed, but I don't know how it will affect the whole plugin. Please let me know what to do next? How should i re-rewrite this code?

I believe that subscript is to update the time slider when the Kibana global time picker changes. With that listen removed, does the time slider update when the global time picker changes?

If it does not, try adding the following, globalState is an angular service that gets injected in module.controller definition.

$scope.$listen(globalState, 'fetch_with_changes', diff => {
      if (diff.includes('time')) {
        setTime();
      }
});

bassem chagra · Answer 12 · Fri May 22 2020 18:06:08 GMT+0800 (China Standard Time)

Hi folks,
if you make these changes, the plugin should work fine:
remove:

import { VisFactoryProvider } from 'ui/vis/vis_factory';
import { VisTypesRegistryProvider } from 'ui/registry/vis_types';

and replace it by:

import { AngularVisController } from 'ui/vis/vis_types/angular_vis_type';
import KbnTimeVisController  from './timeController'

import { setup as visualizations } from '../../../src/legacy/core_plugins/visualizations/public/np_ready/public/legacy';
import { npSetup } from 'ui/new_platform';



  const timePickeerDefinition = {
    name: 'time',
    title: 'Time widget',
    icon: 'clock',
    visualization: AngularVisController,
    description: 'Add time inputs to your dashboards.',
    visConfig: {
      template: visTemplate,
      defaults: {
          enable_quick: true,
          enable_relative: true,
          enable_absolut: true,
          enable_animation: true,
      }
    },
    editorConfig: {
      optionsTemplate: optionsTemplate
    },
    requestHandler: 'none',
    responseHandler: 'none'
  };

npSetup.plugins.expressions.registerFunction(timePickeerDefinition);
visualizations.types.createBaseVisualization(timePickeerDefinition);

and then in timeController.js, comment this:
$scope.$listen(timefilter, 'timeUpdate', () => { $scope.$evalAsync(() => setTime()); });

deepakmldeveloper · Answer 13 · Fri May 22 2020 18:22:47 GMT+0800 (China Standard Time)

Thanks, I will check it out. Regards Deepak Kumar

…

On Fri, May 22, 2020 at 3:36 PM bassem chagra ***@***.***> wrote: Hi folks, if you make these changes, the plugin should work fine: remove: import { VisFactoryProvider } from 'ui/vis/vis_factory'; import { VisTypesRegistryProvider } from 'ui/registry/vis_types'; and replace it by: import { AngularVisController } from 'ui/vis/vis_types/angular_vis_type'; import KbnTimeVisController from './timeController' import { setup as visualizations } from '../../../src/legacy/core_plugins/visualizations/public/np_ready/public/legacy'; import { npSetup } from 'ui/new_platform'; const timePickeerDefinition = { name: 'time', title: 'Time widget', icon: 'clock', visualization: AngularVisController, description: 'Add time inputs to your dashboards.', visConfig: { template: visTemplate, defaults: { enable_quick: true, enable_relative: true, enable_absolut: true, enable_animation: true, } }, editorConfig: { optionsTemplate: optionsTemplate }, requestHandler: 'none', responseHandler: 'none' }; npSetup.plugins.expressions.registerFunction(timePickeerDefinition); visualizations.types.createBaseVisualization(timePickeerDefinition); and then in timeController.js, comment this: $scope.$listen(timefilter, 'timeUpdate', () => { $scope.$evalAsync(() => setTime()); }); — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#62 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APLLFCUMDKOQ4WNNJ7TR2RDRSZFB5ANCNFSM4KE3AXDQ> .

Arvin-developer · Answer 14 · Wed Jun 03 2020 10:53:44 GMT+0800 (China Standard Time)

Hi folks,
if you make these changes, the plugin should work fine:
remove:

import { VisFactoryProvider } from 'ui/vis/vis_factory';
import { VisTypesRegistryProvider } from 'ui/registry/vis_types';

and replace it by:

import { AngularVisController } from 'ui/vis/vis_types/angular_vis_type';
import KbnTimeVisController  from './timeController'

import { setup as visualizations } from '../../../src/legacy/core_plugins/visualizations/public/np_ready/public/legacy';
import { npSetup } from 'ui/new_platform';



  const timePickeerDefinition = {
    name: 'time',
    title: 'Time widget',
    icon: 'clock',
    visualization: AngularVisController,
    description: 'Add time inputs to your dashboards.',
    visConfig: {
      template: visTemplate,
      defaults: {
          enable_quick: true,
          enable_relative: true,
          enable_absolut: true,
          enable_animation: true,
      }
    },
    editorConfig: {
      optionsTemplate: optionsTemplate
    },
    requestHandler: 'none',
    responseHandler: 'none'
  };

npSetup.plugins.expressions.registerFunction(timePickeerDefinition);
visualizations.types.createBaseVisualization(timePickeerDefinition);

and then in timeController.js, comment this:
$scope.$listen(timefilter, 'timeUpdate', () => { $scope.$evalAsync(() => setTime()); });

Thanks for your help ！
I follow those setting on opendistro kibana 7.4.2 , the web error also exit and no diagram display :

vendors.bundle.dll.js:28 Uncaught TypeError: emitter.on is not a function
at ChildScope.$rootScope.constructor.$listen (commons.bundle.js:85)
at Object. (kibana.bundle.js:1)
at Object.invoke (vendors.bundle.dll.js:239)
at $controllerInit (vendors.bundle.dll.js:239)
at nodeLinkFn (vendors.bundle.dll.js:239)
at compositeLinkFn (vendors.bundle.dll.js:239)
at publicLinkFn (vendors.bundle.dll.js:239)
at commons.bundle.js:83
at new Promise ()
at AngularVisController.render (commons.bundle.js:83)

If you have any adivce , please help to reply , thanks !

bassem chagra · Answer 15 · Wed Jun 03 2020 15:50:31 GMT+0800 (China Standard Time)

Hi @Arvin-developer , that was already answered, you should remove
$scope.$listen(timefilter, 'timeUpdate', () => { $scope.$evalAsync(() => setTime()); });

Arvin-developer · Answer 16 · Wed Jun 03 2020 17:23:53 GMT+0800 (China Standard Time)

Hi @Arvin-developer , that was already answered, you should remove
$scope.$listen(timefilter, 'timeUpdate', () => { $scope.$evalAsync(() => setTime()); });

Thanks for your help !
I had remove this code on timeController.js , and restart the kibana ,but meet the new exception ：

FATAL Error: Optimizations failure.
4579 modules

ERROR in ./plugins/kibana-time-plugin/public/time.js
Module not found: Error: Can't resolve '../../../src/legacy/core_plugins/vis

ualizations/public/np_ready/public/legacy' in 'C:\inetpub\odfe-1.4.0-kibana_DEV
plugins\kibana-time-plugin\public'

Is maybe kibana version different to 7.5 so that miss the js source ?

bassem chagra · Answer 17 · Wed Jun 03 2020 17:28:53 GMT+0800 (China Standard Time)

Please make sure that you are pointing to the write destination, because the file does exist in Kibana 7.5.

Arvin-developer · Answer 18 · Wed Jun 03 2020 17:56:40 GMT+0800 (China Standard Time)

Please make sure that you are pointing to the write destination, because the file does exist in Kibana 7.5.

Thanks @ch-bas
My kibana version is opendistro kibana 7.4.2 , there is no src\legacy\core_plugins\visualizations\public\np_ready\public\legacy.js file , so error happend .
Maybe we can not add this plugin on difference opendistro kibana 7.4.2 , it will need to modify many js code .

prasinos · Answer 19 · Fri Jun 05 2020 17:04:19 GMT+0800 (China Standard Time)

Hi folks,
if you make these changes, the plugin should work fine:
remove:

import { VisFactoryProvider } from 'ui/vis/vis_factory';
import { VisTypesRegistryProvider } from 'ui/registry/vis_types';

and replace it by:

import { AngularVisController } from 'ui/vis/vis_types/angular_vis_type';
import KbnTimeVisController  from './timeController'

import { setup as visualizations } from '../../../src/legacy/core_plugins/visualizations/public/np_ready/public/legacy';
import { npSetup } from 'ui/new_platform';



  const timePickeerDefinition = {
    name: 'time',
    title: 'Time widget',
    icon: 'clock',
    visualization: AngularVisController,
    description: 'Add time inputs to your dashboards.',
    visConfig: {
      template: visTemplate,
      defaults: {
          enable_quick: true,
          enable_relative: true,
          enable_absolut: true,
          enable_animation: true,
      }
    },
    editorConfig: {
      optionsTemplate: optionsTemplate
    },
    requestHandler: 'none',
    responseHandler: 'none'
  };

npSetup.plugins.expressions.registerFunction(timePickeerDefinition);
visualizations.types.createBaseVisualization(timePickeerDefinition);

and then in timeController.js, comment this:
$scope.$listen(timefilter, 'timeUpdate', () => { $scope.$evalAsync(() => setTime()); });

Hi @ch-bas,

I modified time.js and timeController.js as you describe but I am getting the following error:

Version: 7.5.2 Build: 27675 Error: Register requires an function register@http://host.removed.com:5601/bundles/plugin/expressions.bundle.js:3:12420 registerFunction@http://host.removed.com:5601/bundles/plugin/expressions.bundle.js:3:7982 @http://host.removed.com:5601/bundles/commons.bundle.js:3:6403163 __webpack_require__@http://host.removed.com:5601/bundles/kibana.bundle.js:3:1463 @http://host.removed.com:5601/bundles/commons.bundle.js:3:796141 __webpack_require__@http://host.removed.com:5601/bundles/kibana.bundle.js:3:1463 __kbnBundles__.kibana<@http://host.removed.com:5601/bundles/kibana.bundle.js:3:739512 __webpack_require__@http://host.removed.com:5601/bundles/kibana.bundle.js:3:1463 requireLegacyFiles@http://host.removed.com:5601/bundles/kibana.bundle.js:3:739114 start@http://host.removed.com:5601/bundles/commons.bundle.js:3:2485247 _callee2$@http://host.removed.com:5601/bundles/commons.bundle.js:3:2480213 tryCatch@http://host.removed.com:5601/built_assets/dlls/vendors.bundle.dll.js:489:789856 invoke@http://host.removed.com:5601/built_assets/dlls/vendors.bundle.dll.js:489:793705 defineIteratorMethods/</prototype[method]@http://host.removed.com:5601/built_assets/dlls/vendors.bundle.dll.js:489:790980 asyncGeneratorStep@http://host.removed.com:5601/bundles/commons.bundle.js:3:2472100 _next@http://host.removed.com:5601/bundles/commons.bundle.js:3:2472411 notify/<@http://host.removed.com:5601/built_assets/dlls/vendors.bundle.dll.js:314:123090 flush@http://host.removed.com:5601/built_assets/dlls/vendors.bundle.dll.js:109:959249
I am using Kibana 7.5.2 on docker with the directory of the plugin mounted on /usr/share/kibana/plugins/kibana-time-plugin in the container.
Is there any other modification I should do? Thank you.

bassem chagra · Answer 20 · Fri Jun 05 2020 18:41:10 GMT+0800 (China Standard Time)

Maybe this will help #64 .