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',
align = 'normal',
wrap = false,
width = 'auto',
width = '100%',
...rest
}) => {
const theme = useTheme();

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

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

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

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

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

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