|
|
|
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';
|
|
|
|
|
|
|
|
export const plugin = new PanelPlugin<PanelOptions>(Panel).setPanelOptions((builder) => {
|
|
|
|
return (
|
|
|
|
builder
|
|
|
|
.addRadio({
|
|
|
|
path: 'visualizationType',
|
|
|
|
name: 'Pod',
|
|
|
|
category: ['Visualization'],
|
|
|
|
defaultValue: Pod.GAUGE,
|
|
|
|
settings: {
|
|
|
|
options: [
|
|
|
|
{
|
|
|
|
label: 'Gauge',
|
|
|
|
value: Pod.GAUGE,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: 'Bar',
|
|
|
|
value: Pod.BAR,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: 'Line',
|
|
|
|
value: Pod.LINE,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
})
|
|
|
|
.addCustomEditor({
|
|
|
|
id: 'notSupportedText',
|
|
|
|
name: 'This visualization is not supported',
|
|
|
|
category: ['Visualization'],
|
|
|
|
path: '',
|
|
|
|
showIf: (config) => config.visualizationType !== Pod.GAUGE,
|
|
|
|
editor: NotSupportedText as any,
|
|
|
|
})
|
|
|
|
.addFieldNamePicker({
|
|
|
|
name: 'Metric',
|
|
|
|
path: 'gauge.value.metricName',
|
|
|
|
category: ['Value'],
|
|
|
|
showIf: (config) => config.visualizationType === Pod.GAUGE,
|
|
|
|
})
|
|
|
|
|
|
|
|
.addBooleanSwitch({
|
|
|
|
path: 'gauge.additionalInfo.display',
|
|
|
|
name: 'Display',
|
|
|
|
defaultValue: false,
|
|
|
|
category: ['Additional Info'],
|
|
|
|
showIf: (config) => config.visualizationType === Pod.GAUGE,
|
|
|
|
})
|
|
|
|
.addCustomEditor({
|
|
|
|
id: 'additionalInfo',
|
|
|
|
name: 'Value',
|
|
|
|
path: 'gauge.additionalInfo.value',
|
|
|
|
category: ['Additional Info'],
|
|
|
|
defaultValue: { useMetric: false, value: 0 },
|
|
|
|
showIf: (config) => config.visualizationType === Pod.GAUGE && config.gauge.additionalInfo?.display,
|
|
|
|
editor: UseMetricEditor as any,
|
|
|
|
})
|
|
|
|
.addSliderInput({
|
|
|
|
path: 'gauge.additionalInfo.size',
|
|
|
|
defaultValue: 20,
|
|
|
|
name: 'Size (px)',
|
|
|
|
settings: {
|
|
|
|
min: 1,
|
|
|
|
max: 50,
|
|
|
|
},
|
|
|
|
category: ['Additional Info'],
|
|
|
|
showIf: (config) => config.visualizationType === Pod.GAUGE && config.gauge.additionalInfo?.display,
|
|
|
|
})
|
|
|
|
.addTextInput({
|
|
|
|
path: 'gauge.additionalInfo.prefix',
|
|
|
|
defaultValue: '',
|
|
|
|
name: 'Prefix',
|
|
|
|
category: ['Additional Info'],
|
|
|
|
showIf: (config) => config.visualizationType === Pod.GAUGE && config.gauge.additionalInfo?.display,
|
|
|
|
})
|
|
|
|
.addColorPicker({
|
|
|
|
path: 'gauge.additionalInfo.color',
|
|
|
|
defaultValue: 'white',
|
|
|
|
name: 'Text Color',
|
|
|
|
category: ['Additional Info'],
|
|
|
|
showIf: (config) => config.visualizationType === Pod.GAUGE && config.gauge.additionalInfo?.display,
|
|
|
|
})
|
|
|
|
.addUnitPicker({
|
|
|
|
path: 'gauge.additionalInfo.unit',
|
|
|
|
name: 'Unit',
|
|
|
|
category: ['Additional Info'],
|
|
|
|
showIf: (config) => config.visualizationType === Pod.GAUGE && config.gauge.additionalInfo?.display,
|
|
|
|
})
|
|
|
|
.addNumberInput({
|
|
|
|
path: 'gauge.additionalInfo.decimals',
|
|
|
|
name: 'Decimals',
|
|
|
|
settings: {
|
|
|
|
placeholder: 'auto',
|
|
|
|
min: 0,
|
|
|
|
max: 5,
|
|
|
|
},
|
|
|
|
category: ['Additional Info'],
|
|
|
|
showIf: (config) => config.visualizationType === Pod.GAUGE && config.gauge.additionalInfo?.display,
|
|
|
|
})
|
|
|
|
|
|
|
|
.addCustomEditor({
|
|
|
|
id: 'min',
|
|
|
|
name: 'Min',
|
|
|
|
path: 'gauge.min',
|
|
|
|
category: ['Extremum'],
|
|
|
|
defaultValue: { useMetric: false, value: 0 },
|
|
|
|
showIf: (config) => config.visualizationType === Pod.GAUGE,
|
|
|
|
editor: UseMetricEditor as any,
|
|
|
|
})
|
|
|
|
.addCustomEditor({
|
|
|
|
id: 'max',
|
|
|
|
name: 'Max',
|
|
|
|
path: 'gauge.max',
|
|
|
|
category: ['Extremum'],
|
|
|
|
defaultValue: { useMetric: false },
|
|
|
|
showIf: (config) => config.visualizationType === Pod.GAUGE,
|
|
|
|
editor: UseMetricEditor as any,
|
|
|
|
})
|
|
|
|
|
|
|
|
// 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.valueSize',
|
|
|
|
defaultValue: 20,
|
|
|
|
name: 'Size (px)',
|
|
|
|
settings: {
|
|
|
|
min: 1,
|
|
|
|
max: 50,
|
|
|
|
},
|
|
|
|
category: ['Value Format'],
|
|
|
|
showIf: (config) => config.visualizationType === Pod.GAUGE,
|
|
|
|
})
|
|
|
|
|
|
|
|
.addBooleanSwitch({
|
|
|
|
path: 'gauge.reversed',
|
|
|
|
name: 'Reversed',
|
|
|
|
defaultValue: false,
|
|
|
|
category: ['Direction'],
|
|
|
|
showIf: (config) => config.visualizationType === Pod.GAUGE,
|
|
|
|
})
|
|
|
|
|
|
|
|
.addCustomEditor({
|
|
|
|
id: 'icons',
|
|
|
|
path: 'gauge.icons',
|
|
|
|
name: 'Icons',
|
|
|
|
category: ['Icons'],
|
|
|
|
defaultValue: [],
|
|
|
|
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,
|
|
|
|
})
|
|
|
|
.addTextInput({
|
|
|
|
path: 'gauge.link',
|
|
|
|
name: '',
|
|
|
|
category: ['Link'],
|
|
|
|
showIf: (config) => config.visualizationType === Pod.GAUGE,
|
|
|
|
})
|
|
|
|
);
|
|
|
|
});
|