From a45794d0ec839f180a757e67dcce7fa826b89d43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Wed, 19 Feb 2020 11:30:19 +0100
Subject: [PATCH] FieldConfigs: String select type & cell display mode added to
 table panel (#22274)

* FieldConfigs: Added string select field config

* FieldConfigs: Added string select field config

* Changed to generic select type
---
 .../src/components/FieldConfigs/select.tsx    | 32 ++++++++++
 packages/grafana-ui/src/components/index.ts   |  6 ++
 public/app/plugins/panel/table2/custom.tsx    | 62 +++++++++++++------
 3 files changed, 82 insertions(+), 18 deletions(-)
 create mode 100644 packages/grafana-ui/src/components/FieldConfigs/select.tsx

diff --git a/packages/grafana-ui/src/components/FieldConfigs/select.tsx b/packages/grafana-ui/src/components/FieldConfigs/select.tsx
new file mode 100644
index 00000000000..3579ef1e31f
--- /dev/null
+++ b/packages/grafana-ui/src/components/FieldConfigs/select.tsx
@@ -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} />;
+};
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index 7d11161d121..98f4b884871 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -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';
diff --git a/public/app/plugins/panel/table2/custom.tsx b/public/app/plugins/panel/table2/custom.tsx
index 2436d04b775..e8cee0f08c2 100644
--- a/public/app/plugins/panel/table2/custom.tsx
+++ b/public/app/plugins/panel/table2/custom.tsx
@@ -4,25 +4,51 @@ import {
   NumberOverrideEditor,
   numberOverrideProcessor,
   NumberFieldConfigSettings,
+  selectOverrideProcessor,
+  SelectValueEditor,
+  SelectOverrideEditor,
+  SelectFieldConfigSettings,
 } from '@grafana/ui';
 
-const columWidth: FieldPropertyEditorItem<number, NumberFieldConfigSettings> = {
-  id: 'width', // Match field properties
-  name: 'Column Width',
-  description: 'column width (for table)',
-
-  editor: NumberValueEditor,
-  override: NumberOverrideEditor,
-  process: numberOverrideProcessor,
-
-  settings: {
-    placeholder: 'auto',
-    min: 20,
-    max: 300,
-  },
-  shouldApply: () => true,
-};
-
 export const tableFieldRegistry: FieldConfigEditorRegistry = new Registry<FieldPropertyEditorItem>(() => {
-  return [columWidth];
+  const columWidth: FieldPropertyEditorItem<number, NumberFieldConfigSettings> = {
+    id: 'width', // Match field properties
+    name: 'Column width',
+    description: 'column width (for table)',
+
+    editor: NumberValueEditor,
+    override: NumberOverrideEditor,
+    process: numberOverrideProcessor,
+
+    settings: {
+      placeholder: 'auto',
+      min: 20,
+      max: 300,
+    },
+
+    shouldApply: () => true,
+  };
+
+  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];
 });