IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Dashboards: Enable feature flag newPanelChromeUI by default (#65593)

Browse Source
This commit is contained in:
Alexa V 2023-04-03 13:50:43 +02:00 committed by GitHub
parent bf0f4a6751
commit 2b0c0d4b95
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 33 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,6 +29,7 @@ Some stable features are enabled by default. You can disable a stable feature by
| `internationalization` | Enables internationalization | Yes |
| `topnav` | Enables new top navigation and page layouts | Yes |
| `cloudWatchCrossAccountQuerying` | Enables cross-account querying in CloudWatch datasources | Yes |
| `newPanelChromeUI` | Show updated look and feel of grafana-ui PanelChrome: panel header, icons, and menu | Yes |
| `accessTokenExpirationCheck` | Enable OAuth access_token expiration check and token refresh using the refresh_token | |
| `emptyDashboardPage` | Enable the redesigned user interface of a dashboard page that includes no panels | Yes |
| `disablePrometheusExemplarSampling` | Disable Prometheus exemplar sampling | |
@ -78,7 +79,6 @@ Alpha features might be changed or removed without prior notice.
| `logRequestsInstrumentedAsUnknown` | Logs the path for requests that are instrumented as unknown |
| `redshiftAsyncQueryDataSupport` | Enable async query data support for Redshift |
| `athenaAsyncQueryDataSupport` | Enable async query data support for Athena |
| `newPanelChromeUI` | Show updated look and feel of grafana-ui PanelChrome: panel header, icons, and menu |
| `showDashboardValidationWarnings` | Show warnings when dashboards do not validate against the schema |
| `mysqlAnsiQuotes` | Use double quotes to escape keyword in a MySQL query |
| `elasticsearchBackendMigration` | Use Elasticsearch as backend data source |

2
e2e/panels-suite/panelEdit_base.spec.ts
View File

@ -13,7 +13,7 @@ e2e.scenario({
e2e.flows.openDashboard({ uid: 'TkZXxlNG3' });
e2e().wait('@query');
e2e.flows.openPanelMenuItem(e2e.flows.PanelMenuItems.Edit, PANEL_UNDER_TEST);
e2e.flows.openPanelMenuItem(e2e.flows.PanelMenuItems.Edit, PANEL_UNDER_TEST, true);
// New panel editor opens when navigating from Panel menu
e2e.components.PanelEditor.General.content().should('be.visible');

15
e2e/various-suite/inspect-drawer.spec.ts
View File

@ -1,6 +1,6 @@
import { e2e } from '@grafana/e2e';
const PANEL_UNDER_TEST = '2 yaxis and axis labels';
const PANEL_UNDER_TEST = 'Value reducers 1';
e2e.scenario({
describeName: 'Inspect drawer tests',
@ -34,10 +34,10 @@ e2e.scenario({
});
const viewPortWidth = e2e.config().viewportWidth;
e2e.flows.openDashboard({ uid: '5SdHCadmz' });
e2e.flows.openDashboard({ uid: 'wfTJJL5Wz' });
// testing opening inspect drawer directly by clicking on Inspect in header menu
e2e.flows.openPanelMenuItem(e2e.flows.PanelMenuItems.Inspect, PANEL_UNDER_TEST);
e2e.flows.openPanelMenuItem(e2e.flows.PanelMenuItems.Inspect, PANEL_UNDER_TEST, true);
expectDrawerTabsAndContent();
@ -49,7 +49,7 @@ e2e.scenario({
expectSubMenuScenario('Query');
expectSubMenuScenario('Panel JSON', 'JSON');
e2e.flows.openPanelMenuItem(e2e.flows.PanelMenuItems.Edit, PANEL_UNDER_TEST);
e2e.flows.openPanelMenuItem(e2e.flows.PanelMenuItems.Edit, PANEL_UNDER_TEST, true);
e2e.components.QueryTab.queryInspectorButton().should('be.visible').click();
@ -135,10 +135,13 @@ const expectSubMenuScenario = (subMenu: string, tabTitle?: string) => {
tabTitle = tabTitle ?? subMenu;
// testing opening inspect drawer from sub menus under Inspect in header menu
e2e.components.Panels.Panel.title(PANEL_UNDER_TEST).scrollIntoView().should('be.visible').click();
e2e.components.Panels.Panel.menu(PANEL_UNDER_TEST).click({ force: true }); // force click because menu is hidden and show on hover
// sub menus are in the DOM but not visible and because there is no hover support in Cypress force click
// https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/testing-dom__hover-hidden-elements/cypress/integration/hover-hidden-elements-spec.js
e2e.components.Panels.Panel.headerItems(subMenu).click({ force: true });
// simulate hover on Inspector menu item to display sub menus
e2e.components.Panels.Panel.menuItems('Inspect').trigger('mouseover', { force: true });
e2e.components.Panels.Panel.menuItems(subMenu).click({ force: true });
// data should be the default tab
e2e.components.Tab.title(tabTitle).should('be.visible');

1
packages/grafana-e2e-selectors/src/selectors/components.ts
View File

@ -73,6 +73,7 @@ export const Components = {
title: (title: string) => `data-testid Panel header ${title}`,
headerItems: (item: string) => `Panel header item ${item}`,
menuItems: (item: string) => `data-testid Panel menu item ${item}`,
menu: (title: string) => `data-testid Panel menu ${title}`,
containerByTitle: (title: string) => `${title} panel`,
headerCornerInfo: (mode: string) => `Panel header ${mode}`,
},

4
packages/grafana-e2e/src/flows/importDashboard.ts
View File

@ -50,8 +50,8 @@ export const importDashboard = (dashboardToImport: Dashboard, queryTimeout?: num
if (!skipPanelValidation) {
dashboardToImport.panels.forEach((panel) => {
// Look at the json data
e2e.components.Panels.Panel.title(panel.title).should('be.visible').click();
e2e.components.Panels.Panel.headerItems('Inspect').should('be.visible').click();
e2e.components.Panels.Panel.menu(panel.title).click({ force: true }); // force click because menu is hidden and show on hover
e2e.components.Panels.Panel.menuItems('Inspect').should('be.visible').click();
e2e.components.Tab.title('JSON').should('be.visible').click();
e2e.components.PanelInspector.Json.content().should('be.visible').contains('Panel JSON').click({ force: true });
e2e.components.Select.option().should('be.visible').contains('Panel data').click();

14
packages/grafana-e2e/src/flows/openPanelMenuItem.ts
View File

@ -7,10 +7,16 @@ export enum PanelMenuItems {
Extensions = 'Extensions',
}
export const openPanelMenuItem = (menu: PanelMenuItems, panelTitle = 'Panel Title') => {
e2e.components.Panels.Panel.title(panelTitle).should('be.visible').click();
e2e.components.Panels.Panel.headerItems(menu).should('be.visible').click();
export const openPanelMenuItem = (menu: PanelMenuItems, panelTitle = 'Panel Title', isReactPanel = false) => {
// we changed the way we open the panel menu in react panels with the new panel header
if (isReactPanel) {
e2e.components.Panels.Panel.menu(panelTitle).click({ force: true }); // force click because menu is hidden and show on hover
e2e.components.Panels.Panel.menuItems(menu).should('be.visible').click();
} else {
// this is the old way of opening the panel menu from the title
e2e.components.Panels.Panel.title(panelTitle).should('be.visible').click();
e2e.components.Panels.Panel.headerItems(menu).should('be.visible').click();
}
};
export const openPanelMenuExtension = (extensionTitle: string, panelTitle = 'Panel Title') => {

4
packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
View File

@ -114,7 +114,7 @@ export function PanelChrome({
actions = leftItems;
}
const ariaLabel = title ? selectors.components.Panels.Panel.containerByTitle(title) : 'Panel';
const testid = title ? selectors.components.Panels.Panel.title(title) : 'Panel';
const headerContent = (
<>
@ -152,7 +152,7 @@ export function PanelChrome({
);
return (
<div className={styles.container} style={containerStyles} aria-label={ariaLabel}>
<div className={styles.container} style={containerStyles} data-testid={testid}>
<div className={styles.loadingBarContainer}>
{loadingState === LoadingState.Loading ? <LoadingBar width={width} ariaLabel="Panel loading bar" /> : null}
</div>

5
packages/grafana-ui/src/components/PanelChrome/PanelMenu.tsx
View File

@ -1,6 +1,8 @@
import { cx } from '@emotion/css';
import React, { ReactElement } from 'react';
import { selectors } from '@grafana/e2e-selectors';
import { Dropdown } from '../Dropdown/Dropdown';
import { ToolbarButton } from '../ToolbarButton';
import { TooltipPlacement } from '../Tooltip';
@ -24,6 +26,7 @@ export function PanelMenu({
menuButtonClass,
onVisibleChange,
}: PanelMenuProps) {
const testId = title ? selectors.components.Panels.Panel.menu(title) : `panel-menu-button`;
return (
<Dropdown overlay={menu} placement={placement} offset={offset} onVisibleChange={onVisibleChange}>
<ToolbarButton
@ -32,7 +35,7 @@ export function PanelMenu({
icon="ellipsis-v"
iconSize="md"
narrow
data-testid="panel-menu-button"
data-testid={testId}
className={cx(menuButtonClass, dragClassCancel)}
/>
</Dropdown>

3
pkg/services/featuremgmt/registry.go
View File

@ -274,8 +274,9 @@ var (
{
Name: "newPanelChromeUI",
Description: "Show updated look and feel of grafana-ui PanelChrome: panel header, icons, and menu",
State: FeatureStateAlpha,
State: FeatureStateStable,
FrontendOnly: true,
Expression: "true", // enabled by default
Owner: grafanaDashboardsSquad,
},
{

2
pkg/services/featuremgmt/toggles_gen.csv
View File

@ -39,7 +39,7 @@ entityStore,alpha,@grafana/grafana-app-platform-squad,true,false,false,false
cloudWatchCrossAccountQuerying,stable,@grafana/aws-plugins,false,false,false,false
redshiftAsyncQueryDataSupport,alpha,@grafana/aws-plugins,false,false,false,true
athenaAsyncQueryDataSupport,alpha,@grafana/aws-plugins,false,false,false,true
newPanelChromeUI,alpha,@grafana/dashboards-squad,false,false,false,true
newPanelChromeUI,stable,@grafana/dashboards-squad,false,false,false,true
showDashboardValidationWarnings,alpha,@grafana/dashboards-squad,false,false,false,false
mysqlAnsiQuotes,alpha,@grafana/backend-platform,false,false,false,false
accessControlOnCall,beta,@grafana/grafana-authnz-team,false,false,false,false

1 Name State Owner requiresDevMode RequiresLicense RequiresRestart FrontendOnly
39 cloudWatchCrossAccountQuerying stable @grafana/aws-plugins false false false false
40 redshiftAsyncQueryDataSupport alpha @grafana/aws-plugins false false false true
41 athenaAsyncQueryDataSupport alpha @grafana/aws-plugins false false false true
42 newPanelChromeUI alpha stable @grafana/dashboards-squad false false false true
43 showDashboardValidationWarnings alpha @grafana/dashboards-squad false false false false
44 mysqlAnsiQuotes alpha @grafana/backend-platform false false false false
45 accessControlOnCall beta @grafana/grafana-authnz-team false false false false