mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Moved panel editing components to it's own folder
This commit is contained in:
parent
b9a3239edb
commit
827a292777
@ -6,7 +6,7 @@ import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoa
|
|||||||
import appEvents from 'app/core/app_events';
|
import appEvents from 'app/core/app_events';
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
import { EditorTabBody, EditorToolbarView } from '../dashboard/dashgrid/EditorTabBody';
|
import { EditorTabBody, EditorToolbarView } from '../dashboard/panel_editor/EditorTabBody';
|
||||||
import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
|
import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
|
||||||
import StateHistory from './StateHistory';
|
import StateHistory from './StateHistory';
|
||||||
import 'app/features/alerting/AlertTabCtrl';
|
import 'app/features/alerting/AlertTabCtrl';
|
||||||
|
@ -9,7 +9,7 @@ import { AddPanelPanel } from './AddPanelPanel';
|
|||||||
import { getPanelPluginNotFound } from './PanelPluginNotFound';
|
import { getPanelPluginNotFound } from './PanelPluginNotFound';
|
||||||
import { DashboardRow } from './DashboardRow';
|
import { DashboardRow } from './DashboardRow';
|
||||||
import { PanelChrome } from './PanelChrome';
|
import { PanelChrome } from './PanelChrome';
|
||||||
import { PanelEditor } from './PanelEditor';
|
import { PanelEditor } from '../panel_editor/PanelEditor';
|
||||||
|
|
||||||
import { PanelModel } from '../panel_model';
|
import { PanelModel } from '../panel_model';
|
||||||
import { DashboardModel } from '../dashboard_model';
|
import { DashboardModel } from '../dashboard_model';
|
||||||
|
@ -1,71 +0,0 @@
|
|||||||
import React, { KeyboardEvent, Component } from 'react';
|
|
||||||
|
|
||||||
interface State {
|
|
||||||
selected: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface KeyboardNavigationProps {
|
|
||||||
onKeyDown: (evt: KeyboardEvent<EventTarget>, maxSelectedIndex: number, onEnterAction: () => void) => void;
|
|
||||||
onMouseEnter: (select: number) => void;
|
|
||||||
selected: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
render: (injectProps: any) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
class KeyboardNavigation extends Component<Props, State> {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
|
|
||||||
this.state = {
|
|
||||||
selected: 0,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
goToNext = (maxSelectedIndex: number) => {
|
|
||||||
const nextIndex = this.state.selected >= maxSelectedIndex ? 0 : this.state.selected + 1;
|
|
||||||
this.setState({
|
|
||||||
selected: nextIndex,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
goToPrev = (maxSelectedIndex: number) => {
|
|
||||||
const nextIndex = this.state.selected <= 0 ? maxSelectedIndex : this.state.selected - 1;
|
|
||||||
this.setState({
|
|
||||||
selected: nextIndex,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
onKeyDown = (evt: KeyboardEvent, maxSelectedIndex: number, onEnterAction: any) => {
|
|
||||||
if (evt.key === 'ArrowDown') {
|
|
||||||
evt.preventDefault();
|
|
||||||
this.goToNext(maxSelectedIndex);
|
|
||||||
}
|
|
||||||
if (evt.key === 'ArrowUp') {
|
|
||||||
evt.preventDefault();
|
|
||||||
this.goToPrev(maxSelectedIndex);
|
|
||||||
}
|
|
||||||
if (evt.key === 'Enter' && onEnterAction) {
|
|
||||||
onEnterAction();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
onMouseEnter = (mouseEnterIndex: number) => {
|
|
||||||
this.setState({
|
|
||||||
selected: mouseEnterIndex,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const injectProps = {
|
|
||||||
onKeyDown: this.onKeyDown,
|
|
||||||
onMouseEnter: this.onMouseEnter,
|
|
||||||
selected: this.state.selected,
|
|
||||||
};
|
|
||||||
|
|
||||||
return <>{this.props.render({ ...injectProps })}</>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default KeyboardNavigation;
|
|
@ -1,31 +0,0 @@
|
|||||||
import angular from 'angular';
|
|
||||||
import coreModule from 'app/core/core_module';
|
|
||||||
|
|
||||||
export interface AttachedPanel {
|
|
||||||
destroy();
|
|
||||||
}
|
|
||||||
|
|
||||||
export class PanelLoader {
|
|
||||||
/** @ngInject */
|
|
||||||
constructor(private $compile, private $rootScope) {}
|
|
||||||
|
|
||||||
load(elem, panel, dashboard): AttachedPanel {
|
|
||||||
const template = '<plugin-component type="panel" class="panel-height-helper"></plugin-component>';
|
|
||||||
const panelScope = this.$rootScope.$new();
|
|
||||||
panelScope.panel = panel;
|
|
||||||
panelScope.dashboard = dashboard;
|
|
||||||
|
|
||||||
const compiledElem = this.$compile(template)(panelScope);
|
|
||||||
const rootNode = angular.element(elem);
|
|
||||||
rootNode.append(compiledElem);
|
|
||||||
|
|
||||||
return {
|
|
||||||
destroy: () => {
|
|
||||||
panelScope.$destroy();
|
|
||||||
compiledElem.remove();
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
coreModule.service('panelLoader', PanelLoader);
|
|
Loading…
Reference in New Issue
Block a user