Skip to content

N
nexpie-grafana-theme
Commit dbf7f3fb by Johannes Schill
Options

wip: panel-header: More merge conflicts during cherry pick

parent 6c0c1254
Showing with 36 additions and 132 deletions
public/app/features/dashboard/dashgrid/DashboardPanel.tsx
...@@ -122,7 +122,7 @@ export class DashboardPanel extends PureComponent<Props, State> { ...@@ -122,7 +122,7 @@ export class DashboardPanel extends PureComponent<Props, State> {
<div className={panelWrapperClass}> <div className={panelWrapperClass}>
<PanelChrome <PanelChrome
component={pluginExports.PanelComponent} component={pluginExports.PanelComponent}
withMenuOptions={pluginExports.withMenuOptions} // withMenuOptions={pluginExports.withMenuOptions}
panel={this.props.panel} panel={this.props.panel}
dashboard={this.props.dashboard} dashboard={this.props.dashboard}
moduleMenu={pluginExports.moduleMenu} moduleMenu={pluginExports.moduleMenu}
......
public/app/features/dashboard/dashgrid/PanelChrome.tsx
...@@ -20,7 +20,7 @@ export interface PanelChromeProps { ...@@ -20,7 +20,7 @@ export interface PanelChromeProps {
panel: PanelModel; panel: PanelModel;
dashboard: DashboardModel; dashboard: DashboardModel;
component: ComponentClass<PanelProps>; component: ComponentClass<PanelProps>;
withMenuOptions?: (c: typeof PanelHeaderMenu, p: PanelModel) => typeof PanelHeaderMenu; // withMenuOptions?: (c: typeof PanelHeaderMenu, p: PanelModel) => typeof PanelHeaderMenu;
moduleMenu?: any; moduleMenu?: any;
} }
...@@ -99,18 +99,15 @@ export class PanelChrome extends PureComponent<PanelChromeProps, PanelChromeStat ...@@ -99,18 +99,15 @@ export class PanelChrome extends PureComponent<PanelChromeProps, PanelChromeStat
const { refreshCounter, timeRange, dataSourceApi, timeSeries, renderCounter } = this.state; const { refreshCounter, timeRange, dataSourceApi, timeSeries, renderCounter } = this.state;
const { targets } = panel; const { targets } = panel;
const PanelComponent = this.props.component; const PanelComponent = this.props.component;
console.log('Panel chrome render'); const panelSpecificMenuOptions = moduleMenu(panel, dataSourceApi, timeSeries);
// const PanelHeaderMenuComponent: typeof PanelHeaderMenu = withMenuOptions ? withMenuOptions(PanelHeaderMenu, panel) : PanelHeaderMenu; const additionalMenuItems = panelSpecificMenuOptions.additionalMenuItems || undefined;
const PanelHeaderMenuComponent = PanelHeaderMenu; const additionalSubMenuItems = panelSpecificMenuOptions.additionalSubMenuItems || undefined;
const mm = moduleMenu(panel, dataSourceApi, timeSeries);
const additionalMenuItems = mm.getAdditionalMenuItems || undefined;
const additionalSubMenuItems = mm.getAdditionalSubMenuItems || undefined;
console.log('panelChrome render'); console.log('panelChrome render');
return ( return (
<div className="panel-container"> <div className="panel-container">
<PanelHeader title={panel.title}> <PanelHeader title={panel.title}>
<PanelHeaderMenuComponent <PanelHeaderMenu
panel={panel} panel={panel}
dashboard={dashboard} dashboard={dashboard}
dataSourceApi={dataSourceApi} dataSourceApi={dataSourceApi}
......
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { DashboardModel } from 'app/features/dashboard/dashboard_model'; import { DashboardModel } from 'app/features/dashboard/dashboard_model';
import { PanelModel } from 'app/features/dashboard/panel_model'; import { PanelModel } from 'app/features/dashboard/panel_model';
import { PanelHeaderMenuItem, PanelHeaderMenuItemProps } from './PanelHeaderMenuItem'; import { PanelHeaderMenuItem } from './PanelHeaderMenuItem';
import { PanelHeaderMenuItemProps } from 'app/types/panel';
import { getPanelMenu } from 'app/features/dashboard/utils/panel_menu'; import { getPanelMenu } from 'app/features/dashboard/utils/panel_menu';
import { DataSourceApi } from 'app/types/series'; import { DataSourceApi } from 'app/types/series';
import { TimeSeries } from 'app/types'; import { TimeSeries } from 'app/types';
......
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx
import React, { SFC } from 'react'; import React, { SFC } from 'react';
import { PanelHeaderMenuItemProps, PanelHeaderMenuItemTypes } from 'app/types/panel';
export enum PanelHeaderMenuItemTypes { // TODO: Evaluate. Remove?
Button = 'Button', // ?
Divider = 'Divider',
Link = 'Link',
SubMenu = 'SubMenu',
}
export interface PanelHeaderMenuItemProps {
type: PanelHeaderMenuItemTypes;
text?: string;
iconClassName?: string;
handleClick?: () => void;
shortcut?: string;
children?: any;
subMenu?: PanelHeaderMenuItemProps[];
role?: string;
}
export const PanelHeaderMenuItem: SFC<PanelHeaderMenuItemProps> = props => { export const PanelHeaderMenuItem: SFC<PanelHeaderMenuItemProps> = props => {
const isSubMenu = props.type === PanelHeaderMenuItemTypes.SubMenu; const isSubMenu = props.type === PanelHeaderMenuItemTypes.SubMenu;
......
public/app/features/dashboard/utils/panel_menu.ts
import { PanelHeaderMenuItemTypes, PanelHeaderMenuItemProps } from './../dashgrid/PanelHeader/PanelHeaderMenuItem'; import { PanelHeaderMenuItemTypes, PanelHeaderMenuItemProps } from 'app/types/panel';
import { store } from 'app/store/configureStore'; import { store } from 'app/store/configureStore';
import { updateLocation } from 'app/core/actions'; import { updateLocation } from 'app/core/actions';
import { PanelModel } from 'app/features/dashboard/panel_model'; import { PanelModel } from 'app/features/dashboard/panel_model';
......
public/app/plugins/panel/graph2/module.tsx
...@@ -75,5 +75,4 @@ export class GraphOptions extends PureComponent<PanelOptionsProps<Options>> { ...@@ -75,5 +75,4 @@ export class GraphOptions extends PureComponent<PanelOptionsProps<Options>> {
} }
export { Graph2 as PanelComponent, GraphOptions as PanelOptionsComponent }; export { Graph2 as PanelComponent, GraphOptions as PanelOptionsComponent };
export { withMenuOptions } from './withMenuOptions';
export { moduleMenu } from './moduleMenu'; export { moduleMenu } from './moduleMenu';
public/app/plugins/panel/graph2/moduleMenu.tsx
...@@ -6,11 +6,7 @@ import { getTimeSrv } from 'app/features/dashboard/time_srv'; ...@@ -6,11 +6,7 @@ import { getTimeSrv } from 'app/features/dashboard/time_srv';
import { store } from 'app/store/configureStore'; import { store } from 'app/store/configureStore';
import { getDatasourceSrv } from 'app/features/plugins/datasource_srv'; import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
import appEvents from 'app/core/app_events'; import appEvents from 'app/core/app_events';
import { PanelHeaderMenuItemProps, PanelHeaderMenuItemTypes } from 'app/types/panel';
import {
PanelHeaderMenuItemProps,
PanelHeaderMenuItemTypes,
} from 'app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem';
export const moduleMenu = (panel, dataSourceApi, timeSeries) => { export const moduleMenu = (panel, dataSourceApi, timeSeries) => {
const onExploreClick = async () => { const onExploreClick = async () => {
...@@ -70,7 +66,7 @@ export const moduleMenu = (panel, dataSourceApi, timeSeries) => { ...@@ -70,7 +66,7 @@ export const moduleMenu = (panel, dataSourceApi, timeSeries) => {
}; };
return { return {
getAdditionalMenuItems: getAdditionalMenuItems(), additionalMenuItems: getAdditionalMenuItems(),
getAdditionalSubMenuItems: getAdditionalSubMenuItems(), additionalSubMenuItems: getAdditionalSubMenuItems(),
}; };
}; };
public/app/plugins/panel/graph2/withMenuOptions.tsx deleted 100644 → 0
// Libraries
import React, { PureComponent } from 'react';
// Services
import { getTimeSrv } from 'app/features/dashboard/time_srv';
import { contextSrv } from 'app/core/services/context_srv';
import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
import { store } from 'app/store/configureStore';
// Components
import { PanelHeaderMenu } from 'app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu';
import config from 'app/core/config';
import { getExploreUrl } from 'app/core/utils/explore';
import { updateLocation } from 'app/core/actions';
// Types
import { PanelModel } from 'app/features/dashboard/panel_model';
import { PanelHeaderMenuProps } from 'app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu';
import {
PanelHeaderMenuItemProps,
PanelHeaderMenuItemTypes,
} from 'app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem';
interface LocalState {
datasource: any;
}
export const withMenuOptions = (WrappedPanelHeaderMenu: typeof PanelHeaderMenu, panel: PanelModel) => {
return class extends PureComponent<PanelHeaderMenuProps, LocalState> {
private datasourceSrv = getDatasourceSrv();
private timeSrv = getTimeSrv();
constructor(props) {
super(props);
this.state = {
datasource: undefined,
};
}
componentDidMount() {
const dsPromise = getDatasourceSrv().get(panel.datasource);
dsPromise.then((datasource: any) => {
this.setState(() => ({ datasource }));
});
}
onExploreClick = async () => {
const { datasource } = this.state;
const url = await getExploreUrl(panel, panel.targets, datasource, this.datasourceSrv, this.timeSrv);
if (url) {
store.dispatch(updateLocation({ path: url }));
}
};
getAdditionalMenuItems = () => {
const { datasource } = this.state;
const items = [];
if (
config.exploreEnabled &&
contextSrv.isEditor &&
datasource &&
(datasource.meta.explore || datasource.meta.id === 'mixed')
) {
items.push({
type: PanelHeaderMenuItemTypes.Link,
text: 'Explore',
handleClick: this.onExploreClick,
iconClassName: 'fa fa-fw fa-rocket',
shortcut: 'x',
});
}
return items;
};
getAdditionalSubMenuItems = () => {
return [
{
type: PanelHeaderMenuItemTypes.Link,
text: 'Hello Sub Menu',
handleClick: () => {
alert('Hello world from HOC!');
},
shortcut: 's h w',
},
] as PanelHeaderMenuItemProps[];
};
render() {
const menu: PanelHeaderMenuItemProps[] = this.getAdditionalMenuItems();
const subMenu: PanelHeaderMenuItemProps[] = this.getAdditionalSubMenuItems();
return <WrappedPanelHeaderMenu {...this.props} additionalMenuItems={menu} additionalSubMenuItems={subMenu} />;
}
};
};
public/app/types/panel.ts
...@@ -12,3 +12,26 @@ export interface PanelOptionsProps<T = any> { ...@@ -12,3 +12,26 @@ export interface PanelOptionsProps<T = any> {
options: T; options: T;
onChange: (options: T) => void; onChange: (options: T) => void;
} }
export enum PanelHeaderMenuItemTypes { // TODO: Evaluate. Remove?
Button = 'Button', // ?
Divider = 'Divider',
Link = 'Link',
SubMenu = 'SubMenu',
}
export interface PanelHeaderMenuItemProps {
type: PanelHeaderMenuItemTypes;
text?: string;
iconClassName?: string;
handleClick?: () => void;
shortcut?: string;
children?: any;
subMenu?: PanelHeaderMenuItemProps[];
role?: string;
}
export interface PanelMenuExtras {
additionalMenuItems: PanelHeaderMenuItemProps[];
additionalSubMenuItems: PanelHeaderMenuItemProps[];
}
public/app/types/plugins.ts
...@@ -13,7 +13,6 @@ export interface PluginExports { ...@@ -13,7 +13,6 @@ export interface PluginExports {
PanelCtrl?; PanelCtrl?;
PanelComponent?: ComponentClass<PanelProps>; PanelComponent?: ComponentClass<PanelProps>;
PanelOptionsComponent: ComponentClass<PanelOptionsProps>; PanelOptionsComponent: ComponentClass<PanelOptionsProps>;
withMenuOptions?: any;
moduleMenu?: any; moduleMenu?: any;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment