grafana/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx
Torkel Ödegaard 34c397002c PanelChrome: Use react Panel Header for angular panels. (#21265)
* WIP: Angular panel chrome, this is going to be tricky

* AngularPanelChrome: initial render works

* Options are showing up

* viz options working

* Fixed singlestat background

* AngularPanels: Fixed alert tab

* Removed anuglar loading spinner

* Dashboard: Refactor dashboard reducer & actions

* Dashboard: minor refactoring

* PanelChrome: loading state moved to header

* Subscribe to render events to solve title update issue

* Time info and query errors now works

* PanelHeader: unifying angular and react behavior

* added getPanelMenu test

* Scrollable now works again

* Various fixes

* Making stuff work

* seperate event emitter for angular

* Fixed issue sending updated dimensions to angular panel

* Minor tweaks

* Fixed tests

* Alerting: alert state now works

* Fixed unit tests

* Fixed a few null check errors

* Simplified events handling

* Fixed strict null checks
2020-02-09 10:53:34 +01:00

35 lines
1.1 KiB
TypeScript

import React, { PureComponent } from 'react';
import { PanelHeaderMenuItem } from './PanelHeaderMenuItem';
import { PanelMenuItem } from '@grafana/data';
export interface Props {
items: PanelMenuItem[];
}
export class PanelHeaderMenu extends PureComponent<Props> {
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>
);
};
render() {
return <div className="panel-menu-container dropdown open">{this.renderItems(this.props.items)}</div>;
}
}