@grafana/data#PanelMenuItem TypeScript Examples

renderItems = (menu: PanelMenuItem[], isSubMenu = false) => {
    return (
      <ul className="dropdown-menu dropdown-menu--menu panel-menu" role={isSubMenu ? '' : 'menu'}>
        {menu.map((menuItem, idx: number) => {
          return (
            <PanelHeaderMenuItem
              key={`${menuItem.text}${idx}`}
              type={menuItem.type}
              text={menuItem.text}
              iconClassName={menuItem.iconClassName}
              onClick={menuItem.onClick}
              shortcut={menuItem.shortcut}
            >
              {menuItem.subMenu && this.renderItems(menuItem.subMenu, true)}
            </PanelHeaderMenuItem>
          );
        })}
      </ul>
    );
  };

PanelHeaderMenuItem: FC<Props & PanelMenuItem> = props => {
  const isSubMenu = props.type === 'submenu';
  const isDivider = props.type === 'divider';
  return isDivider ? (
    <li className="divider" />
  ) : (
    <li className={isSubMenu ? 'dropdown-submenu' : undefined}>
      <a onClick={props.onClick} href={props.href}>
        {props.iconClassName && <i className={props.iconClassName} />}
        <span
          className="dropdown-item-text"
          aria-label={e2e.pages.Dashboard.Panels.Panel.selectors.headerItems(props.text)}
        >
          {props.text}
        </span>
        {props.shortcut && <span className="dropdown-menu-item-shortcut">{props.shortcut}</span>}
      </a>
      {props.children}
    </li>
  );
}

export function getPanelMenu(
  dashboard: DashboardModel,
  panel: PanelModel,
  angularComponent?: AngularComponent
): PanelMenuItem[] {
  const onViewPanel = (event: React.MouseEvent<any>) => {
    event.preventDefault();
    store.dispatch(
      updateLocation({
        query: {
          panelId: panel.id,
          edit: null,
          fullscreen: true,
        },
        partial: true,
      })
    );
  };

  const onEditPanel = (event: React.MouseEvent<any>) => {
    event.preventDefault();
    store.dispatch(
      updateLocation({
        query: {
          panelId: panel.id,
          edit: true,
          fullscreen: true,
        },
        partial: true,
      })
    );
  };

  const onNewEditPanel = (event: React.MouseEvent<any>) => {
    event.preventDefault();
    store.dispatch(
      updateLocation({
        query: {
          editPanel: panel.id,
        },
        partial: true,
      })
    );
  };

  const onSharePanel = (event: React.MouseEvent<any>) => {
    event.preventDefault();
    sharePanel(dashboard, panel);
  };

  const onInspectPanel = (event: React.MouseEvent<any>) => {
    event.preventDefault();
    getLocationSrv().update({
      partial: true,
      query: {
        inspect: panel.id,
      },
    });
  };

  const onMore = (event: React.MouseEvent<any>) => {
    event.preventDefault();
  };

  const onDuplicatePanel = (event: React.MouseEvent<any>) => {
    event.preventDefault();
    duplicatePanel(dashboard, panel);
  };

  const onCopyPanel = (event: React.MouseEvent<any>) => {
    event.preventDefault();
    copyPanel(panel);
  };

  const onEditPanelJson = (event: React.MouseEvent<any>) => {
    event.preventDefault();
    editPanelJson(dashboard, panel);
  };

  const onRemovePanel = (event: React.MouseEvent<any>) => {
    event.preventDefault();
    removePanel(dashboard, panel, true);
  };

  const onNavigateToExplore = (event: React.MouseEvent<any>) => {
    event.preventDefault();
    const openInNewWindow = event.ctrlKey || event.metaKey ? (url: string) => window.open(url) : undefined;
    store.dispatch(navigateToExplore(panel, { getDataSourceSrv, getTimeSrv, getExploreUrl, openInNewWindow }) as any);
  };

  const menu: PanelMenuItem[] = [];

  menu.push({
    text: '视图',
    iconClassName: 'gicon gicon-viewer',
    onClick: onViewPanel,
    shortcut: 'v',
  });

  if (dashboard.canEditPanel(panel)) {
    menu.push({
      text: '编辑',
      iconClassName: 'gicon gicon-editor',
      onClick: onEditPanel,
      shortcut: 'e',
    });
  }

  menu.push({
    text: '分享',
    iconClassName: 'fa fa-fw fa-share',
    onClick: onSharePanel,
    shortcut: 'p s',
  });

  if (contextSrv.hasAccessToExplore() && !panel.plugin.meta.skipDataQuery) {
    menu.push({
      text: '探索',
      iconClassName: 'gicon gicon-explore',
      shortcut: 'x',
      onClick: onNavigateToExplore,
    });
  }

  if (config.featureToggles.inspect) {
    menu.push({
      text: '检查',
      iconClassName: 'fa fa-fw fa-info-circle',
      onClick: onInspectPanel,
      shortcut: 'p i',
    });
  }

  if (config.featureToggles.newEdit) {
    menu.push({
      text: '新编辑',
      iconClassName: 'gicon gicon-editor',
      onClick: onNewEditPanel,
      shortcut: 'p i',
    });
  }

  const subMenu: PanelMenuItem[] = [];

  if (!panel.fullscreen && dashboard.canEditPanel(panel)) {
    subMenu.push({
      text: '克隆',
      onClick: onDuplicatePanel,
      shortcut: 'p d',
    });

    subMenu.push({
      text: '复制',
      onClick: onCopyPanel,
    });
  }

  subMenu.push({
    text: '面板JSON',
    onClick: onEditPanelJson,
  });

  // add old angular panel options
  if (angularComponent) {
    const scope = angularComponent.getScope();
    const panelCtrl: PanelCtrl = scope.$$childHead.ctrl;
    const angularMenuItems = panelCtrl.getExtendedMenu();

    for (const item of angularMenuItems) {
      const reactItem: PanelMenuItem = {
        text: item.text,
        href: item.href,
        shortcut: item.shortcut,
      };

      if (item.click) {
        reactItem.onClick = () => {
          scope.$eval(item.click, { ctrl: panelCtrl });
        };
      }

      subMenu.push(reactItem);
    }
  }

  menu.push({
    type: 'submenu',
    text: '更多...',
    iconClassName: 'fa fa-fw fa-cube',
    subMenu: subMenu,
    onClick: onMore,
  });

  if (dashboard.canEditPanel(panel)) {
    menu.push({ type: 'divider' });

    menu.push({
      text: '删除',
      iconClassName: 'fa fa-fw fa-trash',
      onClick: onRemovePanel,
      shortcut: 'p r',
    });
  }

  return menu;
}