Hooks: Adding possibility to display banner on the top of the page (#39099)

* adding working version of notificaion banner trigger.

* Move it to enterprise

* Fixing csss, none of the pages showed our CustomScrollbar or had double scrollbars

* fixing explore

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
This commit is contained in:
Marcus Andersson 2021-09-29 08:28:07 +02:00 committed by GitHub
parent c4adf5be8e
commit b626ba223f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 19 additions and 10 deletions

View File

@ -18,14 +18,18 @@ export function getPageStyles(theme: GrafanaTheme2) {
.main-view {
position: relative;
display: flex;
flex-direction: column;
flex-grow: 1;
height: 100%;
flex: 1 1 0;
}
.page-scrollbar-wrapper {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
flex-grow: 1;
width: 100%;
min-height: 0;
}
.page-scrollbar-content {

View File

@ -25,11 +25,15 @@ interface AppWrapperState {
/** Used by enterprise */
let bodyRenderHooks: ComponentType[] = [];
let pageBanners: ComponentType[] = [];
export function addBodyRenderHook(fn: ComponentType) {
bodyRenderHooks.push(fn);
}
export function addPageBanner(fn: ComponentType) {
pageBanners.push(fn);
}
export class AppWrapper extends React.Component<AppWrapperProps, AppWrapperState> {
container = React.createRef<HTMLDivElement>();
@ -98,6 +102,9 @@ export class AppWrapper extends React.Component<AppWrapperProps, AppWrapperState
<Router history={locationService.getHistory()}>
<NavBar />
<main className="main-view">
{pageBanners.map((Banner, index) => (
<Banner key={index.toString()} />
))}
<div
ref={this.container}
dangerouslySetInnerHTML={{

View File

@ -53,9 +53,9 @@ export default Page;
const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css`
bottom: 0;
position: absolute;
top: 0;
width: 100%;
flex-grow: 1;
width: 100%;
min-height: 0;
`,
});

View File

@ -395,14 +395,12 @@ export const getStyles = stylesFactory((theme: GrafanaTheme2, kioskMode) => {
const contentPadding = kioskMode !== KioskMode.Full ? theme.spacing(0, 2, 2) : theme.spacing(2);
return {
dashboardContainer: css`
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
display: flex;
flex: 1 1 0;
flex-direction: column;
min-height: 0;
`,
dashboardScroll: css`
width: 100%;

View File

@ -141,7 +141,6 @@
display: flex;
flex: 1 1 auto;
flex-direction: column;
height: 100vh;
width: 100%;
}
@ -166,6 +165,7 @@
.explore-wrapper {
display: flex;
height: 100%;
> .explore-split {
width: 50%;