IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-11 08:05:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

Dashboard: Making a dashboard editable does not allow resizing of panels (#59255)

Browse Source 
* DashboardGrid should rerender ReactGridLayout when mutable dashboard updates

* add missing prop to test
This commit is contained in:
Polina Boneva 2022-12-07 12:46:10 +02:00 committed by GitHub
parent 6359dab040
commit db1e19fe86
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
public/app/features/dashboard/containers/DashboardPage.tsx
View File

@ -392,7 +392,12 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
</section>
)}
<DashboardGrid dashboard={dashboard} viewPanel={viewPanel} editPanel={editPanel} />
<DashboardGrid
dashboard={dashboard}
isEditable={!!dashboard.meta.canEdit}
viewPanel={viewPanel}
editPanel={editPanel}
/>
{inspectPanel && <PanelInspector dashboard={dashboard} panel={inspectPanel} />}
</Page>

1
public/app/features/dashboard/dashgrid/DashboardGrid.test.tsx
View File

@ -57,6 +57,7 @@ describe('DashboardGrid', () => {
const props: Props = {
editPanel: null,
viewPanel: null,
isEditable: true,
dashboard: getTestDashboard(),
};
expect(() => render(<DashboardGrid {...props} />)).not.toThrow();

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

@ -17,6 +17,7 @@ import { DashboardPanel } from './DashboardPanel';
export interface Props {
dashboard: DashboardModel;
isEditable: boolean;
editPanel: PanelModel | null;
viewPanel: PanelModel | null;
}
@ -200,7 +201,7 @@ export class DashboardGrid extends PureComponent<Props, State> {
}
render() {
const { dashboard } = this.props;
const { isEditable } = this.props;
/**
* We have a parent with "flex: 1 1 0" we need to reset it to "flex: 1 1 auto" to have the AutoSizer
@ -215,14 +216,13 @@ export class DashboardGrid extends PureComponent<Props, State> {
return null;
}
const draggable = width <= 769 ? false : dashboard.meta.canEdit;
const draggable = width <= 769 ? false : isEditable;
/*
Disable draggable if mobile device, solving an issue with unintentionally
moving panels. https://github.com/grafana/grafana/issues/18497
theme.breakpoints.md = 769
*/
return (
/**
* The children is using a width of 100% so we need to guarantee that it is wrapped
@ -233,7 +233,7 @@ export class DashboardGrid extends PureComponent<Props, State> {
<ReactGridLayout
width={width}
isDraggable={draggable}
isResizable={dashboard.meta.canEdit}
isResizable={isEditable}
containerPadding={[0, 0]}
useCSSTransforms={false}
margin={[GRID_CELL_VMARGIN, GRID_CELL_VMARGIN]}