68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
import { css, cx } from '@emotion/css';
|
|
|
|
import { GrafanaTheme2 } from '@grafana/data/src';
|
|
import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src';
|
|
import { useStyles2 } from '@grafana/ui/src';
|
|
|
|
import { Branding } from '../../../../core/components/Branding/Branding';
|
|
import { getLoginStyles } from '../../../../core/components/Login/LoginLayout';
|
|
|
|
const selectors = e2eSelectors.pages.PublicDashboard.NotAvailable;
|
|
|
|
export const PublicDashboardNotAvailable = ({ paused }: { paused?: boolean }) => {
|
|
const styles = useStyles2(getStyles);
|
|
const loginStyles = useStyles2(getLoginStyles);
|
|
const loginBoxBackground = Branding.LoginBoxBackground();
|
|
|
|
return (
|
|
<Branding.LoginBackground className={styles.container} data-testid={selectors.container}>
|
|
<div className={cx(styles.box, loginBoxBackground)}>
|
|
<Branding.LoginLogo className={loginStyles.loginLogo} />
|
|
<p className={styles.title} data-testid={selectors.title}>
|
|
{paused
|
|
? 'This dashboard has been paused by the administrator'
|
|
: 'The dashboard you are trying to access does not exist'}
|
|
</p>
|
|
{paused && (
|
|
<p className={styles.description} data-testid={selectors.pausedDescription}>
|
|
Try again later
|
|
</p>
|
|
)}
|
|
</div>
|
|
</Branding.LoginBackground>
|
|
);
|
|
};
|
|
|
|
const getStyles = (theme: GrafanaTheme2) => ({
|
|
container: css({
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
height: '100%',
|
|
|
|
':before': {
|
|
opacity: 1,
|
|
},
|
|
}),
|
|
box: css({
|
|
width: '608px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
flexDirection: 'column',
|
|
gap: theme.spacing(4),
|
|
zIndex: 1,
|
|
borderRadius: theme.shape.borderRadius(4),
|
|
padding: theme.spacing(6, 8),
|
|
opacity: 1,
|
|
}),
|
|
title: css({
|
|
fontSize: theme.typography.h3.fontSize,
|
|
textAlign: 'center',
|
|
margin: 0,
|
|
}),
|
|
description: css({
|
|
fontSize: theme.typography.h5.fontSize,
|
|
margin: 0,
|
|
}),
|
|
});
|