Skip to content

N
nexpie-grafana-theme
Commit a24f6998 by Torkel Ödegaard
Options

refactorings and some clean-up / removal of things not used

parent 08251425
Showing with 52 additions and 149 deletions
public/app/features/dashboard/dashgrid/DashboardPanel.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import config from 'app/core/config'; import config from 'app/core/config';
import { PanelModel } from '../panel_model'; import { PanelModel } from '../panel_model';
import { DashboardModel } from '../dashboard_model'; import { DashboardModel } from '../dashboard_model';
...@@ -122,10 +122,8 @@ export class DashboardPanel extends PureComponent<Props, State> { ...@@ -122,10 +122,8 @@ export class DashboardPanel extends PureComponent<Props, State> {
<div className={panelWrapperClass}> <div className={panelWrapperClass}>
<PanelChrome <PanelChrome
component={pluginExports.PanelComponent} component={pluginExports.PanelComponent}
// withMenuOptions={pluginExports.withMenuOptions}
panel={this.props.panel} panel={this.props.panel}
dashboard={this.props.dashboard} dashboard={this.props.dashboard}
getMenuAdditional={pluginExports.getMenuAdditional}
/> />
</div> </div>
{this.props.panel.isEditing && ( {this.props.panel.isEditing && (
......
public/app/features/dashboard/dashgrid/PanelChrome.tsx
...@@ -13,13 +13,11 @@ import { PanelHeaderMenu } from './PanelHeader/PanelHeaderMenu'; ...@@ -13,13 +13,11 @@ import { PanelHeaderMenu } from './PanelHeader/PanelHeaderMenu';
import { PanelModel } from '../panel_model'; import { PanelModel } from '../panel_model';
import { DashboardModel } from '../dashboard_model'; import { DashboardModel } from '../dashboard_model';
import { TimeRange, PanelProps } from 'app/types'; import { TimeRange, PanelProps } from 'app/types';
import { PanelHeaderGetMenuAdditional } from 'app/types/panel';
export interface Props { export interface Props {
panel: PanelModel; panel: PanelModel;
dashboard: DashboardModel; dashboard: DashboardModel;
component: ComponentClass<PanelProps>; component: ComponentClass<PanelProps>;
getMenuAdditional?: PanelHeaderGetMenuAdditional;
} }
export interface State { export interface State {
......
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
interface PanelHeaderProps { interface Props {
title: string; title: string;
} }
export class PanelHeader extends PureComponent<PanelHeaderProps, any> { export class PanelHeader extends PureComponent<Props> {
render() { render() {
const isFullscreen = false; const isFullscreen = false;
const isLoading = false; const isLoading = false;
......
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 } 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 { PanelMenuItem } from 'app/types/panel';
export interface PanelHeaderMenuProps { export interface Props {
panel: PanelModel; panel: PanelModel;
dashboard: DashboardModel; dashboard: DashboardModel;
additionalMenuItems?: PanelHeaderMenuItemProps[];
additionalSubMenuItems?: PanelHeaderMenuItemProps[];
} }
export class PanelHeaderMenu extends PureComponent<PanelHeaderMenuProps, any> { export class PanelHeaderMenu extends PureComponent<Props> {
renderItems = (menu: PanelHeaderMenuItemProps[], isSubMenu = false) => { renderItems = (menu: PanelMenuItem[], isSubMenu = false) => {
return ( return (
<ul className="dropdown-menu dropdown-menu--menu panel-menu" role={isSubMenu ? '' : 'menu'}> <ul className="dropdown-menu dropdown-menu--menu panel-menu" role={isSubMenu ? '' : 'menu'}>
{menu.map((menuItem, idx: number) => { {menu.map((menuItem, idx: number) => {
...@@ -23,7 +21,7 @@ export class PanelHeaderMenu extends PureComponent<PanelHeaderMenuProps, any> { ...@@ -23,7 +21,7 @@ export class PanelHeaderMenu extends PureComponent<PanelHeaderMenuProps, any> {
type={menuItem.type} type={menuItem.type}
text={menuItem.text} text={menuItem.text}
iconClassName={menuItem.iconClassName} iconClassName={menuItem.iconClassName}
handleClick={menuItem.handleClick} onClick={menuItem.onClick}
shortcut={menuItem.shortcut} shortcut={menuItem.shortcut}
> >
{menuItem.subMenu && this.renderItems(menuItem.subMenu, true)} {menuItem.subMenu && this.renderItems(menuItem.subMenu, true)}
...@@ -35,9 +33,8 @@ export class PanelHeaderMenu extends PureComponent<PanelHeaderMenuProps, any> { ...@@ -35,9 +33,8 @@ export class PanelHeaderMenu extends PureComponent<PanelHeaderMenuProps, any> {
}; };
render() { render() {
console.log('PanelHeaderMenu render'); const { dashboard, panel } = this.props;
const { dashboard, additionalMenuItems, additionalSubMenuItems, panel } = this.props; const menu = getPanelMenu(dashboard, panel);
const menu = getPanelMenu(dashboard, panel, additionalMenuItems, additionalSubMenuItems);
return <div className="panel-menu-container dropdown">{this.renderItems(menu)}</div>; return <div className="panel-menu-container dropdown">{this.renderItems(menu)}</div>;
} }
} }
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'; import { PanelMenuItem } from 'app/types/panel';
export const PanelHeaderMenuItem: SFC<PanelHeaderMenuItemProps> = props => { export const PanelHeaderMenuItem: SFC<PanelMenuItem> = props => {
const isSubMenu = props.type === PanelHeaderMenuItemTypes.SubMenu; const isSubMenu = props.type === 'submenu';
const isDivider = props.type === PanelHeaderMenuItemTypes.Divider; const isDivider = props.type === 'divider';
return isDivider ? ( return isDivider ? (
<li className="divider" /> <li className="divider" />
) : ( ) : (
<li className={isSubMenu ? 'dropdown-submenu' : null}> <li className={isSubMenu ? 'dropdown-submenu' : null}>
<a onClick={props.handleClick}> <a onClick={props.onClick}>
{props.iconClassName && <i className={props.iconClassName} />} {props.iconClassName && <i className={props.iconClassName} />}
<span className="dropdown-item-text">{props.text}</span> <span className="dropdown-item-text">{props.text}</span>
{props.shortcut && <span className="dropdown-menu-item-shortcut">{props.shortcut}</span>} {props.shortcut && <span className="dropdown-menu-item-shortcut">{props.shortcut}</span>}
......
public/app/features/dashboard/utils/panel_menu.ts
import { PanelHeaderMenuItemTypes, PanelHeaderMenuItemProps } from 'app/types/panel';
import { store } from 'app/store/configureStore';
import { updateLocation } from 'app/core/actions'; import { updateLocation } from 'app/core/actions';
import { store } from 'app/store/configureStore';
import { removePanel, duplicatePanel, copyPanel, editPanelJson, sharePanel } from 'app/features/dashboard/utils/panel';
import { PanelModel } from 'app/features/dashboard/panel_model'; import { PanelModel } from 'app/features/dashboard/panel_model';
import { DashboardModel } from 'app/features/dashboard/dashboard_model'; import { DashboardModel } from 'app/features/dashboard/dashboard_model';
import { removePanel, duplicatePanel, copyPanel, editPanelJson, sharePanel } from 'app/features/dashboard/utils/panel'; import { PanelMenuItem } from 'app/types/panel';
export const getPanelMenu = ( export const getPanelMenu = (dashboard: DashboardModel, panel: PanelModel) => {
dashboard: DashboardModel,
panel: PanelModel,
additionalMenuItems: PanelHeaderMenuItemProps[] = [],
additionalSubMenuItems: PanelHeaderMenuItemProps[] = []
) => {
const onViewPanel = () => { const onViewPanel = () => {
store.dispatch( store.dispatch(
updateLocation({ updateLocation({
...@@ -19,6 +15,7 @@ export const getPanelMenu = ( ...@@ -19,6 +15,7 @@ export const getPanelMenu = (
edit: false, edit: false,
fullscreen: true, fullscreen: true,
}, },
partial: true,
}) })
); );
}; };
...@@ -31,6 +28,7 @@ export const getPanelMenu = ( ...@@ -31,6 +28,7 @@ export const getPanelMenu = (
edit: true, edit: true,
fullscreen: true, fullscreen: true,
}, },
partial: true,
}) })
); );
}; };
...@@ -55,100 +53,68 @@ export const getPanelMenu = ( ...@@ -55,100 +53,68 @@ export const getPanelMenu = (
removePanel(dashboard, panel, true); removePanel(dashboard, panel, true);
}; };
const getSubMenu = () => { const menu: PanelMenuItem[] = [];
const menu: PanelHeaderMenuItemProps[] = [];
if (!panel.fullscreen && dashboard.meta.canEdit) {
menu.push({
type: PanelHeaderMenuItemTypes.Link,
text: 'Duplicate',
handleClick: onDuplicatePanel,
shortcut: 'p d',
role: 'Editor',
});
menu.push({
type: PanelHeaderMenuItemTypes.Link,
text: 'Copy',
handleClick: onCopyPanel,
role: 'Editor',
});
}
menu.push({
type: PanelHeaderMenuItemTypes.Link,
text: 'Panel JSON',
handleClick: onEditPanelJson,
});
if (additionalSubMenuItems) {
additionalSubMenuItems.forEach(item => {
menu.push(item);
});
}
return menu;
};
const menu: PanelHeaderMenuItemProps[] = [];
menu.push({ menu.push({
type: PanelHeaderMenuItemTypes.Link,
text: 'View', text: 'View',
iconClassName: 'fa fa-fw fa-eye', iconClassName: 'fa fa-fw fa-eye',
handleClick: onViewPanel, onClick: onViewPanel,
shortcut: 'v', shortcut: 'v',
}); });
if (dashboard.meta.canEdit) { if (dashboard.meta.canEdit) {
menu.push({ menu.push({
type: PanelHeaderMenuItemTypes.Link,
text: 'Edit', text: 'Edit',
iconClassName: 'fa fa-fw fa-edit', iconClassName: 'fa fa-fw fa-edit',
handleClick: onEditPanel, onClick: onEditPanel,
shortcut: 'e', shortcut: 'e',
role: 'Editor',
}); });
} }
menu.push({ menu.push({
type: PanelHeaderMenuItemTypes.Link,
text: 'Share', text: 'Share',
iconClassName: 'fa fa-fw fa-share', iconClassName: 'fa fa-fw fa-share',
handleClick: onSharePanel, onClick: onSharePanel,
shortcut: 'p s', shortcut: 'p s',
}); });
if (additionalMenuItems) { const subMenu: PanelMenuItem[] = [];
additionalMenuItems.forEach(item => {
menu.push(item); if (!panel.fullscreen && dashboard.meta.canEdit) {
subMenu.push({
text: 'Duplicate',
onClick: onDuplicatePanel,
shortcut: 'p d',
});
subMenu.push({
text: 'Copy',
onClick: onCopyPanel,
}); });
} }
const subMenu: PanelHeaderMenuItemProps[] = getSubMenu(); subMenu.push({
text: 'Panel JSON',
onClick: onEditPanelJson,
});
menu.push({ menu.push({
type: PanelHeaderMenuItemTypes.SubMenu, type: 'submenu',
text: 'More...', text: 'More...',
iconClassName: 'fa fa-fw fa-cube', iconClassName: 'fa fa-fw fa-cube',
handleClick: null,
subMenu: subMenu, subMenu: subMenu,
}); });
if (dashboard.meta.canEdit) { if (dashboard.meta.canEdit) {
menu.push({ type: 'divider' });
menu.push({ menu.push({
type: PanelHeaderMenuItemTypes.Divider,
role: 'Editor',
});
menu.push({
type: PanelHeaderMenuItemTypes.Link,
text: 'Remove', text: 'Remove',
iconClassName: 'fa fa-fw fa-trash', iconClassName: 'fa fa-fw fa-trash',
handleClick: onRemovePanel, onClick: onRemovePanel,
shortcut: 'p r', shortcut: 'p r',
role: 'Editor',
}); });
} }
// Additional items from sub-class
// menu.push(...this.getAdditionalMenuItems());
return menu; return menu;
}; };
public/app/plugins/panel/graph2/module.tsx
...@@ -73,4 +73,3 @@ export class GraphOptions extends PureComponent<PanelOptionsProps<Options>> { ...@@ -73,4 +73,3 @@ export class GraphOptions extends PureComponent<PanelOptionsProps<Options>> {
} }
export { Graph2 as PanelComponent, GraphOptions as PanelOptionsComponent }; export { Graph2 as PanelComponent, GraphOptions as PanelOptionsComponent };
export { getMenuAdditional } from './moduleMenu';
public/app/plugins/panel/graph2/moduleMenu.tsx deleted 100644 → 0
import { PanelHeaderMenuItemProps, PanelHeaderMenuItemTypes } from 'app/types/panel';
import { PanelModel } from 'app/features/dashboard/panel_model';
export const getMenuAdditional = (panel: PanelModel) => {
const getAdditionalMenuItems = () => {
return [
{
type: PanelHeaderMenuItemTypes.Link,
text: 'Hello menu',
handleClick: () => {
alert('Hello world from menu');
},
shortcut: 'hi',
},
] as PanelHeaderMenuItemProps[];
};
const getAdditionalSubMenuItems = () => {
return [
{
type: PanelHeaderMenuItemTypes.Link,
text: 'Hello Sub Menu',
handleClick: () => {
alert('Hello world from sub menu');
},
shortcut: 'subhi',
},
] as PanelHeaderMenuItemProps[];
};
return {
additionalMenuItems: getAdditionalMenuItems(),
additionalSubMenuItems: getAdditionalSubMenuItems(),
};
};
public/app/types/panel.ts
import { LoadingState, TimeSeries, TimeRange } from './series'; import { LoadingState, TimeSeries, TimeRange } from './series';
import { PanelModel } from 'app/features/dashboard/panel_model';
export interface PanelProps<T = any> { export interface PanelProps<T = any> {
timeSeries: TimeSeries[]; timeSeries: TimeSeries[];
...@@ -14,29 +13,12 @@ export interface PanelOptionsProps<T = any> { ...@@ -14,29 +13,12 @@ export interface PanelOptionsProps<T = any> {
onChange: (options: T) => void; onChange: (options: T) => void;
} }
export enum PanelHeaderMenuItemTypes { // TODO: Evaluate. Remove? export interface PanelMenuItem {
Button = 'Button', // ? type?: 'submenu' | 'divider';
Divider = 'Divider',
Link = 'Link',
SubMenu = 'SubMenu',
}
export interface PanelHeaderMenuItemProps {
type: PanelHeaderMenuItemTypes;
text?: string; text?: string;
iconClassName?: string; iconClassName?: string;
handleClick?: () => void; onClick?: () => void;
shortcut?: string; shortcut?: string;
children?: any; children?: any;
subMenu?: PanelHeaderMenuItemProps[]; subMenu?: PanelMenuItem[];
role?: string;
}
export interface PanelHeaderMenuAdditional {
additionalMenuItems: PanelHeaderMenuItemProps[];
additionalSubMenuItems: PanelHeaderMenuItemProps[];
}
export interface PanelHeaderGetMenuAdditional {
(panel: PanelModel): PanelHeaderMenuAdditional;
} }
public/app/types/plugins.ts
import { ComponentClass } from 'react'; import { ComponentClass } from 'react';
import { PanelProps, PanelOptionsProps } from './panel'; import { PanelProps, PanelOptionsProps } from './panel';
import { PanelHeaderGetMenuAdditional } from 'app/types/panel';
export interface PluginExports { export interface PluginExports {
Datasource?: any; Datasource?: any;
...@@ -14,7 +13,6 @@ export interface PluginExports { ...@@ -14,7 +13,6 @@ export interface PluginExports {
PanelCtrl?; PanelCtrl?;
PanelComponent?: ComponentClass<PanelProps>; PanelComponent?: ComponentClass<PanelProps>;
PanelOptionsComponent: ComponentClass<PanelOptionsProps>; PanelOptionsComponent: ComponentClass<PanelOptionsProps>;
getMenuAdditional?: PanelHeaderGetMenuAdditional;
} }
export interface PanelPlugin { export interface PanelPlugin {
......
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