Add/Edit Panel: Enable new DS picker toggle by default (#68380)

* Add Panel: Enable new DS picker and onboarding DS prompt

* Add e2e selectors
This commit is contained in:
Ivan Ortega Alba 2023-05-12 17:09:30 +02:00 committed by GitHub
parent 78afddebbf
commit ede8df846e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 52 additions and 49 deletions

View File

@ -38,6 +38,7 @@ Some stable features are enabled by default. You can disable a stable feature by
| `lokiMetricDataplane` | Changes metric responses from Loki to be compliant with the dataplane specification. | Yes | | `lokiMetricDataplane` | Changes metric responses from Loki to be compliant with the dataplane specification. | Yes |
| `dataplaneFrontendFallback` | Support dataplane contract field name change for transformations and field name matchers where the name is different | Yes | | `dataplaneFrontendFallback` | Support dataplane contract field name change for transformations and field name matchers where the name is different | Yes |
| `useCachingService` | When turned on, the new query and resource caching implementation using a wire service inject will be used in place of the previous middleware implementation | | | `useCachingService` | When turned on, the new query and resource caching implementation using a wire service inject will be used in place of the previous middleware implementation | |
| `advancedDataSourcePicker` | Enable a new data source picker with contextual information, recently used order and advanced mode | Yes |
## Beta feature toggles ## Beta feature toggles
@ -68,50 +69,49 @@ Some stable features are enabled by default. You can disable a stable feature by
These features are early in their development lifecycle and so are not yet supported in Grafana Cloud. These features are early in their development lifecycle and so are not yet supported in Grafana Cloud.
Alpha features might be changed or removed without prior notice. Alpha features might be changed or removed without prior notice.
| Feature toggle name | Description | | Feature toggle name | Description |
| ---------------------------------- | -------------------------------------------------------------------------------------------------------------- | | ---------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| `live-service-web-worker` | This will use a webworker thread to processes events rather than the main thread | | `live-service-web-worker` | This will use a webworker thread to processes events rather than the main thread |
| `queryOverLive` | Use Grafana Live WebSocket to execute backend queries | | `queryOverLive` | Use Grafana Live WebSocket to execute backend queries |
| `lokiLive` | Support WebSocket streaming for loki (early prototype) | | `lokiLive` | Support WebSocket streaming for loki (early prototype) |
| `storage` | Configurable storage for dashboards, datasources, and resources | | `storage` | Configurable storage for dashboards, datasources, and resources |
| `newTraceViewHeader` | Shows the new trace view header | | `newTraceViewHeader` | Shows the new trace view header |
| `datasourceQueryMultiStatus` | Introduce HTTP 207 Multi Status for api/ds/query | | `datasourceQueryMultiStatus` | Introduce HTTP 207 Multi Status for api/ds/query |
| `traceToMetrics` | Enable trace to metrics links | | `traceToMetrics` | Enable trace to metrics links |
| `prometheusWideSeries` | Enable wide series responses in the Prometheus datasource | | `prometheusWideSeries` | Enable wide series responses in the Prometheus datasource |
| `canvasPanelNesting` | Allow elements nesting | | `canvasPanelNesting` | Allow elements nesting |
| `scenes` | Experimental framework to build interactive dashboards | | `scenes` | Experimental framework to build interactive dashboards |
| `disableSecretsCompatibility` | Disable duplicated secret storage in legacy tables | | `disableSecretsCompatibility` | Disable duplicated secret storage in legacy tables |
| `logRequestsInstrumentedAsUnknown` | Logs the path for requests that are instrumented as unknown | | `logRequestsInstrumentedAsUnknown` | Logs the path for requests that are instrumented as unknown |
| `redshiftAsyncQueryDataSupport` | Enable async query data support for Redshift | | `redshiftAsyncQueryDataSupport` | Enable async query data support for Redshift |
| `athenaAsyncQueryDataSupport` | Enable async query data support for Athena | | `athenaAsyncQueryDataSupport` | Enable async query data support for Athena |
| `showDashboardValidationWarnings` | Show warnings when dashboards do not validate against the schema | | `showDashboardValidationWarnings` | Show warnings when dashboards do not validate against the schema |
| `mysqlAnsiQuotes` | Use double quotes to escape keyword in a MySQL query | | `mysqlAnsiQuotes` | Use double quotes to escape keyword in a MySQL query |
| `showTraceId` | Show trace ids for requests | | `showTraceId` | Show trace ids for requests |
| `datasourceOnboarding` | Enable data source onboarding page | | `datasourceOnboarding` | Enable data source onboarding page |
| `authnService` | Use new auth service to perform authentication | | `authnService` | Use new auth service to perform authentication |
| `alertingBacktesting` | Rule backtesting API for alerting | | `alertingBacktesting` | Rule backtesting API for alerting |
| `editPanelCSVDragAndDrop` | Enables drag and drop for CSV and Excel files | | `editPanelCSVDragAndDrop` | Enables drag and drop for CSV and Excel files |
| `lokiQuerySplitting` | Split large interval queries into subqueries with smaller time intervals | | `lokiQuerySplitting` | Split large interval queries into subqueries with smaller time intervals |
| `lokiQuerySplittingConfig` | Give users the option to configure split durations for Loki queries | | `lokiQuerySplittingConfig` | Give users the option to configure split durations for Loki queries |
| `individualCookiePreferences` | Support overriding cookie preferences per user | | `individualCookiePreferences` | Support overriding cookie preferences per user |
| `onlyExternalOrgRoleSync` | Prohibits a user from changing organization roles synced with external auth providers | | `onlyExternalOrgRoleSync` | Prohibits a user from changing organization roles synced with external auth providers |
| `traceqlSearch` | Enables the 'TraceQL Search' tab for the Tempo datasource which provides a UI to generate TraceQL queries | | `traceqlSearch` | Enables the 'TraceQL Search' tab for the Tempo datasource which provides a UI to generate TraceQL queries |
| `prometheusMetricEncyclopedia` | Replaces the Prometheus query builder metric select option with a paginated and filterable component | | `prometheusMetricEncyclopedia` | Replaces the Prometheus query builder metric select option with a paginated and filterable component |
| `timeSeriesTable` | Enable time series table transformer & sparkline cell type | | `timeSeriesTable` | Enable time series table transformer & sparkline cell type |
| `prometheusResourceBrowserCache` | Displays browser caching options in Prometheus data source configuration | | `prometheusResourceBrowserCache` | Displays browser caching options in Prometheus data source configuration |
| `influxdbBackendMigration` | Query InfluxDB InfluxQL without the proxy | | `influxdbBackendMigration` | Query InfluxDB InfluxQL without the proxy |
| `clientTokenRotation` | Replaces the current in-request token rotation so that the client initiates the rotation | | `clientTokenRotation` | Replaces the current in-request token rotation so that the client initiates the rotation |
| `disableSSEDataplane` | Disables dataplane specific processing in server side expressions. | | `disableSSEDataplane` | Disables dataplane specific processing in server side expressions. |
| `alertStateHistoryLokiSecondary` | Enable Grafana to write alert state history to an external Loki instance in addition to Grafana annotations. | | `alertStateHistoryLokiSecondary` | Enable Grafana to write alert state history to an external Loki instance in addition to Grafana annotations. |
| `alertStateHistoryLokiPrimary` | Enable a remote Loki instance as the primary source for state history reads. | | `alertStateHistoryLokiPrimary` | Enable a remote Loki instance as the primary source for state history reads. |
| `alertStateHistoryLokiOnly` | Disable Grafana alerts from emitting annotations when a remote Loki instance is available. | | `alertStateHistoryLokiOnly` | Disable Grafana alerts from emitting annotations when a remote Loki instance is available. |
| `unifiedRequestLog` | Writes error logs to the request logger | | `unifiedRequestLog` | Writes error logs to the request logger |
| `pyroscopeFlameGraph` | Changes flame graph to pyroscope one | | `pyroscopeFlameGraph` | Changes flame graph to pyroscope one |
| `authenticationConfigUI` | Enables authentication configuration UI | | `authenticationConfigUI` | Enables authentication configuration UI |
| `pluginsAPIManifestKey` | Use grafana.com API to retrieve the public manifest key | | `pluginsAPIManifestKey` | Use grafana.com API to retrieve the public manifest key |
| `advancedDataSourcePicker` | Enable a new data source picker with contextual information, recently used order, CSV upload and advanced mode | | `opensearchDetectVersion` | Enable version detection in OpenSearch |
| `opensearchDetectVersion` | Enable version detection in OpenSearch | | `extraThemes` | Enables extra themes |
| `extraThemes` | Enables extra themes |
## Development feature toggles ## Development feature toggles

View File

@ -505,9 +505,10 @@ var (
}, },
{ {
Name: "advancedDataSourcePicker", Name: "advancedDataSourcePicker",
Description: "Enable a new data source picker with contextual information, recently used order, CSV upload and advanced mode", Description: "Enable a new data source picker with contextual information, recently used order and advanced mode",
State: FeatureStateAlpha, State: FeatureStateStable,
FrontendOnly: true, FrontendOnly: true,
Expression: "true", // enabled by default
Owner: grafanaDashboardsSquad, Owner: grafanaDashboardsSquad,
}, },
{ {

View File

@ -74,7 +74,7 @@ useCachingService,stable,@grafana/grafana-operator-experience-squad,false,false,
enableElasticsearchBackendQuerying,beta,@grafana/observability-logs,false,false,false,false enableElasticsearchBackendQuerying,beta,@grafana/observability-logs,false,false,false,false
authenticationConfigUI,alpha,@grafana/grafana-authnz-team,false,false,false,false authenticationConfigUI,alpha,@grafana/grafana-authnz-team,false,false,false,false
pluginsAPIManifestKey,alpha,@grafana/plugins-platform-backend,false,false,false,false pluginsAPIManifestKey,alpha,@grafana/plugins-platform-backend,false,false,false,false
advancedDataSourcePicker,alpha,@grafana/dashboards-squad,false,false,false,true advancedDataSourcePicker,stable,@grafana/dashboards-squad,false,false,false,true
opensearchDetectVersion,alpha,@grafana/aws-plugins,false,false,false,true opensearchDetectVersion,alpha,@grafana/aws-plugins,false,false,false,true
faroDatasourceSelector,beta,@grafana/app-o11y,false,false,false,true faroDatasourceSelector,beta,@grafana/app-o11y,false,false,false,true
enableDatagridEditing,beta,@grafana/grafana-bi-squad,false,false,false,true enableDatagridEditing,beta,@grafana/grafana-bi-squad,false,false,false,true

1 Name State Owner requiresDevMode RequiresLicense RequiresRestart FrontendOnly
74 enableElasticsearchBackendQuerying beta @grafana/observability-logs false false false false
75 authenticationConfigUI alpha @grafana/grafana-authnz-team false false false false
76 pluginsAPIManifestKey alpha @grafana/plugins-platform-backend false false false false
77 advancedDataSourcePicker alpha stable @grafana/dashboards-squad false false false true
78 opensearchDetectVersion alpha @grafana/aws-plugins false false false true
79 faroDatasourceSelector beta @grafana/app-o11y false false false true
80 enableDatagridEditing beta @grafana/grafana-bi-squad false false false true

View File

@ -308,7 +308,7 @@ const (
FlagPluginsAPIManifestKey = "pluginsAPIManifestKey" FlagPluginsAPIManifestKey = "pluginsAPIManifestKey"
// FlagAdvancedDataSourcePicker // FlagAdvancedDataSourcePicker
// Enable a new data source picker with contextual information, recently used order, CSV upload and advanced mode // Enable a new data source picker with contextual information, recently used order and advanced mode
FlagAdvancedDataSourcePicker = "advancedDataSourcePicker" FlagAdvancedDataSourcePicker = "advancedDataSourcePicker"
// FlagOpensearchDetectVersion // FlagOpensearchDetectVersion

View File

@ -5,6 +5,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
import { usePopper } from 'react-popper'; import { usePopper } from 'react-popper';
import { DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data'; import { DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { reportInteraction } from '@grafana/runtime'; import { reportInteraction } from '@grafana/runtime';
import { DataSourceJsonData } from '@grafana/schema'; import { DataSourceJsonData } from '@grafana/schema';
import { Button, Icon, Input, ModalsController, Portal, useStyles2 } from '@grafana/ui'; import { Button, Icon, Input, ModalsController, Portal, useStyles2 } from '@grafana/ui';
@ -103,12 +104,13 @@ export function DataSourceDropdown(props: DataSourceDropdownProps) {
const styles = useStyles2(getStylesDropdown); const styles = useStyles2(getStylesDropdown);
return ( return (
<div className={styles.container}> <div className={styles.container} data-testid={selectors.components.DataSourcePicker.container}>
{/* This clickable div is just extending the clickable area on the input element to include the prefix and suffix. */} {/* This clickable div is just extending the clickable area on the input element to include the prefix and suffix. */}
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */} {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
<div className={styles.trigger} onClick={openDropdown}> <div className={styles.trigger} onClick={openDropdown}>
<Input <Input
className={inputHasFocus ? undefined : styles.input} className={inputHasFocus ? undefined : styles.input}
data-testid={selectors.components.DataSourcePicker.inputV2}
prefix={ prefix={
filterTerm && isOpen ? ( filterTerm && isOpen ? (
<DataSourceLogoPlaceHolder /> <DataSourceLogoPlaceHolder />