IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-25 18:30:41 -06:00
Code Issues Packages Projects Releases Wiki Activity

FieldConfigs: String select type & cell display mode added to table panel (#22274)

Browse Source 
* FieldConfigs: Added string select field config

* FieldConfigs: Added string select field config

* Changed to generic select type
This commit is contained in:
Torkel Ödegaard 2020-02-19 11:30:19 +01:00 committed by GitHub
parent e591fbc322
commit a45794d0ec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 82 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/grafana-ui/src/components/FieldConfigs/select.tsx Normal file
View File

@ -0,0 +1,32 @@
import React, { FC } from 'react';
import { FieldOverrideContext, FieldOverrideEditorProps, FieldConfigEditorProps, SelectableValue } from '@grafana/data';
import Forms from '../Forms';
export interface SelectFieldConfigSettings<T> {
options: Array<SelectableValue<T>>;
}
export const selectOverrideProcessor = (
value: any,
context: FieldOverrideContext,
settings: SelectFieldConfigSettings<any>
) => {
return value;
};
export const SelectValueEditor: FC<FieldConfigEditorProps<string, SelectFieldConfigSettings<any>>> = ({
item,
value,
onChange,
}) => {
return <Forms.Select value={value || ''} onChange={e => onChange(e.value)} options={item.settings.options} />;
};
export const SelectOverrideEditor: FC<FieldOverrideEditorProps<string, SelectFieldConfigSettings<any>>> = ({
item,
value,
onChange,
}) => {
return <Forms.Select value={value || ''} onChange={e => onChange(e.value)} options={item.settings.options} />;
};

6
packages/grafana-ui/src/components/index.ts
View File

@ -130,6 +130,12 @@ export {
numberOverrideProcessor,
NumberFieldConfigSettings,
} from './FieldConfigs/number';
export {
selectOverrideProcessor,
SelectValueEditor,
SelectOverrideEditor,
SelectFieldConfigSettings,
} from './FieldConfigs/select';
// Next-gen forms
export { default as Forms } from './Forms';

32
public/app/plugins/panel/table2/custom.tsx
View File

@ -4,11 +4,16 @@ import {
NumberOverrideEditor,
numberOverrideProcessor,
NumberFieldConfigSettings,
selectOverrideProcessor,
SelectValueEditor,
SelectOverrideEditor,
SelectFieldConfigSettings,
} from '@grafana/ui';
export const tableFieldRegistry: FieldConfigEditorRegistry = new Registry<FieldPropertyEditorItem>(() => {
const columWidth: FieldPropertyEditorItem<number, NumberFieldConfigSettings> = {
id: 'width', // Match field properties
name: 'Column Width',
name: 'Column width',
description: 'column width (for table)',
editor: NumberValueEditor,
@ -20,9 +25,30 @@ const columWidth: FieldPropertyEditorItem<number, NumberFieldConfigSettings> = {
min: 20,
max: 300,
},
shouldApply: () => true,
};
export const tableFieldRegistry: FieldConfigEditorRegistry = new Registry<FieldPropertyEditorItem>(() => {
return [columWidth];
const cellDisplayMode: FieldPropertyEditorItem<string, SelectFieldConfigSettings<string>> = {
id: 'displayMode', // Match field properties
name: 'Cell display mode',
description: 'Color value, background, show as gauge, etc',
editor: SelectValueEditor,
override: SelectOverrideEditor,
process: selectOverrideProcessor,
settings: {
options: [
{ value: 'auto', label: 'Auto' },
{ value: 'color-background', label: 'Color background' },
{ value: 'gradient-gauge', label: 'Gradient gauge' },
{ value: 'lcd-gauge', label: 'LCD gauge' },
],
},
shouldApply: () => true,
};
return [columWidth, cellDisplayMode];
});