Kiban left navbar icons disappear when I click my plugin icon

Elastic Stack Kibana
1

Kibana version:
6.6.0

Elasticsearch version:
6.6.0

Server OS version:
Ubuntu 18

Browser version:
Chrome 71

Browser OS version:
Ubuntu 18

Original install method (e.g. download page, yum, from source, etc.):
kibana git repo: https://github.com/elastic/kibana.git

Describe the bug:
Kiban left navbar icons disappear when I click my plugin icon.
screenshot from 2019-02-14 10-26-27
And they are back again when I click on any of the Kibana plugins
screenshot from 2019-02-14 10-26-04

Steps to reproduce:

  1. Run Elasticsearch 6.6.0
  2. Generate a plugin and set the following answers
$ cd kibana
kibana$ node scripts/generate_plugin.js rabbit
? Provide a short description An awesome Kibana plugin
? What Kibana version are you targeting? 6.6.0
? Should an app component be generated? Yes
? Should translation files be generated? Yes
? Should a hack component be generated? Yes
? Should a server API be generated? Yes
? Should SCSS be used? Yes
  1. After the build is finished, go to the plugin and start it
$ cd ../kibana-extra/rabbit
yarn start

Expected behavior:
All icons on the Kibana left navbar must be visible after I click on my plugin icon.

Screenshots (if relevant):
Look above for the screenshots.

Errors in browser console (if relevant):
No errors.

Any additional context:

cd rabbit

$ cat index.js 
import exampleRoute from './server/routes/example';

export default function (kibana) {
  return new kibana.Plugin({
    require: ['elasticsearch'],
    name: 'rabbit',
    uiExports: {
      app: {
        title: 'Rabbit',
        description: 'An awesome Kibana plugin',
        main: 'plugins/rabbit/app',
      },
      hacks: [
        'plugins/rabbit/hack'
      ],
      styleSheetPaths: require('path').resolve(__dirname, 'public/app.scss'),
    },

    config(Joi) {
      return Joi.object({
        enabled: Joi.boolean().default(true),
      }).default();
    },

    init(server, options) { // eslint-disable-line no-unused-vars
      // Add server routes and initialize the plugin here
      exampleRoute(server);
    }
  });
}

$ cat public/app.js 
import React from 'react';
import { uiModules } from 'ui/modules';
import chrome from 'ui/chrome';
import { render, unmountComponentAtNode } from 'react-dom';

import 'ui/autoload/styles';
import './less/main.less';
import { Main } from './components/main';

const app = uiModules.get('apps/rabbit');

app.config($locationProvider => {
  $locationProvider.html5Mode({
    enabled: false,
    requireBase: false,
    rewriteLinks: false,
  });
});
app.config(stateManagementConfigProvider =>
  stateManagementConfigProvider.disable()
);

function RootController($scope, $element, $http) {
  const domNode = $element[0];

  // render react to DOM
  render(<Main title="rabbit" httpClient={$http} />, domNode);

  // unmount react on controller destroy
  $scope.$on('$destroy', () => {
    unmountComponentAtNode(domNode);
  });
}

chrome.setRootController('rabbit', RootController);

$ tree -I 'node_modules' -L 30 ../rabbit/
../rabbit/
├── index.js
├── package.json
├── public
│   ├── app.css
│   ├── app.js
│   ├── app.scss
│   ├── components
│   │   └── main
│   │       ├── index.js
│   │       └── main.js
│   ├── hack.js
│   ├── less
│   │   └── main.less
│   └── __tests__
│       └── index.js
├── README.md
├── server
│   ├── routes
│   │   └── example.js
│   └── __tests__
│       └── index.js
└── yarn.lock
2

Just to have @tiagocosta's solution here too from the github ticket: in your app.js, add import 'ui/autoload/modules'; before the line with import 'ui/autoload/styles';

2 Likes
3

The Same problem was noticed with Kibana Version 6.6.1 and @tiagocosta 's solution worked too.

4

It should be fixed in the 6.6.2 version released 2 days ago :slight_smile:

2 Likes
5

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