IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Variables: make sure that we support both old and new syntax for custom variables. (#28896)

Browse Source
This commit is contained in:
Marcus Andersson 2020-11-09 10:37:59 +01:00 committed by GitHub
parent aa8d07f567
commit 2887f3f68b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 171 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

174
public/app/features/variables/custom/reducer.test.ts
View File

@ -10,9 +10,9 @@ import { CustomVariableModel } from '../types';
describe('customVariableReducer', () => {
const adapter = createCustomVariableAdapter();
describe('when createCustomOptionsFromQuery is dispatched', () => {
it('then state should be correct', () => {
const query = 'a,b,c,d:e';
describe('when createCustomOptionsFromQuery is dispatched with key/value syntax', () => {
it('should then mutate state correctly', () => {
const query = 'a,b,c,d : e';
const id = '0';
const { initialState } = getVariableTestContext(adapter, { id, query });
const payload = toVariablePayload({ id: '0', type: 'custom' });
@ -50,8 +50,88 @@ describe('customVariableReducer', () => {
});
});
describe('when createCustomOptionsFromQuery is dispatched and query contains spaces', () => {
it('then state should be correct', () => {
describe('when createCustomOptionsFromQuery is dispatched without key/value syntax', () => {
it('should then mutate state correctly', () => {
const query = 'a,b,c,d:e';
const id = '0';
const { initialState } = getVariableTestContext(adapter, { id, query });
const payload = toVariablePayload({ id: '0', type: 'custom' });
reducerTester<VariablesState>()
.givenReducer(customVariableReducer, cloneDeep(initialState))
.whenActionIsDispatched(createCustomOptionsFromQuery(payload))
.thenStateShouldEqual({
[id]: {
...initialState[id],
options: [
{
text: 'a',
value: 'a',
selected: false,
},
{
text: 'b',
value: 'b',
selected: false,
},
{
text: 'c',
value: 'c',
selected: false,
},
{
text: 'd:e',
value: 'd:e',
selected: false,
},
],
} as CustomVariableModel,
});
});
});
describe('when createCustomOptionsFromQuery is dispatched and query with key/value syntax contains spaces', () => {
it('should then mutate state correctly', () => {
const query = 'a, b, c, d : e ';
const id = '0';
const { initialState } = getVariableTestContext(adapter, { id, query });
const payload = toVariablePayload({ id: '0', type: 'constant' });
reducerTester<VariablesState>()
.givenReducer(customVariableReducer, cloneDeep(initialState))
.whenActionIsDispatched(createCustomOptionsFromQuery(payload))
.thenStateShouldEqual({
[id]: {
...initialState[id],
options: [
{
text: 'a',
value: 'a',
selected: false,
},
{
text: 'b',
value: 'b',
selected: false,
},
{
text: 'c',
value: 'c',
selected: false,
},
{
text: 'd',
value: 'e',
selected: false,
},
],
} as CustomVariableModel,
});
});
});
describe('when createCustomOptionsFromQuery is dispatched and query without key/value syntax contains spaces', () => {
it('should then mutate state correctly', () => {
const query = 'a, b, c, d : e';
const id = '0';
const { initialState } = getVariableTestContext(adapter, { id, query });
@ -90,9 +170,89 @@ describe('customVariableReducer', () => {
});
});
describe('when createCustomOptionsFromQuery is dispatched and query without key/value syntax contains urls', () => {
it('should then mutate state correctly', () => {
const query = 'a, b,http://www.google.com/, http://www.amazon.com/';
const id = '0';
const { initialState } = getVariableTestContext(adapter, { id, query });
const payload = toVariablePayload({ id: '0', type: 'constant' });
reducerTester<VariablesState>()
.givenReducer(customVariableReducer, cloneDeep(initialState))
.whenActionIsDispatched(createCustomOptionsFromQuery(payload))
.thenStateShouldEqual({
[id]: {
...initialState[id],
options: [
{
text: 'a',
value: 'a',
selected: false,
},
{
text: 'b',
value: 'b',
selected: false,
},
{
text: 'http://www.google.com/',
value: 'http://www.google.com/',
selected: false,
},
{
text: 'http://www.amazon.com/',
value: 'http://www.amazon.com/',
selected: false,
},
],
} as CustomVariableModel,
});
});
});
describe('when createCustomOptionsFromQuery is dispatched and query with key/value syntax contains urls', () => {
it('should then mutate state correctly', () => {
const query = 'a, b, google : http://www.google.com/, amazon : http://www.amazon.com/';
const id = '0';
const { initialState } = getVariableTestContext(adapter, { id, query });
const payload = toVariablePayload({ id: '0', type: 'constant' });
reducerTester<VariablesState>()
.givenReducer(customVariableReducer, cloneDeep(initialState))
.whenActionIsDispatched(createCustomOptionsFromQuery(payload))
.thenStateShouldEqual({
[id]: {
...initialState[id],
options: [
{
text: 'a',
value: 'a',
selected: false,
},
{
text: 'b',
value: 'b',
selected: false,
},
{
text: 'google',
value: 'http://www.google.com/',
selected: false,
},
{
text: 'amazon',
value: 'http://www.amazon.com/',
selected: false,
},
],
} as CustomVariableModel,
});
});
});
describe('when createCustomOptionsFromQuery is dispatched and includeAll is true', () => {
it('then state should be correct', () => {
const query = 'a,b,c,d:e';
it('should then mutate state correctly', () => {
const query = 'a,b,c,d : e';
const id = '0';
const { initialState } = getVariableTestContext(adapter, { id, query, includeAll: true });
const payload = toVariablePayload({ id: '0', type: 'constant' });

7
public/app/features/variables/custom/reducer.ts
View File

@ -22,12 +22,13 @@ export const customVariableSlice = createSlice({
createCustomOptionsFromQuery: (state: VariablesState, action: PayloadAction<VariablePayload>) => {
const instanceState = getInstanceState<CustomVariableModel>(state, action.payload.id);
const { includeAll, query } = instanceState;
const match = query.match(/(?:\\,|[^,])+/g) ?? [];
const options = match.map(text => {
text = text.replace(/\\,/g, ',');
const textMatch = text.match(/(?:\\:|[^:])+/g) ?? [];
if (textMatch.length > 1) {
const [key, value] = textMatch;
const textMatch = /^(.+)\s:\s(.+)$/g.exec(text) ?? [];
if (textMatch.length === 3) {
const [, key, value] = textMatch;
return { text: key.trim(), value: value.trim(), selected: false };
} else {
return { text: text.trim(), value: text.trim(), selected: false };