refactoring(): unified dashboard top nav to a single dashnav component, uses new navbar component

public/app/core/components/navbar/navbar.html

@@ -1,6 +1,5 @@
 <div class="navbar navbar-static-top">
 	<div class="navbar-inner"><div class="container-fluid">
-			<div class="top-nav">
 			<div class="top-nav-btn top-nav-menu-btn">
 				<a class="pointer" ng-click="ctrl.contextSrv.toggleSideMenu()">
 					<span class="top-nav-logo-background">
@@ -10,15 +9,15 @@
 				</a>
 			</div>
 
+			<span ng-if="ctrl.title">
 				<span class="icon-circle top-nav-icon">
-					<i ng-class="icon"></i>
+					<i ng-class="ctrl.icon"></i>
 				</span>
-
+				<a ng-href="{{ctl.titleUrl}}" class="top-nav-title">
-				<a ng-href="{{titleUrl}}" class="top-nav-title">
 					{{ctrl.title}}
 				</a>
-				<i ng-show="subnav" class="top-nav-breadcrumb-icon fa fa-angle-right"></i>
+				<i ng-show="ctrl.subnav" class="top-nav-breadcrumb-icon fa fa-angle-right"></i>
-			</div>
+			</span>
 
 			<div ng-transclude></div>
 		</div>

public/app/core/components/navbar/navbar.ts

@@ -6,11 +6,8 @@ import $ from 'jquery';
 import coreModule from '../../core_module';
 
 export class NavbarCtrl {
-  contextSrv: any;
-
   /** @ngInject */
-  constructor(private $scope, contextSrv) {
+  constructor(private $scope, private contextSrv) {
-    this.contextSrv = contextSrv;
   }
 }
 
@@ -26,9 +23,9 @@ export function navbarDirective() {
       title: "@",
       titleUrl: "@",
     },
-    link: function(scope, elem, attrs) {
+    link: function(scope, elem, attrs, ctrl) {
-      scope.icon = attrs.icon;
+      ctrl.icon = attrs.icon;
-      scope.subnav = attrs.subnav;
+      ctrl.subnav = attrs.subnav;
     }
   };
 }

public/app/core/components/sidemenu/sidemenu.ts

@@ -137,7 +137,7 @@ export class SideMenuCtrl {
 export function sideMenuDirective() {
   return {
     restrict: 'E',
-    templateUrl: 'app/features/sidemenu/sidemenu.html',
+    templateUrl: 'app/core/components/sidemenu/sidemenu.html',
     controller: SideMenuCtrl,
     bindToController: true,
     controllerAs: 'ctrl',

public/app/features/dashboard/all.js

@@ -1,8 +1,7 @@
 define([
   './dashboardCtrl',
   './dashboardLoaderSrv',
-  './dashboardNavCtrl',
+  './dashnav/dashnav',
-  './snapshotTopNavCtrl',
   './saveDashboardAsCtrl',
   './rowCtrl',
   './shareModalCtrl',

public/app/features/dashboard/dashboardCtrl.js

@@ -23,7 +23,6 @@ function (angular, $, config, moment) {
       $timeout) {
 
     $scope.editor = { index: 0 };
-    $scope.topNavPartial = 'app/features/dashboard/partials/dashboardTopNav.html';
     $scope.panels = config.panels;
 
     var resizeEventTimeout;
@@ -58,7 +57,6 @@ function (angular, $, config, moment) {
 
         dashboardKeybindings.shortcuts($scope);
 
-        $scope.updateTopNavPartial();
         $scope.updateSubmenuVisibility();
         $scope.setWindowTitleAndTheme();
 
@@ -69,12 +67,6 @@ function (angular, $, config, moment) {
       });
     };
 
-    $scope.updateTopNavPartial = function() {
-      if ($scope.dashboard.meta.isSnapshot) {
-        $scope.topNavPartial = 'app/features/dashboard/partials/snapshotTopNav.html';
-      }
-    };
-
     $scope.updateSubmenuVisibility = function() {
       $scope.submenuEnabled = $scope.dashboard.isSubmenuFeaturesEnabled();
     };

public/app/features/dashboard/dashnav/dashnav.html

@@ -0,0 +1,71 @@
+<navbar>
+
+<div class="top-nav-btn top-nav-dashboards-btn" ng-if="!dashboardMeta.isSnapshot">
+	<a class="pointer" ng-click="openSearch()">
+		<i class="fa fa-th-large"></i>
+		<span class="dashboard-title">{{dashboard.title}}</span>
+		<i class="fa fa-caret-down"></i>
+	</a>
+</div>
+
+<div class="top-nav-snapshot-title" ng-if="dashboardMeta.isSnapshot">
+	<a class="pointer" bs-tooltip="titleTooltip" data-placement="bottom">
+		<i class="gf-icon gf-icon-snap-multi"></i>
+		<span class="dashboard-title">
+			{{dashboard.title}}
+			<em class="small">&nbsp;&nbsp;(snapshot)</em>
+		</span>
+	</a>
+</div>
+
+<ul class="nav pull-left top-nav-dash-actions">
+	<li ng-show="dashboardMeta.canStar">
+		<a class="pointer" ng-click="starDashboard()">
+			<i class="fa" ng-class="{'fa-star-o': !dashboardMeta.isStarred, 'fa-star': dashboardMeta.isStarred}" style="color: orange;"></i>
+		</a>
+	</li>
+	<li ng-show="dashboardMeta.canShare">
+		<a class="pointer" ng-click="shareDashboard()" bs-tooltip="'Share dashboard'" data-placement="bottom"><i class="fa fa-share-square-o"></i></a>
+	</li>
+	<li ng-show="dashboardMeta.canSave">
+		<a ng-click="saveDashboard()" bs-tooltip="'Save dashboard'" data-placement="bottom"><i class="fa fa-save"></i></a>
+	</li>
+	<li ng-if="showSettingsMenu" class="dropdown">
+		<a class="pointer" ng-click="hideTooltip($event)" bs-tooltip="'Manage dashboard'" data-placement="bottom" data-toggle="dropdown"><i class="fa fa-cog"></i></a>
+		<ul class="dropdown-menu">
+			<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="openEditView('settings');">Settings</a></li>
+			<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="openEditView('annotations');">Annotations</a></li>
+			<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="openEditView('templating');">Templating</a></li>
+			<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="exportDashboard();">Export</a></li>
+			<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="editJson();">View JSON</a></li>
+			<li ng-if="contextSrv.isEditor && !dashboard.editable"><a class="pointer" ng-click="makeEditable();">Make Editable</a></li>
+			<li ng-if="contextSrv.isEditor"><a class="pointer" ng-click="saveDashboardAs();">Save As...</a></li>
+			<li ng-if="dashboardMeta.canSave"><a class="pointer" ng-click="deleteDashboard();">Delete dashboard</a></li>
+		</ul>
+	</li>
+</ul>
+
+<ul class="nav dash-playlist-actions" ng-if="playlistSrv">
+	<li>
+		<a ng-click="playlistSrv.prev()"><i class="fa fa-step-backward"></i></a>
+	</li>
+	<li>
+		<a ng-click="playlistSrv.stop()"><i class="fa fa-stop"></i></a>
+	</li>
+	<li>
+		<a ng-click="playlistSrv.next()"><i class="fa fa-step-forward"></i></a>
+	</li>
+</ul>
+
+<ul class="nav pull-right">
+	<li ng-show="dashboardViewState.fullscreen" class="back-to-dashboard-link">
+		<a ng-click="exitFullscreen()">
+			Back to dashboard
+		</a>
+	</li>
+	<li ng-if="dashboard">
+		<gf-time-picker dashboard="dashboard"></gf-time-picker>
+	</li>
+</ul>
+
+</navbar>

public/app/features/dashboard/dashnav/dashnav.ts

@@ -1,18 +1,28 @@
-define([
+///<reference path="../../../headers/common.d.ts" />
-  'angular',
-  'lodash',
-  'vendor/filesaver'
-],
-function (angular, _) {
-  'use strict';
 
-  var module = angular.module('grafana.controllers');
+import _ from 'lodash';
+import moment from 'moment';
+import angular from 'angular';
 
-  module.controller('DashboardNavCtrl', function($scope, $rootScope, alertSrv, $location, playlistSrv, backendSrv, $timeout) {
+export class DashNavCtrl {
+
+  /** @ngInject */
+  constructor($scope, $rootScope, alertSrv, $location, playlistSrv, backendSrv, $timeout) {
 
     $scope.init = function() {
       $scope.onAppEvent('save-dashboard', $scope.saveDashboard);
       $scope.onAppEvent('delete-dashboard', $scope.deleteDashboard);
+
+      $scope.showSettingsMenu = $scope.dashboardMeta.canEdit || $scope.contextSrv.isEditor;
+
+      if ($scope.dashboardMeta.isSnapshot) {
+        $scope.showSettingsMenu = false;
+        var meta = $scope.dashboardMeta;
+        $scope.titleTooltip = 'Created: &nbsp;' + moment(meta.created).calendar();
+        if (meta.expires) {
+          $scope.titleTooltip += '<br>Expires: &nbsp;' + moment(meta.expires).fromNow() + '<br>';
+        }
+      }
     };
 
     $scope.openEditView = function(editview) {
@@ -20,17 +30,12 @@ function (angular, _) {
       $location.search(search);
     };
 
-    $scope.showSettingsMenu = function() {
-      return $scope.dashboardMeta.canEdit || $scope.contextSrv.isEditor;
-    };
-
     $scope.starDashboard = function() {
       if ($scope.dashboardMeta.isStarred) {
         backendSrv.delete('/api/user/stars/dashboard/' + $scope.dashboard.id).then(function() {
           $scope.dashboardMeta.isStarred = false;
         });
-      }
+      } else {
-      else {
         backendSrv.post('/api/user/stars/dashboard/' + $scope.dashboard.id).then(function() {
           $scope.dashboardMeta.isStarred = true;
         });
@@ -63,7 +68,7 @@ function (angular, _) {
         $scope.appEvent('dashboard-saved', $scope.dashboard);
         $scope.appEvent('alert-success', ['Dashboard saved', 'Saved as ' + clone.title]);
 
-        //force refresh whole page
+        // force refresh whole page
         window.location.href = window.location.href;
       }, $scope.handleSaveDashError);
     };
@@ -152,7 +157,8 @@ function (angular, _) {
     $scope.exportDashboard = function() {
       var clone = $scope.dashboard.getSaveModelClone();
       var blob = new Blob([angular.toJson(clone, true)], { type: "application/json;charset=utf-8" });
-      window.saveAs(blob, $scope.dashboard.title + '-' + new Date().getTime());
+      var wnd: any = window;
+      wnd.saveAs(blob, $scope.dashboard.title + '-' + new Date().getTime());
     };
 
     $scope.snapshot = function() {
@@ -176,6 +182,17 @@ function (angular, _) {
       playlistSrv.stop(1);
     };
 
-  });
+    $scope.init();
+  }
+}
 
-});
+export function dashNavDirective() {
+  return {
+    restrict: 'E',
+    templateUrl: 'app/features/dashboard/dashnav/dashnav.html',
+    controller: DashNavCtrl,
+    transclude: true,
+  };
+}
+
+angular.module('grafana.directives').directive('dashnav', dashNavDirective);

public/app/features/dashboard/partials/dashboardTopNav.html

@@ -1,76 +0,0 @@
-<div class="navbar navbar-static-top" ng-controller='DashboardNavCtrl' ng-init="init()">
-	<div class="navbar-inner">
-		<div class="container-fluid">
-
-			<div class="top-nav">
-				<div class="top-nav-btn top-nav-menu-btn">
-					<a class="pointer" ng-click="contextSrv.toggleSideMenu()">
-						<span class="top-nav-logo-background">
-							<img class="logo-icon" src="img/fav32.png"></img>
-						</span>
-						<i class="fa fa-caret-down"></i>
-					</a>
-				</div>
-
-				<div class="top-nav-btn top-nav-dashboards-btn">
-					<a class="pointer" ng-click="openSearch()">
-						<i class="fa fa-th-large"></i>
-						<span class="dashboard-title">{{dashboard.title}}</span>
-						<i class="fa fa-caret-down"></i>
-					</a>
-				</div>
-			</div>
-
-			<ul class="nav pull-left top-nav-dash-actions">
-				<li ng-show="dashboardMeta.canStar">
-					<a class="pointer" ng-click="starDashboard()">
-						<i class="fa" ng-class="{'fa-star-o': !dashboardMeta.isStarred, 'fa-star': dashboardMeta.isStarred}" style="color: orange;"></i>
-					</a>
-				</li>
-				<li ng-show="dashboardMeta.canShare">
-					<a class="pointer" ng-click="shareDashboard()" bs-tooltip="'Share dashboard'" data-placement="bottom"><i class="fa fa-share-square-o"></i></a>
-				</li>
-				<li ng-show="dashboardMeta.canSave">
-					<a ng-click="saveDashboard()" bs-tooltip="'Save dashboard'" data-placement="bottom"><i class="fa fa-save"></i></a>
-				</li>
-				<li ng-if="showSettingsMenu()" class="dropdown">
-					<a class="pointer" ng-click="hideTooltip($event)" bs-tooltip="'Manage dashboard'" data-placement="bottom" data-toggle="dropdown"><i class="fa fa-cog"></i></a>
-					<ul class="dropdown-menu">
-						<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="openEditView('settings');">Settings</a></li>
-						<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="openEditView('annotations');">Annotations</a></li>
-						<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="openEditView('templating');">Templating</a></li>
-						<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="exportDashboard();">Export</a></li>
-						<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="editJson();">View JSON</a></li>
-						<li ng-if="contextSrv.isEditor && !dashboard.editable"><a class="pointer" ng-click="makeEditable();">Make Editable</a></li>
-						<li ng-if="contextSrv.isEditor"><a class="pointer" ng-click="saveDashboardAs();">Save As...</a></li>
-						<li ng-if="dashboardMeta.canSave"><a class="pointer" ng-click="deleteDashboard();">Delete dashboard</a></li>
-					</ul>
-				</li>
-			</ul>
-
-			<ul class="nav dash-playlist-actions" ng-if="playlistSrv">
-				<li>
-					<a ng-click="playlistSrv.prev()"><i class="fa fa-step-backward"></i></a>
-				</li>
-				<li>
-					<a ng-click="playlistSrv.stop()"><i class="fa fa-stop"></i></a>
-				</li>
-				<li>
-					<a ng-click="playlistSrv.next()"><i class="fa fa-step-forward"></i></a>
-				</li>
-			</ul>
-
-			<ul class="nav pull-right">
-				<li ng-show="dashboardViewState.fullscreen" class="back-to-dashboard-link">
-					<a ng-click="exitFullscreen()">
-						Back to dashboard
-					</a>
-				</li>
-				<li ng-if="dashboard">
-					<gf-time-picker dashboard="dashboard"></gf-time-picker>
-				</li>
-			</ul>
-		</div>
-	</div>
-</div>
-

public/app/features/dashboard/partials/snapshotTopNav.html

@@ -1,36 +0,0 @@
-<div class="navbar navbar-static-top" ng-controller='SnapshotTopNavCtrl' ng-init="init()">
-	<div class="navbar-inner">
-		<div class="container-fluid">
-
-			<div class="top-nav">
-				<a class="pointer top-nav-menu-btn" ng-if="!contextSrv.sidemenu" ng-click="contextSrv.toggleSideMenu()">
-					<img class="logo-icon" src="img/fav32.png"></img>
-					<i class="fa fa-bars"></i>
-				</a>
-
-				<div class="top-nav-snapshot-title">
-					<a class="pointer" bs-tooltip="titleTooltip" data-placement="bottom">
-						<i class="gf-icon gf-icon-snap-multi"></i>
-						<span class="dashboard-title">
-							{{dashboard.title}}
-							<em class="small">&nbsp;&nbsp;(snapshot)</em>
-						</span>
-					</a>
-				</div>
-			</div>
-
-			<ul class="nav pull-left top-nav-dash-actions">
-				<li>
-					<a class="pointer" ng-click="shareDashboard()" bs-tooltip="'Share dashboard'" data-placement="bottom"><i class="fa fa-share-square-o"></i></a>
-				</li>
-			</ul>
-
-			<ul class="nav pull-right">
-				<li ng-if="dashboard">
-					<gf-time-picker dashboard="dashboard"></gf-time-picker>
-				</li>
-			</ul>
-
-		</div>
-	</div>
-</div>

public/app/features/dashboard/snapshotTopNavCtrl.js

@@ -1,29 +0,0 @@
-define([
-  'angular',
-  'moment',
-],
-function (angular, moment) {
-  'use strict';
-
-  var module = angular.module('grafana.controllers');
-
-  module.controller('SnapshotTopNavCtrl', function($scope) {
-
-    $scope.init = function() {
-      var meta = $scope.dashboardMeta;
-      $scope.titleTooltip = 'Created:  ' + moment(meta.created).calendar();
-      if (meta.expires) {
-        $scope.titleTooltip += '<br>Expires: &nbsp;' + moment(meta.expires).fromNow() + '<br>';
-      }
-    };
-
-    $scope.shareDashboard = function() {
-      $scope.appEvent('show-modal', {
-        src: './app/features/dashboard/partials/shareModal.html',
-        scope: $scope.$new(),
-      });
-    };
-
-  });
-
-});

public/app/features/playlist/partials/playlist.html

@@ -1,9 +1,3 @@
-<!-- <topnav icon="fa fa&#45;fw fa&#45;list" title="Playlists" title&#45;url="playlists" subnav="true"> -->
-<!-- 	<ul class="nav"> -->
-<!-- 		<li ng&#45;class="{active: isNew()}" ng&#45;show="isNew()"><a href="datasources/create">New</a></li> -->
-<!-- 		<li class="active" ng&#45;show="!isNew()"><a href="playlists/edit/{{playlist.id}}">{{playlist.title}}</a></li> -->
-<!-- 	</ul> -->
-<!-- </topnav> -->
 <navbar title="Playlists" title-url="playlists" icon="fa fa-fw fa-list" subnav="true">
 	<ul class="nav">
 		<li ng-class="{active: isNew()}" ng-show="isNew()"><a href="datasources/create">New</a></li>

public/app/partials/dashboard.html

@@ -1,7 +1,6 @@
-<div body-class class="dashboard">
+<div body-class class="dashboard" ng-if="dashboard">
 
-	<div ng-include src="topNavPartial">
+	<dashnav></dashnav>
-	</div>
 
 	<div dash-editor-view></div>
 	<div dash-search-view></div>

public/less/navbar.less

@@ -8,11 +8,6 @@
   .fa { font-size: 115%; }
 }
 
-.top-nav {
-  float: left;
-  font-size: 16px;
-}
-
 .fa.top-nav-breadcrumb-icon {
   margin: 18px 0 6px 5px;
   float: left;
@@ -29,10 +24,10 @@
   border-right: 1px solid @grafanaTargetBorder;
 
   .fa-caret-down {
-    font-size: 50%;
+    font-size: 55%;
     position: absolute;
-    right: 7px;
+    right: 8px;
-    top: 21px;
+    top: 23px;
   }
 
   a {