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.
And they are back again when I click on any of the Kibana plugins
Steps to reproduce:
- Run Elasticsearch 6.6.0
- 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
- 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
