More logs

* docs: update anonymous access docs

* reset title

* reset title

docs/sources/datasources/graphite/_index.md

@@ -111,3 +111,4 @@ After installing and configuring the Graphite data source you can:
 - Add [transformations](ref:transformations)
 - Add [annotations](ref:annotate-visualizations)
 - Set up [alerting](ref:alerting)
+- [Troubleshoot](troubleshooting/) common issues with the Graphite data source

docs/sources/datasources/graphite/troubleshooting/index.md

@@ -0,0 +1,174 @@
+---
+description: Troubleshoot common issues with the Graphite data source.
+keywords:
+  - grafana
+  - graphite
+  - troubleshooting
+  - guide
+labels:
+  products:
+    - cloud
+    - enterprise
+    - oss
+menuTitle: Troubleshooting
+title: Troubleshoot Graphite data source issues
+weight: 400
+refs:
+  configure-graphite:
+    - pattern: /docs/grafana/
+      destination: /docs/grafana/<GRAFANA_VERSION>/datasources/graphite/configure/
+    - pattern: /docs/grafana-cloud/
+      destination: /docs/grafana/<GRAFANA_VERSION>/datasources/graphite/configure/
+  query-editor:
+    - pattern: /docs/grafana/
+      destination: /docs/grafana/<GRAFANA_VERSION>/datasources/graphite/query-editor/
+    - pattern: /docs/grafana-cloud/
+      destination: /docs/grafana/<GRAFANA_VERSION>/datasources/graphite/query-editor/
+---
+
+# Troubleshoot Graphite data source issues
+
+This document provides solutions for common issues you might encounter when using the Graphite data source.
+
+## Connection issues
+
+Use the following troubleshooting steps to resolve connection problems between Grafana and your Graphite server.
+
+**Data source test fails with "Unable to connect":**
+
+If the data source test fails, verify the following:
+
+- The URL in your data source configuration is correct and accessible from the Grafana server.
+- The Graphite server is running and accepting connections.
+- Any firewall rules or network policies allow traffic between Grafana and the Graphite server.
+- If using TLS, ensure your certificates are valid and properly configured.
+
+To test connectivity, run the following command from the Grafana server:
+
+```sh
+curl -v <GRAPHITE_URL>/render
+```
+
+Replace _`<GRAPHITE_URL>`_ with your Graphite server URL. A successful connection returns a response from the Graphite server.
+
+**Authentication errors:**
+
+If you receive 401 or 403 errors:
+
+- Verify your Basic Auth username and password are correct.
+- Ensure the **With Credentials** toggle is enabled if your Graphite server requires cookies for authentication.
+- Check that your TLS client certificates are valid and match what the server expects.
+
+For detailed authentication configuration, refer to [Configure the Graphite data source](ref:configure-graphite).
+
+## Query issues
+
+Use the following troubleshooting steps to resolve problems with Graphite queries.
+
+**No data returned:**
+
+If your query returns no data:
+
+- Verify the metric path exists in your Graphite server by testing directly in the Graphite web interface.
+- Check that the time range in Grafana matches when data was collected.
+- Ensure wildcards in your query match existing metrics.
+- Confirm your query syntax is correct for your Graphite version.
+
+**HTTP 500 errors with HTML content:**
+
+Graphite-web versions before 1.6 return HTTP 500 errors with full HTML stack traces when a query fails. If you see error messages containing HTML tags:
+
+- Check the Graphite server logs for the full error details.
+- Verify your query syntax is valid.
+- Ensure the requested time range doesn't exceed your Graphite server's capabilities.
+- Check that all functions used in your query are supported by your Graphite version.
+
+**Parser errors in the query editor:**
+
+If the query editor displays parser errors:
+
+- Check for unbalanced parentheses in function calls.
+- Verify that function arguments are in the correct format.
+- Ensure metric paths don't contain unsupported characters.
+
+For query syntax help, refer to [Graphite query editor](ref:query-editor).
+
+## Version and feature issues
+
+Use the following troubleshooting steps to resolve problems related to Graphite versions and features.
+
+**Functions missing from the query editor:**
+
+If expected functions don't appear in the query editor:
+
+- Verify the correct Graphite version is selected in the data source configuration.
+- The available functions depend on the configured version. For example, tag-based functions require Graphite 1.1 or later.
+- If using a custom Graphite installation with additional functions, ensure the version setting matches your server.
+
+**Tag-based queries not working:**
+
+If `seriesByTag()` or other tag functions fail:
+
+- Confirm your Graphite server is version 1.1 or later.
+- Verify the Graphite version setting in your data source configuration matches your actual server version.
+- Check that tags are properly configured in your Graphite server.
+
+## Performance issues
+
+Use the following troubleshooting steps to address slow queries or timeouts.
+
+**Queries timing out:**
+
+If queries consistently time out:
+
+- Increase the **Timeout** setting in the data source configuration.
+- Reduce the time range of your query.
+- Use more specific metric paths instead of broad wildcards.
+- Consider using `summarize()` or `consolidateBy()` functions to reduce the amount of data returned.
+- Check your Graphite server's performance and resource utilization.
+
+**Slow autocomplete in the query editor:**
+
+If metric path autocomplete is slow:
+
+- This often indicates a large number of metrics in your Graphite server.
+- Use more specific path prefixes to narrow the search scope.
+- Check your Graphite server's index performance.
+
+## MetricTank-specific issues
+
+If you're using MetricTank as your Graphite backend, use the following troubleshooting steps.
+
+**Rollup indicator not appearing:**
+
+If the rollup indicator doesn't display when expected:
+
+- Verify **Metrictank** is selected as the Graphite backend type in the data source configuration.
+- Ensure the **Rollup indicator** toggle is enabled.
+- The indicator only appears when data aggregation actually occurs.
+
+**Unexpected data aggregation:**
+
+If you see unexpected aggregation in your data:
+
+- Check the rollup configuration in your MetricTank instance.
+- Adjust the time range or use `consolidateBy()` to control aggregation behavior.
+- Review the query processing metadata in the panel inspector for details on how data was processed.
+
+## Get additional help
+
+If you continue to experience issues:
+
+- Check the [Grafana community forums](https://community.grafana.com/) for similar issues and solutions.
+- Review the [Graphite documentation](https://graphite.readthedocs.io/) for additional configuration options.
+- Contact [Grafana Support](https://grafana.com/support/) if you're an Enterprise, Cloud Pro, or Cloud Advanced customer.
+
+When reporting issues, include the following information:
+
+- Grafana version
+- Graphite version (for example, 1.1.x) and backend type (Default or MetricTank)
+- Authentication method (Basic Auth, TLS, or none)
+- Error messages (redact sensitive information)
+- Steps to reproduce the issue
+- Relevant configuration such as data source settings, timeout values, and Graphite version setting (redact passwords and other credentials)
+- Sample query (if applicable, with sensitive data redacted)

docs/sources/setup-grafana/configure-access/configure-authentication/anonymous-auth/index.md

@@ -38,13 +38,6 @@ Users can now view anonymous usage statistics, including the count of devices an
 
 The number of anonymous devices is not limited by default. The configuration option `device_limit` allows you to enforce a limit on the number of anonymous devices. This enables you to have greater control over the usage within your Grafana instance and keep the usage within the limits of your environment. Once the limit is reached, any new devices that try to access Grafana will be denied access.
 
-To display anonymous users and devices for versions 10.2, 10.3, 10.4, you need to enable the feature toggle `displayAnonymousStats`
-
-```bash
-[feature_toggles]
-enable = displayAnonymousStats
-```
-
 ## Configuration
 
 Example:
@@ -67,3 +60,15 @@ device_limit =
 ```
 
 If you change your organization name in the Grafana UI this setting needs to be updated to match the new name.
+
+## Licensing for anonymous access
+
+Grafana Enterprise (self-managed) licenses anonymous access as active users.
+
+Anonymous access lets people use Grafana without login credentials. It was an early way to share dashboards, but Public dashboards gives you a more secure way to share dashboards.
+
+### How anonymous usage is counted
+
+Grafana estimates anonymous active users from anonymous devices:
+
+- **Counting rule**: Grafana counts 1 anonymous user for every 3 anonymous devices detected.

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

@@ -782,10 +782,6 @@ export interface FeatureToggles {
   */
   elasticsearchCrossClusterSearch?: boolean;
   /**
-  * Displays the navigation history so the user can navigate back to previous pages
-  */
-  unifiedHistory?: boolean;
-  /**
   * Defaults to using the Loki `/labels` API instead of `/series`
   * @default true
   */

pkg/registry/apis/iam/authorizer/resource_permissions.go

@@ -170,42 +170,56 @@ func (r *ResourcePermissionsAuthorizer) FilterList(ctx context.Context, list run
 	if !ok {
 		return nil, storewrapper.ErrUnauthenticated
 	}
+	r.logger.Debug("filtering resource permissions list with auth info",
+		"namespace", authInfo.GetNamespace(),
+		"identity Subject", authInfo.GetSubject(),
+		"identity UID", authInfo.GetUID(),
+		"identity type", authInfo.GetIdentityType(),
+	)
 
 	switch l := list.(type) {
 	case *iamv0.ResourcePermissionList:
+
+		r.logger.Debug("filtering list of length", "length", len(l.Items))
 		var (
 			filteredItems []iamv0.ResourcePermission
 			err           error
 			canViewFuncs  = map[schema.GroupResource]types.ItemChecker{}
 		)
 		for _, item := range l.Items {
-			gr := schema.GroupResource{
-				Group:    item.Spec.Resource.ApiGroup,
-				Resource: item.Spec.Resource.Resource,
-			}
+			target := item.Spec.Resource
+			targetGR := schema.GroupResource{Group: target.ApiGroup, Resource: target.Resource}
+
+			r.logger.Debug("target resource",
+				"group", target.ApiGroup,
+				"resource", target.Resource,
+				"name", target.Name,
+			)
 
 			// Reuse the same canView for items with the same resource
-			canView, found := canViewFuncs[gr]
+			canView, found := canViewFuncs[targetGR]
 
 			if !found {
 				listReq := types.ListRequest{
 					Namespace: item.Namespace,
-					Group:     item.Spec.Resource.ApiGroup,
-					Resource:  item.Spec.Resource.Resource,
+					Group:     target.ApiGroup,
+					Resource:  target.Resource,
 					Verb:      utils.VerbGetPermissions,
 				}
-
+				r.logger.Debug("compiling list request",
+					"namespace", item.Namespace,
+					"group", target.ApiGroup,
+					"resource", target.Resource,
+					"verb", utils.VerbGetPermissions,
+				)
 				canView, _, err = r.accessClient.Compile(ctx, authInfo, listReq)
 				if err != nil {
 					return nil, err
 				}
 
-				canViewFuncs[gr] = canView
+				canViewFuncs[targetGR] = canView
 			}
 
-			target := item.Spec.Resource
-			targetGR := schema.GroupResource{Group: target.ApiGroup, Resource: target.Resource}
-
 			parent := ""
 			// Fetch the parent of the resource
 			// It's not efficient to do for every item in the list, but it's a good starting point.
@@ -223,6 +237,13 @@ func (r *ResourcePermissionsAuthorizer) FilterList(ctx context.Context, list run
 					)
 					continue
 				}
+				r.logger.Debug("fetched parent",
+					"parent", p,
+					"namespace", item.Namespace,
+					"group", target.ApiGroup,
+					"resource", target.Resource,
+					"name", target.Name,
+				)
 				parent = p
 			}
 

pkg/services/authz/zanzana.go

@@ -90,7 +90,7 @@ func ProvideZanzanaClient(cfg *setting.Cfg, db db.DB, tracer tracing.Tracer, fea
 		authzv1.RegisterAuthzServiceServer(channel, srv)
 		authzextv1.RegisterAuthzExtentionServiceServer(channel, srv)
 
-		client, err := zClient.New(channel)
+		client, err := zClient.New(channel, reg)
 		if err != nil {
 			return nil, fmt.Errorf("failed to initialize zanzana client: %w", err)
 		}
@@ -169,7 +169,7 @@ func NewRemoteZanzanaClient(cfg ZanzanaClientConfig, reg prometheus.Registerer)
 		return nil, fmt.Errorf("failed to create zanzana client to remote server: %w", err)
 	}
 
-	client, err := zClient.New(conn)
+	client, err := zClient.New(conn, reg)
 	if err != nil {
 		return nil, fmt.Errorf("failed to initialize zanzana client: %w", err)
 	}

pkg/services/authz/zanzana/client/client.go

@@ -9,6 +9,7 @@ import (
 	authzlib "github.com/grafana/authlib/authz"
 	authzv1 "github.com/grafana/authlib/authz/proto/v1"
 	authlib "github.com/grafana/authlib/types"
+	"github.com/prometheus/client_golang/prometheus"
 
 	"github.com/grafana/grafana/pkg/infra/log"
 	authzextv1 "github.com/grafana/grafana/pkg/services/authz/proto/v1"
@@ -25,15 +26,17 @@ type Client struct {
 	authz          authzv1.AuthzServiceClient
 	authzext       authzextv1.AuthzExtentionServiceClient
 	authzlibclient *authzlib.ClientImpl
+	metrics        *clientMetrics
 }
 
-func New(cc grpc.ClientConnInterface) (*Client, error) {
+func New(cc grpc.ClientConnInterface, reg prometheus.Registerer) (*Client, error) {
 	authzlibclient := authzlib.NewClient(cc, authzlib.WithTracerClientOption(tracer))
 	c := &Client{
 		authzlibclient: authzlibclient,
 		authz:          authzv1.NewAuthzServiceClient(cc),
 		authzext:       authzextv1.NewAuthzExtentionServiceClient(cc),
 		logger:         log.New("zanzana.client"),
+		metrics:        newClientMetrics(reg),
 	}
 
 	return c, nil
@@ -43,6 +46,9 @@ func (c *Client) Check(ctx context.Context, id authlib.AuthInfo, req authlib.Che
 	ctx, span := tracer.Start(ctx, "authlib.zanzana.client.Check")
 	defer span.End()
 
+	timer := prometheus.NewTimer(c.metrics.requestDurationSeconds.WithLabelValues("Check", req.Namespace))
+	defer timer.ObserveDuration()
+
 	return c.authzlibclient.Check(ctx, id, req, folder)
 }
 
@@ -50,6 +56,9 @@ func (c *Client) Compile(ctx context.Context, id authlib.AuthInfo, req authlib.L
 	ctx, span := tracer.Start(ctx, "authlib.zanzana.client.Compile")
 	defer span.End()
 
+	timer := prometheus.NewTimer(c.metrics.requestDurationSeconds.WithLabelValues("Compile", req.Namespace))
+	defer timer.ObserveDuration()
+
 	return c.authzlibclient.Compile(ctx, id, req)
 }
 
@@ -64,6 +73,9 @@ func (c *Client) Write(ctx context.Context, req *authzextv1.WriteRequest) error
 	ctx, span := tracer.Start(ctx, "authlib.zanzana.client.Write")
 	defer span.End()
 
+	timer := prometheus.NewTimer(c.metrics.requestDurationSeconds.WithLabelValues("Write", req.Namespace))
+	defer timer.ObserveDuration()
+
 	_, err := c.authzext.Write(ctx, req)
 	return err
 }
@@ -72,6 +84,9 @@ func (c *Client) BatchCheck(ctx context.Context, req *authzextv1.BatchCheckReque
 	ctx, span := tracer.Start(ctx, "authlib.zanzana.client.Check")
 	defer span.End()
 
+	timer := prometheus.NewTimer(c.metrics.requestDurationSeconds.WithLabelValues("BatchCheck", req.Namespace))
+	defer timer.ObserveDuration()
+
 	return c.authzext.BatchCheck(ctx, req)
 }
 
@@ -87,6 +102,9 @@ func (c *Client) Mutate(ctx context.Context, req *authzextv1.MutateRequest) erro
 	ctx, span := tracer.Start(ctx, "authlib.zanzana.client.Mutate")
 	defer span.End()
 
+	timer := prometheus.NewTimer(c.metrics.requestDurationSeconds.WithLabelValues("Mutate", req.Namespace))
+	defer timer.ObserveDuration()
+
 	_, err := c.authzext.Mutate(ctx, req)
 	return err
 }
@@ -95,5 +113,8 @@ func (c *Client) Query(ctx context.Context, req *authzextv1.QueryRequest) (*auth
 	ctx, span := tracer.Start(ctx, "authlib.zanzana.client.Query")
 	defer span.End()
 
+	timer := prometheus.NewTimer(c.metrics.requestDurationSeconds.WithLabelValues("Query", req.Namespace))
+	defer timer.ObserveDuration()
+
 	return c.authzext.Query(ctx, req)
 }

pkg/services/authz/zanzana/client/metrics.go

@@ -7,10 +7,10 @@ import (
 
 const (
 	metricsNamespace = "iam"
-	metricsSubSystem = "authz_zanzana"
+	metricsSubSystem = "authz_zanzana_client"
 )
 
-type metrics struct {
+type shadowClientMetrics struct {
 	// evaluationsSeconds is a summary for evaluating access for a specific engine (RBAC and zanzana)
 	evaluationsSeconds *prometheus.HistogramVec
 	// compileSeconds is a summary for compiling item checker for a specific engine (RBAC and zanzana)
@@ -19,8 +19,13 @@ type metrics struct {
 	evaluationStatusTotal *prometheus.CounterVec
 }
 
-func newShadowClientMetrics(reg prometheus.Registerer) *metrics {
-	return &metrics{
+type clientMetrics struct {
+	// requestDurationSeconds is a summary for zanzana client request duration
+	requestDurationSeconds *prometheus.HistogramVec
+}
+
+func newShadowClientMetrics(reg prometheus.Registerer) *shadowClientMetrics {
+	return &shadowClientMetrics{
 		evaluationsSeconds: promauto.With(reg).NewHistogramVec(
 			prometheus.HistogramOpts{
 				Name:      "engine_evaluations_seconds",
@@ -52,3 +57,18 @@ func newShadowClientMetrics(reg prometheus.Registerer) *metrics {
 		),
 	}
 }
+
+func newClientMetrics(reg prometheus.Registerer) *clientMetrics {
+	return &clientMetrics{
+		requestDurationSeconds: promauto.With(reg).NewHistogramVec(
+			prometheus.HistogramOpts{
+				Name:      "request_duration_seconds",
+				Help:      "Histogram for zanzana client request duration",
+				Namespace: metricsNamespace,
+				Subsystem: metricsSubSystem,
+				Buckets:   prometheus.ExponentialBuckets(0.00001, 4, 10),
+			},
+			[]string{"method", "request_namespace"},
+		),
+	}
+}

pkg/services/authz/zanzana/client/shadow_client.go

@@ -20,7 +20,7 @@ type ShadowClient struct {
 	logger        log.Logger
 	accessClient  authlib.AccessClient
 	zanzanaClient authlib.AccessClient
-	metrics       *metrics
+	metrics       *shadowClientMetrics
 }
 
 // WithShadowClient returns a new access client that runs zanzana checks in the background.

pkg/services/featuremgmt/registry.go

@@ -1290,13 +1290,6 @@ var (
 			Owner:       grafanaPartnerPluginsSquad,
 			Expression:  "false",
 		},
-		{
-			Name:         "unifiedHistory",
-			Description:  "Displays the navigation history so the user can navigate back to previous pages",
-			Stage:        FeatureStageExperimental,
-			Owner:        grafanaFrontendSearchNavOrganise,
-			FrontendOnly: true,
-		},
 		{
 			// Remove this flag once Loki v4 is released and the min supported version is v3.0+,
 			// since users on v2.9 need it to disable the feature, as it doesn't work for them.

pkg/services/featuremgmt/toggles_gen.csv

@@ -178,7 +178,6 @@ alertingAIAnalyzeCentralStateHistory,experimental,@grafana/alerting-squad,false,
 alertingNotificationsStepMode,GA,@grafana/alerting-squad,false,false,true
 unifiedStorageSearchUI,experimental,@grafana/search-and-storage,false,false,false
 elasticsearchCrossClusterSearch,GA,@grafana/partner-datasources,false,false,false
-unifiedHistory,experimental,@grafana/grafana-search-navigate-organise,false,false,true
 lokiLabelNamesQueryApi,GA,@grafana/observability-logs,false,false,false
 k8SFolderCounts,experimental,@grafana/search-and-storage,false,false,false
 k8SFolderMove,experimental,@grafana/search-and-storage,false,false,false

pkg/services/featuremgmt/toggles_gen.json

@@ -3584,8 +3584,12 @@
     {
       "metadata": {
         "name": "unifiedHistory",
-        "resourceVersion": "1764664939750",
-        "creationTimestamp": "2024-12-13T10:41:18Z"
+        "resourceVersion": "1762958248290",
+        "creationTimestamp": "2024-12-13T10:41:18Z",
+        "deletionTimestamp": "2025-11-13T16:25:53Z",
+        "annotations": {
+          "grafana.app/updatedTimestamp": "2025-11-12 14:37:28.29086 +0000 UTC"
+        }
       },
       "spec": {
         "description": "Displays the navigation history so the user can navigate back to previous pages",

public/app/core/components/AppChrome/AppChromeService.tsx

@@ -10,11 +10,8 @@ import { isShallowEqual } from 'app/core/utils/isShallowEqual';
 import { KioskMode } from 'app/types/dashboard';
 
 import { RouteDescriptor } from '../../navigation/types';
-import { buildBreadcrumbs } from '../Breadcrumbs/utils';
 
-import { logDuplicateUnifiedHistoryEntryEvent } from './History/eventsTracking';
 import { ReturnToPreviousProps } from './ReturnToPrevious/ReturnToPrevious';
-import { HistoryEntry } from './types';
 
 export interface AppChromeState {
   chromeless?: boolean;
@@ -34,7 +31,6 @@ export interface AppChromeState {
 
 export const DOCKED_LOCAL_STORAGE_KEY = 'grafana.navigation.docked';
 export const DOCKED_MENU_OPEN_LOCAL_STORAGE_KEY = 'grafana.navigation.open';
-export const HISTORY_LOCAL_STORAGE_KEY = 'grafana.navigation.history';
 
 export class AppChromeService {
   searchBarStorageKey = 'SearchBar_Hidden';
@@ -88,8 +84,6 @@ export class AppChromeService {
     newState.chromeless = newState.kioskMode === KioskMode.Full || this.currentRoute?.chromeless;
 
     if (!this.ignoreStateUpdate(newState, current)) {
-      config.featureToggles.unifiedHistory &&
-        store.setObject(HISTORY_LOCAL_STORAGE_KEY, this.getUpdatedHistory(newState));
       this.state.next(newState);
     }
   }
@@ -118,40 +112,6 @@ export class AppChromeService {
     window.sessionStorage.removeItem('returnToPrevious');
   };
 
-  private getUpdatedHistory(newState: AppChromeState): HistoryEntry[] {
-    const breadcrumbs = buildBreadcrumbs(newState.sectionNav.node, newState.pageNav, { text: 'Home', url: '/' });
-    const newPageNav = newState.pageNav || newState.sectionNav.node;
-
-    let entries = store.getObject<HistoryEntry[]>(HISTORY_LOCAL_STORAGE_KEY, []);
-    const clickedHistory = store.getObject<boolean>('CLICKING_HISTORY');
-    if (clickedHistory) {
-      store.setObject('CLICKING_HISTORY', false);
-      return entries;
-    }
-    if (!newPageNav) {
-      return entries;
-    }
-
-    const lastEntry = entries[0];
-    const newEntry = { name: newPageNav.text, views: [], breadcrumbs, time: Date.now(), url: window.location.href };
-    const isSamePath = lastEntry && newEntry.url.split('?')[0] === lastEntry.url.split('?')[0];
-
-    // To avoid adding an entry with the same path twice, we always use the latest one
-    if (isSamePath) {
-      entries[0] = newEntry;
-    } else {
-      if (lastEntry && lastEntry.name === newEntry.name) {
-        logDuplicateUnifiedHistoryEntryEvent({
-          entryName: newEntry.name,
-          lastEntryURL: lastEntry.url,
-          newEntryURL: newEntry.url,
-        });
-      }
-      entries = [newEntry, ...entries];
-    }
-
-    return entries;
-  }
   private ignoreStateUpdate(newState: AppChromeState, current: AppChromeState) {
     if (isShallowEqual(newState, current)) {
       return true;

public/app/core/components/AppChrome/History/HistoryContainer.tsx

@@ -1,87 +0,0 @@
-import { css } from '@emotion/css';
-import { useEffect } from 'react';
-import { useToggle } from 'react-use';
-
-import { GrafanaTheme2, store } from '@grafana/data';
-import { t } from '@grafana/i18n';
-import { Drawer, ToolbarButton, useStyles2 } from '@grafana/ui';
-import { appEvents } from 'app/core/app_events';
-import { RecordHistoryEntryEvent } from 'app/types/events';
-
-import { HISTORY_LOCAL_STORAGE_KEY } from '../AppChromeService';
-import { NavToolbarSeparator } from '../NavToolbar/NavToolbarSeparator';
-import { HistoryEntry } from '../types';
-
-import { HistoryWrapper } from './HistoryWrapper';
-import { logUnifiedHistoryDrawerInteractionEvent } from './eventsTracking';
-
-export function HistoryContainer() {
-  const [showHistoryDrawer, onToggleShowHistoryDrawer] = useToggle(false);
-  const styles = useStyles2(getStyles);
-
-  useEffect(() => {
-    const sub = appEvents.subscribe(RecordHistoryEntryEvent, (ev) => {
-      const clickedHistory = store.getObject<boolean>('CLICKING_HISTORY');
-      if (clickedHistory) {
-        store.setObject('CLICKING_HISTORY', false);
-        return;
-      }
-      const history = store.getObject<HistoryEntry[]>(HISTORY_LOCAL_STORAGE_KEY, []);
-      let lastEntry = history[0];
-      const newUrl = ev.payload.url;
-      const lastUrl = lastEntry.views[0]?.url;
-      if (lastUrl !== newUrl) {
-        lastEntry.views = [
-          {
-            name: ev.payload.name,
-            description: ev.payload.description,
-            url: newUrl,
-            time: Date.now(),
-          },
-          ...lastEntry.views,
-        ];
-        store.setObject(HISTORY_LOCAL_STORAGE_KEY, [...history]);
-      }
-      return () => {
-        sub.unsubscribe();
-      };
-    });
-  }, []);
-
-  return (
-    <>
-      <ToolbarButton
-        onClick={() => {
-          onToggleShowHistoryDrawer();
-          logUnifiedHistoryDrawerInteractionEvent({ type: 'open' });
-        }}
-        iconOnly
-        icon="history"
-        aria-label={t('nav.history-container.drawer-tittle', 'History')}
-      />
-      <NavToolbarSeparator className={styles.separator} />
-      {showHistoryDrawer && (
-        <Drawer
-          title={t('nav.history-container.drawer-tittle', 'History')}
-          onClose={() => {
-            onToggleShowHistoryDrawer();
-            logUnifiedHistoryDrawerInteractionEvent({ type: 'close' });
-          }}
-          size="sm"
-        >
-          <HistoryWrapper onClose={() => onToggleShowHistoryDrawer(false)} />
-        </Drawer>
-      )}
-    </>
-  );
-}
-
-const getStyles = (theme: GrafanaTheme2) => {
-  return {
-    separator: css({
-      [theme.breakpoints.down('sm')]: {
-        display: 'none',
-      },
-    }),
-  };
-};

public/app/core/components/AppChrome/History/HistoryWrapper.tsx

@@ -1,291 +0,0 @@
-import { css, cx } from '@emotion/css';
-import moment from 'moment';
-import { useState } from 'react';
-
-import { FieldType, GrafanaTheme2, store } from '@grafana/data';
-import { t } from '@grafana/i18n';
-import { Box, Button, Card, Icon, IconButton, Space, Sparkline, Stack, Text, useStyles2, useTheme2 } from '@grafana/ui';
-import { formatDate } from 'app/core/internationalization/dates';
-
-import { HISTORY_LOCAL_STORAGE_KEY } from '../AppChromeService';
-import { HistoryEntry } from '../types';
-
-import { logClickUnifiedHistoryEntryEvent, logUnifiedHistoryShowMoreEvent } from './eventsTracking';
-
-export function HistoryWrapper({ onClose }: { onClose: () => void }) {
-  const history = store.getObject<HistoryEntry[]>(HISTORY_LOCAL_STORAGE_KEY, []).filter((entry) => {
-    return moment(entry.time).isAfter(moment().subtract(2, 'day').startOf('day'));
-  });
-  const [numItemsToShow, setNumItemsToShow] = useState(5);
-
-  const selectedTime = history.find((entry) => {
-    return entry.url === window.location.href || entry.views.some((view) => view.url === window.location.href);
-  })?.time;
-
-  const hist = history.slice(0, numItemsToShow).reduce((acc: { [key: string]: HistoryEntry[] }, entry) => {
-    const date = moment(entry.time);
-    let key = '';
-    if (date.isSame(moment(), 'day')) {
-      key = t('nav.history-wrapper.today', 'Today');
-    } else if (date.isSame(moment().subtract(1, 'day'), 'day')) {
-      key = t('nav.history-wrapper.yesterday', 'Yesterday');
-    } else {
-      key = date.format('YYYY-MM-DD');
-    }
-    acc[key] = [...(acc[key] || []), entry];
-    return acc;
-  }, {});
-  const styles = useStyles2(getStyles);
-  return (
-    <Stack direction="column" alignItems="flex-start">
-      <Box width="100%">
-        {Object.keys(hist).map((entries, date) => {
-          return (
-            <Stack key={date} direction="column" gap={1}>
-              <Box paddingLeft={2}>
-                <Text color="secondary">{entries}</Text>
-              </Box>
-              <div className={styles.timeline}>
-                {hist[entries].map((entry, index) => {
-                  return (
-                    <HistoryEntryAppView
-                      key={index}
-                      entry={entry}
-                      isSelected={entry.time === selectedTime}
-                      onClick={() => onClose()}
-                    />
-                  );
-                })}
-              </div>
-            </Stack>
-          );
-        })}
-      </Box>
-      {history.length > numItemsToShow && (
-        <Box paddingLeft={2}>
-          <Button
-            variant="secondary"
-            fill="text"
-            onClick={() => {
-              setNumItemsToShow(numItemsToShow + 5);
-              logUnifiedHistoryShowMoreEvent();
-            }}
-          >
-            {t('nav.history-wrapper.show-more', 'Show more')}
-          </Button>
-        </Box>
-      )}
-    </Stack>
-  );
-}
-interface ItemProps {
-  entry: HistoryEntry;
-  isSelected: boolean;
-  onClick: () => void;
-}
-
-function HistoryEntryAppView({ entry, isSelected, onClick }: ItemProps) {
-  const styles = useStyles2(getStyles);
-  const theme = useTheme2();
-  const [isExpanded, setIsExpanded] = useState(isSelected && entry.views.length > 0);
-
-  const { breadcrumbs, views, time, url, sparklineData } = entry;
-  const expandedLabel = isExpanded
-    ? t('nav.history-wrapper.collapse', 'Collapse')
-    : t('nav.history-wrapper.expand', 'Expand');
-  const entryIconLabel = isExpanded
-    ? t('nav.history-wrapper.icon-selected', 'Selected Entry')
-    : t('nav.history-wrapper.icon-unselected', 'Normal Entry');
-  const selectedViewTime =
-    isSelected &&
-    entry.views.find((entry) => {
-      return entry.url === window.location.href;
-    })?.time;
-
-  return (
-    <Box marginBottom={1}>
-      <Stack direction="column" gap={1}>
-        <Stack alignItems="baseline">
-          {views.length > 0 ? (
-            <IconButton
-              name={isExpanded ? 'angle-down' : 'angle-right'}
-              onClick={() => setIsExpanded(!isExpanded)}
-              aria-label={expandedLabel}
-              className={styles.iconButton}
-            />
-          ) : (
-            <Space h={2} />
-          )}
-          <Icon
-            size="sm"
-            name={isSelected ? 'circle-mono' : 'circle'}
-            aria-label={entryIconLabel}
-            className={isExpanded ? styles.iconButtonDot : styles.iconButtonCircle}
-          />
-          <Card
-            noMargin
-            onClick={() => {
-              store.setObject('CLICKING_HISTORY', true);
-              onClick();
-              logClickUnifiedHistoryEntryEvent({ entryURL: url });
-            }}
-            href={url}
-            isCompact={true}
-            className={isSelected ? styles.card : cx(styles.card, styles.cardSelected)}
-          >
-            <Stack direction="column">
-              <div>
-                {breadcrumbs.map((breadcrumb, index) => (
-                  <Text key={index}>
-                    {breadcrumb.text}{' '}
-                    {index !== breadcrumbs.length - 1
-                      ? // eslint-disable-next-line @grafana/i18n/no-untranslated-strings
-                        '> '
-                      : ''}
-                  </Text>
-                ))}
-              </div>
-              <Text variant="bodySmall" color="secondary">
-                {formatDate(time, { timeStyle: 'short' })}
-              </Text>
-              {sparklineData && (
-                <Sparkline
-                  theme={theme}
-                  width={240}
-                  height={40}
-                  config={{
-                    custom: {
-                      fillColor: 'rgba(130, 181, 216, 0.1)',
-                      lineColor: '#82B5D8',
-                    },
-                  }}
-                  sparkline={{
-                    y: {
-                      type: FieldType.number,
-                      name: 'test',
-                      config: {},
-                      values: sparklineData.values,
-                      state: {
-                        range: {
-                          ...sparklineData.range,
-                        },
-                      },
-                    },
-                  }}
-                />
-              )}
-            </Stack>
-          </Card>
-        </Stack>
-        {isExpanded && (
-          <div className={styles.expanded}>
-            {views.map((view, index) => {
-              return (
-                <Card
-                  key={index}
-                  noMargin
-                  href={view.url}
-                  onClick={() => {
-                    store.setObject('CLICKING_HISTORY', true);
-                    onClick();
-                    logClickUnifiedHistoryEntryEvent({ entryURL: view.url, subEntry: 'timeRange' });
-                  }}
-                  isCompact={true}
-                  className={view.time === selectedViewTime ? undefined : styles.subCard}
-                >
-                  <Stack direction="column" gap={0}>
-                    <Text variant="bodySmall">{view.name}</Text>
-                    {view.description && (
-                      <Text color="secondary" variant="bodySmall">
-                        {view.description}
-                      </Text>
-                    )}
-                  </Stack>
-                </Card>
-              );
-            })}
-          </div>
-        )}
-      </Stack>
-    </Box>
-  );
-}
-const getStyles = (theme: GrafanaTheme2) => {
-  return {
-    card: css({
-      label: 'card',
-      background: 'none',
-      margin: theme.spacing(0.5, 0),
-    }),
-    cardSelected: css({
-      label: 'card-selected',
-      background: 'none',
-    }),
-    subCard: css({
-      label: 'subcard',
-      background: 'none',
-      margin: 0,
-    }),
-    iconButton: css({
-      label: 'expand-button',
-      margin: 0,
-    }),
-    iconButtonCircle: css({
-      label: 'blue-circle-icon',
-      margin: 0,
-      background: theme.colors.background.primary,
-      fill: theme.colors.primary.main,
-      cursor: 'default',
-      '&:hover:before': {
-        background: 'none',
-      },
-      //Need this to place the icon on the line, otherwise the line will appear on top of the icon
-      zIndex: 0,
-    }),
-    iconButtonDot: css({
-      label: 'blue-dot-icon',
-      margin: 0,
-      color: theme.colors.primary.main,
-      border: theme.shape.radius.circle,
-      cursor: 'default',
-      '&:hover:before': {
-        background: 'none',
-      },
-      //Need this to place the icon on the line, otherwise the line will appear on top of the icon
-      zIndex: 0,
-    }),
-    expanded: css({
-      label: 'expanded',
-      display: 'flex',
-      flexDirection: 'column',
-      marginLeft: theme.spacing(6),
-      gap: theme.spacing(1),
-      position: 'relative',
-      '&:before': {
-        content: '""',
-        position: 'absolute',
-        left: 0,
-        top: 0,
-        height: '100%',
-        width: '1px',
-        background: theme.colors.border.weak,
-      },
-    }),
-    timeline: css({
-      label: 'timeline',
-      position: 'relative',
-      height: '100%',
-      width: '100%',
-      paddingLeft: theme.spacing(2),
-      '&:before': {
-        content: '""',
-        position: 'absolute',
-        left: theme.spacing(5.75),
-        top: 0,
-        height: '100%',
-        width: '1px',
-        borderLeft: `1px dashed ${theme.colors.border.strong}`,
-      },
-    }),
-  };
-};

public/app/core/components/AppChrome/History/eventsTracking.ts

@@ -1,64 +0,0 @@
-import { reportInteraction } from '@grafana/runtime';
-
-const UNIFIED_HISTORY_ENTRY_CLICKED = 'grafana_unified_history_entry_clicked';
-const UNIFIED_HISTORY_ENTRY_DUPLICATED = 'grafana_unified_history_duplicated_entry_rendered';
-const UNIFIED_HISTORY_DRAWER_INTERACTION = 'grafana_unified_history_drawer_interaction';
-const UNIFIED_HISTORY_DRAWER_SHOW_MORE = 'grafana_unified_history_show_more';
-
-//Currently just 'timeRange' is supported
-//in short term, we could add 'templateVariables' for example
-type subEntryTypes = 'timeRange';
-
-//Whether the user opens or closes the `HistoryDrawer`
-type UnifiedHistoryDrawerInteraction = 'open' | 'close';
-
-interface UnifiedHistoryEntryClicked {
-  //We will also work with the current URL but we will get this from Rudderstack data
-  //URL to return to
-  entryURL: string;
-  //In the case we want to go back to a specific query param, currently just a specific time range
-  subEntry?: subEntryTypes;
-}
-
-interface UnifiedHistoryEntryDuplicated {
-  // Common name of the history entries
-  entryName: string;
-  // URL of the last entry
-  lastEntryURL: string;
-  // URL of the new entry
-  newEntryURL: string;
-}
-
-//Event triggered when a user clicks on an entry of the `HistoryDrawer`
-export const logClickUnifiedHistoryEntryEvent = ({ entryURL, subEntry }: UnifiedHistoryEntryClicked) => {
-  reportInteraction(UNIFIED_HISTORY_ENTRY_CLICKED, {
-    entryURL,
-    subEntry,
-  });
-};
-
-//Event triggered when history entry name matches the previous one
-//so we keep track of duplicated entries and be able to analyze them
-export const logDuplicateUnifiedHistoryEntryEvent = ({
-  entryName,
-  lastEntryURL,
-  newEntryURL,
-}: UnifiedHistoryEntryDuplicated) => {
-  reportInteraction(UNIFIED_HISTORY_ENTRY_DUPLICATED, {
-    entryName,
-    lastEntryURL,
-    newEntryURL,
-  });
-};
-
-//We keep track of users open and closing the drawer
-export const logUnifiedHistoryDrawerInteractionEvent = ({ type }: { type: UnifiedHistoryDrawerInteraction }) => {
-  reportInteraction(UNIFIED_HISTORY_DRAWER_INTERACTION, {
-    type,
-  });
-};
-
-//We keep track of users clicking on the `Show more` button
-export const logUnifiedHistoryShowMoreEvent = () => {
-  reportInteraction(UNIFIED_HISTORY_DRAWER_SHOW_MORE);
-};

public/app/core/components/AppChrome/TopBar/SingleTopBar.tsx

@@ -6,7 +6,6 @@ import { Components } from '@grafana/e2e-selectors';
 import { t } from '@grafana/i18n';
 import { ScopesContextValue } from '@grafana/runtime';
 import { Icon, Stack, ToolbarButton, useStyles2 } from '@grafana/ui';
-import { config } from 'app/core/config';
 import { MEGA_MENU_TOGGLE_ID } from 'app/core/constants';
 import { useGrafana } from 'app/core/context/GrafanaContext';
 import { useMediaQueryMinWidth } from 'app/core/hooks/useMediaQueryMinWidth';
@@ -19,7 +18,6 @@ import { HomeLink } from '../../Branding/Branding';
 import { Breadcrumbs } from '../../Breadcrumbs/Breadcrumbs';
 import { buildBreadcrumbs } from '../../Breadcrumbs/utils';
 import { ExtensionToolbarItem } from '../ExtensionSidebar/ExtensionToolbarItem';
-import { HistoryContainer } from '../History/HistoryContainer';
 import { NavToolbarSeparator } from '../NavToolbar/NavToolbarSeparator';
 import { QuickAdd } from '../QuickAdd/QuickAdd';
 
@@ -60,7 +58,6 @@ export const SingleTopBar = memo(function SingleTopBar({
   const profileNode = useSelector((state) => state.navIndex['profile']);
   const homeNav = useSelector((state) => state.navIndex)[HOME_NAV_ID];
   const breadcrumbs = buildBreadcrumbs(sectionNav, pageNav, homeNav);
-  const unifiedHistoryEnabled = config.featureToggles.unifiedHistory;
   const isSmallScreen = !useMediaQueryMinWidth('sm');
   const isLargeScreen = useMediaQueryMinWidth('lg');
   const topLevelScopes = !showToolbarLevel && isLargeScreen && scopes?.state.enabled;
@@ -96,7 +93,6 @@ export const SingleTopBar = memo(function SingleTopBar({
         >
           <TopBarExtensionPoint />
           <TopSearchBarCommandPaletteTrigger />
-          {unifiedHistoryEnabled && !isSmallScreen && <HistoryContainer />}
           {!isSmallScreen && <QuickAdd />}
           <HelpTopBarButton isSmallScreen={isSmallScreen} />
           <NavToolbarSeparator />

public/app/core/components/AppChrome/types.ts

@@ -4,28 +4,3 @@ export interface ToolbarUpdateProps {
   pageNav?: NavModelItem;
   actions?: React.ReactNode;
 }
-
-export interface HistoryEntryView {
-  name: string;
-  description: string;
-  url: string;
-  time: number;
-}
-
-export interface HistoryEntrySparkline {
-  values: number[];
-  range: {
-    min: number;
-    max: number;
-    delta: number;
-  };
-}
-
-export interface HistoryEntry {
-  name: string;
-  time: number;
-  breadcrumbs: NavModelItem[];
-  url: string;
-  views: HistoryEntryView[];
-  sparklineData?: HistoryEntrySparkline;
-}

public/app/features/dashboard-scene/pages/DashboardScenePageStateManager.ts

@@ -40,7 +40,11 @@ import { PanelEditor } from '../panel-edit/PanelEditor';
 import { DashboardScene } from '../scene/DashboardScene';
 import { buildNewDashboardSaveModel, buildNewDashboardSaveModelV2 } from '../serialization/buildNewDashboardSaveModel';
 import { transformSaveModelSchemaV2ToScene } from '../serialization/transformSaveModelSchemaV2ToScene';
-import { transformSaveModelToScene } from '../serialization/transformSaveModelToScene';
+import {
+  createV2RowsLayout,
+  SceneCreationOptions,
+  transformSaveModelToScene,
+} from '../serialization/transformSaveModelToScene';
 import { restoreDashboardStateFromLocalStorage } from '../utils/dashboardSessionState';
 
 import { processQueryParamsForDashboardLoad, updateNavModel } from './utils';
@@ -106,6 +110,34 @@ interface DashboardScenePageStateManagerLike<T> {
   useState: () => DashboardScenePageState;
 }
 
+/**
+ * Creates scene creation options with appropriate layout creator
+ * based on feature flags and dashboard type.
+ */
+export function getSceneCreationOptions(
+  loadOptions?: LoadDashboardOptions,
+  meta?: { isSnapshot?: boolean }
+): SceneCreationOptions | undefined {
+  const isReport = loadOptions?.route === DashboardRoutes.Report;
+  const isTemplate = loadOptions?.route === DashboardRoutes.Template;
+  const isSnapshot = meta?.isSnapshot ?? false;
+
+  // Don't use v2 layout for reports or snapshots
+  if (isReport || isSnapshot || isTemplate) {
+    return undefined;
+  }
+
+  // Use v2 layout creator when v2 API is enabled
+  if (shouldForceV2API()) {
+    return {
+      createLayout: createV2RowsLayout,
+      targetVersion: 'v2',
+    };
+  }
+
+  return undefined;
+}
+
 abstract class DashboardScenePageStateManagerBase<T>
   extends StateManagerBase<DashboardScenePageState>
   implements DashboardScenePageStateManagerLike<T>
@@ -155,7 +187,7 @@ abstract class DashboardScenePageStateManagerBase<T>
   private async loadHomeDashboard(): Promise<DashboardScene | null> {
     const rsp = await this.fetchHomeDashboard();
     if (rsp) {
-      return transformSaveModelToScene(rsp);
+      return transformSaveModelToScene(rsp, undefined, getSceneCreationOptions());
     }
 
     return null;
@@ -441,7 +473,8 @@ export class DashboardScenePageStateManager extends DashboardScenePageStateManag
     }
 
     if (rsp?.dashboard) {
-      const scene = transformSaveModelToScene(rsp, options);
+      const sceneCreationOptions = getSceneCreationOptions(options, rsp.meta);
+      const scene = transformSaveModelToScene(rsp, options, sceneCreationOptions);
 
       // Special handling for Template route - set up edit mode and dirty state
       if (
@@ -474,7 +507,8 @@ export class DashboardScenePageStateManager extends DashboardScenePageStateManag
         throw new DashboardVersionError('v2beta1', 'Using legacy snapshot API to get a V2 dashboard');
       }
 
-      const scene = transformSaveModelToScene(rsp);
+      // Snapshots should use default v1 layout
+      const scene = transformSaveModelToScene(rsp, undefined, getSceneCreationOptions(undefined, { isSnapshot: true }));
       return scene;
     }
 
@@ -755,7 +789,8 @@ export class DashboardScenePageStateManager extends DashboardScenePageStateManag
         return;
       }
 
-      const scene = transformSaveModelToScene(rsp);
+      const sceneCreationOptions = getSceneCreationOptions(undefined, rsp.meta);
+      const scene = transformSaveModelToScene(rsp, undefined, sceneCreationOptions);
 
       // we need to call and restore dashboard state on every reload that pulls a new dashboard version
       if (config.featureToggles.preserveDashboardStateWhenNavigating && Boolean(uid)) {

public/app/features/dashboard-scene/serialization/transformSaveModelToScene.test.ts

@@ -27,6 +27,7 @@ import { createPanelSaveModel } from 'app/features/dashboard/state/__fixtures__/
 import { SHARED_DASHBOARD_QUERY, DASHBOARD_DATASOURCE_PLUGIN_ID } from 'app/plugins/datasource/dashboard/constants';
 import { DashboardDataDTO } from 'app/types/dashboard';
 
+import { getSceneCreationOptions } from '../pages/DashboardScenePageStateManager';
 import { DashboardDataLayerSet } from '../scene/DashboardDataLayerSet';
 import { LibraryPanelBehavior } from '../scene/LibraryPanelBehavior';
 import { DashboardGridItem } from '../scene/layout-default/DashboardGridItem';
@@ -822,10 +823,14 @@ describe('transformSaveModelToScene', () => {
     });
 
     it('Should convert legacy rows to new rows', () => {
-      const scene = transformSaveModelToScene({
-        dashboard: repeatingRowsAndPanelsDashboardJson as DashboardDataDTO,
-        meta: {},
-      });
+      const scene = transformSaveModelToScene(
+        {
+          dashboard: repeatingRowsAndPanelsDashboardJson as DashboardDataDTO,
+          meta: {},
+        },
+        undefined,
+        getSceneCreationOptions()
+      );
 
       const layout = scene.state.body as RowsLayoutManager;
       const row1 = layout.state.rows[0];
@@ -857,10 +862,14 @@ describe('transformSaveModelToScene', () => {
     });
 
     it('Should convert legacy rows to new rows with free panels before first row', () => {
-      const scene = transformSaveModelToScene({
-        dashboard: rowsAfterFreePanels as DashboardDataDTO,
-        meta: {},
-      });
+      const scene = transformSaveModelToScene(
+        {
+          dashboard: rowsAfterFreePanels as DashboardDataDTO,
+          meta: {},
+        },
+        undefined,
+        getSceneCreationOptions()
+      );
 
       const layout = scene.state.body as RowsLayoutManager;
       const row1 = layout.state.rows[0];

public/app/features/dashboard-scene/serialization/transformSaveModelToScene.ts

@@ -29,11 +29,11 @@ import {
 } from 'app/features/dashboard/services/DashboardProfiler';
 import { DashboardModel } from 'app/features/dashboard/state/DashboardModel';
 import { PanelModel } from 'app/features/dashboard/state/PanelModel';
-import { DashboardDTO, DashboardDataDTO, DashboardRoutes } from 'app/types/dashboard';
+import { DashboardDTO, DashboardDataDTO } from 'app/types/dashboard';
 
 import { addPanelsOnLoadBehavior } from '../addToDashboard/addPanelsOnLoadBehavior';
 import { dashboardAnalyticsInitializer } from '../behaviors/DashboardAnalyticsInitializerBehavior';
-import { LoadDashboardOptions, shouldForceV2API } from '../pages/DashboardScenePageStateManager';
+import { LoadDashboardOptions } from '../pages/DashboardScenePageStateManager';
 import { AlertStatesDataLayer } from '../scene/AlertStatesDataLayer';
 import { DashboardAnnotationsDataLayer } from '../scene/DashboardAnnotationsDataLayer';
 import { DashboardControls } from '../scene/DashboardControls';
@@ -76,11 +76,53 @@ export interface SaveModelToSceneOptions {
   isEmbedded?: boolean;
 }
 
-export function transformSaveModelToScene(rsp: DashboardDTO, options?: LoadDashboardOptions): DashboardScene {
+type LayoutCreator = (panels: PanelModel[], preload?: boolean) => DashboardLayoutManager;
+
+export interface SceneCreationOptions {
+  /**
+   * When provided, this function is used to create the dashboard body/layout instead of the default v1 behavior.
+   * This allows callers to inject v2 layout strategy.
+   */
+  createLayout?: LayoutCreator;
+  /**
+   * Determines how the dashboard scene is serialized.
+   * @default 'v1'
+   */
+  targetVersion?: 'v1' | 'v2';
+}
+
+// Rows as SceneGridRow within the grid.
+const createDefaultGridLayout: LayoutCreator = (panels, preload) => {
+  return new DefaultGridLayoutManager({
+    grid: new SceneGridLayout({
+      isLazy: getIsLazy(preload),
+      children: createSceneObjectsForPanels(panels),
+    }),
+  });
+};
+
+/**
+ * V2 layout creator - uses RowsLayoutManager when dashboard has rows.
+ * This creates a layout that can be properly serialized to v2 format.
+ */
+export const createV2RowsLayout: LayoutCreator = (panels, preload) => {
+  const hasRows = panels.some((p) => p.type === 'row');
+  if (hasRows) {
+    return createRowsFromPanels(panels);
+  }
+  // Fall back to default grid layout when no rows
+  return createDefaultGridLayout(panels, preload);
+};
+
+export function transformSaveModelToScene(
+  rsp: DashboardDTO,
+  options?: LoadDashboardOptions,
+  sceneOptions?: SceneCreationOptions
+): DashboardScene {
   // Just to have migrations run
   const oldModel = new DashboardModel(rsp.dashboard, rsp.meta);
 
-  const scene = createDashboardSceneFromDashboardModel(oldModel, rsp.dashboard, options);
+  const scene = createDashboardSceneFromDashboardModel(oldModel, rsp.dashboard, options, sceneOptions);
   // TODO: refactor createDashboardSceneFromDashboardModel to work on Dashboard schema model
 
   const apiVersion = config.featureToggles.kubernetesDashboards
@@ -92,7 +134,7 @@ export function transformSaveModelToScene(rsp: DashboardDTO, options?: LoadDashb
   return scene;
 }
 
-export function createRowsFromPanels(oldPanels: PanelModel[]): RowsLayoutManager {
+function createRowsFromPanels(oldPanels: PanelModel[]): RowsLayoutManager {
   const rowItems: RowItem[] = [];
 
   let currentLegacyRow: PanelModel | null = null;
@@ -143,7 +185,7 @@ export function createRowsFromPanels(oldPanels: PanelModel[]): RowsLayoutManager
   });
 }
 
-export function createSceneObjectsForPanels(oldPanels: PanelModel[]): SceneGridItemLike[] {
+function createSceneObjectsForPanels(oldPanels: PanelModel[]): SceneGridItemLike[] {
   // collects all panels and rows
   const panels: SceneGridItemLike[] = [];
 
@@ -259,14 +301,14 @@ function createRowItemFromLegacyRow(row: PanelModel, panels: DashboardGridItem[]
 export function createDashboardSceneFromDashboardModel(
   oldModel: DashboardModel,
   dto: DashboardDataDTO,
-  options?: LoadDashboardOptions
+  options?: LoadDashboardOptions,
+  sceneOptions?: SceneCreationOptions
 ) {
   let variables: SceneVariableSet | undefined;
   let annotationLayers: SceneDataLayerProvider[] = [];
   let alertStatesLayer: AlertStatesDataLayer | undefined;
   const uid = oldModel.uid;
-  const isReport = options?.route === DashboardRoutes.Report;
-  const serializerVersion = shouldForceV2API() && !oldModel.meta.isSnapshot && !isReport ? 'v2' : 'v1';
+  const targetVersion = sceneOptions?.targetVersion ?? 'v1';
 
   if (oldModel.meta.isSnapshot) {
     variables = createVariablesForSnapshot(oldModel);
@@ -354,9 +396,11 @@ export function createDashboardSceneFromDashboardModel(
 
   let body: DashboardLayoutManager;
 
-  if (serializerVersion === 'v2' && oldModel.panels.some((p) => p.type === 'row')) {
-    body = createRowsFromPanels(oldModel.panels);
+  if (sceneOptions?.createLayout) {
+    // Use injected layout creator (allows callers to specify v2 or custom layout strategy)
+    body = sceneOptions.createLayout(oldModel.panels, dto.preload);
   } else {
+    // Default v1 layout: DefaultGridLayoutManager
     body = new DefaultGridLayoutManager({
       grid: new SceneGridLayout({
         isLazy: getIsLazy(dto.preload),
@@ -404,7 +448,7 @@ export function createDashboardSceneFromDashboardModel(
         hideTimeControls: oldModel.timepicker.hidden,
       }),
     },
-    serializerVersion
+    targetVersion
   );
 
   // Enable panel profiling for this dashboard using the composed SceneRenderProfiler

public/app/features/dashboard-scene/serialization/transformSaveModelV1ToV2.test.ts

@@ -1,6 +1,8 @@
 import { readdirSync, readFileSync } from 'fs';
 import path from 'path';
 
+import { getSceneCreationOptions } from '../pages/DashboardScenePageStateManager';
+
 import { normalizeBackendOutputForFrontendComparison } from './serialization-test-utils';
 import { transformSaveModelSchemaV2ToScene } from './transformSaveModelSchemaV2ToScene';
 import { transformSaveModelToScene } from './transformSaveModelToScene';
@@ -207,22 +209,26 @@ describe('V1 to V2 Dashboard Transformation Comparison', () => {
       delete dashboardSpec.snapshot;
 
       // Wrap in DashboardDTO structure that transformSaveModelToScene expects
-      const scene = transformSaveModelToScene({
-        dashboard: dashboardSpec,
-        meta: {
-          isNew: false,
-          isFolder: false,
-          canSave: true,
-          canEdit: true,
-          canDelete: false,
-          canShare: false,
-          canStar: false,
-          canAdmin: false,
-          isSnapshot: false,
-          provisioned: false,
-          version: 1,
+      const scene = transformSaveModelToScene(
+        {
+          dashboard: dashboardSpec,
+          meta: {
+            isNew: false,
+            isFolder: false,
+            canSave: true,
+            canEdit: true,
+            canDelete: false,
+            canShare: false,
+            canStar: false,
+            canAdmin: false,
+            isSnapshot: false,
+            provisioned: false,
+            version: 1,
+          },
         },
-      });
+        undefined,
+        getSceneCreationOptions()
+      );
 
       const frontendOutput = transformSceneToSaveModelSchemaV2(scene, false);
 
@@ -279,22 +285,26 @@ describe('V1 to V2 Dashboard Transformation Comparison', () => {
       delete dashboardSpec.snapshot;
 
       // Wrap in DashboardDTO structure that transformSaveModelToScene expects
-      const scene = transformSaveModelToScene({
-        dashboard: dashboardSpec,
-        meta: {
-          isNew: false,
-          isFolder: false,
-          canSave: true,
-          canEdit: true,
-          canDelete: false,
-          canShare: false,
-          canStar: false,
-          canAdmin: false,
-          isSnapshot: false,
-          provisioned: false,
-          version: 1,
+      const scene = transformSaveModelToScene(
+        {
+          dashboard: dashboardSpec,
+          meta: {
+            isNew: false,
+            isFolder: false,
+            canSave: true,
+            canEdit: true,
+            canDelete: false,
+            canShare: false,
+            canStar: false,
+            canAdmin: false,
+            isSnapshot: false,
+            provisioned: false,
+            version: 1,
+          },
         },
-      });
+        undefined,
+        getSceneCreationOptions()
+      );
 
       const frontendOutput = transformSceneToSaveModelSchemaV2(scene, false);
 

public/app/features/dashboard-scene/serialization/transformSaveModelV2ToV1.test.ts

@@ -6,6 +6,8 @@ import { Spec as DashboardV2Spec } from '@grafana/schema/dist/esm/schema/dashboa
 import { DashboardWithAccessInfo } from 'app/features/dashboard/api/types';
 import { DashboardDataDTO } from 'app/types/dashboard';
 
+import { getSceneCreationOptions } from '../pages/DashboardScenePageStateManager';
+
 import { transformSaveModelSchemaV2ToScene } from './transformSaveModelSchemaV2ToScene';
 import { transformSaveModelToScene } from './transformSaveModelToScene';
 import { transformSceneToSaveModel } from './transformSceneToSaveModel';
@@ -228,22 +230,26 @@ function removeMetadata(spec: Dashboard): Partial<Dashboard> {
  * identical processing.
  */
 function loadAndSerializeV1SaveModel(dashboard: Dashboard): Dashboard {
-  const scene = transformSaveModelToScene({
-    dashboard: dashboard as DashboardDataDTO,
-    meta: {
-      isNew: false,
-      isFolder: false,
-      canSave: true,
-      canEdit: true,
-      canDelete: false,
-      canShare: false,
-      canStar: false,
-      canAdmin: false,
-      isSnapshot: false,
-      provisioned: false,
-      version: 1,
+  const scene = transformSaveModelToScene(
+    {
+      dashboard: dashboard as DashboardDataDTO,
+      meta: {
+        isNew: false,
+        isFolder: false,
+        canSave: true,
+        canEdit: true,
+        canDelete: false,
+        canShare: false,
+        canStar: false,
+        canAdmin: false,
+        isSnapshot: false,
+        provisioned: false,
+        version: 1,
+      },
     },
-  });
+    undefined,
+    getSceneCreationOptions()
+  );
 
   return transformSceneToSaveModel(scene, false);
 }

public/app/features/dashboard-scene/sharing/ShareExportTab.tsx

@@ -23,6 +23,7 @@ import { DashboardDataDTO } from 'app/types/dashboard';
 
 import { DashboardScene } from '../scene/DashboardScene';
 import { makeExportableV1, makeExportableV2 } from '../scene/export/exporters';
+import { createV2RowsLayout, transformSaveModelToScene } from '../serialization/transformSaveModelToScene';
 import { transformSceneToSaveModel } from '../serialization/transformSceneToSaveModel';
 import { transformSceneToSaveModelSchemaV2 } from '../serialization/transformSceneToSaveModelSchemaV2';
 import { getVariablesCompatibility } from '../utils/getVariablesCompatibility';
@@ -216,7 +217,27 @@ export class ShareExportTab extends SceneObjectBase<ShareExportTabState> impleme
     }
 
     if (exportMode === ExportMode.V2Resource) {
-      const spec = transformSceneToSaveModelSchemaV2(scene);
+      let sceneForV2Export = scene;
+
+      // When exporting v1 dashboard as v2, we need to recreate the scene with v2 layout creator
+      // to ensure rows are properly serialized. The v1 scene uses DefaultGridLayoutManager which
+      // doesn't know about RowsLayoutManager structure needed for v2 serialization.
+      if (initialSaveModelVersion === 'v1' && initialSaveModel && isV1ClassicDashboard(initialSaveModel)) {
+        // Recreate scene with v2 layout creator to properly handle rows
+        sceneForV2Export = transformSaveModelToScene(
+          {
+            dashboard: { ...initialSaveModel, title: initialSaveModel.title ?? '', uid: initialSaveModel.uid ?? '' },
+            meta: scene.state.meta,
+          },
+          undefined,
+          {
+            createLayout: createV2RowsLayout,
+            targetVersion: 'v2',
+          }
+        );
+      }
+
+      const spec = transformSceneToSaveModelSchemaV2(sceneForV2Export);
       const specCopy = JSON.parse(JSON.stringify(spec));
       const statelessSpec = await makeExportableV2(specCopy, isSharingExternally);
       const exportableV2 = isSharingExternally ? statelessSpec : spec;

public/app/features/dashboard/api/ResponseTransformersToBackend.test.ts

@@ -2,6 +2,7 @@ import { readdirSync, readFileSync } from 'fs';
 import path from 'path';
 
 import { Spec as DashboardV2Spec } from '@grafana/schema/dist/esm/schema/dashboard/v2';
+import { getSceneCreationOptions } from 'app/features/dashboard-scene/pages/DashboardScenePageStateManager';
 import { normalizeBackendOutputForFrontendComparison } from 'app/features/dashboard-scene/serialization/serialization-test-utils';
 import { transformSaveModelSchemaV2ToScene } from 'app/features/dashboard-scene/serialization/transformSaveModelSchemaV2ToScene';
 import { transformSaveModelToScene } from 'app/features/dashboard-scene/serialization/transformSaveModelToScene';
@@ -193,22 +194,26 @@ describe('V1 to V2 Dashboard Transformation Comparison (ResponseTransformers)',
       delete dashboardSpec.snapshot;
 
       // Wrap in DashboardDTO structure that transformSaveModelToScene expects
-      const scene = transformSaveModelToScene({
-        dashboard: dashboardSpec,
-        meta: {
-          isNew: false,
-          isFolder: false,
-          canSave: true,
-          canEdit: true,
-          canDelete: false,
-          canShare: false,
-          canStar: false,
-          canAdmin: false,
-          isSnapshot: false,
-          provisioned: false,
-          version: 1,
+      const scene = transformSaveModelToScene(
+        {
+          dashboard: dashboardSpec,
+          meta: {
+            isNew: false,
+            isFolder: false,
+            canSave: true,
+            canEdit: true,
+            canDelete: false,
+            canShare: false,
+            canStar: false,
+            canAdmin: false,
+            isSnapshot: false,
+            provisioned: false,
+            version: 1,
+          },
         },
-      });
+        undefined,
+        getSceneCreationOptions()
+      );
 
       const frontendOutput = transformSceneToSaveModelSchemaV2(scene, false);
 

public/app/types/events.ts

@@ -1,6 +1,5 @@
 import { AnnotationQuery, BusEventBase, BusEventWithPayload, eventFactory } from '@grafana/data';
 import { IconName, ButtonVariant } from '@grafana/ui';
-import { HistoryEntryView } from 'app/core/components/AppChrome/types';
 
 /**
  * Event Payloads
@@ -217,7 +216,3 @@ export class PanelEditEnteredEvent extends BusEventWithPayload<number> {
 export class PanelEditExitedEvent extends BusEventWithPayload<number> {
   static type = 'panel-edit-finished';
 }
-
-export class RecordHistoryEntryEvent extends BusEventWithPayload<HistoryEntryView> {
-  static type = 'record-history-entry';
-}

public/locales/en-US/grafana.json

@@ -10720,18 +10720,6 @@
     "help/documentation": "Documentation",
     "help/keyboard-shortcuts": "Keyboard shortcuts",
     "help/support": "Support",
-    "history-container": {
-      "drawer-tittle": "History"
-    },
-    "history-wrapper": {
-      "collapse": "Collapse",
-      "expand": "Expand",
-      "icon-selected": "Selected Entry",
-      "icon-unselected": "Normal Entry",
-      "show-more": "Show more",
-      "today": "Today",
-      "yesterday": "Yesterday"
-    },
     "home": {
       "title": "Home"
     },

public/sass/_angular.scss

@@ -1161,56 +1161,6 @@ div.editor-option label {
   content: '\e902';
 }
 
-.bootstrap-tagsinput {
-  display: inline-block;
-  padding: 0 0 0 6px;
-  vertical-align: middle;
-  max-width: 100%;
-  line-height: 22px;
-  background-color: $input-bg;
-  border: 1px solid $input-border-color;
-
-  input {
-    display: inline-block;
-    border: none;
-    margin: 0px;
-    border-radius: 0;
-    padding: 8px 6px;
-    height: 100%;
-    width: 70px;
-    box-sizing: border-box;
-
-    &.gf-form-input--has-help-icon {
-      padding-right: $space-xl;
-    }
-  }
-
-  .tag {
-    margin-right: 2px;
-    color: $white;
-
-    [data-role='remove'] {
-      margin-left: 8px;
-      cursor: pointer;
-
-      &::after {
-        content: 'x';
-        padding: 0px 2px;
-      }
-
-      &:hover {
-        box-shadow:
-          inset 0 1px 0 rgba(255, 255, 255, 0.2),
-          0 1px 2px rgba(0, 0, 0, 0.05);
-
-        &:active {
-          box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-        }
-      }
-    }
-  }
-}
-
 .page-header {
   margin-top: $space-md;
 

public/vendor/tagsinput/bootstrap-tagsinput.js

@@ -1,512 +0,0 @@
-(function ($) {
-  "use strict";
-
-  var defaultOptions = {
-    tagClass: function(item) {
-      return 'label label-info';
-    },
-    itemValue: function(item) {
-      return item ? item.toString() : item;
-    },
-    itemText: function(item) {
-      return this.itemValue(item);
-    },
-    freeInput: true,
-    maxTags: undefined,
-    confirmKeys: [13],
-    onTagExists: function(item, $tag) {
-      $tag.hide().fadeIn();
-    }
-  };
-
-  /**
-   * Constructor function
-   */
-  function TagsInput(element, options) {
-    this.itemsArray = [];
-
-    this.$element = $(element);
-    this.$element.hide();
-
-    this.widthClass = options.widthClass || 'width-9';
-    this.isSelect = (element.tagName === 'SELECT');
-    this.multiple = (this.isSelect && element.hasAttribute('multiple'));
-    this.objectItems = options && options.itemValue;
-    this.placeholderText = element.hasAttribute('placeholder') ? this.$element.attr('placeholder') : '';
-
-    this.$container = $('<div class="bootstrap-tagsinput"></div>');
-    this.$input = $('<input class="gf-form-input ' + this.widthClass + '" type="text" placeholder="' + this.placeholderText + '"/>').appendTo(this.$container);
-
-    this.$element.after(this.$container);
-
-    this.build(options);
-  }
-
-  TagsInput.prototype = {
-    constructor: TagsInput,
-
-    /**
-     * Adds the given item as a new tag. Pass true to dontPushVal to prevent
-     * updating the elements val()
-     */
-    add: function(item, dontPushVal) {
-      var self = this;
-
-      if (self.options.maxTags && self.itemsArray.length >= self.options.maxTags)
-        return;
-
-      // Ignore falsey values, except false
-      if (item !== false && !item)
-        return;
-
-      // Throw an error when trying to add an object while the itemValue option was not set
-      if (typeof item === "object" && !self.objectItems)
-        throw("Can't add objects when itemValue option is not set");
-
-      // Ignore strings only containg whitespace
-      if (item.toString().match(/^\s*$/))
-        return;
-
-      // If SELECT but not multiple, remove current tag
-      if (self.isSelect && !self.multiple && self.itemsArray.length > 0)
-        self.remove(self.itemsArray[0]);
-
-      if (typeof item === "string" && this.$element[0].tagName === 'INPUT') {
-        var items = item.split(',');
-        if (items.length > 1) {
-          for (var i = 0; i < items.length; i++) {
-            this.add(items[i], true);
-          }
-
-          if (!dontPushVal)
-            self.pushVal();
-          return;
-        }
-      }
-
-      var itemValue = self.options.itemValue(item),
-          itemText = self.options.itemText(item),
-          tagClass = self.options.tagClass(item);
-
-      // Ignore items already added
-      var existing = $.grep(self.itemsArray, function(item) { return self.options.itemValue(item) === itemValue; } )[0];
-      if (existing) {
-        // Invoke onTagExists
-        if (self.options.onTagExists) {
-          var $existingTag = $(".tag", self.$container).filter(function() { return $(this).data("item") === existing; });
-          self.options.onTagExists(item, $existingTag);
-        }
-        return;
-      }
-
-      // register item in internal array and map
-      self.itemsArray.push(item);
-
-      // add a tag element
-      var $tag = $('<span class="tag ' + htmlEncode(tagClass) + '">' + htmlEncode(itemText) + '<span data-role="remove"></span></span>');
-      $tag.data('item', item);
-      self.findInputWrapper().before($tag);
-      $tag.after(' ');
-
-      // add <option /> if item represents a value not present in one of the <select />'s options
-      if (self.isSelect && !$('option[value="' + escape(itemValue) + '"]',self.$element)[0]) {
-        var $option = $('<option selected>' + htmlEncode(itemText) + '</option>');
-        $option.data('item', item);
-        $option.attr('value', itemValue);
-        self.$element.append($option);
-      }
-
-      if (!dontPushVal)
-        self.pushVal();
-
-      // Add class when reached maxTags
-      if (self.options.maxTags === self.itemsArray.length)
-        self.$container.addClass('bootstrap-tagsinput-max');
-
-      self.$element.trigger($.Event('itemAdded', { item: item }));
-    },
-
-    /**
-     * Removes the given item. Pass true to dontPushVal to prevent updating the
-     * elements val()
-     */
-    remove: function(item, dontPushVal) {
-      var self = this;
-
-      if (self.objectItems) {
-        if (typeof item === "object")
-          item = $.grep(self.itemsArray, function(other) { return self.options.itemValue(other) ==  self.options.itemValue(item); } )[0];
-        else
-          item = $.grep(self.itemsArray, function(other) { return self.options.itemValue(other) ==  item; } )[0];
-      }
-
-      if (item) {
-        $('.tag', self.$container).filter(function() { return $(this).data('item') === item; }).remove();
-        $('option', self.$element).filter(function() { return $(this).data('item') === item; }).remove();
-        self.itemsArray.splice($.inArray(item, self.itemsArray), 1);
-      }
-
-      if (!dontPushVal)
-        self.pushVal();
-
-      // Remove class when reached maxTags
-      if (self.options.maxTags > self.itemsArray.length)
-        self.$container.removeClass('bootstrap-tagsinput-max');
-
-      self.$element.trigger($.Event('itemRemoved',  { item: item }));
-    },
-
-    /**
-     * Removes all items
-     */
-    removeAll: function() {
-      var self = this;
-
-      $('.tag', self.$container).remove();
-      $('option', self.$element).remove();
-
-      while(self.itemsArray.length > 0)
-        self.itemsArray.pop();
-
-      self.pushVal();
-
-      if (self.options.maxTags && !this.isEnabled())
-        this.enable();
-    },
-
-    /**
-     * Refreshes the tags so they match the text/value of their corresponding
-     * item.
-     */
-    refresh: function() {
-      var self = this;
-      $('.tag', self.$container).each(function() {
-        var $tag = $(this),
-            item = $tag.data('item'),
-            itemValue = self.options.itemValue(item),
-            itemText = self.options.itemText(item),
-            tagClass = self.options.tagClass(item);
-
-          // Update tag's class and inner text
-          $tag.attr('class', null);
-          $tag.addClass('tag ' + htmlEncode(tagClass));
-          $tag.contents().filter(function() {
-            return this.nodeType == 3;
-          })[0].nodeValue = htmlEncode(itemText);
-
-          if (self.isSelect) {
-            var option = $('option', self.$element).filter(function() { return $(this).data('item') === item; });
-            option.attr('value', itemValue);
-          }
-      });
-    },
-
-    /**
-     * Returns the items added as tags
-     */
-    items: function() {
-      return this.itemsArray;
-    },
-
-    /**
-     * Assembly value by retrieving the value of each item, and set it on the
-     * element.
-     */
-    pushVal: function() {
-      var self = this,
-          val = $.map(self.items(), function(item) {
-            return self.options.itemValue(item).toString();
-          });
-
-      self.$element.val(val, true).trigger('change');
-    },
-
-    /**
-     * Initializes the tags input behaviour on the element
-     */
-    build: function(options) {
-      var self = this;
-
-      self.options = $.extend({}, defaultOptions, options);
-      var typeahead = self.options.typeahead || {};
-
-      // When itemValue is set, freeInput should always be false
-      if (self.objectItems)
-        self.options.freeInput = false;
-
-      makeOptionItemFunction(self.options, 'itemValue');
-      makeOptionItemFunction(self.options, 'itemText');
-      makeOptionItemFunction(self.options, 'tagClass');
-
-      // for backwards compatibility, self.options.source is deprecated
-      if (self.options.source)
-        typeahead.source = self.options.source;
-
-      if (typeahead.source && $.fn.typeahead) {
-        makeOptionFunction(typeahead, 'source');
-
-        self.$input.typeahead({
-          source: function (query, process) {
-            function processItems(items) {
-              var texts = [];
-
-              for (var i = 0; i < items.length; i++) {
-                var text = self.options.itemText(items[i]);
-                map[text] = items[i];
-                texts.push(text);
-              }
-              process(texts);
-            }
-
-            this.map = {};
-            var map = this.map,
-                data = typeahead.source(query);
-
-            if ($.isFunction(data.success)) {
-              // support for Angular promises
-              data.success(processItems);
-            } else {
-              // support for functions and jquery promises
-              $.when(data)
-               .then(processItems);
-            }
-          },
-          updater: function (text) {
-            self.add(this.map[text]);
-          },
-          matcher: function (text) {
-            return (text.toLowerCase().indexOf(this.query.trim().toLowerCase()) !== -1);
-          },
-          sorter: function (texts) {
-            return texts.sort();
-          },
-          highlighter: function (text) {
-            var regex = new RegExp( '(' + this.query + ')', 'gi' );
-            return text.replace( regex, "<strong>$1</strong>" );
-          }
-        });
-      }
-
-      self.$container.on('click', $.proxy(function(event) {
-        self.$input.focus();
-      }, self));
-
-      self.$container.on('blur', 'input', $.proxy(function(event) {
-        var $input = $(event.target);
-        self.add($input.val());
-        $input.val('');
-        event.preventDefault();
-      }, self));
-
-      self.$container.on('keydown', 'input', $.proxy(function(event) {
-        var $input = $(event.target),
-            $inputWrapper = self.findInputWrapper();
-
-        switch (event.which) {
-          // BACKSPACE
-          case 8:
-            if (doGetCaretPosition($input[0]) === 0) {
-              var prev = $inputWrapper.prev();
-              if (prev) {
-                self.remove(prev.data('item'));
-              }
-            }
-            break;
-
-          // DELETE
-          case 46:
-            if (doGetCaretPosition($input[0]) === 0) {
-              var next = $inputWrapper.next();
-              if (next) {
-                self.remove(next.data('item'));
-              }
-            }
-            break;
-
-          // LEFT ARROW
-          case 37:
-            // Try to move the input before the previous tag
-            var $prevTag = $inputWrapper.prev();
-            if ($input.val().length === 0 && $prevTag[0]) {
-              $prevTag.before($inputWrapper);
-              $input.focus();
-            }
-            break;
-          // RIGHT ARROW
-          case 39:
-            // Try to move the input after the next tag
-            var $nextTag = $inputWrapper.next();
-            if ($input.val().length === 0 && $nextTag[0]) {
-              $nextTag.after($inputWrapper);
-              $input.focus();
-            }
-            break;
-         default:
-            // When key corresponds one of the confirmKeys, add current input
-            // as a new tag
-            if (self.options.freeInput && $.inArray(event.which, self.options.confirmKeys) >= 0) {
-              self.add($input.val());
-              $input.val('');
-              event.preventDefault();
-            }
-        }
-
-        // Reset internal input's size
-        $input.attr('size', Math.max(this.inputSize, $input.val().length));
-      }, self));
-
-      // Remove icon clicked
-      self.$container.on('click', '[data-role=remove]', $.proxy(function(event) {
-        self.remove($(event.target).closest('.tag').data('item'));
-        // Grafana mod, if tags input used in popover the click event will bubble up and hide popover
-        event.stopPropagation();
-      }, self));
-
-      // Only add existing value as tags when using strings as tags
-      if (self.options.itemValue === defaultOptions.itemValue) {
-        if (self.$element[0].tagName === 'INPUT') {
-            self.add(self.$element.val());
-        } else {
-          $('option', self.$element).each(function() {
-            self.add($(this).attr('value'), true);
-          });
-        }
-      }
-    },
-
-    /**
-     * Removes all tagsinput behaviour and unregsiter all event handlers
-     */
-    destroy: function() {
-      var self = this;
-
-      // Unbind events
-      self.$container.off('keypress', 'input');
-      self.$container.off('click', '[role=remove]');
-
-      self.$container.remove();
-      self.$element.removeData('tagsinput');
-      self.$element.show();
-    },
-
-    /**
-     * Sets focus on the tagsinput
-     */
-    focus: function() {
-      this.$input.focus();
-    },
-
-    /**
-     * Returns the internal input element
-     */
-    input: function() {
-      return this.$input;
-    },
-
-    /**
-     * Returns the element which is wrapped around the internal input. This
-     * is normally the $container, but typeahead.js moves the $input element.
-     */
-    findInputWrapper: function() {
-      var elt = this.$input[0],
-          container = this.$container[0];
-      while(elt && elt.parentNode !== container)
-        elt = elt.parentNode;
-
-      return $(elt);
-    }
-  };
-
-  /**
-   * Register JQuery plugin
-   */
-  $.fn.tagsinput = function(arg1, arg2) {
-    var results = [];
-
-    this.each(function() {
-      var tagsinput = $(this).data('tagsinput');
-
-      // Initialize a new tags input
-      if (!tagsinput) {
-        tagsinput = new TagsInput(this, arg1);
-        $(this).data('tagsinput', tagsinput);
-        results.push(tagsinput);
-
-        if (this.tagName === 'SELECT') {
-          $('option', $(this)).attr('selected', 'selected');
-        }
-
-        // Init tags from $(this).val()
-        $(this).val($(this).val());
-      } else {
-        // Invoke function on existing tags input
-        var retVal = tagsinput[arg1](arg2);
-        if (retVal !== undefined)
-          results.push(retVal);
-      }
-    });
-
-    if ( typeof arg1 == 'string') {
-      // Return the results from the invoked function calls
-      return results.length > 1 ? results : results[0];
-    } else {
-      return results;
-    }
-  };
-
-  $.fn.tagsinput.Constructor = TagsInput;
-
-  /**
-   * Most options support both a string or number as well as a function as
-   * option value. This function makes sure that the option with the given
-   * key in the given options is wrapped in a function
-   */
-  function makeOptionItemFunction(options, key) {
-    if (typeof options[key] !== 'function') {
-      var propertyName = options[key];
-      options[key] = function(item) { return item[propertyName]; };
-    }
-  }
-  function makeOptionFunction(options, key) {
-    if (typeof options[key] !== 'function') {
-      var value = options[key];
-      options[key] = function() { return value; };
-    }
-  }
-  /**
-   * HtmlEncodes the given value
-   */
-  var htmlEncodeContainer = $('<div />');
-  function htmlEncode(value) {
-    if (value) {
-      return htmlEncodeContainer.text(value).html();
-    } else {
-      return '';
-    }
-  }
-
-  /**
-   * Returns the position of the caret in the given input field
-   * http://flightschool.acylt.com/devnotes/caret-position-woes/
-   */
-  function doGetCaretPosition(oField) {
-    var iCaretPos = 0;
-    if (document.selection) {
-      oField.focus ();
-      var oSel = document.selection.createRange();
-      oSel.moveStart ('character', -oField.value.length);
-      iCaretPos = oSel.text.length;
-    } else if (oField.selectionStart || oField.selectionStart == '0') {
-      iCaretPos = oField.selectionStart;
-    }
-    return (iCaretPos);
-  }
-
-  /**
-   * Initialize tagsinput behaviour on inputs and selects which have
-   * data-role=tagsinput
-   */
-  $(function() {
-    $("input[data-role=tagsinput], select[multiple][data-role=tagsinput]").tagsinput();
-  });
-})(window.jQuery);