diff --git a/contribute/style-guides/storybook.md b/contribute/style-guides/storybook.md index 04e833b74be..993b3621057 100644 --- a/contribute/style-guides/storybook.md +++ b/contribute/style-guides/storybook.md @@ -101,7 +101,10 @@ import { MyComponent } from "./MyComponent"; ### MDX file without a relationship to a component -An MDX file can exist by itself without any connection to a story. This can be good for writing things such as a general guidelines page. Something that is required when the MDX file has no relation to a component is a `Meta` tag that says where in the hierarchy the component will live. It can look like this: +An MDX file can exist by itself without any connection to a story. This can be good for writing things such as a general guidelines page. Two things are required for this to work: + +- The file needs to be named `*.story.mdx` +- A `Meta` tag must exist that says where in the hierarchy the component lives. It can look like this: ```jsx diff --git a/docs/sources/_index.md b/docs/sources/_index.md index 6078d143b02..99bf35c18c7 100755 --- a/docs/sources/_index.md +++ b/docs/sources/_index.md @@ -8,7 +8,8 @@ aliases = ["/docs/grafana/v1.1", "/docs/grafana/latest/guides/reference/admin", # Grafana documentation -

Installing Grafana

+## Installing Grafana +
}}" class="nav-cards__item nav-cards__item--install">
@@ -26,7 +27,7 @@ aliases = ["/docs/grafana/v1.1", "/docs/grafana/latest/guides/reference/admin",
Install on Windows
 }}" class="nav-cards__item nav-cards__item--install"> - +
Run Docker image
 @@ -41,7 +42,7 @@ aliases = ["/docs/grafana/v1.1", "/docs/grafana/latest/guides/reference/admin",
-

Guides

+## Guides
}}" class="nav-cards__item nav-cards__item--guide"> @@ -71,7 +72,8 @@ aliases = ["/docs/grafana/v1.1", "/docs/grafana/latest/guides/reference/admin",
-

Data source guides

+## Data source guides +
}}" class="nav-cards__item nav-cards__item--ds"> diff --git a/docs/sources/auth/azuread.md b/docs/sources/auth/azuread.md index 0f2c8f5ba88..d9cc1426cad 100644 --- a/docs/sources/auth/azuread.md +++ b/docs/sources/auth/azuread.md @@ -122,6 +122,12 @@ only give access to members of the group `example` which has Id `8bab1c86-8fba-3 allowed_groups = 8bab1c86-8fba-33e5-2089-1d1c80ec267d ``` +You'll need to ensure that you've [enabled group attributes](https://docs.microsoft.com/en-us/azure/active-directory/hybrid/how-to-connect-fed-group-claims#configure-the-azure-ad-application-registration-for-group-attributes) in your Azure AD Application Registration manifest file (Azure Portal -> Azure Active Directory -> Application Registrations -> Select Application -> Manifest) + +```json +"groupMembershipClaims": "ApplicationGroup" +``` + The `allowed_domains` option limits access to the users belonging to the specific domains. Domains should be separated by space or comma. ```ini diff --git a/docs/sources/auth/generic-oauth.md b/docs/sources/auth/generic-oauth.md index e99f78ef5f6..4a34d23d8b6 100755 --- a/docs/sources/auth/generic-oauth.md +++ b/docs/sources/auth/generic-oauth.md @@ -54,24 +54,6 @@ Check for the presence of a role using the [JMESPath](http://jmespath.org/exampl See [JMESPath examples](#jmespath-examples) for more information. -## Set up OAuth2 with Okta - -First set up Grafana as an OpenId client "webapplication" in Okta. Then set the Base URIs to `https:///` and set the Login redirect URIs to `https:///login/generic_oauth`. - -Finally set up the generic oauth module like this: - -```bash -[auth.generic_oauth] -name = Okta -enabled = true -scopes = openid profile email -client_id = -client_secret = -auth_url = https:///oauth2/v1/authorize -token_url = https:///oauth2/v1/token -api_url = https:///oauth2/v1/userinfo -``` - ## Set up OAuth2 with Bitbucket ```bash @@ -150,46 +132,6 @@ allowed_organizations = api_url = https:///userinfo ``` -## Set up OAuth2 with Azure Active Directory - -1. Log in to portal.azure.com and click "Azure Active Directory" in the side menu, then click the "Properties" sub-menu item. - -2. Copy the "Directory ID", this is needed for setting URLs later - -3. Click "App Registrations" and add a new application registration: - - Name: Grafana - - Application type: Web app / API - - Sign-on URL: `https:///login/generic_oauth` - -4. Click the name of the new application to open the application details page. - -5. Note down the "Application ID", this will be the OAuth client id. - -6. Click "Certificates & secrets" and add a new entry under Client secrets - - Description: Grafana OAuth - - Expires: Never - -7. Click Add then copy the key value, this will be the OAuth client secret. - -8. Configure Grafana as follows: - - ```bash - [auth.generic_oauth] - name = Azure AD - enabled = true - allow_sign_up = true - client_id = - client_secret = - scopes = openid email name - auth_url = https://login.microsoftonline.com//oauth2/authorize - token_url = https://login.microsoftonline.com//oauth2/token - api_url = - team_ids = - allowed_organizations = - ``` - -> Note: It's important to ensure that the [root_url]({{< relref "../installation/configuration/#root-url" >}}) in Grafana is set in your Azure Application Reply URLs (App -> Settings -> Reply URLs) - ## Set up OAuth2 with Centrify 1. Create a new Custom OpenID Connect application configuration in the Centrify dashboard. diff --git a/docs/sources/installation/behind_proxy.md b/docs/sources/installation/behind_proxy.md index da8d4be83f2..4f0a80bfe8d 100644 --- a/docs/sources/installation/behind_proxy.md +++ b/docs/sources/installation/behind_proxy.md @@ -38,7 +38,7 @@ domain = foo.bar Nginx is a high performance load balancer, web server and reverse proxy: https://www.nginx.com/ #### Nginx configuration with HTTP and Reverse Proxy enabled -```bash +```nginx server { listen 80; root /usr/share/nginx/html; @@ -62,7 +62,7 @@ root_url = https://foo.bar Instead of http://foo.bar:3000/?orgId=1, this configuration will redirect all HTTP requests to HTTPS and re-write the URL so that port 3000 isn't visible and will result in https://foo.bar/?orgId=1 -```bash +```nginx server { listen 80; server_name foo.bar; @@ -98,7 +98,7 @@ root_url = %(protocol)s://%(domain)s/grafana/ ``` #### Nginx configuration with sub path -```bash +```nginx server { listen 80; root /usr/share/nginx/www; diff --git a/go.mod b/go.mod index f8335a9e6f9..79599ab3ca0 100644 --- a/go.mod +++ b/go.mod @@ -30,7 +30,7 @@ require ( github.com/gorilla/websocket v1.4.1 github.com/gosimple/slug v1.4.2 github.com/grafana/grafana-plugin-model v0.0.0-20190930120109-1fc953a61fb4 - github.com/grafana/grafana-plugin-sdk-go v0.33.0 + github.com/grafana/grafana-plugin-sdk-go v0.35.0 github.com/hashicorp/go-hclog v0.0.0-20180709165350-ff2cf002a8dd github.com/hashicorp/go-plugin v1.0.1 github.com/hashicorp/go-version v1.1.0 diff --git a/go.sum b/go.sum index 6975828fe71..9f0b3270bd7 100644 --- a/go.sum +++ b/go.sum @@ -128,8 +128,8 @@ github.com/gosimple/slug v1.4.2 h1:jDmprx3q/9Lfk4FkGZtvzDQ9Cj9eAmsjzeQGp24PeiQ= github.com/gosimple/slug v1.4.2/go.mod h1:ER78kgg1Mv0NQGlXiDe57DpCyfbNywXXZ9mIorhxAf0= github.com/grafana/grafana-plugin-model v0.0.0-20190930120109-1fc953a61fb4 h1:SPdxCL9BChFTlyi0Khv64vdCW4TMna8+sxL7+Chx+Ag= github.com/grafana/grafana-plugin-model v0.0.0-20190930120109-1fc953a61fb4/go.mod h1:nc0XxBzjeGcrMltCDw269LoWF9S8ibhgxolCdA1R8To= -github.com/grafana/grafana-plugin-sdk-go v0.33.0 h1:+eFcOV/KioHTTRNimENZeajlkw31B+m92RNRShooPEQ= -github.com/grafana/grafana-plugin-sdk-go v0.33.0/go.mod h1:4rVPIvfv7SzFC0AA/8T5tmDRxIsrvDJOF9p4SrQGS1M= +github.com/grafana/grafana-plugin-sdk-go v0.35.0 h1:IxNaNq8hN3ShQ804FURFOd1ehbKOmFROztY+8vohhW8= +github.com/grafana/grafana-plugin-sdk-go v0.35.0/go.mod h1:zX/Zz/HYDAkL1NxffOZeixqPqIVVoCTWI2AuFy4J+V4= github.com/hashicorp/go-hclog v0.0.0-20180709165350-ff2cf002a8dd h1:rNuUHR+CvK1IS89MMtcF0EpcVMZtjKfPRp4MEmt/aTs= github.com/hashicorp/go-hclog v0.0.0-20180709165350-ff2cf002a8dd/go.mod h1:9bjs9uLqI8l75knNv3lV1kA55veR+WUPSiKIWcQHudI= github.com/hashicorp/go-plugin v1.0.1 h1:4OtAfUGbnKC6yS48p0CtMX2oFYtzFZVv6rok3cRWgnE= @@ -180,6 +180,7 @@ github.com/linkedin/goavro/v2 v2.9.7 h1:Vd++Rb/RKcmNJjM0HP/JJFMEWa21eUBVKPYlKehO github.com/linkedin/goavro/v2 v2.9.7/go.mod h1:UgQUb2N/pmueQYH9bfqFioWxzYCZXSfF8Jw03O5sjqA= github.com/lunny/log v0.0.0-20160921050905-7887c61bf0de/go.mod h1:3q8WtuPQsoRbatJuy3nvq/hRSvuBJrHHr+ybPPiNvHQ= github.com/lunny/nodb v0.0.0-20160621015157-fc1ef06ad4af/go.mod h1:Cqz6pqow14VObJ7peltM+2n3PWOz7yTrfUuGbVFkzN0= +github.com/magefile/mage v1.9.0/go.mod h1:z5UZb/iS3GoOSn0JgWuiw7dxlurVYTu+/jHXqQg881A= github.com/mattetti/filebuffer v1.0.0 h1:ixTvQ0JjBTwWbdpDZ98lLrydo7KRi8xNRIi5RFszsbY= github.com/mattetti/filebuffer v1.0.0/go.mod h1:X6nyAIge2JGVmuJt2MFCqmHrb/5IHiphfHtot0s5cnI= github.com/mattn/go-colorable v0.1.6 h1:6Su7aK7lXmJ/U79bYtBjLNaha4Fs1Rg9plHpcH+vvnE= diff --git a/package.json b/package.json index fa7bc1e2176..b31b9079cbe 100644 --- a/package.json +++ b/package.json @@ -282,7 +282,8 @@ }, "workspaces": { "packages": [ - "packages/*" + "packages/*", + "plugins-bundled/internal/*" ], "nohoist": [ "**/@types/*", diff --git a/packages/grafana-data/src/field/FieldConfigOptionsRegistry.tsx b/packages/grafana-data/src/field/FieldConfigOptionsRegistry.tsx new file mode 100644 index 00000000000..eb9ac4e058a --- /dev/null +++ b/packages/grafana-data/src/field/FieldConfigOptionsRegistry.tsx @@ -0,0 +1,4 @@ +import { Registry } from '../utils'; +import { FieldConfigPropertyItem } from '../types'; + +export class FieldConfigOptionsRegistry extends Registry {} diff --git a/packages/grafana-data/src/field/fieldOverrides.test.ts b/packages/grafana-data/src/field/fieldOverrides.test.ts index 8cacef5316b..5a44485e87d 100644 --- a/packages/grafana-data/src/field/fieldOverrides.test.ts +++ b/packages/grafana-data/src/field/fieldOverrides.test.ts @@ -2,46 +2,50 @@ import { FieldOverrideEnv, findNumericFieldMinMax, setFieldConfigDefaults, + setDynamicConfigValue, applyFieldOverrides, } from './fieldOverrides'; -import { MutableDataFrame } from '../dataframe'; +import { MutableDataFrame, toDataFrame } from '../dataframe'; import { FieldConfig, - FieldConfigEditorRegistry, - FieldOverrideContext, - FieldPropertyEditorItem, + FieldConfigPropertyItem, GrafanaTheme, FieldType, + DataFrame, + FieldConfigSource, + InterpolateFunction, } from '../types'; import { Registry } from '../utils'; -import { standardFieldConfigEditorRegistry } from './standardFieldConfigEditorRegistry'; +import { mockStandardProperties } from '../utils/tests/mockStandardProperties'; +import { FieldMatcherID } from '../transformations'; +import { FieldConfigOptionsRegistry } from './FieldConfigOptionsRegistry'; const property1 = { - id: 'property1', // Match field properties + id: 'custom.property1', // Match field properties + path: 'property1', // Match field properties + isCustom: true, process: (value: any) => value, shouldApply: () => true, } as any; const property2 = { - id: 'property2', // Match field properties + id: 'custom.property2', // Match field properties + path: 'property2', // Match field properties + isCustom: true, process: (value: any) => value, shouldApply: () => true, } as any; -const unit = { - id: 'unit', // Match field properties +const property3 = { + id: 'custom.property3.nested', // Match field properties + path: 'property3.nested', // Match field properties + isCustom: true, process: (value: any) => value, shouldApply: () => true, } as any; -export const customFieldRegistry: FieldConfigEditorRegistry = new Registry(() => { - return [property1, property2]; -}); - -// For the need of this test we need to mock the standard registry -// as we cannot imporrt from grafana/ui -standardFieldConfigEditorRegistry.setInit(() => { - return [unit]; +export const customFieldRegistry: FieldConfigOptionsRegistry = new Registry(() => { + return [property1, property2, property3, ...mockStandardProperties()]; }); describe('Global MinMax', () => { @@ -59,6 +63,32 @@ describe('Global MinMax', () => { }); describe('applyFieldOverrides', () => { + const f0 = new MutableDataFrame(); + f0.add({ title: 'AAA', value: 100, value2: 1234 }, true); + f0.add({ title: 'BBB', value: -20 }, true); + f0.add({ title: 'CCC', value: 200, value2: 1000 }, true); + expect(f0.length).toEqual(3); + + // Hardcode the max value + f0.fields[1].config.max = 0; + f0.fields[1].config.decimals = 6; + + const src: FieldConfigSource = { + defaults: { + unit: 'xyz', + decimals: 2, + }, + overrides: [ + { + matcher: { id: FieldMatcherID.numeric }, + properties: [ + { id: 'decimals', value: 1 }, // Numeric + { id: 'title', value: 'Kittens' }, // Text + ], + }, + ], + }; + describe('given multiple data frames', () => { const f0 = new MutableDataFrame({ name: 'A', @@ -72,12 +102,13 @@ describe('applyFieldOverrides', () => { it('should add scopedVars to fields', () => { const withOverrides = applyFieldOverrides({ data: [f0, f1], - fieldOptions: { + fieldConfig: { defaults: {}, overrides: [], }, replaceVariables: (value: any) => value, theme: {} as GrafanaTheme, + fieldConfigRegistry: new FieldConfigOptionsRegistry(), }); expect(withOverrides[0].fields[0].config.scopedVars).toMatchInlineSnapshot(` @@ -115,6 +146,83 @@ describe('applyFieldOverrides', () => { `); }); }); + + it('will merge FieldConfig with default values', () => { + const field: FieldConfig = { + min: 0, + max: 100, + }; + const f1 = { + unit: 'ms', + dateFormat: '', // should be ignored + max: parseFloat('NOPE'), // should be ignored + min: null, // should alo be ignored! + }; + + const f: DataFrame = toDataFrame({ + fields: [{ type: FieldType.number, name: 'x', config: field, values: [] }], + }); + const processed = applyFieldOverrides({ + data: [f], + fieldConfig: { + defaults: f1 as FieldConfig, + overrides: [], + }, + fieldConfigRegistry: customFieldRegistry, + replaceVariables: v => v, + theme: {} as GrafanaTheme, + })[0]; + const out = processed.fields[0].config; + + expect(out.min).toEqual(0); + expect(out.max).toEqual(100); + expect(out.unit).toEqual('ms'); + }); + + it('will apply field overrides', () => { + const data = applyFieldOverrides({ + data: [f0], // the frame + fieldConfig: src as FieldConfigSource, // defaults + overrides + replaceVariables: (undefined as any) as InterpolateFunction, + theme: (undefined as any) as GrafanaTheme, + fieldConfigRegistry: customFieldRegistry, + })[0]; + const valueColumn = data.fields[1]; + const config = valueColumn.config; + + // Keep max from the original setting + expect(config.max).toEqual(0); + + // Don't Automatically pick the min value + expect(config.min).toEqual(undefined); + + // The default value applied + expect(config.unit).toEqual('xyz'); + + // The default value applied + expect(config.title).toEqual('Kittens'); + + // The override applied + expect(config.decimals).toEqual(1); + }); + + it('will apply set min/max when asked', () => { + const data = applyFieldOverrides({ + data: [f0], // the frame + fieldConfig: src as FieldConfigSource, // defaults + overrides + replaceVariables: (undefined as any) as InterpolateFunction, + theme: (undefined as any) as GrafanaTheme, + autoMinMax: true, + })[0]; + const valueColumn = data.fields[1]; + const config = valueColumn.config; + + // Keep max from the original setting + expect(config.max).toEqual(0); + + // Don't Automatically pick the min value + expect(config.min).toEqual(-20); + }); }); describe('setFieldConfigDefaults', () => { @@ -132,10 +240,11 @@ describe('setFieldConfigDefaults', () => { unit: 'km', }; - const context: FieldOverrideContext = { + const context: FieldOverrideEnv = { data: [] as any, field: { type: FieldType.number } as any, dataFrameIndex: 0, + fieldConfigRegistry: customFieldRegistry, }; // we mutate dsFieldConfig @@ -143,6 +252,7 @@ describe('setFieldConfigDefaults', () => { expect(dsFieldConfig).toMatchInlineSnapshot(` Object { + "custom": Object {}, "decimals": 2, "max": 100, "min": 0, @@ -169,7 +279,7 @@ describe('setFieldConfigDefaults', () => { data: [] as any, field: { type: FieldType.number } as any, dataFrameIndex: 0, - custom: customFieldRegistry, + fieldConfigRegistry: customFieldRegistry, }; // we mutate dsFieldConfig @@ -185,3 +295,118 @@ describe('setFieldConfigDefaults', () => { `); }); }); + +describe('setDynamicConfigValue', () => { + it('applies dynamic config values', () => { + const config = { + title: 'test', + // custom: { + // property1: 1, + // }, + }; + setDynamicConfigValue( + config, + { + id: 'title', + value: 'applied', + }, + { + fieldConfigRegistry: customFieldRegistry, + data: [] as any, + field: { type: FieldType.number } as any, + dataFrameIndex: 0, + } + ); + + expect(config.title).toEqual('applied'); + }); + + it('applies custom dynamic config values', () => { + const config = { + custom: { + property1: 1, + }, + }; + setDynamicConfigValue( + config, + { + id: 'custom.property1', + value: 'applied', + }, + { + fieldConfigRegistry: customFieldRegistry, + data: [] as any, + field: { type: FieldType.number } as any, + dataFrameIndex: 0, + } + ); + + expect(config.custom.property1).toEqual('applied'); + }); + + it('applies nested custom dynamic config values', () => { + const config = { + custom: { + property3: { + nested: 1, + }, + }, + }; + setDynamicConfigValue( + config, + { + id: 'custom.property3.nested', + value: 'applied', + }, + { + fieldConfigRegistry: customFieldRegistry, + data: [] as any, + field: { type: FieldType.number } as any, + dataFrameIndex: 0, + } + ); + + expect(config.custom.property3.nested).toEqual('applied'); + }); + + it('removes properties', () => { + const config = { + title: 'title', + custom: { + property3: { + nested: 1, + }, + }, + }; + setDynamicConfigValue( + config, + { + id: 'custom.property3.nested', + value: undefined, + }, + { + fieldConfigRegistry: customFieldRegistry, + data: [] as any, + field: { type: FieldType.number } as any, + dataFrameIndex: 0, + } + ); + + setDynamicConfigValue( + config, + { + id: 'title', + value: undefined, + }, + { + fieldConfigRegistry: customFieldRegistry, + data: [] as any, + field: { type: FieldType.number } as any, + dataFrameIndex: 0, + } + ); + + expect(config.custom.property3).toEqual({}); + expect(config.title).toBeUndefined(); + }); +}); diff --git a/packages/grafana-data/src/field/fieldOverrides.ts b/packages/grafana-data/src/field/fieldOverrides.ts index ff18d42ce4c..51bafa9fa80 100644 --- a/packages/grafana-data/src/field/fieldOverrides.ts +++ b/packages/grafana-data/src/field/fieldOverrides.ts @@ -7,17 +7,21 @@ import { ThresholdsMode, FieldColorMode, ColorScheme, - FieldConfigEditorRegistry, FieldOverrideContext, ScopedVars, ApplyFieldOverrideOptions, + FieldConfigPropertyItem, } from '../types'; import { fieldMatchers, ReducerID, reduceField } from '../transformations'; import { FieldMatcher } from '../types/transformations'; import isNumber from 'lodash/isNumber'; +import set from 'lodash/set'; +import unset from 'lodash/unset'; +import get from 'lodash/get'; import { getDisplayProcessor } from './displayProcessor'; import { guessFieldTypeForField } from '../dataframe'; import { standardFieldConfigEditorRegistry } from './standardFieldConfigEditorRegistry'; +import { FieldConfigOptionsRegistry } from './FieldConfigOptionsRegistry'; interface OverrideProps { match: FieldMatcher; @@ -59,11 +63,13 @@ export function applyFieldOverrides(options: ApplyFieldOverrideOptions): DataFra return []; } - const source = options.fieldOptions; + const source = options.fieldConfig; if (!source) { return options.data; } + const fieldConfigRegistry = options.fieldConfigRegistry ?? standardFieldConfigEditorRegistry; + let range: GlobalMinMax | undefined = undefined; // Prepare the Matchers @@ -105,7 +111,7 @@ export function applyFieldOverrides(options: ApplyFieldOverrideOptions): DataFra data: options.data!, dataFrameIndex: index, replaceVariables: options.replaceVariables, - custom: options.custom, + fieldConfigRegistry: fieldConfigRegistry, }; // Anything in the field config that's not set by the datasource @@ -188,13 +194,12 @@ export function applyFieldOverrides(options: ApplyFieldOverrideOptions): DataFra } export interface FieldOverrideEnv extends FieldOverrideContext { - custom?: FieldConfigEditorRegistry; + fieldConfigRegistry: FieldConfigOptionsRegistry; } -function setDynamicConfigValue(config: FieldConfig, value: DynamicConfigValue, context: FieldOverrideEnv) { - const reg = value.custom ? context.custom : standardFieldConfigEditorRegistry; - - const item = reg?.getIfExists(value.prop); +export function setDynamicConfigValue(config: FieldConfig, value: DynamicConfigValue, context: FieldOverrideEnv) { + const reg = context.fieldConfigRegistry; + const item = reg.getIfExists(value.id); if (!item || !item.shouldApply(context.field!)) { return; } @@ -204,19 +209,19 @@ function setDynamicConfigValue(config: FieldConfig, value: DynamicConfigValue, c const remove = val === undefined || val === null; if (remove) { - if (value.custom && config.custom) { - delete config.custom[value.prop]; + if (item.isCustom && config.custom) { + unset(config.custom, item.path); } else { - delete (config as any)[value.prop]; + unset(config, item.path); } } else { - if (value.custom) { + if (item.isCustom) { if (!config.custom) { config.custom = {}; } - config.custom[value.prop] = val; + set(config.custom, item.path, val); } else { - (config as any)[value.prop] = val; + set(config, item.path, val); } } } @@ -224,48 +229,39 @@ function setDynamicConfigValue(config: FieldConfig, value: DynamicConfigValue, c // config -> from DS // defaults -> from Panel config export function setFieldConfigDefaults(config: FieldConfig, defaults: FieldConfig, context: FieldOverrideEnv) { - if (defaults) { - const keys = Object.keys(defaults); - for (const key of keys) { - if (key === 'custom') { - if (!context.custom) { - continue; - } - if (!config.custom) { - config.custom = {}; - } - const customKeys = Object.keys(defaults.custom!); - - for (const customKey of customKeys) { - processFieldConfigValue(config.custom!, defaults.custom!, customKey, context.custom, context); - } - } else { - // when config from ds exists for a given field -> use it - processFieldConfigValue(config, defaults, key, standardFieldConfigEditorRegistry, context); - } + for (const fieldConfigProperty of context.fieldConfigRegistry.list()) { + if (fieldConfigProperty.isCustom && !config.custom) { + config.custom = {}; } + processFieldConfigValue( + fieldConfigProperty.isCustom ? config.custom : config, + fieldConfigProperty.isCustom ? defaults.custom : defaults, + fieldConfigProperty, + context + ); } + validateFieldConfig(config); } const processFieldConfigValue = ( destination: Record, // it's mutable source: Record, - key: string, - registry: FieldConfigEditorRegistry, - context: FieldOverrideContext + fieldConfigProperty: FieldConfigPropertyItem, + context: FieldOverrideEnv ) => { - const currentConfig = destination[key]; + const currentConfig = get(destination, fieldConfigProperty.path); + if (currentConfig === null || currentConfig === undefined) { - const item = registry.getIfExists(key); + const item = context.fieldConfigRegistry.getIfExists(fieldConfigProperty.id); if (!item) { return; } if (item && item.shouldApply(context.field!)) { - const val = item.process(source[key], context, item.settings); + const val = item.process(get(source, item.path), context, item.settings); if (val !== undefined && val !== null) { - destination[key] = val; + set(destination, item.path, val); } } } diff --git a/packages/grafana-data/src/field/index.ts b/packages/grafana-data/src/field/index.ts index 2ba7edd4c50..548a9ab98e7 100644 --- a/packages/grafana-data/src/field/index.ts +++ b/packages/grafana-data/src/field/index.ts @@ -3,5 +3,6 @@ export * from './displayProcessor'; export * from './scale'; export * from './standardFieldConfigEditorRegistry'; export * from './overrides/processors'; +export { FieldConfigOptionsRegistry } from './FieldConfigOptionsRegistry'; export { applyFieldOverrides, validateFieldConfig } from './fieldOverrides'; diff --git a/packages/grafana-data/src/field/standardFieldConfigEditorRegistry.ts b/packages/grafana-data/src/field/standardFieldConfigEditorRegistry.ts index 41f108d3496..854d87eeb84 100644 --- a/packages/grafana-data/src/field/standardFieldConfigEditorRegistry.ts +++ b/packages/grafana-data/src/field/standardFieldConfigEditorRegistry.ts @@ -1,6 +1,6 @@ -import { FieldConfigEditorRegistry, FieldPropertyEditorItem } from '../types/fieldOverrides'; import { Registry, RegistryItem } from '../utils/Registry'; import { ComponentType } from 'react'; +import { FieldConfigOptionsRegistry } from './FieldConfigOptionsRegistry'; export interface StandardEditorProps { value: TValue; @@ -11,6 +11,6 @@ export interface StandardEditorsRegistryItem exte editor: ComponentType>; settings?: TSettings; } -export const standardFieldConfigEditorRegistry: FieldConfigEditorRegistry = new Registry(); +export const standardFieldConfigEditorRegistry = new FieldConfigOptionsRegistry(); export const standardEditorsRegistry = new Registry>(); diff --git a/packages/grafana-data/src/panel/PanelPlugin.test.tsx b/packages/grafana-data/src/panel/PanelPlugin.test.tsx index 66ea67c2526..9cc3c6e3bfc 100644 --- a/packages/grafana-data/src/panel/PanelPlugin.test.tsx +++ b/packages/grafana-data/src/panel/PanelPlugin.test.tsx @@ -1,11 +1,23 @@ import React from 'react'; -import { identityOverrideProcessor, standardEditorsRegistry } from '../field'; -import { PanelPlugin, standardFieldConfigProperties } from './PanelPlugin'; +import { identityOverrideProcessor, standardEditorsRegistry, standardFieldConfigEditorRegistry } from '../field'; +import { PanelPlugin } from './PanelPlugin'; import { FieldConfigProperty } from '../types'; describe('PanelPlugin', () => { describe('declarative options', () => { beforeAll(() => { + standardFieldConfigEditorRegistry.setInit(() => { + return [ + { + id: 'min', + path: 'min', + }, + { + id: 'max', + path: 'max', + }, + ] as any; + }); standardEditorsRegistry.setInit(() => { return [ { @@ -14,26 +26,29 @@ describe('PanelPlugin', () => { ] as any; }); }); + test('field config UI API', () => { const panel = new PanelPlugin(() => { return
Panel
; }); - panel.setCustomFieldOptions(builder => { - builder.addCustomEditor({ - id: 'custom', - name: 'Custom', - description: 'Custom field config property description', - editor: () =>
Editor
, - override: () =>
Editor
, - process: identityOverrideProcessor, - settings: {}, - shouldApply: () => true, - }); + panel.useFieldConfig({ + useCustomConfig: builder => { + builder.addCustomEditor({ + id: 'custom', + path: 'custom', + name: 'Custom', + description: 'Custom field config property description', + editor: () =>
Editor
, + override: () =>
Editor
, + process: identityOverrideProcessor, + settings: {}, + shouldApply: () => true, + }); + }, }); - expect(panel.customFieldConfigs).toBeDefined(); - expect(panel.customFieldConfigs!.list()).toHaveLength(1); + expect(panel.fieldConfigRegistry.list()).toHaveLength(3); }); test('options UI API', () => { @@ -44,6 +59,7 @@ describe('PanelPlugin', () => { panel.setPanelOptions(builder => { builder.addCustomEditor({ id: 'option', + path: 'option', name: 'Option editor', description: 'Option editor description', editor: () =>
Editor
, @@ -66,18 +82,19 @@ describe('PanelPlugin', () => { panel.setPanelOptions(builder => { builder .addNumberInput({ - id: 'numericOption', + path: 'numericOption', name: 'Option editor', description: 'Option editor description', defaultValue: 10, }) .addNumberInput({ - id: 'numericOptionNoDefault', + path: 'numericOptionNoDefault', name: 'Option editor', description: 'Option editor description', }) .addCustomEditor({ id: 'customOption', + path: 'customOption', name: 'Option editor', description: 'Option editor description', editor: () =>
Editor
, @@ -101,7 +118,7 @@ describe('PanelPlugin', () => { panel.setPanelOptions(builder => { builder.addNumberInput({ - id: 'numericOption.nested', + path: 'numericOption.nested', name: 'Option editor', description: 'Option editor description', defaultValue: 10, @@ -122,30 +139,33 @@ describe('PanelPlugin', () => { return
Panel
; }); - panel.setCustomFieldOptions(builder => { - builder - .addNumberInput({ - id: 'numericOption', - name: 'Option editor', - description: 'Option editor description', - defaultValue: 10, - }) - .addNumberInput({ - id: 'numericOptionNoDefault', - name: 'Option editor', - description: 'Option editor description', - }) - .addCustomEditor({ - id: 'customOption', - name: 'Option editor', - description: 'Option editor description', - editor: () =>
Editor
, - override: () =>
Override editor
, - process: identityOverrideProcessor, - shouldApply: () => true, - settings: {}, - defaultValue: { value: 'Custom default value' }, - }); + panel.useFieldConfig({ + useCustomConfig: builder => { + builder + .addNumberInput({ + path: 'numericOption', + name: 'Option editor', + description: 'Option editor description', + defaultValue: 10, + }) + .addNumberInput({ + path: 'numericOptionNoDefault', + name: 'Option editor', + description: 'Option editor description', + }) + .addCustomEditor({ + id: 'customOption', + path: 'customOption', + name: 'Option editor', + description: 'Option editor description', + editor: () =>
Editor
, + override: () =>
Override editor
, + process: identityOverrideProcessor, + shouldApply: () => true, + settings: {}, + defaultValue: { value: 'Custom default value' }, + }); + }, }); const expectedDefaults = { @@ -161,13 +181,15 @@ describe('PanelPlugin', () => { return
Panel
; }); - panel.setCustomFieldOptions(builder => { - builder.addNumberInput({ - id: 'numericOption.nested', - name: 'Option editor', - description: 'Option editor description', - defaultValue: 10, - }); + panel.useFieldConfig({ + useCustomConfig: builder => { + builder.addNumberInput({ + path: 'numericOption.nested', + name: 'Option editor', + description: 'Option editor description', + defaultValue: 10, + }); + }, }); const expectedDefaults = { @@ -184,8 +206,8 @@ describe('PanelPlugin', () => { return
Panel
; }); - panel.useStandardFieldConfig(); - expect(panel.standardFieldConfigProperties).toEqual(Array.from(standardFieldConfigProperties.keys())); + panel.useFieldConfig(); + expect(panel.fieldConfigRegistry.list()).toHaveLength(2); }); test('selected standard config', () => { @@ -193,8 +215,10 @@ describe('PanelPlugin', () => { return
Panel
; }); - panel.useStandardFieldConfig([FieldConfigProperty.Min, FieldConfigProperty.Thresholds]); - expect(panel.standardFieldConfigProperties).toEqual(['min', 'thresholds']); + panel.useFieldConfig({ + standardOptions: [FieldConfigProperty.Min, FieldConfigProperty.Max], + }); + expect(panel.fieldConfigRegistry.list()).toHaveLength(2); }); describe('default values', () => { @@ -203,17 +227,21 @@ describe('PanelPlugin', () => { return
Panel
; }); - panel.useStandardFieldConfig([FieldConfigProperty.Color, FieldConfigProperty.Min], { - [FieldConfigProperty.Color]: '#ff00ff', - [FieldConfigProperty.Min]: 10, + panel.useFieldConfig({ + standardOptions: [FieldConfigProperty.Max, FieldConfigProperty.Min], + standardOptionsDefaults: { + [FieldConfigProperty.Max]: 20, + [FieldConfigProperty.Min]: 10, + }, }); - expect(panel.standardFieldConfigProperties).toEqual(['color', 'min']); + expect(panel.fieldConfigRegistry.list()).toHaveLength(2); expect(panel.fieldConfigDefaults).toEqual({ defaults: { min: 10, - color: '#ff00ff', + max: 20, + custom: {}, }, overrides: [], }); @@ -224,16 +252,20 @@ describe('PanelPlugin', () => { return
Panel
; }); - panel.useStandardFieldConfig([FieldConfigProperty.Color], { - [FieldConfigProperty.Color]: '#ff00ff', - [FieldConfigProperty.Min]: 10, + panel.useFieldConfig({ + standardOptions: [FieldConfigProperty.Max], + standardOptionsDefaults: { + [FieldConfigProperty.Max]: 20, + [FieldConfigProperty.Min]: 10, + }, }); - expect(panel.standardFieldConfigProperties).toEqual(['color']); + expect(panel.fieldConfigRegistry.list()).toHaveLength(1); expect(panel.fieldConfigDefaults).toEqual({ defaults: { - color: '#ff00ff', + max: 20, + custom: {}, }, overrides: [], }); diff --git a/packages/grafana-data/src/panel/PanelPlugin.ts b/packages/grafana-data/src/panel/PanelPlugin.ts index c382b932c04..b30d547e0d7 100644 --- a/packages/grafana-data/src/panel/PanelPlugin.ts +++ b/packages/grafana-data/src/panel/PanelPlugin.ts @@ -1,5 +1,4 @@ import { - FieldConfigEditorRegistry, FieldConfigSource, GrafanaPlugin, PanelEditorProps, @@ -9,55 +8,34 @@ import { PanelProps, PanelTypeChangedHandler, FieldConfigProperty, - ThresholdsMode, } from '../types'; import { FieldConfigEditorBuilder, PanelOptionsEditorBuilder } from '../utils/OptionsUIBuilders'; import { ComponentClass, ComponentType } from 'react'; import set from 'lodash/set'; import { deprecationWarning } from '../utils'; +import { FieldConfigOptionsRegistry, standardFieldConfigEditorRegistry } from '../field'; -export const allStandardFieldConfigProperties: FieldConfigProperty[] = [ - FieldConfigProperty.Min, - FieldConfigProperty.Max, - FieldConfigProperty.Title, - FieldConfigProperty.Unit, - FieldConfigProperty.Decimals, - FieldConfigProperty.NoValue, - FieldConfigProperty.Color, - FieldConfigProperty.Thresholds, - FieldConfigProperty.Mappings, - FieldConfigProperty.Links, -]; - -export const standardFieldConfigDefaults: Partial> = { - [FieldConfigProperty.Thresholds]: { - mode: ThresholdsMode.Absolute, - steps: [ - { value: -Infinity, color: 'green' }, - { value: 80, color: 'red' }, - ], - }, - [FieldConfigProperty.Mappings]: [], -}; - -export const standardFieldConfigProperties = new Map(allStandardFieldConfigProperties.map(p => [p, undefined])); +export interface SetFieldConfigOptionsArgs { + standardOptions?: FieldConfigProperty[]; + standardOptionsDefaults?: Partial>; + useCustomConfig?: (builder: FieldConfigEditorBuilder) => void; +} export class PanelPlugin extends GrafanaPlugin< PanelPluginMeta > { private _defaults?: TOptions; - private _standardFieldConfigProperties?: Map; - private _fieldConfigDefaults: FieldConfigSource = { defaults: {}, overrides: [], }; - private _customFieldConfigs?: FieldConfigEditorRegistry; - private customFieldConfigsUIBuilder = new FieldConfigEditorBuilder(); - private registerCustomFieldConfigs?: (builder: FieldConfigEditorBuilder) => void; + + private _fieldConfigRegistry?: FieldConfigOptionsRegistry; + private _initConfigRegistry = () => { + return new FieldConfigOptionsRegistry(); + }; private _optionEditors?: PanelOptionEditorsRegistry; - private optionsUIBuilder = new PanelOptionsEditorBuilder(); private registerOptionEditors?: (builder: PanelOptionsEditorBuilder) => void; panel: ComponentType>; @@ -94,39 +72,21 @@ export class PanelPlugin { - let customPropertiesDefaults = this._fieldConfigDefaults.defaults.custom; + const configDefaults = this._fieldConfigDefaults.defaults; + configDefaults.custom = {} as TFieldConfigOptions; - if (!customPropertiesDefaults) { - customPropertiesDefaults = {} as TFieldConfigOptions; - } - const editors = this.customFieldConfigs; - - if (editors && editors.list().length !== 0) { - for (const editor of editors.list()) { - set(customPropertiesDefaults, editor.id, editor.defaultValue); - } + for (const option of this.fieldConfigRegistry.list()) { + set(configDefaults, option.id, option.defaultValue); } return { defaults: { - ...(this._standardFieldConfigProperties ? Object.fromEntries(this._standardFieldConfigProperties) : {}), - custom: - Object.keys(customPropertiesDefaults).length > 0 - ? { - ...customPropertiesDefaults, - } - : undefined, - ...this._fieldConfigDefaults.defaults, + ...configDefaults, }, - // TODO: not sure yet what about overrides, if anything overrides: this._fieldConfigDefaults.overrides, }; } - get standardFieldConfigProperties() { - return this._standardFieldConfigProperties ? Array.from(this._standardFieldConfigProperties.keys()) : []; - } - /** * @deprecated setDefaults is deprecated in favor of setPanelOptions */ @@ -136,19 +96,19 @@ export class PanelPlugin(); + this.registerOptionEditors(builder); + this._optionEditors = builder.getRegistry(); } return this._optionEditors; @@ -188,47 +148,6 @@ export class PanelPlugin(ShapePanel) - * .setCustomFieldOptions(builder => { - * builder - * .addNumberInput({ - * id: 'shapeBorderWidth', - * name: 'Border width', - * description: 'Border width of the shape', - * settings: { - * min: 1, - * max: 5, - * }, - * }) - * .addSelect({ - * id: 'displayMode', - * name: 'Display mode', - * description: 'How the shape shout be rendered' - * settings: { - * options: [{value: 'fill', label: 'Fill' }, {value: 'transparent', label: 'Transparent }] - * }, - * }) - * }) - * ``` - * - * @public - **/ - setCustomFieldOptions(builder: (builder: FieldConfigEditorBuilder) => void) { - // builder is applied lazily when custom field configs are accessed - this.registerCustomFieldConfigs = builder; - return this; - } - /** * Enables panel options editor creation * @@ -277,44 +196,93 @@ export class PanelPlugin(ShapePanel) - * .useStandardFieldConfig(); + * .useFieldConfig(); * * // when plugin should only display specific standard options * // note, that options will be displayed in the order they are provided * export const plugin = new PanelPlugin(ShapePanel) - * .useStandardFieldConfig([FieldConfigProperty.Min, FieldConfigProperty.Max, FieldConfigProperty.Links]); + * .useFieldConfig({ + * standardOptions: [FieldConfigProperty.Min, FieldConfigProperty.Max] + * }); * * // when standard option's default value needs to be provided * export const plugin = new PanelPlugin(ShapePanel) - * .useStandardFieldConfig([FieldConfigProperty.Min, FieldConfigProperty.Max], { - * [FieldConfigProperty.Min]: 20, - * [FieldConfigProperty.Max]: 100 + * .useFieldConfig({ + * standardOptions: [FieldConfigProperty.Min, FieldConfigProperty.Max], + * standardOptionsDefaults: { + * [FieldConfigProperty.Min]: 20, + * [FieldConfigProperty.Max]: 100 + * } + * }); + * + * // when custom field config options needs to be provided + * export const plugin = new PanelPlugin(ShapePanel) + * .useFieldConfig({ + * useCustomConfig: builder => { + builder + * .addNumberInput({ + * id: 'shapeBorderWidth', + * name: 'Border width', + * description: 'Border width of the shape', + * settings: { + * min: 1, + * max: 5, + * }, + * }) + * .addSelect({ + * id: 'displayMode', + * name: 'Display mode', + * description: 'How the shape shout be rendered' + * settings: { + * options: [{value: 'fill', label: 'Fill' }, {value: 'transparent', label: 'Transparent }] + * }, + * }) + * }, * }); * * ``` * * @public */ - useStandardFieldConfig( - properties?: FieldConfigProperty[] | null, - customDefaults?: Partial> - ) { - if (!properties) { - this._standardFieldConfigProperties = standardFieldConfigProperties; - return this; - } else { - this._standardFieldConfigProperties = new Map(properties.map(p => [p, standardFieldConfigProperties.get(p)])); - } + useFieldConfig(config?: SetFieldConfigOptionsArgs) { + // builder is applied lazily when custom field configs are accessed + this._initConfigRegistry = () => { + const registry = new FieldConfigOptionsRegistry(); - const defaults = customDefaults ?? standardFieldConfigDefaults; + // Add custom options + if (config && config.useCustomConfig) { + const builder = new FieldConfigEditorBuilder(); + config.useCustomConfig(builder); - if (defaults) { - Object.keys(defaults).map(k => { - if (properties.indexOf(k as FieldConfigProperty) > -1) { - this._standardFieldConfigProperties!.set(k as FieldConfigProperty, defaults[k as FieldConfigProperty]); + for (const customProp of builder.getRegistry().list()) { + customProp.isCustom = true; + // need to do something to make the custom items not conflict with standard ones + // problem is id (registry index) is used as property path + // so sort of need a property path on the FieldPropertyEditorItem + customProp.id = 'custom.' + customProp.id; + registry.register(customProp); } - }); - } + } + + if (config && config.standardOptions) { + for (const standardOption of config.standardOptions) { + const standardEditor = standardFieldConfigEditorRegistry.get(standardOption); + registry.register({ + ...standardEditor, + defaultValue: + (config.standardOptionsDefaults && config.standardOptionsDefaults[standardOption]) || + standardEditor.defaultValue, + }); + } + } else { + for (const fieldConfigProp of standardFieldConfigEditorRegistry.list()) { + registry.register(fieldConfigProp); + } + } + + return registry; + }; + return this; } } diff --git a/packages/grafana-data/src/transformations/transformers.ts b/packages/grafana-data/src/transformations/transformers.ts index 09ec993e043..cc575a0ad0b 100644 --- a/packages/grafana-data/src/transformations/transformers.ts +++ b/packages/grafana-data/src/transformations/transformers.ts @@ -7,7 +7,10 @@ import { filterFieldsByNameTransformer, FilterFieldsByNameTransformerOptions } f import { noopTransformer } from './transformers/noop'; import { DataTransformerConfig, DataTransformerInfo } from '../types/transformations'; import { filterFramesByRefIdTransformer } from './transformers/filterByRefId'; +import { orderFieldsTransformer } from './transformers/order'; +import { organizeFieldsTransformer } from './transformers/organize'; import { seriesToColumnsTransformer } from './transformers/seriesToColumns'; +import { renameFieldsTransformer } from './transformers/rename'; // Initalize the Registry @@ -67,9 +70,12 @@ export const transformersRegistry = new TransformerRegistry(() => [ filterFieldsByNameTransformer, filterFramesTransformer, filterFramesByRefIdTransformer, + orderFieldsTransformer, + organizeFieldsTransformer, appendTransformer, reduceTransformer, seriesToColumnsTransformer, + renameFieldsTransformer, ]); export { ReduceTransformerOptions, FilterFieldsByNameTransformerOptions }; diff --git a/packages/grafana-data/src/transformations/transformers/ids.ts b/packages/grafana-data/src/transformations/transformers/ids.ts index aeeefca06bc..686cbd847ef 100644 --- a/packages/grafana-data/src/transformations/transformers/ids.ts +++ b/packages/grafana-data/src/transformations/transformers/ids.ts @@ -3,6 +3,9 @@ export enum DataTransformerID { append = 'append', // Merge all series together // rotate = 'rotate', // Columns to rows reduce = 'reduce', // Run calculations on fields + order = 'order', // order fields based on user configuration + organize = 'organize', // order, rename and filter based on user configuration + rename = 'rename', // rename field based on user configuration seriesToColumns = 'seriesToColumns', // former table transform timeseries_to_columns filterFields = 'filterFields', // Pick some fields (keep all frames) diff --git a/packages/grafana-data/src/transformations/transformers/order.test.ts b/packages/grafana-data/src/transformations/transformers/order.test.ts new file mode 100644 index 00000000000..709b48957bf --- /dev/null +++ b/packages/grafana-data/src/transformations/transformers/order.test.ts @@ -0,0 +1,148 @@ +import { + ArrayVector, + DataTransformerConfig, + DataTransformerID, + FieldType, + toDataFrame, + transformDataFrame, +} from '@grafana/data'; +import { OrderFieldsTransformerOptions } from './order'; + +describe('Order Transformer', () => { + describe('when consistent data is received', () => { + const data = toDataFrame({ + name: 'A', + fields: [ + { name: 'time', type: FieldType.time, values: [3000, 4000, 5000, 6000] }, + { name: 'temperature', type: FieldType.number, values: [10.3, 10.4, 10.5, 10.6] }, + { name: 'humidity', type: FieldType.number, values: [10000.3, 10000.4, 10000.5, 10000.6] }, + ], + }); + + it('should order according to config', () => { + const cfg: DataTransformerConfig = { + id: DataTransformerID.order, + options: { + indexByName: { + time: 2, + temperature: 0, + humidity: 1, + }, + }, + }; + + const ordered = transformDataFrame([cfg], [data])[0]; + + expect(ordered.fields).toEqual([ + { + config: {}, + name: 'temperature', + type: FieldType.number, + values: new ArrayVector([10.3, 10.4, 10.5, 10.6]), + }, + { + config: {}, + name: 'humidity', + type: FieldType.number, + values: new ArrayVector([10000.3, 10000.4, 10000.5, 10000.6]), + }, + { + config: {}, + name: 'time', + type: FieldType.time, + values: new ArrayVector([3000, 4000, 5000, 6000]), + }, + ]); + }); + }); + + describe('when inconsistent data is received', () => { + const data = toDataFrame({ + name: 'A', + fields: [ + { name: 'time', type: FieldType.time, values: [3000, 4000, 5000, 6000] }, + { name: 'pressure', type: FieldType.number, values: [10.3, 10.4, 10.5, 10.6] }, + { name: 'humidity', type: FieldType.number, values: [10000.3, 10000.4, 10000.5, 10000.6] }, + ], + }); + + it('should append fields missing in config at the end', () => { + const cfg: DataTransformerConfig = { + id: DataTransformerID.order, + options: { + indexByName: { + time: 2, + temperature: 0, + humidity: 1, + }, + }, + }; + + const ordered = transformDataFrame([cfg], [data])[0]; + + expect(ordered.fields).toEqual([ + { + config: {}, + name: 'humidity', + type: FieldType.number, + values: new ArrayVector([10000.3, 10000.4, 10000.5, 10000.6]), + }, + { + config: {}, + name: 'time', + type: FieldType.time, + values: new ArrayVector([3000, 4000, 5000, 6000]), + }, + { + config: {}, + name: 'pressure', + type: FieldType.number, + values: new ArrayVector([10.3, 10.4, 10.5, 10.6]), + }, + ]); + }); + }); + + describe('when transforming with empty configuration', () => { + const data = toDataFrame({ + name: 'A', + fields: [ + { name: 'time', type: FieldType.time, values: [3000, 4000, 5000, 6000] }, + { name: 'pressure', type: FieldType.number, values: [10.3, 10.4, 10.5, 10.6] }, + { name: 'humidity', type: FieldType.number, values: [10000.3, 10000.4, 10000.5, 10000.6] }, + ], + }); + + it('should keep the same order as in the incoming data', () => { + const cfg: DataTransformerConfig = { + id: DataTransformerID.order, + options: { + indexByName: {}, + }, + }; + + const ordered = transformDataFrame([cfg], [data])[0]; + + expect(ordered.fields).toEqual([ + { + config: {}, + name: 'time', + type: FieldType.time, + values: new ArrayVector([3000, 4000, 5000, 6000]), + }, + { + config: {}, + name: 'pressure', + type: FieldType.number, + values: new ArrayVector([10.3, 10.4, 10.5, 10.6]), + }, + { + config: {}, + name: 'humidity', + type: FieldType.number, + values: new ArrayVector([10000.3, 10000.4, 10000.5, 10000.6]), + }, + ]); + }); + }); +}); diff --git a/packages/grafana-data/src/transformations/transformers/order.ts b/packages/grafana-data/src/transformations/transformers/order.ts new file mode 100644 index 00000000000..baef0b25dec --- /dev/null +++ b/packages/grafana-data/src/transformations/transformers/order.ts @@ -0,0 +1,58 @@ +import { DataTransformerID } from './ids'; +import { DataTransformerInfo } from '../../types/transformations'; +import { DataFrame } from '../..'; +import { Field } from '../../types'; + +export interface OrderFieldsTransformerOptions { + indexByName: Record; +} + +export const orderFieldsTransformer: DataTransformerInfo = { + id: DataTransformerID.order, + name: 'Order fields by name', + description: 'Order fields based on configuration given by user', + defaultOptions: { + indexByName: {}, + }, + + /** + * Return a modified copy of the series. If the transform is not or should not + * be applied, just return the input series + */ + transformer: (options: OrderFieldsTransformerOptions) => { + const orderer = createFieldsOrderer(options.indexByName); + + return (data: DataFrame[]) => { + if (!Array.isArray(data) || data.length === 0) { + return data; + } + + return data.map(frame => ({ + ...frame, + fields: orderer(frame.fields), + })); + }; + }, +}; + +export const createFieldsComparer = (indexByName: Record) => (a: string, b: string) => { + return indexOfField(a, indexByName) - indexOfField(b, indexByName); +}; + +const createFieldsOrderer = (indexByName: Record) => (fields: Field[]) => { + if (!Array.isArray(fields) || fields.length === 0) { + return fields; + } + if (!indexByName || Object.keys(indexByName).length === 0) { + return fields; + } + const comparer = createFieldsComparer(indexByName); + return fields.sort((a, b) => comparer(a.name, b.name)); +}; + +const indexOfField = (fieldName: string, indexByName: Record) => { + if (Number.isInteger(indexByName[fieldName])) { + return indexByName[fieldName]; + } + return Number.MAX_SAFE_INTEGER; +}; diff --git a/packages/grafana-data/src/transformations/transformers/organize.test.ts b/packages/grafana-data/src/transformations/transformers/organize.test.ts new file mode 100644 index 00000000000..7ec62b4bcb2 --- /dev/null +++ b/packages/grafana-data/src/transformations/transformers/organize.test.ts @@ -0,0 +1,105 @@ +import { + ArrayVector, + DataTransformerConfig, + DataTransformerID, + FieldType, + toDataFrame, + transformDataFrame, +} from '@grafana/data'; +import { OrganizeFieldsTransformerOptions } from './organize'; + +describe('OrganizeFields Transformer', () => { + describe('when consistent data is received', () => { + const data = toDataFrame({ + name: 'A', + fields: [ + { name: 'time', type: FieldType.time, values: [3000, 4000, 5000, 6000] }, + { name: 'temperature', type: FieldType.number, values: [10.3, 10.4, 10.5, 10.6] }, + { name: 'humidity', type: FieldType.number, values: [10000.3, 10000.4, 10000.5, 10000.6] }, + ], + }); + + it('should order and filter according to config', () => { + const cfg: DataTransformerConfig = { + id: DataTransformerID.organize, + options: { + indexByName: { + time: 2, + temperature: 0, + humidity: 1, + }, + excludeByName: { + time: true, + }, + renameByName: { + humidity: 'renamed_humidity', + }, + }, + }; + + const organized = transformDataFrame([cfg], [data])[0]; + + expect(organized.fields).toEqual([ + { + config: {}, + name: 'temperature', + type: FieldType.number, + values: new ArrayVector([10.3, 10.4, 10.5, 10.6]), + }, + { + config: {}, + name: 'renamed_humidity', + type: FieldType.number, + values: new ArrayVector([10000.3, 10000.4, 10000.5, 10000.6]), + }, + ]); + }); + }); + + describe('when inconsistent data is received', () => { + const data = toDataFrame({ + name: 'A', + fields: [ + { name: 'time', type: FieldType.time, values: [3000, 4000, 5000, 6000] }, + { name: 'pressure', type: FieldType.number, values: [10.3, 10.4, 10.5, 10.6] }, + { name: 'humidity', type: FieldType.number, values: [10000.3, 10000.4, 10000.5, 10000.6] }, + ], + }); + + it('should append fields missing in config at the end', () => { + const cfg: DataTransformerConfig = { + id: DataTransformerID.organize, + options: { + indexByName: { + time: 2, + temperature: 0, + humidity: 1, + }, + excludeByName: { + humidity: true, + }, + renameByName: { + time: 'renamed_time', + }, + }, + }; + + const organized = transformDataFrame([cfg], [data])[0]; + + expect(organized.fields).toEqual([ + { + config: {}, + name: 'renamed_time', + type: FieldType.time, + values: new ArrayVector([3000, 4000, 5000, 6000]), + }, + { + config: {}, + name: 'pressure', + type: FieldType.number, + values: new ArrayVector([10.3, 10.4, 10.5, 10.6]), + }, + ]); + }); + }); +}); diff --git a/packages/grafana-data/src/transformations/transformers/organize.ts b/packages/grafana-data/src/transformations/transformers/organize.ts new file mode 100644 index 00000000000..457ef214f37 --- /dev/null +++ b/packages/grafana-data/src/transformations/transformers/organize.ts @@ -0,0 +1,53 @@ +import { DataTransformerID } from './ids'; +import { DataTransformerInfo } from '../../types/transformations'; +import { OrderFieldsTransformerOptions, orderFieldsTransformer } from './order'; +import { filterFieldsByNameTransformer } from './filterByName'; +import { DataFrame } from '../..'; +import { RenameFieldsTransformerOptions, renameFieldsTransformer } from './rename'; + +export interface OrganizeFieldsTransformerOptions + extends OrderFieldsTransformerOptions, + RenameFieldsTransformerOptions { + excludeByName: Record; +} + +export const organizeFieldsTransformer: DataTransformerInfo = { + id: DataTransformerID.organize, + name: 'Organize fields by name', + description: 'Order, filter and rename fields based on configuration given by user', + defaultOptions: { + excludeByName: {}, + indexByName: {}, + renameByName: {}, + }, + + /** + * Return a modified copy of the series. If the transform is not or should not + * be applied, just return the input series + */ + transformer: (options: OrganizeFieldsTransformerOptions) => { + const rename = renameFieldsTransformer.transformer(options); + const order = orderFieldsTransformer.transformer(options); + const filter = filterFieldsByNameTransformer.transformer({ + exclude: mapToExcludeRegexp(options.excludeByName), + }); + + return (data: DataFrame[]) => rename(order(filter(data))); + }, +}; + +const mapToExcludeRegexp = (excludeByName: Record): string | undefined => { + if (!excludeByName) { + return undefined; + } + + const fieldsToExclude = Object.keys(excludeByName) + .filter(name => excludeByName[name]) + .join('|'); + + if (fieldsToExclude.length === 0) { + return undefined; + } + + return `^(${fieldsToExclude})$`; +}; diff --git a/packages/grafana-data/src/transformations/transformers/rename.test.ts b/packages/grafana-data/src/transformations/transformers/rename.test.ts new file mode 100644 index 00000000000..2d10f109c17 --- /dev/null +++ b/packages/grafana-data/src/transformations/transformers/rename.test.ts @@ -0,0 +1,148 @@ +import { + ArrayVector, + DataTransformerConfig, + DataTransformerID, + FieldType, + toDataFrame, + transformDataFrame, +} from '@grafana/data'; +import { RenameFieldsTransformerOptions } from './rename'; + +describe('Rename Transformer', () => { + describe('when consistent data is received', () => { + const data = toDataFrame({ + name: 'A', + fields: [ + { name: 'time', type: FieldType.time, values: [3000, 4000, 5000, 6000] }, + { name: 'temperature', type: FieldType.number, values: [10.3, 10.4, 10.5, 10.6] }, + { name: 'humidity', type: FieldType.number, values: [10000.3, 10000.4, 10000.5, 10000.6] }, + ], + }); + + it('should rename according to config', () => { + const cfg: DataTransformerConfig = { + id: DataTransformerID.rename, + options: { + renameByName: { + time: 'Total time', + humidity: 'Moistiness', + temperature: 'how cold is it?', + }, + }, + }; + + const renamed = transformDataFrame([cfg], [data])[0]; + + expect(renamed.fields).toEqual([ + { + config: {}, + name: 'Total time', + type: FieldType.time, + values: new ArrayVector([3000, 4000, 5000, 6000]), + }, + { + config: {}, + name: 'how cold is it?', + type: FieldType.number, + values: new ArrayVector([10.3, 10.4, 10.5, 10.6]), + }, + { + config: {}, + name: 'Moistiness', + type: FieldType.number, + values: new ArrayVector([10000.3, 10000.4, 10000.5, 10000.6]), + }, + ]); + }); + }); + + describe('when inconsistent data is received', () => { + const data = toDataFrame({ + name: 'A', + fields: [ + { name: 'time', type: FieldType.time, values: [3000, 4000, 5000, 6000] }, + { name: 'pressure', type: FieldType.number, values: [10.3, 10.4, 10.5, 10.6] }, + { name: 'humidity', type: FieldType.number, values: [10000.3, 10000.4, 10000.5, 10000.6] }, + ], + }); + + it('should not rename fields missing in config', () => { + const cfg: DataTransformerConfig = { + id: DataTransformerID.rename, + options: { + renameByName: { + time: 'ttl', + temperature: 'temp', + humidity: 'hum', + }, + }, + }; + + const renamed = transformDataFrame([cfg], [data])[0]; + + expect(renamed.fields).toEqual([ + { + config: {}, + name: 'ttl', + type: FieldType.time, + values: new ArrayVector([3000, 4000, 5000, 6000]), + }, + { + config: {}, + name: 'pressure', + type: FieldType.number, + values: new ArrayVector([10.3, 10.4, 10.5, 10.6]), + }, + { + config: {}, + name: 'hum', + type: FieldType.number, + values: new ArrayVector([10000.3, 10000.4, 10000.5, 10000.6]), + }, + ]); + }); + }); + + describe('when transforming with empty configuration', () => { + const data = toDataFrame({ + name: 'A', + fields: [ + { name: 'time', type: FieldType.time, values: [3000, 4000, 5000, 6000] }, + { name: 'pressure', type: FieldType.number, values: [10.3, 10.4, 10.5, 10.6] }, + { name: 'humidity', type: FieldType.number, values: [10000.3, 10000.4, 10000.5, 10000.6] }, + ], + }); + + it('should keep the same names as in the incoming data', () => { + const cfg: DataTransformerConfig = { + id: DataTransformerID.rename, + options: { + renameByName: {}, + }, + }; + + const renamed = transformDataFrame([cfg], [data])[0]; + + expect(renamed.fields).toEqual([ + { + config: {}, + name: 'time', + type: FieldType.time, + values: new ArrayVector([3000, 4000, 5000, 6000]), + }, + { + config: {}, + name: 'pressure', + type: FieldType.number, + values: new ArrayVector([10.3, 10.4, 10.5, 10.6]), + }, + { + config: {}, + name: 'humidity', + type: FieldType.number, + values: new ArrayVector([10000.3, 10000.4, 10000.5, 10000.6]), + }, + ]); + }); + }); +}); diff --git a/packages/grafana-data/src/transformations/transformers/rename.ts b/packages/grafana-data/src/transformations/transformers/rename.ts new file mode 100644 index 00000000000..9982112d4fc --- /dev/null +++ b/packages/grafana-data/src/transformations/transformers/rename.ts @@ -0,0 +1,54 @@ +import { DataTransformerID } from './ids'; +import { DataTransformerInfo } from '../../types/transformations'; +import { DataFrame, Field } from '../..'; + +export interface RenameFieldsTransformerOptions { + renameByName: Record; +} + +export const renameFieldsTransformer: DataTransformerInfo = { + id: DataTransformerID.rename, + name: 'Rename fields by name', + description: 'Rename fields based on configuration given by user', + defaultOptions: { + renameByName: {}, + }, + + /** + * Return a modified copy of the series. If the transform is not or should not + * be applied, just return the input series + */ + transformer: (options: RenameFieldsTransformerOptions) => { + const renamer = createRenamer(options.renameByName); + + return (data: DataFrame[]) => { + if (!Array.isArray(data) || data.length === 0) { + return data; + } + + return data.map(frame => ({ + ...frame, + fields: renamer(frame.fields), + })); + }; + }, +}; + +const createRenamer = (renameByName: Record) => (fields: Field[]): Field[] => { + if (!renameByName || Object.keys(renameByName).length === 0) { + return fields; + } + + return fields.map(field => { + const renameTo = renameByName[field.name]; + + if (typeof renameTo !== 'string' || renameTo.length === 0) { + return field; + } + + return { + ...field, + name: renameTo, + }; + }); +}; diff --git a/packages/grafana-data/src/types/OptionsUIRegistryBuilder.ts b/packages/grafana-data/src/types/OptionsUIRegistryBuilder.ts index 87990e7ba73..55be700bcd2 100644 --- a/packages/grafana-data/src/types/OptionsUIRegistryBuilder.ts +++ b/packages/grafana-data/src/types/OptionsUIRegistryBuilder.ts @@ -6,7 +6,7 @@ import { NumberFieldConfigSettings, SelectFieldConfigSettings, StringFieldConfig * Option editor registry item */ export interface OptionsEditorItem extends RegistryItem { - id: (keyof TOptions & string) | string; + path: (keyof TOptions & string) | string; editor: ComponentType; settings?: TSettings; defaultValue?: TValue; diff --git a/packages/grafana-data/src/types/fieldOverrides.ts b/packages/grafana-data/src/types/fieldOverrides.ts index 55584003a0f..b8e335f02b8 100644 --- a/packages/grafana-data/src/types/fieldOverrides.ts +++ b/packages/grafana-data/src/types/fieldOverrides.ts @@ -15,9 +15,8 @@ import { StandardEditorProps } from '../field'; import { OptionsEditorItem } from './OptionsUIRegistryBuilder'; export interface DynamicConfigValue { - prop: string; + id: string; value?: any; - custom?: boolean; } export interface ConfigOverrideRule { @@ -43,19 +42,19 @@ export interface FieldOverrideContext { export interface FieldConfigEditorProps extends Omit, 'item'> { - item: FieldPropertyEditorItem; // The property info + item: FieldConfigPropertyItem; // The property info value: TValue; context: FieldOverrideContext; onChange: (value?: TValue) => void; } export interface FieldOverrideEditorProps extends Omit, 'item'> { - item: FieldPropertyEditorItem; + item: FieldConfigPropertyItem; context: FieldOverrideContext; } export interface FieldConfigEditorConfig { - id: (keyof TOptions & string) | string; + path: (keyof TOptions & string) | string; name: string; description: string; settings?: TSettings; @@ -63,11 +62,14 @@ export interface FieldConfigEditorConfig +export interface FieldConfigPropertyItem extends OptionsEditorItem, TValue> { // An editor that can be filled in with context info (template variables etc) override: ComponentType>; + /** true for plugin field config properties */ + isCustom?: boolean; + // Convert the override value to a well typed value process: (value: any, context: FieldOverrideContext, settings?: TSettings) => TValue | undefined | null; @@ -75,17 +77,14 @@ export interface FieldPropertyEditorItem boolean; } -export type FieldConfigEditorRegistry = Registry; - export interface ApplyFieldOverrideOptions { data?: DataFrame[]; - fieldOptions: FieldConfigSource; + fieldConfig: FieldConfigSource; replaceVariables: InterpolateFunction; theme: GrafanaTheme; timeZone?: TimeZone; autoMinMax?: boolean; - standard?: FieldConfigEditorRegistry; - custom?: FieldConfigEditorRegistry; + fieldConfigRegistry?: Registry; } export enum FieldConfigProperty { diff --git a/packages/grafana-data/src/types/index.ts b/packages/grafana-data/src/types/index.ts index 33d9ca94a34..66af316e931 100644 --- a/packages/grafana-data/src/types/index.ts +++ b/packages/grafana-data/src/types/index.ts @@ -19,6 +19,7 @@ export * from './datasource'; export * from './panel'; export * from './plugin'; export * from './thresholds'; +export * from './templateVars'; export * from './fieldColor'; export * from './theme'; export * from './orgs'; diff --git a/packages/grafana-data/src/types/panel.ts b/packages/grafana-data/src/types/panel.ts index c2d1c488c6f..0051e4c8a2b 100644 --- a/packages/grafana-data/src/types/panel.ts +++ b/packages/grafana-data/src/types/panel.ts @@ -119,7 +119,7 @@ export interface PanelOptionsEditorItem, TValue> {} export interface PanelOptionsEditorConfig { - id: (keyof TOptions & string) | string; + path: (keyof TOptions & string) | string; name: string; description: string; settings?: TSettings; diff --git a/packages/grafana-data/src/types/templateVars.ts b/packages/grafana-data/src/types/templateVars.ts new file mode 100644 index 00000000000..1f9e89b5d44 --- /dev/null +++ b/packages/grafana-data/src/types/templateVars.ts @@ -0,0 +1,7 @@ +export type VariableType = 'query' | 'adhoc' | 'constant' | 'datasource' | 'interval' | 'textbox' | 'custom'; + +export interface VariableModel { + type: VariableType; + name: string; + label: string | null; +} diff --git a/packages/grafana-data/src/utils/OptionsUIBuilders.ts b/packages/grafana-data/src/utils/OptionsUIBuilders.ts index 726d90bae6e..7740ba7c277 100644 --- a/packages/grafana-data/src/utils/OptionsUIBuilders.ts +++ b/packages/grafana-data/src/utils/OptionsUIBuilders.ts @@ -1,7 +1,7 @@ import { FieldType, FieldConfigEditorProps, - FieldPropertyEditorItem, + FieldConfigPropertyItem, PanelOptionsEditorConfig, PanelOptionsEditorItem, FieldConfigEditorConfig, @@ -29,11 +29,12 @@ import { export class FieldConfigEditorBuilder extends OptionsUIRegistryBuilder< TOptions, FieldConfigEditorProps, - FieldPropertyEditorItem + FieldConfigPropertyItem > { addNumberInput(config: FieldConfigEditorConfig) { return this.addCustomEditor({ ...config, + id: config.path, override: standardEditorsRegistry.get('number').editor as any, editor: standardEditorsRegistry.get('number').editor as any, process: numberOverrideProcessor, @@ -45,6 +46,7 @@ export class FieldConfigEditorBuilder extends OptionsUIRegistryBuilder addTextInput(config: FieldConfigEditorConfig) { return this.addCustomEditor({ ...config, + id: config.path, override: standardEditorsRegistry.get('text').editor as any, editor: standardEditorsRegistry.get('text').editor as any, process: stringOverrideProcessor, @@ -58,6 +60,7 @@ export class FieldConfigEditorBuilder extends OptionsUIRegistryBuilder ) { return this.addCustomEditor({ ...config, + id: config.path, override: standardEditorsRegistry.get('select').editor as any, editor: standardEditorsRegistry.get('select').editor as any, process: selectOverrideProcessor, @@ -70,6 +73,7 @@ export class FieldConfigEditorBuilder extends OptionsUIRegistryBuilder addRadio(config: FieldConfigEditorConfig) { return this.addCustomEditor({ ...config, + id: config.path, override: standardEditorsRegistry.get('radio').editor as any, editor: standardEditorsRegistry.get('radio').editor as any, process: selectOverrideProcessor, @@ -82,6 +86,7 @@ export class FieldConfigEditorBuilder extends OptionsUIRegistryBuilder addBooleanSwitch(config: FieldConfigEditorConfig) { return this.addCustomEditor({ ...config, + id: config.path, editor: standardEditorsRegistry.get('boolean').editor as any, override: standardEditorsRegistry.get('boolean').editor as any, process: booleanOverrideProcessor, @@ -95,6 +100,7 @@ export class FieldConfigEditorBuilder extends OptionsUIRegistryBuilder ) { return this.addCustomEditor({ ...config, + id: config.path, editor: standardEditorsRegistry.get('color').editor as any, override: standardEditorsRegistry.get('color').editor as any, process: identityOverrideProcessor, @@ -108,6 +114,7 @@ export class FieldConfigEditorBuilder extends OptionsUIRegistryBuilder ) { return this.addCustomEditor({ ...config, + id: config.path, editor: standardEditorsRegistry.get('unit').editor as any, override: standardEditorsRegistry.get('unit').editor as any, process: unitOverrideProcessor, @@ -128,6 +135,7 @@ export class PanelOptionsEditorBuilder extends OptionsUIRegistryBuilde addNumberInput(config: PanelOptionsEditorConfig) { return this.addCustomEditor({ ...config, + id: config.path, editor: standardEditorsRegistry.get('number').editor as any, }); } @@ -135,6 +143,7 @@ export class PanelOptionsEditorBuilder extends OptionsUIRegistryBuilde addTextInput(config: PanelOptionsEditorConfig) { return this.addCustomEditor({ ...config, + id: config.path, editor: standardEditorsRegistry.get('text').editor as any, }); } @@ -144,6 +153,7 @@ export class PanelOptionsEditorBuilder extends OptionsUIRegistryBuilde ) { return this.addCustomEditor({ ...config, + id: config.path, editor: standardEditorsRegistry.get('select').editor as any, }); } @@ -153,6 +163,7 @@ export class PanelOptionsEditorBuilder extends OptionsUIRegistryBuilde ) { return this.addCustomEditor({ ...config, + id: config.path, editor: standardEditorsRegistry.get('radio').editor as any, }); } @@ -160,6 +171,7 @@ export class PanelOptionsEditorBuilder extends OptionsUIRegistryBuilde addBooleanSwitch(config: PanelOptionsEditorConfig) { return this.addCustomEditor({ ...config, + id: config.path, editor: standardEditorsRegistry.get('boolean').editor as any, }); } @@ -169,6 +181,7 @@ export class PanelOptionsEditorBuilder extends OptionsUIRegistryBuilde ): this { return this.addCustomEditor({ ...config, + id: config.path, editor: standardEditorsRegistry.get('color').editor as any, settings: config.settings || {}, }); @@ -179,6 +192,7 @@ export class PanelOptionsEditorBuilder extends OptionsUIRegistryBuilde ): this { return this.addCustomEditor({ ...config, + id: config.path, editor: standardEditorsRegistry.get('unit').editor as any, }); } diff --git a/packages/grafana-data/src/utils/Registry.ts b/packages/grafana-data/src/utils/Registry.ts index 3152de6991f..16def86a15d 100644 --- a/packages/grafana-data/src/utils/Registry.ts +++ b/packages/grafana-data/src/utils/Registry.ts @@ -124,7 +124,7 @@ export class Registry { if (!this.initialized) { this.getIfExists('xxx'); // will trigger init } - return [...this.ordered]; // copy of everythign just in case + return this.ordered; // copy of everythign just in case } register(ext: T) { diff --git a/packages/grafana-data/src/utils/tests/mockStandardProperties.ts b/packages/grafana-data/src/utils/tests/mockStandardProperties.ts new file mode 100644 index 00000000000..50e2f8f9c54 --- /dev/null +++ b/packages/grafana-data/src/utils/tests/mockStandardProperties.ts @@ -0,0 +1,170 @@ +import { identityOverrideProcessor } from '../../field'; +import { ThresholdsMode } from '../../types'; + +export const mockStandardProperties = () => { + const title = { + id: 'title', + path: 'title', + name: 'Title', + description: "Field's title", + editor: () => null, + override: () => null, + process: identityOverrideProcessor, + settings: { + placeholder: 'none', + expandTemplateVars: true, + }, + shouldApply: () => true, + }; + + const unit = { + id: 'unit', + path: 'unit', + name: 'Unit', + description: 'Value units', + + editor: () => null, + override: () => null, + process: identityOverrideProcessor, + + settings: { + placeholder: 'none', + }, + + shouldApply: () => true, + }; + + const min = { + id: 'min', + path: 'min', + name: 'Min', + description: 'Minimum expected value', + + editor: () => null, + override: () => null, + process: identityOverrideProcessor, + + settings: { + placeholder: 'auto', + }, + shouldApply: () => true, + }; + + const max = { + id: 'max', + path: 'max', + name: 'Max', + description: 'Maximum expected value', + + editor: () => null, + override: () => null, + process: identityOverrideProcessor, + + settings: { + placeholder: 'auto', + }, + + shouldApply: () => true, + }; + + const decimals = { + id: 'decimals', + path: 'decimals', + name: 'Decimals', + description: 'Number of decimal to be shown for a value', + + editor: () => null, + override: () => null, + process: identityOverrideProcessor, + + settings: { + placeholder: 'auto', + min: 0, + max: 15, + integer: true, + }, + + shouldApply: () => true, + }; + + const thresholds = { + id: 'thresholds', + path: 'thresholds', + name: 'Thresholds', + description: 'Manage thresholds', + + editor: () => null, + override: () => null, + process: identityOverrideProcessor, + settings: {}, + defaultValue: { + mode: ThresholdsMode.Absolute, + steps: [ + { value: -Infinity, color: 'green' }, + { value: 80, color: 'red' }, + ], + }, + shouldApply: () => true, + }; + + const mappings = { + id: 'mappings', + path: 'mappings', + name: 'Value mappings', + description: 'Manage value mappings', + + editor: () => null, + override: () => null, + process: identityOverrideProcessor, + settings: {}, + defaultValue: [], + shouldApply: () => true, + }; + + const noValue = { + id: 'noValue', + path: 'noValue', + name: 'No Value', + description: 'What to show when there is no value', + + editor: () => null, + override: () => null, + process: identityOverrideProcessor, + + settings: { + placeholder: '-', + }, + // ??? any optionsUi with no value + shouldApply: () => true, + }; + + const links = { + id: 'links', + path: 'links', + name: 'DataLinks', + description: 'Manage date links', + editor: () => null, + override: () => null, + process: identityOverrideProcessor, + settings: { + placeholder: '-', + }, + shouldApply: () => true, + }; + + const color = { + id: 'color', + path: 'color', + name: 'Color', + description: 'Customise color', + editor: () => null, + override: () => null, + process: identityOverrideProcessor, + settings: { + placeholder: '-', + }, + shouldApply: () => true, + }; + + return [unit, min, max, decimals, title, noValue, thresholds, mappings, links, color]; +}; diff --git a/packages/grafana-runtime/src/services/index.ts b/packages/grafana-runtime/src/services/index.ts index d8daad5865d..521be5deab3 100644 --- a/packages/grafana-runtime/src/services/index.ts +++ b/packages/grafana-runtime/src/services/index.ts @@ -3,3 +3,4 @@ export * from './AngularLoader'; export * from './dataSourceSrv'; export * from './LocationSrv'; export * from './EchoSrv'; +export * from './templateSrv'; diff --git a/packages/grafana-runtime/src/services/templateSrv.ts b/packages/grafana-runtime/src/services/templateSrv.ts new file mode 100644 index 00000000000..40fb64932e9 --- /dev/null +++ b/packages/grafana-runtime/src/services/templateSrv.ts @@ -0,0 +1,13 @@ +import { VariableModel } from '@grafana/data'; + +export interface TemplateSrv { + getVariables(): VariableModel[]; +} + +let singletonInstance: TemplateSrv; + +export const setTemplateSrv = (instance: TemplateSrv) => { + singletonInstance = instance; +}; + +export const getTemplateSrv = (): TemplateSrv => singletonInstance; diff --git a/packages/grafana-toolkit/bin/grafana-toolkit.dist.js b/packages/grafana-toolkit/bin/grafana-toolkit.dist.js index a1cff04187d..d50c5fc54f5 100755 --- a/packages/grafana-toolkit/bin/grafana-toolkit.dist.js +++ b/packages/grafana-toolkit/bin/grafana-toolkit.dist.js @@ -4,10 +4,16 @@ const fs = require('fs'); entrypoint = () => { const defaultEntryPoint = '../src/cli/index.js'; - // We are running in dev mode. Don't use compiled binaries, rather use the dev entrypoint. - if (fs.existsSync(`${process.env['HOME']}/.config/yarn/link/@grafana/toolkit`)) { - console.log('Running in linked mode'); - return `${__dirname}/grafana-toolkit.js`; + const toolkitDirectory = `${process.env['PWD']}/node_modules/@grafana/toolkit`; + + // IF we have a toolkit directory AND linked grafana toolkit AND the toolkit dir is a symbolic lik + // THEN run everything in linked mode + if (fs.existsSync(toolkitDirectory)) { + const tkStat = fs.lstatSync(toolkitDirectory); + if (tkStat.isSymbolicLink()) { + console.log('Running in linked mode', `${__dirname}/grafana-toolkit.js`); + return `${__dirname}/grafana-toolkit.js`; + } } // We are using npx, and a relative path does not find index.js diff --git a/packages/grafana-toolkit/package.json b/packages/grafana-toolkit/package.json index e2bf38db11c..fc5adc9acb8 100644 --- a/packages/grafana-toolkit/package.json +++ b/packages/grafana-toolkit/package.json @@ -67,6 +67,7 @@ "execa": "^1.0.0", "expect-puppeteer": "4.1.1", "file-loader": "^4.0.0", + "fork-ts-checker-webpack-plugin": "1.0.0", "fs-extra": "^8.1.0", "globby": "^10.0.1", "html-loader": "0.5.5", diff --git a/packages/grafana-toolkit/src/cli/index.ts b/packages/grafana-toolkit/src/cli/index.ts index 4fe7fd3e463..9fc493f2a4d 100644 --- a/packages/grafana-toolkit/src/cli/index.ts +++ b/packages/grafana-toolkit/src/cli/index.ts @@ -18,6 +18,7 @@ import { githubPublishTask } from './tasks/plugin.utils'; import { ciBuildPluginTask, ciBuildPluginDocsTask, ciPackagePluginTask, ciPluginReportTask } from './tasks/plugin.ci'; import { buildPackageTask } from './tasks/package.build'; import { pluginCreateTask } from './tasks/plugin.create'; +import { bundleManagedTask } from './tasks/plugin/bundle.managed'; export const run = (includeInternalScripts = false) => { if (includeInternalScripts) { @@ -195,6 +196,13 @@ export const run = (includeInternalScripts = false) => { }); }); + program + .command('plugin:bundle-managed') + .description('Builds managed plugins') + .action(async cmd => { + await execTask(bundleManagedTask)({}); + }); + program .command('plugin:github-publish') .option('--dryrun', 'Do a dry run only', false) diff --git a/packages/grafana-toolkit/src/cli/tasks/manifest.test.ts b/packages/grafana-toolkit/src/cli/tasks/manifest.test.ts index 7e9d22c164e..5183f037041 100644 --- a/packages/grafana-toolkit/src/cli/tasks/manifest.test.ts +++ b/packages/grafana-toolkit/src/cli/tasks/manifest.test.ts @@ -13,6 +13,7 @@ describe('Manifest', () => { "manifest.ts", "nodeVersionChecker.ts", "package.build.ts", + "plugin/bundle.managed.ts", "plugin/bundle.ts", "plugin/create.ts", "plugin/tests.ts", diff --git a/packages/grafana-toolkit/src/cli/tasks/plugin.utils.ts b/packages/grafana-toolkit/src/cli/tasks/plugin.utils.ts index 63076ffb498..f3d28e7b2d7 100755 --- a/packages/grafana-toolkit/src/cli/tasks/plugin.utils.ts +++ b/packages/grafana-toolkit/src/cli/tasks/plugin.utils.ts @@ -10,9 +10,11 @@ import path = require('path'); import execa = require('execa'); interface Command extends Array {} +const DEFAULT_EMAIL_ADDRESS = 'eng@grafana.com'; +const DEFAULT_USERNAME = 'CircleCI Automation'; const releaseNotes = async (): Promise => { - const { stdout } = await execa.shell(`awk \'BEGIN {FS="##"; RS=""} FNR==3 {print; exit}\' CHANGELOG.md`); + const { stdout } = await execa.shell(`awk 'BEGIN {FS="##"; RS="##"} FNR==3 {print "##" $1; exit}' CHANGELOG.md`); return stdout; }; @@ -62,12 +64,10 @@ const prepareRelease = useSpinner('Preparing release', async ({ dryrun, ver const distContentDir = path.resolve(distDir, getPluginId()); const pluginJsonFile = path.resolve(distContentDir, 'plugin.json'); const pluginJson = getPluginJson(pluginJsonFile); - const GIT_EMAIL = 'eng@grafana.com'; - const GIT_USERNAME = 'CircleCI Automation'; const githubPublishScript: Command = [ - ['git', ['config', 'user.email', GIT_EMAIL]], - ['git', ['config', 'user.name', GIT_USERNAME]], + ['git', ['config', 'user.email', DEFAULT_EMAIL_ADDRESS]], + ['git', ['config', 'user.name', DEFAULT_USERNAME]], await checkoutBranch(`release-${pluginJson.info.version}`), ['cp', ['-rf', distContentDir, 'dist']], ['git', ['add', '--force', distDir], { dryrun }], @@ -138,14 +138,14 @@ const prepareRelease = useSpinner('Preparing release', async ({ dryrun, ver interface GithubPublishReleaseOptions { commitHash?: string; githubToken: string; - gitRepoOwner: string; + githubUser: string; gitRepoName: string; } const createRelease = useSpinner( 'Creating release', - async ({ commitHash, githubToken, gitRepoName, gitRepoOwner }) => { - const gitRelease = new GitHubRelease(githubToken, gitRepoOwner, gitRepoName, await releaseNotes(), commitHash); + async ({ commitHash, githubUser, githubToken, gitRepoName }) => { + const gitRelease = new GitHubRelease(githubToken, githubUser, gitRepoName, await releaseNotes(), commitHash); return gitRelease.release(); } ); @@ -159,16 +159,37 @@ export interface GithubPublishOptions { const githubPublishRunner: TaskRunner = async ({ dryrun, verbose, commitHash }) => { if (!process.env['CIRCLE_REPOSITORY_URL']) { - throw `The release plugin requires you specify the repository url as environment variable CIRCLE_REPOSITORY_URL`; + // Try and figure it out + const repo = await execa('git', ['config', '--local', 'remote.origin.url']); + if (repo && repo.stdout) { + process.env.CIRCLE_REPOSITORY_URL = repo.stdout; + } else { + throw new Error( + 'The release plugin requires you specify the repository url as environment variable CIRCLE_REPOSITORY_URL' + ); + } } - if (!process.env['GITHUB_TOKEN']) { - throw `Github publish requires that you set the environment variable GITHUB_TOKEN to a valid github api token. - See: https://github.com/settings/tokens for more details.`; + if (!process.env['GITHUB_ACCESS_TOKEN']) { + // Try to use GITHUB_TOKEN, which may be set. + if (process.env['GITHUB_TOKEN']) { + process.env['GITHUB_ACCESS_TOKEN'] = process.env['GITHUB_TOKEN']; + } else { + throw new Error( + `Github publish requires that you set the environment variable GITHUB_ACCESS_TOKEN to a valid github api token. + See: https://github.com/settings/tokens for more details.` + ); + } + } + + if (!process.env['GITHUB_USERNAME']) { + // We can default this one + process.env['GITHUB_USERNAME'] = DEFAULT_EMAIL_ADDRESS; } const parsedUrl = gitUrlParse(process.env['CIRCLE_REPOSITORY_URL']); - const githubToken = process.env['GITHUB_TOKEN']; + const githubToken = process.env['GITHUB_ACCESS_TOKEN']; + const githubUser = parsedUrl.owner; await prepareRelease({ dryrun, @@ -177,8 +198,8 @@ const githubPublishRunner: TaskRunner = async ({ dryrun, v await createRelease({ commitHash, + githubUser, githubToken, - gitRepoOwner: parsedUrl.owner, gitRepoName: parsedUrl.name, }); }; diff --git a/packages/grafana-toolkit/src/cli/tasks/plugin/bundle.managed.ts b/packages/grafana-toolkit/src/cli/tasks/plugin/bundle.managed.ts new file mode 100644 index 00000000000..f8698e21fb2 --- /dev/null +++ b/packages/grafana-toolkit/src/cli/tasks/plugin/bundle.managed.ts @@ -0,0 +1,38 @@ +import { Task, TaskRunner } from '../task'; +import { restoreCwd } from '../../utils/cwd'; +import execa = require('execa'); +const fs = require('fs'); +const util = require('util'); + +const readdirPromise = util.promisify(fs.readdir); + +interface BundeManagedOptions {} + +const MANAGED_PLUGINS_PATH = `${process.cwd()}/plugins-bundled`; +const MANAGED_PLUGINS_SCOPES = ['internal', 'external']; + +const bundleManagedPluginsRunner: TaskRunner = async () => { + await Promise.all( + MANAGED_PLUGINS_SCOPES.map(async scope => { + try { + const plugins = await readdirPromise(`${MANAGED_PLUGINS_PATH}/${scope}`); + if (plugins.length > 0) { + for (const plugin of plugins) { + process.chdir(`${MANAGED_PLUGINS_PATH}/${scope}/${plugin}`); + try { + await execa('yarn', ['dev']); + console.log(`[${scope}]: ${plugin} bundled`); + } catch (e) { + console.log(e.stdout); + } + } + } + } catch (e) { + console.log(e); + } + }) + ); + restoreCwd(); +}; + +export const bundleManagedTask = new Task('Bundle managed plugins', bundleManagedPluginsRunner); diff --git a/packages/grafana-toolkit/src/cli/utils/githubRelease.test.ts b/packages/grafana-toolkit/src/cli/utils/githubRelease.test.ts new file mode 100644 index 00000000000..74fedc2a759 --- /dev/null +++ b/packages/grafana-toolkit/src/cli/utils/githubRelease.test.ts @@ -0,0 +1,10 @@ +import { GitHubRelease } from './githubRelease'; + +describe('GithubRelease', () => { + it('should initialise a GithubRelease', () => { + process.env.GITHUB_ACCESS_TOKEN = '12345'; + process.env.GITHUB_USERNAME = 'test@grafana.com'; + const github = new GitHubRelease('A token', 'A username', 'A repo', 'Some release notes'); + expect(github).toBeInstanceOf(GitHubRelease); + }); +}); diff --git a/packages/grafana-toolkit/src/cli/utils/githubRelease.ts b/packages/grafana-toolkit/src/cli/utils/githubRelease.ts index 976060e2469..9d89a1b751c 100644 --- a/packages/grafana-toolkit/src/cli/utils/githubRelease.ts +++ b/packages/grafana-toolkit/src/cli/utils/githubRelease.ts @@ -9,6 +9,9 @@ import GithubClient from './githubClient'; import { AxiosResponse } from 'axios'; const resolveContentType = (extension: string): string => { + if (extension.startsWith('.')) { + extension = extension.substr(1); + } switch (extension) { case 'zip': return 'application/zip'; @@ -37,30 +40,23 @@ class GitHubRelease { this.commitHash = commitHash; this.git = new GithubClient({ + required: true, repo: repository, }); } - async publishAssets(srcLocation: string, destUrl: string) { + publishAssets(srcLocation: string, destUrl: string) { // Add the assets. Loop through files in the ci/dist folder and upload each asset. - fs.readdir(srcLocation, (err: NodeJS.ErrnoException | null, files: string[]) => { - if (err) { - throw err; - } + const files = fs.readdirSync(srcLocation); - files.forEach(async (file: string) => { - const fileStat = fs.statSync(`${srcLocation}/${file}`); - const fileData = fs.readFileSync(`${srcLocation}/${file}`); - try { - await this.git.client.post(`${destUrl}?name=${file}`, fileData, { - headers: { - 'Content-Type': resolveContentType(path.extname(file)), - 'Content-Length': fileStat.size, - }, - }); - } catch (reason) { - console.log('Could not post', reason); - } + return files.map(async (file: string) => { + const fileStat = fs.statSync(`${srcLocation}/${file}`); + const fileData = fs.readFileSync(`${srcLocation}/${file}`); + return this.git.client.post(`${destUrl}?name=${file}`, fileData, { + headers: { + 'Content-Type': resolveContentType(path.extname(file)), + 'Content-Length': fileStat.size, + }, }); }); } @@ -75,7 +71,7 @@ class GitHubRelease { const commitHash = this.commitHash || pluginInfo.build?.hash; try { - const latestRelease: AxiosResponse = await this.git.client.get('releases/latest'); + const latestRelease: AxiosResponse = await this.git.client.get(`releases/tags/v${pluginInfo.version}`); // Re-release if the version is the same as an existing release if (latestRelease.data.tag_name === `v${pluginInfo.version}`) { @@ -92,12 +88,15 @@ class GitHubRelease { prerelease: false, }); - this.publishAssets( + const publishPromises = this.publishAssets( PUBLISH_DIR, `https://uploads.github.com/repos/${this.username}/${this.repository}/releases/${newReleaseResponse.data.id}/assets` ); + await Promise.all(publishPromises); } catch (reason) { - console.error('error', reason); + console.error(reason.data?.message ?? reason.response.data ?? reason); + // Rethrow the error so that we can trigger a non-zero exit code to circle-ci + throw reason; } } } diff --git a/packages/grafana-toolkit/src/config/webpack.plugin.config.ts b/packages/grafana-toolkit/src/config/webpack.plugin.config.ts index cb88145aa43..2aed1e8981f 100644 --- a/packages/grafana-toolkit/src/config/webpack.plugin.config.ts +++ b/packages/grafana-toolkit/src/config/webpack.plugin.config.ts @@ -7,6 +7,7 @@ const TerserPlugin = require('terser-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); +const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); const readdirPromise = util.promisify(fs.readdir); const accessPromise = util.promisify(fs.access); @@ -123,6 +124,11 @@ const getCommonPlugins = (options: WebpackConfigurationOptions) => { ], }, ]), + new ForkTsCheckerWebpackPlugin({ + tsconfig: path.join(process.cwd(), 'tsconfig.json'), + // Only report problems in detected in plugin's code + reportFiles: ['**/*.{ts,tsx}'], + }), ]; }; @@ -205,7 +211,10 @@ const getBaseWebpackConfig: WebpackConfigurationGetter = async options => { }, { loader: 'ts-loader', - options: { onlyCompileBundledFiles: true }, + options: { + onlyCompileBundledFiles: true, + transpileOnly: true, + }, }, ], exclude: /(node_modules)/, diff --git a/packages/grafana-ui/.storybook/preview.ts b/packages/grafana-ui/.storybook/preview.ts index 4d0aaca0925..f79088c384e 100644 --- a/packages/grafana-ui/.storybook/preview.ts +++ b/packages/grafana-ui/.storybook/preview.ts @@ -38,6 +38,7 @@ addParameters({ light: GrafanaLight, }, options: { + theme: GrafanaLight, showPanel: true, showRoots: true, panelPosition: 'bottom', diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json index 09d687054ec..9db4b586dc1 100644 --- a/packages/grafana-ui/package.json +++ b/packages/grafana-ui/package.json @@ -33,6 +33,7 @@ "@grafana/tsconfig": "^1.0.0-rc1", "@iconscout/react-unicons": "^1.0.0", "@torkelo/react-select": "3.0.8", + "@types/react-beautiful-dnd": "12.1.2", "@types/react-color": "3.0.1", "@types/react-select": "3.0.8", "@types/react-table": "7.0.12", @@ -52,6 +53,7 @@ "rc-slider": "9.2.3", "rc-time-picker": "^3.7.3", "react": "16.12.0", + "react-beautiful-dnd": "13.0.0", "react-calendar": "2.19.2", "react-color": "2.18.0", "react-custom-scrollbars": "4.2.1", diff --git a/packages/grafana-ui/rollup.config.ts b/packages/grafana-ui/rollup.config.ts index 595d33bb31a..51235efb747 100644 --- a/packages/grafana-ui/rollup.config.ts +++ b/packages/grafana-ui/rollup.config.ts @@ -59,6 +59,7 @@ const buildCjsPackage = ({ env }) => { 'node_modules/immutable/dist/immutable.js': ['Record', 'Set', 'Map', 'List', 'OrderedSet', 'is', 'Stack'], '../../node_modules/esrever/esrever.js': ['reverse'], '../../node_modules/react-table/index.js': ['useTable', 'useSortBy', 'useBlockLayout', 'Cell'], + '../../node_modules/react-is/index.js': ['isValidElementType', 'isContextConsumer'], }, }), resolve(), diff --git a/packages/grafana-ui/src/components/Cascader/Cascader.tsx b/packages/grafana-ui/src/components/Cascader/Cascader.tsx index 2a27952dd49..5eb4b08c757 100644 --- a/packages/grafana-ui/src/components/Cascader/Cascader.tsx +++ b/packages/grafana-ui/src/components/Cascader/Cascader.tsx @@ -4,7 +4,7 @@ import RCCascader from 'rc-cascader'; import { Select } from '../Select/Select'; import { FormInputSize } from '../Forms/types'; -import { Input } from '../Forms/Input/Input'; +import { Input } from '../Input/Input'; import { SelectableValue } from '@grafana/data'; import { css } from 'emotion'; import { onChangeCascader } from './optionMappings'; diff --git a/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.story.tsx b/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.story.tsx index c37b8a97c9f..e45a1a56942 100644 --- a/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.story.tsx +++ b/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.story.tsx @@ -3,7 +3,7 @@ import React, { useState } from 'react'; import { storiesOf } from '@storybook/react'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { ClipboardButton } from './ClipboardButton'; -import { Input } from '../Input/Input'; +import { Input } from '../Forms/Legacy/Input/Input'; import { text } from '@storybook/addon-knobs'; const getKnobs = () => { diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx index b2e0774032e..1805bd867ef 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx @@ -3,7 +3,7 @@ import tinycolor from 'tinycolor2'; import debounce from 'lodash/debounce'; import { ColorPickerProps } from './ColorPickerPopover'; -import { Input } from '../Input/Input'; +import { Input } from '../Forms/Legacy/Input/Input'; interface ColorInputState { previousColor: string; diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx index ac1d57190d5..d95ce24a526 100644 --- a/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx +++ b/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx @@ -1,6 +1,7 @@ import React, { ChangeEvent, useContext } from 'react'; import { DataLink, VariableSuggestion, GrafanaTheme } from '@grafana/data'; -import { FormField, Switch } from '../index'; +import { FormField } from '../index'; +import { Switch } from '../Switch/Switch'; import { css } from 'emotion'; import { ThemeContext, stylesFactory } from '../../themes/index'; import { DataLinkInput } from './DataLinkInput'; diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx index 2bc668c2348..b4313370ed1 100644 --- a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx +++ b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx @@ -9,7 +9,7 @@ import { DataSourceSettings } from '@grafana/data'; import { HttpSettingsProps } from './types'; import { CustomHeadersSettings } from './CustomHeadersSettings'; import { Select } from '../Forms/Legacy/Select/Select'; -import { Input } from '../Input/Input'; +import { Input } from '../Forms/Legacy/Input/Input'; import { FormField } from '../FormField/FormField'; import { FormLabel } from '../FormLabel/FormLabel'; import { Switch } from '../Switch/Switch'; diff --git a/packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx index dd1620e2023..ee300d86e49 100644 --- a/packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx +++ b/packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx @@ -48,7 +48,7 @@ export const TLSAuthSettings: React.FC = ({ dataSourceCon theme="info" >
- +
diff --git a/packages/grafana-ui/src/components/FieldConfigs/fieldOverrides.test.ts b/packages/grafana-ui/src/components/FieldConfigs/fieldOverrides.test.ts deleted file mode 100644 index bbd9bc690aa..00000000000 --- a/packages/grafana-ui/src/components/FieldConfigs/fieldOverrides.test.ts +++ /dev/null @@ -1,126 +0,0 @@ -import { - FieldConfig, - FieldConfigSource, - InterpolateFunction, - GrafanaTheme, - FieldMatcherID, - MutableDataFrame, - DataFrame, - FieldType, - applyFieldOverrides, - toDataFrame, - standardFieldConfigEditorRegistry, - standardEditorsRegistry, -} from '@grafana/data'; - -import { getTheme } from '../../themes'; -import { getStandardFieldConfigs, getStandardOptionEditors } from '../../utils'; - -describe('FieldOverrides', () => { - beforeAll(() => { - standardEditorsRegistry.setInit(getStandardOptionEditors); - standardFieldConfigEditorRegistry.setInit(getStandardFieldConfigs); - }); - - const f0 = new MutableDataFrame(); - f0.add({ title: 'AAA', value: 100, value2: 1234 }, true); - f0.add({ title: 'BBB', value: -20 }, true); - f0.add({ title: 'CCC', value: 200, value2: 1000 }, true); - expect(f0.length).toEqual(3); - - // Hardcode the max value - f0.fields[1].config.max = 0; - f0.fields[1].config.decimals = 6; - - const src: FieldConfigSource = { - defaults: { - unit: 'xyz', - decimals: 2, - }, - overrides: [ - { - matcher: { id: FieldMatcherID.numeric }, - properties: [ - { prop: 'decimals', value: 1 }, // Numeric - { prop: 'title', value: 'Kittens' }, // Text - ], - }, - ], - }; - - it('will merge FieldConfig with default values', () => { - const field: FieldConfig = { - min: 0, - max: 100, - }; - const f1 = { - unit: 'ms', - dateFormat: '', // should be ignored - max: parseFloat('NOPE'), // should be ignored - min: null, // should alo be ignored! - }; - - const f: DataFrame = toDataFrame({ - fields: [{ type: FieldType.number, name: 'x', config: field, values: [] }], - }); - const processed = applyFieldOverrides({ - data: [f], - standard: standardFieldConfigEditorRegistry, - fieldOptions: { - defaults: f1 as FieldConfig, - overrides: [], - }, - replaceVariables: v => v, - theme: getTheme(), - })[0]; - const out = processed.fields[0].config; - - expect(out.min).toEqual(0); - expect(out.max).toEqual(100); - expect(out.unit).toEqual('ms'); - }); - - it('will apply field overrides', () => { - const data = applyFieldOverrides({ - data: [f0], // the frame - fieldOptions: src as FieldConfigSource, // defaults + overrides - replaceVariables: (undefined as any) as InterpolateFunction, - theme: (undefined as any) as GrafanaTheme, - })[0]; - const valueColumn = data.fields[1]; - const config = valueColumn.config; - - // Keep max from the original setting - expect(config.max).toEqual(0); - - // Don't Automatically pick the min value - expect(config.min).toEqual(undefined); - - // The default value applied - expect(config.unit).toEqual('xyz'); - - // The default value applied - expect(config.title).toEqual('Kittens'); - - // The override applied - expect(config.decimals).toEqual(1); - }); - - it('will apply set min/max when asked', () => { - const data = applyFieldOverrides({ - data: [f0], // the frame - fieldOptions: src as FieldConfigSource, // defaults + overrides - replaceVariables: (undefined as any) as InterpolateFunction, - theme: (undefined as any) as GrafanaTheme, - autoMinMax: true, - })[0]; - const valueColumn = data.fields[1]; - const config = valueColumn.config; - - // Keep max from the original setting - expect(config.max).toEqual(0); - - // Don't Automatically pick the min value - expect(config.min).toEqual(-20); - }); -}); diff --git a/packages/grafana-ui/src/components/FormField/_FormField.scss b/packages/grafana-ui/src/components/FormField/_FormField.scss index 4d6d18a6ccd..9c9b3deef9c 100644 --- a/packages/grafana-ui/src/components/FormField/_FormField.scss +++ b/packages/grafana-ui/src/components/FormField/_FormField.scss @@ -1,5 +1,4 @@ .form-field { - margin-bottom: $space-xxs; display: flex; flex-direction: row; align-items: flex-start; diff --git a/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx b/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx index ca3fd9bf4f5..a778f41aacf 100644 --- a/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx +++ b/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx @@ -34,7 +34,7 @@ export const FormLabel: FunctionComponent = ({ {tooltip && (
- +
)} diff --git a/packages/grafana-ui/src/components/Forms/Field.story.tsx b/packages/grafana-ui/src/components/Forms/Field.story.tsx index 0199a72eb17..75cd5dabfee 100644 --- a/packages/grafana-ui/src/components/Forms/Field.story.tsx +++ b/packages/grafana-ui/src/components/Forms/Field.story.tsx @@ -1,7 +1,7 @@ import React, { useState, useCallback } from 'react'; import { boolean, number, text } from '@storybook/addon-knobs'; import { Field } from './Field'; -import { Input } from './Input/Input'; +import { Input } from '../Input/Input'; import { Switch } from './Switch'; import mdx from './Field.mdx'; diff --git a/packages/grafana-ui/src/components/Forms/Form.story.tsx b/packages/grafana-ui/src/components/Forms/Form.story.tsx index 82f72c22ebe..3145308f490 100644 --- a/packages/grafana-ui/src/components/Forms/Form.story.tsx +++ b/packages/grafana-ui/src/components/Forms/Form.story.tsx @@ -4,7 +4,7 @@ import { Legend } from './Legend'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { withStoryContainer } from '../../utils/storybook/withStoryContainer'; import { Field } from './Field'; -import { Input } from './Input/Input'; +import { Input } from '../Input/Input'; import { Button } from '../Button'; import { Form } from './Form'; import { Switch } from './Switch'; diff --git a/packages/grafana-ui/src/components/Forms/Input/Input.mdx b/packages/grafana-ui/src/components/Forms/Input/Input.mdx deleted file mode 100644 index 8f3bb755768..00000000000 --- a/packages/grafana-ui/src/components/Forms/Input/Input.mdx +++ /dev/null @@ -1,6 +0,0 @@ -import { Props } from '@storybook/addon-docs/blocks'; -import { Input } from './Input'; - -# Input - - diff --git a/packages/grafana-ui/src/components/Forms/Input/Input.story.tsx b/packages/grafana-ui/src/components/Forms/Input/Input.story.tsx deleted file mode 100644 index 6a0236e5082..00000000000 --- a/packages/grafana-ui/src/components/Forms/Input/Input.story.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import React, { useState } from 'react'; -import { boolean, text, select, number } from '@storybook/addon-knobs'; -import { withCenteredStory } from '../../../utils/storybook/withCenteredStory'; -import { Input } from './Input'; -import { Button } from '../../Button'; -import mdx from './Input.mdx'; -import { getAvailableIcons, IconName } from '../../../types'; -import { KeyValue } from '@grafana/data'; -import { Icon } from '../../Icon/Icon'; -import { Field } from '../Field'; - -export default { - title: 'Forms/Input', - component: Input, - decorators: [withCenteredStory], - parameters: { - docs: { - page: mdx, - }, - }, -}; - -export const simple = () => { - const prefixSuffixOpts = { - None: null, - Text: '$', - ...getAvailableIcons().reduce>((prev, c) => { - return { - ...prev, - [`Icon: ${c}`]: `icon-${c}`, - }; - }, {}), - }; - - const BEHAVIOUR_GROUP = 'Behaviour props'; - // --- - const type = select( - 'Type', - { - text: 'text', - password: 'password', - number: 'number', - }, - 'text', - BEHAVIOUR_GROUP - ); - const disabled = boolean('Disabled', false, BEHAVIOUR_GROUP); - const invalid = boolean('Invalid', false, BEHAVIOUR_GROUP); - const loading = boolean('Loading', false, BEHAVIOUR_GROUP); - - const VISUAL_GROUP = 'Visual options'; - // --- - const placeholder = text('Placeholder', 'Enter your name here...', VISUAL_GROUP); - const before = boolean('Addon before', false, VISUAL_GROUP); - const after = boolean('Addon after', false, VISUAL_GROUP); - const addonAfter = ; - const addonBefore =
Input
; - const prefix = select('Prefix', prefixSuffixOpts, null, VISUAL_GROUP); - const suffix = select('Suffix', prefixSuffixOpts, null, VISUAL_GROUP); - let prefixEl: any = prefix; - if (prefix && prefix.match(/icon-/g)) { - prefixEl = ; - } - let suffixEl: any = suffix; - if (suffix && suffix.match(/icon-/g)) { - suffixEl = ; - } - - const CONTAINER_GROUP = 'Container options'; - // --- - const containerWidth = number( - 'Container width', - 300, - { - range: true, - min: 100, - max: 500, - step: 10, - }, - CONTAINER_GROUP - ); - - return ( -
- -
- ); -}; - -export const withFieldValidation = () => { - const [value, setValue] = useState(''); - - return ( -
- - setValue(e.currentTarget.value)} /> - -
- ); -}; diff --git a/packages/grafana-ui/src/components/Forms/Input/Input.tsx b/packages/grafana-ui/src/components/Forms/Input/Input.tsx deleted file mode 100644 index 390881ccd49..00000000000 --- a/packages/grafana-ui/src/components/Forms/Input/Input.tsx +++ /dev/null @@ -1,259 +0,0 @@ -import React, { HTMLProps, ReactNode } from 'react'; -import { GrafanaTheme } from '@grafana/data'; -import { css, cx } from 'emotion'; -import { getFocusStyle, inputSizes, sharedInputStyle } from '../commonStyles'; -import { stylesFactory, useTheme } from '../../../themes'; -import { useClientRect } from '../../../utils/useClientRect'; -import { FormInputSize } from '../types'; - -export interface Props extends Omit, 'prefix' | 'size'> { - /** Show an invalid state around the input */ - invalid?: boolean; - /** Show an icon as a prefix in the input */ - prefix?: JSX.Element | string | null; - /** Show an icon as a suffix in the input */ - suffix?: JSX.Element | string | null; - /** Show a loading indicator as a suffix in the input */ - loading?: boolean; - /** Add a component as an addon before the input */ - addonBefore?: ReactNode; - /** Add a component as an addon after the input */ - addonAfter?: ReactNode; - size?: FormInputSize; -} - -interface StyleDeps { - theme: GrafanaTheme; - invalid: boolean; -} - -export const getInputStyles = stylesFactory(({ theme, invalid = false }: StyleDeps) => { - const colors = theme.colors; - const borderRadius = theme.border.radius.sm; - const height = theme.spacing.formInputHeight; - - const prefixSuffixStaticWidth = '28px'; - const prefixSuffix = css` - position: absolute; - top: 0; - z-index: 1; - display: flex; - align-items: center; - justify-content: center; - flex-grow: 0; - flex-shrink: 0; - font-size: ${theme.typography.size.md}; - height: 100%; - /* Min width specified for prefix/suffix classes used outside React component*/ - min-width: ${prefixSuffixStaticWidth}; - `; - - return { - // Wraps inputWrapper and addons - wrapper: cx( - css` - label: input-wrapper; - display: flex; - width: 100%; - height: ${height}; - border-radius: ${borderRadius}; - &:hover { - > .prefix, - .suffix, - .input { - border-color: ${invalid ? colors.redBase : colors.formInputBorder}; - } - - // only show number buttons on hover - input[type='number'] { - -moz-appearance: number-input; - -webkit-appearance: number-input; - appearance: textfield; - } - - input[type='number']::-webkit-inner-spin-button, - input[type='number']::-webkit-outer-spin-button { - -webkit-appearance: inner-spin-button !important; - opacity: 1; - } - } - ` - ), - // Wraps input and prefix/suffix - inputWrapper: css` - label: input-inputWrapper; - position: relative; - flex-grow: 1; - /* we want input to be above addons, especially for focused state */ - z-index: 1; - - /* when input rendered with addon before only*/ - &:not(:first-child):last-child { - > input { - border-left: none; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - } - - /* when input rendered with addon after only*/ - &:first-child:not(:last-child) { - > input { - border-right: none; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - } - - /* when rendered with addon before and after */ - &:not(:first-child):not(:last-child) { - > input { - border-right: none; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - } - - input { - /* paddings specified for classes used outside React component */ - &:not(:first-child) { - padding-left: ${prefixSuffixStaticWidth}; - } - &:not(:last-child) { - padding-right: ${prefixSuffixStaticWidth}; - } - &[readonly] { - cursor: default; - } - } - `, - - input: cx( - getFocusStyle(theme), - sharedInputStyle(theme, invalid), - css` - label: input-input; - position: relative; - z-index: 0; - flex-grow: 1; - border-radius: ${borderRadius}; - height: 100%; - width: 100%; - ` - ), - inputDisabled: css` - background-color: ${colors.formInputBgDisabled}; - color: ${colors.formInputDisabledText}; - `, - addon: css` - label: input-addon; - display: flex; - justify-content: center; - align-items: center; - flex-grow: 0; - flex-shrink: 0; - position: relative; - - &:first-child { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - > :last-child { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - } - - &:last-child { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - > :first-child { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - } - > *:focus { - /* we want anything that has focus and is an addon to be above input */ - z-index: 2; - } - `, - prefix: cx( - prefixSuffix, - css` - label: input-prefix; - padding-left: ${theme.spacing.sm}; - padding-right: ${theme.spacing.xs}; - border-right: none; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - ` - ), - suffix: cx( - prefixSuffix, - css` - label: input-suffix; - padding-right: ${theme.spacing.sm}; - padding-left: ${theme.spacing.xs}; - border-left: none; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - right: 0; - ` - ), - loadingIndicator: css` - & + * { - margin-left: ${theme.spacing.xs}; - } - `, - }; -}); - -export const Input = React.forwardRef((props, ref) => { - const { className, addonAfter, addonBefore, prefix, suffix, invalid, loading, size = 'auto', ...restProps } = props; - /** - * Prefix & suffix are positioned absolutely within inputWrapper. We use client rects below to apply correct padding to the input - * when prefix/suffix is larger than default (28px = 16px(icon) + 12px(left/right paddings)). - * Thanks to that prefix/suffix do not overflow the input element itself. - */ - const [prefixRect, prefixRef] = useClientRect(); - const [suffixRect, suffixRef] = useClientRect(); - - const theme = useTheme(); - const styles = getInputStyles({ theme, invalid: !!invalid }); - - return ( -
- {!!addonBefore &&
{addonBefore}
} - -
- {prefix && ( -
- {prefix} -
- )} - - - - {(suffix || loading) && ( -
- {loading && } - {suffix} -
- )} -
- - {!!addonAfter &&
{addonAfter}
} -
- ); -}); - -Input.displayName = 'Input'; diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.story.internal.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.story.internal.tsx new file mode 100644 index 00000000000..0611741a5e0 --- /dev/null +++ b/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.story.internal.tsx @@ -0,0 +1,40 @@ +import React, { useState } from 'react'; +import { zip, fromPairs } from 'lodash'; + +import { storiesOf } from '@storybook/react'; +import { withCenteredStory } from '../../../../utils/storybook/withCenteredStory'; +import { Input } from './Input'; +import { text, select } from '@storybook/addon-knobs'; +import { EventsWithValidation } from '../../../../utils'; + +const getKnobs = () => { + return { + validation: text('Validation regex (will do a partial match if you do not anchor it)', ''), + validationErrorMessage: text('Validation error message', 'Input not valid'), + validationEvent: select( + 'Validation event', + fromPairs(zip(Object.keys(EventsWithValidation), Object.values(EventsWithValidation))), + EventsWithValidation.onBlur + ), + }; +}; + +const Wrapper = () => { + const { validation, validationErrorMessage, validationEvent } = getKnobs(); + const [value, setValue] = useState(''); + const validations = { + [validationEvent]: [ + { + rule: (value: string) => { + return !!value.match(validation); + }, + errorMessage: validationErrorMessage, + }, + ], + }; + return setValue(e.currentTarget.value)} validationEvents={validations} />; +}; + +const story = storiesOf('General/Input', module); +story.addDecorator(withCenteredStory); +story.add('input', () => ); diff --git a/packages/grafana-ui/src/components/Input/Input.test.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.test.tsx similarity index 92% rename from packages/grafana-ui/src/components/Input/Input.test.tsx rename to packages/grafana-ui/src/components/Forms/Legacy/Input/Input.test.tsx index 1d39b594b1c..da8b30d124b 100644 --- a/packages/grafana-ui/src/components/Input/Input.test.tsx +++ b/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.test.tsx @@ -2,8 +2,8 @@ import React from 'react'; import renderer from 'react-test-renderer'; import { shallow } from 'enzyme'; import { Input } from './Input'; -import { EventsWithValidation } from '../../utils'; -import { ValidationEvents } from '../../types'; +import { EventsWithValidation } from '../../../../utils'; +import { ValidationEvents } from '../../../../types'; const TEST_ERROR_MESSAGE = 'Value must be empty or less than 3 chars'; const testBlurValidation: ValidationEvents = { diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.tsx new file mode 100644 index 00000000000..aaeaade619e --- /dev/null +++ b/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.tsx @@ -0,0 +1,86 @@ +import React, { PureComponent, ChangeEvent } from 'react'; +import classNames from 'classnames'; +import { validate, EventsWithValidation, hasValidationEvent } from '../../../../utils'; +import { ValidationEvents, ValidationRule } from '../../../../types'; + +export enum LegacyInputStatus { + Invalid = 'invalid', + Valid = 'valid', +} + +interface Props extends React.HTMLProps { + validationEvents?: ValidationEvents; + hideErrorMessage?: boolean; + inputRef?: React.LegacyRef; + + // Override event props and append status as argument + onBlur?: (event: React.FocusEvent, status?: LegacyInputStatus) => void; + onFocus?: (event: React.FocusEvent, status?: LegacyInputStatus) => void; + onChange?: (event: React.ChangeEvent, status?: LegacyInputStatus) => void; +} + +interface State { + error: string | null; +} + +export class Input extends PureComponent { + static defaultProps = { + className: '', + }; + + state: State = { + error: null, + }; + + get status() { + return this.state.error ? LegacyInputStatus.Invalid : LegacyInputStatus.Valid; + } + + get isInvalid() { + return this.status === LegacyInputStatus.Invalid; + } + + validatorAsync = (validationRules: ValidationRule[]) => { + return (evt: ChangeEvent) => { + const errors = validate(evt.target.value, validationRules); + this.setState(prevState => { + return { ...prevState, error: errors ? errors[0] : null }; + }); + }; + }; + + populateEventPropsWithStatus = (restProps: any, validationEvents: ValidationEvents | undefined) => { + const inputElementProps = { ...restProps }; + if (!validationEvents) { + return inputElementProps; + } + Object.keys(EventsWithValidation).forEach(eventName => { + if (hasValidationEvent(eventName as EventsWithValidation, validationEvents) || restProps[eventName]) { + inputElementProps[eventName] = async (evt: ChangeEvent) => { + evt.persist(); // Needed for async. https://reactjs.org/docs/events.html#event-pooling + if (hasValidationEvent(eventName as EventsWithValidation, validationEvents)) { + await this.validatorAsync(validationEvents[eventName]).apply(this, [evt]); + } + if (restProps[eventName]) { + restProps[eventName].apply(null, [evt, this.status]); + } + }; + } + }); + return inputElementProps; + }; + + render() { + const { validationEvents, className, hideErrorMessage, inputRef, ...restProps } = this.props; + const { error } = this.state; + const inputClassName = classNames('gf-form-input', { invalid: this.isInvalid }, className); + const inputElementProps = this.populateEventPropsWithStatus(restProps, validationEvents); + + return ( +
+ + {error && !hideErrorMessage && {error}} +
+ ); + } +} diff --git a/packages/grafana-ui/src/components/Input/__snapshots__/Input.test.tsx.snap b/packages/grafana-ui/src/components/Forms/Legacy/Input/__snapshots__/Input.test.tsx.snap similarity index 100% rename from packages/grafana-ui/src/components/Input/__snapshots__/Input.test.tsx.snap rename to packages/grafana-ui/src/components/Forms/Legacy/Input/__snapshots__/Input.test.tsx.snap diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.story.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.story.internal.tsx similarity index 100% rename from packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.story.tsx rename to packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.story.internal.tsx diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.internal.tsx similarity index 100% rename from packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.tsx rename to packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.internal.tsx diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss b/packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss index 1033a5ff007..effa8a5fa74 100644 --- a/packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss +++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss @@ -1,4 +1,4 @@ -$select-input-height: 35px; +$select-input-height: 32px; $select-input-bg-disabled: $input-bg-disabled; @mixin select-control() { @@ -122,7 +122,7 @@ $select-input-bg-disabled: $input-bg-disabled; .gf-form-select-box__value-container { display: inline-block; - padding: 8px 16px 8px 10px; + padding: 6px 16px 6px 10px; vertical-align: middle; > div { diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx index 3fd8be33805..eda06533019 100644 --- a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx +++ b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { useTheme, stylesFactory, selectThemeVariant as stv } from '../../../themes'; +import { useTheme, stylesFactory } from '../../../themes'; import { GrafanaTheme } from '@grafana/data'; import { css, cx } from 'emotion'; import { getFocusCss, getPropertiesForButtonSize } from '../commonStyles'; @@ -21,15 +21,15 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme, size: RadioButt const horizontalPadding = theme.spacing[size] ?? theme.spacing.md; const c = theme.colors; - const textColor = stv({ light: c.gray33, dark: c.gray70 }, theme.type); - const textColorHover = stv({ light: c.blueShade, dark: c.blueLight }, theme.type); - const textColorActive = stv({ light: c.blueShade, dark: c.blueLight }, theme.type); - const borderColor = stv({ light: c.gray4, dark: c.gray25 }, theme.type); - const borderColorHover = stv({ light: c.gray70, dark: c.gray33 }, theme.type); - const borderColorActive = stv({ light: c.blueShade, dark: c.blueLight }, theme.type); - const bg = stv({ light: c.gray98, dark: c.gray10 }, theme.type); - const bgDisabled = stv({ light: c.gray95, dark: c.gray15 }, theme.type); - const bgActive = stv({ light: c.white, dark: c.gray05 }, theme.type); + const textColor = theme.isLight ? c.gray33 : c.gray70; + const textColorHover = theme.isLight ? c.blueShade : c.blueLight; + const textColorActive = theme.isLight ? c.blueShade : c.blueLight; + const borderColor = theme.isLight ? c.gray4 : c.gray25; + const borderColorHover = theme.isLight ? c.gray70 : c.gray33; + const borderColorActive = theme.isLight ? c.blueShade : c.blueLight; + const bg = c.pageBg; + const bgDisabled = theme.isLight ? c.gray95 : c.gray15; + const bgActive = theme.isLight ? c.white : c.gray05; const border = `1px solid ${borderColor}`; const borderActive = `1px solid ${borderColorActive}`; diff --git a/packages/grafana-ui/src/components/Forms/TextArea/TextArea.tsx b/packages/grafana-ui/src/components/Forms/TextArea/TextArea.tsx index 04e034f5655..d65f3ba0ecd 100644 --- a/packages/grafana-ui/src/components/Forms/TextArea/TextArea.tsx +++ b/packages/grafana-ui/src/components/Forms/TextArea/TextArea.tsx @@ -12,16 +12,18 @@ export interface Props extends Omit, 'size'> { size?: FormInputSize; } -export const TextArea = React.forwardRef(({ invalid, size = 'auto', ...props }, ref) => { - const theme = useTheme(); - const styles = getTextAreaStyle(theme, invalid); +export const TextArea = React.forwardRef( + ({ invalid, size = 'auto', className, ...props }, ref) => { + const theme = useTheme(); + const styles = getTextAreaStyle(theme, invalid); - return ( -
-