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

CloudMonitoring: Use EditorField components (#75102)

Browse Source 
* Use EditorField

* Fix lint
This commit is contained in:
Andreas Christou 2023-09-19 14:53:20 +01:00 committed by GitHub
parent 8a127c4351
commit 1386725251
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
public/app/plugins/datasource/cloud-monitoring/components/PromQLEditor.tsx
View File

@ -1,9 +1,8 @@
import { css, cx } from '@emotion/css';
import React from 'react'; import React from 'react';
import { SelectableValue } from '@grafana/data'; import { SelectableValue } from '@grafana/data';
import { EditorRow } from '@grafana/experimental'; import { EditorField, EditorRow } from '@grafana/experimental';
import { TextArea, InlineFormLabel } from '@grafana/ui'; import { TextArea, Input } from '@grafana/ui';
import CloudMonitoringDatasource from '../datasource'; import CloudMonitoringDatasource from '../datasource';
import { PromQLQuery } from '../types/query'; import { PromQLQuery } from '../types/query';
@ -61,32 +60,20 @@ export function PromQLQueryEditor({
onKeyDown={onReturnKeyDown} onKeyDown={onReturnKeyDown}
onChange={(e) => onChange({ ...query, expr: e.currentTarget.value })} onChange={(e) => onChange({ ...query, expr: e.currentTarget.value })}
/> />
<div <EditorField
className={cx( label="Min step"
'gf-form', tooltip={
css` 'Time units and built-in variables can be used here, for example: $__interval, $__rate_interval, 5s, 1m, 3h, 1d, 1y (Default if no unit is specified: 10s)'
flex-wrap: nowrap; }
`
)}
aria-label="Step field"
> >
<InlineFormLabel <Input
width={6}
tooltip={
'Time units and built-in variables can be used here, for example: $__interval, $__rate_interval, 5s, 1m, 3h, 1d, 1y (Default if no unit is specified: 10s)'
}
>
Min step
</InlineFormLabel>
<input
type={'string'} type={'string'}
className="gf-form-input width-4"
placeholder={'auto'} placeholder={'auto'}
onChange={(e) => onChange({ ...query, step: e.currentTarget.value })} onChange={(e) => onChange({ ...query, step: e.currentTarget.value })}
onKeyDown={onReturnKeyDown} onKeyDown={onReturnKeyDown}
value={query.step ?? ''} value={query.step ?? ''}
/> />
</div> </EditorField>
</EditorRow> </EditorRow>
</> </>
); );