From 43e0ad3f93c581f185ce501d0200b000f80e58e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 16 Feb 2019 15:12:00 +0100 Subject: [PATCH] Moved gauge value options into a sub oject and made editor more generic, will be moved out of gauge pane later and shared between singlestat, gauge, bargauge, honecomb --- .../dashboard/state/DashboardMigrator.ts | 12 ++++++++++ public/app/plugins/panel/gauge/GaugePanel.tsx | 12 ++++++---- .../plugins/panel/gauge/GaugePanelEditor.tsx | 12 +++++++--- ...eOptions.tsx => SingleStatValueEditor.tsx} | 12 ++++++---- public/app/plugins/panel/gauge/types.ts | 24 ++++++++++++------- 5 files changed, 51 insertions(+), 21 deletions(-) rename public/app/plugins/panel/gauge/{ValueOptions.tsx => SingleStatValueEditor.tsx} (90%) diff --git a/public/app/features/dashboard/state/DashboardMigrator.ts b/public/app/features/dashboard/state/DashboardMigrator.ts index bda139de28f..f1ca944e6ab 100644 --- a/public/app/features/dashboard/state/DashboardMigrator.ts +++ b/public/app/features/dashboard/state/DashboardMigrator.ts @@ -392,6 +392,18 @@ export class DashboardMigrator { panelUpgrades.push(panel => { if (panel['options-gauge']) { panel.options = panel['options-gauge']; + panel.options.valueOptions = { + unit: panel.options.unit, + stat: panel.options.stat, + decimals: panel.options.decimals, + prefix: panel.options.prefix, + suffix: panel.options.suffix, + }; + delete panel.options.unit; + delete panel.options.stat; + delete panel.options.decimals; + delete panel.options.prefix; + delete panel.options.suffix; delete panel['options-gauge']; } }); diff --git a/public/app/plugins/panel/gauge/GaugePanel.tsx b/public/app/plugins/panel/gauge/GaugePanel.tsx index 5cb256ee1aa..eb5aad82ee1 100644 --- a/public/app/plugins/panel/gauge/GaugePanel.tsx +++ b/public/app/plugins/panel/gauge/GaugePanel.tsx @@ -16,9 +16,10 @@ interface Props extends PanelProps {} export class GaugePanel extends PureComponent { render() { const { panelData, width, height, onInterpolate, options } = this.props; + const { valueOptions } = options; - const prefix = onInterpolate(options.prefix); - const suffix = onInterpolate(options.suffix); + const prefix = onInterpolate(valueOptions.prefix); + const suffix = onInterpolate(valueOptions.suffix); let value: TimeSeriesValue; if (panelData.timeSeries) { @@ -28,7 +29,7 @@ export class GaugePanel extends PureComponent { }); if (vmSeries[0]) { - value = vmSeries[0].stats[options.stat]; + value = vmSeries[0].stats[valueOptions.stat]; } else { value = null; } @@ -41,11 +42,14 @@ export class GaugePanel extends PureComponent { {theme => ( )} diff --git a/public/app/plugins/panel/gauge/GaugePanelEditor.tsx b/public/app/plugins/panel/gauge/GaugePanelEditor.tsx index 89b154e80f1..63031f9d895 100644 --- a/public/app/plugins/panel/gauge/GaugePanelEditor.tsx +++ b/public/app/plugins/panel/gauge/GaugePanelEditor.tsx @@ -8,9 +8,9 @@ import { ValueMapping, } from '@grafana/ui'; -import { ValueOptions } from 'app/plugins/panel/gauge/ValueOptions'; +import { SingleStatValueEditor } from 'app/plugins/panel/gauge/SingleStatValueEditor'; import { GaugeOptionsBox } from './GaugeOptionsBox'; -import { GaugeOptions } from './types'; +import { GaugeOptions, SingleStatValueOptions } from './types'; export class GaugePanelEditor extends PureComponent> { onThresholdsChanged = (thresholds: Threshold[]) => @@ -25,13 +25,19 @@ export class GaugePanelEditor extends PureComponent + this.props.onChange({ + ...this.props.options, + valueOptions, + }); + render() { const { onChange, options } = this.props; return ( <> - + diff --git a/public/app/plugins/panel/gauge/ValueOptions.tsx b/public/app/plugins/panel/gauge/SingleStatValueEditor.tsx similarity index 90% rename from public/app/plugins/panel/gauge/ValueOptions.tsx rename to public/app/plugins/panel/gauge/SingleStatValueEditor.tsx index 23c97090bdc..e182f68ddd8 100644 --- a/public/app/plugins/panel/gauge/ValueOptions.tsx +++ b/public/app/plugins/panel/gauge/SingleStatValueEditor.tsx @@ -6,8 +6,7 @@ import UnitPicker from 'app/core/components/Select/UnitPicker'; import { FormField, FormLabel, PanelOptionsGroup, Select } from '@grafana/ui'; // Types -import { GaugeOptions } from './types'; -import { PanelEditorProps } from '@grafana/ui'; +import { SingleStatValueOptions } from './types'; const statOptions = [ { value: 'min', label: 'Min' }, @@ -25,9 +24,13 @@ const statOptions = [ const labelWidth = 6; -export class ValueOptions extends PureComponent> { - onUnitChange = unit => this.props.onChange({ ...this.props.options, unit: unit.value }); +export interface Props { + options: SingleStatValueOptions; + onChange: (valueOptions: SingleStatValueOptions) => void; +} +export class SingleStatValueEditor extends PureComponent { + onUnitChange = unit => this.props.onChange({ ...this.props.options, unit: unit.value }); onStatChange = stat => this.props.onChange({ ...this.props.options, stat: stat.value }); onDecimalChange = event => { @@ -37,7 +40,6 @@ export class ValueOptions extends PureComponent> }; onPrefixChange = event => this.props.onChange({ ...this.props.options, prefix: event.target.value }); - onSuffixChange = event => this.props.onChange({ ...this.props.options, suffix: event.target.value }); render() { diff --git a/public/app/plugins/panel/gauge/types.ts b/public/app/plugins/panel/gauge/types.ts index ff701eb8ed2..4ece1b98c7c 100644 --- a/public/app/plugins/panel/gauge/types.ts +++ b/public/app/plugins/panel/gauge/types.ts @@ -1,29 +1,35 @@ import { Threshold, ValueMapping } from '@grafana/ui'; export interface GaugeOptions { - decimals: number; valueMappings: ValueMapping[]; maxValue: number; minValue: number; - prefix: string; showThresholdLabels: boolean; showThresholdMarkers: boolean; - stat: string; - suffix: string; thresholds: Threshold[]; + valueOptions: SingleStatValueOptions; +} + +export interface SingleStatValueOptions { unit: string; + suffix: string; + stat: string; + prefix: string; + decimals: number; } export const defaults: GaugeOptions = { minValue: 0, maxValue: 100, - prefix: '', showThresholdMarkers: true, showThresholdLabels: false, - suffix: '', - decimals: 0, - stat: 'avg', - unit: 'none', + valueOptions: { + prefix: '', + suffix: '', + decimals: 0, + stat: 'avg', + unit: 'none', + }, valueMappings: [], thresholds: [], };