feat(dashboard): progress on dash edit mode

public/app/features/annotations/editor_ctrl.ts

@@ -67,8 +67,8 @@ export class AnnotationsEditorCtrl {
     this.annotations.push(this.currentAnnotation);
     this.reset();
     this.mode = 'list';
-    this.$scope.updateSubmenuVisibility();
     this.$scope.broadcastRefresh();
+    this.$scope.dashboard.updateSubmenuVisibility();
   };
 
   removeAnnotation(annotation) {

public/app/features/dashboard/dashboard_ctrl.ts

@@ -64,7 +64,7 @@ export class DashboardCtrl {
 
           dashboardKeybindings.shortcuts($scope);
 
-          $scope.updateSubmenuVisibility();
+          $scope.dashboard.updateSubmenuVisibility();
           $scope.setWindowTitleAndTheme();
 
           $scope.appEvent("dashboard-initialized", $scope.dashboard);
@@ -94,10 +94,6 @@ export class DashboardCtrl {
         dynamicDashboardSrv.process();
       };
 
-      $scope.updateSubmenuVisibility = function() {
-        $scope.submenuEnabled = $scope.dashboard.isSubmenuFeaturesEnabled();
-      };
-
       $scope.setWindowTitleAndTheme = function() {
         window.document.title = config.window_title_prefix + $scope.dashboard.title;
       };

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

@@ -52,6 +52,7 @@
 	<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="dashboard.editMode = true;">Enter Build Mode</a></li>
 			<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>
@@ -61,10 +62,6 @@
 			<li ng-if="dashboardMeta.canSave"><a class="pointer" ng-click="deleteDashboard();">Delete dashboard</a></li>
 		</ul>
 	</li>
-	<li>
-		<a ng-click="dashboard.editMode = true;"  ng-show="!dashboard.editMode" bs-tooltip="'Build Mode <br> CTRL+B'" data-placement="bottom"><i class="fa fa-wrench"></i></a>
-		<a ng-click="dashboard.editMode = false;" ng-show="dashboard.editMode" bs-tooltip="'Build Mode <br> CTRL+B'" data-placement="bottom" style="color: #33B5E5;"><i class="fa fa-wrench fa-wrench-close" style="color: #33B5E5;"></i> Leave Build Mode </a>
-	</li>
 </ul>
 
 <ul class="nav dash-playlist-actions" ng-if="playlistSrv">

public/app/features/dashboard/keybindings.js

@@ -44,7 +44,7 @@ function(angular, $) {
       }, { inputDisabled: true });
 
       keyboardManager.bind('ctrl+b', function() {
-        scope.dashboard.editMode = !scope.dashboard.editMode;
+        scope.dashboard.toggleEditMode();
       }, { inputDisabled: true });
 
       keyboardManager.bind('ctrl+s', function(evt) {

public/app/features/dashboard/model.ts

@@ -34,6 +34,7 @@ export class DashboardModel {
   gnetId: any;
   meta: any;
   events: any;
+  editMode: boolean;
 
   constructor(data, meta) {
     if (!data) {
@@ -171,12 +172,22 @@ export class DashboardModel {
     row.panels.push(panel);
   }
 
-  isSubmenuFeaturesEnabled() {
+  toggleEditMode() {
+    this.editMode = !this.editMode;
+    this.updateSubmenuVisibility();
+  }
+
+  updateSubmenuVisibility() {
+    if (this.editMode) {
+      this.meta.submenuEnabled = true;
+      return;
+    }
+
     var visableTemplates = _.filter(this.templating.list, function(template) {
       return template.hideVariable === undefined || template.hideVariable === false;
     });
 
-    return visableTemplates.length > 0 || this.annotations.list.length > 0 || this.links.length > 0;
+    this.meta.submenuEnabled = visableTemplates.length > 0 || this.annotations.list.length > 0 || this.links.length > 0;
   }
 
   getPanelInfoById(panelId) {

public/app/features/dashboard/row/options.html

@@ -0,0 +1,42 @@
+<div class="dash-row-options">
+
+  <div class="tabbed-view-header">
+    <h2 class="tabbed-view-title">
+      Row Options
+    </h2>
+
+    <button class="tabbed-view-close-btn" ng-click="ctrl.onClose()">
+      <i class="fa fa-remove"></i>
+    </button>
+  </div>
+
+  <br>
+
+  <div class="gf-form-group">
+    <div class="gf-form-inline">
+
+      <div class="gf-form">
+        <span class="gf-form-label width-6">Title</span>
+        <input type="text" class="gf-form-input max-width-14" ng-model='ctrl.row.title'></input>
+      </div>
+      <div class="gf-form">
+        <span class="gf-form-label width-6">Height</span>
+        <input type="text" class="gf-form-input max-width-8" ng-model='ctrl.row.height'></input>
+      </div>
+      <gf-form-switch class="gf-form" label="Show Title" tooltip="Check to always show row title" checked="ctrl.row.showTitle">
+      </gf-form-switch>
+    </div>
+  </div>
+
+  <h5 class="section-heading">Row Templating</h5>
+
+  <div class="gf-form-group">
+    <div class="gf-form">
+      <span class="gf-form-label">Repeat Row</span>
+      <div class="gf-form-select-wrapper max-width-10">
+        <select class="gf-form-input" ng-model="row.repeat" ng-options="f.name as f.name for f in dashboard.templating.list">
+          <option value=""></option>
+      </div>
+    </div>
+  </div>
+</div>

public/app/features/dashboard/row/options.ts

@@ -0,0 +1,24 @@
+///<reference path="../../../headers/common.d.ts" />
+
+import _ from 'lodash';
+
+import {coreModule} from 'app/core/core';
+
+export class RowOptionsCtrl {
+}
+
+export function rowOptionsDirective() {
+  return {
+    restrict: 'E',
+    templateUrl: 'public/app/features/dashboard/row/options.html',
+    controller: RowOptionsCtrl,
+    bindToController: true,
+    controllerAs: 'ctrl',
+    scope: {
+      row: "=",
+      onClose: "&"
+    },
+  };
+}
+
+coreModule.directive('dashRowOptions', rowOptionsDirective);

public/app/features/dashboard/row/row.html

@@ -1,95 +1,75 @@
-<!-- <div class="dash&#45;row&#45;handle&#45;column" ng&#45;show="ctrl.dashboard.editMode"> -->
-<!-- 	<div class="dash&#45;row&#45;move&#45;handle"> -->
-<!-- 	</div> -->
-<!-- 	<div class="dash&#45;row&#45;resize&#45;handle"> -->
-<!-- 	</div> -->
-<!-- </div> -->
+<div class="dash-row-header" ng-if="ctrl.dashboard.editMode">
+  <div class="gf-form gf-form--grow dropdown">
+    <a class="btn gf-form-btn btn-inverse dropdown-toggle" data-toggle="dropdown">
+      <span>{{ctrl.row.title}}</span>
+      <i class="fa fa-caret-down"></i>
+    </a>
 
-<div class="dash-row-content">
+    <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
+      <li>
+        <a ng-click="ctrl.showOptions = !ctrl.showOptions">Options</a>
+      </li>
+      <li class="dropdown-submenu">
+        <a href="javascript:void(0);">Height</a>
+        <ul class="dropdown-menu">
+          <li><a ng-click="ctrl.setHeight('25px')">25 px</a></li>
+          <li><a ng-click="ctrl.setHeight('100px')">100 px</a></li>
+          <li><a ng-click="ctrl.setHeight('150px')">150 px</a></li>
+          <li><a ng-click="ctrl.setHeight('200px')">200 px</a></li>
+          <li><a ng-click="ctrl.setHeight('250px')">250 px</a></li>
+          <li><a ng-click="ctrl.setHeight('300px')">300 px</a></li>
+          <li><a ng-click="ctrl.setHeight('350px')">350 px</a></li>
+          <li><a ng-click="ctrl.setHeight('450px')">450 px</a></li>
+          <li><a ng-click="ctrl.setHeight('500px')">500 px</a></li>
+          <li><a ng-click="ctrl.setHeight('600px')">600 px</a></li>
+          <li><a ng-click="ctrl.setHeight('700px')">700 px</a></li>
+        </ul>
+      </li>
+      <li class="dropdown-submenu">
+        <a href="javascript:void(0);">Move</a>
+        <ul class="dropdown-menu">
+          <li><a ng-click="ctrl.Move('up')">Up</a></li>
+          <li><a ng-click="ctrl.Move('down')">Down</a></li>
+          <li><a ng-click="ctrl.Move('top')">To Top</a></li>
+          <li><a ng-click="ctrl.Move('bottom')">To Bottom</a></li>
+        </ul>
+      </li>
+      <li>
+        <a ng-click="ctrl.deleteRow()">Delete</a>
+      </li>
+    </ul>
 
-	<div class="dash-row-header" ng-if="ctrl.dashboard.editMode">
-    <div class="gf-form gf-form--grow">
-      <input class="gf-form-input width-10" ng-model="ctrl.row.title"></input>
+    <label class="btn gf-form-btn btn-inverse">
+      Add Panel <i class="fa fa-plus"></i>
+    </label>
 
-      <label class="btn gf-form-btn btn-inverse">
-        Options <i class="fa fa-caret-down"></i>
-      </label>
-
-      <label class="btn gf-form-btn btn-inverse">
-        Add Panel <i class="fa fa-plus"></i>
-      </label>
+    <div class="gf-form-label gf-form-label--grow text-right" ng-click="ctrl.row.collapse = !ctrl.row.collapse">
+      <a class="pointer">
+        <i class="fa fa-chevron-down" ng-show="!ctrl.row.collapse"></i>
+        <i class="fa fa-chevron-right" ng-show="ctrl.row.collapse"></i>
+      </a>
+    </div>
+  </div>
+</div>
 
+<div ng-if="ctrl.showOptions">
+  <dash-row-options row="ctrl.row" on-close="ctrl.showOptions = false;"></dash-row-options>
+</div>
 
-    <!--   <div class="dash&#45;row&#45;header&#45;settings dropdown"> -->
-		<!-- 	<a class="pointer dropdown&#45;toggle" data&#45;toggle="dropdown"> -->
-		<!-- 		<i class="fa fa&#45;plus&#45;circle"></i> -->
-		<!-- 	</a> -->
-		<!-- 	<ul class="dropdown&#45;menu dropdown&#45;menu&#45;right" role="menu" aria&#45;labelledby="drop1"> -->
-		<!-- 		<li class="dropdown&#45;submenu"> -->
-		<!-- 			<a href="javascript:void(0);">Add Panel</a> -->
-		<!-- 			<ul class="dropdown&#45;menu"> -->
-		<!-- 				<li bindonce ng&#45;repeat="(key, value) in ctrl.panelPlugins"> -->
-		<!-- 					<a ng&#45;click="ctrl.addPanelDefault(key)" bo&#45;text="value.name"></a> -->
-		<!-- 				</li> -->
-		<!-- 			</ul> -->
-		<!-- 		</li> -->
-		<!-- 		<li class="dropdown&#45;submenu"> -->
-		<!-- 			<a href="javascript:void(0);">Set height</a> -->
-		<!-- 			<ul class="dropdown&#45;menu"> -->
-		<!-- 				<li><a ng&#45;click="setHeight('25px')">25 px</a></li> -->
-		<!-- 				<li><a ng&#45;click="setHeight('100px')">100 px</a></li> -->
-		<!-- 				<li><a ng&#45;click="setHeight('150px')">150 px</a></li> -->
-		<!-- 				<li><a ng&#45;click="setHeight('200px')">200 px</a></li> -->
-		<!-- 				<li><a ng&#45;click="setHeight('250px')">250 px</a></li> -->
-		<!-- 				<li><a ng&#45;click="setHeight('300px')">300 px</a></li> -->
-		<!-- 				<li><a ng&#45;click="setHeight('350px')">350 px</a></li> -->
-		<!-- 				<li><a ng&#45;click="setHeight('450px')">450 px</a></li> -->
-		<!-- 				<li><a ng&#45;click="setHeight('500px')">500 px</a></li> -->
-		<!-- 				<li><a ng&#45;click="setHeight('600px')">600 px</a></li> -->
-		<!-- 				<li><a ng&#45;click="setHeight('700px')">700 px</a></li> -->
-		<!-- 			</ul> -->
-		<!-- 		</li> -->
-		<!-- 		<!&#45;&#45; <li class="dropdown&#38;#45;submenu"> &#45;&#45;> -->
-		<!-- 		<!&#45;&#45; 	<a href="javascript:void(0);">Move</a> &#45;&#45;> -->
-		<!-- 		<!&#45;&#45; 	<ul class="dropdown&#38;#45;menu"> &#45;&#45;> -->
-		<!-- 		<!&#45;&#45; 		<li><a ng&#38;#45;click="moveRow('up')">Up</a></li> &#45;&#45;> -->
-		<!-- 		<!&#45;&#45; 		<li><a ng&#38;#45;click="moveRow('down')">Down</a></li> &#45;&#45;> -->
-		<!-- 		<!&#45;&#45; 		<li><a ng&#38;#45;click="moveRow('top')">To top</a></li> &#45;&#45;> -->
-		<!-- 		<!&#45;&#45; 		<li><a ng&#38;#45;click="moveRow('bottom')">To Bottom</a></li> &#45;&#45;> -->
-		<!-- 		<!&#45;&#45; 	</ul> &#45;&#45;> -->
-		<!-- 		<!&#45;&#45; </li> &#45;&#45;> -->
-		<!-- 		<li> -->
-		<!-- 			<a ng&#45;click="ctrl.editRow()">Row options</a> -->
-		<!-- 		</li> -->
-		<!-- 		<li> -->
-		<!-- 			<a ng&#45;click="ctrl.deleteRow()">Delete row</a> -->
-		<!-- 		</li> -->
-		<!-- 	</ul> -->
-		<!-- </div> -->
-		<div class="gf-form-label gf-form-label--grow text-right" ng-click="ctrl.row.collapse = !ctrl.row.collapse">
-			<a class="pointer">
-				<i class="fa fa-chevron-down" ng-show="!ctrl.row.collapse"></i>
-				<i class="fa fa-chevron-right" ng-show="ctrl.row.collapse"></i>
-			</a>
-		</div>
-	</div>
+<div class="panels-wrapper" ng-if="!ctrl.row.collapse">
+  <div ng-repeat="panel in ctrl.row.panels track by panel.id" class="panel" ui-draggable="!ctrl.dashboard.meta.fullscreen" drag="panel.id" ui-on-drop="ctrl.onDrop($data, panel)" drag-handle-class="drag-handle" panel-width ui-on-drag-enter="ctrl.onDragEnter($data)">
+    <plugin-component type="panel" class="panel-margin">
+    </plugin-component>
   </div>
 
-	<div class="panels-wrapper" ng-if="!ctrl.row.collapse">
-		<div ng-repeat="panel in ctrl.row.panels track by panel.id" class="panel" ui-draggable="!ctrl.dashboard.meta.fullscreen" drag="panel.id" ui-on-drop="ctrl.onDrop($data, panel)" drag-handle-class="drag-handle" panel-width ui-on-drag-enter="ctrl.onDragEnter($data)">
-			<plugin-component type="panel" class="panel-margin">
-			</plugin-component>
-		</div>
-
-		<div panel-drop-zone class="panel panel-drop-zone" ui-on-drop="ctrl.onDrop($data)" data-drop="true">
-			<div class="panel-container" style="background: transparent">
-				<div style="text-align: center">
-					<em>Drop here</em>
-				</div>
-			</div>
-		</div>
+  <div panel-drop-zone class="panel panel-drop-zone" ui-on-drop="ctrl.onDrop($data)" data-drop="true">
+    <div class="panel-container" style="background: transparent">
+      <div style="text-align: center">
+        <em>Drop here</em>
+      </div>
+    </div>
+  </div>
 
-		<div class="clearfix"></div>
-	</div>
+  <div class="clearfix"></div>
 </div>
 

public/app/features/dashboard/row/row.ts

@@ -7,6 +7,8 @@ import angular from 'angular';
 import config from 'app/core/config';
 import {coreModule, appEvents} from 'app/core/core';
 
+import './options';
+
 export class DashRowCtrl {
   dashboard: any;
   row: any;
@@ -47,11 +49,9 @@ export class DashRowCtrl {
     });
   }
 
-  editRow() {
-    // this.appEvent('show-dash-editor', {
-    //   src: 'public/app/partials/roweditor.html',
-    //   scope: this.$scope.$new()
-    // });
+  setHeight(height) {
+    this.row.height = height;
+    this.$scope.$broadcast('render');
   }
 
   addPanelDefault(type) {
@@ -86,6 +86,36 @@ export class DashRowCtrl {
       }
     });
   }
+
+  moveRow(direction) {
+    var rowsList = this.dashboard.rows;
+    var rowIndex = _.indexOf(rowsList, this.row);
+    var newIndex = rowIndex;
+    switch (direction) {
+      case 'up': {
+        newIndex = rowIndex - 1;
+        break;
+      }
+      case 'down': {
+        newIndex = rowIndex + 1;
+        break;
+      }
+      case 'top': {
+        newIndex = 0;
+        break;
+      }
+      case 'bottom': {
+        newIndex = rowsList.length - 1;
+        break;
+      }
+      default: {
+        newIndex = rowIndex;
+      }
+    }
+    if (newIndex >= 0 && newIndex <= (rowsList.length - 1)) {
+      _.move(rowsList, rowIndex, newIndex);
+    }
+  }
 }
 
 export function rowDirective($rootScope) {
@@ -122,7 +152,6 @@ coreModule.directive('dashRow', rowDirective);
 
 
 coreModule.directive('panelWidth', function($rootScope) {
-
   return function(scope, element) {
     var fullscreen = false;
 

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

@@ -1,4 +1,11 @@
 <div class="submenu-controls gf-form-query">
+
+  <div class="gf-form submenu-item" ng-if="ctrl.variables.length === 0">
+    <a class="gf-form-label" ng-click="ctrl.openEditView('templating')">
+      Add Templating
+    </a>
+  </div>
+
   <div ng-repeat="variable in ctrl.variables" ng-hide="variable.hide === 2" class="submenu-item gf-form-inline">
     <div class="gf-form">
       <label class="gf-form-label template-variable" ng-hide="variable.hide === 1">
@@ -9,6 +16,12 @@
     <ad-hoc-filters ng-if="variable.type === 'adhoc'" variable="variable"></ad-hoc-filters>
   </div>
 
+  <div class="gf-form submenu-item" ng-if="ctrl.dashboard.annotations.list.length === 0">
+    <a class="gf-form-label" ng-click="ctrl.openEditView('annotations')">
+      Add Annotations
+    </a>
+  </div>
+
   <div ng-if="ctrl.dashboard.annotations.list.length > 0">
     <div ng-repeat="annotation in ctrl.dashboard.annotations.list" class="submenu-item" ng-class="{'annotation-disabled': !annotation.enable}">
       <gf-form-switch class="gf-form" label="{{annotation.name}}" checked="annotation.enable" on-change="ctrl.annotationStateChanged()"></gf-form-switch>
@@ -22,5 +35,11 @@
     <dash-links-container links="ctrl.dashboard.links" class="gf-form-inline"></dash-links-container>
   </div>
 
+  <div class="gf-form" ng-if="ctrl.dashboard.editMode" ng-click="ctrl.exitBuildMode();">
+    <button class="btn btn-primary gf-form-btn">
+      Exit Build Mode
+    </button>
+  </div>
+
   <div class="clearfix"></div>
 </div>

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

@@ -31,6 +31,15 @@ export class SubmenuCtrl {
       this.$rootScope.$broadcast('refresh');
     });
   }
+
+  openEditView(editview) {
+    var search = _.extend(this.$location.search(), {editview: editview});
+    this.$location.search(search);
+  }
+
+  exitBuildMode() {
+    this.dashboard.toggleEditMode();
+  }
 }
 
 export function submenuDirective() {

public/app/features/dashlinks/module.js

@@ -171,7 +171,7 @@ function (angular, _) {
 
     $scope.addLink = function() {
       $scope.dashboard.links.push({ type: 'dashboards', icon: 'external link' });
-      $scope.updateSubmenuVisibility();
+      $scope.dashboard.updateSubmenuVisibility();
       $scope.updated();
     };
 
@@ -186,7 +186,7 @@ function (angular, _) {
 
     $scope.deleteLink = function(index) {
       $scope.dashboard.links.splice(index, 1);
-      $scope.updateSubmenuVisibility();
+      $scope.dashboard.updateSubmenuVisibility();
       $scope.updated();
     };
 

public/app/features/templating/editor_ctrl.ts

@@ -56,7 +56,7 @@ export class VariableEditorCtrl {
       if ($scope.isValid()) {
         $scope.variables.push($scope.current);
         $scope.update();
-        $scope.updateSubmenuVisibility();
+        $scope.dashboard.updateSubmenuVisibility();
       }
     };
 
@@ -110,7 +110,7 @@ export class VariableEditorCtrl {
       $scope.current = variableSrv.createVariableFromModel(clone);
       $scope.variables.push($scope.current);
       $scope.current.name = 'copy_of_'+variable.name;
-      $scope.updateSubmenuVisibility();
+      $scope.dashboard.updateSubmenuVisibility();
     };
 
     $scope.update = function() {

public/app/partials/dashboard.html

@@ -7,7 +7,7 @@
 		<dashboard-search></dashboard-search>
 		<div class="clearfix"></div>
 
-		<dashboard-submenu ng-if="submenuEnabled" dashboard="dashboard"></dashboard-submenu>
+		<dashboard-submenu ng-if="dashboard.meta.submenuEnabled" dashboard="dashboard"></dashboard-submenu>
 
 		<div class="clearfix"></div>
 

public/sass/pages/_dashboard.scss

@@ -202,32 +202,10 @@ div.flot-text {
 }
 
 //
-// Dashboard row header
+// Dashboard row
 //
 
 .dash-row {
-  display: flex;
-}
-
-.dash-row-handle-column {
-  min-width: 1.5rem;
-  background: $input-label-bg;
-  display: flex;
-  flex-direction: column;
-}
-
-.dash-row-move-handle {
-  background: url($btn-drag-image) no-repeat 50% 50%;
-  background-size: 8px;
-  flex-grow: 1;
-  cursor: move;
-}
-
-.dash-row-resize-handle {
-}
-
-.dash-row-content {
-  flex-grow: 1;
 }
 
 .dash-row-header {
@@ -244,10 +222,6 @@ div.flot-text {
   padding: 0.7rem;
 }
 
-.dash-row-header-settings {
-  display: block;
-}
-
 .dash-row-header-chevron {
   flex-grow: 100;
   text-align: right;
@@ -262,7 +236,6 @@ div.flot-text {
   }
 }
 
-
 .dash-edit-mode {
   .dash-row {
     margin-bottom: $spacer;
@@ -273,14 +246,24 @@ div.flot-text {
   }
 }
 
-.fa.fa-wrench-close:after {
-  content: "";
-  position: absolute;
-  width: .22rem;
-  height: 33.421356%;
-  top: 19px;
-  display: block;
-  background: #33B5E5;
-  left: 181px;
-  transform: translate(-50%, 0) rotate(-45deg);
+.dash-row-options {
+  background: $panel-bg;
+  margin: 0 $panel-margin*2 0 $panel-margin;
+  padding: $spacer*2;
+}
+
+.dash-row-options-close-btn {
+  float: right;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+  border: none;
+  padding: ($tabs-padding-top + $tabs-top-margin) $spacer $tabs-padding-bottom;
+  i {
+    font-size: 120%;
+  }
+  color: $text-color;
+  &:hover {
+    color: $white;
+  }
 }