IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Transforms: Adds beta notice and updates transform descriptions (#24158)

Browse Source 
* Transforms: Adds beta notice and updates transform descriptions

* Rename organize fields

* Webpack - enable images import

* Introduce FeatureState type

* Alow Container component grow/shrink config

* Enable svg import in main app

* Jest + webpack for svgs

* InfoBox refactor (+ added feature info box), Badge component introduced

* Update packages/grafana-ui/src/components/TransformersUI/FilterByNameTransformerEditor.tsx

Co-authored-by: Carl Bergquist <carl@grafana.com>

* Minor fixes

* Update packages/grafana-ui/src/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx

Co-authored-by: Carl Bergquist <carl@grafana.com>

* Update packages/grafana-ui/src/components/TransformersUI/SeriesToFieldsTransformerEditor.tsx

Co-authored-by: Carl Bergquist <carl@grafana.com>

* fix typo

* Build storybook fixed

* Fix padding

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>
Co-authored-by: Carl Bergquist <carl@grafana.com>
This commit is contained in:
Torkel Ödegaard
2020-05-04 15:05:31 +02:00
committed by GitHub
parent 0fe9e7e242
commit 92a16d2e10
31 changed files with 585 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
View File

@@ -1,8 +1,18 @@
import React from 'react';
import { Button, Container, CustomScrollbar, stylesFactory, useTheme, ValuePicker, VerticalGroup } from '@grafana/ui';
import {
Button,
Container,
CustomScrollbar,
FeatureInfoBox,
stylesFactory,
useTheme,
ValuePicker,
VerticalGroup,
} from '@grafana/ui';
import {
DataFrame,
DataTransformerConfig,
FeatureState,
GrafanaTheme,
SelectableValue,
standardTransformersRegistry,
@@ -114,13 +124,23 @@ export class TransformationsEditor extends React.PureComponent<Props> {
renderNoAddedTransformsState() {
return (
<>
<p className="muted">
Transformations allow you to combine, re-order, hide and rename specific parts the the data set before being
visualized. <br />
Choose one of the transformations below to start with:
</p>
<VerticalGroup spacing={'lg'}>
<Container grow={1}>
<FeatureInfoBox
title="Transformations"
featureState={FeatureState.beta}
// url={getDocsLink(DocsId.Transformations)}
>
<p>
Transformations allow you to join, calculate, re-order, hide and rename your query results before being
visualized. <br />
Many transforms are not suitable if your using the Graph visualisation as it currently only supports time
series. <br />
It can help to switch to Table visualisation to understand what a transformation is doing. <br />
</p>
<p>Select one of the transformations below to start.</p>
</FeatureInfoBox>
</Container>
<VerticalGroup>
{standardTransformersRegistry.list().map(t => {
return (
@@ -136,7 +156,7 @@ export class TransformationsEditor extends React.PureComponent<Props> {
);
})}
</VerticalGroup>
</>
</VerticalGroup>
);
}
@@ -170,6 +190,11 @@ const getTransformationCardStyles = stylesFactory((theme: GrafanaTheme) => {
border: none;
padding: ${theme.spacing.sm};
// hack because these cards use classes from a very different card for some reason
.add-data-source-item-text {
font-size: ${theme.typography.size.md};
}
&:hover {
background: ${theme.colors.bg3};
box-shadow: none;