mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Merge pull request #14494 from grafana/panel-edit-style-changes
Panel edit style changes
This commit is contained in:
Torkel Ödegaard
GitHub
commit
b9a05a8543
@ -1,17 +1,17 @@
|
||||
#! /usr/bin/env bash
|
||||
version=5.4.1
|
||||
version=5.4.2
|
||||
|
||||
wget https://dl.grafana.com/oss/release/grafana_${version}_amd64.deb
|
||||
# wget https://dl.grafana.com/oss/release/grafana_${version}_amd64.deb
|
||||
#
|
||||
# package_cloud push grafana/stable/debian/jessie grafana_${version}_amd64.deb
|
||||
# package_cloud push grafana/stable/debian/wheezy grafana_${version}_amd64.deb
|
||||
# package_cloud push grafana/stable/debian/stretch grafana_${version}_amd64.deb
|
||||
#
|
||||
# package_cloud push grafana/testing/debian/jessie grafana_${version}_amd64.deb
|
||||
# package_cloud push grafana/testing/debian/wheezy grafana_${version}_amd64.deb --verbose
|
||||
# package_cloud push grafana/testing/debian/stretch grafana_${version}_amd64.deb --verbose
|
||||
|
||||
package_cloud push grafana/stable/debian/jessie grafana_${version}_amd64.deb
|
||||
package_cloud push grafana/stable/debian/wheezy grafana_${version}_amd64.deb
|
||||
package_cloud push grafana/stable/debian/stretch grafana_${version}_amd64.deb
|
||||
|
||||
package_cloud push grafana/testing/debian/jessie grafana_${version}_amd64.deb
|
||||
package_cloud push grafana/testing/debian/wheezy grafana_${version}_amd64.deb --verbose
|
||||
package_cloud push grafana/testing/debian/stretch grafana_${version}_amd64.deb --verbose
|
||||
|
||||
wget https://dl.grafana.com/release/grafana-${version}-1.x86_64.rpm
|
||||
wget https://dl.grafana.com/oss/release/grafana-${version}-1.x86_64.rpm
|
||||
|
||||
package_cloud push grafana/testing/el/6 grafana-${version}-1.x86_64.rpm --verbose
|
||||
package_cloud push grafana/testing/el/7 grafana-${version}-1.x86_64.rpm --verbose
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import React, { PureComponent } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { ValidationEvents, ValidationRule } from 'app/types';
|
||||
import { validate, hasValidationEvent } from 'app/core/utils/validate';
|
||||
|
||||
@ -31,6 +32,10 @@ interface Props extends React.HTMLProps<HTMLInputElement> {
|
||||
}
|
||||
|
||||
export class Input extends PureComponent<Props> {
|
||||
static defaultProps = {
|
||||
className: '',
|
||||
};
|
||||
|
||||
state = {
|
||||
error: null,
|
||||
};
|
||||
@ -76,7 +81,7 @@ export class Input extends PureComponent<Props> {
|
||||
render() {
|
||||
const { validationEvents, className, hideErrorMessage, ...restProps } = this.props;
|
||||
const { error } = this.state;
|
||||
const inputClassName = 'gf-form-input' + (this.isInvalid ? ' invalid' : '');
|
||||
const inputClassName = classNames('gf-form-input', { invalid: this.isInvalid }, className);
|
||||
const inputElementProps = this.populateEventPropsWithStatus(restProps, validationEvents);
|
||||
|
||||
return (
|
||||
|
||||
@ -36,25 +36,25 @@ export default class UnitPicker extends PureComponent<Props> {
|
||||
};
|
||||
});
|
||||
|
||||
const styles = {
|
||||
...ResetStyles,
|
||||
menu: () => ({
|
||||
maxHeight: '75%',
|
||||
overflow: 'scroll',
|
||||
}),
|
||||
menuList: () =>
|
||||
({
|
||||
overflowY: 'auto',
|
||||
position: 'relative',
|
||||
} as React.CSSProperties),
|
||||
valueContainer: () =>
|
||||
({
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
maxWidth: '90px',
|
||||
whiteSpace: 'nowrap',
|
||||
} as React.CSSProperties),
|
||||
};
|
||||
// const styles = {
|
||||
// ...ResetStyles,
|
||||
// menu: () => ({
|
||||
// maxHeight: '75%',
|
||||
// overflow: 'scroll',
|
||||
// }),
|
||||
// menuList: () =>
|
||||
// ({
|
||||
// overflowY: 'auto',
|
||||
// position: 'relative',
|
||||
// } as React.CSSProperties),
|
||||
// valueContainer: () =>
|
||||
// ({
|
||||
// overflow: 'hidden',
|
||||
// textOverflow: 'ellipsis',
|
||||
// maxWidth: '90px',
|
||||
// whiteSpace: 'nowrap',
|
||||
// } as React.CSSProperties),
|
||||
// };
|
||||
|
||||
const value = groupOptions.map(group => {
|
||||
return group.options.find(option => option.value === defaultValue);
|
||||
@ -74,7 +74,7 @@ export default class UnitPicker extends PureComponent<Props> {
|
||||
Group: UnitGroup,
|
||||
Option: UnitOption,
|
||||
}}
|
||||
styles={styles}
|
||||
styles={ResetStyles}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
<div class="panel-option-section__body">
|
||||
<div class="edit-tab-with-sidemenu" ng-if="ctrl.alert">
|
||||
<aside class="edit-sidemenu-aside">
|
||||
<ul class="edit-sidemenu">
|
||||
@ -185,3 +186,4 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -141,7 +141,6 @@ export class DashboardMigrator {
|
||||
|
||||
// ensure query refIds
|
||||
panelUpgrades.push(panel => {
|
||||
console.log('asdasd', panel);
|
||||
_.each(panel.targets, target => {
|
||||
if (!target.refId) {
|
||||
target.refId = panel.getNextQueryLetter && panel.getNextQueryLetter();
|
||||
|
||||
@ -76,16 +76,16 @@ export class DashboardPanel extends PureComponent<Props, State> {
|
||||
// unmount angular panel
|
||||
this.cleanUpAngularPanel();
|
||||
|
||||
if (plugin.exports) {
|
||||
this.setState({ plugin: plugin });
|
||||
} else {
|
||||
plugin.exports = await importPluginModule(plugin.module);
|
||||
this.setState({ plugin: plugin });
|
||||
}
|
||||
|
||||
if (panel.type !== pluginId) {
|
||||
this.props.panel.changeType(pluginId, fromAngularPanel);
|
||||
}
|
||||
|
||||
if (plugin.exports) {
|
||||
this.setState({ plugin: plugin, angularPanel: null });
|
||||
} else {
|
||||
plugin.exports = await importPluginModule(plugin.module);
|
||||
this.setState({ plugin: plugin, angularPanel: null });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -106,18 +106,15 @@ export class DashboardPanel extends PureComponent<Props, State> {
|
||||
this.setState({ angularPanel });
|
||||
}
|
||||
|
||||
cleanUpAngularPanel(unmounted?: boolean) {
|
||||
cleanUpAngularPanel() {
|
||||
if (this.state.angularPanel) {
|
||||
this.state.angularPanel.destroy();
|
||||
|
||||
if (!unmounted) {
|
||||
this.setState({ angularPanel: null });
|
||||
}
|
||||
this.element = null;
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.cleanUpAngularPanel(true);
|
||||
this.cleanUpAngularPanel();
|
||||
}
|
||||
|
||||
onMouseEnter = () => {
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
// Libraries
|
||||
import React, { PureComponent } from 'react';
|
||||
|
||||
// Components
|
||||
import CustomScrollbar from 'app/core/components/CustomScrollbar/CustomScrollbar';
|
||||
import { FadeIn } from 'app/core/components/Animations/FadeIn';
|
||||
import { PanelOptionSection } from './PanelOptionSection';
|
||||
|
||||
interface Props {
|
||||
children: JSX.Element;
|
||||
@ -10,7 +14,8 @@ interface Props {
|
||||
}
|
||||
|
||||
export interface EditorToolBarView {
|
||||
title: string;
|
||||
title?: string;
|
||||
heading?: string;
|
||||
imgSrc?: string;
|
||||
icon?: string;
|
||||
disabled?: boolean;
|
||||
@ -88,12 +93,9 @@ export class EditorTabBody extends PureComponent<Props, State> {
|
||||
|
||||
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>
|
||||
<PanelOptionSection title={view.title || view.heading} onClose={this.onCloseOpenView}>
|
||||
{view.render()}
|
||||
</PanelOptionSection>
|
||||
);
|
||||
}
|
||||
|
||||
@ -115,10 +117,10 @@ export class EditorTabBody extends PureComponent<Props, State> {
|
||||
</div>
|
||||
<div className="panel-editor__scroll">
|
||||
<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">
|
||||
<FadeIn in={isOpen} duration={200} unmountOnExit={true}>
|
||||
{openView && this.renderOpenView(openView)}
|
||||
</FadeIn>
|
||||
<FadeIn in={fadeIn} duration={50}>
|
||||
{children}
|
||||
</FadeIn>
|
||||
|
||||
@ -0,0 +1,26 @@
|
||||
// Libraries
|
||||
import React, { SFC } from 'react';
|
||||
|
||||
interface Props {
|
||||
title?: string;
|
||||
onClose?: () => void;
|
||||
children: JSX.Element | JSX.Element[];
|
||||
}
|
||||
|
||||
export const PanelOptionSection: SFC<Props> = props => {
|
||||
return (
|
||||
<div className="panel-option-section">
|
||||
{props.title && (
|
||||
<div className="panel-option-section__header">
|
||||
{props.title}
|
||||
{props.onClose && (
|
||||
<button className="btn btn-link" onClick={props.onClose}>
|
||||
<i className="fa fa-remove" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="panel-option-section__body">{props.children}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -4,13 +4,13 @@ import Remarkable from 'remarkable';
|
||||
import _ from 'lodash';
|
||||
|
||||
// Components
|
||||
import DataSourceOption from './DataSourceOption';
|
||||
import './../../panel/metrics_tab';
|
||||
import { EditorTabBody } from './EditorTabBody';
|
||||
import { DataSourcePicker } from './DataSourcePicker';
|
||||
import { QueryInspector } from './QueryInspector';
|
||||
import { TimeRangeOptions } from './TimeRangeOptions';
|
||||
import './../../panel/metrics_tab';
|
||||
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';
|
||||
@ -157,75 +157,6 @@ export class QueriesTab extends PureComponent<Props, State> {
|
||||
}
|
||||
};
|
||||
|
||||
renderOptions = close => {
|
||||
const { currentDS } = this.state;
|
||||
const { queryOptions } = currentDS.meta;
|
||||
const { panel } = this.props;
|
||||
|
||||
const onChangeFn = (panelKey: string) => {
|
||||
return (value: string | number) => {
|
||||
panel[panelKey] = value;
|
||||
panel.refresh();
|
||||
};
|
||||
};
|
||||
|
||||
const allOptions = {
|
||||
cacheTimeout: {
|
||||
label: 'Cache timeout',
|
||||
placeholder: '60',
|
||||
name: 'cacheTimeout',
|
||||
value: panel.cacheTimeout,
|
||||
tooltipInfo: (
|
||||
<>
|
||||
If your time series store has a query cache this option can override the default cache timeout. Specify a
|
||||
numeric value in seconds.
|
||||
</>
|
||||
),
|
||||
},
|
||||
maxDataPoints: {
|
||||
label: 'Max data points',
|
||||
placeholder: 'auto',
|
||||
name: 'maxDataPoints',
|
||||
value: panel.maxDataPoints,
|
||||
tooltipInfo: (
|
||||
<>
|
||||
The maximum data points the query should return. For graphs this is automatically set to one data point per
|
||||
pixel.
|
||||
</>
|
||||
),
|
||||
},
|
||||
minInterval: {
|
||||
label: 'Min time interval',
|
||||
placeholder: '0',
|
||||
name: 'minInterval',
|
||||
value: panel.interval,
|
||||
panelKey: 'interval',
|
||||
tooltipInfo: (
|
||||
<>
|
||||
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>$__interval</code> for time range string and <code>$__interval_ms</code> for numeric variable that can
|
||||
be used in math expressions.
|
||||
</>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
const dsOptions = queryOptions
|
||||
? Object.keys(queryOptions).map(key => {
|
||||
const options = allOptions[key];
|
||||
return <DataSourceOption key={key} {...options} onChange={onChangeFn(allOptions[key].panelKey || key)} />;
|
||||
})
|
||||
: null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<TimeRangeOptions panel={this.props.panel} />
|
||||
{dsOptions}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
renderQueryInspector = () => {
|
||||
const { panel } = this.props;
|
||||
return <QueryInspector panel={panel} LoadingPlaceholder={LoadingPlaceholder} />;
|
||||
@ -316,26 +247,17 @@ export class QueriesTab extends PureComponent<Props, State> {
|
||||
};
|
||||
|
||||
const dsHelp = {
|
||||
title: '',
|
||||
heading: 'Help',
|
||||
icon: 'fa fa-question',
|
||||
disabled: !hasQueryHelp,
|
||||
onClick: this.loadHelp,
|
||||
render: this.renderHelp,
|
||||
};
|
||||
|
||||
const options = {
|
||||
title: 'Time Range',
|
||||
icon: '',
|
||||
disabled: false,
|
||||
render: this.renderOptions,
|
||||
};
|
||||
|
||||
return (
|
||||
<EditorTabBody
|
||||
heading="Queries"
|
||||
renderToolbar={this.renderToolbar}
|
||||
toolbarItems={[options, queryInspector, dsHelp]}
|
||||
>
|
||||
<EditorTabBody heading="Queries" renderToolbar={this.renderToolbar} toolbarItems={[queryInspector, dsHelp]}>
|
||||
<>
|
||||
<PanelOptionSection>
|
||||
<div className="query-editor-rows gf-form-group">
|
||||
<div ref={element => (this.element = element)} />
|
||||
|
||||
@ -356,6 +278,11 @@ export class QueriesTab extends PureComponent<Props, State> {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PanelOptionSection>
|
||||
<PanelOptionSection>
|
||||
<QueryOptions panel={panel} datasource={currentDS} />
|
||||
</PanelOptionSection>
|
||||
</>
|
||||
</EditorTabBody>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import React, { PureComponent } from 'react';
|
||||
import { JSONFormatter } from 'app/core/components/JSONFormatter/JSONFormatter';
|
||||
import appEvents from 'app/core/app_events';
|
||||
import { CopyToClipboard } from 'app/core/components/CopyToClipboard/CopyToClipboard';
|
||||
@ -187,16 +187,10 @@ export class QueryInspector extends PureComponent<Props, State> {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
{/*
|
||||
<button className="btn btn-transparent btn-p-x-0 m-r-1" onClick={this.onToggleMocking}>
|
||||
Mock response
|
||||
</button>
|
||||
*/}
|
||||
<div className="pull-right">
|
||||
<button className="btn btn-transparent btn-p-x-0 m-r-1" onClick={this.onToggleExpand}>
|
||||
{this.renderExpandCollapse()}
|
||||
</button>
|
||||
|
||||
<CopyToClipboard
|
||||
className="btn btn-transparent btn-p-x-0"
|
||||
text={this.getTextForClipboard}
|
||||
|
||||
167
public/app/features/dashboard/dashgrid/QueryOptions.tsx
Normal file
167
public/app/features/dashboard/dashgrid/QueryOptions.tsx
Normal file
@ -0,0 +1,167 @@
|
||||
// Libraries
|
||||
import React, { PureComponent } from 'react';
|
||||
|
||||
// Utils
|
||||
import { isValidTimeSpan } from 'app/core/utils/rangeutil';
|
||||
|
||||
// Components
|
||||
import { Switch } from 'app/core/components/Switch/Switch';
|
||||
import { Input } from 'app/core/components/Form';
|
||||
import { EventsWithValidation } from 'app/core/components/Form/Input';
|
||||
import { InputStatus } from 'app/core/components/Form/Input';
|
||||
import DataSourceOption from './DataSourceOption';
|
||||
|
||||
// Types
|
||||
import { PanelModel } from '../panel_model';
|
||||
import { ValidationEvents, DataSourceSelectItem } from 'app/types';
|
||||
|
||||
const timeRangeValidationEvents: ValidationEvents = {
|
||||
[EventsWithValidation.onBlur]: [
|
||||
{
|
||||
rule: value => {
|
||||
if (!value) {
|
||||
return true;
|
||||
}
|
||||
return isValidTimeSpan(value);
|
||||
},
|
||||
errorMessage: 'Not a valid timespan',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const emptyToNull = (value: string) => {
|
||||
return value === '' ? null : value;
|
||||
};
|
||||
|
||||
interface Props {
|
||||
panel: PanelModel;
|
||||
datasource: DataSourceSelectItem;
|
||||
}
|
||||
|
||||
export class QueryOptions extends PureComponent<Props> {
|
||||
onOverrideTime = (evt, status: InputStatus) => {
|
||||
const { value } = evt.target;
|
||||
const { panel } = this.props;
|
||||
const emptyToNullValue = emptyToNull(value);
|
||||
if (status === InputStatus.Valid && panel.timeFrom !== emptyToNullValue) {
|
||||
panel.timeFrom = emptyToNullValue;
|
||||
panel.refresh();
|
||||
}
|
||||
};
|
||||
|
||||
onTimeShift = (evt, status: InputStatus) => {
|
||||
const { value } = evt.target;
|
||||
const { panel } = this.props;
|
||||
const emptyToNullValue = emptyToNull(value);
|
||||
if (status === InputStatus.Valid && panel.timeShift !== emptyToNullValue) {
|
||||
panel.timeShift = emptyToNullValue;
|
||||
panel.refresh();
|
||||
}
|
||||
};
|
||||
|
||||
onToggleTimeOverride = () => {
|
||||
const { panel } = this.props;
|
||||
panel.hideTimeOverride = !panel.hideTimeOverride;
|
||||
panel.refresh();
|
||||
};
|
||||
|
||||
renderOptions() {
|
||||
const { datasource, panel } = this.props;
|
||||
const { queryOptions } = datasource.meta;
|
||||
|
||||
if (!queryOptions) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const onChangeFn = (panelKey: string) => {
|
||||
return (value: string | number) => {
|
||||
panel[panelKey] = value;
|
||||
panel.refresh();
|
||||
};
|
||||
};
|
||||
|
||||
const allOptions = {
|
||||
cacheTimeout: {
|
||||
label: 'Cache timeout',
|
||||
placeholder: '60',
|
||||
name: 'cacheTimeout',
|
||||
value: panel.cacheTimeout,
|
||||
tooltipInfo: (
|
||||
<>
|
||||
If your time series store has a query cache this option can override the default cache timeout. Specify a
|
||||
numeric value in seconds.
|
||||
</>
|
||||
),
|
||||
},
|
||||
maxDataPoints: {
|
||||
label: 'Max data points',
|
||||
placeholder: 'auto',
|
||||
name: 'maxDataPoints',
|
||||
value: panel.maxDataPoints,
|
||||
tooltipInfo: (
|
||||
<>
|
||||
The maximum data points the query should return. For graphs this is automatically set to one data point per
|
||||
pixel.
|
||||
</>
|
||||
),
|
||||
},
|
||||
minInterval: {
|
||||
label: 'Min time interval',
|
||||
placeholder: '0',
|
||||
name: 'minInterval',
|
||||
value: panel.interval,
|
||||
panelKey: 'interval',
|
||||
tooltipInfo: (
|
||||
<>
|
||||
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>$__interval</code> for time range string and <code>$__interval_ms</code> for numeric variable that can
|
||||
be used in math expressions.
|
||||
</>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
return Object.keys(queryOptions).map(key => {
|
||||
const options = allOptions[key];
|
||||
return <DataSourceOption key={key} {...options} onChange={onChangeFn(allOptions[key].panelKey || key)} />;
|
||||
});
|
||||
}
|
||||
|
||||
render = () => {
|
||||
const hideTimeOverride = this.props.panel.hideTimeOverride;
|
||||
return (
|
||||
<div className="gf-form-inline">
|
||||
{this.renderOptions()}
|
||||
|
||||
<div className="gf-form">
|
||||
<span className="gf-form-label">Relative time</span>
|
||||
<Input
|
||||
type="text"
|
||||
className="width-6"
|
||||
placeholder="1h"
|
||||
onBlur={this.onOverrideTime}
|
||||
validationEvents={timeRangeValidationEvents}
|
||||
hideErrorMessage={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="gf-form">
|
||||
<span className="gf-form-label">Time shift</span>
|
||||
<Input
|
||||
type="text"
|
||||
className="width-6"
|
||||
placeholder="1h"
|
||||
onBlur={this.onTimeShift}
|
||||
validationEvents={timeRangeValidationEvents}
|
||||
hideErrorMessage={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="gf-form-inline">
|
||||
<Switch label="Hide time info" checked={hideTimeOverride} onChange={this.onToggleTimeOverride} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
@ -1,97 +0,0 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { Switch } from 'app/core/components/Switch/Switch';
|
||||
import { Input } from 'app/core/components/Form';
|
||||
import { isValidTimeSpan } from 'app/core/utils/rangeutil';
|
||||
import { ValidationEvents } from 'app/types';
|
||||
import { EventsWithValidation } from 'app/core/components/Form/Input';
|
||||
import { PanelModel } from '../panel_model';
|
||||
import { InputStatus } from 'app/core/components/Form/Input';
|
||||
|
||||
const timeRangeValidationEvents: ValidationEvents = {
|
||||
[EventsWithValidation.onBlur]: [
|
||||
{
|
||||
rule: value => {
|
||||
if (!value) {
|
||||
return true;
|
||||
}
|
||||
return isValidTimeSpan(value);
|
||||
},
|
||||
errorMessage: 'Not a valid timespan',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const emptyToNull = (value: string) => {
|
||||
return value === '' ? null : value;
|
||||
};
|
||||
|
||||
interface Props {
|
||||
panel: PanelModel;
|
||||
}
|
||||
|
||||
export class TimeRangeOptions extends PureComponent<Props> {
|
||||
onOverrideTime = (evt, status: InputStatus) => {
|
||||
const { value } = evt.target;
|
||||
const { panel } = this.props;
|
||||
const emptyToNullValue = emptyToNull(value);
|
||||
if (status === InputStatus.Valid && panel.timeFrom !== emptyToNullValue) {
|
||||
panel.timeFrom = emptyToNullValue;
|
||||
panel.refresh();
|
||||
}
|
||||
};
|
||||
|
||||
onTimeShift = (evt, status: InputStatus) => {
|
||||
const { value } = evt.target;
|
||||
const { panel } = this.props;
|
||||
const emptyToNullValue = emptyToNull(value);
|
||||
if (status === InputStatus.Valid && panel.timeShift !== emptyToNullValue) {
|
||||
panel.timeShift = emptyToNullValue;
|
||||
panel.refresh();
|
||||
}
|
||||
};
|
||||
|
||||
onToggleTimeOverride = () => {
|
||||
const { panel } = this.props;
|
||||
panel.hideTimeOverride = !panel.hideTimeOverride;
|
||||
panel.refresh();
|
||||
};
|
||||
|
||||
render = () => {
|
||||
const hideTimeOverride = this.props.panel.hideTimeOverride;
|
||||
return (
|
||||
<>
|
||||
<h5 className="section-heading">Time Range</h5>
|
||||
|
||||
<div className="gf-form-group">
|
||||
<div className="gf-form">
|
||||
<span className="gf-form-label width-12">Override relative time</span>
|
||||
<Input
|
||||
type="text"
|
||||
className="gf-form-input max-width-8"
|
||||
placeholder="1h"
|
||||
onBlur={this.onOverrideTime}
|
||||
validationEvents={timeRangeValidationEvents}
|
||||
hideErrorMessage={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="gf-form">
|
||||
<span className="gf-form-label width-12">Add time shift</span>
|
||||
<Input
|
||||
type="text"
|
||||
className="gf-form-input max-width-8"
|
||||
placeholder="1h"
|
||||
onBlur={this.onTimeShift}
|
||||
validationEvents={timeRangeValidationEvents}
|
||||
hideErrorMessage={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="gf-form-inline">
|
||||
<Switch label="Hide time override info" checked={hideTimeOverride} onChange={this.onToggleTimeOverride} />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
}
|
||||
@ -8,6 +8,7 @@ import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoa
|
||||
import { EditorTabBody } from './EditorTabBody';
|
||||
import { VizTypePicker } from './VizTypePicker';
|
||||
import { FadeIn } from 'app/core/components/Animations/FadeIn';
|
||||
import { PanelOptionSection } from './PanelOptionSection';
|
||||
|
||||
// Types
|
||||
import { PanelModel } from '../panel_model';
|
||||
@ -59,11 +60,15 @@ export class VisualizationTab extends PureComponent<Props, State> {
|
||||
return <div ref={element => (this.element = element)} />;
|
||||
}
|
||||
|
||||
if (PanelOptions) {
|
||||
return <PanelOptions options={this.getPanelDefaultOptions()} onChange={this.onPanelOptionsChanged} />;
|
||||
} else {
|
||||
return <p>Visualization has no options</p>;
|
||||
}
|
||||
return (
|
||||
<PanelOptionSection>
|
||||
{PanelOptions ? (
|
||||
<PanelOptions options={this.getPanelDefaultOptions()} onChange={this.onPanelOptionsChanged} />
|
||||
) : (
|
||||
<p>Visualization has no options</p>
|
||||
)}
|
||||
</PanelOptionSection>
|
||||
);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
@ -105,9 +110,9 @@ export class VisualizationTab extends PureComponent<Props, State> {
|
||||
for (let i = 0; i < panelCtrl.editorTabs.length; i++) {
|
||||
template +=
|
||||
`
|
||||
<div class="form-section" ng-cloak>` +
|
||||
(i > -1 ? `<div class="form-section__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') +
|
||||
`<div class="form-section__body">
|
||||
<div class="panel-option-section" ng-cloak>` +
|
||||
(i > 0 ? `<div class="panel-option-section__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') +
|
||||
`<div class="panel-option-section__body">
|
||||
<panel-editor-tab editor-tab="ctrl.editorTabs[${i}]" ctrl="ctrl"></panel-editor-tab>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,8 +1,4 @@
|
||||
<div class="editor-row">
|
||||
<h5 class="section-heading">
|
||||
Drilldown / detail link<tip>These links appear in the dropdown menu in the panel menu. </tip></h5>
|
||||
</h5>
|
||||
|
||||
<div class="gf-form-group" ng-repeat="link in panel.links">
|
||||
<div class="section">
|
||||
<div class="gf-form max-width-25">
|
||||
|
||||
@ -177,6 +177,9 @@ export class DataSourceSettings extends PureComponent<Props, State> {
|
||||
<div className="page-container page-body">
|
||||
<div>
|
||||
<form onSubmit={this.onSubmit}>
|
||||
{this.isReadOnly() && this.renderIsReadOnlyMessage()}
|
||||
{this.shouldRenderInfoBox() && <div className="grafana-info-box">{this.getInfoText()}</div>}
|
||||
|
||||
<BasicSettings
|
||||
dataSourceName={dataSource.name}
|
||||
isDefault={dataSource.isDefault}
|
||||
@ -184,9 +187,6 @@ export class DataSourceSettings extends PureComponent<Props, State> {
|
||||
onNameChange={name => setDataSourceName(name)}
|
||||
/>
|
||||
|
||||
{this.shouldRenderInfoBox() && <div className="grafana-info-box">{this.getInfoText()}</div>}
|
||||
|
||||
{this.isReadOnly() && this.renderIsReadOnlyMessage()}
|
||||
{dataSourceMeta.module && (
|
||||
<PluginSettings
|
||||
dataSource={dataSource}
|
||||
|
||||
@ -12,17 +12,17 @@ exports[`Render should render alpha info text 1`] = `
|
||||
<form
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<div
|
||||
className="grafana-info-box"
|
||||
>
|
||||
This plugin is marked as being in alpha state, which means it is in early development phase and updates will include breaking changes.
|
||||
</div>
|
||||
<BasicSettings
|
||||
dataSourceName="gdev-cloudwatch"
|
||||
isDefault={false}
|
||||
onDefaultChange={[Function]}
|
||||
onNameChange={[Function]}
|
||||
/>
|
||||
<div
|
||||
className="grafana-info-box"
|
||||
>
|
||||
This plugin is marked as being in alpha state, which means it is in early development phase and updates will include breaking changes.
|
||||
</div>
|
||||
<PluginSettings
|
||||
dataSource={
|
||||
Object {
|
||||
@ -111,17 +111,17 @@ exports[`Render should render beta info text 1`] = `
|
||||
<form
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<div
|
||||
className="grafana-info-box"
|
||||
>
|
||||
This plugin is marked as being in a beta development state. This means it is in currently in active development and could be missing important features.
|
||||
</div>
|
||||
<BasicSettings
|
||||
dataSourceName="gdev-cloudwatch"
|
||||
isDefault={false}
|
||||
onDefaultChange={[Function]}
|
||||
onNameChange={[Function]}
|
||||
/>
|
||||
<div
|
||||
className="grafana-info-box"
|
||||
>
|
||||
This plugin is marked as being in a beta development state. This means it is in currently in active development and could be missing important features.
|
||||
</div>
|
||||
<PluginSettings
|
||||
dataSource={
|
||||
Object {
|
||||
@ -304,17 +304,17 @@ exports[`Render should render is ready only message 1`] = `
|
||||
<form
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<div
|
||||
className="grafana-info-box span8"
|
||||
>
|
||||
This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.
|
||||
</div>
|
||||
<BasicSettings
|
||||
dataSourceName="gdev-cloudwatch"
|
||||
isDefault={false}
|
||||
onDefaultChange={[Function]}
|
||||
onNameChange={[Function]}
|
||||
/>
|
||||
<div
|
||||
className="grafana-info-box span8"
|
||||
>
|
||||
This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.
|
||||
</div>
|
||||
<PluginSettings
|
||||
dataSource={
|
||||
Object {
|
||||
|
||||
@ -1,21 +1,28 @@
|
||||
<div class="editor-row">
|
||||
<div class="section gf-form-group">
|
||||
<h5 class="section-heading">Info</h5>
|
||||
<div class="panel-option-section">
|
||||
<!-- <div class="panel-option-section__header">Information</div> -->
|
||||
<div class="panel-option-section__body">
|
||||
<div class="section">
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-7">Title</span>
|
||||
<input type="text" class="gf-form-input width-25" ng-model='ctrl.panel.title' ng-model-onblur></input>
|
||||
</div>
|
||||
<div class="gf-form gf-form--v-stretch">
|
||||
<span class="gf-form-label width-7">Description</span>
|
||||
<textarea class="gf-form-input width-25" rows="3" ng-model="ctrl.panel.description" ng-model-onblur placeholder="Panel description, supports markdown & links"></textarea>
|
||||
</div>
|
||||
<gf-form-switch class="gf-form" label-class="width-7" switch-class="max-width-6" label="Transparent" checked="ctrl.panel.transparent" on-change="ctrl.render()"></gf-form-switch>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="gf-form gf-form--v-stretch">
|
||||
<span class="gf-form-label width-7">Description</span>
|
||||
<textarea class="gf-form-input width-25" rows="5" ng-model="ctrl.panel.description" ng-model-onblur placeholder="Panel description, supports markdown & links"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section gf-form-group">
|
||||
<h5 class="section-heading">Repeat</h5>
|
||||
<div class="panel-option-section">
|
||||
<div class="panel-option-section__header">Repeating</div>
|
||||
<div class="panel-option-section__body">
|
||||
<div class="section">
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-9">For each value of</span>
|
||||
<span class="gf-form-label width-9">Repat</span>
|
||||
<dash-repeat-option panel="ctrl.panel"></dash-repeat-option>
|
||||
</div>
|
||||
<div class="gf-form" ng-show="ctrl.panel.repeat">
|
||||
@ -31,7 +38,12 @@
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-option-section">
|
||||
<div class="panel-option-section__header">Drildown Links</div>
|
||||
<div class="panel-option-section__body">
|
||||
<panel-links-editor panel="ctrl.panel"></panel-links-editor>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -22,10 +22,10 @@
|
||||
</div>
|
||||
<gf-form-switch ng-disabled="!ctrl.panel.lines" class="gf-form" label="Staircase" label-class="width-8" checked="ctrl.panel.steppedLine" on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
<div class="gf-form">
|
||||
<div class="gf-form" ng-if="ctrl.panel.points">
|
||||
<label class="gf-form-label width-8">Point Radius</label>
|
||||
<div class="gf-form-select-wrapper max-width-5">
|
||||
<select class="gf-form-input" ng-model="ctrl.panel.pointradius" ng-options="f for f in [0.5,1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()" ng-disabled="!ctrl.panel.points"></select>
|
||||
<select class="gf-form-input" ng-model="ctrl.panel.pointradius" ng-options="f for f in [0.5,1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -66,7 +66,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gf-form-group">
|
||||
<div>
|
||||
<div class="gf-form-inline" ng-repeat="override in ctrl.panel.seriesOverrides" ng-controller="SeriesOverridesCtrl">
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label">alias or regex</label>
|
||||
|
||||
@ -387,6 +387,9 @@ $panel-editor-tabs-line-color: #e3e3e3;
|
||||
$panel-editor-viz-item-bg-hover: darken($blue, 47%);
|
||||
$panel-editor-viz-item-bg-hover-active: darken($orange, 45%);
|
||||
|
||||
$panel-option-section-border: 1px solid $dark-3;
|
||||
$panel-option-section-header-bg: linear-gradient(0deg, $gray-blue, $dark-1);
|
||||
|
||||
$panel-grid-placeholder-bg: darken($blue, 47%);
|
||||
$panel-grid-placeholder-shadow: 0 0 4px $blue;
|
||||
|
||||
|
||||
@ -396,6 +396,9 @@ $panel-editor-tabs-line-color: $dark-5;
|
||||
$panel-editor-viz-item-bg-hover: lighten($blue, 62%);
|
||||
$panel-editor-viz-item-bg-hover-active: lighten($orange, 34%);
|
||||
|
||||
$panel-option-section-border: 1px solid $gray-6;
|
||||
$panel-option-section-header-bg: linear-gradient(0deg, $gray-6, $gray-7);
|
||||
|
||||
$panel-grid-placeholder-bg: lighten($blue, 62%);
|
||||
$panel-grid-placeholder-shadow: 0 0 4px $blue-light;
|
||||
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
background: $page-bg;
|
||||
background: $input-bg;
|
||||
margin: 0 20px 0 84px;
|
||||
border-radius: 3px;
|
||||
box-shadow: $panel-editor-shadow;
|
||||
@ -63,12 +63,7 @@
|
||||
}
|
||||
|
||||
.panel-editor__content {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.panel-editor__toolbar-view {
|
||||
background: $panel-editor-toolbar-view-bg;
|
||||
padding: 20px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.panel-in-fullscreen {
|
||||
@ -132,8 +127,7 @@
|
||||
}
|
||||
|
||||
.viz-picker {
|
||||
margin-top: -40px;
|
||||
padding: 20px;
|
||||
padding: 0px 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -143,11 +137,11 @@
|
||||
}
|
||||
|
||||
.viz-picker__item {
|
||||
background: $panel-bg;
|
||||
border: $panel-border;
|
||||
background: $panel-editor-viz-item-bg;
|
||||
border: $panel-editor-viz-item-border;
|
||||
border-radius: 3px;
|
||||
height: 100px;
|
||||
width: 150px;
|
||||
width: 145px;
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
@ -243,87 +237,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
.ds-picker-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 13px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.ds-picker-list__item {
|
||||
background: $panel-editor-viz-item-bg;
|
||||
border: $panel-editor-viz-item-border;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
margin-bottom: 3px;
|
||||
padding: 5px 15px;
|
||||
align-items: center;
|
||||
height: 44px;
|
||||
|
||||
&--selected {
|
||||
background: $panel-editor-viz-item-bg-hover;
|
||||
border: $panel-editor-viz-item-border-hover;
|
||||
box-shadow: $panel-editor-viz-item-shadow-hover;
|
||||
}
|
||||
|
||||
&--active {
|
||||
box-shadow: 0 0 6px $orange;
|
||||
border: 1px solid $orange;
|
||||
|
||||
.ds-picker-list__name {
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ds-picker {
|
||||
position: relative;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.ds-picker-menu {
|
||||
min-width: 400px;
|
||||
max-width: 500px;
|
||||
position: absolute;
|
||||
background: $panel-editor-toolbar-view-bg;
|
||||
padding: 5px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.ds-picker-list__name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
font-size: $font-size-md;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.ds-picker-list__img {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.form-option-box {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-option-box__header {
|
||||
border-bottom: 2px solid $dark-4;
|
||||
padding: 5px 0px;
|
||||
font-size: $font-size-md;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
.panel-option-section {
|
||||
margin-bottom: 10px;
|
||||
border: $panel-option-section-border;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.form-section__header {
|
||||
padding: 5px 10px;
|
||||
font-size: $font-size-h5;
|
||||
margin-bottom: 20px;
|
||||
background: $input-label-bg;
|
||||
border-radius: 3px;
|
||||
.panel-option-section__header {
|
||||
padding: 4px 20px;
|
||||
font-size: 1.1rem;
|
||||
background: $panel-option-section-header-bg;
|
||||
position: relative;
|
||||
|
||||
.btn {
|
||||
@ -333,10 +261,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
.form-section__body {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.panel-option-section__body {
|
||||
padding: 20px;
|
||||
background: $page-bg;
|
||||
|
||||
.panel-editor-tabs__item-popover {
|
||||
background: $orange;
|
||||
&--queries {
|
||||
min-height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,6 +13,10 @@
|
||||
color: $orange;
|
||||
}
|
||||
|
||||
.query-editor-rows {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.gf-form-query {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@ -58,6 +58,6 @@
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
font-size: 1.1rem;
|
||||
font-size: $font-size-md;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user