Skip to content

N
nexpie-grafana-theme
Commit d9414b46 by Torkel Ödegaard Committed by GitHub
Options

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
parent bfa959c6
Showing with 22 additions and 28 deletions
public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx
...@@ -110,10 +110,20 @@ export class PanelChromeAngular extends PureComponent<Props, State> { ...@@ -110,10 +110,20 @@ export class PanelChromeAngular extends PureComponent<Props, State> {
} }
componentDidUpdate(prevProps: Props, prevState: 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.cleanUpAngularPanel();
this.loadAngularPanel(); 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() { loadAngularPanel() {
...@@ -121,8 +131,6 @@ export class PanelChromeAngular extends PureComponent<Props, State> { ...@@ -121,8 +131,6 @@ export class PanelChromeAngular extends PureComponent<Props, State> {
// if we have no element or already have loaded the panel return // if we have no element or already have loaded the panel return
if (!this.element || panel.angularPanel) { if (!this.element || panel.angularPanel) {
this.scopeProps.size.height = height;
this.scopeProps.size.width = width;
return; return;
} }
......
public/app/features/dashboard/dashgrid/PanelResizer.tsx
...@@ -23,16 +23,12 @@ export class PanelResizer extends PureComponent<Props, State> { ...@@ -23,16 +23,12 @@ export class PanelResizer extends PureComponent<Props, State> {
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
const { panel } = this.props;
this.state = { this.state = {
editorHeight: this.initialHeight, editorHeight: this.initialHeight,
}; };
this.throttledChangeHeight = throttle(this.changeHeight, 20, { trailing: true }); this.throttledChangeHeight = throttle(this.changeHeight, 20, { trailing: true });
this.throttledResizeDone = throttle(() => {
panel.resizeDone();
}, 50);
} }
get largestHeight() { get largestHeight() {
...@@ -57,7 +53,6 @@ export class PanelResizer extends PureComponent<Props, State> { ...@@ -57,7 +53,6 @@ export class PanelResizer extends PureComponent<Props, State> {
onDrag: DraggableEventHandler = (evt, data) => { onDrag: DraggableEventHandler = (evt, data) => {
const newHeight = this.state.editorHeight + data.y; const newHeight = this.state.editorHeight + data.y;
this.throttledChangeHeight(newHeight); this.throttledChangeHeight(newHeight);
this.throttledResizeDone();
}; };
render() { render() {
......
public/app/features/panel/metrics_panel_ctrl.ts
...@@ -48,6 +48,12 @@ class MetricsPanelCtrl extends PanelCtrl { ...@@ -48,6 +48,12 @@ class MetricsPanelCtrl extends PanelCtrl {
this.events.on(PanelEvents.refresh, this.onMetricsPanelRefresh.bind(this)); this.events.on(PanelEvents.refresh, this.onMetricsPanelRefresh.bind(this));
this.events.on(PanelEvents.panelTeardown, this.onPanelTearDown.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() { private onPanelTearDown() {
...@@ -174,10 +180,6 @@ class MetricsPanelCtrl extends PanelCtrl { ...@@ -174,10 +180,6 @@ class MetricsPanelCtrl extends PanelCtrl {
const panel = this.panel as PanelModel; const panel = this.panel as PanelModel;
const queryRunner = panel.getQueryRunner(); const queryRunner = panel.getQueryRunner();
if (!this.querySubscription) {
this.querySubscription = queryRunner.getData().subscribe(this.panelDataObserver);
}
return queryRunner.run({ return queryRunner.run({
datasource: panel.datasource, datasource: panel.datasource,
queries: panel.targets, queries: panel.targets,
......
public/app/plugins/panel/graph/module.ts
...@@ -164,6 +164,7 @@ class GraphCtrl extends MetricsPanelCtrl { ...@@ -164,6 +164,7 @@ class GraphCtrl extends MetricsPanelCtrl {
this.events.on(PanelEvents.initPanelActions, this.onInitPanelActions.bind(this)); this.events.on(PanelEvents.initPanelActions, this.onInitPanelActions.bind(this));
this.onDataLinksChange = this.onDataLinksChange.bind(this); this.onDataLinksChange = this.onDataLinksChange.bind(this);
this.annotationsPromise = Promise.resolve({ annotations: [] });
} }
onInitEditMode() { onInitEditMode() {
......
yarn.lock
...@@ -10026,12 +10026,7 @@ diff-sequences@^24.9.0: ...@@ -10026,12 +10026,7 @@ diff-sequences@^24.9.0:
resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5" resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
integrity sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew== integrity sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==
diff@3.5.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==
diff@^3.0.0:
version "3.5.0" version "3.5.0"
resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12" resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA== integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==
...@@ -14942,7 +14937,7 @@ js-tokens@^3.0.2: ...@@ -14942,7 +14937,7 @@ js-tokens@^3.0.2:
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls= 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" version "3.13.1"
resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw== integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
...@@ -23170,7 +23165,7 @@ stylis@3.5.0: ...@@ -23170,7 +23165,7 @@ stylis@3.5.0:
resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.0.tgz#016fa239663d77f868fef5b67cf201c4b7c701e1" resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.0.tgz#016fa239663d77f868fef5b67cf201c4b7c701e1"
integrity sha512-pP7yXN6dwMzAR29Q0mBrabPCe0/mNO1MSr93bhay+hcZondvMMTpeGyd8nbhYJdyperNT2DRxONQuUGcJr5iPw== 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" version "5.5.0"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow== integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
...@@ -25034,20 +25029,13 @@ which-pm-runs@^1.0.0: ...@@ -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" resolved "https://registry.yarnpkg.com/which-pm-runs/-/which-pm-runs-1.0.0.tgz#670b3afbc552e0b55df6b7780ca74615f23ad1cb"
integrity sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs= 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" version "1.3.1"
resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a" resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ== integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
dependencies: dependencies:
isexe "^2.0.0" 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: wide-align@1.1.3, wide-align@^1.1.0:
version "1.1.3" version "1.1.3"
resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457" resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment