IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-11 08:05:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

NewPanelEditor: Make variables wrap and small layout refactor (#23862)

Browse Source 
* NewPanelEditor: Make variables wrap  and small layout refactor

* review fix
This commit is contained in:
Dominik Prokop 2020-04-25 07:55:42 +02:00 committed by GitHub
parent ef5cbee2b3
commit c7b7a08baf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 65 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-ui/src/components/Layout/Layout.tsx
View File

@ -33,7 +33,7 @@ export const Layout: React.FC<LayoutProps> = ({
justify = 'flex-start', justify = 'flex-start',
align = 'normal', align = 'normal',
wrap = false, wrap = false,
width = 'auto', width = '100%',
...rest ...rest
}) => { }) => {
const theme = useTheme(); const theme = useTheme();

4
public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
View File

@ -1,5 +1,5 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { renderOrCallToRender, Icon, stylesFactory, useTheme } from '@grafana/ui'; import { renderOrCallToRender, Icon, stylesFactory, useTheme, HorizontalGroup } from '@grafana/ui';
import { GrafanaTheme } from '@grafana/data'; import { GrafanaTheme } from '@grafana/data';
import { css } from 'emotion'; import { css } from 'emotion';
import { useUpdateEffect } from 'react-use'; import { useUpdateEffect } from 'react-use';
@ -54,6 +54,7 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
return ( return (
<div className={styles.wrapper}> <div className={styles.wrapper}>
<div className={styles.header}> <div className={styles.header}>
<HorizontalGroup justify="space-between">
<div <div
className={styles.titleWrapper} className={styles.titleWrapper}
onClick={() => { onClick={() => {
@ -65,6 +66,7 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
{title && <span className={styles.title}>{titleElement}</span>} {title && <span className={styles.title}>{titleElement}</span>}
</div> </div>
{actions && actionsElement} {actions && actionsElement}
</HorizontalGroup>
</div> </div>
{isContentVisible && <div className={styles.content}>{children}</div>} {isContentVisible && <div className={styles.content}>{children}</div>}
</div> </div>

54
public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
View File

@ -1,6 +1,6 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { FieldConfigSource, GrafanaTheme, PanelData, PanelPlugin } from '@grafana/data'; import { FieldConfigSource, GrafanaTheme, PanelData, PanelPlugin } from '@grafana/data';
import { Button, Icon, RadioButtonGroup, stylesFactory } from '@grafana/ui'; import { Button, HorizontalGroup, Icon, RadioButtonGroup, stylesFactory } from '@grafana/ui';
import { css, cx } from 'emotion'; import { css, cx } from 'emotion';
import config from 'app/core/config'; import config from 'app/core/config';
import AutoSizer from 'react-virtualized-auto-sizer'; import AutoSizer from 'react-virtualized-auto-sizer';
@ -221,25 +221,26 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
} }
renderPanelToolbar(styles: EditorStyles) { renderPanelToolbar(styles: EditorStyles) {
const { dashboard, location, uiState } = this.props; const { dashboard, location, uiState, variables } = this.props;
return ( return (
<div className={styles.panelToolbar}> <div className={styles.panelToolbar}>
<HorizontalGroup justify={variables.length > 0 ? 'space-between' : 'flex-end'} align="flex-start">
{this.renderTemplateVariables(styles)} {this.renderTemplateVariables(styles)}
<div className="flex-grow-1" />
<div className={styles.toolbarItem}> <HorizontalGroup>
<RadioButtonGroup value={uiState.mode} options={displayModes} onChange={this.onDiplayModeChange} /> <RadioButtonGroup value={uiState.mode} options={displayModes} onChange={this.onDiplayModeChange} />
</div>
<div className={styles.toolbarItem}>
<DashNavTimeControls dashboard={dashboard} location={location} updateLocation={updateLocation} /> <DashNavTimeControls dashboard={dashboard} location={location} updateLocation={updateLocation} />
</div>
{!uiState.isPanelOptionsVisible && ( {!uiState.isPanelOptionsVisible && (
<div className={styles.toolbarItem}> <DashNavButton
<DashNavButton onClick={this.onTogglePanelOptions} tooltip="Open options pane" classSuffix="close-options"> onClick={this.onTogglePanelOptions}
tooltip="Open options pane"
classSuffix="close-options"
>
<Icon name="angle-left" /> <span style={{ paddingLeft: '6px' }}>Show options</span> <Icon name="angle-left" /> <span style={{ paddingLeft: '6px' }}>Show options</span>
</DashNavButton> </DashNavButton>
</div>
)} )}
</HorizontalGroup>
</HorizontalGroup>
</div> </div>
); );
} }
@ -249,35 +250,34 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
return ( return (
<div className={styles.editorToolbar}> <div className={styles.editorToolbar}>
<HorizontalGroup justify="space-between" align="center">
<div className={styles.toolbarLeft}> <div className={styles.toolbarLeft}>
<HorizontalGroup spacing="none">
<BackButton onClick={this.onPanelExit} surface="panel" /> <BackButton onClick={this.onPanelExit} surface="panel" />
<span className={styles.editorTitle}>{dashboard.title} / Edit Panel</span> <span className={styles.editorTitle}>{dashboard.title} / Edit Panel</span>
</HorizontalGroup>
</div> </div>
<div className={styles.toolbarLeft}>
<div className={styles.toolbarItem}> <HorizontalGroup>
<HorizontalGroup spacing="sm" align="center">
<Button <Button
icon="cog" icon="cog"
onClick={this.onOpenDashboardSettings} onClick={this.onOpenDashboardSettings}
variant="secondary" variant="secondary"
title="Open dashboad settings" title="Open dashboad settings"
/> />
</div>
<div className={styles.toolbarItem}>
<Button onClick={this.onDiscard} variant="secondary" title="Undo all changes"> <Button onClick={this.onDiscard} variant="secondary" title="Undo all changes">
Discard Discard
</Button> </Button>
</div>
<div className={styles.toolbarItem}>
<Button onClick={this.onSaveDashboard} variant="secondary" title="Apply changes and save dashboard"> <Button onClick={this.onSaveDashboard} variant="secondary" title="Apply changes and save dashboard">
Save Save
</Button> </Button>
</div>
<div className={styles.toolbarItem}>
<Button onClick={this.onPanelExit} title="Apply changes and go back to dashboard"> <Button onClick={this.onPanelExit} title="Apply changes and go back to dashboard">
Apply Apply
</Button> </Button>
</div> </HorizontalGroup>
</div> </HorizontalGroup>
</HorizontalGroup>
</div> </div>
); );
} }
@ -429,7 +429,10 @@ export const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => {
padding-bottom: ${paneSpacing}; padding-bottom: ${paneSpacing};
`, `,
variablesWrapper: css` variablesWrapper: css`
label: variablesWrapper;
display: flex; display: flex;
flex-grow: 1;
flex-wrap: wrap;
`, `,
panelWrapper: css` panelWrapper: css`
flex: 1 1 0; flex: 1 1 0;
@ -477,15 +480,6 @@ export const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => {
`, `,
toolbarLeft: css` toolbarLeft: css`
padding-left: ${theme.spacing.sm}; padding-left: ${theme.spacing.sm};
display: flex;
align-items: center;
`,
toolbarItem: css`
margin-right: ${theme.spacing.sm};
&:last-child {
margin-right: 0;
}
`, `,
centeringContainer: css` centeringContainer: css`
display: flex; display: flex;

2
public/sass/components/_submenu.scss
View File

@ -31,7 +31,7 @@
padding-left: 8px; padding-left: 8px;
} }
.gf-form { .gf-form-inline .gf-form {
margin-bottom: 0; margin-bottom: 0;
} }
} }