Grafana v10.1.1 fixes (#91)

* Add time range selector to the dashboard

* Add filters icon to submenu

* Disable panel header menu

Author: Spikatrix

package.json

@@ -280,6 +280,7 @@
     "@locker/near-membrane-dom": "^0.12.15",
     "@locker/near-membrane-shared": "^0.12.15",
     "@locker/near-membrane-shared-dom": "^0.12.15",
+    "@mui/icons-material": "^5.14.13",
     "@mui/material": "^5.14.13",
     "@opentelemetry/api": "1.4.0",
     "@opentelemetry/exporter-collector": "0.25.0",

packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx

@@ -188,7 +188,7 @@ const getStyles = (theme: GrafanaTheme2) => {
     }),
     default: css({
       color: theme.colors.text.secondary,
-      background: 'transparent',
+      background: theme.colors.background.primary,
       border: `1px solid transparent`,
 
       '&:hover': {

public/app/features/dashboard/components/SubMenu/SubMenu.tsx

@@ -1,5 +1,7 @@
 import { css } from '@emotion/css';
-import React, { PureComponent } from 'react';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import { Box, styled } from '@mui/material';
+import React, { FC, PureComponent } from 'react';
 import { connect, MapStateToProps } from 'react-redux';
 
 import { AnnotationQuery, DataQuery, GrafanaTheme2 } from '@grafana/data';
@@ -61,6 +63,7 @@ class SubMenuUnConnected extends PureComponent<Props> {
     return (
       <div className={styles.submenu}>
         <form aria-label="Template variables" className={styles.formStyles} onSubmit={this.disableSubmitOnEnter}>
+          <FilterWithIcon />
           <SubMenuItems variables={variables} readOnly={readOnlyVariables} />
         </form>
         <Annotations
@@ -78,6 +81,7 @@ class SubMenuUnConnected extends PureComponent<Props> {
 const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = (state, ownProps) => {
   const { uid } = ownProps.dashboard;
   const templatingState = getVariablesState(uid, state);
+
   return {
     variables: getSubMenuVariables(uid, templatingState.variables),
   };
@@ -108,3 +112,20 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
 export const SubMenu = withTheme2(connect(mapStateToProps)(SubMenuUnConnected));
 
 SubMenu.displayName = 'SubMenu';
+
+const FilterWithIcon: FC = () => (
+  <FilterWithIconStyled>
+    <FilterListIcon sx={{ color: '#3A785E' }} />
+    FILTERS
+  </FilterWithIconStyled>
+);
+
+const FilterWithIconStyled = styled(Box)({
+  display: 'flex',
+  gap: 1,
+  alignItems: 'center',
+  color: '#3A785E',
+  fontWeight: 600,
+  lineHeight: '160%',
+  fontSize: 12,
+});

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -1,11 +1,12 @@
 import { cx } from '@emotion/css';
+import { Box } from '@mui/material';
 import React, { PureComponent } from 'react';
 import { connect, ConnectedProps, MapDispatchToProps, MapStateToProps } from 'react-redux';
 
 import { NavModel, NavModelItem, TimeRange, PageLayoutType, locationUtil } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { config, locationService } from '@grafana/runtime';
-import { Themeable2, withTheme2 } from '@grafana/ui';
+import { Themeable2, withTheme2, ToolbarButtonRow } from '@grafana/ui';
 import { notifyApp } from 'app/core/actions';
 import { Page } from 'app/core/components/Page/Page';
 import { EntityNotFound } from 'app/core/components/PageNotFound/EntityNotFound';
@@ -17,6 +18,7 @@ import { FnGlobalState } from 'app/core/reducers/fn-slice';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { PanelModel } from 'app/features/dashboard/state';
 import { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher';
+import { updateTimeZoneForSession } from 'app/features/profile/state/reducers';
 import { getPageNavFromSlug, getRootContentNavModel } from 'app/features/storage/StorageFolderPage';
 import { FNDashboardProps } from 'app/fn-app/types';
 import { DashboardRoutes, DashboardState, KioskMode, StoreState } from 'app/types';
@@ -25,7 +27,7 @@ import { PanelEditEnteredEvent, PanelEditExitedEvent } from 'app/types/events';
 import { cancelVariables, templateVarsChangedInUrl } from '../../variables/state/actions';
 import { findTemplateVarChanges } from '../../variables/utils';
 import { AddWidgetModal } from '../components/AddWidgetModal/AddWidgetModal';
-import { DashNav } from '../components/DashNav';
+import { DashNavTimeControls } from '../components/DashNav/DashNavTimeControls';
 import { DashboardFailed } from '../components/DashboardLoading/DashboardFailed';
 import { DashboardLoading } from '../components/DashboardLoading/DashboardLoading';
 import { FnLoader } from '../components/DashboardLoading/FnLoader';
@@ -411,20 +413,29 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
         >
           {showToolbar && (
             <header data-testid={selectors.pages.Dashboard.DashNav.navV2}>
-              <DashNav
+              <Box mb={4}>
+                <ToolbarButtonRow alignment="right">
+                  <DashNavTimeControls
+                    dashboard={dashboard}
+                    onChangeTimeZone={updateTimeZoneForSession}
+                    key="time-controls"
+                  />
+                </ToolbarButtonRow>
+              </Box>
+              {/* <DashNav
                 dashboard={dashboard}
                 title={dashboard.title}
                 folderTitle={dashboard.meta.folderTitle}
                 isFullscreen={!!viewPanel}
                 onAddPanel={this.onAddPanel}
                 kioskMode={kioskMode}
                 hideTimePicker={dashboard.timepicker.hidden}
-              />
+              /> */}
             </header>
           )}
           {!FNDashboard && <DashboardPrompt dashboard={dashboard} />}
           {initError && <DashboardFailed />}
-          {showSubMenu && !FNDashboard && (
+          {showSubMenu && (
             <section aria-label={selectors.pages.Dashboard.SubMenu.submenu}>
               <SubMenu dashboard={dashboard} annotations={dashboard.annotations.list} links={dashboard.links} />
             </section>

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx

@@ -1,4 +1,5 @@
 import { css, cx } from '@emotion/css';
+import { Box } from '@mui/material';
 import React from 'react';
 
 import { DataLink, GrafanaTheme2, PanelData } from '@grafana/data';
@@ -12,7 +13,6 @@ import { getPanelLinksSupplier } from 'app/features/panel/panellinks/linkSupplie
 import PanelHeaderCorner from './PanelHeaderCorner';
 import { PanelHeaderLoadingIndicator } from './PanelHeaderLoadingIndicator';
 import { PanelHeaderMenuTrigger } from './PanelHeaderMenuTrigger';
-import { PanelHeaderMenuWrapper } from './PanelHeaderMenuWrapper';
 import { PanelHeaderNotices } from './PanelHeaderNotices';
 
 export interface Props {
@@ -49,7 +49,7 @@ export function PanelHeader({ panel, error, isViewing, isEditing, data, alertSta
         links={getPanelLinksSupplier(panel)}
         error={error}
       />
-      <div className={className}>
+      <Box className={className} sx={{ '&:hover': { backgroundColor: 'transparent !important' } }}>
         <PanelHeaderMenuTrigger data-testid={selectors.components.Panels.Panel.title(title)} onOpenMenu={onOpenMenu}>
           {({ closeMenu, panelMenuOpen }) => {
             return (
@@ -67,8 +67,8 @@ export function PanelHeader({ panel, error, isViewing, isEditing, data, alertSta
                   <h2 className={styles.titleText}>{title}</h2>
                   {!dashboard.meta.publicDashboardAccessToken && (
                     <div data-testid="panel-dropdown">
-                      <Icon name="angle-down" className="panel-menu-toggle" />
-                      {panelMenuOpen ? <PanelHeaderMenuWrapper panel={panel} dashboard={dashboard} /> : null}
+                      {/* <Icon name="angle-down" className="panel-menu-toggle" />
+                      {panelMenuOpen ? <PanelHeaderMenuWrapper panel={panel} dashboard={dashboard} /> : null} */}
                     </div>
                   )}
                   {data.request && data.request.timeInfo && (
@@ -81,7 +81,7 @@ export function PanelHeader({ panel, error, isViewing, isEditing, data, alertSta
             );
           }}
         </PanelHeaderMenuTrigger>
-      </div>
+      </Box>
     </>
   );
 }
@@ -93,7 +93,6 @@ const panelStyles = (theme: GrafanaTheme2) => {
       overflow: hidden;
       white-space: nowrap;
       max-width: calc(100% - 38px);
-      cursor: pointer;
       font-weight: ${theme.typography.fontWeightMedium};
       font-size: ${theme.typography.body.fontSize};
       margin: 0;

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuTrigger.tsx

@@ -37,7 +37,13 @@ export function PanelHeaderMenuTrigger({ children, onOpenMenu, ...divProps }: Pr
   return (
     // TODO: fix keyboard a11y
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    <header {...divProps} className="panel-title-container" onClick={onMenuToggle} onMouseDown={onMouseDown}>
+    <header
+      {...divProps}
+      className="panel-title-container"
+      onClick={onMenuToggle}
+      onMouseDown={onMouseDown}
+      style={{ cursor: 'unset' }}
+    >
       {children({ panelMenuOpen, closeMenu: () => setPanelMenuOpen(false) })}
     </header>
   );

yarn.lock

@@ -5578,6 +5578,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/icons-material@npm:^5.14.13":
+  version: 5.14.13
+  resolution: "@mui/icons-material@npm:5.14.13"
+  dependencies:
+    "@babel/runtime": ^7.23.1
+  peerDependencies:
+    "@mui/material": ^5.0.0
+    "@types/react": ^17.0.0 || ^18.0.0
+    react: ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: a25db309d02654d1f2d51887986e11b26fc7aea864a398fdc55ca2f4ffd80bbc7402e7686f6a0aeab04a440993e0733aa52f752db50e083dae03e04c558f7bfd
+  languageName: node
+  linkType: hard
+
 "@mui/material@npm:^5.14.13":
   version: 5.14.13
   resolution: "@mui/material@npm:5.14.13"
@@ -19750,6 +19766,7 @@ __metadata:
     "@locker/near-membrane-dom": ^0.12.15
     "@locker/near-membrane-shared": ^0.12.15
     "@locker/near-membrane-shared-dom": ^0.12.15
+    "@mui/icons-material": ^5.14.13
     "@mui/material": ^5.14.13
     "@opentelemetry/api": 1.4.0
     "@opentelemetry/exporter-collector": 0.25.0