public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Loki, Prometheus: Change the placement for query type explanation (#31784) (#31819)

Browse Source 
* Fix tooltip in the way

* Add more info for instant query

* Update public/app/plugins/datasource/loki/components/LokiOptionFields.tsx

* Update public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx

(cherry picked from commit 53ba6456d4)

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
This commit is contained in:
Grot (@grafanabot)
2021-03-09 14:35:58 +01:00
committed by GitHub
parent aeee3931d2
commit 453b956797
2 changed files with 15 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/plugins/datasource/loki/components/LokiOptionFields.tsx
+7 -8
View File
@@ -18,8 +18,12 @@ export interface LokiOptionFieldsProps {
type LokiQueryType = 'instant' | 'range';
const queryTypeOptions = [
{ value: 'range', label: 'Range' },
{ value: 'instant', label: 'Instant' },
{ value: 'range', label: 'Range', description: 'Run query over a range of time.' },
{
value: 'instant',
label: 'Instant',
description: 'Run query against a single point in time. For this query, the "To" time is used.',
},
];
export function LokiOptionFields(props: LokiOptionFieldsProps) {
@@ -79,12 +83,7 @@ export function LokiOptionFields(props: LokiOptionFieldsProps) {
)}
aria-label="Query type field"
>
<InlineFormLabel
tooltip="Choose the type of query you would like to run. An instant query queries against a single point in time. A range query queries over a range of time."
width="auto"
>
Query type
</InlineFormLabel>
<InlineFormLabel width="auto">Query type</InlineFormLabel>
<RadioButtonGroup
options={queryTypeOptions}
public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx
+8 -9
View File
@@ -20,9 +20,13 @@ export interface PromExploreExtraFieldProps {
export const PromExploreExtraField: React.FC<PromExploreExtraFieldProps> = memo(
({ queryType, stepValue, query, onChange, onStepChange, onQueryTypeChange, onKeyDownFunc }) => {
const rangeOptions = [
{ value: 'range', label: 'Range' },
{ value: 'instant', label: 'Instant' },
{ value: 'both', label: 'Both' },
{ value: 'range', label: 'Range', description: 'Run query over a range of time.' },
{
value: 'instant',
label: 'Instant',
description: 'Run query against a single point in time. For this query, the "To" time is used.',
},
{ value: 'both', label: 'Both', description: 'Run an Instant query and a Range query.' },
];
return (
@@ -38,12 +42,7 @@ export const PromExploreExtraField: React.FC<PromExploreExtraFieldProps> = memo(
)}
aria-label="Query type field"
>
<InlineFormLabel
width="auto"
tooltip="Choose the type of query you would like to run. An instant query queries against a single point in time. A range query queries over a range of time. With both, you'll run two queries - one instant and one range. "
>
Query type
</InlineFormLabel>
<InlineFormLabel width="auto">Query type</InlineFormLabel>
<RadioButtonGroup options={rangeOptions} value={queryType} onChange={onQueryTypeChange} />
</div>