From 0f7c9e579d62ae448db6d1ac8dc346125db95973 Mon Sep 17 00:00:00 2001 From: Spikatrix <12792882+Spikatrix@users.noreply.github.com> Date: Fri, 13 Oct 2023 09:12:14 +0000 Subject: [PATCH 1/3] Add time range selector to the dashboard --- .../ToolbarButton/ToolbarButton.tsx | 2 +- .../dashboard/containers/DashboardPage.tsx | 27 +++++++++++++------ 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx index 7d7c9ba36ba53..f8d096769ddf3 100644 --- a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx +++ b/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': { diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx index 5878bf272f8de..ca02099cebc44 100644 --- a/public/app/features/dashboard/containers/DashboardPage.tsx +++ b/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'; @@ -409,9 +411,18 @@ export class UnthemedDashboardPage extends PureComponent { scrollRef={this.setScrollRef} scrollTop={updateScrollTop} > - {showToolbar && ( -
- + + + + + + {/* { onAddPanel={this.onAddPanel} kioskMode={kioskMode} hideTimePicker={dashboard.timepicker.hidden} - /> -
- )} + /> */} + + {/* )} */} {!FNDashboard && } {initError && } {showSubMenu && !FNDashboard && ( From 18df68dbef004502249724203171eb6e2995d7e2 Mon Sep 17 00:00:00 2001 From: Spikatrix <12792882+Spikatrix@users.noreply.github.com> Date: Fri, 13 Oct 2023 09:49:12 +0000 Subject: [PATCH 2/3] Add filters icon to submenu --- package.json | 1 + .../dashboard/components/SubMenu/SubMenu.tsx | 23 +++++++++++++- .../dashboard/containers/DashboardPage.tsx | 30 +++++++++---------- yarn.lock | 17 +++++++++++ 4 files changed, 55 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index f508ac9648303..fb066c4b5248c 100644 --- a/package.json +++ b/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", diff --git a/public/app/features/dashboard/components/SubMenu/SubMenu.tsx b/public/app/features/dashboard/components/SubMenu/SubMenu.tsx index fcc57a32a4fe8..c31d7ff4cd891 100644 --- a/public/app/features/dashboard/components/SubMenu/SubMenu.tsx +++ b/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 { return (
+ { const mapStateToProps: MapStateToProps = (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 = () => ( + + + FILTERS + +); + +const FilterWithIconStyled = styled(Box)({ + display: 'flex', + gap: 1, + alignItems: 'center', + color: '#3A785E', + fontWeight: 600, + lineHeight: '160%', + fontSize: 12, +}); diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx index ca02099cebc44..0ec660395815c 100644 --- a/public/app/features/dashboard/containers/DashboardPage.tsx +++ b/public/app/features/dashboard/containers/DashboardPage.tsx @@ -411,18 +411,18 @@ export class UnthemedDashboardPage extends PureComponent { scrollRef={this.setScrollRef} scrollTop={updateScrollTop} > - {/* {showToolbar && ( */} -
- - - - - - {/* + + + + + + {/* { kioskMode={kioskMode} hideTimePicker={dashboard.timepicker.hidden} /> */} -
- {/* )} */} + + )} {!FNDashboard && } {initError && } - {showSubMenu && !FNDashboard && ( + {showSubMenu && (
diff --git a/yarn.lock b/yarn.lock index 561f26e145043..3001b452482e8 100644 --- a/yarn.lock +++ b/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 From 64104b34ec62429af7e356a529ec046eea9590cf Mon Sep 17 00:00:00 2001 From: Spikatrix <12792882+Spikatrix@users.noreply.github.com> Date: Fri, 13 Oct 2023 10:15:53 +0000 Subject: [PATCH 3/3] Disable panel header menu --- .../dashboard/dashgrid/PanelHeader/PanelHeader.tsx | 11 +++++------ .../dashgrid/PanelHeader/PanelHeaderMenuTrigger.tsx | 8 +++++++- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx index 144b7d4336a65..86cc7fbc148d9 100644 --- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx +++ b/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} /> -
+ {({ closeMenu, panelMenuOpen }) => { return ( @@ -67,8 +67,8 @@ export function PanelHeader({ panel, error, isViewing, isEditing, data, alertSta

{title}

{!dashboard.meta.publicDashboardAccessToken && (
- - {panelMenuOpen ? : null} + {/* + {panelMenuOpen ? : null} */}
)} {data.request && data.request.timeInfo && ( @@ -81,7 +81,7 @@ export function PanelHeader({ panel, error, isViewing, isEditing, data, alertSta ); }} -
+ ); } @@ -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; diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuTrigger.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuTrigger.tsx index 881d3f9f2a6a1..3ad70dc67b498 100644 --- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuTrigger.tsx +++ b/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 -
+
{children({ panelMenuOpen, closeMenu: () => setPanelMenuOpen(false) })}
);