Improve UI state handling in split view

* Simplify Canvas element key to prevent blinking icons

* Fix formatting with prettier

.github/CODEOWNERS

@@ -440,6 +440,7 @@ i18next.config.ts @grafana/grafana-frontend-platform
 /e2e-playwright/dashboards/TestDashboard.json @grafana/dashboards-squad @grafana/grafana-search-navigate-organise
 /e2e-playwright/dashboards/TestV2Dashboard.json @grafana/dashboards-squad
 /e2e-playwright/dashboards/V2DashWithRepeats.json @grafana/dashboards-squad
+/e2e-playwright/dashboards/V2DashWithRowRepeats.json @grafana/dashboards-squad
 /e2e-playwright/dashboards/V2DashWithTabRepeats.json @grafana/dashboards-squad
 /e2e-playwright/dashboards-suite/adhoc-filter-from-panel.spec.ts @grafana/datapro
 /e2e-playwright/dashboards-suite/dashboard-browse-nested.spec.ts @grafana/grafana-search-navigate-organise

apps/dashboard/pkg/migration/conversion/v2alpha1_to_v1beta1.go

@@ -71,11 +71,6 @@ func convertDashboardSpec_V2alpha1_to_V1beta1(in *dashv2alpha1.DashboardSpec) (m
 	if err != nil {
 		return nil, fmt.Errorf("failed to convert panels: %w", err)
 	}
-	// Count total panels including those in collapsed rows
-	totalPanelsConverted := countTotalPanels(panels)
-	if totalPanelsConverted < len(in.Elements) {
-		return nil, fmt.Errorf("some panels were not converted from v2alpha1 to v1beta1")
-	}
 
 	if len(panels) > 0 {
 		dashboard["panels"] = panels
@@ -198,29 +193,6 @@ func convertLinksToV1(links []dashv2alpha1.DashboardDashboardLink) []map[string]
 	return result
 }
 
-// countTotalPanels counts all panels including those nested in collapsed row panels.
-func countTotalPanels(panels []interface{}) int {
-	count := 0
-	for _, p := range panels {
-		panel, ok := p.(map[string]interface{})
-		if !ok {
-			count++
-			continue
-		}
-
-		// Check if this is a row panel with nested panels
-		if panelType, ok := panel["type"].(string); ok && panelType == "row" {
-			if nestedPanels, ok := panel["panels"].([]interface{}); ok {
-				count += len(nestedPanels)
-			}
-			// Don't count the row itself as a panel element
-		} else {
-			count++
-		}
-	}
-	return count
-}
-
 // convertPanelsFromElementsAndLayout converts V2 layout structures to V1 panel arrays.
 // V1 only supports a flat array of panels with row panels for grouping.
 // This function dispatches to the appropriate converter based on layout type:

apps/dashboard/pkg/migration/testdata/dev-dashboards-output/panel-piechart/panel_test_piechart.v42.json

@@ -290,7 +290,7 @@
         ],
         "legend": {
           "displayMode": "table",
-          "placement": "right",
+          "placement": "bottom",
           "showLegend": true,
           "values": [
             "percent"
@@ -304,7 +304,7 @@
           "fields": "",
           "values": false
         },
-        "showLegend": true,
+        "showLegend": false,
         "strokeWidth": 1,
         "text": {}
       },
@@ -323,15 +323,6 @@
         }
       ],
       "title": "Percent",
-      "transformations": [
-        {
-          "id": "renameByRegex",
-          "options": {
-            "regex": "^Backend-(.*)$",
-            "renamePattern": "b-$1"
-          }
-        }
-      ],
       "type": "piechart"
     },
     {
@@ -375,7 +366,7 @@
         ],
         "legend": {
           "displayMode": "table",
-          "placement": "right",
+          "placement": "bottom",
           "showLegend": true,
           "values": [
             "value"
@@ -389,7 +380,7 @@
           "fields": "",
           "values": false
         },
-        "showLegend": true,
+        "showLegend": false,
         "strokeWidth": 1,
         "text": {}
       },
@@ -408,15 +399,6 @@
         }
       ],
       "title": "Value",
-      "transformations": [
-        {
-          "id": "renameByRegex",
-          "options": {
-            "regex": "(.*)",
-            "renamePattern": "$1-how-much-wood-could-a-woodchuck-chuck-if-a-woodchuck-could-chuck-wood"
-          }
-        }
-      ],
       "type": "piechart"
     },
     {

apps/plugins/go.mod

@@ -30,7 +30,6 @@ require (
 require (
 	cel.dev/expr v0.25.1 // indirect
 	github.com/Machiel/slugify v1.0.1 // indirect
-	github.com/Masterminds/semver/v3 v3.4.0 // indirect
 	github.com/NYTimes/gziphandler v1.1.1 // indirect
 	github.com/ProtonMail/go-crypto v1.3.0 // indirect
 	github.com/antlr4-go/antlr/v4 v4.13.1 // indirect

apps/plugins/go.sum

@@ -9,8 +9,6 @@ github.com/BurntSushi/toml v1.5.0/go.mod h1:ukJfTF/6rtPPRCnwkur4qwRxa8vTRFBF0uk2
 github.com/DataDog/datadog-go v3.2.0+incompatible/go.mod h1:LButxg5PwREeZtORoXG3tL4fMGNddJ+vMq1mwgfaqoQ=
 github.com/Machiel/slugify v1.0.1 h1:EfWSlRWstMadsgzmiV7d0yVd2IFlagWH68Q+DcYCm4E=
 github.com/Machiel/slugify v1.0.1/go.mod h1:fTFGn5uWEynW4CUMG7sWkYXOf1UgDxyTM3DbR6Qfg3k=
-github.com/Masterminds/semver/v3 v3.4.0 h1:Zog+i5UMtVoCU8oKka5P7i9q9HgrJeGzI9SA1Xbatp0=
-github.com/Masterminds/semver/v3 v3.4.0/go.mod h1:4V+yj/TJE1HU9XfppCwVMZq3I84lprf4nC11bSS5beM=
 github.com/NYTimes/gziphandler v1.1.1 h1:ZUDjpQae29j0ryrS0u/B8HZfJBtBQHjqw2rQ2cqUQ3I=
 github.com/NYTimes/gziphandler v1.1.1/go.mod h1:n/CVRwUEOgIxrgPvAQhUUr9oeUtvrhMomdKFjzJNB0c=
 github.com/ProtonMail/go-crypto v1.3.0 h1:ILq8+Sf5If5DCpHQp4PbZdS1J7HDFRXz/+xKBiRGFrw=

apps/plugins/pkg/app/meta/local.go

@@ -4,6 +4,7 @@ import (
 	"context"
 	"time"
 
+	"github.com/grafana/grafana/pkg/plugins"
 	"github.com/grafana/grafana/pkg/services/pluginsintegration/pluginstore"
 )
 
@@ -11,16 +12,26 @@ const (
 	defaultLocalTTL = 1 * time.Hour
 )
 
+// PluginAssetsCalculator is an interface for calculating plugin asset information.
+// LocalProvider requires this to calculate loading strategy and module hash.
+type PluginAssetsCalculator interface {
+	LoadingStrategy(ctx context.Context, p pluginstore.Plugin) plugins.LoadingStrategy
+	ModuleHash(ctx context.Context, p pluginstore.Plugin) string
+}
+
 // LocalProvider retrieves plugin metadata for locally installed plugins.
 // It uses the plugin store to access plugins that have already been loaded.
 type LocalProvider struct {
-	store pluginstore.Store
+	store        pluginstore.Store
+	pluginAssets PluginAssetsCalculator
 }
 
 // NewLocalProvider creates a new LocalProvider for locally installed plugins.
-func NewLocalProvider(pluginStore pluginstore.Store) *LocalProvider {
+// pluginAssets is required for calculating loading strategy and module hash.
+func NewLocalProvider(pluginStore pluginstore.Store, pluginAssets PluginAssetsCalculator) *LocalProvider {
 	return &LocalProvider{
-		store: pluginStore,
+		store:        pluginStore,
+		pluginAssets: pluginAssets,
 	}
 }
 
@@ -31,7 +42,10 @@ func (p *LocalProvider) GetMeta(ctx context.Context, pluginID, version string) (
 		return nil, ErrMetaNotFound
 	}
 
-	spec := pluginStorePluginToMeta(plugin, plugin.LoadingStrategy, plugin.ModuleHash)
+	loadingStrategy := p.pluginAssets.LoadingStrategy(ctx, plugin)
+	moduleHash := p.pluginAssets.ModuleHash(ctx, plugin)
+
+	spec := pluginStorePluginToMeta(plugin, loadingStrategy, moduleHash)
 	return &Result{
 		Meta: spec,
 		TTL:  defaultLocalTTL,

devenv/dev-dashboards/panel-piechart/panel_test_piechart.json

@@ -248,7 +248,7 @@
         "legend": {
           "values": ["percent"],
           "displayMode": "table",
-          "placement": "right"
+          "placement": "bottom"
         },
         "pieType": "pie",
         "reduceOptions": {
@@ -256,7 +256,7 @@
           "fields": "",
           "values": false
         },
-        "showLegend": true,
+        "showLegend": false,
         "strokeWidth": 1,
         "text": {}
       },
@@ -272,15 +272,6 @@
       "timeFrom": null,
       "timeShift": null,
       "title": "Percent",
-      "transformations": [
-        {
-          "id": "renameByRegex",
-          "options": {
-            "regex": "^Backend-(.*)$",
-            "renamePattern": "b-$1"
-          }
-        }
-      ],
       "type": "piechart"
     },
     {
@@ -320,7 +311,7 @@
         "legend": {
           "values": ["value"],
           "displayMode": "table",
-          "placement": "right"
+          "placement": "bottom"
         },
         "pieType": "pie",
         "reduceOptions": {
@@ -328,7 +319,7 @@
           "fields": "",
           "values": false
         },
-        "showLegend": true,
+        "showLegend": false,
         "strokeWidth": 1,
         "text": {}
       },
@@ -344,15 +335,6 @@
       "timeFrom": null,
       "timeShift": null,
       "title": "Value",
-      "transformations": [
-        {
-          "id": "renameByRegex",
-          "options": {
-            "regex": "(.*)",
-            "renamePattern": "$1-how-much-wood-could-a-woodchuck-chuck-if-a-woodchuck-could-chuck-wood"
-          }
-        }
-      ],
       "type": "piechart"
     },
     {

docs/sources/administration/roles-and-permissions/_index.md

@@ -35,10 +35,10 @@ For Grafana Cloud users, Grafana Support is not authorised to make org role chan
 
 ## Grafana server administrators
 
-A Grafana server administrator manages server-wide settings and access to resources such as organizations, users, and licenses. Grafana includes a default server administrator that you can use to manage all of Grafana, or you can divide that responsibility among other server administrators that you create.
+A Grafana server administrator (sometimes referred to as a **Grafana Admin**) manages server-wide settings and access to resources such as organizations, users, and licenses. Grafana includes a default server administrator that you can use to manage all of Grafana, or you can divide that responsibility among other server administrators that you create.
 
-{{< admonition type="note" >}}
-The server administrator role does not mean that the user is also a Grafana [organization administrator](#organization-roles).
+{{< admonition type="caution" >}}
+The server administrator role is distinct from the [organization administrator](#organization-roles) role.
 {{< /admonition >}}
 
 A server administrator can perform the following tasks:
@@ -50,7 +50,7 @@ A server administrator can perform the following tasks:
 - Upgrade the server to Grafana Enterprise.
 
 {{< admonition type="note" >}}
-The server administrator role does not exist in Grafana Cloud.
+The server administrator (Grafana Admin) role does not exist in Grafana Cloud.
 {{< /admonition >}}
 
 To assign or remove server administrator privileges, see [Server user management](../user-management/server-user-management/assign-remove-server-admin-privileges/).

docs/sources/administration/roles-and-permissions/access-control/manage-rbac-roles/index.md

@@ -53,6 +53,11 @@ refs:
       destination: /docs/grafana/<GRAFANA_VERSION>/administration/roles-and-permissions/access-control/custom-role-actions-scopes/
     - pattern: /docs/grafana-cloud/
       destination: /docs/grafana-cloud/account-management/authentication-and-permissions/access-control/custom-role-actions-scopes/
+  rbac-terraform-provisioning:
+    - pattern: /docs/grafana/
+      destination: /docs/grafana/<GRAFANA_VERSION>/administration/roles-and-permissions/access-control/rbac-terraform-provisioning/
+    - pattern: /docs/grafana-cloud/
+      destination: /docs/grafana-cloud/account-management/authentication-and-permissions/access-control/rbac-terraform-provisioning/
   rbac-grafana-provisioning:
     - pattern: /docs/grafana/
       destination: /docs/grafana/<GRAFANA_VERSION>/administration/roles-and-permissions/access-control/rbac-grafana-provisioning/
@@ -145,7 +150,13 @@ Refer to the [RBAC HTTP API](ref:api-rbac-get-a-role) for more details.
 
 ## Create custom roles
 
-This section shows you how to create a custom RBAC role using Grafana provisioning and the HTTP API.
+This section shows you how to create a custom RBAC role using Grafana provisioning or the HTTP API.
+
+Creating and editing custom roles is not currently possible in the Grafana UI. To manage custom roles, use one of the following methods:
+
+- [Provisioning](ref:rbac-grafana-provisioning) (for self-managed instances)
+- [HTTP API](ref:api-rbac-create-a-new-custom-role)
+- [Terraform](ref:rbac-terraform-provisioning)
 
 Create a custom role when basic roles and fixed roles do not meet your permissions requirements.
 
@@ -153,14 +164,101 @@ Create a custom role when basic roles and fixed roles do not meet your permissio
 
 - [Plan your RBAC rollout strategy](ref:plan-rbac-rollout-strategy).
 - Determine which permissions you want to add to the custom role. To see a list of actions and scope, refer to [RBAC permissions, actions, and scopes](ref:custom-role-actions-scopes).
-- [Enable role provisioning](ref:rbac-grafana-provisioning).
 - Ensure that you have permissions to create a custom role.
   - By default, the Grafana Admin role has permission to create custom roles.
   - A Grafana Admin can delegate the custom role privilege to another user by creating a custom role with the relevant permissions and adding the `permissions:type:delegate` scope.
 
-### Create custom roles using provisioning
+### Create custom roles using the HTTP API
 
-[File-based provisioning](ref:rbac-grafana-provisioning) is one method you can use to create custom roles.
+The following examples show you how to create a custom role using the Grafana HTTP API. For more information about the HTTP API, refer to [Create a new custom role](ref:api-rbac-create-a-new-custom-role).
+
+{{< admonition type="note" >}}
+When you create a custom role you can only give it the same permissions you already have. For example, if you only have `users:create` permissions, then you can't create a role that includes other permissions.
+{{< /admonition >}}
+
+The following example creates a `custom:users:admin` role and assigns the `users:create` action to it.
+
+**Example request**
+
+```
+curl --location --request POST '<grafana_url>/api/access-control/roles/' \
+--header 'Authorization: Basic YWRtaW46cGFzc3dvcmQ=' \
+--header 'Content-Type: application/json' \
+--data-raw '{
+    "version": 1,
+    "uid": "jZrmlLCkGksdka",
+    "name": "custom:users:admin",
+    "displayName": "custom users admin",
+    "description": "My custom role which gives users permissions to create users",
+    "global": true,
+    "permissions": [
+        {
+            "action": "users:create"
+        }
+    ]
+}'
+```
+
+**Example response**
+
+```
+{
+    "version": 1,
+    "uid": "jZrmlLCkGksdka",
+    "name": "custom:users:admin",
+    "displayName": "custom users admin",
+    "description": "My custom role which gives users permissions to create users",
+    "global": true,
+    "permissions": [
+        {
+            "action": "users:create"
+            "updated": "2021-05-17T22:07:31.569936+02:00",
+            "created": "2021-05-17T22:07:31.569935+02:00"
+        }
+    ],
+    "updated": "2021-05-17T22:07:31.564403+02:00",
+    "created": "2021-05-17T22:07:31.564403+02:00"
+}
+```
+
+Refer to the [RBAC HTTP API](ref:api-rbac-create-a-new-custom-role) for more details.
+
+### Create custom roles using Terraform
+
+You can use the [Grafana Terraform provider](https://registry.terraform.io/providers/grafana/grafana/latest/docs) to manage custom roles and their assignments. This is the recommended method for Grafana Cloud users who want to manage RBAC as code. For more information, refer to [Provisioning RBAC with Terraform](ref:rbac-terraform-provisioning).
+
+The following example creates a custom role and assigns it to a team:
+
+```terraform
+resource "grafana_role" "custom_folder_manager" {
+  name        = "custom:folders:manager"
+  description = "Custom role for reading and creating folders"
+  uid         = "custom-folders-manager"
+  version     = 1
+  global      = true
+
+  permissions {
+    action = "folders:read"
+    scope  = "folders:*"
+  }
+
+  permissions {
+    action = "folders:create"
+    scope  = "folders:uid:general" # Allows creating folders at the root level
+  }
+}
+
+resource "grafana_role_assignment" "custom_folder_manager_assignment" {
+  role_uid = grafana_role.custom_folder_manager.uid
+  teams    = ["<TEAM_UID>"]
+}
+```
+
+For more information, refer to the [`grafana_role`](https://registry.terraform.io/providers/grafana/grafana/latest/docs/resources/role) and [`grafana_role_assignment`](https://registry.terraform.io/providers/grafana/grafana/latest/docs/resources/role_assignment) documentation in the Terraform Registry.
+
+### Create custom roles using file-based provisioning
+
+You can use [file-based provisioning](ref:rbac-grafana-provisioning) to create custom roles for self-managed instances.
 
 1. Open the YAML configuration file and locate the `roles` section.
 
@@ -251,61 +349,6 @@ roles:
         state: 'absent'
 ```
 
-### Create custom roles using the HTTP API
-
-The following examples show you how to create a custom role using the Grafana HTTP API. For more information about the HTTP API, refer to [Create a new custom role](ref:api-rbac-create-a-new-custom-role).
-
-{{< admonition type="note" >}}
-You cannot create a custom role with permissions that you do not have. For example, if you only have `users:create` permissions, then you cannot create a role that includes other permissions.
-{{< /admonition >}}
-
-The following example creates a `custom:users:admin` role and assigns the `users:create` action to it.
-
-**Example request**
-
-```
-curl --location --request POST '<grafana_url>/api/access-control/roles/' \
---header 'Authorization: Basic YWRtaW46cGFzc3dvcmQ=' \
---header 'Content-Type: application/json' \
---data-raw '{
-    "version": 1,
-    "uid": "jZrmlLCkGksdka",
-    "name": "custom:users:admin",
-    "displayName": "custom users admin",
-    "description": "My custom role which gives users permissions to create users",
-    "global": true,
-    "permissions": [
-        {
-            "action": "users:create"
-        }
-    ]
-}'
-```
-
-**Example response**
-
-```
-{
-    "version": 1,
-    "uid": "jZrmlLCkGksdka",
-    "name": "custom:users:admin",
-    "displayName": "custom users admin",
-    "description": "My custom role which gives users permissions to create users",
-    "global": true,
-    "permissions": [
-        {
-            "action": "users:create"
-            "updated": "2021-05-17T22:07:31.569936+02:00",
-            "created": "2021-05-17T22:07:31.569935+02:00"
-        }
-    ],
-    "updated": "2021-05-17T22:07:31.564403+02:00",
-    "created": "2021-05-17T22:07:31.564403+02:00"
-}
-```
-
-Refer to the [RBAC HTTP API](ref:api-rbac-create-a-new-custom-role) for more details.
-
 ## Update basic role permissions
 
 If the default basic role definitions do not meet your requirements, you can change their permissions.

docs/sources/administration/roles-and-permissions/access-control/rbac-grafana-provisioning/index.md

@@ -6,7 +6,6 @@ description: Learn about RBAC Grafana provisioning and view an example YAML prov
   file that configures Grafana role assignments.
 labels:
   products:
-    - cloud
     - enterprise
 menuTitle: Provisioning RBAC with Grafana
 title: Provisioning RBAC with Grafana
@@ -52,11 +51,13 @@ refs:
 # Provisioning RBAC with Grafana
 
 {{< admonition type="note" >}}
-Available in [Grafana Enterprise](/docs/grafana/<GRAFANA_VERSION>/introduction/grafana-enterprise/) and [Grafana Cloud](/docs/grafana-cloud).
+Available in [Grafana Enterprise](/docs/grafana/<GRAFANA_VERSION>/introduction/grafana-enterprise/) for self-managed instances. This feature is not available in Grafana Cloud.
 {{< /admonition >}}
 
 You can create, change or remove [Custom roles](ref:manage-rbac-roles-create-custom-roles-using-provisioning) and create or remove [basic role assignments](ref:assign-rbac-roles-assign-a-fixed-role-to-a-basic-role-using-provisioning), by adding one or more YAML configuration files in the `provisioning/access-control/` directory.
 
+Because this method requires access to the file system where Grafana is running, it's only available for self-managed Grafana instances. To provision RBAC in Grafana Cloud, use [Terraform](ref:rbac-terraform-provisioning) or the [HTTP API](ref:api-rbac-create-and-manage-custom-roles).
+
 Grafana performs provisioning during startup. After you make a change to the configuration file, you can reload it during runtime. You do not need to restart the Grafana server for your changes to take effect.
 
 **Before you begin:**

e2e-playwright/dashboard-new-layouts/dashboards-repeats-custom-grid.spec.ts

@@ -1,6 +1,7 @@
 import { test, expect } from '@grafana/plugin-e2e';
 
 import testV2DashWithRepeats from '../dashboards/V2DashWithRepeats.json';
+import testV2DashWithRowRepeats from '../dashboards/V2DashWithRowRepeats.json';
 
 import {
   checkRepeatedPanelTitles,
@@ -10,11 +11,14 @@ import {
   saveDashboard,
   importTestDashboard,
   goToEmbeddedPanel,
+  goToPanelSnapshot,
 } from './utils';
 
 const repeatTitleBase = 'repeat - ';
 const newTitleBase = 'edited rep - ';
 const repeatOptions = [1, 2, 3, 4];
+const getTitleInRepeatRow = (rowIndex: number, panelIndex: number) =>
+  `repeated-row-${rowIndex}-repeated-panel-${panelIndex}`;
 
 test.use({
   featureToggles: {
@@ -165,9 +169,7 @@ test.describe(
         )
       ).toBeVisible();
 
-      await dashboardPage
-        .getByGrafanaSelector(selectors.components.NavToolbar.editDashboard.backToDashboardButton)
-        .click();
+      await page.keyboard.press('Escape');
 
       await expect(
         dashboardPage.getByGrafanaSelector(selectors.components.DashboardEditPaneSplitter.primaryBody)
@@ -217,9 +219,7 @@ test.describe(
         )
       ).toBeVisible();
 
-      await dashboardPage
-        .getByGrafanaSelector(selectors.components.NavToolbar.editDashboard.backToDashboardButton)
-        .click();
+      await page.keyboard.press('Escape');
 
       await expect(
         dashboardPage.getByGrafanaSelector(selectors.components.DashboardEditPaneSplitter.primaryBody)
@@ -405,5 +405,143 @@ test.describe(
         await dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.headerContainer).all()
       ).toHaveLength(3);
     });
+
+    test('can view repeated panel in a repeated row', async ({ dashboardPage, selectors, page }) => {
+      await importTestDashboard(
+        page,
+        selectors,
+        'Custom grid repeats - view repeated panel in a repeated row',
+        JSON.stringify(testV2DashWithRowRepeats)
+      );
+
+      // make sure the repeated panel is present in multiple rows
+      await expect(
+        dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.title(getTitleInRepeatRow(1, 1)))
+      ).toBeVisible();
+      await expect(
+        dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.title(getTitleInRepeatRow(2, 2)))
+      ).toBeVisible();
+
+      await dashboardPage
+        .getByGrafanaSelector(selectors.components.Panels.Panel.title(getTitleInRepeatRow(1, 1)))
+        .hover();
+
+      await page.keyboard.press('v');
+
+      await expect(
+        dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.title(getTitleInRepeatRow(2, 2)))
+      ).not.toBeVisible();
+
+      await expect(
+        dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.title(getTitleInRepeatRow(1, 1)))
+      ).toBeVisible();
+
+      const repeatedPanelUrl = page.url();
+
+      await page.keyboard.press('Escape');
+
+      // load view panel directly
+      await page.goto(repeatedPanelUrl);
+
+      await expect(
+        dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.title(getTitleInRepeatRow(1, 1)))
+      ).toBeVisible();
+
+      await expect(
+        dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.title(getTitleInRepeatRow(2, 2)))
+      ).not.toBeVisible();
+    });
+
+    test('can view embedded panel in a repeated row', async ({ dashboardPage, selectors, page }) => {
+      const embedPanelTitle = 'embedded-panel';
+      await importTestDashboard(
+        page,
+        selectors,
+        'Custom grid repeats - view embedded repeated panel in a repeated row',
+        JSON.stringify(testV2DashWithRowRepeats)
+      );
+
+      await dashboardPage
+        .getByGrafanaSelector(selectors.components.Panels.Panel.title(getTitleInRepeatRow(1, 1)))
+        .hover();
+      await page.keyboard.press('p+e');
+
+      await goToEmbeddedPanel(page);
+
+      await expect(
+        dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.title(getTitleInRepeatRow(1, 1)))
+      ).toBeVisible();
+
+      await expect(
+        dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.title(getTitleInRepeatRow(2, 2)))
+      ).not.toBeVisible();
+    });
+
+    // there is a bug in the Snapshot feature that prevents the next two tests from passing
+    // tracking issue: https://github.com/grafana/grafana/issues/114509
+    test.skip('can view repeated panel inside snapshot', async ({ dashboardPage, selectors, page }) => {
+      await importTestDashboard(
+        page,
+        selectors,
+        'Custom grid repeats - view repeated panel inside snapshot',
+        JSON.stringify(testV2DashWithRowRepeats)
+      );
+
+      await dashboardPage
+        .getByGrafanaSelector(selectors.components.Panels.Panel.title(getTitleInRepeatRow(1, 1)))
+        .hover();
+      await page.keyboard.press('p+s');
+
+      // click "Publish snapshot"
+      await dashboardPage
+        .getByGrafanaSelector(selectors.pages.ShareDashboardDrawer.ShareSnapshot.publishSnapshot)
+        .click();
+
+      // click "Copy link" button in the snapshot drawer
+      await dashboardPage
+        .getByGrafanaSelector(selectors.pages.ShareDashboardDrawer.ShareSnapshot.copyUrlButton)
+        .click();
+
+      await goToPanelSnapshot(page);
+
+      await expect(
+        dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.title(getTitleInRepeatRow(1, 1)))
+      ).toBeVisible();
+
+      await expect(
+        dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.title(getTitleInRepeatRow(2, 2)))
+      ).not.toBeVisible();
+    });
+    test.skip('can view single panel in a repeated row inside snapshot', async ({ dashboardPage, selectors, page }) => {
+      await importTestDashboard(
+        page,
+        selectors,
+        'Custom grid repeats - view single panel inside snapshot',
+        JSON.stringify(testV2DashWithRowRepeats)
+      );
+
+      await dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.title('single panel row 1')).hover();
+      // open panel snapshot
+      await page.keyboard.press('p+s');
+
+      // click "Publish snapshot"
+      await dashboardPage
+        .getByGrafanaSelector(selectors.pages.ShareDashboardDrawer.ShareSnapshot.publishSnapshot)
+        .click();
+
+      // click "Copy link" button
+      await dashboardPage
+        .getByGrafanaSelector(selectors.pages.ShareDashboardDrawer.ShareSnapshot.copyUrlButton)
+        .click();
+
+      await goToPanelSnapshot(page);
+
+      await expect(
+        dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.title('single panel row 1'))
+      ).toBeVisible();
+      await expect(
+        dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.title(getTitleInRepeatRow(1, 1)))
+      ).toBeHidden();
+    });
   }
 );

e2e-playwright/dashboard-new-layouts/utils.ts

@@ -218,6 +218,15 @@ export async function goToEmbeddedPanel(page: Page) {
   await page.goto(soloPanelUrl!);
 }
 
+export async function goToPanelSnapshot(page: Page) {
+  // extracting snapshot url from clipboard
+  const snapshotUrl = await page.evaluate(() => navigator.clipboard.readText());
+
+  expect(snapshotUrl).toBeDefined();
+
+  await page.goto(snapshotUrl);
+}
+
 export async function moveTab(
   dashboardPage: DashboardPage,
   page: Page,

e2e-playwright/dashboards/V2DashWithRowRepeats.json

@@ -0,0 +1,486 @@
+{
+  "apiVersion": "dashboard.grafana.app/v2beta1",
+  "kind": "Dashboard",
+  "metadata": {
+    "name": "ad8l8fz",
+    "namespace": "default",
+    "uid": "fLb2na54K8NZHvn8LfWGL1jhZh03Hy0xpV1KzMYgAXEX",
+    "resourceVersion": "1",
+    "generation": 2,
+    "creationTimestamp": "2025-11-25T15:52:42Z",
+    "labels": {
+      "grafana.app/deprecatedInternalID": "20"
+    },
+    "annotations": {
+      "grafana.app/createdBy": "user:aerwo725ot62od",
+      "grafana.app/updatedBy": "user:aerwo725ot62od",
+      "grafana.app/updatedTimestamp": "2025-11-25T15:52:42Z",
+      "grafana.app/folder": ""
+    }
+  },
+  "spec": {
+    "annotations": [
+      {
+        "kind": "AnnotationQuery",
+        "spec": {
+          "builtIn": true,
+          "enable": true,
+          "hide": true,
+          "iconColor": "rgba(0, 211, 255, 1)",
+          "name": "Annotations & Alerts",
+          "query": {
+            "datasource": {
+              "name": "-- Grafana --"
+            },
+            "group": "grafana",
+            "kind": "DataQuery",
+            "spec": {},
+            "version": "v0"
+          }
+        }
+      }
+    ],
+    "cursorSync": "Off",
+    "description": "",
+    "editable": true,
+    "elements": {
+      "panel-1": {
+        "kind": "Panel",
+        "spec": {
+          "data": {
+            "kind": "QueryGroup",
+            "spec": {
+              "queries": [
+                {
+                  "kind": "PanelQuery",
+                  "spec": {
+                    "hidden": false,
+                    "query": {
+                      "group": "",
+                      "kind": "DataQuery",
+                      "spec": {},
+                      "version": "v0"
+                    },
+                    "refId": "A"
+                  }
+                }
+              ],
+              "queryOptions": {},
+              "transformations": []
+            }
+          },
+          "description": "",
+          "id": 4,
+          "links": [],
+          "title": "repeated-row-$c4-repeated-panel-$c3",
+          "vizConfig": {
+            "group": "timeseries",
+            "kind": "VizConfig",
+            "spec": {
+              "fieldConfig": {
+                "defaults": {
+                  "color": {
+                    "mode": "palette-classic"
+                  },
+                  "custom": {
+                    "axisBorderShow": false,
+                    "axisCenteredZero": false,
+                    "axisColorMode": "text",
+                    "axisLabel": "",
+                    "axisPlacement": "auto",
+                    "barAlignment": 0,
+                    "barWidthFactor": 0.6,
+                    "drawStyle": "line",
+                    "fillOpacity": 0,
+                    "gradientMode": "none",
+                    "hideFrom": {
+                      "legend": false,
+                      "tooltip": false,
+                      "viz": false
+                    },
+                    "insertNulls": false,
+                    "lineInterpolation": "linear",
+                    "lineWidth": 1,
+                    "pointSize": 5,
+                    "scaleDistribution": {
+                      "type": "linear"
+                    },
+                    "showPoints": "auto",
+                    "showValues": false,
+                    "spanNulls": false,
+                    "stacking": {
+                      "group": "A",
+                      "mode": "none"
+                    },
+                    "thresholdsStyle": {
+                      "mode": "off"
+                    }
+                  },
+                  "thresholds": {
+                    "mode": "absolute",
+                    "steps": [
+                      {
+                        "color": "green",
+                        "value": 0
+                      },
+                      {
+                        "color": "red",
+                        "value": 80
+                      }
+                    ]
+                  }
+                },
+                "overrides": []
+              },
+              "options": {
+                "legend": {
+                  "calcs": [],
+                  "displayMode": "list",
+                  "placement": "bottom",
+                  "showLegend": true
+                },
+                "tooltip": {
+                  "hideZeros": false,
+                  "mode": "single",
+                  "sort": "none"
+                }
+              }
+            },
+            "version": "12.4.0-pre"
+          }
+        }
+      },
+      "panel-2": {
+        "kind": "Panel",
+        "spec": {
+          "data": {
+            "kind": "QueryGroup",
+            "spec": {
+              "queries": [
+                {
+                  "kind": "PanelQuery",
+                  "spec": {
+                    "hidden": false,
+                    "query": {
+                      "group": "",
+                      "kind": "DataQuery",
+                      "spec": {},
+                      "version": "v0"
+                    },
+                    "refId": "A"
+                  }
+                }
+              ],
+              "queryOptions": {},
+              "transformations": []
+            }
+          },
+          "description": "",
+          "id": 2,
+          "links": [],
+          "title": "single panel row $c4",
+          "vizConfig": {
+            "group": "timeseries",
+            "kind": "VizConfig",
+            "spec": {
+              "fieldConfig": {
+                "defaults": {
+                  "color": {
+                    "mode": "palette-classic"
+                  },
+                  "custom": {
+                    "axisBorderShow": false,
+                    "axisCenteredZero": false,
+                    "axisColorMode": "text",
+                    "axisLabel": "",
+                    "axisPlacement": "auto",
+                    "barAlignment": 0,
+                    "barWidthFactor": 0.6,
+                    "drawStyle": "line",
+                    "fillOpacity": 0,
+                    "gradientMode": "none",
+                    "hideFrom": {
+                      "legend": false,
+                      "tooltip": false,
+                      "viz": false
+                    },
+                    "insertNulls": false,
+                    "lineInterpolation": "linear",
+                    "lineWidth": 1,
+                    "pointSize": 5,
+                    "scaleDistribution": {
+                      "type": "linear"
+                    },
+                    "showPoints": "auto",
+                    "showValues": false,
+                    "spanNulls": false,
+                    "stacking": {
+                      "group": "A",
+                      "mode": "none"
+                    },
+                    "thresholdsStyle": {
+                      "mode": "off"
+                    }
+                  },
+                  "thresholds": {
+                    "mode": "absolute",
+                    "steps": [
+                      {
+                        "color": "green",
+                        "value": 0
+                      },
+                      {
+                        "color": "red",
+                        "value": 80
+                      }
+                    ]
+                  }
+                },
+                "overrides": []
+              },
+              "options": {
+                "legend": {
+                  "calcs": [],
+                  "displayMode": "list",
+                  "placement": "bottom",
+                  "showLegend": true
+                },
+                "tooltip": {
+                  "hideZeros": false,
+                  "mode": "single",
+                  "sort": "none"
+                }
+              }
+            },
+            "version": "12.4.0-pre"
+          }
+        }
+      }
+    },
+    "layout": {
+      "kind": "RowsLayout",
+      "spec": {
+        "rows": [
+          {
+            "kind": "RowsLayoutRow",
+            "spec": {
+              "collapse": false,
+              "layout": {
+                "kind": "GridLayout",
+                "spec": {
+                  "items": [
+                    {
+                      "kind": "GridLayoutItem",
+                      "spec": {
+                        "element": {
+                          "kind": "ElementReference",
+                          "name": "panel-1"
+                        },
+                        "height": 10,
+                        "repeat": {
+                          "direction": "h",
+                          "mode": "variable",
+                          "value": "c3"
+                        },
+                        "width": 24,
+                        "x": 0,
+                        "y": 0
+                      }
+                    },
+                    {
+                      "kind": "GridLayoutItem",
+                      "spec": {
+                        "element": {
+                          "kind": "ElementReference",
+                          "name": "panel-2"
+                        },
+                        "height": 8,
+                        "width": 12,
+                        "x": 0,
+                        "y": 10
+                      }
+                    }
+                  ]
+                }
+              },
+              "repeat": {
+                "mode": "variable",
+                "value": "c4"
+              },
+              "title": "Repeated row $c4"
+            }
+          }
+        ]
+      }
+    },
+    "links": [],
+    "liveNow": false,
+    "preload": false,
+    "tags": [],
+    "timeSettings": {
+      "autoRefresh": "",
+      "autoRefreshIntervals": ["5s", "10s", "30s", "1m", "5m", "15m", "30m", "1h", "2h", "1d"],
+      "fiscalYearStartMonth": 0,
+      "from": "now-6h",
+      "hideTimepicker": false,
+      "timezone": "browser",
+      "to": "now"
+    },
+    "title": "test-e2e-repeats",
+    "variables": [
+      {
+        "kind": "CustomVariable",
+        "spec": {
+          "allowCustomValue": true,
+          "current": {
+            "text": ["1", "2", "3", "4"],
+            "value": ["1", "2", "3", "4"]
+          },
+          "hide": "dontHide",
+          "includeAll": true,
+          "multi": true,
+          "name": "c1",
+          "options": [
+            {
+              "selected": true,
+              "text": "1",
+              "value": "1"
+            },
+            {
+              "selected": true,
+              "text": "2",
+              "value": "2"
+            },
+            {
+              "selected": true,
+              "text": "3",
+              "value": "3"
+            },
+            {
+              "selected": true,
+              "text": "4",
+              "value": "4"
+            }
+          ],
+          "query": "1,2,3,4",
+          "skipUrlSync": false
+        }
+      },
+      {
+        "kind": "CustomVariable",
+        "spec": {
+          "allowCustomValue": true,
+          "current": {
+            "text": ["A", "B", "C", "D"],
+            "value": ["A", "B", "C", "D"]
+          },
+          "hide": "dontHide",
+          "includeAll": true,
+          "multi": true,
+          "name": "c2",
+          "options": [
+            {
+              "selected": true,
+              "text": "A",
+              "value": "A"
+            },
+            {
+              "selected": true,
+              "text": "B",
+              "value": "B"
+            },
+            {
+              "selected": true,
+              "text": "C",
+              "value": "C"
+            },
+            {
+              "selected": true,
+              "text": "D",
+              "value": "D"
+            }
+          ],
+          "query": "A,B,C,D",
+          "skipUrlSync": false
+        }
+      },
+      {
+        "kind": "CustomVariable",
+        "spec": {
+          "allowCustomValue": true,
+          "current": {
+            "text": ["1", "2", "3", "4"],
+            "value": ["1", "2", "3", "4"]
+          },
+          "hide": "dontHide",
+          "includeAll": false,
+          "multi": true,
+          "name": "c3",
+          "options": [
+            {
+              "selected": true,
+              "text": "1",
+              "value": "1"
+            },
+            {
+              "selected": true,
+              "text": "2",
+              "value": "2"
+            },
+            {
+              "selected": true,
+              "text": "3",
+              "value": "3"
+            },
+            {
+              "selected": true,
+              "text": "4",
+              "value": "4"
+            }
+          ],
+          "query": "1, 2, 3, 4",
+          "skipUrlSync": false
+        }
+      },
+      {
+        "kind": "CustomVariable",
+        "spec": {
+          "allowCustomValue": true,
+          "current": {
+            "text": ["1", "2", "3", "4"],
+            "value": ["1", "2", "3", "4"]
+          },
+          "hide": "dontHide",
+          "includeAll": false,
+          "multi": true,
+          "name": "c4",
+          "options": [
+            {
+              "selected": true,
+              "text": "1",
+              "value": "1"
+            },
+            {
+              "selected": true,
+              "text": "2",
+              "value": "2"
+            },
+            {
+              "selected": true,
+              "text": "3",
+              "value": "3"
+            },
+            {
+              "selected": true,
+              "text": "4",
+              "value": "4"
+            }
+          ],
+          "query": "1, 2, 3, 4",
+          "skipUrlSync": false
+        }
+      }
+    ]
+  },
+  "status": {}
+}

packages/grafana-data/src/types/featureToggles.gen.ts

@@ -984,6 +984,11 @@ export interface FeatureToggles {
   */
   recentlyViewedDashboards?: boolean;
   /**
+  * A/A test for recently viewed dashboards feature
+  * @default false
+  */
+  experimentRecentlyViewedDashboards?: boolean;
+  /**
   * Enable configuration of alert enrichments in Grafana Cloud.
   * @default false
   */

packages/grafana-flamegraph/package.json

@@ -58,6 +58,7 @@
     "d3": "^7.8.5",
     "lodash": "4.17.21",
     "react": "18.3.1",
+    "react-table": "^7.8.0",
     "react-use": "17.6.0",
     "react-virtualized-auto-sizer": "1.0.26",
     "tinycolor2": "1.6.0",
@@ -81,6 +82,7 @@
     "@types/lodash": "4.17.20",
     "@types/node": "24.10.1",
     "@types/react": "18.3.18",
+    "@types/react-table": "^7.7.20",
     "@types/react-virtualized-auto-sizer": "1.0.8",
     "@types/tinycolor2": "1.4.6",
     "babel-jest": "29.7.0",

packages/grafana-flamegraph/src/CallTree/FlameGraphCallTreeContainer.story.tsx

@@ -0,0 +1,49 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { createDataFrame } from '@grafana/data';
+
+import { FlameGraphDataContainer } from '../FlameGraph/dataTransform';
+import { data } from '../FlameGraph/testData/dataNestedSet';
+import { ColorScheme } from '../types';
+
+import FlameGraphCallTreeContainer from './FlameGraphCallTreeContainer';
+
+const meta: Meta<typeof FlameGraphCallTreeContainer> = {
+  title: 'CallTree',
+  component: FlameGraphCallTreeContainer,
+  args: {
+    colorScheme: ColorScheme.PackageBased,
+    search: '',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '100%', height: '1000px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+export const Basic: StoryObj<typeof meta> = {
+  render: (args) => {
+    const dataContainer = new FlameGraphDataContainer(createDataFrame(data), { collapsing: true });
+
+    return (
+      <FlameGraphCallTreeContainer
+        {...args}
+        data={dataContainer}
+        onSymbolClick={(symbol) => {
+          console.log('Symbol clicked:', symbol);
+        }}
+        onSandwich={(item) => {
+          console.log('Sandwich:', item);
+        }}
+        onSearch={(symbol) => {
+          console.log('Search:', symbol);
+        }}
+      />
+    );
+  },
+};

packages/grafana-flamegraph/src/CallTree/utils.ts

@@ -0,0 +1,580 @@
+import { FlameGraphDataContainer, LevelItem } from '../FlameGraph/dataTransform';
+
+export interface CallTreeNode {
+  id: string; // Path-based ID (e.g., "0.2.1")
+  label: string; // Function name
+  self: number; // Self value
+  total: number; // Total value
+  selfPercent: number; // Self as % of root
+  totalPercent: number; // Total as % of root
+  depth: number; // Indentation level
+  parentId?: string; // Parent node ID
+  hasChildren: boolean; // Has expandable children
+  childCount: number; // Number of direct children
+  subtreeSize: number; // Total number of nodes in subtree (excluding self)
+  levelItem: LevelItem; // Reference to original data
+  subRows?: CallTreeNode[]; // Child nodes for react-table useExpanded
+  isLastChild: boolean; // Whether this is the last child of its parent
+
+  // For diff profiles
+  selfRight?: number;
+  totalRight?: number;
+  selfPercentRight?: number;
+  totalPercentRight?: number;
+  diffPercent?: number;
+}
+
+/**
+ * Build hierarchical call tree node from the LevelItem structure.
+ * Each node gets a unique ID based on its path in the tree.
+ * Children are stored in the subRows property for react-table useExpanded.
+ */
+export function buildCallTreeNode(
+  data: FlameGraphDataContainer,
+  rootItem: LevelItem,
+  rootTotal: number,
+  parentId?: string,
+  parentDepth: number = -1,
+  childIndex: number = 0
+): CallTreeNode {
+  const nodeId = parentId ? `${parentId}.${childIndex}` : `${childIndex}`;
+  const depth = parentDepth + 1;
+
+  // Get values for current item
+  const itemIndex = rootItem.itemIndexes[0];
+  const label = data.getLabel(itemIndex);
+  const self = data.getSelf(itemIndex);
+  const total = data.getValue(itemIndex);
+  const selfPercent = rootTotal > 0 ? (self / rootTotal) * 100 : 0;
+  const totalPercent = rootTotal > 0 ? (total / rootTotal) * 100 : 0;
+
+  // For diff profiles
+  let selfRight: number | undefined;
+  let totalRight: number | undefined;
+  let selfPercentRight: number | undefined;
+  let totalPercentRight: number | undefined;
+  let diffPercent: number | undefined;
+
+  if (data.isDiffFlamegraph()) {
+    selfRight = data.getSelfRight(itemIndex);
+    totalRight = data.getValueRight(itemIndex);
+    selfPercentRight = rootTotal > 0 ? (selfRight / rootTotal) * 100 : 0;
+    totalPercentRight = rootTotal > 0 ? (totalRight / rootTotal) * 100 : 0;
+
+    // Calculate diff percentage (change from baseline to comparison)
+    if (self > 0) {
+      diffPercent = ((selfRight - self) / self) * 100;
+    } else if (selfRight > 0) {
+      diffPercent = Infinity; // New in comparison
+    } else {
+      diffPercent = 0;
+    }
+  }
+
+  // Recursively build children
+  const subRows =
+    rootItem.children.length > 0
+      ? rootItem.children.map((child, index) => {
+          const childNode = buildCallTreeNode(data, child, rootTotal, nodeId, depth, index);
+          // Mark if this is the last child
+          childNode.isLastChild = index === rootItem.children.length - 1;
+          return childNode;
+        })
+      : undefined;
+
+  // Calculate child count and subtree size
+  const childCount = rootItem.children.length;
+  const subtreeSize = subRows ? subRows.reduce((sum, child) => sum + child.subtreeSize + 1, 0) : 0;
+
+  const node: CallTreeNode = {
+    id: nodeId,
+    label,
+    self,
+    total,
+    selfPercent,
+    totalPercent,
+    depth,
+    parentId,
+    hasChildren: rootItem.children.length > 0,
+    childCount,
+    subtreeSize,
+    levelItem: rootItem,
+    subRows,
+    isLastChild: false, // Will be set by parent
+    selfRight,
+    totalRight,
+    selfPercentRight,
+    totalPercentRight,
+    diffPercent,
+  };
+
+  return node;
+}
+
+/**
+ * Build all call tree nodes from the root level items.
+ * Returns an array of root nodes, each with their children in subRows.
+ * This handles cases where there might be multiple root items.
+ */
+export function buildAllCallTreeNodes(data: FlameGraphDataContainer): CallTreeNode[] {
+  const levels = data.getLevels();
+  const rootTotal = levels.length > 0 ? levels[0][0].value : 0;
+
+  // Build hierarchical structure for each root item
+  const rootNodes = levels[0].map((rootItem, index) => buildCallTreeNode(data, rootItem, rootTotal, undefined, -1, index));
+
+  return rootNodes;
+}
+
+/**
+ * Build call tree nodes from an array of levels (from mergeParentSubtrees).
+ * This is used for the callers view where we get LevelItem[][] from getSandwichLevels.
+ * Unlike buildCallTreeNode which recursively processes children, this function
+ * processes pre-organized levels and builds the hierarchy from them.
+ */
+export function buildCallTreeFromLevels(
+  levels: LevelItem[][],
+  data: FlameGraphDataContainer,
+  rootTotal: number
+): CallTreeNode[] {
+  if (levels.length === 0 || levels[0].length === 0) {
+    return [];
+  }
+
+  // Map to track LevelItem -> CallTreeNode for building relationships
+  const levelItemToNode = new Map<LevelItem, CallTreeNode>();
+
+  // Process each level and build nodes
+  levels.forEach((level, levelIndex) => {
+    level.forEach((levelItem, itemIndex) => {
+      // Get values from data
+      const itemDataIndex = levelItem.itemIndexes[0];
+      const label = data.getLabel(itemDataIndex);
+      const self = data.getSelf(itemDataIndex);
+      const total = data.getValue(itemDataIndex);
+      const selfPercent = rootTotal > 0 ? (self / rootTotal) * 100 : 0;
+      const totalPercent = rootTotal > 0 ? (total / rootTotal) * 100 : 0;
+
+      // For diff profiles
+      let selfRight: number | undefined;
+      let totalRight: number | undefined;
+      let selfPercentRight: number | undefined;
+      let totalPercentRight: number | undefined;
+      let diffPercent: number | undefined;
+
+      if (data.isDiffFlamegraph()) {
+        selfRight = data.getSelfRight(itemDataIndex);
+        totalRight = data.getValueRight(itemDataIndex);
+        selfPercentRight = rootTotal > 0 ? (selfRight / rootTotal) * 100 : 0;
+        totalPercentRight = rootTotal > 0 ? (totalRight / rootTotal) * 100 : 0;
+
+        // Calculate diff percentage
+        if (self > 0) {
+          diffPercent = ((selfRight - self) / self) * 100;
+        } else if (selfRight > 0) {
+          diffPercent = Infinity;
+        } else {
+          diffPercent = 0;
+        }
+      }
+
+      // Determine parent (if exists)
+      let parentId: string | undefined;
+      let depth = levelIndex;
+
+      if (levelItem.parents && levelItem.parents.length > 0) {
+        const parentNode = levelItemToNode.get(levelItem.parents[0]);
+        if (parentNode) {
+          parentId = parentNode.id;
+          depth = parentNode.depth + 1;
+        }
+      }
+
+      // Generate path-based ID
+      // For root nodes, use index at level 0
+      // For child nodes, append index to parent ID
+      let nodeId: string;
+      if (!parentId) {
+        nodeId = `${itemIndex}`;
+      } else {
+        // Find index among siblings
+        const parent = levelItemToNode.get(levelItem.parents![0]);
+        const siblingIndex = parent?.subRows?.length || 0;
+        nodeId = `${parentId}.${siblingIndex}`;
+      }
+
+      // Create the node (without children initially)
+      const node: CallTreeNode = {
+        id: nodeId,
+        label,
+        self,
+        total,
+        selfPercent,
+        totalPercent,
+        depth,
+        parentId,
+        hasChildren: levelItem.children.length > 0,
+        childCount: levelItem.children.length,
+        subtreeSize: 0, // Will be calculated later
+        levelItem,
+        subRows: undefined,
+        isLastChild: false,
+        selfRight,
+        totalRight,
+        selfPercentRight,
+        totalPercentRight,
+        diffPercent,
+      };
+
+      // Add to map
+      levelItemToNode.set(levelItem, node);
+
+      // Add as child to parent
+      if (levelItem.parents && levelItem.parents.length > 0) {
+        const parentNode = levelItemToNode.get(levelItem.parents[0]);
+        if (parentNode) {
+          if (!parentNode.subRows) {
+            parentNode.subRows = [];
+          }
+          parentNode.subRows.push(node);
+          // Mark if this is the last child
+          const isLastChild = parentNode.subRows.length === parentNode.childCount;
+          node.isLastChild = isLastChild;
+        }
+      }
+    });
+  });
+
+  // Calculate subtreeSize for all nodes (bottom-up)
+  const calculateSubtreeSize = (node: CallTreeNode): number => {
+    if (!node.subRows || node.subRows.length === 0) {
+      node.subtreeSize = 0;
+      return 0;
+    }
+
+    const size = node.subRows.reduce((sum, child) => {
+      return sum + calculateSubtreeSize(child) + 1;
+    }, 0);
+
+    node.subtreeSize = size;
+    return size;
+  };
+
+  // Collect root nodes (level 0)
+  const rootNodes: CallTreeNode[] = [];
+  levels[0].forEach((levelItem) => {
+    const node = levelItemToNode.get(levelItem);
+    if (node) {
+      calculateSubtreeSize(node);
+      rootNodes.push(node);
+    }
+  });
+
+  return rootNodes;
+}
+
+/**
+ * Recursively collect expanded state for nodes up to a certain depth.
+ */
+function collectExpandedByDepth(
+  node: CallTreeNode,
+  levelsToExpand: number,
+  expanded: Record<string, boolean>
+): void {
+  if (node.depth < levelsToExpand && node.hasChildren) {
+    expanded[node.id] = true;
+  }
+
+  if (node.subRows) {
+    node.subRows.forEach((child) => collectExpandedByDepth(child, levelsToExpand, expanded));
+  }
+}
+
+/**
+ * Get initial expanded state for the tree.
+ * Auto-expands first N levels.
+ */
+export function getInitialExpandedState(nodes: CallTreeNode[], levelsToExpand: number = 2): Record<string, boolean> {
+  const expanded: Record<string, boolean> = {};
+
+  nodes.forEach((node) => {
+    collectExpandedByDepth(node, levelsToExpand, expanded);
+  });
+
+  return expanded;
+}
+
+/**
+ * Restructure the callers tree to show a specific target node at the root.
+ * In the callers view, we want to show the target function with its callers as children.
+ * This function finds the target node and collects all paths that lead to it,
+ * then restructures them so the target is at the root.
+ */
+export function restructureCallersTree(
+  nodes: CallTreeNode[],
+  targetLabel: string
+): { restructuredTree: CallTreeNode[]; targetNode: CallTreeNode | undefined } {
+  // First, find all paths from root to target node
+  const findPathsToTarget = (
+    nodes: CallTreeNode[],
+    targetLabel: string,
+    currentPath: CallTreeNode[] = []
+  ): CallTreeNode[][] => {
+    const paths: CallTreeNode[][] = [];
+
+    for (const node of nodes) {
+      const newPath = [...currentPath, node];
+
+      if (node.label === targetLabel) {
+        // Found a path to the target
+        paths.push(newPath);
+      }
+
+      if (node.subRows && node.subRows.length > 0) {
+        // Continue searching in children
+        const childPaths = findPathsToTarget(node.subRows, targetLabel, newPath);
+        paths.push(...childPaths);
+      }
+    }
+
+    return paths;
+  };
+
+  const paths = findPathsToTarget(nodes, targetLabel);
+
+  if (paths.length === 0) {
+    // Target not found, return original tree
+    return { restructuredTree: nodes, targetNode: undefined };
+  }
+
+  // Get the target node from the first path (they should all have the same target node)
+  const targetNode = paths[0][paths[0].length - 1];
+
+  // Now restructure: create a new tree with target at root
+  // Each path to the target becomes a branch under the target
+  // For example, if we have: root -> A -> B -> target
+  // We want: target -> B -> A -> root (inverted)
+
+  const buildInvertedChildren = (paths: CallTreeNode[][]): CallTreeNode[] => {
+    // Group paths by their immediate caller (the node right before target)
+    const callerGroups = new Map<string, CallTreeNode[][]>();
+
+    for (const path of paths) {
+      if (path.length <= 1) {
+        // Path is just the target node itself, no callers
+        continue;
+      }
+
+      // The immediate caller is the node right before the target
+      const immediateCaller = path[path.length - 2];
+      const callerKey = immediateCaller.label;
+
+      if (!callerGroups.has(callerKey)) {
+        callerGroups.set(callerKey, []);
+      }
+      callerGroups.get(callerKey)!.push(path);
+    }
+
+    // Build nodes for each immediate caller
+    const callerNodes: CallTreeNode[] = [];
+    let callerIndex = 0;
+
+    for (const [, callerPaths] of callerGroups.entries()) {
+      // Get the immediate caller node from one of the paths
+      const immediateCallerNode = callerPaths[0][callerPaths[0].length - 2];
+
+      // For this caller, recursively build its callers (from the remaining path)
+      const remainingPaths = callerPaths.map((path) => path.slice(0, -1)); // Remove target from paths
+      const grandCallers = buildInvertedChildren(remainingPaths);
+
+      // Create a new node for this caller as a child of the target
+      const newCallerId = `0.${callerIndex}`;
+      const callerNode: CallTreeNode = {
+        ...immediateCallerNode,
+        id: newCallerId,
+        depth: 1,
+        parentId: '0',
+        subRows: grandCallers.length > 0 ? grandCallers : undefined,
+        hasChildren: grandCallers.length > 0,
+        childCount: grandCallers.length,
+        isLastChild: callerIndex === callerGroups.size - 1,
+      };
+
+      // Update IDs of grandCallers
+      if (grandCallers.length > 0) {
+        grandCallers.forEach((grandCaller, idx) => {
+          updateNodeIds(grandCaller, newCallerId, idx);
+        });
+      }
+
+      callerNodes.push(callerNode);
+      callerIndex++;
+    }
+
+    return callerNodes;
+  };
+
+  // Helper to recursively update node IDs
+  const updateNodeIds = (node: CallTreeNode, parentId: string, index: number) => {
+    node.id = `${parentId}.${index}`;
+    node.parentId = parentId;
+    node.depth = parentId.split('.').length;
+
+    if (node.subRows) {
+      node.subRows.forEach((child, idx) => {
+        updateNodeIds(child, node.id, idx);
+      });
+    }
+  };
+
+  // Build the inverted children for the target
+  const invertedChildren = buildInvertedChildren(paths);
+
+  // Create the restructured target node as root
+  const restructuredTarget: CallTreeNode = {
+    ...targetNode,
+    id: '0',
+    depth: 0,
+    parentId: undefined,
+    subRows: invertedChildren.length > 0 ? invertedChildren : undefined,
+    hasChildren: invertedChildren.length > 0,
+    childCount: invertedChildren.length,
+    subtreeSize: invertedChildren.reduce((sum, child) => sum + child.subtreeSize + 1, 0),
+    isLastChild: false,
+  };
+
+  return { restructuredTree: [restructuredTarget], targetNode: restructuredTarget };
+}
+
+/**
+ * Build a callers tree directly from sandwich levels data.
+ * This creates an inverted tree where the target function is at the root
+ * and its callers are shown as children.
+ */
+export function buildCallersTreeFromLevels(
+  levels: LevelItem[][],
+  targetLabel: string,
+  data: FlameGraphDataContainer,
+  rootTotal: number
+): { tree: CallTreeNode[]; targetNode: CallTreeNode | undefined } {
+  if (levels.length === 0) {
+    return { tree: [], targetNode: undefined };
+  }
+
+  // Find the target node in the levels
+  let targetLevelIndex = -1;
+  let targetItem: LevelItem | undefined;
+
+  for (let i = 0; i < levels.length; i++) {
+    for (const item of levels[i]) {
+      const label = data.getLabel(item.itemIndexes[0]);
+      if (label === targetLabel) {
+        targetLevelIndex = i;
+        targetItem = item;
+        break;
+      }
+    }
+    if (targetItem) break;
+  }
+
+  if (!targetItem || targetLevelIndex === -1) {
+    // Target not found
+    return { tree: [], targetNode: undefined };
+  }
+
+  // Create a map from LevelItem to all items that reference it as a parent
+  const childrenMap = new Map<LevelItem, LevelItem[]>();
+
+  for (const level of levels) {
+    for (const item of level) {
+      if (item.parents) {
+        for (const parent of item.parents) {
+          if (!childrenMap.has(parent)) {
+            childrenMap.set(parent, []);
+          }
+          childrenMap.get(parent)!.push(item);
+        }
+      }
+    }
+  }
+
+  // Build the inverted tree recursively
+  // For callers view: the target is root, and parents become children
+  const buildInvertedNode = (
+    item: LevelItem,
+    nodeId: string,
+    depth: number,
+    parentId: string | undefined
+  ): CallTreeNode => {
+    const itemIdx = item.itemIndexes[0];
+    const label = data.getLabel(itemIdx);
+    const self = data.getSelf(itemIdx);
+    const total = data.getValue(itemIdx);
+    const selfPercent = rootTotal > 0 ? (self / rootTotal) * 100 : 0;
+    const totalPercent = rootTotal > 0 ? (total / rootTotal) * 100 : 0;
+
+    // For diff profiles
+    let selfRight: number | undefined;
+    let totalRight: number | undefined;
+    let selfPercentRight: number | undefined;
+    let totalPercentRight: number | undefined;
+    let diffPercent: number | undefined;
+
+    if (data.isDiffFlamegraph()) {
+      selfRight = data.getSelfRight(itemIdx);
+      totalRight = data.getValueRight(itemIdx);
+      selfPercentRight = rootTotal > 0 ? (selfRight / rootTotal) * 100 : 0;
+      totalPercentRight = rootTotal > 0 ? (totalRight / rootTotal) * 100 : 0;
+
+      if (self > 0) {
+        diffPercent = ((selfRight - self) / self) * 100;
+      } else if (selfRight > 0) {
+        diffPercent = Infinity;
+      } else {
+        diffPercent = 0;
+      }
+    }
+
+    // In the inverted tree, parents become children (callers)
+    const callers = item.parents || [];
+    const subRows =
+      callers.length > 0
+        ? callers.map((caller, idx) => {
+            const callerId = `${nodeId}.${idx}`;
+            const callerNode = buildInvertedNode(caller, callerId, depth + 1, nodeId);
+            callerNode.isLastChild = idx === callers.length - 1;
+            return callerNode;
+          })
+        : undefined;
+
+    const childCount = callers.length;
+    const subtreeSize = subRows ? subRows.reduce((sum, child) => sum + child.subtreeSize + 1, 0) : 0;
+
+    return {
+      id: nodeId,
+      label,
+      self,
+      total,
+      selfPercent,
+      totalPercent,
+      depth,
+      parentId,
+      hasChildren: callers.length > 0,
+      childCount,
+      subtreeSize,
+      levelItem: item,
+      subRows,
+      isLastChild: false,
+      selfRight,
+      totalRight,
+      selfPercentRight,
+      totalPercentRight,
+      diffPercent,
+    };
+  };
+
+  // Build tree with target as root
+  const targetNode = buildInvertedNode(targetItem, '0', 0, undefined);
+
+  return { tree: [targetNode], targetNode };
+}

packages/grafana-flamegraph/src/FlameGraph/FlameGraph.story.tsx

@@ -16,7 +16,7 @@ const meta: Meta<typeof FlameGraph> = {
     rangeMax: 1,
     textAlign: 'left',
     colorScheme: ColorScheme.PackageBased,
-    selectedView: SelectedView.Both,
+    selectedView: SelectedView.Multi,
     search: '',
   },
 };

packages/grafana-flamegraph/src/FlameGraph/FlameGraph.test.tsx

@@ -43,10 +43,13 @@ describe('FlameGraph', () => {
         setRangeMax={setRangeMax}
         onItemFocused={onItemFocused}
         textAlign={'left'}
+        onTextAlignChange={jest.fn()}
         onSandwich={onSandwich}
         onFocusPillClick={onFocusPillClick}
         onSandwichPillClick={onSandwichPillClick}
         colorScheme={ColorScheme.ValueBased}
+        onColorSchemeChange={jest.fn()}
+        isDiffMode={false}
         selectedView={SelectedView.FlameGraph}
         search={''}
         collapsedMap={container.getCollapsedMap()}

packages/grafana-flamegraph/src/FlameGraph/FlameGraph.tsx

@@ -19,8 +19,10 @@
 import { css, cx } from '@emotion/css';
 import { useEffect, useState } from 'react';
 
-import { Icon } from '@grafana/ui';
+import { GrafanaTheme2, SelectableValue } from '@grafana/data';
+import { Button, ButtonGroup, Dropdown, Icon, Menu, RadioButtonGroup, useStyles2 } from '@grafana/ui';
 
+import { byPackageGradient, byValueGradient, diffColorBlindGradient, diffDefaultGradient } from './colors';
 import { PIXELS_PER_LEVEL } from '../constants';
 import { ClickedItemData, ColorScheme, ColorSchemeDiff, SelectedView, TextAlign } from '../types';
 
@@ -39,11 +41,14 @@ type Props = {
   onItemFocused: (data: ClickedItemData) => void;
   focusedItemData?: ClickedItemData;
   textAlign: TextAlign;
+  onTextAlignChange: (align: TextAlign) => void;
   sandwichItem?: string;
   onSandwich: (label: string) => void;
   onFocusPillClick: () => void;
   onSandwichPillClick: () => void;
   colorScheme: ColorScheme | ColorSchemeDiff;
+  onColorSchemeChange: (colorScheme: ColorScheme | ColorSchemeDiff) => void;
+  isDiffMode: boolean;
   showFlameGraphOnly?: boolean;
   getExtraContextMenuButtons?: GetExtraContextMenuButtonsFunction;
   collapsing?: boolean;
@@ -63,11 +68,14 @@ const FlameGraph = ({
   onItemFocused,
   focusedItemData,
   textAlign,
+  onTextAlignChange,
   onSandwich,
   sandwichItem,
   onFocusPillClick,
   onSandwichPillClick,
   colorScheme,
+  onColorSchemeChange,
+  isDiffMode,
   showFlameGraphOnly,
   getExtraContextMenuButtons,
   collapsing,
@@ -76,7 +84,7 @@ const FlameGraph = ({
   collapsedMap,
   setCollapsedMap,
 }: Props) => {
-  const styles = getStyles();
+  const styles = useStyles2(getStyles);
 
   const [levels, setLevels] = useState<LevelItem[][]>();
   const [levelsCallers, setLevelsCallers] = useState<LevelItem[][]>();
@@ -175,28 +183,183 @@ const FlameGraph = ({
     );
   }
 
+  const alignOptions: Array<SelectableValue<TextAlign>> = [
+    { value: 'left', description: 'Align text left', icon: 'align-left' },
+    { value: 'right', description: 'Align text right', icon: 'align-right' },
+  ];
+
   return (
     <div className={styles.graph}>
-      <FlameGraphMetadata
-        data={data}
-        focusedItem={focusedItemData}
-        sandwichedLabel={sandwichItem}
-        totalTicks={totalViewTicks}
-        onFocusPillClick={onFocusPillClick}
-        onSandwichPillClick={onSandwichPillClick}
-      />
+      <div className={styles.toolbar}>
+        <FlameGraphMetadata
+          data={data}
+          focusedItem={focusedItemData}
+          sandwichedLabel={sandwichItem}
+          totalTicks={totalViewTicks}
+          onFocusPillClick={onFocusPillClick}
+          onSandwichPillClick={onSandwichPillClick}
+        />
+        <div className={styles.controls}>
+          <ColorSchemeButton value={colorScheme} onChange={onColorSchemeChange} isDiffMode={isDiffMode} />
+          <ButtonGroup className={styles.buttonSpacing}>
+            <Button
+              variant={'secondary'}
+              fill={'outline'}
+              size={'sm'}
+              tooltip={'Expand all groups'}
+              onClick={() => {
+                setCollapsedMap(collapsedMap.setAllCollapsedStatus(false));
+              }}
+              aria-label={'Expand all groups'}
+              icon={'angle-double-down'}
+            />
+            <Button
+              variant={'secondary'}
+              fill={'outline'}
+              size={'sm'}
+              tooltip={'Collapse all groups'}
+              onClick={() => {
+                setCollapsedMap(collapsedMap.setAllCollapsedStatus(true));
+              }}
+              aria-label={'Collapse all groups'}
+              icon={'angle-double-up'}
+            />
+          </ButtonGroup>
+          <RadioButtonGroup<TextAlign>
+            size="sm"
+            options={alignOptions}
+            value={textAlign}
+            onChange={onTextAlignChange}
+          />
+        </div>
+      </div>
       {canvas}
     </div>
   );
 };
 
-const getStyles = () => ({
+type ColorSchemeButtonProps = {
+  value: ColorScheme | ColorSchemeDiff;
+  onChange: (colorScheme: ColorScheme | ColorSchemeDiff) => void;
+  isDiffMode: boolean;
+};
+
+function ColorSchemeButton(props: ColorSchemeButtonProps) {
+  const styles = useStyles2(getStyles);
+  let menu = (
+    <Menu>
+      <Menu.Item label="By package name" onClick={() => props.onChange(ColorScheme.PackageBased)} />
+      <Menu.Item label="By value" onClick={() => props.onChange(ColorScheme.ValueBased)} />
+    </Menu>
+  );
+
+  // Show a bit different gradient as a way to indicate selected value
+  const colorDotStyle =
+    {
+      [ColorScheme.ValueBased]: styles.colorDotByValue,
+      [ColorScheme.PackageBased]: styles.colorDotByPackage,
+      [ColorSchemeDiff.DiffColorBlind]: styles.colorDotDiffColorBlind,
+      [ColorSchemeDiff.Default]: styles.colorDotDiffDefault,
+    }[props.value] || styles.colorDotByValue;
+
+  let contents = <span className={cx(styles.colorDot, colorDotStyle)} />;
+
+  if (props.isDiffMode) {
+    menu = (
+      <Menu>
+        <Menu.Item label="Default (green to red)" onClick={() => props.onChange(ColorSchemeDiff.Default)} />
+        <Menu.Item label="Color blind (blue to red)" onClick={() => props.onChange(ColorSchemeDiff.DiffColorBlind)} />
+      </Menu>
+    );
+
+    contents = (
+      <div className={cx(styles.colorDotDiff, colorDotStyle)}>
+        <div>-100% (removed)</div>
+        <div>0%</div>
+        <div>+100% (added)</div>
+      </div>
+    );
+  }
+
+  return (
+    <Dropdown overlay={menu}>
+      <Button
+        variant={'secondary'}
+        fill={'outline'}
+        size={'sm'}
+        tooltip={'Change color scheme'}
+        onClick={() => {}}
+        className={styles.buttonSpacing}
+        aria-label={'Change color scheme'}
+      >
+        {contents}
+      </Button>
+    </Dropdown>
+  );
+}
+
+const getStyles = (theme: GrafanaTheme2) => ({
   graph: css({
     label: 'graph',
     overflow: 'auto',
     flexGrow: 1,
     flexBasis: '50%',
   }),
+  toolbar: css({
+    label: 'toolbar',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: theme.spacing(1),
+  }),
+  controls: css({
+    label: 'controls',
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+  }),
+  buttonSpacing: css({
+    label: 'buttonSpacing',
+    marginRight: theme.spacing(1),
+  }),
+  colorDot: css({
+    label: 'colorDot',
+    display: 'inline-block',
+    width: '10px',
+    height: '10px',
+    borderRadius: theme.shape.radius.circle,
+  }),
+  colorDotDiff: css({
+    label: 'colorDotDiff',
+    display: 'flex',
+    width: '200px',
+    height: '12px',
+    color: 'white',
+    fontSize: 9,
+    lineHeight: 1.3,
+    fontWeight: 300,
+    justifyContent: 'space-between',
+    padding: '0 2px',
+    // We have a specific sizing for this so probably makes sense to use hardcoded value here
+    // eslint-disable-next-line @grafana/no-border-radius-literal
+    borderRadius: '2px',
+  }),
+  colorDotByValue: css({
+    label: 'colorDotByValue',
+    background: byValueGradient,
+  }),
+  colorDotByPackage: css({
+    label: 'colorDotByPackage',
+    background: byPackageGradient,
+  }),
+  colorDotDiffDefault: css({
+    label: 'colorDotDiffDefault',
+    background: diffDefaultGradient,
+  }),
+  colorDotDiffColorBlind: css({
+    label: 'colorDotDiffColorBlind',
+    background: diffColorBlindGradient,
+  }),
   sandwichCanvasWrapper: css({
     label: 'sandwichCanvasWrapper',
     display: 'flex',

packages/grafana-flamegraph/src/FlameGraphContainer.tsx

@@ -1,19 +1,18 @@
 import { css } from '@emotion/css';
 import uFuzzy from '@leeoniya/ufuzzy';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import * as React from 'react';
 import { useMeasure } from 'react-use';
 
-import { DataFrame, GrafanaTheme2, escapeStringForRegex } from '@grafana/data';
+import { DataFrame, GrafanaTheme2 } from '@grafana/data';
 import { ThemeContext } from '@grafana/ui';
 
-import FlameGraph from './FlameGraph/FlameGraph';
+import { FlameGraphDataContainer } from './FlameGraph/dataTransform';
 import { GetExtraContextMenuButtonsFunction } from './FlameGraph/FlameGraphContextMenu';
-import { CollapsedMap, FlameGraphDataContainer } from './FlameGraph/dataTransform';
 import FlameGraphHeader from './FlameGraphHeader';
-import FlameGraphTopTableContainer from './TopTable/FlameGraphTopTableContainer';
+import FlameGraphPane from './FlameGraphPane';
 import { MIN_WIDTH_TO_SHOW_BOTH_TOPTABLE_AND_FLAMEGRAPH } from './constants';
-import { ClickedItemData, ColorScheme, ColorSchemeDiff, SelectedView, TextAlign } from './types';
+import { PaneView, SelectedView, ViewMode } from './types';
 import { getAssistantContextFromDataFrame } from './utils';
 
 const ufuzzy = new uFuzzy();
@@ -104,17 +103,18 @@ const FlameGraphContainer = ({
   getExtraContextMenuButtons,
   showAnalyzeWithAssistant = true,
 }: Props) => {
-  const [focusedItemData, setFocusedItemData] = useState<ClickedItemData>();
-
-  const [rangeMin, setRangeMin] = useState(0);
-  const [rangeMax, setRangeMax] = useState(1);
+  // Shared state across all views
   const [search, setSearch] = useState('');
-  const [selectedView, setSelectedView] = useState(SelectedView.Both);
+  const [selectedView, setSelectedView] = useState(SelectedView.Multi);
+  const [viewMode, setViewMode] = useState<ViewMode>(ViewMode.Split);
+  const [leftPaneView, setLeftPaneView] = useState<PaneView>(PaneView.TopTable);
+  const [rightPaneView, setRightPaneView] = useState<PaneView>(PaneView.FlameGraph);
+  const [singleView, setSingleView] = useState<PaneView>(PaneView.FlameGraph);
   const [sizeRef, { width: containerWidth }] = useMeasure<HTMLDivElement>();
-  const [textAlign, setTextAlign] = useState<TextAlign>('left');
-  // This is a label of the item because in sandwich view we group all items by label and present a merged graph
-  const [sandwichItem, setSandwichItem] = useState<string>();
-  const [collapsedMap, setCollapsedMap] = useState(new CollapsedMap());
+  // Used to trigger reset of pane-specific state (focus, sandwich) when parent reset button is clicked
+  const [resetKey, setResetKey] = useState(0);
+  // Track if we temporarily switched away from Both view due to narrow width
+  const [viewBeforeNarrow, setViewBeforeNarrow] = useState<SelectedView | null>(null);
 
   const theme = useMemo(() => getTheme(), [getTheme]);
   const dataContainer = useMemo((): FlameGraphDataContainer | undefined => {
@@ -122,157 +122,220 @@ const FlameGraphContainer = ({
       return;
     }
 
-    const container = new FlameGraphDataContainer(data, { collapsing: !disableCollapsing }, theme);
-    setCollapsedMap(container.getCollapsedMap());
-    return container;
+    return new FlameGraphDataContainer(data, { collapsing: !disableCollapsing }, theme);
   }, [data, theme, disableCollapsing]);
-  const [colorScheme, setColorScheme] = useColorScheme(dataContainer);
+
   const styles = getStyles(theme);
   const matchedLabels = useLabelSearch(search, dataContainer);
 
-  // If user resizes window with both as the selected view
+  // Handle responsive layout: switch away from Both view when narrow, restore when wide again
   useEffect(() => {
-    if (
-      containerWidth > 0 &&
-      containerWidth < MIN_WIDTH_TO_SHOW_BOTH_TOPTABLE_AND_FLAMEGRAPH &&
-      selectedView === SelectedView.Both &&
-      !vertical
-    ) {
-      setSelectedView(SelectedView.FlameGraph);
-    }
-  }, [selectedView, setSelectedView, containerWidth, vertical]);
-
-  const resetFocus = useCallback(() => {
-    setFocusedItemData(undefined);
-    setRangeMin(0);
-    setRangeMax(1);
-  }, [setFocusedItemData, setRangeMax, setRangeMin]);
-
-  const resetSandwich = useCallback(() => {
-    setSandwichItem(undefined);
-  }, [setSandwichItem]);
-
-  useEffect(() => {
-    if (!keepFocusOnDataChange) {
-      resetFocus();
-      resetSandwich();
+    if (containerWidth === 0) {
       return;
     }
 
-    if (dataContainer && focusedItemData) {
-      const item = dataContainer.getNodesWithLabel(focusedItemData.label)?.[0];
+    const isNarrow = containerWidth < MIN_WIDTH_TO_SHOW_BOTH_TOPTABLE_AND_FLAMEGRAPH && !vertical;
 
-      if (item) {
-        setFocusedItemData({ ...focusedItemData, item });
-
-        const levels = dataContainer.getLevels();
-        const totalViewTicks = levels.length ? levels[0][0].value : 0;
-        setRangeMin(item.start / totalViewTicks);
-        setRangeMax((item.start + item.value) / totalViewTicks);
-      } else {
-        setFocusedItemData({
-          ...focusedItemData,
-          item: {
-            start: 0,
-            value: 0,
-            itemIndexes: [],
-            children: [],
-            level: 0,
-          },
-        });
-
-        setRangeMin(0);
-        setRangeMax(1);
-      }
+    if (isNarrow && selectedView === SelectedView.Multi) {
+      // Going narrow: save current view and switch to FlameGraph
+      setViewBeforeNarrow(SelectedView.Multi);
+      setSelectedView(SelectedView.FlameGraph);
+    } else if (!isNarrow && viewBeforeNarrow !== null) {
+      // Going wide again: restore the previous view
+      setSelectedView(viewBeforeNarrow);
+      setViewBeforeNarrow(null);
     }
-  }, [dataContainer, keepFocusOnDataChange]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  const onSymbolClick = useCallback(
-    (symbol: string) => {
-      const anchored = `^${escapeStringForRegex(symbol)}$`;
-
-      if (search === anchored) {
-        setSearch('');
-      } else {
-        onTableSymbolClick?.(symbol);
-        setSearch(anchored);
-        resetFocus();
-      }
-    },
-    [setSearch, resetFocus, onTableSymbolClick, search]
-  );
+  }, [containerWidth, vertical, selectedView, viewBeforeNarrow]);
 
   if (!dataContainer) {
     return null;
   }
 
-  const flameGraph = (
-    <FlameGraph
-      data={dataContainer}
-      rangeMin={rangeMin}
-      rangeMax={rangeMax}
-      matchedLabels={matchedLabels}
-      setRangeMin={setRangeMin}
-      setRangeMax={setRangeMax}
-      onItemFocused={(data) => setFocusedItemData(data)}
-      focusedItemData={focusedItemData}
-      textAlign={textAlign}
-      sandwichItem={sandwichItem}
-      onSandwich={(label: string) => {
-        resetFocus();
-        setSandwichItem(label);
-      }}
-      onFocusPillClick={resetFocus}
-      onSandwichPillClick={resetSandwich}
-      colorScheme={colorScheme}
-      showFlameGraphOnly={showFlameGraphOnly}
-      collapsing={!disableCollapsing}
-      getExtraContextMenuButtons={getExtraContextMenuButtons}
-      selectedView={selectedView}
-      search={search}
-      collapsedMap={collapsedMap}
-      setCollapsedMap={setCollapsedMap}
-    />
-  );
-
-  const table = (
-    <FlameGraphTopTableContainer
-      data={dataContainer}
-      onSymbolClick={onSymbolClick}
-      search={search}
-      matchedLabels={matchedLabels}
-      sandwichItem={sandwichItem}
-      onSandwich={setSandwichItem}
-      onSearch={(str) => {
-        if (!str) {
-          setSearch('');
-          return;
-        }
-        setSearch(`^${escapeStringForRegex(str)}$`);
-      }}
-      onTableSort={onTableSort}
-      colorScheme={colorScheme}
-    />
-  );
-
   let body;
   if (showFlameGraphOnly || selectedView === SelectedView.FlameGraph) {
-    body = flameGraph;
+    body = (
+      <FlameGraphPane
+        paneView={PaneView.FlameGraph}
+        dataContainer={dataContainer}
+        search={search}
+        matchedLabels={matchedLabels}
+        onTableSymbolClick={onTableSymbolClick}
+        onTextAlignSelected={onTextAlignSelected}
+        onTableSort={onTableSort}
+        showFlameGraphOnly={showFlameGraphOnly}
+        disableCollapsing={disableCollapsing}
+        getExtraContextMenuButtons={getExtraContextMenuButtons}
+        selectedView={selectedView}
+        viewMode={viewMode}
+        theme={theme}
+        setSearch={setSearch}
+        resetKey={resetKey}
+        keepFocusOnDataChange={keepFocusOnDataChange}
+      />
+    );
   } else if (selectedView === SelectedView.TopTable) {
-    body = <div className={styles.tableContainer}>{table}</div>;
-  } else if (selectedView === SelectedView.Both) {
-    if (vertical) {
-      body = (
-        <div>
-          <div className={styles.verticalGraphContainer}>{flameGraph}</div>
-          <div className={styles.verticalTableContainer}>{table}</div>
-        </div>
-      );
+    body = (
+      <FlameGraphPane
+        paneView={PaneView.TopTable}
+        dataContainer={dataContainer}
+        search={search}
+        matchedLabels={matchedLabels}
+        onTableSymbolClick={onTableSymbolClick}
+        onTextAlignSelected={onTextAlignSelected}
+        onTableSort={onTableSort}
+        showFlameGraphOnly={showFlameGraphOnly}
+        disableCollapsing={disableCollapsing}
+        getExtraContextMenuButtons={getExtraContextMenuButtons}
+        selectedView={selectedView}
+        viewMode={viewMode}
+        theme={theme}
+        setSearch={setSearch}
+        resetKey={resetKey}
+        keepFocusOnDataChange={keepFocusOnDataChange}
+      />
+    );
+  } else if (selectedView === SelectedView.CallTree) {
+    body = (
+      <FlameGraphPane
+        paneView={PaneView.CallTree}
+        dataContainer={dataContainer}
+        search={search}
+        matchedLabels={matchedLabels}
+        onTableSymbolClick={onTableSymbolClick}
+        onTextAlignSelected={onTextAlignSelected}
+        onTableSort={onTableSort}
+        showFlameGraphOnly={showFlameGraphOnly}
+        disableCollapsing={disableCollapsing}
+        getExtraContextMenuButtons={getExtraContextMenuButtons}
+        selectedView={selectedView}
+        viewMode={viewMode}
+        theme={theme}
+        setSearch={setSearch}
+        resetKey={resetKey}
+        keepFocusOnDataChange={keepFocusOnDataChange}
+      />
+    );
+  } else if (selectedView === SelectedView.Multi) {
+    // New view model: support split view with independent pane selections
+    if (viewMode === ViewMode.Split) {
+      if (vertical) {
+        body = (
+          <div>
+            <div className={styles.verticalPaneContainer}>
+              <FlameGraphPane
+                key="left-pane"
+                paneView={leftPaneView}
+                dataContainer={dataContainer}
+                search={search}
+                matchedLabels={matchedLabels}
+                onTableSymbolClick={onTableSymbolClick}
+                onTextAlignSelected={onTextAlignSelected}
+                onTableSort={onTableSort}
+                showFlameGraphOnly={showFlameGraphOnly}
+                disableCollapsing={disableCollapsing}
+                getExtraContextMenuButtons={getExtraContextMenuButtons}
+                selectedView={selectedView}
+                viewMode={viewMode}
+                theme={theme}
+                setSearch={setSearch}
+                resetKey={resetKey}
+                keepFocusOnDataChange={keepFocusOnDataChange}
+              />
+            </div>
+            <div className={styles.verticalPaneContainer}>
+              <FlameGraphPane
+                key="right-pane"
+                paneView={rightPaneView}
+                dataContainer={dataContainer}
+                search={search}
+                matchedLabels={matchedLabels}
+                onTableSymbolClick={onTableSymbolClick}
+                onTextAlignSelected={onTextAlignSelected}
+                onTableSort={onTableSort}
+                showFlameGraphOnly={showFlameGraphOnly}
+                disableCollapsing={disableCollapsing}
+                getExtraContextMenuButtons={getExtraContextMenuButtons}
+                selectedView={selectedView}
+                viewMode={viewMode}
+                theme={theme}
+                setSearch={setSearch}
+                resetKey={resetKey}
+                keepFocusOnDataChange={keepFocusOnDataChange}
+              />
+            </div>
+          </div>
+        );
+      } else {
+        body = (
+          <div className={styles.horizontalContainer}>
+            <div className={styles.horizontalPaneContainer}>
+              <FlameGraphPane
+                key="left-pane"
+                paneView={leftPaneView}
+                dataContainer={dataContainer}
+                search={search}
+                matchedLabels={matchedLabels}
+                onTableSymbolClick={onTableSymbolClick}
+                onTextAlignSelected={onTextAlignSelected}
+                onTableSort={onTableSort}
+                showFlameGraphOnly={showFlameGraphOnly}
+                disableCollapsing={disableCollapsing}
+                getExtraContextMenuButtons={getExtraContextMenuButtons}
+                selectedView={selectedView}
+                viewMode={viewMode}
+                theme={theme}
+                setSearch={setSearch}
+                resetKey={resetKey}
+                keepFocusOnDataChange={keepFocusOnDataChange}
+              />
+            </div>
+            <div className={styles.horizontalPaneContainer}>
+              <FlameGraphPane
+                key="right-pane"
+                paneView={rightPaneView}
+                dataContainer={dataContainer}
+                search={search}
+                matchedLabels={matchedLabels}
+                onTableSymbolClick={onTableSymbolClick}
+                onTextAlignSelected={onTextAlignSelected}
+                onTableSort={onTableSort}
+                showFlameGraphOnly={showFlameGraphOnly}
+                disableCollapsing={disableCollapsing}
+                getExtraContextMenuButtons={getExtraContextMenuButtons}
+                selectedView={selectedView}
+                viewMode={viewMode}
+                theme={theme}
+                setSearch={setSearch}
+                resetKey={resetKey}
+                keepFocusOnDataChange={keepFocusOnDataChange}
+              />
+            </div>
+          </div>
+        );
+      }
     } else {
+      // Single view mode
       body = (
-        <div className={styles.horizontalContainer}>
-          <div className={styles.horizontalTableContainer}>{table}</div>
-          <div className={styles.horizontalGraphContainer}>{flameGraph}</div>
+        <div className={styles.singlePaneContainer}>
+          <FlameGraphPane
+            key={`single-${singleView}`}
+            paneView={singleView}
+            dataContainer={dataContainer}
+            search={search}
+            matchedLabels={matchedLabels}
+            onTableSymbolClick={onTableSymbolClick}
+            onTextAlignSelected={onTextAlignSelected}
+            onTableSort={onTableSort}
+            showFlameGraphOnly={showFlameGraphOnly}
+            disableCollapsing={disableCollapsing}
+            getExtraContextMenuButtons={getExtraContextMenuButtons}
+            selectedView={selectedView}
+            viewMode={viewMode}
+            theme={theme}
+            setSearch={setSearch}
+            resetKey={resetKey}
+            keepFocusOnDataChange={keepFocusOnDataChange}
+          />
         </div>
       );
     }
@@ -292,25 +355,24 @@ const FlameGraphContainer = ({
               setSelectedView(view);
               onViewSelected?.(view);
             }}
+            viewMode={viewMode}
+            setViewMode={setViewMode}
+            leftPaneView={leftPaneView}
+            setLeftPaneView={setLeftPaneView}
+            rightPaneView={rightPaneView}
+            setRightPaneView={setRightPaneView}
+            singleView={singleView}
+            setSingleView={setSingleView}
             containerWidth={containerWidth}
             onReset={() => {
-              resetFocus();
-              resetSandwich();
+              // Reset search and pane states when user clicks reset button
+              setSearch('');
+              setResetKey((k) => k + 1);
             }}
-            textAlign={textAlign}
-            onTextAlignChange={(align) => {
-              setTextAlign(align);
-              onTextAlignSelected?.(align);
-            }}
-            showResetButton={Boolean(focusedItemData || sandwichItem)}
-            colorScheme={colorScheme}
-            onColorSchemeChange={setColorScheme}
+            showResetButton={Boolean(search)}
             stickyHeader={Boolean(stickyHeader)}
             extraHeaderElements={extraHeaderElements}
             vertical={vertical}
-            isDiffMode={dataContainer.isDiffFlamegraph()}
-            setCollapsedMap={setCollapsedMap}
-            collapsedMap={collapsedMap}
             assistantContext={data && showAnalyzeWithAssistant ? getAssistantContextFromDataFrame(data) : undefined}
           />
         )}
@@ -321,18 +383,6 @@ const FlameGraphContainer = ({
   );
 };
 
-function useColorScheme(dataContainer: FlameGraphDataContainer | undefined) {
-  const defaultColorScheme = dataContainer?.isDiffFlamegraph() ? ColorSchemeDiff.Default : ColorScheme.PackageBased;
-  const [colorScheme, setColorScheme] = useState<ColorScheme | ColorSchemeDiff>(defaultColorScheme);
-
-  // This makes sure that if we change the data to/from diff profile we reset the color scheme.
-  useEffect(() => {
-    setColorScheme(defaultColorScheme);
-  }, [defaultColorScheme]);
-
-  return [colorScheme, setColorScheme] as const;
-}
-
 /**
  * Based on the search string it does a fuzzy search over all the unique labels, so we can highlight them later.
  */
@@ -420,12 +470,6 @@ function getStyles(theme: GrafanaTheme2) {
       flexGrow: 1,
     }),
 
-    tableContainer: css({
-      // This is not ideal for dashboard panel where it creates a double scroll. In a panel it should be 100% but then
-      // in explore we need a specific height.
-      height: 800,
-    }),
-
     horizontalContainer: css({
       label: 'horizontalContainer',
       display: 'flex',
@@ -435,20 +479,20 @@ function getStyles(theme: GrafanaTheme2) {
       width: '100%',
     }),
 
-    horizontalGraphContainer: css({
-      flexBasis: '50%',
-    }),
-
-    horizontalTableContainer: css({
+    horizontalPaneContainer: css({
+      label: 'horizontalPaneContainer',
       flexBasis: '50%',
       maxHeight: 800,
     }),
 
-    verticalGraphContainer: css({
+    verticalPaneContainer: css({
+      label: 'verticalPaneContainer',
       marginBottom: theme.spacing(1),
+      height: 800,
     }),
 
-    verticalTableContainer: css({
+    singlePaneContainer: css({
+      label: 'singlePaneContainer',
       height: 800,
     }),
   };

packages/grafana-flamegraph/src/FlameGraphHeader.test.tsx

@@ -3,9 +3,8 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
-import { CollapsedMap } from './FlameGraph/dataTransform';
 import FlameGraphHeader from './FlameGraphHeader';
-import { ColorScheme, SelectedView } from './types';
+import { PaneView, SelectedView, ViewMode } from './types';
 
 jest.mock('@grafana/assistant', () => ({
   useAssistant: jest.fn().mockReturnValue({
@@ -20,26 +19,30 @@ describe('FlameGraphHeader', () => {
   function setup(props: Partial<React.ComponentProps<typeof FlameGraphHeader>> = {}) {
     const setSearch = jest.fn();
     const setSelectedView = jest.fn();
+    const setViewMode = jest.fn();
+    const setLeftPaneView = jest.fn();
+    const setRightPaneView = jest.fn();
+    const setSingleView = jest.fn();
     const onReset = jest.fn();
-    const onSchemeChange = jest.fn();
 
     const renderResult = render(
       <FlameGraphHeader
         search={''}
         setSearch={setSearch}
-        selectedView={SelectedView.Both}
+        selectedView={SelectedView.Multi}
         setSelectedView={setSelectedView}
+        viewMode={ViewMode.Split}
+        setViewMode={setViewMode}
+        leftPaneView={PaneView.TopTable}
+        setLeftPaneView={setLeftPaneView}
+        rightPaneView={PaneView.FlameGraph}
+        setRightPaneView={setRightPaneView}
+        singleView={PaneView.FlameGraph}
+        setSingleView={setSingleView}
         containerWidth={1600}
         onReset={onReset}
-        onTextAlignChange={jest.fn()}
-        textAlign={'left'}
         showResetButton={true}
-        colorScheme={ColorScheme.ValueBased}
-        onColorSchemeChange={onSchemeChange}
         stickyHeader={false}
-        isDiffMode={false}
-        setCollapsedMap={() => {}}
-        collapsedMap={new CollapsedMap()}
         {...props}
       />
     );
@@ -50,7 +53,6 @@ describe('FlameGraphHeader', () => {
         setSearch,
         setSelectedView,
         onReset,
-        onSchemeChange,
       },
     };
   }
@@ -70,27 +72,4 @@ describe('FlameGraphHeader', () => {
     await userEvent.click(resetButton);
     expect(handlers.onReset).toHaveBeenCalledTimes(1);
   });
-
-  it('calls on color scheme change when clicked', async () => {
-    const { handlers } = setup();
-    const changeButton = screen.getByLabelText(/Change color scheme/);
-    expect(changeButton).toBeInTheDocument();
-    await userEvent.click(changeButton);
-
-    const byPackageButton = screen.getByText(/By package name/);
-    expect(byPackageButton).toBeInTheDocument();
-    await userEvent.click(byPackageButton);
-
-    expect(handlers.onSchemeChange).toHaveBeenCalledTimes(1);
-  });
-
-  it('shows diff color scheme switch when diff', async () => {
-    setup({ isDiffMode: true });
-    const changeButton = screen.getByLabelText(/Change color scheme/);
-    expect(changeButton).toBeInTheDocument();
-    await userEvent.click(changeButton);
-
-    expect(screen.getByText(/Default/)).toBeInTheDocument();
-    expect(screen.getByText(/Color blind/)).toBeInTheDocument();
-  });
 });

packages/grafana-flamegraph/src/FlameGraphHeader.tsx

@@ -5,30 +5,29 @@ import { useDebounce, usePrevious } from 'react-use';
 
 import { ChatContextItem, OpenAssistantButton } from '@grafana/assistant';
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
-import { Button, ButtonGroup, Dropdown, Input, Menu, RadioButtonGroup, useStyles2 } from '@grafana/ui';
+import { Button, Input, RadioButtonGroup, useStyles2 } from '@grafana/ui';
 
-import { byPackageGradient, byValueGradient, diffColorBlindGradient, diffDefaultGradient } from './FlameGraph/colors';
-import { CollapsedMap } from './FlameGraph/dataTransform';
 import { MIN_WIDTH_TO_SHOW_BOTH_TOPTABLE_AND_FLAMEGRAPH } from './constants';
-import { ColorScheme, ColorSchemeDiff, SelectedView, TextAlign } from './types';
+import { PaneView, SelectedView, ViewMode } from './types';
 
 type Props = {
   search: string;
   setSearch: (search: string) => void;
   selectedView: SelectedView;
   setSelectedView: (view: SelectedView) => void;
+  viewMode: ViewMode;
+  setViewMode: (mode: ViewMode) => void;
+  leftPaneView: PaneView;
+  setLeftPaneView: (view: PaneView) => void;
+  rightPaneView: PaneView;
+  setRightPaneView: (view: PaneView) => void;
+  singleView: PaneView;
+  setSingleView: (view: PaneView) => void;
   containerWidth: number;
   onReset: () => void;
-  textAlign: TextAlign;
-  onTextAlignChange: (align: TextAlign) => void;
   showResetButton: boolean;
-  colorScheme: ColorScheme | ColorSchemeDiff;
-  onColorSchemeChange: (colorScheme: ColorScheme | ColorSchemeDiff) => void;
   stickyHeader: boolean;
   vertical?: boolean;
-  isDiffMode: boolean;
-  setCollapsedMap: (collapsedMap: CollapsedMap) => void;
-  collapsedMap: CollapsedMap;
 
   extraHeaderElements?: React.ReactNode;
 
@@ -40,19 +39,20 @@ const FlameGraphHeader = ({
   setSearch,
   selectedView,
   setSelectedView,
+  viewMode,
+  setViewMode,
+  leftPaneView,
+  setLeftPaneView,
+  rightPaneView,
+  setRightPaneView,
+  singleView,
+  setSingleView,
   containerWidth,
   onReset,
-  textAlign,
-  onTextAlignChange,
   showResetButton,
-  colorScheme,
-  onColorSchemeChange,
   stickyHeader,
   extraHeaderElements,
   vertical,
-  isDiffMode,
-  setCollapsedMap,
-  collapsedMap,
   assistantContext,
 }: Props) => {
   const styles = useStyles2(getStyles);
@@ -87,6 +87,25 @@ const FlameGraphHeader = ({
         />
       </div>
 
+      {selectedView === SelectedView.Multi && viewMode === ViewMode.Split && (
+        <div className={styles.middleContainer}>
+          <RadioButtonGroup<PaneView>
+            size="sm"
+            options={paneViewOptions}
+            value={leftPaneView}
+            onChange={setLeftPaneView}
+            className={styles.buttonSpacing}
+          />
+          <RadioButtonGroup<PaneView>
+            size="sm"
+            options={paneViewOptions}
+            value={rightPaneView}
+            onChange={setRightPaneView}
+            className={styles.buttonSpacing}
+          />
+        </div>
+      )}
+
       <div className={styles.rightContainer}>
         {!!assistantContext?.length && (
           <div className={styles.buttonSpacing}>
@@ -111,129 +130,61 @@ const FlameGraphHeader = ({
             aria-label={'Reset focus and sandwich state'}
           />
         )}
-        <ColorSchemeButton value={colorScheme} onChange={onColorSchemeChange} isDiffMode={isDiffMode} />
-        <ButtonGroup className={styles.buttonSpacing}>
-          <Button
-            variant={'secondary'}
-            fill={'outline'}
-            size={'sm'}
-            tooltip={'Expand all groups'}
-            onClick={() => {
-              setCollapsedMap(collapsedMap.setAllCollapsedStatus(false));
-            }}
-            aria-label={'Expand all groups'}
-            icon={'angle-double-down'}
-            disabled={selectedView === SelectedView.TopTable}
-          />
-          <Button
-            variant={'secondary'}
-            fill={'outline'}
-            size={'sm'}
-            tooltip={'Collapse all groups'}
-            onClick={() => {
-              setCollapsedMap(collapsedMap.setAllCollapsedStatus(true));
-            }}
-            aria-label={'Collapse all groups'}
-            icon={'angle-double-up'}
-            disabled={selectedView === SelectedView.TopTable}
-          />
-        </ButtonGroup>
-        <RadioButtonGroup<TextAlign>
-          size="sm"
-          disabled={selectedView === SelectedView.TopTable}
-          options={alignOptions}
-          value={textAlign}
-          onChange={onTextAlignChange}
-          className={styles.buttonSpacing}
-        />
-        <RadioButtonGroup<SelectedView>
-          size="sm"
-          options={getViewOptions(containerWidth, vertical)}
-          value={selectedView}
-          onChange={setSelectedView}
-        />
         {extraHeaderElements && <div className={styles.extraElements}>{extraHeaderElements}</div>}
+        {selectedView === SelectedView.Multi ? (
+          <>
+            {viewMode === ViewMode.Single && (
+              <RadioButtonGroup<PaneView>
+                size="sm"
+                options={paneViewOptions}
+                value={singleView}
+                onChange={setSingleView}
+                className={styles.buttonSpacing}
+              />
+            )}
+            <RadioButtonGroup<ViewMode>
+              size="sm"
+              options={viewModeOptions}
+              value={viewMode}
+              onChange={setViewMode}
+            />
+          </>
+        ) : (
+          <RadioButtonGroup<SelectedView>
+            size="sm"
+            options={getViewOptions(containerWidth, vertical)}
+            value={selectedView}
+            onChange={setSelectedView}
+          />
+        )}
       </div>
     </div>
   );
 };
 
-type ColorSchemeButtonProps = {
-  value: ColorScheme | ColorSchemeDiff;
-  onChange: (colorScheme: ColorScheme | ColorSchemeDiff) => void;
-  isDiffMode: boolean;
-};
-function ColorSchemeButton(props: ColorSchemeButtonProps) {
-  // TODO: probably create separate getStyles
-  const styles = useStyles2(getStyles);
-  let menu = (
-    <Menu>
-      <Menu.Item label="By package name" onClick={() => props.onChange(ColorScheme.PackageBased)} />
-      <Menu.Item label="By value" onClick={() => props.onChange(ColorScheme.ValueBased)} />
-    </Menu>
-  );
+const viewModeOptions: Array<SelectableValue<ViewMode>> = [
+  { value: ViewMode.Single, label: 'Single', description: 'Single view' },
+  { value: ViewMode.Split, label: 'Split', description: 'Split view' },
+];
 
-  // Show a bit different gradient as a way to indicate selected value
-  const colorDotStyle =
-    {
-      [ColorScheme.ValueBased]: styles.colorDotByValue,
-      [ColorScheme.PackageBased]: styles.colorDotByPackage,
-      [ColorSchemeDiff.DiffColorBlind]: styles.colorDotDiffColorBlind,
-      [ColorSchemeDiff.Default]: styles.colorDotDiffDefault,
-    }[props.value] || styles.colorDotByValue;
-
-  let contents = <span className={cx(styles.colorDot, colorDotStyle)} />;
-
-  if (props.isDiffMode) {
-    menu = (
-      <Menu>
-        <Menu.Item label="Default (green to red)" onClick={() => props.onChange(ColorSchemeDiff.Default)} />
-        <Menu.Item label="Color blind (blue to red)" onClick={() => props.onChange(ColorSchemeDiff.DiffColorBlind)} />
-      </Menu>
-    );
-
-    contents = (
-      <div className={cx(styles.colorDotDiff, colorDotStyle)}>
-        <div>-100% (removed)</div>
-        <div>0%</div>
-        <div>+100% (added)</div>
-      </div>
-    );
-  }
-
-  return (
-    <Dropdown overlay={menu}>
-      <Button
-        variant={'secondary'}
-        fill={'outline'}
-        size={'sm'}
-        tooltip={'Change color scheme'}
-        onClick={() => {}}
-        className={styles.buttonSpacing}
-        aria-label={'Change color scheme'}
-      >
-        {contents}
-      </Button>
-    </Dropdown>
-  );
-}
-
-const alignOptions: Array<SelectableValue<TextAlign>> = [
-  { value: 'left', description: 'Align text left', icon: 'align-left' },
-  { value: 'right', description: 'Align text right', icon: 'align-right' },
+const paneViewOptions: Array<SelectableValue<PaneView>> = [
+  { value: PaneView.TopTable, label: 'Table' },
+  { value: PaneView.FlameGraph, label: 'Flame' },
+  { value: PaneView.CallTree, label: 'Tree' },
 ];
 
 function getViewOptions(width: number, vertical?: boolean): Array<SelectableValue<SelectedView>> {
   let viewOptions: Array<{ value: SelectedView; label: string; description: string }> = [
     { value: SelectedView.TopTable, label: 'Top Table', description: 'Only show top table' },
     { value: SelectedView.FlameGraph, label: 'Flame Graph', description: 'Only show flame graph' },
+    { value: SelectedView.CallTree, label: 'Call Tree', description: 'Only show call tree' },
   ];
 
   if (width >= MIN_WIDTH_TO_SHOW_BOTH_TOPTABLE_AND_FLAMEGRAPH || vertical) {
     viewOptions.push({
-      value: SelectedView.Both,
-      label: 'Both',
-      description: 'Show both the top table and flame graph',
+      value: SelectedView.Multi,
+      label: 'Multi',
+      description: 'Show split or single view with multiple visualizations',
     });
   }
 
@@ -273,10 +224,12 @@ const getStyles = (theme: GrafanaTheme2) => ({
     display: 'flex',
     flexWrap: 'wrap',
     justifyContent: 'space-between',
+    alignItems: 'flex-start',
     width: '100%',
     top: 0,
     gap: theme.spacing(1),
     marginTop: theme.spacing(1),
+    position: 'relative',
   }),
   stickyHeader: css({
     zIndex: theme.zIndex.navbarFixed,
@@ -285,10 +238,20 @@ const getStyles = (theme: GrafanaTheme2) => ({
   }),
   inputContainer: css({
     label: 'inputContainer',
-    flexGrow: 1,
+    flexGrow: 0,
     minWidth: '150px',
     maxWidth: '350px',
   }),
+  middleContainer: css({
+    label: 'middleContainer',
+    display: 'flex',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+    gap: theme.spacing(1),
+    position: 'absolute',
+    left: '50%',
+    transform: 'translateX(-50%)',
+  }),
   rightContainer: css({
     label: 'rightContainer',
     display: 'flex',
@@ -309,44 +272,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
     padding: '0 5px',
     color: theme.colors.text.disabled,
   }),
-  colorDot: css({
-    label: 'colorDot',
-    display: 'inline-block',
-    width: '10px',
-    height: '10px',
-    borderRadius: theme.shape.radius.circle,
-  }),
-  colorDotDiff: css({
-    label: 'colorDotDiff',
-    display: 'flex',
-    width: '200px',
-    height: '12px',
-    color: 'white',
-    fontSize: 9,
-    lineHeight: 1.3,
-    fontWeight: 300,
-    justifyContent: 'space-between',
-    padding: '0 2px',
-    // We have a specific sizing for this so probably makes sense to use hardcoded value here
-    // eslint-disable-next-line @grafana/no-border-radius-literal
-    borderRadius: '2px',
-  }),
-  colorDotByValue: css({
-    label: 'colorDotByValue',
-    background: byValueGradient,
-  }),
-  colorDotByPackage: css({
-    label: 'colorDotByPackage',
-    background: byPackageGradient,
-  }),
-  colorDotDiffDefault: css({
-    label: 'colorDotDiffDefault',
-    background: diffDefaultGradient,
-  }),
-  colorDotDiffColorBlind: css({
-    label: 'colorDotDiffColorBlind',
-    background: diffColorBlindGradient,
-  }),
   extraElements: css({
     label: 'extraElements',
     marginLeft: theme.spacing(1),

packages/grafana-flamegraph/src/FlameGraphPane.tsx

@@ -0,0 +1,269 @@
+import { css } from '@emotion/css';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { GrafanaTheme2, escapeStringForRegex } from '@grafana/data';
+
+import FlameGraphCallTreeContainer from './CallTree/FlameGraphCallTreeContainer';
+import FlameGraph from './FlameGraph/FlameGraph';
+import { GetExtraContextMenuButtonsFunction } from './FlameGraph/FlameGraphContextMenu';
+import { CollapsedMap, FlameGraphDataContainer } from './FlameGraph/dataTransform';
+import FlameGraphTopTableContainer from './TopTable/FlameGraphTopTableContainer';
+import { ClickedItemData, ColorScheme, ColorSchemeDiff, PaneView, SelectedView, TextAlign, ViewMode } from './types';
+
+export type FlameGraphPaneProps = {
+  paneView: PaneView;
+  dataContainer: FlameGraphDataContainer;
+  search: string;
+  matchedLabels: Set<string> | undefined;
+  onTableSymbolClick?: (symbol: string) => void;
+  onTextAlignSelected?: (align: string) => void;
+  onTableSort?: (sort: string) => void;
+  showFlameGraphOnly?: boolean;
+  disableCollapsing?: boolean;
+  getExtraContextMenuButtons?: GetExtraContextMenuButtonsFunction;
+  selectedView: SelectedView;
+  viewMode: ViewMode;
+  theme: GrafanaTheme2;
+  setSearch: (search: string) => void;
+  /** When this key changes, the pane's internal state (focus, sandwich, etc.) will be reset */
+  resetKey?: number;
+  /** Whether to preserve focus when the data changes */
+  keepFocusOnDataChange?: boolean;
+};
+
+const FlameGraphPane = ({
+  paneView,
+  dataContainer,
+  search,
+  matchedLabels,
+  onTableSymbolClick,
+  onTextAlignSelected,
+  onTableSort,
+  showFlameGraphOnly,
+  disableCollapsing,
+  getExtraContextMenuButtons,
+  selectedView,
+  viewMode,
+  theme,
+  setSearch,
+  resetKey,
+  keepFocusOnDataChange,
+}: FlameGraphPaneProps) => {
+  // Pane-specific state - each instance maintains its own
+  const [focusedItemData, setFocusedItemData] = useState<ClickedItemData>();
+  const [rangeMin, setRangeMin] = useState(0);
+  const [rangeMax, setRangeMax] = useState(1);
+  const [textAlign, setTextAlign] = useState<TextAlign>('left');
+  const [sandwichItem, setSandwichItem] = useState<string>();
+  const [collapsedMap, setCollapsedMap] = useState(new CollapsedMap());
+  const [colorScheme, setColorScheme] = useColorScheme(dataContainer);
+
+  const styles = useMemo(() => getStyles(theme), [theme]);
+
+  // Initialize collapsed map when dataContainer changes
+  useEffect(() => {
+    if (dataContainer) {
+      setCollapsedMap(dataContainer.getCollapsedMap());
+    }
+  }, [dataContainer]);
+
+  // Reset internal state when resetKey changes (triggered by parent's reset button)
+  useEffect(() => {
+    if (resetKey !== undefined && resetKey > 0) {
+      setFocusedItemData(undefined);
+      setRangeMin(0);
+      setRangeMax(1);
+      setSandwichItem(undefined);
+    }
+  }, [resetKey]);
+
+  // Handle focus preservation or reset when data changes
+  useEffect(() => {
+    if (!keepFocusOnDataChange) {
+      setFocusedItemData(undefined);
+      setRangeMin(0);
+      setRangeMax(1);
+      setSandwichItem(undefined);
+      return;
+    }
+
+    if (dataContainer && focusedItemData) {
+      const item = dataContainer.getNodesWithLabel(focusedItemData.label)?.[0];
+
+      if (item) {
+        setFocusedItemData({ ...focusedItemData, item });
+
+        const levels = dataContainer.getLevels();
+        const totalViewTicks = levels.length ? levels[0][0].value : 0;
+        setRangeMin(item.start / totalViewTicks);
+        setRangeMax((item.start + item.value) / totalViewTicks);
+      } else {
+        setFocusedItemData({
+          ...focusedItemData,
+          item: {
+            start: 0,
+            value: 0,
+            itemIndexes: [],
+            children: [],
+            level: 0,
+          },
+        });
+
+        setRangeMin(0);
+        setRangeMax(1);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dataContainer, keepFocusOnDataChange]);
+
+  const resetFocus = useCallback(() => {
+    setFocusedItemData(undefined);
+    setRangeMin(0);
+    setRangeMax(1);
+  }, []);
+
+  const resetSandwich = useCallback(() => {
+    setSandwichItem(undefined);
+  }, []);
+
+  const onSymbolClick = useCallback(
+    (symbol: string) => {
+      const anchored = `^${escapeStringForRegex(symbol)}$`;
+      if (search === anchored) {
+        setSearch('');
+      } else {
+        onTableSymbolClick?.(symbol);
+        setSearch(anchored);
+        resetFocus();
+      }
+    },
+    [search, setSearch, resetFocus, onTableSymbolClick]
+  );
+
+  // Separate callback for CallTree that doesn't trigger search
+  const onCallTreeSymbolClick = useCallback(
+    (symbol: string) => {
+      onTableSymbolClick?.(symbol);
+    },
+    [onTableSymbolClick]
+  );
+
+  // Search callback for CallTree search button
+  const onCallTreeSearch = useCallback(
+    (symbol: string) => {
+      const anchored = `^${escapeStringForRegex(symbol)}$`;
+      if (search === anchored) {
+        setSearch('');
+      } else {
+        onTableSymbolClick?.(symbol);
+        setSearch(anchored);
+        resetFocus();
+      }
+    },
+    [search, setSearch, resetFocus, onTableSymbolClick]
+  );
+
+  const isInSplitView = selectedView === SelectedView.Multi && viewMode === ViewMode.Split;
+  const isCallTreeInSplitView = isInSplitView && paneView === PaneView.CallTree;
+
+  switch (paneView) {
+    case PaneView.TopTable:
+      return (
+        <div className={styles.tableContainer}>
+          <FlameGraphTopTableContainer
+            data={dataContainer}
+            onSymbolClick={onSymbolClick}
+            search={search}
+            matchedLabels={matchedLabels}
+            sandwichItem={sandwichItem}
+            onSandwich={setSandwichItem}
+            onSearch={(str) => {
+              if (!str) {
+                setSearch('');
+                return;
+              }
+              setSearch(`^${escapeStringForRegex(str)}$`);
+            }}
+            onTableSort={onTableSort}
+            colorScheme={colorScheme}
+          />
+        </div>
+      );
+    case PaneView.FlameGraph:
+    default:
+      return (
+        <FlameGraph
+          data={dataContainer}
+          rangeMin={rangeMin}
+          rangeMax={rangeMax}
+          matchedLabels={matchedLabels}
+          setRangeMin={setRangeMin}
+          setRangeMax={setRangeMax}
+          onItemFocused={(data) => setFocusedItemData(data)}
+          focusedItemData={focusedItemData}
+          textAlign={textAlign}
+          onTextAlignChange={(align) => {
+            setTextAlign(align);
+            onTextAlignSelected?.(align);
+          }}
+          sandwichItem={sandwichItem}
+          onSandwich={(label: string) => {
+            resetFocus();
+            setSandwichItem(label);
+          }}
+          onFocusPillClick={resetFocus}
+          onSandwichPillClick={resetSandwich}
+          colorScheme={colorScheme}
+          onColorSchemeChange={setColorScheme}
+          isDiffMode={dataContainer.isDiffFlamegraph()}
+          showFlameGraphOnly={showFlameGraphOnly}
+          collapsing={!disableCollapsing}
+          getExtraContextMenuButtons={getExtraContextMenuButtons}
+          selectedView={selectedView}
+          search={search}
+          collapsedMap={collapsedMap}
+          setCollapsedMap={setCollapsedMap}
+        />
+      );
+    case PaneView.CallTree:
+      return (
+        <div className={styles.tableContainer}>
+          <FlameGraphCallTreeContainer
+            data={dataContainer}
+            onSymbolClick={onCallTreeSymbolClick}
+            sandwichItem={sandwichItem}
+            onSandwich={setSandwichItem}
+            onTableSort={onTableSort}
+            colorScheme={colorScheme}
+            search={search}
+            compact={isCallTreeInSplitView}
+            onSearch={onCallTreeSearch}
+          />
+        </div>
+      );
+  }
+};
+
+function useColorScheme(dataContainer: FlameGraphDataContainer | undefined) {
+  const defaultColorScheme = dataContainer?.isDiffFlamegraph() ? ColorSchemeDiff.Default : ColorScheme.PackageBased;
+  const [colorScheme, setColorScheme] = useState<ColorScheme | ColorSchemeDiff>(defaultColorScheme);
+
+  // This makes sure that if we change the data to/from diff profile we reset the color scheme.
+  useEffect(() => {
+    setColorScheme(defaultColorScheme);
+  }, [defaultColorScheme]);
+
+  return [colorScheme, setColorScheme] as const;
+}
+
+function getStyles(theme: GrafanaTheme2) {
+  return {
+    tableContainer: css({
+      // This is not ideal for dashboard panel where it creates a double scroll. In a panel it should be 100% but then
+      // in explore we need a specific height.
+      height: 800,
+    }),
+  };
+}
+
+export default FlameGraphPane;

packages/grafana-flamegraph/src/index.ts

@@ -1,3 +1,4 @@
 export { default as FlameGraph, type Props } from './FlameGraphContainer';
+export { default as FlameGraphCallTreeContainer } from './CallTree/FlameGraphCallTreeContainer';
 export { checkFields, getMessageCheckFieldsResult } from './FlameGraph/dataTransform';
 export { data } from './FlameGraph/testData/dataNestedSet';

packages/grafana-flamegraph/src/types.ts

@@ -20,7 +20,19 @@ export enum SampleUnit {
 export enum SelectedView {
   TopTable = 'topTable',
   FlameGraph = 'flameGraph',
-  Both = 'both',
+  Multi = 'multi',
+  CallTree = 'callTree',
+}
+
+export enum ViewMode {
+  Single = 'single',
+  Split = 'split',
+}
+
+export enum PaneView {
+  TopTable = 'topTable',
+  FlameGraph = 'flameGraph',
+  CallTree = 'callTree',
 }
 
 export interface TableData {

packages/grafana-flamegraph/src/utils/storybook/withTheme.tsx

@@ -1,14 +1,40 @@
 import { Decorator } from '@storybook/react';
+import { useEffect } from 'react';
 import * as React from 'react';
 
-import { getThemeById, ThemeContext } from '@grafana/data';
-import { GlobalStyles } from '@grafana/ui';
+import { createTheme, getThemeById, ThemeContext } from '@grafana/data';
+import { GlobalStyles, PortalContainer } from '@grafana/ui';
 
 interface ThemeableStoryProps {
-  themeId: string;
+  themeId?: string;
 }
 const ThemeableStory = ({ children, themeId }: React.PropsWithChildren<ThemeableStoryProps>) => {
-  const theme = getThemeById(themeId);
+  // Always ensure we have a valid theme
+  const theme = React.useMemo(() => {
+    const id = themeId || 'dark';
+    let resolvedTheme = getThemeById(id);
+
+    // If getThemeById returns undefined, create a default theme
+    if (!resolvedTheme) {
+      console.warn(`Theme '${id}' not found, using default theme`);
+      resolvedTheme = createTheme({ colors: { mode: id === 'light' ? 'light' : 'dark' } });
+    }
+
+    console.log('withTheme: resolved theme', { id, hasTheme: !!resolvedTheme, hasSpacing: !!resolvedTheme?.spacing });
+    return resolvedTheme;
+  }, [themeId]);
+
+  // Apply theme to document root for Portals
+  useEffect(() => {
+    if (!theme) return;
+
+    document.body.style.setProperty('--theme-background', theme.colors.background.primary);
+  }, [theme]);
+
+  if (!theme) {
+    console.error('withTheme: No theme available!');
+    return null;
+  }
 
   const css = `
   #storybook-root {
@@ -23,6 +49,7 @@ const ThemeableStory = ({ children, themeId }: React.PropsWithChildren<Themeable
   return (
     <ThemeContext.Provider value={theme}>
       <GlobalStyles />
+      <PortalContainer />
 
       <style>{css}</style>
       {children}
@@ -33,4 +60,4 @@ const ThemeableStory = ({ children, themeId }: React.PropsWithChildren<Themeable
 export const withTheme =
   (): Decorator =>
   // eslint-disable-next-line react/display-name
-  (story, context) => <ThemeableStory themeId={context.globals.theme}>{story()}</ThemeableStory>;
+  (story, context) => <ThemeableStory themeId={context.globals?.theme}>{story()}</ThemeableStory>;

packages/grafana-ui/src/components/VizLegend/VizLegendTable.test.tsx

@@ -1,78 +0,0 @@
-import { render, screen } from '@testing-library/react';
-
-import { VizLegendTable } from './VizLegendTable';
-import { VizLegendItem } from './types';
-
-describe('VizLegendTable', () => {
-  const mockItems: VizLegendItem[] = [
-    { label: 'Series 1', color: 'red', yAxis: 1 },
-    { label: 'Series 2', color: 'blue', yAxis: 1 },
-    { label: 'Series 3', color: 'green', yAxis: 1 },
-  ];
-
-  it('renders without crashing', () => {
-    const { container } = render(<VizLegendTable items={mockItems} placement="bottom" />);
-    expect(container.querySelector('table')).toBeInTheDocument();
-  });
-
-  it('renders all items', () => {
-    render(<VizLegendTable items={mockItems} placement="bottom" />);
-    expect(screen.getByText('Series 1')).toBeInTheDocument();
-    expect(screen.getByText('Series 2')).toBeInTheDocument();
-    expect(screen.getByText('Series 3')).toBeInTheDocument();
-  });
-
-  it('renders table headers when items have display values', () => {
-    const itemsWithStats: VizLegendItem[] = [
-      {
-        label: 'Series 1',
-        color: 'red',
-        yAxis: 1,
-        getDisplayValues: () => [
-          { numeric: 100, text: '100', title: 'Max' },
-          { numeric: 50, text: '50', title: 'Min' },
-        ],
-      },
-    ];
-    render(<VizLegendTable items={itemsWithStats} placement="bottom" />);
-    expect(screen.getByText('Max')).toBeInTheDocument();
-    expect(screen.getByText('Min')).toBeInTheDocument();
-  });
-
-  it('renders sort icon when sorted', () => {
-    const { container } = render(
-      <VizLegendTable items={mockItems} placement="bottom" sortBy="Name" sortDesc={false} />
-    );
-    expect(container.querySelector('svg')).toBeInTheDocument();
-  });
-
-  it('calls onToggleSort when header is clicked', () => {
-    const onToggleSort = jest.fn();
-    render(<VizLegendTable items={mockItems} placement="bottom" onToggleSort={onToggleSort} isSortable={true} />);
-    const header = screen.getByText('Name');
-    header.click();
-    expect(onToggleSort).toHaveBeenCalledWith('Name');
-  });
-
-  it('does not call onToggleSort when not sortable', () => {
-    const onToggleSort = jest.fn();
-    render(<VizLegendTable items={mockItems} placement="bottom" onToggleSort={onToggleSort} isSortable={false} />);
-    const header = screen.getByText('Name');
-    header.click();
-    expect(onToggleSort).not.toHaveBeenCalled();
-  });
-
-  it('renders with long labels', () => {
-    const itemsWithLongLabels: VizLegendItem[] = [
-      {
-        label: 'This is a very long series name that should be scrollable within its table cell',
-        color: 'red',
-        yAxis: 1,
-      },
-    ];
-    render(<VizLegendTable items={itemsWithLongLabels} placement="bottom" />);
-    expect(
-      screen.getByText('This is a very long series name that should be scrollable within its table cell')
-    ).toBeInTheDocument();
-  });
-});

packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.test.tsx

@@ -1,112 +0,0 @@
-import { render, screen } from '@testing-library/react';
-
-import { LegendTableItem } from './VizLegendTableItem';
-import { VizLegendItem } from './types';
-
-describe('LegendTableItem', () => {
-  const mockItem: VizLegendItem = {
-    label: 'Series 1',
-    color: 'red',
-    yAxis: 1,
-  };
-
-  it('renders without crashing', () => {
-    const { container } = render(
-      <table>
-        <tbody>
-          <LegendTableItem item={mockItem} />
-        </tbody>
-      </table>
-    );
-    expect(container.querySelector('tr')).toBeInTheDocument();
-  });
-
-  it('renders label text', () => {
-    render(
-      <table>
-        <tbody>
-          <LegendTableItem item={mockItem} />
-        </tbody>
-      </table>
-    );
-    expect(screen.getByText('Series 1')).toBeInTheDocument();
-  });
-
-  it('renders with long label text', () => {
-    const longLabelItem: VizLegendItem = {
-      ...mockItem,
-      label: 'This is a very long series name that should be scrollable in the table cell',
-    };
-    render(
-      <table>
-        <tbody>
-          <LegendTableItem item={longLabelItem} />
-        </tbody>
-      </table>
-    );
-    expect(
-      screen.getByText('This is a very long series name that should be scrollable in the table cell')
-    ).toBeInTheDocument();
-  });
-
-  it('renders stat values when provided', () => {
-    const itemWithStats: VizLegendItem = {
-      ...mockItem,
-      getDisplayValues: () => [
-        { numeric: 100, text: '100', title: 'Max' },
-        { numeric: 50, text: '50', title: 'Min' },
-      ],
-    };
-    render(
-      <table>
-        <tbody>
-          <LegendTableItem item={itemWithStats} />
-        </tbody>
-      </table>
-    );
-    expect(screen.getByText('100')).toBeInTheDocument();
-    expect(screen.getByText('50')).toBeInTheDocument();
-  });
-
-  it('renders right y-axis indicator when yAxis is 2', () => {
-    const rightAxisItem: VizLegendItem = {
-      ...mockItem,
-      yAxis: 2,
-    };
-    render(
-      <table>
-        <tbody>
-          <LegendTableItem item={rightAxisItem} />
-        </tbody>
-      </table>
-    );
-    expect(screen.getByText('(right y-axis)')).toBeInTheDocument();
-  });
-
-  it('calls onLabelClick when label is clicked', () => {
-    const onLabelClick = jest.fn();
-    render(
-      <table>
-        <tbody>
-          <LegendTableItem item={mockItem} onLabelClick={onLabelClick} />
-        </tbody>
-      </table>
-    );
-    const button = screen.getByRole('button');
-    button.click();
-    expect(onLabelClick).toHaveBeenCalledWith(mockItem, expect.any(Object));
-  });
-
-  it('does not call onClick when readonly', () => {
-    const onLabelClick = jest.fn();
-    render(
-      <table>
-        <tbody>
-          <LegendTableItem item={mockItem} onLabelClick={onLabelClick} readonly={true} />
-        </tbody>
-      </table>
-    );
-    const button = screen.getByRole('button');
-    expect(button).toBeDisabled();
-  });
-});

packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx

@@ -69,7 +69,7 @@ export const LegendTableItem = ({
 
   return (
     <tr className={cx(styles.row, className)}>
-      <td className={styles.labelCell}>
+      <td>
         <span className={styles.itemWrapper}>
           <VizLegendSeriesIcon
             color={item.color}
@@ -77,26 +77,24 @@ export const LegendTableItem = ({
             readonly={readonly}
             lineStyle={item.lineStyle}
           />
-          <div className={styles.labelCellInner}>
-            <button
-              disabled={readonly}
-              type="button"
-              title={item.label}
-              onBlur={onMouseOut}
-              onFocus={onMouseOver}
-              onMouseOver={onMouseOver}
-              onMouseOut={onMouseOut}
-              onClick={!readonly ? onClick : undefined}
-              className={cx(styles.label, item.disabled && styles.labelDisabled)}
-            >
-              {item.label}{' '}
-              {item.yAxis === 2 && (
-                <span className={styles.yAxisLabel}>
-                  <Trans i18nKey="grafana-ui.viz-legend.right-axis-indicator">(right y-axis)</Trans>
-                </span>
-              )}
-            </button>
-          </div>
+          <button
+            disabled={readonly}
+            type="button"
+            title={item.label}
+            onBlur={onMouseOut}
+            onFocus={onMouseOver}
+            onMouseOver={onMouseOver}
+            onMouseOut={onMouseOut}
+            onClick={!readonly ? onClick : undefined}
+            className={cx(styles.label, item.disabled && styles.labelDisabled)}
+          >
+            {item.label}{' '}
+            {item.yAxis === 2 && (
+              <span className={styles.yAxisLabel}>
+                <Trans i18nKey="grafana-ui.viz-legend.right-axis-indicator">(right y-axis)</Trans>
+              </span>
+            )}
+          </button>
         </span>
       </td>
       {item.getDisplayValues &&
@@ -130,28 +128,6 @@ const getStyles = (theme: GrafanaTheme2) => {
         background: rowHoverBg,
       },
     }),
-    labelCell: css({
-      label: 'LegendLabelCell',
-      maxWidth: 0,
-      width: '100%',
-      minWidth: theme.spacing(16),
-    }),
-    labelCellInner: css({
-      label: 'LegendLabelCellInner',
-      display: 'block',
-      flex: 1,
-      minWidth: 0,
-      overflowX: 'auto',
-      overflowY: 'hidden',
-      paddingRight: theme.spacing(3),
-      scrollbarWidth: 'none',
-      msOverflowStyle: 'none',
-      maskImage: `linear-gradient(to right, black calc(100% - ${theme.spacing(3)}), transparent 100%)`,
-      WebkitMaskImage: `linear-gradient(to right, black calc(100% - ${theme.spacing(3)}), transparent 100%)`,
-      '&::-webkit-scrollbar': {
-        display: 'none',
-      },
-    }),
     label: css({
       label: 'LegendLabel',
       whiteSpace: 'nowrap',
@@ -159,6 +135,9 @@ const getStyles = (theme: GrafanaTheme2) => {
       border: 'none',
       fontSize: 'inherit',
       padding: 0,
+      maxWidth: '600px',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
       userSelect: 'text',
     }),
     labelDisabled: css({

packaging/docker/run.sh

@@ -1,4 +1,5 @@
-#!/bin/bash -e
+#!/bin/bash
+set -e
 
 PERMISSIONS_OK=0
 
@@ -26,14 +27,14 @@ if [ ! -d "$GF_PATHS_PLUGINS" ]; then
 fi
 
 if [ ! -z ${GF_AWS_PROFILES+x} ]; then
-    > "$GF_PATHS_HOME/.aws/credentials"
+    :> "$GF_PATHS_HOME/.aws/credentials"
 
     for profile in ${GF_AWS_PROFILES}; do
         access_key_varname="GF_AWS_${profile}_ACCESS_KEY_ID"
         secret_key_varname="GF_AWS_${profile}_SECRET_ACCESS_KEY"
         region_varname="GF_AWS_${profile}_REGION"
 
-        if [ ! -z "${!access_key_varname}" -a ! -z "${!secret_key_varname}" ]; then
+        if [ ! -z "${!access_key_varname}" ] && [ ! -z "${!secret_key_varname}" ]; then
             echo "[${profile}]" >> "$GF_PATHS_HOME/.aws/credentials"
             echo "aws_access_key_id = ${!access_key_varname}" >> "$GF_PATHS_HOME/.aws/credentials"
             echo "aws_secret_access_key = ${!secret_key_varname}" >> "$GF_PATHS_HOME/.aws/credentials"

pkg/api/frontendsettings.go

@@ -161,7 +161,7 @@ func (hs *HTTPServer) getFrontendSettings(c *contextmodel.ReqContext) (*dtos.Fro
 			AliasIDs:        panel.AliasIDs,
 			Info:            panel.Info,
 			Module:          panel.Module,
-			ModuleHash:      panel.ModuleHash,
+			ModuleHash:      hs.pluginAssets.ModuleHash(c.Req.Context(), panel),
 			BaseURL:         panel.BaseURL,
 			SkipDataQuery:   panel.SkipDataQuery,
 			Suggestions:     panel.Suggestions,
@@ -170,7 +170,7 @@ func (hs *HTTPServer) getFrontendSettings(c *contextmodel.ReqContext) (*dtos.Fro
 			Signature:       string(panel.Signature),
 			Sort:            getPanelSort(panel.ID),
 			Angular:         panel.Angular,
-			LoadingStrategy: panel.LoadingStrategy,
+			LoadingStrategy: hs.pluginAssets.LoadingStrategy(c.Req.Context(), panel),
 			Translations:    panel.Translations,
 		}
 	}
@@ -527,11 +527,11 @@ func (hs *HTTPServer) getFSDataSources(c *contextmodel.ReqContext, availablePlug
 			JSONData:                  plugin.JSONData,
 			Signature:                 plugin.Signature,
 			Module:                    plugin.Module,
-			ModuleHash:                plugin.ModuleHash,
+			ModuleHash:                hs.pluginAssets.ModuleHash(c.Req.Context(), plugin),
 			BaseURL:                   plugin.BaseURL,
 			Angular:                   plugin.Angular,
 			MultiValueFilterOperators: plugin.MultiValueFilterOperators,
-			LoadingStrategy:           plugin.LoadingStrategy,
+			LoadingStrategy:           hs.pluginAssets.LoadingStrategy(c.Req.Context(), plugin),
 			Translations:              plugin.Translations,
 		}
 
@@ -638,10 +638,10 @@ func (hs *HTTPServer) newAppDTO(ctx context.Context, plugin pluginstore.Plugin,
 		Path:            plugin.Module,
 		Preload:         false,
 		Angular:         plugin.Angular,
-		LoadingStrategy: plugin.LoadingStrategy,
+		LoadingStrategy: hs.pluginAssets.LoadingStrategy(ctx, plugin),
 		Extensions:      plugin.Extensions,
 		Dependencies:    plugin.Dependencies,
-		ModuleHash:      plugin.ModuleHash,
+		ModuleHash:      hs.pluginAssets.ModuleHash(ctx, plugin),
 		Translations:    plugin.Translations,
 		BuildMode:       plugin.BuildMode,
 	}

pkg/api/frontendsettings_test.go

@@ -20,6 +20,8 @@ import (
 	"github.com/grafana/grafana/pkg/plugins"
 	"github.com/grafana/grafana/pkg/plugins/config"
 	"github.com/grafana/grafana/pkg/plugins/manager/pluginfakes"
+	"github.com/grafana/grafana/pkg/plugins/manager/signature"
+	"github.com/grafana/grafana/pkg/plugins/manager/signature/statickey"
 	"github.com/grafana/grafana/pkg/plugins/pluginscdn"
 	accesscontrolmock "github.com/grafana/grafana/pkg/services/accesscontrol/mock"
 	"github.com/grafana/grafana/pkg/services/apiserver/endpoints/request"
@@ -31,6 +33,7 @@ import (
 	"github.com/grafana/grafana/pkg/services/featuremgmt"
 	"github.com/grafana/grafana/pkg/services/licensing"
 	"github.com/grafana/grafana/pkg/services/pluginsintegration/managedplugins"
+	"github.com/grafana/grafana/pkg/services/pluginsintegration/pluginassets"
 	"github.com/grafana/grafana/pkg/services/pluginsintegration/pluginsettings"
 	"github.com/grafana/grafana/pkg/services/pluginsintegration/pluginstore"
 	"github.com/grafana/grafana/pkg/services/rendering"
@@ -43,7 +46,7 @@ import (
 	"github.com/grafana/grafana/pkg/web"
 )
 
-func setupTestEnvironment(t *testing.T, cfg *setting.Cfg, features featuremgmt.FeatureToggles, pstore pluginstore.Store, psettings pluginsettings.Service) (*web.Mux, *HTTPServer) {
+func setupTestEnvironment(t *testing.T, cfg *setting.Cfg, features featuremgmt.FeatureToggles, pstore pluginstore.Store, psettings pluginsettings.Service, passets *pluginassets.Service) (*web.Mux, *HTTPServer) {
 	t.Helper()
 	db.InitTestDB(t)
 	// nolint:staticcheck
@@ -74,6 +77,12 @@ func setupTestEnvironment(t *testing.T, cfg *setting.Cfg, features featuremgmt.F
 		pluginsSettings = &pluginsettings.FakePluginSettings{}
 	}
 
+	var pluginsAssets = passets
+	if pluginsAssets == nil {
+		sig := signature.ProvideService(pluginsCfg, statickey.New())
+		pluginsAssets = pluginassets.ProvideService(pluginsCfg, pluginsCDN, sig, pluginStore)
+	}
+
 	hs := &HTTPServer{
 		authnService: &authntest.FakeService{},
 		Cfg:          cfg,
@@ -90,6 +99,7 @@ func setupTestEnvironment(t *testing.T, cfg *setting.Cfg, features featuremgmt.F
 		AccessControl:         accesscontrolmock.New(),
 		PluginSettings:        pluginsSettings,
 		pluginsCDNService:     pluginsCDN,
+		pluginAssets:          pluginsAssets,
 		namespacer:            request.GetNamespaceMapper(cfg),
 		SocialService:         socialimpl.ProvideService(cfg, features, &usagestats.UsageStatsMock{}, supportbundlestest.NewFakeBundleService(), remotecache.NewFakeCacheStorage(), nil, ssosettingstests.NewFakeService()),
 		managedPluginsService: managedplugins.NewNoop(),
@@ -122,7 +132,7 @@ func TestIntegrationHTTPServer_GetFrontendSettings_hideVersionAnonymous(t *testi
 	cfg.BuildVersion = "7.8.9"
 	cfg.BuildCommit = "01234567"
 
-	m, hs := setupTestEnvironment(t, cfg, featuremgmt.WithFeatures(), nil, nil)
+	m, hs := setupTestEnvironment(t, cfg, featuremgmt.WithFeatures(), nil, nil, nil)
 
 	req := httptest.NewRequest(http.MethodGet, "/api/frontend/settings", nil)
 
@@ -214,7 +224,7 @@ func TestIntegrationHTTPServer_GetFrontendSettings_pluginsCDNBaseURL(t *testing.
 			if test.mutateCfg != nil {
 				test.mutateCfg(cfg)
 			}
-			m, _ := setupTestEnvironment(t, cfg, featuremgmt.WithFeatures(), nil, nil)
+			m, _ := setupTestEnvironment(t, cfg, featuremgmt.WithFeatures(), nil, nil, nil)
 			req := httptest.NewRequest(http.MethodGet, "/api/frontend/settings", nil)
 
 			recorder := httptest.NewRecorder()
@@ -239,6 +249,7 @@ func TestIntegrationHTTPServer_GetFrontendSettings_apps(t *testing.T) {
 		desc           string
 		pluginStore    func() pluginstore.Store
 		pluginSettings func() pluginsettings.Service
+		pluginAssets   func() *pluginassets.Service
 		expected       settings
 	}{
 		{
@@ -255,8 +266,7 @@ func TestIntegrationHTTPServer_GetFrontendSettings_apps(t *testing.T) {
 								Type:    plugins.TypeApp,
 								Preload: true,
 							},
-							FS:              &pluginfakes.FakePluginFS{},
-							LoadingStrategy: plugins.LoadingStrategyScript,
+							FS: &pluginfakes.FakePluginFS{},
 						},
 					},
 				}
@@ -266,6 +276,7 @@ func TestIntegrationHTTPServer_GetFrontendSettings_apps(t *testing.T) {
 					Plugins: newAppSettings("test-app", false),
 				}
 			},
+			pluginAssets: newPluginAssets(),
 			expected: settings{
 				Apps: map[string]*plugins.AppDTO{
 					"test-app": {
@@ -293,8 +304,7 @@ func TestIntegrationHTTPServer_GetFrontendSettings_apps(t *testing.T) {
 								Type:    plugins.TypeApp,
 								Preload: true,
 							},
-							FS:              &pluginfakes.FakePluginFS{},
-							LoadingStrategy: plugins.LoadingStrategyScript,
+							FS: &pluginfakes.FakePluginFS{},
 						},
 					},
 				}
@@ -304,6 +314,7 @@ func TestIntegrationHTTPServer_GetFrontendSettings_apps(t *testing.T) {
 					Plugins: newAppSettings("test-app", true),
 				}
 			},
+			pluginAssets: newPluginAssets(),
 			expected: settings{
 				Apps: map[string]*plugins.AppDTO{
 					"test-app": {
@@ -330,9 +341,8 @@ func TestIntegrationHTTPServer_GetFrontendSettings_apps(t *testing.T) {
 								Type:    plugins.TypeApp,
 								Preload: true,
 							},
-							Angular:         plugins.AngularMeta{Detected: true},
-							FS:              &pluginfakes.FakePluginFS{},
-							LoadingStrategy: plugins.LoadingStrategyFetch,
+							Angular: plugins.AngularMeta{Detected: true},
+							FS:      &pluginfakes.FakePluginFS{},
 						},
 					},
 				}
@@ -342,6 +352,7 @@ func TestIntegrationHTTPServer_GetFrontendSettings_apps(t *testing.T) {
 					Plugins: newAppSettings("test-app", true),
 				}
 			},
+			pluginAssets: newPluginAssets(),
 			expected: settings{
 				Apps: map[string]*plugins.AppDTO{
 					"test-app": {
@@ -368,7 +379,6 @@ func TestIntegrationHTTPServer_GetFrontendSettings_apps(t *testing.T) {
 								Type:    plugins.TypeApp,
 								Preload: true,
 							},
-							LoadingStrategy: plugins.LoadingStrategyScript,
 						},
 					},
 				}
@@ -378,6 +388,13 @@ func TestIntegrationHTTPServer_GetFrontendSettings_apps(t *testing.T) {
 					Plugins: newAppSettings("test-app", true),
 				}
 			},
+			pluginAssets: newPluginAssetsWithConfig(&config.PluginManagementCfg{
+				PluginSettings: map[string]map[string]string{
+					"test-app": {
+						pluginassets.CreatePluginVersionCfgKey: pluginassets.CreatePluginVersionScriptSupportEnabled,
+					},
+				},
+			}),
 			expected: settings{
 				Apps: map[string]*plugins.AppDTO{
 					"test-app": {
@@ -407,7 +424,6 @@ func TestIntegrationHTTPServer_GetFrontendSettings_apps(t *testing.T) {
 							FS: &pluginfakes.FakePluginFS{TypeFunc: func() plugins.FSType {
 								return plugins.FSTypeCDN
 							}},
-							LoadingStrategy: plugins.LoadingStrategyFetch,
 						},
 					},
 				}
@@ -417,6 +433,7 @@ func TestIntegrationHTTPServer_GetFrontendSettings_apps(t *testing.T) {
 					Plugins: newAppSettings("test-app", true),
 				}
 			},
+			pluginAssets: newPluginAssets(),
 			expected: settings{
 				Apps: map[string]*plugins.AppDTO{
 					"test-app": {
@@ -434,7 +451,7 @@ func TestIntegrationHTTPServer_GetFrontendSettings_apps(t *testing.T) {
 	for _, test := range tests {
 		t.Run(test.desc, func(t *testing.T) {
 			cfg := setting.NewCfg()
-			m, _ := setupTestEnvironment(t, cfg, featuremgmt.WithFeatures(), test.pluginStore(), test.pluginSettings())
+			m, _ := setupTestEnvironment(t, cfg, featuremgmt.WithFeatures(), test.pluginStore(), test.pluginSettings(), test.pluginAssets())
 			req := httptest.NewRequest(http.MethodGet, "/api/frontend/settings", nil)
 
 			recorder := httptest.NewRecorder()
@@ -535,8 +552,7 @@ func TestIntegrationHTTPServer_GetFrontendSettings_translations(t *testing.T) {
 								"en-US": "public/plugins/test-app/locales/en-US/test-app.json",
 								"pt-BR": "public/plugins/test-app/locales/pt-BR/test-app.json",
 							},
-							FS:              &pluginfakes.FakePluginFS{},
-							LoadingStrategy: plugins.LoadingStrategyScript,
+							FS: &pluginfakes.FakePluginFS{},
 						},
 					},
 				}
@@ -586,8 +602,7 @@ func TestIntegrationHTTPServer_GetFrontendSettings_translations(t *testing.T) {
 								"en-US": "public/plugins/test-app/locales/en-US/test-app.json",
 								"pt-BR": "public/plugins/test-app/locales/pt-BR/test-app.json",
 							},
-							FS:              &pluginfakes.FakePluginFS{},
-							LoadingStrategy: plugins.LoadingStrategyScript,
+							FS: &pluginfakes.FakePluginFS{},
 						},
 					},
 				}
@@ -627,8 +642,7 @@ func TestIntegrationHTTPServer_GetFrontendSettings_translations(t *testing.T) {
 								"en-US": "public/plugins/test-app/locales/en-US/test-app.json",
 								"pt-BR": "public/plugins/test-app/locales/pt-BR/test-app.json",
 							},
-							FS:              &pluginfakes.FakePluginFS{},
-							LoadingStrategy: plugins.LoadingStrategyScript,
+							FS: &pluginfakes.FakePluginFS{},
 						},
 					},
 				}
@@ -656,7 +670,7 @@ func TestIntegrationHTTPServer_GetFrontendSettings_translations(t *testing.T) {
 	for _, test := range tests {
 		t.Run(test.desc, func(t *testing.T) {
 			cfg := setting.NewCfg()
-			m, hs := setupTestEnvironment(t, cfg, featuremgmt.WithFeatures(), test.pluginStore(), nil)
+			m, hs := setupTestEnvironment(t, cfg, featuremgmt.WithFeatures(), test.pluginStore(), nil, nil)
 
 			// Create a request with the appropriate context
 			req := httptest.NewRequest(http.MethodGet, "/api/frontend/settings", nil)
@@ -693,3 +707,13 @@ func TestIntegrationHTTPServer_GetFrontendSettings_translations(t *testing.T) {
 		})
 	}
 }
+
+func newPluginAssets() func() *pluginassets.Service {
+	return newPluginAssetsWithConfig(&config.PluginManagementCfg{})
+}
+
+func newPluginAssetsWithConfig(pCfg *config.PluginManagementCfg) func() *pluginassets.Service {
+	return func() *pluginassets.Service {
+		return pluginassets.ProvideService(pCfg, pluginscdn.ProvideService(pCfg), signature.ProvideService(pCfg, statickey.New()), &pluginstore.FakePluginStore{})
+	}
+}

pkg/api/http_server.go

@@ -82,6 +82,7 @@ import (
 	"github.com/grafana/grafana/pkg/services/playlist"
 	"github.com/grafana/grafana/pkg/services/plugindashboards"
 	"github.com/grafana/grafana/pkg/services/pluginsintegration/managedplugins"
+	"github.com/grafana/grafana/pkg/services/pluginsintegration/pluginassets"
 	"github.com/grafana/grafana/pkg/services/pluginsintegration/pluginchecker"
 	"github.com/grafana/grafana/pkg/services/pluginsintegration/plugincontext"
 	pluginSettings "github.com/grafana/grafana/pkg/services/pluginsintegration/pluginsettings"
@@ -150,6 +151,7 @@ type HTTPServer struct {
 	pluginDashboardService       plugindashboards.Service
 	pluginStaticRouteResolver    plugins.StaticRouteResolver
 	pluginErrorResolver          plugins.ErrorResolver
+	pluginAssets                 *pluginassets.Service
 	pluginPreinstall             pluginchecker.Preinstall
 	SearchService                search.Service
 	ShortURLService              shorturls.Service
@@ -253,7 +255,7 @@ func ProvideHTTPServer(opts ServerOptions, cfg *setting.Cfg, routeRegister routi
 	encryptionService encryption.Internal, grafanaUpdateChecker *updatemanager.GrafanaService,
 	pluginsUpdateChecker *updatemanager.PluginsService, searchUsersService searchusers.Service,
 	dataSourcesService datasources.DataSourceService, queryDataService query.Service, pluginFileStore plugins.FileStore,
-	serviceaccountsService serviceaccounts.Service,
+	serviceaccountsService serviceaccounts.Service, pluginAssets *pluginassets.Service,
 	authInfoService login.AuthInfoService, storageService store.StorageService,
 	notificationService notifications.Service, dashboardService dashboards.DashboardService,
 	dashboardProvisioningService dashboards.DashboardProvisioningService, folderService folder.Service,
@@ -292,6 +294,7 @@ func ProvideHTTPServer(opts ServerOptions, cfg *setting.Cfg, routeRegister routi
 		pluginStore:                  pluginStore,
 		pluginStaticRouteResolver:    pluginStaticRouteResolver,
 		pluginDashboardService:       pluginDashboardService,
+		pluginAssets:                 pluginAssets,
 		pluginErrorResolver:          pluginErrorResolver,
 		pluginFileStore:              pluginFileStore,
 		grafanaUpdateChecker:         grafanaUpdateChecker,

pkg/api/plugins.go

@@ -201,7 +201,7 @@ func (hs *HTTPServer) GetPluginSettingByID(c *contextmodel.ReqContext) response.
 		Includes:         plugin.Includes,
 		BaseUrl:          plugin.BaseURL,
 		Module:           plugin.Module,
-		ModuleHash:       plugin.ModuleHash,
+		ModuleHash:       hs.pluginAssets.ModuleHash(c.Req.Context(), plugin),
 		DefaultNavUrl:    path.Join(hs.Cfg.AppSubURL, plugin.DefaultNavURL),
 		State:            plugin.State,
 		Signature:        plugin.Signature,
@@ -209,7 +209,7 @@ func (hs *HTTPServer) GetPluginSettingByID(c *contextmodel.ReqContext) response.
 		SignatureOrg:     plugin.SignatureOrg,
 		SecureJsonFields: map[string]bool{},
 		AngularDetected:  plugin.Angular.Detected,
-		LoadingStrategy:  plugin.LoadingStrategy,
+		LoadingStrategy:  hs.pluginAssets.LoadingStrategy(c.Req.Context(), plugin),
 		Extensions:       plugin.Extensions,
 		Translations:     plugin.Translations,
 	}

pkg/api/plugins_test.go

@@ -28,6 +28,8 @@ import (
 	"github.com/grafana/grafana/pkg/plugins/manager/filestore"
 	"github.com/grafana/grafana/pkg/plugins/manager/pluginfakes"
 	"github.com/grafana/grafana/pkg/plugins/manager/registry"
+	"github.com/grafana/grafana/pkg/plugins/manager/signature"
+	"github.com/grafana/grafana/pkg/plugins/manager/signature/statickey"
 	"github.com/grafana/grafana/pkg/plugins/pluginerrs"
 	"github.com/grafana/grafana/pkg/plugins/pluginscdn"
 	ac "github.com/grafana/grafana/pkg/services/accesscontrol"
@@ -41,6 +43,7 @@ import (
 	"github.com/grafana/grafana/pkg/services/org/orgtest"
 	"github.com/grafana/grafana/pkg/services/pluginsintegration/managedplugins"
 	"github.com/grafana/grafana/pkg/services/pluginsintegration/pluginaccesscontrol"
+	"github.com/grafana/grafana/pkg/services/pluginsintegration/pluginassets"
 	"github.com/grafana/grafana/pkg/services/pluginsintegration/pluginchecker"
 	"github.com/grafana/grafana/pkg/services/pluginsintegration/pluginsettings"
 	"github.com/grafana/grafana/pkg/services/pluginsintegration/pluginstore"
@@ -674,10 +677,9 @@ func Test_PluginsList_AccessControl(t *testing.T) {
 
 func createPlugin(jd plugins.JSONData, class plugins.Class, files plugins.FS) *plugins.Plugin {
 	return &plugins.Plugin{
-		JSONData:        jd,
-		Class:           class,
-		FS:              files,
-		LoadingStrategy: plugins.LoadingStrategyScript,
+		JSONData: jd,
+		Class:    class,
+		FS:       files,
 	}
 }
 
@@ -844,6 +846,10 @@ func Test_PluginsSettings(t *testing.T) {
 						ErrorCode: tc.errCode,
 					})
 				}
+				pCfg := &config.PluginManagementCfg{}
+				pluginCDN := pluginscdn.ProvideService(pCfg)
+				sig := signature.ProvideService(pCfg, statickey.New())
+				hs.pluginAssets = pluginassets.ProvideService(pCfg, pluginCDN, sig, hs.pluginStore)
 				hs.pluginErrorResolver = pluginerrs.ProvideStore(errTracker)
 				hs.pluginsUpdateChecker, err = updatemanager.ProvidePluginsService(
 					hs.Cfg,

pkg/plugins/go.mod

@@ -4,7 +4,6 @@ go 1.25.5
 
 require (
 	github.com/Machiel/slugify v1.0.1
-	github.com/Masterminds/semver/v3 v3.4.0
 	github.com/ProtonMail/go-crypto v1.3.0
 	github.com/gobwas/glob v0.2.3
 	github.com/google/go-cmp v0.7.0

pkg/plugins/go.sum

@@ -2,8 +2,6 @@ github.com/Azure/go-ansiterm v0.0.0-20250102033503-faa5f7b0171c h1:udKWzYgxTojEK
 github.com/Azure/go-ansiterm v0.0.0-20250102033503-faa5f7b0171c/go.mod h1:xomTg63KZ2rFqZQzSB4Vz2SUXa1BpHTVz9L5PTmPC4E=
 github.com/Machiel/slugify v1.0.1 h1:EfWSlRWstMadsgzmiV7d0yVd2IFlagWH68Q+DcYCm4E=
 github.com/Machiel/slugify v1.0.1/go.mod h1:fTFGn5uWEynW4CUMG7sWkYXOf1UgDxyTM3DbR6Qfg3k=
-github.com/Masterminds/semver/v3 v3.4.0 h1:Zog+i5UMtVoCU8oKka5P7i9q9HgrJeGzI9SA1Xbatp0=
-github.com/Masterminds/semver/v3 v3.4.0/go.mod h1:4V+yj/TJE1HU9XfppCwVMZq3I84lprf4nC11bSS5beM=
 github.com/Microsoft/go-winio v0.6.2 h1:F2VQgta7ecxGYO8k3ZZz3RS8fVIXVxONVUPlNERoyfY=
 github.com/Microsoft/go-winio v0.6.2/go.mod h1:yd8OoFMLzJbo9gZq8j5qaps8bJ9aShtEA8Ipt1oGCvU=
 github.com/ProtonMail/go-crypto v1.3.0 h1:ILq8+Sf5If5DCpHQp4PbZdS1J7HDFRXz/+xKBiRGFrw=

pkg/plugins/ifaces.go

@@ -140,9 +140,7 @@ type Licensing interface {
 }
 
 type SignatureCalculator interface {
-	// Calculate calculates the signature and returns both the signature and the manifest.
-	// The manifest may be nil if the plugin is unsigned or if an error occurred.
-	Calculate(ctx context.Context, src PluginSource, plugin FoundPlugin) (Signature, *PluginManifest, error)
+	Calculate(ctx context.Context, src PluginSource, plugin FoundPlugin) (Signature, error)
 }
 
 type KeyStore interface {

pkg/plugins/manager/loader/loader_test.go

@@ -129,7 +129,6 @@ func TestLoader_Load(t *testing.T) {
 					Class:           plugins.ClassCore,
 					SkipHostEnvVars: true,
 					Translations:    map[string]string{},
-					LoadingStrategy: plugins.LoadingStrategyScript,
 				},
 			},
 		},
@@ -217,33 +216,15 @@ func TestLoader_Load(t *testing.T) {
 							ExtensionPoints:   []plugins.ExtensionPoint{},
 						},
 					},
-					Class:   plugins.ClassExternal,
-					Module:  "public/plugins/test-app/module.js",
-					BaseURL: "public/plugins/test-app",
-					FS:      mustNewStaticFSForTests(t, filepath.Join(parentDir, "testdata/includes-symlinks")),
-					Manifest: &plugins.PluginManifest{
-						Plugin:  "test-app",
-						Version: "1.0.0",
-						KeyID:   "7e4d0c6a708866e7",
-						Time:    1622547655175,
-						Files: map[string]string{
-							"dashboards/connections.json":  "bea86da4be970b98dc4681802ab55cdef3441dc3eb3c654cb207948d17b25303",
-							"dashboards/extra/memory.json": "7c042464941084caa91d0a9a2f188b05315a9796308a652ccdee31ca4fbcbfee",
-							"plugin.json":                  "c59a51bf6d7ecd7a99608ccb99353390c8b973672a938a0247164324005c0caf",
-							"symlink_to_txt":               "9f32c171bf78a85d5cb77a48ab44f85578ee2942a1fc9f9ec4fde194ae4ff048",
-							"text.txt":                     "9f32c171bf78a85d5cb77a48ab44f85578ee2942a1fc9f9ec4fde194ae4ff048",
-						},
-						ManifestVersion: "2.0.0",
-						SignatureType:   plugins.SignatureTypeGrafana,
-						SignedByOrg:     "grafana",
-						SignedByOrgName: "Grafana Labs",
-					},
+					Class:           plugins.ClassExternal,
+					Module:          "public/plugins/test-app/module.js",
+					BaseURL:         "public/plugins/test-app",
+					FS:              mustNewStaticFSForTests(t, filepath.Join(parentDir, "testdata/includes-symlinks")),
 					Signature:       "valid",
 					SignatureType:   plugins.SignatureTypeGrafana,
 					SignatureOrg:    "Grafana Labs",
 					SkipHostEnvVars: true,
 					Translations:    map[string]string{},
-					LoadingStrategy: plugins.LoadingStrategyScript,
 				},
 			},
 		},
@@ -296,7 +277,6 @@ func TestLoader_Load(t *testing.T) {
 					Signature:       "unsigned",
 					SkipHostEnvVars: true,
 					Translations:    map[string]string{},
-					LoadingStrategy: plugins.LoadingStrategyScript,
 				},
 			},
 		},
@@ -356,7 +336,6 @@ func TestLoader_Load(t *testing.T) {
 					Signature:       plugins.SignatureStatusUnsigned,
 					SkipHostEnvVars: true,
 					Translations:    map[string]string{},
-					LoadingStrategy: plugins.LoadingStrategyScript,
 				},
 			},
 		},
@@ -455,7 +434,6 @@ func TestLoader_Load(t *testing.T) {
 					BaseURL:         "public/plugins/test-app",
 					SkipHostEnvVars: true,
 					Translations:    map[string]string{},
-					LoadingStrategy: plugins.LoadingStrategyScript,
 				},
 			},
 		},

pkg/plugins/manager/pipeline/bootstrap/bootstrap.go

@@ -11,7 +11,6 @@ import (
 	"github.com/grafana/grafana/pkg/plugins/log"
 	"github.com/grafana/grafana/pkg/plugins/manager/signature"
 	"github.com/grafana/grafana/pkg/plugins/pluginassets"
-	"github.com/grafana/grafana/pkg/plugins/pluginscdn"
 	"github.com/grafana/grafana/pkg/plugins/tracing"
 	"github.com/grafana/grafana/pkg/semconv"
 )
@@ -55,7 +54,7 @@ func New(cfg *config.PluginManagementCfg, opts Opts) *Bootstrap {
 	}
 
 	if opts.DecorateFuncs == nil {
-		opts.DecorateFuncs = DefaultDecorateFuncs(cfg, pluginscdn.ProvideService(cfg))
+		opts.DecorateFuncs = DefaultDecorateFuncs(cfg)
 	}
 
 	return &Bootstrap{

pkg/plugins/manager/pipeline/bootstrap/steps.go

@@ -11,7 +11,6 @@ import (
 	"github.com/grafana/grafana/pkg/plugins/config"
 	"github.com/grafana/grafana/pkg/plugins/log"
 	"github.com/grafana/grafana/pkg/plugins/pluginassets"
-	"github.com/grafana/grafana/pkg/plugins/pluginscdn"
 )
 
 // DefaultConstructor implements the default ConstructFunc used for the Construct step of the Bootstrap stage.
@@ -29,14 +28,12 @@ func DefaultConstructFunc(cfg *config.PluginManagementCfg, signatureCalculator p
 }
 
 // DefaultDecorateFuncs are the default DecorateFuncs used for the Decorate step of the Bootstrap stage.
-func DefaultDecorateFuncs(cfg *config.PluginManagementCfg, cdn *pluginscdn.Service) []DecorateFunc {
+func DefaultDecorateFuncs(cfg *config.PluginManagementCfg) []DecorateFunc {
 	return []DecorateFunc{
 		AppDefaultNavURLDecorateFunc,
 		TemplateDecorateFunc,
 		AppChildDecorateFunc(),
 		SkipHostEnvVarsDecorateFunc(cfg),
-		ModuleHashDecorateFunc(cfg, cdn),
-		LoadingStrategyDecorateFunc(cfg, cdn),
 	}
 }
 
@@ -51,30 +48,19 @@ func NewDefaultConstructor(cfg *config.PluginManagementCfg, signatureCalculator
 
 // Construct will calculate the plugin's signature state and create the plugin using the pluginFactoryFunc.
 func (c *DefaultConstructor) Construct(ctx context.Context, src plugins.PluginSource, bundle *plugins.FoundBundle) ([]*plugins.Plugin, error) {
-	// Calculate signature and cache manifest
-	sig, manifest, err := c.signatureCalculator.Calculate(ctx, src, bundle.Primary)
+	sig, err := c.signatureCalculator.Calculate(ctx, src, bundle.Primary)
 	if err != nil {
 		c.log.Warn("Could not calculate plugin signature state", "pluginId", bundle.Primary.JSONData.ID, "error", err)
 		return nil, err
 	}
-
 	plugin, err := c.pluginFactoryFunc(bundle, src.PluginClass(ctx), sig)
 	if err != nil {
 		c.log.Error("Could not create primary plugin base", "pluginId", bundle.Primary.JSONData.ID, "error", err)
 		return nil, err
 	}
-
-	plugin.Manifest = manifest
-
 	res := make([]*plugins.Plugin, 0, len(plugin.Children)+1)
 	res = append(res, plugin)
-	for _, child := range plugin.Children {
-		// Child plugins use the parent's manifest
-		if child.Parent != nil && child.Parent.Manifest != nil {
-			child.Manifest = child.Parent.Manifest
-		}
-		res = append(res, child)
-	}
+	res = append(res, plugin.Children...)
 	return res, nil
 }
 
@@ -159,19 +145,3 @@ func SkipHostEnvVarsDecorateFunc(cfg *config.PluginManagementCfg) DecorateFunc {
 		return p, nil
 	}
 }
-
-// ModuleHashDecorateFunc returns a DecorateFunc that calculates and sets the module hash for the plugin.
-func ModuleHashDecorateFunc(cfg *config.PluginManagementCfg, cdn *pluginscdn.Service) DecorateFunc {
-	return func(_ context.Context, p *plugins.Plugin) (*plugins.Plugin, error) {
-		p.ModuleHash = pluginassets.CalculateModuleHash(p, cfg, cdn)
-		return p, nil
-	}
-}
-
-// LoadingStrategyDecorateFunc returns a DecorateFunc that calculates and sets the loading strategy for the plugin.
-func LoadingStrategyDecorateFunc(cfg *config.PluginManagementCfg, cdn *pluginscdn.Service) DecorateFunc {
-	return func(_ context.Context, p *plugins.Plugin) (*plugins.Plugin, error) {
-		p.LoadingStrategy = pluginassets.CalculateLoadingStrategy(p, cfg, cdn)
-		return p, nil
-	}
-}

pkg/plugins/manager/signature/manifest.go

@@ -14,6 +14,7 @@ import (
 	"path"
 	"path/filepath"
 	"runtime"
+	"strings"
 
 	"github.com/ProtonMail/go-crypto/openpgp"
 	"github.com/ProtonMail/go-crypto/openpgp/clearsign"
@@ -36,6 +37,26 @@ var (
 	fromSlash = filepath.FromSlash
 )
 
+// PluginManifest holds details for the file manifest
+type PluginManifest struct {
+	Plugin  string            `json:"plugin"`
+	Version string            `json:"version"`
+	KeyID   string            `json:"keyId"`
+	Time    int64             `json:"time"`
+	Files   map[string]string `json:"files"`
+
+	// V2 supported fields
+	ManifestVersion string                `json:"manifestVersion"`
+	SignatureType   plugins.SignatureType `json:"signatureType"`
+	SignedByOrg     string                `json:"signedByOrg"`
+	SignedByOrgName string                `json:"signedByOrgName"`
+	RootURLs        []string              `json:"rootUrls"`
+}
+
+func (m *PluginManifest) IsV2() bool {
+	return strings.HasPrefix(m.ManifestVersion, "2.")
+}
+
 type Signature struct {
 	kr  plugins.KeyRetriever
 	cfg *config.PluginManagementCfg
@@ -66,14 +87,14 @@ func DefaultCalculator(cfg *config.PluginManagementCfg) *Signature {
 
 // readPluginManifest attempts to read and verify the plugin manifest
 // if any error occurs or the manifest is not valid, this will return an error
-func (s *Signature) readPluginManifest(ctx context.Context, body []byte) (*plugins.PluginManifest, error) {
+func (s *Signature) readPluginManifest(ctx context.Context, body []byte) (*PluginManifest, error) {
 	block, _ := clearsign.Decode(body)
 	if block == nil {
 		return nil, errors.New("unable to decode manifest")
 	}
 
 	// Convert to a well typed object
-	var manifest plugins.PluginManifest
+	var manifest PluginManifest
 	err := json.Unmarshal(block.Plaintext, &manifest)
 	if err != nil {
 		return nil, fmt.Errorf("%v: %w", "Error parsing manifest JSON", err)
@@ -90,7 +111,7 @@ var ErrSignatureTypeUnsigned = errors.New("plugin is unsigned")
 
 // ReadPluginManifestFromFS reads the plugin manifest from the provided plugins.FS.
 // If the manifest is not found, it will return an error wrapping ErrSignatureTypeUnsigned.
-func (s *Signature) ReadPluginManifestFromFS(ctx context.Context, pfs plugins.FS) (*plugins.PluginManifest, error) {
+func (s *Signature) ReadPluginManifestFromFS(ctx context.Context, pfs plugins.FS) (*PluginManifest, error) {
 	f, err := pfs.Open("MANIFEST.txt")
 	if err != nil {
 		if errors.Is(err, plugins.ErrFileNotExist) {
@@ -119,9 +140,9 @@ func (s *Signature) ReadPluginManifestFromFS(ctx context.Context, pfs plugins.FS
 	return manifest, nil
 }
 
-func (s *Signature) Calculate(ctx context.Context, src plugins.PluginSource, plugin plugins.FoundPlugin) (plugins.Signature, *plugins.PluginManifest, error) {
+func (s *Signature) Calculate(ctx context.Context, src plugins.PluginSource, plugin plugins.FoundPlugin) (plugins.Signature, error) {
 	if defaultSignature, exists := src.DefaultSignature(ctx, plugin.JSONData.ID); exists {
-		return defaultSignature, nil, nil
+		return defaultSignature, nil
 	}
 
 	manifest, err := s.ReadPluginManifestFromFS(ctx, plugin.FS)
@@ -130,29 +151,29 @@ func (s *Signature) Calculate(ctx context.Context, src plugins.PluginSource, plu
 		s.log.Warn("Plugin is unsigned", "id", plugin.JSONData.ID, "err", err)
 		return plugins.Signature{
 			Status: plugins.SignatureStatusUnsigned,
-		}, nil, nil
+		}, nil
 	case err != nil:
 		s.log.Warn("Plugin signature is invalid", "id", plugin.JSONData.ID, "err", err)
 		return plugins.Signature{
 			Status: plugins.SignatureStatusInvalid,
-		}, nil, nil
+		}, nil
 	}
 
 	if !manifest.IsV2() {
 		return plugins.Signature{
 			Status: plugins.SignatureStatusInvalid,
-		}, nil, nil
+		}, nil
 	}
 
 	fsFiles, err := plugin.FS.Files()
 	if err != nil {
-		return plugins.Signature{}, nil, fmt.Errorf("files: %w", err)
+		return plugins.Signature{}, fmt.Errorf("files: %w", err)
 	}
 	if len(fsFiles) == 0 {
 		s.log.Warn("No plugin file information in directory", "pluginId", plugin.JSONData.ID)
 		return plugins.Signature{
 			Status: plugins.SignatureStatusInvalid,
-		}, nil, nil
+		}, nil
 	}
 
 	// Make sure the versions all match
@@ -160,20 +181,20 @@ func (s *Signature) Calculate(ctx context.Context, src plugins.PluginSource, plu
 		s.log.Debug("Plugin signature invalid because ID or Version mismatch", "pluginId", plugin.JSONData.ID, "manifestPluginId", manifest.Plugin, "pluginVersion", plugin.JSONData.Info.Version, "manifestPluginVersion", manifest.Version)
 		return plugins.Signature{
 			Status: plugins.SignatureStatusModified,
-		}, nil, nil
+		}, nil
 	}
 
 	// Validate that plugin is running within defined root URLs
 	if len(manifest.RootURLs) > 0 {
 		if match, err := urlMatch(manifest.RootURLs, s.cfg.GrafanaAppURL, manifest.SignatureType); err != nil {
 			s.log.Warn("Could not verify if root URLs match", "plugin", plugin.JSONData.ID, "rootUrls", manifest.RootURLs)
-			return plugins.Signature{}, nil, err
+			return plugins.Signature{}, err
 		} else if !match {
 			s.log.Warn("Could not find root URL that matches running application URL", "plugin", plugin.JSONData.ID,
 				"appUrl", s.cfg.GrafanaAppURL, "rootUrls", manifest.RootURLs)
 			return plugins.Signature{
 				Status: plugins.SignatureStatusInvalid,
-			}, nil, nil
+			}, nil
 		}
 	}
 
@@ -186,7 +207,7 @@ func (s *Signature) Calculate(ctx context.Context, src plugins.PluginSource, plu
 			s.log.Debug("Plugin signature invalid", "pluginId", plugin.JSONData.ID, "error", err)
 			return plugins.Signature{
 				Status: plugins.SignatureStatusModified,
-			}, nil, nil
+			}, nil
 		}
 
 		manifestFiles[p] = struct{}{}
@@ -215,7 +236,7 @@ func (s *Signature) Calculate(ctx context.Context, src plugins.PluginSource, plu
 		s.log.Warn("The following files were not included in the signature", "plugin", plugin.JSONData.ID, "files", unsignedFiles)
 		return plugins.Signature{
 			Status: plugins.SignatureStatusModified,
-		}, nil, nil
+		}, nil
 	}
 
 	s.log.Debug("Plugin signature valid", "id", plugin.JSONData.ID)
@@ -223,7 +244,7 @@ func (s *Signature) Calculate(ctx context.Context, src plugins.PluginSource, plu
 		Status:     plugins.SignatureStatusValid,
 		Type:       manifest.SignatureType,
 		SigningOrg: manifest.SignedByOrgName,
-	}, manifest, nil
+	}, nil
 }
 
 func verifyHash(mlog log.Logger, plugin plugins.FoundPlugin, path, hash string) error {
@@ -300,7 +321,7 @@ func (r invalidFieldErr) Error() string {
 	return fmt.Sprintf("valid manifest field %s is required", r.field)
 }
 
-func (s *Signature) validateManifest(ctx context.Context, m plugins.PluginManifest, block *clearsign.Block) error {
+func (s *Signature) validateManifest(ctx context.Context, m PluginManifest, block *clearsign.Block) error {
 	if len(m.Plugin) == 0 {
 		return invalidFieldErr{field: "plugin"}
 	}

pkg/plugins/manager/signature/manifest_test.go

@@ -164,7 +164,7 @@ func TestCalculate(t *testing.T) {
 		for _, tc := range tcs {
 			basePath := filepath.Join(parentDir, "testdata/non-pvt-with-root-url/plugin")
 			s := provideTestServiceWithConfig(&config.PluginManagementCfg{GrafanaAppURL: tc.appURL})
-			sig, _, err := s.Calculate(context.Background(), &pluginfakes.FakePluginSource{
+			sig, err := s.Calculate(context.Background(), &pluginfakes.FakePluginSource{
 				PluginClassFunc: func(ctx context.Context) plugins.Class {
 					return plugins.ClassExternal
 				},
@@ -192,7 +192,7 @@ func TestCalculate(t *testing.T) {
 
 		runningWindows = true
 		s := provideDefaultTestService()
-		sig, _, err := s.Calculate(context.Background(), &pluginfakes.FakePluginSource{
+		sig, err := s.Calculate(context.Background(), &pluginfakes.FakePluginSource{
 			PluginClassFunc: func(ctx context.Context) plugins.Class {
 				return plugins.ClassExternal
 			},
@@ -260,7 +260,7 @@ func TestCalculate(t *testing.T) {
 				require.NoError(t, err)
 				pfs, err = newPathSeparatorOverrideFS(string(tc.platform.separator), pfs)
 				require.NoError(t, err)
-				sig, _, err := s.Calculate(context.Background(), &pluginfakes.FakePluginSource{
+				sig, err := s.Calculate(context.Background(), &pluginfakes.FakePluginSource{
 					PluginClassFunc: func(ctx context.Context) plugins.Class {
 						return plugins.ClassExternal
 					},
@@ -396,7 +396,7 @@ func TestFSPathSeparatorFiles(t *testing.T) {
 	}
 }
 
-func fileList(manifest *plugins.PluginManifest) []string {
+func fileList(manifest *PluginManifest) []string {
 	keys := make([]string, 0, len(manifest.Files))
 	for k := range manifest.Files {
 		keys = append(keys, k)
@@ -682,52 +682,52 @@ func Test_urlMatch_private(t *testing.T) {
 func Test_validateManifest(t *testing.T) {
 	tcs := []struct {
 		name        string
-		manifest    *plugins.PluginManifest
+		manifest    *PluginManifest
 		expectedErr string
 	}{
 		{
 			name:        "Empty plugin field",
-			manifest:    createV2Manifest(t, func(m *plugins.PluginManifest) { m.Plugin = "" }),
+			manifest:    createV2Manifest(t, func(m *PluginManifest) { m.Plugin = "" }),
 			expectedErr: "valid manifest field plugin is required",
 		},
 		{
 			name:        "Empty keyId field",
-			manifest:    createV2Manifest(t, func(m *plugins.PluginManifest) { m.KeyID = "" }),
+			manifest:    createV2Manifest(t, func(m *PluginManifest) { m.KeyID = "" }),
 			expectedErr: "valid manifest field keyId is required",
 		},
 		{
 			name:        "Empty signedByOrg field",
-			manifest:    createV2Manifest(t, func(m *plugins.PluginManifest) { m.SignedByOrg = "" }),
+			manifest:    createV2Manifest(t, func(m *PluginManifest) { m.SignedByOrg = "" }),
 			expectedErr: "valid manifest field signedByOrg is required",
 		},
 		{
 			name:        "Empty signedByOrgName field",
-			manifest:    createV2Manifest(t, func(m *plugins.PluginManifest) { m.SignedByOrgName = "" }),
+			manifest:    createV2Manifest(t, func(m *PluginManifest) { m.SignedByOrgName = "" }),
 			expectedErr: "valid manifest field SignedByOrgName is required",
 		},
 		{
 			name:        "Empty signatureType field",
-			manifest:    createV2Manifest(t, func(m *plugins.PluginManifest) { m.SignatureType = "" }),
+			manifest:    createV2Manifest(t, func(m *PluginManifest) { m.SignatureType = "" }),
 			expectedErr: "valid manifest field signatureType is required",
 		},
 		{
 			name:        "Invalid signatureType field",
-			manifest:    createV2Manifest(t, func(m *plugins.PluginManifest) { m.SignatureType = "invalidSignatureType" }),
+			manifest:    createV2Manifest(t, func(m *PluginManifest) { m.SignatureType = "invalidSignatureType" }),
 			expectedErr: "valid manifest field signatureType is required",
 		},
 		{
 			name:        "Empty files field",
-			manifest:    createV2Manifest(t, func(m *plugins.PluginManifest) { m.Files = map[string]string{} }),
+			manifest:    createV2Manifest(t, func(m *PluginManifest) { m.Files = map[string]string{} }),
 			expectedErr: "valid manifest field files is required",
 		},
 		{
 			name:        "Empty time field",
-			manifest:    createV2Manifest(t, func(m *plugins.PluginManifest) { m.Time = 0 }),
+			manifest:    createV2Manifest(t, func(m *PluginManifest) { m.Time = 0 }),
 			expectedErr: "valid manifest field time is required",
 		},
 		{
 			name:        "Empty version field",
-			manifest:    createV2Manifest(t, func(m *plugins.PluginManifest) { m.Version = "" }),
+			manifest:    createV2Manifest(t, func(m *PluginManifest) { m.Version = "" }),
 			expectedErr: "valid manifest field version is required",
 		},
 	}
@@ -740,10 +740,10 @@ func Test_validateManifest(t *testing.T) {
 	}
 }
 
-func createV2Manifest(t *testing.T, cbs ...func(*plugins.PluginManifest)) *plugins.PluginManifest {
+func createV2Manifest(t *testing.T, cbs ...func(*PluginManifest)) *PluginManifest {
 	t.Helper()
 
-	m := &plugins.PluginManifest{
+	m := &PluginManifest{
 		Plugin:  "grafana-test-app",
 		Version: "2.5.3",
 		KeyID:   "7e4d0c6a708866e7",

pkg/plugins/pluginassets/loadingstrategy.go

@@ -1,67 +0,0 @@
-package pluginassets
-
-import (
-	"github.com/Masterminds/semver/v3"
-
-	"github.com/grafana/grafana/pkg/plugins"
-	"github.com/grafana/grafana/pkg/plugins/config"
-	"github.com/grafana/grafana/pkg/plugins/pluginscdn"
-)
-
-const (
-	CreatePluginVersionCfgKey               = "create_plugin_version"
-	CreatePluginVersionScriptSupportEnabled = "4.15.0"
-)
-
-var (
-	scriptLoadingMinSupportedVersion = semver.MustParse(CreatePluginVersionScriptSupportEnabled)
-)
-
-// CalculateLoadingStrategy calculates the loading strategy for a plugin.
-// If a plugin has plugin setting `create_plugin_version` >= 4.15.0, set loadingStrategy to "script".
-// If a plugin is not loaded via the CDN and is not Angular, set loadingStrategy to "script".
-// Otherwise, set loadingStrategy to "fetch".
-func CalculateLoadingStrategy(p *plugins.Plugin, cfg *config.PluginManagementCfg, cdn *pluginscdn.Service) plugins.LoadingStrategy {
-	if cfg != nil && cfg.PluginSettings != nil {
-		if pCfg, ok := cfg.PluginSettings[p.ID]; ok {
-			if compatibleCreatePluginVersion(pCfg) {
-				return plugins.LoadingStrategyScript
-			}
-		}
-
-		// If the plugin has a parent
-		if p.Parent != nil {
-			// Check the parent's create_plugin_version setting
-			if pCfg, ok := cfg.PluginSettings[p.Parent.ID]; ok {
-				if compatibleCreatePluginVersion(pCfg) {
-					return plugins.LoadingStrategyScript
-				}
-			}
-
-			// Since the parent plugin is not explicitly configured as script loading compatible,
-			// If the plugin is either loaded from the CDN (via its parent) or contains Angular, we should use fetch
-			if cdnEnabled(p.Parent, cdn) || p.Angular.Detected {
-				return plugins.LoadingStrategyFetch
-			}
-		}
-	}
-
-	if !cdnEnabled(p, cdn) && !p.Angular.Detected {
-		return plugins.LoadingStrategyScript
-	}
-
-	return plugins.LoadingStrategyFetch
-}
-
-// compatibleCreatePluginVersion checks if the create_plugin_version setting is >= 4.15.0
-func compatibleCreatePluginVersion(ps map[string]string) bool {
-	if cpv, ok := ps[CreatePluginVersionCfgKey]; ok {
-		createPluginVer, err := semver.NewVersion(cpv)
-		if err != nil {
-			// Invalid semver, treat as incompatible
-			return false
-		}
-		return !createPluginVer.LessThan(scriptLoadingMinSupportedVersion)
-	}
-	return false
-}

pkg/plugins/pluginassets/loadingstrategy_test.go

@@ -1,216 +0,0 @@
-package pluginassets
-
-import (
-	"testing"
-
-	"github.com/stretchr/testify/assert"
-
-	"github.com/grafana/grafana/pkg/plugins"
-	"github.com/grafana/grafana/pkg/plugins/config"
-	"github.com/grafana/grafana/pkg/plugins/pluginscdn"
-)
-
-// cdnFS is a simple mock FS that returns CDN type
-type cdnFS struct {
-	plugins.FS
-}
-
-func (f *cdnFS) Type() plugins.FSType {
-	return plugins.FSTypeCDN
-}
-
-func TestCalculateLoadingStrategy(t *testing.T) {
-	const pluginID = "grafana-test-datasource"
-
-	const (
-		incompatVersion = "4.14.0"
-		compatVersion   = CreatePluginVersionScriptSupportEnabled
-		futureVersion   = "5.0.0"
-	)
-
-	tcs := []struct {
-		name           string
-		pluginSettings config.PluginSettings
-		plugin         *plugins.Plugin
-		expected       plugins.LoadingStrategy
-	}{
-		{
-			name: "Expected LoadingStrategyScript when create-plugin version is compatible and plugin is not angular",
-			pluginSettings: newPluginSettings(pluginID, map[string]string{
-				CreatePluginVersionCfgKey: compatVersion,
-			}),
-			plugin:   newPluginForLoadingStrategy(pluginID, withAngularForLoadingStrategy(false)),
-			expected: plugins.LoadingStrategyScript,
-		},
-		{
-			name: "Expected LoadingStrategyScript when parent create-plugin version is compatible and plugin is not angular",
-			pluginSettings: newPluginSettings("parent-datasource", map[string]string{
-				CreatePluginVersionCfgKey: compatVersion,
-			}),
-			plugin: newPluginForLoadingStrategy(pluginID, withAngularForLoadingStrategy(false), func(p *plugins.Plugin) {
-				p.Parent = &plugins.Plugin{
-					JSONData: plugins.JSONData{ID: "parent-datasource"},
-					FS:       plugins.NewFakeFS(),
-				}
-			}),
-			expected: plugins.LoadingStrategyScript,
-		},
-		{
-			name: "Expected LoadingStrategyScript when create-plugin version is future compatible and plugin is not angular",
-			pluginSettings: newPluginSettings(pluginID, map[string]string{
-				CreatePluginVersionCfgKey: futureVersion,
-			}),
-			plugin:   newPluginForLoadingStrategy(pluginID, withAngularForLoadingStrategy(false), withFSForLoadingStrategy(plugins.NewFakeFS())),
-			expected: plugins.LoadingStrategyScript,
-		},
-		{
-			name:           "Expected LoadingStrategyScript when create-plugin version is not provided, plugin is not angular and is not configured as CDN enabled",
-			pluginSettings: newPluginSettings(pluginID, map[string]string{}),
-			plugin:         newPluginForLoadingStrategy(pluginID, withAngularForLoadingStrategy(false), withFSForLoadingStrategy(plugins.NewFakeFS())),
-			expected:       plugins.LoadingStrategyScript,
-		},
-		{
-			name: "Expected LoadingStrategyScript when create-plugin version is not compatible, plugin is not angular, is not configured as CDN enabled and does not have a CDN fs",
-			pluginSettings: newPluginSettings(pluginID, map[string]string{
-				CreatePluginVersionCfgKey: incompatVersion,
-			}),
-			plugin:   newPluginForLoadingStrategy(pluginID, withAngularForLoadingStrategy(false), withClassForLoadingStrategy(plugins.ClassExternal), withFSForLoadingStrategy(plugins.NewFakeFS())),
-			expected: plugins.LoadingStrategyScript,
-		},
-		{
-			name: "Expected LoadingStrategyFetch when parent create-plugin version is not set, is configured as CDN enabled and plugin is not angular",
-			pluginSettings: config.PluginSettings{
-				"parent-datasource": {
-					"cdn": "true",
-				},
-			},
-			plugin: newPluginForLoadingStrategy(pluginID, withAngularForLoadingStrategy(false), func(p *plugins.Plugin) {
-				p.Parent = &plugins.Plugin{
-					JSONData: plugins.JSONData{ID: "parent-datasource"},
-					FS:       plugins.NewFakeFS(),
-				}
-			}),
-			expected: plugins.LoadingStrategyFetch,
-		},
-		{
-			name: "Expected LoadingStrategyFetch when parent create-plugin version is not set, is configured as CDN enabled and plugin is angular",
-			pluginSettings: config.PluginSettings{
-				"parent-datasource": {
-					"cdn": "true",
-				},
-			},
-			plugin: newPluginForLoadingStrategy(pluginID, withAngularForLoadingStrategy(true), func(p *plugins.Plugin) {
-				p.Parent = &plugins.Plugin{
-					JSONData: plugins.JSONData{ID: "parent-datasource"},
-					FS:       plugins.NewFakeFS(),
-				}
-			}),
-			expected: plugins.LoadingStrategyFetch,
-		},
-		{
-			name:           "Expected LoadingStrategyFetch when parent create-plugin version is not set, is not configured as CDN enabled and plugin is angular",
-			pluginSettings: config.PluginSettings{},
-			plugin: newPluginForLoadingStrategy(pluginID, withAngularForLoadingStrategy(true), withFSForLoadingStrategy(plugins.NewFakeFS()), func(p *plugins.Plugin) {
-				p.Parent = &plugins.Plugin{
-					JSONData: plugins.JSONData{ID: "parent-datasource"},
-					FS:       plugins.NewFakeFS(),
-				}
-			}),
-			expected: plugins.LoadingStrategyFetch,
-		},
-		{
-			name: "Expected LoadingStrategyFetch when create-plugin version is not compatible, plugin is not angular, and plugin is configured as CDN enabled",
-			pluginSettings: newPluginSettings(pluginID, map[string]string{
-				"cdn":                     "true",
-				CreatePluginVersionCfgKey: incompatVersion,
-			}),
-			plugin:   newPluginForLoadingStrategy(pluginID, withAngularForLoadingStrategy(false), withClassForLoadingStrategy(plugins.ClassExternal), withFSForLoadingStrategy(plugins.NewFakeFS())),
-			expected: plugins.LoadingStrategyFetch,
-		},
-		{
-			name: "Expected LoadingStrategyFetch when create-plugin version is not compatible and plugin is angular",
-			pluginSettings: newPluginSettings(pluginID, map[string]string{
-				CreatePluginVersionCfgKey: incompatVersion,
-			}),
-			plugin:   newPluginForLoadingStrategy(pluginID, withAngularForLoadingStrategy(true), withFSForLoadingStrategy(plugins.NewFakeFS())),
-			expected: plugins.LoadingStrategyFetch,
-		},
-		{
-			name: "Expected LoadingStrategyFetch when create-plugin version is not compatible, plugin is not angular and plugin is configured as CDN enabled",
-			pluginSettings: newPluginSettings(pluginID, map[string]string{
-				"cdn":                     "true",
-				CreatePluginVersionCfgKey: incompatVersion,
-			}),
-			plugin:   newPluginForLoadingStrategy(pluginID, withAngularForLoadingStrategy(false), withFSForLoadingStrategy(plugins.NewFakeFS())),
-			expected: plugins.LoadingStrategyFetch,
-		},
-		{
-			name: "Expected LoadingStrategyFetch when create-plugin version is not compatible, plugin is not angular and has a CDN fs",
-			pluginSettings: newPluginSettings(pluginID, map[string]string{
-				CreatePluginVersionCfgKey: incompatVersion,
-			}),
-			plugin: newPluginForLoadingStrategy(pluginID, withAngularForLoadingStrategy(false), withFSForLoadingStrategy(
-				&cdnFS{FS: plugins.NewFakeFS()},
-			)),
-			expected: plugins.LoadingStrategyFetch,
-		},
-		{
-			name: "Expected LoadingStrategyScript when plugin setting create-plugin version is badly formatted, plugin is not configured as CDN enabled and does not have a CDN fs",
-			pluginSettings: newPluginSettings(pluginID, map[string]string{
-				CreatePluginVersionCfgKey: "invalidSemver",
-			}),
-			plugin:   newPluginForLoadingStrategy(pluginID, withAngularForLoadingStrategy(false), withFSForLoadingStrategy(plugins.NewFakeFS())),
-			expected: plugins.LoadingStrategyScript,
-		},
-	}
-	for _, tc := range tcs {
-		t.Run(tc.name, func(t *testing.T) {
-			cfg := &config.PluginManagementCfg{
-				PluginSettings: tc.pluginSettings,
-			}
-			cdn := pluginscdn.ProvideService(&config.PluginManagementCfg{
-				PluginsCDNURLTemplate: "http://cdn.example.com", // required for cdn.PluginSupported check
-				PluginSettings:        tc.pluginSettings,
-			})
-
-			got := CalculateLoadingStrategy(tc.plugin, cfg, cdn)
-			assert.Equal(t, tc.expected, got, "unexpected loading strategy")
-		})
-	}
-}
-
-func newPluginForLoadingStrategy(pluginID string, cbs ...func(*plugins.Plugin)) *plugins.Plugin {
-	p := &plugins.Plugin{
-		JSONData: plugins.JSONData{
-			ID: pluginID,
-		},
-	}
-	for _, cb := range cbs {
-		cb(p)
-	}
-	return p
-}
-
-func withAngularForLoadingStrategy(angular bool) func(*plugins.Plugin) {
-	return func(p *plugins.Plugin) {
-		p.Angular = plugins.AngularMeta{Detected: angular}
-	}
-}
-
-func withFSForLoadingStrategy(fs plugins.FS) func(*plugins.Plugin) {
-	return func(p *plugins.Plugin) {
-		p.FS = fs
-	}
-}
-
-func withClassForLoadingStrategy(class plugins.Class) func(*plugins.Plugin) {
-	return func(p *plugins.Plugin) {
-		p.Class = class
-	}
-}
-
-func newPluginSettings(pluginID string, kv map[string]string) config.PluginSettings {
-	return config.PluginSettings{
-		pluginID: kv,
-	}
-}

pkg/plugins/pluginassets/modulehash.go

@@ -1,90 +0,0 @@
-package pluginassets
-
-import (
-	"encoding/base64"
-	"encoding/hex"
-	"path"
-	"path/filepath"
-
-	"github.com/grafana/grafana/pkg/plugins"
-	"github.com/grafana/grafana/pkg/plugins/config"
-	"github.com/grafana/grafana/pkg/plugins/pluginscdn"
-)
-
-// CalculateModuleHash calculates the module.js SHA256 hash for a plugin in the format expected by the browser for SRI checks.
-// The module hash is read from the plugin's cached manifest.
-// For nested plugins, the module hash is read from the root parent plugin's manifest.
-// If the plugin is unsigned or not a CDN plugin, an empty string is returned.
-func CalculateModuleHash(p *plugins.Plugin, cfg *config.PluginManagementCfg, cdn *pluginscdn.Service) string {
-	if cfg == nil || !cfg.Features.SriChecksEnabled {
-		return ""
-	}
-
-	if !p.Signature.IsValid() {
-		return ""
-	}
-
-	rootParent := findRootParent(p)
-	if rootParent.Manifest == nil {
-		return ""
-	}
-
-	if !rootParent.Manifest.IsV2() {
-		return ""
-	}
-
-	if !cdnEnabled(rootParent, cdn) {
-		return ""
-	}
-
-	modulePath := getModulePathInManifest(p, rootParent)
-	moduleHash, ok := rootParent.Manifest.Files[modulePath]
-	if !ok {
-		return ""
-	}
-
-	return convertHashForSRI(moduleHash)
-}
-
-// findRootParent returns the root parent plugin (the one that contains the manifest).
-// For non-nested plugins, it returns the plugin itself.
-func findRootParent(p *plugins.Plugin) *plugins.Plugin {
-	root := p
-	for root.Parent != nil {
-		root = root.Parent
-	}
-	return root
-}
-
-// getModulePathInManifest returns the path to module.js as it appears in the manifest.
-// For nested plugins, this is the relative path from the root parent to the plugin's module.js.
-// For non-nested plugins, this is simply "module.js".
-func getModulePathInManifest(p *plugins.Plugin, rootParent *plugins.Plugin) string {
-	if p == rootParent {
-		return "module.js"
-	}
-
-	// Calculate the relative path from root parent to this plugin
-	relPath, err := rootParent.FS.Rel(p.FS.Base())
-	if err != nil {
-		return ""
-	}
-
-	// MANIFEST.txt uses forward slashes as path separators
-	pluginRootPath := filepath.ToSlash(relPath)
-	return path.Join(pluginRootPath, "module.js")
-}
-
-// convertHashForSRI takes a SHA256 hash string and returns it as expected by the browser for SRI checks.
-func convertHashForSRI(h string) string {
-	hb, err := hex.DecodeString(h)
-	if err != nil {
-		return ""
-	}
-	return "sha256-" + base64.StdEncoding.EncodeToString(hb)
-}
-
-// cdnEnabled checks if a plugin is loaded via CDN
-func cdnEnabled(p *plugins.Plugin, cdn *pluginscdn.Service) bool {
-	return p.FS.Type().CDN() || cdn.PluginSupported(p.ID)
-}

pkg/plugins/pluginassets/modulehash_test.go

@@ -1,356 +0,0 @@
-package pluginassets
-
-import (
-	"path/filepath"
-	"testing"
-
-	"github.com/stretchr/testify/require"
-
-	"github.com/grafana/grafana/pkg/plugins"
-	"github.com/grafana/grafana/pkg/plugins/config"
-	"github.com/grafana/grafana/pkg/plugins/pluginscdn"
-)
-
-func TestConvertHashForSRI(t *testing.T) {
-	for _, tc := range []struct {
-		hash    string
-		expHash string
-		expErr  bool
-	}{
-		{
-			hash:    "ddfcb449445064e6c39f0c20b15be3cb6a55837cf4781df23d02de005f436811",
-			expHash: "sha256-3fy0SURQZObDnwwgsVvjy2pVg3z0eB3yPQLeAF9DaBE=",
-		},
-		{
-			hash:   "not-a-valid-hash",
-			expErr: true,
-		},
-	} {
-		t.Run(tc.hash, func(t *testing.T) {
-			r := convertHashForSRI(tc.hash)
-			if tc.expErr {
-				// convertHashForSRI returns empty string on error
-				require.Empty(t, r)
-			} else {
-				require.Equal(t, tc.expHash, r)
-			}
-		})
-	}
-}
-
-func TestCalculateModuleHash(t *testing.T) {
-	const (
-		pluginID       = "grafana-test-datasource"
-		parentPluginID = "grafana-test-app"
-	)
-
-	// Helper to create a plugin with manifest
-	createPluginWithManifest := func(id string, manifest *plugins.PluginManifest, parent *plugins.Plugin) *plugins.Plugin {
-		p := &plugins.Plugin{
-			JSONData: plugins.JSONData{
-				ID: id,
-			},
-			Signature: plugins.SignatureStatusValid,
-			Manifest:  manifest,
-		}
-		if parent != nil {
-			p.Parent = parent
-		}
-		return p
-	}
-
-	// Helper to create a v2 manifest
-	createV2Manifest := func(files map[string]string) *plugins.PluginManifest {
-		return &plugins.PluginManifest{
-			ManifestVersion: "2.0.0",
-			Files:           files,
-		}
-	}
-
-	for _, tc := range []struct {
-		name          string
-		plugin        *plugins.Plugin
-		cfg           *config.PluginManagementCfg
-		cdn           *pluginscdn.Service
-		expModuleHash string
-	}{
-		{
-			name: "should return empty string when cfg is nil",
-			plugin: createPluginWithManifest(pluginID, createV2Manifest(map[string]string{
-				"module.js": "5891b5b522d5df086d0ff0b110fbd9d21bb4fc7163af34d08286a2e846f6be03",
-			}), nil),
-			cfg:           nil,
-			cdn:           nil,
-			expModuleHash: "",
-		},
-		{
-			name: "should return empty string when SRI checks are disabled",
-			plugin: createPluginWithManifest(pluginID, createV2Manifest(map[string]string{
-				"module.js": "5891b5b522d5df086d0ff0b110fbd9d21bb4fc7163af34d08286a2e846f6be03",
-			}), nil),
-			cfg:           &config.PluginManagementCfg{Features: config.Features{SriChecksEnabled: false}},
-			cdn:           pluginscdn.ProvideService(&config.PluginManagementCfg{}),
-			expModuleHash: "",
-		},
-		{
-			name: "should return empty string for unsigned plugin",
-			plugin: &plugins.Plugin{
-				JSONData:  plugins.JSONData{ID: pluginID},
-				Signature: plugins.SignatureStatusUnsigned,
-				Manifest:  createV2Manifest(map[string]string{"module.js": "5891b5b522d5df086d0ff0b110fbd9d21bb4fc7163af34d08286a2e846f6be03"}),
-				FS:        plugins.NewLocalFS(filepath.Join("testdata", "module-hash-valid")),
-			},
-			cfg:           &config.PluginManagementCfg{Features: config.Features{SriChecksEnabled: true}},
-			cdn:           pluginscdn.ProvideService(&config.PluginManagementCfg{}),
-			expModuleHash: "",
-		},
-		{
-			name: "should return module hash for valid plugin",
-			plugin: &plugins.Plugin{
-				JSONData:  plugins.JSONData{ID: pluginID},
-				Signature: plugins.SignatureStatusValid,
-				Manifest:  createV2Manifest(map[string]string{"module.js": "5891b5b522d5df086d0ff0b110fbd9d21bb4fc7163af34d08286a2e846f6be03"}),
-				FS:        plugins.NewLocalFS(filepath.Join("testdata", "module-hash-valid")),
-			},
-			cfg: &config.PluginManagementCfg{
-				PluginsCDNURLTemplate: "https://cdn.example.com",
-				Features:              config.Features{SriChecksEnabled: true},
-				PluginSettings: config.PluginSettings{
-					pluginID: {"cdn": "true"},
-				},
-			},
-			cdn: func() *pluginscdn.Service {
-				cfg := &config.PluginManagementCfg{
-					PluginsCDNURLTemplate: "https://cdn.example.com",
-					PluginSettings: config.PluginSettings{
-						pluginID: {"cdn": "true"},
-					},
-				}
-				return pluginscdn.ProvideService(cfg)
-			}(),
-			expModuleHash: "sha256-WJG1tSLV3whtD/CxEPvZ0hu0/HFjrzTQgoai6Eb2vgM=",
-		},
-		{
-			name: "should return empty string when manifest is nil",
-			plugin: &plugins.Plugin{
-				JSONData:  plugins.JSONData{ID: pluginID},
-				Signature: plugins.SignatureStatusValid,
-				Manifest:  nil,
-				FS:        plugins.NewLocalFS(filepath.Join("testdata", "module-hash-valid")),
-			},
-			cfg:           &config.PluginManagementCfg{Features: config.Features{SriChecksEnabled: true}},
-			cdn:           pluginscdn.ProvideService(&config.PluginManagementCfg{}),
-			expModuleHash: "",
-		},
-		{
-			name: "should return empty string for v1 manifest",
-			plugin: &plugins.Plugin{
-				JSONData:  plugins.JSONData{ID: pluginID},
-				Signature: plugins.SignatureStatusValid,
-				Manifest: &plugins.PluginManifest{
-					ManifestVersion: "1.0.0",
-					Files:           map[string]string{"module.js": "5891b5b522d5df086d0ff0b110fbd9d21bb4fc7163af34d08286a2e846f6be03"},
-				},
-				FS: plugins.NewLocalFS(filepath.Join("testdata", "module-hash-valid")),
-			},
-			cfg:           &config.PluginManagementCfg{Features: config.Features{SriChecksEnabled: true}},
-			cdn:           pluginscdn.ProvideService(&config.PluginManagementCfg{}),
-			expModuleHash: "",
-		},
-		{
-			name: "should return empty string when module.js is not in manifest",
-			plugin: &plugins.Plugin{
-				JSONData:  plugins.JSONData{ID: pluginID},
-				Signature: plugins.SignatureStatusValid,
-				Manifest:  createV2Manifest(map[string]string{"plugin.json": "129fab4e0584d18c778ebdfa5fe1a68edf2e5c5aeb8290b2c68182c857cb59f8"}),
-				FS:        plugins.NewLocalFS(filepath.Join("testdata", "module-hash-valid")),
-			},
-			cfg:           &config.PluginManagementCfg{Features: config.Features{SriChecksEnabled: true}},
-			cdn:           pluginscdn.ProvideService(&config.PluginManagementCfg{}),
-			expModuleHash: "",
-		},
-		{
-			name: "missing module.js entry from MANIFEST.txt should not return module hash",
-			plugin: &plugins.Plugin{
-				JSONData:  plugins.JSONData{ID: pluginID},
-				Signature: plugins.SignatureStatusValid,
-				Manifest:  createV2Manifest(map[string]string{"plugin.json": "129fab4e0584d18c778ebdfa5fe1a68edf2e5c5aeb8290b2c68182c857cb59f8"}),
-				FS:        plugins.NewLocalFS(filepath.Join("testdata", "module-hash-no-module-js")),
-			},
-			cfg:           &config.PluginManagementCfg{Features: config.Features{SriChecksEnabled: true}},
-			cdn:           pluginscdn.ProvideService(&config.PluginManagementCfg{}),
-			expModuleHash: "",
-		},
-		{
-			name: "signed status but missing MANIFEST.txt should not return module hash",
-			plugin: &plugins.Plugin{
-				JSONData:  plugins.JSONData{ID: pluginID},
-				Signature: plugins.SignatureStatusValid,
-				Manifest:  nil,
-				FS:        plugins.NewLocalFS(filepath.Join("testdata", "module-hash-no-manifest-txt")),
-			},
-			cfg:           &config.PluginManagementCfg{Features: config.Features{SriChecksEnabled: true}},
-			cdn:           pluginscdn.ProvideService(&config.PluginManagementCfg{}),
-			expModuleHash: "",
-		},
-		{
-			// parentPluginID           (/)
-			// └── pluginID             (/datasource)
-			name: "nested plugin should return module hash from parent MANIFEST.txt",
-			plugin: func() *plugins.Plugin {
-				parent := &plugins.Plugin{
-					JSONData:  plugins.JSONData{ID: parentPluginID},
-					Signature: plugins.SignatureStatusValid,
-					Manifest: createV2Manifest(map[string]string{
-						"module.js":            "266c19bc148b22ddef2a288fc5f8f40855bda22ccf60be53340b4931e469ae2a",
-						"datasource/module.js": "04d70db091d96c4775fb32ba5a8f84cc22893eb43afdb649726661d4425c6711",
-					}),
-					FS: plugins.NewLocalFS(filepath.Join("testdata", "module-hash-valid-nested")),
-				}
-				return &plugins.Plugin{
-					JSONData:  plugins.JSONData{ID: pluginID},
-					Signature: plugins.SignatureStatusValid,
-					Parent:    parent,
-					FS:        plugins.NewLocalFS(filepath.Join("testdata", "module-hash-valid-nested", "datasource")),
-				}
-			}(),
-			cfg: &config.PluginManagementCfg{
-				PluginsCDNURLTemplate: "https://cdn.example.com",
-				Features:              config.Features{SriChecksEnabled: true},
-				PluginSettings: config.PluginSettings{
-					pluginID:       {"cdn": "true"},
-					parentPluginID: {"cdn": "true"},
-				},
-			},
-			cdn: func() *pluginscdn.Service {
-				cfg := &config.PluginManagementCfg{
-					PluginsCDNURLTemplate: "https://cdn.example.com",
-					PluginSettings: config.PluginSettings{
-						pluginID:       {"cdn": "true"},
-						parentPluginID: {"cdn": "true"},
-					},
-				}
-				return pluginscdn.ProvideService(cfg)
-			}(),
-			expModuleHash: "sha256-BNcNsJHZbEd1+zK6Wo+EzCKJPrQ6/bZJcmZh1EJcZxE=",
-		},
-		{
-			// parentPluginID           (/)
-			// └── pluginID             (/panels/one)
-			name: "nested plugin deeper than one subfolder should return module hash from parent MANIFEST.txt",
-			plugin: func() *plugins.Plugin {
-				parent := &plugins.Plugin{
-					JSONData:  plugins.JSONData{ID: parentPluginID},
-					Signature: plugins.SignatureStatusValid,
-					Manifest: createV2Manifest(map[string]string{
-						"module.js":            "266c19bc148b22ddef2a288fc5f8f40855bda22ccf60be53340b4931e469ae2a",
-						"panels/one/module.js": "cbd1ac2284645a0e1e9a8722a729f5bcdd2b831222728709c6360beecdd6143f",
-						"datasource/module.js": "04d70db091d96c4775fb32ba5a8f84cc22893eb43afdb649726661d4425c6711",
-					}),
-					FS: plugins.NewLocalFS(filepath.Join("testdata", "module-hash-valid-nested")),
-				}
-				return &plugins.Plugin{
-					JSONData:  plugins.JSONData{ID: pluginID},
-					Signature: plugins.SignatureStatusValid,
-					Parent:    parent,
-					FS:        plugins.NewLocalFS(filepath.Join("testdata", "module-hash-valid-nested", "panels", "one")),
-				}
-			}(),
-			cfg: &config.PluginManagementCfg{
-				PluginsCDNURLTemplate: "https://cdn.example.com",
-				Features:              config.Features{SriChecksEnabled: true},
-				PluginSettings: config.PluginSettings{
-					pluginID:       {"cdn": "true"},
-					parentPluginID: {"cdn": "true"},
-				},
-			},
-			cdn: func() *pluginscdn.Service {
-				cfg := &config.PluginManagementCfg{
-					PluginsCDNURLTemplate: "https://cdn.example.com",
-					PluginSettings: config.PluginSettings{
-						pluginID:       {"cdn": "true"},
-						parentPluginID: {"cdn": "true"},
-					},
-				}
-				return pluginscdn.ProvideService(cfg)
-			}(),
-			expModuleHash: "sha256-y9GsIoRkWg4emocipyn1vN0rgxIicocJxjYL7s3WFD8=",
-		},
-		{
-			// grand-parent-app         (/)
-			// ├── parent-datasource    (/datasource)
-			// │   └── child-panel      (/datasource/panels/one)
-			name: "nested plugin of a nested plugin should return module hash from grandparent MANIFEST.txt",
-			plugin: func() *plugins.Plugin {
-				grandparent := &plugins.Plugin{
-					JSONData:  plugins.JSONData{ID: "grand-parent-app"},
-					Signature: plugins.SignatureStatusValid,
-					Manifest: createV2Manifest(map[string]string{
-						"module.js":                       "266c19bc148b22ddef2a288fc5f8f40855bda22ccf60be53340b4931e469ae2a",
-						"datasource/module.js":            "04d70db091d96c4775fb32ba5a8f84cc22893eb43afdb649726661d4425c6711",
-						"datasource/panels/one/module.js": "cbd1ac2284645a0e1e9a8722a729f5bcdd2b831222728709c6360beecdd6143f",
-					}),
-					FS: plugins.NewLocalFS(filepath.Join("testdata", "module-hash-valid-deeply-nested")),
-				}
-				parent := &plugins.Plugin{
-					JSONData:  plugins.JSONData{ID: "parent-datasource"},
-					Signature: plugins.SignatureStatusValid,
-					Parent:    grandparent,
-					FS:        plugins.NewLocalFS(filepath.Join("testdata", "module-hash-valid-deeply-nested", "datasource")),
-				}
-				return &plugins.Plugin{
-					JSONData:  plugins.JSONData{ID: "child-panel"},
-					Signature: plugins.SignatureStatusValid,
-					Parent:    parent,
-					FS:        plugins.NewLocalFS(filepath.Join("testdata", "module-hash-valid-deeply-nested", "datasource", "panels", "one")),
-				}
-			}(),
-			cfg: &config.PluginManagementCfg{
-				PluginsCDNURLTemplate: "https://cdn.example.com",
-				Features:              config.Features{SriChecksEnabled: true},
-				PluginSettings: config.PluginSettings{
-					"child-panel":       {"cdn": "true"},
-					"parent-datasource": {"cdn": "true"},
-					"grand-parent-app":  {"cdn": "true"},
-				},
-			},
-			cdn: func() *pluginscdn.Service {
-				cfg := &config.PluginManagementCfg{
-					PluginsCDNURLTemplate: "https://cdn.example.com",
-					PluginSettings: config.PluginSettings{
-						"child-panel":       {"cdn": "true"},
-						"parent-datasource": {"cdn": "true"},
-						"grand-parent-app":  {"cdn": "true"},
-					},
-				}
-				return pluginscdn.ProvideService(cfg)
-			}(),
-			expModuleHash: "sha256-y9GsIoRkWg4emocipyn1vN0rgxIicocJxjYL7s3WFD8=",
-		},
-		{
-			name: "nested plugin should not return module hash when parent manifest is nil",
-			plugin: func() *plugins.Plugin {
-				parent := &plugins.Plugin{
-					JSONData:  plugins.JSONData{ID: parentPluginID},
-					Signature: plugins.SignatureStatusValid,
-					Manifest:  nil, // Parent has no manifest
-					FS:        plugins.NewLocalFS(filepath.Join("testdata", "module-hash-valid-nested")),
-				}
-				return &plugins.Plugin{
-					JSONData:  plugins.JSONData{ID: pluginID},
-					Signature: plugins.SignatureStatusValid,
-					Parent:    parent,
-					FS:        plugins.NewLocalFS(filepath.Join("testdata", "module-hash-valid-nested", "panels", "one")),
-				}
-			}(),
-			cfg:           &config.PluginManagementCfg{Features: config.Features{SriChecksEnabled: true}},
-			cdn:           pluginscdn.ProvideService(&config.PluginManagementCfg{}),
-			expModuleHash: "",
-		},
-	} {
-		t.Run(tc.name, func(t *testing.T) {
-			result := CalculateModuleHash(tc.plugin, tc.cfg, tc.cdn)
-			require.Equal(t, tc.expModuleHash, result)
-		})
-	}
-}

pkg/plugins/plugins.go

@@ -40,7 +40,6 @@ type Plugin struct {
 	Pinned          bool
 
 	// Signature fields
-	Manifest      *PluginManifest
 	Signature     SignatureStatus
 	SignatureType SignatureType
 	SignatureOrg  string
@@ -49,10 +48,8 @@ type Plugin struct {
 	Error         *Error
 
 	// SystemJS fields
-	Module          string
-	ModuleHash      string
-	LoadingStrategy LoadingStrategy
-	BaseURL         string
+	Module  string
+	BaseURL string
 
 	Angular AngularMeta
 
@@ -535,24 +532,3 @@ func (pt Type) IsValid() bool {
 	}
 	return false
 }
-
-// PluginManifest holds details for the file manifest
-type PluginManifest struct {
-	Plugin  string            `json:"plugin"`
-	Version string            `json:"version"`
-	KeyID   string            `json:"keyId"`
-	Time    int64             `json:"time"`
-	Files   map[string]string `json:"files"`
-
-	// V2 supported fields
-	ManifestVersion string        `json:"manifestVersion"`
-	SignatureType   SignatureType `json:"signatureType"`
-	SignedByOrg     string        `json:"signedByOrg"`
-	SignedByOrgName string        `json:"signedByOrgName"`
-	RootURLs        []string      `json:"rootUrls"`
-}
-
-// IsV2 returns true if the manifest is version 2.x
-func (m *PluginManifest) IsV2() bool {
-	return strings.HasPrefix(m.ManifestVersion, "2.")
-}

pkg/registry/apps/plugins/register.go

@@ -14,6 +14,7 @@ import (
 	"github.com/grafana/grafana/pkg/services/apiserver/appinstaller"
 	grafanaauthorizer "github.com/grafana/grafana/pkg/services/apiserver/auth/authorizer"
 	"github.com/grafana/grafana/pkg/services/featuremgmt"
+	"github.com/grafana/grafana/pkg/services/pluginsintegration/pluginassets"
 	"github.com/grafana/grafana/pkg/services/pluginsintegration/pluginstore"
 )
 
@@ -34,6 +35,7 @@ func ProvideAppInstaller(
 	cfgProvider configprovider.ConfigProvider,
 	restConfigProvider apiserver.RestConfigProvider,
 	pluginStore pluginstore.Store,
+	pluginAssetsService *pluginassets.Service,
 	accessControlService accesscontrol.Service, accessClient authlib.AccessClient,
 	features featuremgmt.FeatureToggles,
 ) (*AppInstaller, error) {
@@ -44,7 +46,7 @@ func ProvideAppInstaller(
 		}
 	}
 
-	localProvider := meta.NewLocalProvider(pluginStore)
+	localProvider := meta.NewLocalProvider(pluginStore, pluginAssetsService)
 	metaProviderManager := meta.NewProviderManager(localProvider)
 	authorizer := grafanaauthorizer.NewResourceAuthorizer(accessClient)
 	i, err := pluginsapp.ProvideAppInstaller(authorizer, metaProviderManager)

pkg/server/wire_gen.go

@@ -187,6 +187,7 @@ import (
 	"github.com/grafana/grafana/pkg/services/pluginsintegration/managedplugins"
 	"github.com/grafana/grafana/pkg/services/pluginsintegration/pipeline"
 	"github.com/grafana/grafana/pkg/services/pluginsintegration/pluginaccesscontrol"
+	pluginassets2 "github.com/grafana/grafana/pkg/services/pluginsintegration/pluginassets"
 	"github.com/grafana/grafana/pkg/services/pluginsintegration/pluginchecker"
 	"github.com/grafana/grafana/pkg/services/pluginsintegration/pluginconfig"
 	"github.com/grafana/grafana/pkg/services/pluginsintegration/plugincontext"
@@ -375,8 +376,7 @@ func Initialize(ctx context.Context, cfg *setting.Cfg, opts Options, apiOpts api
 	keyretrieverService := keyretriever.ProvideService(keyRetriever)
 	signatureSignature := signature.ProvideService(pluginManagementCfg, keyretrieverService)
 	localProvider := pluginassets.NewLocalProvider()
-	pluginscdnService := pluginscdn.ProvideService(pluginManagementCfg)
-	bootstrap := pipeline.ProvideBootstrapStage(pluginManagementCfg, signatureSignature, localProvider, pluginscdnService)
+	bootstrap := pipeline.ProvideBootstrapStage(pluginManagementCfg, signatureSignature, localProvider)
 	unsignedPluginAuthorizer := signature.ProvideOSSAuthorizer(pluginManagementCfg)
 	validation := signature.ProvideValidatorService(unsignedPluginAuthorizer)
 	angularpatternsstoreService := angularpatternsstore.ProvideService(kvStore)
@@ -714,6 +714,8 @@ func Initialize(ctx context.Context, cfg *setting.Cfg, opts Options, apiOpts api
 	if err != nil {
 		return nil, err
 	}
+	pluginscdnService := pluginscdn.ProvideService(pluginManagementCfg)
+	pluginassetsService := pluginassets2.ProvideService(pluginManagementCfg, pluginscdnService, signatureSignature, pluginstoreService)
 	avatarCacheServer := avatar.ProvideAvatarCacheServer(cfg)
 	prefService := prefimpl.ProvideService(sqlStore, cfg)
 	dashboardPermissionsService, err := ossaccesscontrol.ProvideDashboardPermissions(cfg, featureToggles, routeRegisterImpl, sqlStore, accessControl, ossLicensingService, dashboardService, folderimplService, acimplService, teamService, userService, actionSetService, dashboardServiceImpl, eventualRestConfigProvider)
@@ -751,7 +753,7 @@ func Initialize(ctx context.Context, cfg *setting.Cfg, opts Options, apiOpts api
 	}
 	idimplService := idimpl.ProvideService(cfg, localSigner, remoteCache, authnService, registerer, tracer)
 	verifier := userimpl.ProvideVerifier(cfg, userService, tempuserService, notificationService, idimplService)
-	httpServer, err := api.ProvideHTTPServer(apiOpts, cfg, routeRegisterImpl, inProcBus, renderingService, ossLicensingService, hooksService, cacheService, sqlStore, ossDataSourceRequestValidator, pluginstoreService, service14, pluginstoreService, middlewareHandler, pluginerrsStore, pluginInstaller, ossImpl, cacheServiceImpl, userAuthTokenService, cleanUpService, shortURLService, queryHistoryService, correlationsService, remoteCache, provisioningServiceImpl, accessControl, dataSourceProxyService, searchSearchService, grafanaLive, gateway, plugincontextProvider, contexthandlerContextHandler, logger, featureToggles, alertNG, libraryPanelService, libraryElementService, quotaService, socialService, tracingService, serviceService, grafanaService, pluginsService, ossService, service15, queryServiceImpl, filestoreService, serviceAccountsProxy, authinfoimplService, storageService, notificationService, dashboardService, dashboardProvisioningService, folderimplService, ossProvider, serviceImpl, service13, avatarCacheServer, prefService, folderPermissionsService, dashboardPermissionsService, dashverService, starService, csrfCSRF, managedpluginsNoop, playlistService, apikeyService, kvStore, secretsMigrator, secretsService, secretMigrationProviderImpl, secretsKVStore, apiApi, userService, tempuserService, loginattemptimplService, orgService, deletionService, teamService, acimplService, navtreeService, repositoryImpl, tagimplService, searchHTTPService, oauthtokenService, statsService, authnService, pluginscdnService, gatherer, apiAPI, registerer, eventualRestConfigProvider, anonDeviceService, verifier, preinstallImpl)
+	httpServer, err := api.ProvideHTTPServer(apiOpts, cfg, routeRegisterImpl, inProcBus, renderingService, ossLicensingService, hooksService, cacheService, sqlStore, ossDataSourceRequestValidator, pluginstoreService, service14, pluginstoreService, middlewareHandler, pluginerrsStore, pluginInstaller, ossImpl, cacheServiceImpl, userAuthTokenService, cleanUpService, shortURLService, queryHistoryService, correlationsService, remoteCache, provisioningServiceImpl, accessControl, dataSourceProxyService, searchSearchService, grafanaLive, gateway, plugincontextProvider, contexthandlerContextHandler, logger, featureToggles, alertNG, libraryPanelService, libraryElementService, quotaService, socialService, tracingService, serviceService, grafanaService, pluginsService, ossService, service15, queryServiceImpl, filestoreService, serviceAccountsProxy, pluginassetsService, authinfoimplService, storageService, notificationService, dashboardService, dashboardProvisioningService, folderimplService, ossProvider, serviceImpl, service13, avatarCacheServer, prefService, folderPermissionsService, dashboardPermissionsService, dashverService, starService, csrfCSRF, managedpluginsNoop, playlistService, apikeyService, kvStore, secretsMigrator, secretsService, secretMigrationProviderImpl, secretsKVStore, apiApi, userService, tempuserService, loginattemptimplService, orgService, deletionService, teamService, acimplService, navtreeService, repositoryImpl, tagimplService, searchHTTPService, oauthtokenService, statsService, authnService, pluginscdnService, gatherer, apiAPI, registerer, eventualRestConfigProvider, anonDeviceService, verifier, preinstallImpl)
 	if err != nil {
 		return nil, err
 	}
@@ -784,7 +786,7 @@ func Initialize(ctx context.Context, cfg *setting.Cfg, opts Options, apiOpts api
 	if err != nil {
 		return nil, err
 	}
-	appInstaller, err := plugins.ProvideAppInstaller(configProvider, eventualRestConfigProvider, pluginstoreService, acimplService, accessClient, featureToggles)
+	appInstaller, err := plugins.ProvideAppInstaller(configProvider, eventualRestConfigProvider, pluginstoreService, pluginassetsService, acimplService, accessClient, featureToggles)
 	if err != nil {
 		return nil, err
 	}
@@ -1040,8 +1042,7 @@ func InitializeForTest(ctx context.Context, t sqlutil.ITestDB, testingT interfac
 	keyretrieverService := keyretriever.ProvideService(keyRetriever)
 	signatureSignature := signature.ProvideService(pluginManagementCfg, keyretrieverService)
 	localProvider := pluginassets.NewLocalProvider()
-	pluginscdnService := pluginscdn.ProvideService(pluginManagementCfg)
-	bootstrap := pipeline.ProvideBootstrapStage(pluginManagementCfg, signatureSignature, localProvider, pluginscdnService)
+	bootstrap := pipeline.ProvideBootstrapStage(pluginManagementCfg, signatureSignature, localProvider)
 	unsignedPluginAuthorizer := signature.ProvideOSSAuthorizer(pluginManagementCfg)
 	validation := signature.ProvideValidatorService(unsignedPluginAuthorizer)
 	angularpatternsstoreService := angularpatternsstore.ProvideService(kvStore)
@@ -1381,6 +1382,8 @@ func InitializeForTest(ctx context.Context, t sqlutil.ITestDB, testingT interfac
 	if err != nil {
 		return nil, err
 	}
+	pluginscdnService := pluginscdn.ProvideService(pluginManagementCfg)
+	pluginassetsService := pluginassets2.ProvideService(pluginManagementCfg, pluginscdnService, signatureSignature, pluginstoreService)
 	avatarCacheServer := avatar.ProvideAvatarCacheServer(cfg)
 	prefService := prefimpl.ProvideService(sqlStore, cfg)
 	dashboardPermissionsService, err := ossaccesscontrol.ProvideDashboardPermissions(cfg, featureToggles, routeRegisterImpl, sqlStore, accessControl, ossLicensingService, dashboardService, folderimplService, acimplService, teamService, userService, actionSetService, dashboardServiceImpl, eventualRestConfigProvider)
@@ -1418,7 +1421,7 @@ func InitializeForTest(ctx context.Context, t sqlutil.ITestDB, testingT interfac
 	}
 	idimplService := idimpl.ProvideService(cfg, localSigner, remoteCache, authnService, registerer, tracer)
 	verifier := userimpl.ProvideVerifier(cfg, userService, tempuserService, notificationServiceMock, idimplService)
-	httpServer, err := api.ProvideHTTPServer(apiOpts, cfg, routeRegisterImpl, inProcBus, renderingService, ossLicensingService, hooksService, cacheService, sqlStore, ossDataSourceRequestValidator, pluginstoreService, service14, pluginstoreService, middlewareHandler, pluginerrsStore, pluginInstaller, ossImpl, cacheServiceImpl, userAuthTokenService, cleanUpService, shortURLService, queryHistoryService, correlationsService, remoteCache, provisioningServiceImpl, accessControl, dataSourceProxyService, searchSearchService, grafanaLive, gateway, plugincontextProvider, contexthandlerContextHandler, logger, featureToggles, alertNG, libraryPanelService, libraryElementService, quotaService, socialService, tracingService, serviceService, grafanaService, pluginsService, ossService, service15, queryServiceImpl, filestoreService, serviceAccountsProxy, authinfoimplService, storageService, notificationServiceMock, dashboardService, dashboardProvisioningService, folderimplService, ossProvider, serviceImpl, service13, avatarCacheServer, prefService, folderPermissionsService, dashboardPermissionsService, dashverService, starService, csrfCSRF, managedpluginsNoop, playlistService, apikeyService, kvStore, secretsMigrator, secretsService, secretMigrationProviderImpl, secretsKVStore, apiApi, userService, tempuserService, loginattemptimplService, orgService, deletionService, teamService, acimplService, navtreeService, repositoryImpl, tagimplService, searchHTTPService, oauthtokentestService, statsService, authnService, pluginscdnService, gatherer, apiAPI, registerer, eventualRestConfigProvider, anonDeviceService, verifier, preinstallImpl)
+	httpServer, err := api.ProvideHTTPServer(apiOpts, cfg, routeRegisterImpl, inProcBus, renderingService, ossLicensingService, hooksService, cacheService, sqlStore, ossDataSourceRequestValidator, pluginstoreService, service14, pluginstoreService, middlewareHandler, pluginerrsStore, pluginInstaller, ossImpl, cacheServiceImpl, userAuthTokenService, cleanUpService, shortURLService, queryHistoryService, correlationsService, remoteCache, provisioningServiceImpl, accessControl, dataSourceProxyService, searchSearchService, grafanaLive, gateway, plugincontextProvider, contexthandlerContextHandler, logger, featureToggles, alertNG, libraryPanelService, libraryElementService, quotaService, socialService, tracingService, serviceService, grafanaService, pluginsService, ossService, service15, queryServiceImpl, filestoreService, serviceAccountsProxy, pluginassetsService, authinfoimplService, storageService, notificationServiceMock, dashboardService, dashboardProvisioningService, folderimplService, ossProvider, serviceImpl, service13, avatarCacheServer, prefService, folderPermissionsService, dashboardPermissionsService, dashverService, starService, csrfCSRF, managedpluginsNoop, playlistService, apikeyService, kvStore, secretsMigrator, secretsService, secretMigrationProviderImpl, secretsKVStore, apiApi, userService, tempuserService, loginattemptimplService, orgService, deletionService, teamService, acimplService, navtreeService, repositoryImpl, tagimplService, searchHTTPService, oauthtokentestService, statsService, authnService, pluginscdnService, gatherer, apiAPI, registerer, eventualRestConfigProvider, anonDeviceService, verifier, preinstallImpl)
 	if err != nil {
 		return nil, err
 	}
@@ -1451,7 +1454,7 @@ func InitializeForTest(ctx context.Context, t sqlutil.ITestDB, testingT interfac
 	if err != nil {
 		return nil, err
 	}
-	appInstaller, err := plugins.ProvideAppInstaller(configProvider, eventualRestConfigProvider, pluginstoreService, acimplService, accessClient, featureToggles)
+	appInstaller, err := plugins.ProvideAppInstaller(configProvider, eventualRestConfigProvider, pluginstoreService, pluginassetsService, acimplService, accessClient, featureToggles)
 	if err != nil {
 		return nil, err
 	}

pkg/services/featuremgmt/registry.go

@@ -49,7 +49,7 @@ var (
 			Name:        "lokiExperimentalStreaming",
 			Description: "Support new streaming approach for loki (prototype, needs special loki build)",
 			Stage:       FeatureStageExperimental,
-			Owner:       grafanaObservabilityLogsSquad,
+			Owner:       grafanaOSSBigTent,
 		},
 		{
 			Name:        "featureHighlights",
@@ -177,7 +177,7 @@ var (
 			Name:        "lokiLogsDataplane",
 			Description: "Changes logs responses from Loki to be compliant with the dataplane specification.",
 			Stage:       FeatureStageExperimental,
-			Owner:       grafanaObservabilityLogsSquad,
+			Owner:       grafanaOSSBigTent,
 		},
 		{
 			Name:        "disableSSEDataplane",
@@ -340,7 +340,7 @@ var (
 			Description:  "Enables running Loki queries in parallel",
 			Stage:        FeatureStagePrivatePreview,
 			FrontendOnly: false,
-			Owner:        grafanaObservabilityLogsSquad,
+			Owner:        grafanaOSSBigTent,
 		},
 		{
 			Name:        "externalServiceAccounts",
@@ -745,7 +745,7 @@ var (
 			Name:         "logQLScope",
 			Description:  "In-development feature that will allow injection of labels into loki queries.",
 			Stage:        FeatureStagePrivatePreview,
-			Owner:        grafanaObservabilityLogsSquad,
+			Owner:        grafanaOSSBigTent,
 			Expression:   "false",
 			HideFromDocs: true,
 		},
@@ -1260,7 +1260,7 @@ var (
 			Name:        "lokiLabelNamesQueryApi",
 			Description: "Defaults to using the Loki `/labels` API instead of `/series`",
 			Stage:       FeatureStageGeneralAvailability,
-			Owner:       grafanaObservabilityLogsSquad,
+			Owner:       grafanaOSSBigTent,
 			Expression:  "true",
 		},
 		{
@@ -1625,6 +1625,15 @@ var (
 			FrontendOnly: true,
 			Expression:   "false",
 		},
+		{
+			Name:         "experimentRecentlyViewedDashboards",
+			Description:  "A/A test for recently viewed dashboards feature",
+			Stage:        FeatureStageExperimental,
+			Owner:        grafanaFrontendSearchNavOrganise,
+			FrontendOnly: true,
+			HideFromDocs: true,
+			Expression:   "false",
+		},
 		{
 			Name:         "alertEnrichment",
 			Description:  "Enable configuration of alert enrichments in Grafana Cloud.",

pkg/services/featuremgmt/toggles_gen.csv

@@ -3,7 +3,7 @@ disableEnvelopeEncryption,GA,@grafana/grafana-operator-experience-squad,false,fa
 panelTitleSearch,preview,@grafana/search-and-storage,false,false,false
 publicDashboardsEmailSharing,preview,@grafana/grafana-operator-experience-squad,false,false,false
 publicDashboardsScene,GA,@grafana/grafana-operator-experience-squad,false,false,true
-lokiExperimentalStreaming,experimental,@grafana/observability-logs,false,false,false
+lokiExperimentalStreaming,experimental,@grafana/oss-big-tent,false,false,false
 featureHighlights,GA,@grafana/grafana-operator-experience-squad,false,false,false
 storage,experimental,@grafana/search-and-storage,false,false,false
 canvasPanelNesting,experimental,@grafana/dataviz-squad,false,false,true
@@ -22,7 +22,7 @@ starsFromAPIServer,experimental,@grafana/grafana-search-navigate-organise,false,
 kubernetesStars,experimental,@grafana/grafana-app-platform-squad,false,true,false
 influxqlStreamingParser,experimental,@grafana/partner-datasources,false,false,false
 influxdbRunQueriesInParallel,privatePreview,@grafana/partner-datasources,false,false,false
-lokiLogsDataplane,experimental,@grafana/observability-logs,false,false,false
+lokiLogsDataplane,experimental,@grafana/oss-big-tent,false,false,false
 disableSSEDataplane,experimental,@grafana/grafana-datasources-core-services,false,false,false
 renderAuthJWT,preview,@grafana/grafana-operator-experience-squad,false,false,false
 refactorVariablesTimeRange,preview,@grafana/dashboards-squad,false,false,false
@@ -45,7 +45,7 @@ aiGeneratedDashboardChanges,experimental,@grafana/dashboards-squad,false,false,t
 reportingRetries,preview,@grafana/grafana-operator-experience-squad,false,true,false
 reportingCsvEncodingOptions,experimental,@grafana/grafana-operator-experience-squad,false,false,false
 sseGroupByDatasource,experimental,@grafana/grafana-datasources-core-services,false,false,false
-lokiRunQueriesInParallel,privatePreview,@grafana/observability-logs,false,false,false
+lokiRunQueriesInParallel,privatePreview,@grafana/oss-big-tent,false,false,false
 externalServiceAccounts,preview,@grafana/identity-access-team,false,false,false
 enableNativeHTTPHistogram,experimental,@grafana/grafana-backend-services-squad,false,true,false
 disableClassicHTTPHistogram,experimental,@grafana/grafana-backend-services-squad,false,true,false
@@ -102,7 +102,7 @@ alertingSaveStateCompressed,preview,@grafana/alerting-squad,false,false,false
 scopeApi,experimental,@grafana/grafana-app-platform-squad,false,false,false
 useScopeSingleNodeEndpoint,experimental,@grafana/grafana-operator-experience-squad,false,false,true
 useMultipleScopeNodesEndpoint,experimental,@grafana/grafana-operator-experience-squad,false,false,true
-logQLScope,privatePreview,@grafana/observability-logs,false,false,false
+logQLScope,privatePreview,@grafana/oss-big-tent,false,false,false
 sqlExpressions,preview,@grafana/grafana-datasources-core-services,false,false,false
 sqlExpressionsColumnAutoComplete,experimental,@grafana/datapro,false,false,true
 kubernetesAggregator,experimental,@grafana/grafana-app-platform-squad,false,true,false
@@ -173,7 +173,7 @@ alertingAIAnalyzeCentralStateHistory,experimental,@grafana/alerting-squad,false,
 alertingNotificationsStepMode,GA,@grafana/alerting-squad,false,false,true
 unifiedStorageSearchUI,experimental,@grafana/search-and-storage,false,false,false
 elasticsearchCrossClusterSearch,GA,@grafana/partner-datasources,false,false,false
-lokiLabelNamesQueryApi,GA,@grafana/observability-logs,false,false,false
+lokiLabelNamesQueryApi,GA,@grafana/oss-big-tent,false,false,false
 k8SFolderCounts,experimental,@grafana/search-and-storage,false,false,false
 k8SFolderMove,experimental,@grafana/search-and-storage,false,false,false
 improvedExternalSessionHandlingSAML,GA,@grafana/identity-access-team,false,false,false
@@ -223,6 +223,7 @@ kubernetesAuthnMutation,experimental,@grafana/identity-access-team,false,false,f
 kubernetesExternalGroupMapping,experimental,@grafana/identity-access-team,false,false,false
 restoreDashboards,experimental,@grafana/grafana-search-navigate-organise,false,false,false
 recentlyViewedDashboards,experimental,@grafana/grafana-search-navigate-organise,false,false,true
+experimentRecentlyViewedDashboards,experimental,@grafana/grafana-search-navigate-organise,false,false,true
 alertEnrichment,experimental,@grafana/alerting-squad,false,false,false
 alertEnrichmentMultiStep,experimental,@grafana/alerting-squad,false,false,false
 alertEnrichmentConditional,experimental,@grafana/alerting-squad,false,false,false

pkg/services/featuremgmt/toggles_gen.json

@@ -1365,6 +1365,21 @@
         "hideFromDocs": true
       }
     },
+    {
+      "metadata": {
+        "name": "experimentRecentlyViewedDashboards",
+        "resourceVersion": "1768214542023",
+        "creationTimestamp": "2026-01-12T10:42:22Z"
+      },
+      "spec": {
+        "description": "A/A test for recently viewed dashboards feature",
+        "stage": "experimental",
+        "codeowner": "@grafana/grafana-search-navigate-organise",
+        "frontend": true,
+        "hideFromDocs": true,
+        "expression": "false"
+      }
+    },
     {
       "metadata": {
         "name": "exploreLogsAggregatedMetrics",
@@ -2207,13 +2222,16 @@
     {
       "metadata": {
         "name": "logQLScope",
-        "resourceVersion": "1764664939750",
-        "creationTimestamp": "2024-11-11T11:53:24Z"
+        "resourceVersion": "1768317398145",
+        "creationTimestamp": "2024-11-11T11:53:24Z",
+        "annotations": {
+          "grafana.app/updatedTimestamp": "2026-01-13 15:16:38.145488 +0000 UTC"
+        }
       },
       "spec": {
         "description": "In-development feature that will allow injection of labels into loki queries.",
         "stage": "privatePreview",
-        "codeowner": "@grafana/observability-logs",
+        "codeowner": "@grafana/oss-big-tent",
         "hideFromDocs": true,
         "expression": "false"
       }
@@ -2289,38 +2307,47 @@
     {
       "metadata": {
         "name": "lokiExperimentalStreaming",
-        "resourceVersion": "1764664939750",
-        "creationTimestamp": "2023-06-19T10:03:51Z"
+        "resourceVersion": "1768317398145",
+        "creationTimestamp": "2023-06-19T10:03:51Z",
+        "annotations": {
+          "grafana.app/updatedTimestamp": "2026-01-13 15:16:38.145488 +0000 UTC"
+        }
       },
       "spec": {
         "description": "Support new streaming approach for loki (prototype, needs special loki build)",
         "stage": "experimental",
-        "codeowner": "@grafana/observability-logs"
+        "codeowner": "@grafana/oss-big-tent"
       }
     },
     {
       "metadata": {
         "name": "lokiLabelNamesQueryApi",
-        "resourceVersion": "1764664939750",
-        "creationTimestamp": "2024-12-13T14:31:41Z"
+        "resourceVersion": "1768317398145",
+        "creationTimestamp": "2024-12-13T14:31:41Z",
+        "annotations": {
+          "grafana.app/updatedTimestamp": "2026-01-13 15:16:38.145488 +0000 UTC"
+        }
       },
       "spec": {
         "description": "Defaults to using the Loki `/labels` API instead of `/series`",
         "stage": "GA",
-        "codeowner": "@grafana/observability-logs",
+        "codeowner": "@grafana/oss-big-tent",
         "expression": "true"
       }
     },
     {
       "metadata": {
         "name": "lokiLogsDataplane",
-        "resourceVersion": "1764664939750",
-        "creationTimestamp": "2023-07-13T07:58:00Z"
+        "resourceVersion": "1768317398145",
+        "creationTimestamp": "2023-07-13T07:58:00Z",
+        "annotations": {
+          "grafana.app/updatedTimestamp": "2026-01-13 15:16:38.145488 +0000 UTC"
+        }
       },
       "spec": {
         "description": "Changes logs responses from Loki to be compliant with the dataplane specification.",
         "stage": "experimental",
-        "codeowner": "@grafana/observability-logs"
+        "codeowner": "@grafana/oss-big-tent"
       }
     },
     {
@@ -2353,13 +2380,16 @@
     {
       "metadata": {
         "name": "lokiRunQueriesInParallel",
-        "resourceVersion": "1764664939750",
-        "creationTimestamp": "2023-09-19T09:34:01Z"
+        "resourceVersion": "1768317398145",
+        "creationTimestamp": "2023-09-19T09:34:01Z",
+        "annotations": {
+          "grafana.app/updatedTimestamp": "2026-01-13 15:16:38.145488 +0000 UTC"
+        }
       },
       "spec": {
         "description": "Enables running Loki queries in parallel",
         "stage": "privatePreview",
-        "codeowner": "@grafana/observability-logs"
+        "codeowner": "@grafana/oss-big-tent"
       }
     },
     {

pkg/services/pluginsintegration/loader/loader_test.go

@@ -26,7 +26,6 @@ import (
 	"github.com/grafana/grafana/pkg/plugins/manager/sources"
 	"github.com/grafana/grafana/pkg/plugins/pluginassets"
 	"github.com/grafana/grafana/pkg/plugins/pluginerrs"
-	"github.com/grafana/grafana/pkg/plugins/pluginscdn"
 	"github.com/grafana/grafana/pkg/services/org"
 	"github.com/grafana/grafana/pkg/services/pluginsintegration/pipeline"
 	"github.com/grafana/grafana/pkg/services/pluginsintegration/provisionedplugins"
@@ -127,7 +126,6 @@ func TestLoader_Load(t *testing.T) {
 					Signature:       plugins.SignatureStatusInternal,
 					SkipHostEnvVars: true,
 					Translations:    map[string]string{},
-					LoadingStrategy: plugins.LoadingStrategyScript,
 				},
 			},
 		},
@@ -215,33 +213,15 @@ func TestLoader_Load(t *testing.T) {
 							ExtensionPoints:   []plugins.ExtensionPoint{},
 						},
 					},
-					Class:   plugins.ClassExternal,
-					Module:  "public/plugins/test-app/module.js",
-					BaseURL: "public/plugins/test-app",
-					FS:      mustNewStaticFSForTests(t, filepath.Join(testDataDir(t), "includes-symlinks")),
-					Manifest: &plugins.PluginManifest{
-						Plugin:  "test-app",
-						Version: "1.0.0",
-						KeyID:   "7e4d0c6a708866e7",
-						Time:    1622547655175,
-						Files: map[string]string{
-							"dashboards/connections.json":  "bea86da4be970b98dc4681802ab55cdef3441dc3eb3c654cb207948d17b25303",
-							"dashboards/extra/memory.json": "7c042464941084caa91d0a9a2f188b05315a9796308a652ccdee31ca4fbcbfee",
-							"plugin.json":                  "c59a51bf6d7ecd7a99608ccb99353390c8b973672a938a0247164324005c0caf",
-							"symlink_to_txt":               "9f32c171bf78a85d5cb77a48ab44f85578ee2942a1fc9f9ec4fde194ae4ff048",
-							"text.txt":                     "9f32c171bf78a85d5cb77a48ab44f85578ee2942a1fc9f9ec4fde194ae4ff048",
-						},
-						ManifestVersion: "2.0.0",
-						SignatureType:   plugins.SignatureTypeGrafana,
-						SignedByOrg:     "grafana",
-						SignedByOrgName: "Grafana Labs",
-					},
+					Class:           plugins.ClassExternal,
+					Module:          "public/plugins/test-app/module.js",
+					BaseURL:         "public/plugins/test-app",
+					FS:              mustNewStaticFSForTests(t, filepath.Join(testDataDir(t), "includes-symlinks")),
 					Signature:       "valid",
 					SignatureType:   plugins.SignatureTypeGrafana,
 					SignatureOrg:    "Grafana Labs",
 					SkipHostEnvVars: true,
 					Translations:    map[string]string{},
-					LoadingStrategy: plugins.LoadingStrategyScript,
 				},
 			},
 		},
@@ -294,7 +274,6 @@ func TestLoader_Load(t *testing.T) {
 					Signature:       "unsigned",
 					SkipHostEnvVars: true,
 					Translations:    map[string]string{},
-					LoadingStrategy: plugins.LoadingStrategyScript,
 				},
 			},
 		},
@@ -360,7 +339,6 @@ func TestLoader_Load(t *testing.T) {
 					Signature:       plugins.SignatureStatusUnsigned,
 					SkipHostEnvVars: true,
 					Translations:    map[string]string{},
-					LoadingStrategy: plugins.LoadingStrategyScript,
 				},
 			},
 		},
@@ -483,7 +461,6 @@ func TestLoader_Load(t *testing.T) {
 					BaseURL:         "public/plugins/test-app",
 					SkipHostEnvVars: true,
 					Translations:    map[string]string{},
-					LoadingStrategy: plugins.LoadingStrategyScript,
 				},
 			},
 		},
@@ -576,7 +553,6 @@ func TestLoader_Load_ExternalRegistration(t *testing.T) {
 				},
 				SkipHostEnvVars: true,
 				Translations:    map[string]string{},
-				LoadingStrategy: plugins.LoadingStrategyScript,
 			},
 		}
 
@@ -671,30 +647,15 @@ func TestLoader_Load_MultiplePlugins(t *testing.T) {
 							Executable: "test",
 							State:      plugins.ReleaseStateAlpha,
 						},
-						Class:   plugins.ClassExternal,
-						Module:  "public/plugins/test-datasource/module.js",
-						BaseURL: "public/plugins/test-datasource",
-						FS:      mustNewStaticFSForTests(t, filepath.Join(testDataDir(t), "valid-v2-pvt-signature/plugin")),
-						Manifest: &plugins.PluginManifest{
-							Plugin:  "test-datasource",
-							Version: "1.0.0",
-							KeyID:   "7e4d0c6a708866e7",
-							Time:    1661171417046,
-							Files: map[string]string{
-								"plugin.json": "203ef4a613c5693c437a665cd67f95e2756a0f71b336b2ffb265db7c180d0b19",
-							},
-							ManifestVersion: "2.0.0",
-							SignatureType:   plugins.SignatureTypePrivate,
-							SignedByOrg:     "willbrowne",
-							SignedByOrgName: "Will Browne",
-							RootURLs:        []string{"http://localhost:3000/"},
-						},
+						Class:           plugins.ClassExternal,
+						Module:          "public/plugins/test-datasource/module.js",
+						BaseURL:         "public/plugins/test-datasource",
+						FS:              mustNewStaticFSForTests(t, filepath.Join(testDataDir(t), "valid-v2-pvt-signature/plugin")),
 						Signature:       "valid",
 						SignatureType:   plugins.SignatureTypePrivate,
 						SignatureOrg:    "Will Browne",
 						SkipHostEnvVars: true,
 						Translations:    map[string]string{},
-						LoadingStrategy: plugins.LoadingStrategyScript,
 					},
 				},
 				pluginErrors: map[string]*plugins.Error{
@@ -806,22 +767,8 @@ func TestLoader_Load_RBACReady(t *testing.T) {
 						},
 						Backend: false,
 					},
-					FS:    mustNewStaticFSForTests(t, filepath.Join(testDataDir(t), "test-app-with-roles")),
-					Class: plugins.ClassExternal,
-					Manifest: &plugins.PluginManifest{
-						Plugin:  "test-app",
-						Version: "1.0.0",
-						KeyID:   "7e4d0c6a708866e7",
-						Time:    1667484928676,
-						Files: map[string]string{
-							"plugin.json": "3348335ec100392b325f3eeb882a07c729e9cbf0f1ae331239f46840bb1a01eb",
-						},
-						ManifestVersion: "2.0.0",
-						SignatureType:   plugins.SignatureTypePrivate,
-						SignedByOrg:     "gabrielmabille",
-						SignedByOrgName: "gabrielmabille",
-						RootURLs:        []string{"http://localhost:3000/"},
-					},
+					FS:              mustNewStaticFSForTests(t, filepath.Join(testDataDir(t), "test-app-with-roles")),
+					Class:           plugins.ClassExternal,
 					Signature:       plugins.SignatureStatusValid,
 					SignatureType:   plugins.SignatureTypePrivate,
 					SignatureOrg:    "gabrielmabille",
@@ -829,7 +776,6 @@ func TestLoader_Load_RBACReady(t *testing.T) {
 					BaseURL:         "public/plugins/test-app",
 					SkipHostEnvVars: true,
 					Translations:    map[string]string{},
-					LoadingStrategy: plugins.LoadingStrategyScript,
 				},
 			},
 		},
@@ -891,22 +837,8 @@ func TestLoader_Load_Signature_RootURL(t *testing.T) {
 					Backend:    true,
 					Executable: "test",
 				},
-				FS:    mustNewStaticFSForTests(t, filepath.Join(testDataDir(t), "valid-v2-pvt-signature-root-url-uri/plugin")),
-				Class: plugins.ClassExternal,
-				Manifest: &plugins.PluginManifest{
-					Plugin:  "test-datasource",
-					Version: "1.0.0",
-					KeyID:   "7e4d0c6a708866e7",
-					Time:    1661171981629,
-					Files: map[string]string{
-						"plugin.json": "203ef4a613c5693c437a665cd67f95e2756a0f71b336b2ffb265db7c180d0b19",
-					},
-					ManifestVersion: "2.0.0",
-					SignatureType:   plugins.SignatureTypePrivate,
-					SignedByOrg:     "willbrowne",
-					SignedByOrgName: "Will Browne",
-					RootURLs:        []string{"http://localhost:3000/grafana"},
-				},
+				FS:              mustNewStaticFSForTests(t, filepath.Join(testDataDir(t), "valid-v2-pvt-signature-root-url-uri/plugin")),
+				Class:           plugins.ClassExternal,
 				Signature:       plugins.SignatureStatusValid,
 				SignatureType:   plugins.SignatureTypePrivate,
 				SignatureOrg:    "Will Browne",
@@ -914,7 +846,6 @@ func TestLoader_Load_Signature_RootURL(t *testing.T) {
 				Module:          "public/plugins/test-datasource/module.js",
 				BaseURL:         "public/plugins/test-datasource",
 				Translations:    map[string]string{},
-				LoadingStrategy: plugins.LoadingStrategyScript,
 			},
 		}
 
@@ -994,24 +925,8 @@ func TestLoader_Load_DuplicatePlugins(t *testing.T) {
 					},
 					Backend: false,
 				},
-				FS:    mustNewStaticFSForTests(t, filepath.Join(testDataDir(t), "test-app")),
-				Class: plugins.ClassExternal,
-				Manifest: &plugins.PluginManifest{
-					Plugin:  "test-app",
-					Version: "1.0.0",
-					KeyID:   "7e4d0c6a708866e7",
-					Time:    1621356785895,
-					Files: map[string]string{
-						"plugin.json":                        "c59a51bf6d7ecd7a99608ccb99353390c8b973672a938a0247164324005c0caf",
-						"dashboards/connections.json":        "bea86da4be970b98dc4681802ab55cdef3441dc3eb3c654cb207948d17b25303",
-						"dashboards/memory.json":             "7c042464941084caa91d0a9a2f188b05315a9796308a652ccdee31ca4fbcbfee",
-						"dashboards/connections_result.json": "124d85c9c2e40214b83273f764574937a79909cfac3f925276fbb72543c224dc",
-					},
-					ManifestVersion: "2.0.0",
-					SignatureType:   plugins.SignatureTypeGrafana,
-					SignedByOrg:     "grafana",
-					SignedByOrgName: "Grafana Labs",
-				},
+				FS:              mustNewStaticFSForTests(t, filepath.Join(testDataDir(t), "test-app")),
+				Class:           plugins.ClassExternal,
 				Signature:       plugins.SignatureStatusValid,
 				SignatureType:   plugins.SignatureTypeGrafana,
 				SignatureOrg:    "Grafana Labs",
@@ -1019,7 +934,6 @@ func TestLoader_Load_DuplicatePlugins(t *testing.T) {
 				BaseURL:         "public/plugins/test-app",
 				SkipHostEnvVars: true,
 				Translations:    map[string]string{},
-				LoadingStrategy: plugins.LoadingStrategyScript,
 			},
 		}
 
@@ -1103,24 +1017,8 @@ func TestLoader_Load_SkipUninitializedPlugins(t *testing.T) {
 					},
 					Backend: false,
 				},
-				FS:    mustNewStaticFSForTests(t, pluginDir1),
-				Class: plugins.ClassExternal,
-				Manifest: &plugins.PluginManifest{
-					Plugin:  "test-app",
-					Version: "1.0.0",
-					KeyID:   "7e4d0c6a708866e7",
-					Time:    1621356785895,
-					Files: map[string]string{
-						"plugin.json":                        "c59a51bf6d7ecd7a99608ccb99353390c8b973672a938a0247164324005c0caf",
-						"dashboards/connections.json":        "bea86da4be970b98dc4681802ab55cdef3441dc3eb3c654cb207948d17b25303",
-						"dashboards/memory.json":             "7c042464941084caa91d0a9a2f188b05315a9796308a652ccdee31ca4fbcbfee",
-						"dashboards/connections_result.json": "124d85c9c2e40214b83273f764574937a79909cfac3f925276fbb72543c224dc",
-					},
-					ManifestVersion: "2.0.0",
-					SignatureType:   plugins.SignatureTypeGrafana,
-					SignedByOrg:     "grafana",
-					SignedByOrgName: "Grafana Labs",
-				},
+				FS:              mustNewStaticFSForTests(t, pluginDir1),
+				Class:           plugins.ClassExternal,
 				Signature:       plugins.SignatureStatusValid,
 				SignatureType:   plugins.SignatureTypeGrafana,
 				SignatureOrg:    "Grafana Labs",
@@ -1128,7 +1026,6 @@ func TestLoader_Load_SkipUninitializedPlugins(t *testing.T) {
 				BaseURL:         "public/plugins/test-app",
 				SkipHostEnvVars: true,
 				Translations:    map[string]string{},
-				LoadingStrategy: plugins.LoadingStrategyScript,
 			},
 		}
 
@@ -1283,30 +1180,15 @@ func TestLoader_Load_NestedPlugins(t *testing.T) {
 			},
 			Backend: true,
 		},
-		Module:  "public/plugins/test-datasource/module.js",
-		BaseURL: "public/plugins/test-datasource",
-		FS:      mustNewStaticFSForTests(t, filepath.Join(testDataDir(t), "nested-plugins/parent")),
-		Manifest: &plugins.PluginManifest{
-			Plugin:  "test-datasource",
-			Version: "1.0.0",
-			KeyID:   "7e4d0c6a708866e7",
-			Time:    1661172777367,
-			Files: map[string]string{
-				"plugin.json":        "a029469ace740e9502bfb0d40924d1cccae73d0b18adcd8f1ceb7f17bf36beb8",
-				"nested/plugin.json": "e64abd35cd211e0e4682974ad5cdd1be7a0b7cd24951d302a16d9e2cb6cefea4",
-			},
-			ManifestVersion: "2.0.0",
-			SignatureType:   plugins.SignatureTypeGrafana,
-			SignedByOrg:     "grafana",
-			SignedByOrgName: "Grafana Labs",
-		},
+		Module:          "public/plugins/test-datasource/module.js",
+		BaseURL:         "public/plugins/test-datasource",
+		FS:              mustNewStaticFSForTests(t, filepath.Join(testDataDir(t), "nested-plugins/parent")),
 		Signature:       plugins.SignatureStatusValid,
 		SignatureType:   plugins.SignatureTypeGrafana,
 		SignatureOrg:    "Grafana Labs",
 		Class:           plugins.ClassExternal,
 		SkipHostEnvVars: true,
 		Translations:    map[string]string{},
-		LoadingStrategy: plugins.LoadingStrategyScript,
 	}
 
 	child := &plugins.Plugin{
@@ -1343,30 +1225,15 @@ func TestLoader_Load_NestedPlugins(t *testing.T) {
 				ExtensionPoints:   []plugins.ExtensionPoint{},
 			},
 		},
-		Module:  "public/plugins/test-panel/module.js",
-		BaseURL: "public/plugins/test-panel",
-		FS:      mustNewStaticFSForTests(t, filepath.Join(testDataDir(t), "nested-plugins/parent/nested")),
-		Manifest: &plugins.PluginManifest{
-			Plugin:  "test-datasource",
-			Version: "1.0.0",
-			KeyID:   "7e4d0c6a708866e7",
-			Time:    1661172777367,
-			Files: map[string]string{
-				"plugin.json":        "a029469ace740e9502bfb0d40924d1cccae73d0b18adcd8f1ceb7f17bf36beb8",
-				"nested/plugin.json": "e64abd35cd211e0e4682974ad5cdd1be7a0b7cd24951d302a16d9e2cb6cefea4",
-			},
-			ManifestVersion: "2.0.0",
-			SignatureType:   plugins.SignatureTypeGrafana,
-			SignedByOrg:     "grafana",
-			SignedByOrgName: "Grafana Labs",
-		},
+		Module:          "public/plugins/test-panel/module.js",
+		BaseURL:         "public/plugins/test-panel",
+		FS:              mustNewStaticFSForTests(t, filepath.Join(testDataDir(t), "nested-plugins/parent/nested")),
 		Signature:       plugins.SignatureStatusValid,
 		SignatureType:   plugins.SignatureTypeGrafana,
 		SignatureOrg:    "Grafana Labs",
 		Class:           plugins.ClassExternal,
 		SkipHostEnvVars: true,
 		Translations:    map[string]string{},
-		LoadingStrategy: plugins.LoadingStrategyScript,
 	}
 
 	parent.Children = []*plugins.Plugin{child}
@@ -1508,32 +1375,16 @@ func TestLoader_Load_NestedPlugins(t *testing.T) {
 				},
 				Backend: false,
 			},
-			Module:        "public/plugins/myorgid-simple-app/module.js",
-			BaseURL:       "public/plugins/myorgid-simple-app",
-			FS:            mustNewStaticFSForTests(t, filepath.Join(testDataDir(t), "app-with-child/dist")),
-			DefaultNavURL: "/plugins/myorgid-simple-app/page/root-page-react",
-			Manifest: &plugins.PluginManifest{
-				Plugin:  "myorgid-simple-app",
-				Version: "%VERSION%",
-				KeyID:   "7e4d0c6a708866e7",
-				Time:    1642614241713,
-				Files: map[string]string{
-					"plugin.json":       "1abecfd0229814f6c284ff3c8dd744548f8d676ab3250cd7902c99dabf11480e",
-					"child/plugin.json": "66ba0dffaf3b1bfa17eb9a8672918fc66d1001f465b1061f4fc19c2f2c100f51",
-				},
-				ManifestVersion: "2.0.0",
-				SignatureType:   plugins.SignatureTypeGrafana,
-				SignedByOrg:     "grafana",
-				SignedByOrgName: "Grafana Labs",
-				RootURLs:        []string{},
-			},
+			Module:          "public/plugins/myorgid-simple-app/module.js",
+			BaseURL:         "public/plugins/myorgid-simple-app",
+			FS:              mustNewStaticFSForTests(t, filepath.Join(testDataDir(t), "app-with-child/dist")),
+			DefaultNavURL:   "/plugins/myorgid-simple-app/page/root-page-react",
 			Signature:       plugins.SignatureStatusValid,
 			SignatureType:   plugins.SignatureTypeGrafana,
 			SignatureOrg:    "Grafana Labs",
 			Class:           plugins.ClassExternal,
 			SkipHostEnvVars: true,
 			Translations:    map[string]string{},
-			LoadingStrategy: plugins.LoadingStrategyScript,
 		}
 
 		child := &plugins.Plugin{
@@ -1580,28 +1431,12 @@ func TestLoader_Load_NestedPlugins(t *testing.T) {
 			BaseURL:         "public/plugins/myorgid-simple-panel",
 			FS:              mustNewStaticFSForTests(t, filepath.Join(testDataDir(t), "app-with-child/dist/child")),
 			IncludedInAppID: parent.ID,
-			Manifest: &plugins.PluginManifest{
-				Plugin:  "myorgid-simple-app",
-				Version: "%VERSION%",
-				KeyID:   "7e4d0c6a708866e7",
-				Time:    1642614241713,
-				Files: map[string]string{
-					"plugin.json":       "1abecfd0229814f6c284ff3c8dd744548f8d676ab3250cd7902c99dabf11480e",
-					"child/plugin.json": "66ba0dffaf3b1bfa17eb9a8672918fc66d1001f465b1061f4fc19c2f2c100f51",
-				},
-				ManifestVersion: "2.0.0",
-				SignatureType:   plugins.SignatureTypeGrafana,
-				SignedByOrg:     "grafana",
-				SignedByOrgName: "Grafana Labs",
-				RootURLs:        []string{},
-			},
 			Signature:       plugins.SignatureStatusValid,
 			SignatureType:   plugins.SignatureTypeGrafana,
 			SignatureOrg:    "Grafana Labs",
 			Class:           plugins.ClassExternal,
 			SkipHostEnvVars: true,
 			Translations:    map[string]string{},
-			LoadingStrategy: plugins.LoadingStrategyScript,
 		}
 
 		parent.Children = []*plugins.Plugin{child}
@@ -1649,7 +1484,7 @@ func newLoader(t *testing.T, cfg *config.PluginManagementCfg, reg registry.Servi
 	require.NoError(t, err)
 
 	return ProvideService(cfg, pipeline.ProvideDiscoveryStage(cfg, reg),
-		pipeline.ProvideBootstrapStage(cfg, signature.DefaultCalculator(cfg), pluginAssetsProvider, pluginscdn.ProvideService(cfg)),
+		pipeline.ProvideBootstrapStage(cfg, signature.DefaultCalculator(cfg), pluginAssetsProvider),
 		pipeline.ProvideValidationStage(cfg, signature.NewValidator(signature.NewUnsignedAuthorizer(cfg)), angularInspector),
 		pipeline.ProvideInitializationStage(cfg, reg, backendFactory, proc, &pluginfakes.FakeAuthService{}, pluginfakes.NewFakeRoleRegistry(), pluginfakes.NewFakeActionSetRegistry(), pluginfakes.NewFakePluginEnvProvider(), tracing.InitializeTracerForTest(), provisionedplugins.NewNoop()),
 		terminate, errTracker)
@@ -1679,7 +1514,7 @@ func newLoaderWithOpts(t *testing.T, cfg *config.PluginManagementCfg, opts loade
 	}
 
 	return ProvideService(cfg, pipeline.ProvideDiscoveryStage(cfg, reg),
-		pipeline.ProvideBootstrapStage(cfg, signature.DefaultCalculator(cfg), pluginassets.NewLocalProvider(), pluginscdn.ProvideService(cfg)),
+		pipeline.ProvideBootstrapStage(cfg, signature.DefaultCalculator(cfg), pluginassets.NewLocalProvider()),
 		pipeline.ProvideValidationStage(cfg, signature.NewValidator(signature.NewUnsignedAuthorizer(cfg)), angularInspector),
 		pipeline.ProvideInitializationStage(cfg, reg, backendFactoryProvider, proc, authServiceRegistry, pluginfakes.NewFakeRoleRegistry(), pluginfakes.NewFakeActionSetRegistry(), pluginfakes.NewFakePluginEnvProvider(), tracing.InitializeTracerForTest(), provisionedplugins.NewNoop()),
 		terminate, errTracker)

pkg/services/pluginsintegration/pipeline/pipeline.go

@@ -18,7 +18,6 @@ import (
 	"github.com/grafana/grafana/pkg/plugins/manager/registry"
 	"github.com/grafana/grafana/pkg/plugins/manager/signature"
 	"github.com/grafana/grafana/pkg/plugins/pluginassets"
-	"github.com/grafana/grafana/pkg/plugins/pluginscdn"
 	"github.com/grafana/grafana/pkg/services/pluginsintegration/coreplugin"
 	"github.com/grafana/grafana/pkg/services/pluginsintegration/pluginaccesscontrol"
 	"github.com/grafana/grafana/pkg/services/pluginsintegration/provisionedplugins"
@@ -43,7 +42,7 @@ func ProvideDiscoveryStage(cfg *config.PluginManagementCfg, pr registry.Service)
 	})
 }
 
-func ProvideBootstrapStage(cfg *config.PluginManagementCfg, sc plugins.SignatureCalculator, ap pluginassets.Provider, cdn *pluginscdn.Service) *bootstrap.Bootstrap {
+func ProvideBootstrapStage(cfg *config.PluginManagementCfg, sc plugins.SignatureCalculator, ap pluginassets.Provider) *bootstrap.Bootstrap {
 	disableAlertingForTempoDecorateFunc := func(ctx context.Context, p *plugins.Plugin) (*plugins.Plugin, error) {
 		if p.ID == coreplugin.Tempo && !cfg.Features.TempoAlertingEnabled {
 			p.Alerting = false
@@ -53,7 +52,7 @@ func ProvideBootstrapStage(cfg *config.PluginManagementCfg, sc plugins.Signature
 
 	return bootstrap.New(cfg, bootstrap.Opts{
 		ConstructFunc: bootstrap.DefaultConstructFunc(cfg, sc, ap),
-		DecorateFuncs: append(bootstrap.DefaultDecorateFuncs(cfg, cdn), disableAlertingForTempoDecorateFunc),
+		DecorateFuncs: append(bootstrap.DefaultDecorateFuncs(cfg), disableAlertingForTempoDecorateFunc),
 	})
 }
 

pkg/services/pluginsintegration/pluginassets/pluginassets.go

@@ -0,0 +1,204 @@
+package pluginassets
+
+import (
+	"context"
+	"encoding/base64"
+	"encoding/hex"
+	"fmt"
+	"path"
+	"path/filepath"
+	"sync"
+
+	"github.com/Masterminds/semver/v3"
+
+	"github.com/grafana/grafana/pkg/infra/log"
+	"github.com/grafana/grafana/pkg/plugins"
+	"github.com/grafana/grafana/pkg/plugins/config"
+	"github.com/grafana/grafana/pkg/plugins/manager/signature"
+	"github.com/grafana/grafana/pkg/plugins/pluginscdn"
+	"github.com/grafana/grafana/pkg/services/pluginsintegration/pluginstore"
+)
+
+const (
+	CreatePluginVersionCfgKey               = "create_plugin_version"
+	CreatePluginVersionScriptSupportEnabled = "4.15.0"
+)
+
+var (
+	scriptLoadingMinSupportedVersion = semver.MustParse(CreatePluginVersionScriptSupportEnabled)
+)
+
+func ProvideService(cfg *config.PluginManagementCfg, cdn *pluginscdn.Service, sig *signature.Signature, store pluginstore.Store) *Service {
+	return &Service{
+		cfg:       cfg,
+		cdn:       cdn,
+		signature: sig,
+		store:     store,
+		log:       log.New("pluginassets"),
+	}
+}
+
+type Service struct {
+	cfg       *config.PluginManagementCfg
+	cdn       *pluginscdn.Service
+	signature *signature.Signature
+	store     pluginstore.Store
+	log       log.Logger
+
+	moduleHashCache sync.Map
+}
+
+// LoadingStrategy calculates the loading strategy for a plugin.
+// If a plugin has plugin setting `create_plugin_version` >= 4.15.0, set loadingStrategy to "script".
+// If a plugin is not loaded via the CDN and is not Angular, set loadingStrategy to "script".
+// Otherwise, set loadingStrategy to "fetch".
+func (s *Service) LoadingStrategy(_ context.Context, p pluginstore.Plugin) plugins.LoadingStrategy {
+	if pCfg, ok := s.cfg.PluginSettings[p.ID]; ok {
+		if s.compatibleCreatePluginVersion(pCfg) {
+			return plugins.LoadingStrategyScript
+		}
+	}
+
+	// If the plugin has a parent
+	if p.Parent != nil {
+		// Check the parent's create_plugin_version setting
+		if pCfg, ok := s.cfg.PluginSettings[p.Parent.ID]; ok {
+			if s.compatibleCreatePluginVersion(pCfg) {
+				return plugins.LoadingStrategyScript
+			}
+		}
+
+		// Since the parent plugin is not explicitly configured as script loading compatible,
+		// If the plugin is either loaded from the CDN (via its parent) or contains Angular, we should use fetch
+		if s.cdnEnabled(p.Parent.ID, p.FS) || p.Angular.Detected {
+			return plugins.LoadingStrategyFetch
+		}
+	}
+
+	if !s.cdnEnabled(p.ID, p.FS) && !p.Angular.Detected {
+		return plugins.LoadingStrategyScript
+	}
+
+	return plugins.LoadingStrategyFetch
+}
+
+// ModuleHash returns the module.js SHA256 hash for a plugin in the format expected by the browser for SRI checks.
+// The module hash is read from the plugin's MANIFEST.txt file.
+// The plugin can also be a nested plugin.
+// If the plugin is unsigned, an empty string is returned.
+// The results are cached to avoid repeated reads from the MANIFEST.txt file.
+func (s *Service) ModuleHash(ctx context.Context, p pluginstore.Plugin) string {
+	k := s.moduleHashCacheKey(p)
+	cachedValue, ok := s.moduleHashCache.Load(k)
+	if ok {
+		return cachedValue.(string)
+	}
+	mh, err := s.moduleHash(ctx, p, "")
+	if err != nil {
+		s.log.Error("Failed to calculate module hash", "plugin", p.ID, "error", err)
+	}
+	s.moduleHashCache.Store(k, mh)
+	return mh
+}
+
+// moduleHash is the underlying function for ModuleHash. See its documentation for more information.
+// If the plugin is not a CDN plugin, the function will return an empty string.
+// It will read the module hash from the MANIFEST.txt in the [[plugins.FS]] of the provided plugin.
+// If childFSBase is provided, the function will try to get the hash from MANIFEST.txt for the provided children's
+// module.js file, rather than for the provided plugin.
+func (s *Service) moduleHash(ctx context.Context, p pluginstore.Plugin, childFSBase string) (r string, err error) {
+	if !s.cfg.Features.SriChecksEnabled {
+		return "", nil
+	}
+
+	// Ignore unsigned plugins
+	if !p.Signature.IsValid() {
+		return "", nil
+	}
+
+	if p.Parent != nil {
+		// Nested plugin
+		parent, ok := s.store.Plugin(ctx, p.Parent.ID)
+		if !ok {
+			return "", fmt.Errorf("parent plugin plugin %q for child plugin %q not found", p.Parent.ID, p.ID)
+		}
+
+		// The module hash is contained within the parent's MANIFEST.txt file.
+		// For example, the parent's MANIFEST.txt will contain an entry similar to this:
+		//
+		// ```
+		// "datasource/module.js": "1234567890abcdef..."
+		// ```
+		//
+		// Recursively call moduleHash with the parent plugin and with the children plugin folder path
+		// to get the correct module hash for the nested plugin.
+		if childFSBase == "" {
+			childFSBase = p.Base()
+		}
+		return s.moduleHash(ctx, parent, childFSBase)
+	}
+
+	// Only CDN plugins are supported for SRI checks.
+	// CDN plugins have the version as part of the URL, which acts as a cache-buster.
+	// Needed due to: https://github.com/grafana/plugin-tools/pull/1426
+	// FS plugins build before this change will have SRI mismatch issues.
+	if !s.cdnEnabled(p.ID, p.FS) {
+		return "", nil
+	}
+
+	manifest, err := s.signature.ReadPluginManifestFromFS(ctx, p.FS)
+	if err != nil {
+		return "", fmt.Errorf("read plugin manifest: %w", err)
+	}
+	if !manifest.IsV2() {
+		return "", nil
+	}
+
+	var childPath string
+	if childFSBase != "" {
+		// Calculate the relative path of the child plugin folder from the parent plugin folder.
+		childPath, err = p.FS.Rel(childFSBase)
+		if err != nil {
+			return "", fmt.Errorf("rel path: %w", err)
+		}
+		// MANIFETS.txt uses forward slashes as path separators.
+		childPath = filepath.ToSlash(childPath)
+	}
+	moduleHash, ok := manifest.Files[path.Join(childPath, "module.js")]
+	if !ok {
+		return "", nil
+	}
+	return convertHashForSRI(moduleHash)
+}
+
+func (s *Service) compatibleCreatePluginVersion(ps map[string]string) bool {
+	if cpv, ok := ps[CreatePluginVersionCfgKey]; ok {
+		createPluginVer, err := semver.NewVersion(cpv)
+		if err != nil {
+			s.log.Warn("Failed to parse create plugin version setting as semver", "version", cpv, "error", err)
+		} else {
+			if !createPluginVer.LessThan(scriptLoadingMinSupportedVersion) {
+				return true
+			}
+		}
+	}
+	return false
+}
+
+func (s *Service) cdnEnabled(pluginID string, fs plugins.FS) bool {
+	return s.cdn.PluginSupported(pluginID) || fs.Type().CDN()
+}
+
+// convertHashForSRI takes a SHA256 hash string and returns it as expected by the browser for SRI checks.
+func convertHashForSRI(h string) (string, error) {
+	hb, err := hex.DecodeString(h)
+	if err != nil {
+		return "", fmt.Errorf("hex decode string: %w", err)
+	}
+	return "sha256-" + base64.StdEncoding.EncodeToString(hb), nil
+}
+
+// moduleHashCacheKey returns a unique key for the module hash cache.
+func (s *Service) moduleHashCacheKey(p pluginstore.Plugin) string {
+	return p.ID + ":" + p.Info.Version
+}

pkg/services/pluginsintegration/pluginassets/pluginassets_test.go

@@ -0,0 +1,595 @@
+package pluginassets
+
+import (
+	"context"
+	"fmt"
+	"path/filepath"
+	"testing"
+
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+
+	"github.com/grafana/grafana/pkg/infra/log"
+	"github.com/grafana/grafana/pkg/plugins"
+	"github.com/grafana/grafana/pkg/plugins/config"
+	"github.com/grafana/grafana/pkg/plugins/manager/pluginfakes"
+	"github.com/grafana/grafana/pkg/plugins/manager/signature"
+	"github.com/grafana/grafana/pkg/plugins/manager/signature/statickey"
+	"github.com/grafana/grafana/pkg/plugins/pluginscdn"
+	"github.com/grafana/grafana/pkg/services/pluginsintegration/pluginstore"
+)
+
+func TestService_Calculate(t *testing.T) {
+	const pluginID = "grafana-test-datasource"
+
+	const (
+		incompatVersion = "4.14.0"
+		compatVersion   = CreatePluginVersionScriptSupportEnabled
+		futureVersion   = "5.0.0"
+	)
+
+	tcs := []struct {
+		name           string
+		pluginSettings config.PluginSettings
+		plugin         pluginstore.Plugin
+		expected       plugins.LoadingStrategy
+	}{
+		{
+			name: "Expected LoadingStrategyScript when create-plugin version is compatible and plugin is not angular",
+			pluginSettings: newPluginSettings(pluginID, map[string]string{
+				CreatePluginVersionCfgKey: compatVersion,
+			}),
+			plugin:   newPlugin(pluginID, withAngular(false)),
+			expected: plugins.LoadingStrategyScript,
+		},
+		{
+			name: "Expected LoadingStrategyScript when parent create-plugin version is compatible and plugin is not angular",
+			pluginSettings: newPluginSettings("parent-datasource", map[string]string{
+				CreatePluginVersionCfgKey: compatVersion,
+			}),
+			plugin: newPlugin(pluginID, withAngular(false), func(p pluginstore.Plugin) pluginstore.Plugin {
+				p.Parent = &pluginstore.ParentPlugin{ID: "parent-datasource"}
+				return p
+			}),
+			expected: plugins.LoadingStrategyScript,
+		},
+		{
+			name: "Expected LoadingStrategyScript when create-plugin version is future compatible and plugin is not angular",
+			pluginSettings: newPluginSettings(pluginID, map[string]string{
+				CreatePluginVersionCfgKey: futureVersion,
+			}),
+			plugin:   newPlugin(pluginID, withAngular(false), withFS(plugins.NewFakeFS())),
+			expected: plugins.LoadingStrategyScript,
+		},
+		{
+			name:           "Expected LoadingStrategyScript when create-plugin version is not provided, plugin is not angular and is not configured as CDN enabled",
+			pluginSettings: newPluginSettings(pluginID, map[string]string{
+				// NOTE: cdn key is not set
+			}),
+			plugin:   newPlugin(pluginID, withAngular(false), withFS(plugins.NewFakeFS())),
+			expected: plugins.LoadingStrategyScript,
+		},
+		{
+			name: "Expected LoadingStrategyScript when create-plugin version is not compatible, plugin is not angular, is not configured as CDN enabled and does not have a CDN fs",
+			pluginSettings: newPluginSettings(pluginID, map[string]string{
+				CreatePluginVersionCfgKey: incompatVersion,
+				// NOTE: cdn key is not set
+			}),
+			plugin:   newPlugin(pluginID, withAngular(false), withClass(plugins.ClassExternal), withFS(plugins.NewFakeFS())),
+			expected: plugins.LoadingStrategyScript,
+		},
+		{
+			name: "Expected LoadingStrategyFetch when parent create-plugin version is not set, is configured as CDN enabled and plugin is not angular",
+			pluginSettings: config.PluginSettings{
+				"parent-datasource": {
+					"cdn": "true",
+				},
+			},
+			plugin: newPlugin(pluginID, withAngular(false), func(p pluginstore.Plugin) pluginstore.Plugin {
+				p.Parent = &pluginstore.ParentPlugin{ID: "parent-datasource"}
+				return p
+			}),
+			expected: plugins.LoadingStrategyFetch,
+		},
+		{
+			name: "Expected LoadingStrategyFetch when parent create-plugin version is not set, is configured as CDN enabled and plugin is angular",
+			pluginSettings: config.PluginSettings{
+				"parent-datasource": {
+					"cdn": "true",
+				},
+			},
+			plugin: newPlugin(pluginID, withAngular(true), func(p pluginstore.Plugin) pluginstore.Plugin {
+				p.Parent = &pluginstore.ParentPlugin{ID: "parent-datasource"}
+				return p
+			}),
+			expected: plugins.LoadingStrategyFetch,
+		},
+		{
+			name:           "Expected LoadingStrategyFetch when parent create-plugin version is not set, is not configured as CDN enabled and plugin is angular",
+			pluginSettings: config.PluginSettings{},
+			plugin: newPlugin(pluginID, withAngular(true), withFS(plugins.NewFakeFS()), func(p pluginstore.Plugin) pluginstore.Plugin {
+				p.Parent = &pluginstore.ParentPlugin{ID: "parent-datasource"}
+				return p
+			}),
+			expected: plugins.LoadingStrategyFetch,
+		},
+		{
+			name: "Expected LoadingStrategyFetch when create-plugin version is not compatible, plugin is not angular, and plugin is configured as CDN enabled",
+			pluginSettings: newPluginSettings(pluginID, map[string]string{
+				"cdn":                     "true",
+				CreatePluginVersionCfgKey: incompatVersion,
+			}),
+			plugin:   newPlugin(pluginID, withAngular(false), withClass(plugins.ClassExternal)),
+			expected: plugins.LoadingStrategyFetch,
+		},
+		{
+			name: "Expected LoadingStrategyFetch when create-plugin version is not compatible and plugin is angular",
+			pluginSettings: newPluginSettings(pluginID, map[string]string{
+				CreatePluginVersionCfgKey: incompatVersion,
+			}),
+			plugin:   newPlugin(pluginID, withAngular(true), withFS(plugins.NewFakeFS())),
+			expected: plugins.LoadingStrategyFetch,
+		},
+		{
+			name: "Expected LoadingStrategyFetch when create-plugin version is not compatible, plugin is not angular and plugin is configured as CDN enabled",
+			pluginSettings: newPluginSettings(pluginID, map[string]string{
+				"cdn":                     "true",
+				CreatePluginVersionCfgKey: incompatVersion,
+			}),
+			plugin:   newPlugin(pluginID, withAngular(false)),
+			expected: plugins.LoadingStrategyFetch,
+		},
+		{
+			name: "Expected LoadingStrategyFetch when create-plugin version is not compatible, plugin is not angular and has a CDN fs",
+			pluginSettings: newPluginSettings(pluginID, map[string]string{
+				CreatePluginVersionCfgKey: incompatVersion,
+			}),
+			plugin: newPlugin(pluginID, withAngular(false), withFS(
+				&pluginfakes.FakePluginFS{
+					TypeFunc: func() plugins.FSType {
+						return plugins.FSTypeCDN
+					},
+				},
+			)),
+			expected: plugins.LoadingStrategyFetch,
+		},
+		{
+			name: "Expected LoadingStrategyScript when plugin setting create-plugin version is badly formatted, plugin is not configured as CDN enabled and does not have a CDN fs",
+			pluginSettings: newPluginSettings(pluginID, map[string]string{
+				CreatePluginVersionCfgKey: "invalidSemver",
+			}),
+			plugin:   newPlugin(pluginID, withAngular(false), withFS(plugins.NewFakeFS())),
+			expected: plugins.LoadingStrategyScript,
+		},
+	}
+	for _, tc := range tcs {
+		t.Run(tc.name, func(t *testing.T) {
+			s := &Service{
+				cfg: newCfg(tc.pluginSettings),
+				cdn: pluginscdn.ProvideService(&config.PluginManagementCfg{
+					PluginsCDNURLTemplate: "http://cdn.example.com", // required for cdn.PluginSupported check
+					PluginSettings:        tc.pluginSettings,
+				}),
+				log: log.NewNopLogger(),
+			}
+
+			got := s.LoadingStrategy(context.Background(), tc.plugin)
+			assert.Equal(t, tc.expected, got, "unexpected loading strategy")
+		})
+	}
+}
+
+func TestService_ModuleHash(t *testing.T) {
+	const (
+		pluginID       = "grafana-test-datasource"
+		parentPluginID = "grafana-test-app"
+	)
+	for _, tc := range []struct {
+		name     string
+		features *config.Features
+		store    []pluginstore.Plugin
+
+		// Can be used to configure plugin's fs
+		// fs cdn type = loaded from CDN with no files on disk
+		// fs local type = files on disk but served from CDN only if cdn=true
+		plugin pluginstore.Plugin
+
+		// When true, set cdn=true in config
+		cdn           bool
+		expModuleHash string
+	}{
+		{
+			name:          "unsigned should not return module hash",
+			plugin:        newPlugin(pluginID, withSignatureStatus(plugins.SignatureStatusUnsigned)),
+			cdn:           false,
+			features:      &config.Features{SriChecksEnabled: false},
+			expModuleHash: "",
+		},
+		{
+			plugin: newPlugin(
+				pluginID,
+				withSignatureStatus(plugins.SignatureStatusValid),
+				withFS(plugins.NewLocalFS(filepath.Join("testdata", "module-hash-valid"))),
+				withClass(plugins.ClassExternal),
+			),
+			cdn:           true,
+			features:      &config.Features{SriChecksEnabled: true},
+			expModuleHash: newSRIHash(t, "5891b5b522d5df086d0ff0b110fbd9d21bb4fc7163af34d08286a2e846f6be03"),
+		},
+		{
+			plugin: newPlugin(
+				pluginID,
+				withSignatureStatus(plugins.SignatureStatusValid),
+				withFS(plugins.NewLocalFS(filepath.Join("testdata", "module-hash-valid"))),
+				withClass(plugins.ClassExternal),
+			),
+			cdn:           true,
+			features:      &config.Features{SriChecksEnabled: true},
+			expModuleHash: newSRIHash(t, "5891b5b522d5df086d0ff0b110fbd9d21bb4fc7163af34d08286a2e846f6be03"),
+		},
+		{
+			plugin: newPlugin(
+				pluginID,
+				withSignatureStatus(plugins.SignatureStatusValid),
+				withFS(plugins.NewLocalFS(filepath.Join("testdata", "module-hash-valid"))),
+			),
+			cdn:           false,
+			features:      &config.Features{SriChecksEnabled: true},
+			expModuleHash: "",
+		},
+		{
+			plugin: newPlugin(
+				pluginID,
+				withSignatureStatus(plugins.SignatureStatusValid),
+				withFS(plugins.NewLocalFS(filepath.Join("testdata", "module-hash-valid"))),
+			),
+			cdn:           true,
+			features:      &config.Features{SriChecksEnabled: false},
+			expModuleHash: "",
+		},
+		{
+			plugin: newPlugin(
+				pluginID,
+				withSignatureStatus(plugins.SignatureStatusValid),
+				withFS(plugins.NewLocalFS(filepath.Join("testdata", "module-hash-valid"))),
+			),
+			cdn:           false,
+			features:      &config.Features{SriChecksEnabled: false},
+			expModuleHash: "",
+		},
+		{
+			// parentPluginID           (/)
+			// └── pluginID             (/datasource)
+			name: "nested plugin should return module hash from parent MANIFEST.txt",
+			store: []pluginstore.Plugin{
+				newPlugin(
+					parentPluginID,
+					withSignatureStatus(plugins.SignatureStatusValid),
+					withFS(plugins.NewLocalFS(filepath.Join("testdata", "module-hash-valid-nested"))),
+				),
+			},
+			plugin: newPlugin(
+				pluginID,
+				withSignatureStatus(plugins.SignatureStatusValid),
+				withFS(plugins.NewLocalFS(filepath.Join("testdata", "module-hash-valid-nested", "datasource"))),
+				withParent(parentPluginID),
+			),
+			cdn:           true,
+			features:      &config.Features{SriChecksEnabled: true},
+			expModuleHash: newSRIHash(t, "04d70db091d96c4775fb32ba5a8f84cc22893eb43afdb649726661d4425c6711"),
+		},
+		{
+			// parentPluginID           (/)
+			// └── pluginID             (/panels/one)
+			name: "nested plugin deeper than one subfolder should return module hash from parent MANIFEST.txt",
+			store: []pluginstore.Plugin{
+				newPlugin(
+					parentPluginID,
+					withSignatureStatus(plugins.SignatureStatusValid),
+					withFS(plugins.NewLocalFS(filepath.Join("testdata", "module-hash-valid-nested"))),
+				),
+			},
+			plugin: newPlugin(
+				pluginID,
+				withSignatureStatus(plugins.SignatureStatusValid),
+				withFS(plugins.NewLocalFS(filepath.Join("testdata", "module-hash-valid-nested", "panels", "one"))),
+				withParent(parentPluginID),
+			),
+			cdn:           true,
+			features:      &config.Features{SriChecksEnabled: true},
+			expModuleHash: newSRIHash(t, "cbd1ac2284645a0e1e9a8722a729f5bcdd2b831222728709c6360beecdd6143f"),
+		},
+		{
+			// grand-parent-app         (/)
+			// ├── parent-datasource    (/datasource)
+			// │   └── child-panel      (/datasource/panels/one)
+			name: "nested plugin of a nested plugin should return module hash from parent MANIFEST.txt",
+			store: []pluginstore.Plugin{
+				newPlugin(
+					"grand-parent-app",
+					withSignatureStatus(plugins.SignatureStatusValid),
+					withFS(plugins.NewLocalFS(filepath.Join("testdata", "module-hash-valid-deeply-nested"))),
+				),
+				newPlugin(
+					"parent-datasource",
+					withSignatureStatus(plugins.SignatureStatusValid),
+					withFS(plugins.NewLocalFS(filepath.Join("testdata", "module-hash-valid-deeply-nested", "datasource"))),
+					withParent("grand-parent-app"),
+				),
+			},
+			plugin: newPlugin(
+				"child-panel",
+				withSignatureStatus(plugins.SignatureStatusValid),
+				withFS(plugins.NewLocalFS(filepath.Join("testdata", "module-hash-valid-deeply-nested", "datasource", "panels", "one"))),
+				withParent("parent-datasource"),
+			),
+			cdn:           true,
+			features:      &config.Features{SriChecksEnabled: true},
+			expModuleHash: newSRIHash(t, "cbd1ac2284645a0e1e9a8722a729f5bcdd2b831222728709c6360beecdd6143f"),
+		},
+		{
+			name:  "nested plugin should not return module hash from parent if it's not registered in the store",
+			store: []pluginstore.Plugin{},
+			plugin: newPlugin(
+				pluginID,
+				withSignatureStatus(plugins.SignatureStatusValid),
+				withFS(plugins.NewLocalFS(filepath.Join("testdata", "module-hash-valid-nested", "panels", "one"))),
+				withParent(parentPluginID),
+			),
+			cdn:           false,
+			features:      &config.Features{SriChecksEnabled: true},
+			expModuleHash: "",
+		},
+		{
+			name: "missing module.js entry from MANIFEST.txt should not return module hash",
+			plugin: newPlugin(
+				pluginID,
+				withSignatureStatus(plugins.SignatureStatusValid),
+				withFS(plugins.NewLocalFS(filepath.Join("testdata", "module-hash-no-module-js"))),
+			),
+			cdn:           false,
+			features:      &config.Features{SriChecksEnabled: true},
+			expModuleHash: "",
+		},
+		{
+			name: "signed status but missing MANIFEST.txt should not return module hash",
+			plugin: newPlugin(
+				pluginID,
+				withSignatureStatus(plugins.SignatureStatusValid),
+				withFS(plugins.NewLocalFS(filepath.Join("testdata", "module-hash-no-manifest-txt"))),
+			),
+			cdn:           false,
+			features:      &config.Features{SriChecksEnabled: true},
+			expModuleHash: "",
+		},
+	} {
+		if tc.name == "" {
+			var expS string
+			if tc.expModuleHash == "" {
+				expS = "should not return module hash"
+			} else {
+				expS = "should return module hash"
+			}
+			tc.name = fmt.Sprintf("feature=%v, cdn_config=%v, class=%v %s", tc.features.SriChecksEnabled, tc.cdn, tc.plugin.Class, expS)
+		}
+
+		t.Run(tc.name, func(t *testing.T) {
+			var pluginSettings config.PluginSettings
+			if tc.cdn {
+				pluginSettings = config.PluginSettings{
+					pluginID: {
+						"cdn": "true",
+					},
+					parentPluginID: map[string]string{
+						"cdn": "true",
+					},
+					"grand-parent-app": map[string]string{
+						"cdn": "true",
+					},
+				}
+			}
+			features := tc.features
+			if features == nil {
+				features = &config.Features{}
+			}
+			pCfg := &config.PluginManagementCfg{
+				PluginsCDNURLTemplate: "http://cdn.example.com",
+				PluginSettings:        pluginSettings,
+				Features:              *features,
+			}
+			svc := ProvideService(
+				pCfg,
+				pluginscdn.ProvideService(pCfg),
+				signature.ProvideService(pCfg, statickey.New()),
+				pluginstore.NewFakePluginStore(tc.store...),
+			)
+			mh := svc.ModuleHash(context.Background(), tc.plugin)
+			require.Equal(t, tc.expModuleHash, mh)
+		})
+	}
+}
+
+func TestService_ModuleHash_Cache(t *testing.T) {
+	pCfg := &config.PluginManagementCfg{
+		PluginSettings: config.PluginSettings{},
+		Features:       config.Features{SriChecksEnabled: true},
+	}
+	svc := ProvideService(
+		pCfg,
+		pluginscdn.ProvideService(pCfg),
+		signature.ProvideService(pCfg, statickey.New()),
+		pluginstore.NewFakePluginStore(),
+	)
+	const pluginID = "grafana-test-datasource"
+
+	t.Run("cache key", func(t *testing.T) {
+		t.Run("with version", func(t *testing.T) {
+			const pluginVersion = "1.0.0"
+			p := newPlugin(pluginID, withInfo(plugins.Info{Version: pluginVersion}))
+			k := svc.moduleHashCacheKey(p)
+			require.Equal(t, pluginID+":"+pluginVersion, k, "cache key should be correct")
+		})
+
+		t.Run("without version", func(t *testing.T) {
+			p := newPlugin(pluginID)
+			k := svc.moduleHashCacheKey(p)
+			require.Equal(t, pluginID+":", k, "cache key should be correct")
+		})
+	})
+
+	t.Run("ModuleHash usage", func(t *testing.T) {
+		pV1 := newPlugin(
+			pluginID,
+			withInfo(plugins.Info{Version: "1.0.0"}),
+			withSignatureStatus(plugins.SignatureStatusValid),
+			withFS(plugins.NewLocalFS(filepath.Join("testdata", "module-hash-valid"))),
+		)
+
+		pCfg = &config.PluginManagementCfg{
+			PluginsCDNURLTemplate: "https://cdn.grafana.com",
+			PluginSettings: config.PluginSettings{
+				pluginID: {
+					"cdn": "true",
+				},
+			},
+			Features: config.Features{SriChecksEnabled: true},
+		}
+		svc = ProvideService(
+			pCfg,
+			pluginscdn.ProvideService(pCfg),
+			signature.ProvideService(pCfg, statickey.New()),
+			pluginstore.NewFakePluginStore(),
+		)
+
+		k := svc.moduleHashCacheKey(pV1)
+
+		_, ok := svc.moduleHashCache.Load(k)
+		require.False(t, ok, "cache should initially be empty")
+
+		mhV1 := svc.ModuleHash(context.Background(), pV1)
+		pV1Exp := newSRIHash(t, "5891b5b522d5df086d0ff0b110fbd9d21bb4fc7163af34d08286a2e846f6be03")
+		require.Equal(t, pV1Exp, mhV1, "returned value should be correct")
+
+		cachedMh, ok := svc.moduleHashCache.Load(k)
+		require.True(t, ok)
+		require.Equal(t, pV1Exp, cachedMh, "cache should contain the returned value")
+
+		t.Run("different version uses different cache key", func(t *testing.T) {
+			pV2 := newPlugin(
+				pluginID,
+				withInfo(plugins.Info{Version: "2.0.0"}),
+				withSignatureStatus(plugins.SignatureStatusValid),
+				// different fs for different hash
+				withFS(plugins.NewLocalFS(filepath.Join("testdata", "module-hash-valid-nested"))),
+			)
+			mhV2 := svc.ModuleHash(context.Background(), pV2)
+			require.NotEqual(t, mhV2, mhV1, "different version should have different hash")
+			require.Equal(t, newSRIHash(t, "266c19bc148b22ddef2a288fc5f8f40855bda22ccf60be53340b4931e469ae2a"), mhV2)
+		})
+
+		t.Run("cache should be used", func(t *testing.T) {
+			// edit cache directly
+			svc.moduleHashCache.Store(k, "hax")
+			require.Equal(t, "hax", svc.ModuleHash(context.Background(), pV1))
+		})
+	})
+}
+
+func TestConvertHashFromSRI(t *testing.T) {
+	for _, tc := range []struct {
+		hash    string
+		expHash string
+		expErr  bool
+	}{
+		{
+			hash:    "ddfcb449445064e6c39f0c20b15be3cb6a55837cf4781df23d02de005f436811",
+			expHash: "sha256-3fy0SURQZObDnwwgsVvjy2pVg3z0eB3yPQLeAF9DaBE=",
+		},
+		{
+			hash:   "not-a-valid-hash",
+			expErr: true,
+		},
+	} {
+		t.Run(tc.hash, func(t *testing.T) {
+			r, err := convertHashForSRI(tc.hash)
+			if tc.expErr {
+				require.Error(t, err)
+			} else {
+				require.NoError(t, err)
+				require.Equal(t, tc.expHash, r)
+			}
+		})
+	}
+}
+
+func newPlugin(pluginID string, cbs ...func(p pluginstore.Plugin) pluginstore.Plugin) pluginstore.Plugin {
+	p := pluginstore.Plugin{
+		JSONData: plugins.JSONData{
+			ID: pluginID,
+		},
+	}
+	for _, cb := range cbs {
+		p = cb(p)
+	}
+	return p
+}
+
+func withInfo(info plugins.Info) func(p pluginstore.Plugin) pluginstore.Plugin {
+	return func(p pluginstore.Plugin) pluginstore.Plugin {
+		p.Info = info
+		return p
+	}
+}
+
+func withFS(fs plugins.FS) func(p pluginstore.Plugin) pluginstore.Plugin {
+	return func(p pluginstore.Plugin) pluginstore.Plugin {
+		p.FS = fs
+		return p
+	}
+}
+
+func withSignatureStatus(status plugins.SignatureStatus) func(p pluginstore.Plugin) pluginstore.Plugin {
+	return func(p pluginstore.Plugin) pluginstore.Plugin {
+		p.Signature = status
+		return p
+	}
+}
+
+func withAngular(angular bool) func(p pluginstore.Plugin) pluginstore.Plugin {
+	return func(p pluginstore.Plugin) pluginstore.Plugin {
+		p.Angular = plugins.AngularMeta{Detected: angular}
+		return p
+	}
+}
+
+func withParent(parentID string) func(p pluginstore.Plugin) pluginstore.Plugin {
+	return func(p pluginstore.Plugin) pluginstore.Plugin {
+		p.Parent = &pluginstore.ParentPlugin{ID: parentID}
+		return p
+	}
+}
+
+func withClass(class plugins.Class) func(p pluginstore.Plugin) pluginstore.Plugin {
+	return func(p pluginstore.Plugin) pluginstore.Plugin {
+		p.Class = class
+		return p
+	}
+}
+
+func newCfg(ps config.PluginSettings) *config.PluginManagementCfg {
+	return &config.PluginManagementCfg{
+		PluginSettings: ps,
+	}
+}
+
+func newPluginSettings(pluginID string, kv map[string]string) config.PluginSettings {
+	return config.PluginSettings{
+		pluginID: kv,
+	}
+}
+
+func newSRIHash(t *testing.T, s string) string {
+	r, err := convertHashForSRI(s)
+	require.NoError(t, err)
+	return r
+}

pkg/services/pluginsintegration/pluginsintegration.go

@@ -46,6 +46,7 @@ import (
 	"github.com/grafana/grafana/pkg/services/pluginsintegration/loader"
 	"github.com/grafana/grafana/pkg/services/pluginsintegration/managedplugins"
 	"github.com/grafana/grafana/pkg/services/pluginsintegration/pipeline"
+	"github.com/grafana/grafana/pkg/services/pluginsintegration/pluginassets"
 	"github.com/grafana/grafana/pkg/services/pluginsintegration/pluginchecker"
 	"github.com/grafana/grafana/pkg/services/pluginsintegration/pluginconfig"
 	"github.com/grafana/grafana/pkg/services/pluginsintegration/plugincontext"
@@ -130,6 +131,7 @@ var WireSet = wire.NewSet(
 	plugincontext.ProvideBaseService,
 	wire.Bind(new(plugincontext.BasePluginContextProvider), new(*plugincontext.BaseProvider)),
 	plugininstaller.ProvideService,
+	pluginassets.ProvideService,
 	pluginchecker.ProvidePreinstall,
 	wire.Bind(new(pluginchecker.Preinstall), new(*pluginchecker.PreinstallImpl)),
 	advisor.ProvideService,

pkg/services/pluginsintegration/pluginstore/plugins.go

@@ -30,10 +30,8 @@ type Plugin struct {
 	Error *plugins.Error
 
 	// SystemJS fields
-	Module          string
-	LoadingStrategy plugins.LoadingStrategy
-	BaseURL         string
-	ModuleHash      string
+	Module  string
+	BaseURL string
 
 	Angular plugins.AngularMeta
 
@@ -78,12 +76,10 @@ func ToGrafanaDTO(p *plugins.Plugin) Plugin {
 		SignatureOrg:      p.SignatureOrg,
 		Error:             p.Error,
 		Module:            p.Module,
-		LoadingStrategy:   p.LoadingStrategy,
 		BaseURL:           p.BaseURL,
 		ExternalService:   p.ExternalService,
 		Angular:           p.Angular,
 		Translations:      p.Translations,
-		ModuleHash:        p.ModuleHash,
 	}
 
 	if p.Parent != nil {

pkg/services/pluginsintegration/test_helper.go

@@ -24,7 +24,6 @@ import (
 	"github.com/grafana/grafana/pkg/plugins/manager/signature/statickey"
 	"github.com/grafana/grafana/pkg/plugins/pluginassets"
 	"github.com/grafana/grafana/pkg/plugins/pluginerrs"
-	"github.com/grafana/grafana/pkg/plugins/pluginscdn"
 	"github.com/grafana/grafana/pkg/services/featuremgmt"
 	"github.com/grafana/grafana/pkg/services/pluginsintegration/coreplugin"
 	"github.com/grafana/grafana/pkg/services/pluginsintegration/pipeline"
@@ -50,7 +49,7 @@ func CreateIntegrationTestCtx(t *testing.T, cfg *setting.Cfg, coreRegistry *core
 	proc := process.ProvideService()
 
 	disc := pipeline.ProvideDiscoveryStage(pCfg, reg)
-	boot := pipeline.ProvideBootstrapStage(pCfg, signature.ProvideService(pCfg, statickey.New()), pluginassets.NewLocalProvider(), pluginscdn.ProvideService(pCfg))
+	boot := pipeline.ProvideBootstrapStage(pCfg, signature.ProvideService(pCfg, statickey.New()), pluginassets.NewLocalProvider())
 	valid := pipeline.ProvideValidationStage(pCfg, signature.NewValidator(signature.NewUnsignedAuthorizer(pCfg)), angularInspector)
 	init := pipeline.ProvideInitializationStage(pCfg, reg, coreplugin.ProvideCoreProvider(coreRegistry), proc, &pluginfakes.FakeAuthService{}, pluginfakes.NewFakeRoleRegistry(), pluginfakes.NewFakeActionSetRegistry(), nil, tracing.InitializeTracerForTest(), provisionedplugins.NewNoop())
 	term, err := pipeline.ProvideTerminationStage(pCfg, reg, proc)
@@ -88,7 +87,7 @@ func CreateTestLoader(t *testing.T, cfg *pluginsCfg.PluginManagementCfg, opts Lo
 	}
 
 	if opts.Bootstrapper == nil {
-		opts.Bootstrapper = pipeline.ProvideBootstrapStage(cfg, signature.ProvideService(cfg, statickey.New()), pluginassets.NewLocalProvider(), pluginscdn.ProvideService(cfg))
+		opts.Bootstrapper = pipeline.ProvideBootstrapStage(cfg, signature.ProvideService(cfg, statickey.New()), pluginassets.NewLocalProvider())
 	}
 
 	if opts.Validator == nil {

public/app/features/browse-dashboards/BrowseDashboardsPage.tsx

@@ -1,11 +1,12 @@
 import { css } from '@emotion/css';
-import { memo, useEffect, useMemo } from 'react';
+import { memo, useEffect, useMemo, useRef } from 'react';
 import { useLocation, useParams } from 'react-router-dom-v5-compat';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Trans } from '@grafana/i18n';
 import { config, reportInteraction } from '@grafana/runtime';
+import { evaluateBooleanFlag } from '@grafana/runtime/internal';
 import { LinkButton, FilterInput, useStyles2, Text, Stack } from '@grafana/ui';
 import { useGetFolderQueryFacade, useUpdateFolder } from 'app/api/clients/folder/v1beta1/hooks';
 import { Page } from 'app/core/components/Page/Page';
@@ -44,6 +45,7 @@ const BrowseDashboardsPage = memo(({ queryParams }: { queryParams: Record<string
   const location = useLocation();
   const search = useMemo(() => new URLSearchParams(location.search), [location.search]);
   const { isReadOnlyRepo, repoType } = useGetResourceRepositoryView({ folderName: folderUID });
+  const isRecentlyViewedEnabled = !folderUID && evaluateBooleanFlag('recentlyViewedDashboards', false);
 
   useEffect(() => {
     stateManager.initStateFromUrl(folderUID);
@@ -73,6 +75,23 @@ const BrowseDashboardsPage = memo(({ queryParams }: { queryParams: Record<string
     }
   }, [isSearching, searchState.result, stateManager]);
 
+  // Emit exposure event for A/A test once when page loads
+  const hasEmittedExposureEvent = useRef(false);
+
+  useEffect(() => {
+    if (!isRecentlyViewedEnabled || hasEmittedExposureEvent.current) {
+      return;
+    }
+
+    hasEmittedExposureEvent.current = true;
+    const isExperimentTreatment = evaluateBooleanFlag('experimentRecentlyViewedDashboards', false);
+
+    reportInteraction('dashboards_browse_list_viewed', {
+      experiment_dashboard_list_recently_viewed: isExperimentTreatment ? 'treatment' : 'control',
+      has_recently_viewed_component: isExperimentTreatment,
+    });
+  }, [isRecentlyViewedEnabled]);
+
   const { data: folderDTO } = useGetFolderQueryFacade(folderUID);
   const [saveFolder] = useUpdateFolder();
   const navModel = useMemo(() => {
@@ -179,8 +198,8 @@ const BrowseDashboardsPage = memo(({ queryParams }: { queryParams: Record<string
     >
       <Page.Contents className={styles.pageContents}>
         <ProvisionedFolderPreviewBanner queryParams={queryParams} />
-        {/* only show recently viewed dashboards when in root */}
-        {!folderUID && <RecentlyViewedDashboards />}
+        {/* only show recently viewed dashboards when in root and flag is enabled */}
+        {isRecentlyViewedEnabled && <RecentlyViewedDashboards />}
         <div>
           <FilterInput
             placeholder={getSearchPlaceholder(searchState.includePanels)}

public/app/features/browse-dashboards/components/RecentlyViewedDashboards.tsx

@@ -5,7 +5,6 @@ import { useAsyncRetry } from 'react-use';
 import { GrafanaTheme2, store } from '@grafana/data';
 import { t, Trans } from '@grafana/i18n';
 import { reportInteraction } from '@grafana/runtime';
-import { evaluateBooleanFlag } from '@grafana/runtime/internal';
 import { Button, CollapsableSection, Spinner, Stack, Text, useStyles2, Grid } from '@grafana/ui';
 import { contextSrv } from 'app/core/services/context_srv';
 import { useDashboardLocationInfo } from 'app/features/search/hooks/useDashboardLocationInfo';
@@ -28,9 +27,6 @@ export function RecentlyViewedDashboards() {
     retry,
     error,
   } = useAsyncRetry(async () => {
-    if (!evaluateBooleanFlag('recentlyViewedDashboards', false)) {
-      return [];
-    }
     return getRecentlyViewedDashboards(MAX_RECENT);
   }, []);
   const { foldersByUid } = useDashboardLocationInfo(recentDashboards.length > 0);
@@ -48,7 +44,7 @@ export function RecentlyViewedDashboards() {
     setIsOpen(!isOpen);
   };
 
-  if (!evaluateBooleanFlag('recentlyViewedDashboards', false) || recentDashboards.length === 0) {
+  if (recentDashboards.length === 0) {
     return null;
   }
 
@@ -123,6 +119,7 @@ const getStyles = (theme: GrafanaTheme2) => {
         color: 'transparent',
         cursor: 'pointer',
       },
+      padding: 0,
     }),
     content: css({
       paddingTop: theme.spacing(0),

public/app/features/canvas/runtime/element.tsx

@@ -1108,12 +1108,7 @@ export class ElementState implements LayerElement {
           tabIndex={0}
           style={{ userSelect: 'none' }}
         >
-          <item.display
-            key={`${this.UID}/${this.revId}`}
-            config={this.options.config}
-            data={this.data}
-            isSelected={isSelected}
-          />
+          <item.display key={this.UID} config={this.options.config} data={this.data} isSelected={isSelected} />
         </div>
         {this.showActionConfirmation && this.renderActionsConfirmModal(this.getPrimaryAction())}
         {this.showActionVarsModal && this.renderVariablesInputModal(this.getPrimaryAction())}

public/app/features/plugins/loader/systemjsHooks.ts

@@ -21,7 +21,7 @@ export function initSystemJSHooks() {
 
   // This instructs SystemJS to load plugin assets using fetch and eval if it returns a truthy value, otherwise
   // it will load the plugin using a script tag. The logic that sets loadingStrategy comes from the backend.
-  // Loading strategy is calculated during bootstrap in pkg/plugins/pluginassets/loadingstrategy.go
+  // See: pkg/services/pluginsintegration/pluginassets/pluginassets.go
   systemJSPrototype.shouldFetch = function (url) {
     const pluginInfo = getPluginInfoFromCache(url);
     const jsTypeRegEx = /^[^#?]+\.(js)([?#].*)?$/;

public/app/plugins/datasource/influxdb/components/editor/config-v2/ConfigEditor.test.tsx

@@ -36,9 +36,4 @@ describe('ConfigEditor', () => {
     expect(screen.getByTestId('url-auth-section')).toBeInTheDocument();
     expect(screen.getByTestId('db-connection-section')).toBeInTheDocument();
   });
-
-  it('shows the informational alert', () => {
-    render(<ConfigEditor {...defaultProps} />);
-    expect(screen.getByText(/You are viewing a new design/i)).toBeInTheDocument();
-  });
 });

public/app/plugins/datasource/influxdb/components/editor/config-v2/ConfigEditor.tsx

@@ -2,13 +2,12 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Alert, Box, Stack, TextLink, Text, useStyles2 } from '@grafana/ui';
+import { Box, Stack, Text, useStyles2 } from '@grafana/ui';
 
 import { DatabaseConnectionSection } from './DatabaseConnectionSection';
 import { LeftSideBar } from './LeftSideBar';
 import { UrlAndAuthenticationSection } from './UrlAndAuthenticationSection';
 import { CONTAINER_MIN_WIDTH } from './constants';
-import { trackInfluxDBConfigV2FeedbackButtonClicked } from './tracking';
 import { Props } from './types';
 
 export const ConfigEditor: React.FC<Props> = ({ onOptionsChange, options }: Props) => {
@@ -22,22 +21,6 @@ export const ConfigEditor: React.FC<Props> = ({ onOptionsChange, options }: Prop
       </div>
       <Box width="60%" flex="1 1 auto" minWidth={CONTAINER_MIN_WIDTH}>
         <Stack direction="column">
-          <Alert
-            severity="info"
-            title="You are viewing a new design for the InfluxDB configuration settings."
-            className={styles.alertHeight}
-          >
-            <>
-              <TextLink
-                href="https://docs.google.com/forms/d/e/1FAIpQLSdi-zyX3c51vh937UKhNYYxhljUnFi6dQSlZv50mES9NrK-ig/viewform"
-                external
-                onClick={trackInfluxDBConfigV2FeedbackButtonClicked}
-              >
-                Share your thoughts
-              </TextLink>{' '}
-              to help us make it even better.
-            </>
-          </Alert>
           <Text variant="bodySmall" color="secondary">
             Fields marked with * are required
           </Text>

public/app/plugins/panel/dashlist/DashListItem.tsx

@@ -1,3 +1,5 @@
+import { truncate } from 'lodash';
+
 import { reportInteraction } from '@grafana/runtime';
 import { Box, Card, Icon, Link, Stack, Text, useStyles2 } from '@grafana/ui';
 import { LocationInfo } from 'app/features/search/service/types';
@@ -25,6 +27,7 @@ export function DashListItem({
   onStarChange,
 }: Props) {
   const css = useStyles2(getStyles);
+  const shortTitle = truncate(dashboard.name, { length: 40, omission: '…' });
 
   const onCardLinkClick = () => {
     reportInteraction('grafana_recently_viewed_dashboards_click_card', {
@@ -54,27 +57,35 @@ export function DashListItem({
         </div>
       ) : (
         <Card className={css.dashlistCard} noMargin>
-          <Stack justifyContent="space-between" alignItems="center">
-            <Link href={url} onClick={onCardLinkClick}>
-              {dashboard.name}
-            </Link>
-            <StarToolbarButton
-              title={dashboard.name}
-              group="dashboard.grafana.app"
-              kind="Dashboard"
-              id={dashboard.uid}
-              onStarChange={onStarChange}
-            />
-          </Stack>
-
-          {showFolderNames && locationInfo && (
-            <Stack alignItems="center" direction="row" gap={0}>
-              <Icon name="folder" size="sm" className={css.dashlistCardIcon} aria-hidden="true" />
-              <Text color="secondary" variant="bodySmall" element="p">
-                {locationInfo?.name}
-              </Text>
+          <Stack direction="column" justifyContent="space-between" height="100%">
+            <Stack justifyContent="space-between" alignItems="start">
+              <Link
+                className={css.dashlistCardLink}
+                href={url}
+                aria-label={dashboard.name}
+                title={dashboard.name}
+                onClick={onCardLinkClick}
+              >
+                {shortTitle}
+              </Link>
+              <StarToolbarButton
+                title={dashboard.name}
+                group="dashboard.grafana.app"
+                kind="Dashboard"
+                id={dashboard.uid}
+                onStarChange={onStarChange}
+              />
             </Stack>
-          )}
+
+            {showFolderNames && locationInfo && (
+              <Stack alignItems="start" direction="row" gap={0.5} height="25%">
+                <Icon name="folder" size="sm" className={css.dashlistCardIcon} aria-hidden="true" />
+                <Text color="secondary" variant="bodySmall" element="p">
+                  {locationInfo?.name}
+                </Text>
+              </Stack>
+            )}
+          </Stack>
         </Card>
       )}
     </>

public/app/plugins/panel/dashlist/styles.ts

@@ -32,6 +32,7 @@ export const getStyles = (theme: GrafanaTheme2) => {
         textDecoration: 'underline',
       },
       height: '100%',
+      paddingTop: theme.spacing(1.5),
 
       '&:hover': {
         backgroundImage: gradient,
@@ -41,5 +42,8 @@ export const getStyles = (theme: GrafanaTheme2) => {
     dashlistCardIcon: css({
       marginRight: theme.spacing(0.5),
     }),
+    dashlistCardLink: css({
+      paddingTop: theme.spacing(0.5),
+    }),
   };
 };

yarn.lock

@@ -3459,6 +3459,7 @@ __metadata:
     "@types/lodash": "npm:4.17.20"
     "@types/node": "npm:24.10.1"
     "@types/react": "npm:18.3.18"
+    "@types/react-table": "npm:^7.7.20"
     "@types/react-virtualized-auto-sizer": "npm:1.0.8"
     "@types/tinycolor2": "npm:1.4.6"
     babel-jest: "npm:29.7.0"
@@ -3469,6 +3470,7 @@ __metadata:
     jest-canvas-mock: "npm:2.5.2"
     lodash: "npm:4.17.21"
     react: "npm:18.3.1"
+    react-table: "npm:^7.8.0"
     react-use: "npm:17.6.0"
     react-virtualized-auto-sizer: "npm:1.0.26"
     rollup: "npm:^4.22.4"
@@ -11111,7 +11113,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-table@npm:7.7.20":
+"@types/react-table@npm:7.7.20, @types/react-table@npm:^7.7.20":
   version: 7.7.20
   resolution: "@types/react-table@npm:7.7.20"
   dependencies:
@@ -29323,7 +29325,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-table@npm:7.8.0":
+"react-table@npm:7.8.0, react-table@npm:^7.8.0":
   version: 7.8.0
   resolution: "react-table@npm:7.8.0"
   peerDependencies: