mirror of https://github.com/grafana/grafana
Transformations: Move transformation addition into drawer (#78299)
* Start splitting out code * Use flag * A bit of rocket surgery * Prettify * Cleanup behavior * Work through behaviors * Move empty message from other PR * Import fixes and prettier * Clean things up * Add selector for tests * Cleanups * Working with transformation redesign * Some more tweaks to make sure of correct behavior * Update betterer/eslint exceptions * Localization * Remove unecessary fragments * Spacing and prettier * Update tests for new UI * Update e2e tests * One more e2e test fix * Update selectors * Fix one test and break anotherpull/78504/head^2
Kyle Cunningham
2 years ago
committed by
GitHub
parent
d894f4cc79
commit
b42d652106
@ -0,0 +1,122 @@ |
||||
import { css } from '@emotion/css'; |
||||
import React, { FormEventHandler, KeyboardEventHandler, ReactNode } from 'react'; |
||||
|
||||
import { DocsId, GrafanaTheme2, TransformerRegistryItem } from '@grafana/data'; |
||||
import { selectors } from '@grafana/e2e-selectors'; |
||||
import { Card, Container, VerticalGroup, Alert, Input, useStyles2 } from '@grafana/ui'; |
||||
import { LocalStorageValueProvider } from 'app/core/components/LocalStorageValueProvider'; |
||||
import { getDocsLink } from 'app/core/utils/docsLinks'; |
||||
import { PluginStateInfo } from 'app/features/plugins/components/PluginStateInfo'; |
||||
|
||||
const LOCAL_STORAGE_KEY = 'dashboard.components.TransformationEditor.featureInfoBox.isDismissed'; |
||||
|
||||
interface TransformationPickerProps { |
||||
noTransforms: boolean; |
||||
search: string; |
||||
onSearchChange: FormEventHandler<HTMLInputElement>; |
||||
onSearchKeyDown: KeyboardEventHandler<HTMLInputElement>; |
||||
onTransformationAdd: Function; |
||||
suffix: ReactNode; |
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
xforms: Array<TransformerRegistryItem<any>>; |
||||
} |
||||
|
||||
export function TransformationPicker(props: TransformationPickerProps) { |
||||
const { noTransforms, search, xforms, onSearchChange, onSearchKeyDown, onTransformationAdd, suffix } = props; |
||||
|
||||
return ( |
||||
<VerticalGroup> |
||||
{noTransforms && ( |
||||
<Container grow={1}> |
||||
<LocalStorageValueProvider<boolean> storageKey={LOCAL_STORAGE_KEY} defaultValue={false}> |
||||
{(isDismissed, onDismiss) => { |
||||
if (isDismissed) { |
||||
return null; |
||||
} |
||||
|
||||
return ( |
||||
<Alert |
||||
title="Transformations" |
||||
severity="info" |
||||
onRemove={() => { |
||||
onDismiss(true); |
||||
}} |
||||
> |
||||
<p> |
||||
Transformations allow you to join, calculate, re-order, hide, and rename your query results before |
||||
they are visualized. <br /> |
||||
Many transforms are not suitable if you're using the Graph visualization, as it currently only |
||||
supports time series data. <br /> |
||||
It can help to switch to the Table visualization to understand what a transformation is doing.{' '} |
||||
</p> |
||||
<a |
||||
href={getDocsLink(DocsId.Transformations)} |
||||
className="external-link" |
||||
target="_blank" |
||||
rel="noreferrer" |
||||
> |
||||
Read more |
||||
</a> |
||||
</Alert> |
||||
); |
||||
}} |
||||
</LocalStorageValueProvider> |
||||
</Container> |
||||
)} |
||||
<Input |
||||
data-testid={selectors.components.Transforms.searchInput} |
||||
value={search ?? ''} |
||||
autoFocus={!noTransforms} |
||||
placeholder="Search for transformation" |
||||
onChange={onSearchChange} |
||||
onKeyDown={onSearchKeyDown} |
||||
suffix={suffix} |
||||
/> |
||||
{xforms.map((t) => { |
||||
return ( |
||||
<TransformationCard |
||||
key={t.name} |
||||
transform={t} |
||||
onClick={() => { |
||||
onTransformationAdd({ value: t.id }); |
||||
}} |
||||
/> |
||||
); |
||||
})} |
||||
</VerticalGroup> |
||||
); |
||||
} |
||||
|
||||
interface TransformationCardProps { |
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
transform: TransformerRegistryItem<any>; |
||||
onClick: () => void; |
||||
} |
||||
|
||||
function TransformationCard({ transform, onClick }: TransformationCardProps) { |
||||
const styles = useStyles2(getStyles); |
||||
return ( |
||||
<Card |
||||
className={styles.card} |
||||
data-testid={selectors.components.TransformTab.newTransform(transform.name)} |
||||
onClick={onClick} |
||||
> |
||||
<Card.Heading>{transform.name}</Card.Heading> |
||||
<Card.Description>{transform.description}</Card.Description> |
||||
{transform.state && ( |
||||
<Card.Tags> |
||||
<PluginStateInfo state={transform.state} /> |
||||
</Card.Tags> |
||||
)} |
||||
</Card> |
||||
); |
||||
} |
||||
|
||||
function getStyles(theme: GrafanaTheme2) { |
||||
return { |
||||
card: css({ |
||||
margin: '0', |
||||
padding: `${theme.spacing(1)}`, |
||||
}), |
||||
}; |
||||
} |
||||
@ -0,0 +1,296 @@ |
||||
import { cx, css } from '@emotion/css'; |
||||
import React, { FormEventHandler, KeyboardEventHandler, ReactNode } from 'react'; |
||||
|
||||
import { |
||||
DataFrame, |
||||
DataTransformerID, |
||||
TransformerRegistryItem, |
||||
TransformationApplicabilityLevels, |
||||
GrafanaTheme2, |
||||
standardTransformersRegistry, |
||||
} from '@grafana/data'; |
||||
import { selectors } from '@grafana/e2e-selectors'; |
||||
import { Card, Drawer, FilterPill, IconButton, Input, Switch, useStyles2 } from '@grafana/ui'; |
||||
import config from 'app/core/config'; |
||||
import { PluginStateInfo } from 'app/features/plugins/components/PluginStateInfo'; |
||||
import { categoriesLabels } from 'app/features/transformers/utils'; |
||||
|
||||
import { FilterCategory } from './TransformationsEditor'; |
||||
|
||||
const viewAllLabel = 'View all'; |
||||
const VIEW_ALL_VALUE = 'viewAll'; |
||||
const filterCategoriesLabels: Array<[FilterCategory, string]> = [ |
||||
[VIEW_ALL_VALUE, viewAllLabel], |
||||
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
|
||||
...(Object.entries(categoriesLabels) as Array<[FilterCategory, string]>), |
||||
]; |
||||
|
||||
interface TransformationPickerNgProps { |
||||
onTransformationAdd: Function; |
||||
setState: Function; |
||||
onSearchChange: FormEventHandler<HTMLInputElement>; |
||||
onSearchKeyDown: KeyboardEventHandler<HTMLInputElement>; |
||||
noTransforms: boolean; |
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
xforms: Array<TransformerRegistryItem<any>>; |
||||
search: string; |
||||
suffix: ReactNode; |
||||
data: DataFrame[]; |
||||
showIllustrations?: boolean; |
||||
selectedFilter?: FilterCategory; |
||||
} |
||||
|
||||
export function TransformationPickerNg(props: TransformationPickerNgProps) { |
||||
const styles = useStyles2(getTransformationPickerStyles); |
||||
const { |
||||
noTransforms, |
||||
suffix, |
||||
setState, |
||||
xforms, |
||||
search, |
||||
onSearchChange, |
||||
onSearchKeyDown, |
||||
showIllustrations, |
||||
onTransformationAdd, |
||||
selectedFilter, |
||||
data, |
||||
} = props; |
||||
|
||||
return ( |
||||
<Drawer size="md" onClose={() => setState({ showPicker: false })} title="Add another transformation"> |
||||
<div className={styles.searchWrapper}> |
||||
<Input |
||||
data-testid={selectors.components.Transforms.searchInput} |
||||
className={styles.searchInput} |
||||
value={search ?? ''} |
||||
autoFocus={!noTransforms} |
||||
placeholder="Search for transformation" |
||||
onChange={onSearchChange} |
||||
onKeyDown={onSearchKeyDown} |
||||
suffix={suffix} |
||||
/> |
||||
<div className={styles.showImages}> |
||||
<span className={styles.illustationSwitchLabel}>Show images</span>{' '} |
||||
<Switch value={showIllustrations} onChange={() => setState({ showIllustrations: !showIllustrations })} /> |
||||
</div> |
||||
</div> |
||||
|
||||
<div className={styles.filterWrapper}> |
||||
{filterCategoriesLabels.map(([slug, label]) => { |
||||
return ( |
||||
<FilterPill |
||||
key={slug} |
||||
onClick={() => setState({ selectedFilter: slug })} |
||||
label={label} |
||||
selected={selectedFilter === slug} |
||||
/> |
||||
); |
||||
})} |
||||
</div> |
||||
|
||||
<TransformationsGrid |
||||
showIllustrations={showIllustrations} |
||||
transformations={xforms} |
||||
data={data} |
||||
onClick={(id) => { |
||||
onTransformationAdd({ value: id }); |
||||
}} |
||||
/> |
||||
</Drawer> |
||||
); |
||||
} |
||||
|
||||
function getTransformationPickerStyles(theme: GrafanaTheme2) { |
||||
return { |
||||
showImages: css({ |
||||
flexBasis: '0', |
||||
display: 'flex', |
||||
gap: '8px', |
||||
alignItems: 'center', |
||||
}), |
||||
pickerInformationLine: css({ |
||||
fontSize: '16px', |
||||
marginBottom: `${theme.spacing(2)}`, |
||||
}), |
||||
pickerInformationLineHighlight: css({ |
||||
verticalAlign: 'middle', |
||||
}), |
||||
searchWrapper: css({ |
||||
display: 'flex', |
||||
flexWrap: 'wrap', |
||||
columnGap: '27px', |
||||
rowGap: '16px', |
||||
width: '100%', |
||||
}), |
||||
searchInput: css({ |
||||
flexGrow: '1', |
||||
width: 'initial', |
||||
}), |
||||
illustationSwitchLabel: css({ |
||||
whiteSpace: 'nowrap', |
||||
}), |
||||
filterWrapper: css({ |
||||
padding: `${theme.spacing(1)} 0`, |
||||
display: 'flex', |
||||
flexWrap: 'wrap', |
||||
rowGap: `${theme.spacing(1)}`, |
||||
columnGap: `${theme.spacing(0.5)}`, |
||||
}), |
||||
}; |
||||
} |
||||
|
||||
interface TransformationsGridProps { |
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
transformations: Array<TransformerRegistryItem<any>>; |
||||
showIllustrations?: boolean; |
||||
onClick: (id: string) => void; |
||||
data: DataFrame[]; |
||||
} |
||||
|
||||
function TransformationsGrid({ showIllustrations, transformations, onClick, data }: TransformationsGridProps) { |
||||
const styles = useStyles2(getTransformationGridStyles); |
||||
|
||||
return ( |
||||
<div className={styles.grid}> |
||||
{transformations.map((transform) => { |
||||
// Check to see if the transform
|
||||
// is applicable to the given data
|
||||
let applicabilityScore = TransformationApplicabilityLevels.Applicable; |
||||
if (transform.transformation.isApplicable !== undefined) { |
||||
applicabilityScore = transform.transformation.isApplicable(data); |
||||
} |
||||
const isApplicable = applicabilityScore > 0; |
||||
|
||||
let applicabilityDescription = null; |
||||
if (transform.transformation.isApplicableDescription !== undefined) { |
||||
if (typeof transform.transformation.isApplicableDescription === 'function') { |
||||
applicabilityDescription = transform.transformation.isApplicableDescription(data); |
||||
} else { |
||||
applicabilityDescription = transform.transformation.isApplicableDescription; |
||||
} |
||||
} |
||||
|
||||
// Add disabled styles to disabled
|
||||
let cardClasses = styles.newCard; |
||||
if (!isApplicable) { |
||||
cardClasses = cx(styles.newCard, styles.cardDisabled); |
||||
} |
||||
|
||||
return ( |
||||
<Card |
||||
className={cardClasses} |
||||
data-testid={selectors.components.TransformTab.newTransform(transform.name)} |
||||
onClick={() => onClick(transform.id)} |
||||
key={transform.id} |
||||
> |
||||
<Card.Heading className={styles.heading}> |
||||
<span>{transform.name}</span> |
||||
<span className={styles.pluginStateInfoWrapper}> |
||||
<PluginStateInfo state={transform.state} /> |
||||
</span> |
||||
</Card.Heading> |
||||
<Card.Description className={styles.description}> |
||||
<span>{getTransformationsRedesignDescriptions(transform.id)}</span> |
||||
{showIllustrations && ( |
||||
<span> |
||||
<img className={styles.image} src={getImagePath(transform.id, !isApplicable)} alt={transform.name} /> |
||||
</span> |
||||
)} |
||||
{!isApplicable && applicabilityDescription !== null && ( |
||||
<IconButton |
||||
className={styles.cardApplicableInfo} |
||||
name="info-circle" |
||||
tooltip={applicabilityDescription} |
||||
/> |
||||
)} |
||||
</Card.Description> |
||||
</Card> |
||||
); |
||||
})} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
function getTransformationGridStyles(theme: GrafanaTheme2) { |
||||
return { |
||||
// eslint-disable-next-line @emotion/syntax-preference
|
||||
heading: css` |
||||
font-weight: 400, |
||||
> button: { |
||||
width: '100%', |
||||
display: 'flex', |
||||
justify-content: 'space-between', |
||||
align-items: 'center', |
||||
flex-wrap: 'no-wrap', |
||||
},`,
|
||||
description: css({ |
||||
fontSize: '12px', |
||||
display: 'flex', |
||||
flexDirection: 'column', |
||||
justifyContent: 'space-between', |
||||
}), |
||||
image: css({ |
||||
display: 'block', |
||||
maxEidth: '100%`', |
||||
marginTop: `${theme.spacing(2)}`, |
||||
}), |
||||
grid: css({ |
||||
display: 'grid', |
||||
gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', |
||||
gridAutoRows: '1fr', |
||||
gap: `${theme.spacing(2)} ${theme.spacing(1)}`, |
||||
width: '100%', |
||||
}), |
||||
cardDisabled: css({ |
||||
backgroundColor: 'rgb(204, 204, 220, 0.045)', |
||||
color: `${theme.colors.text.disabled} !important`, |
||||
}), |
||||
cardApplicableInfo: css({ |
||||
position: 'absolute', |
||||
bottom: `${theme.spacing(1)}`, |
||||
right: `${theme.spacing(1)}`, |
||||
}), |
||||
newCard: css({ |
||||
gridTemplateRows: 'min-content 0 1fr 0', |
||||
}), |
||||
pluginStateInfoWrapper: css({ |
||||
marginLeft: '5px', |
||||
}), |
||||
}; |
||||
} |
||||
|
||||
const getImagePath = (id: string, disabled: boolean) => { |
||||
let folder = null; |
||||
if (!disabled) { |
||||
folder = config.theme2.isDark ? 'dark' : 'light'; |
||||
} else { |
||||
folder = 'disabled'; |
||||
} |
||||
|
||||
return `public/img/transformations/${folder}/${id}.svg`; |
||||
}; |
||||
|
||||
const TransformationDescriptionOverrides: { [key: string]: string } = { |
||||
[DataTransformerID.concatenate]: 'Combine all fields into a single frame.', |
||||
[DataTransformerID.configFromData]: 'Set unit, min, max and more.', |
||||
[DataTransformerID.fieldLookup]: 'Use a field value to lookup countries, states, or airports.', |
||||
[DataTransformerID.filterFieldsByName]: 'Remove parts of the query results using a regex pattern.', |
||||
[DataTransformerID.filterByRefId]: 'Remove rows from the data based on origin query', |
||||
[DataTransformerID.filterByValue]: 'Remove rows from the query results using user-defined filters.', |
||||
[DataTransformerID.groupBy]: 'Group data by a field value and create aggregate data.', |
||||
[DataTransformerID.groupingToMatrix]: 'Summarize and reorganize data based on three fields.', |
||||
[DataTransformerID.joinByField]: 'Combine rows from 2+ tables, based on a related field.', |
||||
[DataTransformerID.labelsToFields]: 'Group series by time and return labels or tags as fields.', |
||||
[DataTransformerID.merge]: 'Merge multiple series. Values will be combined into one row.', |
||||
[DataTransformerID.organize]: 'Re-order, hide, or rename fields.', |
||||
[DataTransformerID.partitionByValues]: 'Split a one-frame dataset into multiple series.', |
||||
[DataTransformerID.prepareTimeSeries]: 'Stretch data frames from the wide format into the long format.', |
||||
[DataTransformerID.reduce]: 'Reduce all rows or data points to a single value (ex. max, mean).', |
||||
[DataTransformerID.renameByRegex]: |
||||
'Rename parts of the query results using a regular expression and replacement pattern.', |
||||
[DataTransformerID.seriesToRows]: 'Merge multiple series. Return time, metric and values as a row.', |
||||
}; |
||||
|
||||
const getTransformationsRedesignDescriptions = (id: string): string => { |
||||
return TransformationDescriptionOverrides[id] || standardTransformersRegistry.getIfExists(id)?.description || ''; |
||||
}; |
||||
Loading…
Reference in new issue