mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
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:
parent
c4adf5be8e
commit
b626ba223f
@ -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 {
|
||||
|
@ -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={{
|
||||
|
@ -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;
|
||||
`,
|
||||
});
|
||||
|
@ -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%;
|
||||
|
@ -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%;
|
||||
|
Loading…
Reference in New Issue
Block a user