working on angular upgrade

src/app/app.js

@@ -8,7 +8,7 @@ define([
   'require',
   'config',
   'bootstrap',
-  'angular-sanitize',
+  'angular-route',
   'angular-strap',
   'angular-dragdrop',
   'extend-jquery',
@@ -61,8 +61,8 @@ function (angular, $, _, appLevelRequire, config) {
   });
 
   var apps_deps = [
+    'ngRoute',
     '$strap.directives',
-    'ngSanitize',
     'ngDragDrop',
     'grafana',
     'pasvaz.bindonce'

src/app/components/require.config.js

@@ -14,9 +14,9 @@ require.config({
     moment:                   '../vendor/moment',
     filesaver:                '../vendor/filesaver',
     angular:                  '../vendor/angular/angular',
+    'angular-route':          '../vendor/angular/angular-route',
     'angular-dragdrop':       '../vendor/angular/angular-dragdrop',
     'angular-strap':          '../vendor/angular/angular-strap',
-    'angular-sanitize':       '../vendor/angular/angular-sanitize',
     timepicker:               '../vendor/angular/timepicker',
     datepicker:               '../vendor/angular/datepicker',
     bindonce:                 '../vendor/angular/bindonce',
@@ -85,8 +85,6 @@ require.config({
     'jquery.flot.stack':    ['jquery', 'jquery.flot'],
     'jquery.flot.stackpercent':['jquery', 'jquery.flot'],
     'jquery.flot.time':     ['jquery', 'jquery.flot'],
-
-    'angular-sanitize':     ['angular'],
     'angular-cookies':      ['angular'],
     'angular-dragdrop':     ['jquery','jquery-ui','angular'],
     'angular-loader':       ['angular'],

src/app/controllers/graphiteTarget.js

@@ -10,7 +10,7 @@ function (angular, _, config, gfunc, Parser) {
 
   var module = angular.module('grafana.controllers');
 
-  module.controller('GraphiteTargetCtrl', function($scope) {
+  module.controller('GraphiteTargetCtrl', function($scope, $sce) {
 
     $scope.init = function() {
       $scope.target.target = $scope.target.target || '';
@@ -90,19 +90,7 @@ function (angular, _, config, gfunc, Parser) {
         }
 
         $scope.segments = _.map(astNode.segments, function(segment) {
-          var node = {
-            type: segment.type,
-            val: segment.value,
-            html: segment.value
-          };
-          if (segment.value === '*') {
-            node.html = '<i class="icon-asterisk"><i>';
-          }
-          if (segment.type === 'template') {
-            node.val = node.html = '[[' + segment.value + ']]';
-            node.html = "<span style='color: #ECEC09'>" + node.html + "</span>";
-          }
-          return node;
+          return new MetricSegment(segment);
         });
       }
     }
@@ -111,13 +99,13 @@ function (angular, _, config, gfunc, Parser) {
       var arr = $scope.segments.slice(0, index);
 
       return _.reduce(arr, function(result, segment) {
-        return result ? (result + "." + segment.val) : segment.val;
+        return result ? (result + "." + segment.value) : segment.value;
       }, "");
     }
 
     function checkOtherSegments(fromIndex) {
       if (fromIndex === 0) {
-        $scope.segments.push({html: 'select metric'});
+        $scope.segments.push(new MetricSegment('select metric'));
         return;
       }
 
@@ -126,12 +114,12 @@ function (angular, _, config, gfunc, Parser) {
         .then(function(segments) {
           if (segments.length === 0) {
             $scope.segments = $scope.segments.splice(0, fromIndex);
-            $scope.segments.push({html: 'select metric'});
+            $scope.segments.push(new MetricSegment('select metric'));
             return;
           }
           if (segments[0].expandable) {
             if ($scope.segments.length === fromIndex) {
-              $scope.segments.push({html: 'select metric'});
+              $scope.segments.push(new MetricSegment('select metric'));
             }
             else {
               return checkOtherSegments(fromIndex + 1);
@@ -161,21 +149,19 @@ function (angular, _, config, gfunc, Parser) {
 
       return $scope.datasource.metricFindQuery($scope.filter, query)
         .then(function(segments) {
-          _.each(segments, function(segment) {
-            segment.html = segment.val = segment.text;
+          $scope.altSegments = _.map(segments, function(segment) {
+            return new MetricSegment({ value: segment.text, expandable: segment.expandable });
           });
 
           _.each($scope.filter.templateParameters, function(templateParameter) {
-            segments.unshift({
+            $scope.altSegments.unshift(new MetricSegment({
               type: 'template',
-              html: '[[' + templateParameter.name + ']]',
-              val: '[[' + templateParameter.name + ']]',
+              value: '[[' + templateParameter.name + ']]',
               expandable: true,
-            });
+            }));
           });
 
-          segments.unshift({val: '*', html: '<i class="icon-asterisk"></i>', expandable: true });
-          $scope.altSegments = segments;
+          $scope.altSegments.unshift(new MetricSegment('*'));
         })
         .then(null, function(err) {
           $scope.parserError = err.message || 'Failed to issue metric query';
@@ -185,7 +171,7 @@ function (angular, _, config, gfunc, Parser) {
     $scope.setSegment = function (altIndex, segmentIndex) {
       delete $scope.parserError;
 
-      $scope.segments[segmentIndex].val = $scope.altSegments[altIndex].val;
+      $scope.segments[segmentIndex].value = $scope.altSegments[altIndex].value;
       $scope.segments[segmentIndex].html = $scope.altSegments[altIndex].html;
 
       if ($scope.functions.length > 0 && $scope.functions[0].def.fake) {
@@ -284,6 +270,33 @@ function (angular, _, config, gfunc, Parser) {
       $scope.panel.targets.push(clone);
     };
 
+    function MetricSegment(options) {
+      if (options === '*' || options.value === '*') {
+        this.value = '*';
+        this.html = $sce.trustAsHtml('<i class="icon-asterisk"><i>');
+        this.expandable = true;
+        return;
+      }
+
+      if (_.isString(options)) {
+        this.value = options;
+        this.html = $sce.trustAsHtml(this.value);
+        return;
+      }
+
+      this.value = options.value;
+      this.type = options.type;
+      this.expandable = options.expandable;
+
+      if (options.type === 'template') {
+        this.value = '[[' + options.value + ']]';
+        this.html = $sce.trustAsHtml("<span style='color: #ECEC09'>" + this.value + "</span>");
+      }
+      else {
+        this.html = $sce.trustAsHtml(this.value);
+      }
+    }
+
   });
 
   module.directive('focusMe', function($timeout, $parse) {

src/app/partials/graphite/editor.html

@@ -72,11 +72,11 @@
               data-toggle="dropdown"
               ng-click="getAltSegments($index)"
               focus-me="segment.focus"
-              ng-bind-html-unsafe="segment.html">
+              ng-bind-html="segment.html">
           </a>
           <ul class="dropdown-menu scrollable grafana-segment-dropdown-menu" role="menu">
             <li ng-repeat="altSegment in altSegments" role="menuitem">
-              <a href="javascript:void(0)" tabindex="1" ng-click="setSegment($index, $parent.$index)" ng-bind-html-unsafe="altSegment.html"></a>
+              <a href="javascript:void(0)" tabindex="1" ng-click="setSegment($index, $parent.$index)" ng-bind-html="altSegment.html"></a>
             </li>
           </ul>
         </li>