Thresholds Editor UI

src/components/editors/ThresholdsEditor.tsx

@@ -0,0 +1,143 @@
+import { FieldNamePicker } from '../../grafana/MatchersUI/FieldNamePicker';
+
+import { StandardEditorProps } from '@grafana/data';
+import { Button, ColorPicker, HorizontalGroup, IconButton, InlineField, InlineSwitch, Input, ThemeContext } from '@grafana/ui';
+
+import React from 'react';
+
+import * as _ from 'lodash';
+
+
+interface Props {
+  defaultColor: string,
+  arcBackground: string,
+  thresholds: Array<ThresholdConfig>
+}
+
+type ThresholdConfig = {
+  color: string;
+  useMetric: boolean;
+  value?: number;
+  metricName?: string;
+}
+
+const DEFAULT_THRESHOLD: ThresholdConfig = {
+  color: '#378372d',
+  useMetric: false,
+  value: 0
+}
+
+const fieldNamePickerSettings = {
+  settings: { width: 24 },
+} as any;
+
+export function ThresholdsEditor({ onChange, value, context }: StandardEditorProps<Props>) {
+  const config = value;
+
+  const addThreshold = () => {
+    config.thresholds.push(_.cloneDeep(DEFAULT_THRESHOLD));
+    onChange(config);
+  }
+
+  const removeThreshold = (idx: number) => {
+    config.thresholds.splice(idx, 1);
+    onChange(config);
+  }
+
+  const onFieldChange = (field: keyof Props, value: any) => {
+    config[field] = value;
+    onChange(config);
+  }
+
+  const onThresholdFieldChange = (thresholdIdx: number, field: keyof ThresholdConfig, value: any) => {
+    // @ts-ignore
+    config.thresholds[thresholdIdx][field] = value;
+    onChange(config);
+  };
+
+  return (
+    <ThemeContext.Consumer>
+      {
+        () => {
+          // const styles = getStyles(theme.v1);
+          return (
+            <div>
+              <Input
+                type="text"
+                value={'Default Gauge Color'}
+                disabled
+                prefix={
+                  <div>
+                    <ColorPicker
+                      color={config.defaultColor}
+                      onChange={val => onFieldChange('defaultColor', val)}
+                      enableNamedColors={true}
+                    />
+                  </div>
+                }
+              />
+              <Input
+                type="text"
+                value={'Arc Background'}
+                disabled
+                prefix={
+                  <div>
+                    <ColorPicker
+                      color={config.arcBackground}
+                      onChange={val => onFieldChange('arcBackground', val) }
+                      enableNamedColors={true}
+                    />
+                  </div>
+                }
+              />
+              {
+                config.thresholds.map((threshold, thresholdIdx) => {
+                  return (
+                    <HorizontalGroup>
+                      <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)}></IconButton>
+                    </HorizontalGroup>
+                  )
+                })
+              }
+              <Button variant="secondary" onClick={addThreshold}>Add Threshold</Button>
+            </div>
+          )
+        }
+      }
+    </ThemeContext.Consumer>
+  )
+}

src/module.ts

@@ -1,8 +1,10 @@
 import { PanelOptions, Pod } from './types';
+
 import { Panel } from './components/Panel';
+import { IconsEditor } from './components/editors/IconsEditor';
+import { ThresholdsEditor } from './components/editors/ThresholdsEditor';
 
 import { PanelPlugin } from '@grafana/data';
-import { IconsEditor } from 'components/editors/IconsEditor';
 
 
 export const plugin = new PanelPlugin<PanelOptions>(Panel).setPanelOptions((builder) => {
@@ -89,4 +91,18 @@ export const plugin = new PanelPlugin<PanelOptions>(Panel).setPanelOptions((buil
       showIf: (config) => config.visualizationType === Pod.GAUGE,
       editor: IconsEditor as any,
     })
+
+    .addCustomEditor({
+      id: 'thresholds',
+      path: 'gauge.thresholds',
+      name: 'Thresholds',
+      category: ['Thresholds'],
+      defaultValue: {
+        defaultColor: '#37872d',
+        arcBackground: 'rgba(38, 38, 38, 0.1)',
+        thresholds: []
+      },
+      showIf: (config) => config.visualizationType === Pod.GAUGE,
+      editor: ThresholdsEditor as any,
+    })
 });