mirror of https://github.com/grafana/grafana
Torkel Ödegaard
9 years ago
parent
48a54edd85
commit
786afda4c3
@ -0,0 +1,34 @@ |
|||||||
|
///<reference path="../../../headers/common.d.ts" />
|
||||||
|
|
||||||
|
import {coreModule} from 'app/core/core'; |
||||||
|
|
||||||
|
var template = ` |
||||||
|
<div class="gf-form-select-wrapper max-width-13"> |
||||||
|
<select class="gf-form-input" ng-model="model.repeat" ng-options="f.value as f.text for f in variables"> |
||||||
|
<option value=""></option> |
||||||
|
</div> |
||||||
|
`;
|
||||||
|
|
||||||
|
coreModule.directive('dashRepeatOption', function(variableSrv) { |
||||||
|
return { |
||||||
|
restrict: 'E', |
||||||
|
template: template, |
||||||
|
scope: { |
||||||
|
model: "=", |
||||||
|
}, |
||||||
|
link: function(scope, element) { |
||||||
|
element.css({display: 'block', width: '100%'}); |
||||||
|
|
||||||
|
scope.variables = variableSrv.variables.map(item => { |
||||||
|
return {text: item.name, value: item.name}; |
||||||
|
}); |
||||||
|
|
||||||
|
if (scope.variables.length === 0) { |
||||||
|
scope.variables.unshift({text: 'No template variables found', value: null}); |
||||||
|
} |
||||||
|
|
||||||
|
scope.variables.unshift({text: 'Disabled', value: null}); |
||||||
|
} |
||||||
|
}; |
||||||
|
}); |
||||||
|
|
||||||
@ -1,267 +0,0 @@ |
|||||||
///<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.row.isNew) { |
|
||||||
this.dropView = 1; |
|
||||||
delete this.row.isNew; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
onDrop(panelId, dropTarget) { |
|
||||||
var dragObject; |
|
||||||
|
|
||||||
// if string it's a panel type
|
|
||||||
if (_.isString(panelId)) { |
|
||||||
// setup new panel
|
|
||||||
dragObject = { |
|
||||||
row: this.row, |
|
||||||
panel: { |
|
||||||
title: config.new_panel_title, |
|
||||||
type: panelId, |
|
||||||
id: this.dashboard.getNextPanelId(), |
|
||||||
}, |
|
||||||
isNew: true, |
|
||||||
}; |
|
||||||
} else { |
|
||||||
dragObject = this.dashboard.getPanelInfoById(panelId); |
|
||||||
} |
|
||||||
|
|
||||||
if (dropTarget) { |
|
||||||
dropTarget = this.dashboard.getPanelInfoById(dropTarget.id); |
|
||||||
// if draging new panel onto existing panel split it
|
|
||||||
if (dragObject.isNew) { |
|
||||||
dragObject.panel.span = dropTarget.panel.span = dropTarget.panel.span/2; |
|
||||||
// insert after
|
|
||||||
dropTarget.row.panels.splice(dropTarget.index+1, 0, dragObject.panel); |
|
||||||
} else if (this.row === dragObject.row) { |
|
||||||
// just move element
|
|
||||||
this.row.movePanel(dropTarget.index, dragObject.index); |
|
||||||
} else { |
|
||||||
// split drop target space
|
|
||||||
dragObject.panel.span = dropTarget.panel.span = dropTarget.panel.span/2; |
|
||||||
// insert after
|
|
||||||
dropTarget.row.panels.splice(dropTarget.index+1, 0, dragObject.panel); |
|
||||||
// remove from source row
|
|
||||||
dragObject.row.removePanel(dragObject.panel); |
|
||||||
} |
|
||||||
// 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 { |
|
||||||
dragObject.panel.span = 12 - this.row.span; |
|
||||||
this.row.panels.push(dragObject.panel); |
|
||||||
|
|
||||||
// if not new remove from source row
|
|
||||||
if (!dragObject.isNew) { |
|
||||||
dragObject.row.removePanel(dragObject.panel); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
this.row.panelSpanChanged(); |
|
||||||
this.$timeout(() => { |
|
||||||
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 > 0) { |
|
||||||
if (indrag) { |
|
||||||
return showPanel(dropZoneSpan, 'Drop Here'); |
|
||||||
} else { |
|
||||||
return showPanel(dropZoneSpan, 'Empty Space'); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
if (indrag === true) { |
|
||||||
var dropZoneSpan = 12 - scope.ctrl.dashboard.rowSpan(scope.ctrl.row); |
|
||||||
if (dropZoneSpan > 1) { |
|
||||||
return showPanel(dropZoneSpan, 'Drop Here'); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
hidePanel(); |
|
||||||
} |
|
||||||
|
|
||||||
row.events.on('span-changed', updateState, scope); |
|
||||||
|
|
||||||
scope.$watchGroup(['ctrl.dashboard.editMode'], updateState); |
|
||||||
|
|
||||||
scope.$on("ANGULAR_DRAG_START", function() { |
|
||||||
indrag = true; |
|
||||||
updateState(); |
|
||||||
}); |
|
||||||
|
|
||||||
scope.$on("ANGULAR_DRAG_END", function() { |
|
||||||
indrag = false; |
|
||||||
updateState(); |
|
||||||
}); |
|
||||||
}; |
|
||||||
}); |
|
||||||
|
|
||||||
@ -1,51 +0,0 @@ |
|||||||
// 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();
|
|
||||||
// });
|
|
||||||
//
|
|
||||||
// });
|
|
||||||
Loading…
Reference in new issue