-
-
+ return (
+
+
+
+
+
+
{title}
+ {children &&
{children}
}
+
+ {/* If onRemove is specified, giving preference to onRemove */}
+ {onRemove ? (
+
+ ) : onButtonClick ? (
+
+ ) : null}
-
-
{title}
- {children &&
{children}
}
-
- {/* If onRemove is specified, giving preference to onRemove */}
- {onRemove ? (
-
- ) : onButtonClick ? (
-
- ) : null}
-
- );
-};
+ );
+ }
+);
+
+Alert.displayName = 'Alert';
const getStyles = (theme: GrafanaTheme, severity: AlertVariant, outline: boolean) => {
const { white } = theme.palette;
@@ -107,6 +103,8 @@ const getStyles = (theme: GrafanaTheme, severity: AlertVariant, outline: boolean
body: css`
flex-grow: 1;
margin: 0 ${theme.spacing.md} 0 0;
+ overflow-wrap: break-word;
+ word-break: break-word;
a {
color: ${white};
diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
index f051c6e862d..d67f110b53d 100644
--- a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
+++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
@@ -14,6 +14,7 @@ import {
getFieldColorMode,
getColorForTheme,
FALLBACK_COLOR,
+ TextDisplayOptions,
} from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
@@ -42,6 +43,7 @@ export interface Props extends Themeable {
display?: DisplayProcessor;
value: DisplayValue;
orientation: VizOrientation;
+ text?: TextDisplayOptions;
itemSpacing?: number;
lcdCellWidth?: number;
displayMode: BarGaugeDisplayMode;
@@ -172,7 +174,7 @@ export class BarGauge extends PureComponent
{
}
renderRetroBars(): ReactNode {
- const { field, value, itemSpacing, alignmentFactors, orientation, lcdCellWidth } = this.props;
+ const { field, value, itemSpacing, alignmentFactors, orientation, lcdCellWidth, text } = this.props;
const {
valueHeight,
valueWidth,
@@ -193,7 +195,7 @@ export class BarGauge extends PureComponent {
const valueColor = getValueColor(this.props);
const valueToBaseSizeOn = alignmentFactors ? alignmentFactors : value;
- const valueStyles = getValueStyles(valueToBaseSizeOn, valueColor, valueWidth, valueHeight, orientation);
+ const valueStyles = getValueStyles(valueToBaseSizeOn, valueColor, valueWidth, valueHeight, orientation, text);
const containerStyles: CSSProperties = {
width: `${wrapperWidth}px`,
@@ -270,7 +272,7 @@ function isVertical(orientation: VizOrientation) {
}
function calculateTitleDimensions(props: Props): TitleDimensions {
- const { height, width, alignmentFactors, orientation } = props;
+ const { height, width, alignmentFactors, orientation, text } = props;
const title = alignmentFactors ? alignmentFactors.title : props.value.title;
if (!title) {
@@ -278,16 +280,26 @@ function calculateTitleDimensions(props: Props): TitleDimensions {
}
if (isVertical(orientation)) {
+ const fontSize = text?.titleSize ?? 14;
return {
- fontSize: 14,
+ fontSize: fontSize,
width: width,
- height: 14 * TITLE_LINE_HEIGHT,
+ height: fontSize * TITLE_LINE_HEIGHT,
placement: 'below',
};
}
// if height above 40 put text to above bar
if (height > 40) {
+ if (text?.titleSize) {
+ return {
+ fontSize: text?.titleSize,
+ width: 0,
+ height: text.titleSize * TITLE_LINE_HEIGHT,
+ placement: 'above',
+ };
+ }
+
const maxTitleHeightRatio = 0.45;
const titleHeight = Math.max(Math.min(height * maxTitleHeightRatio, MAX_VALUE_HEIGHT), 17);
@@ -306,7 +318,7 @@ function calculateTitleDimensions(props: Props): TitleDimensions {
const textSize = measureText(title, titleFontSize);
return {
- fontSize: titleFontSize,
+ fontSize: text?.titleSize ?? titleFontSize,
height: 0,
width: textSize.width + 15,
placement: 'left',
@@ -370,7 +382,7 @@ interface BarAndValueDimensions {
}
function calculateBarAndValueDimensions(props: Props): BarAndValueDimensions {
- const { height, width, orientation } = props;
+ const { height, width, orientation, text } = props;
const titleDim = calculateTitleDimensions(props);
let maxBarHeight = 0;
@@ -381,14 +393,23 @@ function calculateBarAndValueDimensions(props: Props): BarAndValueDimensions {
let wrapperHeight = 0;
if (isVertical(orientation)) {
- valueHeight = Math.min(Math.max(height * 0.1, MIN_VALUE_HEIGHT), MAX_VALUE_HEIGHT);
+ if (text?.valueSize) {
+ valueHeight = text.valueSize * VALUE_LINE_HEIGHT;
+ } else {
+ valueHeight = Math.min(Math.max(height * 0.1, MIN_VALUE_HEIGHT), MAX_VALUE_HEIGHT);
+ }
valueWidth = width;
maxBarHeight = height - (titleDim.height + valueHeight);
maxBarWidth = width;
wrapperWidth = width;
wrapperHeight = height - titleDim.height;
} else {
- valueHeight = height - titleDim.height;
+ if (text?.valueSize) {
+ valueHeight = text.valueSize * VALUE_LINE_HEIGHT;
+ } else {
+ valueHeight = height - titleDim.height;
+ }
+
valueWidth = Math.max(Math.min(width * 0.2, MAX_VALUE_WIDTH), MIN_VALUE_WIDTH);
maxBarHeight = height - titleDim.height;
maxBarWidth = width - valueWidth - titleDim.width;
@@ -420,14 +441,14 @@ export function getValuePercent(value: number, minValue: number, maxValue: numbe
* Only exported to for unit test
*/
export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles {
- const { displayMode, field, value, alignmentFactors, orientation, theme } = props;
+ const { displayMode, field, value, alignmentFactors, orientation, theme, text } = props;
const { valueWidth, valueHeight, maxBarHeight, maxBarWidth } = calculateBarAndValueDimensions(props);
const valuePercent = getValuePercent(value.numeric, field.min!, field.max!);
const valueColor = getValueColor(props);
const valueToBaseSizeOn = alignmentFactors ? alignmentFactors : value;
- const valueStyles = getValueStyles(valueToBaseSizeOn, valueColor, valueWidth, valueHeight, orientation);
+ const valueStyles = getValueStyles(valueToBaseSizeOn, valueColor, valueWidth, valueHeight, orientation, text);
const isBasic = displayMode === 'basic';
const wrapperStyles: CSSProperties = {
@@ -581,7 +602,8 @@ function getValueStyles(
color: string,
width: number,
height: number,
- orientation: VizOrientation
+ orientation: VizOrientation,
+ text?: TextDisplayOptions
): CSSProperties {
const styles: CSSProperties = {
color,
@@ -597,15 +619,12 @@ function getValueStyles(
const formattedValueString = formattedValueToString(value);
if (isVertical(orientation)) {
- styles.fontSize = calculateFontSize(formattedValueString, textWidth, height, VALUE_LINE_HEIGHT);
+ styles.fontSize = text?.valueSize ?? calculateFontSize(formattedValueString, textWidth, height, VALUE_LINE_HEIGHT);
styles.justifyContent = `center`;
} else {
- styles.fontSize = calculateFontSize(
- formattedValueString,
- textWidth - VALUE_LEFT_PADDING * 2,
- height,
- VALUE_LINE_HEIGHT
- );
+ styles.fontSize =
+ text?.valueSize ??
+ calculateFontSize(formattedValueString, textWidth - VALUE_LEFT_PADDING * 2, height, VALUE_LINE_HEIGHT);
styles.justifyContent = `flex-end`;
styles.paddingLeft = `${VALUE_LEFT_PADDING}px`;
styles.paddingRight = `${VALUE_LEFT_PADDING}px`;
diff --git a/packages/grafana-ui/src/components/BigValue/BigValue.tsx b/packages/grafana-ui/src/components/BigValue/BigValue.tsx
index 41fdc774a3b..ade30ba069c 100644
--- a/packages/grafana-ui/src/components/BigValue/BigValue.tsx
+++ b/packages/grafana-ui/src/components/BigValue/BigValue.tsx
@@ -1,6 +1,6 @@
// Library
import React, { PureComponent } from 'react';
-import { DisplayValue, GraphSeriesValue, DisplayValueAlignmentFactors } from '@grafana/data';
+import { DisplayValue, GraphSeriesValue, DisplayValueAlignmentFactors, TextDisplayOptions } from '@grafana/data';
// Types
import { Themeable } from '../../types';
@@ -64,6 +64,8 @@ export interface Props extends Themeable {
justifyMode?: BigValueJustifyMode;
/** Factors that should influence the positioning of the text */
alignmentFactors?: DisplayValueAlignmentFactors;
+ /** Explicit font size control */
+ text?: TextDisplayOptions;
/** Specify which text should be visible in the BigValue */
textMode?: BigValueTextMode;
diff --git a/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx b/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
index 8ec540bee55..7e1e7bbbf42 100644
--- a/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
+++ b/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
@@ -29,7 +29,7 @@ export abstract class BigValueLayout {
textValues: BigValueTextValues;
constructor(private props: Props) {
- const { width, height, value, theme } = props;
+ const { width, height, value, theme, text } = props;
this.valueColor = getColorForTheme(value.color || 'green', theme);
this.panelPadding = height > 100 ? 12 : 8;
@@ -43,6 +43,18 @@ export abstract class BigValueLayout {
this.chartWidth = 0;
this.maxTextWidth = width - this.panelPadding * 2;
this.maxTextHeight = height - this.panelPadding * 2;
+
+ // Explicit font sizing
+ if (text) {
+ if (text.titleSize) {
+ this.titleFontSize = text.titleSize;
+ this.titleToAlignTo = undefined;
+ }
+ if (text.valueSize) {
+ this.valueFontSize = text.valueSize;
+ this.valueToAlignTo = '';
+ }
+ }
}
getTitleStyles(): CSSProperties {
@@ -235,9 +247,9 @@ export class WideNoChartLayout extends BigValueLayout {
constructor(props: Props) {
super(props);
- const valueWidthPercent = 0.3;
+ const valueWidthPercent = this.titleToAlignTo?.length ? 0.3 : 1.0;
- if (this.titleToAlignTo && this.titleToAlignTo.length > 0) {
+ if (this.valueToAlignTo.length) {
// initial value size
this.valueFontSize = calculateFontSize(
this.valueToAlignTo,
@@ -245,7 +257,9 @@ export class WideNoChartLayout extends BigValueLayout {
this.maxTextHeight,
LINE_HEIGHT
);
+ }
+ if (this.titleToAlignTo?.length) {
// How big can we make the title and still have it fit
this.titleFontSize = calculateFontSize(
this.titleToAlignTo,
@@ -257,9 +271,6 @@ export class WideNoChartLayout extends BigValueLayout {
// make sure it's a bit smaller than valueFontSize
this.titleFontSize = Math.min(this.valueFontSize * 0.7, this.titleFontSize);
- } else {
- // if no title wide
- this.valueFontSize = calculateFontSize(this.valueToAlignTo, this.maxTextWidth, this.maxTextHeight, LINE_HEIGHT);
}
}
@@ -292,6 +303,7 @@ export class WideWithChartLayout extends BigValueLayout {
super(props);
const { width, height } = props;
+
const chartHeightPercent = 0.5;
const titleWidthPercent = 0.6;
const valueWidthPercent = 1 - titleWidthPercent;
@@ -300,7 +312,7 @@ export class WideWithChartLayout extends BigValueLayout {
this.chartWidth = width;
this.chartHeight = height * chartHeightPercent;
- if (this.titleToAlignTo && this.titleToAlignTo.length > 0) {
+ if (this.titleToAlignTo?.length) {
this.titleFontSize = calculateFontSize(
this.titleToAlignTo,
this.maxTextWidth * titleWidthPercent,
@@ -310,12 +322,14 @@ export class WideWithChartLayout extends BigValueLayout {
);
}
- this.valueFontSize = calculateFontSize(
- this.valueToAlignTo,
- this.maxTextWidth * valueWidthPercent,
- this.maxTextHeight * chartHeightPercent,
- LINE_HEIGHT
- );
+ if (this.valueToAlignTo.length) {
+ this.valueFontSize = calculateFontSize(
+ this.valueToAlignTo,
+ this.maxTextWidth * valueWidthPercent,
+ this.maxTextHeight * chartHeightPercent,
+ LINE_HEIGHT
+ );
+ }
}
getValueAndTitleContainerStyles() {
@@ -350,7 +364,7 @@ export class StackedWithChartLayout extends BigValueLayout {
this.chartHeight = height * chartHeightPercent;
this.chartWidth = width;
- if (this.titleToAlignTo && this.titleToAlignTo.length > 0) {
+ if (this.titleToAlignTo?.length) {
this.titleFontSize = calculateFontSize(
this.titleToAlignTo,
this.maxTextWidth,
@@ -358,19 +372,22 @@ export class StackedWithChartLayout extends BigValueLayout {
LINE_HEIGHT,
MAX_TITLE_SIZE
);
+ }
+ titleHeight = this.titleFontSize * LINE_HEIGHT;
- titleHeight = this.titleFontSize * LINE_HEIGHT;
+ if (this.valueToAlignTo.length) {
+ this.valueFontSize = calculateFontSize(
+ this.valueToAlignTo,
+ this.maxTextWidth,
+ this.maxTextHeight - this.chartHeight - titleHeight,
+ LINE_HEIGHT
+ );
}
- this.valueFontSize = calculateFontSize(
- this.valueToAlignTo,
- this.maxTextWidth,
- this.maxTextHeight - this.chartHeight - titleHeight,
- LINE_HEIGHT
- );
-
// make title fontsize it's a bit smaller than valueFontSize
- this.titleFontSize = Math.min(this.valueFontSize * 0.7, this.titleFontSize);
+ if (this.titleToAlignTo?.length) {
+ this.titleFontSize = Math.min(this.valueFontSize * 0.7, this.titleFontSize);
+ }
// make chart take up unused space
this.chartHeight = height - this.titleFontSize * LINE_HEIGHT - this.valueFontSize * LINE_HEIGHT;
@@ -398,7 +415,7 @@ export class StackedWithNoChartLayout extends BigValueLayout {
const titleHeightPercent = 0.15;
let titleHeight = 0;
- if (this.titleToAlignTo && this.titleToAlignTo.length > 0) {
+ if (this.titleToAlignTo?.length) {
this.titleFontSize = calculateFontSize(
this.titleToAlignTo,
this.maxTextWidth,
@@ -410,12 +427,14 @@ export class StackedWithNoChartLayout extends BigValueLayout {
titleHeight = this.titleFontSize * LINE_HEIGHT;
}
- this.valueFontSize = calculateFontSize(
- this.valueToAlignTo,
- this.maxTextWidth,
- this.maxTextHeight - titleHeight,
- LINE_HEIGHT
- );
+ if (this.valueToAlignTo.length) {
+ this.valueFontSize = calculateFontSize(
+ this.valueToAlignTo,
+ this.maxTextWidth,
+ this.maxTextHeight - titleHeight,
+ LINE_HEIGHT
+ );
+ }
// make title fontsize it's a bit smaller than valueFontSize
this.titleFontSize = Math.min(this.valueFontSize * 0.7, this.titleFontSize);
diff --git a/packages/grafana-ui/src/components/Button/Button.story.tsx b/packages/grafana-ui/src/components/Button/Button.story.tsx
index 16612418b99..c73414e90a5 100644
--- a/packages/grafana-ui/src/components/Button/Button.story.tsx
+++ b/packages/grafana-ui/src/components/Button/Button.story.tsx
@@ -20,17 +20,13 @@ export default {
docs: {
page: mdx,
},
+ knobs: {
+ disabled: true,
+ },
},
};
-export const Simple: Story = ({ disabled, icon, children, size, variant }) => {
- return (
-
- );
-};
-
+export const Simple: Story = ({ children, ...args }) => ;
Simple.args = {
variant: 'primary',
size: 'md',
diff --git a/packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx b/packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx
index 227058a4530..e976629d1c6 100644
--- a/packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx
+++ b/packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx
@@ -1,5 +1,4 @@
-import { PureComponent } from 'react';
-import ReactDOM from 'react-dom';
+import React, { PureComponent, createRef } from 'react';
export interface Props {
/**
@@ -28,6 +27,7 @@ export class ClickOutsideWrapper extends PureComponent {
parent: window,
useCapture: false,
};
+ myRef = createRef();
state = {
hasEventListener: false,
};
@@ -48,7 +48,7 @@ export class ClickOutsideWrapper extends PureComponent {
}
onOutsideClick = (event: any) => {
- const domNode = ReactDOM.findDOMNode(this) as Element;
+ const domNode = this.myRef.current;
if (!domNode || !domNode.contains(event.target)) {
this.props.onClick();
@@ -56,6 +56,6 @@ export class ClickOutsideWrapper extends PureComponent {
};
render() {
- return this.props.children;
+ return {this.props.children}
;
}
}
diff --git a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
index 91c59ffb417..26e3f64fdee 100644
--- a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
@@ -19,20 +19,22 @@ export const SeriesColorPickerPopover: FunctionComponent (
- {
- if (onToggleAxis) {
- onToggleAxis();
- }
- }}
- />
- ),
+ tabComponent() {
+ return (
+ {
+ if (onToggleAxis) {
+ onToggleAxis();
+ }
+ }}
+ />
+ );
+ },
},
}}
/>
diff --git a/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx b/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx
index bd22d22b6ad..cc76477cd66 100644
--- a/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx
@@ -13,6 +13,7 @@ export interface SpectrumPaletteProps extends Themeable {
onChange: (color: string) => void;
}
+// eslint-disable-next-line react/display-name
const renderPointer = (theme: GrafanaTheme) => (props: SpectrumPalettePointerProps) => (
);
diff --git a/packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx b/packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx
index 6079ac5d3a6..7a584f08f1e 100644
--- a/packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx
+++ b/packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx
@@ -191,6 +191,7 @@ const ContextMenuItemComponent: React.FC = React.memo(
);
}
);
+ContextMenuItemComponent.displayName = 'ContextMenuItemComponent';
interface ContextMenuGroupProps {
group: ContextMenuGroup;
diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx
index 821cde4c7ce..fa696622a1e 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx
@@ -6,7 +6,7 @@ import { SelectionReference } from './SelectionReference';
import { Portal, getFormStyles } from '../index';
// @ts-ignore
-import Prism from 'prismjs';
+import Prism, { Grammar, LanguageMap } from 'prismjs';
import { Editor } from '@grafana/slate-react';
import { Value } from 'slate';
import Plain from 'slate-plain-serializer';
@@ -27,11 +27,20 @@ interface DataLinkInputProps {
placeholder?: string;
}
+const datalinksSyntax: Grammar = {
+ builtInVariable: {
+ pattern: /(\${\S+?})/,
+ },
+};
+
const plugins = [
- SlatePrism({
- onlyIn: (node: any) => node.type === 'code_block',
- getSyntax: () => 'links',
- }),
+ SlatePrism(
+ {
+ onlyIn: (node: any) => node.type === 'code_block',
+ getSyntax: () => 'links',
+ },
+ { ...(Prism.languages as LanguageMap), links: datalinksSyntax }
+ ),
];
const getStyles = stylesFactory((theme: GrafanaTheme) => ({
@@ -56,19 +65,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
`,
}));
-export const enableDatalinksPrismSyntax = () => {
- Prism.languages['links'] = {
- builtInVariable: {
- pattern: /(\${\S+?})/,
- },
- };
-};
-
// This memoised also because rerendering the slate editor grabs focus which created problem in some cases this
// was used and changes to different state were propagated here.
export const DataLinkInput: React.FC = memo(
({ value, onChange, suggestions, placeholder = 'http://your-grafana.com/d/000000010/annotations' }) => {
- enableDatalinksPrismSyntax();
const editorRef = useRef() as RefObject;
const theme = useContext(ThemeContext);
const styles = getStyles(theme);
diff --git a/packages/grafana-ui/src/components/FormField/__snapshots__/FormField.test.tsx.snap b/packages/grafana-ui/src/components/FormField/__snapshots__/FormField.test.tsx.snap
index 049d927b50e..0d5632f1989 100644
--- a/packages/grafana-ui/src/components/FormField/__snapshots__/FormField.test.tsx.snap
+++ b/packages/grafana-ui/src/components/FormField/__snapshots__/FormField.test.tsx.snap
@@ -4,11 +4,11 @@ exports[`FormField should render component with custom inputEl 1`] = `
-
Test
-
+
Input
@@ -22,11 +22,11 @@ exports[`FormField should render component with default inputEl 1`] = `
-
Test
-
+
{
- const CONTAINER_GROUP = 'Container options';
- // ---
- const containerWidth = number(
- 'Container width',
- 300,
- {
- range: true,
- min: 100,
- max: 500,
- step: 10,
- },
- CONTAINER_GROUP
- );
+export const Simple: Story
= args => (
+
+
+
+
+
+);
- const BEHAVIOUR_GROUP = 'Behaviour props';
- const disabled = boolean('Disabled', false, BEHAVIOUR_GROUP);
- const invalid = boolean('Invalid', false, BEHAVIOUR_GROUP);
- const loading = boolean('Loading', false, BEHAVIOUR_GROUP);
- const error = text('Error message', '', BEHAVIOUR_GROUP);
-
- return { containerWidth, disabled, invalid, loading, error };
+Simple.args = {
+ label: 'Graphite API key',
+ description: 'Your Graphite instance API key',
+ disabled: false,
+ invalid: false,
+ loading: false,
+ error: 'Not valid input',
+ horizontal: false,
};
-export const Simple = () => {
- const { containerWidth, ...otherProps } = getKnobs();
- return (
-
-
-
-
-
- );
-};
-
-export const HorizontalLayout = () => {
+export const HorizontalLayout: Story = args => {
const [checked, setChecked] = useState(false);
const onChange = useCallback(e => setChecked(e.currentTarget.checked), [setChecked]);
- const { containerWidth, ...otherProps } = getKnobs();
return (
-
-
+
+
);
};
+
+HorizontalLayout.args = {
+ label: 'Show labels',
+ description: 'Display threshold labels',
+ disabled: false,
+ invalid: false,
+ loading: false,
+ error: 'Not valid input',
+ horizontal: true,
+};
diff --git a/packages/grafana-ui/src/components/Forms/Form.story.tsx b/packages/grafana-ui/src/components/Forms/Form.story.tsx
index ded2eb74857..4e76f241696 100644
--- a/packages/grafana-ui/src/components/Forms/Form.story.tsx
+++ b/packages/grafana-ui/src/components/Forms/Form.story.tsx
@@ -197,7 +197,7 @@ export const AsyncValidation = () => {
const validateAsync = (shouldPass: boolean) => async () => {
try {
- await new Promise((resolve, reject) => {
+ await new Promise((resolve, reject) => {
setTimeout(() => {
if (shouldPass) {
resolve();
diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.tsx
index 21e0427b5b2..8cceb55a4c4 100644
--- a/packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.tsx
+++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.tsx
@@ -11,6 +11,7 @@ interface ButtonComponentProps {
iconClass?: string;
}
+// eslint-disable-next-line react/display-name
const ButtonComponent = (buttonProps: ButtonComponentProps) => (props: any) => {
const { label, className, iconClass } = buttonProps;
diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
index 5ceccd9e7ce..624e93e20e6 100644
--- a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
+++ b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
@@ -80,9 +80,8 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme, size: RadioButt
background: ${bg};
cursor: pointer;
z-index: 1;
- flex-grow: ${fullWidth ? 1 : 0};
+ flex: ${fullWidth ? `1 0 0` : 'none'};
text-align: center;
-
user-select: none;
&:hover {
diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx
index d3c720c9715..aed2703e34f 100644
--- a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx
+++ b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx
@@ -1,5 +1,5 @@
import React, { useCallback, useRef } from 'react';
-import { css } from 'emotion';
+import { css, cx } from 'emotion';
import uniqueId from 'lodash/uniqueId';
import { SelectableValue } from '@grafana/data';
import { RadioButtonSize, RadioButton } from './RadioButton';
@@ -44,6 +44,7 @@ interface RadioButtonGroupProps {
onChange?: (value?: T) => void;
size?: RadioButtonSize;
fullWidth?: boolean;
+ className?: string;
}
export function RadioButtonGroup({
@@ -53,6 +54,7 @@ export function RadioButtonGroup({
disabled,
disabledOptions,
size = 'md',
+ className,
fullWidth = false,
}: RadioButtonGroupProps) {
const handleOnChange = useCallback(
@@ -70,7 +72,7 @@ export function RadioButtonGroup({
const styles = getRadioButtonGroupStyles();
return (
-
+
{options.map((o, i) => {
const isItemDisabled = disabledOptions && o.value && disabledOptions.includes(o.value);
return (
diff --git a/packages/grafana-ui/src/components/Gauge/Gauge.tsx b/packages/grafana-ui/src/components/Gauge/Gauge.tsx
index 2e98f8f7cd0..0372c5d9ae5 100644
--- a/packages/grafana-ui/src/components/Gauge/Gauge.tsx
+++ b/packages/grafana-ui/src/components/Gauge/Gauge.tsx
@@ -10,6 +10,7 @@ import {
getColorForTheme,
FieldColorModeId,
FALLBACK_COLOR,
+ TextDisplayOptions,
} from '@grafana/data';
import { Themeable } from '../../types';
import { calculateFontSize } from '../../utils/measureText';
@@ -21,6 +22,7 @@ export interface Props extends Themeable {
showThresholdLabels: boolean;
width: number;
value: DisplayValue;
+ text?: TextDisplayOptions;
onClick?: React.MouseEventHandler
;
className?: string;
}
@@ -108,7 +110,7 @@ export class Gauge extends PureComponent {
// remove gauge & marker width (on left and right side)
// and 10px is some padding that flot adds to the outer canvas
const valueWidth = valueWidthBase - ((gaugeWidth + (showThresholdMarkers ? thresholdMarkersWidth : 0)) * 2 + 10);
- const fontSize = calculateFontSize(text, valueWidth, dimension, 1, gaugeWidth * 1.7);
+ const fontSize = this.props.text?.valueSize ?? calculateFontSize(text, valueWidth, dimension, 1, gaugeWidth * 1.7);
const thresholdLabelFontSize = fontSize / 2.5;
let min = field.min!;
@@ -180,7 +182,7 @@ export class Gauge extends PureComponent {
}
renderVisualization = () => {
- const { width, value, height, onClick } = this.props;
+ const { width, value, height, onClick, text } = this.props;
const autoProps = calculateGaugeAutoProps(width, height, value.title);
return (
@@ -194,7 +196,7 @@ export class Gauge extends PureComponent {
{
- const data = new MutableDataFrame();
-
- data.addField({
- type: FieldType.time,
- name: 'Time',
- values: new ArrayVector([1602630000000, 1602633600000, 1602637200000]),
- config: {},
- });
-
- data.addField({
- type: FieldType.number,
- name: 'Value',
- values: new ArrayVector([10, 20, 5]),
- config: {
- custom: {
- mode: GraphMode.Line,
- },
- } as FieldConfig
,
- });
-
- const timeRange = {
- from: dateTime(1602673200000),
- to: dateTime(1602680400000),
- raw: { from: '1602673200000', to: '1602680400000' },
- };
- return { data, timeRange };
-};
-
-// const defaultLegendOptions: LegendOptions = {
-// displayMode: LegendDisplayMode.List,
-// placement: 'bottom',
-// };
-
-describe('GraphNG', () => {
- // describe('data update', () => {
- // it('does not re-initialise uPlot when there are no field config changes', () => {
- // const { data, timeRange } = mockData();
- // const onDataUpdateSpy = jest.fn();
- // const onPlotInitSpy = jest.fn();
- //
- // const { rerender } = render(
- //
- // );
- //
- // data.fields[1].values.set(0, 1);
- //
- // rerender(
- //
- // );
- //
- // expect(onPlotInitSpy).toBeCalledTimes(1);
- // expect(onDataUpdateSpy).toHaveBeenLastCalledWith([
- // [1602630000, 1602633600, 1602637200],
- // [1, 20, 5],
- // ]);
- // });
- // });
-
- describe('config update', () => {
- it('should skip plot intialization for width and height equal 0', () => {
- const { data, timeRange } = mockData();
-
- const { queryAllByTestId } = render(
-
- );
-
- expect(queryAllByTestId('uplot-main-div')).toHaveLength(1);
- });
-
- // it('reinitializes plot when number of series change', () => {
- // const { data, timeRange } = mockData();
- // const onPlotInitSpy = jest.fn();
- //
- // const { rerender } = render(
- //
- // );
- //
- // data.addField({
- // name: 'Value1',
- // type: FieldType.number,
- // values: new ArrayVector([1, 2, 3]),
- // config: {
- // custom: {
- // line: { show: true },
- // },
- // } as FieldConfig,
- // });
- //
- // rerender(
- //
- // );
- //
- // expect(onPlotInitSpy).toBeCalledTimes(2);
- // });
- //
- // it('reinitializes plot when series field config changes', () => {
- // const { data, timeRange } = mockData();
- // const onPlotInitSpy = jest.fn();
- //
- // const { rerender } = render(
- //
- // );
- // expect(onPlotInitSpy).toBeCalledTimes(1);
- //
- // data.fields[1].config.custom.line.width = 5;
- //
- // rerender(
- //
- // );
- //
- // expect(onPlotInitSpy).toBeCalledTimes(2);
- // });
- });
-});
diff --git a/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx b/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx
index 4d4268d688f..5320f371f19 100755
--- a/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx
+++ b/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useRef } from 'react';
+import React, { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
import {
compareDataFrameStructures,
DataFrame,
@@ -8,11 +8,12 @@ import {
formattedValueToString,
getFieldColorModeForField,
getFieldDisplayName,
+ TimeRange,
} from '@grafana/data';
import { alignDataFrames } from './utils';
import { UPlotChart } from '../uPlot/Plot';
import { PlotProps } from '../uPlot/types';
-import { AxisPlacement, GraphFieldConfig, GraphMode, PointMode } from '../uPlot/config';
+import { AxisPlacement, GraphFieldConfig, DrawStyle, PointVisibility } from '../uPlot/config';
import { useTheme } from '../../themes';
import { VizLayout } from '../VizLayout/VizLayout';
import { LegendDisplayMode, LegendItem, LegendOptions } from '../Legend/Legend';
@@ -34,8 +35,8 @@ export interface GraphNGProps extends Omit {
}
const defaultConfig: GraphFieldConfig = {
- mode: GraphMode.Line,
- points: PointMode.Auto,
+ drawStyle: DrawStyle.Line,
+ showPoints: PointVisibility.Auto,
axisPlacement: AxisPlacement.Auto,
};
@@ -51,34 +52,43 @@ export const GraphNG: React.FC = ({
...plotProps
}) => {
const alignedFrameWithGapTest = useMemo(() => alignDataFrames(data, fields), [data, fields]);
-
- if (alignedFrameWithGapTest == null) {
- return (
-
-
No data found in response
-
+
No data found in response
+
+```
+
+In most cases, use the markdown syntax rather than the HTML syntax. Only use the HTML if you need to change the image in ways unsupported by Markdown.
+
## Comments
You can include comments that will not appear in published markdown using the following syntax:
diff --git a/contribute/style-guides/documentation-style-guide.md b/contribute/style-guides/documentation-style-guide.md
index 3e224196276..6845a1fc302 100644
--- a/contribute/style-guides/documentation-style-guide.md
+++ b/contribute/style-guides/documentation-style-guide.md
@@ -110,12 +110,13 @@ If that is the case, then use the following format for headings:
- Assume all graphics will be exclusively viewed on the web.
- Maximum image size is 3840px X 2160px.
- Screenshots should be readable, but not too large.
+- _Do not_ use image shortcodes. Follow the guidance in the [Grafana markdown guide](https://github.com/grafana/grafana/blob/master/contribute/style-guides/documentation-markdown-guide.md#images).
+- Markdown image links are preferred. Only use the HTML image links if you need to style the image in ways unsupported in Markdown.
### Capitalization
- Grafana, Loki, and Prometheus are always capitalized unless part of a code block.
- API names are always Title Case, followed by "API"—for example, "Dashboard Permissions API"
-- Git is always capitalized, unless part of a code block.
- Abbreviations are always capitalized (such as API, HTTP, ID, JSON, SQL, or URL) unless they are part of a code block.
- Menu and submenu titles always use sentence case: capitalize the first word, and lowercase the rest.
- "Dashboards" when referring to the submenu title.
@@ -125,6 +126,22 @@ If that is the case, then use the following format for headings:
- Lowercase "dashboards" when referring to multiple dashboards.
- **Exceptions:** If a term is lowercased in the Grafana UI, then match the UI.
+#### Git, GitHub
+
+Git is always capitalized, unless part of a code block. GitHub is the correct spelling and capitalization.
+
+#### Integrations
+
+In general, "integration" is not capitalized. Only capitalize it if it is capitalized in the UI or part of a proper noun, like the name of a specific integration.
+
+The first letter of the name of an integration is always capitalized, even if the original named source is lowercase.
+
+**Examples:**
+- MySQL Integration
+- CockroachDB Integration
+- Etcd Integration
+- I installed an integration on my local Grafana.
+
### Links and references
When referencing another document, use "Refer to" rather than alternatives such as "See" or "Check out."
@@ -192,6 +209,18 @@ Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk
Grafana products has some words, abbreviations, and terms particular to the Grafana discourse community.
+#### changelog
+
+One word, not two.
+
+**Example**
+
+- Read the full changelog.
+
+**Exception:**
+
+- When referring to the file containing the official changelog, use the filename: `CHANGELOG.md`.
+
#### checkout, check out
Two words if used as a verb, one word if used as a noun.
diff --git a/devenv/dev-dashboards/feature-templating/templating-textbox-e2e-scenarios.json b/devenv/dev-dashboards/feature-templating/templating-textbox-e2e-scenarios.json
new file mode 100644
index 00000000000..37c853cafcc
--- /dev/null
+++ b/devenv/dev-dashboards/feature-templating/templating-textbox-e2e-scenarios.json
@@ -0,0 +1,116 @@
+{
+ "__inputs": [
+ {
+ "name": "DS_GDEV-TESTDATA",
+ "label": "gdev-testdata",
+ "description": "",
+ "type": "datasource",
+ "pluginId": "testdata",
+ "pluginName": "TestData DB"
+ }
+ ],
+ "__requires": [
+ {
+ "type": "grafana",
+ "id": "grafana",
+ "name": "Grafana",
+ "version": "7.4.0-pre"
+ },
+ {
+ "type": "datasource",
+ "id": "testdata",
+ "name": "TestData DB",
+ "version": "1.0.0"
+ },
+ {
+ "type": "panel",
+ "id": "text",
+ "name": "Text",
+ "version": ""
+ }
+ ],
+ "annotations": {
+ "list": [
+ {
+ "builtIn": 1,
+ "datasource": "-- Grafana --",
+ "enable": true,
+ "hide": true,
+ "iconColor": "rgba(0, 211, 255, 1)",
+ "name": "Annotations & Alerts",
+ "type": "dashboard"
+ }
+ ]
+ },
+ "editable": true,
+ "gnetId": null,
+ "graphTooltip": 0,
+ "id": null,
+ "iteration": 1606804991052,
+ "links": [],
+ "panels": [
+ {
+ "datasource": "${DS_GDEV-TESTDATA}",
+ "fieldConfig": {
+ "defaults": {
+ "custom": {}
+ },
+ "overrides": []
+ },
+ "gridPos": {
+ "h": 9,
+ "w": 12,
+ "x": 0,
+ "y": 0
+ },
+ "id": 2,
+ "options": {
+ "content": "# variable: ${text}\n ",
+ "mode": "markdown"
+ },
+ "pluginVersion": "7.4.0-pre",
+ "timeFrom": null,
+ "timeShift": null,
+ "title": "Panel Title",
+ "type": "text"
+ }
+ ],
+ "schemaVersion": 27,
+ "style": "dark",
+ "tags": [],
+ "templating": {
+ "list": [
+ {
+ "current": {
+ "selected": false,
+ "text": "default value",
+ "value": "default value"
+ },
+ "description": null,
+ "error": null,
+ "hide": 0,
+ "label": null,
+ "name": "text",
+ "options": [
+ {
+ "selected": true,
+ "text": "default value",
+ "value": "default value"
+ }
+ ],
+ "query": "default value",
+ "skipUrlSync": false,
+ "type": "textbox"
+ }
+ ]
+ },
+ "time": {
+ "from": "now-6h",
+ "to": "now"
+ },
+ "timepicker": {},
+ "timezone": "",
+ "title": "Templating - Textbox e2e scenarios",
+ "uid": "AejrN1AMz",
+ "version": 1
+}
diff --git a/devenv/docker/blocks/influxdb/docker-compose.yaml b/devenv/docker/blocks/influxdb/docker-compose.yaml
index 0a8c7c2d7de..a83e1553cce 100644
--- a/devenv/docker/blocks/influxdb/docker-compose.yaml
+++ b/devenv/docker/blocks/influxdb/docker-compose.yaml
@@ -8,6 +8,7 @@
environment:
INFLUXDB_ADMIN_USER: grafana
INFLUXDB_ADMIN_PASSWORD: grafana
+ INFLUXDB_DB: site
volumes:
- ./docker/blocks/influxdb/influxdb.conf:/etc/influxdb/influxdb.conf
diff --git a/devenv/docker/blocks/mysql_tests/.env b/devenv/docker/blocks/mysql_tests/.env
new file mode 100644
index 00000000000..29440f18d52
--- /dev/null
+++ b/devenv/docker/blocks/mysql_tests/.env
@@ -0,0 +1 @@
+mysql_version=5.6
diff --git a/devenv/docker/blocks/mysql_tests/Dockerfile b/devenv/docker/blocks/mysql_tests/Dockerfile
index 89e16bc2ed6..63bc031a682 100644
--- a/devenv/docker/blocks/mysql_tests/Dockerfile
+++ b/devenv/docker/blocks/mysql_tests/Dockerfile
@@ -1,3 +1,4 @@
-FROM mysql:5.6
+ARG mysql_version=5.6
+FROM mysql:${mysql_version}
ADD setup.sql /docker-entrypoint-initdb.d
CMD ["mysqld"]
diff --git a/devenv/docker/blocks/mysql_tests/docker-compose.yaml b/devenv/docker/blocks/mysql_tests/docker-compose.yaml
index a7509d47880..485657cf152 100644
--- a/devenv/docker/blocks/mysql_tests/docker-compose.yaml
+++ b/devenv/docker/blocks/mysql_tests/docker-compose.yaml
@@ -1,6 +1,8 @@
mysqltests:
build:
context: docker/blocks/mysql_tests
+ args:
+ - mysql_version=${mysql_version}
environment:
MYSQL_ROOT_PASSWORD: rootpass
MYSQL_DATABASE: grafana_tests
diff --git a/devenv/docker/blocks/postgres_tests/.env b/devenv/docker/blocks/postgres_tests/.env
new file mode 100644
index 00000000000..2494e5f2ee9
--- /dev/null
+++ b/devenv/docker/blocks/postgres_tests/.env
@@ -0,0 +1 @@
+postgres_version=9.3
diff --git a/devenv/docker/blocks/postgres_tests/Dockerfile b/devenv/docker/blocks/postgres_tests/Dockerfile
index df188e1094d..f8deb7d6815 100644
--- a/devenv/docker/blocks/postgres_tests/Dockerfile
+++ b/devenv/docker/blocks/postgres_tests/Dockerfile
@@ -1,3 +1,4 @@
-FROM postgres:9.3
+ARG postgres_version=9.3
+FROM postgres:${postgres_version}
ADD setup.sql /docker-entrypoint-initdb.d
CMD ["postgres"]
diff --git a/devenv/docker/blocks/postgres_tests/docker-compose.yaml b/devenv/docker/blocks/postgres_tests/docker-compose.yaml
index 7e6da7d8517..fbd68ec0749 100644
--- a/devenv/docker/blocks/postgres_tests/docker-compose.yaml
+++ b/devenv/docker/blocks/postgres_tests/docker-compose.yaml
@@ -1,6 +1,8 @@
postgrestest:
build:
context: docker/blocks/postgres_tests
+ args:
+ - postgres_version=${postgres_version}
environment:
POSTGRES_USER: grafanatest
POSTGRES_PASSWORD: grafanatest
diff --git a/devenv/docker/blocks/sensugo/backend.yml b/devenv/docker/blocks/sensugo/backend.yml
new file mode 100644
index 00000000000..1e0047daf3c
--- /dev/null
+++ b/devenv/docker/blocks/sensugo/backend.yml
@@ -0,0 +1,63 @@
+---
+# Sensu backend configuration
+
+##
+# backend configuration
+##
+state-dir: "/var/lib/sensu/sensu-backend"
+#cache-dir: "/var/cache/sensu/sensu-backend"
+#config-file: "/etc/sensu/backend.yml"
+#debug: false
+#deregistration-handler: "example_handler"
+#log-level: "warn" # available log levels: panic, fatal, error, warn, info, debug
+
+##
+# agent configuration
+##
+#agent-host: "[::]" # listen on all IPv4 and IPv6 addresses
+#agent-port: 8081
+
+##
+# api configuration
+##
+#api-listen-address: "[::]:8080" # listen on all IPv4 and IPv6 addresses
+#api-url: "http://localhost:8080"
+
+##
+# dashboard configuration
+##
+#dashboard-cert-file: "/path/to/ssl/cert.pem"
+#dashboard-key-file: "/path/to/ssl/key.pem"
+#dashboard-host: "[::]" # listen on all IPv4 and IPv6 addresses
+#dashboard-port: 3000
+
+##
+# ssl configuration
+##
+#cert-file: "/path/to/ssl/cert.pem"
+#key-file: "/path/to/ssl/key.pem"
+#trusted-ca-file: "/path/to/trusted-certificate-authorities.pem"
+#insecure-skip-tls-verify: false
+
+##
+# store configuration
+##
+#etcd-advertise-client-urls: "http://localhost:2379"
+#etcd-cert-file: "/path/to/ssl/cert.pem"
+#etcd-client-cert-auth: false
+#etcd-initial-advertise-peer-urls: "http://127.0.0.1:2380"
+#etcd-initial-cluster: "default=http://127.0.0.1:2380"
+#etcd-initial-cluster-state: "new" # new or existing
+#etcd-initial-cluster-token: "sensu"
+#etcd-key-file: "/path/to/ssl/key.pem"
+#etcd-listen-client-urls: "http://127.0.0.1:2379"
+#etcd-listen-peer-urls: "http://127.0.0.1:2380"
+#etcd-name: "default"
+#etcd-peer-cert-file: "/path/to/ssl/cert.pem"
+#etcd-peer-client-cert-auth: false
+#etcd-peer-key-file: "/path/to/ssl/key.pem"
+#etcd-peer-trusted-ca-file: "/path/to/ssl/key.pem"
+#etcd-trusted-ca-file: "/path/to/ssl/key.pem"
+#no-embed-etcd: false
+#etcd-cipher-suits
+# - TLS_EXAMPLE
diff --git a/devenv/docker/blocks/sensugo/docker-compose.yaml b/devenv/docker/blocks/sensugo/docker-compose.yaml
new file mode 100644
index 00000000000..69de571d35f
--- /dev/null
+++ b/devenv/docker/blocks/sensugo/docker-compose.yaml
@@ -0,0 +1,18 @@
+ sensu-backend:
+ image: sensu/sensu:latest
+ container_name: sensu-backend
+ ports:
+ - "3080:3000"
+ - "8080:8080"
+ - "8081:8081"
+ volumes:
+ - ./docker/blocks/sensugo/backend.yml:/etc/sensu/backend.yml
+ - sensu-backend-data:/var/lib/sensu/etcd
+ environment:
+ SENSU_BACKEND_CLUSTER_ADMIN_USERNAME: admin
+ SENSU_BACKEND_CLUSTER_ADMIN_PASSWORD: Password123
+ command: "sensu-backend start --log-level info"
+
+volumes:
+ sensu-backend-data: {}
+
diff --git a/devenv/docker/blocks/sensugo/notes.md b/devenv/docker/blocks/sensugo/notes.md
new file mode 100644
index 00000000000..f6f0b7e74b8
--- /dev/null
+++ b/devenv/docker/blocks/sensugo/notes.md
@@ -0,0 +1,39 @@
+# Notes on Sensu Go Docker Block
+
+The API Key needed to connect to Sensu Go has to be created manually.
+
+## Create the API Key
+
+`docker exec -it sensu-backend /bin/ash`
+
+Configure the `sensuctl` command using the pre-set username and password:
+
+```bash
+sensuctl configure -n --url http://127.0.0.1:8080 --username admin --password 'Password123' --namespace default
+```
+
+Generate the API Key:
+
+```bash
+sensuctl api-key grant admin
+```
+
+The output should look similar to this:
+
+```
+Created: /api/core/v2/apikeys/0a1b2c3d-4e5f-6a7b-8c9d-0e1f2a3b4c5d
+```
+
+
+## Configuring the notification channel
+
+### Backend URL
+
+The Backend URL is the API port (8080) forwarded to the container, it should be
+`http://localhost:8080`
+
+### API Key
+
+The `0a1b2c3d-4e5f-6a7b-8c9d-0e1f2a3b4c5d` in the output above is the API Key
+to use in configuring the Sensu Go notification channel.
+
diff --git a/docs/sources/administration/provisioning.md b/docs/sources/administration/provisioning.md
index e288425e4c6..1ce057d93ca 100644
--- a/docs/sources/administration/provisioning.md
+++ b/docs/sources/administration/provisioning.md
@@ -147,19 +147,20 @@ Since not all datasources have the same configuration settings we only have the
| tlsAuthWithCACert | boolean | _All_ | Enable TLS authentication using CA cert |
| tlsSkipVerify | boolean | _All_ | Controls whether a client verifies the server's certificate chain and host name. |
| graphiteVersion | string | Graphite | Graphite version |
-| timeInterval | string | Prometheus, Elasticsearch, InfluxDB, MySQL, PostgreSQL and MSSQL | Lowest interval/step value that should be used for this data source |
-| httpMode | string | Influxdb | HTTP Method. 'GET', 'POST', defaults to GET |
-| httpMethod | string | Prometheus | HTTP Method. 'GET', 'POST', defaults to GET |
+| timeInterval | string | Prometheus, Elasticsearch, InfluxDB, MySQL, PostgreSQL and MSSQL | Lowest interval/step value that should be used for this data source. |
+| httpMode | string | Influxdb | HTTP Method. 'GET', 'POST', defaults to GET |
+| httpMethod | string | Prometheus | HTTP Method. 'GET', 'POST', defaults to GET |
| esVersion | number | Elasticsearch | Elasticsearch version as a number (2/5/56/60/70) |
| timeField | string | Elasticsearch | Which field that should be used as timestamp |
| interval | string | Elasticsearch | Index date time format. nil(No Pattern), 'Hourly', 'Daily', 'Weekly', 'Monthly' or 'Yearly' |
| logMessageField | string | Elasticsearch | Which field should be used as the log message |
| logLevelField | string | Elasticsearch | Which field should be used to indicate the priority of the log message |
-| sigV4AuthType | string | Elasticsearch | SigV4 auth provider. default/credentials/keys |
-| sigV4ExternalId | string | Elasticsearch | Optional SigV4 External ID |
-| sigV4AssumeRoleArn | string | Elasticsearch | Optional SigV4 ARN role to assume |
-| sigV4Region | string | Elasticsearch | SigV4 AWS region |
-| sigV4Profile | string | Elasticsearch | Optional SigV4 credentials profile |
+| sigV4Auth | boolean | Elasticsearch | Enable usage of SigV4 |
+| sigV4AuthType | string | Elasticsearch | SigV4 auth provider. default/credentials/keys |
+| sigV4ExternalId | string | Elasticsearch | Optional SigV4 External ID |
+| sigV4AssumeRoleArn | string | Elasticsearch | Optional SigV4 ARN role to assume |
+| sigV4Region | string | Elasticsearch | SigV4 AWS region |
+| sigV4Profile | string | Elasticsearch | Optional SigV4 credentials profile |
| authType | string | Cloudwatch | Auth provider. default/credentials/keys |
| externalId | string | Cloudwatch | Optional External ID |
| assumeRoleArn | string | Cloudwatch | Optional ARN role to assume |
@@ -194,7 +195,7 @@ Secure json data is a map of settings that will be encrypted with [secret key]({
| basicAuthPassword | string | _All_ | password for basic authentication |
| accessKey | string | Cloudwatch | Access key for connecting to Cloudwatch |
| secretKey | string | Cloudwatch | Secret key for connecting to Cloudwatch |
-| sigV4AccessKey | string | Elasticsearch | SigV4 access key. Required when using keys auth provider |
+| sigV4AccessKey | string | Elasticsearch | SigV4 access key. Required when using keys auth provider |
| sigV4SecretKey | string | Elasticsearch | SigV4 secret key. Required when using keys auth provider |
#### Custom HTTP headers for datasources
@@ -479,6 +480,17 @@ The following sections detail the supported settings and secure settings for eac
| username | |
| password | yes |
+#### Alert notification `sensugo`
+
+| Name | Secure setting |
+| -------- | -------------- |
+| url | |
+| apikey | yes |
+| entity | |
+| check | |
+| handler | |
+| namespace | |
+
#### Alert notification `prometheus-alertmanager`
| Name | Secure setting |
diff --git a/docs/sources/alerting/create-alerts.md b/docs/sources/alerting/create-alerts.md
index 3cd0fd28a4c..31fd1b4e278 100644
--- a/docs/sources/alerting/create-alerts.md
+++ b/docs/sources/alerting/create-alerts.md
@@ -9,7 +9,7 @@ weight = 200
Grafana alerting allows you to attach rules to your dashboard panels. When you save the dashboard, Grafana extracts the alert rules into a separate alert rule storage and schedules them for evaluation.
-{{< imgbox max-width="1000px" img="/img/docs/alerting/drag_handles_gif.gif" caption="Alerting overview" >}}
+
In the Alert tab of the graph panel you can configure how often the alert rule should be evaluated and the conditions that need to be met for the alert to change state and trigger its [notifications]({{< relref "notifications.md" >}}).
diff --git a/docs/sources/alerting/notifications.md b/docs/sources/alerting/notifications.md
index 7a38e0df53c..058b665fbf9 100644
--- a/docs/sources/alerting/notifications.md
+++ b/docs/sources/alerting/notifications.md
@@ -64,6 +64,7 @@ OpsGenie | `opsgenie` | yes, external only | yes
Prometheus Alertmanager | `prometheus-alertmanager` | yes, external only | yes
Pushover | `pushover` | yes | no
Sensu | `sensu` | yes, external only | no
+[Sensu Go](#sensu-go) | `sensugo` | yes, external only | no
[Slack](#slack) | `slack` | yes | no
Telegram | `telegram` | yes | no
Threema | `threema` | yes, external only | no
@@ -212,6 +213,10 @@ Alertmanager handles alerts sent by client applications such as Prometheus serve
[Zenduty](https://www.zenduty.com) is an incident alerting and response orchestration platform that not alerts the right teams via SMS, Phone(Voice), Email, Slack, Microsoft Teams and Push notifications(Android/iOS) whenever a Grafana alert is triggered, but also helps you rapidly triage and remediate critical, user impacting incidents. Grafana alert are sent to Zenduty through Grafana's native webhook dispatcher. Refer the Zenduty-Grafana [integration documentation](https://docs.zenduty.com/docs/grafana) for configuring the integration.
+### Sensu Go
+
+[Sensu](https://sensu.io) is a complete solution for monitoring and observability at scale. Sensu Go is designed to give you visibility into everything you care about: traditional server closets, containers, applications, the cloud, and more. Grafana notifications can be sent to Sensu Go as events via the API. This operation requires an API Key. Refer to the [Sensu Go documentation](https://docs.sensu.io/sensu-go/latest/operations/control-access/use-apikeys/#api-key-authentication) for information on creating this key.
+
## Enable images in notifications {#external-image-store}
Grafana can render the panel associated with the alert rule as a PNG image and include that in the notification. Read more about the requirements and how to configure
diff --git a/docs/sources/alerting/troubleshoot-alerts.md b/docs/sources/alerting/troubleshoot-alerts.md
index 36c156d1779..df94dd2b3d3 100644
--- a/docs/sources/alerting/troubleshoot-alerts.md
+++ b/docs/sources/alerting/troubleshoot-alerts.md
@@ -9,7 +9,7 @@ weight = 500
If alerts are not behaving as you expect, here are some steps you can take to troubleshoot and figure out what is going wrong.
-{{< imgbox max-width="1000px" img="/img/docs/v4/alert_test_rule.png" caption="Test Rule" >}}
+
The first level of troubleshooting you can do is click **Test Rule**. You will get result back that you can expand to the point where you can see the raw data that was returned from your query.
diff --git a/docs/sources/auth/azuread.md b/docs/sources/auth/azuread.md
index 7fd8317d77f..fd5d604fd40 100644
--- a/docs/sources/auth/azuread.md
+++ b/docs/sources/auth/azuread.md
@@ -118,7 +118,7 @@ allowed_groups = 8bab1c86-8fba-33e5-2089-1d1c80ec267d
You'll need to ensure that you've [enabled group attributes](https://docs.microsoft.com/en-us/azure/active-directory/hybrid/how-to-connect-fed-group-claims#configure-the-azure-ad-application-registration-for-group-attributes) in your Azure AD Application Registration manifest file (Azure Portal -> Azure Active Directory -> Application Registrations -> Select Application -> Manifest)
```json
-"groupMembershipClaims": "ApplicationGroup"
+"groupMembershipClaims": "ApplicationGroup, SecurityGroup"
```
The `allowed_domains` option limits access to the users belonging to the specific domains. Domains should be separated by space or comma.
diff --git a/docs/sources/datasources/influxdb.md b/docs/sources/datasources/influxdb.md
index 314ef69639f..de41fb1546c 100644
--- a/docs/sources/datasources/influxdb.md
+++ b/docs/sources/datasources/influxdb.md
@@ -286,12 +286,12 @@ datasources:
httpMode: GET
```
-### InfluxDB 2.x example
+### InfluxDB 2.x for Flux example
```yaml
apiVersion: 1
datasources:
- - name: InfluxDB_v2
+ - name: InfluxDB_v2_Flux
type: influxdb
access: proxy
url: http://localhost:8086
@@ -303,3 +303,22 @@ datasources:
defaultBucket: bucket
tlsSkipVerify: true
```
+
+### InfluxDB 2.x for InfluxQl example
+```yaml
+apiVersion: 1
+
+datasources:
+ - name: InfluxDB_v2_InfluxQL
+ type: influxdb
+ access: proxy
+ url: http://localhost:8086
+ # This database should be mapped to a bucket
+ database: site
+ jsonData:
+ httpMode: GET
+ httpHeaderName1: 'Authorization'
+ secureJsonData:
+ httpHeaderValue1: 'Token 
diff --git a/docs/sources/getting-started/getting-started.md b/docs/sources/getting-started/getting-started.md
index 562c0664b39..8fe9fda5c0c 100644
--- a/docs/sources/getting-started/getting-started.md
+++ b/docs/sources/getting-started/getting-started.md
@@ -30,7 +30,7 @@ To log in to Grafana for the first time:
To create your first dashboard:
1. Click the **+** icon on the left panel, select **Create Dashboard**, and then click **Add new panel**.
-1. In the New Dashbard/Edit Panel view, go to the **Query** tab.
+1. In the New Dashboard/Edit Panel view, go to the **Query** tab.
1. Configure your [query]({{< relref "../panels/queries.md" >}}) by selecting ``-- Grafana --`` from the [data source selector]({{< relref "../panels/queries.md/#data-source-selector" >}}). This generates the Random Walk dashboard.
1. Click the **Save** icon in the top right corner of your screen to save the dashboard.
1. Add a descriptive name, and then click **Save**.
@@ -56,4 +56,4 @@ The following topics are of interest to Grafana server admin users:
- [Provisioning]({{< relref "../administration/provisioning.md" >}})
- [Grafana CLI]({{< relref "../administration/cli.md" >}})
-
\ No newline at end of file
+
diff --git a/docs/sources/http_api/snapshot.md b/docs/sources/http_api/snapshot.md
index 778087b620e..a602fa37bbb 100644
--- a/docs/sources/http_api/snapshot.md
+++ b/docs/sources/http_api/snapshot.md
@@ -68,7 +68,8 @@ JSON Body schema:
"deleteKey":"XXXXXXX",
"deleteUrl":"myurl/api/snapshots-delete/XXXXXXX",
"key":"YYYYYYY",
- "url":"myurl/dashboard/snapshot/YYYYYYY"
+ "url":"myurl/dashboard/snapshot/YYYYYYY",
+ "id": 1,
}
```
@@ -192,7 +193,7 @@ Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk
HTTP/1.1 200
Content-Type: application/json
-{"message":"Snapshot deleted. It might take an hour before it's cleared from any CDN caches."}
+{"message":"Snapshot deleted. It might take an hour before it's cleared from any CDN caches.", "id": 1}
```
## Delete Snapshot by deleteKey
@@ -214,5 +215,5 @@ Accept: application/json
HTTP/1.1 200
Content-Type: application/json
-{"message":"Snapshot deleted. It might take an hour before it's cleared from any CDN caches."}
-```
\ No newline at end of file
+{"message":"Snapshot deleted. It might take an hour before it's cleared from any CDN caches.", "id": 1}
+```
diff --git a/docs/sources/panels/transformations/types-options.md b/docs/sources/panels/transformations/types-options.md
index a4850410067..9f287e1f50a 100644
--- a/docs/sources/panels/transformations/types-options.md
+++ b/docs/sources/panels/transformations/types-options.md
@@ -7,34 +7,72 @@ weight = 300
Grafana comes with the following transformations:
- - [Reduce](#reduce)
- - [Filter by name](#filter-by-name)
- - [Filter data by query](#filter-data-by-query)
- - [Organize fields](#organize-fields)
- - [Outer join](#join-by-field-outer-join)
- - [Series to rows](#series-to-rows)
- - [Add field from calculation](#add-field-from-calculation)
- - [Labels to fields](#labels-to-fields)
- - [Group by](#group-by)
- - [Merge](#merge)
+- [Reduce](#reduce)
+- [Filter by name](#filter-by-name)
+- [Filter data by query](#filter-data-by-query)
+- [Filter data by value](#filter-data-by-value)
+- [Organize fields](#organize-fields)
+- [Outer join](#join-by-field-outer-join)
+- [Series to rows](#series-to-rows)
+- [Add field from calculation](#add-field-from-calculation)
+- [Labels to fields](#labels-to-fields)
+- [Concatenate fields](#concatenate-fields)
+- [Group by](#group-by)
+- [Merge](#merge)
Keep reading for detailed descriptions of each type of transformation and the options available for each, as well as suggestions on how to use them.
## Reduce
-Apply a _Reduce_ transformation when you want to simplify your results down to one value. Reduce removes the time component. If visualized as a table, it reduces a column down to one row (value).
+The _Reduce_ transformation will apply a calculation to each field in the frame and return a single value. Time fields are removed when applying
+this transformation.
-In the **Calculations** field, enter one or more calculation types. Click to see a list of calculation choices. For information about available calculations, refer to the [Calculation list]({{< relref "../calculations-list.md" >}}).
+Consider the input:
-Once you select at least one calculation, Grafana reduces the results down to one value using the calculation you select. If you select more than one calculation, then more than one value is displayed.
+Query A:
-Here's an example of a table with time series data. Before I apply the transformation, you can see all the data organized by time.
+| Time | Temp | Uptime |
+| ------------------- | ------- | ------- |
+| 2020-07-07 11:34:20 | 12.3 | 256122 |
+| 2020-07-07 11:24:20 | 15.4 | 1230233 |
-{{< docs-imagebox img="/img/docs/transformations/reduce-before-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
+Query B:
+
+| Time | AQI | Errors |
+| ------------------- | ------- | ------ |
+| 2020-07-07 11:34:20 | 6.5 | 15 |
+| 2020-07-07 11:24:20 | 3.2 | 5 |
+
+The reduce transformer has two modes:
+- **Series to rows -** Creates a row for each field and a column for each calculation.
+- **Reduce fields -** Keeps the existing frame structure, but collapses each field into a single value.
+
+For example, if you used the **First** and **Last** calculation with a **Series to rows** transformation, then
+the result would be:
+
+| Field | First | Last |
+| ------- | ------- | ------- |
+| Temp | 12.3 | 15.4 |
+| Uptime | 256122 | 1230233 |
+| AQI | 6.5 | 3.2 |
+| Errors | 15 | 5 |
+
+The **Reduce fields** with the **Last** calculation,
+results in two frames, each with one row:
+
+Query A:
+
+| Temp | Uptime |
+| ------- | ------- |
+| 15.4 | 1230233 |
+
+Query B:
+
+| AQI | Errors |
+| ------- | ------ |
+| 3.2 | 5 |
-After I apply the transformation, there is no time value and each column has been reduced to one row showing the results of the calculations that I chose.
-{{< docs-imagebox img="/img/docs/transformations/reduce-after-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
## Merge
@@ -138,7 +176,8 @@ Use this transformation to add a new field calculated from two other fields. Eac
- **Reduce row -** Apply selected calculation on each row of selected fields independently.
- **Binary option -** Apply basic math operation(sum, multiply, etc) on values in a single row from two selected fields.
- **Field name -** Select the names of fields you want to use in the calculation for the new field.
-- **Calculation -** Select a calculation to use when Grafana creates the new field. Click in the field to see a list of calculation choices. For information about available calculations, refer to the [Calculation list]({{< relref "../calculations-list.md" >}}).
+- **Calculation -** If you select **Reduce row** mode, then the **Calculation** field appears. Click in the field to see a list of calculation choices you can use to create the new field. For information about available calculations, refer to the [Calculation list]({{< relref "../calculations-list.md" >}}).
+- **Operation -** If you select **Binary option** mode, then the **Operation** fields appear. These fields allow you to do basic math operations on values in a single row from two selected fields. You can also use numerical values for binary operations.
- **Alias -** (Optional) Enter the name of your new field. If you leave this blank, then the field will be named to match the calculation.
- **Replace all fields -** (Optional) Select this option if you want to hide all other fields and display only your calculated field in the visualization.
@@ -184,7 +223,7 @@ After I apply the transformation, my labels appear in the table as fields.
> **Note:** This transformation is only available in Grafana 7.2+.
-This transformation groups the data by a specified field (column) value and processes calculations on each group. Click to see a list of calculation choices. For information about available calculations, refer to the [List of calculations]({{< relref "../calculations-list.md" >}}).
+This transformation groups the data by a specified field (column) value and processes calculations on each group. Click to see a list of calculation choices. For information about available calculations, refer to the [List of calculations]({{< relref "../calculations-list.md" >}}).
Here's an example of original data.
@@ -202,17 +241,17 @@ Here's an example of original data.
This transformation goes in two steps. First you specify one or multiple fields to group the data by. This will group all the same values of those fields together, as if you sorted them. For instance if we group by the Server ID field, then it would group the data this way:
-| Time | Server ID | CPU Temperature | Server Status |
-| ------------------- | ------------ | --------------- | ------------- |
-| 2020-07-07 11:34:20 | **server 1** | 80 | Shutdown |
-| 2020-07-07 09:28:06 | **server 1** | 80 | OK |
-| 2020-07-07 09:23:07 | **server 1** | 86 | OK |
-| 2020-07-07 10:32:20 | server 2 | 90 | Overload |
-| 2020-07-07 09:30:05 | server 2 | 88 | OK |
-| 2020-07-07 09:25:05 | server 2 | 88 | OK |
-| 2020-07-07 11:34:20 | **_server 3_** | 62 | OK |
-| 2020-07-07 10:31:22 | **_server 3_** | 55 | OK |
-| 2020-07-07 09:30:57 | **_server 3_** | 62 | Rebooting |
+| Time | Server ID | CPU Temperature | Server Status |
+| ------------------- | -------------- | --------------- | ------------- |
+| 2020-07-07 11:34:20 | **server 1** | 80 | Shutdown |
+| 2020-07-07 09:28:06 | **server 1** | 80 | OK |
+| 2020-07-07 09:23:07 | **server 1** | 86 | OK |
+| 2020-07-07 10:32:20 | server 2 | 90 | Overload |
+| 2020-07-07 09:30:05 | server 2 | 88 | OK |
+| 2020-07-07 09:25:05 | server 2 | 88 | OK |
+| 2020-07-07 11:34:20 | **_server 3_** | 62 | OK |
+| 2020-07-07 10:31:22 | **_server 3_** | 55 | OK |
+| 2020-07-07 09:30:57 | **_server 3_** | 62 | Rebooting |
All rows with the same value of Server ID are grouped together.
@@ -240,11 +279,36 @@ We would then get :
This transformation allows you to extract some key information out of your time series and display them in a convenient way.
+## Concatenate fields
+
+> **Note:** This transformation is only available in Grafana 7.3+.
+
+This transformation combines all fields from all frames into one result. Consider:
+
+Query A:
+
+| Temp | Uptime |
+| ------- | ------- |
+| 15.4 | 1230233 |
+
+Query B:
+
+| AQI | Errors |
+| ------- | ------ |
+| 3.2 | 5 |
+
+
+After you concatenate the fields, the data frame would be:
+
+| Temp | Uptime | AQI | Errors |
+| ------- | ------- | ------- | ------ |
+| 15.4 | 1230233 | 3.2 | 5 |
+
## Series to rows
> **Note:** This transformation is only available in Grafana 7.1+.
-Use this transformation to combine the result from multiple time series data queries into one single result. This is helpful when using the table panel visualization.
+Use this transformation to combine the result from multiple time series data queries into one single result. This is helpful when using the table panel visualization.
The result from this transformation will contain three columns: Time, Metric, and Value. The Metric column is added so you easily can see from which query the metric originates from. Customize this value by defining Label on the source query.
@@ -276,3 +340,61 @@ Here is the result after applying the Series to rows transformation.
| 2020-07-07 10:31:22 | Temperature | 22 |
| 2020-07-07 09:30:57 | Humidity | 33 |
| 2020-07-07 09:30:05 | Temperature | 19 |
+
+## Filter by value
+
+This transformation allows you to filter your data directly in Grafana and remove some data points from your query result. You have the option to include or exclude data that match one or more conditions you define. The conditions are applied on a selected field.
+
+The available conditions are:
+
+- **Regex**: match a regex expression
+- **Is Null**: match if the value is null
+- **Is Not Null**: match if the value is not null
+- **Equal**: match if the value is equal to the specified value
+- **Different**: match if the value is different than the specified value
+- **Greater**\*: match if the value is greater than the specified value
+- **Lower**\*: match if the value is lower than the specified value
+- **Greater or equal**\*: match if the value is greater or equal
+- **Lower or equal**\*: match if the value is lower or equal
+- **Range**\*: match a range between a specified minimum and maximum, min and max included
+
+\* Those conditions are only available for number fields.
+
+Consider the following data set:
+
+| Time | Temperature | Altitude |
+| ------------------- | ----------- | -------- |
+| 2020-07-07 11:34:23 | 32 | 101 |
+| 2020-07-07 11:34:22 | 28 | 125 |
+| 2020-07-07 11:34:21 | 26 | 110 |
+| 2020-07-07 11:34:20 | 23 | 98 |
+| 2020-07-07 10:32:24 | 31 | 95 |
+| 2020-07-07 10:31:22 | 20 | 85 |
+| 2020-07-07 09:30:57 | 19 | 101 |
+
+If you **Include** the data points that have a temperature below 30°C, the configuration will look as follows:
+
+- Filter Type: `Include`
+- Condition: Rows where `Temperature` matches `Lower Than` `100`
+
+And you will get the following result, where only the temperatures below 30°C are included:
+
+| Time | Temperature | Altitude |
+| ------------------- | ----------- | -------- |
+| 2020-07-07 11:34:22 | 28 | 125 |
+| 2020-07-07 11:34:21 | 26 | 110 |
+| 2020-07-07 11:34:20 | 23 | 98 |
+| 2020-07-07 10:31:22 | 20 | 85 |
+| 2020-07-07 09:30:57 | 19 | 101 |
+
+You can add more than one condition to the filter. For example, you might want to include the data only if the altitude is greater than 100. To do so, add that condition to the following configuration:
+
+- Filter type: `Include` rows that `Match All` conditions
+- Condition 1: Rows where `Temperature` matches `Lower` than `30`
+- Condition 2: Rows where `Altitude` matches `Greater` than `100`
+
+When you have more than one condition, you can choose if you want the action (include / exclude) to be applied on rows that **Match all** conditions or **Match any** of the conditions you added.
+
+In the example above we chose **Match all** because we wanted to include the rows that have a temperature lower than 30 _AND_ an altitude higher than 100. If we wanted to include the rows that have a temperature lower than 30 _OR_ an altitude higher than 100 instead, then we would select **Match any**. This would include the first row in the original data, which has a temperature of 32°C (does not match the first condition) but an altitude of 101 (which matches the second condition), so it is included.
+
+Conditions that are invalid or incompletely configured are ignored.
diff --git a/docs/sources/plugins/installation.md b/docs/sources/plugins/installation.md
index 475672505e1..6066f2a88b1 100644
--- a/docs/sources/plugins/installation.md
+++ b/docs/sources/plugins/installation.md
@@ -1,6 +1,6 @@
+++
title = "Install plugins"
-aliases = ["/docs/plugins/installation/"]
+aliases = ["/docs/grafana/latest/plugins/installation/"]
weight = 1
+++
diff --git a/docs/sources/plugins/plugin-signatures.md b/docs/sources/plugins/plugin-signatures.md
index 628b68ecdea..2b0ff883e14 100644
--- a/docs/sources/plugins/plugin-signatures.md
+++ b/docs/sources/plugins/plugin-signatures.md
@@ -1,7 +1,7 @@
+++
title = "Plugin signatures"
type = "docs"
-aliases = ["/docs/plugins/plugin-signature-verification"]
+aliases = ["/docs/grafana/latest/plugins/plugin-signature-verification"]
+++
# Plugin signatures
diff --git a/docs/sources/release-notes/release-notes-7-3-4.md b/docs/sources/release-notes/release-notes-7-3-4.md
index ac51f7b17a3..85ceb9dfbda 100644
--- a/docs/sources/release-notes/release-notes-7-3-4.md
+++ b/docs/sources/release-notes/release-notes-7-3-4.md
@@ -13,5 +13,5 @@ list = false
* **Dashboard**: Fixes kiosk state after being redirected to login page and back. [#29273](https://github.com/grafana/grafana/pull/29273), [@torkelo](https://github.com/torkelo)
* **InfluxDB**: Update flux library to fix support for boolean label values. [#29310](https://github.com/grafana/grafana/pull/29310), [@ryantxu](https://github.com/ryantxu)
* **Security**: Fixes minor security issue with alert notification webhooks that allowed GET & DELETE requests. [#29330](https://github.com/grafana/grafana/pull/29330), [@wbrowne](https://github.com/wbrowne)
-* **Table**: Fix incorrect condition for rendering table filter. [#29165](https://github.com/grafana/grafana/pull/29165), [@dprokop](https://github.com/dprokop)
+* **Table**: Fixes issues with phantom extra 0 for zero values. [#29165](https://github.com/grafana/grafana/pull/29165), [@dprokop](https://github.com/dprokop)
diff --git a/docs/sources/variables/filter-variables-with-regex.md b/docs/sources/variables/filter-variables-with-regex.md
index e4e2cd03c43..fb25635b6ee 100644
--- a/docs/sources/variables/filter-variables-with-regex.md
+++ b/docs/sources/variables/filter-variables-with-regex.md
@@ -78,6 +78,8 @@ demo.robustperception.io:9100
## Filter and modify using named text and value capture groups
+> **Note:** This feature is available in Grafana 7.4+.
+
Using named capture groups, you can capture separate 'text' and 'value' parts from the options returned by the variable query. This allows the variable drop-down list to contain a friendly name for each value that can be selected.
For example, when querying the `node_hwmon_chip_names` Prometheus metric, the `chip_name` is a lot friendlier that the `chip` value. So the following variable query result:
diff --git a/docs/sources/variables/formatting-multi-value-variables.md b/docs/sources/variables/formatting-multi-value-variables.md
index 434d2637edd..2ec4d9df884 100644
--- a/docs/sources/variables/formatting-multi-value-variables.md
+++ b/docs/sources/variables/formatting-multi-value-variables.md
@@ -1,9 +1,9 @@
+++
-title = "Formatting multi-value variables"
+title = "Multi-value variables"
weight = 600
+++
-# Formatting multi-value variables
+# Multi-value variables
Interpolating a variable with multiple values selected is tricky as it is not straight forward how to format the multiple values into a string that is valid in the given context where the variable is used. Grafana tries to solve this by allowing each data source plugin to inform the templating interpolation engine what format to use for multiple values.
@@ -21,7 +21,7 @@ InfluxDB and Prometheus use regex expressions, so the same variable would be int
Elasticsearch uses lucene query syntax, so the same variable would be formatted as `("host1" OR "host2" OR "host3")`. In this case, every value must be escaped so that the value only contains lucene control words and quotation marks.
-## Formatting troubles
+## Troubleshoot multi-value variables
Automatic escaping and formatting can cause problems and it can be tricky to grasp the logic behind it. Especially for InfluxDB and Prometheus where the use of regex syntax requires that the variable is used in regex operator context.
diff --git a/docs/sources/variables/repeat-panels-or-rows.md b/docs/sources/variables/repeat-panels-or-rows.md
index 114b0a179dc..9ec9af93552 100644
--- a/docs/sources/variables/repeat-panels-or-rows.md
+++ b/docs/sources/variables/repeat-panels-or-rows.md
@@ -1,5 +1,5 @@
+++
-title = "Variables"
+title = "Repeat panels or rows"
keywords = ["grafana", "templating", "documentation", "guide", "template", "variable", "repeat"]
weight = 800
+++
diff --git a/docs/sources/variables/syntax.md b/docs/sources/variables/syntax.md
index 8bb408ca273..f1ffcf80d0f 100644
--- a/docs/sources/variables/syntax.md
+++ b/docs/sources/variables/syntax.md
@@ -1,5 +1,5 @@
+++
-title = "Variables syntax and types"
+title = "Variable syntax"
keywords = ["grafana", "templating", "documentation", "guide", "template", "variable"]
aliases = ["/docs/grafana/latest/reference/templating"]
weight = 100
diff --git a/e2e/suite1/specs/panelEdit_base.spec.ts b/e2e/suite1/specs/panelEdit_base.spec.ts
index 8854912f422..bb4f2a3fc6d 100644
--- a/e2e/suite1/specs/panelEdit_base.spec.ts
+++ b/e2e/suite1/specs/panelEdit_base.spec.ts
@@ -26,7 +26,7 @@ e2e.scenario({
expect(li.text()).equals('Query1'); // there's already a query so therefore Query + 1
});
e2e.components.QueryTab.content().should('be.visible');
- e2e.components.TransformTab.content().should('not.be.visible');
+ e2e.components.TransformTab.content().should('not.exist');
e2e.components.AlertTab.content().should('not.be.visible');
// Bottom pane tabs
@@ -37,7 +37,9 @@ e2e.scenario({
e2e.components.Tab.active().within((li: JQuery