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';
export class TextBoxVariable implements Variable {
query: string;
current: any;
options: any[];
export class TextBoxVariable implements TextBoxVariableModel, VariableActions {
type: VariableType;
name: string;
label: string;
hide: VariableHide;
skipUrlSync: boolean;
query: string;
current: VariableOption;
options: VariableOption[];
defaults: any = {
defaults: TextBoxVariableModel = {
type: 'textbox',
name: '',
hide: 0,
label: '',
hide: VariableHide.dontHide,
query: '',
current: {},
current: {} as VariableOption,
options: [],
skipUrlSync: false,
};
......@@ -33,7 +45,7 @@ export class TextBoxVariable implements Variable {
}
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];
return Promise.resolve();
}
......
public/app/features/templating/adhoc_variable.ts
import _ from 'lodash';
import { Variable, assignModelProperties, variableTypes } from './variable';
import {
AdHocVariableFilter,
AdHocVariableModel,
assignModelProperties,
VariableActions,
VariableHide,
VariableType,
variableTypes,
} from './variable';
export class AdhocVariable implements Variable {
filters: any[];
export class AdhocVariable implements AdHocVariableModel, VariableActions {
type: VariableType;
name: string;
label: string;
hide: VariableHide;
skipUrlSync: boolean;
filters: AdHocVariableFilter[];
datasource: string;
defaults: any = {
defaults: AdHocVariableModel = {
type: 'adhoc',
name: '',
label: '',
hide: 0,
hide: VariableHide.dontHide,
skipUrlSync: false,
datasource: null,
filters: [],
skipUrlSync: false,
};
/** @ngInject */
......@@ -50,6 +63,7 @@ export class AdhocVariable implements Variable {
key: values[0],
operator: values[1],
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';
export class ConstantVariable implements Variable {
query: string;
options: any[];
current: any;
export class ConstantVariable implements ConstantVariableModel, VariableActions {
type: VariableType;
name: string;
label: string;
hide: VariableHide;
skipUrlSync: boolean;
query: string;
options: VariableOption[];
current: VariableOption;
defaults: any = {
defaults: ConstantVariableModel = {
type: 'constant',
name: '',
hide: 2,
hide: VariableHide.hideLabel,
label: '',
query: '',
current: {},
current: {} as VariableOption,
options: [],
skipUrlSync: false,
};
......@@ -33,7 +45,7 @@ export class ConstantVariable implements Variable {
}
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]);
return Promise.resolve();
}
......
public/app/features/templating/custom_variable.ts
import _ from 'lodash';
import { Variable, assignModelProperties, variableTypes } from './variable';
import {
assignModelProperties,
CustomVariableModel,
VariableActions,
VariableHide,
VariableOption,
VariableType,
variableTypes,
} from './variable';
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;
options: any;
options: VariableOption[];
includeAll: boolean;
multi: boolean;
current: any;
skipUrlSync: boolean;
current: VariableOption;
allValue: string;
defaults: any = {
defaults: CustomVariableModel = {
type: 'custom',
name: '',
label: '',
hide: 0,
options: [],
current: {},
hide: VariableHide.dontHide,
skipUrlSync: false,
query: '',
options: [],
includeAll: false,
multi: false,
current: {} as VariableOption,
allValue: null,
skipUrlSync: false,
};
/** @ngInject */
......@@ -42,7 +55,7 @@ export class CustomVariable implements Variable {
// extract options in comma separated string (use backslash to escape wanted commas)
this.options = _.map(this.query.match(/(?:\\,|[^,])+/g), text => {
text = text.replace(/\\,/g, ',');
return { text: text.trim(), value: text.trim() };
return { text: text.trim(), value: text.trim(), selected: false };
});
if (this.includeAll) {
......@@ -53,7 +66,7 @@ export class CustomVariable implements Variable {
}
addAllOption() {
this.options.unshift({ text: 'All', value: '$__all' });
this.options.unshift({ text: 'All', value: '$__all', selected: false });
}
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 { VariableSrv } from './variable_srv';
import { TemplateSrv } from './template_srv';
import { DatasourceSrv } from '../plugins/datasource_srv';
export class DatasourceVariable implements Variable {
export class DatasourceVariable implements VariableActions {
regex: any;
query: string;
options: any;
......
public/app/features/templating/interval_variable.ts
import _ from 'lodash';
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 { TemplateSrv } from './template_srv';
import { VariableSrv } from './variable_srv';
export class IntervalVariable implements Variable {
export class IntervalVariable implements IntervalVariableModel, VariableActions {
type: VariableType;
name: string;
label: string;
hide: VariableHide;
skipUrlSync: boolean;
auto_count: number; // tslint:disable-line variable-name
auto_min: number; // tslint:disable-line variable-name
options: any;
auto_min: string; // tslint:disable-line variable-name
options: VariableOption[];
auto: boolean;
query: string;
refresh: number;
current: any;
skipUrlSync: boolean;
refresh: VariableRefresh;
current: VariableOption;
defaults: any = {
defaults: IntervalVariableModel = {
type: 'interval',
name: '',
hide: 0,
label: '',
refresh: 2,
hide: VariableHide.dontHide,
skipUrlSync: false,
auto_count: 30,
auto_min: '10s',
options: [],
current: {},
query: '1m,10m,30m,1h,6h,12h,1d,7d,14d,30d',
auto: false,
auto_min: '10s',
auto_count: 30,
skipUrlSync: false,
query: '1m,10m,30m,1h,6h,12h,1d,7d,14d,30d',
refresh: VariableRefresh.onTimeRangeChanged,
current: {} as VariableOption,
};
/** @ngInject */
......@@ -39,7 +51,7 @@ export class IntervalVariable implements Variable {
private variableSrv: VariableSrv
) {
assignModelProperties(this, model, this.defaults);
this.refresh = 2;
this.refresh = VariableRefresh.onTimeRangeChanged;
}
getSaveModel() {
......@@ -62,6 +74,7 @@ export class IntervalVariable implements Variable {
this.options.unshift({
text: 'auto',
value: '$__auto_interval_' + this.name,
selected: false,
});
}
......@@ -75,7 +88,7 @@ export class IntervalVariable implements Variable {
// extract options between quotes and/or comma
this.options = _.map(this.query.match(/(["'])(.*?)\1|\w+/g), text => {
text = text.replace(/["']+/g, '');
return { text: text.trim(), value: text.trim() };
return { text: text.trim(), value: text.trim(), selected: false };
});
this.updateAutoValue();
......
public/app/features/templating/query_variable.ts
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 DatasourceSrv from '../plugins/datasource_srv';
import { TemplateSrv } from './template_srv';
import { VariableSrv } from './variable_srv';
import { TimeSrv } from '../dashboard/services/TimeSrv';
function getNoneOption() {
return { text: 'None', value: '', isNone: true };
function getNoneOption(): VariableOption {
return { text: 'None', value: '', isNone: true, selected: false };
}
export class QueryVariable implements Variable {
datasource: any;
query: any;
regex: any;
sort: any;
options: any;
current: any;
refresh: number;
hide: number;
export class QueryVariable implements QueryVariableModel, VariableActions {
type: VariableType;
name: string;
label: string;
hide: VariableHide;
skipUrlSync: boolean;
datasource: string;
query: string;
regex: string;
sort: VariableSort;
options: VariableOption[];
current: VariableOption;
refresh: VariableRefresh;
multi: boolean;
includeAll: boolean;
useTags: boolean;
tagsQuery: string;
tagValuesQuery: string;
tags: any[];
skipUrlSync: boolean;
tags: VariableTag[];
definition: string;
allValue: string;
defaults: any = {
defaults: QueryVariableModel = {
type: 'query',
name: '',
label: null,
hide: VariableHide.dontHide,
skipUrlSync: false,
datasource: null,
query: '',
regex: '',
sort: 0,
datasource: null,
refresh: 0,
hide: 0,
name: '',
sort: VariableSort.disabled,
refresh: VariableRefresh.never,
multi: false,
includeAll: false,
allValue: null,
options: [],
current: {},
current: {} as VariableOption,
tags: [],
useTags: false,
tagsQuery: '',
tagValuesQuery: '',
skipUrlSync: false,
definition: '',
};
......@@ -151,7 +166,7 @@ export class QueryVariable implements Variable {
}
addAllOption() {
this.options.unshift({ text: 'All', value: '$__all' });
this.options.unshift({ text: 'All', value: '$__all', selected: false });
}
metricNamesToVariableValues(metricNames: any[]) {
......
public/app/features/templating/specs/query_variable.test.ts
......@@ -16,7 +16,7 @@ describe('QueryVariable', () => {
it('get model should copy changes back to model', () => {
const variable = new QueryVariable({}, null, null, null, null);
variable.options = [{ text: 'test' }];
variable.options = [{ text: 'test', value: '', selected: false }];
variable.datasource = 'google';
variable.regex = 'asd';
variable.sort = 50;
......@@ -31,7 +31,7 @@ describe('QueryVariable', () => {
it('if refresh != 0 then remove options in presisted mode', () => {
const variable = new QueryVariable({}, null, null, null, null);
variable.options = [{ text: 'test' }];
variable.options = [{ text: 'test', value: '', selected: false }];
variable.refresh = 1;
const model = variable.getSaveModel();
......
public/app/features/templating/variable.ts
......@@ -42,7 +42,107 @@ export const interpolateSearchFilter = (args: InterpolateSearchFilterOptions): s
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;
updateOptions(searchFilter?: string): 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