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

Kiosk: Reuse kiosk module (#44625)

Browse Source 
* Reuse kiosk module, centralize kiosk query handling

* update kiosk tests to set correct kiosk value

* fix DashboardPage kiosk test

* remove unused UrlQueryValue, revert import change
This commit is contained in:
Shahar Mor 2022-02-10 13:54:50 +02:00 committed by GitHub
parent 96ae44ee2c
commit 3eac34f5f3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 37 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
public/app/core/components/NavBar/NavBar.test.tsx
View File

@ -39,10 +39,18 @@ describe('Render', () => {
expect(sidemenu).toBeInTheDocument();
});
it('should not render when in kiosk mode', async () => {
it('should not render when in kiosk mode is tv', async () => {
setup();
locationService.partial({ kiosk: 'full' });
locationService.partial({ kiosk: 'tv' });
const sidemenu = screen.queryByTestId('sidemenu');
expect(sidemenu).not.toBeInTheDocument();
});
it('should not render when in kiosk mode is full', async () => {
setup();
locationService.partial({ kiosk: '1' });
const sidemenu = screen.queryByTestId('sidemenu');
expect(sidemenu).not.toBeInTheDocument();
});

8
public/app/core/components/NavBar/NavBar.tsx
View File

@ -8,7 +8,8 @@ import { Icon, IconName, useTheme2 } from '@grafana/ui';
import { locationService } from '@grafana/runtime';
import { Branding } from 'app/core/components/Branding/Branding';
import config from 'app/core/config';
import { StoreState, KioskMode } from 'app/types';
import { getKioskMode } from 'app/core/navigation/kiosk';
import { KioskMode, StoreState } from 'app/types';
import { enrichConfigItems, getActiveItem, isMatchOrChildMatch, isSearchActive, SEARCH_ITEM_ID } from './utils';
import { OrgSwitcher } from '../OrgSwitcher';
import NavBarItem from './NavBarItem';
@ -43,8 +44,7 @@ export const NavBarUnconnected = React.memo(({ navBarTree }: Props) => {
const theme = useTheme2();
const styles = getStyles(theme);
const location = useLocation();
const query = new URLSearchParams(location.search);
const kiosk = query.get('kiosk') as KioskMode;
const kiosk = getKioskMode();
const [showSwitcherModal, setShowSwitcherModal] = useState(false);
const toggleSwitcherModal = () => {
setShowSwitcherModal(!showSwitcherModal);
@ -60,7 +60,7 @@ export const NavBarUnconnected = React.memo(({ navBarTree }: Props) => {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
if (kiosk !== null) {
if (kiosk !== KioskMode.Off) {
return null;
}

12
public/app/core/components/NavBar/NavBarNext.test.tsx
View File

@ -39,10 +39,18 @@ describe('Render', () => {
expect(sidemenu).toBeInTheDocument();
});
it('should not render when in kiosk mode', async () => {
it('should not render when in kiosk mode is tv', async () => {
setup();
locationService.partial({ kiosk: 'full' });
locationService.partial({ kiosk: 'tv' });
const sidemenu = screen.queryByTestId('sidemenu');
expect(sidemenu).not.toBeInTheDocument();
});
it('should not render when in kiosk mode is full', async () => {
setup();
locationService.partial({ kiosk: '1' });
const sidemenu = screen.queryByTestId('sidemenu');
expect(sidemenu).not.toBeInTheDocument();
});

6
public/app/core/components/NavBar/NavBarNext.tsx
View File

@ -5,6 +5,7 @@ import { cloneDeep } from 'lodash';
import { GrafanaTheme2, NavModelItem, NavSection } from '@grafana/data';
import { Icon, IconName, useTheme2 } from '@grafana/ui';
import { locationService } from '@grafana/runtime';
import { getKioskMode } from 'app/core/navigation/kiosk';
import { KioskMode, StoreState } from 'app/types';
import { enrichConfigItems, getActiveItem, isMatchOrChildMatch, isSearchActive, SEARCH_ITEM_ID } from './utils';
import { OrgSwitcher } from '../OrgSwitcher';
@ -40,8 +41,7 @@ export const NavBarNextUnconnected = React.memo(({ navBarTree }: Props) => {
const theme = useTheme2();
const styles = getStyles(theme);
const location = useLocation();
const query = new URLSearchParams(location.search);
const kiosk = query.get('kiosk') as KioskMode;
const kiosk = getKioskMode();
const [showSwitcherModal, setShowSwitcherModal] = useState(false);
const toggleSwitcherModal = () => {
setShowSwitcherModal(!showSwitcherModal);
@ -57,7 +57,7 @@ export const NavBarNextUnconnected = React.memo(({ navBarTree }: Props) => {
const activeItem = isSearchActive(location) ? searchItem : getActiveItem(navTree, location.pathname);
const [menuOpen, setMenuOpen] = useState(false);
if (kiosk !== null) {
if (kiosk !== KioskMode.Off) {
return null;
}

8
public/app/core/navigation/kiosk.ts
View File

@ -1,4 +1,4 @@
import { AppEvents, UrlQueryValue } from '@grafana/data';
import { AppEvents } from '@grafana/data';
import { locationService } from '@grafana/runtime';
import appEvents from '../app_events';
import { KioskMode } from '../../types';
@ -22,8 +22,10 @@ export function toggleKioskMode() {
locationService.partial({ kiosk });
}
export function getKioskMode(queryParam?: UrlQueryValue): KioskMode {
switch (queryParam) {
export function getKioskMode(): KioskMode {
const kiosk = locationService.getSearchObject().kiosk;
switch (kiosk) {
case 'tv':
return KioskMode.TV;
// legacy support

3
public/app/features/dashboard/containers/DashboardPage.test.tsx
View File

@ -288,8 +288,9 @@ describe('DashboardPage', () => {
dashboardPageScenario('When in full kiosk mode', (ctx) => {
ctx.setup(() => {
locationService.partial({ kiosk: true });
ctx.mount({
queryParams: { kiosk: true },
queryParams: {},
dashboard: getTestDashboard(),
});
ctx.rerender({ dashboard: ctx.dashboard });

7
public/app/features/dashboard/containers/DashboardPage.tsx
View File

@ -24,7 +24,7 @@ import { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher';
import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
import { getTimeSrv } from '../services/TimeSrv';
import { getKioskMode } from 'app/core/navigation/kiosk';
import { GrafanaTheme2, TimeRange, UrlQueryValue } from '@grafana/data';
import { GrafanaTheme2, TimeRange } from '@grafana/data';
import { DashboardLoading } from '../components/DashboardLoading/DashboardLoading';
import { DashboardFailed } from '../components/DashboardLoading/DashboardFailed';
import { DashboardPrompt } from '../components/DashboardPrompt/DashboardPrompt';
@ -45,7 +45,6 @@ type DashboardPageRouteSearchParams = {
viewPanel?: string;
editview?: string;
inspect?: string;
kiosk?: UrlQueryValue;
from?: string;
to?: string;
refresh?: string;
@ -314,7 +313,7 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
render() {
const { dashboard, isInitSlow, initError, queryParams, theme } = this.props;
const { editPanel, viewPanel, updateScrollTop } = this.state;
const kioskMode = getKioskMode(queryParams.kiosk);
const kioskMode = getKioskMode();
const styles = getStyles(theme, kioskMode);
if (!dashboard) {
@ -380,7 +379,7 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
/*
* Styles
*/
export const getStyles = stylesFactory((theme: GrafanaTheme2, kioskMode) => {
export const getStyles = stylesFactory((theme: GrafanaTheme2, kioskMode: KioskMode) => {
const contentPadding = kioskMode !== KioskMode.Full ? theme.spacing(0, 2, 2) : theme.spacing(2);
return {
dashboardContainer: css`