Creating a custom visualization : new plugin breaks visualization, dashboard and discovery apps

[TheEternalLearner]

Hello,

I am trying to create my own react visualization in Kibana. I've set up the dev environment on a debian 9 vm and create my plugin using the kibana plugin generator.
Because I'm pretty new to this I am trying to start slowly by creating a small plugin that doesn't do much. So I copied the js files of the markdown_vis plugin and tweek them a bit.

Here are my different files :
in the kibana/plugin/speedguide_portfinder_vis directory
my index.js :

import { resolve } from 'path';

export default function (kibana) {

  return new kibana.Plugin({

    uiExports: {
      visTypes: [
        'plugins/speedguide_portfinder/speedguide_portfinder_vis'
      ],
      interpreter: ['plugins/speedguide_portfinder/speedguide_portfinder_fn'],
      styleSheetPaths: resolve(__dirname, 'public/index.scss'),
    }

  });

};

in the public directory :
speedguide_portfinder_vis.js :

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

VisTypesRegistryProvider.register(SpeedguidePortfinderVisProvider);

function SpeedguidePortfinderVisProvider() {
  const VisFactory = Private(VisFactoryProvider);
  // return the visType object, which kibana will use to display and configure new
  // Vis object of this type.
  return VisFactory.createReactVisualization({
    name: 'speedguide_portfinder',
    title: 'Speedguide_portfinder',
    isAccessible: true,
    icon: 'visText',
    description: 'awesome button to research a port on speedguide',
    visConfig: {
      component: SpeedguidePortfinderWrapper,
      defaults: {
        openLinksInNewTab: true,
        port:0
      }
    },
    requestHandler: 'none',
    responseHandler: 'none',
  });
}

export default SpeedguidePortfinderVisProvider;

speedguide_portfinder_fn.js :

import { functionsRegistry } from 'plugins/interpreter/registries';
import { i18n } from '@kbn/i18n';

export const kibanaSpeedguidePortfinder = () => ({
  name: 'speedguidePortfinderVis',
  type: 'render',
  context: {
    types: [],
  },
  help: i18n.translate('SpeedguidePortfinderVis.function.help', {
    defaultMessage: 'Speedguide_portfinder visualization'
  }),
  args: {
    port: {
      type: ['integer'],
      aliases: ['_'],
      required: true,
    },
    openLinksInNewTab: {
      types: ['boolean'],
      default: true,
    }
  },
  fn(context, args) {
    return {
      type: 'render',
      as: 'visualization',
      value: {
        visType: 'speedguide_portfinder',
        visConfig: {
          port: args.port,
          openLinksInNewTab: args.openLinksInNewTab
        },
      }
    };
  }
});

functionsRegistry.register(kibanaSpeedguidePortfinder);

speedguide_portfinder_vis_controller.js :

import React, { Component } from 'react'

class SpeedguidePortfinderVisComponent extends Component {
  componentDidMount() {
    this.props.renderComplete();
  }
  render() {
    return (
      <div>
        <p>The visualization</p>

      </div>
    );
  }
}

export function SpeedguidePortfinderVisWrapper(props) {
  return (
    <SpeedguidePortfinderVisComponent

      openLinksInNewTab={props.visParams.openLinksInNewTab}
      renderComplete={props.renderComplete}
    />
  );
}

index.scss :

@import 'src/legacy/ui/public/styles/styling_constants';

I was able to run kibana successfully however when I try to access the visualisation tab (or even the dashboard or discovery tab) the pages seem broken..

Visualize tab :

Dashboard tab :

Discovery tab :

the Discovery tab has also the circular reference to registry error and both the Discovery and Dashboard tab have the Provide is undefined error.

[christophilus (Chris Davies)]

It'd be really helpful if you could re-post your code using triple back-ticks (e.g. ```). Also, you need to look at your browser's dev tool console to see what errors are being logged there.

[TheEternalLearner]

I have re-posted my code , with the dev toools I found a few errors but I 'm not sure how to fix them as I based my test visualization on the markdown vis and cannot find any imports concerning Private which is supposedely undefined or why I get circular references.