mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
NewPanelEditor: Making angular panels reuse data and render on edit mode enter (#22229)
* First stab at angular panels load in new edit * Things are working
This commit is contained in:
Torkel Ödegaard
GitHub
parent
bfa959c66a
commit
d9414b4693
@ -110,10 +110,20 @@ export class PanelChromeAngular extends PureComponent<Props, State> {
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: Props, prevState: State) {
|
||||
if (prevProps.plugin !== this.props.plugin) {
|
||||
const { plugin, height, width, panel } = this.props;
|
||||
|
||||
if (prevProps.plugin !== plugin) {
|
||||
this.cleanUpAngularPanel();
|
||||
this.loadAngularPanel();
|
||||
}
|
||||
|
||||
if (prevProps.width !== width || prevProps.height !== height) {
|
||||
if (this.scopeProps) {
|
||||
this.scopeProps.size.height = height;
|
||||
this.scopeProps.size.width = width;
|
||||
panel.events.emit(PanelEvents.panelSizeChanged);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
loadAngularPanel() {
|
||||
@ -121,8 +131,6 @@ export class PanelChromeAngular extends PureComponent<Props, State> {
|
||||
|
||||
// if we have no element or already have loaded the panel return
|
||||
if (!this.element || panel.angularPanel) {
|
||||
this.scopeProps.size.height = height;
|
||||
this.scopeProps.size.width = width;
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@ -23,16 +23,12 @@ export class PanelResizer extends PureComponent<Props, State> {
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
const { panel } = this.props;
|
||||
|
||||
this.state = {
|
||||
editorHeight: this.initialHeight,
|
||||
};
|
||||
|
||||
this.throttledChangeHeight = throttle(this.changeHeight, 20, { trailing: true });
|
||||
this.throttledResizeDone = throttle(() => {
|
||||
panel.resizeDone();
|
||||
}, 50);
|
||||
}
|
||||
|
||||
get largestHeight() {
|
||||
@ -57,7 +53,6 @@ export class PanelResizer extends PureComponent<Props, State> {
|
||||
onDrag: DraggableEventHandler = (evt, data) => {
|
||||
const newHeight = this.state.editorHeight + data.y;
|
||||
this.throttledChangeHeight(newHeight);
|
||||
this.throttledResizeDone();
|
||||
};
|
||||
|
||||
render() {
|
||||
|
||||
@ -48,6 +48,12 @@ class MetricsPanelCtrl extends PanelCtrl {
|
||||
|
||||
this.events.on(PanelEvents.refresh, this.onMetricsPanelRefresh.bind(this));
|
||||
this.events.on(PanelEvents.panelTeardown, this.onPanelTearDown.bind(this));
|
||||
this.events.on(PanelEvents.componentDidMount, this.onMetricsPanelMounted.bind(this));
|
||||
}
|
||||
|
||||
private onMetricsPanelMounted() {
|
||||
const queryRunner = this.panel.getQueryRunner();
|
||||
this.querySubscription = queryRunner.getData().subscribe(this.panelDataObserver);
|
||||
}
|
||||
|
||||
private onPanelTearDown() {
|
||||
@ -174,10 +180,6 @@ class MetricsPanelCtrl extends PanelCtrl {
|
||||
const panel = this.panel as PanelModel;
|
||||
const queryRunner = panel.getQueryRunner();
|
||||
|
||||
if (!this.querySubscription) {
|
||||
this.querySubscription = queryRunner.getData().subscribe(this.panelDataObserver);
|
||||
}
|
||||
|
||||
return queryRunner.run({
|
||||
datasource: panel.datasource,
|
||||
queries: panel.targets,
|
||||
|
||||
@ -164,6 +164,7 @@ class GraphCtrl extends MetricsPanelCtrl {
|
||||
this.events.on(PanelEvents.initPanelActions, this.onInitPanelActions.bind(this));
|
||||
|
||||
this.onDataLinksChange = this.onDataLinksChange.bind(this);
|
||||
this.annotationsPromise = Promise.resolve({ annotations: [] });
|
||||
}
|
||||
|
||||
onInitEditMode() {
|
||||
|
||||
20
yarn.lock
20
yarn.lock
@ -10026,12 +10026,7 @@ diff-sequences@^24.9.0:
|
||||
resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
|
||||
integrity sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==
|
||||
|
||||
diff@3.5.0:
|
||||
version "3.5.0"
|
||||
resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
|
||||
integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==
|
||||
|
||||
diff@^3.0.0:
|
||||
diff@3.5.0, diff@^3.0.0:
|
||||
version "3.5.0"
|
||||
resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
|
||||
integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==
|
||||
@ -14942,7 +14937,7 @@ js-tokens@^3.0.2:
|
||||
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
|
||||
integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls=
|
||||
|
||||
js-yaml@3.13.1, js-yaml@^3.13.1, js-yaml@^3.4.6, js-yaml@^3.5.1, js-yaml@^3.5.4:
|
||||
js-yaml@3.13.1, js-yaml@^3.13.1, js-yaml@^3.4.6, js-yaml@^3.5.1, js-yaml@^3.5.4, js-yaml@~3.13.0:
|
||||
version "3.13.1"
|
||||
resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
|
||||
integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
|
||||
@ -23170,7 +23165,7 @@ stylis@3.5.0:
|
||||
resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.0.tgz#016fa239663d77f868fef5b67cf201c4b7c701e1"
|
||||
integrity sha512-pP7yXN6dwMzAR29Q0mBrabPCe0/mNO1MSr93bhay+hcZondvMMTpeGyd8nbhYJdyperNT2DRxONQuUGcJr5iPw==
|
||||
|
||||
supports-color@5.5.0, supports-color@^5.2.0, supports-color@^5.3.0, supports-color@^5.5.0:
|
||||
supports-color@5.5.0, supports-color@^5.2.0, supports-color@^5.3.0, supports-color@^5.4.0, supports-color@^5.5.0:
|
||||
version "5.5.0"
|
||||
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
|
||||
integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
|
||||
@ -25034,20 +25029,13 @@ which-pm-runs@^1.0.0:
|
||||
resolved "https://registry.yarnpkg.com/which-pm-runs/-/which-pm-runs-1.0.0.tgz#670b3afbc552e0b55df6b7780ca74615f23ad1cb"
|
||||
integrity sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=
|
||||
|
||||
which@1, which@1.3.1, which@^1.2.10, which@^1.2.14, which@^1.2.4, which@^1.2.9, which@^1.3.0, which@^1.3.1:
|
||||
which@1, which@1.3.1, which@^1.2.10, which@^1.2.14, which@^1.2.4, which@^1.2.9, which@^1.3.0, which@^1.3.1, which@~1.3.0:
|
||||
version "1.3.1"
|
||||
resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
|
||||
integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
|
||||
dependencies:
|
||||
isexe "^2.0.0"
|
||||
|
||||
which@~1.2.1:
|
||||
version "1.2.14"
|
||||
resolved "https://registry.yarnpkg.com/which/-/which-1.2.14.tgz#9a87c4378f03e827cecaf1acdf56c736c01c14e5"
|
||||
integrity sha1-mofEN48D6CfOyvGs31bHNsAcFOU=
|
||||
dependencies:
|
||||
isexe "^2.0.0"
|
||||
|
||||
wide-align@1.1.3, wide-align@^1.1.0:
|
||||
version "1.1.3"
|
||||
resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user