diff --git a/public/app/features/variables/editor/actions.ts b/public/app/features/variables/editor/actions.ts index 879903f4de6..242bda71e09 100644 --- a/public/app/features/variables/editor/actions.ts +++ b/public/app/features/variables/editor/actions.ts @@ -101,8 +101,8 @@ export const completeChangeVariableName = (identifier: VariableIdentifier, newNa ) => { const originalVariable = getVariable(identifier.id, getState()); const model = { ...cloneDeep(originalVariable), name: newName, id: newName }; - const global = originalVariable.global; - const index = originalVariable.index; + const global = originalVariable.global!; // global is undefined because of old variable system + const index = originalVariable.index!; // index is undefined because of old variable system const renamedIdentifier = toVariableIdentifier(model); dispatch(addVariable(toVariablePayload(renamedIdentifier, { global, index, model }))); diff --git a/public/app/features/variables/pickers/OptionsPicker/reducer.test.ts b/public/app/features/variables/pickers/OptionsPicker/reducer.test.ts index a520c35057e..09aa48b8233 100644 --- a/public/app/features/variables/pickers/OptionsPicker/reducer.test.ts +++ b/public/app/features/variables/pickers/OptionsPicker/reducer.test.ts @@ -3,6 +3,7 @@ import { hideOptions, initialState as optionsPickerInitialState, moveOptionsHighlight, + OPTIONS_LIMIT, optionsPickerReducer, OptionsPickerState, showOptions, @@ -607,6 +608,32 @@ describe('optionsPickerReducer', () => { highlightIndex: 0, }); }); + + describe('and option count is are greater then OPTIONS_LIMIT', () => { + it('then state should be correct', () => { + const searchQuery = 'option:1337'; + + const options = []; + for (let index = 0; index <= OPTIONS_LIMIT + 337; index++) { + options.push({ text: `option:${index}`, value: `option:${index}`, selected: false }); + } + + const { initialState } = getVariableTestContext({ + queryValue: searchQuery, + }); + + reducerTester() + .givenReducer(optionsPickerReducer, cloneDeep(initialState)) + .whenActionIsDispatched(updateOptionsAndFilter(options)) + .thenStateShouldEqual({ + ...cloneDeep(initialState), + options: [{ text: 'option:1337', value: 'option:1337', selected: false }], + selectedValues: [], + queryValue: 'option:1337', + highlightIndex: 0, + }); + }); + }); }); describe('when updateOptionsFromSearch is dispatched and variable has searchFilter', () => { diff --git a/public/app/features/variables/pickers/OptionsPicker/reducer.ts b/public/app/features/variables/pickers/OptionsPicker/reducer.ts index e60d595d897..0e988fe0394 100644 --- a/public/app/features/variables/pickers/OptionsPicker/reducer.ts +++ b/public/app/features/variables/pickers/OptionsPicker/reducer.ts @@ -34,6 +34,8 @@ export const initialState: OptionsPickerState = { multi: false, }; +export const OPTIONS_LIMIT = 1000; + const getTags = (model: VariableWithMultiSupport) => { if (isQuery(model) && Array.isArray(model.tags)) { return cloneDeep(model.tags); @@ -50,7 +52,7 @@ const applyLimit = (options: VariableOption[]): VariableOption[] => { if (!Array.isArray(options)) { return []; } - return options.slice(0, Math.min(options.length, 1000)); + return options.slice(0, Math.min(options.length, OPTIONS_LIMIT)); }; const updateDefaultSelection = (state: OptionsPickerState): OptionsPickerState => { @@ -176,13 +178,14 @@ const optionsPickerSlice = createSlice({ updateOptionsAndFilter: (state, action: PayloadAction): OptionsPickerState => { const searchQuery = (state.queryValue ?? '').toLowerCase(); - state.options = applyLimit(action.payload); - state.highlightIndex = 0; - state.options = state.options.filter(option => { + const filteredOptions = action.payload.filter(option => { const text = Array.isArray(option.text) ? option.text.toString() : option.text; return text.toLowerCase().indexOf(searchQuery) !== -1; }); + state.options = applyLimit(filteredOptions); + state.highlightIndex = 0; + return applyStateChanges(state, updateSelectedValues); }, updateOptionsFromSearch: (state, action: PayloadAction): OptionsPickerState => { diff --git a/public/app/features/variables/state/selectors.ts b/public/app/features/variables/state/selectors.ts index 583508ed5c3..9136e268e56 100644 --- a/public/app/features/variables/state/selectors.ts +++ b/public/app/features/variables/state/selectors.ts @@ -12,7 +12,7 @@ export const getVariable = ( if (throwWhenMissing) { throw new Error(`Couldn't find variable with id:${id}`); } - return undefined; + return (undefined as unknown) as T; } return state.templating.variables[id] as T; diff --git a/public/app/plugins/datasource/testdata/metricTree.ts b/public/app/plugins/datasource/testdata/metricTree.ts index 14300d1006a..6b617d4dd3f 100644 --- a/public/app/plugins/datasource/testdata/metricTree.ts +++ b/public/app/plugins/datasource/testdata/metricTree.ts @@ -19,7 +19,7 @@ function buildMetricTree(parent: string, depth: number): TreeNode[] { const chars = ['A', 'B', 'C']; const children: TreeNode[] = []; - if (depth > 3) { + if (depth > 5) { return []; }