Began work on dashboard links and nav feature, #1944

public/app/directives/dashEditLink.js

@@ -6,9 +6,9 @@ function (angular, $) {
   'use strict';
 
   var editViewMap = {
-    'settings':    { src: 'app/partials/dasheditor.html', title: "Settings" },
+    'settings':    { src: 'app/features/dashboard/partials/settings.html', title: "Settings" },
     'annotations': { src: 'app/features/annotations/partials/editor.html', title: "Annotations" },
-    'templating':  { src: 'app/partials/templating_editor.html', title: "Templating" }
+    'templating':  { src: 'app/features/templating/partials/editor.html', title: "Templating" }
   };
 
   angular

public/app/features/all.js

@@ -1,5 +1,6 @@
 define([
-  './panellinkeditor/module',
+  './panellinks/module',
+  './dashlinks/module',
   './annotations/annotationsSrv',
   './templating/templateSrv',
   './dashboard/all',

public/app/features/dashboard/dashboardSrv.js

@@ -39,6 +39,7 @@ function (angular, $, kbn, _, moment) {
       this.snapshot = data.snapshot;
       this.schemaVersion = data.schemaVersion || 0;
       this.version = data.version || 0;
+      this.links = data.links || [];
 
       if (this.nav.length === 0) {
         this.nav.push({ type: 'timepicker' });

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

@@ -0,0 +1,62 @@
+<div ng-controller="DashLinksController">
+	<div class="editor-row">
+		<div class="tight-form-section">
+			<h5>Links and Dash Navigation</h5>
+
+			<div ng-repeat="link in panel.links">
+				<div class="tight-form" >
+					<ul class="tight-form-list">
+						<li class="tight-form-item">
+							<i class="fa fa-remove pointer" ng-click="deleteLink(link)"></i>
+						</li>
+
+						<li class="tight-form-item" style="width: 80px;">Link title</li>
+						<li>
+							<input type="text" ng-model="link.title" class="input-medium tight-form-input">
+						</li>
+
+						<li class="tight-form-item">Type</li>
+						<li>
+							<select class="input-medium tight-form-input" style="width: 101px;" ng-model="link.type" ng-options="f for f in ['dashboard','absolute']"></select>
+						</li>
+
+						<li class="tight-form-item" ng-show="link.type === 'dashboard'">Dashboard</li>
+						<li ng-show="link.type === 'dashboard'">
+							<input type="text"
+							ng-model="link.dashboard"
+							bs-typeahead="searchDashboards"
+							class="input-large tight-form-input">
+						</li>
+
+						<li class="tight-form-item" ng-show="link.type === 'absolute'">Url</li>
+						<li ng-show="link.type === 'absolute'">
+							<input type="text" ng-model="link.url" class="input-xlarge tight-form-input">
+						</li>
+					</ul>
+					<div class="clearfix"></div>
+				</div>
+				<div class="tight-form">
+					<ul class="tight-form-list" role="menu">
+						<li class="tight-form-item">
+							<i class="fa fa-remove invisible"></i>
+						</li>
+						<li class="tight-form-item" style="width: 80px;">
+							Params
+							<tip>Use var-variableName=value to pass templating variables.</tip>
+						</li>
+						<li>
+							<input type="text" ng-model="link.params" class="input-xxlarge tight-form-input">
+						</li>
+					</ul>
+					<div class="clearfix"></div>
+				</div>
+			</div>
+
+		</div>
+	</div>
+
+	<div class="editor-row">
+		<br>
+		<button class="btn btn-inverse" ng-click="addLink()"><i class="fa fa-plus"></i> Add link</button>
+	</div>
+</div>

public/app/partials/dasheditor.html → public/app/features/dashboard/partials/settings.html

@@ -105,18 +105,7 @@
 	</div>
 
 	<div ng-if="editor.index == 2">
-		<div class="editor-row">
-			<div class="tight-form-section">
-				<h5>Links and Navigation Options<h5>
-				<div class="tight-form">
-					<ul class="tight-form-list">
-						<li class="tight-form-item" style="width: 90px">
-						</li>
-					</ul>
-					<div class="clearfix"></div>
-				</div>
-			</div>
-		</div>
+		<dash-links-editor dashboard="dashboard"></dash-links-editor>
 	</div>
 
 	<div ng-repeat="pulldown in dashboard.nav" ng-controller="SubmenuCtrl" ng-show="editor.index == 3+$index">

public/app/features/dashlinks/editor.html

@@ -0,0 +1,59 @@
+	<div class="editor-row">
+		<div class="tight-form-section">
+			<h5>Links and Dash Navigation</h5>
+
+			<div class="tight-form" ng-repeat="link in dashboard.links">
+				<ul class="tight-form-list">
+					<li class="tight-form-item">
+						<i class="fa fa-remove pointer" ng-click="deleteLink(link)"></i>
+					</li>
+
+					<li class="tight-form-item" style="width: 80px;">Type</li>
+					<li>
+						<select class="input-medium tight-form-input" style="width: 101px;" ng-model="link.type" ng-options="f for f in ['dashboard','absolute']"></select>
+					</li>
+
+					<li class="tight-form-item" ng-show="link.type === 'dashboard'">Dashboard</li>
+					<li ng-show="link.type === 'dashboard'">
+						<input type="text"
+						ng-model="link.dashboard"
+						bs-typeahead="searchDashboards"
+						class="input-large tight-form-input">
+					</li>
+
+					<li class="tight-form-item" ng-show="link.type === 'absolute'">Url</li>
+					<li ng-show="link.type === 'absolute'">
+						<input type="text" ng-model="link.url" class="input-xlarge tight-form-input">
+					</li>
+
+					<li class="tight-form-item">Title</li>
+					<li>
+						<input type="text" ng-model="link.title" class="input-medium tight-form-input">
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
+			<!-- <div class="tight&#45;form"> -->
+				<!-- 	<ul class="tight&#45;form&#45;list" role="menu"> -->
+					<!-- 		<li class="tight&#45;form&#45;item"> -->
+						<!-- 			<i class="fa fa&#45;remove invisible"></i> -->
+						<!-- 		</li> -->
+					<!-- 		<li class="tight&#45;form&#45;item" style="width: 80px;"> -->
+						<!-- 			Params -->
+						<!-- 			<tip>Use var&#45;variableName=value to pass templating variables.</tip> -->
+						<!-- 		</li> -->
+					<!-- 		<li> -->
+						<!-- 			<input type="text" ng&#45;model="link.params" class="input&#45;xxlarge tight&#45;form&#45;input"> -->
+						<!-- 		</li> -->
+					<!-- 	</ul> -->
+				<!-- 	<div class="clearfix"></div> -->
+				<!-- </div> -->
+		</div>
+	</div>
+</div>
+
+<div class="editor-row">
+	<br>
+	<button class="btn btn-inverse" ng-click="addLink()"><i class="fa fa-plus"></i> Add link</button>
+</div>
+

public/app/features/dashlinks/module.html

@@ -0,0 +1 @@
+<h5>dash links</h5>

public/app/features/dashlinks/module.js

@@ -0,0 +1,60 @@
+define([
+  'angular',
+  'lodash',
+],
+function (angular, _) {
+  'use strict';
+
+  angular
+    .module('grafana.directives')
+    .directive('dashLinksEditor', function() {
+      return {
+        scope: {
+          dashboard: "="
+        },
+        restrict: 'E',
+        controller: 'DashLinkCtrl',
+        templateUrl: 'app/features/dashlinks/editor.html',
+        link: function() {
+        }
+      };
+    }).directive('dashLinks', function() {
+      return {
+        scope: {
+          dashboard: "="
+        },
+        restrict: 'E',
+        controller: 'DashLinkCtrl',
+        templateUrl: 'app/features/dashlinks/module.html',
+        link: function() {
+        }
+      };
+    }).controller('DashLinkCtrl', function($scope, backendSrv) {
+
+      $scope.dashboard.links = $scope.dashboard.links || [];
+
+      $scope.addLink = function() {
+        $scope.dashboard.links.push({
+          type: 'dashboard',
+          name: 'Related dashboard'
+        });
+      };
+
+      $scope.searchDashboards = function(queryStr, callback) {
+        var query = {query: queryStr};
+
+        backendSrv.search(query).then(function(result) {
+          var dashboards = _.map(result.dashboards, function(dash) {
+            return dash.title;
+          });
+
+          callback(dashboards);
+        });
+      };
+
+      $scope.deleteLink = function(link) {
+        $scope.dashboard.links = _.without($scope.dashboard.links, link);
+      };
+
+    });
+});

public/app/features/panellinkeditor/module.js → public/app/features/panellinks/module.js

@@ -8,18 +8,18 @@ function (angular, _) {
 
   angular
     .module('grafana.directives')
-    .directive('panelLinkEditor', function() {
+    .directive('panelLinksEditor', function() {
       return {
         scope: {
           panel: "="
         },
         restrict: 'E',
-        controller: 'PanelLinkEditorCtrl',
+        controller: 'PanelLinksEditorCtrl',
         templateUrl: 'app/features/panellinkeditor/module.html',
         link: function() {
         }
       };
-    }).controller('PanelLinkEditorCtrl', function($scope, backendSrv) {
+    }).controller('PanelLinksEditorCtrl', function($scope, backendSrv) {
 
       $scope.panel.links = $scope.panel.links || [];
 

public/app/partials/panelgeneral.html

@@ -48,6 +48,6 @@
 	</div>
 </div>
 
-<panel-link-editor panel="panel"></panel-link-editor>
+<panel-links-editor panel="panel"></panel-links-editor>
 
 

public/app/partials/submenu.html

@@ -5,24 +5,6 @@
 			<li ng-repeat="variable in variables" class="tight-form-item template-param-name dropdown">
 				<variable-value-select variable="variable" on-updated="variableUpdated(variable)"></variable-value-select>
 			</li>
-
-			<!-- <li class="dropdown" ng&#45;repeat&#45;end> -->
-			<!-- 	<a class="tight&#45;form&#45;item" tabindex="1" data&#45;toggle="dropdown">{{variable.current.text}} <i class="fa fa&#45;caret&#45;down"></i></a> -->
-			<!-- 	<div class="dropdown&#45;menu variable&#45;values&#45;dropdown"> -->
-			<!-- 		<input type="text" class="fluid&#45;width"> -->
-			<!-- 		<div class="variable&#45;values&#45;list"> -->
-			<!-- 			<div class="variable&#45;values&#45;list&#45;item" ng&#45;repeat="option in variable.options"> -->
-			<!-- 				<editor&#45;checkbox text="{{option.text}}" model="asd" change="buildUrl()"></editor&#45;checkbox> -->
-			<!-- 			</div> -->
-			<!-- 		</div> -->
-			<!-- 	</div> -->
-			<!-- </li> -->
-      <!--  -->
-			<!--
-			<li ng-repeat-end template-param-selector>
-			</li>
-			-->
-
 		</ul>
 
 		<ul class="tight-form-list" ng-if="dashboard.annotations.list.length > 0">
@@ -36,6 +18,15 @@
 			</li>
 		</ul>
 
+		<ul class="tight-form-list pull-right" ng-if="dashboard.links.length > 0">
+			<li ng-repeat="link in dashboard.links" class="tight-form-item">
+				<a class="pointer">
+					<i class="fa fa-th-large"></i>
+					{{link.title}}
+				</a>
+			</li>
+		</ul>
+
 		<div class="clearfix"></div>
 	</div>
 </div>

public/css/less/submenu.less

@@ -5,7 +5,7 @@
 }
 
 .submenu-controls {
-  margin: 10px 10px 0 5px;
+  margin: 10px 29px 1px 0px;
   font-size: 16px;
 }
 

public/css/less/variables.dark.less

@@ -213,8 +213,8 @@
 @navbarCollapseDesktopWidth:      @navbarCollapseWidth + 1;
 
 @navbarHeight:                    52px;
-@navbarBackgroundHighlight:       @grayDarker;
-@navbarBackground:                @grayDarker;
+@navbarBackgroundHighlight:       @bodyBackground;
+@navbarBackground:                @bodyBackground;
 @navbarBorder:                    none;
 
 @navbarText:                      @grayLight;