poc: began react panel experiments, step2

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import config from 'app/core/config';
 import classNames from 'classnames';
+import appEvents from 'app/core/app_events';
 import { PanelModel } from '../panel_model';
 import { PanelContainer } from './PanelContainer';
 import { AttachedPanel } from './PanelLoader';
@@ -72,9 +73,6 @@ export class DashboardPanel extends React.Component<DashboardPanelProps, any> {
       return this.specialPanels[this.props.panel.type]();
     }
 
-    let isFullscreen = false;
-    let isLoading = false;
-    let panelHeaderClass = classNames({ 'panel-header': true, 'grid-drag-handle': !isFullscreen });
     let PanelComponent = null;
 
     if (this.pluginExports && this.pluginExports.PanelComponent) {
@@ -83,6 +81,36 @@ export class DashboardPanel extends React.Component<DashboardPanelProps, any> {
 
     return (
       <div className="panel-container">
+        <PanelHeader panel={this.props.panel} />
+        <div className="panel-content">{PanelComponent && <PanelComponent />}</div>
+      </div>
+    );
+
+    // return (
+    //   <div ref={element => this.element = element} className="panel-height-helper" />
+    // );
+  }
+}
+
+interface PanelHeaderProps {
+  panel: any;
+}
+
+export class PanelHeader extends React.Component<PanelHeaderProps, any> {
+  onEditPanel = () => {
+    appEvents.emit('panel-change-view', {
+      fullscreen: true,
+      edit: true,
+      panelId: this.props.panel.id,
+    });
+  };
+
+  render() {
+    let isFullscreen = false;
+    let isLoading = false;
+    let panelHeaderClass = classNames({ 'panel-header': true, 'grid-drag-handle': !isFullscreen });
+
+    return (
       <div className={panelHeaderClass}>
         <span className="panel-info-corner">
           <i className="fa" />
@@ -94,15 +122,30 @@ export class DashboardPanel extends React.Component<DashboardPanelProps, any> {
             <i className="fa fa-spinner fa-spin" />
           </span>
         )}
-          <div className="panel-title-container">{this.props.panel.title}</div>
-        </div>
 
-        <div className="panel-content">{PanelComponent && <PanelComponent />}</div>
+        <div className="panel-title-container">
+          <span className="panel-title">
+            <span className="icon-gf panel-alert-icon" />
+            <span className="panel-title-text">{this.props.panel.title}</span>
+            <span className="panel-menu-container dropdown">
+              <span className="fa fa-caret-down panel-menu-toggle" data-toggle="dropdown" />
+              <ul className="dropdown-menu dropdown-menu--menu panel-menu" role="menu">
+                <li>
+                  <a onClick={this.onEditPanel}>
+                    <i className="fa fa-fw fa-edit" /> Edit
+                  </a>
+                </li>
+                <li>
+                  <a href="asd">asd</a>
+                </li>
+              </ul>
+            </span>
+            <span className="panel-time-info">
+              <i className="fa fa-clock-o" /> 4m
+            </span>
+          </span>
+        </div>
       </div>
     );
-
-    // return (
-    //   <div ref={element => this.element = element} className="panel-height-helper" />
-    // );
   }
 }

public/app/features/panel/panel_header.ts

@@ -10,21 +10,6 @@ var template = `
   <span class="panel-menu-container dropdown">
     <span class="fa fa-caret-down panel-menu-toggle" data-toggle="dropdown"></span>
     <ul class="dropdown-menu dropdown-menu--menu panel-menu" role="menu">
-      <li>
-        <a ng-click="ctrl.addDataQuery(datasource);">
-          <i class="fa fa-cog"></i> Edit <span class="dropdown-menu-item-shortcut">e</span>
-        </a>
-      </li>
-      <li class="dropdown-submenu">
-        <a ng-click="ctrl.addDataQuery(datasource);"><i class="fa fa-cube"></i> Actions</a>
-        <ul class="dropdown-menu panel-menu">
-          <li><a ng-click="ctrl.addDataQuery(datasource);"><i class="fa fa-flash"></i> Add Annotation</a></li>
-          <li><a ng-click="ctrl.addDataQuery(datasource);"><i class="fa fa-bullseye"></i> Toggle Legend</a></li>
-          <li><a ng-click="ctrl.addDataQuery(datasource);"><i class="fa fa-download"></i> Export to CSV</a></li>
-          <li><a ng-click="ctrl.addDataQuery(datasource);"><i class="fa fa-eye"></i> View JSON</a></li>
-        </ul>
-      </li>
-      <li><a ng-click="ctrl.addDataQuery(datasource);"><i class="fa fa-trash"></i> Remove</a></li>
     </ul>
   </span>
   <span class="panel-time-info" ng-show="ctrl.timeInfo"><i class="fa fa-clock-o"></i> {{ctrl.timeInfo}}</span>

public/sass/pages/_dashboard.scss

@@ -40,6 +40,14 @@ div.flot-text {
     background-color: transparent;
     border: none;
   }
+
+  &:hover {
+    .panel-menu-toggle {
+      visibility: visible;
+      transition: opacity 0.1s ease-in 0.2s;
+      opacity: 1;
+    }
+  }
 }
 
 .panel-content {
@@ -159,7 +167,7 @@ div.flot-text {
     display: block;
     @include panel-corner-color(lighten($panel-bg, 4%));
     .fa:before {
-      content: "\f129";
+      content: '\f129';
     }
   }
 
@@ -170,7 +178,7 @@ div.flot-text {
       left: -5px;
     }
     .fa:before {
-      content: "\f08e";
+      content: '\f08e';
     }
   }
 
@@ -179,19 +187,11 @@ div.flot-text {
     color: $text-color;
     @include panel-corner-color($popover-error-bg);
     .fa:before {
-      content: "\f12a";
+      content: '\f12a';
     }
   }
 }
 
-.panel-hover-highlight {
-  .panel-menu-toggle {
-    visibility: visible;
-    transition: opacity 0.1s ease-in 0.2s;
-    opacity: 1;
-  }
-}
-
 .panel-time-info {
   font-weight: bold;
   float: right;