Disable View, Share and More menu from graph

Hi,

How can I disable or hide from users the context menu of the graphs allocated in my dashboard.
I just want to show the metrics, but when the user locates the pointer above the graph, it shows the menu with the option described.

example_graph

Is there any way to disable that menu?

Thanks in advanced.
Regards,

Damian Sarmiento.

6 Likes

@smdamian did you manage to hide the menu? Trying to do the same.

Hi, any news? I’m interested about that. I think that’s important have an user really only-view the graph how I show him without possibility of any interaction, albeit minimal.

Thanks

@anon91959451
How to “did you manage to hide the menu? Trying to do the same.”

Can you elaborate the steps to do this, thanks

Hi, I am facing same issue here, Let me know if anyone has solved this issue?
@smdamian, @anon91959451

Thanks in advance!!

Here is a solution to hide the menue but it won’t disable it. So the user can still toggle through the view options or press ESC to show the menue again.

  1. To just hide the menue you have to attach (1) &kiosk=tv or (2) &kiosk at end of your url.
    (1) will hide the menue bar on the left and just shows a small one on the top
    (2) completely hides all menues and you have to press ESC to go back

    A url with this option will look like this:
    http://grafana.staged-by-discourse.com/d/[DashboardUid/[Organisation]?orgId=1&kiosk=tv

    Just attach it to the end.

  2. You can also hide it by using CSS margin-left to cut the menue bar out of the rendering iframe.
    .dashboard-content > iframe {
    width: 100%;
    height: 1000px;
    border: none;
    margin-left: -92px;
    }

  3. A third option is to inject CSS directly into the iframe by using some Javascript.
    Doing so you could use
    .sidemenu {
    display: none;
    }
    to hide it completely.
    But CORS (Cross Region Scripting) will prevent you from doing this for security reasons.
    So be aware that using this option will may cause some serious trouble.

@pixelpapst: This is not the solution which the folks are looking at. As far as I understand, the question is disabling the view, export options in the Panel window and not hiding the dashboard side menu.

Your proposed solution 1) kiosk mode Doesn’t stop the users from selecting the View, Share, More options available in the Graph Panel Menu window.

Ideally what many of us are looking for a solution is to at-least hide the Export option directly from the UI for user with Read permissions. [Panel Menu --> View, Share, More–Export CSV, JSON etc;]. It is fine if he/she can do so using Chrome dev tools but not from UI.

3 Likes

Hi, Did any of you succeeded in disabling the export option at-least from the UI panel.
@smdamian, @anon91959451, @leochan, @ajaymudaliyar1994 kindly let know.

Thanks in advance
-Avin

+1 for being able to lock down users.
As a viewer they are allowed too many permissions.

+1 on this topic
It doesn’t seem possible to hide that menu for anonymous viewers…

Would be really appreciated… :wink:

  • 1 vote for having this feature included.

A viewer should only be able to view the information published. They should not be able to download or share the infromation (at least from the tool).

Nice to have this feature.

2 Likes

https://localhost:3000/t/hide-panel-json-from-viewers/17977/2

2 Likes

+1 This should be implemented as a viewer has way to many rights to share data with people he is not supposed to.

+1 I would prefer to get the inspect option removed as it makes it look too technical for a person with non-technical background having just view access.

+1 This is a problem in panels where a HTML navigations is provided for kiosk. Users touch on the HTML buttons and the VSM (view, share, more) bar comes up.

+1 : for viewers it should be possible to disable panel menu access.
From a user perspective it would also simply the rendering (feels like less options are available)

+1: it should be possible to disable panel menu for viewers

I posted a little hack Here to hide the panel menu and other options from the dashboard.
This might help you.

Cheers.

I managed to hide this dropdown from all non-admin users.

In the file public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx I added/changed the following;

import config from 'app/core/config';

Before the return;
const isAdmin = config.bootData.user.isGrafanaAdmin;

In the return;

<h2 className={styles.titleText}>{title}</h2>
                {(() => {
                  if (isAdmin) {
                    return (
                      <span>
                        <Icon name="angle-down" className="panel-menu-toggle" />
                        <PanelHeaderMenuWrapper
                          panel={panel}
                          dashboard={dashboard}
                          show={panelMenuOpen}
                          onClose={closeMenu}
                        />
                        {data.request && data.request.timeInfo && (
                          <span className="panel-time-info">
                            <Icon name="clock-nine" size="sm" /> {data.request.timeInfo}
                          </span>
                        )}
                      </span>
                    );
                  } else {
                    return (
                      <span className={styles.isView}>
                        <Icon name="angle-down" className="panel-menu-toggle" />
                        <PanelHeaderMenuWrapper
                          panel={panel}
                          dashboard={dashboard}
                          show={panelMenuOpen}
                          onClose={closeMenu}
                        />
                        {data.request && data.request.timeInfo && (
                          <span className="panel-time-info">
                            <Icon name="clock-nine" size="sm" /> {data.request.timeInfo}
                          </span>
                        )}
                      </span>
                    );
                  }
                })()}

And in const panelStyles added the CSS for hiding the panel-toggle;

isView: css`
      display: none;
    `,

Many people voted.

Why doesn’t the development team make this feature from 2020 to present ?

I will consider purchasing license in the future!

2 Likes