You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@qpid.apache.org by ea...@apache.org on 2017/01/13 19:19:12 UTC

qpid-dispatch git commit: DISPATCH-325 Allow charts to be configured before they are added

Repository: qpid-dispatch
Updated Branches:
  refs/heads/master 2950f08b7 -> 7b8503d2d


DISPATCH-325 Allow charts to be configured before they are added


Project: http://git-wip-us.apache.org/repos/asf/qpid-dispatch/repo
Commit: http://git-wip-us.apache.org/repos/asf/qpid-dispatch/commit/7b8503d2
Tree: http://git-wip-us.apache.org/repos/asf/qpid-dispatch/tree/7b8503d2
Diff: http://git-wip-us.apache.org/repos/asf/qpid-dispatch/diff/7b8503d2

Branch: refs/heads/master
Commit: 7b8503d2d08d24683c13aa7238d87fa76892c14e
Parents: 2950f08
Author: Ernest Allen <ea...@redhat.com>
Authored: Fri Jan 13 14:18:55 2017 -0500
Committer: Ernest Allen <ea...@redhat.com>
Committed: Fri Jan 13 14:18:55 2017 -0500

----------------------------------------------------------------------
 console/stand-alone/plugin/css/dispatch.css     |   4 +
 console/stand-alone/plugin/css/plugin.css       |   6 +-
 console/stand-alone/plugin/html/qdrCharts.html  |  51 -----
 .../stand-alone/plugin/html/tmplListChart.html  |   3 +
 console/stand-alone/plugin/js/navbar.js         | 201 +++++++++++++++++--
 console/stand-alone/plugin/js/qdrCharts.js      | 197 ++----------------
 console/stand-alone/plugin/js/qdrList.js        |   8 +-
 console/stand-alone/plugin/js/qdrListChart.js   | 200 ++++++++++--------
 8 files changed, 341 insertions(+), 329 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/7b8503d2/console/stand-alone/plugin/css/dispatch.css
----------------------------------------------------------------------
diff --git a/console/stand-alone/plugin/css/dispatch.css b/console/stand-alone/plugin/css/dispatch.css
index 79bb738..651e64e 100644
--- a/console/stand-alone/plugin/css/dispatch.css
+++ b/console/stand-alone/plugin/css/dispatch.css
@@ -703,3 +703,7 @@ div.topoGrid .ui-grid-viewport {
   left: 0.5em;
   border: 0;
 }
+
+.newChart {
+  float: right;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/7b8503d2/console/stand-alone/plugin/css/plugin.css
----------------------------------------------------------------------
diff --git a/console/stand-alone/plugin/css/plugin.css b/console/stand-alone/plugin/css/plugin.css
index 7655728..96c3b89 100644
--- a/console/stand-alone/plugin/css/plugin.css
+++ b/console/stand-alone/plugin/css/plugin.css
@@ -303,10 +303,14 @@ div#main.qdr div.qdrList div.selected {
   background-color: #e0e0ff !important;
 }
 
-#dialogChart {
+#dialogChart, #dialogEditChart {
     height: 200px;
 }
 
+.chartOptions .modal-body {
+  overflow-y: initial;
+}
+
 div.qdrCharts p.chartLabels button {
     float: right;
 }

http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/7b8503d2/console/stand-alone/plugin/html/qdrCharts.html
----------------------------------------------------------------------
diff --git a/console/stand-alone/plugin/html/qdrCharts.html b/console/stand-alone/plugin/html/qdrCharts.html
index dc41a37..34038d2 100644
--- a/console/stand-alone/plugin/html/qdrCharts.html
+++ b/console/stand-alone/plugin/html/qdrCharts.html
@@ -33,54 +33,3 @@ under the License.
     </div>
 </div>
 
-<!--
-    This is the template for the graph dialog that is displayed. It uses the
-    dialogCtrl controller in qdrCharts.js.
--->
-<script type="text/ng-template" id="chart-config-template.html">
-<div class="chartOptions">
-    <div class="modal-header">
-        <h3 class="modal-title">Chart {{chart.attr() | humanify}}</h3>
-    </div>
-    <div class="modal-body">
-        <div id="{{svgDivId}}" class="d3Chart"></div>
-        <tabset>
-            <tab heading="Type">
-                <legend>Chart type</legend>
-                <label><input type="radio" ng-model="dialogChart.type" value="value" /> Value Chart</label>
-                <label><input type="radio" ng-model="dialogChart.type" value="rate" /> Rate Chart</label>
-                <div class="dlg-slider" ng-show="dialogChart.type=='rate'">
-                    <span>Rate Window: {{rateWindow}} second{{rateWindow > 1 ? "s" : ""}}</span>
-                    <div id="rateSlider"></div>
-                </div>
-                <div style="clear:both;"> </div>
-            </tab>
-            <tab ng-hide="$parent.chart.aggregate()" heading="Colors">
-                <legend>Chart colors</legend>
-                <div class="colorPicker">
-                    <label>Line: <input id="lineColor" name="lineColor" type="color" /></label>
-                </div>
-                <div class="colorPicker">
-                    <label>Area: <input id="areaColor" name="areaColor" type="color" /></label>
-                </div>
-                <div style="clear:both;"> </div>
-            </tab>
-            <tab heading="Duration">
-                <legend>Chart duration</legend>
-                <div class="dlg-slider duration">
-                    <span>Show data for past {{dialogChart.visibleDuration}} minute{{dialogChart.visibleDuration > 1 ? "s" : ""}}</span>
-                    <div id="durationSlider"></div>
-                </div>
-                <div style="clear:both;"> </div>
-
-            </tab>
-        </tabset>
-    </div>
-    <div class="modal-footer">
-        <button class="btn btn-success" type="button" ng-click="apply()">Apply to existing chart</button>
-        <button class="btn btn-info" type="button" ng-click="copyToDashboard()">Create new chart</button>
-        <button class="btn btn-primary" type="button" ng-click="okClick()">Close</button>
-    </div>
-</div>
-</script>
-

http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/7b8503d2/console/stand-alone/plugin/html/tmplListChart.html
----------------------------------------------------------------------
diff --git a/console/stand-alone/plugin/html/tmplListChart.html b/console/stand-alone/plugin/html/tmplListChart.html
index e52a39a..a75aec6 100644
--- a/console/stand-alone/plugin/html/tmplListChart.html
+++ b/console/stand-alone/plugin/html/tmplListChart.html
@@ -5,6 +5,9 @@
     <h3 class="modal-title">Chart {{chart.attr() | humanify}}</h3>
 </div>
 <div class="modal-body">
+    <p class="newChart">
+        <button ng-click="editChart()" title="Configure"><i class="icon-edit"></i></button>
+    </p><div style="clear:both"></div>
     <div id="{{svgDivId}}" class="d3Chart"></div>
 </div>
 <div class="modal-footer">

http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/7b8503d2/console/stand-alone/plugin/js/navbar.js
----------------------------------------------------------------------
diff --git a/console/stand-alone/plugin/js/navbar.js b/console/stand-alone/plugin/js/navbar.js
index 337be52..5125748 100644
--- a/console/stand-alone/plugin/js/navbar.js
+++ b/console/stand-alone/plugin/js/navbar.js
@@ -84,9 +84,9 @@ var QDR = (function (QDR) {
     };
 
     $scope.isActive = function(href) {
-		// highlight the connect tab if we are on the root page
-		if (($location.path() === QDR.pluginRoot) && (href.split("#")[1] === QDR.pluginRoot + "/connect"))
-			return true
+    // highlight the connect tab if we are on the root page
+    if (($location.path() === QDR.pluginRoot) && (href.split("#")[1] === QDR.pluginRoot + "/connect"))
+      return true
         return href.split("#")[1] == $location.path();
     };
 
@@ -100,28 +100,201 @@ var QDR = (function (QDR) {
         }
     }
 
-	$scope.isDashboardable = function () {
-		return  ($location.path().indexOf("schema") < 0 && $location.path().indexOf("connect") < 0);
-	}
+  $scope.isDashboardable = function () {
+    return  ($location.path().indexOf("schema") < 0 && $location.path().indexOf("connect") < 0);
+  }
 
-	$scope.addToDashboardLink = function () {
-		var href = "#" + $location.path();
-		var size = angular.toJson({
+  $scope.addToDashboardLink = function () {
+    var href = "#" + $location.path();
+    var size = angular.toJson({
                 size_x: 2,
                 size_y: 2
               });
 
         var routeParams = angular.toJson($routeParams);
         var title = "Dispatch Router";
-	    return "/hawtio/#/dashboard/add?tab=dashboard" +
-	          "&href=" + encodeURIComponent(href) +
-	          "&routeParams=" + encodeURIComponent(routeParams) +
-	          "&title=" + encodeURIComponent(title) +
-	          "&size=" + encodeURIComponent(size);
+      return "/hawtio/#/dashboard/add?tab=dashboard" +
+            "&href=" + encodeURIComponent(href) +
+            "&routeParams=" + encodeURIComponent(routeParams) +
+            "&title=" + encodeURIComponent(title) +
+            "&size=" + encodeURIComponent(size);
     };
 
   }]);
 
+  // controller for the edit/configure chart dialog
+  QDR.module.controller("QDR.ChartDialogController", function($scope, QDRChartService, $location, dialog, chart, updateTick, dashboard, adding) {
+    var dialogSvgChart = null;
+    $scope.svgDivId = "dialogEditChart";    // the div id for the svg chart
+
+    var updateTimer = null;
+    $scope.chart = chart;  // the underlying chart object from the dashboard
+    $scope.dialogChart = $scope.chart.copy(); // the chart object for this dialog
+    $scope.userTitle = $scope.chart.title();
+
+    $scope.$watch('userTitle', function(newValue, oldValue) {
+    if (newValue !== oldValue) {
+      $scope.dialogChart.title(newValue);
+      dialogSvgChart.tick($scope.svgDivId);
+    }
+    })
+    $scope.$watch("dialogChart.areaColor", function (newValue, oldValue) {
+      if (newValue !== oldValue) {
+        if (dialogSvgChart)
+         dialogSvgChart.tick($scope.svgDivId);
+      }
+    })
+    $scope.$watch("dialogChart.lineColor", function (newValue, oldValue) {
+      if (newValue !== oldValue) {
+        if (dialogSvgChart)
+          dialogSvgChart.tick($scope.svgDivId);
+      }
+    })
+    $scope.$watch("dialogChart.type", function (newValue, oldValue) {
+      if (newValue !== oldValue) {
+        if (dialogSvgChart)
+          dialogSvgChart.tick($scope.svgDivId);
+      }
+    })
+
+    // the stored rateWindow is in milliseconds, but the slider is in seconds
+    $scope.rateWindow = $scope.chart.rateWindow / 1000;
+
+    $scope.addChartsPage = function () {
+      QDRChartService.addDashboard(dialogSvgChart.chart);
+    };
+
+    $scope.showChartsPage = function () {
+      cleanup();
+      dialog.close(true);
+      $location.path(QDR.pluginRoot + "/charts");
+    };
+
+    var cleanup = function () {
+      if (updateTimer) {
+        clearTimeout(updateTimer);
+        updateTimer = null;
+      }
+      if (!$scope.isOnChartsPage())
+        QDRChartService.unRegisterChart($scope.dialogChart);     // remove the chart
+    }
+    $scope.okClick = function () {
+      cleanup();
+      dialog.close(true);
+    };
+
+    var initRateSlider = function () {
+      if (document.getElementById('rateSlider')) {
+        $( "#rateSlider" ).slider({
+          value: $scope.rateWindow,
+          min: 1,
+          max: 10,
+          step: 1,
+          slide: function( event, ui ) {
+            $scope.rateWindow = ui.value;
+            $scope.dialogChart.rateWindow = ui.value * 1000;
+            $scope.$apply();
+            if (dialogSvgChart)
+              dialogSvgChart.tick($scope.svgDivId);
+          }
+        });
+      } else {
+        setTimeout(initRateSlider, 100)
+      }
+    }
+    initRateSlider();
+
+    var initDurationSlider = function () {
+      if (document.getElementById('durationSlider')) {
+        $( "#durationSlider" ).slider({
+          value: $scope.dialogChart.visibleDuration,
+          min: 1,
+          max: 10,
+          step: 1,
+          slide: function( event, ui ) {
+            $scope.visibleDuration = $scope.dialogChart.visibleDuration = ui.value;
+            $scope.$apply();
+            if (dialogSvgChart)
+              dialogSvgChart.tick($scope.svgDivId);
+          }
+        });
+      } else {
+        setTimeout(initDurationSlider, 100)
+      }
+    }
+    initDurationSlider();
+
+    $scope.adding = function () {
+      return adding
+    }
+
+    $scope.isOnChartsPage = function () {
+      if (adding)
+        return dialogSvgChart ? dialogSvgChart.chart.dashboard : false;
+      else
+        return $scope.chart.dashboard
+    }
+
+    // handle the Apply button click
+    // update the dashboard chart's properties
+    $scope.apply = function () {
+      $scope.chart.areaColor = $scope.dialogChart.areaColor;
+      $scope.chart.lineColor = $scope.dialogChart.lineColor;
+      $scope.chart.type = $scope.dialogChart.type;
+      $scope.chart.rateWindow = $scope.rateWindow * 1000;
+      $scope.chart.title($scope.dialogChart.title());
+      $scope.chart.visibleDuration = $scope.dialogChart.visibleDuration;
+      QDRChartService.saveCharts();
+      if (typeof updateTick === "function")
+        updateTick();
+    }
+
+    // add a new chart to the dashboard based on the current dialog settings
+    $scope.copyToDashboard = function () {
+        var chart = $scope.dialogChart.copy();
+        // set the new chart's dashboard state
+        QDRChartService.addDashboard(chart);
+        // notify the chart controller that it needs to display a new chart
+        dashboard.addChart(chart);
+    }
+
+    // update the chart on the popup dialog
+    var updateDialogChart = function () {
+      // draw the chart using the current data
+      if (dialogSvgChart)
+          dialogSvgChart.tick($scope.svgDivId);
+
+      // draw the chart again in 1 second
+      var updateRate = localStorage['updateRate'] ? localStorage['updateRate'] : 5000;
+      if (updateTimer)
+      clearTimeout(updateTimer);
+        updateTimer = setTimeout(updateDialogChart, updateRate);
+    }
+
+    var showChart = function () {
+      // ensure the div for our chart is loaded in the dom
+      var div = angular.element("#" + $scope.svgDivId);
+      if (!div.width()) {
+        setTimeout(showChart, 100);
+        return;
+      }
+      dialogSvgChart = new QDRChartService.AreaChart($scope.dialogChart);
+      $('input[name=lineColor]').val($scope.dialogChart.lineColor);
+      $('input[name=areaColor]').val($scope.dialogChart.areaColor);
+      $('input[name=areaColor]').on('input', function (e) {
+        $scope.dialogChart.areaColor = $(this).val();
+        updateDialogChart()
+      })
+      $('input[name=lineColor]').on('input', function (e) {
+        $scope.dialogChart.lineColor = $(this).val();
+        updateDialogChart()
+      })
+      if (updateTimer)
+        clearTimeout(updateTimer);
+          updateDialogChart();
+    }
+    showChart();
+  });
 
   return QDR;
 

http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/7b8503d2/console/stand-alone/plugin/js/qdrCharts.js
----------------------------------------------------------------------
diff --git a/console/stand-alone/plugin/js/qdrCharts.js b/console/stand-alone/plugin/js/qdrCharts.js
index 8bddca5..743ec56 100644
--- a/console/stand-alone/plugin/js/qdrCharts.js
+++ b/console/stand-alone/plugin/js/qdrCharts.js
@@ -86,7 +86,7 @@ var QDR = (function (QDR) {
     };
 
     $scope.editChart = function (chart) {
-        doDialog("chart-config-template.html", chart.chart);
+        doDialog("tmplChartConfig.html", chart.chart);
     };
 
     $scope.delChart = function (chart) {
@@ -117,184 +117,31 @@ var QDR = (function (QDR) {
 
     function doDialog(template, chart) {
 
-	    $dialog.dialog({
-			backdrop: true,
-			keyboard: true,
-			backdropClick: true,
-			templateUrl: template,
-			controller: "QDR.ChartDialogController",
-			resolve: {
-				chart: function() {
-					return chart;
-				},
-				updateTick: function () {
-					return updateCharts;
-				},
-				dashboard: function () {
-       	            return $scope;
-       	        }
-			}
-	    }).open();
+      $dialog.dialog({
+      backdrop: true,
+      keyboard: true,
+      backdropClick: true,
+      templateUrl: QDR.templatePath + template,
+      controller: "QDR.ChartDialogController",
+      resolve: {
+        chart: function() {
+          return chart;
+        },
+        updateTick: function () {
+          return function () { return updateCharts };
+        },
+        dashboard: function () {
+          return $scope;
+        },
+        adding: function () {
+          return false
+        }
+      }
+      }).open()
     };
 
   });
 
-  QDR.module.controller("QDR.ChartDialogController", function($scope, QDRChartService, $location, dialog, $rootScope, chart, updateTick, dashboard) {
-        var dialogSvgChart = null;
-        $scope.svgDivId = "dialogChart";    // the div id for the svg chart
-
-	var updateTimer = null;
-        $scope.chart = chart;  // the underlying chart object from the dashboard
-        $scope.dialogChart = $scope.chart.copy(); // the chart object for this dialog
-        $scope.userTitle = $scope.chart.title();
-
-        $scope.$watch('userTitle', function(newValue, oldValue) {
-            if (newValue !== oldValue) {
-                $scope.dialogChart.title(newValue);
-                dialogSvgChart.tick($scope.svgDivId);
-            }
-        })
-		$scope.$watch("dialogChart.areaColor", function (newValue, oldValue) {
-			if (newValue !== oldValue) {
-				if (dialogSvgChart)
-                    dialogSvgChart.tick($scope.svgDivId);
-			}
-		})
-		$scope.$watch("dialogChart.lineColor", function (newValue, oldValue) {
-			if (newValue !== oldValue) {
-				if (dialogSvgChart)
-                    dialogSvgChart.tick($scope.svgDivId);
-			}
-		})
-		$scope.$watch("dialogChart.type", function (newValue, oldValue) {
-			if (newValue !== oldValue) {
-				if (dialogSvgChart)
-                    dialogSvgChart.tick($scope.svgDivId);
-			}
-		})
-
-        // the stored rateWindow is in milliseconds, but the slider is in seconds
-        $scope.rateWindow = $scope.chart.rateWindow / 1000;
-
-		var cleanup = function () {
-			if (updateTimer) {
-				clearTimeout(updateTimer);
-				updateTimer = null;
-			}
-			QDRChartService.unRegisterChart($scope.dialogChart);     // remove the chart
-		}
-		$scope.okClick = function () {
-		    cleanup();
-	            dialog.close();
-	    };
-
-		var initRateSlider = function () {
-			if (document.getElementById('rateSlider')) {
-				$( "#rateSlider" ).slider({
-				      value: $scope.rateWindow,
-				      min: 1,
-				      max: 10,
-				      step: 1,
-				      slide: function( event, ui ) {
-						$scope.rateWindow = ui.value;
-						$scope.dialogChart.rateWindow = ui.value * 1000;
-						$scope.$apply();
-						if (dialogSvgChart)
-							dialogSvgChart.tick($scope.svgDivId);
-				      }
-				});
-
-			} else {
-				setTimeout(initRateSlider, 100)
-			}
-		}
-		initRateSlider();
-
-		var initDurationSlider = function () {
-			if (document.getElementById('durationSlider')) {
-				$( "#durationSlider" ).slider({
-				      value: $scope.dialogChart.visibleDuration,
-				      min: 1,
-				      max: 10,
-				      step: 1,
-				      slide: function( event, ui ) {
-						$scope.visibleDuration = $scope.dialogChart.visibleDuration = ui.value;
-						$scope.$apply();
-						if (dialogSvgChart)
-							dialogSvgChart.tick($scope.svgDivId);
-				      }
-				});
-
-			} else {
-				setTimeout(initDurationSlider, 100)
-			}
-		}
-		initDurationSlider();
-
-        // handle the Apply button click
-        // update the dashboard chart's properties
-        $scope.apply = function () {
-            $scope.chart.areaColor = $scope.dialogChart.areaColor;
-            $scope.chart.lineColor = $scope.dialogChart.lineColor;
-            $scope.chart.type = $scope.dialogChart.type;
-            $scope.chart.rateWindow = $scope.rateWindow * 1000;
-            $scope.chart.title($scope.dialogChart.title());
-            $scope.chart.visibleDuration = $scope.dialogChart.visibleDuration;
-            QDRChartService.saveCharts();
-			if (typeof updateTick === "function")
-				updateTick();
-	    if (typeof updateTick === "function")
-		updateTick();
-        }
-
-        // add a new chart to the dashboard based on the current dialog settings
-        $scope.copyToDashboard = function () {
-            var chart = $scope.dialogChart.copy();
-            // set the new chart's dashboard state
-            QDRChartService.addDashboard(chart);
-            // notify the chart controller that it needs to display a new chart
-            dashboard.addChart(chart);
-        }
-
-        // update the chart on the popup dialog
-        var updateDialogChart = function () {
-            // draw the chart using the current data
-            if (dialogSvgChart)
-                dialogSvgChart.tick($scope.svgDivId);
-
-            // draw the chart again in 1 second
-			var updateRate = localStorage['updateRate'] ? localStorage['updateRate'] : 5000;
-			if (updateTimer)
-				clearTimeout(updateTimer);
-            updateTimer = setTimeout(updateDialogChart, updateRate);
-        }
-
-        var showChart = function () {
-            // ensure the div for our chart is loaded in the dom
-            var div = angular.element("#dialogChart");
-            if (!div.width()) {
-                setTimeout(showChart, 100);
-                return;
-            }
-            dialogSvgChart = new QDRChartService.AreaChart($scope.dialogChart);
-			$('input[name=lineColor]').val($scope.dialogChart.lineColor);
-			$('input[name=areaColor]').val($scope.dialogChart.areaColor);
-			$('input[name=areaColor]').on('input', function (e) {
-				$scope.dialogChart.areaColor = $(this).val();
-				updateDialogChart()
-			})
-			$('input[name=lineColor]').on('input', function (e) {
-				$scope.dialogChart.lineColor = $(this).val();
-				updateDialogChart()
-			})
-			if (updateTimer)
-				clearTimeout(updateTimer);
-            updateDialogChart();
-        }
-        showChart();
-
-
-  });
 
   return QDR;
 

http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/7b8503d2/console/stand-alone/plugin/js/qdrList.js
----------------------------------------------------------------------
diff --git a/console/stand-alone/plugin/js/qdrList.js b/console/stand-alone/plugin/js/qdrList.js
index 0aad6a1..ec2efb2 100644
--- a/console/stand-alone/plugin/js/qdrList.js
+++ b/console/stand-alone/plugin/js/qdrList.js
@@ -570,7 +570,7 @@ var QDR = (function(QDR) {
          name:   $scope.selectedRecordName,
          attr:    rowEntity.name,
          forceCreate: true});
-      doDialog(chart);
+      doDialog('tmplListChart.html', chart);
     }
 
     $scope.addAllToGraph = function(rowEntity) {
@@ -584,7 +584,7 @@ var QDR = (function(QDR) {
         visibleDuration: 1,
         forceCreate: true,
         aggregate:   true});
-      doDialog(chart);
+      doDialog('tmplListChart.html', chart);
     }
 
     $scope.detailCols = [];
@@ -674,12 +674,12 @@ var QDR = (function(QDR) {
       QDRService.sendMethod($scope.currentNode.id, $scope.selectedEntity, attributes, $scope.currentMode.op, undefined, gotMethodResponse)
     }
 
-    function doDialog(chart) {
+    function doDialog(tmpl, chart) {
         var d = $dialog.dialog({
           backdrop: true,
           keyboard: true,
           backdropClick: true,
-          templateUrl: QDR.templatePath + 'tmplListChart.html',
+          templateUrl: QDR.templatePath + tmpl,
           controller: "QDR.ListChartController",
           resolve: {
                  chart: function() {

http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/7b8503d2/console/stand-alone/plugin/js/qdrListChart.js
----------------------------------------------------------------------
diff --git a/console/stand-alone/plugin/js/qdrListChart.js b/console/stand-alone/plugin/js/qdrListChart.js
index e654b19..93391f1 100644
--- a/console/stand-alone/plugin/js/qdrListChart.js
+++ b/console/stand-alone/plugin/js/qdrListChart.js
@@ -21,89 +21,121 @@ under the License.
  */
 var QDR = (function(QDR) {
 
-	QDR.module.controller('QDR.ListChartController', function ($scope, dialog, $dialog, $location, QDRChartService, chart, nodeName) {
-	    $scope.chart = chart;
-		$scope.dialogSvgChart = null;
-		var updateTimer = null;
-		$scope.svgDivId = "dialogChart";    // the div id for the svg chart
-
-		$scope.showChartsPage = function () {
-			cleanup();
-			dialog.close(true);
-			$location.path(QDR.pluginRoot + "/charts");
-		};
-
-		$scope.addHChart = function () {
-	        QDRChartService.addHDash($scope.chart);
-			cleanup();
-	        dialog.close(true);
-		}
-
-		$scope.addToDashboardLink = function () {
-			var href = "#/" + QDR.pluginName + "/charts";
-			var size = angular.toJson({
-	                size_x: 2,
-	                size_y: 2
-	              });
-
-			var params = angular.toJson({chid: $scope.chart.id()});
-	        var title = "Dispatch - " + nodeName;
-		    return "/hawtio/#/dashboard/add?tab=dashboard" +
-		          "&href=" + encodeURIComponent(href) +
-		          "&routeParams=" + encodeURIComponent(params) +
-		          "&title=" + encodeURIComponent(title) +
-		          "&size=" + encodeURIComponent(size);
-	    };
-
-
-		$scope.addChartsPage = function () {
-			QDRChartService.addDashboard($scope.chart);
-		};
-
-		$scope.delChartsPage = function () {
-			QDRChartService.delDashboard($scope.chart);
-		};
-
-		$scope.isOnChartsPage = function () {
-			return $scope.chart.dashboard;
-		}
-
-		var showChart = function () {
-			// the chart divs are generated by angular and aren't available immediately
-			var div = angular.element("#" + $scope.svgDivId);
-			if (!div.width()) {
-				setTimeout(showChart, 100);
-				return;
-			}
-			dialogSvgChart = new QDRChartService.AreaChart($scope.chart);
-			$scope.dialogSvgChart = dialogSvgChart;
-			updateDialogChart();
-		}
-		showChart();
-
-		var updateDialogChart = function () {
-			if ($scope.dialogSvgChart)
-				$scope.dialogSvgChart.tick($scope.svgDivId);
-			if (updateTimer)
-				clearTimeout(updateTimer)
-			updateTimer = setTimeout(updateDialogChart, 1000);
-		}
-
-		var cleanup = function () {
-			if (updateTimer) {
-				clearTimeout(updateTimer);
-				updateTimer = null;
-			}
-			if (!$scope.chart.hdash && !$scope.chart.dashboard)
-				QDRChartService.unRegisterChart($scope.chart);     // remove the chart
-
-		}
-		$scope.ok = function () {
-			cleanup();
-			dialog.close(true);
-	    };
-
-	});
-    return QDR;
+  QDR.module.controller('QDR.ListChartController', function ($scope, dialog, $dialog, $location, QDRChartService, chart, nodeName) {
+    $scope.chart = chart;
+    $scope.dialogSvgChart = null;
+    var updateTimer = null;
+    $scope.svgDivId = "dialogChart";    // the div id for the svg chart
+
+    $scope.showChartsPage = function () {
+      cleanup();
+      dialog.close(true);
+      $location.path(QDR.pluginRoot + "/charts");
+    };
+
+    $scope.addHChart = function () {
+      QDRChartService.addHDash($scope.chart);
+      cleanup();
+      dialog.close(true);
+    }
+
+    $scope.addToDashboardLink = function () {
+      var href = "#/" + QDR.pluginName + "/charts";
+      var size = angular.toJson({
+                  size_x: 2,
+                  size_y: 2
+                });
+
+      var params = angular.toJson({chid: $scope.chart.id()});
+      var title = "Dispatch - " + nodeName;
+      return "/hawtio/#/dashboard/add?tab=dashboard" +
+        "&href=" + encodeURIComponent(href) +
+        "&routeParams=" + encodeURIComponent(params) +
+        "&title=" + encodeURIComponent(title) +
+        "&size=" + encodeURIComponent(size);
+    };
+
+
+    $scope.addChartsPage = function () {
+      QDRChartService.addDashboard($scope.chart);
+    };
+
+    $scope.delChartsPage = function () {
+      QDRChartService.delDashboard($scope.chart);
+    };
+
+    $scope.isOnChartsPage = function () {
+      return $scope.chart.dashboard;
+    }
+
+    var showChart = function () {
+      // the chart divs are generated by angular and aren't available immediately
+      var div = angular.element("#" + $scope.svgDivId);
+      if (!div.width()) {
+        setTimeout(showChart, 100);
+        return;
+      }
+      dialogSvgChart = new QDRChartService.AreaChart($scope.chart);
+      $scope.dialogSvgChart = dialogSvgChart;
+      updateDialogChart();
+    }
+    showChart();
+
+    var updateDialogChart = function () {
+      if ($scope.dialogSvgChart)
+        $scope.dialogSvgChart.tick($scope.svgDivId);
+      if (updateTimer)
+        clearTimeout(updateTimer)
+      updateTimer = setTimeout(updateDialogChart, 1000);
+    }
+
+    var cleanup = function () {
+      if (updateTimer) {
+        clearTimeout(updateTimer);
+        updateTimer = null;
+      }
+      if (!$scope.chart.hdash && !$scope.chart.dashboard)
+        QDRChartService.unRegisterChart($scope.chart);     // remove the chart
+
+    }
+    $scope.ok = function () {
+      cleanup();
+      dialog.close(true);
+      };
+
+    $scope.editChart = function () {
+      doDialog('tmplChartConfig.html', chart)
+    }
+
+    function doDialog(template, chart) {
+
+      $dialog.dialog({
+      backdrop: true,
+      keyboard: true,
+      backdropClick: true,
+      templateUrl: QDR.templatePath + template,
+      controller: "QDR.ChartDialogController",
+      resolve: {
+        chart: function() {
+          return chart;
+        },
+        updateTick: function () {
+          return function () {};
+        },
+        dashboard: function () {
+          return $scope;
+        },
+        adding: function () {
+          return true
+        }
+      }
+      }).open().then(function(result) {
+        $scope.ok()
+      });
+    };
+
+  });
+
+  return QDR;
 
 } (QDR || {}));


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@qpid.apache.org
For additional commands, e-mail: commits-help@qpid.apache.org