You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
143 lines
4.5 KiB
143 lines
4.5 KiB
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> |
|
) |
|
}
|
|
|