grafana/public/app/features/templating/query/reducer.ts
Marcus Andersson cc813d71c6
Templating: Migrates some variable types from Angular to React/Redux (#22434)
* Refactor: Adds variables in state to TemplateSrv

* Refactor: Introduces some typings and structures

* Refactor: Introduces picker to adapter

* Refactor: Removes useState and introduces contains instead

* Refactor: Introduces Variable Editor

* Refactor: Adds uuid and simplifies state

* Refactor: Consolidates to VariableRenderer

* Refactor: Adds name change capability

* Refactor: Adds variableMiddleware

* Refactor: Adds ability to change Angular type to type in State

* Fix: Fixes so we check for duplicate names

* Refactor: Adds ability to change State type to type in Angular

* Refactor: Updates name in dashboard templating list

* Refactor: Adds label change to VariableEditor

* Refactor: Adds hide change to VariableEditor

* Refactor: Adds update ability

* Refactor: Adds tooltip

* Refactor: Adds SelectionOptionsEditor

* Refactor: Adds query editor and validation

* Refactor: Adds regex and sort to editor

* Refactor: Adds Selection options

* Refactor: Adds Varible Values Previewer

* Refactor: Changes from array in state to Record

* Refactor: Removes getVariableAtIndex from templateSrv

* Tests: Fixs broken tests

* Chore: Fixes duplicate merge import

* Refactor: Removes strict null errors

* Refactor: Adds duplicate variable

* Refactor: Adds remove variable

* Refactor: Adds change order of variables

* Refactor: Adds add new variable

* Chore: Fixes Prettier formatting

* Refactor: Adds VariablePicker

* Fixed so sub menu is displayed when we only have redux template variables.

* removed unused variable.

* tags will be visibile in the new react picker.

* added some nice colors to the tags.

* Added thunk for selecting a tag.

* Refactor: Cleans up templating state when dashboard unloads

* Refactor: Adds save capabilities for variables in state

* added possibility to select tag.

* Added so you can deselect a tag.

* Fixed issue with coloring on top.

* minor refactoring to make the code more slim.

* Refactor: Fixes dispatch return and copy of variable

* selecting options when tag i selected

* small refactoring.

* fixed so we use options.

* Refactor: Adds getValueForUrl capabilities

* first implementation of keyboard navigation on picker.

* removed comment.

* fixed so you can toggle all options.

* Refactor: Simplified state handling using Redux Toolkit and flat reducer structure

* Refactor: Adds sharedTemplatingReducer and queryVariableReducer

* Tests: Fixs broken tests

* Chore: Removes some strict null errors

* Tests: Fix broken tests

* Refactor: Splitted QueryVariablePicker into smaller components

* Refactor: Moves linktext and selected tags to component instead

* Fix: Fixes the ability to have multiple dropdowns opened at same time

* Fix: Fixes onKeyDown from prev refactor

* Refactor: Adds searchfilter searching

* Tests: Fixes after running e2e tests

* Refactor: Adds an attempt to solve dependencies at startup

* Refactor: Adds feature toggle

* Refactor: Resets all angular files to master

* Refactor: Move stuff to query folder

* Refactor: Initial commit for SubMenu component

* Refactor: Updated DashboardModel with new list

* Refactor: Adds feature toggle to dashboard model and friends

* Refactor: Adds picker to SubMenu

* Refactor: Fixes styling on SubMenu

* Refactor: Fixes processvariables

* Refactor: Initial EditorList skeleton

* Refactor: Refactors out VariableEditorList and VariableEditorContainer

* Refactor: Adds New variable functionality

* Refactor: Adds registred types

* Refactor: Adds edit existing variable functionality

* Refactor: Changes params to thunks

* Refactor: Small fix for cleaning up state when clicking update/add

* Refactor: Better typings for outer containers

* Refactor: Adds change order functionality

* Refactor: Removed notify angular args

* Change so the url is in sync with the redux template variables.

* Adding support for saving proper values and checking changes.

* Refactor: Adds duplicate variable functionality

* Feature: Adds remove variable functionality

* Refactor: Small refactor so e2e tests work as before

* Refactor: Returns null if no visible variables

* Refactor: Adds annotations to SubMenu

* Refactor: Fixes toggling of annotations in SubMenu

* added dashboard links to new submehu.

* Refactor: Small refactor breaking up into smaller components

* Fix: Fixes infinite recursive loop when changing varible name

* Templating: Do not mutate location query state

* Refactor: Fixes minor timing issue when adding new variable

* Refactor: removes initialization in variable_srv constructor

* Refactor: Suggestion on how to handle templating.list in DashboardExporter

* Refactor: Adds getVariables typings and changes ChangeTracker and ShareSnapshotCtrl

* Refactor: Adds getVariable on DashboardModel and changes DashboardMigrator

* Fix: Fixes repeated panels

* wip: starting to add custom variable type.

* Refactor: Merging two different toVariablePayload functions

* Tests: Fixes broken tests

* Fix: Reduces strict null errors

* Tests: Initial commit and fixes strange dependency order

* Tests: Covers sharedTemplatingReducer with tests

* Refactor: Rename state/index.ts => state/reducers.ts as every where else

* Refactor: Renames and moves adapters.ts

* Tests: Adds tests for templatingReducer

* Tests: Adds intitial tests for queryVariableReducer

* starting to ad custom variable.

* Tests: Adds more queryVariableReducer tests

* Added support for custom variable. Next up applying some DRY principles and refactoring.

* fixed compile issue.

* added todo.

* Tests: Fixes broken test

* Tests: Covers queryVariableReducer with tests and fixed a couple of bugs

* Fix: Fixes broken test

* Fix: Reduces strict null errors

* change so custom won't be depending on anything elese.

* fixed descriptions.

* removed unused dependency.

* Fixed issue when adding a new variable and editor is being unmount twice.

* fixed issue with select option loop.

* changed so we update query on typing in editor and removed it from component state.

* Moved runQuery up one level in the component tree.

* renamed action and moved it to custom actions.

* moved applyStateChanges to shared code.

* removed todo comment.

* first stab on moving picker to more general.

* Refactor: Changes so we always show variables type

* removed duplicate code regarding picker.

* Did some renamings.

* Feature: Adds text box variable type

* moved tests from query reducer to picker reducer.

* Removed picker from VariableState.

* removed reference to picker.

* Some more refactorings of the picker reducer + actions.

* Chore: Refactors away editor state to its own state slice (#22515)

* Refactor: Inital move, tests not working

* Tests: Adds editorReducer tests

* Refactor: Cleaning up

* Refactor: Moves logic to thunk instead

* Refactor: Initial commit

* Refactor: Combines reducers to one state

* Refactor: Adds combine reducers

* moved navigation logic flow to a thunk instead of in the component.

* fixed issue with rendering picker link.

* Refactor: Removes variable prop from templating.variables

* refactored and removed some more code.

* Feature: adds Constant variable type

* fixed so tags can be selected.

* Fix: fixes default hide for constant and enum order

* fixed so tags works again.

* Fix: fixes so we use Angular editor when newVariables is not defined

* Fix: fixes wrong hide default for Constant variable

* Fix: fixes bug when using duplicate button

* Fix: changes action id

* Tests: prepares for newVariables

* Chore: reduces strict null errors

* Refactor: removes uuidInEditorReducer for simplification

* Chore: changes after PR comments

* Chore: uses getConfig instead of config

* Tests: fixes so e2e tests check for feature toggle and fixed initLock bug

* Refactor: changes so sharedReducer uses createSlice instead

* Refactor: changes textBoxVariableReducer to use creactSlice instead

* Refactor: changes queryBoxVariableReducer to use creactSlice instead

* Refactor: changes customVariableReducer to use creactSlice instead

* Refactor: changes constantVariableReducer to use creactSlice instead

* Refactor: moves types to specific types.ts files instead

* changed so we use queryValue stored on the variable to populate options input when opening picker.

* Feature: adds the ability to test templating thunks using real store and middleware

* Chore: cleans up unused import

* excluded queryValue from the getSaveModel

* Refactor: adds whenAsyncActionIsDispatched to reduxTester

* Tests: adds initial tests for processVariables

* Added reducer tests for constant variable.

* added tests for custom reducer.

* added tets for texbox reducer.

* Tests: adds more tests for ProcessVariable

* Refactor: fixes processVariable flow so we do notrun updateOptions twice

* Tests: finishes tests for processVariables and removed skip test

* added actions tests for custom and constant.

* Tests: adds tests for setOptionFromUrl

* Tests: adds a naive variable mock builder

* Tests: adds tests for validateVariableSelectionState

* added tests for query variable actions.

* added last test for query actions.

* added more tests.

* some more tests.

* fixed typing errors.

* Fixed issues with variable tags.

Co-authored-by: Hugo Häggmark <hugo.haggmark@grafana.com>
Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
2020-03-10 08:53:41 +01:00

166 lines
4.5 KiB
TypeScript

import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import _ from 'lodash';
import { DataSourceApi, DataSourceSelectItem, stringToJsRegex } from '@grafana/data';
import {
QueryVariableModel,
VariableHide,
VariableOption,
VariableRefresh,
VariableSort,
VariableTag,
} from '../variable';
import templateSrv from '../template_srv';
import {
ALL_VARIABLE_TEXT,
ALL_VARIABLE_VALUE,
EMPTY_UUID,
getInstanceState,
NONE_VARIABLE_TEXT,
NONE_VARIABLE_VALUE,
VariablePayload,
} from '../state/types';
import { ComponentType } from 'react';
import { VariableQueryProps } from '../../../types';
import { initialVariablesState, VariablesState } from '../state/variablesReducer';
export interface QueryVariableEditorState {
VariableQueryEditor: ComponentType<VariableQueryProps> | null;
dataSources: DataSourceSelectItem[];
dataSource: DataSourceApi | null;
}
export const initialQueryVariableModelState: QueryVariableModel = {
uuid: EMPTY_UUID,
global: false,
index: -1,
type: 'query',
name: '',
label: null,
hide: VariableHide.dontHide,
skipUrlSync: false,
datasource: null,
query: '',
regex: '',
sort: VariableSort.disabled,
refresh: VariableRefresh.never,
multi: false,
includeAll: false,
allValue: null,
options: [],
current: {} as VariableOption,
tags: [],
useTags: false,
tagsQuery: '',
tagValuesQuery: '',
definition: '',
initLock: null,
};
const sortVariableValues = (options: any[], sortOrder: VariableSort) => {
if (sortOrder === VariableSort.disabled) {
return options;
}
const sortType = Math.ceil(sortOrder / 2);
const reverseSort = sortOrder % 2 === 0;
if (sortType === 1) {
options = _.sortBy(options, 'text');
} else if (sortType === 2) {
options = _.sortBy(options, opt => {
const matches = opt.text.match(/.*?(\d+).*/);
if (!matches || matches.length < 2) {
return -1;
} else {
return parseInt(matches[1], 10);
}
});
} else if (sortType === 3) {
options = _.sortBy(options, opt => {
return _.toLower(opt.text);
});
}
if (reverseSort) {
options = options.reverse();
}
return options;
};
const metricNamesToVariableValues = (variableRegEx: string, sort: VariableSort, metricNames: any[]) => {
let regex, i, matches;
let options: VariableOption[] = [];
if (variableRegEx) {
regex = stringToJsRegex(templateSrv.replace(variableRegEx, {}, 'regex'));
}
for (i = 0; i < metricNames.length; i++) {
const item = metricNames[i];
let text = item.text === undefined || item.text === null ? item.value : item.text;
let value = item.value === undefined || item.value === null ? item.text : item.value;
if (_.isNumber(value)) {
value = value.toString();
}
if (_.isNumber(text)) {
text = text.toString();
}
if (regex) {
matches = regex.exec(value);
if (!matches) {
continue;
}
if (matches.length > 1) {
value = matches[1];
text = matches[1];
}
}
options.push({ text: text, value: value, selected: false });
}
options = _.uniqBy(options, 'value');
return sortVariableValues(options, sort);
};
export const queryVariableSlice = createSlice({
name: 'templating/query',
initialState: initialVariablesState,
reducers: {
updateVariableOptions: (state: VariablesState, action: PayloadAction<VariablePayload<any[]>>) => {
const results = action.payload.data;
const instanceState = getInstanceState<QueryVariableModel>(state, action.payload.uuid);
const { regex, includeAll, sort } = instanceState;
const options = metricNamesToVariableValues(regex, sort, results);
if (includeAll) {
options.unshift({ text: ALL_VARIABLE_TEXT, value: ALL_VARIABLE_VALUE, selected: false });
}
if (!options.length) {
options.push({ text: NONE_VARIABLE_TEXT, value: NONE_VARIABLE_VALUE, isNone: true, selected: false });
}
instanceState.options = options;
},
updateVariableTags: (state: VariablesState, action: PayloadAction<VariablePayload<any[]>>) => {
const instanceState = getInstanceState<QueryVariableModel>(state, action.payload.uuid);
const results = action.payload.data;
const tags: VariableTag[] = [];
for (let i = 0; i < results.length; i++) {
tags.push({ text: results[i].text, selected: false });
}
instanceState.tags = tags;
},
},
});
export const queryVariableReducer = queryVariableSlice.reducer;
export const { updateVariableOptions, updateVariableTags } = queryVariableSlice.actions;