react panels minor progress

public/app/core/directives/dash_class.ts

@@ -5,9 +5,7 @@ coreModule.directive('dashClass', function($timeout) {
   return {
     link: function($scope, elem) {
       $scope.ctrl.dashboard.events.on('view-mode-changed', function(panel) {
-        $timeout(() => {
+        elem.toggleClass('panel-in-fullscreen', panel.fullscreen === true);
-          elem.toggleClass('panel-in-fullscreen', panel.fullscreen === true);
-        });
       });
 
       elem.toggleClass('panel-in-fullscreen', $scope.ctrl.dashboard.meta.fullscreen === true);

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

@@ -85,7 +85,7 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
     this.dashboard.on('panel-added', this.triggerForceUpdate.bind(this));
     this.dashboard.on('panel-removed', this.triggerForceUpdate.bind(this));
     this.dashboard.on('repeats-processed', this.triggerForceUpdate.bind(this));
-    this.dashboard.on('view-mode-changed', this.triggerForceUpdate.bind(this));
+    this.dashboard.on('view-mode-changed', this.onViewModeChanged.bind(this));
     this.dashboard.on('row-collapsed', this.triggerForceUpdate.bind(this));
     this.dashboard.on('row-expanded', this.triggerForceUpdate.bind(this));
   }
@@ -142,6 +142,10 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
     }
   }
 
+  onViewModeChanged(payload) {
+    this.setState({ animated: payload.fullscreen });
+  }
+
   updateGridPos(item, layout) {
     this.panelMap[item.i].updateGridPos(item);
 
@@ -165,9 +169,7 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
 
   componentDidMount() {
     setTimeout(() => {
-      this.setState(() => {
+      this.setState({ animated: true });
-        return { animated: true };
-      });
     });
   }
 

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

@@ -75,7 +75,6 @@ export class DashboardPanel extends React.Component<DashboardPanelProps, any> {
     }
 
     if (!this.pluginExports) {
-      console.log('render null');
       return null;
     }
 

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

@@ -23,7 +23,7 @@ export class PanelChrome extends React.Component<PanelChromeProps, any> {
   }
 
   triggerForceUpdate() {
-    this.forceUpdate();
+    // this.forceUpdate();
   }
 
   render() {
@@ -32,6 +32,7 @@ export class PanelChrome extends React.Component<PanelChromeProps, any> {
     };
 
     let PanelComponent = this.props.component;
+    console.log('PanelChrome render');
 
     return (
       <div className="panel-height-helper">

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

@@ -12,8 +12,6 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> {
     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>

public/app/features/dashboard/panel_model.ts

@@ -13,7 +13,6 @@ const notPersistedProperties: { [str: string]: boolean } = {
   events: true,
   fullscreen: true,
   isEditing: true,
-  editModeInitiated: true,
 };
 
 export class PanelModel {
@@ -37,7 +36,6 @@ export class PanelModel {
   fullscreen: boolean;
   isEditing: boolean;
   events: Emitter;
-  editModeInitiated: boolean;
 
   constructor(model) {
     this.events = new Emitter();
@@ -84,7 +82,6 @@ export class PanelModel {
     this.gridPos.h = newPos.h;
 
     if (sizeChanged) {
-      console.log('PanelModel sizeChanged event and render events fired');
       this.events.emit('panel-size-changed');
     }
   }

public/app/features/dashboard/view_state_srv.ts

@@ -174,7 +174,6 @@ export class DashboardViewState {
 
     // Firefox doesn't return scrollTop position properly if 'dash-scroll' is emitted after setViewMode()
     this.$scope.appEvent('dash-scroll', { animate: false, pos: 0 });
-    console.log('viewstatesrv.setViewMode');
     this.dashboard.setViewMode(panel, true, isEditing);
   }
 }

public/app/features/panel/panel_ctrl.ts

@@ -24,10 +24,8 @@ export class PanelCtrl {
   $injector: any;
   $location: any;
   $timeout: any;
-  fullscreen: boolean;
   inspector: any;
   editModeInitiated: boolean;
-  editMode: any;
   height: any;
   containerHeight: any;
   events: Emitter;
@@ -130,6 +128,7 @@ export class PanelCtrl {
         return { templateUrl: directiveFn };
       };
     }
+
     if (index) {
       this.editorTabs.splice(index, 0, editorTab);
     } else {
@@ -190,7 +189,7 @@ export class PanelCtrl {
 
   getExtendedMenu() {
     let menu = [];
-    if (!this.fullscreen && this.dashboard.meta.canEdit) {
+    if (!this.panel.fullscreen && this.dashboard.meta.canEdit) {
       menu.push({
         text: 'Duplicate',
         click: 'ctrl.duplicate()',
@@ -220,15 +219,15 @@ export class PanelCtrl {
   }
 
   otherPanelInFullscreenMode() {
-    return this.dashboard.meta.fullscreen && !this.fullscreen;
+    return this.dashboard.meta.fullscreen && !this.panel.fullscreen;
   }
 
   calculatePanelHeight() {
-    if (this.fullscreen) {
+    if (this.panel.fullscreen) {
       var docHeight = $(window).height();
       var editHeight = Math.floor(docHeight * 0.4);
       var fullscreenHeight = Math.floor(docHeight * 0.8);
-      this.containerHeight = this.editMode ? editHeight : fullscreenHeight;
+      this.containerHeight = this.panel.isEditing ? editHeight : fullscreenHeight;
     } else {
       this.containerHeight = this.panel.gridPos.h * GRID_CELL_HEIGHT + (this.panel.gridPos.h - 1) * GRID_CELL_VMARGIN;
     }
@@ -237,6 +236,11 @@ export class PanelCtrl {
       this.containerHeight = $(window).height();
     }
 
+    // hacky solution
+    if (this.panel.isEditing && !this.editModeInitiated) {
+      this.initEditMode();
+    }
+
     this.height = this.containerHeight - (PANEL_BORDER + TITLE_HEIGHT);
   }
 
@@ -247,9 +251,6 @@ export class PanelCtrl {
 
   duplicate() {
     this.dashboard.duplicatePanel(this.panel);
-    this.$timeout(() => {
-      this.$scope.$root.$broadcast('render');
-    });
   }
 
   removePanel() {

public/app/features/panel/panel_directive.ts

@@ -7,7 +7,7 @@ var module = angular.module('grafana.directives');
 
 var panelTemplate = `
   <div class="panel-container">
-    <div class="panel-header" ng-class="{'grid-drag-handle': !ctrl.fullscreen}">
+    <div class="panel-header" ng-class="{'grid-drag-handle': !ctrl.panel.fullscreen}">
       <span class="panel-info-corner">
         <i class="fa"></i>
         <span class="panel-info-corner-inner"></span>
@@ -25,7 +25,7 @@ var panelTemplate = `
     </div>
   </div>
 
-  <div class="panel-full-edit" ng-if="ctrl.editMode">
+  <div class="panel-full-edit" ng-if="ctrl.panel.isEditing">
     <div class="tabbed-view tabbed-view--panel-edit">
       <div class="tabbed-view-header">
         <h3 class="tabbed-view-panel-title">

public/app/plugins/panel/graph/graph.ts

@@ -197,6 +197,8 @@ function graphDirective(timeSrv, popoverSrv, contextSrv) {
       // Function for rendering panel
       function render_panel() {
         panelWidth = elem.width();
+        console.log('panelWidth', panelWidth);
+
         if (shouldAbortRender()) {
           return;
         }

public/app/plugins/panel/text2/module.tsx

@@ -6,7 +6,7 @@ export class ReactTestPanel extends React.Component<any, any> {
   }
 
   render() {
-    return <h2>Panel content</h2>;
+    return <h2>I am a react panel, haha!</h2>;
   }
 }
 

public/sass/components/_dashboard_grid.scss

@@ -20,7 +20,6 @@
   }
 
   // Disable grid interaction indicators in fullscreen panels
-
   .panel-header:hover {
     background-color: inherit;
   }