Dashboards: Add alert and panel icon for dashboards that use Angular plugins #70951

xnyo · 2023-06-30T11:06:13Z

What is this feature?

Adds a feature flag angularDeprecationUI which enables the UI changes described below
Adds a yellow warning icon next to panels that use an Angular panel plugin or Angular datasource plugin
Adds a dismissable alert at the top of the dashboard if any Angular panels or Angular datasources are detected in the current dashboard.
- The alert dismissable state is saved per dashboard and per browser, using the browser's localstorage.

Angular panel/datasource icon

Tooltip on hover

Angular panels:

Angular datasources:

Dashboard alert (complete example)

Why do we need this feature?

To notify users about Angular panels and Angular datasources in their dashboards

Who is this feature for?

Grafana users who rely on Angular panels and datasources

Which issue(s) does this PR fix?:

Related to #68974

Special notes for your reviewer:

Please check that:

It works as expected from a user's perspective.
If this is a pre-GA feature, it is behind a feature toggle.
The docs are updated, and if this is a notable improvement, it's added to our What's New doc.

sympatheticmoose · 2023-07-13T12:09:39Z

Feedback from UX included a suggestion to keep the deprecation warning messaging consistent, but also to ensure it was appropriate for the target audience and best advertised appropriate action.

In terms of consistency, we have introduced:

"This plugin uses a deprecated, legacy platform based on AngularJS and [ will stop working in future releases of Grafana | is incompatible with your current Grafana configuration]" as our "long" message with a link to https://grafana.com/docs/grafana/latest/developers/angular_deprecation/.
"This plugin uses deprecated functionality, support for which is being removed" as our "short" message under an Angular title

Current "long" message for the dashboard notification:

Title: This dashboard is using deprecated plugin APIs
Details: There are panels or datasources in this dashboard that are using deprecated plugin APIs

Current "short" message in panel warning:

This panel or its datasource is using deprecated plugin APIs

We likely need to explicitly reference Angular, and definitely need provide a link to the deprecation notice, wdyt about:

Dashboard Notification:
Title: This dashboard depends on Angular which is deprecated and [ will stop working in future releases of Grafana | is incompatible with your current Grafana configuration].

Description: Read our deprecation notice and migration advice.

Panel Warning:
This panel or its datasource requires Angular (deprecated).

mckn

I still think this becomes a bit noisy but I don't have any better suggestions so 👍🏻 from me! Great work on this!

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderTitleItems.tsx

torkelo

Not sure about showing the dashboard banner to all users and linking the dismissed state to uid and every user (local storage). Means a heck of a lot of showings & dismiss actions

torkelo · 2023-07-26T13:00:44Z

public/app/features/plugins/angularDeprecation/AngularDeprecationNotice.tsx

+
+export function AngularDeprecationNotice({ dashboardUid }: Props) {
+  return (
+    <LocalStorageValueProvider<boolean> storageKey={localStorageKey(dashboardUid)} defaultValue={false}>


having the storage key include uid means it could show up on all dashboards potentially and have to be dismissed A LOT by every user.

torkelo · 2023-07-26T13:02:44Z

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -387,6 +388,9 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
              <SubMenu dashboard={dashboard} annotations={dashboard.annotations.list} links={dashboard.links} />
            </section>
          )}
+          {config.featureToggles.angularDeprecationUI && dashboard.hasAngularPlugins() && dashboard.uid !== null && (


Maybe we should have a check here that this is only shown to dashboard users who have edit permissions?

we could but then it makes it difficult for a viewer to discover that a dashboard they rely on has this issue

…ecation/dashboard-force-push

xnyo · 2023-08-28T08:46:44Z

cc @sympatheticmoose

We would like to merge this PR in the current state. It is also behind a feature flag, so it won't be visible by default for now. Our plan is to slowly roll this out to HG and see the impact/feedback on it, and refine if necessary.

@mckn please can you review the few changes I made after your PR review so we can merge?

mckn

LGTM!

…plugins (grafana#70951) * Add angularDeprecationUI feature toggle * Add angular notice in angular panel header * Show angular notice for angular datasources * Show angular notice at the top of the dashboard * Changed Angular deprecation messages * Fix angular deprecation alert displayed for new dashboards * re-generate feature flags * Removed unnecessary changes * Add angular deprecation dashboard notice tests * Add test for angular deprecation panel icon * Update test suite name * Moved isAngularDatasourcePlugin to app/features/plugins/angularDeprecation * Add hasAngularPlugins to DashboardModel * re-generate feature toggles * Fix tests * Fix data source spelling * Fix typing issues * Extract plugin type into a separate function * re-generate feature flags * reportInteraction on angular dashboard notice dismiss * re-generate feature flags * Re-generate feature flags * lint

…plugins (#70951) * Add angularDeprecationUI feature toggle * Add angular notice in angular panel header * Show angular notice for angular datasources * Show angular notice at the top of the dashboard * Changed Angular deprecation messages * Fix angular deprecation alert displayed for new dashboards * re-generate feature flags * Removed unnecessary changes * Add angular deprecation dashboard notice tests * Add test for angular deprecation panel icon * Update test suite name * Moved isAngularDatasourcePlugin to app/features/plugins/angularDeprecation * Add hasAngularPlugins to DashboardModel * re-generate feature toggles * Fix tests * Fix data source spelling * Fix typing issues * Extract plugin type into a separate function * re-generate feature flags * reportInteraction on angular dashboard notice dismiss * re-generate feature flags * Re-generate feature flags * lint

xnyo added 4 commits June 30, 2023 11:03

Add angularDeprecationUI feature toggle

2699779

Add angular notice in angular panel header

a24c027

Show angular notice for angular datasources

d90a1a6

Show angular notice at the top of the dashboard

f620b2e

xnyo added area/dashboard area/plugins area/frontend add to changelog javascript Pull requests that update Javascript code no-backport Skip backport of PR labels Jun 30, 2023

xnyo added this to the 10.1.x milestone Jun 30, 2023

xnyo self-assigned this Jun 30, 2023

grafanabot added type/docs area/backend labels Jun 30, 2023

xnyo changed the title ~~WIP: Dashboards: Angular deprecation: Add alert to dashboard and icon to panels~~ WIP: Dashboards: Angular deprecation: Add UI elements in dashboards that use Angular plugins Jun 30, 2023

xnyo changed the title ~~WIP: Dashboards: Angular deprecation: Add UI elements in dashboards that use Angular plugins~~ WIP: Dashboards: Add alert and panel icons for dashboards that use Angular plugins Jun 30, 2023

xnyo mentioned this pull request Jul 11, 2023

Plugins: Add AngularMeta and AngularMeta.DisableDeprecationUIFeatures #71067

Closed

3 tasks

xnyo added 12 commits July 13, 2023 16:19

Changed Angular deprecation messages

e31186b

Fix angular deprecation alert displayed for new dashboards

deefb45

Merge branch 'main' into giuseppe/angular-deprecation/dashboard

7b92ad9

re-generate feature flags

42167f4

Removed unnecessary changes

04769b9

Merge branch 'main' into giuseppe/angular-deprecation/dashboard

6e0312a

Merge branch 'main' into giuseppe/angular-deprecation/dashboard

f45ade8

Add angular deprecation dashboard notice tests

eeba481

Merge branch 'main' into giuseppe/angular-deprecation/dashboard

5e4b3d6

Add test for angular deprecation panel icon

a3ae948

Update test suite name

98272dd

Merge branch 'main' into giuseppe/angular-deprecation/dashboard

f7edb15

Fix data source spelling

b03b20c

mckn approved these changes Jul 26, 2023

View reviewed changes

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderTitleItems.tsx Outdated Show resolved Hide resolved

torkelo reviewed Jul 26, 2023

View reviewed changes

xnyo added 4 commits August 2, 2023 14:28

Merge remote-tracking branch 'origin/main' into giuseppe/angular-depr…

b4e3910

…ecation/dashboard-force-push

Fix typing issues

d4b6d8c

Extract plugin type into a separate function

30e1127

re-generate feature flags

e41d759

xnyo force-pushed the giuseppe/angular-deprecation/dashboard branch from 11e7108 to e41d759 Compare August 2, 2023 12:32

xnyo modified the milestones: 10.1.x, 10.2.x Aug 2, 2023

xnyo and others added 5 commits August 3, 2023 11:05

reportInteraction on angular dashboard notice dismiss

1ec452b

Merge branch 'main' into giuseppe/angular-deprecation/dashboard

ab7aa12

re-generate feature flags

4fa06ca

Merge branch 'main' into giuseppe/angular-deprecation/dashboard

7da7b3b

Re-generate feature flags

5b7f023

sympatheticmoose mentioned this pull request Aug 23, 2023

feat: warn users when a plugin is deprecated #71528

Open

Merge branch 'main' into giuseppe/angular-deprecation/dashboard

ced643e

xnyo requested a review from mckn August 28, 2023 08:46

mckn approved these changes Aug 29, 2023

View reviewed changes

xnyo added 2 commits August 29, 2023 15:36

Merge branch 'main' into giuseppe/angular-deprecation/dashboard

49f57c2

lint

db6d1bf

xnyo merged commit bf4d025 into main Aug 29, 2023
19 checks passed

xnyo deleted the giuseppe/angular-deprecation/dashboard branch August 29, 2023 14:05

zerok modified the milestones: 10.2.x, 10.2.0 Oct 23, 2023

dnhn mentioned this pull request Oct 24, 2023

grafana 10.2.0 Homebrew/homebrew-core#152264

Closed

BrewTestBot mentioned this pull request Oct 25, 2023

grafana 10.2.0 Homebrew/homebrew-core#152321

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dashboards: Add alert and panel icon for dashboards that use Angular plugins #70951

Dashboards: Add alert and panel icon for dashboards that use Angular plugins #70951

xnyo commented Jun 30, 2023 •

edited

Loading

sympatheticmoose commented Jul 13, 2023

mckn left a comment

torkelo left a comment

torkelo Jul 26, 2023

torkelo Jul 26, 2023

sympatheticmoose Jul 26, 2023

xnyo commented Aug 28, 2023

mckn left a comment

Dashboards: Add alert and panel icon for dashboards that use Angular plugins #70951

Dashboards: Add alert and panel icon for dashboards that use Angular plugins #70951

Conversation

xnyo commented Jun 30, 2023 • edited Loading

Angular panel/datasource icon

Tooltip on hover

Dashboard alert (complete example)

sympatheticmoose commented Jul 13, 2023

mckn left a comment

Choose a reason for hiding this comment

torkelo left a comment

Choose a reason for hiding this comment

torkelo Jul 26, 2023

Choose a reason for hiding this comment

torkelo Jul 26, 2023

Choose a reason for hiding this comment

sympatheticmoose Jul 26, 2023

Choose a reason for hiding this comment

xnyo commented Aug 28, 2023

mckn left a comment

Choose a reason for hiding this comment

xnyo commented Jun 30, 2023 •

edited

Loading