Enable panel resizing (#105)

Author: Spikatrix

public/app/features/dashboard/dashgrid/DashboardGrid.tsx

@@ -1,40 +1,35 @@
 import classNames from 'classnames';
-import { PureComponent, CSSProperties } from 'react';
-import * as React from 'react';
+import React, { PureComponent, CSSProperties } from 'react';
 import ReactGridLayout, { ItemCallback } from 'react-grid-layout';
+import { connect } from 'react-redux';
+import AutoSizer from 'react-virtualized-auto-sizer';
 import { Subscription } from 'rxjs';
 
 import { config } from '@grafana/runtime';
-import appEvents from 'app/core/app_events';
 import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT } from 'app/core/constants';
 import { contextSrv } from 'app/core/services/context_srv';
-import { VariablesChanged } from 'app/features/variables/types';
+import { StoreState } from 'app/types';
 import { DashboardPanelsChangedEvent } from 'app/types/events';
 
 import { AddLibraryPanelWidget } from '../components/AddLibraryPanelWidget';
+import { AddPanelWidget } from '../components/AddPanelWidget';
 import { DashboardRow } from '../components/DashboardRow';
 import { DashboardModel, PanelModel } from '../state';
 import { GridPos } from '../state/PanelModel';
 
 import DashboardEmpty from './DashboardEmpty';
 import { DashboardPanel } from './DashboardPanel';
 
-export const PANEL_FILTER_VARIABLE = 'systemPanelFilterVar';
-
 export interface Props {
   dashboard: DashboardModel;
   isEditable: boolean;
   editPanel: PanelModel | null;
   viewPanel: PanelModel | null;
   hidePanelMenus?: boolean;
+  isFnDashboard?: boolean;
 }
 
-interface State {
-  panelFilter?: RegExp;
-  width: number;
-}
-
-export class DashboardGrid extends PureComponent<Props, State> {
+export class Component extends PureComponent<Props> {
   private panelMap: { [key: string]: PanelModel } = {};
   private eventSubs = new Subscription();
   private windowHeight = 1200;
@@ -46,67 +41,21 @@ export class DashboardGrid extends PureComponent<Props, State> {
 
   constructor(props: Props) {
     super(props);
-    this.state = {
-      panelFilter: undefined,
-      width: document.body.clientWidth, // initial very rough estimate
-    };
   }
 
   componentDidMount() {
     const { dashboard } = this.props;
-
-    if (config.featureToggles.panelFilterVariable) {
-      // If panel filter variable is set on load then
-      // update state to filter panels
-      for (const variable of dashboard.getVariables()) {
-        if (variable.id === PANEL_FILTER_VARIABLE) {
-          if ('query' in variable) {
-            this.setPanelFilter(variable.query);
-          }
-          break;
-        }
-      }
-
-      this.eventSubs.add(
-        appEvents.subscribe(VariablesChanged, (e) => {
-          if (e.payload.variable?.id === PANEL_FILTER_VARIABLE) {
-            if ('current' in e.payload.variable) {
-              let variable = e.payload.variable.current;
-              if ('value' in variable && typeof variable.value === 'string') {
-                this.setPanelFilter(variable.value);
-              }
-            }
-          }
-        })
-      );
-    }
-
     this.eventSubs.add(dashboard.events.subscribe(DashboardPanelsChangedEvent, this.triggerForceUpdate));
   }
 
   componentWillUnmount() {
     this.eventSubs.unsubscribe();
   }
 
-  setPanelFilter(regex: string) {
-    // Only set the panels filter if the systemPanelFilterVar variable
-    // is a non-empty string
-    let panelFilter = undefined;
-    if (regex.length > 0) {
-      panelFilter = new RegExp(regex, 'i');
-    }
-
-    this.setState({
-      panelFilter: panelFilter,
-    });
-  }
-
   buildLayout() {
     const layout: ReactGridLayout.Layout[] = [];
     this.panelMap = {};
-    const { panelFilter } = this.state;
 
-    let count = 0;
     for (const panel of this.props.dashboard.panels) {
       if (!panel.key) {
         panel.key = `panel-${panel.id}-${Date.now()}`;
@@ -133,27 +82,13 @@ export class DashboardGrid extends PureComponent<Props, State> {
         panelPos.isDraggable = panel.collapsed;
       }
 
-      if (!panelFilter) {
-        layout.push(panelPos);
-      } else {
-        if (panelFilter.test(panel.title)) {
-          panelPos.isResizable = false;
-          panelPos.isDraggable = false;
-          panelPos.x = (count % 2) * GRID_COLUMN_COUNT;
-          panelPos.y = Math.floor(count / 2);
-          layout.push(panelPos);
-          count++;
-        }
-      }
+      layout.push(panelPos);
     }
 
     return layout;
   }
 
   onLayoutChange = (newLayout: ReactGridLayout.Layout[]) => {
-    if (this.state.panelFilter) {
-      return;
-    }
     for (const newPos of newLayout) {
       this.panelMap[newPos.i!].updateGridPos(newPos, this.isLayoutInitialized);
     }
@@ -205,7 +140,6 @@ export class DashboardGrid extends PureComponent<Props, State> {
   }
 
   renderPanels(gridWidth: number, isDashboardDraggable: boolean) {
-    const { panelFilter } = this.state;
     const panelElements = [];
 
     // Reset last panel bottom
@@ -222,7 +156,7 @@ export class DashboardGrid extends PureComponent<Props, State> {
     for (const panel of this.props.dashboard.panels) {
       const panelClasses = classNames({ 'react-grid-item--fullscreen': panel.isViewing });
 
-      const p = (
+      panelElements.push(
         <GrafanaGridItem
           key={panel.key}
           className={panelClasses}
@@ -238,14 +172,6 @@ export class DashboardGrid extends PureComponent<Props, State> {
           }}
         </GrafanaGridItem>
       );
-
-      if (!panelFilter) {
-        panelElements.push(p);
-      } else {
-        if (panelFilter.test(panel.title)) {
-          panelElements.push(p);
-        }
-      }
     }
 
     return panelElements;
@@ -256,6 +182,11 @@ export class DashboardGrid extends PureComponent<Props, State> {
       return <DashboardRow key={panel.key} panel={panel} dashboard={this.props.dashboard} />;
     }
 
+    // Todo: Remove this when we remove the emptyDashboardPage toggle
+    if (panel.type === 'add-panel') {
+      return <AddPanelWidget key={panel.key} panel={panel} dashboard={this.props.dashboard} />;
+    }
+
     if (panel.type === 'add-library-panel') {
       return <AddLibraryPanelWidget key={panel.key} panel={panel} dashboard={this.props.dashboard} />;
     }
@@ -288,69 +219,61 @@ export class DashboardGrid extends PureComponent<Props, State> {
     }
   };
 
-  private resizeObserver?: ResizeObserver;
-  private rootEl: HTMLDivElement | null = null;
-  onMeasureRef = (rootEl: HTMLDivElement | null) => {
-    if (!rootEl) {
-      if (this.rootEl && this.resizeObserver) {
-        this.resizeObserver.unobserve(this.rootEl);
-      }
-      return;
-    }
-
-    this.rootEl = rootEl;
-    this.resizeObserver = new ResizeObserver((entries) => {
-      entries.forEach((entry) => {
-        this.setState({ width: entry.contentRect.width });
-      });
-    });
-
-    this.resizeObserver.observe(rootEl);
-  };
-
   render() {
-    const { isEditable, dashboard } = this.props;
-    const { width } = this.state;
+    const { isEditable, dashboard, isFnDashboard } = this.props;
 
-    if (dashboard.panels.length === 0) {
+    if (config.featureToggles.emptyDashboardPage && dashboard.panels.length === 0) {
       return <DashboardEmpty dashboard={dashboard} canCreate={isEditable} />;
     }
 
-    const draggable = width <= config.theme2.breakpoints.values.md ? false : isEditable;
-
-    // pos: rel + z-index is required to create a new stacking context to contain
-    // the escalating z-indexes of the panels
+    /**
+     * We have a parent with "flex: 1 1 0" we need to reset it to "flex: 1 1 auto" to have the AutoSizer
+     * properly working. For more information go here:
+     * https://github.com/bvaughn/react-virtualized/blob/master/docs/usingAutoSizer.md#can-i-use-autosizer-within-a-flex-container
+     */
     return (
-      <div
-        ref={this.onMeasureRef}
-        style={{
-          flex: '1 1 auto',
-          position: 'relative',
-          zIndex: 1,
-          display: this.props.editPanel ? 'none' : undefined,
-        }}
-      >
-        <div style={{ width: width, height: '100%' }} ref={this.onGetWrapperDivRef}>
-          <ReactGridLayout
-            width={width}
-            isDraggable={draggable}
-            isResizable={isEditable}
-            containerPadding={[0, 0]}
-            useCSSTransforms={true}
-            margin={[GRID_CELL_VMARGIN, GRID_CELL_VMARGIN]}
-            cols={GRID_COLUMN_COUNT}
-            rowHeight={GRID_CELL_HEIGHT}
-            draggableHandle=".grid-drag-handle"
-            draggableCancel=".grid-drag-cancel"
-            layout={this.buildLayout()}
-            onDragStop={this.onDragStop}
-            onResize={this.onResize}
-            onResizeStop={this.onResizeStop}
-            onLayoutChange={this.onLayoutChange}
-          >
-            {this.renderPanels(width, draggable)}
-          </ReactGridLayout>
-        </div>
+      <div style={{ flex: '1 1 auto', display: this.props.editPanel ? 'none' : undefined }}>
+        <AutoSizer disableHeight>
+          {({ width }) => {
+            if (width === 0) {
+              return null;
+            }
+
+            // Disable draggable if mobile device, solving an issue with unintentionally
+            // moving panels. https://github.com/grafana/grafana/issues/18497
+            const isLg = width <= config.theme2.breakpoints.values.md;
+            const draggable = isLg ? false : isEditable;
+
+            return (
+              /**
+               * The children is using a width of 100% so we need to guarantee that it is wrapped
+               * in an element that has the calculated size given by the AutoSizer. The AutoSizer
+               * has a width of 0 and will let its content overflow its div.
+               */
+              <div style={{ width: width, height: '100%' }} ref={this.onGetWrapperDivRef}>
+                <ReactGridLayout
+                  width={width}
+                  isDraggable={isFnDashboard ? false : draggable}
+                  isResizable={isFnDashboard ? false : isEditable}
+                  containerPadding={[0, 0]}
+                  useCSSTransforms={true}
+                  margin={[GRID_CELL_VMARGIN, GRID_CELL_VMARGIN]}
+                  cols={GRID_COLUMN_COUNT}
+                  rowHeight={GRID_CELL_HEIGHT}
+                  draggableHandle=".grid-drag-handle"
+                  draggableCancel=".grid-drag-cancel"
+                  layout={this.buildLayout()}
+                  onDragStop={this.onDragStop}
+                  onResize={this.onResize}
+                  onResizeStop={this.onResizeStop}
+                  onLayoutChange={this.onLayoutChange}
+                >
+                  {this.renderPanels(width, draggable)}
+                </ReactGridLayout>
+              </div>
+            );
+          }}
+        </AutoSizer>
       </div>
     );
   }
@@ -362,7 +285,7 @@ interface GrafanaGridItemProps extends React.HTMLAttributes<HTMLDivElement> {
   isViewing: boolean;
   windowHeight: number;
   windowWidth: number;
-  children: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+  children: any;
 }
 
 /**
@@ -403,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} style={{ ...divProps.style }} ref={ref}>
+    <div {...divProps} ref={ref}>
       {/* Pass width and height to children as render props */}
       {[props.children[0](width, height), props.children.slice(1)]}
     </div>
@@ -418,3 +341,11 @@ function translateGridHeightToScreenHeight(gridHeight: number): number {
 }
 
 GrafanaGridItem.displayName = 'GridItemWithDimensions';
+
+function mapStateToProps() {
+  return (state: StoreState) => ({
+    isFnDashboard: state.fnGlobalState.FNDashboard,
+  });
+}
+
+export const DashboardGrid = connect(mapStateToProps)(Component);