feat(templating): progress on variable system refactoring, #6048

public/app/features/templating/constant_variable.ts

@@ -1,8 +1,8 @@
 ///<reference path="../../headers/common.d.ts" />
 
 import _ from 'lodash';
-import {Variable, assignModelProperties} from './variable';
-import {VariableSrv, variableConstructorMap} from './variable_srv';
+import {Variable, assignModelProperties, variableTypes} from './variable';
+import {VariableSrv} from './variable_srv';
 
 export class ConstantVariable implements Variable {
   query: string;
@@ -45,4 +45,8 @@ export class ConstantVariable implements Variable {
   }
 }
 
-variableConstructorMap['constant'] = ConstantVariable;
+variableTypes['constant'] = {
+  name: 'Constant',
+  ctor: ConstantVariable,
+  description: 'Define a hidden constant variable, useful for metric prefixes in dashboards you want to share' ,
+};

public/app/features/templating/custom_variable.ts

@@ -2,8 +2,8 @@
 
 import _ from 'lodash';
 import kbn from 'app/core/utils/kbn';
-import {Variable, assignModelProperties} from './variable';
-import {VariableSrv, variableConstructorMap} from './variable_srv';
+import {Variable, assignModelProperties, variableTypes} from './variable';
+import {VariableSrv} from './variable_srv';
 
 export class CustomVariable implements Variable {
   query: string;
@@ -23,9 +23,7 @@ export class CustomVariable implements Variable {
     multi: false,
   };
 
-  supportsMulti = true;
-
-  /** @ngInject */
+  /** @ngInject **/
   constructor(private model, private timeSrv, private templateSrv, private variableSrv) {
     assignModelProperties(this, model, this.defaults);
   }
@@ -65,4 +63,9 @@ export class CustomVariable implements Variable {
   }
 }
 
-variableConstructorMap['custom'] = CustomVariable;
+variableTypes['custom'] = {
+  name: 'Custom',
+  ctor: CustomVariable,
+  description: 'Define variable values manually' ,
+  supportsMulti: true,
+};

public/app/features/templating/datasource_variable.ts

@@ -2,8 +2,8 @@
 
 import _ from 'lodash';
 import kbn from 'app/core/utils/kbn';
-import {Variable, assignModelProperties} from './variable';
-import {VariableSrv, variableConstructorMap} from './variable_srv';
+import {Variable, assignModelProperties, variableTypes} from './variable';
+import {VariableSrv} from './variable_srv';
 
 export class DatasourceVariable implements Variable {
   regex: any;
@@ -75,4 +75,8 @@ export class DatasourceVariable implements Variable {
   }
 }
 
-variableConstructorMap['datasource'] = DatasourceVariable;
+variableTypes['datasource'] = {
+  name: 'Datasource',
+  ctor: DatasourceVariable,
+  description: 'Enabled you to dynamically switch the datasource for multiple panels',
+};

public/app/features/templating/editor_ctrl.ts

@@ -1,24 +1,14 @@
 ///<reference path="../../headers/common.d.ts" />
 
-import angular from 'angular';
 import _ from 'lodash';
-import $ from 'jquery';
-import kbn from 'app/core/utils/kbn';
 import coreModule from 'app/core/core_module';
-import appEvents from 'app/core/app_events';
+import {variableTypes} from './variable';
 
 export class VariableEditorCtrl {
 
   /** @ngInject */
   constructor(private $scope, private datasourceSrv, private variableSrv, templateSrv) {
-    $scope.variableTypes = [
-      {value: "query",      text: "Query"},
-      {value: "adhoc",      text: "Ad hoc filters"},
-      {value: "interval",   text: "Interval"},
-      {value: "datasource", text: "Data source"},
-      {value: "custom",     text: "Custom"},
-      {value: "constant",   text: "Constant"},
-    ];
+    $scope.variableTypes = variableTypes;
 
     $scope.refreshOptions = [
       {value: 0, text: "Never"},

public/app/features/templating/interval_variable.ts

@@ -2,8 +2,8 @@
 
 import _ from 'lodash';
 import kbn from 'app/core/utils/kbn';
-import {Variable, assignModelProperties} from './variable';
-import {VariableSrv, variableConstructorMap} from './variable_srv';
+import {Variable, assignModelProperties, variableTypes} from './variable';
+import {VariableSrv} from './variable_srv';
 
 export class IntervalVariable implements Variable {
   auto_count: number;
@@ -77,4 +77,8 @@ export class IntervalVariable implements Variable {
   }
 }
 
-variableConstructorMap['interval'] = IntervalVariable;
+variableTypes['interval'] = {
+  name: 'Interval',
+  ctor: IntervalVariable,
+  description: 'Define a timespan interval (ex 1m, 1h, 1d)',
+};

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

@@ -82,21 +82,11 @@
 						<span class="gf-form-label width-6">
               Type
               <info-popover mode="right-normal">
-                <dl>
-                  <dt>Query</dt>
-                  <dd>Variable values are fetched from a metric names query to a data source</dd>
-                  <dt>Interval</dt>
-                  <dd>Timespan variable type</dd>
-                  <dt>Datasource</dt>
-                  <dd>Dynamically switch data sources using this type of variable</dd>
-                  <dt>Custom</dt>
-                  <dd>Define variable values manually</dd>
-                </dl>
-                <a href="http://docs.grafana.org/reference/templating" target="_blank">Templating docs</a>
+								{{variableTypes[current.type].description}}
               </info-popover>
             </span>
 						<div class="gf-form-select-wrapper max-width-17">
-							<select class="gf-form-input" ng-model="current.type" ng-options="f.value as f.text for f in variableTypes" ng-change="typeChanged()"></select>
+							<select class="gf-form-input" ng-model="current.type" ng-options="k as v.name for (k, v) in variableTypes" ng-change="typeChanged()"></select>
 						</div>
 					</div>
         </div>
@@ -215,26 +205,26 @@
 					<label class="gf-form-label width-12">Type</label>
 					<div class="gf-form-select-wrapper max-width-18">
 						<select class="gf-form-input" ng-model="current.query" ng-options="f.value as f.text for f in datasourceTypes" ng-change="runQuery()"></select>
-					</div>
-				</div>
+          </div>
+        </div>
 
-				<div class="gf-form">
-					<label class="gf-form-label width-12">
-						Instance name filter
-						<info-popover mode="right-normal">
-							Regex filter for which data source instances to choose from in
-							the variable value dropdown. Leave empty for all.
-							<br><br>
-							Example: <code>/^prod/</code>
+        <div class="gf-form">
+          <label class="gf-form-label width-12">
+            Instance name filter
+            <info-popover mode="right-normal">
+              Regex filter for which data source instances to choose from in
+              the variable value dropdown. Leave empty for all.
+              <br><br>
+              Example: <code>/^prod/</code>
 
-						</info-popover>
-					</label>
-					<input type="text" class="gf-form-input max-width-18" ng-model='current.regex' placeholder="/.*-(.*)-.*/" ng-model-onblur ng-change="runQuery()"></input>
-				</div>
-			</div>
+            </info-popover>
+          </label>
+          <input type="text" class="gf-form-input max-width-18" ng-model='current.regex' placeholder="/.*-(.*)-.*/" ng-model-onblur ng-change="runQuery()"></input>
+        </div>
+      </div>
 
 			<div ng-show="current.type === 'adhoc'" class="gf-form-group">
-				<h5 class="section-heading">Options</h5>
+        <h5 class="section-heading">Options</h5>
 
 				<div class="gf-form max-width-21">
 					<span class="gf-form-label width-8">Data source</span>
@@ -242,58 +232,58 @@
 						<select class="gf-form-input" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
 					</div>
 				</div>
-			</div>
+      </div>
 
-			<div class="section gf-form-group" ng-show="current.supportsMulti">
-				<h5 class="section-heading">Selection Options</h5>
-				<div class="section">
-					<gf-form-switch class="gf-form"
-										 label="Multi-value"
-					 label-class="width-10"
-			tooltip="Enables multiple values to be selected at the same time"
-	 checked="current.multi"
-	on-change="runQuery()">
-					</gf-form-switch>
-					<gf-form-switch class="gf-form"
-										 label="Include All option"
-					 label-class="width-10"
-			checked="current.includeAll"
-	 on-change="runQuery()">
-					</gf-form-switch>
-				</div>
-				<div class="gf-form" ng-if="current.includeAll">
-					<span class="gf-form-label width-10">Custom all value</span>
-					<input type="text" class="gf-form-input max-width-15" ng-model='current.allValue' placeholder="blank = auto"></input>
-				</div>
-			</div>
+      <div class="section gf-form-group" ng-show="variableTypes[current.type].supportsMulti">
+        <h5 class="section-heading">Selection Options</h5>
+        <div class="section">
+          <gf-form-switch class="gf-form"
+                          label="Multi-value"
+                          label-class="width-10"
+                          tooltip="Enables multiple values to be selected at the same time"
+                          checked="current.multi"
+                          on-change="runQuery()">
+          </gf-form-switch>
+          <gf-form-switch class="gf-form"
+                          label="Include All option"
+                          label-class="width-10"
+                          checked="current.includeAll"
+                          on-change="runQuery()">
+          </gf-form-switch>
+        </div>
+        <div class="gf-form" ng-if="current.includeAll">
+          <span class="gf-form-label width-10">Custom all value</span>
+          <input type="text" class="gf-form-input max-width-15" ng-model='current.allValue' placeholder="blank = auto"></input>
+        </div>
+      </div>
 
-			<div class="gf-form-group" ng-if="current.type === 'query'">
-				<h5>Value groups/tags (Experimental feature)</h5>
-				<div class="gf-form">
-					<editor-checkbox text="Enable" model="current.useTags" change="runQuery()"></editor-checkbox>
-				</div>
-				<div class="gf-form last" ng-if="current.useTags">
-					<span class="gf-form-label width-10">Tags query</span>
-					<input type="text" class="gf-form-input" ng-model='current.tagsQuery' placeholder="metric name or tags query" ng-model-onblur></input>
-				</div>
-				<div class="gf-form" ng-if="current.useTags">
-					<li class="gf-form-label width-10">Tag values query</li>
-					<input type="text" class="gf-form-input" ng-model='current.tagValuesQuery' placeholder="apps.$tag.*" ng-model-onblur></input>
-				</div>
-			</div>
+      <div class="gf-form-group" ng-if="current.type === 'query'">
+        <h5>Value groups/tags (Experimental feature)</h5>
+        <div class="gf-form">
+          <editor-checkbox text="Enable" model="current.useTags" change="runQuery()"></editor-checkbox>
+        </div>
+        <div class="gf-form last" ng-if="current.useTags">
+          <span class="gf-form-label width-10">Tags query</span>
+          <input type="text" class="gf-form-input" ng-model='current.tagsQuery' placeholder="metric name or tags query" ng-model-onblur></input>
+        </div>
+        <div class="gf-form" ng-if="current.useTags">
+          <li class="gf-form-label width-10">Tag values query</li>
+          <input type="text" class="gf-form-input" ng-model='current.tagValuesQuery' placeholder="apps.$tag.*" ng-model-onblur></input>
+        </div>
+      </div>
 
-			<div class="gf-form-group">
-				<h5>Preview of values (shows max 20)</h5>
-				<div class="gf-form-inline">
-					<div class="gf-form" ng-repeat="option in current.options | limitTo: 20">
-						<span class="gf-form-label">{{option.text}}</span>
-					</div>
-				</div>
-			</div>
-		</div>
+      <div class="gf-form-group">
+        <h5>Preview of values (shows max 20)</h5>
+        <div class="gf-form-inline">
+          <div class="gf-form" ng-repeat="option in current.options | limitTo: 20">
+            <span class="gf-form-label">{{option.text}}</span>
+          </div>
+        </div>
+      </div>
+    </div>
 
-		<div class="gf-form-button-row p-y-0">
-			<button type="button" class="btn btn-success" ng-show="mode === 'edit'" ng-click="update();">Update</button>
+    <div class="gf-form-button-row p-y-0">
+      <button type="button" class="btn btn-success" ng-show="mode === 'edit'" ng-click="update();">Update</button>
       <button type="button" class="btn btn-success" ng-show="mode === 'new'" ng-click="add();">Add</button>
     </div>
   </div>

public/app/features/templating/query_variable.ts

@@ -2,8 +2,8 @@
 
 import _ from 'lodash';
 import kbn from 'app/core/utils/kbn';
-import {Variable, containsVariable, assignModelProperties} from './variable';
-import {VariableSrv, variableConstructorMap} from './variable_srv';
+import {Variable, containsVariable, assignModelProperties, variableTypes} from './variable';
+import {VariableSrv} from './variable_srv';
 
 function getNoneOption() {
   return { text: 'None', value: '', isNone: true };
@@ -37,8 +37,6 @@ export class QueryVariable implements Variable {
     current: {text: '', value: ''},
   };
 
-  supportsMulti = true;
-
   constructor(private model, private datasourceSrv, private templateSrv, private variableSrv, private $q)  {
     // copy model properties to this instance
     assignModelProperties(this, model, this.defaults);
@@ -151,4 +149,9 @@ export class QueryVariable implements Variable {
   }
 }
 
-variableConstructorMap['query'] = QueryVariable;
+variableTypes['query'] = {
+  name: 'Query',
+  ctor: QueryVariable,
+  description: 'Variable values are fetched from a datasource query',
+  supportsMulti: true,
+};

public/app/features/templating/variable.ts

@@ -11,6 +11,7 @@ export interface Variable {
   getModel();
 }
 
+export var variableTypes = {};
 
 export function assignModelProperties(target, source, defaults) {
   _.forEach(defaults, function(value, key) {

public/app/features/templating/variable_srv.ts

@@ -3,9 +3,7 @@
 import angular from 'angular';
 import _ from 'lodash';
 import coreModule from 'app/core/core_module';
-import {Variable} from './variable';
-
-export var variableConstructorMap: any = {};
+import {Variable, variableTypes} from './variable';
 
 export class VariableSrv {
   dashboard: any;
@@ -85,7 +83,7 @@ export class VariableSrv {
   }
 
   createVariableFromModel(model) {
-    var ctor = variableConstructorMap[model.type];
+    var ctor = variableTypes[model.type].ctor;
     if (!ctor) {
       throw "Unable to find variable constructor for " + model.type;
     }