Merge pull request #14069 from grafana/panel-focus-in-react

Panel focus in react

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

@@ -117,6 +117,14 @@ export class DashboardPanel extends PureComponent<Props, State> {
     this.cleanUpAngularPanel();
     this.cleanUpAngularPanel();
   }
   }
 
 
+  onMouseEnter = () => {
+    this.props.dashboard.setPanelFocus(this.props.panel.id);
+  };
+
+  onMouseLeave = () => {
+    this.props.dashboard.setPanelFocus(0);
+  };
+
   renderReactPanel() {
   renderReactPanel() {
     const { dashboard, panel } = this.props;
     const { dashboard, panel } = this.props;
     const { plugin } = this.state;
     const { plugin } = this.state;
@@ -127,7 +135,7 @@ export class DashboardPanel extends PureComponent<Props, State> {
     // I want to try to keep markup (parents) for panel the same in edit mode to avoide unmount / new mount of panel
     // I want to try to keep markup (parents) for panel the same in edit mode to avoide unmount / new mount of panel
     return (
     return (
       <div className={containerClass}>
       <div className={containerClass}>
-        <div className={panelWrapperClass}>
+        <div className={panelWrapperClass} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
           <PanelChrome component={plugin.exports.Panel} panel={panel} dashboard={dashboard} />
           <PanelChrome component={plugin.exports.Panel} panel={panel} dashboard={dashboard} />
         </div>
         </div>
         {panel.isEditing && (
         {panel.isEditing && (
@@ -156,6 +164,13 @@ export class DashboardPanel extends PureComponent<Props, State> {
     }
     }
 
 
     // legacy angular rendering
     // legacy angular rendering
-    return <div ref={element => (this.element = element)} className="panel-height-helper" />;
+    return (
+      <div
+        ref={element => (this.element = element)}
+        className="panel-height-helper"
+        onMouseEnter={this.onMouseEnter}
+        onMouseLeave={this.onMouseLeave}
+      />
+    );
   }
   }
 }
 }

public/app/features/panel/panel_directive.ts

@@ -80,16 +80,6 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => {
       let lastAlertState;
       let lastAlertState;
       let hasAlertRule;
       let hasAlertRule;
 
 
-      function mouseEnter() {
-        panelContainer.toggleClass('panel-hover-highlight', true);
-        ctrl.dashboard.setPanelFocus(ctrl.panel.id);
-      }
-
-      function mouseLeave() {
-        panelContainer.toggleClass('panel-hover-highlight', false);
-        ctrl.dashboard.setPanelFocus(0);
-      }
-
       function resizeScrollableContent() {
       function resizeScrollableContent() {
         if (panelScrollbar) {
         if (panelScrollbar) {
           panelScrollbar.update();
           panelScrollbar.update();
@@ -212,9 +202,6 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => {
         scope.$apply(ctrl.openInspector.bind(ctrl));
         scope.$apply(ctrl.openInspector.bind(ctrl));
       });
       });
 
 
-      elem.on('mouseenter', mouseEnter);
-      elem.on('mouseleave', mouseLeave);
-
       scope.$on('$destroy', () => {
       scope.$on('$destroy', () => {
         elem.off();
         elem.off();
         cornerInfoElem.off();
         cornerInfoElem.off();