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

Dashboard: Update query group options (#63138)

Browse Source 
* Dashboard: update query group options

* chore: remove unused `console`

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

* fix: update placeholder

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

* feat(QueryGroupOptions): add tooltip example values

* feat(QueryGroupOptions): update interval tooltip

* Update public/app/features/query/components/QueryGroupOptions.tsx

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

* Update QueryGroupOptions.tsx

---------

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>
This commit is contained in:
Songhn 2023-06-22 15:44:55 +08:00 committed by GitHub
parent b6d4b701b9
commit c455b01078
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 31 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
public/app/features/query/components/QueryGroupOptions.tsx
View File

@ -2,7 +2,7 @@ import { css } from '@emotion/css';
import React, { PureComponent, ChangeEvent, FocusEvent } from 'react'; import React, { PureComponent, ChangeEvent, FocusEvent } from 'react';
import { rangeUtil, PanelData, DataSourceApi } from '@grafana/data'; import { rangeUtil, PanelData, DataSourceApi } from '@grafana/data';
import { Switch, Input, InlineField, InlineFormLabel, stylesFactory } from '@grafana/ui'; import { Switch, Input, InlineFormLabel, stylesFactory } from '@grafana/ui';
import { QueryOperationRow } from 'app/core/components/QueryOperationRow/QueryOperationRow'; import { QueryOperationRow } from 'app/core/components/QueryOperationRow/QueryOperationRow';
import { config } from 'app/core/config'; import { config } from 'app/core/config';
import { QueryGroupOptions } from 'app/types'; import { QueryGroupOptions } from 'app/types';
@ -288,7 +288,8 @@ export class QueryGroupOptionsEditor extends PureComponent<Props, State> {
tooltip={ tooltip={
<> <>
The evaluated interval that is sent to data source and is used in <code>$__interval</code> and{' '} The evaluated interval that is sent to data source and is used in <code>$__interval</code> and{' '}
<code>$__interval_ms</code> <code>$__interval_ms</code>. This value is not exactly equal to{' '}
<code>Time range / max data points</code>, it will approximate a series of magic number.
</> </>
} }
> >
@ -358,7 +359,19 @@ export class QueryGroupOptionsEditor extends PureComponent<Props, State> {
{this.renderQueryCachingTTLOption()} {this.renderQueryCachingTTLOption()}
<div className="gf-form"> <div className="gf-form">
<InlineFormLabel width={9}>Relative time</InlineFormLabel> <InlineFormLabel
width={9}
tooltip={
<>
Overrides the relative time range for individual panels, which causes them to be different than what is
selected in the dashboard time picker in the top-right corner of the dashboard. For example to configure
the Last 5 minutes the Relative time should be <code>now-5m</code> and <code>5m</code>, or variables
like <code>$_relativeTime</code>.
</>
}
>
Relative time
</InlineFormLabel>
<Input <Input
type="text" type="text"
className="width-6" className="width-6"
@ -371,7 +384,18 @@ export class QueryGroupOptionsEditor extends PureComponent<Props, State> {
</div> </div>
<div className="gf-form"> <div className="gf-form">
<span className="gf-form-label width-9">Time shift</span> <InlineFormLabel
width={9}
tooltip={
<>
Overrides the time range for individual panels by shifting its start and end relative to the time
picker. For example to configure the Last 1h the Time shift should be <code>now-1h</code> and{' '}
<code>1h</code>, or variables like <code>$_timeShift</code>.
</>
}
>
Time shift
</InlineFormLabel>
<Input <Input
type="text" type="text"
className="width-6" className="width-6"
@ -383,10 +407,9 @@ export class QueryGroupOptionsEditor extends PureComponent<Props, State> {
/> />
</div> </div>
{(timeShift || relativeTime) && ( {(timeShift || relativeTime) && (
<div className="gf-form-inline"> <div className="gf-form-inline align-items-center">
<InlineField label="Hide time info" labelWidth={18}> <InlineFormLabel width={9}>Hide time info</InlineFormLabel>
<Switch value={hideTimeOverride} onChange={this.onToggleTimeOverride} /> <Switch value={hideTimeOverride} onChange={this.onToggleTimeOverride} />
</InlineField>
</div> </div>
)} )}
</QueryOperationRow> </QueryOperationRow>