mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
wip: adding general tab for react panel edit mode
This commit is contained in:
parent
fade3c47ca
commit
159c5cdb63
60
public/app/features/dashboard/dashgrid/GeneralTab.tsx
Normal file
60
public/app/features/dashboard/dashgrid/GeneralTab.tsx
Normal file
@ -0,0 +1,60 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
|
||||
import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
|
||||
import { EditorTabBody } from './EditorTabBody';
|
||||
|
||||
import { PanelModel } from '../panel_model';
|
||||
import { DashboardModel } from '../dashboard_model';
|
||||
|
||||
interface Props {
|
||||
panel: PanelModel;
|
||||
dashboard: DashboardModel;
|
||||
}
|
||||
|
||||
export class GeneralTab extends PureComponent<Props> {
|
||||
element: any;
|
||||
component: AngularComponent;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (!this.element) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { panel, dashboard } = this.props;
|
||||
|
||||
const loader = getAngularLoader();
|
||||
const template = '<panel-general-tab />';
|
||||
const scopeProps = {
|
||||
ctrl: {
|
||||
panel: panel,
|
||||
dashboard: dashboard,
|
||||
},
|
||||
};
|
||||
|
||||
this.component = loader.load(this.element, scopeProps, template);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.component) {
|
||||
this.component.destroy();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const currentDataSource = {
|
||||
title: 'ProductionDB',
|
||||
imgSrc: 'public/app/plugins/datasource/prometheus/img/prometheus_logo.svg',
|
||||
render: () => <h2>hello</h2>,
|
||||
};
|
||||
|
||||
return (
|
||||
<EditorTabBody main={currentDataSource} toolbarItems={[]}>
|
||||
<div ref={element => (this.element = element)} style={{ width: '100%' }} />
|
||||
</EditorTabBody>
|
||||
);
|
||||
}
|
||||
}
|
@ -3,6 +3,7 @@ import classNames from 'classnames';
|
||||
|
||||
import { QueriesTab } from './QueriesTab';
|
||||
import { VisualizationTab } from './VisualizationTab';
|
||||
import { GeneralTab } from './GeneralTab';
|
||||
|
||||
import { store } from 'app/store/store';
|
||||
import { updateLocation } from 'app/core/actions';
|
||||
@ -31,9 +32,9 @@ export class PanelEditor extends PureComponent<PanelEditorProps> {
|
||||
super(props);
|
||||
|
||||
this.tabs = [
|
||||
{ id: 'general', text: 'General', icon: 'gicon gicon-preferences' },
|
||||
{ id: 'queries', text: 'Queries', icon: 'fa fa-database' },
|
||||
{ id: 'visualization', text: 'Visualization', icon: 'fa fa-line-chart' },
|
||||
{ id: 'alert', text: 'Alert', icon: 'gicon gicon-alert' },
|
||||
];
|
||||
}
|
||||
|
||||
@ -81,6 +82,7 @@ export class PanelEditor extends PureComponent<PanelEditorProps> {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{activeTab === 'general' && <GeneralTab panel={panel} dashboard={dashboard} />}
|
||||
{activeTab === 'queries' && <QueriesTab panel={panel} dashboard={dashboard} />}
|
||||
{activeTab === 'visualization' && (
|
||||
<VisualizationTab panel={panel} dashboard={dashboard} plugin={plugin} onTypeChanged={onTypeChanged} />
|
||||
|
23
public/app/features/panel/GeneralTabCtrl.ts
Normal file
23
public/app/features/panel/GeneralTabCtrl.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import coreModule from 'app/core/core_module';
|
||||
import { DashboardModel } from '../dashboard/dashboard_model';
|
||||
|
||||
export class GeneralTabCtrl {
|
||||
panelCtrl: any;
|
||||
|
||||
/** @ngInject */
|
||||
constructor($scope) {
|
||||
this.panelCtrl = $scope.ctrl;
|
||||
}
|
||||
}
|
||||
|
||||
/** @ngInject */
|
||||
export function generalTab() {
|
||||
'use strict';
|
||||
return {
|
||||
restrict: 'E',
|
||||
templateUrl: 'public/app/features/panel/partials/general_tab.html',
|
||||
controller: GeneralTabCtrl,
|
||||
};
|
||||
}
|
||||
|
||||
coreModule.directive('panelGeneralTab', generalTab);
|
@ -12,6 +12,8 @@ import {
|
||||
sharePanel as sharePanelUtil,
|
||||
} from 'app/features/dashboard/utils/panel';
|
||||
|
||||
import { generalTab } from './GeneralTabCtrl';
|
||||
|
||||
import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, PANEL_HEADER_HEIGHT, PANEL_BORDER } from 'app/core/constants';
|
||||
|
||||
export class PanelCtrl {
|
||||
@ -91,7 +93,7 @@ export class PanelCtrl {
|
||||
|
||||
initEditMode() {
|
||||
this.editorTabs = [];
|
||||
this.addEditorTab('General', 'public/app/partials/panelgeneral.html');
|
||||
this.addEditorTab('General', generalTab);
|
||||
|
||||
this.editModeInitiated = true;
|
||||
this.events.emit('init-edit-mode', null);
|
||||
|
Loading…
Reference in New Issue
Block a user