Merge branch 'develop' into develop-settings

public/app/core/components/manage_dashboards/manage_dashboards.ts

@@ -134,12 +134,12 @@ export class ManageDashboardsCtrl {
     const selectedDashboards = this.getDashboardsToMove();
 
     const template = '<move-to-folder-modal dismiss="dismiss()" ' +
-      'dashboards="model.dashboards" after-save="model.afterSave()">' +
+      'dashboards="model.dashboards" from-folder-id="model.fromFolderId" after-save="model.afterSave()">' +
       '</move-to-folder-modal>`';
     appEvents.emit('show-modal', {
       templateHtml: template,
       modalClass: 'modal--narrow',
-      model: { dashboards: selectedDashboards, afterSave: this.getDashboards.bind(this) }
+      model: { dashboards: selectedDashboards, fromFolderId: this.folderId ? Number(this.folderId) : 0, afterSave: this.getDashboards.bind(this) }
     });
   }
 

public/app/features/dashboard/dashboardLoaderSrv.js

@@ -43,6 +43,13 @@ function (angular, moment, _, $, kbn, dateMath, impressionSrv) {
           });
       } else {
         promise = backendSrv.getDashboard($routeParams.type, $routeParams.slug)
+          .then(result => {
+            if (result.meta.isFolder) {
+              $rootScope.appEvent("alert-error", ['Dashboard not found']);
+              throw new Error("Dashboard not found");
+            }
+            return result;
+          })
           .catch(function() {
             return self._dashboardLoadFailed("Not found");
           });

public/app/features/dashboard/folder_picker/picker.ts

@@ -5,9 +5,10 @@ import _ from 'lodash';
 
 export class FolderPickerCtrl {
   initialTitle: string;
-  initialFolderId: number;
+  initialFolderId?: number;
   labelClass: string;
   onChange: any;
+  onLoad: any;
   rootName = 'Root';
   folder: any;
 
@@ -17,12 +18,19 @@ export class FolderPickerCtrl {
       this.labelClass = "width-7";
     }
 
-    if (this.initialFolderId > 0) {
+    if (this.initialFolderId && this.initialFolderId > 0) {
       this.getOptions('').then(result => {
         this.folder = _.find(result, {value: this.initialFolderId});
+        this.onFolderLoad();
       });
     } else {
+      if (this.initialTitle) {
         this.folder = {text: this.initialTitle, value: null};
+      } else {
+        this.folder = {text: this.rootName, value: 0};
+      }
+
+      this.onFolderLoad();
     }
   }
 
@@ -33,8 +41,12 @@ export class FolderPickerCtrl {
     };
 
     return this.backendSrv.search(params).then(result => {
-      if (query === "") {
+      if (query === '' ||
-        result.unshift({title: this.rootName, value: 0});
+          query.toLowerCase() === "r" ||
+          query.toLowerCase() === "ro" ||
+          query.toLowerCase() === "roo" ||
+          query.toLowerCase() === "root") {
+        result.unshift({title: this.rootName, id: 0});
       }
 
       return _.map(result, item => {
@@ -43,6 +55,12 @@ export class FolderPickerCtrl {
     });
   }
 
+  onFolderLoad() {
+    if (this.onLoad) {
+      this.onLoad({$folder: {id: this.folder.value, title: this.folder.text}});
+    }
+  }
+
   onFolderChange(option) {
     this.onChange({$folder: {id: option.value, title: option.text}});
   }
@@ -69,11 +87,12 @@ export function folderPicker() {
     bindToController: true,
     controllerAs: 'ctrl',
     scope: {
-      initialTitle: "<",
+      initialTitle: '<',
       initialFolderId: '<',
       labelClass: '@',
       rootName: '@',
-      onChange: '&'
+      onChange: '&',
+      onLoad: '&'
     }
   };
 }

public/app/features/dashboard/move_to_folder_modal/move_to_folder.html

@@ -15,7 +15,8 @@
 
     <div class="p-t-2">
       <div class="gf-form">
-          <folder-picker initial-title="Choose"
+          <folder-picker
+            on-load="ctrl.onFolderChange($folder)"
             on-change="ctrl.onFolderChange($folder)"
             label-class="width-7">
           </folder-picker>

public/app/features/dashboard/move_to_folder_modal/move_to_folder.ts

@@ -7,6 +7,7 @@ export class MoveToFolderCtrl {
   folder: any;
   dismiss: any;
   afterSave: any;
+  fromFolderId: number;
 
   /** @ngInject */
   constructor(private backendSrv, private $q) {}
@@ -16,10 +17,16 @@ export class MoveToFolderCtrl {
   }
 
   save() {
+    if (this.folder.id === this.fromFolderId) {
+      appEvents.emit('alert-error', ['Dashboard(s) already belong to this folder']);
+      return;
+    }
+
     const promises = [];
     for (let dash of this.dashboards) {
       const promise = this.backendSrv.get('/api/dashboards/' + dash).then(fullDash => {
         const model = new DashboardModel(fullDash.dashboard, fullDash.meta);
+
         model.folderId = this.folder.id;
         model.meta.folderId = this.folder.id;
         model.meta.folderTitle = this.folder.title;
@@ -53,6 +60,7 @@ export function moveToFolderModal() {
     scope: {
       dismiss: "&",
       dashboards: "=",
+      fromFolderId: '<',
       afterSave: "&"
     }
   };

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

@@ -33,6 +33,23 @@
 			<div class="gf-form-select-wrapper">
 				<select ng-model="ctrl.dashboard.timezone" class='gf-form-input' ng-options="f.value as f.text for f in [{value: '', text: 'Default'}, {value: 'browser', text: 'Local browser time'},{value: 'utc', text: 'UTC'}]" ng-change="timezoneChanged()"></select>
 			</div>
+      <div class="gf-form">
+				<label class="gf-form-label width-7">Description</label>
+				<input type="text" class="gf-form-input width-30" ng-model='ctrl.dashboard.description'></input>
+			</div>
+      <div class="gf-form">
+				<label class="gf-form-label width-7">
+          Tags
+          <info-popover mode="right-normal">Press enter to add a tag</info-popover>
+        </label>
+				<bootstrap-tagsinput ng-model="ctrl.dashboard.tags" tagclass="label label-tag" placeholder="add tags">
+				</bootstrap-tagsinput>
+			</div>
+      <folder-picker ng-if="!ctrl.dashboard.meta.isFolder"
+                     initial-folder-id="ctrl.dashboard.folderId"
+										 on-change="ctrl.onFolderChange($folder)"
+										 label-class="width-7">
+			</folder-picker>
 		</div>
 		<gf-form-switch class="gf-form" label="Editable" tooltip="Uncheck, then save and reload to disable all dashboard editing" checked="ctrl.dashboard.editable" label-class="width-11">
 		</gf-form-switch>

public/app/features/dashboard/save_as_modal.ts

@@ -22,7 +22,7 @@ const  template = `
 				<input type="text" class="gf-form-input" ng-model="ctrl.clone.title" give-focus="true" required>
 			</div>
       <div class="gf-form">
-        <folder-picker initial-title="ctrl.folderTitle"
+        <folder-picker initial-folder-id="ctrl.folderId"
                        on-change="ctrl.onFolderChange($folder)"
                        label-class="width-7">
         </folder-picker>
@@ -39,7 +39,7 @@ const  template = `
 
 export class SaveDashboardAsModalCtrl {
   clone: any;
-  folderTitle: any;
+  folderId: any;
   dismiss: () => void;
 
   /** @ngInject */
@@ -50,7 +50,7 @@ export class SaveDashboardAsModalCtrl {
     this.clone.title += ' Copy';
     this.clone.editable = true;
     this.clone.hideControls = false;
-    this.folderTitle = dashboard.meta.folderTitle || 'Root';
+    this.folderId = dashboard.folderId;
 
     // remove alerts if source dashboard is already persisted
     // do not want to create alert dupes

public/app/features/dashboard/view_state_srv.ts

@@ -75,7 +75,7 @@ export class DashboardViewState {
     }
 
     // remember if editStateChanged
-    this.editStateChanged = state.edit !== this.state.edit;
+    this.editStateChanged = (state.edit || false) !== (this.state.edit || false);
 
     _.extend(this.state, state);
     this.dashboard.meta.fullscreen = this.state.fullscreen;

public/app/features/panel/panel_ctrl.ts

@@ -52,12 +52,9 @@ export class PanelCtrl {
       this.events.emit('panel-teardown');
       this.events.removeAllListeners();
     });
-
-    this.calculatePanelHeight();
   }
 
   init() {
-    this.events.on('panel-size-changed', this.onSizeChanged.bind(this));
     this.events.emit('panel-initialized');
     this.publishAppEvent('panel-initialized', {scope: this.$scope});
   }
@@ -184,13 +181,6 @@ export class PanelCtrl {
     this.events.emit('render', payload);
   }
 
-  private onSizeChanged() {
-    this.calculatePanelHeight();
-    this.$timeout(() => {
-      this.render();
-    }, 100);
-  }
-
   duplicate() {
     this.dashboard.duplicatePanel(this.panel);
     this.$timeout(() => {

public/app/features/panel/panel_directive.ts

@@ -53,7 +53,7 @@ var panelTemplate = `
   </div>
 `;
 
-module.directive('grafanaPanel', function($rootScope, $document) {
+module.directive('grafanaPanel', function($rootScope, $document, $timeout) {
   return {
     restrict: 'E',
     template: panelTemplate,
@@ -73,7 +73,6 @@ module.directive('grafanaPanel', function($rootScope, $document) {
       var lastHasAlertRule = false;
       var lastAlertState;
       var hasAlertRule;
-      var lastHeight = 0;
 
       function mouseEnter() {
         panelContainer.toggleClass('panel-hover-highlight', true);
@@ -90,7 +89,6 @@ module.directive('grafanaPanel', function($rootScope, $document) {
         if (panelScrollbar) {
           panelScrollbar.update();
         }
-        lastHeight = ctrl.height;
       }
 
       // set initial transparency
@@ -106,11 +104,19 @@ module.directive('grafanaPanel', function($rootScope, $document) {
         }
       });
 
-      ctrl.events.on('render', () => {
+      ctrl.events.on('panel-size-changed', () => {
-        if (lastHeight !== ctrl.height) {
+        ctrl.calculatePanelHeight();
         panelHeightUpdated();
-        }
+        $timeout(() => {
+          ctrl.render();
+        });
+      });
 
+      // set initial height
+      ctrl.calculatePanelHeight();
+      panelHeightUpdated();
+
+      ctrl.events.on('render', () => {
         if (transparentLastState !== ctrl.panel.transparent) {
           panelContainer.toggleClass('panel-transparent', ctrl.panel.transparent === true);
           transparentLastState = ctrl.panel.transparent;

public/app/features/panel/panel_header.ts

@@ -84,7 +84,6 @@ function panelHeader($compile) {
     restrict: 'E',
     template: template,
     link: function(scope, elem, attrs) {
-
       let menuElem = elem.find('.panel-menu');
       let menuScope;
       let isDragged;

public/app/plugins/panel/permissionlist/editor.html

@@ -2,8 +2,7 @@
   <div class="section gf-form-group">
     <h5 class="section-heading">Options</h5>
     <div class="gf-form">
-      <folder-picker  root-name="All"
+      <folder-picker  initial-folder-id="ctrl.panel.folderId"
-                      initial-folder-id="ctrl.panel.folderId"
 											on-change="ctrl.onFolderChange($folder)"
 											label-class="width-6">
 			</folder-picker>

public/sass/_variables.dark.scss

@@ -21,7 +21,10 @@ $gray-4:           #D8D9DA;
 $gray-5:           #ECECEC;
 $gray-6:           #f4f5f8;
 $gray-7:           #fbfbfb;
-$gray-blue:				 #292a2d;
+
+// $gray-blue:				 #292a2d;
+$gray-blue:        #212327;
+$input-black:      #09090B;
 
 $white:            #fff;
 
@@ -175,7 +178,7 @@ $btn-drag-image: '../img/grab_dark.svg';
 
 // Forms
 // -------------------------
-$input-bg:                       $black;
+$input-bg:                       $input-black;
 $input-bg-disabled:              $dark-3;
 
 $input-color:                    $gray-4;
@@ -185,7 +188,7 @@ $input-border-focus:             $input-border-color !default;
 $input-box-shadow-focus:         rgba(102,175,233,.6) !default;
 $input-color-placeholder:        $gray-1 !default;
 $input-label-bg:				         $gray-blue;
-$input-label-border-color:       $gray-blue;
+$input-label-border-color:       $dark-3;
 $input-invalid-border-color:     lighten($red, 5%);
 
 // Search

public/sass/_variables.scss

@@ -89,9 +89,9 @@ $font-size-root: 14px !default;
 $font-size-base: 13px !default;
 
 $font-size-lg:   18px !default;
-$font-size-md:   15px !default;
+$font-size-md:   14px !default;
-$font-size-sm:   11px !default;
+$font-size-sm:   12px !default;
-$font-size-xs:   9px !default;
+$font-size-xs:   10px !default;
 
 $line-height-base: 1.5 !default;
 $font-weight-semi-bold: 500;
@@ -135,9 +135,9 @@ $list-inline-padding: 5px !default;
 $line-height-lg:         (4 / 3) !default;
 $line-height-sm:         1.5 !default;
 
-$border-radius:          0.2rem !default;
+$border-radius:          3px !default;
-$border-radius-lg:       0.3rem !default;
+$border-radius-lg:       5px !default;
-$border-radius-sm:       0.1rem !default;
+$border-radius-sm:       2px!default;
 
 $caret-width:            .3em !default;
 $caret-width-lg:         $caret-width !default;
@@ -162,7 +162,7 @@ $table-sm-cell-padding:         .3rem !default;
 // Forms
 $input-padding-x:                10px !default;
 $input-padding-y:                8px !default;
-$input-line-height:              19px !default;
+$input-line-height:              18px !default;
 
 $input-btn-border-width:         1px;
 $input-border-radius:            0 $border-radius $border-radius 0 !default;
@@ -203,9 +203,7 @@ $zindex-tooltip:           1030;
 $zindex-modal-backdrop:    1040;
 $zindex-modal:             1050;
 $zindex-typeahead:         1060;
-$zindex-sidemenu : $zindex-navbar-fixed + 5;
+$zindex-sidemenu:          $zindex-navbar-fixed;
-
-
 
 // Buttons
 //

public/sass/components/_gf-form.scss

@@ -64,7 +64,6 @@ $input-border: 1px solid $input-border-color;
 
 .gf-form-label {
   padding: $input-padding-y $input-padding-x;
-  margin-right: $gf-form-margin;
   flex-shrink: 0;
   font-weight: $font-weight-semi-bold;
 
@@ -72,8 +71,8 @@ $input-border: 1px solid $input-border-color;
   display: block;
 
   border: $input-btn-border-width solid $input-label-border-color;
-  @include border-radius($label-border-radius-sm);
+  border-right: none;
-
+  border-radius: $label-border-radius;
 
   &--grow {
     flex-grow: 1;
@@ -91,6 +90,7 @@ $input-border: 1px solid $input-border-color;
   margin: 0;
   margin-right: $gf-form-margin;
   border: $input-btn-border-width solid transparent;
+  border-left: none;
   @include border-radius($label-border-radius-sm);
 }
 
@@ -116,14 +116,14 @@ $input-border: 1px solid $input-border-color;
   width: 100%;
   padding: $input-padding-y $input-padding-x;
   margin-right: $gf-form-margin;
-  font-size: $font-size-base;
+  font-size: $font-size-md;
   line-height: $input-line-height;
   color: $input-color;
   background-color: $input-bg;
   background-image: none;
   background-clip: padding-box;
   border: $input-border;
-  @include border-radius($input-border-radius-sm);
+  border-radius: $input-border-radius;
   @include box-shadow($input-box-shadow);
   white-space: nowrap;
   overflow: hidden;
@@ -276,6 +276,7 @@ $input-border: 1px solid $input-border-color;
   background-color: $input-bg;
   padding-right: $input-padding-x;
   border: $input-border;
+  border-radius: $input-border-radius;
 
   &::after {
     position: absolute;

public/sass/components/_switch.scss

@@ -1,7 +1,3 @@
-$switch-border-radius: 1rem;
-$switch-width: 3.5rem;
-$switch-height: 1.5rem;
-
 /* ============================================================
   SWITCH 3 - YES NO
 ============================================================ */
@@ -27,8 +23,10 @@ $switch-height: 1.5rem;
     outline: none;
     user-select: none;
     width: 100%;
-    height: 2.65rem;
+    height: 37px;
-    background-color: $page-bg;
+    background: $input-bg;
+    border: 1px solid $input-border-color;
+    border-left: none;
   }
 
   input + label::before, input + label::after {
@@ -47,6 +45,7 @@ $switch-height: 1.5rem;
     display: flex;
     flex-direction: column;
     justify-content: center;
+    border-radius: $input-border-radius;
   }
 
   &:hover {