IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Torkel Ödegaard 2018-11-07 13:36:35 +01:00
parent 08251425ca
commit a24f6998f2
10 changed files with 52 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/app/features/dashboard/dashgrid/DashboardPanel.tsx
View File

@ -1,4 +1,4 @@
import React, { PureComponent } from 'react';
import React, { PureComponent } from 'react';
import config from 'app/core/config';
import { PanelModel } from '../panel_model';
import { DashboardModel } from '../dashboard_model';
@ -122,10 +122,8 @@ export class DashboardPanel extends PureComponent<Props, State> {
<div className={panelWrapperClass}>
<PanelChrome
component={pluginExports.PanelComponent}
// withMenuOptions={pluginExports.withMenuOptions}
panel={this.props.panel}
dashboard={this.props.dashboard}
getMenuAdditional={pluginExports.getMenuAdditional}
/>
</div>
{this.props.panel.isEditing && (

2
public/app/features/dashboard/dashgrid/PanelChrome.tsx
View File

@ -13,13 +13,11 @@ import { PanelHeaderMenu } from './PanelHeader/PanelHeaderMenu';
import { PanelModel } from '../panel_model';
import { DashboardModel } from '../dashboard_model';
import { TimeRange, PanelProps } from 'app/types';
import { PanelHeaderGetMenuAdditional } from 'app/types/panel';
export interface Props {
panel: PanelModel;
dashboard: DashboardModel;
component: ComponentClass<PanelProps>;
getMenuAdditional?: PanelHeaderGetMenuAdditional;
}
export interface State {

4
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
View File

@ -1,11 +1,11 @@
import React, { PureComponent } from 'react';
import classNames from 'classnames';
interface PanelHeaderProps {
interface Props {
title: string;
}
export class PanelHeader extends PureComponent<PanelHeaderProps, any> {
export class PanelHeader extends PureComponent<Props> {
render() {
const isFullscreen = false;
const isLoading = false;

19
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx
View File

@ -1,19 +1,17 @@
import React, { PureComponent } from 'react';
import React, { PureComponent } from 'react';
import { DashboardModel } from 'app/features/dashboard/dashboard_model';
import { PanelModel } from 'app/features/dashboard/panel_model';
import { PanelHeaderMenuItem } from './PanelHeaderMenuItem';
import { PanelHeaderMenuItemProps } from 'app/types/panel';
import { getPanelMenu } from 'app/features/dashboard/utils/panel_menu';
import { PanelMenuItem } from 'app/types/panel';
export interface PanelHeaderMenuProps {
export interface Props {
panel: PanelModel;
dashboard: DashboardModel;
additionalMenuItems?: PanelHeaderMenuItemProps[];
additionalSubMenuItems?: PanelHeaderMenuItemProps[];
}
export class PanelHeaderMenu extends PureComponent<PanelHeaderMenuProps, any> {
renderItems = (menu: PanelHeaderMenuItemProps[], isSubMenu = false) => {
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) => {
@ -23,7 +21,7 @@ export class PanelHeaderMenu extends PureComponent<PanelHeaderMenuProps, any> {
type={menuItem.type}
text={menuItem.text}
iconClassName={menuItem.iconClassName}
handleClick={menuItem.handleClick}
onClick={menuItem.onClick}
shortcut={menuItem.shortcut}
>
{menuItem.subMenu && this.renderItems(menuItem.subMenu, true)}
@ -35,9 +33,8 @@ export class PanelHeaderMenu extends PureComponent<PanelHeaderMenuProps, any> {
};
render() {
console.log('PanelHeaderMenu render');
const { dashboard, additionalMenuItems, additionalSubMenuItems, panel } = this.props;
const menu = getPanelMenu(dashboard, panel, additionalMenuItems, additionalSubMenuItems);
const { dashboard, panel } = this.props;
const menu = getPanelMenu(dashboard, panel);
return <div className="panel-menu-container dropdown">{this.renderItems(menu)}</div>;
}
}

12
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx
View File

@ -1,14 +1,14 @@
import React, { SFC } from 'react';
import { PanelHeaderMenuItemProps, PanelHeaderMenuItemTypes } from 'app/types/panel';
import React, { SFC } from 'react';
import { PanelMenuItem } from 'app/types/panel';
export const PanelHeaderMenuItem: SFC<PanelHeaderMenuItemProps> = props => {
const isSubMenu = props.type === PanelHeaderMenuItemTypes.SubMenu;
const isDivider = props.type === PanelHeaderMenuItemTypes.Divider;
export const PanelHeaderMenuItem: SFC<PanelMenuItem> = props => {
const isSubMenu = props.type === 'submenu';
const isDivider = props.type === 'divider';
return isDivider ? (
<li className="divider" />
) : (
<li className={isSubMenu ? 'dropdown-submenu' : null}>
<a onClick={props.handleClick}>
<a onClick={props.onClick}>
{props.iconClassName && <i className={props.iconClassName} />}
<span className="dropdown-item-text">{props.text}</span>
{props.shortcut && <span className="dropdown-menu-item-shortcut">{props.shortcut}</span>}

96
public/app/features/dashboard/utils/panel_menu.ts
View File

@ -1,16 +1,12 @@
import { PanelHeaderMenuItemTypes, PanelHeaderMenuItemProps } from 'app/types/panel';
import { store } from 'app/store/configureStore';
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 { 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 = (
dashboard: DashboardModel,
panel: PanelModel,
additionalMenuItems: PanelHeaderMenuItemProps[] = [],
additionalSubMenuItems: PanelHeaderMenuItemProps[] = []
) => {
export const getPanelMenu = (dashboard: DashboardModel, panel: PanelModel) => {
const onViewPanel = () => {
store.dispatch(
updateLocation({
@ -19,6 +15,7 @@ export const getPanelMenu = (
edit: false,
fullscreen: true,
},
partial: true,
})
);
};
@ -31,6 +28,7 @@ export const getPanelMenu = (
edit: true,
fullscreen: true,
},
partial: true,
})
);
};
@ -55,100 +53,68 @@ export const getPanelMenu = (
removePanel(dashboard, panel, true);
};
const getSubMenu = () => {
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[] = [];
const menu: PanelMenuItem[] = [];
menu.push({
type: PanelHeaderMenuItemTypes.Link,
text: 'View',
iconClassName: 'fa fa-fw fa-eye',
handleClick: onViewPanel,
onClick: onViewPanel,
shortcut: 'v',
});
if (dashboard.meta.canEdit) {
menu.push({
type: PanelHeaderMenuItemTypes.Link,
text: 'Edit',
iconClassName: 'fa fa-fw fa-edit',
handleClick: onEditPanel,
onClick: onEditPanel,
shortcut: 'e',
role: 'Editor',
});
}
menu.push({
type: PanelHeaderMenuItemTypes.Link,
text: 'Share',
iconClassName: 'fa fa-fw fa-share',
handleClick: onSharePanel,
onClick: onSharePanel,
shortcut: 'p s',
});
if (additionalMenuItems) {
additionalMenuItems.forEach(item => {
menu.push(item);
const subMenu: PanelMenuItem[] = [];
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({
type: PanelHeaderMenuItemTypes.SubMenu,
type: 'submenu',
text: 'More...',
iconClassName: 'fa fa-fw fa-cube',
handleClick: null,
subMenu: subMenu,
});
if (dashboard.meta.canEdit) {
menu.push({ type: 'divider' });
menu.push({
type: PanelHeaderMenuItemTypes.Divider,
role: 'Editor',
});
menu.push({
type: PanelHeaderMenuItemTypes.Link,
text: 'Remove',
iconClassName: 'fa fa-fw fa-trash',
handleClick: onRemovePanel,
onClick: onRemovePanel,
shortcut: 'p r',
role: 'Editor',
});
}
// Additional items from sub-class
// menu.push(...this.getAdditionalMenuItems());
return menu;
};

1
public/app/plugins/panel/graph2/module.tsx
View File

@ -73,4 +73,3 @@ export class GraphOptions extends PureComponent<PanelOptionsProps<Options>> {
}
export { Graph2 as PanelComponent, GraphOptions as PanelOptionsComponent };
export { getMenuAdditional } from './moduleMenu';

35
public/app/plugins/panel/graph2/moduleMenu.tsx
View File

@ -1,35 +0,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(),
};
};

26
public/app/types/panel.ts
View File

@ -1,5 +1,4 @@
import { LoadingState, TimeSeries, TimeRange } from './series';
import { PanelModel } from 'app/features/dashboard/panel_model';
export interface PanelProps<T = any> {
timeSeries: TimeSeries[];
@ -14,29 +13,12 @@ export interface PanelOptionsProps<T = any> {
onChange: (options: T) => void;
}
export enum PanelHeaderMenuItemTypes { // TODO: Evaluate. Remove?
Button = 'Button', // ?
Divider = 'Divider',
Link = 'Link',
SubMenu = 'SubMenu',
}
export interface PanelHeaderMenuItemProps {
type: PanelHeaderMenuItemTypes;
export interface PanelMenuItem {
type?: 'submenu' | 'divider';
text?: string;
iconClassName?: string;
handleClick?: () => void;
onClick?: () => void;
shortcut?: string;
children?: any;
subMenu?: PanelHeaderMenuItemProps[];
role?: string;
}
export interface PanelHeaderMenuAdditional {
additionalMenuItems: PanelHeaderMenuItemProps[];
additionalSubMenuItems: PanelHeaderMenuItemProps[];
}
export interface PanelHeaderGetMenuAdditional {
(panel: PanelModel): PanelHeaderMenuAdditional;
subMenu?: PanelMenuItem[];
}

2
public/app/types/plugins.ts
View File

@ -1,6 +1,5 @@
import { ComponentClass } from 'react';
import { PanelProps, PanelOptionsProps } from './panel';
import { PanelHeaderGetMenuAdditional } from 'app/types/panel';
export interface PluginExports {
Datasource?: any;
@ -14,7 +13,6 @@ export interface PluginExports {
PanelCtrl?;
PanelComponent?: ComponentClass<PanelProps>;
PanelOptionsComponent: ComponentClass<PanelOptionsProps>;
getMenuAdditional?: PanelHeaderGetMenuAdditional;
}
export interface PanelPlugin {