Merge branch 'text_variable-3173' of https://github.com/daldoyle/grafana into…

Merge branch 'text_variable-3173' of https://github.com/daldoyle/grafana into daldoyle-text_variable-3173

public/app/features/dashboard/submenu/submenu.html

@@ -4,7 +4,8 @@
       <label class="gf-form-label template-variable" ng-hide="variable.hide === 1">
         {{variable.label || variable.name}}
       </label>
-      <value-select-dropdown ng-if="variable.type !== 'adhoc'" variable="variable" on-updated="ctrl.variableUpdated(variable)"></value-select-dropdown>
+      <value-select-dropdown ng-if="variable.type !== 'adhoc' && variable.type !== 'text'" variable="variable" on-updated="ctrl.variableUpdated(variable)"></value-select-dropdown>
+      <input type="text" ng-if="variable.type === 'text'" ng-model="variable.query" class="gf-form-input width-9"  ng-blur="variable.current.value != variable.query && variable.updateOptions() && ctrl.variableUpdated(variable);" ng-keydown="$event.keyCode === 13 && variable.current.value != variable.query && variable.updateOptions() && ctrl.variableUpdated(variable);" ></input>
     </div>
     <ad-hoc-filters ng-if="variable.type === 'adhoc'" variable="variable"></ad-hoc-filters>
   </div>

public/app/features/templating/all.ts

@@ -9,6 +9,7 @@ import { DatasourceVariable } from './datasource_variable';
 import { CustomVariable } from './custom_variable';
 import { ConstantVariable } from './constant_variable';
 import { AdhocVariable } from './adhoc_variable';
+import { TextVariable } from './text_variable';
 
 coreModule.factory('templateSrv', () => {
   return templateSrv;
@@ -22,4 +23,5 @@ export {
   CustomVariable,
   ConstantVariable,
   AdhocVariable,
+  TextVariable
 };

public/app/features/templating/partials/editor.html

@@ -155,6 +155,14 @@
 			</div>
 		</div>
 
+		<div ng-if="current.type === 'text'" class="gf-form-group">
+			<h5 class="section-heading">Text options</h5>
+			<div class="gf-form">
+				<span class="gf-form-label">Value</span>
+				<input type="text" class="gf-form-input" ng-model='current.query' ng-blur="runQuery()" placeholder="default value, if any"></input>
+			</div>
+		</div>
+
 		<div ng-if="current.type === 'query'" class="gf-form-group">
 			<h5 class="section-heading">Query Options</h5>
 

public/app/features/templating/text_variable.ts

+import { Variable, assignModelProperties, variableTypes } from './variable';
+
+export class TextVariable implements Variable {
+  query: string;
+  current: any;
+  options: any[];
+  skipUrlSync: boolean;
+
+  defaults = {
+    type: 'text',
+    name: '',
+    hide: 2,
+    label: '',
+    query: '',
+    current: {},
+    options: [],
+    skipUrlSync: false,
+  };
+
+  /** @ngInject */
+  constructor(private model, private variableSrv) {
+    assignModelProperties(this, model, this.defaults);
+  }
+
+  getSaveModel() {
+    assignModelProperties(this.model, this, this.defaults);
+    return this.model;
+  }
+
+  setValue(option) {
+    this.variableSrv.setOptionAsCurrent(this, option);
+  }
+
+  updateOptions() {
+    this.options = [{ text: this.query.trim(), value: this.query.trim() }];
+    this.current = this.options[0];
+    return Promise.resolve();
+  }
+
+  dependsOn(variable) {
+    return false;
+  }
+
+  setValueFromUrl(urlValue) {
+    this.query = urlValue;
+    return this.variableSrv.setOptionFromUrl(this, urlValue);
+  }
+
+  getValueForUrl() {
+    return this.current.value;
+  }
+}
+
+variableTypes['text'] = {
+  name: 'Text',
+  ctor: TextVariable,
+  description: 'Define a textbox variable, where users can enter any arbitrary string',
+};