Skip to content

N
nexpie-grafana-theme
Commit d524bb1f by Torkel Ödegaard Committed by GitHub
Options

NewPanelEdit: Side options collapse/expand design update (#23161) 

* WIP: Panel options search

* Panel options search

* Minor update

* Fixed ts issues

* StatPanel: Fixed duplicate option exception

* Added some polish

* Updated snapshot

* Minor fix

* updated snapshot
parent 1633bacb
Showing with 184 additions and 68 deletions
packages/grafana-ui/src/components/Forms/Input/Input.tsx
......@@ -211,7 +211,7 @@ export const getInputStyles = stylesFactory(({ theme, invalid = false }: StyleDe
});
export const Input = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
const { addonAfter, addonBefore, prefix, suffix, invalid, loading, size = 'auto', ...restProps } = props;
const { className, addonAfter, addonBefore, prefix, suffix, invalid, loading, size = 'auto', ...restProps } = props;
/**
* Prefix & suffix are positioned absolutely within inputWrapper. We use client rects below to apply correct padding to the input
* when prefix/suffix is larger than default (28px = 16px(icon) + 12px(left/right paddings)).
......@@ -224,7 +224,7 @@ export const Input = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
const styles = getInputStyles({ theme, invalid: !!invalid });
return (
<div className={cx(styles.wrapper, inputSizes()[size])}>
<div className={cx(styles.wrapper, inputSizes()[size], className)}>
{!!addonBefore && <div className={styles.addon}>{addonBefore}</div>}
<div className={styles.inputWrapper}>
......
packages/grafana-ui/src/components/Icon/Icon.tsx
......@@ -13,11 +13,13 @@ export interface IconProps {
const getIconStyles = stylesFactory(() => {
return {
icon: css`
display: inline-block;
display: inline-flex;
width: 16px;
align-items: center;
height: 16px;
text-align: center;
font-size: 14px;
&:before {
vertical-align: middle;
}
......
packages/grafana-ui/src/components/Icon/types.ts
......@@ -89,6 +89,7 @@ export type IconType =
| 'times-circle-o'
| 'check-circle-o'
| 'ban'
| 'remove'
| 'arrow-left'
| 'arrow-right'
| 'arrow-up'
......
packages/grafana-ui/src/components/Tabs/TabsBar.tsx
......@@ -24,6 +24,8 @@ const getTabsBarStyles = stylesFactory((theme: GrafanaTheme, hideBorder = false)
position: relative;
top: 1px;
display: flex;
// Sometimes TabsBar is rendered without any tabs, and should preserve height
height: 41px;
`,
};
});
......
public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap
......@@ -97,7 +97,7 @@ exports[`ServerStats Should render table with stats 1`] = `
className="page-header__tabs"
>
<ul
className="css-13jkosq"
className="css-payll4"
>
<li
className="css-1aiaexb"
......
public/app/features/dashboard/components/DashNav/DashNavButton.tsx
......@@ -5,32 +5,35 @@ import { Tooltip } from '@grafana/ui';
import { e2e } from '@grafana/e2e';
interface Props {
icon: string;
icon?: string;
tooltip: string;
classSuffix: string;
classSuffix?: string;
onClick?: () => void;
href?: string;
children?: React.ReactNode;
}
export const DashNavButton: FunctionComponent<Props> = ({ icon, tooltip, classSuffix, onClick, href }) => {
export const DashNavButton: FunctionComponent<Props> = ({ icon, tooltip, classSuffix, onClick, href, children }) => {
if (onClick) {
return (
<Tooltip content={tooltip}>
<Tooltip content={tooltip} placement="bottom">
<button
className={`btn navbar-button navbar-button--${classSuffix}`}
onClick={onClick}
aria-label={e2e.pages.Dashboard.Toolbar.selectors.toolbarItems(tooltip)}
>
<i className={icon} />
{icon && <i className={icon} />}
{children}
</button>
</Tooltip>
);
}
return (
<Tooltip content={tooltip}>
<Tooltip content={tooltip} placement="bottom">
<a className={`btn navbar-button navbar-button--${classSuffix}`} href={href}>
<i className={icon} />
{icon && <i className={icon} />}
{children}
</a>
</Tooltip>
);
......
public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx
import React, { useCallback, useState } from 'react';
import React, { useCallback, useState, CSSProperties } from 'react';
import Transition from 'react-transition-group/Transition';
import { FieldConfigSource, GrafanaTheme, PanelData, PanelPlugin } from '@grafana/data';
import { DashboardModel, PanelModel } from '../../state';
import { CustomScrollbar, stylesFactory, Tab, TabContent, TabsBar, useTheme, Container } from '@grafana/ui';
import {
CustomScrollbar,
stylesFactory,
Tab,
TabContent,
TabsBar,
useTheme,
Container,
Forms,
Icon,
} from '@grafana/ui';
import { DefaultFieldConfigEditor, OverrideFieldConfigEditor } from './FieldConfigEditor';
import { AngularPanelOptions } from './AngularPanelOptions';
import { css } from 'emotion';
import { GeneralPanelOptions } from './GeneralPanelOptions';
import { PanelOptionsEditor } from './PanelOptionsEditor';
import { DashNavButton } from 'app/features/dashboard/components/DashNav/DashNavButton';
export const OptionsPaneContent: React.FC<{
plugin?: PanelPlugin;
panel: PanelModel;
data: PanelData;
dashboard: DashboardModel;
onClose: () => void;
onFieldConfigsChange: (config: FieldConfigSource) => void;
onPanelOptionsChanged: (options: any) => void;
onPanelConfigChange: (configKey: string, value: any) => void;
}> = ({ plugin, panel, data, onFieldConfigsChange, onPanelOptionsChanged, onPanelConfigChange, dashboard }) => {
}> = ({
plugin,
panel,
data,
onFieldConfigsChange,
onPanelOptionsChanged,
onPanelConfigChange,
onClose,
dashboard,
}) => {
const theme = useTheme();
const styles = getStyles(theme);
const [activeTab, setActiveTab] = useState('defaults');
const [isSearching, setSearchMode] = useState(false);
const renderFieldOptions = useCallback(
(plugin: PanelPlugin) => {
......@@ -105,16 +129,75 @@ export const OptionsPaneContent: React.FC<{
[data, plugin, panel, onFieldConfigsChange]
);
const [activeTab, setActiveTab] = useState('defaults');
const renderSearchInput = useCallback(() => {
const defaultStyles = {
transition: 'width 50ms ease-in-out',
width: '50%',
display: 'flex',
};
const transitionStyles: { [str: string]: CSSProperties } = {
entered: { width: '100%' },
};
return (
<Transition in={true} timeout={0} appear={true}>
{state => {
return (
<div className={styles.searchWrapper}>
<div style={{ ...defaultStyles, ...transitionStyles[state] }}>
<Forms.Input
className={styles.searchInput}
type="text"
prefix={<Icon name="search" />}
ref={elem => elem && elem.focus()}
placeholder="Search all options"
suffix={
<Icon name="remove" onClick={() => setSearchMode(false)} className={styles.searchRemoveIcon} />
}
/>
</div>
</div>
);
}}
</Transition>
);
}, []);
return (
<div className={styles.panelOptionsPane}>
{plugin && (
<div className={styles.wrapper}>
<TabsBar>
<Tab label="Options" active={activeTab === 'defaults'} onChangeTab={() => setActiveTab('defaults')} />
<Tab label="Overrides" active={activeTab === 'overrides'} onChangeTab={() => setActiveTab('overrides')} />
<Tab label="General" active={activeTab === 'panel'} onChangeTab={() => setActiveTab('panel')} />
<TabsBar className={styles.tabsBar}>
{isSearching && renderSearchInput()}
{!isSearching && (
<>
<Tab label="Options" active={activeTab === 'defaults'} onChangeTab={() => setActiveTab('defaults')} />
<Tab
label="Overrides"
active={activeTab === 'overrides'}
onChangeTab={() => setActiveTab('overrides')}
/>
<Tab label="General" active={activeTab === 'panel'} onChangeTab={() => setActiveTab('panel')} />
<div className="flex-grow-1" />
<div className={styles.tabsButton}>
<DashNavButton
icon="fa fa-search"
tooltip="Search all options"
classSuffix="search-options"
onClick={() => setSearchMode(true)}
/>
</div>
<div className={styles.tabsButton}>
<DashNavButton
icon="fa fa-chevron-right"
tooltip="Close options pane"
classSuffix="close-options"
onClick={onClose}
/>
</div>
</>
)}
</TabsBar>
<TabContent className={styles.tabContent}>
<CustomScrollbar>
......@@ -135,11 +218,26 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
display: flex;
flex-direction: column;
height: 100%;
padding-top: ${theme.spacing.sm};
`,
panelOptionsPane: css`
height: 100%;
width: 100%;
border-bottom: none;
`,
tabsBar: css`
padding-right: ${theme.spacing.sm};
`,
searchWrapper: css`
display: flex;
flex-grow: 1;
flex-direction: row-reverse;
`,
searchInput: css`
color: ${theme.colors.textWeak};
flex-grow: 1;
`,
searchRemoveIcon: css`
cursor: pointer;
`,
tabContent: css`
padding: 0;
......@@ -150,6 +248,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
background: ${theme.colors.pageBg};
border-left: 1px solid ${theme.colors.pageHeaderBorder};
`,
tabsButton: css``,
legacyOptions: css`
label: legacy-options;
.panel-options-grid {
......
public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
import React, { PureComponent } from 'react';
import { FieldConfigSource, GrafanaTheme, PanelData, PanelPlugin, SelectableValue } from '@grafana/data';
import { Forms, stylesFactory, Button } from '@grafana/ui';
import { Forms, stylesFactory, Icon } from '@grafana/ui';
import { css, cx } from 'emotion';
import config from 'app/core/config';
import AutoSizer from 'react-virtualized-auto-sizer';
......@@ -25,6 +25,7 @@ import { PanelEditorUIState, setDiscardChanges } from './state/reducers';
import { getPanelEditorTabs } from './state/selectors';
import { getPanelStateById } from '../../state/selectors';
import { OptionsPaneContent } from './OptionsPaneContent';
import { DashNavButton } from 'app/features/dashboard/components/DashNav/DashNavButton';
enum Pane {
Right,
......@@ -155,28 +156,31 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
onDragStarted={this.onDragStarted}
onDragFinished={size => this.onDragFinished(Pane.Top, size)}
>
<div className={styles.panelWrapper}>
<AutoSizer>
{({ width, height }) => {
if (width < 3 || height < 3) {
return null;
}
return (
<div className={styles.centeringContainer} style={{ width, height }}>
<div style={calculatePanelSize(uiState.mode, width, height, panel)}>
<DashboardPanel
dashboard={dashboard}
panel={panel}
isEditing={false}
isInEditMode
isFullscreen={false}
isInView={true}
/>
<div className={styles.mainPaneWrapper}>
{this.renderToolbar(styles)}
<div className={styles.panelWrapper}>
<AutoSizer>
{({ width, height }) => {
if (width < 3 || height < 3) {
return null;
}
return (
<div className={styles.centeringContainer} style={{ width, height }}>
<div style={calculatePanelSize(uiState.mode, width, height, panel)}>
<DashboardPanel
dashboard={dashboard}
panel={panel}
isEditing={false}
isInEditMode
isFullscreen={false}
isInView={true}
/>
</div>
</div>
</div>
);
}}
</AutoSizer>
);
}}
</AutoSizer>
</div>
</div>
<div className={styles.tabsWrapper}>
<PanelEditorTabs panel={panel} dashboard={dashboard} tabs={tabs} onChangeTab={this.onChangeTab} data={data} />
......@@ -185,9 +189,8 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
);
}
renderToolbar() {
renderToolbar(styles: any) {
const { dashboard, location, uiState } = this.props;
const styles = getStyles(config.theme);
return (
<div className={styles.toolbar}>
......@@ -197,9 +200,9 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
</div>
<div className={styles.toolbarLeft}>
<div className={styles.toolbarItem}>
<Button className={styles.toolbarItem} variant="secondary" onClick={this.onDiscard}>
<DashNavButton tooltip="Discard all changes and return to dashboard" onClick={this.onDiscard}>
Discard changes
</Button>
</DashNavButton>
</div>
<div className={styles.toolbarItem}>
<Forms.Select
......@@ -211,20 +214,23 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
<div className={styles.toolbarItem}>
<DashNavTimeControls dashboard={dashboard} location={location} updateLocation={updateLocation} />
</div>
<div className={styles.toolbarItem}>
<Button
className={styles.toolbarItem}
icon="fa fa-sliders"
variant="secondary"
onClick={this.onTogglePanelOptions}
/>
</div>
{!uiState.isPanelOptionsVisible && (
<div className={styles.toolbarItem}>
<DashNavButton
onClick={this.onTogglePanelOptions}
tooltip="Open options pane"
classSuffix="close-options"
>
<Icon name="chevron-left" /> <span style={{ paddingLeft: '6px' }}>Show options</span>
</DashNavButton>
</div>
)}
</div>
</div>
);
}
renderOptionsPane() {
renderOptionsPane(styles: any) {
const { plugin, dashboard, data, panel } = this.props;
if (!plugin) {
......@@ -237,6 +243,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
dashboard={dashboard}
data={data}
panel={panel}
onClose={this.onTogglePanelOptions}
onFieldConfigsChange={this.onFieldConfigChange}
onPanelOptionsChanged={this.onPanelOptionsChanged}
onPanelConfigChange={this.onPanelConfigChanged}
......@@ -259,14 +266,14 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
onDragFinished={size => this.onDragFinished(Pane.Right, size)}
>
{this.renderHorizontalSplit(styles)}
{this.renderOptionsPane()}
{this.renderOptionsPane(styles)}
</SplitPane>
);
}
render() {
const { initDone, uiState } = this.props;
const styles = getStyles(config.theme);
const styles = getStyles(config.theme, this.props);
if (!initDone) {
return null;
......@@ -275,10 +282,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
return (
<NewPanelEditorContext.Provider value={true}>
<div className={styles.wrapper}>
{this.renderToolbar()}
<div className={styles.panesWrapper}>
{uiState.isPanelOptionsVisible ? this.renderWithOptionsPane(styles) : this.renderHorizontalSplit(styles)}
</div>
{uiState.isPanelOptionsVisible ? this.renderWithOptionsPane(styles) : this.renderHorizontalSplit(styles)}
</div>
</NewPanelEditorContext.Provider>
);
......@@ -313,7 +317,8 @@ export const PanelEditor = connect(mapStateToProps, mapDispatchToProps)(PanelEdi
/*
* Styles
*/
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => {
const { uiState } = props;
const handleColor = theme.colors.blueLight;
const paneSpaceing = theme.spacing.md;
......@@ -347,16 +352,18 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
display: flex;
flex-direction: column;
`,
panesWrapper: css`
flex: 1 1 0;
min-height: 0;
mainPaneWrapper: css`
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
position: relative;
padding-right: ${uiState.isPanelOptionsVisible ? 0 : paneSpaceing};
`,
panelWrapper: css`
flex: 1 1 0;
min-height: 0;
width: 100%;
padding-left: ${paneSpaceing};
height: 100%;
`,
resizerV: cx(
resizer,
......@@ -384,6 +391,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
toolbar: css`
display: flex;
padding: ${theme.spacing.sm};
padding-right: 0;
justify-content: space-between;
`,
toolbarLeft: css`
......
public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
......@@ -71,7 +71,7 @@ const getPanelEditorTabsStyles = stylesFactory(() => {
height: 100%;
`,
tabBar: css`
padding-left: ${theme.spacing.sm};
padding-left: ${theme.spacing.md};
`,
tabContent: css`
padding: 0;
......@@ -80,6 +80,7 @@ const getPanelEditorTabsStyles = stylesFactory(() => {
flex-grow: 1;
min-height: 0;
background: ${theme.colors.panelBg};
border-right: 1px solid ${theme.colors.pageHeaderBorder};
.toolbar {
background: transparent;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment