wip: react panel makeover mini progress

public/app/core/directives/dash_class.ts

@@ -10,9 +10,7 @@ coreModule.directive('dashClass', function($timeout) {
         });
       });
 
-      $scope.onAppEvent('panel-fullscreen-exit', function() {
-        elem.toggleClass('panel-in-fullscreen', false);
-      });
+      elem.toggleClass('panel-in-fullscreen', $scope.ctrl.dashboard.meta.fullscreen === true);
 
       $scope.$watch('ctrl.playlistSrv.isPlaying', function(newValue) {
         elem.toggleClass('playlist-active', newValue === true);

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

@@ -175,6 +175,7 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
     const panelElements = [];
 
     for (let panel of this.dashboard.panels) {
+      console.log('panel.fullscreen', panel.fullscreen);
       const panelClasses = classNames({ panel: true, 'panel--fullscreen': panel.fullscreen });
       panelElements.push(
         <div key={panel.id.toString()} className={panelClasses}>

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import $ from 'jquery';
 import config from 'app/core/config';
 import classNames from 'classnames';
 import { PanelModel } from '../panel_model';
@@ -7,6 +8,11 @@ import { AttachedPanel } from './PanelLoader';
 import { DashboardRow } from './DashboardRow';
 import { AddPanelPanel } from './AddPanelPanel';
 import { importPluginModule } from 'app/features/plugins/plugin_loader';
+import { store } from 'app/stores/store';
+import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN } from 'app/core/constants';
+
+const TITLE_HEIGHT = 27;
+const PANEL_BORDER = 2;
 
 export interface DashboardPanelProps {
   panel: PanelModel;
@@ -61,13 +67,40 @@ export class DashboardPanel extends React.Component<DashboardPanelProps, any> {
       PanelComponent = this.pluginExports.PanelComponent;
     }
 
+    let panelContentStyle = {
+      height: this.getPanelHeight(),
+    };
+
     return (
-      <div className="panel-container">
-        <PanelHeader panel={this.props.panel} dashboard={this.props.dashboard} />
-        <div className="panel-content">{PanelComponent && <PanelComponent />}</div>
+      <div>
+        <div className="panel-container">
+          <PanelHeader panel={this.props.panel} dashboard={this.props.dashboard} />
+          <div className="panel-content" style={panelContentStyle}>
+            {PanelComponent && <PanelComponent />}
+          </div>
+        </div>
+        <div>
+          {this.props.panel.isEditing && <PanelEditor panel={this.props.panel} dashboard={this.props.dashboard} />}
+        </div>
       </div>
     );
   }
+
+  getPanelHeight() {
+    const panel = this.props.panel;
+    let height = 0;
+
+    if (panel.fullscreen) {
+      var docHeight = $(window).height();
+      var editHeight = Math.floor(docHeight * 0.4);
+      var fullscreenHeight = Math.floor(docHeight * 0.8);
+      height = panel.isEditing ? editHeight : fullscreenHeight;
+    } else {
+      height = panel.gridPos.h * GRID_CELL_HEIGHT + (panel.gridPos.h - 1) * GRID_CELL_VMARGIN;
+    }
+
+    return height - PANEL_BORDER + TITLE_HEIGHT;
+  }
 }
 
 interface PanelHeaderProps {
@@ -77,7 +110,11 @@ interface PanelHeaderProps {
 
 export class PanelHeader extends React.Component<PanelHeaderProps, any> {
   onEditPanel = () => {
-    this.props.dashboard.setViewMode(this.props.panel, true, true);
+    store.view.updateQuery({
+      panelId: this.props.panel.id,
+      edit: true,
+      fullscreen: true,
+    });
   };
 
   render() {
@@ -124,3 +161,35 @@ export class PanelHeader extends React.Component<PanelHeaderProps, any> {
     );
   }
 }
+
+interface PanelEditorProps {
+  panel: PanelModel;
+  dashboard: DashboardModel;
+}
+
+export class PanelEditor extends React.Component<PanelEditorProps, any> {
+  render() {
+    return (
+      <div className="tabbed-view tabbed-view--panel-edit">
+        <div className="tabbed-view-header">
+          <h3 className="tabbed-view-panel-title">{this.props.panel.type}</h3>
+
+          <ul className="gf-tabs">
+            <li className="gf-tabs-item">
+              <a className="gf-tabs-link active">Queries</a>
+            </li>
+            <li className="gf-tabs-item">
+              <a className="gf-tabs-link">Visualization</a>
+            </li>
+          </ul>
+
+          <button className="tabbed-view-close-btn" ng-click="ctrl.exitFullscreen();">
+            <i className="fa fa-remove" />
+          </button>
+        </div>
+
+        <div className="tabbed-view-body">testing</div>
+      </div>
+    );
+  }
+}

public/app/features/dashboard/panel_model.ts

@@ -13,6 +13,7 @@ const notPersistedProperties: { [str: string]: boolean } = {
   events: true,
   fullscreen: true,
   isEditing: true,
+  editModeInitiated: true,
 };
 
 export class PanelModel {
@@ -36,6 +37,7 @@ export class PanelModel {
   fullscreen: boolean;
   isEditing: boolean;
   events: Emitter;
+  editModeInitiated: boolean;
 
   constructor(model) {
     this.events = new Emitter();
@@ -91,6 +93,10 @@ export class PanelModel {
     this.events.emit('panel-size-changed');
   }
 
+  initEditMode() {
+    this.events.emit('panel-init-edit-mode');
+  }
+
   destroy() {
     this.events.removeAllListeners();
   }

public/app/features/dashboard/specs/AddPanelPanel.jest.tsx

@@ -77,13 +77,8 @@ describe('AddPanelPanel', () => {
 
     dashboardMock = { toggleRow: jest.fn() };
 
-    getPanelContainer = jest.fn().mockReturnValue({
-      getDashboard: jest.fn().mockReturnValue(dashboardMock),
-      getPanelLoader: jest.fn(),
-    });
-
     panel = new PanelModel({ collapsed: false });
-    wrapper = shallow(<AddPanelPanel panel={panel} getPanelContainer={getPanelContainer} />);
+    wrapper = shallow(<AddPanelPanel panel={panel} dashboard={dashboardMock} />);
   });
 
   it('should fetch all panels sorted with core plugins first', () => {

public/app/features/dashboard/view_state_srv.ts

@@ -33,10 +33,6 @@ export class DashboardViewState {
       self.update(payload);
     });
 
-    $scope.onAppEvent('panel-initialized', function(evt, payload) {
-      self.registerPanel(payload.scope);
-    });
-
     // this marks changes to location during this digest cycle as not to add history item
     // don't want url changes like adding orgId to add browser history
     $location.replace();
@@ -124,102 +120,62 @@ export class DashboardViewState {
   }
 
   syncState() {
-    if (this.panelScopes.length === 0) {
-      return;
-    }
-
     if (this.dashboard.meta.fullscreen) {
-      var panelScope = this.getPanelScope(this.state.panelId);
-      if (!panelScope) {
+      var panel = this.dashboard.getPanelById(this.state.panelId);
+
+      if (!panel) {
         return;
       }
 
       if (this.fullscreenPanel) {
         // if already fullscreen
-        if (this.fullscreenPanel === panelScope && this.editStateChanged === false) {
+        if (this.fullscreenPanel === panel && this.editStateChanged === false) {
           return;
         } else {
           this.leaveFullscreen(false);
         }
       }
 
-      if (!panelScope.ctrl.editModeInitiated) {
-        panelScope.ctrl.initEditMode();
-      }
-
-      if (!panelScope.ctrl.fullscreen) {
-        this.enterFullscreen(panelScope);
+      if (!panel.fullscreen) {
+        this.enterFullscreen(panel);
       }
     } else if (this.fullscreenPanel) {
       this.leaveFullscreen(true);
     }
   }
 
-  getPanelScope(id) {
-    return _.find(this.panelScopes, function(panelScope) {
-      return panelScope.ctrl.panel.id === id;
-    });
-  }
-
   leaveFullscreen(render) {
-    var self = this;
-    var ctrl = self.fullscreenPanel.ctrl;
+    var panel = this.fullscreenPanel;
 
-    ctrl.editMode = false;
-    ctrl.fullscreen = false;
-
-    this.dashboard.setViewMode(ctrl.panel, false, false);
-    this.$scope.appEvent('panel-fullscreen-exit', { panelId: ctrl.panel.id });
+    this.dashboard.setViewMode(panel, false, false);
     this.$scope.appEvent('dash-scroll', { restore: true });
 
     if (!render) {
       return false;
     }
 
-    this.$timeout(function() {
-      if (self.oldTimeRange !== ctrl.range) {
-        self.$rootScope.$broadcast('refresh');
+    this.$timeout(() => {
+      if (this.oldTimeRange !== this.dashboard.time) {
+        this.$rootScope.$broadcast('refresh');
       } else {
-        self.$rootScope.$broadcast('render');
+        this.$rootScope.$broadcast('render');
       }
-      delete self.fullscreenPanel;
+      delete this.fullscreenPanel;
     });
+
     return true;
   }
 
-  enterFullscreen(panelScope) {
-    var ctrl = panelScope.ctrl;
+  enterFullscreen(panel) {
+    const isEditing = this.state.edit && this.dashboard.meta.canEdit;
 
-    ctrl.editMode = this.state.edit && this.dashboard.meta.canEdit;
-    ctrl.fullscreen = true;
-
-    this.oldTimeRange = ctrl.range;
-    this.fullscreenPanel = panelScope;
+    this.oldTimeRange = this.dashboard.time;
+    this.fullscreenPanel = panel;
 
     // Firefox doesn't return scrollTop position properly if 'dash-scroll' is emitted after setViewMode()
     this.$scope.appEvent('dash-scroll', { animate: false, pos: 0 });
-    this.dashboard.setViewMode(ctrl.panel, true, ctrl.editMode);
-    this.$scope.appEvent('panel-fullscreen-enter', { panelId: ctrl.panel.id });
-  }
-
-  registerPanel(panelScope) {
-    var self = this;
-    self.panelScopes.push(panelScope);
-
-    if (!self.dashboard.meta.soloMode) {
-      if (self.state.panelId === panelScope.ctrl.panel.id) {
-        if (self.state.edit) {
-          panelScope.ctrl.editPanel();
-        } else {
-          panelScope.ctrl.viewPanel();
-        }
-      }
-    }
-
-    var unbind = panelScope.$on('$destroy', function() {
-      self.panelScopes = _.without(self.panelScopes, panelScope);
-      unbind();
-    });
+    console.log('viewstatesrv.setViewMode');
+    this.dashboard.setViewMode(panel, true, isEditing);
   }
 }