refactor(): refactoring submenu to directive

public/app/features/apps/partials/edit.html

@@ -1,9 +1,8 @@
-<topnav title="Apps" icon="fa fa-fw fa-cubes" subnav="true">
+<navbar title="Apps" title-url="apps" icon="fa fa-fw fa-cubes" subnav="true">
 	<ul class="nav">
-		<li ><a href="apps">Overview</a></li>
+		<li class="active" ><a href="apps/edit/{{ctrl.current.type}}">{{ctrl.appModel.name}}</a></li>
-		<li class="active" ><a href="apps/edit/{{ctrl.current.type}}">Edit</a></li>
 	</ul>
-</topnav>
+</navbar>
 
 <div class="page-container">
 	<div class="apps-side-box">

public/app/features/dashboard/all.js

@@ -2,11 +2,11 @@ define([
   './dashboardCtrl',
   './dashboardLoaderSrv',
   './dashnav/dashnav',
+  './submenu/submenu',
   './saveDashboardAsCtrl',
   './rowCtrl',
   './shareModalCtrl',
   './shareSnapshotCtrl',
-  './submenuCtrl',
   './dashboardSrv',
   './keybindings',
   './viewStateSrv',

public/app/features/dashboard/submenu/submenu.html

@@ -0,0 +1,30 @@
+<div class="submenu-controls">
+	<div class="tight-form borderless">
+
+		<ul class="tight-form-list" ng-if="ctrl.dashboard.templating.list.length > 0">
+			<li ng-repeat="variable in ctrl.variables" class="submenu-item">
+				<span class="template-variable tight-form-item" ng-show="!variable.hideLabel" style="padding-right: 5px">
+					{{variable.label || variable.name}}:
+				</span>
+				<value-select-dropdown variable="variable" on-updated="ctrl.variableUpdated(variable)" get-values-for-tag="ctrl.getValuesForTag(variable, tagKey)"></value-select-dropdown>
+			</li>
+		</ul>
+
+		<ul class="tight-form-list" ng-if="ctrl.dashboard.annotations.list.length > 0">
+			<li ng-repeat="annotation in ctrl.dashboard.annotations.list" class="submenu-item annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}">
+				<a ng-click="ctrl.disableAnnotation(annotation)">
+					<i class="fa fa-bolt" style="color:{{annotation.iconColor}}"></i>
+					{{annotation.name}}
+					<input class="cr1" id="hideYAxis" type="checkbox" ng-model="annotation.enable" ng-checked="annotation.enable">
+					<label for="hideYAxis" class="cr1"></label>
+				</a>
+			</li>
+		</ul>
+
+		<ul class="tight-form-list pull-right" ng-if="ctrl.dashboard.links.length > 0">
+			<dash-links-container links="ctrl.dashboard.links"></dash-links-container>
+		</ul>
+
+		<div class="clearfix"></div>
+	</div>
+</div>

public/app/features/dashboard/submenu/submenu.ts

@@ -0,0 +1,46 @@
+///<reference path="../../../headers/common.d.ts" />
+
+import angular from 'angular';
+
+export class SubmenuCtrl {
+  annotations: any;
+  variables: any;
+  dashboard: any;
+
+  constructor(private $rootScope, private templateValuesSrv, private dynamicDashboardSrv) {
+    this.annotations = this.dashboard.templating.list;
+    this.variables = this.dashboard.templating.list;
+  }
+
+  disableAnnotation(annotation) {
+    annotation.enable = !annotation.enable;
+    this.$rootScope.$broadcast('refresh');
+  }
+
+  getValuesForTag(variable, tagKey) {
+    return this.templateValuesSrv.getValuesForTag(variable, tagKey);
+  }
+
+  variableUpdated(variable) {
+    this.templateValuesSrv.variableUpdated(variable).then(() => {
+      this.dynamicDashboardSrv.update(this.dashboard);
+      this.$rootScope.$emit('template-variable-value-updated');
+      this.$rootScope.$broadcast('refresh');
+    });
+  }
+}
+
+export function submenuDirective() {
+  return {
+    restrict: 'E',
+    templateUrl: 'app/features/dashboard/submenu/submenu.html',
+    controller: SubmenuCtrl,
+    bindToController: true,
+    controllerAs: 'ctrl',
+    scope: {
+      dashboard: "=",
+    }
+  };
+}
+
+angular.module('grafana.directives').directive('dashboardSubmenu', submenuDirective);

public/app/features/dashboard/submenuCtrl.js

@@ -1,39 +0,0 @@
-define([
-  'angular',
-],
-function (angular) {
-  'use strict';
-
-  var module = angular.module('grafana.controllers');
-
-  module.controller('SubmenuCtrl', function($scope, $q, $rootScope, templateValuesSrv, dynamicDashboardSrv) {
-
-    $scope.init = function() {
-      $scope.panel = $scope.pulldown;
-      $scope.row = $scope.pulldown;
-      $scope.annotations = $scope.dashboard.templating.list;
-      $scope.variables = $scope.dashboard.templating.list;
-    };
-
-    $scope.disableAnnotation = function (annotation) {
-      annotation.enable = !annotation.enable;
-      $rootScope.$broadcast('refresh');
-    };
-
-    $scope.getValuesForTag = function(variable, tagKey) {
-      return templateValuesSrv.getValuesForTag(variable, tagKey);
-    };
-
-    $scope.variableUpdated = function(variable) {
-      templateValuesSrv.variableUpdated(variable).then(function() {
-        dynamicDashboardSrv.update($scope.dashboard);
-        $rootScope.$emit('template-variable-value-updated');
-        $rootScope.$broadcast('refresh');
-      });
-    };
-
-    $scope.init();
-
-  });
-
-});

public/app/partials/dashboard.html

@@ -6,8 +6,7 @@
 	<div dash-search-view></div>
 	<div class="clearfix"></div>
 
-	<div ng-if="submenuEnabled" ng-include="'app/partials/submenu.html'">
+	<dashboard-submenu ng-if="submenuEnabled" dashboard="dashboard"></dashboard-submenu>
-  </div>
 
 	<div class="clearfix"></div>
 

public/app/partials/submenu.html

@@ -1,30 +0,0 @@
-<div class="submenu-controls" ng-controller="SubmenuCtrl">
-	<div class="tight-form borderless">
-
-		<ul class="tight-form-list" ng-if="dashboard.templating.list.length > 0">
-			<li ng-repeat="variable in variables" class="submenu-item">
-				<span class="template-variable tight-form-item" ng-show="!variable.hideLabel" style="padding-right: 5px">
-					{{variable.label || variable.name}}:
-				</span>
-				<value-select-dropdown variable="variable" on-updated="variableUpdated(variable)" get-values-for-tag="getValuesForTag(variable, tagKey)"></value-select-dropdown>
-			</li>
-		</ul>
-
-		<ul class="tight-form-list" ng-if="dashboard.annotations.list.length > 0">
-			<li ng-repeat="annotation in dashboard.annotations.list" class="submenu-item annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}">
-				<a ng-click="disableAnnotation(annotation)">
-                    <i class="fa fa-bolt" style="color:{{annotation.iconColor}}"></i>
-					{{annotation.name}}
-					<input class="cr1" id="hideYAxis" type="checkbox" ng-model="annotation.enable" ng-checked="annotation.enable">
-					<label for="hideYAxis" class="cr1"></label>
-				</a>
-			</li>
-		</ul>
-
-		<ul class="tight-form-list pull-right" ng-if="dashboard.links.length > 0">
-			<dash-links-container links="dashboard.links"></dash-links-container>
-		</ul>
-
-		<div class="clearfix"></div>
-	</div>
-</div>

public/views/index.html

@@ -27,6 +27,7 @@
 
 	<body ng-cloak>
 		<grafana-app>
+
 			<aside class="sidemenu-wrapper">
 				<sidemenu ng-if="contextSrv.sidemenu"></sidemenu>
 			</aside>