chartwerk
/
grafana-chartwerk-panel
4
0
Fork 0
Code Issues 2 Pull Requests Projects Releases 1 Wiki Activity
Browse Source

Merge branch 'more-options' into 'main' 

UI for all options

See merge request chartwerk/grafana-chartwerk-panel!6
merge-requests/7/merge
Alexander Velikiy 3 years ago
parent
9186960dd4 f75abc9349
commit
8b50017393
5 changed files with 253 additions and 133 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 28
      src/components/editors/IconsEditor.tsx
  2. 5
      src/components/editors/NotSupportedText.tsx
  3. 88
      src/components/editors/ThresholdsEditor.tsx
  4. 62
      src/components/editors/UseMetricEditor.tsx
  5. 85
      src/module.ts

28
src/components/editors/IconsEditor.tsx
Unescape View File

@ -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,18 +137,25 @@ 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>
<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)}
/>
<div className={styles.slider}>
<Slider
value={icon.size}
min={1}
@ -157,9 +163,11 @@ export function IconsEditor({ onChange, value, context }: StandardEditorProps<Ic
step={1}
onAfterChange={(newVal) => onIconFieldChange(iconIdx, 'size', newVal)}
/>
</div>
{icon.conditions.map((condition, conditionIdx) => {
return (
<div className={styles.condition}>
<HorizontalGroup key={conditionIdx} >
<FieldNamePicker
context={context}
@ -182,8 +190,10 @@ export function IconsEditor({ onChange, value, context }: StandardEditorProps<Ic
<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: ${theme.spacing.xxs};
`,
row: css`
margin-bottom: ${theme.spacing.sm};
`,
};
});

5
src/components/editors/NotSupportedText.tsx
Unescape View File

@ -0,0 +1,5 @@
import React from 'react';
export function NotSupportedText() {
return <div>To be supported soon...</div>
}

88
src/components/editors/ThresholdsEditor.tsx
Unescape View File

@ -1,21 +1,25 @@
import { FieldNamePicker } from '../../grafana/MatchersUI/FieldNamePicker';
import { StandardEditorProps } from '@grafana/data';
import { GrafanaTheme, StandardEditorProps } from '@grafana/data';
import {
Button,
ColorPicker,
HorizontalGroup,
IconButton,
InlineField,
InlineLabel,
InlineSwitch,
Input,
stylesFactory,
ThemeContext,
} from '@grafana/ui';
import React from 'react';
import { css } from 'emotion';
import * as _ from 'lodash';
interface Props {
defaultColor: string;
arcBackground: string;
@ -65,61 +69,39 @@ export function ThresholdsEditor({ onChange, value, context }: StandardEditorPro
return (
<ThemeContext.Consumer>
{() => {
// const styles = getStyles(theme.v1);
{(theme) => {
const styles = getStyles(theme.v1);
return (
<div>
<Input
type="text"
value={'Default Gauge Color'}
disabled
prefix={
<div>
<InlineField label="Default Gauge Color">
<InlineLabel>
<ColorPicker
color={config.defaultColor}
onChange={(val) => onFieldChange('defaultColor', val)}
enableNamedColors={true}
enableNamedColors={false}
/>
</div>
}
/>
<Input
type="text"
value={'Arc Background'}
disabled
prefix={
<div>
</InlineLabel>
</InlineField>
<InlineField label="Arc Background">
<InlineLabel>
<ColorPicker
color={config.arcBackground}
onChange={(val) => onFieldChange('arcBackground', val)}
enableNamedColors={true}
/>
</div>
}
enableNamedColors={false}
/>
</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>
<InlineField>
{threshold.useMetric ? (
<FieldNamePicker
context={context}
@ -134,7 +116,25 @@ 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>
</InlineField>
<InlineField label="Color">
<InlineLabel>
<ColorPicker
color={threshold.color}
onChange={(newVal) => onThresholdFieldChange(thresholdIdx, 'color', newVal)}
enableNamedColors={false}
/>
</InlineLabel>
</InlineField>
<InlineField>
<InlineLabel width={0} className={styles.deleteButton}>
<IconButton
name="trash-alt"
onClick={() => removeThreshold(thresholdIdx)}
tooltip="Delete Threshold"
></IconButton>
</InlineLabel>
</InlineField>
</HorizontalGroup>
);
})}
@ -147,3 +147,15 @@ export function ThresholdsEditor({ onChange, value, context }: StandardEditorPro
</ThemeContext.Consumer>
);
}
interface ThresholdsEditorStyles {
deleteButton: string;
}
const getStyles = stylesFactory((theme: GrafanaTheme): ThresholdsEditorStyles => {
return {
deleteButton: css`
margin-right: 0px!important;
`,
};
});

62
src/components/editors/UseMetricEditor.tsx
Unescape View File

@ -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>
)
}

85
src/module.ts
Unescape View File

@ -1,11 +1,15 @@
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({
@ -18,21 +22,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',
@ -40,46 +49,55 @@ 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,
})
.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,
})
.addNumberInput({
path: 'gauge.max.value',
name: 'Max',
category: ['Extremum'],
showIf: (config) => config.visualizationType === Pod.GAUGE && !config.gauge.max.useMetric,
// 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,
})
.addFieldNamePicker({
name: 'Max',
path: 'gauge.max.metricName',
category: ['Extremum'],
showIf: (config) => config.visualizationType === Pod.GAUGE && config.gauge.max.useMetric,
.addNumberInput({
path: 'gauge.decimals',
name: 'Decimals',
settings: {
placeholder: 'auto',
min: 0,
max: 5,
},
category: ['Value Format'],
showIf: (config) => config.visualizationType === Pod.GAUGE,
})
.addBooleanSwitch({
path: 'gauge.max.useMetric',
name: 'Use metric',
defaultValue: false,
category: ['Extremum'],
.addSliderInput({
path: 'gauge.size',
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',
@ -87,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',

Write Preview
Loading…
Cancel
Save