Skip to content

N
nexpie-grafana-theme
Commit 8b672c8a by Hugo Häggmark Committed by GitHub
Options

Templating: Adds typings to Variables (#20117) 

* Refactor: Adds typings and changes AdHocVariable to conform to new typings

* Refactor: Adds typings to ConstantVariable

* Refactor: Adds typings to IntervalVariable

* Refactor: Adds typings to QueryVariable

* Refactor: Adds typings to TextBoxVariable

* Refactor: Adds typings to CustomVariable
parent 9b7748ec
Showing with 260 additions and 81 deletions
public/app/features/templating/TextBoxVariable.ts
import { Variable, assignModelProperties, variableTypes } from './variable'; import {
assignModelProperties,
TextBoxVariableModel,
VariableActions,
VariableHide,
VariableOption,
VariableType,
variableTypes,
} from './variable';
import { VariableSrv } from './variable_srv'; import { VariableSrv } from './variable_srv';
export class TextBoxVariable implements Variable { export class TextBoxVariable implements TextBoxVariableModel, VariableActions {
query: string; type: VariableType;
current: any; name: string;
options: any[]; label: string;
hide: VariableHide;
skipUrlSync: boolean; skipUrlSync: boolean;
query: string;
current: VariableOption;
options: VariableOption[];
defaults: any = { defaults: TextBoxVariableModel = {
type: 'textbox', type: 'textbox',
name: '', name: '',
hide: 0,
label: '', label: '',
hide: VariableHide.dontHide,
query: '', query: '',
current: {}, current: {} as VariableOption,
options: [], options: [],
skipUrlSync: false, skipUrlSync: false,
}; };
...@@ -33,7 +45,7 @@ export class TextBoxVariable implements Variable { ...@@ -33,7 +45,7 @@ export class TextBoxVariable implements Variable {
} }
updateOptions() { updateOptions() {
this.options = [{ text: this.query.trim(), value: this.query.trim() }]; this.options = [{ text: this.query.trim(), value: this.query.trim(), selected: false }];
this.current = this.options[0]; this.current = this.options[0];
return Promise.resolve(); return Promise.resolve();
} }
......
public/app/features/templating/adhoc_variable.ts
import _ from 'lodash'; import _ from 'lodash';
import { Variable, assignModelProperties, variableTypes } from './variable'; import {
AdHocVariableFilter,
AdHocVariableModel,
assignModelProperties,
VariableActions,
VariableHide,
VariableType,
variableTypes,
} from './variable';
export class AdhocVariable implements Variable { export class AdhocVariable implements AdHocVariableModel, VariableActions {
filters: any[]; type: VariableType;
name: string;
label: string;
hide: VariableHide;
skipUrlSync: boolean; skipUrlSync: boolean;
filters: AdHocVariableFilter[];
datasource: string;
defaults: any = { defaults: AdHocVariableModel = {
type: 'adhoc', type: 'adhoc',
name: '', name: '',
label: '', label: '',
hide: 0, hide: VariableHide.dontHide,
skipUrlSync: false,
datasource: null, datasource: null,
filters: [], filters: [],
skipUrlSync: false,
}; };
/** @ngInject */ /** @ngInject */
...@@ -50,6 +63,7 @@ export class AdhocVariable implements Variable { ...@@ -50,6 +63,7 @@ export class AdhocVariable implements Variable {
key: values[0], key: values[0],
operator: values[1], operator: values[1],
value: values[2], value: values[2],
condition: '',
}; };
}); });
......
public/app/features/templating/constant_variable.ts
import { Variable, assignModelProperties, variableTypes } from './variable'; import {
assignModelProperties,
ConstantVariableModel,
VariableActions,
VariableHide,
VariableOption,
VariableType,
variableTypes,
} from './variable';
import { VariableSrv } from './all'; import { VariableSrv } from './all';
export class ConstantVariable implements Variable { export class ConstantVariable implements ConstantVariableModel, VariableActions {
query: string; type: VariableType;
options: any[]; name: string;
current: any; label: string;
hide: VariableHide;
skipUrlSync: boolean; skipUrlSync: boolean;
query: string;
options: VariableOption[];
current: VariableOption;
defaults: any = { defaults: ConstantVariableModel = {
type: 'constant', type: 'constant',
name: '', name: '',
hide: 2, hide: VariableHide.hideLabel,
label: '', label: '',
query: '', query: '',
current: {}, current: {} as VariableOption,
options: [], options: [],
skipUrlSync: false, skipUrlSync: false,
}; };
...@@ -33,7 +45,7 @@ export class ConstantVariable implements Variable { ...@@ -33,7 +45,7 @@ export class ConstantVariable implements Variable {
} }
updateOptions() { updateOptions() {
this.options = [{ text: this.query.trim(), value: this.query.trim() }]; this.options = [{ text: this.query.trim(), value: this.query.trim(), selected: false }];
this.setValue(this.options[0]); this.setValue(this.options[0]);
return Promise.resolve(); return Promise.resolve();
} }
......
public/app/features/templating/custom_variable.ts
import _ from 'lodash'; import _ from 'lodash';
import { Variable, assignModelProperties, variableTypes } from './variable'; import {
assignModelProperties,
CustomVariableModel,
VariableActions,
VariableHide,
VariableOption,
VariableType,
variableTypes,
} from './variable';
import { VariableSrv } from './variable_srv'; import { VariableSrv } from './variable_srv';
export class CustomVariable implements Variable { export class CustomVariable implements CustomVariableModel, VariableActions {
type: VariableType;
name: string;
label: string;
hide: VariableHide;
skipUrlSync: boolean;
query: string; query: string;
options: any; options: VariableOption[];
includeAll: boolean; includeAll: boolean;
multi: boolean; multi: boolean;
current: any; current: VariableOption;
skipUrlSync: boolean; allValue: string;
defaults: any = { defaults: CustomVariableModel = {
type: 'custom', type: 'custom',
name: '', name: '',
label: '', label: '',
hide: 0, hide: VariableHide.dontHide,
options: [], skipUrlSync: false,
current: {},
query: '', query: '',
options: [],
includeAll: false, includeAll: false,
multi: false, multi: false,
current: {} as VariableOption,
allValue: null, allValue: null,
skipUrlSync: false,
}; };
/** @ngInject */ /** @ngInject */
...@@ -42,7 +55,7 @@ export class CustomVariable implements Variable { ...@@ -42,7 +55,7 @@ export class CustomVariable implements Variable {
// extract options in comma separated string (use backslash to escape wanted commas) // extract options in comma separated string (use backslash to escape wanted commas)
this.options = _.map(this.query.match(/(?:\\,|[^,])+/g), text => { this.options = _.map(this.query.match(/(?:\\,|[^,])+/g), text => {
text = text.replace(/\\,/g, ','); text = text.replace(/\\,/g, ',');
return { text: text.trim(), value: text.trim() }; return { text: text.trim(), value: text.trim(), selected: false };
}); });
if (this.includeAll) { if (this.includeAll) {
...@@ -53,7 +66,7 @@ export class CustomVariable implements Variable { ...@@ -53,7 +66,7 @@ export class CustomVariable implements Variable {
} }
addAllOption() { addAllOption() {
this.options.unshift({ text: 'All', value: '$__all' }); this.options.unshift({ text: 'All', value: '$__all', selected: false });
} }
dependsOn(variable: any) { dependsOn(variable: any) {
......
public/app/features/templating/datasource_variable.ts
import { Variable, containsVariable, assignModelProperties, variableTypes } from './variable'; import { assignModelProperties, containsVariable, VariableActions, variableTypes } from './variable';
import { stringToJsRegex } from '@grafana/data'; import { stringToJsRegex } from '@grafana/data';
import { VariableSrv } from './variable_srv'; import { VariableSrv } from './variable_srv';
import { TemplateSrv } from './template_srv'; import { TemplateSrv } from './template_srv';
import { DatasourceSrv } from '../plugins/datasource_srv'; import { DatasourceSrv } from '../plugins/datasource_srv';
export class DatasourceVariable implements Variable { export class DatasourceVariable implements VariableActions {
regex: any; regex: any;
query: string; query: string;
options: any; options: any;
......
public/app/features/templating/interval_variable.ts
import _ from 'lodash'; import _ from 'lodash';
import kbn from 'app/core/utils/kbn'; import kbn from 'app/core/utils/kbn';
import { Variable, assignModelProperties, variableTypes } from './variable'; import {
assignModelProperties,
IntervalVariableModel,
VariableActions,
VariableHide,
VariableOption,
VariableRefresh,
VariableType,
variableTypes,
} from './variable';
import { TimeSrv } from '../dashboard/services/TimeSrv'; import { TimeSrv } from '../dashboard/services/TimeSrv';
import { TemplateSrv } from './template_srv'; import { TemplateSrv } from './template_srv';
import { VariableSrv } from './variable_srv'; import { VariableSrv } from './variable_srv';
export class IntervalVariable implements Variable { export class IntervalVariable implements IntervalVariableModel, VariableActions {
type: VariableType;
name: string; name: string;
label: string;
hide: VariableHide;
skipUrlSync: boolean;
auto_count: number; // tslint:disable-line variable-name auto_count: number; // tslint:disable-line variable-name
auto_min: number; // tslint:disable-line variable-name auto_min: string; // tslint:disable-line variable-name
options: any; options: VariableOption[];
auto: boolean; auto: boolean;
query: string; query: string;
refresh: number; refresh: VariableRefresh;
current: any; current: VariableOption;
skipUrlSync: boolean;
defaults: any = { defaults: IntervalVariableModel = {
type: 'interval', type: 'interval',
name: '', name: '',
hide: 0,
label: '', label: '',
refresh: 2, hide: VariableHide.dontHide,
skipUrlSync: false,
auto_count: 30,
auto_min: '10s',
options: [], options: [],
current: {},
query: '1m,10m,30m,1h,6h,12h,1d,7d,14d,30d',
auto: false, auto: false,
auto_min: '10s', query: '1m,10m,30m,1h,6h,12h,1d,7d,14d,30d',
auto_count: 30, refresh: VariableRefresh.onTimeRangeChanged,
skipUrlSync: false, current: {} as VariableOption,
}; };
/** @ngInject */ /** @ngInject */
...@@ -39,7 +51,7 @@ export class IntervalVariable implements Variable { ...@@ -39,7 +51,7 @@ export class IntervalVariable implements Variable {
private variableSrv: VariableSrv private variableSrv: VariableSrv
) { ) {
assignModelProperties(this, model, this.defaults); assignModelProperties(this, model, this.defaults);
this.refresh = 2; this.refresh = VariableRefresh.onTimeRangeChanged;
} }
getSaveModel() { getSaveModel() {
...@@ -62,6 +74,7 @@ export class IntervalVariable implements Variable { ...@@ -62,6 +74,7 @@ export class IntervalVariable implements Variable {
this.options.unshift({ this.options.unshift({
text: 'auto', text: 'auto',
value: '$__auto_interval_' + this.name, value: '$__auto_interval_' + this.name,
selected: false,
}); });
} }
...@@ -75,7 +88,7 @@ export class IntervalVariable implements Variable { ...@@ -75,7 +88,7 @@ export class IntervalVariable implements Variable {
// extract options between quotes and/or comma // extract options between quotes and/or comma
this.options = _.map(this.query.match(/(["'])(.*?)\1|\w+/g), text => { this.options = _.map(this.query.match(/(["'])(.*?)\1|\w+/g), text => {
text = text.replace(/["']+/g, ''); text = text.replace(/["']+/g, '');
return { text: text.trim(), value: text.trim() }; return { text: text.trim(), value: text.trim(), selected: false };
}); });
this.updateAutoValue(); this.updateAutoValue();
......
public/app/features/templating/query_variable.ts
import _ from 'lodash'; import _ from 'lodash';
import { assignModelProperties, containsVariable, Variable, variableTypes } from './variable'; import {
assignModelProperties,
containsVariable,
QueryVariableModel,
VariableActions,
VariableHide,
VariableOption,
VariableRefresh,
VariableSort,
VariableTag,
VariableType,
variableTypes,
} from './variable';
import { stringToJsRegex } from '@grafana/data'; import { stringToJsRegex } from '@grafana/data';
import DatasourceSrv from '../plugins/datasource_srv'; import DatasourceSrv from '../plugins/datasource_srv';
import { TemplateSrv } from './template_srv'; import { TemplateSrv } from './template_srv';
import { VariableSrv } from './variable_srv'; import { VariableSrv } from './variable_srv';
import { TimeSrv } from '../dashboard/services/TimeSrv'; import { TimeSrv } from '../dashboard/services/TimeSrv';
function getNoneOption() { function getNoneOption(): VariableOption {
return { text: 'None', value: '', isNone: true }; return { text: 'None', value: '', isNone: true, selected: false };
} }
export class QueryVariable implements Variable { export class QueryVariable implements QueryVariableModel, VariableActions {
datasource: any; type: VariableType;
query: any;
regex: any;
sort: any;
options: any;
current: any;
refresh: number;
hide: number;
name: string; name: string;
label: string;
hide: VariableHide;
skipUrlSync: boolean;
datasource: string;
query: string;
regex: string;
sort: VariableSort;
options: VariableOption[];
current: VariableOption;
refresh: VariableRefresh;
multi: boolean; multi: boolean;
includeAll: boolean; includeAll: boolean;
useTags: boolean; useTags: boolean;
tagsQuery: string; tagsQuery: string;
tagValuesQuery: string; tagValuesQuery: string;
tags: any[]; tags: VariableTag[];
skipUrlSync: boolean;
definition: string; definition: string;
allValue: string;
defaults: any = { defaults: QueryVariableModel = {
type: 'query', type: 'query',
name: '',
label: null, label: null,
hide: VariableHide.dontHide,
skipUrlSync: false,
datasource: null,
query: '', query: '',
regex: '', regex: '',
sort: 0, sort: VariableSort.disabled,
datasource: null, refresh: VariableRefresh.never,
refresh: 0,
hide: 0,
name: '',
multi: false, multi: false,
includeAll: false, includeAll: false,
allValue: null, allValue: null,
options: [], options: [],
current: {}, current: {} as VariableOption,
tags: [], tags: [],
useTags: false, useTags: false,
tagsQuery: '', tagsQuery: '',
tagValuesQuery: '', tagValuesQuery: '',
skipUrlSync: false,
definition: '', definition: '',
}; };
...@@ -151,7 +166,7 @@ export class QueryVariable implements Variable { ...@@ -151,7 +166,7 @@ export class QueryVariable implements Variable {
} }
addAllOption() { addAllOption() {
this.options.unshift({ text: 'All', value: '$__all' }); this.options.unshift({ text: 'All', value: '$__all', selected: false });
} }
metricNamesToVariableValues(metricNames: any[]) { metricNamesToVariableValues(metricNames: any[]) {
......
public/app/features/templating/specs/query_variable.test.ts
...@@ -16,7 +16,7 @@ describe('QueryVariable', () => { ...@@ -16,7 +16,7 @@ describe('QueryVariable', () => {
it('get model should copy changes back to model', () => { it('get model should copy changes back to model', () => {
const variable = new QueryVariable({}, null, null, null, null); const variable = new QueryVariable({}, null, null, null, null);
variable.options = [{ text: 'test' }]; variable.options = [{ text: 'test', value: '', selected: false }];
variable.datasource = 'google'; variable.datasource = 'google';
variable.regex = 'asd'; variable.regex = 'asd';
variable.sort = 50; variable.sort = 50;
...@@ -31,7 +31,7 @@ describe('QueryVariable', () => { ...@@ -31,7 +31,7 @@ describe('QueryVariable', () => {
it('if refresh != 0 then remove options in presisted mode', () => { it('if refresh != 0 then remove options in presisted mode', () => {
const variable = new QueryVariable({}, null, null, null, null); const variable = new QueryVariable({}, null, null, null, null);
variable.options = [{ text: 'test' }]; variable.options = [{ text: 'test', value: '', selected: false }];
variable.refresh = 1; variable.refresh = 1;
const model = variable.getSaveModel(); const model = variable.getSaveModel();
......
public/app/features/templating/variable.ts
...@@ -42,7 +42,107 @@ export const interpolateSearchFilter = (args: InterpolateSearchFilterOptions): s ...@@ -42,7 +42,107 @@ export const interpolateSearchFilter = (args: InterpolateSearchFilterOptions): s
return query.replace(SEARCH_FILTER_VARIABLE, replaceValue); return query.replace(SEARCH_FILTER_VARIABLE, replaceValue);
}; };
export interface Variable { export enum VariableRefresh {
never,
onDashboardLoad,
onTimeRangeChanged,
}
export enum VariableHide {
dontHide,
hideVariable,
hideLabel,
}
export enum VariableSort {
disabled,
alphabeticalAsc,
alphabeticalDesc,
numericalAsc,
numericalDesc,
alphabeticalCaseInsensitiveAsc,
alphabeticalCaseInsensitiveDesc,
}
export interface VariableTag {
text: string | string[];
}
export interface VariableOption {
selected: boolean;
text: string | string[];
value: string | string[];
isNone?: boolean;
}
export type VariableType = 'query' | 'adhoc' | 'constant' | 'datasource' | 'interval' | 'textbox' | 'custom';
export interface AdHocVariableFilter {
key: string;
operator: string;
value: string;
condition: string;
}
export interface AdHocVariableModel extends VariableModel {
datasource: string;
filters: AdHocVariableFilter[];
}
export interface CustomVariableModel extends VariableWithOptions {
allValue: string;
includeAll: boolean;
multi: boolean;
}
export interface DataSourceVariableModel extends VariableWithOptions {
includeAll: boolean;
multi: boolean;
refresh: VariableRefresh;
regex: string;
}
export interface IntervalVariableModel extends VariableWithOptions {
auto: boolean;
auto_min: string;
auto_count: number;
refresh: VariableRefresh;
}
export interface QueryVariableModel extends VariableWithOptions {
allValue: string;
datasource: string;
definition: string;
includeAll: boolean;
multi: boolean;
refresh: VariableRefresh;
regex: string;
sort: VariableSort;
tags: VariableTag[];
tagsQuery: string;
tagValuesQuery: string;
useTags: boolean;
}
export interface TextBoxVariableModel extends VariableWithOptions {}
export interface ConstantVariableModel extends VariableWithOptions {}
export interface VariableWithOptions extends VariableModel {
current: VariableOption;
options: VariableOption[];
query: string;
}
export interface VariableModel {
type: VariableType;
name: string;
label: string;
hide: VariableHide;
skipUrlSync: boolean;
}
export interface VariableActions {
setValue(option: any): any; setValue(option: any): any;
updateOptions(searchFilter?: string): any; updateOptions(searchFilter?: string): any;
dependsOn(variable: any): any; dependsOn(variable: any): any;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment