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