Skip to content

N
nexpie-grafana-theme
Commit fe28e2a6 by Dominik Prokop Committed by GitHub
Options

Transformations: UI tweaks, filter by name regex validation (#23800) 

* Add validation to filter by name regex, minor layout tweaks

* Use cards uin for non configured transformations
parent 4b426979
Showing with 198 additions and 63 deletions
packages/grafana-data/src/transformations/matchers/nameMatcher.ts
......@@ -11,7 +11,12 @@ const fieldNameMacher: FieldMatcherInfo<string> = {
defaultOptions: '/.*/',
get: (pattern: string) => {
const regex = stringToJsRegex(pattern);
let regex = new RegExp('');
try {
regex = stringToJsRegex(pattern);
} catch (e) {
console.error(e);
}
return (field: Field) => {
return regex.test(field.name);
};
......
packages/grafana-ui/src/components/Layout/Layout.tsx
......@@ -7,7 +7,7 @@ enum Orientation {
Horizontal,
Vertical,
}
type Spacing = 'xs' | 'sm' | 'md' | 'lg';
type Spacing = 'none' | 'xs' | 'sm' | 'md' | 'lg';
type Justify = 'flex-start' | 'flex-end' | 'space-between' | 'center';
type Align = 'normal' | 'flex-start' | 'flex-end' | 'center';
......@@ -18,6 +18,7 @@ export interface LayoutProps {
justify?: Justify;
align?: Align;
width?: string;
wrap?: boolean;
}
export interface ContainerProps {
......@@ -31,10 +32,11 @@ export const Layout: React.FC<LayoutProps> = ({
spacing = 'sm',
justify = 'flex-start',
align = 'normal',
wrap = false,
width = 'auto',
}) => {
const theme = useTheme();
const styles = getStyles(theme, orientation, spacing, justify, align);
const styles = getStyles(theme, orientation, spacing, justify, align, wrap);
return (
<div className={styles.layout} style={{ width }}>
{React.Children.toArray(children)
......@@ -55,13 +57,26 @@ export const HorizontalGroup: React.FC<Omit<LayoutProps, 'orientation'>> = ({
spacing,
justify,
align = 'center',
wrap,
width,
}) => (
<Layout spacing={spacing} justify={justify} orientation={Orientation.Horizontal} align={align} width={width}>
<Layout
spacing={spacing}
justify={justify}
orientation={Orientation.Horizontal}
align={align}
width={width}
wrap={wrap}
>
{children}
</Layout>
);
export const VerticalGroup: React.FC<Omit<LayoutProps, 'orientation'>> = ({ children, spacing, justify, width }) => (
export const VerticalGroup: React.FC<Omit<LayoutProps, 'orientation' | 'wrap'>> = ({
children,
spacing,
justify,
width,
}) => (
<Layout spacing={spacing} justify={justify} orientation={Orientation.Vertical} width={width}>
{children}
</Layout>
......@@ -74,22 +89,28 @@ export const Container: React.FC<ContainerProps> = ({ children, padding, margin
};
const getStyles = stylesFactory(
(theme: GrafanaTheme, orientation: Orientation, spacing: Spacing, justify: Justify, align) => {
(theme: GrafanaTheme, orientation: Orientation, spacing: Spacing, justify: Justify, align, wrap) => {
const finalSpacing = spacing !== 'none' ? theme.spacing[spacing] : 0;
const marginCompensation = orientation === Orientation.Horizontal && !wrap ? 0 : `-${finalSpacing}`;
return {
layout: css`
display: flex;
flex-direction: ${orientation === Orientation.Vertical ? 'column' : 'row'};
flex-wrap: ${wrap ? 'wrap' : 'nowrap'};
justify-content: ${justify};
align-items: ${align};
height: 100%;
max-width: 100%;
// compensate for last row margin when wrapped, horizontal layout
margin-bottom: ${marginCompensation};
`,
childWrapper: css`
margin-bottom: ${orientation === Orientation.Horizontal ? 0 : theme.spacing[spacing]};
margin-right: ${orientation === Orientation.Horizontal ? theme.spacing[spacing] : 0};
margin-bottom: ${orientation === Orientation.Horizontal && !wrap ? 0 : finalSpacing};
margin-right: ${orientation === Orientation.Horizontal ? finalSpacing : 0};
display: flex;
align-items: ${align};
height: 100%;
// height: 100%;
&:last-child {
margin-bottom: 0;
......@@ -101,8 +122,8 @@ const getStyles = stylesFactory(
);
const getContainerStyles = stylesFactory((theme: GrafanaTheme, padding?: Spacing, margin?: Spacing) => {
const paddingSize = (padding && theme.spacing[padding]) || 0;
const marginSize = (margin && theme.spacing[margin]) || 0;
const paddingSize = (padding && padding !== 'none' && theme.spacing[padding]) || 0;
const marginSize = (margin && margin !== 'none' && theme.spacing[margin]) || 0;
return {
wrapper: css`
margin: ${marginSize};
......
packages/grafana-ui/src/components/TransformersUI/CalculateFieldTransformerEditor.tsx
......@@ -128,7 +128,7 @@ export class CalculateFieldTransformerEditor extends React.PureComponent<
<div className="gf-form-inline">
<div className="gf-form gf-form--grow">
<div className="gf-form-label width-8">Field name</div>
<HorizontalGroup spacing="xs">
<HorizontalGroup spacing="xs" align="flex-start" wrap>
{names.map((o, i) => {
return (
<FilterPill
......
packages/grafana-ui/src/components/TransformersUI/FilterByNameTransformerEditor.tsx
......@@ -10,6 +10,8 @@ import {
import { HorizontalGroup } from '../Layout/Layout';
import { Input } from '../Input/Input';
import { FilterPill } from '../FilterPill/FilterPill';
import { Field } from '../Forms/Field';
import { css } from 'emotion';
interface FilterByNameTransformerEditorProps extends TransformerUIProps<FilterFieldsByNameTransformerOptions> {}
......@@ -18,6 +20,7 @@ interface FilterByNameTransformerEditorState {
options: FieldNameInfo[];
selected: string[];
regex?: string;
isRegexValid?: boolean;
}
interface FieldNameInfo {
......@@ -34,6 +37,7 @@ export class FilterByNameTransformerEditor extends React.PureComponent<
include: props.options.include || [],
options: [],
selected: [],
isRegexValid: true,
};
}
......@@ -97,36 +101,69 @@ export class FilterByNameTransformerEditor extends React.PureComponent<
};
onChange = (selected: string[]) => {
const { regex, isRegexValid } = this.state;
let include = selected;
if (regex && isRegexValid) {
include = include.concat([regex]);
}
this.setState({ selected }, () => {
this.props.onChange({
...this.props.options,
include: this.state.regex ? [...selected, this.state.regex] : selected,
include,
});
});
};
onInputBlur = (e: React.FocusEvent<HTMLInputElement>) => {
const { selected, regex } = this.state;
this.props.onChange({
...this.props.options,
include: regex ? [...selected, regex] : selected,
let isRegexValid = true;
try {
if (regex) {
new RegExp(regex);
}
} catch (e) {
isRegexValid = false;
}
if (isRegexValid) {
this.props.onChange({
...this.props.options,
include: regex ? [...selected, regex] : selected,
});
} else {
this.props.onChange({
...this.props.options,
include: selected,
});
}
this.setState({
isRegexValid,
});
};
render() {
const { options, selected } = this.state;
const { options, selected, isRegexValid } = this.state;
return (
<div className="gf-form-inline">
<div className="gf-form gf-form--grow">
<div className="gf-form-label width-8">Field name</div>
<HorizontalGroup spacing="xs">
<Input
placeholder="Regular expression pattern"
value={this.state.regex || ''}
onChange={e => this.setState({ regex: e.currentTarget.value })}
onBlur={this.onInputBlur}
width={25}
/>
<HorizontalGroup spacing="xs" align="flex-start" wrap>
<Field
invalid={!isRegexValid}
error={!isRegexValid ? 'Invalid pattern' : undefined}
className={css`
margin-bottom: 0;
`}
>
<Input
placeholder="Regular expression pattern"
value={this.state.regex || ''}
onChange={e => this.setState({ regex: e.currentTarget.value })}
onBlur={this.onInputBlur}
width={25}
/>
</Field>
{options.map((o, i) => {
const label = `${o.name}${o.count > 1 ? ' (' + o.count + ')' : ''}`;
const isSelected = selected.indexOf(o.name) > -1;
......
packages/grafana-ui/src/components/TransformersUI/FilterByRefIdTransformerEditor.tsx
......@@ -101,7 +101,7 @@ export class FilterByRefIdTransformerEditor extends React.PureComponent<
<div className="gf-form-inline">
<div className="gf-form gf-form--grow">
<div className="gf-form-label width-8">Series refId</div>
<HorizontalGroup spacing="xs">
<HorizontalGroup spacing="xs" align="flex-start" wrap>
{options.map((o, i) => {
const label = `${o.refId}${o.count > 1 ? ' (' + o.count + ')' : ''}`;
const isSelected = selected.indexOf(o.refId) > -1;
......
public/app/core/components/Card/Card.tsx 0 → 100644
import React from 'react';
import { cx } from 'emotion';
export interface CardProps {
logoUrl?: string;
title: string;
description?: string;
actions?: React.ReactNode;
onClick?: () => void;
ariaLabel?: string;
className?: string;
}
export const Card: React.FC<CardProps> = ({ logoUrl, title, description, actions, onClick, ariaLabel, className }) => {
const mainClassName = cx('add-data-source-item', className);
return (
<div className={mainClassName} onClick={onClick} aria-label={ariaLabel}>
{logoUrl && <img className="add-data-source-item-logo" src={logoUrl} />}
<div className="add-data-source-item-text-wrapper">
<span className="add-data-source-item-text">{title}</span>
{description && <span className="add-data-source-item-desc">{description}</span>}
</div>
{actions && <div className="add-data-source-item-actions">{actions}</div>}
</div>
);
};
public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
import React from 'react';
import { Container, CustomScrollbar, ValuePicker } from '@grafana/ui';
import {
Container,
CustomScrollbar,
InfoBox,
ValuePicker,
Button,
useTheme,
VerticalGroup,
stylesFactory,
} from '@grafana/ui';
import {
DataFrame,
DataTransformerConfig,
GrafanaTheme,
SelectableValue,
standardTransformersRegistry,
transformDataFrame,
} from '@grafana/data';
import { TransformationOperationRow } from './TransformationOperationRow';
import { Card, CardProps } from '../../../../core/components/Card/Card';
import { css } from 'emotion';
interface Props {
onChange: (transformations: DataTransformerConfig[]) => void;
......@@ -52,10 +64,10 @@ export class TransformationsEditor extends React.PureComponent<Props> {
return (
<ValuePicker
size="md"
variant="secondary"
label="Add transformation"
options={availableTransformers}
size="lg"
onChange={this.onTransformationAdd}
isFullWidth={false}
/>
......@@ -109,17 +121,54 @@ export class TransformationsEditor extends React.PureComponent<Props> {
};
render() {
const hasTransformationsConfigured = this.props.transformations.length > 0;
return (
<CustomScrollbar autoHeightMin="100%">
<Container padding="md">
<p className="muted">
Transformations allow you to combine, re-order, hide and rename specific parts the the data set before being
visualized.
</p>
{this.renderTransformationEditors()}
{this.renderTransformationSelector()}
{!hasTransformationsConfigured && (
<InfoBox>
<p>
Transformations allow you to combine, re-order, hide and rename specific parts the the data set before
being visualized. Choose one of the transformations below to start with:
</p>
<VerticalGroup>
{standardTransformersRegistry.list().map(t => {
return (
<TransformationCard
title={t.name}
description={t.description}
actions={<Button>Select</Button>}
onClick={() => {
this.onTransformationAdd({ value: t.id });
}}
/>
);
})}
</VerticalGroup>
</InfoBox>
)}
{hasTransformationsConfigured && this.renderTransformationEditors()}
{hasTransformationsConfigured && this.renderTransformationSelector()}
</Container>
</CustomScrollbar>
);
}
}
const TransformationCard: React.FC<CardProps> = props => {
const theme = useTheme();
const styles = getTransformationCardStyles(theme);
return <Card {...props} className={styles.card} />;
};
const getTransformationCardStyles = stylesFactory((theme: GrafanaTheme) => {
return {
card: css`
background: ${theme.colors.bg2};
width: 100%;
&:hover {
background: ${theme.colors.bg3};
}
`,
};
});
public/app/features/datasources/NewDataSourcePage.tsx
import React, { FC, PureComponent } from 'react';
import classNames from 'classnames';
import { connect } from 'react-redux';
import { hot } from 'react-hot-loader';
import { DataSourcePluginMeta, NavModel } from '@grafana/data';
......@@ -12,6 +11,7 @@ import { addDataSource, loadDataSourcePlugins } from './state/actions';
import { getDataSourcePlugins } from './state/selectors';
import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
import { setDataSourceTypeSearchQuery } from './state/reducers';
import { Card } from 'app/core/components/Card/Card';
export interface Props {
navModel: NavModel;
......@@ -120,37 +120,33 @@ const DataSourceTypeCard: FC<DataSourceTypeCardProps> = props => {
// find first plugin info link
const learnMoreLink = plugin.info.links && plugin.info.links.length > 0 ? plugin.info.links[0] : null;
const mainClassName = classNames('add-data-source-item', {
'add-data-source-item--phantom': isPhantom,
});
return (
<div
className={mainClassName}
<Card
title={plugin.name}
description={plugin.info.description}
ariaLabel={e2e.pages.AddDataSource.selectors.dataSourcePlugins(plugin.name)}
logoUrl={plugin.info.logos.small}
actions={
<>
{learnMoreLink && (
<LinkButton
variant="secondary"
href={`${learnMoreLink.url}?utm_source=grafana_add_ds`}
target="_blank"
rel="noopener"
onClick={onLearnMoreClick}
icon="external-link-alt"
>
{learnMoreLink.name}
</LinkButton>
)}
{!isPhantom && <Button>Select</Button>}
</>
}
className={isPhantom && 'add-data-source-item--phantom'}
onClick={onClick}
aria-label={e2e.pages.AddDataSource.selectors.dataSourcePlugins(plugin.name)}
>
<img className="add-data-source-item-logo" src={plugin.info.logos.small} />
<div className="add-data-source-item-text-wrapper">
<span className="add-data-source-item-text">{plugin.name}</span>
{plugin.info.description && <span className="add-data-source-item-desc">{plugin.info.description}</span>}
</div>
<div className="add-data-source-item-actions">
{learnMoreLink && (
<LinkButton
variant="secondary"
href={`${learnMoreLink.url}?utm_source=grafana_add_ds`}
target="_blank"
rel="noopener"
onClick={onLearnMoreClick}
icon="external-link-alt"
>
{learnMoreLink.name}
</LinkButton>
)}
{!isPhantom && <Button>Select</Button>}
</div>
</div>
/>
);
};
......
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