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

Pyroscope: Remove LegacyForms from ConfigEditor (#104973)

Browse Source 
* Pyroscope: Remove LegacyForms from ConfigEditor

* Pyroscope: Align fields in form

* Pyroscope: Add id to input and label for a11y

* Update public/app/plugins/datasource/grafana-pyroscope-datasource/ConfigEditor.tsx

---------

Co-authored-by: Piotr Jamróz <pm.jamroz@gmail.com>
Co-authored-by: Joey <joey.tawadrous@grafana.com>
This commit is contained in:
Angel Kozlev
2025-07-28 16:21:36 +01:00
committed by GitHub
co-authored by Piotr Jamróz Joey
parent e261d5f14a
commit 2d3fde4607
1 changed files with 25 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/plugins/datasource/grafana-pyroscope-datasource/ConfigEditor.tsx
+25 -39
View File
@@ -11,15 +11,7 @@ import {
convertLegacyAuthProps,
} from '@grafana/plugin-ui';
import { config } from '@grafana/runtime';
import {
Divider,
EventsWithValidation,
LegacyForms,
SecureSocksProxySettings,
Stack,
regexValidation,
useStyles2,
} from '@grafana/ui';
import { Divider, Field, Input, SecureSocksProxySettings, Stack, useStyles2 } from '@grafana/ui';
import { PyroscopeDataSourceOptions } from './types';
@@ -56,7 +48,7 @@ export const ConfigEditor = (props: Props) => {
isCollapsible={true}
isInitiallyOpen={false}
>
<Stack gap={5} direction="column">
<Stack gap={5} direction="column" maxWidth={72}>
<AdvancedHttpSettings config={options} onChange={onOptionsChange} />
{config.secureSocksDSProxyEnabled && (
@@ -64,36 +56,30 @@ export const ConfigEditor = (props: Props) => {
)}
<ConfigSubSection title="Querying">
<LegacyForms.FormField
<Field
noMargin
label="Minimal step"
labelWidth={13}
inputEl={
<LegacyForms.Input
className="width-6"
value={options.jsonData.minStep}
spellCheck={false}
placeholder="15s"
onChange={(event) => {
onOptionsChange({
...options,
jsonData: {
...options.jsonData,
minStep: event.currentTarget.value,
},
});
}}
validationEvents={{
[EventsWithValidation.onBlur]: [
regexValidation(
/^$|^\d+(ms|[Mwdhmsy])$/,
'Value is not valid, you can use number with time unit specifier: y, M, w, d, h, m, s'
),
],
}}
/>
}
tooltip="Minimal step used for metric query. Should be the same or higher as the scrape interval setting in the Pyroscope database."
/>
htmlFor="minimal-step"
description="Minimal step used for metric query. Should be the same or higher as the scrape interval setting in the Pyroscope database."
error="Value is not valid, you can use number with time unit specifier: y, M, w, d, h, m, s"
invalid={!!options.jsonData.minStep && !/^\d+(ms|[Mwdhmsy])$/.test(options.jsonData.minStep)}
>
<Input
id="minimal-step"
value={options.jsonData.minStep}
spellCheck={false}
placeholder="15s"
onChange={(event) => {
onOptionsChange({
...options,
jsonData: {
...options.jsonData,
minStep: event.currentTarget.value,
},
});
}}
/>
</Field>
</ConfigSubSection>
</Stack>
</ConfigSection>