Skip to content

Commit c6a3add

Browse files
kapantzakkapantzak
committed
Fix LegacyForms
1 parent b4f13f3 commit c6a3add

File tree

2 files changed

+121
-165
lines changed

2 files changed

+121
-165
lines changed

‎src/ConfigEditor.tsx‎

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import React, { ChangeEvent } from 'react';
2-
import { LegacyForms } from '@grafana/ui';
2+
import { InlineField, SecretInput } from '@grafana/ui';
33
import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
44
import { MyDataSourceOptions, MySecureJsonData } from './shared/types';
55

6-
const { SecretFormField } = LegacyForms;
7-
86
interface Props extends DataSourcePluginOptionsEditorProps<MyDataSourceOptions, MySecureJsonData> {}
97

108
export const ConfigEditor: React.FC<Props> = ({ onOptionsChange, options }) => {
@@ -34,19 +32,15 @@ export const ConfigEditor: React.FC<Props> = ({ onOptionsChange, options }) => {
3432
};
3533

3634
return (
37-
<div className="gf-form-group">
38-
<div className="gf-form">
39-
<SecretFormField
40-
isConfigured={secureJsonFields && secureJsonFields.apiToken}
41-
value={secureJsonData?.apiToken || ''}
42-
label="API Token"
43-
placeholder="Your Netdata Cloud API Token"
44-
labelWidth={6}
45-
inputWidth={20}
46-
onReset={onResetAPIToken}
47-
onChange={onAPITokenChange}
48-
/>
49-
</div>
50-
</div>
35+
<InlineField label="API Token" labelWidth={20} tooltip="Your Netdata Cloud API Token">
36+
<SecretInput
37+
isConfigured={secureJsonFields && secureJsonFields.apiToken}
38+
value={secureJsonData?.apiToken || ''}
39+
placeholder="Your Netdata Cloud API Token"
40+
width={40}
41+
onReset={onResetAPIToken}
42+
onChange={onAPITokenChange}
43+
/>
44+
</InlineField>
5145
);
5246
};

‎src/QueryEditor.tsx‎

Lines changed: 110 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState } from 'react';
2-
import { Input, LegacyForms, Select, useStyles2 } from '@grafana/ui';
2+
import { Input, InlineField, InlineFieldRow, Select, useStyles2 } from '@grafana/ui';
33
import { QueryEditorProps, SelectableValue } from '@grafana/data';
44
import { css } from '@emotion/css';
55
import { DataSource } from './datasource';
@@ -15,21 +15,9 @@ import PubSub from 'pubsub-js';
1515

1616
type Props = QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions>;
1717

18-
const { FormField } = LegacyForms;
19-
2018
const getStyles = () => ({
2119
mt: css`
22-
margin-top: 1em;
23-
`,
24-
flex: css`
25-
display: flex;
26-
justify-content: space-between;
27-
& > * {
28-
flex: 1;
29-
}
30-
& .gf-form-input {
31-
width: 100% !important;
32-
}
20+
margin-top: 8px;
3321
`,
3422
});
3523

@@ -283,143 +271,117 @@ const QueryEditor: React.FC<Props> = ({ datasource, query, range, onChange, onRu
283271

284272
return (
285273
<>
286-
<div className={`${styles.flex} ${styles.mt}`}>
287-
<FormField
288-
label="Space*"
289-
inputEl={
290-
<Select options={spaces} value={selectedSpace} onChange={onSpaceIdChange} allowCustomValue isSearchable />
291-
}
292-
/>
293-
294-
<FormField
295-
label="Room*"
296-
inputEl={
297-
<Select options={rooms} value={selectedRoom} onChange={onRoomIdChange} allowCustomValue isSearchable />
298-
}
299-
/>
300-
</div>
301-
302-
<div className={styles.mt}>
303-
<FormField
304-
label="Nodes"
305-
tooltip="No selected Nodes means 'All Nodes' from the Room"
306-
inputEl={
307-
<Select
308-
options={nodeList}
309-
value={selectedNodes}
310-
onChange={onNodesChange}
311-
allowCustomValue
312-
isSearchable
313-
isMulti
314-
/>
315-
}
316-
/>
317-
</div>
318-
<div className={`${styles.flex} ${styles.mt}`}>
319-
<FormField
320-
label="Context*"
321-
inputEl={
322-
<Select
323-
options={contexts}
324-
value={selectedContext}
325-
onChange={onContextIdChange}
326-
allowCustomValue
327-
isSearchable
328-
/>
329-
}
330-
/>
331-
332-
<FormField
333-
label="Dimensions"
334-
inputEl={
335-
<Select
336-
options={allDimensions}
337-
value={selectedDimensions}
338-
onChange={onDimensionsChange}
339-
allowCustomValue
340-
isSearchable
341-
isMulti
342-
/>
343-
}
344-
/>
345-
</div>
346-
347-
<div className={`${styles.flex} ${styles.mt}`}>
348-
<FormField
349-
label="Grouping by*"
350-
inputEl={
351-
<Select
352-
options={groupingByList}
353-
value={selectedGroupBy}
354-
onChange={onGroupByChange}
355-
allowCustomValue
356-
isSearchable
357-
/>
358-
}
359-
/>
360-
<FormField
274+
<InlineFieldRow className={styles.mt}>
275+
<InlineField label="Space*" grow>
276+
<Select options={spaces} value={selectedSpace} onChange={onSpaceIdChange} allowCustomValue isSearchable />
277+
</InlineField>
278+
279+
<InlineField label="Room*" grow>
280+
<Select options={rooms} value={selectedRoom} onChange={onRoomIdChange} allowCustomValue isSearchable />
281+
</InlineField>
282+
</InlineFieldRow>
283+
284+
<InlineFieldRow className={styles.mt}>
285+
<InlineField label="Nodes" tooltip="No selected Nodes means 'All Nodes' from the Room" grow>
286+
<Select
287+
options={nodeList}
288+
value={selectedNodes}
289+
onChange={onNodesChange}
290+
allowCustomValue
291+
isSearchable
292+
isMulti
293+
/>
294+
</InlineField>
295+
</InlineFieldRow>
296+
297+
<InlineFieldRow className={styles.mt}>
298+
<InlineField label="Context*" grow>
299+
<Select
300+
options={contexts}
301+
value={selectedContext}
302+
onChange={onContextIdChange}
303+
allowCustomValue
304+
isSearchable
305+
/>
306+
</InlineField>
307+
308+
<InlineField label="Dimensions" grow>
309+
<Select
310+
options={allDimensions}
311+
value={selectedDimensions}
312+
onChange={onDimensionsChange}
313+
allowCustomValue
314+
isSearchable
315+
isMulti
316+
/>
317+
</InlineField>
318+
</InlineFieldRow>
319+
320+
<InlineFieldRow className={styles.mt}>
321+
<InlineField label="Grouping by*" grow>
322+
<Select
323+
options={groupingByList}
324+
value={selectedGroupBy}
325+
onChange={onGroupByChange}
326+
allowCustomValue
327+
isSearchable
328+
/>
329+
</InlineField>
330+
331+
<InlineField
361332
label="Grouping function*"
362333
tooltip="The aggregation function to be applied when multiple data sources exists for one node (multiple instances). This is disabled when not applicable."
363-
labelWidth={10}
364-
inputEl={
365-
<Select
366-
disabled={!isGroupFunctionAvailable()}
367-
options={Methods}
368-
value={selectedMethod}
369-
onChange={onMethodChange}
370-
allowCustomValue
371-
isSearchable
372-
/>
373-
}
374-
/>
375-
<FormField
376-
label="Aggregation function*"
377-
tooltip="Aggregation function over time"
378-
labelWidth={11}
379-
inputEl={
380-
<Select
381-
options={Aggreagations}
382-
value={selectedAggregations}
383-
onChange={onAggreagationChange}
384-
allowCustomValue
385-
isSearchable
386-
/>
387-
}
388-
/>
389-
</div>
390-
391-
<div className={`${styles.flex} ${styles.mt}`}>
392-
<FormField
393-
label="Filter by"
394-
inputEl={
395-
<Select
396-
options={filterList}
397-
value={selectedFilter}
398-
onChange={onFilterByChange}
399-
allowCustomValue
400-
isSearchable
401-
/>
402-
}
403-
/>
404-
<FormField
405-
label="Value"
406-
labelWidth={8}
407-
inputEl={
408-
<Select
409-
options={filterByValues}
410-
value={selectedFilterValue}
411-
onChange={onFilterValueChange}
412-
allowCustomValue
413-
isSearchable
414-
/>
415-
}
416-
/>
417-
</div>
418-
419-
<div className={`${styles.flex} ${styles.mt}`}>
420-
<FormField label="Unit" labelWidth={8} inputEl={<Input value={units} disabled />} />
334+
grow
335+
>
336+
<Select
337+
disabled={!isGroupFunctionAvailable()}
338+
options={Methods}
339+
value={selectedMethod}
340+
onChange={onMethodChange}
341+
allowCustomValue
342+
isSearchable
343+
/>
344+
</InlineField>
345+
346+
<InlineField label="Aggregation function*" tooltip="Aggregation function over time" grow>
347+
<Select
348+
options={Aggreagations}
349+
value={selectedAggregations}
350+
onChange={onAggreagationChange}
351+
allowCustomValue
352+
isSearchable
353+
/>
354+
</InlineField>
355+
</InlineFieldRow>
356+
357+
<InlineFieldRow className={styles.mt}>
358+
<InlineField label="Filter by" grow>
359+
<Select
360+
options={filterList}
361+
value={selectedFilter}
362+
onChange={onFilterByChange}
363+
allowCustomValue
364+
isSearchable
365+
/>
366+
</InlineField>
367+
368+
<InlineField label="Value" grow>
369+
<Select
370+
options={filterByValues}
371+
value={selectedFilterValue}
372+
onChange={onFilterValueChange}
373+
allowCustomValue
374+
isSearchable
375+
/>
376+
</InlineField>
377+
</InlineFieldRow>
378+
379+
<InlineFieldRow className={styles.mt}>
380+
<InlineField label="Unit" grow>
381+
<Input value={units} disabled />
382+
</InlineField>
421383
<div />
422-
</div>
384+
</InlineFieldRow>
423385
</>
424386
);
425387
};

0 commit comments

Comments
 (0)