Skip to content

N
nexpie-grafana-theme
Commit 3452ee5a by Torkel Ödegaard
Options

wip: making things work again

parent fa4fddf7
Showing with 212 additions and 180 deletions
public/app/core/components/Picker/PickerOption.test.tsx
import React from 'react'; import React from 'react';
import renderer from 'react-test-renderer'; import renderer from 'react-test-renderer';
import PickerOption from './PickerOption'; import PickerOption from './PickerOption';
...@@ -24,7 +24,7 @@ const model = { ...@@ -24,7 +24,7 @@ const model = {
children: 'Model title', children: 'Model title',
data: { data: {
title: 'Model title', title: 'Model title',
avatarUrl: 'url/to/avatar', imgUrl: 'url/to/avatar',
label: 'User picker label', label: 'User picker label',
}, },
className: 'class-for-user-picker', className: 'class-for-user-picker',
......
public/app/core/components/Picker/PickerOption.tsx
...@@ -27,7 +27,8 @@ export const Option = (props: ExtendedOptionProps) => { ...@@ -27,7 +27,8 @@ export const Option = (props: ExtendedOptionProps) => {
); );
}; };
export const SingleValue = (props: ExtendedOptionProps) => { // was not able to type this without typescript error
export const SingleValue = props => {
const { children, data } = props; const { children, data } = props;
return ( return (
......
public/app/features/dashboard/dashgrid/EditorTabBody.tsx
...@@ -5,19 +5,37 @@ import { FadeIn } from 'app/core/components/Animations/FadeIn'; ...@@ -5,19 +5,37 @@ import { FadeIn } from 'app/core/components/Animations/FadeIn';
interface Props { interface Props {
children: JSX.Element; children: JSX.Element;
heading: string; heading: string;
renderToolbar: () => JSX.Element; renderToolbar?: () => JSX.Element;
toolbarItems?: EditorToolBarView[];
}
export interface EditorToolBarView {
title: string;
imgSrc?: string;
icon?: string;
disabled?: boolean;
onClick?: () => void;
render: (closeFunction: any) => JSX.Element | JSX.Element[];
} }
interface State { interface State {
openView?: EditorToolBarView;
isOpen: boolean;
fadeIn: boolean; fadeIn: boolean;
} }
export class EditorTabBody extends PureComponent<Props, State> { export class EditorTabBody extends PureComponent<Props, State> {
static defaultProps = {
toolbarItems: [],
};
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
openView: null,
fadeIn: false, fadeIn: false,
isOpen: false,
}; };
} }
...@@ -25,56 +43,77 @@ export class EditorTabBody extends PureComponent<Props, State> { ...@@ -25,56 +43,77 @@ export class EditorTabBody extends PureComponent<Props, State> {
this.setState({ fadeIn: true }); this.setState({ fadeIn: true });
} }
// renderMainSelection(view: EditorToolBarView) { onToggleToolBarView = (item: EditorToolBarView) => {
// return ( this.setState({
// <div className="toolbar__main" onClick={() => this.onToggleToolBarView(view)} key={view.title + view.icon}> openView: item,
// <img className="toolbar__main-image" src={view.imgSrc} /> isOpen: !this.state.isOpen,
// <div className="toolbar__main-name">{view.title}</div> });
// <i className="fa fa-caret-down" /> };
// </div>
// ); onCloseOpenView = () => {
// } this.setState({ isOpen: false });
// };
// renderButton(view: EditorToolBarView) {
// const onClick = () => { static getDerivedStateFromProps(props, state) {
// if (view.onClick) { if (state.openView) {
// view.onClick(); const activeToolbarItem = props.toolbarItems.find(
// } item => item.title === state.openView.title && item.icon === state.openView.icon
// this.onToggleToolBarView(view); );
// }; if (activeToolbarItem) {
// return {
// return ( ...state,
// <div className="nav-buttons" key={view.title + view.icon}> openView: activeToolbarItem,
// <button className="btn navbar-button" onClick={onClick} disabled={view.disabled}> };
// {view.icon && <i className={view.icon} />} {view.title} }
// </button> }
// </div> return state;
// ); }
// }
// renderButton(view: EditorToolBarView) {
// renderOpenView(view: EditorToolBarView) { const onClick = () => {
// return ( if (view.onClick) {
// <div className="toolbar-subview"> view.onClick();
// <button className="toolbar-subview__close" onClick={this.onCloseOpenView}> }
// <i className="fa fa-chevron-up" /> this.onToggleToolBarView(view);
// </button> };
// {view.render(this.onCloseOpenView)}
// </div> return (
// ); <div className="nav-buttons" key={view.title + view.icon}>
// } <button className="btn navbar-button" onClick={onClick} disabled={view.disabled}>
{view.icon && <i className={view.icon} />} {view.title}
</button>
</div>
);
}
renderOpenView(view: EditorToolBarView) {
return (
<div className="toolbar-subview">
<button className="toolbar-subview__close" onClick={this.onCloseOpenView}>
<i className="fa fa-chevron-up" />
</button>
{view.render(this.onCloseOpenView)}
</div>
);
}
render() { render() {
const { children, renderToolbar, heading } = this.props; const { children, renderToolbar, heading, toolbarItems } = this.props;
const { fadeIn } = this.state; const { openView, fadeIn, isOpen } = this.state;
return ( return (
<> <>
<div className="toolbar"> <div className="toolbar">
<div className="toolbar__heading">{heading}</div> <div className="toolbar__heading">{heading}</div>
{renderToolbar && renderToolbar()} {renderToolbar && renderToolbar()}
<div className="gf-form--grow" />
{toolbarItems.map(item => this.renderButton(item))}
</div> </div>
<div className="panel-editor__scroll"> <div className="panel-editor__scroll">
<CustomScrollbar autoHide={false}> <CustomScrollbar autoHide={false}>
<FadeIn in={isOpen} duration={200} unmountOnExit={true}>
<div className="panel-editor__toolbar-view">{openView && this.renderOpenView(openView)}</div>
</FadeIn>
<div className="panel-editor__content"> <div className="panel-editor__content">
<FadeIn in={fadeIn} duration={50}> <FadeIn in={fadeIn} duration={50}>
{children} {children}
......
public/app/features/dashboard/dashgrid/QueriesTab.tsx
...@@ -30,8 +30,8 @@ interface Props { ...@@ -30,8 +30,8 @@ interface Props {
interface State { interface State {
currentDS: DataSourceSelectItem; currentDS: DataSourceSelectItem;
helpContent: JSX.Element; helpContent: JSX.Element | string;
isLoadingHelp: string; isLoadingHelp: boolean;
isPickerOpen: boolean; isPickerOpen: boolean;
} }
...@@ -126,113 +126,113 @@ export class QueriesTab extends PureComponent<Props, State> { ...@@ -126,113 +126,113 @@ export class QueriesTab extends PureComponent<Props, State> {
}); });
}; };
// loadHelp = () => { loadHelp = () => {
// const { currentDatasource } = this.state; const { currentDS } = this.state;
// const hasHelp = currentDatasource.meta.hasQueryHelp; const hasHelp = currentDS.meta.hasQueryHelp;
//
// if (hasHelp) { if (hasHelp) {
// this.setState({ this.setState({
// helpContent: <h2>Loading help...</h2>, helpContent: <h2>Loading help...</h2>,
// isLoadingHelp: true isLoadingHelp: true,
// }); });
//
// this.backendSrv this.backendSrv
// .get(`/api/plugins/${currentDatasource.meta.id}/markdown/query_help`) .get(`/api/plugins/${currentDS.meta.id}/markdown/query_help`)
// .then(res => { .then(res => {
// const md = new Remarkable(); const md = new Remarkable();
// const helpHtml = md.render(res); // TODO: Clean out dangerous code? Previous: this.helpHtml = this.$sce.trustAsHtml(md.render(res)); const helpHtml = md.render(res);
// this.setState({ this.setState({
// helpContent: <div className="markdown-html" dangerouslySetInnerHTML={{ __html: helpHtml }} />, helpContent: <div className="markdown-html" dangerouslySetInnerHTML={{ __html: helpHtml }} />,
// isLoadingHelp: false isLoadingHelp: false,
// }); });
// }) })
// .catch(() => { .catch(() => {
// this.setState({ this.setState({
// helpContent: 'Error occured when loading help', helpContent: 'Error occured when loading help',
// isLoadingHelp: false, isLoadingHelp: false,
// }); });
// }); });
// } }
// }; };
// renderOptions = close => { renderOptions = close => {
// const { currentDatasource } = this.state; const { currentDS } = this.state;
// const { queryOptions } = currentDatasource.meta; const { queryOptions } = currentDS.meta;
// const { panel } = this.props; const { panel } = this.props;
//
// const onChangeFn = (panelKey: string) => { const onChangeFn = (panelKey: string) => {
// return (value: string | number) => { return (value: string | number) => {
// panel[panelKey] = value; panel[panelKey] = value;
// panel.refresh(); panel.refresh();
// }; };
// }; };
//
// const allOptions = { const allOptions = {
// cacheTimeout: { cacheTimeout: {
// label: 'Cache timeout', label: 'Cache timeout',
// placeholder: '60', placeholder: '60',
// name: 'cacheTimeout', name: 'cacheTimeout',
// value: panel.cacheTimeout, value: panel.cacheTimeout,
// tooltipInfo: ( tooltipInfo: (
// <> <>
// If your time series store has a query cache this option can override the default cache timeout. Specify a If your time series store has a query cache this option can override the default cache timeout. Specify a
// numeric value in seconds. numeric value in seconds.
// </> </>
// ), ),
// }, },
// maxDataPoints: { maxDataPoints: {
// label: 'Max data points', label: 'Max data points',
// placeholder: 'auto', placeholder: 'auto',
// name: 'maxDataPoints', name: 'maxDataPoints',
// value: panel.maxDataPoints, value: panel.maxDataPoints,
// tooltipInfo: ( tooltipInfo: (
// <> <>
// The maximum data points the query should return. For graphs this is automatically set to one data point per The maximum data points the query should return. For graphs this is automatically set to one data point per
// pixel. pixel.
// </> </>
// ), ),
// }, },
// minInterval: { minInterval: {
// label: 'Min time interval', label: 'Min time interval',
// placeholder: '0', placeholder: '0',
// name: 'minInterval', name: 'minInterval',
// value: panel.interval, value: panel.interval,
// panelKey: 'interval', panelKey: 'interval',
// tooltipInfo: ( tooltipInfo: (
// <> <>
// A lower limit for the auto group by time interval. Recommended to be set to write frequency, for example{' '} A lower limit for the auto group by time interval. Recommended to be set to write frequency, for example{' '}
// <code>1m</code> if your data is written every minute. Access auto interval via variable{' '} <code>1m</code> if your data is written every minute. Access auto interval via variable{' '}
// <code>$__interval</code> for time range string and <code>$__interval_ms</code> for numeric variable that can <code>$__interval</code> for time range string and <code>$__interval_ms</code> for numeric variable that can
// be used in math expressions. be used in math expressions.
// </> </>
// ), ),
// }, },
// }; };
//
// const dsOptions = queryOptions const dsOptions = queryOptions
// ? Object.keys(queryOptions).map(key => { ? Object.keys(queryOptions).map(key => {
// const options = allOptions[key]; const options = allOptions[key];
// return <DataSourceOption key={key} {...options} onChange={onChangeFn(allOptions[key].panelKey || key)} />; return <DataSourceOption key={key} {...options} onChange={onChangeFn(allOptions[key].panelKey || key)} />;
// }) })
// : null; : null;
//
// return ( return (
// <> <>
// <TimeRangeOptions panel={this.props.panel} /> <TimeRangeOptions panel={this.props.panel} />
// {dsOptions} {dsOptions}
// </> </>
// ); );
// }; };
renderQueryInspector = () => { renderQueryInspector = () => {
const { panel } = this.props; const { panel } = this.props;
return <QueryInspector panel={panel} LoadingPlaceholder={LoadingPlaceholder} />; return <QueryInspector panel={panel} LoadingPlaceholder={LoadingPlaceholder} />;
}; };
// renderHelp = () => { renderHelp = () => {
// const { helpHtml, isLoading } = this.state.help; const { helpContent, isLoadingHelp } = this.state;
// return isLoading ? <LoadingPlaceholder text="Loading help..." /> : helpHtml; return isLoadingHelp ? <LoadingPlaceholder text="Loading help..." /> : helpContent;
// }; };
onAddQuery = (query?: DataQuery) => { onAddQuery = (query?: DataQuery) => {
this.props.panel.addQuery(query); this.props.panel.addQuery(query);
...@@ -278,43 +278,35 @@ export class QueriesTab extends PureComponent<Props, State> { ...@@ -278,43 +278,35 @@ export class QueriesTab extends PureComponent<Props, State> {
render() { render() {
const { panel } = this.props; const { panel } = this.props;
const { currentDS } = this.state;
const { hasQueryHelp } = currentDS.meta;
const queryInspector = {
title: 'Query Inspector',
render: this.renderQueryInspector,
};
// const dsInformation = { const dsHelp = {
// title: currentDatasource.name, title: '',
// imgSrc: currentDatasource.meta.info.logos.small, icon: 'fa fa-question',
// render: closeOpenView => ( disabled: !hasQueryHelp,
// <DataSourcePicker onClick: this.loadHelp,
// datasources={this.datasources} render: this.renderHelp,
// onChangeDataSource={ds => { };
// closeOpenView();
// this.onChangeDataSource(ds); const options = {
// }} title: 'Time Range',
// /> icon: '',
// ), disabled: false,
// }; render: this.renderOptions,
// };
// const queryInspector = {
// title: 'Query Inspector',
// render: this.renderQueryInspector,
// };
//
// const dsHelp = {
// title: '',
// icon: 'fa fa-question',
// disabled: !hasQueryHelp,
// onClick: this.loadHelp,
// render: this.renderHelp,
// };
//
// const options = {
// title: 'Time Range',
// icon: '',
// disabled: false,
// render: this.renderOptions,
// };
return ( return (
<EditorTabBody heading="Queries" renderToolbar={this.renderToolbar}> <EditorTabBody
heading="Queries"
renderToolbar={this.renderToolbar}
toolbarItems={[options, queryInspector, dsHelp]}
>
<div className="query-editor-rows gf-form-group"> <div className="query-editor-rows gf-form-group">
<div ref={element => (this.element = element)} /> <div ref={element => (this.element = element)} />
......
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