new UseMetricEditor

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<UseMetricConfig>) {
+  const config = value;
+
+  const onFieldChange = (field: keyof UseMetricConfig, value: any) => {
+    // @ts-ignore
+    config[field] = value;
+
+    onChange(config);
+  }
+
+  return (
+    <HorizontalGroup>
+      <InlineField label="Use metric">
+        <InlineSwitch
+          value={config.useMetric}
+          onChange={(evt) => onFieldChange('useMetric', (evt.target as any).checked)}
+        />
+      </InlineField>
+      <InlineField>
+        {config.useMetric ? (
+          <FieldNamePicker
+            context={context}
+            value={config.metricName as string}
+            onChange={(newVal: any) => onFieldChange('metricName', newVal)}
+            item={fieldNamePickerSettings}
+          />
+        ) : (
+          <Input
+            placeholder="value"
+            value={config.value}
+            onChange={(evt) => onFieldChange('value', (evt.target as any).value)}
+          />
+        )}
+      </InlineField>
+    </HorizontalGroup>
+  )
+}

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<PanelOptions>(Panel).setPanelOptions((builder) => {
   return builder
@@ -46,26 +49,22 @@ export const plugin = new PanelPlugin<PanelOptions>(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<PanelOptions>(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<PanelOptions>(Panel).setPanelOptions((buil
       category: ['Direction'],
       showIf: (config) => config.visualizationType === Pod.GAUGE,
     })
+
     .addCustomEditor({
       id: 'icons',
       path: 'gauge.icons',