IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Dashboard grid fixes (#10194)

Browse Source 
* grid: fix layout saving after panel move, #10185

* don't allow to drag fullscreen panels, #10171
This commit is contained in:
Alexander Zobnin 2017-12-13 19:53:57 +03:00 committed by Torkel Ödegaard
parent 90c5a8435f
commit a48ba7b19e
2 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
public/app/features/dashboard/dashgrid/DashboardGrid.tsx
View File

@ -10,7 +10,7 @@ import sizeMe from 'react-sizeme';
let lastGridWidth = 1200;
function GridWrapper({size, layout, onLayoutChange, children, onResize, onResizeStop, onWidthChange, className}) {
function GridWrapper({size, layout, onLayoutChange, children, onDragStop, onResize, onResizeStop, onWidthChange, className}) {
if (size.width === 0) {
console.log('size is zero!');
}
@ -37,6 +37,7 @@ function GridWrapper({size, layout, onLayoutChange, children, onResize, onResize
layout={layout}
onResize={onResize}
onResizeStop={onResizeStop}
onDragStop={onDragStop}
onLayoutChange={onLayoutChange}>
{children}
</ReactGridLayout>
@ -61,6 +62,7 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
this.onLayoutChange = this.onLayoutChange.bind(this);
this.onResize = this.onResize.bind(this);
this.onResizeStop = this.onResizeStop.bind(this);
this.onDragStop = this.onDragStop.bind(this);
this.onWidthChange = this.onWidthChange.bind(this);
this.state = {animated: false};
@ -127,14 +129,27 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
}
}
updateGridPos(item, layout) {
this.panelMap[item.i].updateGridPos(item);
// react-grid-layout has a bug (#670), and onLayoutChange() is only called when the component is mounted.
// So it's required to call it explicitly when panel resized or moved to save layout changes.
this.onLayoutChange(layout);
}
onResize(layout, oldItem, newItem) {
this.panelMap[newItem.i].updateGridPos(newItem);
}
onResizeStop(layout, oldItem, newItem) {
this.updateGridPos(newItem, layout);
this.panelMap[newItem.i].resizeDone();
}
onDragStop(layout, oldItem, newItem) {
this.updateGridPos(newItem, layout);
}
componentDidMount() {
setTimeout(() => {
this.setState(() => {
@ -165,6 +180,7 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
layout={this.buildLayout()}
onLayoutChange={this.onLayoutChange}
onWidthChange={this.onWidthChange}
onDragStop={this.onDragStop}
onResize={this.onResize}
onResizeStop={this.onResizeStop}>
{this.renderPanels()}

2
public/app/features/panel/panel_directive.ts
View File

@ -6,7 +6,7 @@ var module = angular.module('grafana.directives');
var panelTemplate = `
<div class="panel-container">
<div class="panel-header grid-drag-handle">
<div class="panel-header" ng-class="{'grid-drag-handle': !ctrl.fullscreen}">
<span class="panel-info-corner">
<i class="fa"></i>
<span class="panel-info-corner-inner"></span>