angular.module(PKG.name + '.commons')
  .directive('myMetricPicker', function (MyDataSource, $stateParams, $log) {

    var dSrc = new MyDataSource();

    function MetricPickerCtrl ($scope) {

      console.log($stateParams);
      var ns = [$stateParams.namespace,'namespace'].join(' ');

      $scope.available = {
        contexts: [],
        types: ['system', ns],
        names: []
      };

      $scope.metric = {
        context: '',
        type: ns,
        name: ''
      };

    }

    return {
      restrict: 'E',

      require: 'ngModel',

      scope: {},

      templateUrl: 'metric-picker/metric-picker.html',

      controller: MetricPickerCtrl,

      link: function (scope, elem, attr, ngModel) {

        function getContext () {
          var context;

          if(scope.metric.type==='system') {
            context = 'system';
          }
          else {
            context = $stateParams.namespace;
          }

          if(!context) { // should never happen, except on directive playground
            context = 'default';
            $log.warn('metric-picker using default namespace as context!');
          }

          if(scope.metric.context) {
            context += '.' + scope.metric.context;
          }

          return context;
        }

        function fetchAhead () {
          var context = getContext();

          scope.available.contexts = dSrc.request(
            {
              method: 'POST',
              _cdapPath: '/metrics/search?target=childContext' +
                '&context=' + encodeURIComponent(context)
            }
          );

          scope.available.names = dSrc.request(
            {
              method: 'POST',
              _cdapPath: '/metrics/search?target=metric' +
                '&context=' + encodeURIComponent(context)
            }
          );

        }

        var onBlurHandler = ngModel.$setTouched.bind(ngModel);
        elem.find('button').on('blur', onBlurHandler);
        elem.find('input').on('blur', onBlurHandler);

        scope.$watchCollection('metric', function (newVal, oldVal) {

          ngModel.$validate();

          if(newVal.type !== oldVal.type) {
            scope.metric.context = '';
            scope.metric.name = '';
            fetchAhead();
            return;
          }

          if(newVal.context !== oldVal.context) {
            scope.metric.name = '';
            fetchAhead();
          }

          if(newVal.context && newVal.name) {
            ngModel.$setViewValue(
              '/metrics/search?' +
              'context=' + encodeURIComponent(getContext()) +
              'metric=' + encodeURIComponent(newVal.name)
            );
          }
          else {
            if(ngModel.$dirty) {
              ngModel.$setViewValue(null);
            }

          }

        });

        fetchAhead();
      }
    };
  });

@@ -762,22 +762,21 @@
     var 
-contex
+outpu
 t;%0A%0A    
@@ -824,30 +824,29 @@
             
-contex
+outpu
 t = 'system'
@@ -884,30 +884,29 @@
             
-contex
+outpu
 t = $statePa
@@ -921,29 +921,19 @@
 espace;%0A
- 
+%0A
   
-       %7D%0A%0A
         
@@ -938,22 +938,21 @@
     if(!
-contex
+outpu
 t) %7B // 
@@ -1015,22 +1015,23 @@
         
-contex
+  outpu
 t = 'def
@@ -1037,16 +1037,18 @@
 fault';%0A
+  
         
@@ -1115,16 +1115,31 @@
 ext!');%0A
+            %7D%0A%0A
         
@@ -1192,22 +1192,21 @@
         
-contex
+outpu
 t += '.'
@@ -1260,22 +1260,21 @@
  return 
-contex
+outpu
 t;%0A     

refactor getContext()