mirror of https://github.com/grafana/grafana
Torkel Ödegaard
9 years ago
parent
57cbefdf0a
commit
4d420a0c33
@ -0,0 +1,10 @@ |
||||
export function assignModelProperties(target, source, defaults) { |
||||
for (var key in defaults) { |
||||
if (!defaults.hasOwnProperty(key)) { |
||||
continue; |
||||
} |
||||
|
||||
target[key] = source[key] === undefined ? defaults[key] : source[key]; |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,231 @@ |
||||
///<reference path="../../../headers/common.d.ts" />
|
||||
|
||||
import _ from 'lodash'; |
||||
import $ from 'jquery'; |
||||
import angular from 'angular'; |
||||
|
||||
import config from 'app/core/config'; |
||||
import {coreModule} from 'app/core/core'; |
||||
|
||||
import './options'; |
||||
import './add_panel'; |
||||
|
||||
export class DashRowCtrl { |
||||
dashboard: any; |
||||
row: any; |
||||
dropView: number; |
||||
|
||||
/** @ngInject */ |
||||
constructor(private $scope, private $rootScope, private $timeout, private uiSegmentSrv, private $q) { |
||||
this.row.title = this.row.title || 'Row title'; |
||||
|
||||
if (this.dashboard.meta.isNew) { |
||||
this.dropView = 1; |
||||
delete this.row.isNew; |
||||
} |
||||
} |
||||
|
||||
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'); |
||||
} |
||||
|
||||
setHeight(height) { |
||||
this.row.height = height; |
||||
this.$scope.$broadcast('render'); |
||||
} |
||||
|
||||
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); |
||||
} |
||||
} |
||||
|
||||
toggleCollapse() { |
||||
this.dropView = 0; |
||||
this.row.collapse = !this.row.collapse; |
||||
} |
||||
|
||||
showAddPanel() { |
||||
this.row.collapse = false; |
||||
this.dropView = this.dropView === 1 ? 0 : 1; |
||||
} |
||||
|
||||
showRowOptions() { |
||||
this.dropView = this.dropView === 2 ? 0 : 2; |
||||
} |
||||
} |
||||
|
||||
export function rowDirective($rootScope) { |
||||
return { |
||||
restrict: 'E', |
||||
templateUrl: 'public/app/features/dashboard/row/row.html', |
||||
controller: DashRowCtrl, |
||||
bindToController: true, |
||||
controllerAs: 'ctrl', |
||||
scope: { |
||||
dashboard: "=", |
||||
row: "=", |
||||
}, |
||||
link: function(scope, element) { |
||||
scope.$watchGroup(['ctrl.row.collapse', 'ctrl.row.height'], function() { |
||||
element.find('.panels-wrapper').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); |
||||
} |
||||
}; |
||||
} |
||||
|
||||
coreModule.directive('dashRow', rowDirective); |
||||
|
||||
|
||||
coreModule.directive('panelWidth', function($rootScope) { |
||||
return function(scope, element) { |
||||
var fullscreen = false; |
||||
|
||||
function updateWidth() { |
||||
if (!fullscreen) { |
||||
element[0].style.width = ((scope.panel.span / 1.2) * 10) + '%'; |
||||
} |
||||
} |
||||
|
||||
$rootScope.onAppEvent('panel-fullscreen-enter', function(evt, info) { |
||||
fullscreen = true; |
||||
|
||||
if (scope.panel.id !== info.panelId) { |
||||
element.hide(); |
||||
} else { |
||||
element[0].style.width = '100%'; |
||||
} |
||||
}, scope); |
||||
|
||||
$rootScope.onAppEvent('panel-fullscreen-exit', function(evt, info) { |
||||
fullscreen = false; |
||||
|
||||
if (scope.panel.id !== info.panelId) { |
||||
element.show(); |
||||
} |
||||
|
||||
updateWidth(); |
||||
}, scope); |
||||
|
||||
scope.$watch('panel.span', updateWidth); |
||||
|
||||
if (fullscreen) { |
||||
element.hide(); |
||||
} |
||||
}; |
||||
}); |
||||
|
||||
|
||||
coreModule.directive('panelDropZone', function($timeout) { |
||||
return function(scope, element) { |
||||
var row = scope.ctrl.row; |
||||
var indrag = false; |
||||
var textEl = element.find('.panel-drop-zone-text'); |
||||
|
||||
function showPanel(span, text) { |
||||
element.find('.panel-container').css('height', row.height); |
||||
element[0].style.width = ((span / 1.2) * 10) + '%'; |
||||
textEl.text(text); |
||||
element.show(); |
||||
} |
||||
|
||||
function hidePanel() { |
||||
element.hide(); |
||||
// element.removeClass('panel-drop-zone--empty');
|
||||
} |
||||
|
||||
function updateState() { |
||||
if (scope.ctrl.dashboard.editMode) { |
||||
if (row.panels.length === 0 && indrag === false) { |
||||
return showPanel(12, 'Empty Space'); |
||||
} |
||||
|
||||
var dropZoneSpan = 12 - scope.ctrl.dashboard.rowSpan(scope.ctrl.row); |
||||
if (dropZoneSpan > 1) { |
||||
if (indrag) { |
||||
return showPanel(dropZoneSpan, 'Drop Here'); |
||||
} else { |
||||
return showPanel(dropZoneSpan, 'Empty Space'); |
||||
} |
||||
} |
||||
} |
||||
|
||||
if (indrag === true) { |
||||
return showPanel(dropZoneSpan, 'Drop Here'); |
||||
} |
||||
|
||||
hidePanel(); |
||||
} |
||||
|
||||
scope.row.events.on('panel-added', updateState); |
||||
scope.row.events.on('span-changed', updateState); |
||||
|
||||
scope.$watchGroup(['ctrl.row.panels.length', 'ctrl.dashboard.editMode', 'ctrl.row.span'], updateState); |
||||
|
||||
scope.$on("ANGULAR_DRAG_START", function() { |
||||
indrag = true; |
||||
updateState(); |
||||
// $timeout(function() {
|
||||
// var dropZoneSpan = 12 - scope.ctrl.dashboard.rowSpan(scope.ctrl.row);
|
||||
// if (dropZoneSpan > 0) {
|
||||
// showPanel(dropZoneSpan, 'Panel Drop Zone');
|
||||
// }
|
||||
// });
|
||||
}); |
||||
|
||||
scope.$on("ANGULAR_DRAG_END", function() { |
||||
indrag = false; |
||||
updateState(); |
||||
}); |
||||
}; |
||||
}); |
||||
|
||||
@ -0,0 +1,32 @@ |
||||
///<reference path="../../../headers/common.d.ts" />
|
||||
|
||||
import {Emitter, contextSrv} from 'app/core/core'; |
||||
import {assignModelProperties} from 'app/core/core'; |
||||
|
||||
export class DashboardRow { |
||||
panels: any; |
||||
title: any; |
||||
showTitle: any; |
||||
titleSize: any; |
||||
events: Emitter; |
||||
|
||||
defaults = { |
||||
title: 'Dashboard Row', |
||||
panels: [], |
||||
showTitle: false, |
||||
titleSize: 'h6', |
||||
height: 250, |
||||
isNew: false, |
||||
}; |
||||
|
||||
constructor(private model) { |
||||
assignModelProperties(this, model, this.defaults); |
||||
this.events = new Emitter(); |
||||
} |
||||
|
||||
getSaveModel() { |
||||
assignModelProperties(this.model, this, this.defaults); |
||||
return this.model; |
||||
} |
||||
} |
||||
|
||||
Loading…
Reference in new issue