Adding management plugin

[ENG618 (Eric)]

I'm trying to add a section to the management landing page. Similar to how xpack adds sections there with there own configuration pages. I could not find any documentation or examples of there. Something similar to the highlighted section below.

Is there somewhere I can read up on this and figure out how to do this?

I have seen Stack Management | Kibana Guide [8.11] | Elastic which states

This section is pluginable, so in addition to the out of the box capabitilies, packs such as X-Pack can add additional management capabilities to Kibana.

[lukas (Lukas Olson)]

We make no guarantees on this plugin API, but here's how you can currently do it:

In your plugin's index.js, under uiExports, add the following:

uiExports: {
  managementSections: ['path/to/your/file']
}

Then inside this file, do something like the following:

import { management } from 'ui/management';
import routes from 'ui/routes';

management
  .getSection('section')
  .register('subsection', {
    display: 'SubSection',
    order: 5,
    url: '#/management/section/subsection/'
  });

routes.when('/management/section/subsection', {
  controller: function () {
    // ...
  }
});

Let me know if that works!

[ENG618 (Eric)]

Looks like that is how it should be done, but it looks like the section isn't getting created with management.getSection

I'm getting an error in the browser of Error: Uncaught TypeError: Cannot read property 'register' of undefined

[ENG618 (Eric)]

Okay, ended up getting it to work by adding:

management.register('section', {
  display: 'Section',
  order: 40
});

prior to attempting to register the subsection

[ENG618 (Eric)]

What about adding the icon to the heading. I have tried passing in an icon when registering the management section but nothing ever displays there.

management.register('section', {
  display: 'Section',
  order: 40,
  icon: 'plugins/plugin/assets/section_icon.svg'
});

[ENG618 (Eric)]

So ended up drilling down enough to figure out that it was set dynamically for the service in less.

so I added a less file with

.management-panel__heading-icon--section {
  background-image: url("~plugins/plugin/assets/section_icon.svg");
}

where section is what was registered to management.