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

Chore: remove legacy components and CSS classes for OpenTsdbDetails Component (#76165)

Browse Source 
* chore: remove legacy components and classes

* Update public/app/plugins/datasource/opentsdb/components/OpenTsdbDetails.tsx

Co-authored-by: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>

* chore: format and add width

* chore: fix formatting

* Update public/app/plugins/datasource/opentsdb/components/OpenTsdbDetails.tsx

Co-authored-by: ismail simsek <ismailsimsek09@gmail.com>

---------

Co-authored-by: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Co-authored-by: ismail simsek <ismailsimsek09@gmail.com>
This commit is contained in:
Aldrin 2023-10-12 23:06:22 +05:30 committed by GitHub
parent f3a997acde
commit cb1dfbeeb4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 33 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
public/app/plugins/datasource/opentsdb/components/OpenTsdbDetails.tsx
View File

@ -1,12 +1,10 @@
import React, { SyntheticEvent, useId } from 'react'; import React, { SyntheticEvent, useId } from 'react';
import { DataSourceSettings, SelectableValue } from '@grafana/data'; import { DataSourceSettings, SelectableValue } from '@grafana/data';
import { InlineFormLabel, LegacyForms } from '@grafana/ui'; import { Select, Input, Field, FieldSet } from '@grafana/ui';
import { OpenTsdbOptions } from '../types'; import { OpenTsdbOptions } from '../types';
const { Select, Input } = LegacyForms;
const tsdbVersions = [ const tsdbVersions = [
{ label: '<=2.1', value: 1 }, { label: '<=2.1', value: 1 },
{ label: '==2.2', value: 2 }, { label: '==2.2', value: 2 },
@ -30,43 +28,38 @@ export const OpenTsdbDetails = (props: Props) => {
return ( return (
<> <>
<h5>OpenTSDB settings</h5> <FieldSet label="OpenTSDB settings">
<div className="gf-form"> <Field htmlFor={`select-version-${idSuffix}`} label="Version">
<InlineFormLabel width={7} htmlFor={`select-version-${idSuffix}`}> <Select
Version inputId={`select-version-${idSuffix}`}
</InlineFormLabel> options={tsdbVersions}
<Select value={tsdbVersions.find((version) => version.value === value.jsonData.tsdbVersion) ?? tsdbVersions[0]}
inputId={`select-version-${idSuffix}`} onChange={onSelectChangeHandler('tsdbVersion', value, onChange)}
options={tsdbVersions} width={20}
value={tsdbVersions.find((version) => version.value === value.jsonData.tsdbVersion) ?? tsdbVersions[0]} />
onChange={onSelectChangeHandler('tsdbVersion', value, onChange)} </Field>
/> <Field htmlFor={`select-resolution-${idSuffix}`} label="Resolution">
</div> <Select
<div className="gf-form"> inputId={`select-resolution-${idSuffix}`}
<InlineFormLabel width={7} htmlFor={`select-resolution-${idSuffix}`}> options={tsdbResolutions}
Resolution value={
</InlineFormLabel> tsdbResolutions.find((resolution) => resolution.value === value.jsonData.tsdbResolution) ??
<Select tsdbResolutions[0]
inputId={`select-resolution-${idSuffix}`} }
options={tsdbResolutions} onChange={onSelectChangeHandler('tsdbResolution', value, onChange)}
value={ width={20}
tsdbResolutions.find((resolution) => resolution.value === value.jsonData.tsdbResolution) ?? />
tsdbResolutions[0] </Field>
} <Field htmlFor={`lookup-input-${idSuffix}`} label="Lookup limit">
onChange={onSelectChangeHandler('tsdbResolution', value, onChange)} <Input
/> id={`lookup-input-${idSuffix}`}
</div> type="number"
<div className="gf-form"> value={value.jsonData.lookupLimit ?? 1000}
<InlineFormLabel width={7} htmlFor={`lookup-input-${idSuffix}`}> onChange={onInputChangeHandler('lookupLimit', value, onChange)}
Lookup limit width={20}
</InlineFormLabel> />
<Input </Field>
id={`lookup-input-${idSuffix}`} </FieldSet>
type="number"
value={value.jsonData.lookupLimit ?? 1000}
onChange={onInputChangeHandler('lookupLimit', value, onChange)}
/>
</div>
</> </>
); );
}; };