Page: More easily support full height pages (#56524)

* Page: More easily support full height pages

* tweaks to JSONSettingsPage
pull/53721/head
Torkel Ödegaard 3 years ago committed by GitHub
parent df2abf09c2
commit 6c39a1995f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 10
      public/app/core/components/PageNew/Page.tsx
  2. 64
      public/app/features/dashboard/components/DashboardSettings/JsonEditorSettings.tsx

@ -82,12 +82,12 @@ export const Page: PageType = ({
/> />
</> </>
)} )}
<div className={styles.pageContent}> <div className={styles.pageContainer}>
<CustomScrollbar autoHeightMin={'100%'} scrollTop={scrollTop} scrollRefCallback={scrollRef}> <CustomScrollbar autoHeightMin={'100%'} scrollTop={scrollTop} scrollRefCallback={scrollRef}>
<div className={styles.pageInner}> <div className={styles.pageInner}>
{pageHeaderNav && <PageHeader navItem={pageHeaderNav} subTitle={subTitle} />} {pageHeaderNav && <PageHeader navItem={pageHeaderNav} subTitle={subTitle} />}
{pageNav && pageNav.children && <PageTabs navItem={pageNav} />} {pageNav && pageNav.children && <PageTabs navItem={pageNav} />}
{children} <div className={styles.pageContent}>{children}</div>
</div> </div>
<Footer /> <Footer />
</CustomScrollbar> </CustomScrollbar>
@ -157,6 +157,10 @@ const getStyles = (theme: GrafanaTheme2) => {
flexDirection: 'row', flexDirection: 'row',
}, },
}), }),
pageContainer: css({
label: 'page-container',
flexGrow: 1,
}),
pageContent: css({ pageContent: css({
label: 'page-content', label: 'page-content',
flexGrow: 1, flexGrow: 1,
@ -167,6 +171,8 @@ const getStyles = (theme: GrafanaTheme2) => {
boxShadow: shadow, boxShadow: shadow,
background: theme.colors.background.primary, background: theme.colors.background.primary,
margin: theme.spacing(2, 2, 2, 1), margin: theme.spacing(2, 2, 2, 1),
display: 'flex',
flexDirection: 'column',
flexGrow: 1, flexGrow: 1,
}), }),
canvasContent: css({ canvasContent: css({

@ -1,9 +1,8 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import React, { useState } from 'react'; import React, { useState } from 'react';
import AutoSizer from 'react-virtualized-auto-sizer';
import { GrafanaTheme2 } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { Button, CodeEditor, Stack, useStyles2 } from '@grafana/ui'; import { Button, CodeEditor, useStyles2 } from '@grafana/ui';
import { Page } from 'app/core/components/PageNew/Page'; import { Page } from 'app/core/components/PageNew/Page';
import { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher'; import { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher';
@ -13,16 +12,10 @@ import { SettingsPageProps } from './types';
export function JsonEditorSettings({ dashboard, sectionNav }: SettingsPageProps) { export function JsonEditorSettings({ dashboard, sectionNav }: SettingsPageProps) {
const [dashboardJson, setDashboardJson] = useState<string>(JSON.stringify(dashboard.getSaveModelClone(), null, 2)); const [dashboardJson, setDashboardJson] = useState<string>(JSON.stringify(dashboard.getSaveModelClone(), null, 2));
const onBlur = (value: string) => {
setDashboardJson(value);
};
const onClick = () => { const onClick = async () => {
getDashboardSrv() await getDashboardSrv().saveJSONDashboard(dashboardJson);
.saveJSONDashboard(dashboardJson) dashboardWatcher.reloadPage();
.then(() => {
dashboardWatcher.reloadPage();
});
}; };
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
@ -31,36 +24,35 @@ export function JsonEditorSettings({ dashboard, sectionNav }: SettingsPageProps)
return ( return (
<Page navModel={sectionNav} subTitle={subTitle}> <Page navModel={sectionNav} subTitle={subTitle}>
<div className="dashboard-settings__subheader"></div> <div className={styles.wrapper}>
<CodeEditor
<Stack direction="column" gap={4} flexGrow={1}> value={dashboardJson}
<div className={styles.editWrapper}> language="json"
<AutoSizer> showMiniMap={true}
{({ width, height }) => ( showLineNumbers={true}
<CodeEditor onBlur={setDashboardJson}
value={dashboardJson} containerStyles={styles.codeEditor}
language="json" />
width={width} {dashboard.meta.canSave && (
height={height} <div>
showMiniMap={true}
showLineNumbers={true}
onBlur={onBlur}
/>
)}
</AutoSizer>
</div>
<div>
{dashboard.meta.canSave && (
<Button type="submit" onClick={onClick}> <Button type="submit" onClick={onClick}>
Save changes Save changes
</Button> </Button>
)} </div>
</div> )}
</Stack> </div>
</Page> </Page>
); );
} }
const getStyles = (_: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
editWrapper: css({ flexGrow: 1 }), wrapper: css({
display: 'flex',
height: '100%',
flexDirection: 'column',
gap: theme.spacing(2),
}),
codeEditor: css({
flexGrow: 1,
}),
}); });

Loading…
Cancel
Save