wip: react panels editor mode, tabs working

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

@@ -1,61 +1,54 @@
 import React from 'react';
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
-import { getAngularLoader, AngularComponent } from 'app/core/services/angular_loader';
+import { store } from 'app/stores/store';
+import { observer } from 'mobx-react';
+import { QueriesTab } from './QueriesTab';
+import classNames from 'classnames';
 
 interface PanelEditorProps {
   panel: PanelModel;
   dashboard: DashboardModel;
 }
 
-export class PanelEditor extends React.Component<PanelEditorProps, any> {
-  queryElement: any;
-  queryComp: AngularComponent;
-  tabs: any[];
+interface PanelEditorTab {
+  id: string;
+  text: string;
+  icon: string;
+}
 
+@observer
+export class PanelEditor extends React.Component<PanelEditorProps, any> {
   constructor(props) {
     super(props);
-
-    this.tabs = [
-      { id: 'queries', text: 'Queries', icon: 'fa fa-database' },
-      { id: 'viz', text: 'Visualization', icon: 'fa fa-line-chart' },
-    ];
   }
 
-  componentDidMount() {
-    if (!this.queryElement) {
-      return;
-    }
-
-    let loader = getAngularLoader();
-    var template = '<metrics-tab />';
-    let scopeProps = {
-      ctrl: {
-        panel: this.props.panel,
-        dashboard: this.props.dashboard,
-        panelCtrl: {
-          panel: this.props.panel,
-          dashboard: this.props.dashboard,
-        },
-      },
-    };
+  renderQueriesTab() {
+    return <QueriesTab panel={this.props.panel} dashboard={this.props.dashboard} />;
+  }
 
-    this.queryComp = loader.load(this.queryElement, scopeProps, template);
+  renderVizTab() {
+    return <h2>Visualizations</h2>;
   }
 
-  onChangeTab = tabName => {};
+  onChangeTab = (tab: PanelEditorTab) => {
+    store.view.updateQuery({ tab: tab.id }, false);
+  };
 
   render() {
+    const activeTab: string = store.view.query.get('tab') || 'queries';
+    const tabs: PanelEditorTab[] = [
+      { id: 'queries', text: 'Queries', icon: 'fa fa-database' },
+      { id: 'viz', text: 'Visualization', icon: 'fa fa-line-chart' },
+    ];
+
     return (
       <div className="tabbed-view tabbed-view--panel-edit-new">
         <div className="tabbed-view-header">
           <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>
+            {tabs.map(tab => {
+              return <TabItem tab={tab} activeTab={activeTab} onClick={this.onChangeTab} key={tab.id} />;
+            })}
           </ul>
 
           <button className="tabbed-view-close-btn" ng-click="ctrl.exitFullscreen();">
@@ -64,9 +57,32 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> {
         </div>
 
         <div className="tabbed-view-body">
-          <div ref={element => (this.queryElement = element)} className="panel-height-helper" />
+          {activeTab === 'queries' && this.renderQueriesTab()}
+          {activeTab === 'viz' && this.renderVizTab()}
         </div>
       </div>
     );
   }
 }
+
+interface TabItemParams {
+  tab: PanelEditorTab;
+  activeTab: string;
+  onClick: (tab: PanelEditorTab) => void;
+}
+
+function TabItem({ tab, activeTab, onClick }: TabItemParams) {
+  const tabClasses = classNames({
+    'gf-tabs-link': true,
+    active: activeTab === tab.id,
+  });
+
+  return (
+    <li className="gf-tabs-item" key={tab.id}>
+      <a className={tabClasses} onClick={() => onClick(tab)}>
+        <i className={tab.icon} />
+        {tab.text}
+      </a>
+    </li>
+  );
+}

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

@@ -11,11 +11,14 @@ interface PanelHeaderProps {
 
 export class PanelHeader extends React.Component<PanelHeaderProps, any> {
   onEditPanel = () => {
-    store.view.updateQuery({
-      panelId: this.props.panel.id,
-      edit: true,
-      fullscreen: true,
-    });
+    store.view.updateQuery(
+      {
+        panelId: this.props.panel.id,
+        edit: true,
+        fullscreen: true,
+      },
+      false
+    );
   };
 
   render() {

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { PanelModel } from '../panel_model';
+import { DashboardModel } from '../dashboard_model';
+import { getAngularLoader, AngularComponent } from 'app/core/services/angular_loader';
+
+interface Props {
+  panel: PanelModel;
+  dashboard: DashboardModel;
+}
+
+export class QueriesTab extends React.Component<Props, any> {
+  element: any;
+  component: AngularComponent;
+
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    if (!this.element) {
+      return;
+    }
+
+    let loader = getAngularLoader();
+    var template = '<metrics-tab />';
+    let scopeProps = {
+      ctrl: {
+        panel: this.props.panel,
+        dashboard: this.props.dashboard,
+        panelCtrl: {
+          panel: this.props.panel,
+          dashboard: this.props.dashboard,
+        },
+      },
+    };
+
+    this.component = loader.load(this.element, scopeProps, template);
+  }
+
+  componentWillUnmount() {
+    if (this.component) {
+      this.component.destroy();
+    }
+  }
+
+  render() {
+    return <div ref={element => (this.element = element)} className="panel-height-helper" />;
+  }
+}

public/app/stores/ViewStore/ViewStore.ts

@@ -23,8 +23,10 @@ export const ViewStore = types
   }))
   .actions(self => {
     // querystring only
-    function updateQuery(query: any) {
-      self.query.clear();
+    function updateQuery(query: any, clear = true) {
+      if (clear) {
+        self.query.clear();
+      }
       for (let key of Object.keys(query)) {
         if (query[key]) {
           self.query.set(key, query[key]);