Final polish on repeat panel variable selection, #1888

public/app/features/dashboard/dynamicDashboardSrv.js

@@ -11,29 +11,31 @@ function (angular, _) {
     var self = this;
 
     this.init = function(dashboard) {
-      this.dashboard = dashboard;
       this.iteration = new Date().getTime();
-
-      this.handlePanelRepeats(dashboard);
-      this.handleRowRepeats(dashboard);
+      this.process(dashboard);
     };
 
     this.update = function(dashboard) {
-      this.dashboard = dashboard;
       this.iteration = this.iteration + 1;
+      this.process(dashboard);
+    };
 
-      this.handlePanelRepeats(dashboard);
-      this.handleRowRepeats(dashboard);
+    this.process = function(dashboard) {
+      if (dashboard.templating.list.length === 0) { return; }
+      this.dashboard = dashboard;
+
+      this.handlePanelRepeats();
+      this.handleRowRepeats();
     };
 
-    this.handlePanelRepeats = function(dashboard) {
+    this.handlePanelRepeats = function() {
       var i, j, row, panel;
-      for (i = 0; i < dashboard.rows.length; i++) {
-        row = dashboard.rows[i];
+      for (i = 0; i < this.dashboard.rows.length; i++) {
+        row = this.dashboard.rows[i];
         for (j = 0; j < row.panels.length; j++) {
           panel = row.panels[j];
           if (panel.repeat) {
-            this.repeatPanel(panel, row, dashboard);
+            this.repeatPanel(panel, row);
           }
           // clean up old left overs
           else if (panel.repeatPanelId && panel.repeatIteration !== this.iteration) {
@@ -44,16 +46,16 @@ function (angular, _) {
       }
     };
 
-    this.handleRowRepeats = function(dashboard) {
+    this.handleRowRepeats = function() {
       var i, row;
-      for (i = 0; i < dashboard.rows.length; i++) {
-        row = dashboard.rows[i];
+      for (i = 0; i < this.dashboard.rows.length; i++) {
+        row = this.dashboard.rows[i];
         if (row.repeat) {
-          this.repeatRow(row, dashboard);
+          this.repeatRow(row);
         }
         // clean up old left overs
         else if (row.repeatRowId && row.repeatIteration !== this.iteration) {
-          dashboard.rows.splice(i, 1);
+          this.dashboard.rows.splice(i, 1);
           i = i - 1;
         }
       }
@@ -93,8 +95,8 @@ function (angular, _) {
       return copy;
     };
 
-    this.repeatRow = function(row, dashboard) {
-      var variables = dashboard.templating.list;
+    this.repeatRow = function(row) {
+      var variables = this.dashboard.templating.list;
       var variable = _.findWhere(variables, {name: row.repeat.replace('$', '')});
       if (!variable) {
         return;
@@ -152,12 +154,10 @@ function (angular, _) {
       return clone;
     };
 
-    this.repeatPanel = function(panel, row, dashboard) {
-      var variables = dashboard.templating.list;
-      var variable = _.findWhere(variables, {name: panel.repeat.replace('$', '')});
-      if (!variable) {
-        return;
-      }
+    this.repeatPanel = function(panel, row) {
+      var variables = this.dashboard.templating.list;
+      var variable = _.findWhere(variables, {name: panel.repeat});
+      if (!variable) { return; }
 
       var selected;
       if (variable.current.text === 'All') {

public/app/panels/graph/axisEditor.html

@@ -190,7 +190,7 @@
 	<div class="section">
 		<div class="tight-form">
 			<ul class="tight-form-list">
-				<li class="tight-form-item" style="width: 100px">
+				<li class="tight-form-item" style="width: 105px">
 					<strong>Legend values</strong>
 				</li>
 				<li class="tight-form-item">

public/app/partials/panelgeneral.html

@@ -1,24 +1,51 @@
 <div class="editor-row">
   <div class="section">
     <h5>General options</h5>
-    <div class="editor-option">
-      <label class="small">Title</label><input type="text" class="input-medium" ng-model='panel.title'></input>
-    </div>
-    <div class="editor-option">
-      <label class="small">Span</label> <select class="input-mini" ng-model="panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
-    </div>
-		<div class="editor-option">
-      <label class="small">Height</label><input type="text" class="input-small" ng-model='panel.height'></select>
-    </div>
-		<editor-opt-bool text="Transparent" model="panel.transparent"></editor-opt-bool>
-  </div>
+		<div class="tight-form">
+			<ul class="tight-form-list">
+				<li class="tight-form-item">
+					Title
+				</li>
+				<li>
+					<input type="text" class="input-xlarge tight-form-input" ng-model='panel.title'></input>
+				</li>
+				<li class="tight-form-item">
+					Span
+				</li>
+				<li>
+					<select class="input-mini tight-form-input" ng-model="panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
+				</li>
+				<li class="tight-form-item">
+					Height
+				</li>
+				<li>
+					<input type="text" class="input-small tight-form-input" ng-model='panel.height'></input>
+				</li>
+				<li class="tight-form-item">
+					<label class="checkbox-label" for="panel.transparent">Transparent</label>
+					<input class="cr1" id="panel.transparent" type="checkbox" ng-model="panel.transparent" ng-checked="panel.transparent">
+					<label for="panel.transparent" class="cr1"></label>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
+		</div>
+	</div>
 	<div class="section">
-    <h5>Templating options</h5>
-    <div class="editor-option">
-			<label class="small">Repeat Panel</label>
-			<input type="text" class="input-medium" ng-model='panel.repeat'></input>
-    </div>
-  </div>
+		<h5>Templating options</h5>
+		<div class="tight-form">
+			<ul class="tight-form-list">
+				<li class="tight-form-item">
+					Repeat Panel
+				</li>
+				<li>
+					<select class="input-small tight-form-input" ng-model="panel.repeat" ng-options="f.name as f.name for f in dashboard.templating.list">
+						<option value=""></option>
+					</select>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
+		</div>
+	</div>
 </div>
 
 <panel-link-editor panel="panel"></panel-link-editor>

public/test/specs/dynamicDashboardSrv-specs.js

@@ -36,7 +36,7 @@ define([
   dynamicDashScenario('given dashboard with panel repeat', function(ctx) {
     ctx.setup(function(dash) {
       dash.rows.push({
-        panels: [{id: 2, repeat: '$apps'}]
+        panels: [{id: 2, repeat: 'apps'}]
       });
       dash.templating.list.push({
         name: 'apps',
@@ -56,7 +56,7 @@ define([
     });
 
     it('should mark panel repeated', function() {
-      expect(ctx.rows[0].panels[0].repeat).to.be('$apps');
+      expect(ctx.rows[0].panels[0].repeat).to.be('apps');
       expect(ctx.rows[0].panels[1].repeatPanelId).to.be(2);
     });
 
@@ -103,7 +103,7 @@ define([
   dynamicDashScenario('given dashboard with row repeat', function(ctx) {
     ctx.setup(function(dash) {
       dash.rows.push({
-        repeat: '$servers',
+        repeat: 'servers',
         panels: [{id: 2}]
       });
       dash.templating.list.push({
@@ -128,7 +128,7 @@ define([
     });
 
     it('should mark second row as repeated', function() {
-      expect(ctx.rows[0].repeat).to.be('$servers');
+      expect(ctx.rows[0].repeat).to.be('servers');
     });
 
     it('should clear repeat field on repeated row', function() {