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

AppChromeService: Improve useChromeHeaderHeight to only react to necessary state changes (#94624)

Browse Source 
make useChromeHeaderHeight only react to necessary state changes
This commit is contained in:
Ashley Harrison 2024-10-14 16:21:15 +01:00 committed by GitHub
parent d5fe9ce87f
commit e48351fbd3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 30 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
public/app/core/components/AppChrome/AppChromeService.tsx
View File

@ -1,5 +1,5 @@
import { useObservable } from 'react-use'; import { useObservable } from 'react-use';
import { BehaviorSubject } from 'rxjs'; import { BehaviorSubject, distinctUntilChanged, map } from 'rxjs';
import { AppEvents, NavModel, NavModelItem, PageLayoutType, UrlQueryValue } from '@grafana/data'; import { AppEvents, NavModel, NavModelItem, PageLayoutType, UrlQueryValue } from '@grafana/data';
import { config, locationService, reportInteraction } from '@grafana/runtime'; import { config, locationService, reportInteraction } from '@grafana/runtime';
@ -12,6 +12,7 @@ import { KioskMode } from 'app/types';
import { RouteDescriptor } from '../../navigation/types'; import { RouteDescriptor } from '../../navigation/types';
import { ReturnToPreviousProps } from './ReturnToPrevious/ReturnToPrevious'; import { ReturnToPreviousProps } from './ReturnToPrevious/ReturnToPrevious';
import { TOP_BAR_LEVEL_HEIGHT } from './types';
export interface AppChromeState { export interface AppChromeState {
chromeless?: boolean; chromeless?: boolean;
@ -56,6 +57,31 @@ export class AppChromeService {
returnToPrevious: this.returnToPreviousData, returnToPrevious: this.returnToPreviousData,
}); });
public headerHeightObservable = this.state
.pipe(
map(({ actions, chromeless, kioskMode, searchBarHidden }) => {
if (config.featureToggles.singleTopNav) {
if (kioskMode || chromeless) {
return 0;
} else if (actions) {
return TOP_BAR_LEVEL_HEIGHT * 2;
} else {
return TOP_BAR_LEVEL_HEIGHT;
}
} else {
if (kioskMode || chromeless) {
return 0;
} else if (searchBarHidden) {
return TOP_BAR_LEVEL_HEIGHT;
} else {
return TOP_BAR_LEVEL_HEIGHT * 2;
}
}
})
)
// only emit if the state has actually changed
.pipe(distinctUntilChanged());
public setMatchedRoute(route: RouteDescriptor) { public setMatchedRoute(route: RouteDescriptor) {
if (this.currentRoute !== route) { if (this.currentRoute !== route) {
this.currentRoute = route; this.currentRoute = route;

24
public/app/core/context/GrafanaContext.ts
View File

@ -1,10 +1,10 @@
import { createContext, useCallback, useContext } from 'react'; import { createContext, useCallback, useContext } from 'react';
import { useObservable } from 'react-use';
import { GrafanaConfig } from '@grafana/data'; import { GrafanaConfig } from '@grafana/data';
import { LocationService, locationService, BackendSrv, config } from '@grafana/runtime'; import { LocationService, locationService, BackendSrv } from '@grafana/runtime';
import { AppChromeService } from '../components/AppChrome/AppChromeService'; import { AppChromeService } from '../components/AppChrome/AppChromeService';
import { TOP_BAR_LEVEL_HEIGHT } from '../components/AppChrome/types';
import { NewFrontendAssetsChecker } from '../services/NewFrontendAssetsChecker'; import { NewFrontendAssetsChecker } from '../services/NewFrontendAssetsChecker';
import { KeybindingSrv } from '../services/keybindingSrv'; import { KeybindingSrv } from '../services/keybindingSrv';
@ -45,23 +45,5 @@ export function useReturnToPreviousInternal() {
export function useChromeHeaderHeight() { export function useChromeHeaderHeight() {
const { chrome } = useGrafana(); const { chrome } = useGrafana();
const { actions, kioskMode, searchBarHidden, chromeless } = chrome.useState(); return useObservable(chrome.headerHeightObservable, 0);
if (config.featureToggles.singleTopNav) {
if (kioskMode || chromeless) {
return 0;
} else if (actions) {
return TOP_BAR_LEVEL_HEIGHT * 2;
} else {
return TOP_BAR_LEVEL_HEIGHT;
}
} else {
if (kioskMode || chromeless) {
return 0;
} else if (searchBarHidden) {
return TOP_BAR_LEVEL_HEIGHT;
} else {
return TOP_BAR_LEVEL_HEIGHT * 2;
}
}
} }