IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-12-02 13:39:19 -06:00
Code Issues Packages Projects Releases Wiki Activity

Prometheus: Add optional param tooltip for visual builder (#46644)

Browse Source
This commit is contained in:
Andrej Ocenas 2022-03-17 10:51:42 +01:00 committed by GitHub
parent ee87ed3b51
commit 22a4c5f086
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/app/plugins/datasource/prometheus/querybuilder/binaryScalarOperations.ts
View File

@ -77,7 +77,11 @@ export const binaryScalarOperations: QueryBuilderOperationDef[] = binaryScalarDe
const params: QueryBuilderOperationParamDef[] = [{ name: 'Value', type: 'number' }];
const defaultParams: any[] = [2];
if (opDef.comparison) {
params.unshift({ name: 'Bool', type: 'boolean' });
params.unshift({
name: 'Bool',
type: 'boolean',
description: 'If checked comparison will return 0 or 1 for the value rather than filtering.',
});
defaultParams.unshift(false);
}

18
public/app/plugins/datasource/prometheus/querybuilder/shared/OperationEditor.tsx
View File

@ -1,7 +1,7 @@
import { css } from '@emotion/css';
import { DataSourceApi, GrafanaTheme2 } from '@grafana/data';
import { Stack } from '@grafana/experimental';
import { Button, useStyles2 } from '@grafana/ui';
import { Button, Icon, Tooltip, useStyles2 } from '@grafana/ui';
import React from 'react';
import { Draggable } from 'react-beautiful-dnd';
import {
@ -70,9 +70,14 @@ export function OperationEditor({
operationElements.push(
<div className={styles.paramRow} key={`${paramIndex}-1`}>
{!paramDef.hideName && (
<label className={styles.paramName} htmlFor={getOperationParamId(index, paramIndex)}>
{paramDef.name}
</label>
<div className={styles.paramName}>
<label htmlFor={getOperationParamId(index, paramIndex)}>{paramDef.name}</label>
{paramDef.description && (
<Tooltip placement="top" content={paramDef.description} theme="info">
<Icon name="info-circle" size="sm" className={styles.infoIcon} />
</Tooltip>
)}
</div>
)}
<div className={styles.paramValue}>
<Stack gap={0.5} direction="row" alignItems="center" wrap={false}>
@ -195,13 +200,14 @@ const getStyles = (theme: GrafanaTheme2) => {
position: 'relative',
}),
infoIcon: css({
color: theme.colors.text.secondary,
marginLeft: theme.spacing(0.5),
}),
body: css({
margin: theme.spacing(1, 1, 0.5, 1),
display: 'table',
}),
paramRow: css({
label: 'paramRow',
display: 'table-row',
verticalAlign: 'middle',
}),
@ -214,8 +220,8 @@ const getStyles = (theme: GrafanaTheme2) => {
height: '32px',
}),
paramValue: css({
label: 'paramValue',
display: 'table-cell',
paddingBottom: theme.spacing(0.5),
verticalAlign: 'middle',
}),
restParam: css({