EVOLUTION-MANAGER

Edit File: PanelEditor.tsx

import React, { PureComponent } from 'react';
import { css } from 'emotion';
import { GrafanaTheme } from '@grafana/data';
import { stylesFactory } from '@grafana/ui';
import config from 'app/core/config';

import { PanelModel } from '../../state/PanelModel';
import { DashboardModel } from '../../state/DashboardModel';
import { DashboardPanel } from '../../dashgrid/DashboardPanel';
import { QueriesTab } from '../../panel_editor/QueriesTab';

interface Props {
  dashboard: DashboardModel;
  panel: PanelModel;
}

interface State {
  dirtyPanel?: PanelModel;
}

export class PanelEditor extends PureComponent<Props, State> {
  state: State = {};

componentDidMount() {
    const { panel } = this.props;
    const dirtyPanel = new PanelModel(panel.getSaveModel());

this.setState({ dirtyPanel });
  }

render() {
    const { dashboard } = this.props;
    const { dirtyPanel } = this.state;

const styles = getStyles(config.theme);

if (!dirtyPanel) {
      return null;
    }

return (
      <div className={styles.wrapper}>
        <div className={styles.leftPane}>
          <div className={styles.leftPaneViz}>
            <DashboardPanel
              dashboard={dashboard}
              panel={dirtyPanel}
              isEditing={false}
              isFullscreen={false}
              isInView={true}
            />
          </div>
          <div className={styles.leftPaneData}>
            <QueriesTab panel={dirtyPanel} dashboard={dashboard} />;
          </div>
        </div>
        <div className={styles.rightPane}>Visualization settings</div>
      </div>
    );
  }
}