Skip to content

Commit fc6f3cf

Browse files
witalisoftwitalisoft
authored
Merge pull request #42 from netdata/fix/direct-css-imports-fix
Fix direct css imports
2 parents 3955346 + c6a3add commit fc6f3cf

File tree

4 files changed

+156
-174
lines changed

4 files changed

+156
-174
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: 116 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React, { useState } from 'react';
2-
import { Input, LegacyForms, Select } from '@grafana/ui';
2+
import { Input, InlineField, InlineFieldRow, Select, useStyles2 } from '@grafana/ui';
33
import { QueryEditorProps, SelectableValue } from '@grafana/data';
4+
import { css } from '@emotion/css';
45
import { DataSource } from './datasource';
56
import { MyDataSourceOptions, MyQuery } from './shared/types';
67
import { useFetchSpaces } from 'shared/hooks/useFetchSpaces';
7-
import './styles.css';
88
import { useFetchRooms } from 'shared/hooks/useFetchRooms';
99
import { useFetchContexts } from 'shared/hooks/useFetchContexts';
1010
import { useFetchNodes } from 'shared/hooks/useFetchNodes';
@@ -15,9 +15,14 @@ import PubSub from 'pubsub-js';
1515

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

18-
const { FormField } = LegacyForms;
18+
const getStyles = () => ({
19+
mt: css`
20+
margin-top: 8px;
21+
`,
22+
});
1923

2024
const QueryEditor: React.FC<Props> = ({ datasource, query, range, onChange, onRunQuery }) => {
25+
const styles = useStyles2(getStyles);
2126
const { baseUrl } = datasource;
2227
const from = range!.from.valueOf();
2328
const to = range!.to.valueOf();
@@ -266,143 +271,117 @@ const QueryEditor: React.FC<Props> = ({ datasource, query, range, onChange, onRu
266271

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

‎src/styles.css‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

0 commit comments

Comments
 (0)