Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dashboards: Angular Deprecation causes page to break #87960

Open
the-it opened this issue May 16, 2024 · 3 comments
Open

Dashboards: Angular Deprecation causes page to break #87960

the-it opened this issue May 16, 2024 · 3 comments
Labels
area/dashboard type/angular-2-react Angular -> React migration

Comments

@the-it
Copy link
Member

the-it commented May 16, 2024

What happened?

We run some non-cloud Grafana instances in our internal clusters as a backup for our product teams.

Today I noticed the Angular deprecation banner and tried the "Try migration"-button to see what diff I need to apply. The button was doing nothing. After that I tried to edit the panel via the menu in the top right corner of the panel (even the click on the menu was enough). This caused the page to break.

An unexpected error happened
Details
TypeError: Cannot read properties of undefined (reading 'ctrl')

    at $e (https://<internal_url>/grafana/public/build/2540.201dde33154919584644.js:1500:92243)
    at Le (https://<internal_url>/grafana/public/build/2540.201dde33154919584644.js:1500:92896)
    at div
    at div
    at E (https://<internal_url>/grafana/public/build/8288.8461d7d2958fa839bf3a.js:1034:77776)
    at w (https://<internal_url>/grafana/public/build/8288.8461d7d2958fa839bf3a.js:1034:75408)
    at div
    at Di (https://<internal_url>/grafana/public/build/8288.8461d7d2958fa839bf3a.js:1107:25754)
    at div
    at r (https://<internal_url>/grafana/public/build/2540.201dde33154919584644.js:83:37968)
    at https://<internal_url>/grafana/public/build/2540.201dde33154919584644.js:63:121433
    at y (https://<internal_url>/grafana/public/build/2540.201dde33154919584644.js:83:26316)
    at div
    at section
    at C (https://<internal_url>/grafana/public/build/2540.201dde33154919584644.js:83:30615)
    at we (https://<internal_url>/grafana/public/build/2540.201dde33154919584644.js:1500:93108)
    at zo (https://<internal_url>/grafana/public/build/8288.8461d7d2958fa839bf3a.js:1352:121969)
    at div
    at f (https://<internal_url>/grafana/public/build/2540.201dde33154919584644.js:1500:81755)
    at On (https://<internal_url>/grafana/public/build/2540.201dde33154919584644.js:1500:108928)
    at zo (https://<internal_url>/grafana/public/build/8288.8461d7d2958fa839bf3a.js:1352:121969)
    at div
    at https://<internal_url>/grafana/public/build/6263.860a6c52b74968c363d0.js:4:11197
    at S (https://<internal_url>/grafana/public/build/8288.8461d7d2958fa839bf3a.js:1003:3210)
    at w (https://<internal_url>/grafana/public/build/8288.8461d7d2958fa839bf3a.js:977:70255)
    at X (https://<internal_url>/grafana/public/build/6263.860a6c52b74968c363d0.js:4:12500)
    at div
    at u (https://<internal_url>/grafana/public/build/6263.860a6c52b74968c363d0.js:4:21399)
    at div
    at div
    at K (https://<internal_url>/grafana/public/build/6263.860a6c52b74968c363d0.js:4:6821)
    at div
    at div
    at g (https://<internal_url>/grafana/public/build/2540.201dde33154919584644.js:239:17540)
    at c (https://<internal_url>/grafana/public/build/2540.201dde33154919584644.js:239:17481)
    at div
    at K (https://<internal_url>/grafana/public/build/2540.201dde33154919584644.js:239:22020)
    at ur (https://<internal_url>/grafana/public/build/DashboardPageProxy.5dd34fd16df4bd3d259f.js:3:24685)
    at DashboardPage
    at zo (https://<internal_url>/grafana/public/build/8288.8461d7d2958fa839bf3a.js:1352:121969)
    at pr (https://<internal_url>/grafana/public/build/DashboardPageProxy.5dd34fd16df4bd3d259f.js:3:31289)
    at Suspense
    at l (https://<internal_url>/grafana/public/build/2540.201dde33154919584644.js:63:125570)
    at ys (https://<internal_url>/grafana/public/build/2540.201dde33154919584644.js:184:11347)
    at j (https://<internal_url>/grafana/public/build/8288.8461d7d2958fa839bf3a.js:1031:29170)
    at go (https://<internal_url>/grafana/public/build/8288.8461d7d2958fa839bf3a.js:1022:4448)
    at cr (https://<internal_url>/grafana/public/build/8288.8461d7d2958fa839bf3a.js:1022:11997)
    at Ft (https://<internal_url>/grafana/public/build/8288.8461d7d2958fa839bf3a.js:1031:17387)
    at j (https://<internal_url>/grafana/public/build/8288.8461d7d2958fa839bf3a.js:1031:31346)
    at main
    at div
    at div
    at div
    at Vn (https://<internal_url>/grafana/public/build/2540.201dde33154919584644.js:184:2441)
    at div
    at $r (https://<internal_url>/grafana/public/build/2540.201dde33154919584644.js:184:6891)
    at go (https://<internal_url>/grafana/public/build/8288.8461d7d2958fa839bf3a.js:1022:4448)
    at cr (https://<internal_url>/grafana/public/build/8288.8461d7d2958fa839bf3a.js:1022:11997)
    at ms (https://<internal_url>/grafana/public/build/8288.8461d7d2958fa839bf3a.js:1022:11333)
    at sr (https://<internal_url>/grafana/public/build/8288.8461d7d2958fa839bf3a.js:1031:17686)
    at j (https://<internal_url>/grafana/public/build/8288.8461d7d2958fa839bf3a.js:1031:25386)
    at v (https://<internal_url>/grafana/public/build/8288.8461d7d2958fa839bf3a.js:95:8970)
    at _ (https://<internal_url>/grafana/public/build/8288.8461d7d2958fa839bf3a.js:1352:112613)
    at c (https://<internal_url>/grafana/public/build/2540.201dde33154919584644.js:479:21362)
    at l (https://<internal_url>/grafana/public/build/2540.201dde33154919584644.js:63:125570)
    at f (https://<internal_url>/grafana/public/build/2540.201dde33154919584644.js:63:126079)
    at Jt (https://<internal_url>/grafana/public/build/8288.8461d7d2958fa839bf3a.js:1356:508)
    at al (https://<internal_url>/grafana/public/build/2540.201dde33154919584644.js:195:127)

After that I took a dump of the json and applied them to our ops Grafana cloud instance. There the complete dashboard just appears normal, without any deprecation warning.

What did you expect to happen?

  • a successful migration
  • the ability to edit the panel without breaking Grafana completly
  • a similar deprecation notice in the cloud instance

Did this work before?

don't know

How do we reproduce it?

  1. go to https://<any_internal_cluster>/grafana/d/4aa6447917c0599aba81ccfd2bbb4aa4/prometheus-overview?orgId=1&var-datasource=default&var-cluster=prod-us-central-0&var-job=critical-o11y%2Fcritical-prometheus&var-instance=All&from=1715789054319&to=1715816325361&refresh=30m
  2. Press the menu button of the Prometheus Stats panel
  3. Page dies

Is the bug inside a dashboard panel?

can't do ... as I can't reach this button without killing the page

Environment (with versions)?

Grafana: Grafana v11.1.0-70865 (f4d55d2)
OS: Ubuntu 23/10
Browser: Chromium Version 124.0.6367.201 (Official Build) snap (64-bit)

Grafana platform?

Kubernetes

Datasource(s)?

No response
@the-it the-it added area/dashboard type/angular-2-react Angular -> React migration labels May 16, 2024
@kaydelaney
Copy link
Contributor

Hi, do you think you could give a specific URL? I tried https://ops.grafana-ops.net/d/4aa6447917c0599aba81ccfd2bbb4aa4/prometheus-overview?orgId=1&var-datasource=default&var-cluster=prod-us-central-0&var-job=critical-o11y%2Fcritical-prometheus&var-instance=All&from=1715789054319&to=1715816325361&refresh=30m but wasn't able to reproduce the issue. @the-it

@the-it
Copy link
Member Author

the-it commented Jun 7, 2024 •
edited

This happens in our cluster internal admin instances. If you can't access them, we can hop on a call for a debug session. I send you the URL in a DM.

@kaydelaney
Copy link
Contributor

kaydelaney commented Jun 7, 2024 •
edited

Looking into it, I think it's happening because angular support is disabled on those instances. The crash when clicking the panel menu happens here, on line 277:

grafana/public/app/features/dashboard/utils/getPanelMenu.ts

Lines 275 to 278 in 5095ea8

if (angularComponent) {
const scope = angularComponent.getScope();
const panelCtrl: PanelCtrl = scope.$$childHead.ctrl;
const angularMenuItems = panelCtrl.getExtendedMenu();

grafana/public/app/angular/loadAndInitAngularIfEnabled.ts

Lines 22 to 34 in 5095ea8

} else {
// Register a dummy loader that does nothing
setAngularLoader({
load: (elem, scopeProps, template) => {
return {
destroy: () => {},
digest: () => {},
getScope: () => {
return {};
},
};
},
});

Since $$childHead.ctrl doesn't exist on the dummy scope object, trying to access it causes a crash

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area/dashboard type/angular-2-react Angular -> React migration
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@the-it @kaydelaney