Torkel Ödegaard 7 лет назад
Родитель
Сommit
dec62d7340

+ 1 - 1
public/app/features/dashboard/dashgrid/DashboardGrid.tsx

@@ -139,7 +139,7 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
   }
   }
 
 
   onViewModeChanged(payload) {
   onViewModeChanged(payload) {
-    this.setState({ animated: payload.fullscreen });
+    this.setState({ animated: !payload.fullscreen });
   }
   }
 
 
   updateGridPos(item, layout) {
   updateGridPos(item, layout) {

+ 11 - 1
public/app/features/dashboard/dashgrid/PanelEditor.tsx

@@ -5,6 +5,7 @@ import { store } from 'app/stores/store';
 import { observer } from 'mobx-react';
 import { observer } from 'mobx-react';
 import { QueriesTab } from './QueriesTab';
 import { QueriesTab } from './QueriesTab';
 import classNames from 'classnames';
 import classNames from 'classnames';
+import { VizPicker } from './VizPicker';
 
 
 interface PanelEditorProps {
 interface PanelEditorProps {
   panel: PanelModel;
   panel: PanelModel;
@@ -35,7 +36,16 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> {
   }
   }
 
 
   renderVizTab() {
   renderVizTab() {
-    return <h2>Visualizations</h2>;
+    return (
+      <div className="viz-editor">
+        <div className="viz-editor-list">
+          <VizPicker />
+        </div>
+        <div className="viz-editor-options">
+          <h5 className="section-heading">Options</h5>
+        </div>
+      </div>
+    );
   }
   }
 
 
   onChangeTab = (tab: PanelEditorTab) => {
   onChangeTab = (tab: PanelEditorTab) => {

+ 46 - 0
public/app/features/dashboard/dashgrid/VizPicker.tsx

@@ -0,0 +1,46 @@
+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>;
+  }
+}