$('<span>)</span>').appendTo(elem);

        $compile(elem.contents())($scope);
      }

      function ifJustAddedFocusFirstParam() {
        if ($scope.func.added) {
          $scope.func.added = false;
          setTimeout(() => {
            elem
              .find('.graphite-func-param-link')
              .first()
              .click();
          }, 10);
        }
      }

      function relink() {
        elem.children().remove();
        addElementsAndCompile();
        ifJustAddedFocusFirstParam();
      }

      relink();
    },
  };
}

coreModule.directive('graphiteFuncEditor', graphiteFuncEditor);

      }

      header += `</div>`;
      tooltip += header;
      tooltip += '<div class="graph-annotation__body">';

      if (text) {
        tooltip += '<div>' + sanitizeString(text.replace(/\n/g, '<br>')) + '</div>';
      }

      const tags = event.tags;

      if (tags && tags.length) {
        scope.tags = tags;
        tooltip +=
          '<span class="label label-tag small" ng-repeat="tag in tags" tag-color-from-name="tag">{{tag}}</span><br/>';
      }

      tooltip += '</div>';
      tooltip += '</div>';

      const $tooltip = $(tooltip);
      $tooltip.appendTo(element);

      $compile(element.contents())(scope);
    },
  };
}

coreModule.directive('annotationTooltip', annotationTooltipDirective);

          popover.hide();
        }

        // hide time picker
        const timePickerDropDownIsOpen = elem.find('.gf-timepicker-dropdown').length > 0;
        if (timePickerDropDownIsOpen) {
          const targetIsInTimePickerDropDown = target.parents('.gf-timepicker-dropdown').length > 0;
          const targetIsInTimePickerNav = target.parents('.gf-timepicker-nav').length > 0;
          const targetIsDatePickerRowBtn = target.parents('td[id^="datepicker-"]').length > 0;
          const targetIsDatePickerHeaderBtn = target.parents('button[id^="datepicker-"]').length > 0;

          if (
            targetIsInTimePickerNav ||
            targetIsInTimePickerDropDown ||
            targetIsDatePickerRowBtn ||
            targetIsDatePickerHeaderBtn
          ) {
            return;
          }

          scope.$apply(() => {
            scope.appEvent('closeTimepicker');
          });
        }
      });
    },
  };
}

coreModule.directive('grafanaApp', grafanaAppDirective);

      <div class="gf-form">
        <label class="gf-form-label">
          <a class="pointer" ng-click="ctrl.removeThreshold($index)" ng-disabled="ctrl.disabled">
            <i class="fa fa-trash"></i>
          </a>
        </label>
      </div>
    </div>

    <div class="gf-form-button-row">
      <button class="btn btn-inverse" ng-click="ctrl.addThreshold()" ng-disabled="ctrl.disabled">
        <i class="fa fa-plus"></i>&nbsp;Add Threshold
      </button>
    </div>
  </div>
</div>
`;

coreModule.directive('graphThresholdForm', function() {
  return {
    restrict: 'E',
    template: template,
    controller: ThresholdFormCtrl,
    bindToController: true,
    controllerAs: 'ctrl',
    scope: {
      panelCtrl: "="
    }
  };
});

              scope.appEvent('alert-error', ['Import failed', 'JSON -> JS Serialization failed: ' + err.message]);
              return;
            }

            scope.$apply(function() {
              scope.onUpload({dash: dash});
            });
          };
        };

        for (var i = 0, f; f = files[i]; i++) {
          var reader = new FileReader();
          reader.onload = readerOnload();
          reader.readAsText(f);
        }
      }

      var wnd: any = window;
      // Check for the various File API support.
      if (wnd.File && wnd.FileReader && wnd.FileList && wnd.Blob) {
        // Something
        document.getElementById('dashupload').addEventListener('change', file_selected, false);
      } else {
        alertSrv.set('Oops','Sorry, the HTML5 File APIs are not fully supported in this browser.','error');
      }
    }
  };
}

coreModule.directive('dashUpload', uploadDashboardDirective);

      }
    };

    confirmDelete() {
      this.backendSrv.delete('/api/devices/' + this.current.id).then(() => {
        this.$location.path( 'devices');
      });
    }

    delete(s) {
      this.$scope.appEvent('confirm-modal', {
        title: 'Delete',
        text: 'Are you sure you want to delete this device?',
        yesText: "Delete",
        icon: "fa-trash",
        onConfirm: () => {
          this.confirmDelete();
        }
      });
    }
}

coreModule.controller( 'DeviceEditCtrl', DeviceEditCtrl);

coreModule.directive('deviceHttpSettings', function() {
  return {
    scope: {current: "="},
    templateUrl: 'public/app/features/plugins/partials/ds_http_settings.html'
  };
});

      return results => {
        const segments = _.map(results, segment => {
          return uiSegmentSrv.newSegment({
            value: segment.text,
            expandable: segment.expandable,
          });
        });

        if (addTemplateVars) {
          _.each(templateSrv.variables, variable => {
            segments.unshift(
              uiSegmentSrv.newSegment({
                type: 'template',
                value: '$' + variable.name,
                expandable: true,
              })
            );
          });
        }

        return segments;
      };
    };

    $scope.init();
  }
}

coreModule.directive('cloudwatchQueryParameter', CloudWatchQueryParameter);
coreModule.controller('CloudWatchQueryParameterCtrl', CloudWatchQueryParameterCtrl);

         {{::model.node.text}}
       </h1>

      <div class="page-header__actions" ng-transclude="header"></div>
		</div>

    <div class="page-body" ng-transclude="body">
    </div>
  </div>
</div>
`;

export function gfPageDirective() {
  return {
    restrict: 'E',
    template: template,
    scope: {
      model: '=',
    },
    transclude: {
      header: '?gfPageHeader',
      body: 'gfPageBody',
    },
    link: function(scope, elem, attrs) {
      console.log(scope);
    },
  };
}

coreModule.directive('gfPage', gfPageDirective);

    restrict: 'E',
    controller: LayoutSelectorCtrl,
    bindToController: true,
    controllerAs: 'ctrl',
    scope: {},
    template: template,
  };
}

/** @ngInject **/
export function layoutMode($rootScope) {
  return {
    restrict: 'A',
    scope: {},
    link: function(scope, elem) {
      var layout = store.get('grafana.list.layout.mode') || 'grid';
      var className = 'card-list-layout-' + layout;
      elem.addClass(className);

      $rootScope.onAppEvent('layout-mode-changed', (evt, newLayout) => {
        elem.removeClass(className);
        className = 'card-list-layout-' + newLayout;
        elem.addClass(className);
      }, scope);
    }
  };
}

coreModule.directive('layoutSelector', layoutSelector);
coreModule.directive('layoutMode', layoutMode);

    this.panelCtrl.render();
  }

  onFillColorChange(index) {
    return newColor => {
      this.panel.thresholds[index].fillColor = newColor;
      this.render();
    };
  }

  onLineColorChange(index) {
    return newColor => {
      this.panel.thresholds[index].lineColor = newColor;
      this.render();
    };
  }
}

coreModule.directive('graphThresholdForm', () => {
  return {
    restrict: 'E',
    templateUrl: 'public/app/plugins/panel/graph/thresholds_form.html',
    controller: ThresholdFormCtrl,
    bindToController: true,
    controllerAs: 'ctrl',
    scope: {
      panelCtrl: '=',
    },
  };
});