Commit 6aacd073 by Peter Holmberg

typings and renamings

parent 25a46c60
import React, { PureComponent } from 'react';
import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
import { EditorTabBody } from './EditorTabBody';
import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoader';
import { EditorTabBody, EditorToolbarView, ToolbarButtonType } from './EditorTabBody';
import 'app/features/alerting/AlertTabCtrl';
import { PanelModel } from '../panel_model';
......@@ -67,11 +67,12 @@ export class AlertTab extends PureComponent<Props> {
render() {
const { alert } = this.props.panel;
const stateHistory = {
const stateHistory: EditorToolbarView = {
title: 'State history',
render: () => {
return <div>State history</div>;
},
buttonType: ToolbarButtonType.View,
};
const deleteAlert = {
......@@ -79,6 +80,7 @@ export class AlertTab extends PureComponent<Props> {
render: () => {
return <div>Hello</div>;
},
buttonType: ToolbarButtonType.Action,
};
const toolbarItems = alert ? [deleteAlert, stateHistory] : [];
......
......@@ -10,21 +10,28 @@ interface Props {
children: JSX.Element;
heading: string;
renderToolbar?: () => JSX.Element;
toolbarItems?: EditorToolBarView[];
toolbarItems?: EditorToolbarView[];
}
export interface EditorToolBarView {
export enum ToolbarButtonType {
Action = 'action',
View = 'view',
}
export interface EditorToolbarView {
title?: string;
heading?: string;
imgSrc?: string;
icon?: string;
disabled?: boolean;
onClick?: () => void;
render: (closeFunction?: any) => JSX.Element | JSX.Element[];
render?: (closeFunction?: any) => JSX.Element | JSX.Element[];
action?: () => void;
buttonType: ToolbarButtonType;
}
interface State {
openView?: EditorToolBarView;
openView?: EditorToolbarView;
isOpen: boolean;
fadeIn: boolean;
}
......@@ -48,7 +55,7 @@ export class EditorTabBody extends PureComponent<Props, State> {
this.setState({ fadeIn: true });
}
onToggleToolBarView = (item: EditorToolBarView) => {
onToggleToolBarView = (item: EditorToolbarView) => {
this.setState({
openView: item,
isOpen: !this.state.isOpen,
......@@ -74,12 +81,15 @@ export class EditorTabBody extends PureComponent<Props, State> {
return state;
}
renderButton(view: EditorToolBarView) {
renderButton(view: EditorToolbarView) {
const onClick = () => {
if (view.onClick) {
view.onClick();
}
if (view.buttonType !== ToolbarButtonType.Action) {
this.onToggleToolBarView(view);
}
};
return (
......@@ -91,7 +101,7 @@ export class EditorTabBody extends PureComponent<Props, State> {
);
}
renderOpenView(view: EditorToolBarView) {
renderOpenView(view: EditorToolbarView) {
return (
<PanelOptionSection title={view.title || view.heading} onClose={this.onCloseOpenView}>
{view.render()}
......
// Libraries
import React, { SFC, PureComponent } from 'react';
import React, { PureComponent, SFC } from 'react';
import _ from 'lodash';
// Components
import './../../panel/metrics_tab';
import { EditorTabBody } from './EditorTabBody';
import { EditorTabBody, EditorToolbarView, ToolbarButtonType } from './EditorTabBody';
import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
import { QueryInspector } from './QueryInspector';
import { QueryOptions } from './QueryOptions';
import { AngularQueryComponentScope } from 'app/features/panel/metrics_tab';
import { PanelOptionSection } from './PanelOptionSection';
// Services
import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
import { getBackendSrv, BackendSrv } from 'app/core/services/backend_srv';
import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
import { BackendSrv, getBackendSrv } from 'app/core/services/backend_srv';
import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoader';
import config from 'app/core/config';
// Types
import { PanelModel } from '../panel_model';
import { DashboardModel } from '../dashboard_model';
import { DataSourceSelectItem, DataQuery } from 'app/types';
import { DataQuery, DataSourceSelectItem } from 'app/types';
import { PluginHelp } from 'app/core/components/PluginHelp/PluginHelp';
interface Props {
......@@ -204,15 +201,17 @@ export class QueriesTab extends PureComponent<Props, State> {
const { panel } = this.props;
const { currentDS, isAddingMixed } = this.state;
const queryInspector = {
const queryInspector: EditorToolbarView = {
title: 'Query Inspector',
render: this.renderQueryInspector,
buttonType: ToolbarButtonType.View,
};
const dsHelp = {
const dsHelp: EditorToolbarView = {
heading: 'Help',
icon: 'fa fa-question',
render: this.renderHelp,
buttonType: ToolbarButtonType.View,
};
return (
......
// Libraries
import React, { PureComponent } from 'react';
// Utils & Services
import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoader';
// Components
import { EditorTabBody } from './EditorTabBody';
import { EditorTabBody, EditorToolbarView, ToolbarButtonType } from './EditorTabBody';
import { VizTypePicker } from './VizTypePicker';
import { PluginHelp } from 'app/core/components/PluginHelp/PluginHelp';
import { FadeIn } from 'app/core/components/Animations/FadeIn';
import { PanelOptionSection } from './PanelOptionSection';
// Types
import { PanelModel } from '../panel_model';
import { DashboardModel } from '../dashboard_model';
......@@ -206,10 +203,11 @@ export class VisualizationTab extends PureComponent<Props, State> {
const { plugin } = this.props;
const { isVizPickerOpen, searchQuery } = this.state;
const pluginHelp = {
const pluginHelp: EditorToolbarView = {
heading: 'Help',
icon: 'fa fa-question',
render: this.renderHelp,
buttonType: ToolbarButtonType.View,
};
return (
......
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