From 5b3db23b9a0c9b49e123c1b6edbc2fa699aa6443 Mon Sep 17 00:00:00 2001
From: rozetko <rozetko@corpglory.com>
Date: Tue, 10 May 2022 17:16:24 +0400
Subject: [PATCH 1/7] thresholds styles

---
 src/components/editors/ThresholdsEditor.tsx | 24 +++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/editors/ThresholdsEditor.tsx b/src/components/editors/ThresholdsEditor.tsx
index 3b0a8c8..08bd027 100644
--- a/src/components/editors/ThresholdsEditor.tsx
+++ b/src/components/editors/ThresholdsEditor.tsx
@@ -1,6 +1,6 @@
 import { FieldNamePicker } from '../../grafana/MatchersUI/FieldNamePicker';
 
-import { StandardEditorProps } from '@grafana/data';
+import { GrafanaTheme, StandardEditorProps } from '@grafana/data';
 import {
   Button,
   ColorPicker,
@@ -9,11 +9,13 @@ import {
   InlineField,
   InlineSwitch,
   Input,
+  stylesFactory,
   ThemeContext,
 } from '@grafana/ui';
 
 import React from 'react';
 
+import { css } from 'emotion';
 import * as _ from 'lodash';
 
 interface Props {
@@ -65,11 +67,12 @@ export function ThresholdsEditor({ onChange, value, context }: StandardEditorPro
 
   return (
     <ThemeContext.Consumer>
-      {() => {
-        // const styles = getStyles(theme.v1);
+      {(theme) => {
+        const styles = getStyles(theme.v1);
         return (
           <div>
             <Input
+              className={styles.row}
               type="text"
               value={'Default Gauge Color'}
               disabled
@@ -84,6 +87,7 @@ export function ThresholdsEditor({ onChange, value, context }: StandardEditorPro
               }
             />
             <Input
+              className={styles.row}
               type="text"
               value={'Arc Background'}
               disabled
@@ -99,7 +103,7 @@ export function ThresholdsEditor({ onChange, value, context }: StandardEditorPro
             />
             {config.thresholds.map((threshold, thresholdIdx) => {
               return (
-                <HorizontalGroup key={thresholdIdx}>
+                <HorizontalGroup key={thresholdIdx} className={styles.row}>
                   <Input
                     type="text"
                     value={'Color'}
@@ -147,3 +151,15 @@ export function ThresholdsEditor({ onChange, value, context }: StandardEditorPro
     </ThemeContext.Consumer>
   );
 }
+
+interface ThresholdsEditorStyles {
+  row: string;
+}
+
+const getStyles = stylesFactory((theme: GrafanaTheme): ThresholdsEditorStyles => {
+  return {
+    row: css`
+      margin-bottom: ${theme.spacing.sm};
+    `,
+  };
+});

From c450a4150e08bbac7f7f9f93be236c9b4e7d56d9 Mon Sep 17 00:00:00 2001
From: rozetko <rozetko@corpglory.com>
Date: Tue, 10 May 2022 17:30:42 +0400
Subject: [PATCH 2/7] more styles

---
 src/components/editors/IconsEditor.tsx      | 102 ++++++++++++--------
 src/components/editors/ThresholdsEditor.tsx |   8 +-
 2 files changed, 68 insertions(+), 42 deletions(-)

diff --git a/src/components/editors/IconsEditor.tsx b/src/components/editors/IconsEditor.tsx
index ac6b6ee..db64e56 100644
--- a/src/components/editors/IconsEditor.tsx
+++ b/src/components/editors/IconsEditor.tsx
@@ -121,7 +121,6 @@ export function IconsEditor({ onChange, value, context }: StandardEditorProps<Ic
   };
 
   const onConditionChange = (iconIdx: number, conditionIdx: number, field: keyof IconConfig, value: any) => {
-    console.log(value);
     // @ts-ignore
     icons[iconIdx][field][conditionIdx] = value;
 
@@ -138,52 +137,63 @@ export function IconsEditor({ onChange, value, context }: StandardEditorProps<Ic
               {icons.map((icon, iconIdx) => {
                 return (
                   <div key={iconIdx} className={styles.icon}>
-                    <IconButton name="trash-alt" onClick={() => removeIcon(iconIdx)}></IconButton>
-                    <Input
-                      type="url"
-                      placeholder="Image URL"
-                      value={icon.url}
-                      onChange={(evt) => onIconFieldChange(iconIdx, 'url', (evt.target as any).value)}
-                    />
+                    <IconButton 
+                      name="trash-alt" 
+                      onClick={() => removeIcon(iconIdx)}
+                      tooltip="Delete Icon"
+                    ></IconButton>
+                    <div className={styles.row}>
+                      <Input
+                        type="url"
+                        placeholder="Image URL"
+                        value={icon.url}
+                        onChange={(evt) => onIconFieldChange(iconIdx, 'url', (evt.target as any).value)}
+                      />
+                    </div>
                     <RadioButtonGroup
                       value={icon.position}
                       options={positionOptions}
                       onChange={(newVal) => onIconFieldChange(iconIdx, 'position', newVal)}
                     />
-                    <Slider
-                      value={icon.size}
-                      min={1}
-                      max={100}
-                      step={1}
-                      onAfterChange={(newVal) => onIconFieldChange(iconIdx, 'size', newVal)}
-                    />
+                    <div className={styles.slider}>
+                      <Slider
+                        value={icon.size}
+                        min={1}
+                        max={100}
+                        step={1}
+                        onAfterChange={(newVal) => onIconFieldChange(iconIdx, 'size', newVal)}
+                      />
+                    </div>
 
                     {icon.conditions.map((condition, conditionIdx) => {
                       return (
-                        <HorizontalGroup key={conditionIdx}>
-                          <FieldNamePicker
-                            context={context}
-                            value={icon.metrics[conditionIdx]}
-                            onChange={(newVal: any) => onConditionChange(iconIdx, conditionIdx, 'metrics', newVal)}
-                            item={fieldNamePickerSettings}
-                          />
-                          <RadioButtonGroup
-                            value={icon.conditions[conditionIdx]}
-                            options={conditionOptions}
-                            onChange={(newVal) => onConditionChange(iconIdx, conditionIdx, 'conditions', newVal)}
-                          />
-                          <Input
-                            placeholder="value"
-                            value={icon.values[conditionIdx]}
-                            onChange={(evt) =>
-                              onConditionChange(iconIdx, conditionIdx, 'values', (evt.target as any).value)
-                            }
-                          />
-                          <IconButton
-                            name="trash-alt"
-                            onClick={() => removeCondition(iconIdx, conditionIdx)}
-                          ></IconButton>
-                        </HorizontalGroup>
+                        <div className={styles.condition}>
+                          <HorizontalGroup key={conditionIdx} >
+                            <FieldNamePicker
+                              context={context}
+                              value={icon.metrics[conditionIdx]}
+                              onChange={(newVal: any) => onConditionChange(iconIdx, conditionIdx, 'metrics', newVal)}
+                              item={fieldNamePickerSettings}
+                            />
+                            <RadioButtonGroup
+                              value={icon.conditions[conditionIdx]}
+                              options={conditionOptions}
+                              onChange={(newVal) => onConditionChange(iconIdx, conditionIdx, 'conditions', newVal)}
+                            />
+                            <Input
+                              placeholder="value"
+                              value={icon.values[conditionIdx]}
+                              onChange={(evt) =>
+                                onConditionChange(iconIdx, conditionIdx, 'values', (evt.target as any).value)
+                              }
+                            />
+                            <IconButton
+                              name="trash-alt"
+                              onClick={() => removeCondition(iconIdx, conditionIdx)}
+                              tooltip="Delete Condition"
+                            ></IconButton>
+                          </HorizontalGroup>
+                        </div>
                       );
                     })}
                     <Button variant="secondary" onClick={() => addCondition(iconIdx)}>
@@ -206,6 +216,9 @@ export function IconsEditor({ onChange, value, context }: StandardEditorProps<Ic
 interface IconsEditorStyles {
   icons: string;
   icon: string;
+  condition: string;
+  slider: string;
+  row: string;
 }
 
 const getStyles = stylesFactory((theme: GrafanaTheme): IconsEditorStyles => {
@@ -221,9 +234,18 @@ const getStyles = stylesFactory((theme: GrafanaTheme): IconsEditorStyles => {
       padding-bottom: ${theme.spacing.formSpacingBase * 2}px;
 
       &:last-child {
-        border: none;
         margin-bottom: 0;
       }
     `,
+    condition: css`
+      margin-bottom: ${theme.spacing.xxs};
+    `,
+    slider: css`
+      padding-bottom: 0;
+    `,
+    row: css`
+      margin-bottom: ${theme.spacing.sm};
+    `,
   };
+
 });
diff --git a/src/components/editors/ThresholdsEditor.tsx b/src/components/editors/ThresholdsEditor.tsx
index 08bd027..447128b 100644
--- a/src/components/editors/ThresholdsEditor.tsx
+++ b/src/components/editors/ThresholdsEditor.tsx
@@ -103,7 +103,7 @@ export function ThresholdsEditor({ onChange, value, context }: StandardEditorPro
             />
             {config.thresholds.map((threshold, thresholdIdx) => {
               return (
-                <HorizontalGroup key={thresholdIdx} className={styles.row}>
+                <HorizontalGroup key={thresholdIdx}>
                   <Input
                     type="text"
                     value={'Color'}
@@ -138,7 +138,11 @@ export function ThresholdsEditor({ onChange, value, context }: StandardEditorPro
                       onChange={(evt) => onThresholdFieldChange(thresholdIdx, 'value', (evt.target as any).value)}
                     />
                   )}
-                  <IconButton name="trash-alt" onClick={() => removeThreshold(thresholdIdx)}></IconButton>
+                  <IconButton 
+                    name="trash-alt" 
+                    onClick={() => removeThreshold(thresholdIdx)}
+                    tooltip="Delete Threshold"
+                  ></IconButton>
                 </HorizontalGroup>
               );
             })}

From 9d6abbb424e00bd569a6281088830396207f8051 Mon Sep 17 00:00:00 2001
From: rozetko <rozetko@corpglory.com>
Date: Tue, 10 May 2022 17:56:19 +0400
Subject: [PATCH 3/7] pretty styles

---
 src/components/editors/IconsEditor.tsx      |   2 +-
 src/components/editors/ThresholdsEditor.tsx | 124 +++++++++-----------
 2 files changed, 59 insertions(+), 67 deletions(-)

diff --git a/src/components/editors/IconsEditor.tsx b/src/components/editors/IconsEditor.tsx
index db64e56..9aee9cd 100644
--- a/src/components/editors/IconsEditor.tsx
+++ b/src/components/editors/IconsEditor.tsx
@@ -241,7 +241,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme): IconsEditorStyles => {
       margin-bottom: ${theme.spacing.xxs};
     `,
     slider: css`
-      padding-bottom: 0;
+      padding-bottom: ${theme.spacing.xxs};
     `,
     row: css`
       margin-bottom: ${theme.spacing.sm};
diff --git a/src/components/editors/ThresholdsEditor.tsx b/src/components/editors/ThresholdsEditor.tsx
index 447128b..358a3e2 100644
--- a/src/components/editors/ThresholdsEditor.tsx
+++ b/src/components/editors/ThresholdsEditor.tsx
@@ -7,6 +7,7 @@ import {
   HorizontalGroup,
   IconButton,
   InlineField,
+  InlineLabel,
   InlineSwitch,
   Input,
   stylesFactory,
@@ -18,6 +19,7 @@ import React from 'react';
 import { css } from 'emotion';
 import * as _ from 'lodash';
 
+
 interface Props {
   defaultColor: string;
   arcBackground: string;
@@ -71,78 +73,68 @@ export function ThresholdsEditor({ onChange, value, context }: StandardEditorPro
         const styles = getStyles(theme.v1);
         return (
           <div>
-            <Input
-              className={styles.row}
-              type="text"
-              value={'Default Gauge Color'}
-              disabled
-              prefix={
-                <div>
-                  <ColorPicker
-                    color={config.defaultColor}
-                    onChange={(val) => onFieldChange('defaultColor', val)}
-                    enableNamedColors={true}
-                  />
-                </div>
-              }
-            />
-            <Input
-              className={styles.row}
-              type="text"
-              value={'Arc Background'}
-              disabled
-              prefix={
-                <div>
-                  <ColorPicker
-                    color={config.arcBackground}
-                    onChange={(val) => onFieldChange('arcBackground', val)}
-                    enableNamedColors={true}
-                  />
-                </div>
-              }
-            />
+            <InlineField label="Default Gauge Color">
+              <InlineLabel>
+                <ColorPicker
+                  color={config.defaultColor}
+                  onChange={(val) => onFieldChange('defaultColor', val)}
+                  enableNamedColors={true}
+                />
+              </InlineLabel>
+            </InlineField>
+
+            <InlineField label="Arc Background">
+              <InlineLabel>
+                <ColorPicker
+                  color={config.arcBackground}
+                  onChange={(val) => onFieldChange('arcBackground', val)}
+                  enableNamedColors={true}
+                />
+              </InlineLabel>
+            </InlineField>
             {config.thresholds.map((threshold, thresholdIdx) => {
               return (
                 <HorizontalGroup key={thresholdIdx}>
-                  <Input
-                    type="text"
-                    value={'Color'}
-                    disabled
-                    prefix={
-                      <div>
-                        <ColorPicker
-                          color={threshold.color}
-                          onChange={(newVal) => onThresholdFieldChange(thresholdIdx, 'color', newVal)}
-                          enableNamedColors={true}
-                        />
-                      </div>
-                    }
-                  />
                   <InlineField label="Use metric">
                     <InlineSwitch
                       value={threshold.useMetric}
                       onChange={(evt) => onThresholdFieldChange(thresholdIdx, 'useMetric', (evt.target as any).checked)}
                     />
                   </InlineField>
-                  {threshold.useMetric ? (
-                    <FieldNamePicker
-                      context={context}
-                      value={threshold.metricName as string}
-                      onChange={(newVal: any) => onThresholdFieldChange(thresholdIdx, 'metricName', newVal)}
-                      item={fieldNamePickerSettings}
-                    />
-                  ) : (
-                    <Input
-                      placeholder="value"
-                      value={threshold.value}
-                      onChange={(evt) => onThresholdFieldChange(thresholdIdx, 'value', (evt.target as any).value)}
-                    />
-                  )}
-                  <IconButton 
-                    name="trash-alt" 
-                    onClick={() => removeThreshold(thresholdIdx)}
-                    tooltip="Delete Threshold"
-                  ></IconButton>
+                  <InlineField>
+                    {threshold.useMetric ? (
+                      <FieldNamePicker
+                        context={context}
+                        value={threshold.metricName as string}
+                        onChange={(newVal: any) => onThresholdFieldChange(thresholdIdx, 'metricName', newVal)}
+                        item={fieldNamePickerSettings}
+                      />
+                    ) : (
+                      <Input
+                        placeholder="value"
+                        value={threshold.value}
+                        onChange={(evt) => onThresholdFieldChange(thresholdIdx, 'value', (evt.target as any).value)}
+                      />
+                    )}
+                  </InlineField>
+                  <InlineField label="Color">
+                    <InlineLabel>
+                      <ColorPicker
+                        color={threshold.color}
+                        onChange={(newVal) => onThresholdFieldChange(thresholdIdx, 'color', newVal)}
+                        enableNamedColors={true}
+                      />
+                    </InlineLabel>
+                  </InlineField>
+                  <InlineField>
+                    <InlineLabel width={0} className={styles.deleteButton}>
+                      <IconButton
+                        name="trash-alt"
+                        onClick={() => removeThreshold(thresholdIdx)}
+                        tooltip="Delete Threshold"
+                      ></IconButton>
+                    </InlineLabel>
+                  </InlineField>
                 </HorizontalGroup>
               );
             })}
@@ -157,13 +149,13 @@ export function ThresholdsEditor({ onChange, value, context }: StandardEditorPro
 }
 
 interface ThresholdsEditorStyles {
-  row: string;
+  deleteButton: string;
 }
 
 const getStyles = stylesFactory((theme: GrafanaTheme): ThresholdsEditorStyles => {
   return {
-    row: css`
-      margin-bottom: ${theme.spacing.sm};
+    deleteButton: css`
+      margin-right: 0px!important;
     `,
   };
 });

From 05e1cf33e6beef1d0c3fb420beaae0be336e8164 Mon Sep 17 00:00:00 2001
From: rozetko <rozetko@corpglory.com>
Date: Tue, 10 May 2022 18:02:46 +0400
Subject: [PATCH 4/7] "To be supported" for non-gauge visualizations

---
 src/components/editors/NotSupportedText.tsx |  5 +++++
 src/module.ts                               | 12 +++++++++---
 2 files changed, 14 insertions(+), 3 deletions(-)
 create mode 100644 src/components/editors/NotSupportedText.tsx

diff --git a/src/components/editors/NotSupportedText.tsx b/src/components/editors/NotSupportedText.tsx
new file mode 100644
index 0000000..22c4432
--- /dev/null
+++ b/src/components/editors/NotSupportedText.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export function NotSupportedText() {
+  return <div>To be supported soon...</div>
+}
diff --git a/src/module.ts b/src/module.ts
index e366a4a..ce2912e 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -5,6 +5,7 @@ import { IconsEditor } from './components/editors/IconsEditor';
 import { ThresholdsEditor } from './components/editors/ThresholdsEditor';
 
 import { PanelPlugin } from '@grafana/data';
+import { NotSupportedText } from 'components/editors/NotSupportedText';
 
 export const plugin = new PanelPlugin<PanelOptions>(Panel).setPanelOptions((builder) => {
   return builder
@@ -18,21 +19,26 @@ export const plugin = new PanelPlugin<PanelOptions>(Panel).setPanelOptions((buil
           {
             label: 'Gauge',
             value: Pod.GAUGE,
-            description: 'Enable gauge pod',
           },
           {
             label: 'Line',
             value: Pod.LINE,
-            description: 'Enable line pod',
           },
           {
             label: 'Bar',
             value: Pod.BAR,
-            description: 'Enable bar pod',
           },
         ],
       },
     })
+    .addCustomEditor({
+      id: 'notSupportedText',
+      name: 'This visualization is not supported',
+      category: ['Visualization'],
+      path: '',
+      showIf: (config) => config.visualizationType !== Pod.GAUGE,
+      editor: NotSupportedText as any,
+    })
 
     .addFieldNamePicker({
       name: 'Value',

From 44bcfcac852e8f267b399318f61def66d45f3ea4 Mon Sep 17 00:00:00 2001
From: rozetko <rozetko@corpglory.com>
Date: Tue, 10 May 2022 18:10:57 +0400
Subject: [PATCH 5/7] disable named colors

---
 src/components/editors/ThresholdsEditor.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/editors/ThresholdsEditor.tsx b/src/components/editors/ThresholdsEditor.tsx
index 358a3e2..f31df00 100644
--- a/src/components/editors/ThresholdsEditor.tsx
+++ b/src/components/editors/ThresholdsEditor.tsx
@@ -78,7 +78,7 @@ export function ThresholdsEditor({ onChange, value, context }: StandardEditorPro
                 <ColorPicker
                   color={config.defaultColor}
                   onChange={(val) => onFieldChange('defaultColor', val)}
-                  enableNamedColors={true}
+                  enableNamedColors={false}
                 />
               </InlineLabel>
             </InlineField>
@@ -88,7 +88,7 @@ export function ThresholdsEditor({ onChange, value, context }: StandardEditorPro
                 <ColorPicker
                   color={config.arcBackground}
                   onChange={(val) => onFieldChange('arcBackground', val)}
-                  enableNamedColors={true}
+                  enableNamedColors={false}
                 />
               </InlineLabel>
             </InlineField>
@@ -122,7 +122,7 @@ export function ThresholdsEditor({ onChange, value, context }: StandardEditorPro
                       <ColorPicker
                         color={threshold.color}
                         onChange={(newVal) => onThresholdFieldChange(thresholdIdx, 'color', newVal)}
-                        enableNamedColors={true}
+                        enableNamedColors={false}
                       />
                     </InlineLabel>
                   </InlineField>

From c6b93ef3c01bef429b7d30ee7a622cc41083f5df Mon Sep 17 00:00:00 2001
From: rozetko <rozetko@corpglory.com>
Date: Tue, 10 May 2022 18:21:02 +0400
Subject: [PATCH 6/7] all options

---
 src/module.ts | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/module.ts b/src/module.ts
index ce2912e..18f561e 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -53,6 +53,7 @@ export const plugin = new PanelPlugin<PanelOptions>(Panel).setPanelOptions((buil
       category: ['Extremum'],
       showIf: (config) => config.visualizationType === Pod.GAUGE && !config.gauge.min.useMetric,
     })
+    // TODO: move these 2 editors into one-row custom editor
     .addFieldNamePicker({
       name: 'Min',
       path: 'gauge.min.metricName',
@@ -67,6 +68,37 @@ export const plugin = new PanelPlugin<PanelOptions>(Panel).setPanelOptions((buil
       showIf: (config) => config.visualizationType === Pod.GAUGE,
     })
 
+    // note: `gauge.unit` will contain unit name, not it's string representation
+    // to format value with unit, use `getValueFormat` function from `@grafana/data`
+    .addUnitPicker({
+      path: 'gauge.unit',
+      name: 'Unit',
+      category: ['Value Format'],
+      showIf: (config) => config.visualizationType === Pod.GAUGE,
+    })
+    .addNumberInput({
+      path: 'gauge.decimals',
+      name: 'Decimals',
+      settings: {
+        placeholder: 'auto',
+        min: 0,
+        max: 5,
+      },
+      category: ['Value Format'],
+      showIf: (config) => config.visualizationType === Pod.GAUGE,
+    })
+    .addSliderInput({
+      path: 'gauge.size',
+      defaultValue: 20,
+      name: 'Size (px)',
+      settings: {
+        min: 1,
+        max: 50,
+      },
+      category: ['Value Format'],
+      showIf: (config) => config.visualizationType === Pod.GAUGE,
+    })
+
     .addNumberInput({
       path: 'gauge.max.value',
       name: 'Max',

From f75abc9349073cb771746c70db7bec5b9bd17983 Mon Sep 17 00:00:00 2001
From: rozetko <rozetko@corpglory.com>
Date: Tue, 10 May 2022 18:33:03 +0400
Subject: [PATCH 7/7] new UseMetricEditor

---
 src/components/editors/UseMetricEditor.tsx | 62 ++++++++++++++++++++++
 src/module.ts                              | 53 ++++++------------
 2 files changed, 79 insertions(+), 36 deletions(-)
 create mode 100644 src/components/editors/UseMetricEditor.tsx

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<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>
+  )
+}
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<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',