Error when building new visualization factory

[jarajapu]

I am trying to build a new visualization using the base visualization type in your visualization factory. After following the standard documentation as well as tutorials, I was able to get the plugin to try and register successfully.

However, I see an error as soon as I try to launch the plugin within a browser. Here is the error message :

Expected private module "undefined" to be a function
http://localhost:5601/ujc/bundles/commons.bundle.js?v=8467:87442
"<div class="application ng-scope" ng-class="'tab-' + chrome.getFirstPathSegment() + ' ' + chrome.getApplicationClasses()" ng-view="" ng-controller="chrome.$$rootControllerConstruct as kibana">"

[jarajapu]

Attached is a screenshot. I am building on Kibana 7.0.0-alpha1

[timroes]

Hi,

could you please provide some more information, what you mean by "launch the plugin with a browser"? Where exactly does it fail? When loading Kibana; creating a new visualization?

Also could you please paste the relevant source code. Best would be your visualization registration, and also when opening your dev tools and open the appropriate line (8467:87460) in your bundle.js what code line does this refer to?

[jarajapu]

@timroes, thank you for your response. It fails when I click on the 'visualize' tab in Kibana UI side nav.

Here is the visualization registration :

function SmartTableVisProvider(Private) {
  const VisFactory = Private(VisFactoryProvider);
  const Schemas    = Private(VisSchemaProvider);

  return VisFactory.createBaseVisualization({
    name: 'smart_table',
    title: 'Smart Table',
    icon: 'fa fa-gear',
    description: 'Table with Colors',
    category: CATEGORY.OTHER,
    visualization: VisController,
    visConfig: {
      defaults: {
        fontSize: 22
      },
    },
    editorConfig: {
      optionsTemplate: tableOptionsTemplate,
      schemas: new Schemas([
        {
          group: 'metrics',
          name: 'metric',
          title: 'Value name we want',
          min: 1,
          aggFilter: ['!derivative', '!geo_centroid'],
          defaults: [
            {type: 'count', schema: 'metric'}
          ]
        }
      ]),
    }
  });
}

VisTypesRegistryProvider.register(SmartTableVisProvider);

Also, here is the appropriate line (8467:87460) in my bundle.js :

  // return the uniq id for this function
  function identify(fn) {
    if (typeof fn !== 'function') {
      throw new TypeError('Expected private module "' + fn + '" to be a function');
    }

    if (fn.$$id) return fn.$$id;else return fn.$$id = nextId();
  }

[timroes]

Hmm so far it looks good. Are you sure VisController is a proper JavaScript class? Could you perhaps show the code of VisController and maybe also the imports/require statements in your SmartTableVisProvider file?

[jarajapu]

Here is the VisController class.

> class VisController {
> 
>   constructor(el, vis) {
>     this.vis = vis;
>     this.el  = el;
>     this.container = document.createElement('div');
>     this.container.className = 'smart-table-container-div';
>     this.el.appendChild(this.container);
>   }
> 
>   render(visData, status) {
> 
>     this.container.innerHTML = '';
> 
>     return new Promise(resolve => {
> 
>       const table = visData.tables[0];
>       const metrics = [];
>       let bucketAgg;
> 
>       table.columns.forEach((column, i) => {
>         const value = table.rows[0][i];
>         const title = column.title;
> 
>         const metricDiv = document.createElement('div');
>         metricDiv.classname = 'smart-table-metric-div';
>         metricDiv.innerHTML = '<b>${title}</b>: ${value}';
>         metricDiv.setAttribute('style', 'font-size: ${this.vis.params.fontSize}pt');
> 
>         this.container.appendChild(metricDiv);
>       });
> 
> 
>       resolve('when done rendering');
>     });
> 
>   }
> 
>   destroy()  {
>     this.el.innerHTML = '';
>   }
> };
> 
> export { VisController };

[jarajapu]

Here are the imports in SmartTableVisProvider file

import {VisController} from './vis_controller';

import { CATEGORY } from 'ui/vis/vis_category';
import { VisFactoryProvider } from 'ui/vis/vis_factory';
import { VisTypesRegistryProvider } from 'ui/registry/vis_types';
import { VisSchemaProvider } from 'ui/vis/editors/default/schemas';

[jarajapu]

Once again, thank you for continuing to look into this @timroes

[timroes]

Just a small hint: when you want to insert a block of code here int he forums (or in markdown in general, use triple backticks (```) above and below it to get the proper highlighting.

Regarding the source code, that looks actually all very fine. Where do you place it, how does your folder structure look? Does Kibana start up correctly if you remove the plugin?

Is the full plugin source code somewhere available (on Github)?

[jarajapu]

Kibana does come up correctly when I remove the plugin. So, I suspect this is a plugin related issue.

My folder structure is also pretty simple. There is a directory for the plugin name and a public folder underneath it. pretty much that's all.

I cannot share the full plugin source code unfortunately but I can tell you that this happens even with the sample project discussed here: https://www.elastic.co/blog/developing-new-kibana-visualizations

[timroes]

What version of Kibana do you use to develop against? I unfortunately can't reproduce this issue with the sample visualization and have never seen a similar sounding issue in this part of the code.

[jarajapu]

I am on 7.0.0-alpha1