mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Merge pull request #14849 from grafana/panel-option-section
WIP: Panel option section moved to grafana-ui and new panel option grid
This commit is contained in:
commit
46f2808eaf
@ -0,0 +1,15 @@
|
||||
import React, { SFC } from 'react';
|
||||
|
||||
interface Props {
|
||||
cols?: number;
|
||||
children: JSX.Element[] | JSX.Element;
|
||||
}
|
||||
|
||||
export const PanelOptionsGrid: SFC<Props> = ({ children }) => {
|
||||
|
||||
return (
|
||||
<div className="panel-options-grid">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
@ -0,0 +1,10 @@
|
||||
.panel-options-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
grid-row-gap: 10px;
|
||||
grid-column-gap: 10px;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
@ -7,11 +7,11 @@ interface Props {
|
||||
children: JSX.Element | JSX.Element[];
|
||||
}
|
||||
|
||||
export const PanelOptionSection: SFC<Props> = props => {
|
||||
export const PanelOptionsGroup: SFC<Props> = props => {
|
||||
return (
|
||||
<div className="panel-option-section">
|
||||
<div className="panel-options-group">
|
||||
{props.title && (
|
||||
<div className="panel-option-section__header">
|
||||
<div className="panel-options-group__header">
|
||||
{props.title}
|
||||
{props.onClose && (
|
||||
<button className="btn btn-link" onClick={props.onClose}>
|
||||
@ -20,7 +20,7 @@ export const PanelOptionSection: SFC<Props> = props => {
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="panel-option-section__body">{props.children}</div>
|
||||
<div className="panel-options-group__body">{props.children}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
@ -0,0 +1,27 @@
|
||||
.panel-options-group {
|
||||
margin-bottom: 10px;
|
||||
border: $panel-options-group-border;
|
||||
border-radius: $border-radius;
|
||||
background: $page-bg;
|
||||
}
|
||||
|
||||
.panel-options-group__header {
|
||||
padding: 4px 20px;
|
||||
font-size: 1.1rem;
|
||||
background: $panel-options-group-header-bg;
|
||||
position: relative;
|
||||
|
||||
.btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-options-group__body {
|
||||
padding: 20px;
|
||||
|
||||
&--queries {
|
||||
min-height: 200px;
|
||||
}
|
||||
}
|
@ -3,6 +3,7 @@ import tinycolor, { ColorInput } from 'tinycolor2';
|
||||
|
||||
import { Threshold, BasicGaugeColor } from '../../types';
|
||||
import { ColorPicker } from '../ColorPicker/ColorPicker';
|
||||
import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
|
||||
|
||||
export interface Props {
|
||||
thresholds: Threshold[];
|
||||
@ -204,8 +205,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="section gf-form-group">
|
||||
<h5 className="section-heading">Thresholds</h5>
|
||||
<PanelOptionsGroup title="Thresholds">
|
||||
<div className="thresholds">
|
||||
<div className="color-indicators">
|
||||
{this.renderIndicator()}
|
||||
@ -216,7 +216,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
|
||||
{this.renderBase()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PanelOptionsGroup>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -3,3 +3,5 @@
|
||||
@import 'ThresholdsEditor/ThresholdsEditor';
|
||||
@import 'Tooltip/Tooltip';
|
||||
@import 'Select/Select';
|
||||
@import 'PanelOptionsGroup/PanelOptionsGroup';
|
||||
@import 'PanelOptionsGrid/PanelOptionsGrid';
|
||||
|
@ -16,3 +16,5 @@ export { SeriesColorPicker } from './ColorPicker/SeriesColorPicker';
|
||||
export { ThresholdsEditor } from './ThresholdsEditor/ThresholdsEditor';
|
||||
export { GfFormLabel } from './GfFormLabel/GfFormLabel';
|
||||
export { Graph } from './Graph/Graph';
|
||||
export { PanelOptionsGroup } from './PanelOptionsGroup/PanelOptionsGroup';
|
||||
export { PanelOptionsGrid } from './PanelOptionsGrid/PanelOptionsGrid';
|
||||
|
@ -2,8 +2,8 @@
|
||||
<div class="alert alert-error m-b-2" ng-show="ctrl.error">
|
||||
<i class="fa fa-warning"></i> {{ctrl.error}}
|
||||
</div>
|
||||
<div class="panel-option-section">
|
||||
<div class="panel-option-section__body">
|
||||
<div class="panel-options-group">
|
||||
<div class="panel-options-group__body">
|
||||
<div class="gf-form-group">
|
||||
<h4 class="section-heading">Rule</h4>
|
||||
<div class="gf-form-inline">
|
||||
@ -125,9 +125,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-option-section">
|
||||
<div class="panel-option-section__header">Notifications</div>
|
||||
<div class="panel-option-section__body">
|
||||
<div class="panel-options-group">
|
||||
<div class="panel-options-group__header">Notifications</div>
|
||||
<div class="panel-options-group__body">
|
||||
<div class="gf-form-inline">
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-8">Send to</span>
|
||||
|
@ -2,9 +2,8 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
|
||||
// Components
|
||||
import { CustomScrollbar } from '@grafana/ui';
|
||||
import { CustomScrollbar, PanelOptionsGroup } from '@grafana/ui';
|
||||
import { FadeIn } from 'app/core/components/Animations/FadeIn';
|
||||
import { PanelOptionSection } from './PanelOptionSection';
|
||||
|
||||
interface Props {
|
||||
children: JSX.Element;
|
||||
@ -97,9 +96,9 @@ export class EditorTabBody extends PureComponent<Props, State> {
|
||||
|
||||
renderOpenView(view: EditorToolbarView) {
|
||||
return (
|
||||
<PanelOptionSection title={view.title || view.heading} onClose={this.onCloseOpenView}>
|
||||
<PanelOptionsGroup title={view.title || view.heading} onClose={this.onCloseOpenView}>
|
||||
{view.render()}
|
||||
</PanelOptionSection>
|
||||
</PanelOptionsGroup>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -9,7 +9,7 @@ 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';
|
||||
import { PanelOptionsGroup } from '@grafana/ui';
|
||||
|
||||
// Services
|
||||
import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
|
||||
@ -216,7 +216,7 @@ export class QueriesTab extends PureComponent<Props, State> {
|
||||
return (
|
||||
<EditorTabBody heading="Queries" renderToolbar={this.renderToolbar} toolbarItems={[queryInspector, dsHelp]}>
|
||||
<>
|
||||
<PanelOptionSection>
|
||||
<PanelOptionsGroup>
|
||||
<div className="query-editor-rows">
|
||||
<div ref={element => (this.element = element)} />
|
||||
|
||||
@ -239,10 +239,10 @@ export class QueriesTab extends PureComponent<Props, State> {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PanelOptionSection>
|
||||
<PanelOptionSection>
|
||||
</PanelOptionsGroup>
|
||||
<PanelOptionsGroup>
|
||||
<QueryOptions panel={panel} datasource={currentDS} />
|
||||
</PanelOptionSection>
|
||||
</PanelOptionsGroup>
|
||||
</>
|
||||
</EditorTabBody>
|
||||
);
|
||||
|
@ -9,7 +9,6 @@ import { EditorTabBody, EditorToolbarView } 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';
|
||||
@ -62,13 +61,13 @@ export class VisualizationTab extends PureComponent<Props, State> {
|
||||
}
|
||||
|
||||
return (
|
||||
<PanelOptionSection>
|
||||
<>
|
||||
{PanelOptions ? (
|
||||
<PanelOptions options={this.getPanelDefaultOptions()} onChange={this.onPanelOptionsChanged} />
|
||||
) : (
|
||||
<p>Visualization has no options</p>
|
||||
)}
|
||||
</PanelOptionSection>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -112,9 +111,9 @@ export class VisualizationTab extends PureComponent<Props, State> {
|
||||
for (let i = 0; i < panelCtrl.editorTabs.length; i++) {
|
||||
template +=
|
||||
`
|
||||
<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">
|
||||
<div class="panel-options-group" ng-cloak>` +
|
||||
(i > 0 ? `<div class="panel-options-group__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') +
|
||||
`<div class="panel-options-group__body">
|
||||
<panel-editor-tab editor-tab="ctrl.editorTabs[${i}]" ctrl="ctrl"></panel-editor-tab>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,6 +1,6 @@
|
||||
<div class="panel-option-section">
|
||||
<div class="panel-options-group">
|
||||
<!-- <div class="panel-option-section__header">Information</div> -->
|
||||
<div class="panel-option-section__body">
|
||||
<div class="panel-options-group__body">
|
||||
<div class="section">
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-7">Title</span>
|
||||
@ -17,9 +17,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-option-section">
|
||||
<div class="panel-option-section__header">Repeating</div>
|
||||
<div class="panel-option-section__body">
|
||||
<div class="panel-options-group">
|
||||
<div class="panel-options-group__header">Repeating</div>
|
||||
<div class="panel-options-group__body">
|
||||
<div class="section">
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-9">Repeat</span>
|
||||
@ -46,9 +46,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-option-section">
|
||||
<div class="panel-option-section__header">Drilldown Links</div>
|
||||
<div class="panel-option-section__body">
|
||||
<div class="panel-options-group">
|
||||
<div class="panel-options-group__header">Drilldown Links</div>
|
||||
<div class="panel-options-group__body">
|
||||
<panel-links-editor panel="ctrl.panel"></panel-links-editor>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { GaugeOptions, PanelOptionsProps } from '@grafana/ui';
|
||||
import { GaugeOptions, PanelOptionsProps, PanelOptionsGroup } from '@grafana/ui';
|
||||
|
||||
import { Switch } from 'app/core/components/Switch/Switch';
|
||||
import { Label } from '../../../core/components/Label/Label';
|
||||
@ -20,8 +20,7 @@ export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<
|
||||
const { maxValue, minValue, showThresholdLabels, showThresholdMarkers } = options;
|
||||
|
||||
return (
|
||||
<div className="section gf-form-group">
|
||||
<h5 className="section-heading">Gauge</h5>
|
||||
<PanelOptionsGroup title="Gauge">
|
||||
<div className="gf-form">
|
||||
<Label width={8}>Min value</Label>
|
||||
<input type="text" className="gf-form-input width-12" onChange={this.onMinValueChange} value={minValue} />
|
||||
@ -42,7 +41,7 @@ export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<
|
||||
checked={showThresholdMarkers}
|
||||
onChange={this.onToggleThresholdMarkers}
|
||||
/>
|
||||
</div>
|
||||
</PanelOptionsGroup>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -1,5 +1,12 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { BasicGaugeColor, GaugeOptions, PanelOptionsProps, ThresholdsEditor, Threshold } from '@grafana/ui';
|
||||
import {
|
||||
BasicGaugeColor,
|
||||
GaugeOptions,
|
||||
PanelOptionsProps,
|
||||
ThresholdsEditor,
|
||||
Threshold,
|
||||
PanelOptionsGrid,
|
||||
} from '@grafana/ui';
|
||||
|
||||
import ValueOptions from 'app/plugins/panel/gauge/ValueOptions';
|
||||
import ValueMappings from 'app/plugins/panel/gauge/ValueMappings';
|
||||
@ -31,15 +38,13 @@ export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<G
|
||||
const { onChange, options } = this.props;
|
||||
return (
|
||||
<>
|
||||
<div className="form-section">
|
||||
<PanelOptionsGrid>
|
||||
<ValueOptions onChange={onChange} options={options} />
|
||||
<GaugeOptionsEditor onChange={onChange} options={options} />
|
||||
<ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={options.thresholds} />
|
||||
</div>
|
||||
</PanelOptionsGrid>
|
||||
|
||||
<div className="form-section">
|
||||
<ValueMappings onChange={onChange} options={options} />
|
||||
</div>
|
||||
<ValueMappings onChange={onChange} options={options} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { GaugeOptions, PanelOptionsProps, MappingType, RangeMap, ValueMap } from '@grafana/ui';
|
||||
import { GaugeOptions, PanelOptionsProps, MappingType, RangeMap, ValueMap, PanelOptionsGroup } from '@grafana/ui';
|
||||
|
||||
import MappingRow from './MappingRow';
|
||||
|
||||
@ -75,8 +75,7 @@ export default class ValueMappings extends PureComponent<PanelOptionsProps<Gauge
|
||||
const { mappings } = this.state;
|
||||
|
||||
return (
|
||||
<div className="section gf-form-group">
|
||||
<h5 className="section-heading">Value mappings</h5>
|
||||
<PanelOptionsGroup title="Value Mappings">
|
||||
<div>
|
||||
{mappings.length > 0 &&
|
||||
mappings.map((mapping, index) => (
|
||||
@ -94,7 +93,7 @@ export default class ValueMappings extends PureComponent<PanelOptionsProps<Gauge
|
||||
</div>
|
||||
<div className="add-mapping-row-label">Add mapping</div>
|
||||
</div>
|
||||
</div>
|
||||
</PanelOptionsGroup>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { GaugeOptions, PanelOptionsProps } from '@grafana/ui';
|
||||
import { GaugeOptions, PanelOptionsProps, PanelOptionsGroup } from '@grafana/ui';
|
||||
|
||||
import { Label } from 'app/core/components/Label/Label';
|
||||
import { Select} from '@grafana/ui';
|
||||
@ -40,8 +40,7 @@ export default class ValueOptions extends PureComponent<PanelOptionsProps<GaugeO
|
||||
const { stat, unit, decimals, prefix, suffix } = this.props.options;
|
||||
|
||||
return (
|
||||
<div className="section gf-form-group">
|
||||
<h5 className="section-heading">Value</h5>
|
||||
<PanelOptionsGroup title="Value">
|
||||
<div className="gf-form">
|
||||
<Label width={labelWidth}>Stat</Label>
|
||||
<Select
|
||||
@ -73,7 +72,7 @@ export default class ValueOptions extends PureComponent<PanelOptionsProps<GaugeO
|
||||
<Label width={labelWidth}>Suffix</Label>
|
||||
<input className="gf-form-input width-12" type="text" value={suffix || ''} onChange={this.onSuffixChange} />
|
||||
</div>
|
||||
</div>
|
||||
</PanelOptionsGroup>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -1,14 +1,9 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Render should render component 1`] = `
|
||||
<div
|
||||
className="section gf-form-group"
|
||||
<Component
|
||||
title="Value Mappings"
|
||||
>
|
||||
<h5
|
||||
className="section-heading"
|
||||
>
|
||||
Value mappings
|
||||
</h5>
|
||||
<div>
|
||||
<MappingRow
|
||||
key="Ok-0"
|
||||
@ -57,5 +52,5 @@ exports[`Render should render component 1`] = `
|
||||
Add mapping
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Component>
|
||||
`;
|
||||
|
2
public/app/plugins/panel/gauge/types.ts
Normal file
2
public/app/plugins/panel/gauge/types.ts
Normal file
@ -0,0 +1,2 @@
|
||||
|
||||
|
@ -391,8 +391,8 @@ $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-options-group-border: 1px solid $dark-3;
|
||||
$panel-options-group-header-bg: linear-gradient(0deg, $gray-blue, $dark-1);
|
||||
|
||||
$panel-grid-placeholder-bg: darken($blue, 47%);
|
||||
$panel-grid-placeholder-shadow: 0 0 4px $blue;
|
||||
|
@ -399,8 +399,8 @@ $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-options-group-border: 1px solid $gray-6;
|
||||
$panel-options-group-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;
|
||||
|
@ -230,30 +230,3 @@
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.panel-option-section {
|
||||
margin-bottom: 10px;
|
||||
border: $panel-option-section-border;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.panel-option-section__header {
|
||||
padding: 4px 20px;
|
||||
font-size: 1.1rem;
|
||||
background: $panel-option-section-header-bg;
|
||||
position: relative;
|
||||
|
||||
.btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-option-section__body {
|
||||
padding: 20px;
|
||||
background: $page-bg;
|
||||
|
||||
&--queries {
|
||||
min-height: 200px;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user