Grafana Custom App Sidebar customization

Grafana Plugin Development
1

Hello.

I am trying to create a Grafana App (in React, if that helps).
What I want to achieve is to customize the sidemenu for each organization.

Example:

image

In the above figure, I would like to add or remove pages. I know that if they are included in the plugin.json file, in the includes section, I am able to configure which ones to show or hide. But this would cause them to be “grafana-wide” configuration.

const { path, onNavChanged, meta } = this.props;
    let tabs: NavModelItem[] = [];


    /**
     * Home
     */
    tabs.push({
      text: 'Home',
      url: path,
      id: 'home',
      icon: 'fa fa-fw fa-home',
      active: true,
    },
    {
      text: 'Teste', 
      url: 'someUrlHere', 
      id: 'teste', 
      icon: 'fa fa-fw fa-home', 
      active: true
    });
    

    /**
     * Header
     */
    const node = {
      text: meta.name,
      img: meta.info.logos.large,
      subTitle: "Application",
      url: path,
      children: tabs,
    };

    /**
     * Update the page header
     */
    onNavChanged({
      node: node,
      main: node,
      breadcrumbs: tabs,
    });

I tried this but anything done here didn’t reflect anywhere that I noticed, especially the sidemenu/NavBar.

How would I be able to customize the NavBar Section of my own app plugin?

2

Hi! I don’t believe it’s possible to programmatically manage items in the side menu. I’ll forward your feedback to the team to let them know you’d be interested in something like this.

3

That’s what I feared the most.

I will keep an eye on any grafana updates to see if this will be supported.

Thank you Marcus, appreciate your feedback.