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.
199 lines
6.1 KiB
199 lines
6.1 KiB
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, |
|
}) |
|
); |
|
});
|
|
|