dashboard grid: enable CSS transforms (#10125)

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

@@ -30,7 +30,7 @@ function GridWrapper({size, layout, onLayoutChange, children, onResize, onResize
       isResizable={true}
       measureBeforeMount={false}
       containerPadding={[0, 0]}
-      useCSSTransforms={false}
+      useCSSTransforms={true}
       margin={[GRID_CELL_VMARGIN, GRID_CELL_VMARGIN]}
       cols={GRID_COLUMN_COUNT}
       rowHeight={GRID_CELL_HEIGHT}

public/app/features/panel/panel_header.ts

@@ -1,5 +1,6 @@
 ///<reference path="../../headers/common.d.ts" />
 
+import $ from 'jquery';
 import {coreModule} from 'app/core/core';
 
 var template = `
@@ -106,13 +107,38 @@ function panelHeader($compile) {
         }
       });
 
+      elem.find('.panel-menu-toggle').click((evt) => {
+        console.log(evt);
+        togglePanelState();
+      });
+
       function togglePanelMenu(e) {
         if (!isDragged) {
           e.stopPropagation();
+          togglePanelState();
           elem.find('[data-toggle=dropdown]').dropdown('toggle');
         }
       }
 
+      /**
+       * Hack for adding special class 'dropdown-menu-open' to the panel.
+       * This class sets z-index for panel and prevents menu overlapping.
+       */
+      function togglePanelState() {
+        const menuOpenClass = 'dropdown-menu-open';
+        const panelGridClass = '.react-grid-item.panel';
+
+        let panelElem = elem.find('[data-toggle=dropdown]').parentsUntil('.panel').parent();
+        let menuElem = elem.find('[data-toggle=dropdown]').parent();
+        panelElem = panelElem && panelElem.length ? panelElem[0] : undefined;
+        if (panelElem) {
+          panelElem = $(panelElem);
+          $(panelGridClass).removeClass(menuOpenClass);
+          let state = !menuElem.hasClass('open');
+          panelElem.toggleClass(menuOpenClass, state);
+        }
+      }
+
       let mouseX, mouseY;
       elem.mousedown((e) => {
         mouseX = e.pageX;

public/sass/components/_dashboard_grid.scss

@@ -47,3 +47,10 @@
   }
 }
 
+// Hack for preventing panel menu overlapping.
+.react-grid-item.resizing.panel,
+.react-grid-item.panel.dropdown-menu-open,
+.react-grid-item.react-draggable-dragging.panel {
+  z-index: $zindex-dropdown;
+}
+