wip: minor progres on react panels edit mode

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

@@ -48,7 +48,7 @@ export class PanelChrome extends React.Component<Props, State> {
     let PanelComponent = this.panelComponent;
 
     return (
-      <div className="panel-height-helper">
+      <div className="panel-editor-container">
         <div className="panel-container">
           <PanelHeader panel={this.props.panel} dashboard={this.props.dashboard} />
           <div className="panel-content" style={{ height: this.state.height }}>
@@ -73,6 +73,6 @@ export class PanelChrome extends React.Component<Props, State> {
       height = panel.gridPos.h * GRID_CELL_HEIGHT + (panel.gridPos.h - 1) * GRID_CELL_VMARGIN;
     }
 
-    return height - PANEL_BORDER + TITLE_HEIGHT;
+    return height - (PANEL_BORDER + TITLE_HEIGHT);
   }
 }

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

@@ -1,11 +1,12 @@
 import React from 'react';
+import classNames from 'classnames';
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
 import { store } from 'app/stores/store';
 import { observer } from 'mobx-react';
 import { QueriesTab } from './QueriesTab';
-import classNames from 'classnames';
-import { VizPicker } from './VizPicker';
+import { PanelPlugin } from 'app/core/config';
+import { VizTypePicker } from './VizTypePicker';
 
 interface PanelEditorProps {
   panel: PanelModel;
@@ -39,16 +40,22 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> {
     return (
       <div className="viz-editor">
         <div className="viz-editor-col1">
-          <h5 className="section-heading">Visualization Type</h5>
-          <VizPicker />
+          <VizTypePicker currentType={this.props.panel.type} onTypeChanged={this.onVizTypeChanged} />
         </div>
         <div className="viz-editor-col2">
-          <h5 className="section-heading">Options</h5>
+          <h5 className="page-heading">Options</h5>
         </div>
       </div>
     );
   }
 
+  onVizTypeChanged = (plugin: PanelPlugin) => {
+    this.props.panel.type = plugin.id;
+    this.forceUpdate();
+
+    console.log('panel type changed', plugin);
+  };
+
   onChangeTab = (tab: PanelEditorTab) => {
     store.view.updateQuery({ tab: tab.id }, false);
   };
@@ -57,7 +64,7 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> {
     const activeTab: string = store.view.query.get('tab') || 'queries';
 
     return (
-      <div className="tabbed-view tabbed-view--panel-edit-new">
+      <div className="tabbed-view tabbed-view--new">
         <div className="tabbed-view-header">
           <ul className="gf-tabs">
             {this.tabs.map(tab => {

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

@@ -1,46 +0,0 @@
-import React, { PureComponent } from 'react';
-import config from 'app/core/config';
-import _ from 'lodash';
-
-interface Props {}
-
-interface State {
-  pluginList: any[];
-}
-
-export class VizPicker extends PureComponent<Props, State> {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      pluginList: this.getPanelPlugins(''),
-    };
-  }
-
-  getPanelPlugins(filter) {
-    let panels = _.chain(config.panels)
-      .filter({ hideFromList: false })
-      .map(item => item)
-      .value();
-
-    // add sort by sort property
-    return _.sortBy(panels, 'sort');
-  }
-
-  onChangeVizPlugin = plugin => {
-    console.log('set viz');
-  };
-
-  renderVizPlugin(plugin, index) {
-    return (
-      <div key={index} className="viz-picker__item" onClick={() => this.onChangeVizPlugin(plugin)} title={plugin.name}>
-        <img className="viz-picker__item__img" src={plugin.info.logos.small} />
-        <div className="viz-pikcer__item__name">{plugin.name}</div>
-      </div>
-    );
-  }
-
-  render() {
-    return <div className="viz-picker">{this.state.pluginList.map(this.renderVizPlugin)}</div>;
-  }
-}

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

@@ -0,0 +1,61 @@
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+import config, { PanelPlugin } from 'app/core/config';
+import _ from 'lodash';
+
+interface Props {
+  currentType: string;
+  onTypeChanged: (newType: PanelPlugin) => void;
+}
+
+interface State {
+  pluginList: PanelPlugin[];
+}
+
+export class VizTypePicker extends PureComponent<Props, State> {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      pluginList: this.getPanelPlugins(''),
+    };
+  }
+
+  getPanelPlugins(filter) {
+    let panels = _.chain(config.panels)
+      .filter({ hideFromList: false })
+      .map(item => item)
+      .value();
+
+    // add sort by sort property
+    return _.sortBy(panels, 'sort');
+  }
+
+  renderVizPlugin = (plugin, index) => {
+    const cssClass = classNames({
+      'viz-picker__item': true,
+      'viz-picker__item--selected': plugin.id === this.props.currentType,
+    });
+
+    return (
+      <div key={index} className={cssClass} onClick={() => this.props.onTypeChanged(plugin)} title={plugin.name}>
+        <img className="viz-picker__item-img" src={plugin.info.logos.small} />
+        <div className="viz-picker__item-name">{plugin.name}</div>
+      </div>
+    );
+  };
+
+  render() {
+    return (
+      <div className="viz-picker">
+        <div className="gf-form gf-form--grow">
+          <label className="gf-form--has-input-icon gf-form--grow">
+            <input type="text" className="gf-form-input" placeholder="Search type" />
+            <i className="gf-form-input-icon fa fa-search" />
+          </label>
+        </div>
+        <div className="viz-picker-list">{this.state.pluginList.map(this.renderVizPlugin)}</div>
+      </div>
+    );
+  }
+}

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

@@ -23,6 +23,9 @@ describe('AddPanelPanel', () => {
         hideFromList: false,
         name: 'Singlestat',
         sort: 2,
+        module: '',
+        baseUrl: '',
+        meta: {},
         info: {
           logos: {
             small: '',
@@ -34,6 +37,9 @@ describe('AddPanelPanel', () => {
         hideFromList: true,
         name: 'Hidden',
         sort: 100,
+        meta: {},
+        module: '',
+        baseUrl: '',
         info: {
           logos: {
             small: '',
@@ -45,6 +51,9 @@ describe('AddPanelPanel', () => {
         hideFromList: false,
         name: 'Graph',
         sort: 1,
+        meta: {},
+        module: '',
+        baseUrl: '',
         info: {
           logos: {
             small: '',
@@ -56,6 +65,9 @@ describe('AddPanelPanel', () => {
         hideFromList: false,
         name: 'Zabbix',
         sort: 100,
+        meta: {},
+        module: '',
+        baseUrl: '',
         info: {
           logos: {
             small: '',
@@ -67,6 +79,9 @@ describe('AddPanelPanel', () => {
         hideFromList: false,
         name: 'Piechart',
         sort: 100,
+        meta: {},
+        module: '',
+        baseUrl: '',
         info: {
           logos: {
             small: '',

public/app/features/panel/panel_directive.ts

@@ -26,7 +26,7 @@ var panelTemplate = `
   </div>
 
   <div class="panel-full-edit" ng-if="ctrl.panel.isEditing">
-    <div class="tabbed-view tabbed-view--panel-edit">
+    <div class="tabbed-view">
       <div class="tabbed-view-header">
         <h3 class="tabbed-view-panel-title">
           {{ctrl.pluginName}}

public/app/features/plugins/plugin_component.ts

@@ -95,7 +95,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
 
       PanelCtrl.templatePromise = getTemplate(PanelCtrl).then(template => {
         PanelCtrl.templateUrl = null;
-        PanelCtrl.template = `<grafana-panel ctrl="ctrl" class="panel-height-helper">${template}</grafana-panel>`;
+        PanelCtrl.template = `<grafana-panel ctrl="ctrl" class="panel-editor-container">${template}</grafana-panel>`;
         return componentInfo;
       });