diff --git a/src/components/editors/UseMetricEditor.tsx b/src/components/editors/UseMetricEditor.tsx new file mode 100644 index 0000000..37f7de0 --- /dev/null +++ b/src/components/editors/UseMetricEditor.tsx @@ -0,0 +1,62 @@ +import { FieldNamePicker } from '../../grafana/MatchersUI/FieldNamePicker'; + +import { StandardEditorProps } from '@grafana/data'; +import { + HorizontalGroup, + InlineField, + InlineSwitch, + Input, +} from '@grafana/ui'; + +import React from 'react'; + +import * as _ from 'lodash'; + + +type UseMetricConfig = { + useMetric: boolean; + value?: number; + metricName?: string; +}; + +const fieldNamePickerSettings = { + settings: { width: 24 }, +} as any; + +export function UseMetricEditor({ onChange, value, context }: StandardEditorProps) { + const config = value; + + const onFieldChange = (field: keyof UseMetricConfig, value: any) => { + // @ts-ignore + config[field] = value; + + onChange(config); + } + + return ( + + + onFieldChange('useMetric', (evt.target as any).checked)} + /> + + + {config.useMetric ? ( + onFieldChange('metricName', newVal)} + item={fieldNamePickerSettings} + /> + ) : ( + onFieldChange('value', (evt.target as any).value)} + /> + )} + + + ) +} diff --git a/src/module.ts b/src/module.ts index 18f561e..af79332 100644 --- a/src/module.ts +++ b/src/module.ts @@ -1,11 +1,14 @@ import { PanelOptions, Pod } from './types'; import { Panel } from './components/Panel'; + import { IconsEditor } from './components/editors/IconsEditor'; import { ThresholdsEditor } from './components/editors/ThresholdsEditor'; +import { NotSupportedText } from './components/editors/NotSupportedText'; +import { UseMetricEditor } from './components/editors/UseMetricEditor'; import { PanelPlugin } from '@grafana/data'; -import { NotSupportedText } from 'components/editors/NotSupportedText'; + export const plugin = new PanelPlugin(Panel).setPanelOptions((builder) => { return builder @@ -46,26 +49,22 @@ export const plugin = new PanelPlugin(Panel).setPanelOptions((buil category: ['Extremum'], showIf: (config) => config.visualizationType === Pod.GAUGE, }) - - .addNumberInput({ - path: 'gauge.min.value', - name: 'Min', - category: ['Extremum'], - showIf: (config) => config.visualizationType === Pod.GAUGE && !config.gauge.min.useMetric, - }) - // TODO: move these 2 editors into one-row custom editor - .addFieldNamePicker({ + // TODO: defaults? + .addCustomEditor({ + id: 'min', name: 'Min', - path: 'gauge.min.metricName', + path: 'gauge.min', category: ['Extremum'], - showIf: (config) => config.visualizationType === Pod.GAUGE && config.gauge.min.useMetric, - }) - .addBooleanSwitch({ - path: 'gauge.min.useMetric', - name: 'Use metric', - defaultValue: false, + showIf: (config) => config.visualizationType === Pod.GAUGE, + editor: UseMetricEditor as any, + }). + addCustomEditor({ + id: 'max', + name: 'Max', + path: 'gauge.max', category: ['Extremum'], showIf: (config) => config.visualizationType === Pod.GAUGE, + editor: UseMetricEditor as any, }) // note: `gauge.unit` will contain unit name, not it's string representation @@ -99,25 +98,6 @@ export const plugin = new PanelPlugin(Panel).setPanelOptions((buil showIf: (config) => config.visualizationType === Pod.GAUGE, }) - .addNumberInput({ - path: 'gauge.max.value', - name: 'Max', - category: ['Extremum'], - showIf: (config) => config.visualizationType === Pod.GAUGE && !config.gauge.max.useMetric, - }) - .addFieldNamePicker({ - name: 'Max', - path: 'gauge.max.metricName', - category: ['Extremum'], - showIf: (config) => config.visualizationType === Pod.GAUGE && config.gauge.max.useMetric, - }) - .addBooleanSwitch({ - path: 'gauge.max.useMetric', - name: 'Use metric', - defaultValue: false, - category: ['Extremum'], - showIf: (config) => config.visualizationType === Pod.GAUGE, - }) .addBooleanSwitch({ path: 'gauge.reversed', name: 'Reversed', @@ -125,6 +105,7 @@ export const plugin = new PanelPlugin(Panel).setPanelOptions((buil category: ['Direction'], showIf: (config) => config.visualizationType === Pod.GAUGE, }) + .addCustomEditor({ id: 'icons', path: 'gauge.icons',