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: Set descending z-index of panels in a dashboard (v2) (#75328)

Browse Source 
Co-authored-by: Adela Almasan <adela.almasan@grafana.com>
This commit is contained in:
Leon Sorokin 2023-09-25 06:46:11 -05:00 committed by GitHub
parent 6b54aee4ba
commit 6811b0ae63
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -152,10 +152,14 @@ export class DashboardGrid extends PureComponent<Props> {
for (const panel of this.props.dashboard.panels) {
const panelClasses = classNames({ 'react-grid-item--fullscreen': panel.isViewing });
// used to allow overflowing content to show on top of the next panel
const descIndex = this.props.dashboard.panels.length - panelElements.length;
panelElements.push(
<GrafanaGridItem
key={panel.key}
className={panelClasses}
descendingOrderIndex={descIndex}
data-panelid={panel.id}
gridPos={panel.gridPos}
gridWidth={gridWidth}
@ -277,6 +281,7 @@ export class DashboardGrid extends PureComponent<Props> {
interface GrafanaGridItemProps extends React.HTMLAttributes<HTMLDivElement> {
gridWidth?: number;
gridPos?: GridPos;
descendingOrderIndex?: number;
isViewing: boolean;
windowHeight: number;
windowWidth: number;
@ -291,7 +296,7 @@ const GrafanaGridItem = React.forwardRef<HTMLDivElement, GrafanaGridItemProps>((
let width = 100;
let height = 100;
const { gridWidth, gridPos, isViewing, windowHeight, windowWidth, ...divProps } = props;
const { gridWidth, gridPos, isViewing, windowHeight, windowWidth, descendingOrderIndex, ...divProps } = props;
const style: CSSProperties = props.style ?? {};
if (isViewing) {
@ -321,7 +326,7 @@ const GrafanaGridItem = React.forwardRef<HTMLDivElement, GrafanaGridItemProps>((
// props.children[0] is our main children. RGL adds the drag handle at props.children[1]
return (
<div {...divProps} ref={ref}>
<div {...divProps} style={{ ...divProps.style, zIndex: descendingOrderIndex }} ref={ref}>
{/* Pass width and height to children as render props */}
{[props.children[0](width, height), props.children.slice(1)]}
</div>

9
public/sass/components/_dashboard_grid.scss
View File

@ -85,6 +85,15 @@
}
}
// Hack to prevent panel overlap during drag/hover (due to descending z-index assignment)
.react-grid-item {
&:hover,
&:active,
&:focus {
z-index: 100 !important;
}
}
// Hack for preventing panel menu overlapping.
.react-grid-item.resizing.panel,
.react-grid-item.panel.dropdown-menu-open,