如何修改Grafana源码仅对Viewer版本页面调整界面元素？

1. 导入用户角色判断Hook #

在/grafana/public/app/core/components/AppChrome/NavToolbar/NavToolbar.tsx文件顶部，添加用户信息相关的Hook导入：

import { useUser } from '@grafana/runtime';

2. 添加条件渲染逻辑 #

在组件函数内部获取当前用户角色，给目标按钮添加渲染判断，仅当用户角色不是Viewer时才显示该按钮：

// 在组件函数内部新增这行，获取当前用户信息
const { user } = useUser();

// 修改原按钮的渲染代码，包裹条件判断
{user?.orgRole !== 'Viewer' && (
  <div className={styles.menuButton}>
    <IconButton
      name="bars"
      tooltip={t('navigation.toolbar.toggle-menu', 'Toggle menu')}
      tooltipPlacement="bottom"
      size="xl"
      onClick={onToggleMegaMenu}
    />
  </div>
)}

3. 重新构建并重启Grafana #

修改源码后需要重新编译前端资源，再重启服务生效：

# 进入Grafana根目录
cd /path/to/grafana
# 安装依赖（首次修改或依赖变动时执行）
yarn install
# 构建前端静态资源
yarn build
# 重启Grafana服务
sudo systemctl restart grafana-server

补充说明 #

• orgRole的可选值包含Viewer、Editor、Admin等，可根据需求调整判断条件
• 该方法适用于Grafana 8.x及以上版本，确保你的版本支持useUser Hook

内容的提问来源于stack exchange，提问作者Someone Somewhere