Drop here
diff --git a/public/app/features/dashboard/row/row.ts b/public/app/features/dashboard/row/row.ts
index fe9ade5892a..6e966c2e8f9 100644
--- a/public/app/features/dashboard/row/row.ts
+++ b/public/app/features/dashboard/row/row.ts
@@ -1,21 +1,83 @@
///
import _ from 'lodash';
-import coreModule from 'app/core/core_module';
+import config from 'app/core/config';
+import {coreModule, appEvents} from 'app/core/core';
export class DashRowCtrl {
- showTitle: boolean;
+ dashboard: any;
+ row: any;
+ panelPlugins;
/** @ngInject */
constructor(private $scope, private $rootScope) {
- this.showTitle = true;
- this.-
+ this.panelPlugins = config.panels;
}
+ onDrop(panelId, dropTarget) {
+ var info = this.dashboard.getPanelInfoById(panelId);
+ if (dropTarget) {
+ var dropInfo = this.dashboard.getPanelInfoById(dropTarget.id);
+ dropInfo.row.panels[dropInfo.index] = info.panel;
+ info.row.panels[info.index] = dropTarget;
+ var dragSpan = info.panel.span;
+ info.panel.span = dropTarget.span;
+ dropTarget.span = dragSpan;
+ } else {
+ info.row.panels.splice(info.index, 1);
+ info.panel.span = 12 - this.dashboard.rowSpan(this.row);
+ this.row.panels.push(info.panel);
+ }
+
+ this.$rootScope.$broadcast('render');
+ }
+
+ addPanel(panel) {
+ this.dashboard.addPanel(panel, this.row);
+ }
+
+ editRow() {
+ // this.appEvent('show-dash-editor', {
+ // src: 'public/app/partials/roweditor.html',
+ // scope: this.$scope.$new()
+ // });
+ }
+
+ addPanelDefault(type) {
+ var defaultSpan = 12;
+ var _as = 12 - this.dashboard.rowSpan(this.row);
+
+ var panel = {
+ title: config.new_panel_title,
+ error: false,
+ span: _as < defaultSpan && _as > 0 ? _as : defaultSpan,
+ editable: true,
+ type: type,
+ isNew: true,
+ };
+
+ this.addPanel(panel);
+ }
+
+ deleteRow() {
+ if (!this.row.panels.length) {
+ this.dashboard.rows = _.without(this.dashboard.rows, this.row);
+ return;
+ }
+
+ appEvents.emit('confirm-modal', {
+ title: 'Delete',
+ text: 'Are you sure you want to delete this row?',
+ icon: 'fa-trash',
+ yesText: 'Delete',
+ onConfirm: () => {
+ this.dashboard.rows = _.without(this.dashboard.rows, this.row);
+ }
+ });
+ }
}
-
-export function rowDirective() {
+export function rowDirective($rootScope) {
return {
restrict: 'E',
templateUrl: 'public/app/features/dashboard/row/row.html',
@@ -25,6 +87,22 @@ export function rowDirective() {
scope: {
dashboard: "=",
row: "=",
+ },
+ link: function(scope, element) {
+ scope.$watchGroup(['ctrl.row.collapse', 'ctrl.row.height'], function() {
+ element.css({minHeight: scope.ctrl.row.collapse ? '5px' : scope.ctrl.row.height});
+ });
+
+ $rootScope.onAppEvent('panel-fullscreen-enter', function(evt, info) {
+ var hasPanel = _.find(scope.ctrl.row.panels, {id: info.panelId});
+ if (!hasPanel) {
+ element.hide();
+ }
+ }, scope);
+
+ $rootScope.onAppEvent('panel-fullscreen-exit', function() {
+ element.show();
+ }, scope);
}
};
}
@@ -63,7 +141,7 @@ coreModule.directive('panelWidth', function($rootScope) {
updateWidth();
}, scope);
- scope.$watch('ctrl.panel.span', updateWidth);
+ scope.$watch('panel.span', updateWidth);
if (fullscreen) {
element.hide();
@@ -71,3 +149,23 @@ coreModule.directive('panelWidth', function($rootScope) {
};
});
+
+coreModule.directive('panelDropZone', function($timeout) {
+ return function(scope, element) {
+ scope.$on("ANGULAR_DRAG_START", function() {
+ $timeout(function() {
+ var dropZoneSpan = 12 - scope.ctrl.dashboard.rowSpan(scope.ctrl.row);
+
+ if (dropZoneSpan > 0) {
+ element.find('.panel-container').css('height', scope.ctrl.row.height);
+ element[0].style.width = ((dropZoneSpan / 1.2) * 10) + '%';
+ element.show();
+ }
+ });
+ });
+
+ scope.$on("ANGULAR_DRAG_END", function() {
+ element.hide();
+ });
+ };
+});
diff --git a/public/app/features/dashboard/rowCtrl.js b/public/app/features/dashboard/rowCtrl.js
index e96e7e568bd..e5f063d5f63 100644
--- a/public/app/features/dashboard/rowCtrl.js
+++ b/public/app/features/dashboard/rowCtrl.js
@@ -1,167 +1,51 @@
-define([
- 'angular',
- 'lodash',
- 'app/core/config'
-],
-function (angular, _, config) {
- 'use strict';
-
- var module = angular.module('grafana.controllers');
-
- module.controller('RowCtrl', function($scope, $rootScope, $timeout) {
- var _d = {
- title: "Row",
- height: "150px",
- collapse: false,
- editable: true,
- panels: [],
- };
-
- _.defaults($scope.row,_d);
-
- $scope.init = function() {
- $scope.editor = {index: 0};
- };
-
- $scope.togglePanelMenu = function(posX) {
- $scope.showPanelMenu = !$scope.showPanelMenu;
- $scope.panelMenuPos = posX;
- };
-
- $scope.toggleRow = function(row) {
- row.collapse = row.collapse ? false : true;
- };
-
- $scope.settingsHover = function(row) {
- // Shows/hides the settings button on hover
- return row.hoverSettings = ! row.hoverSettings;
- };
-
- $scope.addPanel = function(panel) {
- $scope.dashboard.addPanel(panel, $scope.row);
- };
-
- $scope.deleteRow = function() {
- function delete_row() {
- $scope.dashboard.rows = _.without($scope.dashboard.rows, $scope.row);
- }
-
- if (!$scope.row.panels.length) {
- delete_row();
- return;
- }
-
- $scope.appEvent('confirm-modal', {
- title: 'Delete',
- text: 'Are you sure you want to delete this row?',
- icon: 'fa-trash',
- yesText: 'Delete',
- onConfirm: function() {
- delete_row();
- }
- });
- };
-
- $scope.editRow = function() {
- $scope.appEvent('show-dash-editor', {
- src: 'public/app/partials/roweditor.html',
- scope: $scope.$new()
- });
- };
-
- $scope.moveRow = function(direction) {
- var rowsList = $scope.dashboard.rows;
- var rowIndex = _.indexOf(rowsList, $scope.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);
- }
- };
-
- $scope.addPanelDefault = function(type) {
- var defaultSpan = 12;
- var _as = 12 - $scope.dashboard.rowSpan($scope.row);
-
- var panel = {
- title: config.new_panel_title,
- error: false,
- span: _as < defaultSpan && _as > 0 ? _as : defaultSpan,
- editable: true,
- type: type,
- isNew: true,
- };
-
- $scope.addPanel(panel);
-
- $timeout(function() {
- $scope.dashboardViewState.update({fullscreen: true, edit: true, panelId: panel.id });
- });
- };
-
- $scope.setHeight = function(height) {
- $scope.row.height = height;
- $scope.$broadcast('render');
- };
-
- $scope.init();
- });
-
- module.directive('rowHeight', function() {
- return function(scope, element) {
- scope.$watchGroup(['row.collapse', 'row.height'], function() {
- element.css({ minHeight: scope.row.collapse ? '5px' : scope.row.height });
- });
-
- scope.onAppEvent('panel-fullscreen-enter', function(evt, info) {
- var hasPanel = _.find(scope.row.panels, {id: info.panelId});
- if (!hasPanel) {
- element.hide();
- }
- });
-
- scope.onAppEvent('panel-fullscreen-exit', function() {
- element.show();
- });
- };
- });
-
- module.directive('panelDropZone', function() {
- return function(scope, element) {
- scope.$on("ANGULAR_DRAG_START", function() {
- var dropZoneSpan = 12 - scope.dashboard.rowSpan(scope.row);
-
- if (dropZoneSpan > 0) {
- element.find('.panel-container').css('height', scope.row.height);
- element[0].style.width = ((dropZoneSpan / 1.2) * 10) + '%';
- element.show();
- }
- });
-
- scope.$on("ANGULAR_DRAG_END", function() {
- element.hide();
- });
- };
- });
-
-});
+// define([
+// 'angular',
+// 'lodash',
+// 'app/core/config'
+// ],
+// function (angular, _, config) {
+// 'use strict';
+//
+// var module = angular.module('grafana.controllers');
+//
+// module.controller('RowCtrl', function($scope, $rootScope, $timeout) {
+//
+// $scope.moveRow = function(direction) {
+// var rowsList = $scope.dashboard.rows;
+// var rowIndex = _.indexOf(rowsList, $scope.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);
+// }
+// };
+//
+// $scope.setHeight = function(height) {
+// $scope.row.height = height;
+// $scope.$broadcast('render');
+// };
+//
+// $scope.init();
+// });
+//
+// });
diff --git a/public/app/features/dashboard/viewStateSrv.js b/public/app/features/dashboard/viewStateSrv.js
index d1dee7a2d5f..0645114ebf2 100644
--- a/public/app/features/dashboard/viewStateSrv.js
+++ b/public/app/features/dashboard/viewStateSrv.js
@@ -149,6 +149,7 @@ function (angular, _, $) {
ctrl.editMode = false;
ctrl.fullscreen = false;
+ ctrl.dashboard.editMode = this.oldDashboardEditMode;
this.$scope.appEvent('panel-fullscreen-exit', {panelId: ctrl.panel.id});
@@ -170,8 +171,10 @@ function (angular, _, $) {
ctrl.editMode = this.state.edit && this.dashboard.meta.canEdit;
ctrl.fullscreen = true;
+ this.oldDashboardEditMode = this.dashboard.editMode;
this.oldTimeRange = ctrl.range;
this.fullscreenPanel = panelScope;
+ this.dashboard.editMode = false;
$(window).scrollTop(0);
diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts
index 6a3e49b8455..9d7349e7dbc 100755
--- a/public/app/plugins/panel/graph/graph.ts
+++ b/public/app/plugins/panel/graph/graph.ts
@@ -384,7 +384,6 @@ module.directive('grafanaGraph', function($rootScope, timeSrv) {
if (!annotations || annotations.length === 0) {
return;
}
- console.log(annotations);
var types = {};
types['$__alerting'] = {
diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss
index e96328cb64d..e4f8c642a4b 100644
--- a/public/sass/_variables.scss
+++ b/public/sass/_variables.scss
@@ -80,7 +80,7 @@ $enable-flex: false;
// Typography
// -------------------------
-$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-sans-serif: "Open Sans", Helvetica, Arial, sans-serif;
$font-family-serif: Georgia, "Times New Roman", Times, serif;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
$font-family-base: $font-family-sans-serif !default;
diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss
index b7a6cd8153e..273aa2c0bfd 100644
--- a/public/sass/pages/_dashboard.scss
+++ b/public/sass/pages/_dashboard.scss
@@ -211,7 +211,7 @@ div.flot-text {
.dash-row-handle-column {
width: 2rem;
- background: $page-bg;
+ background: $input-label-bg;
display: flex;
flex-direction: column;
}
@@ -235,7 +235,7 @@ div.flot-text {
flex-direction: row;
text-align: left;
align-items: center;
- background: $page-bg;
+ background: $input-label-bg;
margin-right: $panel-margin;
}
diff --git a/public/vendor/angular-native-dragdrop/draganddrop.js b/public/vendor/angular-native-dragdrop/draganddrop.js
index af8acac934b..f1866c8374b 100755
--- a/public/vendor/angular-native-dragdrop/draganddrop.js
+++ b/public/vendor/angular-native-dragdrop/draganddrop.js
@@ -290,12 +290,12 @@
sendData = angular.fromJson(sendData);
var dropOffset = calculateDropOffset(e);
-
+
var position = dropOffset ? {
x: dropOffset.x - sendData.offset.x,
y: dropOffset.y - sendData.offset.y
} : null;
-
+
determineEffectAllowed(e);
var uiOnDropFn = $parse(attr.uiOnDrop);
@@ -305,7 +305,7 @@
element.removeClass(dragEnterClass);
dragging = 0;
}
-
+
function isDragChannelAccepted(dragChannel, dropChannel) {
if (dropChannel === '*') {
return true;