wip: minor progres on react panels edit mode

public/app/core/config.ts

@@ -7,9 +7,20 @@ export interface BuildInfo {
   env: string;
 }
 
+export interface PanelPlugin {
+  id: string;
+  name: string;
+  meta: any;
+  hideFromList: boolean;
+  module: string;
+  baseUrl: string;
+  info: any;
+  sort: number;
+}
+
 export class Settings {
   datasources: any;
-  panels: any;
+  panels: PanelPlugin[];
   appSubUrl: string;
   window_title_prefix: string;
   buildInfo: BuildInfo;

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;
       });
 

public/sass/components/_panel_add_panel.scss

@@ -85,10 +85,6 @@
   height: calc(100% - 15px);
 }
 
-.add-panel__item-icon {
-  padding: 2px;
-}
-
 .add-panel__searchbar {
   width: 100%;
   margin-bottom: 10px;

public/sass/components/_tabbed_view.scss

@@ -1,28 +1,16 @@
 .tabbed-view {
-  padding: $spacer*3;
   margin-bottom: $dashboard-padding;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 
-  &.tabbed-view--panel-edit {
-    padding: 0;
-
-    .tabbed-view-header {
-      padding: 0px 25px;
-      background: none;
-    }
-  }
-
-  &.tabbed-view--panel-edit-new {
+  &.tabbed-view--new {
     padding: 10px 0 0 0;
-
-    .tabbed-view-header {
-      padding: 0px;
-      background: none;
-    }
+    height: 100%;
   }
 }
 
 .tabbed-view-header {
-  background: $page-header-bg;
   box-shadow: $page-header-shadow;
   border-bottom: 1px solid $page-header-border-color;
   @include clearfix();
@@ -58,6 +46,7 @@
 
 .tabbed-view-body {
   padding: $spacer*2 $spacer;
+  height: 100%;
 
   &--small {
     min-height: 0px;

public/sass/components/_viz_editor.scss

@@ -1,10 +1,12 @@
 .viz-editor {
   display: flex;
+  height: 100%;
 }
 
 .viz-editor-col1 {
-  width: 150px;
-  background: $panel-bg;
+  width: 240px;
+  height: 100%;
+  margin-right: 40px;
 }
 
 .viz-editor-col2 {
@@ -12,11 +14,15 @@
 }
 
 .viz-picker {
+  display: flex;
+  flex-direction: column;
+}
+
+.viz-picker-list {
   padding: 3px 8px;
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  overflow: auto;
+  flex-direction: column;
+  overflow: hidden;
   height: 100%;
 }
 
@@ -25,17 +31,29 @@
   box-shadow: $card-shadow;
 
   border-radius: 3px;
-  padding: $spacer/3 $spacer;
-  width: 31%;
+  padding: $spacer;
+  width: 100%;
   height: 60px;
   text-align: center;
   margin: $gf-form-margin;
   cursor: pointer;
+  display: flex;
 
-  &.active,
   &:hover {
     background: $card-background-hover;
   }
+
+  &--selected {
+    border: 1px solid $orange;
+
+    .viz-picker__item-name {
+      color: $text-color;
+    }
+
+    .viz-picker__item-img {
+      filter: saturate(100%);
+    }
+  }
 }
 
 .viz-picker__item-name {
@@ -43,8 +61,15 @@
   overflow: hidden;
   white-space: nowrap;
   font-size: $font-size-sm;
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+  padding-left: $spacer;
+  font-size: $font-size-md;
+  color: $text-muted;
 }
 
 .viz-picker__item-img {
-  height: calc(100% - 15px);
+  height: 100%;
+  filter: saturate(30%);
 }

public/sass/pages/_dashboard.scss

@@ -1,7 +1,8 @@
 .dashboard-container {
   padding: $dashboard-padding;
   width: 100%;
-  min-height: 100%;
+  height: 100%;
+  box-sizing: border-box;
 }
 
 .template-variable {
@@ -28,12 +29,17 @@ div.flot-text {
   height: 100%;
 }
 
+.panel-editor-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
 .panel-container {
   background-color: $panel-bg;
   border: $panel-border;
   position: relative;
   border-radius: 3px;
-  height: 100%;
 
   &.panel-transparent {
     background-color: transparent;
@@ -233,5 +239,5 @@ div.flot-text {
 }
 
 .panel-full-edit {
-  margin: $dashboard-padding (-$dashboard-padding) 0 (-$dashboard-padding);
+  padding-top: $dashboard-padding;
 }