Improve naming consistency

* Add new Db2 plugin

* Fix ID

* Fix ID

* Run `i18n-extract`

* Linting

* Fix ID

* Linting

* Rename plugin

* Fix i18n entry

* Run `yarn i18n-extract`

.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
@@ -542,6 +543,7 @@ i18next.config.ts @grafana/grafana-frontend-platform
 /packages/grafana-data/tsconfig.json @grafana/grafana-frontend-platform
 /packages/grafana-data/test/ @grafana/grafana-frontend-platform
 /packages/grafana-data/typings/ @grafana/grafana-frontend-platform
+/packages/grafana-data/scripts/ @grafana/grafana-frontend-platform
 
 /packages/grafana-data/src/**/*logs* @grafana/observability-logs
 /packages/grafana-data/src/context/plugins/ @grafana/plugins-platform-frontend
@@ -657,6 +659,7 @@ i18next.config.ts @grafana/grafana-frontend-platform
 /packages/grafana-runtime/src/services/LocationService.tsx @grafana/grafana-search-navigate-organise
 /packages/grafana-runtime/src/services/LocationSrv.ts @grafana/grafana-search-navigate-organise
 /packages/grafana-runtime/src/services/live.ts @grafana/dashboards-squad
+/packages/grafana-runtime/src/services/pluginMeta @grafana/plugins-platform-frontend
 /packages/grafana-runtime/src/utils/chromeHeaderHeight.ts @grafana/grafana-search-navigate-organise
 /packages/grafana-runtime/src/utils/DataSourceWithBackend* @grafana/grafana-datasources-core-services
 /packages/grafana-runtime/src/utils/licensing.ts @grafana/grafana-operator-experience-squad

.golangci.yml

@@ -121,6 +121,8 @@ linters:
             - '**/pkg/tsdb/zipkin/**/*'
             - '**/pkg/tsdb/jaeger/*'
             - '**/pkg/tsdb/jaeger/**/*'
+            - '**/pkg/tsdb/elasticsearch/*'
+            - '**/pkg/tsdb/elasticsearch/**/*'
           deny:
             - pkg: github.com/grafana/grafana/pkg/api
               desc: Core plugins are not allowed to depend on Grafana core packages

apps/advisor/pkg/app/checks/datasourcecheck/check.go

@@ -28,7 +28,7 @@ type check struct {
 	PluginStore               pluginstore.Store
 	PluginContextProvider     PluginContextProvider
 	PluginClient              plugins.Client
-	PluginRepo                repo.Service
+	PluginRepo                checks.PluginInfoGetter
 	GrafanaVersion            string
 	pluginCanBeInstalledCache map[string]bool
 	pluginExistsCacheMu       sync.RWMutex
@@ -39,7 +39,7 @@ func New(
 	pluginStore pluginstore.Store,
 	pluginContextProvider PluginContextProvider,
 	pluginClient plugins.Client,
-	pluginRepo repo.Service,
+	pluginRepo checks.PluginInfoGetter,
 	grafanaVersion string,
 ) checks.Check {
 	return &check{

apps/advisor/pkg/app/checks/datasourcecheck/missing_plugin_step.go

@@ -15,7 +15,7 @@ import (
 
 type missingPluginStep struct {
 	PluginStore    pluginstore.Store
-	PluginRepo     repo.Service
+	PluginRepo     checks.PluginInfoGetter
 	GrafanaVersion string
 }
 

apps/advisor/pkg/app/checks/ifaces.go

@@ -5,6 +5,7 @@ import (
 
 	"github.com/grafana/grafana-app-sdk/logging"
 	advisorv0alpha1 "github.com/grafana/grafana/apps/advisor/pkg/apis/advisor/v0alpha1"
+	"github.com/grafana/grafana/pkg/plugins/repo"
 )
 
 // Check returns metadata about the check being executed and the list of Steps
@@ -37,3 +38,10 @@ type Step interface {
 	// Run executes the step for an item and returns a report
 	Run(ctx context.Context, log logging.Logger, obj *advisorv0alpha1.CheckSpec, item any) ([]advisorv0alpha1.CheckReportFailure, error)
 }
+
+// PluginInfoGetter is a minimal interface for retrieving plugin information from a repository.
+// It contains only the GetPluginsInfo method used by plugincheck and datasourcecheck.
+type PluginInfoGetter interface {
+	// GetPluginsInfo will return a list of plugins from grafana.com/api/plugins.
+	GetPluginsInfo(ctx context.Context, options repo.GetPluginsInfoOptions, compatOpts repo.CompatOpts) ([]repo.PluginInfo, error)
+}

apps/advisor/pkg/app/checks/plugincheck/check.go

@@ -17,7 +17,7 @@ const (
 
 func New(
 	pluginStore pluginstore.Store,
-	pluginRepo repo.Service,
+	pluginRepo checks.PluginInfoGetter,
 	updateChecker pluginchecker.PluginUpdateChecker,
 	pluginErrorResolver plugins.ErrorResolver,
 	grafanaVersion string,
@@ -33,7 +33,7 @@ func New(
 
 type check struct {
 	PluginStore         pluginstore.Store
-	PluginRepo          repo.Service
+	PluginRepo          checks.PluginInfoGetter
 	updateChecker       pluginchecker.PluginUpdateChecker
 	pluginErrorResolver plugins.ErrorResolver
 	GrafanaVersion      string

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/Makefile

@@ -1,9 +1,16 @@
 include ../sdk.mk
 
-.PHONY: generate # Run Grafana App SDK code generation
-generate: install-app-sdk update-app-sdk
+.PHONY: internal-generate # Run Grafana App SDK code generation
+internal-generate: install-app-sdk update-app-sdk
 	@$(APP_SDK_BIN) generate \
 		--source=./kinds/ \
 		--gogenpath=./pkg/apis \
 		--grouping=group \
-		--defencoding=none
+		--defencoding=none
+
+.PHONY: generate
+generate: internal-generate # copy files to packages/grafana-runtime/src/services/pluginMeta/types
+	rm -f ./packages/grafana-runtime/src/services/pluginMeta/types/*.ts 
+	cp plugin/src/generated/meta/v0alpha1/meta_object_gen.ts ../../packages/grafana-runtime/src/services/pluginMeta/types/meta_object_gen.ts
+	cp plugin/src/generated/meta/v0alpha1/types.spec.gen.ts ../../packages/grafana-runtime/src/services/pluginMeta/types/types.spec.gen.ts
+	cp plugin/src/generated/meta/v0alpha1/types.status.gen.ts ../../packages/grafana-runtime/src/services/pluginMeta/types/types.status.gen.ts

apps/plugins/README.md

@@ -4,8 +4,7 @@ API documentation is available at http://localhost:3000/swagger?api=plugins.graf
 
 ## Codegen
 
-- Go: `make generate`
-- Frontend: Follow instructions in this [README](../..//packages/grafana-api-clients/README.md)
+- Go and TypeScript: `make generate`
 
 ## Plugin sync
 

apps/plugins/kinds/manifest.cue

@@ -11,7 +11,7 @@ manifest: {
 v0alpha1Version: {
 	served: true
 	codegen: {
-		ts: {enabled: false}
+		ts: {enabled: true}
 		go: {enabled: true}
 	}
 	kinds: [

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

@@ -13,9 +13,10 @@ const (
 )
 
 // PluginAssetsCalculator is an interface for calculating plugin asset information.
-// LocalProvider requires this to calculate loading strategy.
+// 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.
@@ -26,7 +27,7 @@ type LocalProvider struct {
 }
 
 // NewLocalProvider creates a new LocalProvider for locally installed plugins.
-// pluginAssets is required for calculating loading strategy.
+// pluginAssets is required for calculating loading strategy and module hash.
 func NewLocalProvider(pluginStore pluginstore.Store, pluginAssets PluginAssetsCalculator) *LocalProvider {
 	return &LocalProvider{
 		store:        pluginStore,
@@ -42,7 +43,7 @@ func (p *LocalProvider) GetMeta(ctx context.Context, pluginID, version string) (
 	}
 
 	loadingStrategy := p.pluginAssets.LoadingStrategy(ctx, plugin)
-	moduleHash := plugin.ModuleHash
+	moduleHash := p.pluginAssets.ModuleHash(ctx, plugin)
 
 	spec := pluginStorePluginToMeta(plugin, loadingStrategy, moduleHash)
 	return &Result{

apps/plugins/plugin/src/generated/meta/v0alpha1/meta_object_gen.ts

@@ -0,0 +1,49 @@
+/*
+ * This file was generated by grafana-app-sdk. DO NOT EDIT.
+ */
+import { Spec } from './types.spec.gen';
+import { Status } from './types.status.gen';
+
+export interface Metadata {
+    name: string;
+    namespace: string;
+    generateName?: string;
+    selfLink?: string;
+    uid?: string;
+    resourceVersion?: string;
+    generation?: number;
+    creationTimestamp?: string;
+    deletionTimestamp?: string;
+    deletionGracePeriodSeconds?: number;
+    labels?: Record<string, string>;
+    annotations?: Record<string, string>;
+    ownerReferences?: OwnerReference[];
+    finalizers?: string[];
+    managedFields?: ManagedFieldsEntry[];
+}
+
+export interface OwnerReference {
+    apiVersion: string;
+    kind: string;
+    name: string;
+    uid: string;
+    controller?: boolean;
+    blockOwnerDeletion?: boolean;
+}
+
+export interface ManagedFieldsEntry {
+    manager?: string;
+    operation?: string;
+    apiVersion?: string;
+    time?: string;
+    fieldsType?: string;
+    subresource?: string;
+}
+
+export interface Meta {
+    kind: string;
+    apiVersion: string;
+    metadata: Metadata;
+    spec: Spec;
+    status: Status;
+}

apps/plugins/plugin/src/generated/meta/v0alpha1/types.metadata.gen.ts

@@ -0,0 +1,30 @@
+// Code generated - EDITING IS FUTILE. DO NOT EDIT.
+
+// metadata contains embedded CommonMetadata and can be extended with custom string fields
+// TODO: use CommonMetadata instead of redefining here; currently needs to be defined here
+// without external reference as using the CommonMetadata reference breaks thema codegen.
+export interface Metadata {
+	updateTimestamp: string;
+	createdBy: string;
+	uid: string;
+	creationTimestamp: string;
+	deletionTimestamp?: string;
+	finalizers: string[];
+	resourceVersion: string;
+	generation: number;
+	updatedBy: string;
+	labels: Record<string, string>;
+}
+
+export const defaultMetadata = (): Metadata => ({
+	updateTimestamp: "",
+	createdBy: "",
+	uid: "",
+	creationTimestamp: "",
+	finalizers: [],
+	resourceVersion: "",
+	generation: 0,
+	updatedBy: "",
+	labels: {},
+});
+

apps/plugins/plugin/src/generated/meta/v0alpha1/types.spec.gen.ts

@@ -0,0 +1,278 @@
+// Code generated - EDITING IS FUTILE. DO NOT EDIT.
+
+// JSON configuration schema for Grafana plugins
+// Converted from: https://github.com/grafana/grafana/blob/main/docs/sources/developers/plugins/plugin.schema.json
+export interface JSONData {
+	// Unique name of the plugin
+	id: string;
+	// Plugin type
+	type: "app" | "datasource" | "panel" | "renderer";
+	// Human-readable name of the plugin
+	name: string;
+	// Metadata for the plugin
+	info: Info;
+	// Dependency information
+	dependencies: Dependencies;
+	// Optional fields
+	alerting?: boolean;
+	annotations?: boolean;
+	autoEnabled?: boolean;
+	backend?: boolean;
+	buildMode?: string;
+	builtIn?: boolean;
+	category?: "tsdb" | "logging" | "cloud" | "tracing" | "profiling" | "sql" | "enterprise" | "iot" | "other";
+	enterpriseFeatures?: EnterpriseFeatures;
+	executable?: string;
+	hideFromList?: boolean;
+	// +listType=atomic
+	includes?: Include[];
+	logs?: boolean;
+	metrics?: boolean;
+	multiValueFilterOperators?: boolean;
+	pascalName?: string;
+	preload?: boolean;
+	queryOptions?: QueryOptions;
+	// +listType=atomic
+	routes?: Route[];
+	skipDataQuery?: boolean;
+	state?: "alpha" | "beta";
+	streaming?: boolean;
+	suggestions?: boolean;
+	tracing?: boolean;
+	iam?: IAM;
+	// +listType=atomic
+	roles?: Role[];
+	extensions?: Extensions;
+}
+
+export const defaultJSONData = (): JSONData => ({
+	id: "",
+	type: "app",
+	name: "",
+	info: defaultInfo(),
+	dependencies: defaultDependencies(),
+});
+
+export interface Info {
+	// Required fields
+	// +listType=set
+	keywords: string[];
+	logos: {
+		small: string;
+		large: string;
+	};
+	updated: string;
+	version: string;
+	// Optional fields
+	author?: {
+		name?: string;
+		email?: string;
+		url?: string;
+	};
+	description?: string;
+	// +listType=atomic
+	links?: {
+		name?: string;
+		url?: string;
+	}[];
+	// +listType=atomic
+	screenshots?: {
+		name?: string;
+		path?: string;
+	}[];
+}
+
+export const defaultInfo = (): Info => ({
+	keywords: [],
+	logos: {
+	small: "",
+	large: "",
+},
+	updated: "",
+	version: "",
+});
+
+export interface Dependencies {
+	// Required field
+	grafanaDependency: string;
+	// Optional fields
+	grafanaVersion?: string;
+	// +listType=set
+	// +listMapKey=id
+	plugins?: {
+		id: string;
+		type: "app" | "datasource" | "panel";
+		name: string;
+	}[];
+	extensions?: {
+		// +listType=set
+		exposedComponents?: string[];
+	};
+}
+
+export const defaultDependencies = (): Dependencies => ({
+	grafanaDependency: "",
+});
+
+export interface EnterpriseFeatures {
+	// Allow additional properties
+	healthDiagnosticsErrors?: boolean;
+}
+
+export const defaultEnterpriseFeatures = (): EnterpriseFeatures => ({
+	healthDiagnosticsErrors: false,
+});
+
+export interface Include {
+	uid?: string;
+	type?: "dashboard" | "page" | "panel" | "datasource";
+	name?: string;
+	component?: string;
+	role?: "Admin" | "Editor" | "Viewer" | "None";
+	action?: string;
+	path?: string;
+	addToNav?: boolean;
+	defaultNav?: boolean;
+	icon?: string;
+}
+
+export const defaultInclude = (): Include => ({
+});
+
+export interface QueryOptions {
+	maxDataPoints?: boolean;
+	minInterval?: boolean;
+	cacheTimeout?: boolean;
+}
+
+export const defaultQueryOptions = (): QueryOptions => ({
+});
+
+export interface Route {
+	path?: string;
+	method?: string;
+	url?: string;
+	reqSignedIn?: boolean;
+	reqRole?: string;
+	reqAction?: string;
+	// +listType=atomic
+	headers?: string[];
+	body?: Record<string, any>;
+	tokenAuth?: {
+		url?: string;
+		// +listType=set
+		scopes?: string[];
+		params?: Record<string, any>;
+	};
+	jwtTokenAuth?: {
+		url?: string;
+		// +listType=set
+		scopes?: string[];
+		params?: Record<string, any>;
+	};
+	// +listType=atomic
+	urlParams?: {
+		name?: string;
+		content?: string;
+	}[];
+}
+
+export const defaultRoute = (): Route => ({
+});
+
+export interface IAM {
+	// +listType=atomic
+	permissions?: {
+		action?: string;
+		scope?: string;
+	}[];
+}
+
+export const defaultIAM = (): IAM => ({
+});
+
+export interface Role {
+	role?: {
+		name?: string;
+		description?: string;
+		// +listType=atomic
+		permissions?: {
+			action?: string;
+			scope?: string;
+		}[];
+	};
+	// +listType=set
+	grants?: string[];
+}
+
+export const defaultRole = (): Role => ({
+});
+
+export interface Extensions {
+	// +listType=atomic
+	addedComponents?: {
+		// +listType=set
+		targets: string[];
+		title: string;
+		description?: string;
+	}[];
+	// +listType=atomic
+	addedLinks?: {
+		// +listType=set
+		targets: string[];
+		title: string;
+		description?: string;
+	}[];
+	// +listType=atomic
+	addedFunctions?: {
+		// +listType=set
+		targets: string[];
+		title: string;
+		description?: string;
+	}[];
+	// +listType=set
+	// +listMapKey=id
+	exposedComponents?: {
+		id: string;
+		title?: string;
+		description?: string;
+	}[];
+	// +listType=set
+	// +listMapKey=id
+	extensionPoints?: {
+		id: string;
+		title?: string;
+		description?: string;
+	}[];
+}
+
+export const defaultExtensions = (): Extensions => ({
+});
+
+export interface Spec {
+	pluginJson: JSONData;
+	class: "core" | "external";
+	module?: {
+		path: string;
+		hash?: string;
+		loadingStrategy?: "fetch" | "script";
+	};
+	baseURL?: string;
+	signature?: {
+		status: "internal" | "valid" | "invalid" | "modified" | "unsigned";
+		type?: "grafana" | "commercial" | "community" | "private" | "private-glob";
+		org?: string;
+	};
+	angular?: {
+		detected: boolean;
+	};
+	translations?: Record<string, string>;
+	// +listType=atomic
+	children?: string[];
+}
+
+export const defaultSpec = (): Spec => ({
+	pluginJson: defaultJSONData(),
+	class: "core",
+});
+

apps/plugins/plugin/src/generated/meta/v0alpha1/types.status.gen.ts

@@ -0,0 +1,30 @@
+// Code generated - EDITING IS FUTILE. DO NOT EDIT.
+
+export interface OperatorState {
+	// lastEvaluation is the ResourceVersion last evaluated
+	lastEvaluation: string;
+	// state describes the state of the lastEvaluation.
+	// It is limited to three possible states for machine evaluation.
+	state: "success" | "in_progress" | "failed";
+	// descriptiveState is an optional more descriptive state field which has no requirements on format
+	descriptiveState?: string;
+	// details contains any extra information that is operator-specific
+	details?: Record<string, any>;
+}
+
+export const defaultOperatorState = (): OperatorState => ({
+	lastEvaluation: "",
+	state: "success",
+});
+
+export interface Status {
+	// operatorStates is a map of operator ID to operator state evaluations.
+	// Any operator which consumes this kind SHOULD add its state evaluation information to this field.
+	operatorStates?: Record<string, OperatorState>;
+	// additionalFields is reserved for future use
+	additionalFields?: Record<string, any>;
+}
+
+export const defaultStatus = (): Status => ({
+});
+

apps/plugins/plugin/src/generated/plugin/v0alpha1/plugin_object_gen.ts

@@ -0,0 +1,49 @@
+/*
+ * This file was generated by grafana-app-sdk. DO NOT EDIT.
+ */
+import { Spec } from './types.spec.gen';
+import { Status } from './types.status.gen';
+
+export interface Metadata {
+    name: string;
+    namespace: string;
+    generateName?: string;
+    selfLink?: string;
+    uid?: string;
+    resourceVersion?: string;
+    generation?: number;
+    creationTimestamp?: string;
+    deletionTimestamp?: string;
+    deletionGracePeriodSeconds?: number;
+    labels?: Record<string, string>;
+    annotations?: Record<string, string>;
+    ownerReferences?: OwnerReference[];
+    finalizers?: string[];
+    managedFields?: ManagedFieldsEntry[];
+}
+
+export interface OwnerReference {
+    apiVersion: string;
+    kind: string;
+    name: string;
+    uid: string;
+    controller?: boolean;
+    blockOwnerDeletion?: boolean;
+}
+
+export interface ManagedFieldsEntry {
+    manager?: string;
+    operation?: string;
+    apiVersion?: string;
+    time?: string;
+    fieldsType?: string;
+    subresource?: string;
+}
+
+export interface Plugin {
+    kind: string;
+    apiVersion: string;
+    metadata: Metadata;
+    spec: Spec;
+    status: Status;
+}

apps/plugins/plugin/src/generated/plugin/v0alpha1/types.metadata.gen.ts

@@ -0,0 +1,30 @@
+// Code generated - EDITING IS FUTILE. DO NOT EDIT.
+
+// metadata contains embedded CommonMetadata and can be extended with custom string fields
+// TODO: use CommonMetadata instead of redefining here; currently needs to be defined here
+// without external reference as using the CommonMetadata reference breaks thema codegen.
+export interface Metadata {
+	updateTimestamp: string;
+	createdBy: string;
+	uid: string;
+	creationTimestamp: string;
+	deletionTimestamp?: string;
+	finalizers: string[];
+	resourceVersion: string;
+	generation: number;
+	updatedBy: string;
+	labels: Record<string, string>;
+}
+
+export const defaultMetadata = (): Metadata => ({
+	updateTimestamp: "",
+	createdBy: "",
+	uid: "",
+	creationTimestamp: "",
+	finalizers: [],
+	resourceVersion: "",
+	generation: 0,
+	updatedBy: "",
+	labels: {},
+});
+

apps/plugins/plugin/src/generated/plugin/v0alpha1/types.spec.gen.ts

@@ -0,0 +1,13 @@
+// Code generated - EDITING IS FUTILE. DO NOT EDIT.
+
+export interface Spec {
+	id: string;
+	version: string;
+	url?: string;
+}
+
+export const defaultSpec = (): Spec => ({
+	id: "",
+	version: "",
+});
+

apps/plugins/plugin/src/generated/plugin/v0alpha1/types.status.gen.ts

@@ -0,0 +1,30 @@
+// Code generated - EDITING IS FUTILE. DO NOT EDIT.
+
+export interface OperatorState {
+	// lastEvaluation is the ResourceVersion last evaluated
+	lastEvaluation: string;
+	// state describes the state of the lastEvaluation.
+	// It is limited to three possible states for machine evaluation.
+	state: "success" | "in_progress" | "failed";
+	// descriptiveState is an optional more descriptive state field which has no requirements on format
+	descriptiveState?: string;
+	// details contains any extra information that is operator-specific
+	details?: Record<string, any>;
+}
+
+export const defaultOperatorState = (): OperatorState => ({
+	lastEvaluation: "",
+	state: "success",
+});
+
+export interface Status {
+	// operatorStates is a map of operator ID to operator state evaluations.
+	// Any operator which consumes this kind SHOULD add its state evaluation information to this field.
+	operatorStates?: Record<string, OperatorState>;
+	// additionalFields is reserved for future use
+	additionalFields?: Record<string, any>;
+}
+
+export const defaultStatus = (): Status => ({
+});
+

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:**

docs/sources/datasources/google-cloud-monitoring/_index.md

@@ -103,10 +103,11 @@ To configure basic settings for the data source, complete the following steps:
 
 1. Set the data source's basic configuration options:
 
-   | Name        | Description                                                              |
-   | ----------- | ------------------------------------------------------------------------ |
-   | **Name**    | Sets the name you use to refer to the data source in panels and queries. |
-   | **Default** | Sets whether the data source is pre-selected for new panels.             |
+   | Name                | Description                                                                                                                                                                                                                                                                                                                                                                                                                       |
+   | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+   | **Name**            | Sets the name you use to refer to the data source in panels and queries.                                                                                                                                                                                                                                                                                                                                                          |
+   | **Default**         | Sets whether the data source is pre-selected for new panels.                                                                                                                                                                                                                                                                                                                                                                      |
+   | **Universe Domain** | The universe domain to connect to. For more information, refer to [Documentation on universe domains](https://docs.cloud.google.com/python/docs/reference/monitoring/latest/google.cloud.monitoring_v3.services.service_monitoring_service.ServiceMonitoringServiceAsyncClient#google_cloud_monitoring_v3_services_service_monitoring_service_ServiceMonitoringServiceAsyncClient_universe_domain). Defaults to `googleapis.com`. |
 
 ### Provision the data source
 
@@ -129,6 +130,7 @@ datasources:
       clientEmail: stackdriver@myproject.iam.gserviceaccount.com
       authenticationType: jwt
       defaultProject: my-project-name
+      universeDomain: googleapis.com
     secureJsonData:
       privateKey: |
         -----BEGIN PRIVATE KEY-----
@@ -152,6 +154,7 @@ datasources:
       clientEmail: stackdriver@myproject.iam.gserviceaccount.com
       authenticationType: jwt
       defaultProject: my-project-name
+      universeDomain: googleapis.com
       privateKeyPath: /etc/secrets/gce.pem
 ```
 
@@ -166,6 +169,7 @@ datasources:
     access: proxy
     jsonData:
       authenticationType: gce
+      universeDomain: googleapis.com
 ```
 
 ## Import pre-configured dashboards

docs/sources/introduction/grafana-enterprise.md

@@ -87,6 +87,7 @@ With a Grafana Enterprise license, you also get access to premium data sources,
 - [CockroachDB](/grafana/plugins/grafana-cockroachdb-datasource)
 - [Databricks](/grafana/plugins/grafana-databricks-datasource)
 - [DataDog](/grafana/plugins/grafana-datadog-datasource)
+- [IBM Db2](/grafana/plugins/grafana-ibmdb2-datasource)
 - [Drone](/grafana/plugins/grafana-drone-datasource)
 - [DynamoDB](/grafana/plugins/grafana-dynamodb-datasource/)
 - [Dynatrace](/grafana/plugins/grafana-dynatrace-datasource)

docs/sources/setup-grafana/configure-grafana/_index.md

@@ -2030,6 +2030,44 @@ For example: `disabled_labels=grafana_folder`
 
 <hr>
 
+### `[unified_alerting.state_history]`
+
+This section configures where Grafana Alerting writes alert state history. Refer to [Configure alert state history](/docs/grafana/<GRAFANA_VERSION>/alerting/set-up/configure-alert-state-history/) for end-to-end setup and examples.
+
+#### `enabled `
+
+Enables recording alert state history. Default is `false`.
+
+#### `backend `
+
+Select the backend used to store alert state history. Supported values: `loki`, `prometheus`, `multiple`.
+
+#### `loki_remote_url `
+
+The URL of the Loki server used when `backend = loki` (or when `backend = multiple` and Loki is a primary/secondary).
+
+#### `prometheus_target_datasource_uid `
+
+Target Prometheus data source UID used for writing alert state changes when `backend = prometheus` (or when `backend = multiple` and Prometheus is a secondary).
+
+#### `prometheus_metric_name `
+
+Optional. Metric name for the alert state metric. Default is `GRAFANA_ALERTS`.
+
+#### `prometheus_write_timeout `
+
+Optional. Timeout for writing alert state data to the target data source. Default is `10s`.
+
+#### `primary `
+
+Used only when `backend = multiple`. Selects the primary backend (for example `loki`).
+
+#### `secondaries `
+
+Used only when `backend = multiple`. Comma-separated list of secondary backends (for example `prometheus`).
+
+<hr>
+
 ### `[unified_alerting.state_history.annotations]`
 
 This section controls retention of annotations automatically created while evaluating alert rules when alerting state history backend is configured to be annotations (see setting [unified_alerting.state_history].backend)

docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md

@@ -83,6 +83,7 @@ Most [generally available](https://grafana.com/docs/release-life-cycle/#general-
 | `reportingRetries`                | Enables rendering retries for the reporting feature                                                    |
 | `externalServiceAccounts`         | Automatic service account and token setup for plugins                                                  |
 | `cloudWatchBatchQueries`          | Runs CloudWatch metrics queries as separate batches                                                    |
+| `dashboardNewLayouts`             | Enables new dashboard layouts                                                                          |
 | `pdfTables`                       | Enables generating table data as PDF in reporting                                                      |
 | `canvasPanelPanZoom`              | Allow pan and zoom in canvas panel                                                                     |
 | `alertingSaveStateCompressed`     | Enables the compressed protobuf-based alert state storage. Default is enabled.                         |

docs/sources/visualizations/panels-visualizations/visualizations/datagrid/index.md

@@ -30,7 +30,9 @@ refs:
 
 # Datagrid
 
-{{< docs/experimental product="The datagrid visualization" featureFlag="`enableDatagridEditing`" >}}
+{{< admonition type="caution" >}}
+Starting with Grafana 12.4, Datagrid is deprecated. It will be removed in version 13.0.
+{{< /admonition >}}
 
 Datagrids offer you the ability to create, edit, and fine-tune data within Grafana. As such, this panel can act as a data source for other panels
 inside a dashboard.

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": {}
+}

eslint-suppressions.json

@@ -1337,6 +1337,11 @@
       "count": 2
     }
   },
+  "public/app/features/alerting/unified/api/onCallApi.test.ts": {
+    "no-restricted-syntax": {
+      "count": 2
+    }
+  },
   "public/app/features/alerting/unified/components/AnnotationDetailsField.tsx": {
     "@typescript-eslint/consistent-type-assertions": {
       "count": 1
@@ -1377,6 +1382,11 @@
       "count": 1
     }
   },
+  "public/app/features/alerting/unified/components/import-to-gma/ConfirmConvertModal.test.tsx": {
+    "no-restricted-syntax": {
+      "count": 1
+    }
+  },
   "public/app/features/alerting/unified/components/import-to-gma/NamespaceAndGroupFilter.tsx": {
     "no-restricted-syntax": {
       "count": 2
@@ -1617,11 +1627,31 @@
       "count": 1
     }
   },
+  "public/app/features/alerting/unified/mocks/server/configure.ts": {
+    "no-restricted-syntax": {
+      "count": 1
+    }
+  },
+  "public/app/features/alerting/unified/mocks/server/handlers/plugins.ts": {
+    "no-restricted-syntax": {
+      "count": 1
+    }
+  },
+  "public/app/features/alerting/unified/rule-editor/clone.utils.test.tsx": {
+    "no-restricted-syntax": {
+      "count": 2
+    }
+  },
   "public/app/features/alerting/unified/rule-editor/formDefaults.ts": {
     "no-restricted-syntax": {
       "count": 6
     }
   },
+  "public/app/features/alerting/unified/rule-list/hooks/grafanaFilter.test.ts": {
+    "no-restricted-syntax": {
+      "count": 1
+    }
+  },
   "public/app/features/alerting/unified/types/alerting.ts": {
     "@typescript-eslint/no-explicit-any": {
       "count": 5
@@ -1632,6 +1662,16 @@
       "count": 1
     }
   },
+  "public/app/features/alerting/unified/utils/config.test.ts": {
+    "no-restricted-syntax": {
+      "count": 6
+    }
+  },
+  "public/app/features/alerting/unified/utils/config.ts": {
+    "no-restricted-syntax": {
+      "count": 1
+    }
+  },
   "public/app/features/alerting/unified/utils/datasource.ts": {
     "no-restricted-syntax": {
       "count": 2
@@ -1663,12 +1703,20 @@
       "count": 1
     }
   },
+  "public/app/features/alerting/unified/utils/rules.test.ts": {
+    "no-restricted-syntax": {
+      "count": 1
+    }
+  },
   "public/app/features/alerting/unified/utils/rules.ts": {
     "@typescript-eslint/consistent-type-assertions": {
       "count": 3
     },
     "@typescript-eslint/no-explicit-any": {
       "count": 1
+    },
+    "no-restricted-syntax": {
+      "count": 1
     }
   },
   "public/app/features/annotations/components/StandardAnnotationQueryEditor.tsx": {
@@ -1724,6 +1772,16 @@
       "count": 1
     }
   },
+  "public/app/features/connections/components/AdvisorRedirectNotice/AdvisorRedirectNotice.test.tsx": {
+    "no-restricted-syntax": {
+      "count": 2
+    }
+  },
+  "public/app/features/connections/components/AdvisorRedirectNotice/AdvisorRedirectNotice.tsx": {
+    "no-restricted-syntax": {
+      "count": 1
+    }
+  },
   "public/app/features/connections/tabs/ConnectData/ConnectData.tsx": {
     "@typescript-eslint/consistent-type-assertions": {
       "count": 1
@@ -2063,6 +2121,11 @@
       "count": 1
     }
   },
+  "public/app/features/dashboard/components/GenAI/utils.ts": {
+    "no-restricted-syntax": {
+      "count": 1
+    }
+  },
   "public/app/features/dashboard/components/HelpWizard/HelpWizard.tsx": {
     "no-restricted-syntax": {
       "count": 3
@@ -2889,6 +2952,71 @@
       "count": 1
     }
   },
+  "public/app/features/plugins/extensions/registry/AddedComponentsRegistry.test.ts": {
+    "no-restricted-syntax": {
+      "count": 6
+    }
+  },
+  "public/app/features/plugins/extensions/registry/AddedFunctionsRegistry.test.ts": {
+    "no-restricted-syntax": {
+      "count": 6
+    }
+  },
+  "public/app/features/plugins/extensions/registry/AddedLinksRegistry.test.ts": {
+    "no-restricted-syntax": {
+      "count": 6
+    }
+  },
+  "public/app/features/plugins/extensions/registry/ExposedComponentsRegistry.test.ts": {
+    "no-restricted-syntax": {
+      "count": 6
+    }
+  },
+  "public/app/features/plugins/extensions/usePluginComponent.test.tsx": {
+    "no-restricted-syntax": {
+      "count": 3
+    }
+  },
+  "public/app/features/plugins/extensions/usePluginComponents.test.tsx": {
+    "no-restricted-syntax": {
+      "count": 2
+    }
+  },
+  "public/app/features/plugins/extensions/usePluginFunctions.test.tsx": {
+    "no-restricted-syntax": {
+      "count": 2
+    }
+  },
+  "public/app/features/plugins/extensions/usePluginLinks.test.tsx": {
+    "no-restricted-syntax": {
+      "count": 2
+    }
+  },
+  "public/app/features/plugins/extensions/utils.test.tsx": {
+    "no-restricted-syntax": {
+      "count": 27
+    }
+  },
+  "public/app/features/plugins/extensions/utils.tsx": {
+    "no-restricted-syntax": {
+      "count": 7
+    }
+  },
+  "public/app/features/plugins/extensions/validators.test.tsx": {
+    "no-restricted-syntax": {
+      "count": 30
+    }
+  },
+  "public/app/features/plugins/extensions/validators.ts": {
+    "no-restricted-syntax": {
+      "count": 4
+    }
+  },
+  "public/app/features/plugins/sandbox/codeLoader.ts": {
+    "no-restricted-syntax": {
+      "count": 1
+    }
+  },
   "public/app/features/plugins/sandbox/distortions.ts": {
     "@typescript-eslint/consistent-type-assertions": {
       "count": 1
@@ -3615,46 +3743,21 @@
       "count": 1
     }
   },
-  "public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/DateHistogramSettingsEditor.tsx": {
-    "@typescript-eslint/consistent-type-assertions": {
-      "count": 1
-    }
-  },
-  "public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/TermsSettingsEditor.tsx": {
-    "@typescript-eslint/consistent-type-assertions": {
-      "count": 1
-    }
-  },
   "public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/aggregations.ts": {
     "@typescript-eslint/consistent-type-assertions": {
       "count": 1
     }
   },
-  "public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/state/reducer.ts": {
-    "@typescript-eslint/consistent-type-assertions": {
-      "count": 1
-    }
-  },
   "public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/MetricEditor.tsx": {
     "@typescript-eslint/consistent-type-assertions": {
       "count": 1
     }
   },
-  "public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/SettingField.tsx": {
-    "@typescript-eslint/consistent-type-assertions": {
-      "count": 2
-    }
-  },
   "public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/aggregations.ts": {
     "@typescript-eslint/consistent-type-assertions": {
       "count": 1
     }
   },
-  "public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/state/reducer.ts": {
-    "@typescript-eslint/consistent-type-assertions": {
-      "count": 1
-    }
-  },
   "public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx": {
     "no-restricted-syntax": {
       "count": 1

eslint.config.js

@@ -117,6 +117,8 @@ module.exports = [
       'scripts/grafana-server/tmp',
       'packages/grafana-ui/src/graveyard', // deprecated UI components slated for removal
       'public/build-swagger', // swagger build output
+      'apps/plugins/plugin/src/generated/meta/v0alpha1',
+      'apps/plugins/plugin/src/generated/plugin/v0alpha1',
     ],
   },
   ...grafanaConfig,
@@ -575,6 +577,42 @@ module.exports = [
             "Property[key.name='a11y'][value.type='ObjectExpression'] Property[key.name='test'][value.value='off']",
           message: 'Skipping a11y tests is not allowed. Please fix the component or story instead.',
         },
+        {
+          selector: 'MemberExpression[object.name="config"][property.name="apps"]',
+          message:
+            'Usage of config.apps is not allowed. Use the function getAppPluginMetas or useAppPluginMetas from @grafana/runtime instead',
+        },
+      ],
+    },
+  },
+  {
+    files: [...commonTestIgnores],
+    ignores: [
+      // FIXME: Remove once all enterprise issues are fixed -
+      // we don't have a suppressions file/approach for enterprise code yet
+      ...enterpriseIgnores,
+    ],
+    rules: {
+      'no-restricted-syntax': [
+        'error',
+        {
+          selector: 'MemberExpression[object.name="config"][property.name="apps"]',
+          message:
+            'Usage of config.apps is not allowed. Use the function getAppPluginMetas or useAppPluginMetas from @grafana/runtime instead',
+        },
+      ],
+    },
+  },
+  {
+    files: [...enterpriseIgnores],
+    rules: {
+      'no-restricted-syntax': [
+        'error',
+        {
+          selector: 'MemberExpression[object.name="config"][property.name="apps"]',
+          message:
+            'Usage of config.apps is not allowed. Use the function getAppPluginMetas or useAppPluginMetas from @grafana/runtime instead',
+        },
       ],
     },
   },

go.mod

@@ -44,8 +44,8 @@ require (
 	github.com/beevik/etree v1.4.1 // @grafana/grafana-backend-group
 	github.com/benbjohnson/clock v1.3.5 // @grafana/alerting-backend
 	github.com/blang/semver/v4 v4.0.0 // indirect; @grafana/grafana-developer-enablement-squad
-	github.com/blevesearch/bleve/v2 v2.5.0 // @grafana/grafana-search-and-storage
-	github.com/blevesearch/bleve_index_api v1.2.7 // @grafana/grafana-search-and-storage
+	github.com/blevesearch/bleve/v2 v2.5.7 // @grafana/grafana-search-and-storage
+	github.com/blevesearch/bleve_index_api v1.3.0 // @grafana/grafana-search-and-storage
 	github.com/blugelabs/bluge v0.2.2 // @grafana/grafana-backend-group
 	github.com/blugelabs/bluge_segment_api v0.2.0 // @grafana/grafana-backend-group
 	github.com/bradfitz/gomemcache v0.0.0-20250403215159-8d39553ac7cf // @grafana/grafana-backend-group
@@ -365,22 +365,22 @@ require (
 	github.com/beorn7/perks v1.0.1 // indirect
 	github.com/bits-and-blooms/bitset v1.22.0 // indirect
 	github.com/blang/semver v3.5.1+incompatible // indirect
-	github.com/blevesearch/geo v0.1.20 // indirect
-	github.com/blevesearch/go-faiss v1.0.25 // indirect
+	github.com/blevesearch/geo v0.2.4 // indirect
+	github.com/blevesearch/go-faiss v1.0.26 // indirect
 	github.com/blevesearch/go-porterstemmer v1.0.3 // indirect
 	github.com/blevesearch/gtreap v0.1.1 // indirect
 	github.com/blevesearch/mmap-go v1.0.4 // indirect
-	github.com/blevesearch/scorch_segment_api/v2 v2.3.9 // indirect
+	github.com/blevesearch/scorch_segment_api/v2 v2.3.13 // indirect
 	github.com/blevesearch/segment v0.9.1 // indirect
 	github.com/blevesearch/snowballstem v0.9.0 // indirect
 	github.com/blevesearch/upsidedown_store_api v1.0.2 // indirect
 	github.com/blevesearch/vellum v1.1.0 // indirect
-	github.com/blevesearch/zapx/v11 v11.4.1 // indirect
-	github.com/blevesearch/zapx/v12 v12.4.1 // indirect
-	github.com/blevesearch/zapx/v13 v13.4.1 // indirect
-	github.com/blevesearch/zapx/v14 v14.4.1 // indirect
-	github.com/blevesearch/zapx/v15 v15.4.1 // indirect
-	github.com/blevesearch/zapx/v16 v16.2.2 // indirect
+	github.com/blevesearch/zapx/v11 v11.4.2 // indirect
+	github.com/blevesearch/zapx/v12 v12.4.2 // indirect
+	github.com/blevesearch/zapx/v13 v13.4.2 // indirect
+	github.com/blevesearch/zapx/v14 v14.4.2 // indirect
+	github.com/blevesearch/zapx/v15 v15.4.2 // indirect
+	github.com/blevesearch/zapx/v16 v16.2.8 // indirect
 	github.com/bluele/gcache v0.0.2 // indirect
 	github.com/blugelabs/ice v1.0.0 // indirect
 	github.com/blugelabs/ice/v2 v2.0.1 // indirect
@@ -443,7 +443,6 @@ require (
 	github.com/golang-jwt/jwt/v5 v5.3.0 // indirect
 	github.com/golang-sql/civil v0.0.0-20220223132316-b832511892a9 // indirect
 	github.com/golang-sql/sqlexp v0.1.0 // indirect
-	github.com/golang/geo v0.0.0-20210211234256-740aa86cb551 // indirect
 	github.com/gomodule/redigo v1.8.9 // indirect
 	github.com/google/btree v1.1.3 // indirect
 	github.com/google/cel-go v0.26.1 // indirect

go.sum

@@ -931,14 +931,14 @@ github.com/blang/semver v3.5.1+incompatible h1:cQNTCjp13qL8KC3Nbxr/y2Bqb63oX6wdn
 github.com/blang/semver v3.5.1+incompatible/go.mod h1:kRBLl5iJ+tD4TcOOxsy/0fnwebNt5EWlYSAyrTnjyyk=
 github.com/blang/semver/v4 v4.0.0 h1:1PFHFE6yCCTv8C1TeyNNarDzntLi7wMI5i/pzqYIsAM=
 github.com/blang/semver/v4 v4.0.0/go.mod h1:IbckMUScFkM3pff0VJDNKRiT6TG/YpiHIM2yvyW5YoQ=
-github.com/blevesearch/bleve/v2 v2.5.0 h1:HzYqBy/5/M9Ul9ESEmXzN/3Jl7YpmWBdHM/+zzv/3k4=
-github.com/blevesearch/bleve/v2 v2.5.0/go.mod h1:PcJzTPnEynO15dCf9isxOga7YFRa/cMSsbnRwnszXUk=
-github.com/blevesearch/bleve_index_api v1.2.7 h1:c8r9vmbaYQroAMSGag7zq5gEVPiuXrUQDqfnj7uYZSY=
-github.com/blevesearch/bleve_index_api v1.2.7/go.mod h1:rKQDl4u51uwafZxFrPD1R7xFOwKnzZW7s/LSeK4lgo0=
-github.com/blevesearch/geo v0.1.20 h1:paaSpu2Ewh/tn5DKn/FB5SzvH0EWupxHEIwbCk/QPqM=
-github.com/blevesearch/geo v0.1.20/go.mod h1:DVG2QjwHNMFmjo+ZgzrIq2sfCh6rIHzy9d9d0B59I6w=
-github.com/blevesearch/go-faiss v1.0.25 h1:lel1rkOUGbT1CJ0YgzKwC7k+XH0XVBHnCVWahdCXk4U=
-github.com/blevesearch/go-faiss v1.0.25/go.mod h1:OMGQwOaRRYxrmeNdMrXJPvVx8gBnvE5RYrr0BahNnkk=
+github.com/blevesearch/bleve/v2 v2.5.7 h1:2d9YrL5zrX5EBBW++GOaEKjE+NPWeZGaX77IM26m1Z8=
+github.com/blevesearch/bleve/v2 v2.5.7/go.mod h1:yj0NlS7ocGC4VOSAedqDDMktdh2935v2CSWOCDMHdSA=
+github.com/blevesearch/bleve_index_api v1.3.0 h1:DsMpWVjFNlBw9/6pyWf59XoqcAkhHj3H0UWiQsavb6E=
+github.com/blevesearch/bleve_index_api v1.3.0/go.mod h1:xvd48t5XMeeioWQ5/jZvgLrV98flT2rdvEJ3l/ki4Ko=
+github.com/blevesearch/geo v0.2.4 h1:ECIGQhw+QALCZaDcogRTNSJYQXRtC8/m8IKiA706cqk=
+github.com/blevesearch/geo v0.2.4/go.mod h1:K56Q33AzXt2YExVHGObtmRSFYZKYGv0JEN5mdacJJR8=
+github.com/blevesearch/go-faiss v1.0.26 h1:4dRLolFgjPyjkaXwff4NfbZFdE/dfywbzDqporeQvXI=
+github.com/blevesearch/go-faiss v1.0.26/go.mod h1:OMGQwOaRRYxrmeNdMrXJPvVx8gBnvE5RYrr0BahNnkk=
 github.com/blevesearch/go-porterstemmer v1.0.3 h1:GtmsqID0aZdCSNiY8SkuPJ12pD4jI+DdXTAn4YRcHCo=
 github.com/blevesearch/go-porterstemmer v1.0.3/go.mod h1:angGc5Ht+k2xhJdZi511LtmxuEf0OVpvUUNrwmM1P7M=
 github.com/blevesearch/gtreap v0.1.1 h1:2JWigFrzDMR+42WGIN/V2p0cUvn4UP3C4Q5nmaZGW8Y=
@@ -947,8 +947,8 @@ github.com/blevesearch/mmap-go v1.0.2/go.mod h1:ol2qBqYaOUsGdm7aRMRrYGgPvnwLe6Y+
 github.com/blevesearch/mmap-go v1.0.3/go.mod h1:pYvKl/grLQrBxuaRYgoTssa4rVujYYeenDp++2E+yvs=
 github.com/blevesearch/mmap-go v1.0.4 h1:OVhDhT5B/M1HNPpYPBKIEJaD0F3Si+CrEKULGCDPWmc=
 github.com/blevesearch/mmap-go v1.0.4/go.mod h1:EWmEAOmdAS9z/pi/+Toxu99DnsbhG1TIxUoRmJw/pSs=
-github.com/blevesearch/scorch_segment_api/v2 v2.3.9 h1:X6nJXnNHl7nasXW+U6y2Ns2Aw8F9STszkYkyBfQ+p0o=
-github.com/blevesearch/scorch_segment_api/v2 v2.3.9/go.mod h1:IrzspZlVjhf4X29oJiEhBxEteTqOY9RlYlk1lCmYHr4=
+github.com/blevesearch/scorch_segment_api/v2 v2.3.13 h1:ZPjv/4VwWvHJZKeMSgScCapOy8+DdmsmRyLmSB88UoY=
+github.com/blevesearch/scorch_segment_api/v2 v2.3.13/go.mod h1:ENk2LClTehOuMS8XzN3UxBEErYmtwkE7MAArFTXs9Vc=
 github.com/blevesearch/segment v0.9.0/go.mod h1:9PfHYUdQCgHktBgvtUOF4x+pc4/l8rdH0u5spnW85UQ=
 github.com/blevesearch/segment v0.9.1 h1:+dThDy+Lvgj5JMxhmOVlgFfkUtZV2kw49xax4+jTfSU=
 github.com/blevesearch/segment v0.9.1/go.mod h1:zN21iLm7+GnBHWTao9I+Au/7MBiL8pPFtJBJTsk6kQw=
@@ -960,18 +960,18 @@ github.com/blevesearch/vellum v1.0.5/go.mod h1:atE0EH3fvk43zzS7t1YNdNC7DbmcC3uz+
 github.com/blevesearch/vellum v1.0.7/go.mod h1:doBZpmRhwTsASB4QdUZANlJvqVAUdUyX0ZK7QJCTeBE=
 github.com/blevesearch/vellum v1.1.0 h1:CinkGyIsgVlYf8Y2LUQHvdelgXr6PYuvoDIajq6yR9w=
 github.com/blevesearch/vellum v1.1.0/go.mod h1:QgwWryE8ThtNPxtgWJof5ndPfx0/YMBh+W2weHKPw8Y=
-github.com/blevesearch/zapx/v11 v11.4.1 h1:qFCPlFbsEdwbbckJkysptSQOsHn4s6ZOHL5GMAIAVHA=
-github.com/blevesearch/zapx/v11 v11.4.1/go.mod h1:qNOGxIqdPC1MXauJCD9HBG487PxviTUUbmChFOAosGs=
-github.com/blevesearch/zapx/v12 v12.4.1 h1:K77bhypII60a4v8mwvav7r4IxWA8qxhNjgF9xGdb9eQ=
-github.com/blevesearch/zapx/v12 v12.4.1/go.mod h1:QRPrlPOzAxBNMI0MkgdD+xsTqx65zbuPr3Ko4Re49II=
-github.com/blevesearch/zapx/v13 v13.4.1 h1:EnkEMZFUK0lsW/jOJJF2xOcp+W8TjEsyeN5BeAZEYYE=
-github.com/blevesearch/zapx/v13 v13.4.1/go.mod h1:e6duBMlCvgbH9rkzNMnUa9hRI9F7ri2BRcHfphcmGn8=
-github.com/blevesearch/zapx/v14 v14.4.1 h1:G47kGCshknBZzZAtjcnIAMn3oNx8XBLxp8DMq18ogyE=
-github.com/blevesearch/zapx/v14 v14.4.1/go.mod h1:O7sDxiaL2r2PnCXbhh1Bvm7b4sP+jp4unE9DDPWGoms=
-github.com/blevesearch/zapx/v15 v15.4.1 h1:B5IoTMUCEzFdc9FSQbhVOxAY+BO17c05866fNruiI7g=
-github.com/blevesearch/zapx/v15 v15.4.1/go.mod h1:b/MreHjYeQoLjyY2+UaM0hGZZUajEbE0xhnr1A2/Q6Y=
-github.com/blevesearch/zapx/v16 v16.2.2 h1:MifKJVRTEhMTgSlle2bDRTb39BGc9jXFRLPZc6r0Rzk=
-github.com/blevesearch/zapx/v16 v16.2.2/go.mod h1:B9Pk4G1CqtErgQV9DyCSA9Lb7WZe4olYfGw7fVDZ4sk=
+github.com/blevesearch/zapx/v11 v11.4.2 h1:l46SV+b0gFN+Rw3wUI1YdMWdSAVhskYuvxlcgpQFljs=
+github.com/blevesearch/zapx/v11 v11.4.2/go.mod h1:4gdeyy9oGa/lLa6D34R9daXNUvfMPZqUYjPwiLmekwc=
+github.com/blevesearch/zapx/v12 v12.4.2 h1:fzRbhllQmEMUuAQ7zBuMvKRlcPA5ESTgWlDEoB9uQNE=
+github.com/blevesearch/zapx/v12 v12.4.2/go.mod h1:TdFmr7afSz1hFh/SIBCCZvcLfzYvievIH6aEISCte58=
+github.com/blevesearch/zapx/v13 v13.4.2 h1:46PIZCO/ZuKZYgxI8Y7lOJqX3Irkc3N8W82QTK3MVks=
+github.com/blevesearch/zapx/v13 v13.4.2/go.mod h1:knK8z2NdQHlb5ot/uj8wuvOq5PhDGjNYQQy0QDnopZk=
+github.com/blevesearch/zapx/v14 v14.4.2 h1:2SGHakVKd+TrtEqpfeq8X+So5PShQ5nW6GNxT7fWYz0=
+github.com/blevesearch/zapx/v14 v14.4.2/go.mod h1:rz0XNb/OZSMjNorufDGSpFpjoFKhXmppH9Hi7a877D8=
+github.com/blevesearch/zapx/v15 v15.4.2 h1:sWxpDE0QQOTjyxYbAVjt3+0ieu8NCE0fDRaFxEsp31k=
+github.com/blevesearch/zapx/v15 v15.4.2/go.mod h1:1pssev/59FsuWcgSnTa0OeEpOzmhtmr/0/11H0Z8+Nw=
+github.com/blevesearch/zapx/v16 v16.2.8 h1:SlnzF0YGtSlrsOE3oE7EgEX6BIepGpeqxs1IjMbHLQI=
+github.com/blevesearch/zapx/v16 v16.2.8/go.mod h1:murSoCJPCk25MqURrcJaBQ1RekuqSCSfMjXH4rHyA14=
 github.com/bluele/gcache v0.0.2 h1:WcbfdXICg7G/DGBh1PFfcirkWOQV+v077yF1pSy3DGw=
 github.com/bluele/gcache v0.0.2/go.mod h1:m15KV+ECjptwSPxKhOhQoAFQVtUFjTVkc3H8o0t/fp0=
 github.com/blugelabs/bluge v0.2.2 h1:gat8CqE6P6tOgeX30XGLOVNTC26cpM2RWVcreXWtYcM=
@@ -1442,8 +1442,6 @@ github.com/golang-sql/civil v0.0.0-20220223132316-b832511892a9/go.mod h1:8vg3r2V
 github.com/golang-sql/sqlexp v0.1.0 h1:ZCD6MBpcuOVfGVqsEmY5/4FtYiKz6tSyUv9LPEDei6A=
 github.com/golang-sql/sqlexp v0.1.0/go.mod h1:J4ad9Vo8ZCWQ2GMrC4UCQy1JpCbwU9m3EOqtpKwwwHI=
 github.com/golang/freetype v0.0.0-20170609003504-e2365dfdc4a0/go.mod h1:E/TSTwGwJL78qG/PmXZO1EjYhfJinVAhrmmHX6Z8B9k=
-github.com/golang/geo v0.0.0-20210211234256-740aa86cb551 h1:gtexQ/VGyN+VVFRXSFiguSNcXmS6rkKT+X7FdIrTtfo=
-github.com/golang/geo v0.0.0-20210211234256-740aa86cb551/go.mod h1:QZ0nwyI2jOfgRAoBvP+ab5aRr7c9x7lhGEJrKvBwjWI=
 github.com/golang/glog v0.0.0-20160126235308-23def4e6c14b/go.mod h1:SBH7ygxi8pfUlaOkMMuAQtPIUF8ecWP5IEl/CR7VP2Q=
 github.com/golang/glog v1.0.0/go.mod h1:EWib/APOK0SL3dFbYqvxE3UYd8E6s1ouQ7iEp/0LWV4=
 github.com/golang/glog v1.1.0/go.mod h1:pfYeQZ3JWZoXTV5sFc986z3HTpwQs9At6P4ImfuP3NQ=

go.work.sum

@@ -520,14 +520,40 @@ github.com/benbjohnson/immutable v0.4.0 h1:CTqXbEerYso8YzVPxmWxh2gnoRQbbB9X1quUC
 github.com/benbjohnson/immutable v0.4.0/go.mod h1:iAr8OjJGLnLmVUr9MZ/rz4PWUy6Ouc2JLYuMArmvAJM=
 github.com/bgentry/speakeasy v0.1.0 h1:ByYyxL9InA1OWqxJqqp2A5pYHUrCiAL6K3J+LKSsQkY=
 github.com/bitly/go-hostpool v0.0.0-20171023180738-a3a6125de932 h1:mXoPYz/Ul5HYEDvkta6I8/rnYM5gSdSV2tJ6XbZuEtY=
+github.com/blevesearch/bleve/v2 v2.5.7 h1:2d9YrL5zrX5EBBW++GOaEKjE+NPWeZGaX77IM26m1Z8=
+github.com/blevesearch/bleve/v2 v2.5.7/go.mod h1:yj0NlS7ocGC4VOSAedqDDMktdh2935v2CSWOCDMHdSA=
+github.com/blevesearch/bleve_index_api v1.2.8/go.mod h1:rKQDl4u51uwafZxFrPD1R7xFOwKnzZW7s/LSeK4lgo0=
+github.com/blevesearch/bleve_index_api v1.2.11 h1:bXQ54kVuwP8hdrXUSOnvTQfgK0KI1+f9A0ITJT8tX1s=
+github.com/blevesearch/bleve_index_api v1.2.11/go.mod h1:rKQDl4u51uwafZxFrPD1R7xFOwKnzZW7s/LSeK4lgo0=
+github.com/blevesearch/bleve_index_api v1.3.0 h1:DsMpWVjFNlBw9/6pyWf59XoqcAkhHj3H0UWiQsavb6E=
+github.com/blevesearch/bleve_index_api v1.3.0/go.mod h1:xvd48t5XMeeioWQ5/jZvgLrV98flT2rdvEJ3l/ki4Ko=
+github.com/blevesearch/geo v0.2.4 h1:ECIGQhw+QALCZaDcogRTNSJYQXRtC8/m8IKiA706cqk=
+github.com/blevesearch/geo v0.2.4/go.mod h1:K56Q33AzXt2YExVHGObtmRSFYZKYGv0JEN5mdacJJR8=
+github.com/blevesearch/go-faiss v1.0.26/go.mod h1:OMGQwOaRRYxrmeNdMrXJPvVx8gBnvE5RYrr0BahNnkk=
 github.com/blevesearch/go-metrics v0.0.0-20201227073835-cf1acfcdf475 h1:kDy+zgJFJJoJYBvdfBSiZYBbdsUL0XcjHYWezpQBGPA=
 github.com/blevesearch/go-metrics v0.0.0-20201227073835-cf1acfcdf475/go.mod h1:9eJDeqxJ3E7WnLebQUlPD7ZjSce7AnDb9vjGmMCbD0A=
 github.com/blevesearch/goleveldb v1.0.1 h1:iAtV2Cu5s0GD1lwUiekkFHe2gTMCCNVj2foPclDLIFI=
 github.com/blevesearch/goleveldb v1.0.1/go.mod h1:WrU8ltZbIp0wAoig/MHbrPCXSOLpe79nz5lv5nqfYrQ=
+github.com/blevesearch/scorch_segment_api/v2 v2.3.10/go.mod h1:Z3e6ChN3qyN35yaQpl00MfI5s8AxUJbpTR/DL8QOQ+8=
+github.com/blevesearch/scorch_segment_api/v2 v2.3.13 h1:ZPjv/4VwWvHJZKeMSgScCapOy8+DdmsmRyLmSB88UoY=
+github.com/blevesearch/scorch_segment_api/v2 v2.3.13/go.mod h1:ENk2LClTehOuMS8XzN3UxBEErYmtwkE7MAArFTXs9Vc=
 github.com/blevesearch/snowball v0.6.1 h1:cDYjn/NCH+wwt2UdehaLpr2e4BwLIjN4V/TdLsL+B5A=
 github.com/blevesearch/snowball v0.6.1/go.mod h1:ZF0IBg5vgpeoUhnMza2v0A/z8m1cWPlwhke08LpNusg=
 github.com/blevesearch/stempel v0.2.0 h1:CYzVPaScODMvgE9o+kf6D4RJ/VRomyi9uHF+PtB+Afc=
 github.com/blevesearch/stempel v0.2.0/go.mod h1:wjeTHqQv+nQdbPuJ/YcvOjTInA2EIc6Ks1FoSUzSLvc=
+github.com/blevesearch/vellum v1.0.10/go.mod h1:ul1oT0FhSMDIExNjIxHqJoGpVrBpKCdgDQNxfqgJt7k=
+github.com/blevesearch/zapx/v11 v11.4.2 h1:l46SV+b0gFN+Rw3wUI1YdMWdSAVhskYuvxlcgpQFljs=
+github.com/blevesearch/zapx/v11 v11.4.2/go.mod h1:4gdeyy9oGa/lLa6D34R9daXNUvfMPZqUYjPwiLmekwc=
+github.com/blevesearch/zapx/v12 v12.4.2 h1:fzRbhllQmEMUuAQ7zBuMvKRlcPA5ESTgWlDEoB9uQNE=
+github.com/blevesearch/zapx/v12 v12.4.2/go.mod h1:TdFmr7afSz1hFh/SIBCCZvcLfzYvievIH6aEISCte58=
+github.com/blevesearch/zapx/v13 v13.4.2 h1:46PIZCO/ZuKZYgxI8Y7lOJqX3Irkc3N8W82QTK3MVks=
+github.com/blevesearch/zapx/v13 v13.4.2/go.mod h1:knK8z2NdQHlb5ot/uj8wuvOq5PhDGjNYQQy0QDnopZk=
+github.com/blevesearch/zapx/v14 v14.4.2 h1:2SGHakVKd+TrtEqpfeq8X+So5PShQ5nW6GNxT7fWYz0=
+github.com/blevesearch/zapx/v14 v14.4.2/go.mod h1:rz0XNb/OZSMjNorufDGSpFpjoFKhXmppH9Hi7a877D8=
+github.com/blevesearch/zapx/v15 v15.4.2 h1:sWxpDE0QQOTjyxYbAVjt3+0ieu8NCE0fDRaFxEsp31k=
+github.com/blevesearch/zapx/v15 v15.4.2/go.mod h1:1pssev/59FsuWcgSnTa0OeEpOzmhtmr/0/11H0Z8+Nw=
+github.com/blevesearch/zapx/v16 v16.2.8 h1:SlnzF0YGtSlrsOE3oE7EgEX6BIepGpeqxs1IjMbHLQI=
+github.com/blevesearch/zapx/v16 v16.2.8/go.mod h1:murSoCJPCk25MqURrcJaBQ1RekuqSCSfMjXH4rHyA14=
 github.com/bmatcuk/doublestar v1.3.4 h1:gPypJ5xD31uhX6Tf54sDPUOBXTqKH4c9aPY66CyQrS0=
 github.com/bmatcuk/doublestar v1.3.4/go.mod h1:wiQtGV+rzVYxB7WIlirSN++5HPtPlXEo9MEoZQC/PmE=
 github.com/bmatcuk/doublestar/v4 v4.6.1 h1:FH9SifrbvJhnlQpztAx++wlkk70QBf0iBWDwNy7PA4I=
@@ -998,8 +1024,6 @@ github.com/grafana/prometheus-alertmanager v0.25.1-0.20250331083058-4563aec7a975
 github.com/grafana/prometheus-alertmanager v0.25.1-0.20250331083058-4563aec7a975/go.mod h1:FGdGvhI40Dq+CTQaSzK9evuve774cgOUdGfVO04OXkw=
 github.com/grafana/prometheus-alertmanager v0.25.1-0.20250604130045-92c8f6389b36 h1:AjZ58JRw1ZieFH/SdsddF5BXtsDKt5kSrKNPWrzYz3Y=
 github.com/grafana/prometheus-alertmanager v0.25.1-0.20250604130045-92c8f6389b36/go.mod h1:O/QP1BCm0HHIzbKvgMzqb5sSyH88rzkFk84F4TfJjBU=
-github.com/grafana/prometheus-alertmanager v0.25.1-0.20260112162805-d29cc9cf7f0f h1:9tRhudagkQO2s61SLFLSziIdCm7XlkfypVKDxpcHokg=
-github.com/grafana/prometheus-alertmanager v0.25.1-0.20260112162805-d29cc9cf7f0f/go.mod h1:AsVdCBeDFN9QbgpJg+8voDAcgsW0RmNvBd70ecMMdC0=
 github.com/grafana/pyroscope-go/godeltaprof v0.1.8/go.mod h1:2+l7K7twW49Ct4wFluZD3tZ6e0SjanjcUUBPVD/UuGU=
 github.com/grafana/pyroscope/api v1.2.1-0.20250415190842-3ff7247547ae/go.mod h1:6CJ1uXmLZ13ufpO9xE4pST+DyaBt0uszzrV0YnoaVLQ=
 github.com/grafana/sqlds/v4 v4.2.4/go.mod h1:BQRjUG8rOqrBI4NAaeoWrIMuoNgfi8bdhCJ+5cgEfLU=
@@ -1092,6 +1116,7 @@ github.com/jon-whit/go-grpc-prometheus v1.4.0/go.mod h1:iTPm+Iuhh3IIqR0iGZ91JJEg
 github.com/joncrlsn/dque v0.0.0-20211108142734-c2ef48c5192a h1:sfe532Ipn7GX0V6mHdynBk393rDmqgI0QmjLK7ct7TU=
 github.com/joncrlsn/dque v0.0.0-20211108142734-c2ef48c5192a/go.mod h1:dNKs71rs2VJGBAmttu7fouEsRQlRjxy0p1Sx+T5wbpY=
 github.com/josephspurrier/goversioninfo v1.4.0/go.mod h1:JWzv5rKQr+MmW+LvM412ToT/IkYDZjaclF2pKDss8IY=
+github.com/json-iterator/go v0.0.0-20171115153421-f7279a603ede/go.mod h1:+SdeFBvtyEkXs7REEP0seUULqWtbJapLOCVDaaPEHmU=
 github.com/jstemmer/go-junit-report v0.9.1 h1:6QPYqodiu3GuPL+7mfx+NwDdp2eTkp9IfEUpgAwUN0o=
 github.com/jsternberg/zap-logfmt v1.3.0 h1:z1n1AOHVVydOOVuyphbOKyR4NICDQFiJMn1IK5hVQ5Y=
 github.com/jsternberg/zap-logfmt v1.3.0/go.mod h1:N3DENp9WNmCZxvkBD/eReWwz1149BK6jEN9cQ4fNwZE=

jest.config.js

@@ -82,6 +82,7 @@ module.exports = {
     // Decoupled plugins run their own tests so ignoring them here.
     '<rootDir>/public/app/plugins/datasource/azuremonitor',
     '<rootDir>/public/app/plugins/datasource/cloud-monitoring',
+    '<rootDir>/public/app/plugins/datasource/elasticsearch',
     '<rootDir>/public/app/plugins/datasource/grafana-postgresql-datasource',
     '<rootDir>/public/app/plugins/datasource/grafana-pyroscope-datasource',
     '<rootDir>/public/app/plugins/datasource/grafana-testdata-datasource',

package.json

@@ -293,8 +293,8 @@
     "@grafana/plugin-ui": "^0.11.1",
     "@grafana/prometheus": "workspace:*",
     "@grafana/runtime": "workspace:*",
-    "@grafana/scenes": "v6.52.1",
-    "@grafana/scenes-react": "v6.52.1",
+    "@grafana/scenes": "6.52.2",
+    "@grafana/scenes-react": "6.52.2",
     "@grafana/schema": "workspace:*",
     "@grafana/sql": "workspace:*",
     "@grafana/ui": "workspace:*",

packages/grafana-data/package.json

@@ -35,6 +35,14 @@
     },
     "./test": {
       "@grafana-app/source": "./test/index.ts"
+    },
+    "./themes/schema.generated.json": {
+      "@grafana-app/source": "./src/themes/schema.generated.json",
+      "default": "./dist/esm/themes/schema.generated.json"
+    },
+    "./themes/definitions/*.json": {
+      "@grafana-app/source": "./src/themes/themeDefinitions/*.json",
+      "default": "./dist/esm/themes/themeDefinitions/*.json"
     }
   },
   "publishConfig": {
@@ -52,7 +60,7 @@
     "typecheck": "tsc --emitDeclarationOnly false --noEmit",
     "prepack": "cp package.json package.json.bak && node ../../scripts/prepare-npm-package.js",
     "postpack": "mv package.json.bak package.json",
-    "themes-schema": "tsx ./src/themes/scripts/generateSchema.ts"
+    "themes-schema": "tsx ./scripts/generateSchema.ts"
   },
   "dependencies": {
     "@braintree/sanitize-url": "7.0.1",
@@ -102,6 +110,7 @@
     "react-dom": "18.3.1",
     "rimraf": "6.0.1",
     "rollup": "^4.22.4",
+    "rollup-plugin-copy": "3.5.0",
     "rollup-plugin-esbuild": "6.2.1",
     "rollup-plugin-node-externals": "^8.0.0",
     "tsx": "^4.21.0",

packages/grafana-data/rollup.config.ts

@@ -1,21 +1,40 @@
 import json from '@rollup/plugin-json';
 import { createRequire } from 'node:module';
+import copy from 'rollup-plugin-copy';
 
 import { entryPoint, plugins, esmOutput, cjsOutput } from '../rollup.config.parts';
 
 const rq = createRequire(import.meta.url);
 const pkg = rq('./package.json');
 
+const grafanaDataPlugins = [
+  ...plugins,
+  copy({
+    targets: [
+      {
+        src: 'src/themes/schema.generated.json',
+        dest: 'dist/esm/',
+      },
+      {
+        src: 'src/themes/themeDefinitions/*.json',
+        dest: 'dist/esm/',
+      },
+    ],
+    flatten: false,
+  }),
+  json(),
+];
+
 export default [
   {
     input: entryPoint,
-    plugins: [...plugins, json()],
+    plugins: grafanaDataPlugins,
     output: [cjsOutput(pkg, 'grafana-data'), esmOutput(pkg, 'grafana-data')],
     treeshake: false,
   },
   {
     input: 'src/unstable.ts',
-    plugins: [...plugins, json()],
+    plugins: grafanaDataPlugins,
     output: [cjsOutput(pkg, 'grafana-data'), esmOutput(pkg, 'grafana-data')],
     treeshake: false,
   },

packages/grafana-data/scripts/generateSchema.ts

@@ -0,0 +1,22 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { NewThemeOptionsSchema } from '../src/themes/createTheme';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const jsonOut = path.join(__dirname, '..', 'src', 'themes', 'schema.generated.json');
+
+fs.writeFileSync(
+  jsonOut,
+  JSON.stringify(
+    NewThemeOptionsSchema.toJSONSchema({
+      target: 'draft-07',
+    }),
+    undefined,
+    2
+  )
+);
+
+console.log('Successfully generated theme schema');

packages/grafana-data/src/index.ts

@@ -844,7 +844,6 @@ export {
   DataLinkConfigOrigin,
   SupportedTransformationType,
   type InternalDataLink,
-  type LinkTarget,
   type LinkModel,
   type LinkModelSupplier,
   VariableOrigin,
@@ -852,6 +851,7 @@ export {
   VariableSuggestionsScope,
   OneClickMode,
 } from './types/dataLink';
+export { type LinkTarget } from './types/linkTarget';
 export {
   type Action,
   type ActionModel,

packages/grafana-data/src/internal/index.ts

@@ -93,7 +93,6 @@ export { DataTransformerID } from '../transformations/transformers/ids';
 
 export { mergeTransformer } from '../transformations/transformers/merge';
 export { getThemeById } from '../themes/registry';
-export * as experimentalThemeDefinitions from '../themes/themeDefinitions';
 export { GrafanaEdition } from '../types/config';
 export { SIPrefix } from '../valueFormats/symbolFormatters';
 

packages/grafana-data/src/themes/registry.ts

@@ -1,7 +1,18 @@
 import { Registry, RegistryItem } from '../utils/Registry';
 
 import { createTheme, NewThemeOptionsSchema } from './createTheme';
-import * as extraThemes from './themeDefinitions';
+import aubergine from './themeDefinitions/aubergine.json';
+import debug from './themeDefinitions/debug.json';
+import desertbloom from './themeDefinitions/desertbloom.json';
+import gildedgrove from './themeDefinitions/gildedgrove.json';
+import gloom from './themeDefinitions/gloom.json';
+import mars from './themeDefinitions/mars.json';
+import matrix from './themeDefinitions/matrix.json';
+import sapphiredusk from './themeDefinitions/sapphiredusk.json';
+import synthwave from './themeDefinitions/synthwave.json';
+import tron from './themeDefinitions/tron.json';
+import victorian from './themeDefinitions/victorian.json';
+import zen from './themeDefinitions/zen.json';
 import { GrafanaTheme2 } from './types';
 
 export interface ThemeRegistryItem extends RegistryItem {
@@ -9,6 +20,21 @@ export interface ThemeRegistryItem extends RegistryItem {
   build: () => GrafanaTheme2;
 }
 
+const extraThemes: { [key: string]: unknown } = {
+  aubergine,
+  debug,
+  desertbloom,
+  gildedgrove,
+  gloom,
+  mars,
+  matrix,
+  sapphiredusk,
+  synthwave,
+  tron,
+  victorian,
+  zen,
+};
+
 /**
  * @internal
  * Only for internal use, never use this from a plugin

packages/grafana-data/src/themes/scripts/generateSchema.ts

@@ -1,19 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-import { NewThemeOptionsSchema } from '../createTheme';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-fs.writeFileSync(
-  path.join(__dirname, '../schema.generated.json'),
-  JSON.stringify(
-    NewThemeOptionsSchema.toJSONSchema({
-      target: 'draft-07',
-    }),
-    undefined,
-    2
-  )
-);

packages/grafana-data/src/themes/themeDefinitions/index.ts

@@ -1,12 +0,0 @@
-export { default as aubergine } from './aubergine.json';
-export { default as debug } from './debug.json';
-export { default as desertbloom } from './desertbloom.json';
-export { default as gildedgrove } from './gildedgrove.json';
-export { default as mars } from './mars.json';
-export { default as matrix } from './matrix.json';
-export { default as sapphiredusk } from './sapphiredusk.json';
-export { default as synthwave } from './synthwave.json';
-export { default as tron } from './tron.json';
-export { default as victorian } from './victorian.json';
-export { default as zen } from './zen.json';
-export { default as gloom } from './gloom.json';

packages/grafana-data/src/types/config.ts

@@ -32,6 +32,7 @@ export type AppPluginConfig = {
   path: string;
   version: string;
   preload: boolean;
+  /** @deprecated it will be removed in a future release */
   angular: AngularMeta;
   loadingStrategy: PluginLoadingStrategy;
   dependencies: PluginDependencies;
@@ -219,6 +220,7 @@ export interface GrafanaConfig {
   snapshotEnabled: boolean;
   datasources: { [str: string]: DataSourceInstanceSettings };
   panels: { [key: string]: PanelPluginMeta };
+  /** @deprecated it will be removed in a future release */
   apps: Record<string, AppPluginConfig>;
   auth: AuthSettings;
   minRefreshInterval: string;

packages/grafana-data/src/types/dataLink.ts

@@ -1,5 +1,6 @@
 import { ScopedVars } from './ScopedVars';
 import { ExploreCorrelationHelperData, ExplorePanelsState } from './explore';
+import { LinkTarget } from './linkTarget';
 import { InterpolateFunction } from './panel';
 import { DataQuery } from './query';
 import { TimeRange } from './time';
@@ -88,8 +89,6 @@ export interface InternalDataLink<T extends DataQuery = any> {
   range?: TimeRange;
 }
 
-export type LinkTarget = '_blank' | '_self' | undefined;
-
 /**
  * Processed Link Model. The values are ready to use
  */

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

@@ -356,7 +356,7 @@ export interface FeatureToggles {
   */
   dashboardScene?: boolean;
   /**
-  * Enables experimental new dashboard layouts
+  * Enables new dashboard layouts
   */
   dashboardNewLayouts?: boolean;
   /**
@@ -531,6 +531,10 @@ export interface FeatureToggles {
   */
   alertingListViewV2?: boolean;
   /**
+  * Enables the new Alerting navigation structure with improved menu grouping
+  */
+  alertingNavigationV2?: boolean;
+  /**
   * Enables saved searches for alert rules list
   */
   alertingSavedSearches?: boolean;
@@ -984,6 +988,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
   */
@@ -1246,4 +1255,8 @@ export interface FeatureToggles {
   * Enables profiles exemplars support in profiles drilldown
   */
   profilesExemplars?: boolean;
+  /**
+  * Use synchronized dispatch timer to minimize duplicate notifications across alertmanager HA pods
+  */
+  alertingSyncDispatchTimer?: boolean;
 }

packages/grafana-data/src/types/linkTarget.ts

@@ -0,0 +1,4 @@
+/**
+ * Target for links - controls whether link opens in new tab or same tab
+ */
+export type LinkTarget = '_blank' | '_self' | undefined;

packages/grafana-data/src/types/navModel.ts

@@ -1,7 +1,7 @@
 import { ComponentType } from 'react';
 
-import { LinkTarget } from './dataLink';
 import { IconName } from './icon';
+import { LinkTarget } from './linkTarget';
 
 export interface NavLinkDTO {
   id?: string;

packages/grafana-data/src/types/panel.ts

@@ -11,6 +11,7 @@ import { DataFrame } from './dataFrame';
 import { DataQueryError, DataQueryRequest, DataQueryTimings } from './datasource';
 import { FieldConfigSource } from './fieldOverrides';
 import { IconName } from './icon';
+import { LinkTarget } from './linkTarget';
 import { OptionEditorConfig } from './options';
 import { PluginMeta } from './plugin';
 import { AbsoluteTimeRange, TimeRange, TimeZone } from './time';
@@ -191,6 +192,7 @@ export interface PanelMenuItem {
   onClick?: (event: React.MouseEvent) => void;
   shortcut?: string;
   href?: string;
+  target?: LinkTarget;
   subMenu?: PanelMenuItem[];
 }
 

packages/grafana-data/src/types/plugin.ts

@@ -53,6 +53,7 @@ export interface PluginError {
   pluginType?: PluginType;
 }
 
+/** @deprecated it will be removed in a future release */
 export interface AngularMeta {
   detected: boolean;
   hideDeprecation: boolean;

packages/grafana-data/src/unstable.ts

@@ -9,4 +9,4 @@
  * and be subject to the standard policies
  */
 
-export { default as themeJsonSchema } from './themes/schema.generated.json';
+export {};

packages/grafana-data/tsconfig.json

@@ -8,7 +8,8 @@
     "emitDeclarationOnly": true,
     "isolatedModules": true,
     "rootDirs": ["."],
-    "moduleResolution": "bundler"
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true
   },
   "exclude": ["dist/**/*"],
   "include": [

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,63 @@ 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}
+        {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}
+              className={styles.buttonSpacing}
+            />
+          </>
+        ) : (
+          <RadioButtonGroup<SelectedView>
+            size="sm"
+            options={getViewOptions(containerWidth, vertical)}
+            value={selectedView}
+            onChange={setSelectedView}
+            className={styles.buttonSpacing}
           />
-          <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>}
       </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: 'Top Table' },
+  { value: PaneView.FlameGraph, label: 'Flame Graph' },
+  { value: PaneView.CallTree, label: 'Call 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 +226,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 +240,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 +274,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, useLayoutEffect, 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 { 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>();
+  // Initialize collapsedMap from dataContainer to ensure collapsed groups are shown correctly on first render
+  const [collapsedMap, setCollapsedMap] = useState(() => dataContainer.getCollapsedMap());
+  const [colorScheme, setColorScheme] = useColorScheme(dataContainer);
+
+  const styles = useMemo(() => getStyles(theme), [theme]);
+
+  // Re-initialize collapsed map when dataContainer changes (e.g., new data loaded)
+  // Using useLayoutEffect to ensure collapsed state is applied before browser paint
+  useLayoutEffect(() => {
+    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-runtime/src/config.ts

@@ -86,6 +86,7 @@ export class GrafanaBootConfig {
   snapshotEnabled = true;
   datasources: { [str: string]: DataSourceInstanceSettings } = {};
   panels: { [key: string]: PanelPluginMeta } = {};
+  /** @deprecated it will be removed in a future release, use isAppPluginInstalled or getAppPluginVersion instead */
   apps: Record<string, AppPluginConfigGrafanaData> = {};
   auth: AuthSettings = {};
   minRefreshInterval = '';

packages/grafana-runtime/src/index.ts

@@ -77,3 +77,5 @@ export {
   getCorrelationsService,
   setCorrelationsService,
 } from './services/CorrelationsService';
+export { getAppPluginVersion, isAppPluginInstalled } from './services/pluginMeta/apps';
+export { useAppPluginInstalled, useAppPluginVersion } from './services/pluginMeta/hooks';

packages/grafana-runtime/src/internal/index.ts

@@ -29,3 +29,5 @@ export {
 export { UserStorage } from '../utils/userStorage';
 
 export { initOpenFeature, evaluateBooleanFlag } from './openFeature';
+export { getAppPluginMeta, getAppPluginMetas, setAppPluginMetas } from '../services/pluginMeta/apps';
+export { useAppPluginMeta, useAppPluginMetas } from '../services/pluginMeta/hooks';

packages/grafana-runtime/src/services/pluginMeta/apps.test.ts

@@ -0,0 +1,258 @@
+import { evaluateBooleanFlag } from '../../internal/openFeature';
+
+import {
+  getAppPluginMeta,
+  getAppPluginMetas,
+  getAppPluginVersion,
+  isAppPluginInstalled,
+  setAppPluginMetas,
+} from './apps';
+import { initPluginMetas } from './plugins';
+import { app } from './test-fixtures/config.apps';
+
+jest.mock('./plugins', () => ({ ...jest.requireActual('./plugins'), initPluginMetas: jest.fn() }));
+jest.mock('../../internal/openFeature', () => ({
+  ...jest.requireActual('../../internal/openFeature'),
+  evaluateBooleanFlag: jest.fn(),
+}));
+
+const initPluginMetasMock = jest.mocked(initPluginMetas);
+const evaluateBooleanFlagMock = jest.mocked(evaluateBooleanFlag);
+
+describe('when useMTPlugins flag is enabled and apps is not initialized', () => {
+  beforeEach(() => {
+    setAppPluginMetas({});
+    jest.resetAllMocks();
+    initPluginMetasMock.mockResolvedValue({ items: [] });
+    evaluateBooleanFlagMock.mockReturnValue(true);
+  });
+
+  it('getAppPluginMetas should call initPluginMetas and return correct result', async () => {
+    const apps = await getAppPluginMetas();
+
+    expect(apps).toEqual([]);
+    expect(initPluginMetasMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('getAppPluginMeta should call initPluginMetas and return correct result', async () => {
+    const result = await getAppPluginMeta('myorg-someplugin-app');
+
+    expect(result).toEqual(null);
+    expect(initPluginMetasMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('isAppPluginInstalled should call initPluginMetas and return false', async () => {
+    const installed = await isAppPluginInstalled('myorg-someplugin-app');
+
+    expect(installed).toEqual(false);
+    expect(initPluginMetasMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('getAppPluginVersion should call initPluginMetas and return null', async () => {
+    const result = await getAppPluginVersion('myorg-someplugin-app');
+
+    expect(result).toEqual(null);
+    expect(initPluginMetasMock).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('when useMTPlugins flag is enabled and apps is initialized', () => {
+  beforeEach(() => {
+    setAppPluginMetas({ 'myorg-someplugin-app': app });
+    jest.resetAllMocks();
+    evaluateBooleanFlagMock.mockReturnValue(true);
+  });
+
+  it('getAppPluginMetas should not call initPluginMetas and return correct result', async () => {
+    const apps = await getAppPluginMetas();
+
+    expect(apps).toEqual([app]);
+    expect(initPluginMetasMock).not.toHaveBeenCalled();
+  });
+
+  it('getAppPluginMeta should not call initPluginMetas and return correct result', async () => {
+    const result = await getAppPluginMeta('myorg-someplugin-app');
+
+    expect(result).toEqual(app);
+    expect(initPluginMetasMock).not.toHaveBeenCalled();
+  });
+
+  it('getAppPluginMeta should return null if the pluginId is not found', async () => {
+    const result = await getAppPluginMeta('otherorg-otherplugin-app');
+
+    expect(result).toEqual(null);
+  });
+
+  it('isAppPluginInstalled should not call initPluginMetas and return true', async () => {
+    const installed = await isAppPluginInstalled('myorg-someplugin-app');
+
+    expect(installed).toEqual(true);
+    expect(initPluginMetasMock).not.toHaveBeenCalled();
+  });
+
+  it('isAppPluginInstalled should return false if the pluginId is not found', async () => {
+    const result = await isAppPluginInstalled('otherorg-otherplugin-app');
+
+    expect(result).toEqual(false);
+  });
+
+  it('getAppPluginVersion should not call initPluginMetas and return correct result', async () => {
+    const result = await getAppPluginVersion('myorg-someplugin-app');
+
+    expect(result).toEqual('1.0.0');
+    expect(initPluginMetasMock).not.toHaveBeenCalled();
+  });
+
+  it('getAppPluginVersion should return null if the pluginId is not found', async () => {
+    const result = await getAppPluginVersion('otherorg-otherplugin-app');
+
+    expect(result).toEqual(null);
+  });
+});
+
+describe('when useMTPlugins flag is disabled and apps is not initialized', () => {
+  beforeEach(() => {
+    setAppPluginMetas({});
+    jest.resetAllMocks();
+    evaluateBooleanFlagMock.mockReturnValue(false);
+  });
+
+  it('getAppPluginMetas should not call initPluginMetas and return correct result', async () => {
+    const apps = await getAppPluginMetas();
+
+    expect(apps).toEqual([]);
+    expect(initPluginMetasMock).not.toHaveBeenCalled();
+  });
+
+  it('getAppPluginMeta should not call initPluginMetas and return correct result', async () => {
+    const result = await getAppPluginMeta('myorg-someplugin-app');
+
+    expect(result).toEqual(null);
+    expect(initPluginMetasMock).not.toHaveBeenCalled();
+  });
+
+  it('isAppPluginInstalled should not call initPluginMetas and return false', async () => {
+    const result = await isAppPluginInstalled('myorg-someplugin-app');
+
+    expect(result).toEqual(false);
+    expect(initPluginMetasMock).not.toHaveBeenCalled();
+  });
+
+  it('getAppPluginVersion should not call initPluginMetas and return correct result', async () => {
+    const result = await getAppPluginVersion('myorg-someplugin-app');
+
+    expect(result).toEqual(null);
+    expect(initPluginMetasMock).not.toHaveBeenCalled();
+  });
+});
+
+describe('when useMTPlugins flag is disabled and apps is initialized', () => {
+  beforeEach(() => {
+    setAppPluginMetas({ 'myorg-someplugin-app': app });
+    jest.resetAllMocks();
+    evaluateBooleanFlagMock.mockReturnValue(false);
+  });
+
+  it('getAppPluginMetas should not call initPluginMetas and return correct result', async () => {
+    const apps = await getAppPluginMetas();
+
+    expect(apps).toEqual([app]);
+    expect(initPluginMetasMock).not.toHaveBeenCalled();
+  });
+
+  it('getAppPluginMeta should not call initPluginMetas and return correct result', async () => {
+    const result = await getAppPluginMeta('myorg-someplugin-app');
+
+    expect(result).toEqual(app);
+    expect(initPluginMetasMock).not.toHaveBeenCalled();
+  });
+
+  it('getAppPluginMeta should return null if the pluginId is not found', async () => {
+    const result = await getAppPluginMeta('otherorg-otherplugin-app');
+
+    expect(result).toEqual(null);
+  });
+
+  it('isAppPluginInstalled should not call initPluginMetas and return true', async () => {
+    const result = await isAppPluginInstalled('myorg-someplugin-app');
+
+    expect(result).toEqual(true);
+    expect(initPluginMetasMock).not.toHaveBeenCalled();
+  });
+
+  it('isAppPluginInstalled should return false if the pluginId is not found', async () => {
+    const result = await isAppPluginInstalled('otherorg-otherplugin-app');
+
+    expect(result).toEqual(false);
+  });
+
+  it('getAppPluginVersion should not call initPluginMetas and return correct result', async () => {
+    const result = await getAppPluginVersion('myorg-someplugin-app');
+
+    expect(result).toEqual('1.0.0');
+    expect(initPluginMetasMock).not.toHaveBeenCalled();
+  });
+
+  it('getAppPluginVersion should return null if the pluginId is not found', async () => {
+    const result = await getAppPluginVersion('otherorg-otherplugin-app');
+
+    expect(result).toEqual(null);
+  });
+});
+
+describe('immutability', () => {
+  beforeEach(() => {
+    setAppPluginMetas({ 'myorg-someplugin-app': app });
+    jest.resetAllMocks();
+    evaluateBooleanFlagMock.mockReturnValue(false);
+  });
+
+  it('getAppPluginMetas should return a deep clone', async () => {
+    const mutatedApps = await getAppPluginMetas();
+
+    // assert we have correct props
+    expect(mutatedApps).toHaveLength(1);
+    expect(mutatedApps[0].dependencies.grafanaDependency).toEqual('>=10.4.0');
+    expect(mutatedApps[0].extensions.addedLinks).toHaveLength(0);
+
+    // mutate deep props
+    mutatedApps[0].dependencies.grafanaDependency = '';
+    mutatedApps[0].extensions.addedLinks.push({ targets: [], title: '', description: '' });
+
+    // assert we have mutated props
+    expect(mutatedApps[0].dependencies.grafanaDependency).toEqual('');
+    expect(mutatedApps[0].extensions.addedLinks).toHaveLength(1);
+    expect(mutatedApps[0].extensions.addedLinks[0]).toEqual({ targets: [], title: '', description: '' });
+
+    const apps = await getAppPluginMetas();
+
+    // assert that we have not mutated the source
+    expect(apps[0].dependencies.grafanaDependency).toEqual('>=10.4.0');
+    expect(apps[0].extensions.addedLinks).toHaveLength(0);
+  });
+
+  it('getAppPluginMeta should return a deep clone', async () => {
+    const mutatedApp = await getAppPluginMeta('myorg-someplugin-app');
+
+    // assert we have correct props
+    expect(mutatedApp).toBeDefined();
+    expect(mutatedApp!.dependencies.grafanaDependency).toEqual('>=10.4.0');
+    expect(mutatedApp!.extensions.addedLinks).toHaveLength(0);
+
+    // mutate deep props
+    mutatedApp!.dependencies.grafanaDependency = '';
+    mutatedApp!.extensions.addedLinks.push({ targets: [], title: '', description: '' });
+
+    // assert we have mutated props
+    expect(mutatedApp!.dependencies.grafanaDependency).toEqual('');
+    expect(mutatedApp!.extensions.addedLinks).toHaveLength(1);
+    expect(mutatedApp!.extensions.addedLinks[0]).toEqual({ targets: [], title: '', description: '' });
+
+    const result = await getAppPluginMeta('myorg-someplugin-app');
+
+    // assert that we have not mutated the source
+    expect(result).toBeDefined();
+    expect(result!.dependencies.grafanaDependency).toEqual('>=10.4.0');
+    expect(result!.extensions.addedLinks).toHaveLength(0);
+  });
+});

packages/grafana-runtime/src/services/pluginMeta/apps.ts

@@ -0,0 +1,71 @@
+import type { AppPluginConfig } from '@grafana/data';
+
+import { config } from '../../config';
+import { evaluateBooleanFlag } from '../../internal/openFeature';
+
+import { getAppPluginMapper } from './mappers/mappers';
+import { initPluginMetas } from './plugins';
+import type { AppPluginMetas } from './types';
+
+let apps: AppPluginMetas = {};
+
+function initialized(): boolean {
+  return Boolean(Object.keys(apps).length);
+}
+
+async function initAppPluginMetas(): Promise<void> {
+  if (!evaluateBooleanFlag('useMTPlugins', false)) {
+    // eslint-disable-next-line no-restricted-syntax
+    apps = config.apps;
+    return;
+  }
+
+  const metas = await initPluginMetas();
+  const mapper = getAppPluginMapper();
+  apps = mapper(metas);
+}
+
+export async function getAppPluginMetas(): Promise<AppPluginConfig[]> {
+  if (!initialized()) {
+    await initAppPluginMetas();
+  }
+
+  return Object.values(structuredClone(apps));
+}
+
+export async function getAppPluginMeta(pluginId: string): Promise<AppPluginConfig | null> {
+  if (!initialized()) {
+    await initAppPluginMetas();
+  }
+
+  const app = apps[pluginId];
+  return app ? structuredClone(app) : null;
+}
+
+/**
+ * Check if an app plugin is installed. The function does not check if the app plugin is enabled.
+ * @param pluginId - The id of the app plugin.
+ * @returns True if the app plugin is installed, false otherwise.
+ */
+export async function isAppPluginInstalled(pluginId: string): Promise<boolean> {
+  const app = await getAppPluginMeta(pluginId);
+  return Boolean(app);
+}
+
+/**
+ * Get the version of an app plugin.
+ * @param pluginId - The id of the app plugin.
+ * @returns The version of the app plugin, or null if the plugin is not installed.
+ */
+export async function getAppPluginVersion(pluginId: string): Promise<string | null> {
+  const app = await getAppPluginMeta(pluginId);
+  return app?.version ?? null;
+}
+
+export function setAppPluginMetas(override: AppPluginMetas): void {
+  if (process.env.NODE_ENV !== 'test') {
+    throw new Error('setAppPluginMetas() function can only be called from tests.');
+  }
+
+  apps = structuredClone(override);
+}

packages/grafana-runtime/src/services/pluginMeta/hooks.test.tsx

@@ -0,0 +1,214 @@
+import { renderHook, waitFor } from '@testing-library/react';
+
+import {
+  getAppPluginMeta,
+  getAppPluginMetas,
+  getAppPluginVersion,
+  isAppPluginInstalled,
+  setAppPluginMetas,
+} from './apps';
+import { useAppPluginMeta, useAppPluginMetas, useAppPluginInstalled, useAppPluginVersion } from './hooks';
+import { apps } from './test-fixtures/config.apps';
+
+const actualApps = jest.requireActual<typeof import('./apps')>('./apps');
+jest.mock('./apps', () => ({
+  ...jest.requireActual('./apps'),
+  getAppPluginMetas: jest.fn(),
+  getAppPluginMeta: jest.fn(),
+  isAppPluginInstalled: jest.fn(),
+  getAppPluginVersion: jest.fn(),
+}));
+const getAppPluginMetaMock = jest.mocked(getAppPluginMeta);
+const getAppPluginMetasMock = jest.mocked(getAppPluginMetas);
+const isAppPluginInstalledMock = jest.mocked(isAppPluginInstalled);
+const getAppPluginVersionMock = jest.mocked(getAppPluginVersion);
+
+describe('useAppPluginMeta', () => {
+  beforeEach(() => {
+    setAppPluginMetas(apps);
+    jest.resetAllMocks();
+    getAppPluginMetaMock.mockImplementation(actualApps.getAppPluginMeta);
+  });
+
+  it('should return correct default values', async () => {
+    const { result } = renderHook(() => useAppPluginMeta('grafana-exploretraces-app'));
+
+    expect(result.current.loading).toEqual(true);
+    expect(result.current.error).toBeUndefined();
+    expect(result.current.value).toBeUndefined();
+
+    await waitFor(() => expect(result.current.loading).toEqual(true));
+  });
+
+  it('should return correct values after loading', async () => {
+    const { result } = renderHook(() => useAppPluginMeta('grafana-exploretraces-app'));
+
+    await waitFor(() => expect(result.current.loading).toEqual(false));
+
+    expect(result.current.loading).toEqual(false);
+    expect(result.current.error).toBeUndefined();
+    expect(result.current.value).toEqual(apps['grafana-exploretraces-app']);
+  });
+
+  it('should return correct values if the pluginId does not exist', async () => {
+    const { result } = renderHook(() => useAppPluginMeta('otherorg-otherplugin-app'));
+
+    await waitFor(() => expect(result.current.loading).toEqual(false));
+
+    expect(result.current.loading).toEqual(false);
+    expect(result.current.error).toBeUndefined();
+    expect(result.current.value).toEqual(null);
+  });
+
+  it('should return correct values if useAppPluginMeta throws', async () => {
+    getAppPluginMetaMock.mockRejectedValue(new Error('Some error'));
+
+    const { result } = renderHook(() => useAppPluginMeta('otherorg-otherplugin-app'));
+
+    await waitFor(() => expect(result.current.loading).toEqual(false));
+
+    expect(result.current.loading).toEqual(false);
+    expect(result.current.error).toEqual(new Error('Some error'));
+    expect(result.current.value).toBeUndefined();
+  });
+});
+
+describe('useAppPluginMetas', () => {
+  beforeEach(() => {
+    setAppPluginMetas(apps);
+    jest.resetAllMocks();
+    getAppPluginMetasMock.mockImplementation(actualApps.getAppPluginMetas);
+  });
+
+  it('should return correct default values', async () => {
+    const { result } = renderHook(() => useAppPluginMetas());
+
+    expect(result.current.loading).toEqual(true);
+    expect(result.current.error).toBeUndefined();
+    expect(result.current.value).toBeUndefined();
+
+    await waitFor(() => expect(result.current.loading).toEqual(true));
+  });
+
+  it('should return correct values after loading', async () => {
+    const { result } = renderHook(() => useAppPluginMetas());
+
+    await waitFor(() => expect(result.current.loading).toEqual(false));
+
+    expect(result.current.loading).toEqual(false);
+    expect(result.current.error).toBeUndefined();
+    expect(result.current.value).toEqual(Object.values(apps));
+  });
+
+  it('should return correct values if useAppPluginMetas throws', async () => {
+    getAppPluginMetasMock.mockRejectedValue(new Error('Some error'));
+
+    const { result } = renderHook(() => useAppPluginMetas());
+
+    await waitFor(() => expect(result.current.loading).toEqual(false));
+
+    expect(result.current.loading).toEqual(false);
+    expect(result.current.error).toEqual(new Error('Some error'));
+    expect(result.current.value).toBeUndefined();
+  });
+});
+
+describe('useAppPluginInstalled', () => {
+  beforeEach(() => {
+    setAppPluginMetas(apps);
+    jest.resetAllMocks();
+    isAppPluginInstalledMock.mockImplementation(actualApps.isAppPluginInstalled);
+  });
+
+  it('should return correct default values', async () => {
+    const { result } = renderHook(() => useAppPluginInstalled('grafana-exploretraces-app'));
+
+    expect(result.current.loading).toEqual(true);
+    expect(result.current.error).toBeUndefined();
+    expect(result.current.value).toBeUndefined();
+
+    await waitFor(() => expect(result.current.loading).toEqual(true));
+  });
+
+  it('should return correct values after loading', async () => {
+    const { result } = renderHook(() => useAppPluginInstalled('grafana-exploretraces-app'));
+
+    await waitFor(() => expect(result.current.loading).toEqual(false));
+
+    expect(result.current.loading).toEqual(false);
+    expect(result.current.error).toBeUndefined();
+    expect(result.current.value).toEqual(true);
+  });
+
+  it('should return correct values if the pluginId does not exist', async () => {
+    const { result } = renderHook(() => useAppPluginInstalled('otherorg-otherplugin-app'));
+
+    await waitFor(() => expect(result.current.loading).toEqual(false));
+
+    expect(result.current.loading).toEqual(false);
+    expect(result.current.error).toBeUndefined();
+    expect(result.current.value).toEqual(false);
+  });
+
+  it('should return correct values if isAppPluginInstalled throws', async () => {
+    isAppPluginInstalledMock.mockRejectedValue(new Error('Some error'));
+
+    const { result } = renderHook(() => useAppPluginInstalled('otherorg-otherplugin-app'));
+
+    await waitFor(() => expect(result.current.loading).toEqual(false));
+
+    expect(result.current.loading).toEqual(false);
+    expect(result.current.error).toEqual(new Error('Some error'));
+    expect(result.current.value).toBeUndefined();
+  });
+});
+
+describe('useAppPluginVersion', () => {
+  beforeEach(() => {
+    setAppPluginMetas(apps);
+    jest.resetAllMocks();
+    getAppPluginVersionMock.mockImplementation(actualApps.getAppPluginVersion);
+  });
+
+  it('should return correct default values', async () => {
+    const { result } = renderHook(() => useAppPluginVersion('grafana-exploretraces-app'));
+
+    expect(result.current.loading).toEqual(true);
+    expect(result.current.error).toBeUndefined();
+    expect(result.current.value).toBeUndefined();
+
+    await waitFor(() => expect(result.current.loading).toEqual(true));
+  });
+
+  it('should return correct values after loading', async () => {
+    const { result } = renderHook(() => useAppPluginVersion('grafana-exploretraces-app'));
+
+    await waitFor(() => expect(result.current.loading).toEqual(false));
+
+    expect(result.current.loading).toEqual(false);
+    expect(result.current.error).toBeUndefined();
+    expect(result.current.value).toEqual('1.2.2');
+  });
+
+  it('should return correct values if the pluginId does not exist', async () => {
+    const { result } = renderHook(() => useAppPluginVersion('otherorg-otherplugin-app'));
+
+    await waitFor(() => expect(result.current.loading).toEqual(false));
+
+    expect(result.current.loading).toEqual(false);
+    expect(result.current.error).toBeUndefined();
+    expect(result.current.value).toEqual(null);
+  });
+
+  it('should return correct values if getAppPluginVersion throws', async () => {
+    getAppPluginVersionMock.mockRejectedValue(new Error('Some error'));
+
+    const { result } = renderHook(() => useAppPluginVersion('otherorg-otherplugin-app'));
+
+    await waitFor(() => expect(result.current.loading).toEqual(false));
+
+    expect(result.current.loading).toEqual(false);
+    expect(result.current.error).toEqual(new Error('Some error'));
+    expect(result.current.value).toBeUndefined();
+  });
+});

packages/grafana-runtime/src/services/pluginMeta/hooks.tsx

@@ -0,0 +1,35 @@
+import { useAsync } from 'react-use';
+
+import { getAppPluginMeta, getAppPluginMetas, getAppPluginVersion, isAppPluginInstalled } from './apps';
+
+export function useAppPluginMetas() {
+  const { loading, error, value } = useAsync(async () => getAppPluginMetas());
+  return { loading, error, value };
+}
+
+export function useAppPluginMeta(pluginId: string) {
+  const { loading, error, value } = useAsync(async () => getAppPluginMeta(pluginId));
+  return { loading, error, value };
+}
+
+/**
+ * Hook that checks if an app plugin is installed. The hook does not check if the app plugin is enabled.
+ * @param pluginId - The ID of the app plugin.
+ * @returns loading, error, value of the app plugin installed status.
+ * The value is true if the app plugin is installed, false otherwise.
+ */
+export function useAppPluginInstalled(pluginId: string) {
+  const { loading, error, value } = useAsync(async () => isAppPluginInstalled(pluginId));
+  return { loading, error, value };
+}
+
+/**
+ * Hook that gets the version of an app plugin.
+ * @param pluginId - The ID of the app plugin.
+ * @returns loading, error, value of the app plugin version.
+ * The value is the version of the app plugin, or null if the plugin is not installed.
+ */
+export function useAppPluginVersion(pluginId: string) {
+  const { loading, error, value } = useAsync(async () => getAppPluginVersion(pluginId));
+  return { loading, error, value };
+}

packages/grafana-runtime/src/services/pluginMeta/mappers/mappers.ts

@@ -0,0 +1,7 @@
+import { AppPluginMetasMapper, PluginMetasResponse } from '../types';
+
+import { v0alpha1AppMapper } from './v0alpha1AppMapper';
+
+export function getAppPluginMapper(): AppPluginMetasMapper<PluginMetasResponse> {
+  return v0alpha1AppMapper;
+}

packages/grafana-runtime/src/services/pluginMeta/mappers/v0alpha1AppMapper.test.ts

@@ -0,0 +1,84 @@
+import { apps } from '../test-fixtures/config.apps';
+import { v0alpha1Response } from '../test-fixtures/v0alpha1Response';
+
+import { v0alpha1AppMapper } from './v0alpha1AppMapper';
+
+const PLUGIN_IDS = v0alpha1Response.items
+  .filter((i) => i.spec.pluginJson.type === 'app')
+  .map((i) => ({ pluginId: i.spec.pluginJson.id }));
+
+describe('v0alpha1AppMapper', () => {
+  describe.each(PLUGIN_IDS)('when called for pluginId:$pluginId', ({ pluginId }) => {
+    it('should map id property correctly', () => {
+      const result = v0alpha1AppMapper(v0alpha1Response);
+
+      expect(result[pluginId].id).toEqual(apps[pluginId].id);
+    });
+
+    it('should map path property correctly', () => {
+      const result = v0alpha1AppMapper(v0alpha1Response);
+
+      expect(result[pluginId].path).toEqual(apps[pluginId].path);
+    });
+
+    it('should map version property correctly', () => {
+      const result = v0alpha1AppMapper(v0alpha1Response);
+
+      expect(result[pluginId].version).toEqual(apps[pluginId].version);
+    });
+
+    it('should map preload property correctly', () => {
+      const result = v0alpha1AppMapper(v0alpha1Response);
+
+      expect(result[pluginId].preload).toEqual(apps[pluginId].preload);
+    });
+
+    it('should map angular property correctly', () => {
+      const result = v0alpha1AppMapper(v0alpha1Response);
+
+      expect(result[pluginId].angular).toEqual({});
+    });
+
+    it('should map loadingStrategy property correctly', () => {
+      const result = v0alpha1AppMapper(v0alpha1Response);
+
+      expect(result[pluginId].loadingStrategy).toEqual(apps[pluginId].loadingStrategy);
+    });
+
+    it('should map dependencies property correctly', () => {
+      const result = v0alpha1AppMapper(v0alpha1Response);
+
+      expect(result[pluginId].dependencies).toEqual(apps[pluginId].dependencies);
+    });
+
+    it('should map extensions property correctly', () => {
+      const result = v0alpha1AppMapper(v0alpha1Response);
+
+      expect(result[pluginId].extensions.addedComponents).toEqual(apps[pluginId].extensions.addedComponents);
+      expect(result[pluginId].extensions.addedFunctions).toEqual(apps[pluginId].extensions.addedFunctions);
+      expect(result[pluginId].extensions.addedLinks).toEqual(apps[pluginId].extensions.addedLinks);
+      expect(result[pluginId].extensions.exposedComponents).toEqual(apps[pluginId].extensions.exposedComponents);
+      expect(result[pluginId].extensions.extensionPoints).toEqual(apps[pluginId].extensions.extensionPoints);
+    });
+
+    it('should map moduleHash property correctly', () => {
+      const result = v0alpha1AppMapper(v0alpha1Response);
+
+      expect(result[pluginId].moduleHash).toEqual(apps[pluginId].moduleHash);
+    });
+
+    it('should map buildMode property correctly', () => {
+      const result = v0alpha1AppMapper(v0alpha1Response);
+
+      expect(result[pluginId].buildMode).toEqual(apps[pluginId].buildMode);
+    });
+  });
+
+  it('should only map specs with type app', () => {
+    const result = v0alpha1AppMapper(v0alpha1Response);
+
+    expect(v0alpha1Response.items).toHaveLength(58);
+    expect(Object.keys(result)).toHaveLength(5);
+    expect(Object.keys(result)).toEqual(Object.keys(apps));
+  });
+});

packages/grafana-runtime/src/services/pluginMeta/mappers/v0alpha1AppMapper.ts

@@ -0,0 +1,111 @@
+import {
+  type AngularMeta,
+  type AppPluginConfig,
+  type PluginDependencies,
+  type PluginExtensions,
+  PluginLoadingStrategy,
+  type PluginType,
+} from '@grafana/data';
+
+import type { AppPluginMetas, AppPluginMetasMapper, PluginMetasResponse } from '../types';
+import type { Spec as v0alpha1Spec } from '../types/types.spec.gen';
+
+function angularyMapper(spec: v0alpha1Spec): AngularMeta {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  return {} as AngularMeta;
+}
+
+function dependenciesMapper(spec: v0alpha1Spec): PluginDependencies {
+  const plugins = (spec.pluginJson.dependencies?.plugins ?? []).map((v) => ({
+    ...v,
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    type: v.type as PluginType,
+    version: '',
+  }));
+
+  const dependencies: PluginDependencies = {
+    ...spec.pluginJson.dependencies,
+    extensions: {
+      exposedComponents: spec.pluginJson.dependencies.extensions?.exposedComponents ?? [],
+    },
+    grafanaDependency: spec.pluginJson.dependencies.grafanaDependency,
+    grafanaVersion: spec.pluginJson.dependencies.grafanaVersion ?? '',
+    plugins,
+  };
+
+  return dependencies;
+}
+
+function extensionsMapper(spec: v0alpha1Spec): PluginExtensions {
+  const addedComponents = spec.pluginJson.extensions?.addedComponents ?? [];
+  const addedFunctions = spec.pluginJson.extensions?.addedFunctions ?? [];
+  const addedLinks = spec.pluginJson.extensions?.addedLinks ?? [];
+  const exposedComponents = (spec.pluginJson.extensions?.exposedComponents ?? []).map((v) => ({
+    ...v,
+    description: v.description ?? '',
+    title: v.title ?? '',
+  }));
+  const extensionPoints = (spec.pluginJson.extensions?.extensionPoints ?? []).map((v) => ({
+    ...v,
+    description: v.description ?? '',
+    title: v.title ?? '',
+  }));
+
+  const extensions: PluginExtensions = {
+    addedComponents,
+    addedFunctions,
+    addedLinks,
+    exposedComponents,
+    extensionPoints,
+  };
+
+  return extensions;
+}
+
+function loadingStrategyMapper(spec: v0alpha1Spec): PluginLoadingStrategy {
+  const loadingStrategy = spec.module?.loadingStrategy ?? PluginLoadingStrategy.fetch;
+  if (loadingStrategy === PluginLoadingStrategy.script) {
+    return PluginLoadingStrategy.script;
+  }
+
+  return PluginLoadingStrategy.fetch;
+}
+
+function specMapper(spec: v0alpha1Spec): AppPluginConfig {
+  const { id, info, preload = false } = spec.pluginJson;
+  const angular = angularyMapper(spec);
+  const dependencies = dependenciesMapper(spec);
+  const extensions = extensionsMapper(spec);
+  const loadingStrategy = loadingStrategyMapper(spec);
+  const path = spec.module?.path ?? '';
+  const version = info.version;
+  const buildMode = spec.pluginJson.buildMode ?? 'production';
+  const moduleHash = spec.module?.hash;
+
+  return {
+    id,
+    angular,
+    dependencies,
+    extensions,
+    loadingStrategy,
+    path,
+    preload,
+    version,
+    buildMode,
+    moduleHash,
+  };
+}
+
+export const v0alpha1AppMapper: AppPluginMetasMapper<PluginMetasResponse> = (response) => {
+  const result: AppPluginMetas = {};
+
+  return response.items.reduce((acc, curr) => {
+    if (curr.spec.pluginJson.type !== 'app') {
+      return acc;
+    }
+
+    const config = specMapper(curr.spec);
+    acc[config.id] = config;
+    return acc;
+  }, result);
+};

packages/grafana-runtime/src/services/pluginMeta/plugins.test.ts

@@ -0,0 +1,153 @@
+import { evaluateBooleanFlag } from '../../internal/openFeature';
+
+import { clearCache, initPluginMetas } from './plugins';
+import { v0alpha1Meta } from './test-fixtures/v0alpha1Response';
+
+jest.mock('../../internal/openFeature', () => ({
+  ...jest.requireActual('../../internal/openFeature'),
+  evaluateBooleanFlag: jest.fn(),
+}));
+
+const evaluateBooleanFlagMock = jest.mocked(evaluateBooleanFlag);
+
+describe('when useMTPlugins toggle is enabled and cache is not initialized', () => {
+  const originalFetch = global.fetch;
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+    clearCache();
+    evaluateBooleanFlagMock.mockReturnValue(true);
+  });
+
+  afterEach(() => {
+    global.fetch = originalFetch;
+  });
+
+  it('initPluginMetas should call loadPluginMetas and return correct result if response is ok', async () => {
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      json: () => Promise.resolve({ items: [v0alpha1Meta] }),
+    });
+
+    const response = await initPluginMetas();
+
+    expect(response.items).toHaveLength(1);
+    expect(response.items[0]).toEqual(v0alpha1Meta);
+    expect(global.fetch).toHaveBeenCalledTimes(1);
+    expect(global.fetch).toHaveBeenCalledWith('/apis/plugins.grafana.app/v0alpha1/namespaces/default/metas');
+  });
+
+  it('initPluginMetas should call loadPluginMetas and return correct result if response is not ok', async () => {
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: false,
+      status: 404,
+      statusText: 'Not found',
+    });
+
+    await expect(initPluginMetas()).rejects.toThrow(new Error(`Failed to load plugin metas 404:Not found`));
+    expect(global.fetch).toHaveBeenCalledTimes(1);
+    expect(global.fetch).toHaveBeenCalledWith('/apis/plugins.grafana.app/v0alpha1/namespaces/default/metas');
+  });
+});
+
+describe('when useMTPlugins toggle is enabled and cache is initialized', () => {
+  const originalFetch = global.fetch;
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+    clearCache();
+    evaluateBooleanFlagMock.mockReturnValue(true);
+  });
+
+  afterEach(() => {
+    global.fetch = originalFetch;
+  });
+
+  it('initPluginMetas should return cache', async () => {
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      json: () => Promise.resolve({ items: [v0alpha1Meta] }),
+    });
+
+    const original = await initPluginMetas();
+    const cached = await initPluginMetas();
+
+    expect(original).toEqual(cached);
+    expect(global.fetch).toHaveBeenCalledTimes(1);
+  });
+
+  it('initPluginMetas should return inflight promise', async () => {
+    jest.useFakeTimers();
+
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      json: () => Promise.resolve({ items: [v0alpha1Meta] }),
+    });
+
+    const original = initPluginMetas();
+    const cached = initPluginMetas();
+    await jest.runAllTimersAsync();
+
+    expect(original).toEqual(cached);
+    expect(global.fetch).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('when useMTPlugins toggle is disabled and cache is not initialized', () => {
+  const originalFetch = global.fetch;
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+    clearCache();
+    global.fetch = jest.fn();
+    evaluateBooleanFlagMock.mockReturnValue(false);
+  });
+
+  afterEach(() => {
+    global.fetch = originalFetch;
+  });
+
+  it('initPluginMetas should call loadPluginMetas and return correct result if response is ok', async () => {
+    const response = await initPluginMetas();
+
+    expect(response.items).toHaveLength(0);
+    expect(global.fetch).not.toHaveBeenCalled();
+  });
+});
+
+describe('when useMTPlugins toggle is disabled and cache is initialized', () => {
+  const originalFetch = global.fetch;
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+    clearCache();
+    global.fetch = jest.fn();
+    evaluateBooleanFlagMock.mockReturnValue(false);
+  });
+
+  afterEach(() => {
+    global.fetch = originalFetch;
+  });
+
+  it('initPluginMetas should return cache', async () => {
+    const original = await initPluginMetas();
+    const cached = await initPluginMetas();
+
+    expect(original).toEqual(cached);
+    expect(global.fetch).not.toHaveBeenCalled();
+  });
+
+  it('initPluginMetas should return inflight promise', async () => {
+    jest.useFakeTimers();
+
+    const original = initPluginMetas();
+    const cached = initPluginMetas();
+    await jest.runAllTimersAsync();
+
+    expect(original).toEqual(cached);
+    expect(global.fetch).not.toHaveBeenCalled();
+  });
+});

packages/grafana-runtime/src/services/pluginMeta/plugins.ts

@@ -0,0 +1,41 @@
+import { config } from '../../config';
+import { evaluateBooleanFlag } from '../../internal/openFeature';
+
+import type { PluginMetasResponse } from './types';
+
+let initPromise: Promise<PluginMetasResponse> | null = null;
+
+function getApiVersion(): string {
+  return 'v0alpha1';
+}
+
+async function loadPluginMetas(): Promise<PluginMetasResponse> {
+  if (!evaluateBooleanFlag('useMTPlugins', false)) {
+    const result = { items: [] };
+    return result;
+  }
+
+  const metas = await fetch(`/apis/plugins.grafana.app/${getApiVersion()}/namespaces/${config.namespace}/metas`);
+  if (!metas.ok) {
+    throw new Error(`Failed to load plugin metas ${metas.status}:${metas.statusText}`);
+  }
+
+  const result = await metas.json();
+  return result;
+}
+
+export function initPluginMetas(): Promise<PluginMetasResponse> {
+  if (!initPromise) {
+    initPromise = loadPluginMetas();
+  }
+
+  return initPromise;
+}
+
+export function clearCache() {
+  if (process.env.NODE_ENV !== 'test') {
+    throw new Error('clearCache() function can only be called from tests.');
+  }
+
+  initPromise = null;
+}

packages/grafana-runtime/src/services/pluginMeta/test-fixtures/config.apps.ts

@@ -0,0 +1,303 @@
+import { cloneDeep } from 'lodash';
+
+import { AngularMeta, AppPluginConfig, PluginLoadingStrategy } from '@grafana/data';
+
+import { AppPluginMetas } from '../types';
+
+export const app: AppPluginConfig = cloneDeep({
+  id: 'myorg-someplugin-app',
+  path: 'public/plugins/myorg-someplugin-app/module.js',
+  version: '1.0.0',
+  preload: false,
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  angular: { detected: false } as AngularMeta,
+  loadingStrategy: PluginLoadingStrategy.script,
+  extensions: {
+    addedLinks: [],
+    addedComponents: [],
+    exposedComponents: [],
+    extensionPoints: [],
+    addedFunctions: [],
+  },
+  dependencies: {
+    grafanaDependency: '>=10.4.0',
+    grafanaVersion: '*',
+    plugins: [],
+    extensions: {
+      exposedComponents: [],
+    },
+  },
+  buildMode: 'production',
+});
+
+export const apps: AppPluginMetas = cloneDeep({
+  'grafana-exploretraces-app': {
+    id: 'grafana-exploretraces-app',
+    path: 'public/plugins/grafana-exploretraces-app/module.js',
+    version: '1.2.2',
+    preload: true,
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    angular: { detected: false } as AngularMeta,
+    loadingStrategy: PluginLoadingStrategy.script,
+    extensions: {
+      addedLinks: [
+        {
+          targets: ['grafana/dashboard/panel/menu'],
+          title: 'Open in Traces Drilldown',
+          description: 'Open current query in the Traces Drilldown app',
+        },
+        {
+          targets: ['grafana/explore/toolbar/action'],
+          title: 'Open in Grafana Traces Drilldown',
+          description: 'Try our new queryless experience for traces',
+        },
+      ],
+      addedComponents: [
+        {
+          targets: ['grafana-asserts-app/entity-assertions-widget/v1'],
+          title: 'Asserts widget',
+          description: 'A block with assertions for a given service',
+        },
+        {
+          targets: ['grafana-asserts-app/insights-timeline-widget/v1'],
+          title: 'Insights Timeline Widget',
+          description: 'Widget for displaying insights timeline in other apps',
+        },
+      ],
+      exposedComponents: [
+        {
+          id: 'grafana-exploretraces-app/open-in-explore-traces-button/v1',
+          title: 'Open in Traces Drilldown button',
+          description: 'A button that opens a traces view in the Traces Drilldown app.',
+        },
+        {
+          id: 'grafana-exploretraces-app/embedded-trace-exploration/v1',
+          title: 'Embedded Trace Exploration',
+          description:
+            'A component that renders a trace exploration view that can be embedded in other parts of Grafana.',
+        },
+      ],
+      extensionPoints: [
+        {
+          id: 'grafana-exploretraces-app/investigation/v1',
+          title: '',
+          description: '',
+        },
+        {
+          id: 'grafana-exploretraces-app/get-logs-drilldown-link/v1',
+          title: '',
+          description: '',
+        },
+      ],
+      addedFunctions: [],
+    },
+    dependencies: {
+      grafanaDependency: '>=11.5.0',
+      grafanaVersion: '*',
+      plugins: [],
+      extensions: {
+        exposedComponents: [
+          'grafana-asserts-app/entity-assertions-widget/v1',
+          'grafana-asserts-app/insights-timeline-widget/v1',
+        ],
+      },
+    },
+    buildMode: 'production',
+  },
+  'grafana-lokiexplore-app': {
+    id: 'grafana-lokiexplore-app',
+    path: 'public/plugins/grafana-lokiexplore-app/module.js',
+    version: '1.0.32',
+    preload: true,
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    angular: { detected: false } as AngularMeta,
+    loadingStrategy: PluginLoadingStrategy.script,
+    extensions: {
+      addedLinks: [
+        {
+          targets: [
+            'grafana/dashboard/panel/menu',
+            'grafana/explore/toolbar/action',
+            'grafana-metricsdrilldown-app/open-in-logs-drilldown/v1',
+            'grafana-assistant-app/navigateToDrilldown/v1',
+          ],
+          title: 'Open in Grafana Logs Drilldown',
+          description: 'Open current query in the Grafana Logs Drilldown view',
+        },
+      ],
+      addedComponents: [
+        {
+          targets: ['grafana-asserts-app/insights-timeline-widget/v1'],
+          title: 'Insights Timeline Widget',
+          description: 'Widget for displaying insights timeline in other apps',
+        },
+      ],
+      exposedComponents: [
+        {
+          id: 'grafana-lokiexplore-app/open-in-explore-logs-button/v1',
+          title: 'Open in Logs Drilldown button',
+          description: 'A button that opens a logs view in the Logs Drilldown app.',
+        },
+        {
+          id: 'grafana-lokiexplore-app/embedded-logs-exploration/v1',
+          title: 'Embedded Logs Exploration',
+          description:
+            'A component that renders a logs exploration view that can be embedded in other parts of Grafana.',
+        },
+      ],
+      extensionPoints: [
+        {
+          id: 'grafana-lokiexplore-app/investigation/v1',
+          title: '',
+          description: '',
+        },
+      ],
+      addedFunctions: [
+        {
+          targets: ['grafana-exploretraces-app/get-logs-drilldown-link/v1'],
+          title: 'Open Logs Drilldown',
+          description: 'Returns url to logs drilldown app',
+        },
+      ],
+    },
+    dependencies: {
+      grafanaDependency: '>=11.6.0',
+      grafanaVersion: '*',
+      plugins: [],
+      extensions: {
+        exposedComponents: [
+          'grafana-adaptivelogs-app/temporary-exemptions/v1',
+          'grafana-lokiexplore-app/embedded-logs-exploration/v1',
+          'grafana-asserts-app/insights-timeline-widget/v1',
+          'grafana/add-to-dashboard-form/v1',
+        ],
+      },
+    },
+    buildMode: 'production',
+  },
+  'grafana-metricsdrilldown-app': {
+    id: 'grafana-metricsdrilldown-app',
+    path: 'public/plugins/grafana-metricsdrilldown-app/module.js',
+    version: '1.0.26',
+    preload: true,
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    angular: { detected: false } as AngularMeta,
+    loadingStrategy: PluginLoadingStrategy.script,
+    extensions: {
+      addedLinks: [
+        {
+          targets: [
+            'grafana/dashboard/panel/menu',
+            'grafana/explore/toolbar/action',
+            'grafana-assistant-app/navigateToDrilldown/v1',
+            'grafana/alerting/alertingrule/queryeditor',
+          ],
+          title: 'Open in Grafana Metrics Drilldown',
+          description: 'Open current query in the Grafana Metrics Drilldown view',
+        },
+        {
+          targets: ['grafana-metricsdrilldown-app/grafana-assistant-app/navigateToDrilldown/v0-alpha'],
+          title: 'Navigate to metrics drilldown',
+          description: 'Build a url path to the metrics drilldown',
+        },
+        {
+          targets: ['grafana/datasources/config/actions', 'grafana/datasources/config/status'],
+          title: 'Open in Metrics Drilldown',
+          description: 'Browse metrics in Grafana Metrics Drilldown',
+        },
+      ],
+      addedComponents: [],
+      exposedComponents: [
+        {
+          id: 'grafana-metricsdrilldown-app/label-breakdown-component/v1',
+          title: 'Label Breakdown',
+          description: 'A metrics label breakdown view from the Metrics Drilldown app.',
+        },
+        {
+          id: 'grafana-metricsdrilldown-app/knowledge-graph-insight-metrics/v1',
+          title: 'Knowledge Graph Source Metrics',
+          description: 'Explore the underlying metrics related to a Knowledge Graph insight',
+        },
+      ],
+      extensionPoints: [
+        {
+          id: 'grafana-exploremetrics-app/investigation/v1',
+          title: '',
+          description: '',
+        },
+        {
+          id: 'grafana-metricsdrilldown-app/open-in-logs-drilldown/v1',
+          title: '',
+          description: '',
+        },
+      ],
+      addedFunctions: [],
+    },
+    dependencies: {
+      grafanaDependency: '>=11.6.0',
+      grafanaVersion: '*',
+      plugins: [],
+      extensions: {
+        exposedComponents: ['grafana/add-to-dashboard-form/v1'],
+      },
+    },
+    buildMode: 'production',
+  },
+  'grafana-pyroscope-app': {
+    id: 'grafana-pyroscope-app',
+    path: 'public/plugins/grafana-pyroscope-app/module.js',
+    version: '1.14.2',
+    preload: true,
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    angular: { detected: false } as AngularMeta,
+    loadingStrategy: PluginLoadingStrategy.script,
+    extensions: {
+      addedLinks: [
+        {
+          targets: [
+            'grafana/explore/toolbar/action',
+            'grafana/traceview/details',
+            'grafana-assistant-app/navigateToDrilldown/v1',
+          ],
+          title: 'Open in Grafana Profiles Drilldown',
+          description: 'Try our new queryless experience for profiles',
+        },
+      ],
+      addedComponents: [],
+      exposedComponents: [
+        {
+          id: 'grafana-pyroscope-app/embedded-profiles-exploration/v1',
+          title: 'Embedded Profiles Exploration',
+          description:
+            'A component that renders a profiles exploration view that can be embedded in other parts of Grafana.',
+        },
+      ],
+      extensionPoints: [
+        {
+          id: 'grafana-pyroscope-app/investigation/v1',
+          title: '',
+          description: '',
+        },
+        {
+          id: 'grafana-pyroscope-app/settings/v1',
+          title: '',
+          description: '',
+        },
+      ],
+      addedFunctions: [],
+    },
+    dependencies: {
+      grafanaDependency: '>=11.5.0',
+      grafanaVersion: '*',
+      plugins: [],
+      extensions: {
+        exposedComponents: [
+          'grafana-o11yinsights-app/insights-launcher/v1',
+          'grafana-adaptiveprofiles-app/resolution-boost/v1',
+        ],
+      },
+    },
+    buildMode: 'production',
+  },
+  [app.id]: app,
+});

packages/grafana-runtime/src/services/pluginMeta/types.ts

@@ -0,0 +1,10 @@
+import type { AppPluginConfig } from '@grafana/data';
+
+import type { Meta } from './types/meta_object_gen';
+
+export type AppPluginMetas = Record<string, AppPluginConfig>;
+
+export type AppPluginMetasMapper<T> = (response: T) => AppPluginMetas;
+export interface PluginMetasResponse {
+  items: Meta[];
+}

packages/grafana-runtime/src/services/pluginMeta/types/meta_object_gen.ts

@@ -0,0 +1,49 @@
+/*
+ * This file was generated by grafana-app-sdk. DO NOT EDIT.
+ */
+import { Spec } from './types.spec.gen';
+import { Status } from './types.status.gen';
+
+export interface Metadata {
+    name: string;
+    namespace: string;
+    generateName?: string;
+    selfLink?: string;
+    uid?: string;
+    resourceVersion?: string;
+    generation?: number;
+    creationTimestamp?: string;
+    deletionTimestamp?: string;
+    deletionGracePeriodSeconds?: number;
+    labels?: Record<string, string>;
+    annotations?: Record<string, string>;
+    ownerReferences?: OwnerReference[];
+    finalizers?: string[];
+    managedFields?: ManagedFieldsEntry[];
+}
+
+export interface OwnerReference {
+    apiVersion: string;
+    kind: string;
+    name: string;
+    uid: string;
+    controller?: boolean;
+    blockOwnerDeletion?: boolean;
+}
+
+export interface ManagedFieldsEntry {
+    manager?: string;
+    operation?: string;
+    apiVersion?: string;
+    time?: string;
+    fieldsType?: string;
+    subresource?: string;
+}
+
+export interface Meta {
+    kind: string;
+    apiVersion: string;
+    metadata: Metadata;
+    spec: Spec;
+    status: Status;
+}

packages/grafana-runtime/src/services/pluginMeta/types/types.spec.gen.ts

@@ -0,0 +1,278 @@
+// Code generated - EDITING IS FUTILE. DO NOT EDIT.
+
+// JSON configuration schema for Grafana plugins
+// Converted from: https://github.com/grafana/grafana/blob/main/docs/sources/developers/plugins/plugin.schema.json
+export interface JSONData {
+	// Unique name of the plugin
+	id: string;
+	// Plugin type
+	type: "app" | "datasource" | "panel" | "renderer";
+	// Human-readable name of the plugin
+	name: string;
+	// Metadata for the plugin
+	info: Info;
+	// Dependency information
+	dependencies: Dependencies;
+	// Optional fields
+	alerting?: boolean;
+	annotations?: boolean;
+	autoEnabled?: boolean;
+	backend?: boolean;
+	buildMode?: string;
+	builtIn?: boolean;
+	category?: "tsdb" | "logging" | "cloud" | "tracing" | "profiling" | "sql" | "enterprise" | "iot" | "other";
+	enterpriseFeatures?: EnterpriseFeatures;
+	executable?: string;
+	hideFromList?: boolean;
+	// +listType=atomic
+	includes?: Include[];
+	logs?: boolean;
+	metrics?: boolean;
+	multiValueFilterOperators?: boolean;
+	pascalName?: string;
+	preload?: boolean;
+	queryOptions?: QueryOptions;
+	// +listType=atomic
+	routes?: Route[];
+	skipDataQuery?: boolean;
+	state?: "alpha" | "beta";
+	streaming?: boolean;
+	suggestions?: boolean;
+	tracing?: boolean;
+	iam?: IAM;
+	// +listType=atomic
+	roles?: Role[];
+	extensions?: Extensions;
+}
+
+export const defaultJSONData = (): JSONData => ({
+	id: "",
+	type: "app",
+	name: "",
+	info: defaultInfo(),
+	dependencies: defaultDependencies(),
+});
+
+export interface Info {
+	// Required fields
+	// +listType=set
+	keywords: string[];
+	logos: {
+		small: string;
+		large: string;
+	};
+	updated: string;
+	version: string;
+	// Optional fields
+	author?: {
+		name?: string;
+		email?: string;
+		url?: string;
+	};
+	description?: string;
+	// +listType=atomic
+	links?: {
+		name?: string;
+		url?: string;
+	}[];
+	// +listType=atomic
+	screenshots?: {
+		name?: string;
+		path?: string;
+	}[];
+}
+
+export const defaultInfo = (): Info => ({
+	keywords: [],
+	logos: {
+	small: "",
+	large: "",
+},
+	updated: "",
+	version: "",
+});
+
+export interface Dependencies {
+	// Required field
+	grafanaDependency: string;
+	// Optional fields
+	grafanaVersion?: string;
+	// +listType=set
+	// +listMapKey=id
+	plugins?: {
+		id: string;
+		type: "app" | "datasource" | "panel";
+		name: string;
+	}[];
+	extensions?: {
+		// +listType=set
+		exposedComponents?: string[];
+	};
+}
+
+export const defaultDependencies = (): Dependencies => ({
+	grafanaDependency: "",
+});
+
+export interface EnterpriseFeatures {
+	// Allow additional properties
+	healthDiagnosticsErrors?: boolean;
+}
+
+export const defaultEnterpriseFeatures = (): EnterpriseFeatures => ({
+	healthDiagnosticsErrors: false,
+});
+
+export interface Include {
+	uid?: string;
+	type?: "dashboard" | "page" | "panel" | "datasource";
+	name?: string;
+	component?: string;
+	role?: "Admin" | "Editor" | "Viewer" | "None";
+	action?: string;
+	path?: string;
+	addToNav?: boolean;
+	defaultNav?: boolean;
+	icon?: string;
+}
+
+export const defaultInclude = (): Include => ({
+});
+
+export interface QueryOptions {
+	maxDataPoints?: boolean;
+	minInterval?: boolean;
+	cacheTimeout?: boolean;
+}
+
+export const defaultQueryOptions = (): QueryOptions => ({
+});
+
+export interface Route {
+	path?: string;
+	method?: string;
+	url?: string;
+	reqSignedIn?: boolean;
+	reqRole?: string;
+	reqAction?: string;
+	// +listType=atomic
+	headers?: string[];
+	body?: Record<string, any>;
+	tokenAuth?: {
+		url?: string;
+		// +listType=set
+		scopes?: string[];
+		params?: Record<string, any>;
+	};
+	jwtTokenAuth?: {
+		url?: string;
+		// +listType=set
+		scopes?: string[];
+		params?: Record<string, any>;
+	};
+	// +listType=atomic
+	urlParams?: {
+		name?: string;
+		content?: string;
+	}[];
+}
+
+export const defaultRoute = (): Route => ({
+});
+
+export interface IAM {
+	// +listType=atomic
+	permissions?: {
+		action?: string;
+		scope?: string;
+	}[];
+}
+
+export const defaultIAM = (): IAM => ({
+});
+
+export interface Role {
+	role?: {
+		name?: string;
+		description?: string;
+		// +listType=atomic
+		permissions?: {
+			action?: string;
+			scope?: string;
+		}[];
+	};
+	// +listType=set
+	grants?: string[];
+}
+
+export const defaultRole = (): Role => ({
+});
+
+export interface Extensions {
+	// +listType=atomic
+	addedComponents?: {
+		// +listType=set
+		targets: string[];
+		title: string;
+		description?: string;
+	}[];
+	// +listType=atomic
+	addedLinks?: {
+		// +listType=set
+		targets: string[];
+		title: string;
+		description?: string;
+	}[];
+	// +listType=atomic
+	addedFunctions?: {
+		// +listType=set
+		targets: string[];
+		title: string;
+		description?: string;
+	}[];
+	// +listType=set
+	// +listMapKey=id
+	exposedComponents?: {
+		id: string;
+		title?: string;
+		description?: string;
+	}[];
+	// +listType=set
+	// +listMapKey=id
+	extensionPoints?: {
+		id: string;
+		title?: string;
+		description?: string;
+	}[];
+}
+
+export const defaultExtensions = (): Extensions => ({
+});
+
+export interface Spec {
+	pluginJson: JSONData;
+	class: "core" | "external";
+	module?: {
+		path: string;
+		hash?: string;
+		loadingStrategy?: "fetch" | "script";
+	};
+	baseURL?: string;
+	signature?: {
+		status: "internal" | "valid" | "invalid" | "modified" | "unsigned";
+		type?: "grafana" | "commercial" | "community" | "private" | "private-glob";
+		org?: string;
+	};
+	angular?: {
+		detected: boolean;
+	};
+	translations?: Record<string, string>;
+	// +listType=atomic
+	children?: string[];
+}
+
+export const defaultSpec = (): Spec => ({
+	pluginJson: defaultJSONData(),
+	class: "core",
+});
+

packages/grafana-runtime/src/services/pluginMeta/types/types.status.gen.ts

@@ -0,0 +1,30 @@
+// Code generated - EDITING IS FUTILE. DO NOT EDIT.
+
+export interface OperatorState {
+	// lastEvaluation is the ResourceVersion last evaluated
+	lastEvaluation: string;
+	// state describes the state of the lastEvaluation.
+	// It is limited to three possible states for machine evaluation.
+	state: "success" | "in_progress" | "failed";
+	// descriptiveState is an optional more descriptive state field which has no requirements on format
+	descriptiveState?: string;
+	// details contains any extra information that is operator-specific
+	details?: Record<string, any>;
+}
+
+export const defaultOperatorState = (): OperatorState => ({
+	lastEvaluation: "",
+	state: "success",
+});
+
+export interface Status {
+	// operatorStates is a map of operator ID to operator state evaluations.
+	// Any operator which consumes this kind SHOULD add its state evaluation information to this field.
+	operatorStates?: Record<string, OperatorState>;
+	// additionalFields is reserved for future use
+	additionalFields?: Record<string, any>;
+}
+
+export const defaultStatus = (): Status => ({
+});
+

packages/grafana-schema/src/raw/composable/elasticsearch/dataquery/x/ElasticsearchDataQuery_types.gen.ts

@@ -10,7 +10,7 @@
 
 import * as common from '@grafana/schema';
 
-export const pluginVersion = "12.4.0-pre";
+export const pluginVersion = "%VERSION%";
 
 export type BucketAggregation = (DateHistogram | Histogram | Terms | Filters | GeoHashGrid | Nested);
 

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,
@@ -527,7 +527,7 @@ 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,
@@ -641,7 +641,7 @@ func (hs *HTTPServer) newAppDTO(ctx context.Context, plugin pluginstore.Plugin,
 		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"
@@ -77,7 +79,8 @@ func setupTestEnvironment(t *testing.T, cfg *setting.Cfg, features featuremgmt.F
 
 	var pluginsAssets = passets
 	if pluginsAssets == nil {
-		pluginsAssets = pluginassets.ProvideService(pluginsCfg, pluginsCDN, pluginStore)
+		sig := signature.ProvideService(pluginsCfg, statickey.New())
+		pluginsAssets = pluginassets.ProvideService(pluginsCfg, pluginsCDN, sig, pluginStore)
 	}
 
 	hs := &HTTPServer{
@@ -711,6 +714,6 @@ func newPluginAssets() func() *pluginassets.Service {
 
 func newPluginAssetsWithConfig(pCfg *config.PluginManagementCfg) func() *pluginassets.Service {
 	return func() *pluginassets.Service {
-		return pluginassets.ProvideService(pCfg, pluginscdn.ProvideService(pCfg), &pluginstore.FakePluginStore{})
+		return pluginassets.ProvideService(pCfg, pluginscdn.ProvideService(pCfg), signature.ProvideService(pCfg, statickey.New()), &pluginstore.FakePluginStore{})
 	}
 }

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,

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"
@@ -846,7 +848,8 @@ func Test_PluginsSettings(t *testing.T) {
 				}
 				pCfg := &config.PluginManagementCfg{}
 				pluginCDN := pluginscdn.ProvideService(pCfg)
-				hs.pluginAssets = pluginassets.ProvideService(pCfg, pluginCDN, hs.pluginStore)
+				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/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

@@ -216,27 +216,10 @@ 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",