feat(export): export will add templatize constant variables

public/app/features/dashboard/export/exporter.ts

@@ -91,6 +91,26 @@ export class DashboardExporter {
         inputs.push(value);
       });
 
+      // templatize constants
+      for (let variable of dash.templating.list) {
+        if (variable.type === 'constant') {
+          var refName = 'VAR_' + variable.name.replace(' ', '_').toUpperCase();
+          inputs.push({
+            name: refName,
+            type: 'constant',
+            label: variable.label || variable.name,
+            value: variable.current.value,
+            description: '',
+          });
+          // update current and option
+          variable.query = '${' + refName + '}';
+          variable.options[0] = variable.current = {
+            value: variable.query,
+            text: variable.query,
+          };
+        }
+      }
+
       requires = _.map(requires, req =>  {
         return req;
       });

public/app/features/dashboard/import/dash_import.html

@@ -49,12 +49,13 @@
 			</div>
 		</div>
 
-		<div ng-if="ctrl.step === 2">
-      <h3 class="section-heading" ng-if="ctrl.dash.gnetId">
-        Importing Dashboard from
-        <a href="https://grafana.net/dashboards/{{ctrl.dash.gnetId}}" class="external-link" target="_blank">Grafana.net</a>
-			</h3>
-			<div class="gf-form-group">
+    <div ng-if="ctrl.step === 2">
+			<div class="gf-form-group" ng-if="ctrl.dash.gnetId">
+        <h3 class="section-heading">
+          Importing Dashboard from
+          <a href="https://grafana.net/dashboards/{{ctrl.dash.gnetId}}" class="external-link" target="_blank">Grafana.net</a>
+        </h3>
+
         <div class="gf-form">
           <label class="gf-form-label width-15">Published by</label>
           <label class="gf-form-label width-15">{{ctrl.gnetInfo.orgName}}</label>
@@ -65,62 +66,65 @@
         </div>
       </div>
 
-			<h3 class="section-heading">
-				Options
-			</h3>
+      <h3 class="section-heading">
+        Options
+      </h3>
 
-			<div class="gf-form-group">
-				<div class="gf-form-inline">
-					<div class="gf-form gf-form--grow">
-						<label class="gf-form-label width-15">Name</label>
-						<input type="text" class="gf-form-input" ng-model="ctrl.dash.title" give-focus="true" ng-change="ctrl.titleChanged()" ng-class="{'validation-error': ctrl.nameExists}">
-						<label class="gf-form-label text-success" ng-if="!ctrl.nameExists">
-							<i class="fa fa-check"></i>
-						</label>
-					</div>
-				</div>
+      <div class="gf-form-group">
+        <div class="gf-form-inline">
+          <div class="gf-form gf-form--grow">
+            <label class="gf-form-label width-15">Name</label>
+            <input type="text" class="gf-form-input" ng-model="ctrl.dash.title" give-focus="true" ng-change="ctrl.titleChanged()" ng-class="{'validation-error': ctrl.nameExists}">
+            <label class="gf-form-label text-success" ng-if="!ctrl.nameExists">
+              <i class="fa fa-check"></i>
+            </label>
+          </div>
+        </div>
 
-				<div class="gf-form-inline" ng-if="ctrl.nameExists">
-					<div class="gf-form offset-width-15 gf-form--grow">
-						<label class="gf-form-label text-warning gf-form-label--grow">
-							<i class="fa fa-warning"></i>
-							A Dashboard with the same name already exists
-						</label>
-					</div>
-				</div>
+        <div class="gf-form-inline" ng-if="ctrl.nameExists">
+          <div class="gf-form offset-width-15 gf-form--grow">
+            <label class="gf-form-label text-warning gf-form-label--grow">
+              <i class="fa fa-warning"></i>
+              A Dashboard with the same name already exists
+            </label>
+          </div>
+        </div>
 
-				<div ng-repeat="input in ctrl.inputs">
-					<div class="gf-form">
-						<label class="gf-form-label width-15">
+        <div ng-repeat="input in ctrl.inputs">
+          <div class="gf-form">
+            <label class="gf-form-label width-15">
               {{input.label}}
               <info-popover mode="right-normal">
                 {{input.info}}
               </info-popover>
             </label>
-						<div class="gf-form-select-wrapper" style="width: 100%">
-							<select class="gf-form-input" ng-model="input.value" ng-options="v.value as v.text for v in input.options" ng-change="ctrl.inputValueChanged()">
+            <!-- Data source input -->
+            <div class="gf-form-select-wrapper" style="width: 100%" ng-if="input.type === 'datasource'">
+              <select class="gf-form-input" ng-model="input.value" ng-options="v.value as v.text for v in input.options" ng-change="ctrl.inputValueChanged()">
                 <option value="" ng-hide="input.value">{{input.info}}</option>
               </select>
-						</div>
-						<label class="gf-form-label text-success" ng-show="input.value">
-							<i class="fa fa-check"></i>
-						</label>
-					</div>
-				</div>
-			</div>
+            </div>
+            <!-- Constant input -->
+            <input ng-if="input.type === 'constant'" type="text" class="gf-form-input" ng-model="input.value" placeholder="{{input.default}}" ng-change="ctrl.inputValueChanged()">
+            <label class="gf-form-label text-success" ng-show="input.value">
+              <i class="fa fa-check"></i>
+            </label>
+          </div>
+        </div>
+      </div>
 
-			<div class="gf-form-button-row">
-				<button type="button" class="btn gf-form-btn btn-success width-10" ng-click="ctrl.saveDashboard()" ng-hide="ctrl.nameExists" ng-disabled="!ctrl.inputsValid">
-					<i class="fa fa-save"></i> Save &amp; Open
-				</button>
+      <div class="gf-form-button-row">
+        <button type="button" class="btn gf-form-btn btn-success width-10" ng-click="ctrl.saveDashboard()" ng-hide="ctrl.nameExists" ng-disabled="!ctrl.inputsValid">
+          <i class="fa fa-save"></i> Save &amp; Open
+        </button>
         <button type="button" class="btn gf-form-btn btn-danger width-10" ng-click="ctrl.saveDashboard()" ng-show="ctrl.nameExists" ng-disabled="!ctrl.inputsValid">
-					<i class="fa fa-save"></i> Overwrite &amp; Open
-				</button>
-				<a class="btn btn-link" ng-click="dismiss()">Cancel</a>
-				<a class="btn btn-link" ng-click="ctrl.back()">Back</a>
-			</div>
+          <i class="fa fa-save"></i> Overwrite &amp; Open
+        </button>
+        <a class="btn btn-link" ng-click="dismiss()">Cancel</a>
+        <a class="btn btn-link" ng-click="ctrl.back()">Back</a>
+      </div>
 
-		</div>
-	</div>
+    </div>
+  </div>
 </div>
 

public/app/features/dashboard/import/dash_import.ts

@@ -41,7 +41,8 @@ export class DashImportCtrl {
         var inputModel = {
           name: input.name,
           label: input.label,
-          description: input.description,
+          info: input.description,
+          value: input.value,
           type: input.type,
           pluginId: input.pluginId,
           options: []
@@ -49,6 +50,8 @@ export class DashImportCtrl {
 
         if (input.type === 'datasource') {
           this.setDatasourceOptions(input, inputModel);
+        } else if (!inputModel.info) {
+          inputModel.info = 'Specify a string constant';
         }
 
         this.inputs.push(inputModel);
@@ -65,7 +68,7 @@ export class DashImportCtrl {
     });
 
     if (sources.length === 0) {
-      inputModel.error = "No data sources of type " + input.pluginName + " found";
+      inputModel.info = "No data sources of type " + input.pluginName + " found";
     } else if (inputModel.description) {
       inputModel.info = inputModel.description;
     } else {

public/app/features/dashboard/specs/exporter_specs.ts

@@ -26,6 +26,13 @@ describe('given dashboard with repeated panels', function() {
       options: [{value: 'Asd', text: 'Asd'}]
     });
 
+    dash.templating.list.push({
+      name: 'prefix',
+      type: 'constant',
+      current: {value: 'collectd', text: 'collectd'},
+      options: []
+    });
+
     dash.annotations.list.push({
       name: 'logs',
       datasource: 'gfdb',
@@ -115,5 +122,21 @@ describe('given dashboard with repeated panels', function() {
     expect(require.version).to.be("3.0.2");
   });
 
+  it('should add constant template variables as inputs', function() {
+    var input = _.findWhere(exported.__inputs, {name: 'VAR_PREFIX'});
+    expect(input.type).to.be("constant");
+    expect(input.label).to.be("prefix");
+    expect(input.value).to.be("collectd");
+  });
+
+  it('should templatize constant variables', function() {
+    var variable = _.findWhere(exported.templating.list, {name: 'prefix'});
+    expect(variable.query).to.be("${VAR_PREFIX}");
+    expect(variable.current.text).to.be("${VAR_PREFIX}");
+    expect(variable.current.value).to.be("${VAR_PREFIX}");
+    expect(variable.options[0].text).to.be("${VAR_PREFIX}");
+    expect(variable.options[0].value).to.be("${VAR_PREFIX}");
+  });
+
 });