apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

Browse Source
pull/65495/head
Alexa V 2 years ago 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 all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md
  2. 2
      e2e/panels-suite/panelEdit_base.spec.ts
  3. 15
      e2e/various-suite/inspect-drawer.spec.ts
  4. 1
      packages/grafana-e2e-selectors/src/selectors/components.ts
  5. 4
      packages/grafana-e2e/src/flows/importDashboard.ts
  6. 14
      packages/grafana-e2e/src/flows/openPanelMenuItem.ts
  7. 4
      packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
  8. 5
      packages/grafana-ui/src/components/PanelChrome/PanelMenu.tsx
  9. 3
      pkg/services/featuremgmt/registry.go
  10. 2
      pkg/services/featuremgmt/toggles_gen.csv

2
docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Write Preview
Loading…
Cancel
Save